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

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

@@ -4,9 +4,9 @@ import { AXTranslationService, AXTranslationModule } from '@acorex/core/translat
 import * as i4 from '@acorex/platform/common';
 import { AXPSettingService, AXPFilterOperatorMiddlewareService, AXPEntityCommandScope, getEntityInfo, AXPRefreshEvent, AXPReloadEvent, AXPCommonSettings, AXPCleanNestedFilters, AXPWorkflowNavigateAction, AXPToastAction, AXP_SEARCH_DEFINITION_PROVIDER } from '@acorex/platform/common';
 import * as i1$2 from '@acorex/platform/core';
-import { AXPDeviceService, AXPBroadcastEventService, resolveActionLook, AXPExpressionEvaluatorService, AXPDistributedEventListenerService, AXPPlatformScope, extractValue, setSmart, getChangedPaths, AXPSystemActionType } from '@acorex/platform/core';
+import { AXPDeviceService, AXPBroadcastEventService, resolveActionLook, AXPExpressionEvaluatorService, AXPDistributedEventListenerService, AXPPlatformScope, AXHighlightService, extractValue, setSmart, getChangedPaths, AXPSystemActionType } from '@acorex/platform/core';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injector, runInInjectionContext, Injectable, input, viewChild, signal, ElementRef, ChangeDetectionStrategy, Component, ApplicationRef, EnvironmentInjector, createComponent, computed, afterNextRender, ViewEncapsulation, ChangeDetectorRef, effect, viewChildren, linkedSignal, untracked, HostBinding, ViewChild, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injector, runInInjectionContext, Injectable, input, viewChild, signal, ElementRef, ChangeDetectionStrategy, Component, ApplicationRef, EnvironmentInjector, createComponent, computed, effect, Input, afterNextRender, ViewEncapsulation, ChangeDetectorRef, viewChildren, linkedSignal, untracked, HostBinding, ViewChild, NgModule } from '@angular/core';
 import { Subject, takeUntil } from 'rxjs';
 import { AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
 import { merge, castArray, get, cloneDeep, set, orderBy, isNil, isEqual, isEmpty, sortBy } from 'lodash-es';
@@ -33,6 +33,7 @@ import { AXDialogService } from '@acorex/components/dialog';
 import { AXLoadingDialogService } from '@acorex/components/loading-dialog';
 import { AXPopupService } from '@acorex/components/popup';
 import { AXPlatform } from '@acorex/core/platform';
+import { AXCheckBoxModule } from '@acorex/components/check-box';
 import * as i2$1 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import { AXBasePageComponent } from '@acorex/components/page';
@@ -41,6 +42,9 @@ import { AXSearchBoxModule, AXSearchBoxComponent } from '@acorex/components/sear
 import * as i4$1 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import { AXTreeViewComponent } from '@acorex/components/tree-view';
+import { AXPStateMessageComponent, AXPDataSelectorService, AXPWidgetPropertyViewerComponent } from '@acorex/platform/layout/components';
+import * as i1$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 import * as i2$2 from '@acorex/components/badge';
 import { AXBadgeModule } from '@acorex/components/badge';
 import * as i5$1 from '@acorex/components/form';
@@ -49,15 +53,12 @@ import { AXValidationModule } from '@acorex/core/validation';
 import { AXP_DISABLED_PROPERTY, AXP_ALLOW_CLEAR_PROPERTY, AXP_DATA_PATH_PROPERTY, AXP_DATA_PROPERTY_GROUP, AXP_ALLOW_MULTIPLE_PROPERTY, AXP_NAME_PROPERTY, AXPFileUploaderWidgetService } from '@acorex/platform/layout/widgets';
 import * as i4$2 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
-import * as i1$1 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
 import * as i7 from '@acorex/components/select-box';
 import { AXSelectBoxModule } from '@acorex/components/select-box';
 import * as i2$3 from '@acorex/components/text-box';
 import { AXTextBoxModule, AXTextBoxComponent } from '@acorex/components/text-box';
 import * as i6$1 from '@acorex/components/tag-box';
 import { AXTagBoxComponent, AXTagBoxModule } from '@acorex/components/tag-box';
-import { AXPDataSelectorService, AXPWidgetPropertyViewerComponent } from '@acorex/platform/layout/components';
 import { transform, isEqual as isEqual$1 } from 'lodash';
 
 function ensureListActions(ctx) {
@@ -725,9 +726,11 @@ class PropertyFilter {
         const entityProps = (entity.properties ?? []).slice();
         const nameToViewLayout = buildViewLayoutMap(iface.properties ?? []);
         const allowedNames = this.computeAllowedNames(entityProps.map((p) => p.name));
+        // Calculate recommended dialog size based on form complexity
+        const calculatedSize = this.calculateRecommendedDialogSize(sections, entityProps, nameToViewLayout, allowedNames);
         const dialog = this.layoutBuilder.create().dialog((d) => {
             d.setTitle(title);
-            d.setSize(this.externalSize ?? (this.deviceService.isMobileDevice() ? 'full' : 'md'));
+            d.setSize(this.externalSize ?? calculatedSize);
             d.setCloseButton(true);
             d.content((layout) => {
                 // Default mode: 'view' for single, 'edit' for create/update
@@ -759,7 +762,7 @@ class PropertyFilter {
                                 fs.formField(prop.title, (field) => {
                                     // Path & field-level visibility/readonly
                                     field.path(fieldPath);
-                                    if (prop.schema?.visible) {
+                                    if (prop.schema?.visible !== undefined) {
                                         field.visible(prop.schema?.visible);
                                     }
                                     if (prop.schema?.readonly !== undefined) {
@@ -840,6 +843,78 @@ class PropertyFilter {
         }
         return new Set(allNames);
     }
+    /**
+     * Calculates the recommended dialog size based on form complexity.
+     * Considers number of sections, properties, and average field width.
+     *
+     * @param sections - Interface sections to display
+     * @param entityProps - All entity properties
+     * @param nameToViewLayout - Map of property names to their view layout configurations
+     * @param allowedNames - Set of property names that should be displayed (after filtering)
+     * @returns Recommended dialog size ('full' | 'lg' | 'md')
+     */
+    calculateRecommendedDialogSize(sections, entityProps, nameToViewLayout, allowedNames) {
+        // Mobile devices always use full screen
+        if (this.deviceService.isMobileDevice()) {
+            return 'full';
+        }
+        // Calculate number of visible properties
+        const visibleProperties = entityProps.filter((p) => allowedNames.has(p.name) && nameToViewLayout.has(p.name));
+        const visiblePropertyCount = visibleProperties.length;
+        // Calculate average colSpan to determine field width
+        // colSpan determines how many columns a field occupies in a 12-column grid
+        // Examples:
+        // - colSpan = 12 → 1 field per row (full width)
+        // - colSpan = 6  → 2 fields per row (half width each)
+        // - colSpan = 4  → 3 fields per row (one-third width each)
+        // - colSpan = 3  → 4 fields per row (one-quarter width each)
+        let totalColSpan = 0;
+        let propertiesWithLayout = 0;
+        let hasColSpan3 = false; // Track if any field has colSpan = 3
+        for (const prop of visibleProperties) {
+            const viewLayout = nameToViewLayout.get(prop.name);
+            const positions = viewLayout?.layout?.positions;
+            if (positions) {
+                // Get colSpan from the largest available breakpoint
+                const colSpan = positions.lg?.colSpan ?? positions.xl?.colSpan ?? positions.md?.colSpan ?? positions.sm?.colSpan ?? 12; // default: full width
+                totalColSpan += colSpan;
+                propertiesWithLayout++;
+                // Check if this field has colSpan = 3
+                if (colSpan <= 3) {
+                    hasColSpan3 = true;
+                }
+            }
+            else {
+                // If no layout defined, assume full width (12 columns)
+                totalColSpan += 12;
+                propertiesWithLayout++;
+            }
+        }
+        // Average colSpan: lower value = more fields per row, higher value = fewer fields per row
+        const avgColSpan = propertiesWithLayout > 0 ? totalColSpan / propertiesWithLayout : 12;
+        // Decision logic:
+        // - 10+ properties → complex form → needs 'lg'
+        // - avgColSpan <= 4 → 3+ fields per row → needs 'lg' (more horizontal space needed)
+        // - hasColSpan3 && avgColSpan <= 6 → row can sum to 12 with colSpan=3 (e.g., 9+3, 5+4+3, etc.) → needs 'lg'
+        // - Otherwise → 'md' is sufficient
+        if (visiblePropertyCount >= 10) {
+            return 'lg';
+        }
+        // If average colSpan <= 4, it means we can fit 3+ fields per row (12/4 = 3)
+        // This requires more horizontal space, so use 'lg'
+        if (avgColSpan <= 4) {
+            return 'lg';
+        }
+        // If there's a field with colSpan = 3 and avgColSpan <= 6,
+        // it means rows can sum to 12 with multiple fields including the colSpan=3 field
+        // (e.g., 9+3=12, 5+4+3=12, 4+3+3+2=12, etc.)
+        // This needs 'lg' for better horizontal space to accommodate the layout
+        if (hasColSpan3 && avgColSpan <= 6) {
+            return 'lg';
+        }
+        // For other cases (including full-width fields), 'md' is sufficient
+        return 'md';
+    }
 }
 //#endregion
 //#region ----   Helpers   ----
@@ -946,6 +1021,7 @@ class AXPCreateEntityCommand {
     }
     async execute(input) {
         const excludeProperties = input['excludeProperties'];
+        const dialogSize = input['dialogSize'];
         const { entity, entityInfo, data } = input.__context__;
         const [moduleName, entityName] = (entity || '').split('.');
         if (!moduleName || !entityName) {
@@ -972,6 +1048,9 @@ class AXPCreateEntityCommand {
                 const translatedTitle = await this.translationService.translateAsync(entityInfo.title);
                 chain = chain.title(`${createText} ${translatedTitle}`);
             }
+            if (dialogSize) {
+                chain.size(dialogSize);
+            }
             dialogRef = await chain.show();
             if (dialogRef.action() == 'cancel') {
                 dialogRef.close();
@@ -1063,6 +1142,7 @@ class AXPUpdateEntityCommand {
     //#region ----   Command Execution   ----
     async execute(input) {
         const excludeProperties = input['excludeProperties'];
+        const dialogSize = input['dialogSize'];
         const { entity, entityInfo, data } = input.__context__;
         const [moduleName, entityName] = (entity || '').split('.');
         if (!moduleName || !entityName) {
@@ -1099,6 +1179,9 @@ class AXPUpdateEntityCommand {
                 const translatedTitle = await this.translationService.translateAsync(entityInfo.title);
                 chain = chain.title(`${editText} ${translatedTitle}`);
             }
+            if (dialogSize) {
+                chain.size(dialogSize);
+            }
             dialogRef = await chain.show();
             if (dialogRef.action() === 'cancel') {
                 dialogRef.close();
@@ -5815,13 +5898,14 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
         //#region ----   Services & Dependencies   ----
         this.categoryTreeService = inject(AXPCategoryTreeService);
         this.translationService = inject(AXTranslationService);
+        this.highlightService = inject(AXHighlightService);
         //#endregion
         //#region ----   Properties (Set by popup service)   ----
         this.entityKey = signal('', ...(ngDevMode ? [{ debugName: "entityKey" }] : []));
         this.textField = signal('title', ...(ngDevMode ? [{ debugName: "textField" }] : []));
         this.valueField = signal('id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
         this.allowMultiple = signal(false, ...(ngDevMode ? [{ debugName: "allowMultiple" }] : []));
-        this.selectionBehavior = signal('leaf', ...(ngDevMode ? [{ debugName: "selectionBehavior" }] : []));
+        this.selectionBehavior = signal('all', ...(ngDevMode ? [{ debugName: "selectionBehavior" }] : []));
         this.selectedValues = signal([], ...(ngDevMode ? [{ debugName: "selectedValues" }] : []));
         this.searchPlaceholder = signal('@general:terms.interface.category.search.placeholder', ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
         this.excludedNodeId = signal(undefined, ...(ngDevMode ? [{ debugName: "excludedNodeId" }] : [])); // Node ID to disable
@@ -5987,11 +6071,11 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
             return;
         }
         // Prevent concurrent searches
-        if (this.isSearching() && this.currentSearchTerm !== null) {
-            if (this.currentSearchTerm === searchTerm) {
-                return;
-            }
-        }
+        // if (this.isSearching() && this.currentSearchTerm !== null) {
+        //   if (this.currentSearchTerm === searchTerm) {
+        //     return;
+        //   }
+        // }
         this.searchValue.set(event.value ?? '');
         this.currentSearchTerm = searchTerm;
         const treeComponent = this.tree();
@@ -6031,8 +6115,12 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
             }
             if (!searchResults || searchResults.length === 0) {
                 this.matchingNodeIds.clear();
+                this.relevantNodeIds.clear();
                 this.searchResultCount.set(0);
                 await this.updateTranslatedMessages(0, searchTerm);
+                // Clear highlighting and reload tree to show all nodes
+                this.highlightService.clear();
+                await treeComponent.reloadData();
                 return;
             }
             // Store matching node IDs from search results
@@ -6085,11 +6173,25 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
                     }
                 }
             }
+            // Step 5: Apply highlighting after tree is rendered
+            // Use setTimeout to ensure DOM is updated after tree reload
+            setTimeout(() => {
+                if (this.searchValue().trim()) {
+                    this.highlightService.highlight('ax-tree-view .ax-truncate', this.searchValue().trim());
+                }
+            }, 100);
         }
         catch (error) {
             console.error('Error searching categories:', error);
             this.matchingNodeIds.clear();
+            this.relevantNodeIds.clear();
             this.searchResultCount.set(0);
+            this.highlightService.clear();
+            // Reload tree to clear any filters
+            const treeComponent = this.tree();
+            if (treeComponent) {
+                await treeComponent.reloadData();
+            }
         }
         finally {
             if (this.currentSearchTerm === searchTerm) {
@@ -6356,6 +6458,8 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
         this.isSearching.set(false);
         this.matchingNodeIds.clear();
         this.relevantNodeIds.clear();
+        // Clear highlighting
+        this.highlightService.clear();
         const treeComponent = this.tree();
         if (!treeComponent) {
             this.expandedNodesBeforeSearch = [];
@@ -6452,6 +6556,36 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
     isMatchingNode(nodeId) {
         return this.matchingNodeIds.has(nodeId);
     }
+    /**
+     * Checks if a node is currently selected
+     */
+    isNodeSelected(nodeId) {
+        if (!nodeId || nodeId === 'all') {
+            return false;
+        }
+        const id = String(nodeId);
+        return this.selectedNodeIds().includes(id);
+    }
+    /**
+     * Handles checkbox change event to toggle node selection
+     */
+    // protected handleCheckboxChange(nodeId: string | number | undefined, checked: boolean): void {
+    //   if (!nodeId || nodeId === 'all') {
+    //     return;
+    //   }
+    //   const id = String(nodeId);
+    //   const treeComponent = this.tree();
+    //   if (!treeComponent) {
+    //     return;
+    //   }
+    //   if (checked) {
+    //     // Select the node
+    //     treeComponent.selectNode(id);
+    //   } else {
+    //     // Deselect the node
+    //     treeComponent.deselectNode(id);
+    //   }
+    // }
     //#endregion
     async updateSelectedNodes(selectedIds) {
         if (!selectedIds || selectedIds.length === 0) {
@@ -6823,23 +6957,18 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
               <div class="ax-text-xs ax-text-muted ax-flex ax-items-center ax-gap-1">
                 @if (searchResultCount() > 0) {
                   <span>{{ resultsFoundText() }}</span>
-                } @else {
-                  <span>{{ '@general:terms.interface.category.search.no-results' | translate | async }}</span>
                 }
               </div>
             }
           </div>
           @if (showNoSearchResults()) {
-            <div class="ax-flex-1 ax-flex ax-items-center ax-justify-center ax-p-4">
-              <div class="ax-text-center ax-text-muted">
-                <ax-icon class="fa-light fa-search ax-text-4xl ax-mb-2 ax-opacity-50"></ax-icon>
-                <p class="ax-text-sm">
-                  {{ '@general:terms.interface.category.search.no-results-found.title' | translate | async }}
-                </p>
-                <p class="ax-text-xs ax-opacity-70">
-                  {{ '@general:terms.interface.category.search.no-results-found.description' | translate | async }}
-                </p>
-              </div>
+            <div class="ax-flex-1 ax-flex ax-items-center ax-justify-center">
+              <axp-state-message
+                icon="fa-light fa-search"
+                [title]="'@general:terms.interface.category.search.no-results-found.title'"
+                [description]="'@general:terms.interface.category.search.no-results-found.description'"
+              >
+              </axp-state-message>
             </div>
           } @else {
             <div class="ax-flex-1 ax-overflow-auto ax-p-4">
@@ -6862,18 +6991,18 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
               <ng-template #itemTemplate let-node="node" let-level="level">
                 @if (node) {
                   @let item = node.data || node;
-                  @let isMatch = isMatchingNode(node.id);
-                  <div
-                    class="ax-flex ax-items-center ax-gap-2 ax-w-full ax-overflow-hidden ax-p-2 ax-pe-0"
-                    [class.ax-bg-secondary-100]="isMatch"
-                    [class.ax-rounded]="isMatch"
-                    [class.ax-px-1]="isMatch"
-                  >
+                  <div class="ax-flex ax-items-center ax-gap-2 ax-w-full ax-overflow-hidden ax-p-2 ax-pe-0">
+                    <!-- <ax-check-box
+                      [ngModel]="isNodeSelected(node.id)"
+                      (onValueChanged)="handleCheckboxChange(node.id, $event.value)"
+                      (click)="$event.stopPropagation()"
+                      [disabled]="node.disabled || node.id === 'all'"
+                    ></ax-check-box> -->
                     <ax-icon
                       class="fas fa-folder"
                       [style.color]="item.color ?? 'rgba(var(--ax-sys-color-warning-500), 1)'"
                     ></ax-icon>
-                    <span class="ax-truncate" [class.ax-font-semibold]="isMatch">{{ node.title }}</span>
+                    <span class="ax-truncate">{{ node.title }}</span>
                   </div>
                 }
               </ng-template>
@@ -6881,8 +7010,13 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
           }
         </div>
       } @else {
-        <div class="ax-p-4 ax-text-center ax-text-muted">
-          <span>---</span>
+        <div class="ax-flex-1 ax-flex ax-items-center ax-justify-center">
+          <axp-state-message
+            icon="fa-light fa-folder-open"
+            [title]="'@general:terms.interface.category.search.no-records.title'"
+            [description]="'@general:terms.interface.category.search.no-records.description'"
+          >
+          </axp-state-message>
         </div>
       }
     </div>
@@ -6897,11 +7031,12 @@ class AXPEntityCategoryTreeSelectorComponent extends AXBasePageComponent {
           look="solid"
           color="primary"
           [text]="'@general:actions.ok.title' | translate | async"
+          [disabled]="selectedNodeIds().length === 0"
           (onClick)="onConfirm()"
         ></ax-button>
       </ax-suffix>
     </ax-footer>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i3$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i4$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick"], outputs: ["datasourceChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i3$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i4$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick"], outputs: ["datasourceChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "ngmodule", type: FormsModule }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryTreeSelectorComponent, decorators: [{
             type: Component,
@@ -6932,23 +7067,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
               <div class="ax-text-xs ax-text-muted ax-flex ax-items-center ax-gap-1">
                 @if (searchResultCount() > 0) {
                   <span>{{ resultsFoundText() }}</span>
-                } @else {
-                  <span>{{ '@general:terms.interface.category.search.no-results' | translate | async }}</span>
                 }
               </div>
             }
           </div>
           @if (showNoSearchResults()) {
-            <div class="ax-flex-1 ax-flex ax-items-center ax-justify-center ax-p-4">
-              <div class="ax-text-center ax-text-muted">
-                <ax-icon class="fa-light fa-search ax-text-4xl ax-mb-2 ax-opacity-50"></ax-icon>
-                <p class="ax-text-sm">
-                  {{ '@general:terms.interface.category.search.no-results-found.title' | translate | async }}
-                </p>
-                <p class="ax-text-xs ax-opacity-70">
-                  {{ '@general:terms.interface.category.search.no-results-found.description' | translate | async }}
-                </p>
-              </div>
+            <div class="ax-flex-1 ax-flex ax-items-center ax-justify-center">
+              <axp-state-message
+                icon="fa-light fa-search"
+                [title]="'@general:terms.interface.category.search.no-results-found.title'"
+                [description]="'@general:terms.interface.category.search.no-results-found.description'"
+              >
+              </axp-state-message>
             </div>
           } @else {
             <div class="ax-flex-1 ax-overflow-auto ax-p-4">
@@ -6971,18 +7101,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
               <ng-template #itemTemplate let-node="node" let-level="level">
                 @if (node) {
                   @let item = node.data || node;
-                  @let isMatch = isMatchingNode(node.id);
-                  <div
-                    class="ax-flex ax-items-center ax-gap-2 ax-w-full ax-overflow-hidden ax-p-2 ax-pe-0"
-                    [class.ax-bg-secondary-100]="isMatch"
-                    [class.ax-rounded]="isMatch"
-                    [class.ax-px-1]="isMatch"
-                  >
+                  <div class="ax-flex ax-items-center ax-gap-2 ax-w-full ax-overflow-hidden ax-p-2 ax-pe-0">
+                    <!-- <ax-check-box
+                      [ngModel]="isNodeSelected(node.id)"
+                      (onValueChanged)="handleCheckboxChange(node.id, $event.value)"
+                      (click)="$event.stopPropagation()"
+                      [disabled]="node.disabled || node.id === 'all'"
+                    ></ax-check-box> -->
                     <ax-icon
                       class="fas fa-folder"
                       [style.color]="item.color ?? 'rgba(var(--ax-sys-color-warning-500), 1)'"
                     ></ax-icon>
-                    <span class="ax-truncate" [class.ax-font-semibold]="isMatch">{{ node.title }}</span>
+                    <span class="ax-truncate">{{ node.title }}</span>
                   </div>
                 }
               </ng-template>
@@ -6990,8 +7120,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
           }
         </div>
       } @else {
-        <div class="ax-p-4 ax-text-center ax-text-muted">
-          <span>---</span>
+        <div class="ax-flex-1 ax-flex ax-items-center ax-justify-center">
+          <axp-state-message
+            icon="fa-light fa-folder-open"
+            [title]="'@general:terms.interface.category.search.no-records.title'"
+            [description]="'@general:terms.interface.category.search.no-records.description'"
+          >
+          </axp-state-message>
         </div>
       }
     </div>
@@ -7006,6 +7141,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
           look="solid"
           color="primary"
           [text]="'@general:actions.ok.title' | translate | async"
+          [disabled]="selectedNodeIds().length === 0"
           (onClick)="onConfirm()"
         ></ax-button>
       </ax-suffix>
@@ -7015,11 +7151,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                     imports: [
                         CommonModule,
                         AXButtonModule,
+                        AXCheckBoxModule,
                         AXDecoratorModule,
                         AXSearchBoxModule,
                         AXSkeletonModule,
                         AXTreeViewComponent,
                         AXTranslationModule,
+                        AXPStateMessageComponent,
+                        FormsModule,
                     ],
                 }]
         }], propDecorators: { tree: [{ type: i0.ViewChild, args: ['tree', { isSignal: true }] }] } });
@@ -7027,177 +7166,275 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
 class AXPEntityCategoryWidgetColumnComponent extends AXPColumnWidgetComponent {
     constructor() {
         super(...arguments);
-        //#region ----   Dependencies   ----
+        //#region ----   Services & Dependencies   ----
         this.entityDetailPopoverService = inject(AXPEntityDetailPopoverService);
         this.formatService = inject(AXFormatService);
+        this.entityResolver = inject(AXPEntityResolver);
         //#endregion
-        //#region ----   View Children   ----
-        this.moreButton = viewChild('moreButton', ...(ngDevMode ? [{ debugName: "moreButton" }] : []));
-        this.morePopover = viewChild('morePopover', ...(ngDevMode ? [{ debugName: "morePopover" }] : []));
+        //#region ----   Inputs   ----
+        this.rawValueSignal = signal(null, ...(ngDevMode ? [{ debugName: "rawValueSignal" }] : []));
         //#endregion
-        //#region ----   Properties   ----
-        this.host = inject(ElementRef);
-        this.valueField = this.options['valueField'] ?? 'id';
-        this.textField = this.options['textField'] ?? 'title';
-        this.entity = this.options['entity'] ?? '';
-        this.columnName = this.options['columnName'] ?? '';
-        this.maxVisible = this.options['maxVisible'] ?? 2;
+        //#region ----   Computed Properties   ----
+        this.entity = computed(() => this.options['entity'] ?? '', ...(ngDevMode ? [{ debugName: "entity" }] : []));
+        this.valueField = computed(() => this.options['valueField'] ?? 'id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
+        this.textField = computed(() => this.options['textField'] ?? 'title', ...(ngDevMode ? [{ debugName: "textField" }] : []));
+        this.columnName = computed(() => this.options['columnName'] ?? '', ...(ngDevMode ? [{ debugName: "columnName" }] : []));
+        this.defaultTextField = computed(() => {
+            const textField = this.entityDef()?.formats.lookup ?? this.entityDef()?.properties.find((c) => c.name != 'id')?.name ?? 'title';
+            return textField;
+        }, ...(ngDevMode ? [{ debugName: "defaultTextField" }] : []));
+        this.displayField = computed(() => {
+            if (this.textField()) {
+                return this.textField();
+            }
+            return this.defaultTextField();
+        }, ...(ngDevMode ? [{ debugName: "displayField" }] : []));
         //#endregion
-        //#region ----   Signals   ----
-        this.isMorePopoverOpen = signal(false, ...(ngDevMode ? [{ debugName: "isMorePopoverOpen" }] : []));
+        //#region ----   Component State   ----
+        this.host = inject(ElementRef);
+        this.entityDef = signal(null, ...(ngDevMode ? [{ debugName: "entityDef" }] : []));
+        this.displayItems = signal([], ...(ngDevMode ? [{ debugName: "displayItems" }] : []));
         this.selectedItemIndex = signal(-1, ...(ngDevMode ? [{ debugName: "selectedItemIndex" }] : []));
         //#endregion
-        //#region ----   Computed Properties   ----
-        this.displayItems = computed(() => isNil(this.rawValue)
-            ? []
-            : castArray(this.rawValue)
-                .map((item) => this.extractItem(item))
-                .filter((c) => c != null), ...(ngDevMode ? [{ debugName: "displayItems" }] : []));
-        this.allItems = computed(() => this.displayItems(), ...(ngDevMode ? [{ debugName: "allItems" }] : []));
-        this.visibleItems = computed(() => {
-            const items = this.allItems();
-            return items.slice(0, this.maxVisible);
-        }, ...(ngDevMode ? [{ debugName: "visibleItems" }] : []));
-        this.remainingItems = computed(() => {
-            const items = this.allItems();
-            return items.slice(this.maxVisible);
-        }, ...(ngDevMode ? [{ debugName: "remainingItems" }] : []));
-        this.hasMoreItems = computed(() => {
-            return this.allItems().length > this.maxVisible;
-        }, ...(ngDevMode ? [{ debugName: "hasMoreItems" }] : []));
-        this.remainingItemsCount = computed(() => {
-            return this.allItems().length - this.maxVisible;
-        }, ...(ngDevMode ? [{ debugName: "remainingItemsCount" }] : []));
+        //#region ----   Effects   ----
+        this.efEntity = effect(async () => {
+            const entityKey = this.entity();
+            if (!entityKey) {
+                return;
+            }
+            const [module, entity] = entityKey.split('.');
+            if (!module || !entity) {
+                return;
+            }
+            this.entityDef.set(await this.entityResolver.get(module, entity));
+        }, ...(ngDevMode ? [{ debugName: "efEntity" }] : []));
+        this.efDisplay = effect(async () => {
+            const value = this.rawValueSignal();
+            const entity = this.entityDef();
+            // Wait for entity definition to be loaded before processing value
+            if (!entity) {
+                this.displayItems.set([]);
+                return;
+            }
+            if (isNil(value)) {
+                this.displayItems.set([]);
+            }
+            else {
+                const items = castArray(value);
+                const itemsWithPaths = await Promise.all(items.map((item) => this.extractItemWithPath(item)));
+                this.displayItems.set(itemsWithPaths.filter((c) => c != null));
+            }
+        }, ...(ngDevMode ? [{ debugName: "efDisplay" }] : []));
+        //#endregion
+        //#region ----   Computed Properties (Derived)   ----
+        this.visibleItems = computed(() => this.displayItems(), ...(ngDevMode ? [{ debugName: "visibleItems" }] : []));
+    }
+    set rawValueInput(value) {
+        this.rawValueSignal.set(value);
     }
     //#endregion
     //#region ----   Public Methods   ----
-    showMoreItems() {
-        this.entityDetailPopoverService.hide();
-        this.openMorePopover();
-    }
-    onMorePopoverOpenChange(event) {
-        this.isMorePopoverOpen.set(event);
-    }
     async showItemDetail(item, index) {
-        const columnData = this.rowData[this.columnName];
+        const columnData = this.rowData[this.columnName()];
         const id = Array.isArray(columnData) ? columnData[index] : columnData;
         this.selectedItemIndex.set(index);
-        this.closeMorePopover();
-        if (this.entity && id) {
+        const entityKey = this.entity();
+        if (entityKey && id) {
             await this.entityDetailPopoverService.show(this.host, {
-                entity: this.entity,
+                entity: entityKey,
                 id: id,
-                textField: this.textField,
-                valueField: this.valueField,
+                textField: this.textField(),
+                valueField: this.valueField(),
                 item,
             });
         }
     }
     handleItemClick(index) {
-        const items = this.allItems();
+        const items = this.visibleItems();
         if (index < items.length) {
             const item = items[index];
             this.showItemDetail(item, index);
         }
     }
-    //#endregion
-    //#region ----   Private Methods   ----
-    openMorePopover() {
-        if (this.morePopover() && this.moreButton()) {
-            this.morePopover().target = this.moreButton().nativeElement;
-            this.morePopover().open();
-            this.isMorePopoverOpen.set(true);
+    getItemPath(item) {
+        if (!item) {
+            return [];
         }
+        // If path is available as array, return it
+        if (item.path && Array.isArray(item.path) && item.path.length > 0) {
+            return item.path;
+        }
+        // Fall back to display field if no path
+        const displayValue = get(item, this.displayField());
+        return displayValue ? [String(displayValue)] : [];
     }
-    closeMorePopover() {
-        if (this.morePopover()) {
-            this.morePopover().close();
-            this.isMorePopoverOpen.set(false);
+    hasParent(item) {
+        const path = this.getItemPath(item);
+        return path.length > 1;
+    }
+    getItemText(item) {
+        const path = this.getItemPath(item);
+        if (path.length === 0) {
+            return '';
         }
+        // Return the last item in the path (the actual node)
+        return path[path.length - 1];
     }
-    extractItem(item) {
+    getItemId(item) {
+        if (!item) {
+            return '';
+        }
+        return String(get(item, this.valueField()) ?? '');
+    }
+    //#endregion
+    //#region ----   Private Methods   ----
+    async extractItemWithPath(item) {
         if (isNil(item)) {
             return null;
         }
+        let itemObj;
         if (typeof item === 'object') {
-            return item;
+            itemObj = item;
         }
-        return {
-            [this.valueField]: item,
-            [this.textField]: item,
-        };
+        else {
+            // If item is just an ID, fetch the full item
+            const byKey = this.entityDef()?.queries.byKey?.execute;
+            if (byKey) {
+                try {
+                    itemObj = await byKey(item);
+                }
+                catch (error) {
+                    console.error('Error fetching item:', error);
+                    return null;
+                }
+            }
+            else {
+                itemObj = {
+                    [this.valueField()]: item,
+                    [this.textField()]: item,
+                };
+            }
+        }
+        // If item already has a path array, return it as is
+        if (itemObj.path && Array.isArray(itemObj.path) && itemObj.path.length > 0) {
+            return itemObj;
+        }
+        // Calculate path for the item
+        return await this.calculateItemPath(itemObj);
     }
-    getDisplayText(item) {
-        if (!item) {
-            return '';
+    /**
+     * Calculate the full path from root to the item.
+     * Returns an array of strings like ["C", "B"] for item B under parent C.
+     */
+    async calculateItemPath(item) {
+        if (!item || !this.entityDef()) {
+            return item;
+        }
+        // If item already has a path array, return it as is
+        if (item.path && Array.isArray(item.path) && item.path.length > 0) {
+            return item;
+        }
+        const parentKey = this.entityDef()?.parentKey;
+        if (!parentKey) {
+            // No parent key means flat structure, return item with just its title as path array
+            const title = get(item, this.displayField()) ?? '';
+            return { ...item, path: title ? [title] : [] };
         }
-        return item?.[this.textField] ?? String(item);
+        const valueField = this.valueField();
+        const textField = this.displayField();
+        const byKey = this.entityDef()?.queries.byKey?.execute;
+        if (!byKey) {
+            return item;
+        }
+        const path = [];
+        let currentItem = item;
+        const visitedIds = new Set(); // Prevent infinite loops
+        // Build path by traversing up the parent chain
+        while (currentItem) {
+            const currentId = String(get(currentItem, valueField) ?? '');
+            if (!currentId || visitedIds.has(currentId)) {
+                break; // Prevent infinite loops
+            }
+            visitedIds.add(currentId);
+            const title = String(get(currentItem, textField) ?? '');
+            if (title) {
+                path.unshift(title); // Add to beginning to maintain hierarchy order
+            }
+            // Get parent ID from current item
+            const parentId = get(currentItem, parentKey);
+            if (!parentId || parentId === 'all' || parentId === currentId) {
+                break; // Reached root or invalid parent
+            }
+            try {
+                // Fetch parent item
+                const parentItem = await byKey(parentId);
+                if (!parentItem) {
+                    break; // Parent not found, stop traversal
+                }
+                currentItem = parentItem;
+            }
+            catch (error) {
+                console.error('Error fetching parent item:', error);
+                break;
+            }
+        }
+        // Return item with path array, or just the item title if no path
+        const pathArray = path.length > 0 ? path : get(item, textField) ? [String(get(item, textField))] : [];
+        return { ...item, path: pathArray };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryWidgetColumnComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPEntityCategoryWidgetColumnComponent, isStandalone: true, selector: "axp-entity-category-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData" }, viewQueries: [{ propertyName: "moreButton", first: true, predicate: ["moreButton"], descendants: true, isSignal: true }, { propertyName: "morePopover", first: true, predicate: ["morePopover"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
-    <div class="ax-flex ax-items-center ax-gap-1 ax-flex-wrap">
-      @for (item of visibleItems(); track $index) {
-        <ax-badge
-          class="ax-p-0.5 ax-cursor-pointer"
-          [text]="getDisplayText(item)"
-          (click)="handleItemClick($index)"
-        ></ax-badge>
-      }
-      @if (hasMoreItems()) {
-        <span class="ax-cursor-pointer ax-px-1" (click)="showMoreItems()" #moreButton>
-          <i class="fas fa-ellipsis-h"></i>
-        </span>
-        <ax-popover #morePopover [openOn]="'manual'" (openChange)="onMorePopoverOpenChange($event)">
-          <div class="ax-p-2 ax-flex ax-flex-col ax-gap-1">
-            @for (item of remainingItems(); track $index) {
-              <ax-badge
-                class="ax-p-0.5 ax-cursor-pointer"
-                [text]="getDisplayText(item)"
-                (click)="handleItemClick(visibleItems().length + $index)"
-              ></ax-badge>
-            }
-          </div>
-        </ax-popover>
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPEntityCategoryWidgetColumnComponent, isStandalone: true, selector: "axp-entity-category-widget-column", inputs: { rawValue: "rawValue", rowData: "rowData", rawValueInput: ["rawValue", "rawValueInput"] }, host: { classAttribute: "ax-w-full" }, usesInheritance: true, ngImport: i0, template: `
+    <div class="ax-flex ax-flex-col ax-gap-1.5">
+      @for (item of visibleItems(); track getItemId(item)) {
+        <div class=" ax-cursor-pointer" (click)="handleItemClick($index)">
+          @if (hasParent(item)) {
+            <ax-badge [color]="'primary'" [look]="'twotone'" class="ax-p-0.5" [text]="getItemText(item)">
+              <ax-prefix>
+                <i class="fas fa-ellipsis-h ax-text-neutral-400 ax-text-xs ax-ps-1"></i>
+                <i class="fas fa-chevron-right ax-text-neutral-400 ax-text-xs ax-px-1"></i>
+              </ax-prefix>
+            </ax-badge>
+          } @else {
+            <ax-badge [color]="'primary'" [look]="'twotone'" class="ax-p-0.5" [text]="getItemText(item)"> </ax-badge>
+          }
+        </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i2$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryWidgetColumnComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'axp-entity-category-widget-column',
+                    host: {
+                        class: 'ax-w-full',
+                    },
                     template: `
-    <div class="ax-flex ax-items-center ax-gap-1 ax-flex-wrap">
-      @for (item of visibleItems(); track $index) {
-        <ax-badge
-          class="ax-p-0.5 ax-cursor-pointer"
-          [text]="getDisplayText(item)"
-          (click)="handleItemClick($index)"
-        ></ax-badge>
-      }
-      @if (hasMoreItems()) {
-        <span class="ax-cursor-pointer ax-px-1" (click)="showMoreItems()" #moreButton>
-          <i class="fas fa-ellipsis-h"></i>
-        </span>
-        <ax-popover #morePopover [openOn]="'manual'" (openChange)="onMorePopoverOpenChange($event)">
-          <div class="ax-p-2 ax-flex ax-flex-col ax-gap-1">
-            @for (item of remainingItems(); track $index) {
-              <ax-badge
-                class="ax-p-0.5 ax-cursor-pointer"
-                [text]="getDisplayText(item)"
-                (click)="handleItemClick(visibleItems().length + $index)"
-              ></ax-badge>
-            }
-          </div>
-        </ax-popover>
+    <div class="ax-flex ax-flex-col ax-gap-1.5">
+      @for (item of visibleItems(); track getItemId(item)) {
+        <div class=" ax-cursor-pointer" (click)="handleItemClick($index)">
+          @if (hasParent(item)) {
+            <ax-badge [color]="'primary'" [look]="'twotone'" class="ax-p-0.5" [text]="getItemText(item)">
+              <ax-prefix>
+                <i class="fas fa-ellipsis-h ax-text-neutral-400 ax-text-xs ax-ps-1"></i>
+                <i class="fas fa-chevron-right ax-text-neutral-400 ax-text-xs ax-px-1"></i>
+              </ax-prefix>
+            </ax-badge>
+          } @else {
+            <ax-badge [color]="'primary'" [look]="'twotone'" class="ax-p-0.5" [text]="getItemText(item)"> </ax-badge>
+          }
+        </div>
       }
     </div>
   `,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [CommonModule, AXBadgeModule, AXButtonModule, AXPopoverModule],
+                    imports: [CommonModule, AXBadgeModule, AXDecoratorModule],
                     inputs: ['rawValue', 'rowData'],
                 }]
-        }], propDecorators: { moreButton: [{ type: i0.ViewChild, args: ['moreButton', { isSignal: true }] }], morePopover: [{ type: i0.ViewChild, args: ['morePopover', { isSignal: true }] }] } });
+        }], propDecorators: { rawValueInput: [{
+                type: Input,
+                args: ['rawValue']
+            }] } });
 
 var entityCategoryWidgetColumn_component = /*#__PURE__*/Object.freeze({
     __proto__: null,