@acorex/platform 21.0.0-next.10 → 21.0.0-next.11

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

@@ -5,7 +5,7 @@ import * as i4$1 from '@acorex/platform/common';
 import { AXPSettingsService, AXPFilterOperatorMiddlewareService, AXPEntityCommandScope, getEntityInfo, AXPRefreshEvent, AXPReloadEvent, AXPCommonSettings, AXPEntityQueryType, AXPCleanNestedFilters, AXPWorkflowNavigateAction, AXPToastAction, AXP_SEARCH_DEFINITION_PROVIDER } from '@acorex/platform/common';
 import { AXPDeviceService, AXPBroadcastEventService, resolveActionLook, AXPExpressionEvaluatorService, AXPDistributedEventListenerService, AXPPlatformScope, AXPColumnWidthService, AXHighlightService, extractValue, setSmart, getChangedPaths, defaultColumnWidthProvider, AXP_COLUMN_WIDTH_PROVIDER, 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, effect, Input, afterNextRender, untracked, ViewEncapsulation, ChangeDetectorRef, viewChildren, linkedSignal, HostBinding, output, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injector, runInInjectionContext, Injectable, input, viewChild, signal, ElementRef, ChangeDetectionStrategy, Component, ApplicationRef, EnvironmentInjector, createComponent, computed, ChangeDetectorRef, effect, Input, afterNextRender, untracked, ViewEncapsulation, viewChildren, linkedSignal, HostBinding, output, NgModule } from '@angular/core';
 import { Subject, takeUntil } from 'rxjs';
 import { AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
 import { merge, castArray, get, cloneDeep, set, orderBy, isNil, isEmpty, isEqual } from 'lodash-es';
@@ -44,9 +44,11 @@ import { AXSearchBoxModule, AXSearchBoxComponent } from '@acorex/components/sear
 import * as i6$1 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import { AXTreeViewComponent } from '@acorex/components/tree-view';
-import { AXPStateMessageComponent, AXPDataSelectorService } from '@acorex/platform/layout/components';
+import { AXPStateMessageComponent, AXPColumnItemListComponent, AXPDataSelectorService } from '@acorex/platform/layout/components';
 import * as i1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import * as i3$4 from '@acorex/components/tooltip';
+import { AXTooltipModule } from '@acorex/components/tooltip';
 import * as i5$2 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
 import * as i6$2 from '@acorex/components/tag-box';
@@ -6339,6 +6341,7 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
         this.categoryTreeService = inject(AXPCategoryTreeService);
         this.translationService = inject(AXTranslationService);
         this.highlightService = inject(AXHighlightService);
+        this.changeDetectorRef = inject(ChangeDetectorRef);
         //#endregion
         //#region ----   Properties (Set by popup service)   ----
         this.entityKey = signal('', ...(ngDevMode ? [{ debugName: "entityKey" }] : []));
@@ -6430,43 +6433,27 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
                     }
                 });
             }
-            // Mark pre-selected nodes as selected in the child nodes
+            // Mark pre-selected leaf nodes as selected in the child nodes
+            const selectedIds = this.selectedNodeIds();
             childNodes.forEach((node) => {
-                this.markNodeAsSelectedIfNeeded(node);
+                const nodeId = String(node['id'] ?? '');
+                if (nodeId && selectedIds.includes(nodeId)) {
+                    node['selected'] = true;
+                }
             });
-            // After children load, programmatically select pre-selected nodes
-            // Use a small delay to ensure nodes are fully added to tree structure
+            // After children load, programmatically select pre-selected nodes in tree component
             const treeComponent = this.tree();
-            if (treeComponent) {
+            if (treeComponent && selectedIds.length > 0) {
                 // 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);
-                                }
+                                treeComponent.selectNode(nodeId);
                             }
-                            catch (error) {
-                                // Node might not be in tree yet, will be selected when it loads
+                            catch {
+                                // Node might not be in tree yet
                             }
                         }
                     });
@@ -6988,14 +6975,10 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
         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
+        // The tree component fires selection changes, but we only want to track LEAF nodes
+        // Parent nodes are auto-selected/deselected by the tree's intermediate-nested behavior
         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
+        // Cache node data for all selected nodes first
         selectedNodes.forEach((node) => {
             const nodeId = String(node['id'] ?? '');
             const nodeData = node['data'];
@@ -7003,6 +6986,23 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
                 this.nodeDataCache.set(nodeId, nodeData);
             }
         });
+        // Filter to only leaf nodes (nodes with no children or childrenCount === 0)
+        const leafNodeIds = [];
+        for (const node of selectedNodes) {
+            const nodeId = String(node['id'] ?? '');
+            if (!nodeId || nodeId === 'all') {
+                continue;
+            }
+            // Check if this is a leaf node
+            const children = node['children'];
+            const childrenCount = node['childrenCount'];
+            const isLeaf = (!children || children.length === 0) && (childrenCount === undefined || childrenCount === 0);
+            if (isLeaf) {
+                leafNodeIds.push(nodeId);
+            }
+        }
+        // Update selectedNodeIds with only leaf nodes
+        this.selectedNodeIds.set(leafNodeIds);
     }
     // protected handleNodeClick(event: any): void {
     //   // Extract node from event - could be { node: AXTreeNode } or just AXTreeNode
