@acorex/platform 20.6.0-next.15 → 20.6.0-next.17

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

@@ -1,6 +1,6 @@
 import { AXPSessionService, AXPAuthGuard } from '@acorex/platform/auth';
 import * as i0 from '@angular/core';
-import { inject, Injectable, input, viewChild, signal, ElementRef, ChangeDetectionStrategy, Component, ApplicationRef, EnvironmentInjector, createComponent, InjectionToken, computed, Injector, runInInjectionContext, viewChildren, linkedSignal, effect, untracked, HostBinding, ViewChild, NgModule } from '@angular/core';
+import { inject, Injectable, input, viewChild, signal, ElementRef, ChangeDetectionStrategy, Component, ApplicationRef, EnvironmentInjector, createComponent, InjectionToken, computed, Injector, runInInjectionContext, ChangeDetectorRef, effect, viewChildren, linkedSignal, untracked, HostBinding, ViewChild, NgModule } from '@angular/core';
 import { Router, RouterModule, ROUTES } from '@angular/router';
 import * as i3 from '@acorex/components/button';
 import { AXButtonModule } from '@acorex/components/button';
@@ -11,17 +11,17 @@ import { AXPopoverModule } from '@acorex/components/popover';
 import * as i6 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
 import * as i3$1 from '@acorex/platform/layout/widget-core';
-import { AXPWidgetsCatalog, AXPWidgetCoreModule, AXPPageStatus, AXPWidgetRegistryService, AXPValueWidgetComponent, AXPWidgetRendererDirective, AXPWidgetGroupEnum, AXPLayoutBaseWidgetComponent, AXPColumnWidgetComponent, AXP_WIDGETS_EDITOR_CATEGORY } from '@acorex/platform/layout/widget-core';
+import { AXPWidgetsCatalog, AXPWidgetCoreModule, AXPPageStatus, AXPWidgetRegistryService, AXPColumnWidgetComponent, AXPValueWidgetComponent, AXPWidgetGroupEnum, AXPWidgetRendererDirective, AXPLayoutBaseWidgetComponent, AXP_WIDGETS_EDITOR_CATEGORY } from '@acorex/platform/layout/widget-core';
 import { AXPCommandService, AXPQueryService, provideCommandSetups, provideQuerySetups } from '@acorex/platform/runtime';
 import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import { castArray, get, cloneDeep, set, merge, orderBy, isEqual, isNil, isEmpty, sortBy } from 'lodash-es';
+import { castArray, get, cloneDeep, set, merge, orderBy, isNil, isEqual, isEmpty, sortBy } from 'lodash-es';
 import { AXDataSource } from '@acorex/cdk/common';
 import { AXFormatService } from '@acorex/core/format';
 import * as i4$1 from '@acorex/platform/common';
 import { AXPFilterOperatorMiddlewareService, AXPEntityCommandScope, getEntityInfo, AXPSettingService, AXPRefreshEvent, AXPReloadEvent, AXPCommonSettings, AXPCleanNestedFilters, AXPWorkflowNavigateAction, AXPToastAction, AXP_SEARCH_DEFINITION_PROVIDER } from '@acorex/platform/common';
 import * as i1$1 from '@acorex/platform/core';
-import { resolveActionLook, AXPExpressionEvaluatorService, AXPDistributedEventListenerService, AXPBroadcastEventService, AXPPlatformScope, AXPDeviceService, getChangedPaths, extractValue, setSmart, AXPSystemActionType } from '@acorex/platform/core';
+import { resolveActionLook, AXPExpressionEvaluatorService, AXPDistributedEventListenerService, AXPBroadcastEventService, AXPPlatformScope, extractValue, setSmart, AXPDeviceService, getChangedPaths, AXPSystemActionType } from '@acorex/platform/core';
 import * as i2$3 from '@acorex/platform/workflow';
 import { AXPWorkflowService, ofType, createWorkFlowEvent, AXPWorkflowAction, AXPWorkflowModule } from '@acorex/platform/workflow';
 import { AXPLayoutThemeService } from '@acorex/platform/themes/shared';
@@ -33,23 +33,28 @@ import { AXPopupService } from '@acorex/components/popup';
 import { AXPlatform } from '@acorex/core/platform';
 import * as i3$2 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
-import * as i4$2 from '@acorex/components/dropdown';
-import { AXDropdownModule } from '@acorex/components/dropdown';
-import { AXP_NAME_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DISABLED_PROPERTY, AXP_ALLOW_CLEAR_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_ALLOW_MULTIPLE_PROPERTY, AXPFileUploaderWidgetService } from '@acorex/platform/layout/widgets';
-import * as i1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
+import { AXBasePageComponent } from '@acorex/components/page';
+import * as i3$3 from '@acorex/components/search-box';
+import { AXSearchBoxModule, AXSearchBoxComponent } from '@acorex/components/search-box';
+import * as i4$2 from '@acorex/components/skeleton';
+import { AXSkeletonModule } from '@acorex/components/skeleton';
+import { AXTreeViewComponent } from '@acorex/components/tree-view';
+import * as i2$1 from '@acorex/components/badge';
+import { AXBadgeModule } from '@acorex/components/badge';
 import * as i5$1 from '@acorex/components/form';
 import { AXFormModule } from '@acorex/components/form';
 import * as i7 from '@acorex/components/select-box';
 import { AXSelectBoxModule } from '@acorex/components/select-box';
+import * as i6$1 from '@acorex/components/tag-box';
+import { AXTagBoxModule, AXTagBoxComponent } from '@acorex/components/tag-box';
+import { AXValidationModule } from '@acorex/core/validation';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { AXP_DISABLED_PROPERTY, AXP_ALLOW_CLEAR_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_NAME_PROPERTY, AXPFileUploaderWidgetService } from '@acorex/platform/layout/widgets';
+import * as i4$3 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
 import * as i2$2 from '@acorex/components/text-box';
 import { AXTextBoxModule, AXTextBoxComponent } from '@acorex/components/text-box';
