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

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

@@ -4,9 +4,9 @@ import { AXTranslationService, AXTranslationModule } from '@acorex/core/translat
 import * as i4 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 { 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';
@@ -33,6 +33,7 @@ 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 { AXCheckBoxModule } from '@acorex/components/check-box';
 import * as i2$1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import { AXBasePageComponent } from '@acorex/components/page';
@@ -41,6 +42,9 @@ import { AXSearchBoxModule, AXSearchBoxComponent } from '@acorex/components/sear
 import * as i4$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$1 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';
@@ -49,15 +53,12 @@ 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 { 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) {
@@ -5897,13 +5898,14 @@ 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.selectionBehavior = signal('all', ...(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
@@ -6069,11 +6071,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 +6115,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 +6173,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 +6458,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 = [];
@@ -6534,6 +6556,36 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
     isMatchingNode(nodeId) {
         return this.matchingNodeIds.has(nodeId);
     }
+    /**
+     * Checks if a node is currently selected
+     */
+    isNodeSelected(nodeId) {
+        if (!nodeId || nodeId === 'all') {
+            return false;
+        }
+        const id = String(nodeId);
+        return this.selectedNodeIds().includes(id);
+    }
+    /**
+     * Handles checkbox change event to toggle node selection
+     */
+    // protected handleCheckboxChange(nodeId: string | number | undefined, checked: boolean): void {
+    //   if (!nodeId || nodeId === 'all') {
+    //     return;
+    //   }
+    //   const id = String(nodeId);
+    //   const treeComponent = this.tree();
+    //   if (!treeComponent) {
+    //     return;
+    //   }
+    //   if (checked) {
+    //     // Select the node
+    //     treeComponent.selectNode(id);
+    //   } else {
+    //     // Deselect the node
+    //     treeComponent.deselectNode(id);
+    //   }
+    // }
     //#endregion
     async updateSelectedNodes(selectedIds) {
         if (!selectedIds || selectedIds.length === 0) {
@@ -6905,23 +6957,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">
@@ -6944,18 +6991,18 @@ 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">
+                    <!-- <ax-check-box
+                      [ngModel]="isNodeSelected(node.id)"
+                      (onValueChanged)="handleCheckboxChange(node.id, $event.value)"
+                      (click)="$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 +7010,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 +7031,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: "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: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "ngmodule", type: FormsModule }, { 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,
@@ -7014,23 +7067,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">
@@ -7053,18 +7101,18 @@ 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">
+                    <!-- <ax-check-box
+                      [ngModel]="isNodeSelected(node.id)"
+                      (onValueChanged)="handleCheckboxChange(node.id, $event.value)"
+                      (click)="$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 +7120,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 +7141,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 +7151,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 +7166,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;
         }
-        return item?.[this.textField] ?? String(item);
+        const parentKey = this.entityDef()?.parentKey;
+        if (!parentKey) {
+            // No parent key means flat structure, return item with just its title as path array
+            const title = get(item, this.displayField()) ?? '';
+            return { ...item, path: title ? [title] : [] };
+        }
+        const valueField = this.valueField();
+        const textField = this.displayField();
+        const byKey = this.entityDef()?.queries.byKey?.execute;
+        if (!byKey) {
+            return item;
+        }
+        const path = [];
+        let currentItem = item;
+        const visitedIds = new Set(); // Prevent infinite loops
+        // Build path by traversing up the parent chain
+        while (currentItem) {
+            const currentId = String(get(currentItem, valueField) ?? '');
+            if (!currentId || visitedIds.has(currentId)) {
+                break; // Prevent infinite loops
+            }
+            visitedIds.add(currentId);
+            const title = String(get(currentItem, textField) ?? '');
+            if (title) {
+                path.unshift(title); // Add to beginning to maintain hierarchy order
+            }
+            // Get parent ID from current item
+            const parentId = get(currentItem, parentKey);
+            if (!parentId || parentId === 'all' || parentId === currentId) {
+                break; // Reached root or invalid parent
+            }
+            try {
+                // Fetch parent item
+                const parentItem = await byKey(parentId);
+                if (!parentItem) {
+                    break; // Parent not found, stop traversal
+                }
+                currentItem = parentItem;
+            }
+            catch (error) {
+                console.error('Error fetching parent item:', error);
+                break;
+            }
+        }
+        // Return item with path array, or just the item title if no path
+        const pathArray = path.length > 0 ? path : get(item, textField) ? [String(get(item, textField))] : [];
+        return { ...item, path: pathArray };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: 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: 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" }], 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,