@@ -7040,6 +7040,26 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
     async onCancel() {
         await this.close();
     }
+    /**
+     * Clears all selected items
+     */
+    onClearAll() {
+        const treeComponent = this.tree();
+        if (treeComponent) {
+            // Deselect all nodes in tree component
+            const currentSelected = this.selectedNodeIds();
+            for (const id of currentSelected) {
+                try {
+                    treeComponent.deselectNode(id);
+                }
+                catch {
+                    // Node might not be in tree
+                }
+            }
+        }
+        // Clear the selection
+        this.selectedNodeIds.set([]);
+    }
     /**
      * Checks if a node matches the current search term
      */
@@ -7058,8 +7078,8 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
     }
     /**
      * 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
+     * In multiple mode: recursively selects/deselects LEAF children only
+     * Parent states are calculated based on leaf descendants
      */
     async handleCheckboxChange(nodeId, checked) {
         if (!nodeId || nodeId === 'all') {
@@ -7071,15 +7091,142 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
             return;
         }
         if (checked) {
-            // Select the node and recursively select all its children
-            await this.selectNodeAndChildren(id);
+            // Select all descendant LEAF nodes
+            await this.selectLeafDescendants(id);
         }
         else {
-            // Deselect the node and recursively deselect all its children
-            await this.deselectNodeAndChildren(id);
+            // Deselect all descendant LEAF nodes
+            await this.deselectLeafDescendants(id);
+        }
+        // Update parent states after selection change
+        await this.refreshParentStatesInTree();
+    }
+    /**
+     * Selects all leaf descendants of a node (and the node itself if it's a leaf)
+     */
+    async selectLeafDescendants(nodeId) {
+        this.isUpdatingSelection = true;
+        try {
+            // Collect all leaf descendants
+            const leafNodes = new Set();
+            await this.collectLeafDescendants(nodeId, leafNodes);
+            if (leafNodes.size === 0) {
+                // Node itself is a leaf
+                leafNodes.add(nodeId);
+            }
+            // Update selectedNodeIds with leaf nodes only
+            const currentSelected = new Set(this.selectedNodeIds());
+            leafNodes.forEach((id) => currentSelected.add(id));
+            this.selectedNodeIds.set(Array.from(currentSelected));
+            // Sync with tree component
+            const treeComponent = this.tree();
+            if (treeComponent) {
+                for (const leafId of leafNodes) {
+                    try {
+                        const node = treeComponent.findNode(leafId);
+                        if (node) {
+                            treeComponent.selectNode(leafId);
+                        }
+                    }
+                    catch {
+                        // Node might not be in tree
+                    }
+                }
+            }
+        }
+        finally {
+            this.isUpdatingSelection = false;
+        }
+    }
+    /**
+     * Deselects all leaf descendants of a node (and the node itself if it's a leaf)
+     */
+    async deselectLeafDescendants(nodeId) {
+        this.isUpdatingSelection = true;
+        try {
+            // Collect all leaf descendants
+            const leafNodes = new Set();
+            await this.collectLeafDescendants(nodeId, leafNodes);
+            if (leafNodes.size === 0) {
+                // Node itself is a leaf
+                leafNodes.add(nodeId);
+            }
+            // Remove leaf nodes from selectedNodeIds
+            const currentSelected = this.selectedNodeIds();
+            const newSelected = currentSelected.filter((id) => !leafNodes.has(id));
+            this.selectedNodeIds.set(newSelected);
+            // Sync with tree component
+            const treeComponent = this.tree();
+            if (treeComponent) {
+                for (const leafId of leafNodes) {
+                    try {
+                        const node = treeComponent.findNode(leafId);
+                        if (node) {
+                            treeComponent.deselectNode(leafId);
+                        }
+                    }
+                    catch {
+                        // Node might not be in tree
+                    }
+                }
+            }
+        }
+        finally {
+            this.isUpdatingSelection = false;
+        }
+    }
+    /**
+     * Collects all LEAF descendant node IDs recursively
+     * A leaf node is one that has no children
+     */
+    async collectLeafDescendants(parentId, collection) {
+        if (!this.treeData || !this.treeConfig || !parentId || parentId === 'all') {
+            return;
+        }
+        try {
+            const childNodes = await this.datasource(parentId);
+            if (!childNodes || childNodes.length === 0) {
+                // No children means this node is a leaf - add the parent itself
+                // But only if it wasn't already added through the parent call
+                return;
+            }
+            for (const childNode of childNodes) {
+                const childId = String(childNode['id'] ?? '');
+                if (!childId || childId === 'all') {
+                    continue;
+                }
+                // Cache node data
+                const nodeData = childNode['data'];
+                if (nodeData && typeof nodeData === 'object') {
+                    this.nodeDataCache.set(childId, nodeData);
+                }
+                // Check if this child is a leaf by trying to load its children
+                const grandchildNodes = await this.datasource(childId);
+                if (!grandchildNodes || grandchildNodes.length === 0) {
+                    // This child is a leaf node
+                    collection.add(childId);
+                }
+                else {
+                    // This child has children, recurse
+                    await this.collectLeafDescendants(childId, collection);
+                }
+            }
+        }
+        catch (error) {
+            console.error(`Error collecting leaf descendants for node ${parentId}:`, error);
+        }
+    }
+    /**
+     * Refreshes parent states in the tree based on leaf selection
+     */
+    async refreshParentStatesInTree() {
+        const treeComponent = this.tree();
+        if (!treeComponent) {
+            return;
         }
-        // Note: Parent states (select/intermediate) are handled automatically by the tree component
-        // with selectionBehavior: 'intermediate-nested'. We don't need to manually update them.
+        // The tree component with intermediate-nested behavior should handle this
+        // But we need to force a refresh by reloading data
+        // For now, we rely on the tree component's built-in behavior
     }
     /**
      * Selects a node and recursively selects all its children
@@ -7452,357 +7599,296 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
         // 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
+            // Step 1: 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));
+            // Step 2: Build complete ancestor chains for all selected nodes
+            const ancestorChains = await this.buildAncestorChains(ids);
+            // Step 3: Set selected node IDs (these should be leaf nodes only)
+            this.selectedNodeIds.set(ids);
+            // Step 4: Expand ancestor nodes in order (root to leaf) to load them into tree
+            await this.expandAncestorNodesInOrder(ancestorChains);
+            // Step 5: Wait for tree to render and sync selection
+            await this.syncSelectionWithTree(ids);
         }
         finally {
             this.isUpdatingSelection = false;
         }
     }
     /**
-     * Updates all parent states based on their children's selection
-     * Used during initialization to ensure proper parent states (select/intermediate)
+     * Builds complete ancestor chains for all selected node IDs.
+     * Returns a Map where key is the selected node ID and value is array of ancestor IDs from root to parent.
      */