-import { AXValidationModule } from '@acorex/core/validation';
-import * as i2$1 from '@acorex/components/badge';
-import { AXBadgeModule } from '@acorex/components/badge';
-import { AXSearchBoxComponent } from '@acorex/components/search-box';
-import * as i6$1 from '@acorex/components/tag-box';
-import { AXTagBoxComponent, AXTagBoxModule } from '@acorex/components/tag-box';
 import { AXPDataSelectorService, AXPWidgetPropertyViewerComponent } from '@acorex/platform/layout/components';
 import { AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
 import { transform, isEqual as isEqual$1 } from 'lodash';
@@ -1393,7 +1398,7 @@ class AXPEntityCreateViewSectionViewModel {
             const { interfaces, properties } = this.entity;
             const createProps = interfaces?.master?.create?.properties ?? [];
             const createPropNames = new Set(createProps.map(({ name }) => name));
-            const filteredProperties = properties.filter(({ groupId, schema, name }) => groupId === this.group.id && !schema.hidden && createPropNames.has(name));
+            const filteredProperties = properties.filter(({ groupId, schema, name }) => groupId === this.group.id && createPropNames.has(name));
             return filteredProperties.map((property) => {
                 const createProp = createProps.find(({ name }) => name === property.name);
                 return new AXPEntityCreateViewElementViewModel(this.entity, this, property, createProp);
@@ -1413,6 +1418,9 @@ class AXPEntityCreateViewElementViewModel {
         this.editable = computed(() => {
             return !(this.property.schema.readonly ?? false);
         }, ...(ngDevMode ? [{ debugName: "editable" }] : []));
+        this.isHidden = computed(() => {
+            return this.property.schema.hidden ?? false;
+        }, ...(ngDevMode ? [{ debugName: "isHidden" }] : []));
         this.isRequired = computed(() => {
             return this.property.validations?.some((c) => c.rule == 'required') || false;
         }, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
@@ -1458,7 +1466,7 @@ class AXPEntityMasterCreateViewModel {
         this.sections = computed(() => {
             const { interfaces, properties } = this.entityDef;
             const createProps = interfaces?.master?.create?.properties?.map(({ name }) => name) ?? [];
-            const visibleProperties = properties.filter(({ groupId, schema, name }) => groupId && !schema.hidden && createProps.includes(name));
+            const visibleProperties = properties.filter(({ groupId, schema, name }) => groupId && createProps.includes(name));
             const sections = interfaces?.master?.create?.sections?.filter(({ id }) => visibleProperties.some(({ groupId }) => groupId === id)) ?? [];
             console.log({ sections, visibleProperties });
             return sections.map((section) => new AXPEntityCreateViewSectionViewModel(this.entityDef, section));
@@ -3243,6 +3251,8 @@ class AXPPageDetailsConverter extends AXPBaseRelatedEntityConverter {
         const factory = new AXPRelatedEntityConverterFactory();
         const tabDetailTabs = await this.buildTabDetails(factory, tabDetailEntities ?? [], context);
         const tabListTabs = await this.buildTabLists(factory, tabListEntities ?? [], context);
+        // Build actions from single interface
+        const actions = this.buildActions(entityDef, helpers.singleInterface);
         return {
             id: entityDef?.name ?? '',
             title: `${context.rootTitle}`,
@@ -3250,12 +3260,73 @@ class AXPPageDetailsConverter extends AXPBaseRelatedEntityConverter {
             icon: relatedEntity.icon || entityDef.icon,
             settings: this.createPageSettings(),
             load: this.createLoadFunction(entityDef, relatedEntity, evaluateExpressions),
-            execute: this.createExecuteFunction(entityDef),
+            execute: this.createExecuteFunction(entityDef, actions, evaluateExpressions, context),
+            actions: await this.buildEvaluatedActions(actions, evaluateExpressions),
             // tabs: [...tabDetailTabs, ...tabListTabs],
             content: [await this.createGridLayoutStructure(helpers.singleInterface, helpers, evaluateExpressions)],
         };
     }
     //#region ----   Utility Methods   ----
+    buildActions(entityDef, singleInterface) {
+        const actions = singleInterface?.actions ?? [];
+        return actions.map((action) => new AXPEntityCommandTriggerViewModel(entityDef, action));
+    }
+    async buildEvaluatedActions(actions, evaluateExpressions) {
+        const evaluatedActions = [];
+        for (const action of actions) {
+            // Evaluate disabled condition
+            let disabled = action.disabled;
+            if (disabled && typeof disabled === 'string' && evaluateExpressions) {
+                try {
+                    const result = await evaluateExpressions({ disabled: disabled });
+                    disabled = result.disabled;
+                }
+                catch {
+                    disabled = false;
+                }
+            }
+            // Evaluate hidden condition
+            let hidden = action.hidden;
+            if (hidden && typeof hidden === 'string' && evaluateExpressions) {
+                try {
+                    const result = await evaluateExpressions({ hidden: hidden });
+                    hidden = result.hidden;
+                }
+                catch {
+                    hidden = false;
+                }
+            }
+            // Skip if hidden
+            if (hidden)
+                continue;
+            // Evaluate options
+            let options = action.options;
+            if (options && evaluateExpressions) {
+                try {
+                    options = await evaluateExpressions(options);
+                }
+                catch {
+                    // Keep original options if evaluation fails
+                }
+            }
+            evaluatedActions.push({
+                name: action.name,
+                title: action.title,
+                icon: action.icon,
+                color: action.color,
+                disabled: disabled || false,
+                zone: 'header',
+                priority: action.priority,
+                scope: action.scope === AXPEntityCommandScope.Individual ? AXPEntityCommandScope.TypeLevel : action.scope,
+                command: {
+                    name: action.name,
+                    options: options,
+                    metadata: action.metadata,
+                },
+            });
+        }
+        return evaluatedActions;
+    }
     createPageSettings() {
         return {
             commands: {
@@ -3284,20 +3355,70 @@ class AXPPageDetailsConverter extends AXPBaseRelatedEntityConverter {
             return { success: true, data: result };
         };
     }
-    createExecuteFunction(entityDef) {
+    createExecuteFunction(entityDef, actions, evaluateExpressions, converterContext) {
         return async (e, context) => {
-            if (e.name === 'update-entity') {
-                const fn = entityDef?.commands?.update?.execute;
-                const result = await fn(context);
-                return { success: true, data: result };
+            try {
+                if (e.name === 'update-entity') {
+                    const fn = entityDef?.commands?.update?.execute;
+                    const result = await fn(context);
+                    return {
+                        success: true,
+                        data: result,
+                    };
+                }
+                else {
+                    // Find action in single interface actions
+                    const action = actions.find((a) => a.name === e.name);
+                    if (action && converterContext.workflowService) {
+                        // Evaluate action options with current context
+                        let evaluatedOptions = action.options;
+                        if (evaluateExpressions && action.options) {
+                            try {
+                                evaluatedOptions = await evaluateExpressions(action.options);
+                            }
+                            catch {
+                                // Keep original options if evaluation fails
+                            }
+                        }
+                        const commandName = e.name.split('&')[0];
+                        if (converterContext.workflowService.exists(commandName)) {
+                            await converterContext.workflowService.execute(commandName, {
+                                entity: getEntityInfo(entityDef).source,
+                                data: context,
+                                entityInfo: {
+                                    name: entityDef.name,
+                                    module: entityDef.module,
+                                    title: entityDef.title,
+                                    parentKey: entityDef.parentKey,
+                                    source: `${entityDef.module}.${entityDef.name}`,
+                                },
+                                options: evaluatedOptions,
+                                metadata: action.metadata,
+                            });
+                            return {
+                                success: true,
+                            };
+                        }
+                        if (converterContext.commandService?.exists(commandName)) {
+                            // check options for evaluation
+                            await converterContext.commandService.execute(commandName, e.options);
+                        }
+                    }
+                    return {
+                        success: false,
+                        message: {
+                            code: 'invalid_command',
+                            text: 'Invalid command',
+                        },
+                    };
+                }
             }
-            else {
+            catch (error) {
                 return {
                     success: false,
                     message: {
-                        code: 'invalid_command',
-                        text: 'Invalid command'
-                    }
+                        text: error,
+                    },
                 };
             }
         };
@@ -4164,7 +4285,7 @@ class AXPMainEntityContentBuilder {
                 disabled: disabled || false,
                 zone: 'header',
                 priority: action.priority,
-                scope: action.scope,
+                scope: action.scope === AXPEntityCommandScope.Individual ? AXPEntityCommandScope.TypeLevel : action.scope,
                 command: {
                     name: action.name,
                     options: options,
@@ -4357,7 +4478,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                 }]
         }], ctorParameters: () => [{ type: AXPRelatedEntityConverterFactory }, { type: AXPMainEntityContentBuilder }, { type: AXPLayoutAdapterBuilder }, { type: i4$1.AXPFilterOperatorMiddlewareService }] });
 
-const AXPLayoutDetailsViewRouteResolver = async (route, state, entityResolver = inject(AXPEntityDefinitionRegistryService), expressionEvaluator = inject(AXPExpressionEvaluatorService), session = inject(AXPSessionService), formatService = inject(AXFormatService), workflowService = inject(AXPWorkflowService), layoutAdapterFactory = inject(AXPLayoutAdapterFactory)) => {
+const AXPLayoutDetailsViewRouteResolver = async (route, state, entityResolver = inject(AXPEntityDefinitionRegistryService), expressionEvaluator = inject(AXPExpressionEvaluatorService), session = inject(AXPSessionService), formatService = inject(AXFormatService), workflowService = inject(AXPWorkflowService), commandService = inject(AXPCommandService), layoutAdapterFactory = inject(AXPLayoutAdapterFactory)) => {
     const moduleName = route.parent?.paramMap.get('module');
     const entityName = route.paramMap.get('entity');
     const id = route.paramMap.get('id');
@@ -4367,6 +4488,7 @@ const AXPLayoutDetailsViewRouteResolver = async (route, state, entityResolver =
         session,
         formatService,
         workflowService,
+        commandService,
     };
     return await layoutAdapterFactory.createDetailsViewAdapter(entityResolver, moduleName, entityName, id, dependencies);
 };
@@ -4788,6 +4910,1468 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
             type: Injectable
         }] });
 
+//#endregion
+class AXPCategoryTreeService {
+    constructor() {
+        //#region ----   Services & Dependencies   ----
+        this.entityResolver = inject(AXPEntityResolver);
+        this.translate = inject(AXTranslationService);
+    }
+    //#endregion
+    //#region ----   Public Methods   ----
+    /**
+     * Initialize category tree data source
+     */
+    async initializeCategoryTree(config) {
+        const { entityKey } = config;
+        if (!entityKey) {
+            return null;
+        }
+        try {
+            const [module, entity] = entityKey.split('.');
+            if (!module || !entity) {
+                return null;
+            }
+            const categoryEntityDef = await this.entityResolver.get(module, entity);
+            if (!categoryEntityDef?.queries.list?.execute) {
+                return null;
+            }
+            const categoryEntityQueryFunc = categoryEntityDef.queries.list.execute;
+            const basicQueryEvent = {
+                skip: 0,
+                take: 1000,
+            };
+            return {
+                categoryEntityDef,
+                categoryEntityQueryFunc,
+                basicQueryEvent,
+            };
+        }
+        catch (error) {
+            console.error('Error initializing category tree:', error);
+            return null;
+        }
+    }
+    /**
+     * Create root node with children from items
+     */
+    async createRootNode(items, config) {
+        const textField = config.textField ?? 'title';
+        const valueField = config.valueField ?? 'id';
+        const allItemsLabel = await this.translate.translateAsync('@general:terms.interface.selection.all-items');
+        const rootNode = {
+            id: 'all',
+            label: allItemsLabel,
+            icon: 'fa-solid fa-folder',
+            childrenCount: items.length,
+            expanded: true,
+            data: { [valueField]: 'all', [textField]: allItemsLabel },
+        };
+        const childNodes = items.map((item) => this.convertToTreeNode(item, config));
+        rootNode.children = childNodes;
+        return rootNode;
+    }
+    /**
+     * Convert entity item to AXTreeNode format
+     */
+    convertToTreeNode(item, config) {
+        const textField = config.textField ?? 'title';
+        const valueField = config.valueField ?? 'id';
+        return {
+            id: String(item[valueField] ?? ''),
+            label: String(item[textField] ?? ''),
+            icon: 'fa-solid fa-folder',
+            childrenCount: item['childrenCount'] || item['children']?.length || 0,
+            expanded: false,
+            data: item,
+        };
+    }
+    /**
+     * Load root categories
+     */
+    async loadRootCategories(treeData, config) {
+        if (!treeData.categoryEntityQueryFunc) {
+            return null;
+        }
+        try {
+            const res = await treeData.categoryEntityQueryFunc(treeData.basicQueryEvent);
+            return res?.items ?? null;
+        }
+        catch (error) {
+            console.error('Error loading root categories:', error);
+            return null;
+        }
+    }
+    /**
+     * Load children for a given node
+     */
+    async loadChildren(node, treeData, config) {
+        if (!treeData.categoryEntityQueryFunc || !treeData.categoryEntityDef?.parentKey) {
+            return [];
+        }
+        try {
+            const event = {
+                ...treeData.basicQueryEvent,
+                filter: {
+                    field: treeData.categoryEntityDef.parentKey,
+                    value: node.id,
+                    operator: { type: 'equal' },
+                },
+            };
+            const res = await treeData.categoryEntityQueryFunc(event);
+            if (!res?.items) {
+                return [];
+            }
+            return res.items.map((item) => this.convertToTreeNode(item, config));
+        }
+        catch (error) {
+            console.error('Error loading children:', error);
+            return [];
+        }
+    }
+    /**
+     * Search categories
+     */
+    async searchCategories(searchValue, treeData, config) {
+        if (!treeData.categoryEntityDef || !treeData.categoryEntityQueryFunc) {
+            return null;
+        }
+        try {
+            const categoryInlineFilters = treeData.categoryEntityDef.properties.filter((p) => p.options?.filter?.inline?.enabled);
+            const event = {
+                ...treeData.basicQueryEvent,
+                filter: {
+                    filters: [
+                        {
+                            filters: categoryInlineFilters.map((cif) => ({
+                                field: cif.name,
+                                operator: {
+                                    type: 'contains',
+                                },
+                                value: searchValue,
+                            })),
+                            logic: 'or',
+                        },
+                        {
+                            value: true,
+                            field: treeData.categoryEntityDef.parentKey,
+                            operator: {
+                                type: 'isEmpty',
+                            },
+                        },
+                    ],
+                    logic: 'and',
+                },
+            };
+            const res = await treeData.categoryEntityQueryFunc(event);
+            return res?.items ?? null;
+        }
+        catch (error) {
+            console.error('Error searching categories:', error);
+            return null;
+        }
+    }
+    /**
+     * Update children at a specific node in the tree
+     */
+    updateChildrenAtPath(nodes, targetId, childNodes) {
+        return nodes.map((node) => {
+            if (node.id === targetId) {
+                return { ...node, children: childNodes, childrenCount: childNodes.length };
+            }
+            if (node.children?.length) {
+                return { ...node, children: this.updateChildrenAtPath(node.children, targetId, childNodes) };
+            }
+            return node;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPCategoryTreeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPCategoryTreeService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPCategoryTreeService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----   Services & Dependencies   ----
+        this.categoryTreeService = inject(AXPCategoryTreeService);
+        //#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.selectedValues = signal([], ...(ngDevMode ? [{ debugName: "selectedValues" }] : []));
+        this.searchPlaceholder = signal('@general:terms.interface.category.search.placeholder', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
+        //#endregion
+        //#region ----   View Queries   ----
+        this.tree = viewChild('tree', ...(ngDevMode ? [{ debugName: "tree" }] : []));
+        //#endregion
+        //#region ----   Component State   ----
+        this.loading = signal(true, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.selectedNodeIds = signal([], ...(ngDevMode ? [{ debugName: "selectedNodeIds" }] : []));
+        //#endregion
+        //#region ----   Private Properties   ----
+        this.treeData = null;
+        this.treeConfig = null;
+        this.searchResults = null;
+        this.nodeDataCache = new Map(); // Cache node data by id for getSelectedItems
+        /** Datasource callback for tree-view component. */
+        this.datasource = async (id) => {
+            if (!this.treeData || !this.treeConfig) {
+                return [];
+            }
+            // If no id provided, return root nodes (or search results if available)
+            if (!id) {
+                // If we have search results, use them
+                if (this.searchResults) {
+                    const rootNode = await this.categoryTreeService.createRootNode(this.searchResults, this.treeConfig);
+                    return [rootNode];
+                }
+                // Otherwise load root categories
+                const items = await this.categoryTreeService.loadRootCategories(this.treeData, this.treeConfig);
+                if (!items) {
+                    return [];
+                }
+                // Cache node data for getSelectedItems
+                items.forEach((item) => {
+                    const itemId = item[this.treeConfig.valueField || 'id'];
+                    if (itemId) {
+                        this.nodeDataCache.set(itemId, item);
+                    }
+                });
+                const rootNode = await this.categoryTreeService.createRootNode(items, this.treeConfig);
+                return [rootNode];
+            }
+            // Create a minimal node object with just the id (loadChildren only needs node.id)
+            const targetNode = {
+                id,
+                label: '',
+                data: {},
+            };
+            const childNodes = await this.categoryTreeService.loadChildren(targetNode, this.treeData, this.treeConfig);
+            // Cache child node data for getSelectedItems
+            childNodes.forEach((node) => {
+                if (node.data && node.id) {
+                    this.nodeDataCache.set(node.id, node.data);
+                }
+            });
+            return childNodes;
+        };
+    }
+    //#endregion
+    //#region ----   Lifecycle Methods   ----
+    ngOnInit() {
+        super.ngOnInit();
+        this.initializeTree();
+    }
+    //#endregion
+    //#region ----   Private Methods   ----
+    async initializeTree() {
+        if (!this.entityKey()) {
+            this.loading.set(false);
+            return;
+        }
+        this.loading.set(true);
+        try {
+            this.treeConfig = {
+                entityKey: this.entityKey(),
+                textField: this.textField(),
+                valueField: this.valueField(),
+            };
+            this.treeData = await this.categoryTreeService.initializeCategoryTree(this.treeConfig);
+            if (!this.treeData) {
+                this.loading.set(false);
+                return;
+            }
+            // Get parentKey from entity definition
+            if (this.treeData.categoryEntityDef?.parentKey) {
+                this.treeConfig.parentKey = this.treeData.categoryEntityDef.parentKey;
+            }
+            // Initialize selected nodes and load their data into cache
+            await this.updateSelectedNodes(this.selectedValues());
+        }
+        catch (error) {
+            console.error('Error loading entity definition:', error);
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    //#endregion
+    //#region ----   Public Methods   ----
+    async handleSearchChange(e) {
+        if (!this.treeData || !this.treeConfig) {
+            return;
+        }
+        this.loading.set(true);
+        try {
+            const items = await this.categoryTreeService.searchCategories(e.value, this.treeData, this.treeConfig);
+            if (!items) {
+                this.searchResults = null;
+                return;
+            }
+            // Store search results for datasource callback
+            this.searchResults = items;
+            // Cache node data for getSelectedItems
+            items.forEach((item) => {
+                const id = item[this.treeConfig.valueField || 'id'];
+                if (id) {
+                    this.nodeDataCache.set(id, item);
+                }
+            });
+            // Trigger tree refresh
+            const treeComponent = this.tree();
+            if (treeComponent) {
+                treeComponent.refresh?.();
+            }
+        }
+        catch (error) {
+            console.error('Error searching categories:', error);
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    async onNodeToggle(event) {
+        // Tree component handles lazy loading via datasource callback
+    }
+    async onNodeSelect(event) {
+        const node = event.node;
+        if (!node || node.id === 'all') {
+            return;
+        }
+        // Cache node data for getSelectedItems
+        if (node.data) {
+            this.nodeDataCache.set(node.id, node.data);
+        }
+        const currentIds = this.selectedNodeIds();
+        if (node.selected) {
+            // Add to selection if not already selected
+            if (!currentIds.includes(node.id)) {
+                this.selectedNodeIds.set([...currentIds, node.id]);
+            }
+        }
+        else {
+            // Remove from selection
+            this.selectedNodeIds.set(currentIds.filter((id) => id !== node.id));
+        }
+    }
+    handleNodeClick(event) {
+        // Extract node from event - could be { node: AXTreeNode } or just AXTreeNode
+        const node = event?.node || event;
+        if (!node || node.id === 'all') {
+            return;
+        }
+        // Cache node data for getSelectedItems
+        if (node.data) {
+            this.nodeDataCache.set(node.id, node.data);
+        }
+        if (this.allowMultiple()) {
+            // In multiple mode with checkboxes, clicking the node should toggle the checkbox
+            // The checkbox state is handled by onNodeSelect, so we just sync the selection here
+            const currentIds = this.selectedNodeIds();
+            const isSelected = currentIds.includes(node.id);
+            // Toggle selection state
+            if (isSelected) {
+                this.selectedNodeIds.set(currentIds.filter((id) => id !== node.id));
+            }
+            else {
+                this.selectedNodeIds.set([...currentIds, node.id]);
+            }
+        }
+        else {
+            // Single selection - auto-confirm on click
+            this.selectedNodeIds.set([node.id]);
+            this.close({ selected: this.getSelectedItems() });
+        }
+    }
+    async onConfirm() {
+        this.close({ selected: this.getSelectedItems() });
+    }
+    async onCancel() {
+        await this.close();
+    }
+    //#endregion
+    async updateSelectedNodes(selectedIds) {
+        if (!selectedIds || selectedIds.length === 0) {
+            this.selectedNodeIds.set([]);
+            return;
+        }
+        const ids = selectedIds.filter((id) => id && id !== 'all');
+        this.selectedNodeIds.set(ids);
+        // Fetch node data for pre-selected items that aren't in the cache
+        // This ensures getSelectedItems() can retrieve them even if their branches aren't expanded
+        await this.loadMissingNodeData(ids);
+        // Note: Selection syncing is now handled by the tree component
+        // The tree component should handle the selected state based on selectedNodeIds
+        // If the tree component requires manual syncing, we may need to trigger a refresh
+    }
+    /**
+     * Loads node data for IDs that are selected but not yet in the cache.
+     * This is critical for pre-selected values in collapsed branches.
+     */
+    async loadMissingNodeData(selectedIds) {
+        if (!this.treeData || !this.treeConfig || selectedIds.length === 0) {
+            return;
+        }
+        // Find IDs that are selected but not in cache
+        const missingIds = selectedIds.filter((id) => !this.nodeDataCache.has(id));
+        if (missingIds.length === 0) {
+            return;
+        }
+        try {
+            const valueField = this.treeConfig.valueField || 'id';
+            const categoryEntityQueryFunc = this.treeData.categoryEntityQueryFunc;
+            if (!categoryEntityQueryFunc) {
+                return;
+            }
+            // Query for missing nodes by their IDs
+            const event = {
+                ...this.treeData.basicQueryEvent,
+                filter: {
+                    filters: missingIds.map((id) => ({
+                        field: valueField,
+                        value: id,
+                        operator: { type: 'equal' },
+                    })),
+                    logic: 'or',
+                },
+            };
+            const res = await categoryEntityQueryFunc(event);
+            if (res?.items) {
+                // Cache the fetched node data
+                res.items.forEach((item) => {
+                    const itemId = item[valueField];
+                    if (itemId) {
+                        this.nodeDataCache.set(itemId, item);
+                    }
+                });
+            }
+        }
+        catch (error) {
+            console.error('Error loading missing node data:', error);
+        }
+    }
+    getSelectedItems() {
+        const selectedIds = this.selectedNodeIds();
+        if (selectedIds.length === 0) {
+            return [];
+        }
+        // Get node data from cache
+        return selectedIds.map((id) => this.nodeDataCache.get(id)).filter((item) => item != null);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryTreeSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPEntityCategoryTreeSelectorComponent, isStandalone: true, selector: "axp-entity-category-tree-selector", viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-flex ax-flex-col ax-h-full">
+      @if (loading()) {
+        <div class="ax-p-4 ax-flex ax-flex-col ax-gap-3">
+          <ax-skeleton class="ax-w-full ax-h-6 ax-rounded-md"></ax-skeleton>
+          <ax-skeleton class="ax-w-full ax-h-6 ax-rounded-md"></ax-skeleton>
+          <ax-skeleton class="ax-w-full ax-h-6 ax-rounded-md"></ax-skeleton>
+        </div>
+      } @else if (treeData) {
+        <div class="ax-flex ax-flex-col ax-flex-1 ax-min-h-0">
+          <div class="ax-p-4 ax-border-b">
+            <ax-search-box
+              (onValueChanged)="handleSearchChange($event)"
+              [delayTime]="300"
+              [placeholder]="searchPlaceholder()"
+            ></ax-search-box>
+          </div>
+          <div class="ax-flex-1 ax-overflow-auto ax-p-4">
+            <ax-tree-view
+              [datasource]="datasource"
+              [showCheckbox]="allowMultiple()"
+              [showIcons]="true"
+              (onNodeSelect)="onNodeSelect($event)"
+              (onNodeToggle)="onNodeToggle($event)"
+              (onNodeClick)="handleNodeClick($event)"
+              #tree
+            >
+            </ax-tree-view>
+          </div>
+        </div>
+      } @else {
+        <div class="ax-p-4 ax-text-center ax-text-muted">
+          <span>---</span>
+        </div>
+      }
+    </div>
+    @if (allowMultiple()) {
+      <ax-footer>
+        <ax-suffix>
+          <ax-button
+            look="solid"
+            [text]="'@general:actions.cancel.title' | translate | async"
+            (onClick)="onCancel()"
+          ></ax-button>
+          <ax-button
+            look="solid"
+            color="primary"
+            [text]="'@general:actions.ok.title' | translate | async"
+            (onClick)="onConfirm()"
+          ></ax-button>
+        </ax-suffix>
+      </ax-footer>
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i3$3.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i4$2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "showCheckbox", "checkChildrenOnSelect", "intermediateState", "checkOnClick", "dragMode", "dragOperationType", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "nodeHeight", "look", "itemTemplate"], outputs: ["datasourceChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryTreeSelectorComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-entity-category-tree-selector',
+                    template: `
+    <div class="ax-flex ax-flex-col ax-h-full">
+      @if (loading()) {
+        <div class="ax-p-4 ax-flex ax-flex-col ax-gap-3">
+          <ax-skeleton class="ax-w-full ax-h-6 ax-rounded-md"></ax-skeleton>
+          <ax-skeleton class="ax-w-full ax-h-6 ax-rounded-md"></ax-skeleton>
+          <ax-skeleton class="ax-w-full ax-h-6 ax-rounded-md"></ax-skeleton>
+        </div>
+      } @else if (treeData) {
+        <div class="ax-flex ax-flex-col ax-flex-1 ax-min-h-0">
+          <div class="ax-p-4 ax-border-b">
+            <ax-search-box
+              (onValueChanged)="handleSearchChange($event)"
+              [delayTime]="300"
+              [placeholder]="searchPlaceholder()"
+            ></ax-search-box>
+          </div>
+          <div class="ax-flex-1 ax-overflow-auto ax-p-4">
+            <ax-tree-view
+              [datasource]="datasource"
+              [showCheckbox]="allowMultiple()"
+              [showIcons]="true"
+              (onNodeSelect)="onNodeSelect($event)"
+              (onNodeToggle)="onNodeToggle($event)"
+              (onNodeClick)="handleNodeClick($event)"
+              #tree
+            >
+            </ax-tree-view>
+          </div>
+        </div>
+      } @else {
+        <div class="ax-p-4 ax-text-center ax-text-muted">
+          <span>---</span>
+        </div>
+      }
+    </div>
+    @if (allowMultiple()) {
+      <ax-footer>
+        <ax-suffix>
+          <ax-button
+            look="solid"
+            [text]="'@general:actions.cancel.title' | translate | async"
+            (onClick)="onCancel()"
+          ></ax-button>
+          <ax-button
+            look="solid"
+            color="primary"
+            [text]="'@general:actions.ok.title' | translate | async"
+            (onClick)="onConfirm()"
+          ></ax-button>
+        </ax-suffix>
+      </ax-footer>
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        CommonModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXSearchBoxModule,
+                        AXSkeletonModule,
+                        AXTreeViewComponent,
+                        AXTranslationModule,
+                    ],
+                }]
+        }], propDecorators: { tree: [{ type: i0.ViewChild, args: ['tree', { isSignal: true }] }] } });
+
+class AXPEntityCategoryWidgetColumnComponent extends AXPColumnWidgetComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----   Dependencies   ----
+        this.entityDetailPopoverService = inject(AXPEntityDetailPopoverService);
+        this.formatService = inject(AXFormatService);
+        //#endregion
+        //#region ----   View Children   ----
+        this.moreButton = viewChild('moreButton', ...(ngDevMode ? [{ debugName: "moreButton" }] : []));
+        this.morePopover = viewChild('morePopover', ...(ngDevMode ? [{ debugName: "morePopover" }] : []));
+        //#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;
+        //#endregion
+        //#region ----   Signals   ----
+        this.isMorePopoverOpen = signal(false, ...(ngDevMode ? [{ debugName: "isMorePopoverOpen" }] : []));
+        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" }] : []));
+    }
+    //#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 id = Array.isArray(columnData) ? columnData[index] : columnData;
+        this.selectedItemIndex.set(index);
+        this.closeMorePopover();
+        if (this.entity && id) {
+            await this.entityDetailPopoverService.show(this.host, {
+                entity: this.entity,
+                id: id,
+                textField: this.textField,
+                valueField: this.valueField,
+                item,
+            });
+        }
+    }
+    handleItemClick(index) {
+        const items = this.allItems();
+        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);
+        }
+    }
+    closeMorePopover() {
+        if (this.morePopover()) {
+            this.morePopover().close();
+            this.isMorePopoverOpen.set(false);
+        }
+    }
+    extractItem(item) {
+        if (isNil(item)) {
+            return null;
+        }
+        if (typeof item === 'object') {
+            return item;
+        }
+        return {
+            [this.valueField]: item,
+            [this.textField]: item,
+        };
+    }
+    getDisplayText(item) {
+        if (!item) {
+            return '';
+        }
+        return item?.[this.textField] ?? String(item);
+    }
+    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>
+      }
+    </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: 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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryWidgetColumnComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-entity-category-widget-column',
+                    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>
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [CommonModule, AXBadgeModule, AXButtonModule, AXPopoverModule],
+                    inputs: ['rawValue', 'rowData'],
+                }]
+        }], propDecorators: { moreButton: [{ type: i0.ViewChild, args: ['moreButton', { isSignal: true }] }], morePopover: [{ type: i0.ViewChild, args: ['morePopover', { isSignal: true }] }] } });
+
+var entityCategoryWidgetColumn_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPEntityCategoryWidgetColumnComponent: AXPEntityCategoryWidgetColumnComponent
+});
+
+class AXPEntityCategoryWidgetEditComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----   Services & Dependencies   ----
+        this.entityResolver = inject(AXPEntityResolver);
+        this.formatService = inject(AXFormatService);
+        this.popupService = inject(AXPopupService);
+        this.translateService = inject(AXTranslationService);
+        this.cdr = inject(ChangeDetectorRef);
+        //#endregion
+        //#region ----   View Queries   ----
+        this.selectBox = viewChild('selectBox', ...(ngDevMode ? [{ debugName: "selectBox" }] : []));
+        this.tagBox = viewChild('tagBoxComponent', ...(ngDevMode ? [{ debugName: "tagBox" }] : []));
+        //#endregion
+        //#region ----   Computed Properties   ----
+        this.entity = computed(() => this.options()['entity'] ?? '', ...(ngDevMode ? [{ debugName: "entity" }] : []));
+        this.multiple = computed(() => (this.options()['multiple'] ?? false), ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+        this.disabled = computed(() => (this.options()['disabled'] ?? false), ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.textField = computed(() => this.options()['textField'] ?? 'title', ...(ngDevMode ? [{ debugName: "textField" }] : []));
+        this.valueField = computed(() => this.options()['valueField'] ?? 'id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
+        this.expose = computed(() => this.options()['expose'], ...(ngDevMode ? [{ debugName: "expose" }] : []));
+        this.allowClear = computed(() => (this.options()['allowClear'] ?? false), ...(ngDevMode ? [{ debugName: "allowClear" }] : []));
+        this.look = computed(() => this.options()['look'] ?? 'lookup', ...(ngDevMode ? [{ debugName: "look" }] : []));
+        this.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" }] : []));
+        this.searchPlaceholderText = signal('', ...(ngDevMode ? [{ debugName: "searchPlaceholderText" }] : []));
+        //#endregion
+        //#region ----   Component State   ----
+        this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
+        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
+        this.searchTerm = signal(null, ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
+        //#endregion
+        //#region ----   Private Properties   ----
+        this.entityDef = signal(null, ...(ngDevMode ? [{ debugName: "entityDef" }] : []));
+        this.dataSource = computed(() => {
+            const entity = this.entityDef();
+            if (!entity)
+                return null;
+            return new AXDataSource({
+                byKey: (key) => {
+                    const func = entity.queries.byKey.execute;
+                    return func();
+                },
+                load: (e) => {
+                    const func = entity.queries.list?.execute;
+                    return func(e);
+                },
+                pageSize: 10,
+                key: 'id',
+            });
+        }, ...(ngDevMode ? [{ debugName: "dataSource" }] : []));
+        //#endregion
+        //#region ----   Effects   ----
+        this.#efEntity = effect(async () => {
+            const entityKey = this.entity();
+            if (!entityKey)
+                return;
+            const [module, entity] = entityKey.split('.');
+            this.entityDef.set(await this.entityResolver.get(module, entity));
+        }, ...(ngDevMode ? [{ debugName: "#efEntity" }] : []));
+        this.#efValue = effect(() => {
+            if (this.getValue()) {
+                this.findByValue();
+            }
+            else {
+                this.clear();
+            }
+        }, ...(ngDevMode ? [{ debugName: "#efValue" }] : []));
+        this.#efSearchPlaceholder = effect(async () => {
+            const entity = this.entityDef();
+            if (!entity) {
+                this.searchPlaceholderText.set('');
+                return;
+            }
+            const displayFieldName = this.displayField();
+            const displayProperty = entity.properties.find((property) => property.name === displayFieldName);
+            if (displayProperty) {
+                const translated = await this.translateService.translateAsync(displayProperty.title || displayProperty.name);
+                this.searchPlaceholderText.set(translated ? `Search in ${translated}...` : '');
+            }
+            else {
+                const fallback = await this.translateService.translateAsync('@general:actions.search.title');
+                this.searchPlaceholderText.set(fallback ? `${fallback}...` : '');
+            }
+        }, ...(ngDevMode ? [{ debugName: "#efSearchPlaceholder" }] : []));
+    }
+    //#endregion
+    //#region ----   Effects   ----
+    #efEntity;
+    #efValue;
+    #efSearchPlaceholder;
+    //#endregion
+    //#region ----   Public Methods   ----
+    handleOnClick(e) {
+        this.showTreeSelector();
+    }
+    async showTreeSelector() {
+        this.isOpen.set(true);
+        const currentValue = this.getValue();
+        const selectedIds = currentValue
+            ? (this.multiple() ? castArray(currentValue) : [currentValue])
+                .map((v) => String(extractValue(v, this.valueField())))
+                .filter((id) => id && id !== 'all')
+            : [];
+        try {
+            const result = await this.popupService.open(AXPEntityCategoryTreeSelectorComponent, {
+                title: `${this.translateService.translateSync('@general:widgets.lookup.search')} ${this.translateService.translateSync(this.entityDef()?.formats.plural ?? '')}`,
+                size: 'lg',
+                data: {
+                    entityKey: signal(this.entity()),
+                    textField: signal(this.textField()),
+                    valueField: signal(this.valueField()),
+                    allowMultiple: signal(this.multiple() ?? false),
+                    selectedValues: signal(selectedIds),
+                    searchPlaceholder: signal(this.searchPlaceholderText()),
+                },
+            });
+            if (result?.data?.selected && Array.isArray(result.data.selected)) {
+                this.setItems(result.data.selected);
+            }
+        }
+        catch (error) {
+            console.error('Error opening category tree selector:', error);
+        }
+        finally {
+            this.isOpen.set(false);
+            this.selectBox()?.focus();
+        }
+    }
+    selectBoxValueChange(e) {
+        const items = e.component.selectedItems;
+        this.setItems(items);
+    }
+    handleValueChange(e) {
+        if (e.isUserInteraction) {
+            if (isNil(e.value) || (Array.isArray(e.value) && e.value.length === 0)) {
+                this.clear();
+            }
+            else {
+                this.setValue(this.singleOrMultiple(e.value));
+            }
+        }
+    }
+    handleSearchInputChange(e) {
+        if (e.isUserInteraction) {
+            this.searchTerm.set(e.value ?? '');
+        }
+    }
+    handleKeyUp(e) {
+        const keyEvent = e.nativeEvent;
+        if (keyEvent.code == 'ArrowDown') {
+            this.showTreeSelector();
+        }
+    }
+    handleOnBlur(e) {
+        setTimeout(() => {
+            if (!this.isOpen()) {
+                this.clearInput();
+            }
+        }, 100);
+    }
+    handleClearClick() {
+        this.clear();
+    }
+    clear() {
+        this.setValue(null);
+        this.clearInput();
+        this.selectedItems.set([]);
+    }
+    clearInput() {
+        this.tagBox()?.inputValue.set('');
+        this.searchTerm.set('');
+    }
+    //#endregion
+    //#region ----   Private Methods   ----
+    async findByValue() {
+        this.isLoading.set(true);
+        const rawValue = this.getValue();
+        const values = castArray(rawValue);
+        const byKey = this.entityDef()?.queries.byKey?.execute;
+        if (byKey && values.length) {
+            if (this.multiple()) {
+                const items = await Promise.all(values.map((value) => byKey(extractValue(value, this.valueField()))));
+                this.setItems(items);
+            }
+            else {
+                const id = extractValue(values[0], this.valueField());
+                const item = await byKey(id);
+                this.setItems(item);
+            }
+        }
+        else {
+            this.setItems([]);
+        }
+        this.isLoading.set(false);
+    }
+    setItems(items) {
+        if (!items || items.length == 0) {
+            this.selectedItems.set([]);
+            this.setValue(null);
+            this.cdr.markForCheck();
+            return;
+        }
+        items = castArray(items);
+        this.clearInput();
+        this.selectedItems.set(items);
+        const keys = items.map((item) => get(item, this.valueField()));
+        const text = items.map((item) => get(item, this.displayField()));
+        // Extract data from valueField and set context by expose path
+        if (this.expose()) {
+            const exposeValue = castArray(this.expose());
+            const itemToExpose = {};
+            exposeValue.forEach((i) => {
+                if (typeof i == 'string') {
+                    const values = items.map((item) => set({}, i, get(item, i)));
+                    setSmart(itemToExpose, i, this.singleOrMultiple(values));
+                }
+                else {
+                    // Extract data from item by source path and set context by target path
+                    const values = this.multiple()
+                        ? items.map((item) => set({}, i.source, get(item, i.source)))
+                        : items.map((item) => get(item, i.source));
+                    setSmart(itemToExpose, i.target, this.singleOrMultiple(values));
+                }
+            });
+            this.contextService.patch(itemToExpose);
+            // Fire triggers
+            this.setValue(this.singleOrMultiple(keys));
+        }
+        else {
+            this.setValue(this.singleOrMultiple(keys));
+        }
+        // Trigger change detection to update selectbox/tagbox
+        this.cdr.markForCheck();
+    }
+    singleOrMultiple(values) {
+        return this.multiple() ? values : values[0];
+    }
+    getTagLabel(item) {
+        if (!item) {
+            return '';
+        }
+        return get(item, this.displayField()) ?? '';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryWidgetEditComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPEntityCategoryWidgetEditComponent, isStandalone: true, selector: "axp-entity-category-widget-edit", viewQueries: [{ propertyName: "selectBox", first: true, predicate: ["selectBox"], descendants: true, isSignal: true }, { propertyName: "tagBox", first: true, predicate: ["tagBoxComponent"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
+    @if (dataSource()) {
+      @if (look() == 'select') {
+        <ax-select-box
+          #selectBox
+          [dataSource]="dataSource()!"
+          [ngModel]="selectedItems()"
+          [textField]="displayField()"
+          [valueField]="valueField()"
+          [disabled]="disabled()"
+          [multiple]="multiple()"
+          (onValueChanged)="selectBoxValueChange($event)"
+        >
+          <ax-search-box
+            [placeholder]="selectedItems().length ? '' : searchPlaceholderText()"
+            (onValueChanged)="handleSearchInputChange($event)"
+          >
+            <ax-clear-button></ax-clear-button>
+          </ax-search-box>
+          @for (validation of validationRules(); track $index) {
+            <ax-validation-rule
+              [rule]="validation.rule"
+              [message]="validation.options?.message"
+              [options]="validation.options"
+            ></ax-validation-rule>
+          }
+          @if (allowClear()) {
+            <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
+          }
+          <ax-suffix>
+            <ax-button
+              color="ghost"
+              look="blank"
+              [disabled]="isLoading() || disabled()"
+              (onClick)="handleOnClick($event)"
+            >
+              @if (isLoading()) {
+                <ax-loading></ax-loading>
+              } @else {
+                <ax-icon icon="far fa-search"></ax-icon>
+              }
+            </ax-button>
+          </ax-suffix>
+        </ax-select-box>
+      } @else {
+        <ax-tag-box
+          #tagBoxComponent
+          [tagTemplate]="tagTemplate"
+          [ngModel]="selectedItems()"
+          [textField]="displayField()"
+          [valueField]="valueField()"
+          (onValueChanged)="handleValueChange($event)"
+          [placeholder]="selectedItems().length ? '' : searchPlaceholderText()"
+          [addOnEnter]="false"
+          [addOnComma]="false"
+          [disabled]="disabled()"
+          (onKeyUp)="handleKeyUp($event)"
+          (onBlur)="handleOnBlur($event)"
+        >
+          @for (validation of validationRules(); track $index) {
+            <ax-validation-rule
+              [rule]="validation.rule"
+              [message]="validation.options?.message"
+              [options]="validation.options"
+            ></ax-validation-rule>
+          }
+          @if (selectedItems().length > 1 || allowClear()) {
+            <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
+          }
+
+          <ax-suffix>
+            <ax-button
+              color="ghost"
+              look="blank"
+              [disabled]="isLoading() || disabled()"
+              (onClick)="handleOnClick($event)"
+            >
+              @if (isLoading()) {
+                <ax-loading></ax-loading>
+              } @else {
+                <ax-icon icon="far fa-search"></ax-icon>
+              }
+            </ax-button>
+          </ax-suffix>
+        </ax-tag-box>
+        <ng-template #tagTemplate let-item let-index="index">
+          <div class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface">
+            <span>{{ getTagLabel(item) }}</span>
+            <button type="button" (click)="tagBoxComponent.removeItem(index)">
+              <ax-icon class="ax-icon ax-icon-close"></ax-icon>
+            </button>
+          </div>
+        </ng-template>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$2.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i3$2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXValidationModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "directive", type: i5$1.AXValidationRuleDirective, selector: "ax-validation-rule", inputs: ["rule", "options", "message", "disabled"] }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i6$1.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i7.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "component", type: AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryWidgetEditComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-entity-category-widget-edit',
+                    template: `
+    @if (dataSource()) {
+      @if (look() == 'select') {
+        <ax-select-box
+          #selectBox
+          [dataSource]="dataSource()!"
+          [ngModel]="selectedItems()"
+          [textField]="displayField()"
+          [valueField]="valueField()"
+          [disabled]="disabled()"
+          [multiple]="multiple()"
+          (onValueChanged)="selectBoxValueChange($event)"
+        >
+          <ax-search-box
+            [placeholder]="selectedItems().length ? '' : searchPlaceholderText()"
+            (onValueChanged)="handleSearchInputChange($event)"
+          >
+            <ax-clear-button></ax-clear-button>
+          </ax-search-box>
+          @for (validation of validationRules(); track $index) {
+            <ax-validation-rule
+              [rule]="validation.rule"
+              [message]="validation.options?.message"
+              [options]="validation.options"
+            ></ax-validation-rule>
+          }
+          @if (allowClear()) {
+            <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
+          }
+          <ax-suffix>
+            <ax-button
+              color="ghost"
+              look="blank"
+              [disabled]="isLoading() || disabled()"
+              (onClick)="handleOnClick($event)"
+            >
+              @if (isLoading()) {
+                <ax-loading></ax-loading>
+              } @else {
+                <ax-icon icon="far fa-search"></ax-icon>
+              }
+            </ax-button>
+          </ax-suffix>
+        </ax-select-box>
+      } @else {
+        <ax-tag-box
+          #tagBoxComponent
+          [tagTemplate]="tagTemplate"
+          [ngModel]="selectedItems()"
+          [textField]="displayField()"
+          [valueField]="valueField()"
+          (onValueChanged)="handleValueChange($event)"
+          [placeholder]="selectedItems().length ? '' : searchPlaceholderText()"
+          [addOnEnter]="false"
+          [addOnComma]="false"
+          [disabled]="disabled()"
+          (onKeyUp)="handleKeyUp($event)"
+          (onBlur)="handleOnBlur($event)"
+        >
+          @for (validation of validationRules(); track $index) {
+            <ax-validation-rule
+              [rule]="validation.rule"
+              [message]="validation.options?.message"
+              [options]="validation.options"
+            ></ax-validation-rule>
+          }
+          @if (selectedItems().length > 1 || allowClear()) {
+            <ax-clear-button (click)="handleClearClick()"></ax-clear-button>
+          }
+
+          <ax-suffix>
+            <ax-button
+              color="ghost"
+              look="blank"
+              [disabled]="isLoading() || disabled()"
+              (onClick)="handleOnClick($event)"
+            >
+              @if (isLoading()) {
+                <ax-loading></ax-loading>
+              } @else {
+                <ax-icon icon="far fa-search"></ax-icon>
+              }
+            </ax-button>
+          </ax-suffix>
+        </ax-tag-box>
+        <ng-template #tagTemplate let-item let-index="index">
+          <div class="ax-inline-flex ax-items-center ax-gap-1.5 ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface">
+            <span>{{ getTagLabel(item) }}</span>
+            <button type="button" (click)="tagBoxComponent.removeItem(index)">
+              <ax-icon class="ax-icon ax-icon-close"></ax-icon>
+            </button>
+          </div>
+        </ng-template>
+      }
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXLoadingModule,
+                        AXValidationModule,
+                        AXFormModule,
+                        AXTagBoxModule,
+                        AXTranslationModule,
+                        AXSelectBoxModule,
+                        AXSearchBoxComponent,
+                    ],
+                }]
+        }], propDecorators: { selectBox: [{ type: i0.ViewChild, args: ['selectBox', { isSignal: true }] }], tagBox: [{ type: i0.ViewChild, args: ['tagBoxComponent', { isSignal: true }] }] } });
+
+var entityCategoryWidgetEdit_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPEntityCategoryWidgetEditComponent: AXPEntityCategoryWidgetEditComponent
+});
+
+class AXPEntityCategoryWidgetViewComponent extends AXPValueWidgetComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----   Services & Dependencies   ----
+        this.formatService = inject(AXFormatService);
+        this.entityResolver = inject(AXPEntityResolver);
+        //#endregion
+        //#region ----   Computed Properties   ----
+        this.entity = computed(() => this.options()['entity'] ?? '', ...(ngDevMode ? [{ debugName: "entity" }] : []));
+        this.multiple = computed(() => (this.options()['multiple'] ?? false), ...(ngDevMode ? [{ debugName: "multiple" }] : []));
+        this.valueField = computed(() => this.options()['valueField'] ?? 'id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
+        this.textField = computed(() => this.options()['textField'] ?? 'title', ...(ngDevMode ? [{ debugName: "textField" }] : []));
+        this.badgeClass = computed(() => this.options()['badgeClass'] ?? 'ax-accent1', ...(ngDevMode ? [{ debugName: "badgeClass" }] : []));
+        this.displayField = computed(() => {
+            return (this.textField() ??
+                this.entityDef()?.formats.lookup ??
+                this.entityDef()?.properties.find((c) => c.name != 'id')?.name ??
+                'title');
+        }, ...(ngDevMode ? [{ debugName: "displayField" }] : []));
+        //#endregion
+        //#region ----   Component State   ----
+        this.loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+        this.entityDef = signal(null, ...(ngDevMode ? [{ debugName: "entityDef" }] : []));
+        this.displayItems = signal([], ...(ngDevMode ? [{ debugName: "displayItems" }] : []));
+        //#endregion
+        //#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.getValue();
+            if (isNil(value)) {
+                this.displayItems.set([]);
+            }
+            else {
+                const items = castArray(value).map(async (item) => await this.extractItem(item));
+                this.displayItems.set(await Promise.all(items));
+            }
+        }, ...(ngDevMode ? [{ debugName: "efDisplay" }] : []));
+    }
+    //#endregion
+    //#region ----   Private Methods   ----
+    async extractItem(item) {
+        if (typeof item == 'object') {
+            return {
+                id: item[this.valueField()],
+                text: this.getDisplayText(item),
+            };
+        }
+        const def = this.entityDef();
+        const byKey = def?.queries.byKey?.execute;
+        if (byKey) {
+            this.loading.set(true);
+            try {
+                const fetchedItem = await byKey(item);
+                return {
+                    id: fetchedItem[this.valueField()],
+                    text: this.getDisplayText(fetchedItem),
+                };
+            }
+            finally {
+                this.loading.set(false);
+            }
+        }
+        return {
+            id: item,
+            text: String(item),
+        };
+    }
+    getDisplayText(item) {
+        return this.formatService.format(this.displayField(), 'string', item);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPEntityCategoryWidgetViewComponent, isStandalone: true, selector: "axp-entity-category-widget-view", usesInheritance: true, ngImport: i0, template: `
+    @if (loading()) {
+      <ax-loading></ax-loading>
+    } @else {
+      @if (displayItems().length > 1) {
+        @for (item of displayItems(); track $index) {
+          <ax-badge class="ax-p-0.5 {{ badgeClass() }}" [text]="item.text"></ax-badge>
+        }
+      } @else if (displayItems().length == 1) {
+        <ax-badge class="ax-p-0.5 {{ badgeClass() }}" [text]="displayItems()[0].text"></ax-badge>
+      } @else {
+        <span class="ax-text-muted">---</span>
+      }
+    }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i4.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryWidgetViewComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'axp-entity-category-widget-view',
+                    template: `
+    @if (loading()) {
+      <ax-loading></ax-loading>
+    } @else {
+      @if (displayItems().length > 1) {
+        @for (item of displayItems(); track $index) {
+          <ax-badge class="ax-p-0.5 {{ badgeClass() }}" [text]="item.text"></ax-badge>
+        }
+      } @else if (displayItems().length == 1) {
+        <ax-badge class="ax-p-0.5 {{ badgeClass() }}" [text]="displayItems()[0].text"></ax-badge>
+      } @else {
+        <span class="ax-text-muted">---</span>
+      }
+    }
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AXLoadingModule, AXBadgeModule],
+                }]
+        }] });
+
+var entityCategoryWidgetView_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPEntityCategoryWidgetViewComponent: AXPEntityCategoryWidgetViewComponent
+});
+
+const AXPEntityCategoryWidget = {
+    name: 'entity-category-editor',
+    title: 'Entity Category',
+    categories: [],
+    groups: [AXPWidgetGroupEnum.EntityWidget],
+    defaultFilterWidgetName: 'lookup-filter',
+    type: 'editor',
+    icon: 'fa-light fa-sitemap',
+    properties: [
+        AXP_DISABLED_PROPERTY,
+        AXP_ALLOW_CLEAR_PROPERTY,
+        AXP_DATA_PATH_PROPERTY,
+        {
+            name: 'entity',
+            title: 'Entity',
+            group: AXP_DATA_PROPERTY_GROUP,
+            schema: {
+                dataType: 'string',
+                interface: {
+                    name: 'entity',
+                    path: 'options.entity',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
+        AXP_ALLOW_MULTIPLE_PROPERTY,
+        {
+            name: 'textField',
+            title: 'Text Field',
+            group: AXP_DATA_PROPERTY_GROUP,
+            schema: {
+                dataType: 'string',
+                interface: {
+                    name: 'textField',
+                    path: 'options.textField',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'valueField',
+            title: 'Value Field',
+            group: AXP_DATA_PROPERTY_GROUP,
+            schema: {
+                dataType: 'string',
+                interface: {
+                    name: 'valueField',
+                    path: 'options.valueField',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'parentKey',
+            title: 'Parent Key',
+            group: AXP_DATA_PROPERTY_GROUP,
+            schema: {
+                dataType: 'string',
+                interface: {
+                    name: 'parentKey',
+                    path: 'options.parentKey',
+                    type: AXPWidgetsCatalog.text,
+                },
+            },
+            visible: true,
+        },
+        {
+            name: 'expose',
+            title: 'Expose',
+            group: AXP_DATA_PROPERTY_GROUP,
+            schema: {
+                dataType: 'string',
+                interface: {
+                    name: 'expose',
+                    path: 'options.expose',
+                    type: AXPWidgetsCatalog.select,
+                },
+            },
+            visible: true,
+        },
+    ],
+    components: {
+        view: {
+            component: () => Promise.resolve().then(function () { return entityCategoryWidgetView_component; }).then((c) => c.AXPEntityCategoryWidgetViewComponent),
+        },
+        edit: {
+            component: () => Promise.resolve().then(function () { return entityCategoryWidgetEdit_component; }).then((c) => c.AXPEntityCategoryWidgetEditComponent),
+        },
+        column: {
+            component: () => Promise.resolve().then(function () { return entityCategoryWidgetColumn_component; }).then((c) => c.AXPEntityCategoryWidgetColumnComponent),
+        },
+        designer: {
+            component: () => Promise.resolve().then(function () { return entityCategoryWidgetEdit_component; }).then((c) => c.AXPEntityCategoryWidgetEditComponent),
+        },
+    },
+};
+
 //#region ----   Column Mapping Helpers   ----
 /**
  * Maps an entity property to a list widget column configuration.
@@ -5553,7 +7137,7 @@ class AXPEntityListWidgetViewComponent extends AXPValueWidgetComponent {
         ></ng-container>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4$2.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3$2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "directive", type: i3$1.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i4$3.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityListWidgetViewComponent, decorators: [{
             type: Component,
@@ -7815,6 +9399,7 @@ class AXPEntityModule {
                     AXPWidgetSelectorWidget,
                     AXPEntityListWidget,
                     AXPEntityReferenceWidget,
+                    AXPEntityCategoryWidget,
                 ],
             })] }); }
 }
@@ -7857,6 +9442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                                 AXPWidgetSelectorWidget,
                                 AXPEntityListWidget,
                                 AXPEntityReferenceWidget,
+                                AXPEntityCategoryWidget,
                             ],
                         }),
                     ],
@@ -8465,5 +10051,5 @@ function detectEntityChanges(oldObj, newObj) {
  * Generated bundle index. Do not edit.
  */
 
-export { AXMEntityCrudService, AXMEntityCrudServiceImpl, AXPCreateEntityWorkflow, AXPDataSeederService, AXPDeleteEntityWorkflow, AXPEntityApplyUpdatesAction, AXPEntityCommandTriggerViewModel, AXPEntityCreateEvent, AXPEntityCreatePopupAction, AXPEntityCreateSubmittedAction, AXPEntityCreateViewElementViewModel, AXPEntityCreateViewModelFactory, AXPEntityCreateViewSectionViewModel, AXPEntityDataProvider, AXPEntityDataProviderImpl, AXPEntityDataSelectorService, AXPEntityDefinitionRegistryService, AXPEntityDeletedEvent, AXPEntityDetailListViewModel, AXPEntityDetailPopoverComponent, AXPEntityDetailPopoverService, AXPEntityDetailViewModelFactory, AXPEntityDetailViewModelResolver, AXPEntityDynamicDialogService, AXPEntityEventDispatcherService, AXPEntityListTableService, AXPEntityListViewColumnViewModel, AXPEntityListViewModelFactory, AXPEntityListViewModelResolver, AXPEntityListWidget, AXPEntityListWidgetViewComponent, AXPEntityMasterCreateViewModel, AXPEntityMasterListViewModel, AXPEntityMasterListViewQueryViewModel, AXPEntityMasterSingleElementViewModel, AXPEntityMasterSingleViewGroupViewModel, AXPEntityMasterSingleViewModel, AXPEntityMasterUpdateElementViewModel, AXPEntityMasterUpdateViewModel, AXPEntityMasterUpdateViewModelFactory, AXPEntityMiddleware, AXPEntityModifyConfirmedAction, AXPEntityModifyEvent, AXPEntityModifySectionPopupAction, AXPEntityModule, AXPEntityPerformDeleteAction, AXPEntityReferenceWidget, AXPEntityReferenceWidgetColumnComponent, AXPEntityReferenceWidgetDesignerComponent, AXPEntityReferenceWidgetEditComponent, AXPEntityReferenceWidgetPrintComponent, AXPEntityReferenceWidgetViewComponent, AXPEntityResolver, AXPEntityService, AXPEntityStorageService, AXPEntityUpdateViewSectionViewModel, AXPGetEntityDetailsQuery, AXPLookupFilterWidget, AXPLookupFilterWidgetEditComponent, AXPLookupWidget, AXPLookupWidgetColumnComponent, AXPLookupWidgetEditComponent, AXPLookupWidgetViewComponent, AXPMiddlewareAbortError, AXPMiddlewareEntityStorageService, AXPModifyEntitySectionWorkflow, AXPOpenEntityDetailsCommand, AXPQuickEntityModifyPopupAction, AXPQuickModifyEntityWorkflow, AXPShowDetailViewAction, AXPShowDetailsViewWorkflow, AXPShowListViewAction, AXPShowListViewWorkflow, AXPWidgetSelectorWidget, AXPWidgetSelectorWidgetEditComponent, AXPWidgetSelectorWidgetViewComponent, AXP_DATA_SEEDER_TOKEN, AXP_ENTITY_ACTION_PLUGIN, AXP_ENTITY_CONFIG_TOKEN, AXP_ENTITY_DEFINITION_LOADER, AXP_ENTITY_MODIFIER, AXP_ENTITY_STORAGE_BACKEND, AXP_ENTITY_STORAGE_MIDDLEWARE, DEFAULT_COLUMN_WIDTHS, DEFAULT_PROPERTY_ORDER, DEFAULT_SECTION_ORDER, actionExists, columnWidthMiddlewareFactory, columnWidthMiddlewareProvider, createColumnWidthMiddlewareProvider, createLayoutOrderingMiddlewareProvider, createModifierContext, detectEntityChanges, ensureListActions, entityDetailsCreateActions, entityDetailsCrudActions, entityDetailsEditAction, entityDetailsReferenceCondition, entityDetailsReferenceCreateActions, entityDetailsSimpleCondition, entityMasterBulkDeleteAction, entityMasterCreateAction, entityMasterCrudActions, entityMasterDeleteAction, entityMasterRecordActions, entityMasterViewAction, entityOverrideDetailsViewAction, eventDispatchMiddleware, isAXPMiddlewareAbortError, layoutOrderingMiddlewareFactory, layoutOrderingMiddlewareProvider };
+export { AXMEntityCrudService, AXMEntityCrudServiceImpl, AXPCategoryTreeService, AXPCreateEntityWorkflow, AXPDataSeederService, AXPDeleteEntityWorkflow, AXPEntityApplyUpdatesAction, AXPEntityCategoryTreeSelectorComponent, AXPEntityCategoryWidget, AXPEntityCategoryWidgetColumnComponent, AXPEntityCategoryWidgetEditComponent, AXPEntityCategoryWidgetViewComponent, AXPEntityCommandTriggerViewModel, AXPEntityCreateEvent, AXPEntityCreatePopupAction, AXPEntityCreateSubmittedAction, AXPEntityCreateViewElementViewModel, AXPEntityCreateViewModelFactory, AXPEntityCreateViewSectionViewModel, AXPEntityDataProvider, AXPEntityDataProviderImpl, AXPEntityDataSelectorService, AXPEntityDefinitionRegistryService, AXPEntityDeletedEvent, AXPEntityDetailListViewModel, AXPEntityDetailPopoverComponent, AXPEntityDetailPopoverService, AXPEntityDetailViewModelFactory, AXPEntityDetailViewModelResolver, AXPEntityDynamicDialogService, AXPEntityEventDispatcherService, AXPEntityListTableService, AXPEntityListViewColumnViewModel, AXPEntityListViewModelFactory, AXPEntityListViewModelResolver, AXPEntityListWidget, AXPEntityListWidgetViewComponent, AXPEntityMasterCreateViewModel, AXPEntityMasterListViewModel, AXPEntityMasterListViewQueryViewModel, AXPEntityMasterSingleElementViewModel, AXPEntityMasterSingleViewGroupViewModel, AXPEntityMasterSingleViewModel, AXPEntityMasterUpdateElementViewModel, AXPEntityMasterUpdateViewModel, AXPEntityMasterUpdateViewModelFactory, AXPEntityMiddleware, AXPEntityModifyConfirmedAction, AXPEntityModifyEvent, AXPEntityModifySectionPopupAction, AXPEntityModule, AXPEntityPerformDeleteAction, AXPEntityReferenceWidget, AXPEntityReferenceWidgetColumnComponent, AXPEntityReferenceWidgetDesignerComponent, AXPEntityReferenceWidgetEditComponent, AXPEntityReferenceWidgetPrintComponent, AXPEntityReferenceWidgetViewComponent, AXPEntityResolver, AXPEntityService, AXPEntityStorageService, AXPEntityUpdateViewSectionViewModel, AXPGetEntityDetailsQuery, AXPLookupFilterWidget, AXPLookupFilterWidgetEditComponent, AXPLookupWidget, AXPLookupWidgetColumnComponent, AXPLookupWidgetEditComponent, AXPLookupWidgetViewComponent, AXPMiddlewareAbortError, AXPMiddlewareEntityStorageService, AXPModifyEntitySectionWorkflow, AXPOpenEntityDetailsCommand, AXPQuickEntityModifyPopupAction, AXPQuickModifyEntityWorkflow, AXPShowDetailViewAction, AXPShowDetailsViewWorkflow, AXPShowListViewAction, AXPShowListViewWorkflow, AXPWidgetSelectorWidget, AXPWidgetSelectorWidgetEditComponent, AXPWidgetSelectorWidgetViewComponent, AXP_DATA_SEEDER_TOKEN, AXP_ENTITY_ACTION_PLUGIN, AXP_ENTITY_CONFIG_TOKEN, AXP_ENTITY_DEFINITION_LOADER, AXP_ENTITY_MODIFIER, AXP_ENTITY_STORAGE_BACKEND, AXP_ENTITY_STORAGE_MIDDLEWARE, DEFAULT_COLUMN_WIDTHS, DEFAULT_PROPERTY_ORDER, DEFAULT_SECTION_ORDER, actionExists, columnWidthMiddlewareFactory, columnWidthMiddlewareProvider, createColumnWidthMiddlewareProvider, createLayoutOrderingMiddlewareProvider, createModifierContext, detectEntityChanges, ensureListActions, entityDetailsCreateActions, entityDetailsCrudActions, entityDetailsEditAction, entityDetailsReferenceCondition, entityDetailsReferenceCreateActions, entityDetailsSimpleCondition, entityMasterBulkDeleteAction, entityMasterCreateAction, entityMasterCrudActions, entityMasterDeleteAction, entityMasterRecordActions, entityMasterViewAction, entityOverrideDetailsViewAction, eventDispatchMiddleware, isAXPMiddlewareAbortError, layoutOrderingMiddlewareFactory, layoutOrderingMiddlewareProvider };
 //# sourceMappingURL=acorex-platform-layout-entity.mjs.map