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

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

@@ -46,8 +46,15 @@ import { AXPDeviceService } from '@acorex/platform/core';
 import { AXPSettingService, AXPCommonSettings } from '@acorex/platform/common';
 import { isEqual } from 'lodash-es';
 
+//#region ----   Constants   ----
+const ROOT_NODE_ID = 'all';
+const LOADING_DELAY_MS = 300;
+const DEFAULT_TEXT_FIELD = 'title';
+const DEFAULT_VALUE_FIELD = 'id';
+//#endregion
 class AXPEntityCategoryComponent {
     //#endregion
+    //#region ----   Constructor & Lifecycle   ----
     constructor() {
         //#region ----   Services & Dependencies   ----
         this.entityResolver = inject(AXPEntityResolver);
@@ -59,19 +66,31 @@ class AXPEntityCategoryComponent {
         this.vm = input.required(...(ngDevMode ? [{ debugName: "vm" }] : []));
         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.selectionBehavior = input('intermediate', ...(ngDevMode ? [{ debugName: "selectionBehavior" }] : []));
+        this.dragArea = input('handler', ...(ngDevMode ? [{ debugName: "dragArea" }] : [])); //TODO FIX ACOREX
+        this.dragBehavior = input('none', ...(ngDevMode ? [{ debugName: "dragBehavior" }] : []));
+        this.showIcons = input(true, ...(ngDevMode ? [{ debugName: "showIcons" }] : []));
+        this.showChildrenBadge = input(false, ...(ngDevMode ? [{ debugName: "showChildrenBadge" }] : []));
+        this.expandedIcon = input('fa-solid fa-chevron-down', ...(ngDevMode ? [{ debugName: "expandedIcon" }] : []));
+        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" }] : []));
         //#endregion
         //#region ----   Component State   ----
         this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         //#endregion
         //#region ----   Private Properties   ----
         this.loadingTimeoutId = null;
-        this.LOADING_DELAY = 300; // Show skeleton only if loading takes more than 300ms
         this.treeData = null;
         this.treeConfig = null;
         this.searchResults = null;
-        // Computed values for field names to avoid repeated calculations
-        this.textField = computed(() => this.vm().entityDef.category?.textField || 'title', ...(ngDevMode ? [{ debugName: "textField" }] : []));
-        this.valueField = computed(() => this.vm().entityDef.category?.valueField || 'id', ...(ngDevMode ? [{ debugName: "valueField" }] : []));
+        //#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" }] : []));
         this.categoryEntityKey = computed(() => {
             const key = this.vm().entityDef.category?.entity;
             if (!key) {
@@ -79,57 +98,45 @@ class AXPEntityCategoryComponent {
             }
             return key;
         }, ...(ngDevMode ? [{ debugName: "categoryEntityKey" }] : []));
-        //#region ----   Utility Methods   ----
-        /** Datasource callback for tree-view component. */
-        this.datasource = async (id) => {
-            if (!this.treeData || !this.treeConfig) {
+        //#endregion
+        //#region ----   Tree Data Source   ----
+        /**
+         * Datasource callback for tree-view component.
+         * Provides lazy loading support for tree nodes.
+         */
+        this.datasource = async (parentId) => {
+            if (!this.isTreeInitialized()) {
                 return [];
             }
-            // If no id provided, return root nodes (or search results if available)
-            if (!id) {
-                // If we have search results, use them
-                if (this.searchResults) {
-                    const rootNode = await this.categoryTreeService.createRootNode(this.searchResults, this.treeConfig);
-                    return [rootNode];
-                }
-                // Otherwise load root categories
-                const items = await this.categoryTreeService.loadRootCategories(this.treeData, this.treeConfig);
-                if (!items) {
-                    return [];
-                }
-                const rootNode = await this.categoryTreeService.createRootNode(items, this.treeConfig);
-                return [rootNode];
+            // Load root nodes if no parent ID provided
+            if (!parentId) {
+                return await this.loadRootNodes();
             }
-            // Create a minimal node object with just the id (loadChildren only needs node.id)
-            const targetNode = {
-                id,
-                label: '',
-                data: {},
-            };
-            return await this.categoryTreeService.loadChildren(targetNode, this.treeData, this.treeConfig);
+            // Load children for the specified parent
+            return await this.loadChildNodes(parentId);
         };
         afterNextRender(() => {
-            this.getCategories();
+            this.initializeTree();
         });
     }
-    async handleCategorySearchChange(e) {
-        if (!this.treeData || !this.treeConfig) {
+    //#endregion
+    //#region ----   Public Methods   ----
+    /**
+     * Handles category search input changes
+     */
+    async handleCategorySearchChange(event) {
+        if (!this.isTreeInitialized()) {
             return;
         }
         this.setLoadingWithDelay(true);
         try {
-            const items = await this.categoryTreeService.searchCategories(e.value, this.treeData, this.treeConfig);
+            const items = await this.categoryTreeService.searchCategories(event.value, this.treeData, this.treeConfig);
             if (!items) {
                 this.clearLoadingState();
                 return;
             }
-            // Store search results for datasource callback
             this.searchResults = items;
-            // Trigger tree refresh
-            const treeComponent = this.tree();
-            if (treeComponent) {
-                treeComponent.refresh?.();
-            }
+            this.refreshTree();
         }
         catch (error) {
             console.error('Error searching categories:', error);
@@ -138,7 +145,89 @@ class AXPEntityCategoryComponent {
             this.clearLoadingState();
         }
     }
-    async getCategories() {
+    /**
+     * Handles node click events to apply category filters
+     */
+    handleNodeClick(node) {
+        const nodeData = this.extractNodeData(node);
+        const applyConditions = this.vm().entityDef.category?.applyConditions || [];
+        const categoryFilters = this.buildCategoryFilters(nodeData, applyConditions);
+        const viewFilters = this.buildViewFilters();
+        this.vm().dataSource.filter({
+            filters: [...viewFilters, ...categoryFilters],
+            logic: 'and',
+        });
+        this.vm().dataSource.refresh();
+    }
+    /**
+     * Handles node toggle events (expansion/collapse)
+     */
+    async onNodeToggle(_event) {
+        // Tree component handles lazy loading via datasource callback
+    }
+    //#endregion
+    //#region ----   CRUD Operations   ----
+    /**
+     * Creates a new root category node
+     */
+    async handleCreateRootClick(event) {
+        this.preventDefaultAndStopPropagation(event);
+        try {
+            const context = await this.executeCreateWorkflow(undefined);
+            await this.handleCreateResult(context, undefined);
+        }
+        catch (error) {
+            console.error('Error creating root category:', error);
+        }
+    }
+    /**
+     * Creates a new child category under the given parent node
+     */
+    async handleCreateChildClick(node, event) {
+        this.preventDefaultAndStopPropagation(event);
+        try {
+            const parentId = this.extractNodeId(node);
+            const context = await this.executeCreateWorkflow(parentId);
+            await this.handleCreateResult(context, parentId);
+        }
+        catch (error) {
+            console.error('Error creating child category:', error);
+        }
+    }
+    /**
+     * Updates an existing category node
+     */
+    async handleEditNodeClick(node, event) {
+        this.preventDefaultAndStopPropagation(event);
+        try {
+            const nodeData = this.extractNodeData(node);
+            const context = await this.executeModifyWorkflow(nodeData);
+            await this.handleModifyResult(context, node);
+        }
+        catch (error) {
+            console.error('Error editing category:', error);
+        }
+    }
+    /**
+     * Deletes a category node
+     */
+    async handleDeleteNodeClick(node, event) {
+        this.preventDefaultAndStopPropagation(event);
+        try {
+            const nodeData = this.extractNodeData(node);
+            const context = await this.executeDeleteWorkflow(nodeData);
+            await this.handleDeleteResult(context, node);
+        }
+        catch (error) {
+            console.error('Error deleting category:', error);
+        }
+    }
+    //#endregion
+    //#region ----   Private Tree Management Methods   ----
+    /**
+     * Initializes the category tree data structure
+     */
+    async initializeTree() {
         this.setLoadingWithDelay(true);
         try {
             const entityKey = this.categoryEntityKey();
@@ -152,12 +241,10 @@ class AXPEntityCategoryComponent {
                 this.clearLoadingState();
                 return;
             }
-            // Get parentKey from entity definition
+            // Set parent key from entity definition
             if (this.treeData.categoryEntityDef?.parentKey) {
                 this.treeConfig.parentKey = this.treeData.categoryEntityDef.parentKey;
             }
-            // Tree will be loaded via datasource callback
-            // Clear any previous search results
             this.searchResults = null;
         }
         catch (error) {
@@ -167,170 +254,316 @@ class AXPEntityCategoryComponent {
             this.clearLoadingState();
         }
     }
-    async onNodeToggle(event) {
-        // Tree component handles lazy loading via datasource callback
-    }
-    handleNodeClick(node) {
-        const nodeData = (node.data || node);
-        const applyConditions = this.vm().entityDef.category?.applyConditions || [];
-        const filters = applyConditions
-            .map((f) => {
-            const value = nodeData[f.value];
-            return value !== 'all' && value != null
-                ? {
-                    field: f.name,
-                    value,
-                    operator: f.operator,
-                }
-                : null;
-        })
-            .filter((item) => item != null);
-        const viewFilters = this.vm()
-            .view()
-            .conditions.map((i) => ({ ...i, field: i.name }));
-        this.vm().dataSource.filter({
-            filters: [...viewFilters, ...filters],
-            logic: 'and',
-        });
-        this.vm().dataSource.refresh();
+    /**
+     * Loads root nodes for the tree
+     */
+    async loadRootNodes() {
+        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);
+        return [rootNode];
     }
-    /** Loads children for a given node id. Used for refresh operations. */
-    async loadChildrenAtNode(targetId) {
-        // With the new datasource callback API, the tree component will automatically
-        // reload data when needed. For manual refresh, we may need to trigger
-        // the tree component's refresh mechanism if available.
-        // For now, the tree should handle refresh automatically via the datasource callback.
+    /**
+     * Loads child nodes for a given parent ID
+     */
+    async loadChildNodes(parentId) {
+        if (!this.isTreeInitialized()) {
+            return [];
+        }
+        const targetNode = {
+            ['id']: parentId,
+            ['title']: '',
+            ['data']: {},
+        };
+        return await this.categoryTreeService.loadChildren(targetNode, this.treeData, this.treeConfig);
     }
-    /** Returns the module.entity key for the configured category entity. */
-    getCategoryEntityKey() {
-        return this.categoryEntityKey();
+    /**
+     * Refreshes the tree view component
+     */
+    refreshTree() {
+        const treeComponent = this.tree();
+        if (treeComponent) {
+            treeComponent.refresh();
+        }
     }
-    /** Refresh tree after CRUD operations. */
+    /**
+     * Refreshes tree after CRUD operations
+     */
     async refreshAfterChange(parentId) {
-        // Clear search results to show all categories
         this.searchResults = null;
-        // Trigger tree refresh
+        this.refreshTree();
+    }
+    /**
+     * Adds a new node to the tree after create operation
+     */
+    async addNodeToTree(entityData, parentId) {
+        if (!this.isTreeInitialized()) {
+            return;
+        }
         const treeComponent = this.tree();
-        if (treeComponent) {
-            treeComponent.refresh?.();
+        if (!treeComponent) {
+            return;
+        }
+        const newNode = this.categoryTreeService.convertToTreeNode(entityData, this.treeConfig);
+        if (parentId) {
+            await this.addChildNode(treeComponent, parentId, newNode);
+        }
+        else {
+            await this.addRootNode(treeComponent, newNode);
         }
     }
-    //#endregion
-    //#region ----   UI Handlers   ----
-    /** Create a new root category node. */
-    async handleCreateRootClick(e) {
-        e.nativeEvent.preventDefault();
-        e.nativeEvent.stopPropagation();
-        try {
-            await this.workflow.execute('create-entity', {
-                entity: this.getCategoryEntityKey(),
-                options: { process: { redirect: false } },
-            });
+    /**
+     * Adds a child node to a parent node
+     */
+    async addChildNode(treeComponent, parentId, newNode) {
+        const parentNode = treeComponent.findNode(parentId);
+        if (!parentNode) {
+            await this.refreshAfterChange(parentId);
+            return;
+        }
+        if (!treeComponent.isNodeExpanded(parentId)) {
+            await treeComponent.expandNode(parentId);
+        }
+        treeComponent.addChild(parentId, newNode);
+    }
+    /**
+     * Adds a root node to the tree
+     */
+    async addRootNode(treeComponent, newNode) {
+        const rootNode = treeComponent.findNode(ROOT_NODE_ID);
+        if (!rootNode) {
             await this.refreshAfterChange();
+            return;
         }
-        catch (error) {
-            console.error('Error creating root category:', error);
+        if (!treeComponent.isNodeExpanded(ROOT_NODE_ID)) {
+            await treeComponent.expandNode(ROOT_NODE_ID);
         }
+        treeComponent.addChild(ROOT_NODE_ID, newNode);
     }
-    /** Create a new child under the given node. */
-    async handleCreateChildClick(node, e) {
-        e.nativeEvent.preventDefault();
-        e.nativeEvent.stopPropagation();
-        try {
-            const parentKey = this.treeData?.categoryEntityDef?.parentKey;
-            const data = {};
-            if (parentKey) {
-                data[parentKey] = node.id;
-            }
-            await this.workflow.execute('create-entity', {
-                entity: this.getCategoryEntityKey(),
-                data,
-                options: { process: { redirect: false, canCreateNewOne: true } },
-            });
-            await this.refreshAfterChange(node.id);
+    /**
+     * Updates an existing node in the tree after edit operation
+     */
+    async updateNodeInTree(nodeId, entityData) {
+        if (!this.isTreeInitialized()) {
+            return;
         }
-        catch (error) {
-            console.error('Error creating child category:', error);
+        const treeComponent = this.tree();
+        if (!treeComponent) {
+            return;
         }
+        const existingNode = treeComponent.findNode(nodeId);
+        if (!existingNode) {
+            await this.refreshNodeParent(entityData);
+            return;
+        }
+        const updatedNode = this.categoryTreeService.convertToTreeNode(entityData, this.treeConfig);
+        const updates = {
+            ['title']: updatedNode['title'],
+            ['data']: updatedNode['data'],
+            ['childrenCount']: updatedNode['childrenCount'],
+            ['icon']: updatedNode['icon'],
+        };
+        treeComponent.editNode(nodeId, updates);
     }
-    /** Update the given node. */
-    async handleEditNodeClick(node, e) {
-        e.nativeEvent.preventDefault();
-        e.nativeEvent.stopPropagation();
-        try {
-            const nodeData = (node.data || node);
-            await this.workflow.execute('quick-modify-entity', {
-                entity: this.getCategoryEntityKey(),
-                data: nodeData,
-                options: { layout: { size: 'md' } },
-            });
-            const parentKey = this.treeData?.categoryEntityDef?.parentKey;
-            if (parentKey && nodeData[parentKey]) {
-                await this.refreshAfterChange(nodeData[parentKey]);
-            }
-            else {
-                await this.refreshAfterChange();
-            }
+    /**
+     * Removes a node from the tree after delete operation
+     */
+    async removeNodeFromTree(nodeId) {
+        const treeComponent = this.tree();
+        if (!treeComponent) {
+            return;
         }
-        catch (error) {
-            console.error('Error editing category:', error);
+        const nodeToDelete = treeComponent.findNode(nodeId);
+        if (!nodeToDelete) {
+            await this.refreshAfterChange();
+            return;
         }
+        treeComponent.removeNode(nodeId);
     }
-    /** Delete the given node. */
-    async handleDeleteNodeClick(node, e) {
-        e.nativeEvent.preventDefault();
-        e.nativeEvent.stopPropagation();
-        try {
-            const nodeData = (node.data || node);
-            await this.workflow.execute('delete-entity', {
-                entity: this.getCategoryEntityKey(),
-                data: nodeData,
-                options: { process: { showResult: true } },
-            });
-            const parentKey = this.treeData?.categoryEntityDef?.parentKey;
-            if (parentKey && nodeData[parentKey]) {
-                await this.refreshAfterChange(nodeData[parentKey]);
-            }
-            else {
-                await this.refreshAfterChange();
-            }
+    //#endregion
+    //#region ----   Workflow Execution Methods   ----
+    /**
+     * Executes the create entity workflow
+     */
+    async executeCreateWorkflow(parentId) {
+        const entityKey = this.categoryEntityKey();
+        const workflowData = {};
+        if (parentId && this.treeData?.categoryEntityDef?.parentKey) {
+            workflowData[this.treeData.categoryEntityDef.parentKey] = parentId;
         }
-        catch (error) {
-            console.error('Error deleting category:', error);
+        return await this.workflow.execute('create-entity', {
+            entity: entityKey,
+            data: Object.keys(workflowData).length > 0 ? workflowData : undefined,
+            options: { process: { redirect: false, canCreateNewOne: !!parentId } },
+        });
+    }
+    /**
+     * Executes the modify entity workflow
+     */
+    async executeModifyWorkflow(nodeData) {
+        return await this.workflow.execute('quick-modify-entity', {
+            entity: this.categoryEntityKey(),
+            data: nodeData,
+            options: { layout: { size: 'md' } },
+        });
+    }
+    /**
+     * Executes the delete entity workflow
+     */
+    async executeDeleteWorkflow(nodeData) {
+        return await this.workflow.execute('delete-entity', {
+            entity: this.categoryEntityKey(),
+            data: nodeData,
+            options: { process: { showResult: true } },
+        });
+    }
+    /**
+     * Handles the result of a create operation
+     */
+    async handleCreateResult(context, parentId) {
+        const result = context.getOutput('result');
+        if (!result || !this.isTreeInitialized()) {
+            await this.refreshAfterChange(parentId);
+            return;
+        }
+        const newEntityData = context.getVariable('data');
+        if (newEntityData) {
+            await this.addNodeToTree(newEntityData, parentId);
+        }
+        else {
+            await this.refreshAfterChange(parentId);
+        }
+    }
+    /**
+     * Handles the result of a modify operation
+     */
+    async handleModifyResult(context, node) {
+        const result = context.getOutput('result');
+        if (!result || !this.isTreeInitialized()) {
+            await this.refreshNodeParent(this.extractNodeData(node));
+            return;
+        }
+        const updatedEntityData = context.getVariable('data');
+        if (updatedEntityData) {
+            await this.updateNodeInTree(this.extractNodeId(node), updatedEntityData);
+        }
+        else {
+            await this.refreshNodeParent(this.extractNodeData(node));
+        }
+    }
+    /**
+     * Handles the result of a delete operation
+     */
+    async handleDeleteResult(context, node) {
+        const result = context.getOutput('result');
+        if (result) {
+            await this.removeNodeFromTree(this.extractNodeId(node));
+        }
+        else {
+            await this.refreshNodeParent(this.extractNodeData(node));
         }
     }
     //#endregion
+    //#region ----   Utility Methods   ----
+    /**
+     * Checks if tree data and config are initialized
+     */
+    isTreeInitialized() {
+        return !!(this.treeData && this.treeConfig);
+    }
+    /**
+     * Extracts node data from a tree node
+     */
+    extractNodeData(node) {
+        return (node['data'] || node);
+    }
+    /**
+     * Extracts node ID from a tree node
+     */
+    extractNodeId(node) {
+        return String(node['id'] ?? '');
+    }
+    /**
+     * Builds category filters from node data and apply conditions
+     */
+    buildCategoryFilters(nodeData, applyConditions) {
+        return applyConditions
+            .map((condition) => {
+            const value = nodeData[condition.value];
+            if (value === 'all' || value == null) {
+                return null;
+            }
+            return {
+                field: condition.name,
+                value,
+                operator: condition.operator,
+            };
+        })
+            .filter((item) => item !== null);
+    }
+    /**
+     * Builds view filters from view conditions
+     */
+    buildViewFilters() {
+        return this.vm()
+            .view()
+            .conditions.map((condition) => ({ ...condition, field: condition.name }));
+    }
+    /**
+     * Refreshes the parent node of the given entity data
+     */
+    async refreshNodeParent(entityData) {
+        const parentKey = this.treeData?.categoryEntityDef?.parentKey;
+        const parentId = parentKey && entityData[parentKey] ? entityData[parentKey] : undefined;
+        await this.refreshAfterChange(parentId);
+    }
+    /**
+     * Prevents default behavior and stops event propagation
+     */
+    preventDefaultAndStopPropagation(event) {
+        event.nativeEvent.preventDefault();
+        event.nativeEvent.stopPropagation();
+    }
+    //#endregion
     //#region ----   Loading State Management   ----
     /**
-     * Set loading state with delay to avoid flickering for fast responses
+     * Sets loading state with delay to avoid flickering for fast responses
      */
     setLoadingWithDelay(loading) {
-        if (loading) {
-            // Clear any existing timeout
-            if (this.loadingTimeoutId) {
-                clearTimeout(this.loadingTimeoutId);
-            }
-            // Only show skeleton if loading takes more than LOADING_DELAY ms
-            this.loadingTimeoutId = setTimeout(() => {
-                this.isLoading.set(true);
-                this.loadingTimeoutId = null;
-            }, this.LOADING_DELAY);
+        if (!loading) {
+            return;
+        }
+        if (this.loadingTimeoutId) {
+            clearTimeout(this.loadingTimeoutId);
         }
+        this.loadingTimeoutId = setTimeout(() => {
+            this.isLoading.set(true);
+            this.loadingTimeoutId = null;
+        }, LOADING_DELAY_MS);
     }
     /**
-     * Clear loading state and cancel any pending timeout
+     * Clears loading state and cancels any pending timeout
      */
     clearLoadingState() {
-        // Cancel the delayed loading state if it hasn't been set yet
         if (this.loadingTimeoutId) {
             clearTimeout(this.loadingTimeoutId);
             this.loadingTimeoutId = null;
         }
-        // Clear the loading state
         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 } }, 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        [showCheckbox]=\"false\"\n        [showIcons]=\"true\"\n        [itemTemplate]=\"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.label;\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: ["ax-tree-view-item .ax-tree-view-items{width:100%;min-width:0px}ax-tree-view-item .ax-tree-view-items>div{width:100%}ax-tree-view-item .ax-state-tree-view-active{background-color:rgb(var(--ax-sys-color-light-surface))!important;color:rgb(var(--ax-sys-color-on-light-surface))!important;border-color:rgb(var(--ax-sys-color-border-light-surface))!important}\n"], 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", "checkChildrenOnSelect", "intermediateState", "checkOnClick", "dragMode", "dragOperationType", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "nodeHeight", "look", "itemTemplate"], outputs: ["datasourceChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "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 }, 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityCategoryComponent, decorators: [{
             type: Component,
@@ -348,8 +581,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        [showCheckbox]=\"false\"\n        [showIcons]=\"true\"\n        [itemTemplate]=\"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.label;\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: ["ax-tree-view-item .ax-tree-view-items{width:100%;min-width:0px}ax-tree-view-item .ax-tree-view-items>div{width:100%}ax-tree-view-item .ax-state-tree-view-active{background-color:rgb(var(--ax-sys-color-light-surface))!important;color:rgb(var(--ax-sys-color-on-light-surface))!important;border-color:rgb(var(--ax-sys-color-border-light-surface))!important}\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 }] }] } });
+                    ], 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 }] }] } });
 
 class AXPEntityMasterToolbarViewComponent {
     constructor() {
@@ -817,7 +1050,7 @@ class AXPEntityMasterListViewComponent extends AXPPageLayoutBaseComponent {
                 //
                 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"] }, { 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", "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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPEntityMasterListViewComponent, decorators: [{
             type: Component,
@@ -864,4 +1097,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-4nWLEm89.mjs.map
+//# sourceMappingURL=acorex-platform-themes-default-entity-master-list-view.component-BbACUabi.mjs.map