-    async updateAllParentStates(selectedIds) {
-        if (!this.treeData || !this.treeConfig || !this.allowMultiple() || selectedIds.length === 0) {
-            return;
+    async buildAncestorChains(selectedIds) {
+        const ancestorChains = new Map();
+        if (!this.treeData || !this.treeConfig) {
+            return ancestorChains;
         }
         const parentKey = this.treeData.categoryEntityDef?.parentKey;
         if (!parentKey) {
-            return;
-        }
-        const treeComponent = this.tree();
-        if (!treeComponent) {
-            return;
+            // No parent key means flat structure
+            return ancestorChains;
         }
-        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) {
+        for (const nodeId of selectedIds) {
+            const chain = [];
+            let currentData = this.nodeDataCache.get(nodeId);
+            if (!currentData) {
                 continue;
             }
-            let currentId = selectedId;
-            while (currentId && currentId !== 'all') {
-                const currentNodeData = this.nodeDataCache.get(currentId);
-                if (!currentNodeData) {
+            // Traverse up to root, collecting ancestor IDs
+            const visited = new Set();
+            while (currentData) {
+                const parentId = currentData[parentKey];
+                if (!parentId || parentId === 'all' || visited.has(String(parentId))) {
                     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++;
-                            }
-                        }
+                visited.add(parentIdStr);
+                chain.unshift(parentIdStr); // Add to beginning (root first)
+                // Load parent data if not cached
+                if (!this.nodeDataCache.has(parentIdStr)) {
+                    const parentData = await this.fetchItemById(parentIdStr);
+                    if (parentData) {
+                        this.nodeDataCache.set(parentIdStr, parentData);
+                        currentData = parentData;
                     }
-                    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
-                                }
-                            }
-                        }
+                    else {
+                        break;
                     }
                 }
-                catch (error) {
-                    console.error(`Error updating parent state for ${parentId}:`, error);
+                else {
+                    currentData = this.nodeDataCache.get(parentIdStr);
                 }
             }
+            ancestorChains.set(nodeId, chain);
         }
+        return ancestorChains;
     }
     /**
-     * Expands parents of selected nodes so they're visible when popup opens
+     * Expands ancestor nodes in order from root to leaf.
+     * This ensures parent nodes are loaded into the tree before selecting children.
      */
-    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
-        }
+    async expandAncestorNodesInOrder(ancestorChains) {
         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;
-                    }
+        // Collect all unique ancestors and sort by depth (shallowest first)
+        const allAncestors = new Set();
+        const ancestorDepths = new Map();
+        ancestorChains.forEach((chain) => {
+            chain.forEach((ancestorId, depth) => {
+                allAncestors.add(ancestorId);
+                // Keep the minimum depth if ancestor appears in multiple chains
+                const existingDepth = ancestorDepths.get(ancestorId);
+                if (existingDepth === undefined || depth < existingDepth) {
+                    ancestorDepths.set(ancestorId, depth);
                 }
-            }
-        }
-        // 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
+        // Sort by depth (root ancestors first)
+        const sortedAncestors = Array.from(allAncestors).sort((a, b) => {
+            return (ancestorDepths.get(a) ?? 0) - (ancestorDepths.get(b) ?? 0);
+        });
+        // First expand root node if not expanded
+        try {
+            if (!treeComponent.isNodeExpanded('all')) {
+                await treeComponent.expandNode('all');
+                await new Promise((resolve) => setTimeout(resolve, 50));
             }
         }
-    }
-    /**
-     * 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
+        catch {
+            // Root might not exist
         }
-        // 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
+        // Expand ancestors in order - this loads them into the tree via datasource callback
+        for (const ancestorId of sortedAncestors) {
             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 (!treeComponent.isNodeExpanded(ancestorId)) {
+                    await treeComponent.expandNode(ancestorId);
+                    // Small delay to allow tree to process the expansion
+                    await new Promise((resolve) => setTimeout(resolve, 30));
                 }
             }
-            if (hasNewSelections) {
-                this.selectedNodeIds.set(newSelected);
-                // Recursively check parents of these parents
-                const updatedSelected = this.selectedNodeIds();
-                await this.selectParentsWithAllChildrenSelected(updatedSelected);
+            catch {
+                // Ancestor might not be in tree yet, continue
             }
         }
     }
     /**
-     * Syncs selection state with the tree component
-     * Handles cases where nodes might not be in the tree structure yet
+     * Syncs selection state with the tree component.
+     * Selects leaf nodes and manually updates parent states (indeterminate/selected).
      */
     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));
