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

package/fesm2022/{acorex-platform-themes-default-entity-master-list-view.component-BbACUabi.mjs → acorex-platform-themes-default-entity-master-list-view.component-CenhnHXi.mjs}

@@ -40,10 +40,11 @@ import { AXPLayoutThemeService } from '@acorex/platform/themes/shared';
 import * as i2$1 from '@acorex/components/skeleton';
 import { AXSkeletonModule } from '@acorex/components/skeleton';
 import { AXTreeViewModule, AXTreeViewComponent } from '@acorex/components/tree-view';
+import { AXPRefreshEvent, AXPSettingService, AXPCommonSettings } from '@acorex/platform/common';
 import { AXPEntityResolver, AXPCategoryTreeService, AXPEntityListViewColumnViewModel } from '@acorex/platform/layout/entity';
-import { AXPWorkflowService } from '@acorex/platform/workflow';
+import { AXPWorkflowService, ofType } from '@acorex/platform/workflow';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { AXPDeviceService } from '@acorex/platform/core';
-import { AXPSettingService, AXPCommonSettings } from '@acorex/platform/common';
 import { isEqual } from 'lodash-es';
 
 //#region ----   Constants   ----
@@ -67,10 +68,9 @@ class AXPEntityCategoryComponent {
         this.tree = viewChild('tree', ...(ngDevMode ? [{ debugName: "tree" }] : []));
         this.searchValue = input('', ...(ngDevMode ? [{ debugName: "searchValue" }] : []));
         // Tree view inputs with defaults
-        this.selectMode = input('single', ...(ngDevMode ? [{ debugName: "selectMode" }] : []));
-        this.showCheckbox = input(false, ...(ngDevMode ? [{ debugName: "showCheckbox" }] : []));
+        this.selectMode = input('multiple', ...(ngDevMode ? [{ debugName: "selectMode" }] : []));
         this.selectionBehavior = input('intermediate', ...(ngDevMode ? [{ debugName: "selectionBehavior" }] : []));
-        this.dragArea = input('handler', ...(ngDevMode ? [{ debugName: "dragArea" }] : [])); //TODO FIX ACOREX
+        this.dragArea = input('handler', ...(ngDevMode ? [{ debugName: "dragArea" }] : []));
         this.dragBehavior = input('none', ...(ngDevMode ? [{ debugName: "dragBehavior" }] : []));
         this.showIcons = input(true, ...(ngDevMode ? [{ debugName: "showIcons" }] : []));
         this.showChildrenBadge = input(false, ...(ngDevMode ? [{ debugName: "showChildrenBadge" }] : []));
@@ -78,19 +78,39 @@ class AXPEntityCategoryComponent {
         this.collapsedIcon = input('fa-solid fa-chevron-right', ...(ngDevMode ? [{ debugName: "collapsedIcon" }] : []));
         this.indentSize = input(16, ...(ngDevMode ? [{ debugName: "indentSize" }] : []));
         this.look = input('default', ...(ngDevMode ? [{ debugName: "look" }] : []));
+        this.searchWithChildren = input(true, ...(ngDevMode ? [{ debugName: "searchWithChildren" }] : [])); // Include children of search results
         //#endregion
         //#region ----   Component State   ----
         this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.isSearching = signal(false, ...(ngDevMode ? [{ debugName: "isSearching" }] : []));
+        this.searchResultCount = signal(0, ...(ngDevMode ? [{ debugName: "searchResultCount" }] : []));
+        this.currentSearchValue = signal('', ...(ngDevMode ? [{ debugName: "currentSearchValue" }] : []));
+        this.resultsFoundText = signal('', ...(ngDevMode ? [{ debugName: "resultsFoundText" }] : []));
         //#endregion
         //#region ----   Private Properties   ----
         this.loadingTimeoutId = null;
         this.treeData = null;
         this.treeConfig = null;
-        this.searchResults = null;
+        this.matchingNodeIds = new Set();
+        this.relevantNodeIds = new Set(); // For search filtering
+        this.nodeDataCache = new Map(); // Cache parent data from search results
+        this.expandedNodesBeforeSearch = [];
+        this.nodesExpandedDuringSearch = [];
+        this.currentSearchTerm = null;
         //#endregion
         //#region ----   Computed Properties   ----
         this.textField = computed(() => this.vm().entityDef.category?.textField || DEFAULT_TEXT_FIELD, ...(ngDevMode ? [{ debugName: "textField" }] : []));
         this.valueField = computed(() => this.vm().entityDef.category?.valueField || DEFAULT_VALUE_FIELD, ...(ngDevMode ? [{ debugName: "valueField" }] : []));
+        /**
+         * Computed property to check if we should show the "no search results" empty state.
+         * Returns true when search is active, not searching, and no results found.
+         */
+        this.showNoSearchResults = computed(() => {
+            const searchValue = this.currentSearchValue().trim();
+            const isSearching = this.isSearching();
+            const resultCount = this.searchResultCount();
+            return searchValue.length > 0 && !isSearching && resultCount === 0;
+        }, ...(ngDevMode ? [{ debugName: "showNoSearchResults" }] : []));
         this.categoryEntityKey = computed(() => {
             const key = this.vm().entityDef.category?.entity;
             if (!key) {
@@ -98,6 +118,9 @@ class AXPEntityCategoryComponent {
             }
             return key;
         }, ...(ngDevMode ? [{ debugName: "categoryEntityKey" }] : []));
+        // protected toggleExpand(e: AXTreeViewNodeDoubleClickEvent) {
+        //   (e.component as AXTreeViewComponent).toggleNodeExpansion(String(e.node[this.valueField()] ?? ''));
+        // }
         //#endregion
         //#region ----   Tree Data Source   ----
         /**
@@ -105,6 +128,7 @@ class AXPEntityCategoryComponent {
          * Provides lazy loading support for tree nodes.
          */
         this.datasource = async (parentId) => {
+            console.log('datasource', parentId);
             if (!this.isTreeInitialized()) {
                 return [];
             }
@@ -118,33 +142,388 @@ class AXPEntityCategoryComponent {
         afterNextRender(() => {
             this.initializeTree();
         });
+        this.workflow.events$
+            .pipe(ofType(AXPRefreshEvent))
+            .pipe(takeUntilDestroyed())
+            .subscribe((event) => {
+            this.tree()?.reloadData();
+            // this.tree()?.refresh();
+        });
     }
     //#endregion
     //#region ----   Public Methods   ----
     /**
-     * Handles category search input changes
+     * Handles category search input changes - Uses server-side search for efficiency and reliability
      */
     async handleCategorySearchChange(event) {
         if (!this.isTreeInitialized()) {
             return;
         }
-        this.setLoadingWithDelay(true);
+        const searchTerm = (event.value ?? '').trim().toLowerCase();
+        const previousSearchTerm = this.currentSearchValue();
+        // If search is cleared, reset tree
+        if (!searchTerm) {
+            if (previousSearchTerm || this.matchingNodeIds.size > 0) {
+                this.currentSearchValue.set('');
+                this.currentSearchTerm = null;
+                await this.resetSearch();
+            }
+            return;
+        }
+        // For non-empty search, only process user interactions
+        if (!event.isUserInteraction) {
+            return;
+        }
+        // Prevent concurrent searches
+        if (this.isSearching() && this.currentSearchTerm !== null) {
+            if (this.currentSearchTerm === searchTerm) {
+                return;
+            }
+        }
+        this.currentSearchValue.set(event.value ?? '');
+        this.currentSearchTerm = searchTerm;
+        const treeComponent = this.tree();
+        if (!treeComponent) {
+            return;
+        }
+        // Store expanded nodes before starting a new search (only on first search)
+        if (!previousSearchTerm && this.expandedNodesBeforeSearch.length === 0) {
+            const expandedNodes = treeComponent.getExpandedNodes();
+            this.expandedNodesBeforeSearch = expandedNodes
+                .map((node) => String(node['id'] ?? ''))
+                .filter((id) => id && id !== ROOT_NODE_ID);
+        }
+        // Collapse nodes from previous search before starting new search
+        if (previousSearchTerm && this.nodesExpandedDuringSearch.length > 0) {
+            const nodesToCollapse = [...this.nodesExpandedDuringSearch].reverse();
+            this.nodesExpandedDuringSearch = [];
+            for (const nodeId of nodesToCollapse) {
+                // Only collapse if it wasn't originally expanded before search
+                if (!this.expandedNodesBeforeSearch.includes(nodeId)) {
+                    try {
+                        treeComponent.collapseNode(nodeId);
+                    }
+                    catch {
+                        // Node might not exist anymore, ignore
+                    }
+                }
+            }
+        }
+        this.isSearching.set(true);
         try {
-            const items = await this.categoryTreeService.searchCategories(event.value, this.treeData, this.treeConfig);
-            if (!items) {
-                this.clearLoadingState();
+            // Step 1: Use server-side search to get matching items
+            const searchResults = await this.categoryTreeService.searchCategories(searchTerm, this.treeData, this.treeConfig);
+            // Check if search term changed during the API call
+            if (this.currentSearchTerm !== searchTerm) {
+                return;
+            }
+            if (!searchResults || searchResults.length === 0) {
+                this.matchingNodeIds.clear();
+                this.searchResultCount.set(0);
+                await this.updateTranslatedMessages(0);
                 return;
             }
-            this.searchResults = items;
-            this.refreshTree();
+            // Store matching node IDs from search results
+            this.matchingNodeIds.clear();
+            const valueField = this.valueField();
+            searchResults.forEach((item) => {
+                const nodeId = String(item[valueField] ?? '');
+                if (nodeId) {
+                    this.matchingNodeIds.add(nodeId);
+                }
+            });
+            const resultCount = searchResults.length;
+            this.searchResultCount.set(resultCount);
+            // Update translated messages
+            await this.updateTranslatedMessages(resultCount);
+            // Step 2: Collect parent IDs (builds relevantNodeIds for filtering)
+            const parentsToExpand = await this.collectParentIds(searchResults);
+            // Step 2.5: Collect children IDs if searchWithChildren is enabled
+            if (this.searchWithChildren()) {
+                await this.collectChildrenIds(searchResults);
+            }
+            // Step 3: Reload tree to apply filtering
+            await treeComponent.reloadData();
+            // Step 4: Expand root node
+            if (!treeComponent.isNodeExpanded(ROOT_NODE_ID)) {
+                try {
+                    await treeComponent.expandNode(ROOT_NODE_ID);
+                    this.nodesExpandedDuringSearch.push(ROOT_NODE_ID);
+                }
+                catch {
+                    // Root might not exist
+                }
+            }
+            // Step 4: Expand all parent nodes in order (from root to leaves)
+            // Sort parents by their depth to expand in correct order
+            const sortedParents = await this.sortParentsByDepth(Array.from(parentsToExpand));
+            for (const parentId of sortedParents) {
+                // Only expand if not already expanded
+                if (!treeComponent.isNodeExpanded(parentId)) {
+                    try {
+                        await treeComponent.expandNode(parentId);
+                        this.nodesExpandedDuringSearch.push(parentId);
+                        // Small delay to prevent overwhelming the tree component
+                        await new Promise((resolve) => setTimeout(resolve, 10));
+                    }
+                    catch {
+                        // Node might not exist, ignore
+                    }
+                }
+            }
         }
         catch (error) {
             console.error('Error searching categories:', error);
+            this.matchingNodeIds.clear();
+            this.searchResultCount.set(0);
         }
         finally {
-            this.clearLoadingState();
+            if (this.currentSearchTerm === searchTerm) {
+                this.currentSearchTerm = null;
+            }
+            this.isSearching.set(false);
         }
     }
+    /**
+     * Collects all parent IDs for the given search results
+     * Handles both nested 'parent' object and 'parentId' field in search results
+     * Recursively fetches parent nodes to build the full parent chain
+     */
+    async collectParentIds(items) {
+        const parentsToExpand = new Set();
+        const valueField = this.valueField();
+        const parentKey = this.treeData?.categoryEntityDef?.parentKey || 'parentId';
+        // Build relevantNodeIds = matching nodes + all parents
+        this.relevantNodeIds.clear();
+        this.matchingNodeIds.forEach((id) => this.relevantNodeIds.add(id));
+        // Recursively extract all parent IDs
+        const extractParentIds = async (item) => {
+            // First, try to get parent from nested 'parent' object (if available)
+            const parent = item['parent'];
+            if (parent) {
+                const parentId = String(parent[valueField] ?? parent['id'] ?? '');
+                if (parentId && parentId !== ROOT_NODE_ID) {
+                    parentsToExpand.add(parentId);
+                    this.relevantNodeIds.add(parentId); // Add to filter set
+                    this.nodeDataCache.set(parentId, parent);
+                    await extractParentIds(parent);
+                }
+            }
+            else {
+                // Fallback: use parentId field and fetch parent from server
+                // Try both parentKey from entity definition and common 'parentId' field
+                const parentIdValue = item[parentKey] ?? item['parentId'];
+                if (parentIdValue) {
+                    const parentId = String(parentIdValue);
+                    if (parentId && parentId !== ROOT_NODE_ID) {
+                        // Add to sets first
+                        parentsToExpand.add(parentId);
+                        this.relevantNodeIds.add(parentId);
+                        // Fetch parent from server if not already cached
+                        if (!this.nodeDataCache.has(parentId)) {
+                            const parentItem = await this.fetchItemById(parentId);
+                            if (parentItem) {
+                                this.nodeDataCache.set(parentId, parentItem);
+                                // Recursively fetch parent's parent
+                                await extractParentIds(parentItem);
+                            }
+                        }
+                        else {
+                            // Parent already in cache, recursively process it
+                            const cachedParent = this.nodeDataCache.get(parentId);
+                            if (cachedParent) {
+                                await extractParentIds(cachedParent);
+                            }
+                        }
+                    }
+                }
+            }
+        };
+        // Process all items
+        for (const item of items) {
+            await extractParentIds(item);
+        }
+        return parentsToExpand;
+    }
+    /**
+     * Collects children IDs for matching search results recursively
+     * Adds all descendants (children, grandchildren, etc.) to relevantNodeIds so they appear in the filtered tree
+     */
+    async collectChildrenIds(items) {
+        if (!this.treeData?.categoryEntityQueryFunc || !this.treeConfig) {
+            return;
+        }
+        const valueField = this.valueField();
+        const parentKey = this.treeData.categoryEntityDef?.parentKey;
+        if (!parentKey) {
+            return;
+        }
+        // For each matching node, recursively fetch all its descendants
+        for (const item of items) {
+            const nodeId = String(item[valueField] ?? '');
+            if (!nodeId || nodeId === ROOT_NODE_ID) {
+                continue;
+            }
+            await this.collectChildrenRecursively(nodeId, valueField, parentKey);
+        }
+    }
+    /**
+     * Recursively collects all descendant IDs for a given node
+     */
+    async collectChildrenRecursively(nodeId, valueField, parentKey) {
+        if (!this.treeData?.categoryEntityQueryFunc) {
+            return;
+        }
+        try {
+            // Fetch children for this node
+            const event = {
+                ...this.treeData.basicQueryEvent,
+                filter: {
+                    field: parentKey,
+                    value: nodeId,
+                    operator: { type: 'equal' },
+                },
+            };
+            const res = await this.treeData.categoryEntityQueryFunc(event);
+            if (res?.items && res.items.length > 0) {
+                // Add children IDs to relevantNodeIds so they appear in filtered tree
+                for (const child of res.items) {
+                    const childId = String(child[valueField] ?? '');
+                    if (childId && childId !== ROOT_NODE_ID) {
+                        this.relevantNodeIds.add(childId);
+                        // Cache child data
+                        this.nodeDataCache.set(childId, child);
+                        // Recursively fetch children of this child
+                        await this.collectChildrenRecursively(childId, valueField, parentKey);
+                    }
+                }
+            }
+        }
+        catch (error) {
+            console.error(`Error fetching children for node ${nodeId}:`, error);
+        }
+    }
+    /**
+     * Fetches a single item by ID from the server
+     */
+    async fetchItemById(id) {
+        if (!this.treeData?.categoryEntityQueryFunc) {
+            return null;
+        }
+        try {
+            const valueField = this.valueField();
+            const event = {
+                ...this.treeData.basicQueryEvent,
+                filter: {
+                    field: valueField,
+                    value: id,
+                    operator: { type: 'equal' },
+                },
+            };
+            const res = await this.treeData.categoryEntityQueryFunc(event);
+            return res?.items?.[0] ?? null;
+        }
+        catch (error) {
+            console.error('Error fetching item by ID:', error);
+            return null;
+        }
+    }
+    /**
+     * Sorts parent IDs by their depth (root first, leaves last)
+     * Uses cached data from collectParentIds
+     */
+    async sortParentsByDepth(parentIds) {
+        const parentKey = this.treeData?.categoryEntityDef?.parentKey;
+        if (!parentKey || parentIds.length === 0) {
+            return parentIds;
+        }
+        // Build depth map using cached data
+        const depthMap = new Map();
+        for (const parentId of parentIds) {
+            if (depthMap.has(parentId)) {
+                continue;
+            }
+            let depth = 0;
+            let currentId = parentId;
+            const visited = new Set();
+            while (currentId && currentId !== ROOT_NODE_ID && !visited.has(currentId)) {
+                visited.add(currentId);
+                depth++;
+                // Use nodeDataCache which was populated by collectParentIds
+                const item = this.nodeDataCache.get(currentId);
+                if (item) {
+                    currentId = item[parentKey] ? String(item[parentKey]) : null;
+                }
+                else {
+                    break;
+                }
+            }
+            depthMap.set(parentId, depth);
+        }
+        // Sort by depth (lower depth = closer to root = expand first)
+        return parentIds.sort((a, b) => {
+            const depthA = depthMap.get(a) ?? 0;
+            const depthB = depthMap.get(b) ?? 0;
+            return depthA - depthB;
+        });
+    }
+    /**
+     * Updates translated messages for search results
+     */
+    async updateTranslatedMessages(resultCount) {
+        if (resultCount > 0) {
+            const key = resultCount === 1
+                ? '@general:terms.interface.category.search.results-found.singular'
+                : '@general:terms.interface.category.search.results-found.plural';
+            const text = await this.translate.translateAsync(key, { params: { count: resultCount } });
+            this.resultsFoundText.set(text);
+        }
+        else {
+            this.resultsFoundText.set('');
+        }
+    }
+    /**
+     * Resets search state and restores tree to original expanded state
+     */
+    async resetSearch() {
+        this.searchResultCount.set(0);
+        this.resultsFoundText.set('');
+        this.currentSearchTerm = null;
+        this.isSearching.set(false);
+        this.matchingNodeIds.clear();
+        this.relevantNodeIds.clear();
+        this.nodeDataCache.clear();
+        const treeComponent = this.tree();
+        if (!treeComponent) {
+            this.expandedNodesBeforeSearch = [];
+            this.nodesExpandedDuringSearch = [];
+            return;
+        }
+        // Reload tree to show all nodes (no filtering)
+        await treeComponent.reloadData();
+        // Collapse nodes that were expanded during search (in reverse order - leaves first)
+        const nodesToCollapse = [...this.nodesExpandedDuringSearch].reverse();
+        this.nodesExpandedDuringSearch = [];
+        for (const nodeId of nodesToCollapse) {
+            // Only collapse if it wasn't originally expanded before search
+            if (!this.expandedNodesBeforeSearch.includes(nodeId)) {
+                try {
+                    treeComponent.collapseNode(nodeId);
+                }
+                catch {
+                    // Node might not exist anymore, ignore
+                }
+            }
+        }
+        // Clear the stored expanded nodes
+        this.expandedNodesBeforeSearch = [];
+    }
+    /**
+     * Checks if a node matches the current search term
+     */
+    isMatchingNode(nodeId) {
+        return this.matchingNodeIds.has(nodeId);
+    }
     /**
      * Handles node click events to apply category filters
      */
@@ -245,7 +624,6 @@ class AXPEntityCategoryComponent {
             if (this.treeData.categoryEntityDef?.parentKey) {
                 this.treeConfig.parentKey = this.treeData.categoryEntityDef.parentKey;
             }
-            this.searchResults = null;
         }
         catch (error) {
             console.error('Error loading categories:', error);
@@ -261,17 +639,20 @@ class AXPEntityCategoryComponent {
         if (!this.isTreeInitialized()) {
             return [];
         }
-        // Use search results if available
-        if (this.searchResults) {
-            const rootNode = await this.categoryTreeService.createRootNode(this.searchResults, this.treeConfig);
-            return [rootNode];
-        }
         // Load root categories
         const items = await this.categoryTreeService.loadRootCategories(this.treeData, this.treeConfig);
         if (!items) {
             return [];
         }
         const rootNode = await this.categoryTreeService.createRootNode(items, this.treeConfig);
+        // Filter root's children when search is active
+        if (this.relevantNodeIds.size > 0 && rootNode['children']) {
+            rootNode['children'] = rootNode['children'].filter((child) => {
+                const childId = String(child['id'] ?? '');
+                return this.relevantNodeIds.has(childId);
+            });
+            rootNode['childrenCount'] = rootNode['children'].length;
+        }
         return [rootNode];
     }
     /**
@@ -281,12 +662,19 @@ class AXPEntityCategoryComponent {
         if (!this.isTreeInitialized()) {
             return [];
         }
+        // Create minimal node object - loadChildren only needs node.id
         const targetNode = {
-            ['id']: parentId,
-            ['title']: '',
-            ['data']: {},
+            id: parentId,
         };
-        return await this.categoryTreeService.loadChildren(targetNode, this.treeData, this.treeConfig);
+        let children = await this.categoryTreeService.loadChildren(targetNode, this.treeData, this.treeConfig);
+        // Filter children when search is active
+        if (this.relevantNodeIds.size > 0) {
+            children = children.filter((child) => {
+                const childId = String(child['id'] ?? '');
+                return this.relevantNodeIds.has(childId);
+            });
+        }
+        return children;
     }
     /**
      * Refreshes the tree view component
@@ -301,7 +689,6 @@ class AXPEntityCategoryComponent {
      * Refreshes tree after CRUD operations
      */
     async refreshAfterChange(parentId) {
-        this.searchResults = null;
         this.refreshTree();
     }
     /**
@@ -367,6 +754,41 @@ class AXPEntityCategoryComponent {
             await this.refreshNodeParent(entityData);
             return;
         }
+        // Check if parent changed
+        const parentKey = this.treeData?.categoryEntityDef?.parentKey;
+        let newParentId = undefined;
+        if (parentKey && entityData[parentKey]) {
+            const parentValue = String(entityData[parentKey]);
+            // 'all' means root, so treat it as undefined
+            newParentId = parentValue !== 'all' && parentValue !== '' ? parentValue : undefined;
+        }
+        const currentParent = treeComponent.getParent(nodeId);
+        const currentParentId = currentParent ? String(currentParent['id'] ?? '') : undefined;
+        // Normalize current parent: 'all' means root (undefined)
+        const normalizedCurrentParentId = currentParentId === 'all' || currentParentId === '' ? undefined : currentParentId;
+        // Handle parent change: move node to new parent if parent changed
+        if (newParentId !== normalizedCurrentParentId) {
+            // If parent changed, move the node first
+            const moved = treeComponent.moveNode(nodeId, newParentId);
+            if (!moved) {
+                // If move failed, refresh the tree to ensure consistency
+                await this.refreshNodeParent(entityData);
+                return;
+            }
+            // After moving, we need to ensure the new parent is expanded
+            if (newParentId) {
+                if (!treeComponent.isNodeExpanded(newParentId)) {
+                    await treeComponent.expandNode(newParentId);
+                }
+            }
+            else {
+                // Moving to root - ensure root is expanded
+                if (!treeComponent.isNodeExpanded(ROOT_NODE_ID)) {
+                    await treeComponent.expandNode(ROOT_NODE_ID);
+                }
+            }
+        }
+        // Update node properties (title, data, etc.)
         const updatedNode = this.categoryTreeService.convertToTreeNode(entityData, this.treeConfig);
         const updates = {
             ['title']: updatedNode['title'],
@@ -563,7 +985,7 @@ class AXPEntityCategoryComponent {
         this.isLoading.set(false);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPEntityCategoryComponent, isStandalone: true, selector: "axp-entity-category", inputs: { vm: { classPropertyName: "vm", publicName: "vm", isSignal: true, isRequired: true, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, showCheckbox: { classPropertyName: "showCheckbox", publicName: "showCheckbox", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showChildrenBadge: { classPropertyName: "showChildrenBadge", publicName: "showChildrenBadge", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, collapsedIcon: { classPropertyName: "collapsedIcon", publicName: "collapsedIcon", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-header>\n  <axp-layout-title>{{\n    vm().entityDef.category?.title || '@general:terms.classification.category' | translate | async\n  }}</axp-layout-title>\n  <axp-layout-toolbar>\n    <ax-search-box\n      (onValueChanged)=\"handleCategorySearchChange($event)\"\n      [delayTime]=\"300\"\n      [placeholder]=\"'@general:terms.interface.category.search.placeholder' | translate | async\"\n    >\n    </ax-search-box>\n  </axp-layout-toolbar>\n</axp-layout-header>\n<axp-layout-content>\n  @if (isLoading()) {\n    <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\">\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    </div>\n  } @else if (treeData) {\n    <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\">\n      <ax-tree-view\n        [datasource]=\"datasource\"\n        [selectMode]=\"selectMode()\"\n        [showCheckbox]=\"showCheckbox()\"\n        [selectionBehavior]=\"selectionBehavior()\"\n        [dragArea]=\"dragArea()\"\n        [dragBehavior]=\"dragBehavior()\"\n        [showIcons]=\"showIcons()\"\n        [showChildrenBadge]=\"showChildrenBadge()\"\n        [expandedIcon]=\"expandedIcon()\"\n        [collapsedIcon]=\"collapsedIcon()\"\n        [indentSize]=\"indentSize()\"\n        [look]=\"look()\"\n        [titleField]=\"textField()\"\n        [idField]=\"valueField()\"\n        [nodeTemplate]=\"itemTemplate\"\n        (onNodeToggle)=\"onNodeToggle($event)\"\n        #tree\n      >\n      </ax-tree-view>\n    </div>\n  } @else {\n    <axp-state-message\n      icon=\"fa-light fa-folder-open\"\n      [title]=\"'@general:terms.interface.category.search.no-records.title'\"\n      [description]=\"'@general:terms.interface.category.search.no-records.description'\"\n    >\n      <ax-button\n        slot=\"actions\"\n        (onClick)=\"handleCreateRootClick($event)\"\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'@general:actions.add-new.title' | translate | async\"\n      >\n        <ax-icon class=\"fas fa-plus\"></ax-icon>\n      </ax-button>\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n    @let item = node.data || node;\n    @let textField = vm().entityDef.category?.textField || 'title';\n    @let valueField = vm().entityDef.category?.valueField || 'id';\n    @let itemId = item[valueField] || node.id;\n    @let itemTitle = item[textField] || node.title;\n    <div\n      class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\"\n      (click)=\"handleNodeClick(node)\"\n    >\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon\n          class=\"fas fa-folder\"\n          [style.color]=\"item.color ?? 'rgba(var(--ax-sys-color-warning-500), 1)'\"\n        ></ax-icon>\n        <span class=\"ax-truncate\">{{ itemTitle }}</span>\n      </div>\n      @if (itemId && itemId !== 'all') {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n            <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                <ax-button-item\n                  (onClick)=\"handleCreateChildClick(node, $event)\"\n                  look=\"blank\"\n                  color=\"default\"\n                  text=\"Add New Child\"\n                >\n                  <ax-icon class=\"fas fa-plus\"></ax-icon>\n                </ax-button-item>\n                <ax-button-item (onClick)=\"handleEditNodeClick(node, $event)\" look=\"blank\" text=\"Edit\">\n                  <ax-icon class=\"fas fa-pen\"></ax-icon>\n                </ax-button-item>\n                <ax-button-item\n                  (onClick)=\"handleDeleteNodeClick(node, $event)\"\n                  color=\"danger\"\n                  look=\"blank\"\n                  text=\"Delete\"\n                >\n                  <ax-icon class=\"fas fa-trash\"></ax-icon>\n                </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        </div>\n      } @else if (itemId === 'all') {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"fas fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewModule }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "showCheckbox", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField"], outputs: ["datasourceChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.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: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { 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: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPEntityCategoryComponent, isStandalone: true, selector: "axp-entity-category", inputs: { vm: { classPropertyName: "vm", publicName: "vm", isSignal: true, isRequired: true, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showChildrenBadge: { classPropertyName: "showChildrenBadge", publicName: "showChildrenBadge", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, collapsedIcon: { classPropertyName: "collapsedIcon", publicName: "collapsedIcon", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, searchWithChildren: { classPropertyName: "searchWithChildren", publicName: "searchWithChildren", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-header>\n  <axp-layout-title>{{\n    vm().entityDef.category?.title || '@general:terms.classification.category' | translate | async\n  }}</axp-layout-title>\n  <axp-layout-toolbar>\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-w-full\">\n      <ax-search-box\n        (onValueChanged)=\"handleCategorySearchChange($event)\"\n        [delayTime]=\"300\"\n        [placeholder]=\"'@general:terms.interface.category.search.placeholder' | translate | async\"\n      >\n      </ax-search-box>\n      @if (isSearching() && currentSearchValue().trim()) {\n        <div class=\"ax-text-xs ax-text-muted ax-flex ax-items-center ax-gap-1\">\n          <span>{{ '@general:terms.interface.category.search.searching' | translate | async }}</span>\n        </div>\n      } @else if (currentSearchValue().trim() && !isSearching()) {\n        <div class=\"ax-text-xs ax-text-muted ax-flex ax-items-center ax-gap-1\">\n          @if (searchResultCount() > 0) {\n            <span>{{ resultsFoundText() }}</span>\n          } @else {\n            <span>{{ '@general:terms.interface.category.search.no-results' | translate | async }}</span>\n          }\n        </div>\n      }\n    </div>\n  </axp-layout-toolbar>\n</axp-layout-header>\n<axp-layout-content>\n  @if (isLoading()) {\n    <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\">\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    </div>\n  } @else if (showNoSearchResults()) {\n    <axp-state-message\n      icon=\"fa-light fa-search\"\n      [title]=\"'@general:terms.interface.category.search.no-results-found.title'\"\n      [description]=\"'@general:terms.interface.category.search.no-results-found.description'\"\n    >\n    </axp-state-message>\n  } @else if (treeData) {\n    <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\">\n      <ax-tree-view\n        [datasource]=\"datasource\"\n        [selectMode]=\"selectMode()\"\n        [selectionBehavior]=\"selectionBehavior()\"\n        [dragArea]=\"dragArea()\"\n        [dragBehavior]=\"dragBehavior()\"\n        [showIcons]=\"showIcons()\"\n        [showChildrenBadge]=\"showChildrenBadge()\"\n        [expandedIcon]=\"expandedIcon()\"\n        [collapsedIcon]=\"collapsedIcon()\"\n        [indentSize]=\"indentSize()\"\n        [look]=\"look()\"\n        [titleField]=\"textField()\"\n        [idField]=\"valueField()\"\n        [expandOnDoubleClick]=\"true\"\n        [nodeTemplate]=\"itemTemplate\"\n        (onNodeToggle)=\"onNodeToggle($event)\"\n        (onNodeClick)=\"handleNodeClick($event.node)\"\n        #tree\n      >\n      </ax-tree-view>\n    </div>\n  } @else {\n    <axp-state-message\n      icon=\"fa-light fa-folder-open\"\n      [title]=\"'@general:terms.interface.category.search.no-records.title'\"\n      [description]=\"'@general:terms.interface.category.search.no-records.description'\"\n    >\n      <ax-button\n        slot=\"actions\"\n        (onClick)=\"handleCreateRootClick($event)\"\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'@general:actions.add-new.title' | translate | async\"\n      >\n        <ax-icon class=\"fas fa-plus\"></ax-icon>\n      </ax-button>\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n    @let item = node.data || node;\n    @let textField = vm().entityDef.category?.textField || 'title';\n    @let valueField = vm().entityDef.category?.valueField || 'id';\n    @let itemId = item[valueField] || node.id;\n    @let itemTitle = item[textField] || node.title;\n    @let isMatch = isMatchingNode(node.id);\n    <div\n      class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden ax-py-1\"\n      [class.ax-bg-secondary-100]=\"isMatch\"\n      [class.ax-rounded]=\"isMatch\"\n      [class.ax-px-2]=\"isMatch\"\n    >\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon\n          class=\"fas fa-folder\"\n          [style.color]=\"item.color ?? 'rgba(var(--ax-sys-color-warning-500), 1)'\"\n        ></ax-icon>\n        <span class=\"ax-truncate\" [class.ax-font-semibold]=\"isMatch\">{{ itemTitle }}</span>\n      </div>\n      @if (itemId && itemId !== 'all') {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n            <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                <ax-button-item\n                  (onClick)=\"handleCreateChildClick(node, $event)\"\n                  look=\"blank\"\n                  color=\"default\"\n                  text=\"Add New Child\"\n                >\n                  <ax-icon class=\"fas fa-plus\"></ax-icon>\n                </ax-button-item>\n                <ax-button-item (onClick)=\"handleEditNodeClick(node, $event)\" look=\"blank\" text=\"Edit\">\n                  <ax-icon class=\"fas fa-pen\"></ax-icon>\n                </ax-button-item>\n                <ax-button-item\n                  (onClick)=\"handleDeleteNodeClick(node, $event)\"\n                  color=\"danger\"\n                  look=\"blank\"\n                  text=\"Delete\"\n                >\n                  <ax-icon class=\"fas fa-trash\"></ax-icon>\n                </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        </div>\n      } @else if (itemId === 'all') {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"fas fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewModule }, { 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: AXSkeletonModule }, { kind: "component", type: i2$1.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.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: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { 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: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryComponent, decorators: [{
             type: Component,
@@ -581,8 +1003,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         AXButtonModule,
                         AXDropdownModule,
                         AXPStateMessageComponent,
-                    ], template: "<axp-layout-header>\n  <axp-layout-title>{{\n    vm().entityDef.category?.title || '@general:terms.classification.category' | translate | async\n  }}</axp-layout-title>\n  <axp-layout-toolbar>\n    <ax-search-box\n      (onValueChanged)=\"handleCategorySearchChange($event)\"\n      [delayTime]=\"300\"\n      [placeholder]=\"'@general:terms.interface.category.search.placeholder' | translate | async\"\n    >\n    </ax-search-box>\n  </axp-layout-toolbar>\n</axp-layout-header>\n<axp-layout-content>\n  @if (isLoading()) {\n    <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\">\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    </div>\n  } @else if (treeData) {\n    <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\">\n      <ax-tree-view\n        [datasource]=\"datasource\"\n        [selectMode]=\"selectMode()\"\n        [showCheckbox]=\"showCheckbox()\"\n        [selectionBehavior]=\"selectionBehavior()\"\n        [dragArea]=\"dragArea()\"\n        [dragBehavior]=\"dragBehavior()\"\n        [showIcons]=\"showIcons()\"\n        [showChildrenBadge]=\"showChildrenBadge()\"\n        [expandedIcon]=\"expandedIcon()\"\n        [collapsedIcon]=\"collapsedIcon()\"\n        [indentSize]=\"indentSize()\"\n        [look]=\"look()\"\n        [titleField]=\"textField()\"\n        [idField]=\"valueField()\"\n        [nodeTemplate]=\"itemTemplate\"\n        (onNodeToggle)=\"onNodeToggle($event)\"\n        #tree\n      >\n      </ax-tree-view>\n    </div>\n  } @else {\n    <axp-state-message\n      icon=\"fa-light fa-folder-open\"\n      [title]=\"'@general:terms.interface.category.search.no-records.title'\"\n      [description]=\"'@general:terms.interface.category.search.no-records.description'\"\n    >\n      <ax-button\n        slot=\"actions\"\n        (onClick)=\"handleCreateRootClick($event)\"\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'@general:actions.add-new.title' | translate | async\"\n      >\n        <ax-icon class=\"fas fa-plus\"></ax-icon>\n      </ax-button>\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n    @let item = node.data || node;\n    @let textField = vm().entityDef.category?.textField || 'title';\n    @let valueField = vm().entityDef.category?.valueField || 'id';\n    @let itemId = item[valueField] || node.id;\n    @let itemTitle = item[textField] || node.title;\n    <div\n      class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\"\n      (click)=\"handleNodeClick(node)\"\n    >\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon\n          class=\"fas fa-folder\"\n          [style.color]=\"item.color ?? 'rgba(var(--ax-sys-color-warning-500), 1)'\"\n        ></ax-icon>\n        <span class=\"ax-truncate\">{{ itemTitle }}</span>\n      </div>\n      @if (itemId && itemId !== 'all') {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n            <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                <ax-button-item\n                  (onClick)=\"handleCreateChildClick(node, $event)\"\n                  look=\"blank\"\n                  color=\"default\"\n                  text=\"Add New Child\"\n                >\n                  <ax-icon class=\"fas fa-plus\"></ax-icon>\n                </ax-button-item>\n                <ax-button-item (onClick)=\"handleEditNodeClick(node, $event)\" look=\"blank\" text=\"Edit\">\n                  <ax-icon class=\"fas fa-pen\"></ax-icon>\n                </ax-button-item>\n                <ax-button-item\n                  (onClick)=\"handleDeleteNodeClick(node, $event)\"\n                  color=\"danger\"\n                  look=\"blank\"\n                  text=\"Delete\"\n                >\n                  <ax-icon class=\"fas fa-trash\"></ax-icon>\n                </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        </div>\n      } @else if (itemId === 'all') {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"fas fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>\n" }]
-        }], ctorParameters: () => [], propDecorators: { vm: [{ type: i0.Input, args: [{ isSignal: true, alias: "vm", required: true }] }], tree: [{ type: i0.ViewChild, args: ['tree', { isSignal: true }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], showCheckbox: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCheckbox", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], dragArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragArea", required: false }] }], dragBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragBehavior", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], showChildrenBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChildrenBadge", required: false }] }], expandedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIcon", required: false }] }], collapsedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedIcon", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }] } });
+                    ], template: "<axp-layout-header>\n  <axp-layout-title>{{\n    vm().entityDef.category?.title || '@general:terms.classification.category' | translate | async\n  }}</axp-layout-title>\n  <axp-layout-toolbar>\n    <div class=\"ax-flex ax-flex-col ax-gap-1 ax-w-full\">\n      <ax-search-box\n        (onValueChanged)=\"handleCategorySearchChange($event)\"\n        [delayTime]=\"300\"\n        [placeholder]=\"'@general:terms.interface.category.search.placeholder' | translate | async\"\n      >\n      </ax-search-box>\n      @if (isSearching() && currentSearchValue().trim()) {\n        <div class=\"ax-text-xs ax-text-muted ax-flex ax-items-center ax-gap-1\">\n          <span>{{ '@general:terms.interface.category.search.searching' | translate | async }}</span>\n        </div>\n      } @else if (currentSearchValue().trim() && !isSearching()) {\n        <div class=\"ax-text-xs ax-text-muted ax-flex ax-items-center ax-gap-1\">\n          @if (searchResultCount() > 0) {\n            <span>{{ resultsFoundText() }}</span>\n          } @else {\n            <span>{{ '@general:terms.interface.category.search.no-results' | translate | async }}</span>\n          }\n        </div>\n      }\n    </div>\n  </axp-layout-toolbar>\n</axp-layout-header>\n<axp-layout-content>\n  @if (isLoading()) {\n    <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\">\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n      <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n    </div>\n  } @else if (showNoSearchResults()) {\n    <axp-state-message\n      icon=\"fa-light fa-search\"\n      [title]=\"'@general:terms.interface.category.search.no-results-found.title'\"\n      [description]=\"'@general:terms.interface.category.search.no-results-found.description'\"\n    >\n    </axp-state-message>\n  } @else if (treeData) {\n    <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\">\n      <ax-tree-view\n        [datasource]=\"datasource\"\n        [selectMode]=\"selectMode()\"\n        [selectionBehavior]=\"selectionBehavior()\"\n        [dragArea]=\"dragArea()\"\n        [dragBehavior]=\"dragBehavior()\"\n        [showIcons]=\"showIcons()\"\n        [showChildrenBadge]=\"showChildrenBadge()\"\n        [expandedIcon]=\"expandedIcon()\"\n        [collapsedIcon]=\"collapsedIcon()\"\n        [indentSize]=\"indentSize()\"\n        [look]=\"look()\"\n        [titleField]=\"textField()\"\n        [idField]=\"valueField()\"\n        [expandOnDoubleClick]=\"true\"\n        [nodeTemplate]=\"itemTemplate\"\n        (onNodeToggle)=\"onNodeToggle($event)\"\n        (onNodeClick)=\"handleNodeClick($event.node)\"\n        #tree\n      >\n      </ax-tree-view>\n    </div>\n  } @else {\n    <axp-state-message\n      icon=\"fa-light fa-folder-open\"\n      [title]=\"'@general:terms.interface.category.search.no-records.title'\"\n      [description]=\"'@general:terms.interface.category.search.no-records.description'\"\n    >\n      <ax-button\n        slot=\"actions\"\n        (onClick)=\"handleCreateRootClick($event)\"\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'@general:actions.add-new.title' | translate | async\"\n      >\n        <ax-icon class=\"fas fa-plus\"></ax-icon>\n      </ax-button>\n    </axp-state-message>\n  }\n\n  <ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n    @let item = node.data || node;\n    @let textField = vm().entityDef.category?.textField || 'title';\n    @let valueField = vm().entityDef.category?.valueField || 'id';\n    @let itemId = item[valueField] || node.id;\n    @let itemTitle = item[textField] || node.title;\n    @let isMatch = isMatchingNode(node.id);\n    <div\n      class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden ax-py-1\"\n      [class.ax-bg-secondary-100]=\"isMatch\"\n      [class.ax-rounded]=\"isMatch\"\n      [class.ax-px-2]=\"isMatch\"\n    >\n      <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n        <ax-icon\n          class=\"fas fa-folder\"\n          [style.color]=\"item.color ?? 'rgba(var(--ax-sys-color-warning-500), 1)'\"\n        ></ax-icon>\n        <span class=\"ax-truncate\" [class.ax-font-semibold]=\"isMatch\">{{ itemTitle }}</span>\n      </div>\n      @if (itemId && itemId !== 'all') {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n            <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n            <ax-dropdown-panel>\n              <ax-button-item-list>\n                <ax-button-item\n                  (onClick)=\"handleCreateChildClick(node, $event)\"\n                  look=\"blank\"\n                  color=\"default\"\n                  text=\"Add New Child\"\n                >\n                  <ax-icon class=\"fas fa-plus\"></ax-icon>\n                </ax-button-item>\n                <ax-button-item (onClick)=\"handleEditNodeClick(node, $event)\" look=\"blank\" text=\"Edit\">\n                  <ax-icon class=\"fas fa-pen\"></ax-icon>\n                </ax-button-item>\n                <ax-button-item\n                  (onClick)=\"handleDeleteNodeClick(node, $event)\"\n                  color=\"danger\"\n                  look=\"blank\"\n                  text=\"Delete\"\n                >\n                  <ax-icon class=\"fas fa-trash\"></ax-icon>\n                </ax-button-item>\n              </ax-button-item-list>\n            </ax-dropdown-panel>\n          </ax-button>\n        </div>\n      } @else if (itemId === 'all') {\n        <div class=\"ax-flex ax-items-center ax-gap-1\">\n          <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n            <ax-icon class=\"fas fa-plus\"></ax-icon>\n          </ax-button>\n        </div>\n      }\n    </div>\n  </ng-template>\n</axp-layout-content>\n" }]
+        }], ctorParameters: () => [], propDecorators: { vm: [{ type: i0.Input, args: [{ isSignal: true, alias: "vm", required: true }] }], tree: [{ type: i0.ViewChild, args: ['tree', { isSignal: true }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], dragArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragArea", required: false }] }], dragBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragBehavior", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], showChildrenBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChildrenBadge", required: false }] }], expandedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIcon", required: false }] }], collapsedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedIcon", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], searchWithChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchWithChildren", required: false }] }] } });
 
 class AXPEntityMasterToolbarViewComponent {
     constructor() {
@@ -1044,13 +1466,13 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
                 provide: AXPPageLayoutBase,
                 useExisting: AXPEntityMasterListViewComponent,
             },
-        ], viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  @if (vm.entityDef.category) {\n    <axp-layout-start-side id=\"axp-entity-category-drawer\">\n      <axp-entity-category\n        id=\"axp-entity-category\"\n        class=\"ax-w-80\"\n        [vm]=\"vm\"\n        [searchValue]=\"categorySearchValue()\"\n      ></axp-entity-category>\n    </axp-layout-start-side>\n  }\n  <axp-page-toolbar id=\"axp-entity-toolbar\">\n    <axp-entity-master-toolbar-view [viewModel]=\"vm\"></axp-entity-master-toolbar-view>\n  </axp-page-toolbar>\n  <axp-page-content class=\"ax-overflow-auto ax-pt-0\">\n    <div\n      class=\"ax-flex ax-items-center ax-justify-between ax-gap-1 ax-pb-1\"\n      [class.ax-invisible]=\"!grid.selectedRows.length\"\n    >\n      <span\n        >{{ grid.selectedRows.length }}\n        <span>{{ '@general:terms.interface.items-selected' | translate | async }}</span>\n      </span>\n      <ax-button text=\"@general:terms.interface.unselect-all\" class=\"ax-xs\" (onClick)=\"handleUnselectAll()\"></ax-button>\n    </div>\n    <ax-data-table\n      id=\"axp-entity-table\"\n      [allowReordering]=\"true\"\n      (onColumnsOrderChanged)=\"onColumnsOrderChanged($event)\"\n      #grid\n      [showFooter]=\"false\"\n      class=\"ax-flex-1\"\n      [paging]=\"true\"\n      [fetchDataMode]=\"'manual'\"\n      [parentField]=\"vm.parentKey()\"\n      [loading]=\"{ enabled: true, animation: true }\"\n      [dataSource]=\"vm.dataSource\"\n      (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n      (onRowDbClick)=\"handleRowDbClick($event)\"\n      (onColumnSizeChanged)=\"onColumnSizeChanged($event)\"\n      (onPageChanged)=\"onPageChanged($event)\"\n    >\n      @if (vm.view().indexCol === true) {\n        <ax-index-column id=\"axp-table-col-index\" fixed=\"start\" [width]=\"'80px'\" [padZero]=\"true\"></ax-index-column>\n      }\n      @if (vm.selectedScopeActionsCount()) {\n        <ax-select-column id=\"axp-table-col-select\" fixed=\"start\" [width]=\"'60px'\"></ax-select-column>\n      }\n      @for (col of vm.columns(); track col.name) {\n        @if (col.visible) {\n          <axp-widget-column-renderer\n            [attr.id]=\"'axp-table-col-' + col.name\"\n            [expandHandler]=\"$index === 0 && vm.parentKey() ? true : false\"\n            [caption]=\"(col.title | translate | async)!\"\n            [node]=\"col.node()\"\n            [customWidth]=\"col.width\"\n          ></axp-widget-column-renderer>\n        }\n      }\n      @if (getCommandRowItems().length) {\n        <ax-command-column\n          id=\"axp-table-col-commands\"\n          fixed=\"end\"\n          [width]=\"getCommandRowItems().length * 60 + 'px'\"\n          [items]=\"getCommandRowItems()\"\n          (onItemClick)=\"handleRowCommandClick($event)\"\n        ></ax-command-column>\n      }\n      <ax-dropdown-command-column\n        id=\"axp-table-col-dropdown-commands\"\n        fixed=\"end\"\n        [width]=\"'60px'\"\n        [items]=\"getDropdownRowItems\"\n        (onItemClick)=\"handleRowCommandClick($event)\"\n      ></ax-dropdown-command-column>\n    </ax-data-table>\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axp-entity-master-list axp-layout-start-side{min-width:20rem!important;border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}axp-entity-master-list axp-layout-header{padding-bottom:.25rem!important}.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}.view-drawer{width:85vw}@media (min-width: 768px){.view-drawer{width:45vw}}@media (min-width: 1024px){.view-drawer{width:35vw}}@media (min-width: 1536px){.view-drawer{width:20vw}}.view-drawer{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));border-inline-start-width:1px;border-inline-start-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));border-top-width:1px;--tw-border-opacity: 1;border-top-color:rgba(var(--ax-sys-color-primary-600),var(--tw-border-opacity, 1))}.view-drawer ax-header{display:flex;align-items:center;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1));padding:.5rem 1rem}.view-drawer ax-header h2{font-size:1.25rem;line-height:1.75rem;font-weight:700;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lighter-surface),var(--tw-text-opacity, 1))}.view-drawer ax-footer{position:absolute!important;bottom:0!important;width:100%!important;justify-content:flex-start!important;border-top-width:1px!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))!important;padding:.5rem 1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { 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: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i7.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i7.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i7.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i7.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i7.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i10.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: 
+        ], viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  @if (vm.entityDef.category) {\n    <axp-layout-start-side id=\"axp-entity-category-drawer\">\n      <axp-entity-category\n        id=\"axp-entity-category\"\n        class=\"ax-w-80\"\n        [vm]=\"vm\"\n        [searchValue]=\"categorySearchValue()\"\n      ></axp-entity-category>\n    </axp-layout-start-side>\n  }\n  <axp-page-toolbar id=\"axp-entity-toolbar\">\n    <axp-entity-master-toolbar-view [viewModel]=\"vm\"></axp-entity-master-toolbar-view>\n  </axp-page-toolbar>\n  <axp-page-content class=\"ax-overflow-auto ax-pt-0\">\n    <div\n      class=\"ax-flex ax-items-center ax-justify-between ax-gap-1 ax-pb-1\"\n      [class.ax-invisible]=\"!grid.selectedRows.length\"\n    >\n      <span\n        >{{ grid.selectedRows.length }}\n        <span>{{ '@general:terms.interface.items-selected' | translate | async }}</span>\n      </span>\n      <ax-button text=\"@general:terms.interface.unselect-all\" class=\"ax-xs\" (onClick)=\"handleUnselectAll()\"></ax-button>\n    </div>\n    <ax-data-table\n      id=\"axp-entity-table\"\n      [allowReordering]=\"true\"\n      (onColumnsOrderChanged)=\"onColumnsOrderChanged($event)\"\n      #grid\n      [showFooter]=\"false\"\n      class=\"ax-flex-1\"\n      [paging]=\"true\"\n      [fetchDataMode]=\"'manual'\"\n      [parentField]=\"vm.parentKey()\"\n      [loading]=\"{ enabled: true, animation: true }\"\n      [dataSource]=\"vm.dataSource\"\n      (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n      (onRowDbClick)=\"handleRowDbClick($event)\"\n      (onColumnSizeChanged)=\"onColumnSizeChanged($event)\"\n      (onPageChanged)=\"onPageChanged($event)\"\n    >\n      @if (vm.view().indexCol === true) {\n        <ax-index-column id=\"axp-table-col-index\" fixed=\"start\" [width]=\"'80px'\" [padZero]=\"true\"></ax-index-column>\n      }\n      @if (vm.selectedScopeActionsCount()) {\n        <ax-select-column id=\"axp-table-col-select\" fixed=\"start\" [width]=\"'60px'\"></ax-select-column>\n      }\n      @for (col of vm.columns(); track col.name) {\n        @if (col.visible) {\n          <axp-widget-column-renderer\n            [attr.id]=\"'axp-table-col-' + col.name\"\n            [expandHandler]=\"$index === 0 && vm.parentKey() ? true : false\"\n            [caption]=\"(col.title | translate | async)!\"\n            [node]=\"col.node()\"\n            [customWidth]=\"col.width\"\n          ></axp-widget-column-renderer>\n        }\n      }\n      @if (getCommandRowItems().length) {\n        <ax-command-column\n          id=\"axp-table-col-commands\"\n          fixed=\"end\"\n          [width]=\"getCommandRowItems().length * 60 + 'px'\"\n          [items]=\"getCommandRowItems()\"\n          (onItemClick)=\"handleRowCommandClick($event)\"\n        ></ax-command-column>\n      }\n      <ax-dropdown-command-column\n        id=\"axp-table-col-dropdown-commands\"\n        fixed=\"end\"\n        [width]=\"'60px'\"\n        [items]=\"getDropdownRowItems\"\n        (onItemClick)=\"handleRowCommandClick($event)\"\n      ></ax-dropdown-command-column>\n    </ax-data-table>\n  </axp-page-content>\n</axp-page-layout>\n", styles: ["axp-entity-master-list axp-layout-start-side{min-width:20rem!important;border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}axp-entity-master-list axp-layout-header{padding-bottom:.25rem!important}.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background:rgba(var(--ax-color-on-surface));padding:.5rem;height:max-content!important}.collapsed-search-box{margin-top:0;height:0px;opacity:0}.view-drawer{width:85vw}@media (min-width: 768px){.view-drawer{width:45vw}}@media (min-width: 1024px){.view-drawer{width:35vw}}@media (min-width: 1536px){.view-drawer{width:20vw}}.view-drawer{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));border-inline-start-width:1px;border-inline-start-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));border-top-width:1px;--tw-border-opacity: 1;border-top-color:rgba(var(--ax-sys-color-primary-600),var(--tw-border-opacity, 1))}.view-drawer ax-header{display:flex;align-items:center;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1));padding:.5rem 1rem}.view-drawer ax-header h2{font-size:1.25rem;line-height:1.75rem;font-weight:700;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-on-lighter-surface),var(--tw-text-opacity, 1))}.view-drawer ax-footer{position:absolute!important;bottom:0!important;width:100%!important;justify-content:flex-start!important;border-top-width:1px!important;--tw-border-opacity: 1 !important;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1))!important;padding:.5rem 1rem!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { 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: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXActionSheetModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "ngmodule", type: AXDialogModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i7.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "rowDetailsTemplate", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i7.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i7.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i7.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i7.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i10.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: DragDropModule }, { kind: "ngmodule", type: 
                 //
                 AXPWidgetCoreModule }, { kind: "component", type: i7$1.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { kind: "ngmodule", type: AXPWidgetsModule }, { kind: "ngmodule", type: AXPAuthModule }, { kind: "component", type: 
                 //
                 AXPEntityMasterToolbarViewComponent, selector: "axp-entity-master-toolbar-view", inputs: ["viewModel"] }, { kind: "component", type: 
                 //
-                AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXPEntityCategoryComponent, selector: "axp-entity-category", inputs: ["vm", "searchValue", "selectMode", "showCheckbox", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+                AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXPEntityCategoryComponent, selector: "axp-entity-category", inputs: ["vm", "searchValue", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "searchWithChildren"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityMasterListViewComponent, decorators: [{
             type: Component,
@@ -1097,4 +1519,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
         }], ctorParameters: () => [{ type: i1$1.AXPlatform }], propDecorators: { grid: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
 
 export { AXPEntityMasterListViewComponent };
-//# sourceMappingURL=acorex-platform-themes-default-entity-master-list-view.component-BbACUabi.mjs.map
+//# sourceMappingURL=acorex-platform-themes-default-entity-master-list-view.component-CenhnHXi.mjs.map