@acorex/platform 20.6.0-next.21 → 20.6.0-next.23

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

@@ -1,20 +1,20 @@
 import { AXToastService } from '@acorex/components/toast';
 import * as i6 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
-import * as i4 from '@acorex/platform/common';
+import * as i4$1 from '@acorex/platform/common';
 import { AXPSettingService, AXPFilterOperatorMiddlewareService, AXPEntityCommandScope, getEntityInfo, AXPRefreshEvent, AXPReloadEvent, AXPCommonSettings, AXPCleanNestedFilters, AXPWorkflowNavigateAction, AXPToastAction, AXP_SEARCH_DEFINITION_PROVIDER } from '@acorex/platform/common';
-import * as i1$2 from '@acorex/platform/core';
-import { AXPDeviceService, AXPBroadcastEventService, resolveActionLook, AXPExpressionEvaluatorService, AXPDistributedEventListenerService, AXPPlatformScope, extractValue, setSmart, getChangedPaths, AXPSystemActionType } from '@acorex/platform/core';
+import * as i1$1 from '@acorex/platform/core';
+import { AXPDeviceService, AXPBroadcastEventService, resolveActionLook, AXPExpressionEvaluatorService, AXPDistributedEventListenerService, AXPPlatformScope, AXHighlightService, extractValue, setSmart, getChangedPaths, AXPSystemActionType } from '@acorex/platform/core';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injector, runInInjectionContext, Injectable, input, viewChild, signal, ElementRef, ChangeDetectionStrategy, Component, ApplicationRef, EnvironmentInjector, createComponent, computed, afterNextRender, ViewEncapsulation, ChangeDetectorRef, effect, viewChildren, linkedSignal, untracked, HostBinding, ViewChild, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injector, runInInjectionContext, Injectable, input, viewChild, signal, ElementRef, ChangeDetectionStrategy, Component, ApplicationRef, EnvironmentInjector, createComponent, computed, effect, Input, afterNextRender, ViewEncapsulation, ChangeDetectorRef, viewChildren, linkedSignal, untracked, HostBinding, ViewChild, NgModule } from '@angular/core';
 import { Subject, takeUntil } from 'rxjs';
 import { AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
-import { merge, castArray, get, cloneDeep, set, orderBy, isNil, isEqual, isEmpty, sortBy } from 'lodash-es';
+import { merge, castArray, get, cloneDeep, set, orderBy, isNil, isEmpty, isEqual, sortBy } from 'lodash-es';
 import { AXPSessionService, AXPAuthGuard } from '@acorex/platform/auth';
 import { Router, RouterModule, ROUTES } from '@angular/router';
 import * as i3 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
-import * as i1 from '@acorex/components/loading';
+import * as i4 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import * as i2 from '@acorex/components/popover';
 import { AXPopoverModule } from '@acorex/components/popover';
@@ -33,31 +33,33 @@ 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 i2$1 from '@acorex/components/decorators';
+import * as i2$1 from '@acorex/components/check-box';
+import { AXCheckBoxModule } from '@acorex/components/check-box';
+import * as i3$2 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import { AXBasePageComponent } from '@acorex/components/page';
-import * as i3$2 from '@acorex/components/search-box';
+import * as i4$2 from '@acorex/components/search-box';
 import { AXSearchBoxModule, AXSearchBoxComponent } from '@acorex/components/search-box';
-import * as i4$1 from '@acorex/components/skeleton';
+import * as i5$1 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import { AXTreeViewComponent } from '@acorex/components/tree-view';
+import { AXPStateMessageComponent, AXPDataSelectorService, AXPWidgetPropertyViewerComponent } from '@acorex/platform/layout/components';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 import * as i2$2 from '@acorex/components/badge';
 import { AXBadgeModule } from '@acorex/components/badge';
-import * as i5$1 from '@acorex/components/form';
+import * as i5$2 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
+import * as i6$1 from '@acorex/components/tag-box';
+import { AXTagBoxModule, AXTagBoxComponent } from '@acorex/components/tag-box';
 import { AXValidationModule } from '@acorex/core/validation';
 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$2 from '@acorex/components/dropdown';
+import * as i4$3 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
-import * as i1$1 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$3 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 { transform, isEqual as isEqual$1 } from 'lodash';
 
 function ensureListActions(ctx) {
@@ -1034,7 +1036,7 @@ class AXPCreateEntityCommand {
         const entityRef = await this.entityService.resolve(moduleName, entityName);
         let dialogRef;
         try {
-            let chain = this.entityForm.entity(`${moduleName}.${entityName}`).create(input.__metadata__);
+            let chain = this.entityForm.entity(`${moduleName}.${entityName}`).create(data);
             chain.actions((actions) => {
                 actions.cancel('@general:actions.cancel.title');
                 actions.submit('@general:actions.create.title');
@@ -1679,7 +1681,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: 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 }); }
+    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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityDetailPopoverComponent, decorators: [{
             type: Component,
@@ -4323,24 +4325,48 @@ class AXPPageListConverter extends AXPBaseRelatedEntityConverter {
                             message: {
                                 code: 'ACTION_NOT_FOUND',
                                 text: `Action ${commandName} not found`,
-                            }
+                            },
                         };
                     }
-                    await context.workflowService.execute(commandName, {
-                        entity: getEntityInfo(entityDef).source,
-                        entityInfo: {
-                            name: entityDef.name,
-                            module: entityDef.module,
-                            title: entityDef.title,
-                            parentKey: entityDef.parentKey,
-                            source: `${entityDef.module}.${entityDef.name}`,
-                        },
-                        data: action.scope == AXPEntityCommandScope.Selected
-                            ? executeContext
-                            : action.options?.['process']?.data || null,
-                        options: action.options,
-                        metadata: action.metadata,
-                    });
+                    if (context.commandService.exists(commandName)) {
+                        // check options for evaluation
+                        await context.commandService.execute(commandName, {
+                            __context__: {
+                                entity: getEntityInfo(entityDef).source,
+                                entityInfo: {
+                                    name: entityDef.name,
+                                    module: entityDef.module,
+                                    title: entityDef.title,
+                                    parentKey: entityDef.parentKey,
+                                    source: `${entityDef.module}.${entityDef.name}`,
+                                },
+                                data: action.scope == AXPEntityCommandScope.Selected
+                                    ? executeContext
+                                    : action.options?.['process']?.data || null,
+                                options: action.options,
+                                metadata: action.metadata,
+                            },
+                            options: action.options,
+                            metadata: action.metadata,
+                        });
+                    }
+                    else {
+                        await context.workflowService.execute(commandName, {
+                            entity: getEntityInfo(entityDef).source,
+                            entityInfo: {
+                                name: entityDef.name,
+                                module: entityDef.module,
+                                title: entityDef.title,
+                                parentKey: entityDef.parentKey,
+                                source: `${entityDef.module}.${entityDef.name}`,
+                            },
+                            data: action.scope == AXPEntityCommandScope.Selected
+                                ? executeContext
+                                : action.options?.['process']?.data || null,
+                            options: action.options,
+                            metadata: action.metadata,
+                        });
+                    }
                     return { success: true };
                 }
                 catch (error) {
@@ -4367,6 +4393,7 @@ class AXPPageListConverter extends AXPBaseRelatedEntityConverter {
                         entity: relatedEntity.entity,
                         showEntityActions: false,
                         actions: evaluatedActions,
+                        includeColumns: relatedEntity.columns,
                     },
                 },
             ],
@@ -5274,7 +5301,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.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$1.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: [{
@@ -5282,7 +5309,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: AXPRelatedEntityConverterFactory }, { type: AXPMainEntityContentBuilder }, { type: AXPLayoutAdapterBuilder }, { type: i4.AXPFilterOperatorMiddlewareService }] });
+        }], ctorParameters: () => [{ type: AXPRelatedEntityConverterFactory }, { type: AXPMainEntityContentBuilder }, { type: AXPLayoutAdapterBuilder }, { type: i4$1.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');
@@ -5897,13 +5924,13 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
         //#region ----   Services & Dependencies   ----
         this.categoryTreeService = inject(AXPCategoryTreeService);
         this.translationService = inject(AXTranslationService);
+        this.highlightService = inject(AXHighlightService);
         //#endregion
         //#region ----   Properties (Set by popup service)   ----
         this.entityKey = signal('', ...(ngDevMode ? [{ debugName: "entityKey" }] : []));
         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
@@ -5922,6 +5949,7 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
         this.noRecordsTitle = signal('', ...(ngDevMode ? [{ debugName: "noRecordsTitle" }] : []));
         this.currentSearchTerm = null;
         this.isRefreshing = false;
+        this.isUpdatingSelection = false; // Flag to prevent recursive updates during batch operations
         /**
          * Computed property to check if we should show the "no search results" empty state.
          * Returns true when search is active, not searching, and no results found.
@@ -5941,6 +5969,7 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
         this.relevantNodeIds = new Set(); // For search filtering
         this.expandedNodesBeforeSearch = []; // Store expanded nodes before search to restore after
         this.nodesExpandedDuringSearch = []; // Track nodes we expanded during search
+        this.isInitializing = false; // Flag to track if we're in initialization phase
         /** Datasource callback for tree-view component. */
         this.datasource = async (id) => {
             if (!this.treeData || !this.treeConfig) {
@@ -5992,15 +6021,42 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
                 this.markNodeAsSelectedIfNeeded(node);
             });
             // After children load, programmatically select pre-selected nodes
+            // Use a small delay to ensure nodes are fully added to tree structure
             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);
-                    }
-                });
+                // Use setTimeout to ensure nodes are in tree structure before selecting
+                setTimeout(() => {
+                    const selectedIds = this.selectedNodeIds();
+                    childNodes.forEach((node) => {
+                        const nodeId = String(node['id'] ?? '');
+                        if (nodeId && selectedIds.includes(nodeId) && nodeId !== 'all') {
+                            try {
+                                // Try to find and select the node
+                                const treeNode = treeComponent.findNode(nodeId);
+                                if (treeNode) {
+                                    treeComponent.selectNode(nodeId);
+                                }
+                                else {
+                                    // If node not found, try again after a short delay (might still be loading)
+                                    setTimeout(() => {
+                                        try {
+                                            const retryNode = treeComponent.findNode(nodeId);
+                                            if (retryNode) {
+                                                treeComponent.selectNode(nodeId);
+                                            }
+                                        }
+                                        catch {
+                                            // Node still not found, will be selected when it loads
+                                        }
+                                    }, 50);
+                                }
+                            }
+                            catch (error) {
+                                // Node might not be in tree yet, will be selected when it loads
+                            }
+                        }
+                    });
+                }, 10);
             }
             return childNodes;
         };
@@ -6019,6 +6075,7 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
             return;
         }
         this.loading.set(true);
+        this.isInitializing = true; // Mark that we're in initialization phase
         try {
             this.treeConfig = {
                 entityKey: this.entityKey(),
@@ -6028,6 +6085,7 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
             this.treeData = await this.categoryTreeService.initializeCategoryTree(this.treeConfig);
             if (!this.treeData) {
                 this.loading.set(false);
+                this.isInitializing = false;
                 return;
             }
             // Get parentKey from entity definition
@@ -6035,13 +6093,22 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
                 this.treeConfig.parentKey = this.treeData.categoryEntityDef.parentKey;
             }
             // Initialize selected nodes and load their data into cache
+            // Wait for tree to be ready before syncing selection
+            await new Promise((resolve) => setTimeout(resolve, 100));
             await this.updateSelectedNodes(this.selectedValues());
+            // After initial sync, wait a bit more and sync again to catch any nodes that loaded late
+            await new Promise((resolve) => setTimeout(resolve, 200));
+            const finalSelectedIds = this.selectedNodeIds();
+            if (finalSelectedIds.length > 0) {
+                await this.syncSelectionWithTree(finalSelectedIds);
+            }
         }
         catch (error) {
             console.error('Error loading entity definition:', error);
         }
         finally {
             this.loading.set(false);
+            this.isInitializing = false; // Mark initialization as complete
         }
     }
     //#endregion