+        // Wait for tree to be fully initialized after ancestor expansion
+        await new Promise((resolve) => setTimeout(resolve, 200));
+        // Keep track of successfully synced nodes
+        const syncedNodes = new Set();
         // 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') {
+        for (let attempt = 0; attempt < 5; attempt++) {
+            for (const id of selectedIds) {
+                if (id && id !== 'all' && !syncedNodes.has(id)) {
                     try {
                         const node = treeComponent.findNode(id);
                         if (node) {
-                            // Node exists in tree, select it
-                            treeComponent.selectNode(id);
-                            syncedCount++;
+                            // Node exists in tree - mark it as selected using both methods
+                            // 1. Direct property assignment for immediate visual feedback
+                            node['selected'] = true;
+                            node['indeterminate'] = false;
+                            // 2. Use selectNode API for tree's internal state tracking
+                            try {
+                                treeComponent.selectNode(id);
+                            }
+                            catch {
+                                // selectNode might fail but direct assignment should work
+                            }
+                            syncedNodes.add(id);
                         }
                     }
                     catch {
-                        // Node not in tree yet - will be selected when loaded via datasource callback
+                        // Node not in tree yet
                     }
                 }
-            });
+            }
             // If all nodes are synced, we're done
-            if (syncedCount === selectedIds.length) {
+            if (syncedNodes.size === selectedIds.length) {
                 break;
             }
-            // Wait a bit before next attempt
-            if (attempt < 2) {
-                await new Promise((resolve) => setTimeout(resolve, 100));
+            // Wait before next attempt
+            await new Promise((resolve) => setTimeout(resolve, 100));
+        }
+        // Now update parent states (indeterminate/selected) based on children
+        // This uses bottom-up traversal with datasource fallback for loading children
+        await this.updateParentStatesAfterSelection(selectedIds);
+        // Refresh tree to apply changes
+        treeComponent.refresh();
+        // Trigger change detection to update UI
+        this.changeDetectorRef.markForCheck();
+    }
+    /**
+     * Updates parent node states (selected/indeterminate) based on children selection.
+     * Called after leaf nodes are selected to properly show parent states.
+     * Works bottom-up from deepest parents to root, tracking states in a Map.
+     */
+    async updateParentStatesAfterSelection(selectedLeafIds) {
+        if (!this.treeData || !this.treeConfig || selectedLeafIds.length === 0) {
+            return;
+        }
+        const parentKey = this.treeData.categoryEntityDef?.parentKey;
+        if (!parentKey) {
+            return;
+        }
+        const treeComponent = this.tree();
+        if (!treeComponent) {
+            return;
+        }
+        // Track node states: { selected: boolean, indeterminate: boolean }
+        // This allows us to reference child states when processing parents
+        const nodeStates = new Map();
+        // Initialize with selected leaf nodes
+        for (const leafId of selectedLeafIds) {
+            nodeStates.set(leafId, { selected: true, indeterminate: false });
+        }
+        // Collect all unique parent IDs from selected nodes
+        const parentsToUpdate = new Set();
+        for (const leafId of selectedLeafIds) {
+            const nodeData = this.nodeDataCache.get(leafId);
+            if (!nodeData) {
+                continue;
+            }
+            // Traverse up the parent chain
+            let currentData = nodeData;
+            while (currentData) {
+                const parentId = currentData[parentKey];
+                if (!parentId || parentId === 'all') {
+                    break;
+                }
+                parentsToUpdate.add(String(parentId));
+                currentData = this.nodeDataCache.get(String(parentId));
             }
         }
-        // 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()) {
+        // Sort parents by depth (deepest first so we update bottom-up)
+        const sortedParents = await this.sortParentsByDepth(Array.from(parentsToUpdate));
+        const reversedParents = [...sortedParents].reverse(); // Deepest first
+        for (const parentId of reversedParents) {
             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);
+                const parentNode = treeComponent.findNode(parentId);
+                // Get all direct children of this parent
+                // First try from tree node, then fall back to datasource
+                let childrenList = [];
+                const treeChildren = parentNode?.['children'];
+                if (treeChildren && treeChildren.length > 0) {
+                    childrenList = treeChildren.map((c) => ({ id: String(c['id'] ?? '') }));
+                }
+                else {
+                    // Children not in tree node - load via datasource
+                    try {
+                        const dsChildren = await this.datasource(parentId);
+                        if (dsChildren && dsChildren.length > 0) {
+                            childrenList = dsChildren.map((c) => ({ id: String(c['id'] ?? '') }));
+                        }
+                    }
+                    catch {
+                        // Datasource failed, skip this parent
+                        continue;
+                    }
+                }
+                if (childrenList.length === 0) {
+                    continue;
+                }
+                // Count child states using our tracked nodeStates Map
+                let fullySelectedCount = 0;
+                let indeterminateCount = 0;
+                let totalCount = 0;
+                for (const child of childrenList) {
+                    if (!child.id || child.id === 'all') {
+                        continue;
+                    }
+                    totalCount++;
+                    const childState = nodeStates.get(child.id);
+                    if (childState) {
+                        if (childState.selected && !childState.indeterminate) {
+                            // Child is fully selected
+                            fullySelectedCount++;
+                        }
+                        else if (childState.indeterminate) {
+                            // Child is indeterminate
+                            indeterminateCount++;
+                        }
+                        // If neither, child is not selected at all
+                    }
+                    // If childState is undefined, child is not in our tracking = not selected
+                }
+                // Determine parent state based on children
+                let parentSelected = false;
+                let parentIndeterminate = false;
+                if (totalCount > 0) {
+                    if (fullySelectedCount === totalCount && indeterminateCount === 0) {
+                        // All children are fully selected - parent is fully selected
+                        parentSelected = true;
+                        parentIndeterminate = false;
+                    }
+                    else if (fullySelectedCount > 0 || indeterminateCount > 0) {
+                        // Some children selected or indeterminate - parent is indeterminate
+                        parentSelected = true;
+                        parentIndeterminate = true;
+                    }
+                    // else: no children selected - parent stays unselected
+                }
+                // Store state in our tracking Map (for use by parent's parent)
+                nodeStates.set(parentId, { selected: parentSelected, indeterminate: parentIndeterminate });
+                // Update tree node if it exists
+                if (parentNode) {
+                    parentNode['selected'] = parentSelected;
+                    parentNode['indeterminate'] = parentIndeterminate;
+                }
             }
-            catch {
-                // Tree component might not be ready yet
+            catch (error) {
+                console.error(`Error updating parent state for ${parentId}:`, error);
             }
         }
-        // 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.
@@ -7970,7 +8056,7 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
     }
     /**
      * Calculate the full path from root to the selected node.
-     * Returns an array of strings like ["C", "B"] for node B under parent C.
+     * Returns an array of strings like ["Operations", "IT Operations"] for node "IT Operations" under parent "Operations".
      * Uses tree-view's getNodePath() API when available, otherwise falls back to manual calculation.
      */
     async calculateNodePath(nodeId, nodeData) {
@@ -7982,6 +8068,7 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
         if (treeComponent) {
             try {
                 // Use tree-view's getNodePath() to get ID path, then convert to titles
+                // Note: getNodePath() returns the path INCLUDING the node itself
                 const idPath = treeComponent.getNodePath(nodeId);
                 if (idPath && idPath.length > 0) {
                     const titlePath = [];
@@ -8006,12 +8093,8 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
                             }
                         }
                     }
-                    // Add current node title
-                    const currentTitle = this.getNodeTitle(nodeData);
-                    if (currentTitle) {
-                        titlePath.push(currentTitle);
-                    }
-                    return titlePath.length > 0 ? titlePath : currentTitle ? [currentTitle] : [];
+                    // DO NOT add current node title again - it's already included in idPath
+                    return titlePath.length > 0 ? titlePath : this.getNodeTitle(nodeData) ? [this.getNodeTitle(nodeData)] : [];
                 }
             }
             catch (error) {
@@ -8152,15 +8235,13 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
         }
     }
     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