@@ -6069,11 +6136,11 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
             return;
         }
         // Prevent concurrent searches
-        if (this.isSearching() && this.currentSearchTerm !== null) {
-            if (this.currentSearchTerm === searchTerm) {
-                return;
-            }
-        }
+        // if (this.isSearching() && this.currentSearchTerm !== null) {
+        //   if (this.currentSearchTerm === searchTerm) {
+        //     return;
+        //   }
+        // }
         this.searchValue.set(event.value ?? '');
         this.currentSearchTerm = searchTerm;
         const treeComponent = this.tree();
@@ -6113,8 +6180,12 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
             }
             if (!searchResults || searchResults.length === 0) {
                 this.matchingNodeIds.clear();
+                this.relevantNodeIds.clear();
                 this.searchResultCount.set(0);
                 await this.updateTranslatedMessages(0, searchTerm);
+                // Clear highlighting and reload tree to show all nodes
+                this.highlightService.clear();
+                await treeComponent.reloadData();
                 return;
             }
             // Store matching node IDs from search results
@@ -6167,11 +6238,25 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
                     }
                 }
             }
+            // Step 5: Apply highlighting after tree is rendered
+            // Use setTimeout to ensure DOM is updated after tree reload
+            setTimeout(() => {
+                if (this.searchValue().trim()) {
+                    this.highlightService.highlight('ax-tree-view .ax-truncate', this.searchValue().trim());
+                }
+            }, 100);
         }
         catch (error) {
             console.error('Error searching categories:', error);
             this.matchingNodeIds.clear();
+            this.relevantNodeIds.clear();
             this.searchResultCount.set(0);
+            this.highlightService.clear();
+            // Reload tree to clear any filters
+            const treeComponent = this.tree();
+            if (treeComponent) {
+                await treeComponent.reloadData();
+            }
         }
         finally {
             if (this.currentSearchTerm === searchTerm) {
@@ -6438,6 +6523,8 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
         this.isSearching.set(false);
         this.matchingNodeIds.clear();
         this.relevantNodeIds.clear();
+        // Clear highlighting
+        this.highlightService.clear();
         const treeComponent = this.tree();
         if (!treeComponent) {
             this.expandedNodesBeforeSearch = [];
@@ -6477,11 +6564,22 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
         if (nodeData && typeof nodeData === 'object' && nodeData !== null && !Array.isArray(nodeData)) {
             this.nodeDataCache.set(nodeId, nodeData);
         }
+        // NOTE: We do NOT call loadAndSelectChildrenRecursively here
+        // The recursive selection should only happen when user explicitly selects a node via checkbox
+        // (handled in handleCheckboxChange). This prevents intermediate parent states from
+        // triggering unwanted sibling selections.
     }
     async onSelectionChange(event) {
+        // Don't process during initialization or batch updates - let those handle it
+        if (this.isInitializing || this.isUpdatingSelection) {
+            return;
+        }
         // Update selected node IDs from the tree component's selection state
+        // The tree component with intermediate-nested behavior automatically manages parent states
         const selectedNodes = event.selectedNodes || [];
         const selectedIds = selectedNodes.map((node) => String(node['id'] ?? '')).filter((id) => id && id !== 'all');
+        // Sync with tree component's selection state
+        // This includes parents that are automatically selected when all children are selected
         this.selectedNodeIds.set(selectedIds);
         // Cache node data for all selected nodes
         selectedNodes.forEach((node) => {
@@ -6534,182 +6632,925 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
     isMatchingNode(nodeId) {
         return this.matchingNodeIds.has(nodeId);
     }
-    //#endregion
-    async updateSelectedNodes(selectedIds) {
-        if (!selectedIds || selectedIds.length === 0) {
-            this.selectedNodeIds.set([]);
-            return;
+    /**
+     * Checks if a node is currently selected
+     */
+    isNodeSelected(nodeId) {
+        if (!nodeId || nodeId === 'all') {
+            return false;
         }
-        const ids = selectedIds.filter((id) => id && id !== 'all');
-        this.selectedNodeIds.set(ids);
-        // 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 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
+        const id = String(nodeId);
+        return this.selectedNodeIds().includes(id);
     }
     /**
-     * Loads node data for IDs that are selected but not yet in the cache.
-     * This is critical for pre-selected values in collapsed branches.
+     * Handles checkbox change event to toggle node selection
+     * In multiple mode: recursively selects/deselects children
+     * Parent states are handled automatically by tree component's intermediate-nested behavior
      */
-    async loadMissingNodeData(selectedIds) {
-        if (!this.treeData || !this.treeConfig || selectedIds.length === 0) {
+    async handleCheckboxChange(nodeId, checked) {
+        if (!nodeId || nodeId === 'all') {
             return;
         }
-        // Find IDs that are selected but not in cache
-        const missingIds = selectedIds.filter((id) => !this.nodeDataCache.has(id));
-        if (missingIds.length === 0) {
+        const id = String(nodeId);
+        const treeComponent = this.tree();
+        if (!treeComponent) {
+            return;
+        }
+        if (checked) {
+            // Select the node and recursively select all its children
+            await this.selectNodeAndChildren(id);
+        }
+        else {
+            // Deselect the node and recursively deselect all its children
+            await this.deselectNodeAndChildren(id);
+        }
+        // Note: Parent states (select/intermediate) are handled automatically by the tree component
+        // with selectionBehavior: 'intermediate-nested'. We don't need to manually update them.
+    }
+    /**
+     * Selects a node and recursively selects all its children
+     */
+    async selectNodeAndChildren(nodeId) {
+        const treeComponent = this.tree();
+        if (!treeComponent) {
             return;
         }
+        // Set flag to prevent recursive updates during batch operation
+        this.isUpdatingSelection = true;
         try {
-            const valueField = this.treeConfig.valueField || 'id';
-            const categoryEntityQueryFunc = this.treeData.categoryEntityQueryFunc;
-            if (!categoryEntityQueryFunc) {
-                return;
+            // Collect all nodes to select (node + all descendants)
+            const nodesToSelect = new Set([nodeId]);
+            await this.collectAllDescendants(nodeId, nodesToSelect);
+            // Batch update selectedNodeIds
+            const currentSelected = this.selectedNodeIds();
+            const newSelected = [...currentSelected];
+            for (const id of nodesToSelect) {
+                if (!newSelected.includes(id)) {
+                    newSelected.push(id);
+                }
             }
-            // Query for missing nodes by their IDs
-            const event = {
-                ...this.treeData.basicQueryEvent,
-                filter: {
-                    filters: missingIds.map((id) => ({
-                        field: valueField,
-                        value: id,
-                        operator: { type: 'equal' },
-                    })),
-                    logic: 'or',
-                },
-            };
-            const res = await categoryEntityQueryFunc(event);
-            if (res?.items) {
-                // Cache the fetched node data
-                res.items.forEach((item) => {
-                    const itemId = String(item[valueField] ?? '');
-                    if (itemId) {
-                        this.nodeDataCache.set(itemId, item);
+            this.selectedNodeIds.set(newSelected);
+            // Batch select in tree component (with small delays to prevent glitches)
+            for (const id of nodesToSelect) {
+                try {
+                    const node = treeComponent.findNode(id);
+                    if (node) {
+                        treeComponent.selectNode(id);
+                        // Small delay to prevent overwhelming the tree component
+                        await new Promise((resolve) => setTimeout(resolve, 5));
                     }
-                });
+                }
+                catch {
+                    // Node might not be in tree yet
+                }
             }
         }
-        catch (error) {
-            console.error('Error loading missing node data:', error);
+        finally {
+            this.isUpdatingSelection = false;
         }
     }
     /**
-     * Marks nodes as selected in the tree structure based on selectedNodeIds.
-     * This ensures pre-selected nodes appear selected when the tree is rendered.
+     * Collects all descendant node IDs recursively
      */
-    markNodesAsSelected(node) {
-        const selectedIds = this.selectedNodeIds();
-        if (selectedIds.length === 0) {
+    async collectAllDescendants(parentId, collection) {
+        if (!this.treeData || !this.treeConfig || !parentId || parentId === 'all') {
             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);
-            });
+        try {
+            const childNodes = await this.datasource(parentId);
+            if (!childNodes || childNodes.length === 0) {
+                return;
+            }
+            for (const childNode of childNodes) {
+                const childId = String(childNode['id'] ?? '');
+                if (childId && childId !== 'all' && !collection.has(childId)) {
+                    collection.add(childId);
+                    // Cache node data
+                    const nodeData = childNode['data'];
+                    if (nodeData && typeof nodeData === 'object') {
+                        this.nodeDataCache.set(childId, nodeData);
+                    }
+                    else if (childNode && typeof childNode === 'object') {
+                        const valueField = this.treeConfig.valueField || 'id';
+                        const textField = this.treeConfig.textField || 'title';
+                        const dataObj = {
+                            [valueField]: childId,
+                            [textField]: childNode['title'] ?? '',
+                            ...childNode,
+                        };
+                        this.nodeDataCache.set(childId, dataObj);
+                    }
+                    // Recursively collect descendants
+                    await this.collectAllDescendants(childId, collection);
+                }
+            }
         }
-    }
-    /**
-     * 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;
+        catch (error) {
+            console.error(`Error collecting descendants for node ${parentId}:`, error);
         }
     }
     /**
-     * Marks a node and its children as disabled if the node ID matches the excluded ID.
+     * Deselects a node and recursively deselects all its children
      */
-    markNodeAsDisabled(node, excludedId) {
-        const nodeId = String(node['id'] ?? '');
-        if (nodeId === excludedId) {
-            node['disabled'] = true;
+    async deselectNodeAndChildren(nodeId) {
+        const treeComponent = this.tree();
+        if (!treeComponent) {
+            return;
         }
-        // Recursively mark children
-        const nodeChildren = node['children'];
-        if (nodeChildren) {
-            nodeChildren.forEach((child) => {
-                this.markNodeAsDisabled(child, excludedId);
-            });
+        // Set flag to prevent recursive updates during batch operation
+        this.isUpdatingSelection = true;
+        try {
+            // Collect all nodes to deselect (node + all descendants)
+            const nodesToDeselect = new Set([nodeId]);
+            await this.collectAllDescendants(nodeId, nodesToDeselect);
+            // Batch update selectedNodeIds
+            const currentSelected = this.selectedNodeIds();
+            const newSelected = currentSelected.filter((id) => !nodesToDeselect.has(id));
+            this.selectedNodeIds.set(newSelected);
+            // Batch deselect in tree component (with small delays to prevent glitches)
+            for (const id of nodesToDeselect) {
+                try {
+                    const node = treeComponent.findNode(id);
+                    if (node) {
+                        treeComponent.deselectNode(id);
+                        // Small delay to prevent overwhelming the tree component
+                        await new Promise((resolve) => setTimeout(resolve, 5));
+                    }
+                }
+                catch {
+                    // Node might not be in tree
+                }
+            }
+        }
+        finally {
+            this.isUpdatingSelection = false;
         }
     }
     /**
-     * Processes root node: marks excluded as disabled, marks selected, and syncs selection with tree component
+     * Recursively deselects all children of a parent node
      */
-    processRootNode(rootNode) {
-        const excludedId = this.excludedNodeId();
-        if (excludedId) {
-            this.markNodeAsDisabled(rootNode, excludedId);
+    async loadAndDeselectChildrenRecursively(parentId) {
+        if (!this.treeData || !this.treeConfig || !parentId || parentId === 'all') {
+            return;
         }
-        this.markNodesAsSelected(rootNode);
-        // Sync selection with tree component after a short delay to ensure tree is rendered
         const treeComponent = this.tree();
-        if (treeComponent) {
-            setTimeout(() => {
-                const selectedIds = this.selectedNodeIds();
-                selectedIds.forEach((id) => {
-                    if (id && id !== 'all') {
-                        treeComponent.selectNode(id);
-                    }
-                });
-            }, 0);
+        if (!treeComponent) {
+            return;
         }
-    }
-    /**
-     * Processes child nodes: marks excluded as disabled, marks selected, and syncs selection
-     */
-    processChildNodes(childNodes) {
-        const excludedId = this.excludedNodeId();
-        const selectedIds = this.selectedNodeIds();
-        childNodes.forEach((node) => {
-            const nodeId = String(node['id'] ?? '');
-            if (excludedId && nodeId === excludedId) {
-                node['disabled'] = true;
+        try {
+            // Load children using datasource
+            const childNodes = await this.datasource(parentId);
+            if (!childNodes || childNodes.length === 0) {
+                return;
             }
-            if (nodeId && selectedIds.includes(nodeId)) {
-                node['selected'] = true;
+            const childIdsToDeselect = [];
+            // Collect all child IDs
+            for (const childNode of childNodes) {
+                const childId = String(childNode['id'] ?? '');
+                if (childId && childId !== 'all') {
+                    childIdsToDeselect.push(childId);
+                }
             }
-        });
-        // Sync selection with tree component
-        const treeComponent = this.tree();
-        if (treeComponent) {
-            setTimeout(() => {
-                childNodes.forEach((node) => {
-                    const nodeId = String(node['id'] ?? '');
-                    if (nodeId && selectedIds.includes(nodeId) && nodeId !== 'all') {
-                        treeComponent.selectNode(nodeId);
-                    }
-                });
-            }, 0);
+            // Remove children from selectedNodeIds
+            const currentSelected = this.selectedNodeIds();
+            const updatedSelected = currentSelected.filter((id) => !childIdsToDeselect.includes(id));
+            this.selectedNodeIds.set(updatedSelected);
+            // Deselect in tree component
+            for (const childId of childIdsToDeselect) {
+                try {
+                    treeComponent.deselectNode(childId);
+                }
+                catch {
+                    // Node might not be in tree
+                }
+            }
+            // Recursively deselect children of each child
+            await Promise.all(childIdsToDeselect.map((childId) => this.loadAndDeselectChildrenRecursively(childId)));
+        }
+        catch (error) {
+            console.error(`Error deselecting children for node ${parentId}:`, error);
         }
     }
     /**
-     * Caches node data from items array
+     * Updates parent states based on children selection (select/intermediate)
+     * Called after a node is selected/deselected to update parent checkbox states
      */
-    cacheNodeData(items) {
-        items.forEach((item) => {
-            const itemId = String(item[this.treeConfig.valueField || 'id'] ?? '');
-            if (itemId && typeof item === 'object' && item !== null) {
-                this.nodeDataCache.set(itemId, item);
+    async updateParentStates(changedNodeId) {
+        if (!this.treeData || !this.treeConfig || !this.allowMultiple()) {
+            return;
+        }
+        const parentKey = this.treeData.categoryEntityDef?.parentKey;
+        if (!parentKey) {
+            return; // No parent key means flat structure
+        }
+        const treeComponent = this.tree();
+        if (!treeComponent) {
+            return;
+        }
+        // Start from the changed node's parent and work up the tree
+        const processedParents = new Set();
+        let currentId = changedNodeId;
+        // Process all parents up to root
+        while (currentId && currentId !== 'all') {
+            const nodeData = this.nodeDataCache.get(currentId);
+            if (!nodeData) {
+                break;
             }
-        });
-    }
-    /**
-     * Caches node data from tree nodes
-     */
-    cacheNodeDataFromNodes(nodes) {
-        nodes.forEach((node) => {
-            const nodeId = String(node['id'] ?? '');
-            const nodeData = node['data'];
-            if (nodeData && nodeId && typeof nodeData === 'object') {
-                this.nodeDataCache.set(nodeId, nodeData);
+            const parentId = nodeData[parentKey];
+            const parentIdStr = String(parentId);
+            if (!parentId || parentId === 'all' || parentId === currentId || processedParents.has(parentIdStr)) {
+                break;
+            }
+            processedParents.add(parentIdStr);
+            // Load all children of this parent
+            try {
+                const childNodes = await this.datasource(parentIdStr);
+                if (!childNodes || childNodes.length === 0) {
+                    currentId = parentIdStr;
+                    continue;
+                }
+                // Get current selection state (updated after each parent change)
+                const currentSelected = this.selectedNodeIds();
+                const selectedSet = new Set(currentSelected);
+                let selectedCount = 0;
+                let totalCount = 0;
+                // Count selected children
+                for (const childNode of childNodes) {
+                    const childId = String(childNode['id'] ?? '');
+                    if (childId && childId !== 'all') {
+                        totalCount++;
+                        if (selectedSet.has(childId)) {
+                            selectedCount++;
+                        }
+                    }
+                }
+                // Update parent selection state
+                const isParentSelected = currentSelected.includes(parentIdStr);
+                if (totalCount > 0) {
+                    if (selectedCount === totalCount) {
+                        // All children selected - select parent
+                        if (!isParentSelected) {
+                            this.selectedNodeIds.set([...currentSelected, parentIdStr]);
+                            try {
+                                treeComponent.selectNode(parentIdStr);
+                            }
+                            catch {
+                                // Parent might not be in tree
+                            }
+                        }
+                    }
+                    else if (selectedCount > 0) {
+                        // Some children selected - parent should be in intermediate state
+                        // The tree component handles intermediate state automatically via selectionBehavior
+                        // We just need to ensure parent is not fully selected
+                        if (isParentSelected) {
+                            // Deselect parent to show intermediate state
+                            this.selectedNodeIds.set(currentSelected.filter((id) => id !== parentIdStr));
+                            try {
+                                treeComponent.deselectNode(parentIdStr);
+                            }
+                            catch {
+                                // Parent might not be in tree
+                            }
+                        }
+                    }
+                    else {
+                        // No children selected - deselect parent
+                        if (isParentSelected) {
+                            this.selectedNodeIds.set(currentSelected.filter((id) => id !== parentIdStr));
+                            try {
+                                treeComponent.deselectNode(parentIdStr);
+                            }
+                            catch {
+                                // Parent might not be in tree
+                            }
+                        }
+                    }
+                }
+                // Cache parent data if not already cached
+                if (!this.nodeDataCache.has(parentIdStr)) {
+                    const parentData = await this.fetchItemById(parentIdStr);
+                    if (parentData) {
+                        this.nodeDataCache.set(parentIdStr, parentData);
+                    }
+                }
+                currentId = parentIdStr;
+            }
+            catch (error) {
+                console.error(`Error updating parent state for ${parentIdStr}:`, error);
+                break;
+            }
+        }
+    }
+    /**
+     * Recursively loads and selects all children of a parent node using the datasource
+     * This method directly calls datasource without expanding/collapsing nodes to avoid UI glitches
+     */
+    async loadAndSelectChildrenRecursively(parentId) {
+        if (!this.treeData || !this.treeConfig || !parentId || parentId === 'all') {
+            return;
+        }
+        const treeComponent = this.tree();
+        if (!treeComponent) {
+            return;
+        }
+        try {
+            // Directly call datasource to get children data without expanding the node
+            // This avoids UI glitches from expand/collapse operations
+            // If node has no children, datasource will return empty array
+            const childNodes = await this.datasource(parentId);
+            if (!childNodes || childNodes.length === 0) {
+                return; // No children to process
+            }
+            // Collect all child IDs to add to selectedNodeIds
+            const childIdsToSelect = [];
+            // Process all children and cache their data
+            for (const childNode of childNodes) {
+                const childId = String(childNode['id'] ?? '');
+                if (childId && childId !== 'all') {
+                    childIdsToSelect.push(childId);
+                    // Cache node data for getSelectedItems
+                    // Try to get data from 'data' property first, then fallback to node itself
+                    let nodeData = childNode['data'];
+                    // If no data property, try to extract data from the node
+                    if (!nodeData || typeof nodeData !== 'object') {
+                        // Create a data object from the node properties
+                        const valueField = this.treeConfig.valueField || 'id';
+                        const textField = this.treeConfig.textField || 'title';
+                        nodeData = {
+                            [valueField]: childId,
+                            [textField]: childNode['title'] ?? '',
+                            ...childNode,
+                        };
+                    }
+                    // Cache the node data
+                    if (nodeData && typeof nodeData === 'object') {
+                        this.nodeDataCache.set(childId, nodeData);
+                    }
+                }
+            }
+            if (childIdsToSelect.length === 0) {
+                return; // No valid children to select
+            }
+            // Update selectedNodeIds to include all children
+            const currentSelected = this.selectedNodeIds();
+            const newSelected = [...currentSelected];
+            let hasNewSelections = false;
+            for (const childId of childIdsToSelect) {
+                if (!newSelected.includes(childId)) {
+                    newSelected.push(childId);
+                    hasNewSelections = true;
+                }
+            }
+            if (hasNewSelections) {
+                this.selectedNodeIds.set(newSelected);
+            }
+            // Try to select children in tree component if they're already loaded
+            // If not loaded yet, they'll be selected when the tree loads them (via markNodeAsSelectedIfNeeded)
+            for (const childId of childIdsToSelect) {
+                try {
+                    // Only try to select if node exists in tree (might not be loaded if parent isn't expanded)
+                    const node = treeComponent.findNode(childId);
+                    if (node) {
+                        treeComponent.selectNode(childId);
+                    }
+                }
+                catch {
+                    // If selection fails, it's okay - we've already added to selectedNodeIds
+                    // The tree will sync selection when the node is loaded via datasource callback
+                }
+            }
+            // Recursively load and select children of each child
+            // Use Promise.all for parallel processing to improve performance
+            await Promise.all(childIdsToSelect.map((childId) => this.loadAndSelectChildrenRecursively(childId)));
+        }
+        catch (error) {
+            console.error(`Error loading children for node ${parentId}:`, error);
+        }
+    }
+    //#endregion
+    async updateSelectedNodes(selectedIds) {
+        if (!selectedIds || selectedIds.length === 0) {
+            this.selectedNodeIds.set([]);
+            return;
+        }
+        const ids = selectedIds.filter((id) => id && id !== 'all');
+        // Set flag to prevent recursive updates during initialization
+        this.isUpdatingSelection = true;
+        try {
+            // Fetch node data for pre-selected items that aren't in the cache
+            await this.loadMissingNodeData(ids);
+            // Collect all nodes to select (pre-selected + all their descendants)
+            const allNodesToSelect = new Set(ids);
+            for (const nodeId of ids) {
+                await this.collectAllDescendants(nodeId, allNodesToSelect);
+            }
+            // Set all selected nodes at once
+            this.selectedNodeIds.set(Array.from(allNodesToSelect));
+            // Expand parents of pre-selected nodes so they're visible in the tree
+            await this.expandParentsOfSelectedNodes(Array.from(allNodesToSelect));
+            // Sync selection with tree component - wait for tree to be ready
+            await this.syncSelectionWithTree(Array.from(allNodesToSelect));
+        }
+        finally {
+            this.isUpdatingSelection = false;
+        }
+    }
+    /**
+     * Updates all parent states based on their children's selection
+     * Used during initialization to ensure proper parent states (select/intermediate)
+     */
+    async updateAllParentStates(selectedIds) {
+        if (!this.treeData || !this.treeConfig || !this.allowMultiple() || selectedIds.length === 0) {
+            return;
+        }
+        const parentKey = this.treeData.categoryEntityDef?.parentKey;
+        if (!parentKey) {
+            return;
+        }
+        const treeComponent = this.tree();
+        if (!treeComponent) {
+            return;
+        }
+        const selectedSet = new Set(selectedIds);
+        const processedParents = new Set();
+        // Collect all unique parent IDs
+        for (const selectedId of selectedIds) {
+            if (selectedId === 'all') {
+                continue;
+            }
+            const nodeData = this.nodeDataCache.get(selectedId);
+            if (!nodeData) {
+                continue;
+            }
+            let currentId = selectedId;
+            while (currentId && currentId !== 'all') {
+                const currentNodeData = this.nodeDataCache.get(currentId);
+                if (!currentNodeData) {
+                    break;
+                }
+                const parentId = currentNodeData[parentKey];
+                const parentIdStr = String(parentId);
+                if (!parentId || parentId === 'all' || parentId === currentId || processedParents.has(parentIdStr)) {
+                    break;
+                }
+                processedParents.add(parentIdStr);
+                currentId = parentIdStr;
+            }
+        }
+        // Process parents multiple times to handle cascading parent selections
+        // (when a parent is selected, its parent might also need to be selected)
+        let hasChanges = true;
+        let iterations = 0;
+        const maxIterations = 10; // Prevent infinite loops
+        while (hasChanges && iterations < maxIterations) {
+            iterations++;
+            hasChanges = false;
+            // Update selectedSet with current selectedNodeIds
+            const currentSelected = this.selectedNodeIds();
+            currentSelected.forEach((id) => selectedSet.add(id));
+            // Update each parent's state
+            for (const parentId of processedParents) {
+                try {
+                    const childNodes = await this.datasource(parentId);
+                    if (!childNodes || childNodes.length === 0) {
+                        continue;
+                    }
+                    let selectedCount = 0;
+                    let totalCount = 0;
+                    for (const childNode of childNodes) {
+                        const childId = String(childNode['id'] ?? '');
+                        if (childId && childId !== 'all') {
+                            totalCount++;
+                            if (selectedSet.has(childId)) {
+                                selectedCount++;
+                            }
+                        }
+                    }
+                    const isParentSelected = currentSelected.includes(parentId);
+                    if (totalCount > 0) {
+                        if (selectedCount === totalCount) {
+                            // All children selected - select parent
+                            if (!isParentSelected) {
+                                this.selectedNodeIds.set([...currentSelected, parentId]);
+                                selectedSet.add(parentId);
+                                hasChanges = true;
+                                try {
+                                    treeComponent.selectNode(parentId);
+                                }
+                                catch {
+                                    // Parent might not be in tree
+                                }
+                            }
+                        }
+                        else if (selectedCount > 0) {
+                            // Some children selected - parent should be in intermediate state
+                            if (isParentSelected) {
+                                // Deselect parent to show intermediate state
+                                this.selectedNodeIds.set(currentSelected.filter((id) => id !== parentId));
+                                selectedSet.delete(parentId);
+                                hasChanges = true;
+                                try {
+                                    treeComponent.deselectNode(parentId);
+                                }
+                                catch {
+                                    // Parent might not be in tree
+                                }
+                            }
+                        }
+                        else {
+                            // No children selected - deselect parent
+                            if (isParentSelected) {
+                                this.selectedNodeIds.set(currentSelected.filter((id) => id !== parentId));
+                                selectedSet.delete(parentId);
+                                hasChanges = true;
+                                try {
+                                    treeComponent.deselectNode(parentId);
+                                }
+                                catch {
+                                    // Parent might not be in tree
+                                }
+                            }
+                        }
+                    }
+                }
+                catch (error) {
+                    console.error(`Error updating parent state for ${parentId}:`, error);
+                }
+            }
+        }
+    }
+    /**
+     * Expands parents of selected nodes so they're visible when popup opens
+     */
+    async expandParentsOfSelectedNodes(selectedIds) {
+        if (!this.treeData || !this.treeConfig || selectedIds.length === 0) {
+            return;
+        }
+        const parentKey = this.treeData.categoryEntityDef?.parentKey;
+        if (!parentKey) {
+            return; // No parent key means flat structure
+        }
+        const treeComponent = this.tree();
+        if (!treeComponent) {
+            return;
+        }
+        // Collect all unique parent IDs that need to be expanded
+        const parentsToExpand = new Set();
+        for (const selectedId of selectedIds) {
+            if (selectedId === 'all') {
+                continue;
+            }
+            const nodeData = this.nodeDataCache.get(selectedId);
+            if (!nodeData) {
+                continue;
+            }
+            const parentId = nodeData[parentKey];
+            if (parentId && parentId !== 'all') {
+                const parentIdStr = String(parentId);
+                parentsToExpand.add(parentIdStr);
+                // Also expand grandparents, etc.
+                let currentParentId = parentIdStr;
+                while (currentParentId) {
+                    const parentData = this.nodeDataCache.get(currentParentId);
+                    if (!parentData) {
+                        break;
+                    }
+                    const grandParentId = parentData[parentKey];
+                    if (grandParentId && grandParentId !== 'all' && grandParentId !== currentParentId) {
+                        parentsToExpand.add(String(grandParentId));
+                        currentParentId = String(grandParentId);
+                    }
+                    else {
+                        break;
+                    }
+                }
+            }
+        }
+        // Expand all parents (starting from root to leaves)
+        const sortedParents = Array.from(parentsToExpand).sort((a, b) => {
+            // Simple sort - expand root nodes first
+            return a.localeCompare(b);
+        });
+        for (const parentId of sortedParents) {
+            try {
+                if (!treeComponent.isNodeExpanded(parentId)) {
+                    await treeComponent.expandNode(parentId);
+                    // Small delay to ensure children are loaded
+                    await new Promise((resolve) => setTimeout(resolve, 50));
+                }
+            }
+            catch {
+                // Parent might not be in tree yet, ignore
+            }
+        }
+    }
+    /**
+     * Selects parents whose all children are selected
+     * This ensures that when all children of a parent are selected, the parent also appears selected
+     */
+    async selectParentsWithAllChildrenSelected(selectedIds) {
+        if (!this.treeData || !this.treeConfig || selectedIds.length === 0) {
+            return;
+        }
+        const parentKey = this.treeData.categoryEntityDef?.parentKey;
+        if (!parentKey) {
+            return; // No parent key means flat structure
+        }
+        // Use current selectedNodeIds signal value (may have been updated)
+        const currentSelectedIds = this.selectedNodeIds();
+        const selectedSet = new Set(currentSelectedIds);
+        const processedParents = new Set();
+        const parentsToSelect = new Set();
+        // For each selected node, check its parent
+        for (const selectedId of currentSelectedIds) {
+            if (selectedId === 'all') {
+                continue;
+            }
+            // Get parent ID from cached data
+            const nodeData = this.nodeDataCache.get(selectedId);
+            if (!nodeData) {
+                continue;
+            }
+            const parentId = nodeData[parentKey];
+            if (!parentId || parentId === 'all' || processedParents.has(String(parentId))) {
+                continue;
+            }
+            const parentIdStr = String(parentId);
+            processedParents.add(parentIdStr);
+            // Load all children of this parent
+            try {
+                const childNodes = await this.datasource(parentIdStr);
+                if (!childNodes || childNodes.length === 0) {
+                    continue;
+                }
+                // Check if all children are selected
+                let allChildrenSelected = true;
+                let hasChildren = false;
+                for (const childNode of childNodes) {
+                    const childId = String(childNode['id'] ?? '');
+                    if (childId && childId !== 'all') {
+                        hasChildren = true;
+                        if (!selectedSet.has(childId)) {
+                            allChildrenSelected = false;
+                            break;
+                        }
+                    }
+                }
+                // If parent has children and all are selected, mark parent for selection
+                if (hasChildren && allChildrenSelected) {
+                    parentsToSelect.add(parentIdStr);
+                    // Cache parent data if not already cached
+                    if (!this.nodeDataCache.has(parentIdStr)) {
+                        const parentData = await this.fetchItemById(parentIdStr);
+                        if (parentData) {
+                            this.nodeDataCache.set(parentIdStr, parentData);
+                        }
+                    }
+                }
+            }
+            catch (error) {
+                console.error(`Error checking parent ${parentIdStr}:`, error);
+            }
+        }
+        // Add parents to selectedNodeIds
+        if (parentsToSelect.size > 0) {
+            const currentSelected = this.selectedNodeIds();
+            const newSelected = [...currentSelected];
+            let hasNewSelections = false;
+            for (const parentId of parentsToSelect) {
+                if (!newSelected.includes(parentId)) {
+                    newSelected.push(parentId);
+                    hasNewSelections = true;
+                }
+            }
+            if (hasNewSelections) {
+                this.selectedNodeIds.set(newSelected);
+                // Recursively check parents of these parents
+                const updatedSelected = this.selectedNodeIds();
+                await this.selectParentsWithAllChildrenSelected(updatedSelected);
+            }
+        }
+    }
+    /**
+     * Syncs selection state with the tree component
+     * Handles cases where nodes might not be in the tree structure yet
+     */
+    async syncSelectionWithTree(selectedIds) {
+        const treeComponent = this.tree();
+        if (!treeComponent || selectedIds.length === 0) {
+            return;
+        }
+        // Wait for tree to be fully initialized and rendered
+        await new Promise((resolve) => setTimeout(resolve, 300));
+        // Try multiple times to sync selection (nodes might load progressively)
+        for (let attempt = 0; attempt < 3; attempt++) {
+            let syncedCount = 0;
+            selectedIds.forEach((id) => {
+                if (id && id !== 'all') {
+                    try {
+                        const node = treeComponent.findNode(id);
+                        if (node) {
+                            // Node exists in tree, select it
+                            treeComponent.selectNode(id);
+                            syncedCount++;
+                        }
+                    }
+                    catch {
+                        // Node not in tree yet - will be selected when loaded via datasource callback
+                    }
+                }
+            });
+            // If all nodes are synced, we're done
+            if (syncedCount === selectedIds.length) {
+                break;
+            }
+            // Wait a bit before next attempt
+            if (attempt < 2) {
+                await new Promise((resolve) => setTimeout(resolve, 100));
+            }
+        }
+        // After syncing, read back from tree component to get any parents that were automatically selected
+        // (due to intermediate-nested behavior when all children are selected)
+        if (this.allowMultiple()) {
+            try {
+                const treeSelectedNodes = treeComponent.getSelectedNodes();
+                const treeSelectedIds = treeSelectedNodes
+                    .map((node) => String(node['id'] ?? ''))
+                    .filter((id) => id && id !== 'all');
+                // Update selectedNodeIds to match tree component's state (includes auto-selected parents)
+                this.selectedNodeIds.set(treeSelectedIds);
+            }
+            catch {
+                // Tree component might not be ready yet
+            }
+        }
+        // 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
+        // Nodes that aren't in the tree yet will be selected when their parent is expanded
+    }
+    /**
+     * Loads node data for IDs that are selected but not yet in the cache.
+     * This is critical for pre-selected values in collapsed branches.
+     */
+    async loadMissingNodeData(selectedIds) {
+        if (!this.treeData || !this.treeConfig || selectedIds.length === 0) {
+            return;
+        }
+        // Find IDs that are selected but not in cache
+        const missingIds = selectedIds.filter((id) => !this.nodeDataCache.has(id));
+        if (missingIds.length === 0) {
+            return;
+        }
+        try {
+            const valueField = this.treeConfig.valueField || 'id';
+            const categoryEntityQueryFunc = this.treeData.categoryEntityQueryFunc;
+            if (!categoryEntityQueryFunc) {
+                return;
+            }
+            // Query for missing nodes by their IDs
+            const event = {
+                ...this.treeData.basicQueryEvent,
+                filter: {
+                    filters: missingIds.map((id) => ({
+                        field: valueField,
+                        value: id,
+                        operator: { type: 'equal' },
+                    })),
+                    logic: 'or',
+                },
+            };
+            const res = await categoryEntityQueryFunc(event);
+            if (res?.items) {
+                // Cache the fetched node data
+                res.items.forEach((item) => {
+                    const itemId = String(item[valueField] ?? '');
+                    if (itemId) {
+                        this.nodeDataCache.set(itemId, item);
+                    }
+                });
+            }
+        }
+        catch (error) {
+            console.error('Error loading missing node data:', error);
+        }
+    }
+    /**
+     * 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);
+            });
+        }
+    }
+    /**
+     * Processes root node: marks excluded as disabled, marks selected, and syncs selection with tree component
+     */
+    processRootNode(rootNode) {
+        const excludedId = this.excludedNodeId();
+        if (excludedId) {
+            this.markNodeAsDisabled(rootNode, excludedId);
+        }
+        this.markNodesAsSelected(rootNode);
+        // Sync selection with tree component after a short delay to ensure tree is rendered
+        const treeComponent = this.tree();
+        if (treeComponent) {
+            setTimeout(() => {
+                const selectedIds = this.selectedNodeIds();
+                selectedIds.forEach((id) => {
+                    if (id && id !== 'all') {
+                        treeComponent.selectNode(id);
+                    }
+                });
+            }, 0);
+        }
+    }
+    /**
+     * Processes child nodes: marks excluded as disabled, marks selected, and syncs selection
+     */
+    processChildNodes(childNodes) {
+        const excludedId = this.excludedNodeId();
+        const selectedIds = this.selectedNodeIds();
+        childNodes.forEach((node) => {
+            const nodeId = String(node['id'] ?? '');
+            if (excludedId && nodeId === excludedId) {
+                node['disabled'] = true;
+            }
+            if (nodeId && selectedIds.includes(nodeId)) {
+                node['selected'] = true;
+            }
+        });
+        // Sync selection with tree component
+        const treeComponent = this.tree();
+        if (treeComponent) {
+            setTimeout(() => {
+                childNodes.forEach((node) => {
+                    const nodeId = String(node['id'] ?? '');
+                    if (nodeId && selectedIds.includes(nodeId) && nodeId !== 'all') {
+                        treeComponent.selectNode(nodeId);
+                    }
+                });
+            }, 0);
+        }
+    }
+    /**
+     * Caches node data from items array
+     */
+    cacheNodeData(items) {
+        items.forEach((item) => {
+            const itemId = String(item[this.treeConfig.valueField || 'id'] ?? '');
+            if (itemId && typeof item === 'object' && item !== null) {
+                this.nodeDataCache.set(itemId, item);
+            }
+        });
+    }
+    /**
+     * Caches node data from tree nodes
+     */
+    cacheNodeDataFromNodes(nodes) {
+        nodes.forEach((node) => {
+            const nodeId = String(node['id'] ?? '');
+            const nodeData = node['data'];
+            if (nodeData && nodeId && typeof nodeData === 'object') {
+                this.nodeDataCache.set(nodeId, nodeData);
             }
         });
     }
@@ -6835,41 +7676,107 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
         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);
+    /**
+     * Checks if a node is a leaf node (has no children)
+     */
+    async isLeafNode(nodeId, treeComponent) {
+        if (!treeComponent) {
+            // If no tree component, check if node has children by querying
+            return await this.checkIfNodeHasChildren(nodeId);
+        }
+        try {
+            const node = treeComponent.findNode(nodeId);
+            if (!node) {
+                // Node not found in tree, check via query
+                return await this.checkIfNodeHasChildren(nodeId);
+            }
+            // Check if node has children
+            const children = node['children'];
+            const childrenCount = node['childrenCount'];
+            // If children are loaded, check the array
+            if (children !== undefined) {
+                return !children || children.length === 0;
+            }
+            // If childrenCount is available, use it
+            if (childrenCount !== undefined) {
+                return childrenCount === 0;
+            }
+            // If neither is available, try to check via query
+            return await this.checkIfNodeHasChildren(nodeId);
+        }
+        catch {
+            // If findNode fails, check via query
+            return await this.checkIfNodeHasChildren(nodeId);
+        }
+    }
+    /**
+     * Checks if a node has children by querying the data source
+     */
+    async checkIfNodeHasChildren(nodeId) {
+        if (!this.treeData?.categoryEntityQueryFunc || !this.treeConfig) {
+            return true; // Assume leaf if we can't check
+        }
+        try {
+            const parentKey = this.treeData.categoryEntityDef?.parentKey;
+            if (!parentKey) {
+                return true; // No parent key means flat structure, all nodes are leaves
+            }
+            const event = {
+                ...this.treeData.basicQueryEvent,
+                filter: {
+                    field: parentKey,
+                    value: nodeId,
+                    operator: { type: 'equal' },
+                },
+                take: 1, // Only need to check if any children exist
+            };
+            const res = await this.treeData.categoryEntityQueryFunc(event);
+            return !res?.items || res.items.length === 0;
+        }
+        catch {
+            return true; // Assume leaf on error
         }
-        // Fallback to cached data
+    }
+    async getSelectedItems() {
+        // Always use selectedNodeIds as the source of truth
+        // This ensures we get all selected nodes, even if they're not in the tree structure yet
         const selectedIds = this.selectedNodeIds();
         if (selectedIds.length === 0) {
             return [];
         }
+        const treeComponent = this.tree();
         // Get node data from cache and calculate paths
+        // For nodes not in cache, try to get from tree component
         const items = await Promise.all(selectedIds.map(async (id) => {
-            const nodeData = this.nodeDataCache.get(id);
+            // First try to get from cache
+            let nodeData = this.nodeDataCache.get(id);
+            // If not in cache, try to get from tree component
+            if (!nodeData && treeComponent) {
+                try {
+                    const node = treeComponent.findNode(id);
+                    if (node) {
+                        nodeData = node['data'] || node;
+                        // Cache it for future use
+                        if (nodeData && typeof nodeData === 'object') {
+                            this.nodeDataCache.set(id, nodeData);
+                        }
+                    }
+                }
+                catch {
+                    // Node not found in tree, continue with cache lookup
+                }
+            }
+            // If still no data, skip this node
             if (!nodeData) {
                 return null;
             }
+            // When selectionBehavior is intermediate-nested, only return leaf nodes
+            if (this.allowMultiple()) {
+                const isLeaf = await this.isLeafNode(id, treeComponent ?? null);
+                if (!isLeaf) {
+                    return null; // Skip non-leaf nodes
+                }
+            }
             const path = await this.calculateNodePath(id, nodeData);
             return {
                 ...nodeData,
@@ -6884,9 +7791,9 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
     <div class="ax-flex ax-flex-col ax-h-full">
       @if (loading()) {
         <div class="ax-p-4 ax-flex ax-flex-col ax-gap-3">
-          <ax-skeleton class="ax-w-full ax-h-6 ax-rounded-md"></ax-skeleton>
-          <ax-skeleton class="ax-w-full ax-h-6 ax-rounded-md"></ax-skeleton>
-          <ax-skeleton class="ax-w-full ax-h-6 ax-rounded-md"></ax-skeleton>
+          @for (i of [1, 2, 3, 4]; track i) {
+            <ax-skeleton class="ax-w-full ax-h-6 ax-rounded-md"></ax-skeleton>
+          }
         </div>
       } @else if (treeData) {
         <div class="ax-flex ax-flex-col ax-flex-1 ax-min-h-0">
@@ -6905,23 +7812,18 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
               <div class="ax-text-xs ax-text-muted ax-flex ax-items-center ax-gap-1">
                 @if (searchResultCount() > 0) {
                   <span>{{ resultsFoundText() }}</span>
-                } @else {
-                  <span>{{ '@general:terms.interface.category.search.no-results' | translate | async }}</span>
                 }
               </div>
             }
           </div>
           @if (showNoSearchResults()) {
-            <div class="ax-flex-1 ax-flex ax-items-center ax-justify-center ax-p-4">
-              <div class="ax-text-center ax-text-muted">
-                <ax-icon class="fa-light fa-search ax-text-4xl ax-mb-2 ax-opacity-50"></ax-icon>
-                <p class="ax-text-sm">
-                  {{ '@general:terms.interface.category.search.no-results-found.title' | translate | async }}
-                </p>
-                <p class="ax-text-xs ax-opacity-70">
-                  {{ '@general:terms.interface.category.search.no-results-found.description' | translate | async }}
-                </p>
-              </div>
+            <div class="ax-flex-1 ax-flex ax-items-center ax-justify-center">
+              <axp-state-message
+                icon="fa-light fa-search"
+                [title]="'@general:terms.interface.category.search.no-results-found.title'"
+                [description]="'@general:terms.interface.category.search.no-results-found.description'"
+              >
+              </axp-state-message>
             </div>
           } @else {
             <div class="ax-flex-1 ax-overflow-auto ax-p-4">
@@ -6929,14 +7831,14 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
                 [datasource]="datasource"
                 [dragBehavior]="'none'"
                 [selectMode]="allowMultiple() ? 'multiple' : 'single'"
-                [selectionBehavior]="selectionBehavior()"
+                [selectionBehavior]="allowMultiple() ? 'intermediate-nested' : 'all'"
                 [showIcons]="true"
                 [titleField]="textField()"
                 [idField]="valueField()"
-                [nodeTemplate]="itemTemplate"
                 (onNodeSelect)="onNodeSelect($event)"
                 (onSelectionChange)="onSelectionChange($event)"
                 (onNodeToggle)="onNodeToggle($event)"
+                [nodeTemplate]="itemTemplate"
                 #tree
               >
               </ax-tree-view>
@@ -6944,18 +7846,22 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
               <ng-template #itemTemplate let-node="node" let-level="level">
                 @if (node) {
                   @let item = node.data || node;
-                  @let isMatch = isMatchingNode(node.id);
-                  <div
-                    class="ax-flex ax-items-center ax-gap-2 ax-w-full ax-overflow-hidden ax-p-2 ax-pe-0"
-                    [class.ax-bg-secondary-100]="isMatch"
-                    [class.ax-rounded]="isMatch"
-                    [class.ax-px-1]="isMatch"
-                  >
+                  <div class="ax-flex ax-items-center ax-gap-2 ax-w-full ax-overflow-hidden ax-p-2 ax-pe-0">
+                    @if (allowMultiple()) {
+                      <ax-check-box
+                        [ngModel]="node['indeterminate'] ? null : node['selected'] || false"
+                        [indeterminate]="node['indeterminate'] || false"
+                        (onValueChanged)="handleCheckboxChange(node.id, $event.value)"
+                        (click)="$event.stopPropagation()"
+                        (pointerdown)="$event.stopPropagation()"
+                        [disabled]="node.disabled || node.id === 'all'"
+                      ></ax-check-box>
+                    }
                     <ax-icon
                       class="fas fa-folder"
                       [style.color]="item.color ?? 'rgba(var(--ax-sys-color-warning-500), 1)'"
                     ></ax-icon>
-                    <span class="ax-truncate" [class.ax-font-semibold]="isMatch">{{ node.title }}</span>
+                    <span class="ax-truncate">{{ node.title }}</span>
                   </div>
                 }
               </ng-template>
@@ -6963,8 +7869,13 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
           }
         </div>
       } @else {
-        <div class="ax-p-4 ax-text-center ax-text-muted">
-          <span>---</span>
+        <div class="ax-flex-1 ax-flex ax-items-center ax-justify-center">
+          <axp-state-message
+            icon="fa-light fa-folder-open"
+            [title]="'@general:terms.interface.category.search.no-records.title'"
+            [description]="'@general:terms.interface.category.search.no-records.description'"
+          >
+          </axp-state-message>
         </div>
       }
     </div>
@@ -6979,11 +7890,12 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
           look="solid"
           color="primary"
           [text]="'@general:actions.ok.title' | translate | async"
+          [disabled]="selectedNodeIds().length === 0"
           (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: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: 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", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick"], outputs: ["datasourceChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "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 }); }
+  `, 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: AXCheckBoxModule }, { kind: "component", type: i2$1.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { 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: AXSearchBoxModule }, { kind: "component", type: i4$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i5$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick"], outputs: ["datasourceChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { 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: "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,
@@ -6993,9 +7905,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
     <div class="ax-flex ax-flex-col ax-h-full">
       @if (loading()) {
         <div class="ax-p-4 ax-flex ax-flex-col ax-gap-3">
-          <ax-skeleton class="ax-w-full ax-h-6 ax-rounded-md"></ax-skeleton>
-          <ax-skeleton class="ax-w-full ax-h-6 ax-rounded-md"></ax-skeleton>
-          <ax-skeleton class="ax-w-full ax-h-6 ax-rounded-md"></ax-skeleton>
+          @for (i of [1, 2, 3, 4]; track i) {
+            <ax-skeleton class="ax-w-full ax-h-6 ax-rounded-md"></ax-skeleton>
+          }
         </div>
       } @else if (treeData) {
         <div class="ax-flex ax-flex-col ax-flex-1 ax-min-h-0">
@@ -7014,23 +7926,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
               <div class="ax-text-xs ax-text-muted ax-flex ax-items-center ax-gap-1">
                 @if (searchResultCount() > 0) {
                   <span>{{ resultsFoundText() }}</span>
-                } @else {
-                  <span>{{ '@general:terms.interface.category.search.no-results' | translate | async }}</span>
                 }
               </div>
             }
           </div>
           @if (showNoSearchResults()) {
-            <div class="ax-flex-1 ax-flex ax-items-center ax-justify-center ax-p-4">
-              <div class="ax-text-center ax-text-muted">
-                <ax-icon class="fa-light fa-search ax-text-4xl ax-mb-2 ax-opacity-50"></ax-icon>
-                <p class="ax-text-sm">
-                  {{ '@general:terms.interface.category.search.no-results-found.title' | translate | async }}
-                </p>
-                <p class="ax-text-xs ax-opacity-70">
-                  {{ '@general:terms.interface.category.search.no-results-found.description' | translate | async }}
-                </p>
-              </div>
+            <div class="ax-flex-1 ax-flex ax-items-center ax-justify-center">
+              <axp-state-message
+                icon="fa-light fa-search"
+                [title]="'@general:terms.interface.category.search.no-results-found.title'"
+                [description]="'@general:terms.interface.category.search.no-results-found.description'"
+              >
+              </axp-state-message>
             </div>
           } @else {
             <div class="ax-flex-1 ax-overflow-auto ax-p-4">
@@ -7038,14 +7945,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                 [datasource]="datasource"
                 [dragBehavior]="'none'"
                 [selectMode]="allowMultiple() ? 'multiple' : 'single'"
-                [selectionBehavior]="selectionBehavior()"
+                [selectionBehavior]="allowMultiple() ? 'intermediate-nested' : 'all'"
                 [showIcons]="true"
                 [titleField]="textField()"
                 [idField]="valueField()"
-                [nodeTemplate]="itemTemplate"
                 (onNodeSelect)="onNodeSelect($event)"
                 (onSelectionChange)="onSelectionChange($event)"
                 (onNodeToggle)="onNodeToggle($event)"
+                [nodeTemplate]="itemTemplate"
                 #tree
               >
               </ax-tree-view>
@@ -7053,18 +7960,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
               <ng-template #itemTemplate let-node="node" let-level="level">
                 @if (node) {
                   @let item = node.data || node;
-                  @let isMatch = isMatchingNode(node.id);
-                  <div
-                    class="ax-flex ax-items-center ax-gap-2 ax-w-full ax-overflow-hidden ax-p-2 ax-pe-0"
-                    [class.ax-bg-secondary-100]="isMatch"
-                    [class.ax-rounded]="isMatch"
-                    [class.ax-px-1]="isMatch"
-                  >
+                  <div class="ax-flex ax-items-center ax-gap-2 ax-w-full ax-overflow-hidden ax-p-2 ax-pe-0">
+                    @if (allowMultiple()) {
+                      <ax-check-box
+                        [ngModel]="node['indeterminate'] ? null : node['selected'] || false"
+                        [indeterminate]="node['indeterminate'] || false"
+                        (onValueChanged)="handleCheckboxChange(node.id, $event.value)"
+                        (click)="$event.stopPropagation()"
+                        (pointerdown)="$event.stopPropagation()"
+                        [disabled]="node.disabled || node.id === 'all'"
+                      ></ax-check-box>
+                    }
                     <ax-icon
                       class="fas fa-folder"
                       [style.color]="item.color ?? 'rgba(var(--ax-sys-color-warning-500), 1)'"
                     ></ax-icon>
-                    <span class="ax-truncate" [class.ax-font-semibold]="isMatch">{{ node.title }}</span>
+                    <span class="ax-truncate">{{ node.title }}</span>
                   </div>
                 }
               </ng-template>
@@ -7072,8 +7983,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
           }
         </div>
       } @else {
-        <div class="ax-p-4 ax-text-center ax-text-muted">
-          <span>---</span>
+        <div class="ax-flex-1 ax-flex ax-items-center ax-justify-center">
+          <axp-state-message
+            icon="fa-light fa-folder-open"
+            [title]="'@general:terms.interface.category.search.no-records.title'"
+            [description]="'@general:terms.interface.category.search.no-records.description'"
+          >
+          </axp-state-message>
         </div>
       }
     </div>
@@ -7088,6 +8004,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
           look="solid"
           color="primary"
           [text]="'@general:actions.ok.title' | translate | async"
+          [disabled]="selectedNodeIds().length === 0"
           (onClick)="onConfirm()"
         ></ax-button>
       </ax-suffix>
@@ -7097,11 +8014,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     imports: [
                         CommonModule,
                         AXButtonModule,
+                        AXCheckBoxModule,
                         AXDecoratorModule,
                         AXSearchBoxModule,
                         AXSkeletonModule,
                         AXTreeViewComponent,
                         AXTranslationModule,
+                        AXPStateMessageComponent,
+                        FormsModule,
                     ],
                 }]
         }], propDecorators: { tree: [{ type: i0.ViewChild, args: ['tree', { isSignal: true }] }] } });
@@ -7109,177 +8029,275 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
 class AXPEntityCategoryWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
-        //#region ----   Dependencies   ----
+        //#region ----   Services & Dependencies   ----
         this.entityDetailPopoverService = inject(AXPEntityDetailPopoverService);
         this.formatService = inject(AXFormatService);
+        this.entityResolver = inject(AXPEntityResolver);
         //#endregion
-        //#region ----   View Children   ----
-        this.moreButton = viewChild('moreButton', ...(ngDevMode ? [{ debugName: "moreButton" }] : []));
-        this.morePopover = viewChild('morePopover', ...(ngDevMode ? [{ debugName: "morePopover" }] : []));
+        //#region ----   Inputs   ----
+        this.rawValueSignal = signal(null, ...(ngDevMode ? [{ debugName: "rawValueSignal" }] : []));
         //#endregion
-        //#region ----   Properties   ----
-        this.host = inject(ElementRef);
-        this.valueField = this.options['valueField'] ?? 'id';
-        this.textField = this.options['textField'] ?? 'title';
-        this.entity = this.options['entity'] ?? '';
-        this.columnName = this.options['columnName'] ?? '';
-        this.maxVisible = this.options['maxVisible'] ?? 2;
+        //#region ----   Computed Properties   ----
+        this.entity = computed(() => this.options['entity'] ?? '', ...(ngDevMode ? [{ debugName: "entity" }] : []));
+        this.valueField = computed(() => this.options['valueField'] ?? 'id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
+        this.textField = computed(() => this.options['textField'] ?? 'title', ...(ngDevMode ? [{ debugName: "textField" }] : []));
+        this.columnName = computed(() => this.options['columnName'] ?? '', ...(ngDevMode ? [{ debugName: "columnName" }] : []));
+        this.defaultTextField = computed(() => {
+            const textField = this.entityDef()?.formats.lookup ?? this.entityDef()?.properties.find((c) => c.name != 'id')?.name ?? 'title';
+            return textField;
+        }, ...(ngDevMode ? [{ debugName: "defaultTextField" }] : []));
+        this.displayField = computed(() => {
+            if (this.textField()) {
+                return this.textField();
+            }
+            return this.defaultTextField();
+        }, ...(ngDevMode ? [{ debugName: "displayField" }] : []));
         //#endregion
-        //#region ----   Signals   ----
-        this.isMorePopoverOpen = signal(false, ...(ngDevMode ? [{ debugName: "isMorePopoverOpen" }] : []));
+        //#region ----   Component State   ----
+        this.host = inject(ElementRef);
+        this.entityDef = signal(null, ...(ngDevMode ? [{ debugName: "entityDef" }] : []));
+        this.displayItems = signal([], ...(ngDevMode ? [{ debugName: "displayItems" }] : []));
         this.selectedItemIndex = signal(-1, ...(ngDevMode ? [{ debugName: "selectedItemIndex" }] : []));
         //#endregion
-        //#region ----   Computed Properties   ----
-        this.displayItems = computed(() => isNil(this.rawValue)
-            ? []
-            : castArray(this.rawValue)
-                .map((item) => this.extractItem(item))
-                .filter((c) => c != null), ...(ngDevMode ? [{ debugName: "displayItems" }] : []));
-        this.allItems = computed(() => this.displayItems(), ...(ngDevMode ? [{ debugName: "allItems" }] : []));
-        this.visibleItems = computed(() => {
-            const items = this.allItems();
-            return items.slice(0, this.maxVisible);
-        }, ...(ngDevMode ? [{ debugName: "visibleItems" }] : []));
-        this.remainingItems = computed(() => {
-            const items = this.allItems();
-            return items.slice(this.maxVisible);
-        }, ...(ngDevMode ? [{ debugName: "remainingItems" }] : []));
-        this.hasMoreItems = computed(() => {
-            return this.allItems().length > this.maxVisible;
-        }, ...(ngDevMode ? [{ debugName: "hasMoreItems" }] : []));
-        this.remainingItemsCount = computed(() => {
-            return this.allItems().length - this.maxVisible;
-        }, ...(ngDevMode ? [{ debugName: "remainingItemsCount" }] : []));
+        //#region ----   Effects   ----
+        this.efEntity = effect(async () => {
+            const entityKey = this.entity();
+            if (!entityKey) {
+                return;
+            }
+            const [module, entity] = entityKey.split('.');
+            if (!module || !entity) {
+                return;
+            }
+            this.entityDef.set(await this.entityResolver.get(module, entity));
+        }, ...(ngDevMode ? [{ debugName: "efEntity" }] : []));
+        this.efDisplay = effect(async () => {
+            const value = this.rawValueSignal();
+            const entity = this.entityDef();
+            // Wait for entity definition to be loaded before processing value
+            if (!entity) {
+                this.displayItems.set([]);
+                return;
+            }
+            if (isNil(value)) {
+                this.displayItems.set([]);
+            }
+            else {
+                const items = castArray(value);
+                const itemsWithPaths = await Promise.all(items.map((item) => this.extractItemWithPath(item)));
+                this.displayItems.set(itemsWithPaths.filter((c) => c != null));
+            }
+        }, ...(ngDevMode ? [{ debugName: "efDisplay" }] : []));
+        //#endregion
+        //#region ----   Computed Properties (Derived)   ----
+        this.visibleItems = computed(() => this.displayItems(), ...(ngDevMode ? [{ debugName: "visibleItems" }] : []));
+    }
+    set rawValueInput(value) {
+        this.rawValueSignal.set(value);
     }
     //#endregion
     //#region ----   Public Methods   ----
-    showMoreItems() {
-        this.entityDetailPopoverService.hide();
-        this.openMorePopover();
-    }
-    onMorePopoverOpenChange(event) {
-        this.isMorePopoverOpen.set(event);
-    }
     async showItemDetail(item, index) {
-        const columnData = this.rowData[this.columnName];
+        const columnData = this.rowData[this.columnName()];
         const id = Array.isArray(columnData) ? columnData[index] : columnData;
         this.selectedItemIndex.set(index);
-        this.closeMorePopover();
-        if (this.entity && id) {
+        const entityKey = this.entity();
+        if (entityKey && id) {
             await this.entityDetailPopoverService.show(this.host, {
-                entity: this.entity,
+                entity: entityKey,
                 id: id,
-                textField: this.textField,
-                valueField: this.valueField,
+                textField: this.textField(),
+                valueField: this.valueField(),
                 item,
             });
         }
     }
     handleItemClick(index) {
-        const items = this.allItems();
+        const items = this.visibleItems();
         if (index < items.length) {
             const item = items[index];
             this.showItemDetail(item, index);
         }
     }
-    //#endregion
-    //#region ----   Private Methods   ----
-    openMorePopover() {
-        if (this.morePopover() && this.moreButton()) {
-            this.morePopover().target = this.moreButton().nativeElement;
-            this.morePopover().open();
-            this.isMorePopoverOpen.set(true);
+    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)] : [];
     }
-    closeMorePopover() {
-        if (this.morePopover()) {
-            this.morePopover().close();
-            this.isMorePopoverOpen.set(false);
+    hasParent(item) {
+        const path = this.getItemPath(item);
+        return path.length > 1;
+    }
+    getItemText(item) {
+        const path = this.getItemPath(item);
+        if (path.length === 0) {
+            return '';
         }
+        // Return the last item in the path (the actual node)
+        return path[path.length - 1];
     }
-    extractItem(item) {
+    getItemId(item) {
+        if (!item) {
+            return '';
+        }
+        return String(get(item, this.valueField()) ?? '');
+    }
+    //#endregion
+    //#region ----   Private Methods   ----
+    async extractItemWithPath(item) {
         if (isNil(item)) {
             return null;
         }
+        let itemObj;
         if (typeof item === 'object') {
-            return item;
+            itemObj = item;
         }
-        return {
-            [this.valueField]: item,
-            [this.textField]: item,
-        };
+        else {
+            // If item is just an ID, fetch the full item
+            const byKey = this.entityDef()?.queries.byKey?.execute;
+            if (byKey) {
+                try {
+                    itemObj = await byKey(item);
+                }
+                catch (error) {
+                    console.error('Error fetching item:', error);
+                    return null;
+                }
+            }
+            else {
+                itemObj = {
+                    [this.valueField()]: item,
+                    [this.textField()]: item,
+                };
+            }
+        }
+        // If item already has a path array, return it as is
+        if (itemObj.path && Array.isArray(itemObj.path) && itemObj.path.length > 0) {
+            return itemObj;
+        }
+        // Calculate path for the item
+        return await this.calculateItemPath(itemObj);
     }
-    getDisplayText(item) {
-        if (!item) {
-            return '';
+    /**
+     * 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?.[this.textField] ?? String(item);
+        // 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: AXPEntityCategoryWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPEntityCategoryWidgetColumnComponent, isStandalone: true, selector: "axp-entity-category-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, viewQueries: [{ propertyName: "moreButton", first: true, predicate: ["moreButton"], descendants: true, isSignal: true }, { propertyName: "morePopover", first: true, predicate: ["morePopover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-flex ax-items-center ax-gap-1 ax-flex-wrap">
-      @for (item of visibleItems(); track $index) {
-        <ax-badge
-          class="ax-p-0.5 ax-cursor-pointer"
-          [text]="getDisplayText(item)"
-          (click)="handleItemClick($index)"
-        ></ax-badge>
-      }
-      @if (hasMoreItems()) {
-        <span class="ax-cursor-pointer ax-px-1" (click)="showMoreItems()" #moreButton>
-          <i class="fas fa-ellipsis-h"></i>
-        </span>
-        <ax-popover #morePopover [openOn]="'manual'" (openChange)="onMorePopoverOpenChange($event)">
-          <div class="ax-p-2 ax-flex ax-flex-col ax-gap-1">
-            @for (item of remainingItems(); track $index) {
-              <ax-badge
-                class="ax-p-0.5 ax-cursor-pointer"
-                [text]="getDisplayText(item)"
-                (click)="handleItemClick(visibleItems().length + $index)"
-              ></ax-badge>
-            }
-          </div>
-        </ax-popover>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPEntityCategoryWidgetColumnComponent, isStandalone: true, selector: "axp-entity-category-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData", rawValueInput: ["rawValue", "rawValueInput"] }, host: { classAttribute: "ax-w-full" }, usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-flex ax-flex-col ax-gap-1.5">
+      @for (item of visibleItems(); track getItemId(item)) {
+        <div class=" ax-cursor-pointer" (click)="handleItemClick($index)">
+          @if (hasParent(item)) {
+            <ax-badge [color]="'primary'" [look]="'twotone'" class="ax-p-0.5" [text]="getItemText(item)">
+              <ax-prefix>
+                <i class="fas fa-ellipsis-h ax-text-neutral-400 ax-text-xs ax-ps-1"></i>
+                <i class="fas fa-chevron-right ax-text-neutral-400 ax-text-xs ax-px-1"></i>
+              </ax-prefix>
+            </ax-badge>
+          } @else {
+            <ax-badge [color]="'primary'" [look]="'twotone'" class="ax-p-0.5" [text]="getItemText(item)"> </ax-badge>
+          }
+        </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXButtonModule }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-entity-category-widget-column',
+                    host: {
+                        class: 'ax-w-full',
+                    },
                     template: `
-    <div class="ax-flex ax-items-center ax-gap-1 ax-flex-wrap">
-      @for (item of visibleItems(); track $index) {
-        <ax-badge
-          class="ax-p-0.5 ax-cursor-pointer"
-          [text]="getDisplayText(item)"
-          (click)="handleItemClick($index)"
-        ></ax-badge>
-      }
-      @if (hasMoreItems()) {
-        <span class="ax-cursor-pointer ax-px-1" (click)="showMoreItems()" #moreButton>
-          <i class="fas fa-ellipsis-h"></i>
-        </span>
-        <ax-popover #morePopover [openOn]="'manual'" (openChange)="onMorePopoverOpenChange($event)">
-          <div class="ax-p-2 ax-flex ax-flex-col ax-gap-1">
-            @for (item of remainingItems(); track $index) {
-              <ax-badge
-                class="ax-p-0.5 ax-cursor-pointer"
-                [text]="getDisplayText(item)"
-                (click)="handleItemClick(visibleItems().length + $index)"
-              ></ax-badge>
-            }
-          </div>
-        </ax-popover>
+    <div class="ax-flex ax-flex-col ax-gap-1.5">
+      @for (item of visibleItems(); track getItemId(item)) {
+        <div class=" ax-cursor-pointer" (click)="handleItemClick($index)">
+          @if (hasParent(item)) {
+            <ax-badge [color]="'primary'" [look]="'twotone'" class="ax-p-0.5" [text]="getItemText(item)">
+              <ax-prefix>
+                <i class="fas fa-ellipsis-h ax-text-neutral-400 ax-text-xs ax-ps-1"></i>
+                <i class="fas fa-chevron-right ax-text-neutral-400 ax-text-xs ax-px-1"></i>
+              </ax-prefix>
+            </ax-badge>
+          } @else {
+            <ax-badge [color]="'primary'" [look]="'twotone'" class="ax-p-0.5" [text]="getItemText(item)"> </ax-badge>
+          }
+        </div>
       }
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXBadgeModule, AXButtonModule, AXPopoverModule],
+                    imports: [CommonModule, AXBadgeModule, AXDecoratorModule],
                     inputs: ['rawValue', 'rowData'],
                 }]
-        }], propDecorators: { moreButton: [{ type: i0.ViewChild, args: ['moreButton', { isSignal: true }] }], morePopover: [{ type: i0.ViewChild, args: ['morePopover', { isSignal: true }] }] } });
+        }], propDecorators: { rawValueInput: [{
+                type: Input,
+                args: ['rawValue']
+            }] } });
 
 var entityCategoryWidgetColumn_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -7586,7 +8604,7 @@ class AXPTruncatedBreadcrumbComponent {
         }
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$2.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,
@@ -7703,6 +8721,8 @@ 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.tagBox = viewChild('tagBoxComponent', ...(ngDevMode ? [{ debugName: "tagBox" }] : []));
+        this.searchTerm = signal(null, ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
         //#endregion
         //#region ----   Private Properties   ----
         this.entityDef = signal(null, ...(ngDevMode ? [{ debugName: "entityDef" }] : []));
@@ -7757,13 +8777,62 @@ class AXPEntityCategoryWidgetEditComponent extends AXPValueWidgetComponent {
     handleAddClick(e) {
         this.showTreeSelector();
     }
-    handleRemoveItemClick(event, item) {
-        event.nativeEvent.stopPropagation();
-        this.removeItem(item);
+    handleValueChange(e) {
+        if (e.isUserInteraction) {
+            if (isNil(e.value) || isEmpty(e.value)) {
+                this.clear();
+            }
+            else {
+                const items = Array.isArray(e.value) ? e.value : [e.value];
+                this.setItems(items);
+            }
+        }
+    }
+    handleOnBlur(e) {
+        setTimeout(() => {
+            if (!this.isOpen()) {
+                this.clearInput();
+            }
+        }, 100);
+    }
+    async handleKeyUp(e) {
+        const keyEvent = e.nativeEvent;
+        const value = this.tagBox()?.inputValue() ?? '';
+        this.searchTerm.set(value);
+        if ((keyEvent.code == 'Enter' || keyEvent.code == 'NumpadEnter') && value) {
+            this.isLoading.set(true);
+            // For category widget, always open selector on Enter
+            this.showTreeSelector();
+            this.isLoading.set(false);
+        }
+        if (keyEvent.code == 'ArrowDown') {
+            this.showTreeSelector();
+        }
     }
     handleClearClick() {
         this.clear();
     }
+    async handleRemoveItem(event, index) {
+        event.stopPropagation();
+        if (this.disabled()) {
+            return;
+        }
+        const currentItems = this.selectedItems();
+        if (index < 0 || index >= currentItems.length) {
+            return;
+        }
+        const filteredItems = currentItems.filter((_, i) => i !== index);
+        if (filteredItems.length === 0) {
+            this.clear();
+        }
+        else {
+            await this.setItems(filteredItems);
+        }
+    }
+    clearInput() {
+        this.tagBox()?.inputValue.set('');
+        this.searchTerm.set('');
+    }
     async showTreeSelector() {
         this.isOpen.set(true);
         const currentValue = this.getValue();
@@ -7834,24 +8903,12 @@ class AXPEntityCategoryWidgetEditComponent extends AXPValueWidgetComponent {
         }
         finally {
             this.isOpen.set(false);
-        }
-    }
-    async removeItem(item) {
-        if (this.disabled()) {
-            return;
-        }
-        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();
-        }
-        else {
-            await this.setItems(filteredItems);
+            this.tagBox()?.focus();
         }
     }
     clear() {
         this.setValue(null);
+        this.clearInput();
         this.selectedItems.set([]);
         this.cdr.markForCheck();
     }
@@ -7933,6 +8990,7 @@ class AXPEntityCategoryWidgetEditComponent extends AXPValueWidgetComponent {
             return;
         }
         items = castArray(items);
+        this.clearInput();
         // 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
@@ -8074,47 +9132,78 @@ class AXPEntityCategoryWidgetEditComponent extends AXPValueWidgetComponent {
         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", 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>
-          }
-        </div>
+    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: "tagBox", first: true, predicate: ["tagBoxComponent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <ax-tag-box
+      #tagBoxComponent
+      [tagTemplate]="tagTemplate"
+      [ngModel]="selectedItems()"
+      [textField]="displayField()"
+      [valueField]="valueField()"
+      (onValueChanged)="handleValueChange($event)"
+      [placeholder]="selectedItems().length ? '' : searchPlaceholderText()"
+      [addOnEnter]="false"
+      [addOnComma]="false"
+      [readonly]="true"
+      [disabled]="disabled()"
+      (onKeyUp)="handleKeyUp($event)"
+      (onBlur)="handleOnBlur($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>
       }
 
-      <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)"
-        >
+      <ax-suffix>
+        <ax-button color="ghost" look="blank" [disabled]="isLoading() || disabled()" (onClick)="handleAddClick($event)">
           @if (isLoading()) {
             <ax-loading></ax-loading>
           } @else {
-            <ax-icon icon="far fa-plus"></ax-icon>
+            <ax-icon icon="far fa-search"></ax-icon>
           }
         </ax-button>
-
-        @if (allowClear() && selectedItems().length > 0) {
-          <ax-button color="ghost" look="outline" [disabled]="disabled()" (onClick)="handleClearClick()">
-            Clear All
-          </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">
+        <axp-truncated-breadcrumb
+          [attr.data-color]="item.color"
+          [sections]="getItemPath(item)"
+          [characterLimit]="characterLimit()"
+          [sectionLimit]="sectionLimit()"
+        ></axp-truncated-breadcrumb>
+        <button type="button" (click)="handleRemoveItem($event, index)">
+          <ax-icon class="ax-icon ax-icon-close"></ax-icon>
+        </button>
       </div>
-
+    </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: 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$2.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: "component", type: AXPTruncatedBreadcrumbComponent, selector: "axp-truncated-breadcrumb", inputs: ["sections", "characterLimit", "sectionLimit", "separatorIcon", "ellipsisIcon", "eyeIcon"] }], 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: `
+    <ax-tag-box
+      #tagBoxComponent
+      [tagTemplate]="tagTemplate"
+      [ngModel]="selectedItems()"
+      [textField]="displayField()"
+      [valueField]="valueField()"
+      (onValueChanged)="handleValueChange($event)"
+      [placeholder]="selectedItems().length ? '' : searchPlaceholderText()"
+      [addOnEnter]="false"
+      [addOnComma]="false"
+      [readonly]="true"
+      [disabled]="disabled()"
+      (onKeyUp)="handleKeyUp($event)"
+      (onBlur)="handleOnBlur($event)"
+    >
       @for (validation of validationRules(); track $index) {
         <ax-validation-rule
           [rule]="validation.rule"
@@ -8122,76 +9211,49 @@ class AXPEntityCategoryWidgetEditComponent extends AXPValueWidgetComponent {
           [options]="validation.options"
         ></ax-validation-rule>
       }
-    </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: i2$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: `
-    <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>
-          }
-        </div>
+      @if (selectedItems().length > 1 || allowClear()) {
+        <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
       }
 
-      <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)"
-        >
+      <ax-suffix>
+        <ax-button color="ghost" look="blank" [disabled]="isLoading() || disabled()" (onClick)="handleAddClick($event)">
           @if (isLoading()) {
             <ax-loading></ax-loading>
           } @else {
-            <ax-icon icon="far fa-plus"></ax-icon>
+            <ax-icon icon="far fa-search"></ax-icon>
           }
         </ax-button>
-
-        @if (allowClear() && selectedItems().length > 0) {
-          <ax-button color="ghost" look="outline" [disabled]="disabled()" (onClick)="handleClearClick()">
-            Clear All
-          </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">
+        <axp-truncated-breadcrumb
+          [attr.data-color]="item.color"
+          [sections]="getItemPath(item)"
+          [characterLimit]="characterLimit()"
+          [sectionLimit]="sectionLimit()"
+        ></axp-truncated-breadcrumb>
+        <button type="button" (click)="handleRemoveItem($event, index)">
+          <ax-icon class="ax-icon ax-icon-close"></ax-icon>
+        </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>
+    </ng-template>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [
                         CommonModule,
+                        FormsModule,
                         AXButtonModule,
                         AXDecoratorModule,
                         AXLoadingModule,
                         AXValidationModule,
                         AXFormModule,
+                        AXTagBoxModule,
                         AXTranslationModule,
                         AXPTruncatedBreadcrumbComponent,
                     ],
                 }]
-        }] });
+        }], propDecorators: { tagBox: [{ type: i0.ViewChild, args: ['tagBoxComponent', { isSignal: true }] }] } });
 
 var entityCategoryWidgetEdit_component = /*#__PURE__*/Object.freeze({
     __proto__: null,
@@ -8293,7 +9355,7 @@ class AXPEntityCategoryWidgetViewComponent extends AXPValueWidgetComponent {
         <span class="ax-text-muted">---</span>
       }
     }
-  `, 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$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, 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$2.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,
@@ -8787,6 +9849,8 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
         this.entityListTableService = inject(AXPEntityListTableService);
         this.entityListToolbarService = inject(AXPEntityListToolbarService);
         this.deviceService = inject(AXPDeviceService);
+        this.commandService = inject(AXPCommandService);
+        this.eventService = inject(AXPBroadcastEventService);
         this.isMounted = signal(false, ...(ngDevMode ? [{ debugName: "isMounted" }] : []));
         this.entity = signal(null, ...(ngDevMode ? [{ debugName: "entity" }] : []));
         this.listNode = signal(null, ...(ngDevMode ? [{ debugName: "listNode" }] : []));
@@ -8869,17 +9933,21 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
             return actions;
         }, ...(ngDevMode ? [{ debugName: "secondaryActions" }] : []));
         //#region ----   Query Change Handler   ----
+        this.queries = undefined;
         this.#effect = effect(() => {
-            const queries = this.getValue()?.toolbar;
+            //TODO: this is a temporary solution to handle the query changes; this should be removed when the query changes are handled in the widget core;
+            if (this.getValue()?.toolbar) {
+                this.queries = this.getValue()?.toolbar;
+            }
             const listInstance = this.listWidget()?.instance;
             // const dataSource = this.listWidget()?.options()['dataSource'] as AXDataSource;
             const dataSource = listInstance?.options()?.['dataSource'];
             const isMounted = this.isMounted();
-            if (!this.hasRequiredDependencies(dataSource, queries, listInstance)) {
+            if (!this.hasRequiredDependencies(dataSource, this.queries, listInstance)) {
                 return;
             }
             untracked(() => {
-                this.handleQueryChanges(queries, dataSource, listInstance, isMounted);
+                this.handleQueryChanges(this.queries, dataSource, listInstance, isMounted);
             });
         }, ...(ngDevMode ? [{ debugName: "#effect" }] : []));
         //#endregion
@@ -8912,23 +9980,43 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
         });
         const command = commandName.split('&')[0];
         // const options = await this.evaluateExpressions(action?.options, data);
-        await this.workflow.execute(command, {
-            entity: this.entitySource(),
-            entityInfo: {
-                name: this.entity()?.name,
-                module: this.entity()?.module,
-                title: this.entity()?.title,
-                parentKey: this.entity()?.parentKey,
-                source: `${this.entity()?.module}.${this.entity()?.name}`,
-            },
-            data: action?.scope == AXPEntityCommandScope.Selected
-                ? this.selectedItems()
-                : action?.options?.['process']?.data || null,
-            options: action?.options,
-            metadata: action?.metadata,
-        });
+        if (this.commandService.exists(command)) {
+            await this.commandService.execute(command, {
+                __context__: {
+                    entity: this.entitySource(),
+                    entityInfo: {
+                        name: this.entity()?.name,
+                        module: this.entity()?.module,
+                        title: this.entity()?.title,
+                        parentKey: this.entity()?.parentKey,
+                        source: `${this.entity()?.module}.${this.entity()?.name}`,
+                    },
+                    data: action?.scope == AXPEntityCommandScope.Selected
+                        ? this.selectedItems()
+                        : action?.options?.['process']?.data || null,
+                    options: action?.options,
+                    metadata: action?.metadata,
+                },
+            });
+        }
+        else {
+            await this.workflow.execute(command, {
+                entity: this.entitySource(),
+                entityInfo: {
+                    name: this.entity()?.name,
+                    module: this.entity()?.module,
+                    title: this.entity()?.title,
+                    parentKey: this.entity()?.parentKey,
+                    source: `${this.entity()?.module}.${this.entity()?.name}`,
+                },
+                data: action?.scope == AXPEntityCommandScope.Selected
+                    ? this.selectedItems()
+                    : action?.options?.['process']?.data || null,
+                options: action?.options,
+                metadata: action?.metadata,
+            });
+        }
     }
-    //#region ----   Query Change Handler   ----
     #effect;
     /**
      * Validates that all required dependencies are available
@@ -9061,6 +10149,14 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
                 this.listWidget()?.instance.call('refresh');
             }
         });
+        this.eventService
+            .listen(AXPEntityEventsKeys.REFRESH_LAYOUT)
+            .pipe(takeUntil(this.destroyed))
+            .subscribe((e) => {
+            if (e.data.name == `${this.entity()?.module}.${this.entity()?.name}`) {
+                this.listWidget()?.instance.call('refresh');
+            }
+        });
         const listWidget = (await this.layoutService.waitForWidget(`${this.entitySource()}-tab-list_table`, 500));
         if (listWidget?.api && typeof listWidget.api === 'function') {
             const onSelectionChange = listWidget.api()['onSelectionChange'];
@@ -9189,7 +10285,7 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
         ></ng-container>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "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 }); }
+  `, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityListWidgetViewComponent, decorators: [{
             type: Component,
@@ -9760,7 +10856,7 @@ class AXPLookupWidgetViewComponent extends AXPValueWidgetComponent {
           <span class="ax-text-muted">---</span>
         }
     }
-  `, 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$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, 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$2.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,
@@ -10012,6 +11108,7 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
         this.disabled = computed(() => this.options()['disabled'], ...(ngDevMode ? [{ debugName: "disabled" }] : []));
         this.columns = computed(() => this.options()['columns'] ?? [], ...(ngDevMode ? [{ debugName: "columns" }] : []));
         this.textField = computed(() => this.options()['textField'] ?? '', ...(ngDevMode ? [{ debugName: "textField" }] : []));
+        this.hasClearButton = computed(() => this.options()['hasClearButton'] ?? false, ...(ngDevMode ? [{ debugName: "hasClearButton" }] : []));
         this.customFilter = computed(() => this.options()['filter'], ...(ngDevMode ? [{ debugName: "customFilter" }] : []));
         this.multiple = computed(() => (this.options()['multiple'] ?? false), ...(ngDevMode ? [{ debugName: "multiple" }] : []));
         this.look = computed(() => this.options()['look'] ?? 'lookup', ...(ngDevMode ? [{ debugName: "look" }] : []));
@@ -10408,6 +11505,9 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
           [multiple]="multiple()"
           (onValueChanged)="selectBoxValueChange($event)"
         >
+          @if (hasClearButton()) {
+            <ax-clear-button></ax-clear-button>
+          }
           <ax-search-box
             [placeholder]="selectedItems().length ? '' : searchPlaceholderText()"
             (onValueChanged)="handleSearchInputChange($event)"
@@ -10476,9 +11576,9 @@ class AXPLookupWidgetEditComponent extends AXPValueWidgetComponent {
         </ng-template>
       }
     }
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: 
+  `, 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: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: 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 }); }
+                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$2.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,
@@ -10497,6 +11597,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
           [multiple]="multiple()"
           (onValueChanged)="selectBoxValueChange($event)"
         >
+          @if (hasClearButton()) {
+            <ax-clear-button></ax-clear-button>
+          }
           <ax-search-box
             [placeholder]="selectedItems().length ? '' : searchPlaceholderText()"
             (onValueChanged)="handleSearchInputChange($event)"
@@ -10851,7 +11954,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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i2$3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: 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: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: 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.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$3.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: 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$2.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,
@@ -11370,7 +12473,7 @@ class AXPEntityModule {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityModule, deps: [{ token: i1$2.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$1.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$4.AXPWorkflowModule, i3$1.AXPWidgetCoreModule] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityModule, providers: [
             {
@@ -11562,7 +12665,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         ]),
                     ],
                 }]
-        }], ctorParameters: () => [{ type: i1$2.AXPAppStartUpService }, { type: i0.Injector }] });
+        }], ctorParameters: () => [{ type: i1$1.AXPAppStartUpService }, { type: i0.Injector }] });
 
 //#endregion
 //#region ----   Get Entity Details Query   ----
@@ -11716,7 +12819,7 @@ function entityDetailsCreateActions(parentId) {
     return {
         title: '@general:actions.create.title',
         command: {
-            name: 'create-entity',
+            name: 'Entity:Create',
             options: {
                 process: {
                     redirect: false,
@@ -11793,7 +12896,7 @@ function entityDetailsReferenceCreateActions(type) {
         {
             title: '@general:actions.create.title',
             command: {
-                name: 'create-entity',
+                name: 'Entity:Create',
                 options: {
                     process: {
                         redirect: false,