+        // selectedNodeIds now only contains LEAF nodes (already filtered)
         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) => {
             // First try to get from cache
             let nodeData = this.nodeDataCache.get(id);
@@ -8177,20 +8258,22 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
                     }
                 }
                 catch {
-                    // Node not found in tree, continue with cache lookup
+                    // Node not found in tree
+                }
+            }
+            // If still no data, try to fetch from server
+            if (!nodeData) {
+                const fetchedData = await this.fetchItemById(id);
+                if (fetchedData) {
+                    nodeData = fetchedData;
+                    this.nodeDataCache.set(id, fetchedData);
                 }
             }
             // If still no data, skip this node
             if (!nodeData) {
+                console.warn(`Could not find data for selected node: ${id}`);
                 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,
@@ -8301,6 +8384,13 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
             <span class="ax-text-base ax-font-medium ax-text-text-primary">
               {{ '@general:terms.interface.items-selected' | translate | async }}
             </span>
+            <ax-button
+              look="blank"
+              color="ghost"
+              class="ax-text-sm"
+              [text]="'@general:terms.interface.unselect-all' | translate | async"
+              (onClick)="onClearAll()"
+            ></ax-button>
           </div>
         </ax-prefix>
       }
@@ -8425,6 +8515,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             <span class="ax-text-base ax-font-medium ax-text-text-primary">
               {{ '@general:terms.interface.items-selected' | translate | async }}
             </span>
+            <ax-button
+              look="blank"
+              color="ghost"
+              class="ax-text-sm"
+              [text]="'@general:terms.interface.unselect-all' | translate | async"
+              (onClick)="onClearAll()"
+            ></ax-button>
           </div>
         </ax-prefix>
       }
@@ -8526,6 +8623,13 @@ class AXPEntityCategoryWidgetColumnComponent extends AXPColumnWidgetComponent {
         //#endregion
         //#region ----   Computed Properties (Derived)   ----
         this.visibleItems = computed(() => this.displayItems(), ...(ngDevMode ? [{ debugName: "visibleItems" }] : []));
+        this.columnItems = computed(() => {
+            return this.visibleItems().map((item) => ({
+                id: this.getItemId(item),
+                content: this.getItemText(item),
+                originalItem: item, // Store original item for template access
+            }));
+        }, ...(ngDevMode ? [{ debugName: "columnItems" }] : []));
     }
     set rawValueInput(value) {
         this.rawValueSignal.set(value);
@@ -8544,15 +8648,19 @@ class AXPEntityCategoryWidgetColumnComponent extends AXPColumnWidgetComponent {
                 textField: this.textField(),
                 valueField: this.valueField(),
                 item,
-                breadcrumb: this.joinPath(this.getItemPath(item)),
+                breadcrumb: this.getBreadcrumbPath(item),
             });
         }
     }
-    handleItemClick(index) {
+    handleItemClick(listItem) {
+        const originalItem = listItem.originalItem;
+        if (!originalItem) {
+            return;
+        }
         const items = this.visibleItems();
-        if (index < items.length) {
-            const item = items[index];
-            this.showItemDetail(item, index);
+        const itemIndex = items.findIndex((item) => this.getItemId(item) === listItem.id);
+        if (itemIndex >= 0) {
+            this.showItemDetail(originalItem, itemIndex);
         }
     }
     getItemPath(item) {
@@ -8588,6 +8696,13 @@ class AXPEntityCategoryWidgetColumnComponent extends AXPColumnWidgetComponent {
         }
         return String(get(item, this.valueField()) ?? '');
     }
+    getBreadcrumbPath(item) {
+        const path = this.getItemPath(item);
+        if (path.length === 0) {
+            return '';
+        }
+        return this.joinPath(path);
+    }
     //#endregion
     //#region ----   Private Methods   ----
     async extractItemWithPath(item) {
@@ -8703,23 +8818,38 @@ class AXPEntityCategoryWidgetColumnComponent extends AXPColumnWidgetComponent {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPEntityCategoryWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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="fal fa-ellipsis-h ax-text-on-primary ax-text-xs ax-ps-1"></i>
-                <i class="fal fa-chevron-right rtl:ax-rotate-180 ax-text-on-primary 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$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$3.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 }); }
+    <axp-column-item-list [items]="columnItems()" [itemTemplate]="itemTemplate" />
+
+    <!-- Item Template -->
+    <ng-template #itemTemplate let-item>
+      <div>
+        @if (hasParent(item.originalItem)) {
+          <ax-badge
+            [color]="'primary'"
+            [look]="'twotone'"
+            class="ax-p-0.5"
+            [text]="getItemText(item.originalItem)"
+            [axTooltip]="getBreadcrumbPath(item.originalItem)"
+            [axTooltipPlacement]="'top'"
+          >
+            <ax-prefix>
+              <i class="fal fa-ellipsis-h ax-text-on-primary ax-text-xs ax-ps-1"></i>
+              <i class="fal fa-chevron-right rtl:ax-rotate-180 ax-text-on-primary 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.originalItem)"
+            [axTooltip]="getBreadcrumbPath(item.originalItem)"
+            [axTooltipPlacement]="'top'"
+          ></ax-badge>
+        }
+      </div>
+    </ng-template>
+  `, isInline: true, dependencies: [{ kind: "component", type: AXPColumnItemListComponent, selector: "axp-column-item-list", inputs: ["items", "itemTemplate"], outputs: ["itemClick"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$3.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: AXTooltipModule }, { kind: "directive", type: i3$4.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: AXPEntityCategoryWidgetColumnComponent, decorators: [{
             type: Component,
@@ -8729,25 +8859,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         class: 'ax-w-full',
                     },
                     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="fal fa-ellipsis-h ax-text-on-primary ax-text-xs ax-ps-1"></i>
-                <i class="fal fa-chevron-right rtl:ax-rotate-180 ax-text-on-primary 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>
+    <axp-column-item-list [items]="columnItems()" [itemTemplate]="itemTemplate" />
+
+    <!-- Item Template -->
+    <ng-template #itemTemplate let-item>
+      <div>
+        @if (hasParent(item.originalItem)) {
+          <ax-badge
+            [color]="'primary'"
+            [look]="'twotone'"
+            class="ax-p-0.5"
+            [text]="getItemText(item.originalItem)"
+            [axTooltip]="getBreadcrumbPath(item.originalItem)"
+            [axTooltipPlacement]="'top'"
+          >
+            <ax-prefix>
+              <i class="fal fa-ellipsis-h ax-text-on-primary ax-text-xs ax-ps-1"></i>
+              <i class="fal fa-chevron-right rtl:ax-rotate-180 ax-text-on-primary 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.originalItem)"
+            [axTooltip]="getBreadcrumbPath(item.originalItem)"
+            [axTooltipPlacement]="'top'"
+          ></ax-badge>
+        }
+      </div>
+    </ng-template>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXBadgeModule, AXDecoratorModule],
+                    imports: [AXPColumnItemListComponent, AXBadgeModule, AXDecoratorModule, AXTooltipModule],
                     inputs: ['rawValue', 'rowData'],
                 }]
         }], propDecorators: { rawValueInput: [{
@@ -9011,6 +9156,11 @@ class AXPEntityCategoryWidgetEditComponent extends AXPValueWidgetComponent {
         //#endregion
         //#region ----   Private Properties   ----
         this.entityDef = signal(null, ...(ngDevMode ? [{ debugName: "entityDef" }] : []));
+        /**
+         * Flag to prevent the value effect from running during internal updates.
+         * This prevents circular dependency when setItems() calls setValue().
+         */
+        this.isInternalUpdate = false;
         //#endregion
         //#region ----   Effects   ----
         this.#efEntity = effect(async () => {
@@ -9027,6 +9177,11 @@ class AXPEntityCategoryWidgetEditComponent extends AXPValueWidgetComponent {
             if (!entity) {
                 return;
             }
+            // Skip if this is an internal update (e.g., from setItems -> setValue)
+            // This prevents circular dependency
+            if (this.isInternalUpdate) {
+                return;
+            }
             if (value) {
                 this.findByValue();
             }
@@ -9144,44 +9299,22 @@ class AXPEntityCategoryWidgetEditComponent extends AXPValueWidgetComponent {
                 },
             });
             if (result?.data?.selected && Array.isArray(result.data.selected)) {
-                if (this.multiple()) {
-                    // In multiple mode, merge with existing selection
-                    const existingItems = this.selectedItems();
-                    const newItems = result.data.selected;
-                    // Create a map of existing items by their ID
-                    const existingItemsMap = new Map();
-                    existingItems.forEach((item) => {
-                        const id = String(get(item, this.valueField()) ?? '');
-                        if (id) {
-                            existingItemsMap.set(id, item);
-                        }
-                    });
-                    // Merge items, preferring new items (with paths) over existing ones
-                    const mergedItems = [];
-                    const processedIds = new Set();
-                    // First, add all new items (they have paths)
-                    newItems.forEach((item) => {
-                        const id = String(get(item, this.valueField()) ?? '');
-                        if (id && !processedIds.has(id)) {
-                            mergedItems.push(item);
-                            processedIds.add(id);
-                        }
-                    });
-                    // Then, add existing items that weren't in new items (preserve them)
-                    existingItems.forEach((item) => {
-                        const id = String(get(item, this.valueField()) ?? '');
-                        if (id && !processedIds.has(id)) {
-                            mergedItems.push(item);
-                            processedIds.add(id);
-                        }
-                    });
-                    await this.setItems(mergedItems);
+                // Use the popup result directly as the source of truth
+                // This ensures that deselected items are properly removed
+                const newItems = result.data.selected;
+                if (newItems.length === 0) {
+                    // All items were deselected
+                    this.clear();
                 }
                 else {
-                    // In single mode, replace selection
-                    await this.setItems(result.data.selected);
+                    // Set the new selection (replaces existing selection entirely)
+                    await this.setItems(newItems);
                 }
             }
+            else if (result?.data?.selected === undefined && result?.data !== undefined) {
+                // User cancelled or closed popup without confirming - don't change anything
+                // This case is handled by the catch block or no result.data.selected
+            }
         }
         catch (error) {
             console.error('Error opening category tree selector:', error);
@@ -9192,10 +9325,20 @@ class AXPEntityCategoryWidgetEditComponent extends AXPValueWidgetComponent {
         }
     }
     clear() {
-        this.setValue(null);
-        this.clearInput();
-        this.selectedItems.set([]);
-        this.cdr.markForCheck();
+        // Set flag to prevent circular dependency with the value effect
+        this.isInternalUpdate = true;
+        try {
+            this.setValue(null);
+            this.clearInput();
+            this.selectedItems.set([]);
+            this.cdr.markForCheck();
+        }
+        finally {
+            // Reset flag after a short delay to ensure effect has time to skip
+            setTimeout(() => {
+                this.isInternalUpdate = false;
+            }, 0);
+        }
     }
     //#endregion
     //#region ----   Private Methods   ----
@@ -9268,51 +9411,61 @@ class AXPEntityCategoryWidgetEditComponent extends AXPValueWidgetComponent {
         }
     }
     async setItems(items) {
-        if (!items || items.length == 0) {
-            this.selectedItems.set([]);
-            this.setValue(null);
+        // Set flag to prevent circular dependency with the value effect
+        this.isInternalUpdate = true;
+        try {
+            if (!items || items.length == 0) {
+                this.selectedItems.set([]);
+                this.setValue(null);
+                this.cdr.markForCheck();
+                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
+                if (item.path && Array.isArray(item.path) && item.path.length > 0) {
+                    return item;
+                }
+                // Otherwise, calculate the path
+                return await this.calculateItemPath(item);
+            }));
+            this.selectedItems.set(itemsWithPaths);
+            const keys = itemsWithPaths.map((item) => get(item, this.valueField()));
+            // Extract data from valueField and set context by expose path
+            if (this.expose()) {
+                const exposeValue = castArray(this.expose());
+                const itemToExpose = {};
+                exposeValue.forEach((i) => {
+                    if (typeof i == 'string') {
+                        const values = itemsWithPaths.map((item) => set({}, i, get(item, i)));
+                        setSmart(itemToExpose, i, this.singleOrMultiple(values));
+                    }
+                    else {
+                        // Extract data from item by source path and set context by target path
+                        const values = this.multiple()
+                            ? itemsWithPaths.map((item) => set({}, i.source, get(item, i.source)))
+                            : itemsWithPaths.map((item) => get(item, i.source));
+                        setSmart(itemToExpose, i.target, this.singleOrMultiple(values));
+                    }
+                });
+                this.contextService.patch(itemToExpose, true);
+                // Fire triggers
+                this.setValue(this.singleOrMultiple(keys));
+            }
+            else {
+                this.setValue(this.singleOrMultiple(keys));
+            }
+            // Trigger change detection
             this.cdr.markForCheck();
-            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
-            if (item.path && Array.isArray(item.path) && item.path.length > 0) {
-                return item;
-            }
-            // Otherwise, calculate the path
-            return await this.calculateItemPath(item);
-        }));
-        this.selectedItems.set(itemsWithPaths);
-        const keys = itemsWithPaths.map((item) => get(item, this.valueField()));
-        // Extract data from valueField and set context by expose path
-        if (this.expose()) {
-            const exposeValue = castArray(this.expose());
-            const itemToExpose = {};
-            exposeValue.forEach((i) => {
-                if (typeof i == 'string') {
-                    const values = itemsWithPaths.map((item) => set({}, i, get(item, i)));
-                    setSmart(itemToExpose, i, this.singleOrMultiple(values));
-                }
-                else {
-                    // Extract data from item by source path and set context by target path
-                    const values = this.multiple()
-                        ? itemsWithPaths.map((item) => set({}, i.source, get(item, i.source)))
-                        : itemsWithPaths.map((item) => get(item, i.source));
-                    setSmart(itemToExpose, i.target, this.singleOrMultiple(values));
-                }
-            });
-            this.contextService.patch(itemToExpose, true);
-            // Fire triggers
-            this.setValue(this.singleOrMultiple(keys));
         }
-        else {
-            this.setValue(this.singleOrMultiple(keys));
+        finally {
+            // Reset flag after a short delay to ensure effect has time to skip
+            setTimeout(() => {
+                this.isInternalUpdate = false;
+            }, 0);
         }
-        // Trigger change detection
-        this.cdr.markForCheck();
     }
     singleOrMultiple(values) {
         return this.multiple() ? values : values[0];