@acorex/platform 20.7.10 → 20.7.12

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

@@ -15,7 +15,7 @@ import { AXPWorkflowService } from '@acorex/platform/workflow';
 import * as i1 from '@angular/common';
 import { CommonModule, NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, InjectionToken, computed, Injectable, Directive, viewChild, contentChild, ElementRef, output, afterNextRender, model, Injector, ViewContainerRef, runInInjectionContext, Optional, Inject, NgModule, linkedSignal, untracked, HostListener, ViewChildren, Input, EventEmitter, Output } from '@angular/core';
+import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, InjectionToken, computed, Injectable, Directive, viewChild, contentChild, ElementRef, output, afterNextRender, model, Injector, ViewContainerRef, runInInjectionContext, Optional, Inject, NgModule, linkedSignal, untracked, HostListener, ViewChildren, DestroyRef, Input, EventEmitter, Output } from '@angular/core';
 import { AXAccordionCdkModule } from '@acorex/cdk/accordion';
 import { AXTagModule } from '@acorex/components/tag';
 import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
@@ -66,7 +66,6 @@ import { AXDialogService } from '@acorex/components/dialog';
 import { AXToastService } from '@acorex/components/toast';
 import { AXTreeViewComponent } from '@acorex/components/tree-view';
 import { AXPLayoutBuilderService, AXPLayoutRendererComponent } from '@acorex/platform/layout/builder';
-import { Subject, BehaviorSubject, timer, takeUntil } from 'rxjs';
 import * as i2$6 from '@acorex/components/image';
 import { AXImageModule } from '@acorex/components/image';
 import { AXPlatform } from '@acorex/core/platform';
@@ -75,6 +74,7 @@ import { AXAccordionModule } from '@acorex/components/accordion';
 import { AXButtonGroupModule } from '@acorex/components/button-group';
 import * as i5$3 from '@acorex/components/tabs';
 import { AXTabsModule } from '@acorex/components/tabs';
+import { BehaviorSubject, timer, Subject, takeUntil } from 'rxjs';
 import { tap } from 'rxjs/operators';
 import * as i1$7 from '@acorex/components/avatar';
 import { AXAvatarModule } from '@acorex/components/avatar';
@@ -2900,7 +2900,26 @@ const AXP_MENU_CUSTOMIZER_SERVICE = new InjectionToken('AXP_MENU_CUSTOMIZER_SERV
  * and manage menu items using a tree-like interface.
  * Can be used standalone or within popups/dialogs.
  *
- * Requires providing AXP_MENU_CUSTOMIZER_SERVICE with an implementation of AXPMenuCustomizerService.
+ * @description
+ * This component provides a visual interface for customizing menu structures.
+ * It supports:
+ * - Drag and drop reordering of menu items
+ * - Showing/hiding menu items
+ * - Adding custom menu items
+ * - Editing menu item properties
+ * - Resetting customizations to defaults
+ *
+ * @example
+ * ```html
+ * <axp-menu-customizer
+ *   [scopeKey]="'edition:my-edition'"
+ *   [showToolbar]="true"
+ *   [allowAddItems]="true"
+ *   (saved)="onSaved()"
+ * />
+ * ```
+ *
+ * @requires AXP_MENU_CUSTOMIZER_SERVICE - Must provide an implementation of AXPMenuCustomizerService
  */
 class AXPMenuCustomizerComponent {
     constructor() {
@@ -2910,6 +2929,7 @@ class AXPMenuCustomizerComponent {
         this.dialogService = inject(AXDialogService);
         this.toastService = inject(AXToastService);
         this.translationService = inject(AXTranslationService);
+        this.destroyRef = inject(DestroyRef);
         //#endregion
         //#region ----   Inputs & Outputs   ----
         /** The scope key for loading/saving menu customizations (e.g., 'edition:{id}', 'tenant:{id}') */
@@ -2918,9 +2938,9 @@ class AXPMenuCustomizerComponent {
         this.showToolbar = input(true, ...(ngDevMode ? [{ debugName: "showToolbar" }] : []));
         /** Whether to allow adding custom menu items */
         this.allowAddItems = input(true, ...(ngDevMode ? [{ debugName: "allowAddItems" }] : []));
-        /** Drag behavior for the tree view: 'none' | 'move' | 'copy' */
+        /** Drag behavior for the tree view: 'none' | 'order-only' | 'move' | 'both' */
         this.dragBehavior = input('both', ...(ngDevMode ? [{ debugName: "dragBehavior" }] : []));
-        /** Drag area for the tree view: 'node' | 'handler' */
+        /** Drag area for the tree view: 'handler' | 'item' */
         this.dragArea = input('handler', ...(ngDevMode ? [{ debugName: "dragArea" }] : []));
         /** Emitted when changes are saved */
         this.saved = output();
@@ -2928,88 +2948,136 @@ class AXPMenuCustomizerComponent {
         this.cancelled = output();
         //#endregion
         //#region ----   Component State   ----
+        /** Reference to the tree view component */
         this.tree = viewChild(AXTreeViewComponent, ...(ngDevMode ? [{ debugName: "tree" }] : []));
+        /** Tree nodes data source */
         this.treeNodes = signal([], ...(ngDevMode ? [{ debugName: "treeNodes" }] : []));
-        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
-        this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+        /** Current loading/error state */
+        this.state = signal({ status: 'idle' }, ...(ngDevMode ? [{ debugName: "state" }] : []));
+        /** Flag to prevent concurrent sync operations */
         this.isSyncing = false;
-        this.destroy$ = new Subject();
+        //#endregion
+        //#region ----   Computed Properties   ----
+        /** Whether the component is currently loading */
+        this.isLoading = computed(() => this.state().status === 'loading', ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        /** Whether there is an error state */
+        this.hasError = computed(() => this.state().status === 'error', ...(ngDevMode ? [{ debugName: "hasError" }] : []));
+        /** The current error message, if any */
+        this.errorMessage = computed(() => {
+            const currentState = this.state();
+            return currentState.status === 'error' ? currentState.message : '';
+        }, ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+        /** Whether the tree has nodes to display */
+        this.hasNodes = computed(() => this.treeNodes().length > 0, ...(ngDevMode ? [{ debugName: "hasNodes" }] : []));
+        /** Whether to show the content (tree view) */
+        this.showContent = computed(() => !this.isLoading() && !this.hasError() && this.hasNodes(), ...(ngDevMode ? [{ debugName: "showContent" }] : []));
+        /** Whether to show the empty state */
+        this.showEmptyState = computed(() => !this.isLoading() && !this.hasError() && !this.hasNodes(), ...(ngDevMode ? [{ debugName: "showEmptyState" }] : []));
+        this.eff = effect(() => {
+            console.log('treeNodes', this.treeNodes());
+        }, ...(ngDevMode ? [{ debugName: "eff" }] : []));
+        this.eff2 = effect(() => {
+            console.log('datasource', this.tree()?.datasource());
+        }, ...(ngDevMode ? [{ debugName: "eff2" }] : []));
     }
     //#endregion
     //#region ----   Lifecycle   ----
     async ngOnInit() {
         await this.loadMenuItems();
     }
-    ngOnDestroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
     //#endregion
     //#region ----   Event Handlers   ----
     /**
-     * Handle before drop validation
+     * Handle before drop validation.
+     * Prevents dropping into items with paths (leaf nodes that can't have children).
+     *
+     * @param event - The before drop event from tree view
      */
-    async handleBeforeDrop(e) {
-        const targetParent = e.currentParent?.['data'] || null;
+    handleBeforeDrop(event) {
+        const targetParent = event.currentParent?.['data'];
         // Prevent dropping into items with paths (leaf nodes)
         if (targetParent?.menuItem?.path) {
-            e.canceled = true;
-            const message = await this.translationService.translateAsync('@platform-management:menu-management.messages.error.move');
-            this.toastService.warning(message);
-            return;
+            event.canceled = true;
+            this.showWarningMessage('@platform-management:menu-management.messages.error.move');
         }
     }
     /**
-     * Handle after drop event to sync changes
-     * The event contains information about the moved node and its new position
+     * Handle order change event (reordering within the same parent).
+     *
+     * @param event - The drop event from tree view
      */
-    async handleAfterDrop(event) {
-        await this.syncTreeChanges();
+    async handleOrderChange(event) {
+        console.log('Order changed:', {
+            node: event.node?.['id'],
+            previousIndex: event.previousIndex,
+            currentIndex: event.currentIndex,
+            parent: event.currentParent?.['id'] ?? 'root',
+        });
+        // Use setTimeout to ensure tree view has finished updating the datasource
+        setTimeout(() => this.syncTreeChanges(), 0);
+    }
+    /**
+     * Handle move change event (moving to a different parent).
+     *
+     * @param event - The drop event from tree view
+     */
+    async handleMoveChange(event) {
+        console.log('Move changed:', {
+            node: event.node?.['id'],
+            previousParent: event.previousParent?.['id'] ?? 'root',
+            currentParent: event.currentParent?.['id'] ?? 'root',
+            currentIndex: event.currentIndex,
+        });
+        // Use setTimeout to ensure tree view has finished updating the datasource
+        setTimeout(() => this.syncTreeChanges(), 0);
     }
     //#endregion
     //#region ----   Data Loading   ----
     /**
-     * Load menu tree for current scope
+     * Load menu tree for current scope.
+     * Updates the component state to loading, then success or error.
+     * Creates new array reference to ensure UI updates.
      */
     async loadMenuItems() {
         try {
-            this.isLoading.set(true);
-            this.error.set('');
+            this.state.set({ status: 'loading' });
             const treeNodes = await this.menuCustomizerService.getMenuTree(this.scopeKey());
-            this.treeNodes.set(treeNodes);
+            // Create new array reference to ensure tree view detects the change
+            this.treeNodes.set([...treeNodes]);
+            this.state.set({ status: 'success' });
         }
         catch (error) {
-            this.error.set(error instanceof Error ? error.message : 'Failed to load menu items');
-            const message = await this.translationService.translateAsync('@platform-management:menu-management.messages.error.load');
-            this.toastService.danger(message);
-        }
-        finally {
-            this.isLoading.set(false);
+            const message = error instanceof Error ? error.message : 'Failed to load menu items';
+            this.state.set({ status: 'error', message });
+            this.showErrorMessage('@platform-management:menu-management.messages.error.load');
         }
     }
     /**
-     * Sync tree changes to backend
+     * Sync tree changes to backend.
+     * Prevents concurrent sync operations using the isSyncing flag.
+     * Reloads data with new reference after successful sync.
      */
     async syncTreeChanges() {
         if (this.isSyncing) {
             return;
         }
+        // Get nodes from the tree component's datasource directly
+        // This ensures we get the most up-to-date structure after drag-drop
+        const treeComponent = this.tree();
+        const nodes = treeComponent?.getRootNodes() ?? this.treeNodes();
+        if (!nodes || nodes.length === 0) {
+            return;
+        }
         try {
             this.isSyncing = true;
-            // Get nodes from signal - the tree component mutates the array in place
-            // so this.treeNodes() will have the updated structure after drag-drop
-            const nodes = this.treeNodes();
-            if (!nodes || nodes.length === 0) {
-                return;
-            }
             await this.menuCustomizerService.syncTreeChanges(this.scopeKey(), nodes);
-            const message = await this.translationService.translateAsync('@platform-management:menu-management.messages.success.reorder');
-            this.toastService.success(message);
+            this.showSuccessMessage('@platform-management:menu-management.messages.success.reorder');
+            // Reload with new array reference to ensure UI is in sync
+            await this.loadMenuItems();
         }
         catch (error) {
             console.error('Failed to sync tree changes:', error);
-            const message = await this.translationService.translateAsync('@platform-management:menu-management.messages.error.sync');
-            this.toastService.danger(message);
+            this.showErrorMessage('@platform-management:menu-management.messages.error.sync');
         }
         finally {
             this.isSyncing = false;
@@ -3018,72 +3086,77 @@ class AXPMenuCustomizerComponent {
     //#endregion
     //#region ----   Public Methods   ----
     /**
-     * Collapse all tree nodes
+     * Collapse all tree nodes.
      */
     collapseAll() {
         this.tree()?.collapseAll();
     }
     /**
-     * Expand all tree nodes
+     * Expand all tree nodes.
      */
-    expandAll() {
-        this.tree()?.expandAll();
+    async expandAll() {
+        await this.tree()?.expandAll();
     }
     /**
-     * Reset all customizations
+     * Reset all customizations to defaults.
+     * Shows a confirmation dialog before resetting.
      */
     async resetCustomizations() {
-        const title = await this.translationService.translateAsync('@platform-management:menu-management.actions.reset.confirm.title');
-        const message = await this.translationService.translateAsync('@platform-management:menu-management.actions.reset.confirm.message');
-        const confirmed = await this.dialogService.confirm(title, message);
+        const confirmed = await this.confirmAction('@platform-management:menu-management.actions.reset.confirm.title', '@platform-management:menu-management.actions.reset.confirm.message');
         if (!confirmed)
             return;
         try {
             await this.menuCustomizerService.resetCustomizations(this.scopeKey());
-            const successMessage = await this.translationService.translateAsync('@platform-management:menu-management.messages.success.reset');
-            this.toastService.success(successMessage);
+            this.showSuccessMessage('@platform-management:menu-management.messages.success.reset');
         }
         catch (error) {
             console.error('Failed to reset customizations:', error);
-            const errorMessage = await this.translationService.translateAsync('@platform-management:menu-management.messages.error.reset');
-            this.toastService.danger(errorMessage);
+            this.showErrorMessage('@platform-management:menu-management.messages.error.reset');
         }
         finally {
             await this.loadMenuItems();
         }
     }
     /**
-     * Add new root menu item
+     * Add new root menu item.
+     * Opens the menu item dialog without a parent.
      */
     async addRootMenuItem() {
         await this.showMenuItemDialog(null, null);
     }
+    /**
+     * Reload the menu items from the service.
+     * Useful for external refresh triggers.
+     */
+    async refresh() {
+        await this.loadMenuItems();
+    }
     //#endregion
     //#region ----   Action Handlers   ----
     /**
-     * Handle menu item action
+     * Handle menu item action dispatched from the template.
+     *
+     * @param action - The action to perform
+     * @param nodeData - The node data to perform the action on
      */
     async onAction(action, nodeData) {
-        switch (action) {
-            case 'show':
-                await this.showMenuItem(nodeData);
-                break;
-            case 'hide':
-                await this.hideMenuItem(nodeData);
-                break;
-            case 'edit':
-                await this.editMenuItem(nodeData);
-                break;
-            case 'delete':
-                await this.deleteMenuItem(nodeData);
-                break;
-            case 'add-child':
-                await this.addChildMenuItem(nodeData);
-                break;
+        const actionHandlers = {
+            show: () => this.showMenuItem(nodeData),
+            hide: () => this.hideMenuItem(nodeData),
+            edit: () => this.editMenuItem(nodeData),
+            delete: () => this.deleteMenuItem(nodeData),
+            'add-child': () => this.addChildMenuItem(nodeData),
+            move: () => Promise.resolve(), // Move is handled by drag-drop
+        };
+        const handler = actionHandlers[action];
+        if (handler) {
+            await handler();
         }
     }
     /**
-     * Add new child menu item
+     * Add new child menu item to a parent.
+     *
+     * @param parentNodeData - The parent node data
      */
     async addChildMenuItem(parentNodeData) {
         await this.showMenuItemDialog(null, parentNodeData.menuItem.name ?? null);
@@ -3091,66 +3164,66 @@ class AXPMenuCustomizerComponent {
     //#endregion
     //#region ----   Menu Item Actions   ----
     /**
-     * Show menu item
+     * Show a hidden menu item.
+     *
+     * @param nodeData - The node data containing the menu item to show
      */
     async showMenuItem(nodeData) {
-        await this.executeMenuAction(() => this.menuCustomizerService.showMenuItem(this.scopeKey(), nodeData.menuItem.name), '@platform-management:menu-management.messages.success.show', '@platform-management:menu-management.messages.error.show');
+        const menuName = nodeData.menuItem.name;
+        if (!menuName)
+            return;
+        await this.executeMenuAction(() => this.menuCustomizerService.showMenuItem(this.scopeKey(), menuName), '@platform-management:menu-management.messages.success.show', '@platform-management:menu-management.messages.error.show');
     }
     /**
-     * Hide menu item
+     * Hide a menu item.
+     *
+     * @param nodeData - The node data containing the menu item to hide
      */
     async hideMenuItem(nodeData) {
-        await this.executeMenuAction(() => this.menuCustomizerService.hideMenuItem(this.scopeKey(), nodeData.menuItem.name), '@platform-management:menu-management.messages.success.hide', '@platform-management:menu-management.messages.error.hide');
+        const menuName = nodeData.menuItem.name;
+        if (!menuName)
+            return;
+        await this.executeMenuAction(() => this.menuCustomizerService.hideMenuItem(this.scopeKey(), menuName), '@platform-management:menu-management.messages.success.hide', '@platform-management:menu-management.messages.error.hide');
     }
     /**
-     * Edit menu item
+     * Edit a menu item.
+     *
+     * @param nodeData - The node data containing the menu item to edit
      */
     async editMenuItem(nodeData) {
         await this.showMenuItemDialog(nodeData);
     }
     /**
-     * Delete custom menu item
+     * Delete a custom menu item.
+     * Shows a confirmation dialog before deleting.
+     *
+     * @param nodeData - The node data containing the menu item to delete
      */
     async deleteMenuItem(nodeData) {
-        const title = await this.translationService.translateAsync('@general:actions.delete.title');
-        const message = await this.translationService.translateAsync('@platform-management:menu-management.actions.delete.confirm.message');
-        const confirmed = await this.dialogService.confirm(title, message);
+        const item = nodeData.menuItem;
+        if (!item.name)
+            return;
+        const confirmed = await this.confirmAction('@general:actions.delete.title', '@platform-management:menu-management.actions.delete.confirm.message');
         if (!confirmed)
             return;
-        try {
-            const item = nodeData.menuItem;
-            if (!item.name)
-                return;
-            await this.menuCustomizerService.deleteCustomMenuItem(this.scopeKey(), item.name);
-            const successMessage = await this.translationService.translateAsync('@platform-management:menu-management.messages.success.delete');
-            this.toastService.success(successMessage);
-            await this.loadMenuItems();
-        }
-        catch (error) {
-            const errorMessage = await this.translationService.translateAsync('@platform-management:menu-management.messages.error.delete');
-            this.toastService.danger(errorMessage);
-        }
+        await this.executeMenuAction(() => this.menuCustomizerService.deleteCustomMenuItem(this.scopeKey(), item.name), '@platform-management:menu-management.messages.success.delete', '@platform-management:menu-management.messages.error.delete');
     }
     //#endregion
     //#region ----   Dialog Helpers   ----
     /**
-     * Show menu item dialog (add/edit)
+     * Show menu item dialog (add/edit).
+     *
+     * @param nodeData - The node data for editing, or null for adding
+     * @param parentName - The parent menu name for adding child items
      */
     async showMenuItemDialog(nodeData, parentName = null) {
         const item = nodeData?.menuItem;
         const isEdit = !!item;
+        const isBuiltIn = nodeData?.metadata?.isBuiltIn ?? false;
         const title = isEdit
             ? '@platform-management:menu-management.components.edit-dialog.title'
             : '@platform-management:menu-management.components.add-dialog.title';
-        const context = {
-            name: item?.name || '',
-            text: item?.text || '',
-            type: item?.type || 'menu',
-            icon: item?.icon || '',
-            path: item?.path || '',
-            priority: item?.priority || 0,
-            description: item?.description || '',
-        };
+        const context = this.buildDialogContext(item);
         const dialogRef = await this.layoutBuilder
             .create()
             .dialog((dialog) => {
@@ -3158,48 +3231,7 @@ class AXPMenuCustomizerComponent {
                 .setTitle(title)
                 .setContext(context)
                 .content((flex) => {
-                flex
-                    .setDirection('column')
-                    .formField('@platform-management:menu-management.fields.name', (field) => {
-                    field.path('name');
-                    field.textBox({
-                        placeholder: '@platform-management:menu-management.fields.name',
-                        validations: [{ rule: 'required' }],
-                        disabled: isEdit && nodeData?.metadata?.isBuiltIn,
-                    });
-                })
-                    .formField('@platform-management:menu-management.fields.text', (field) => {
-                    field.path('text');
-                    field.textBox({
-                        placeholder: '@platform-management:menu-management.fields.text',
-                        validations: [{ rule: 'required' }],
-                    });
-                })
-                    .formField('@platform-management:menu-management.fields.icon', (field) => {
-                    field.path('icon');
-                    field.customWidget('icon-chooser', {});
-                })
-                    .formField('@platform-management:menu-management.fields.path', (field) => {
-                    field.path('path');
-                    field.textBox({
-                        placeholder: '@platform-management:menu-management.fields.path',
-                        disabled: isEdit && nodeData?.metadata?.isBuiltIn,
-                    });
-                })
-                    .formField('@platform-management:menu-management.fields.priority', (field) => {
-                    field.path('priority');
-                    field.numberBox({
-                        placeholder: '@platform-management:menu-management.fields.priority',
-                        step: 10,
-                    });
-                })
-                    .formField('@platform-management:menu-management.fields.description', (field) => {
-                    field.path('description');
-                    field.largeTextBox({
-                        placeholder: '@platform-management:menu-management.fields.description',
-                        rows: 3,
-                    });
-                });
+                this.buildDialogFields(flex, isEdit, isBuiltIn);
             })
                 .setActions((actions) => {
                 actions.cancel('@general:actions.cancel.title').submit('@general:actions.save.title');
@@ -3213,60 +3245,189 @@ class AXPMenuCustomizerComponent {
         }
         const formData = dialogRef.context();
         try {
-            if (isEdit && item?.name) {
-                // Update existing item
-                if (nodeData?.metadata?.isCustom) {
-                    await this.menuCustomizerService.updateCustomMenuItem(this.scopeKey(), item.name, formData);
-                }
-                else {
-                    await this.menuCustomizerService.updateMenuProperties(this.scopeKey(), item.name, formData);
-                }
+            await this.saveMenuItem(formData, nodeData, parentName, isEdit);
+            this.showSuccessMessage('@platform-management:menu-management.messages.success.save');
+            await this.loadMenuItems();
+            dialogRef.close();
+        }
+        catch (error) {
+            console.error('Failed to save menu item:', error);
+            this.showErrorMessage('@platform-management:menu-management.messages.error.save');
+        }
+    }
+    /**
+     * Build the dialog context for add/edit dialog.
+     *
+     * @param item - The menu item to build context for, or undefined for new items
+     */
+    buildDialogContext(item) {
+        return {
+            name: item?.name ?? '',
+            text: item?.text ?? '',
+            type: item?.type ?? 'menu',
+            icon: item?.icon ?? '',
+            path: item?.path ?? '',
+            description: item?.description ?? '',
+        };
+    }
+    /**
+     * Build the dialog form fields.
+     * Note: Priority is not included as item order is controlled by drag-drop.
+     *
+     * @param flex - The flex layout builder
+     * @param isEdit - Whether this is an edit operation
+     * @param isBuiltIn - Whether the item is built-in
+     */
+    buildDialogFields(flex, isEdit, isBuiltIn) {
+        const I18N_PREFIX = '@platform-management:menu-management.fields';
+        flex
+            .setDirection('column')
+            .formField(`${I18N_PREFIX}.name`, (field) => {
+            field.path('name');
+            field.textBox({
+                placeholder: `${I18N_PREFIX}.name`,
+                validations: [{ rule: 'required' }],
+                disabled: isEdit && isBuiltIn,
+            });
+        })
+            .formField(`${I18N_PREFIX}.text`, (field) => {
+            field.path('text');
+            field.textBox({
+                placeholder: `${I18N_PREFIX}.text`,
+                validations: [{ rule: 'required' }],
+            });
+        })
+            .formField(`${I18N_PREFIX}.icon`, (field) => {
+            field.path('icon');
+            field.customWidget('icon-chooser', {});
+        })
+            .formField(`${I18N_PREFIX}.path`, (field) => {
+            field.path('path');
+            field.textBox({
+                placeholder: `${I18N_PREFIX}.path`,
+                disabled: isEdit && isBuiltIn,
+            });
+        })
+            .formField(`${I18N_PREFIX}.description`, (field) => {
+            field.path('description');
+            field.largeTextBox({
+                placeholder: `${I18N_PREFIX}.description`,
+                rows: 3,
+            });
+        });
+    }
+    /**
+     * Save menu item (create or update).
+     *
+     * @param formData - The form data from the dialog
+     * @param nodeData - The original node data (for edit) or null (for add)
+     * @param parentName - The parent menu name (for add child)
+     * @param isEdit - Whether this is an edit operation
+     */
+    async saveMenuItem(formData, nodeData, parentName, isEdit) {
+        const scopeKey = this.scopeKey();
+        if (isEdit && nodeData?.menuItem?.name) {
+            const menuName = nodeData.menuItem.name;
+            if (nodeData.metadata?.isCustom) {
+                // For custom items, update the entire item (preserving priority from current position)
+                const updatedItem = {
+                    ...nodeData.menuItem,
+                    text: formData.text,
+                    icon: formData.icon,
+                    path: formData.path,
+                    description: formData.description,
+                };
+                await this.menuCustomizerService.updateCustomMenuItem(scopeKey, menuName, updatedItem);
             }
             else {
-                // Add new custom item
-                const newItem = {
-                    name: formData.name,
+                // For built-in items, only update allowed properties (text, icon, description)
+                const properties = {
                     text: formData.text,
                     icon: formData.icon,
-                    path: formData.path,
-                    priority: formData.priority,
                     description: formData.description,
                 };
-                await this.menuCustomizerService.addCustomMenuItem(this.scopeKey(), newItem, parentName);
+                await this.menuCustomizerService.updateMenuProperties(scopeKey, menuName, properties);
             }
-            const successMessage = await this.translationService.translateAsync('@platform-management:menu-management.messages.success.save');
-            this.toastService.success(successMessage);
-            await this.loadMenuItems();
-            dialogRef.close();
         }
-        catch (error) {
-            const errorMessage = await this.translationService.translateAsync('@platform-management:menu-management.messages.error.save');
-            this.toastService.danger(errorMessage);
+        else {
+            // Add new custom item
+            const newItem = {
+                name: formData.name,
+                text: formData.text,
+                icon: formData.icon,
+                path: formData.path,
+                description: formData.description,
+            };
+            await this.menuCustomizerService.addCustomMenuItem(scopeKey, newItem, parentName);
         }
     }
+    //#endregion
+    //#region ----   Utility Methods   ----
     /**
-     * Execute a menu action with common error handling
+     * Execute a menu action with common error handling and reload.
+     *
+     * @param action - The action to execute
+     * @param successMessageKey - The i18n key for success message
+     * @param errorMessageKey - The i18n key for error message
      */
     async executeMenuAction(action, successMessageKey, errorMessageKey) {
         try {
             await action();
-            const message = await this.translationService.translateAsync(successMessageKey);
-            this.toastService.success(message);
+            this.showSuccessMessage(successMessageKey);
             await this.loadMenuItems();
         }
         catch (error) {
             console.error('Menu action failed:', error);
-            const message = await this.translationService.translateAsync(errorMessageKey);
-            this.toastService.danger(message);
+            this.showErrorMessage(errorMessageKey);
         }
     }
+    /**
+     * Show a confirmation dialog.
+     *
+     * @param titleKey - The i18n key for the dialog title
+     * @param messageKey - The i18n key for the dialog message
+     * @returns True if confirmed, false otherwise
+     */
+    async confirmAction(titleKey, messageKey) {
+        const [title, message] = await Promise.all([
+            this.translationService.translateAsync(titleKey),
+            this.translationService.translateAsync(messageKey),
+        ]);
+        return (await this.dialogService.confirm(title, message)).result;
+    }
+    /**
+     * Show a success toast message.
+     *
+     * @param messageKey - The i18n key for the message
+     */
+    async showSuccessMessage(messageKey) {
+        const message = await this.translationService.translateAsync(messageKey);
+        this.toastService.success(message);
+    }
+    /**
+     * Show an error toast message.
+     *
+     * @param messageKey - The i18n key for the message
+     */
+    async showErrorMessage(messageKey) {
+        const message = await this.translationService.translateAsync(messageKey);
+        this.toastService.danger(message);
+    }
+    /**
+     * Show a warning toast message.
+     *
+     * @param messageKey - The i18n key for the message
+     */
+    async showWarningMessage(messageKey) {
+        const message = await this.translationService.translateAsync(messageKey);
+        this.toastService.warning(message);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPMenuCustomizerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPMenuCustomizerComponent, isStandalone: true, selector: "axp-menu-customizer", inputs: { scopeKey: { classPropertyName: "scopeKey", publicName: "scopeKey", isSignal: true, isRequired: true, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, allowAddItems: { classPropertyName: "allowAddItems", publicName: "allowAddItems", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", cancelled: "cancelled" }, host: { classAttribute: "axp-menu-customizer" }, viewQueries: [{ propertyName: "tree", first: true, predicate: AXTreeViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (isLoading()) {\n  <!-- Loading State -->\n  <axp-state-message\n    mode=\"loading\"\n    icon=\"fa-light fa-spinner-third fa-spin\"\n    [title]=\"\n      ('@platform-management:menu-management.components.menu-list.empty-states.loading.title' | translate | async)!\n    \"\n    [description]=\"\n      ('@platform-management:menu-management.components.menu-list.empty-states.loading.description'\n        | translate\n        | async)!\n    \"\n  />\n} @else if (error()) {\n  <!-- Error State -->\n  <axp-state-message\n    mode=\"error\"\n    icon=\"fa-light fa-circle-exclamation\"\n    [title]=\"\n      ('@platform-management:menu-management.components.menu-list.empty-states.error.title' | translate | async)!\n    \"\n    [description]=\"\n      ('@platform-management:menu-management.components.menu-list.empty-states.error.description' | translate | async)!\n    \"\n  >\n    <ax-button\n      slot=\"actions\"\n      [text]=\"'@general:actions.retry.title' | translate | async\"\n      [look]=\"'outline'\"\n      [color]=\"'primary'\"\n      (onClick)=\"loadMenuItems()\"\n    >\n      <i class=\"fa-light fa-rotate-left\"></i>\n    </ax-button>\n  </axp-state-message>\n} @else if (treeNodes().length === 0) {\n  <!-- Empty State -->\n  <axp-state-message\n    mode=\"empty\"\n    icon=\"fa-light fa-bars\"\n    [title]=\"\n      ('@platform-management:menu-management.components.menu-list.empty-states.no-data.title' | translate | async)!\n    \"\n    [description]=\"\n      ('@platform-management:menu-management.components.menu-list.empty-states.no-data.description'\n        | translate\n        | async)!\n    \"\n  >\n    @if (allowAddItems()) {\n      <ax-button\n        slot=\"actions\"\n        [text]=\"'@platform-management:menu-management.actions.add-root.title' | translate | async\"\n        [look]=\"'solid'\"\n        [color]=\"'primary'\"\n        (onClick)=\"addRootMenuItem()\"\n      >\n        <i class=\"fa-light fa-plus\"></i>\n      </ax-button>\n    }\n  </axp-state-message>\n} @else {\n  <!-- Toolbar -->\n  @if (showToolbar()) {\n    <div class=\"axp-menu-customizer__toolbar\">\n      @if (allowAddItems()) {\n        <ax-button\n          [text]=\"'@platform-management:menu-management.actions.add-root.title' | translate | async\"\n          [look]=\"'solid'\"\n          [color]=\"'primary'\"\n          (onClick)=\"addRootMenuItem()\"\n        >\n          <ax-prefix>\n            <i class=\"fa-light fa-plus\"></i>\n          </ax-prefix>\n        </ax-button>\n      }\n\n      <div class=\"axp-menu-customizer__toolbar-spacer\"></div>\n\n      <ax-button\n        [text]=\"'@platform-management:menu-management.actions.collapse.title' | translate | async\"\n        [look]=\"'outline'\"\n        (onClick)=\"collapseAll()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-minus-square\"></i>\n        </ax-prefix>\n      </ax-button>\n\n      <ax-button\n        [text]=\"'@platform-management:menu-management.actions.expand.title' | translate | async\"\n        [look]=\"'outline'\"\n        (onClick)=\"expandAll()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-plus-square\"></i>\n        </ax-prefix>\n      </ax-button>\n\n      <ax-button\n        [text]=\"'@platform-management:menu-management.actions.reset.title' | translate | async\"\n        [look]=\"'outline'\"\n        [color]=\"'danger'\"\n        (onClick)=\"resetCustomizations()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-rotate-left\"></i>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  }\n\n  <!-- Menu Tree Content -->\n  <div class=\"axp-menu-customizer__container\">\n    <div class=\"axp-menu-customizer__tree\">\n      <ax-tree-view\n        [(datasource)]=\"treeNodes\"\n        [look]=\"'default'\"\n        [nodeTemplate]=\"itemTemplate\"\n        [selectMode]=\"'none'\"\n        [showIcons]=\"false\"\n        [showChildrenBadge]=\"false\"\n        [dragBehavior]=\"dragBehavior()\"\n        [dragArea]=\"dragArea()\"\n        (onItemsChange)=\"handleAfterDrop($event)\"\n      ></ax-tree-view>\n    </div>\n  </div>\n}\n\n<!-- Custom Item Template -->\n<ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n  @let nodeData = node['data'];\n  @let item = nodeData.menuItem;\n  @let metadata = nodeData.metadata;\n  <div\n    class=\"axp-menu-customizer__item\"\n    [class.axp-menu-customizer__item--hidden]=\"metadata.isHidden\"\n    [class.axp-menu-customizer__item--custom]=\"metadata.isCustom\"\n    [class.axp-menu-customizer__item--group]=\"item.type === 'group'\"\n  >\n    <!-- Icon (hidden for groups) -->\n    @if (item.icon && item.type !== 'group') {\n      <i class=\"axp-menu-customizer__item-icon\" [class]=\"item.icon\"></i>\n    }\n\n    <!-- Text or Info -->\n    @if (item.type === 'group') {\n      <!-- Group Heading -->\n      <span class=\"axp-menu-customizer__item-group\">\n        <i class=\"fa-light fa-layer-group\"></i>\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (item.type === 'break') {\n      <!-- Divider -->\n      <span class=\"axp-menu-customizer__item-divider\">\n        <i class=\"fa-light fa-minus\"></i>\n        {{ '@platform-management:menu-management.states.divider' | translate | async }}\n      </span>\n    } @else if (item.text) {\n      <!-- Regular Menu Item -->\n      <span class=\"axp-menu-customizer__item-text\">\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (item.path) {\n      <!-- Path-only Item -->\n      <span class=\"axp-menu-customizer__item-path\">\n        <i class=\"fa-light fa-link\"></i>\n        {{ item.path }}\n      </span>\n    }\n\n    <!-- Menu Name/Key -->\n    @if (item.name) {\n      <code class=\"axp-menu-customizer__item-name\">{{ item.name }}</code>\n    }\n\n    <!-- Status Badges -->\n    @if (metadata.isHidden) {\n      <ax-badge\n        [text]=\"('@platform-management:menu-management.states.hidden' | translate | async)!\"\n        color=\"danger\"\n      ></ax-badge>\n    } @else if (metadata.isCustom) {\n      <ax-badge\n        [text]=\"('@platform-management:menu-management.states.custom' | translate | async)!\"\n        color=\"success\"\n      ></ax-badge>\n    } @else if (metadata.isBuiltIn) {\n      <ax-badge\n        [text]=\"('@platform-management:menu-management.states.built-in' | translate | async)!\"\n        color=\"primary\"\n      ></ax-badge>\n    }\n\n    <!-- Actions Dropdown -->\n    <ax-button class=\"axp-menu-customizer__item-actions\" [look]=\"'blank'\" [size]=\"'sm'\" [iconOnly]=\"true\">\n      <ax-prefix>\n        <i class=\"fa-light fa-ellipsis-vertical\"></i>\n      </ax-prefix>\n\n      <ax-dropdown-panel #panel>\n        <ax-button-item-list>\n          <!-- Edit (only for items with names) -->\n          @if (item.name) {\n            <ax-button-item\n              [text]=\"('@general:actions.edit.title' | translate | async)!\"\n              (onClick)=\"onAction('edit', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-edit\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Show/Hide (only for items with names) -->\n          @if (item.name && metadata.isBuiltIn) {\n            @if (metadata.isHidden) {\n              <ax-button-item\n                [text]=\"('@platform-management:menu-management.actions.show.title' | translate | async)!\"\n                (onClick)=\"onAction('show', nodeData); panel.close()\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-eye\"></i>\n                </ax-prefix>\n              </ax-button-item>\n            } @else {\n              <ax-button-item\n                [text]=\"('@platform-management:menu-management.actions.hide.title' | translate | async)!\"\n                (onClick)=\"onAction('hide', nodeData); panel.close()\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-eye-slash\"></i>\n                </ax-prefix>\n              </ax-button-item>\n            }\n          }\n\n          @if (!item.path && (item.type === 'menu' || !item.type) && allowAddItems()) {\n            <!-- Add Child -->\n            <ax-button-item\n              [text]=\"('@platform-management:menu-management.actions.add-child.title' | translate | async)!\"\n              (onClick)=\"onAction('add-child', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-plus\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Delete (only for custom items with names) -->\n          @if (item.name && metadata.isCustom) {\n            <ax-divider></ax-divider>\n            <ax-button-item\n              [color]=\"'danger'\"\n              [text]=\"('@general:actions.delete.title' | translate | async)!\"\n              (onClick)=\"onAction('delete', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-trash\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Info message for items without names -->\n          @if (!item.name) {\n            <ax-divider></ax-divider>\n            <div class=\"ax-p-2 ax-text-xs ax-text-neutral-500 ax-italic\">\n              {{ '@platform-management:menu-management.messages.info.no-name' | translate | async }}\n            </div>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-panel>\n    </ax-button>\n  </div>\n</ng-template>\n", styles: [".axp-menu-customizer{display:flex;height:100%;flex-direction:column}.axp-menu-customizer__toolbar{display:flex;align-items:center;gap:.5rem;padding:1rem;border-bottom-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))}.axp-menu-customizer__toolbar-spacer{flex:1 1 0%}.axp-menu-customizer__container{display:flex;flex:1 1 0%;flex-direction:column;gap:1rem;overflow:auto;padding:1rem}.axp-menu-customizer__tree{display:flex;flex-direction:column;gap:.5rem}.axp-menu-customizer__item{display:flex;flex:1 1 0%;align-items:center;gap:1rem;border-radius:.375rem;padding:.5rem;border-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));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.axp-menu-customizer__item:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-menu-customizer__item--hidden{opacity:.5}.axp-menu-customizer__item--custom{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))}.axp-menu-customizer__item--group{padding-top:.75rem;padding-bottom:.75rem}.axp-menu-customizer__item-icon{display:flex;align-items:center;justify-content:center;height:1.5rem;width:1.5rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}.axp-menu-customizer__item-text{flex:1 1 0%;font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-menu-customizer__item-group,.axp-menu-customizer__item-divider,.axp-menu-customizer__item-path{display:flex;flex:1 1 0%;align-items:center;gap:.5rem;font-size:.75rem;line-height:1rem;font-style:italic;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-menu-customizer__item-divider i,.axp-menu-customizer__item-path i{--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-menu-customizer__item-name{display:flex;align-items:center;border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:400;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));white-space:nowrap;-webkit-user-select:all;user-select:all}.axp-menu-customizer__item-actions{margin-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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", "doubleClickDuration", "tooltipDelay"], outputs: ["datasourceChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXPMenuCustomizerComponent, isStandalone: true, selector: "axp-menu-customizer", inputs: { scopeKey: { classPropertyName: "scopeKey", publicName: "scopeKey", isSignal: true, isRequired: true, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, allowAddItems: { classPropertyName: "allowAddItems", publicName: "allowAddItems", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", cancelled: "cancelled" }, host: { classAttribute: "axp-menu-customizer" }, viewQueries: [{ propertyName: "tree", first: true, predicate: AXTreeViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- i18n path constants -->\n@let i18nBase = '@platform-management:menu-management';\n@let i18nEmptyStates = i18nBase + '.components.menu-list.empty-states';\n@let i18nActions = i18nBase + '.actions';\n\n<!-- Loading State -->\n@if (isLoading()) {\n  <axp-state-message\n    mode=\"loading\"\n    icon=\"fa-light fa-spinner-third fa-spin\"\n    [title]=\"(i18nEmptyStates + '.loading.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.loading.description' | translate | async)!\"\n  />\n}\n\n<!-- Error State -->\n@else if (hasError()) {\n  <axp-state-message\n    mode=\"error\"\n    icon=\"fa-light fa-circle-exclamation\"\n    [title]=\"(i18nEmptyStates + '.error.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.error.description' | translate | async)!\"\n  >\n    <ax-button\n      slot=\"actions\"\n      [text]=\"'@general:actions.retry.title' | translate | async\"\n      look=\"outline\"\n      color=\"primary\"\n      (onClick)=\"loadMenuItems()\"\n    >\n      <i class=\"fa-light fa-rotate-left\"></i>\n    </ax-button>\n  </axp-state-message>\n}\n\n<!-- Empty State -->\n@else if (showEmptyState()) {\n  <axp-state-message\n    mode=\"empty\"\n    icon=\"fa-light fa-bars\"\n    [title]=\"(i18nEmptyStates + '.no-data.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.no-data.description' | translate | async)!\"\n  >\n    @if (allowAddItems()) {\n      <ax-button\n        slot=\"actions\"\n        [text]=\"i18nActions + '.add-root.title' | translate | async\"\n        look=\"solid\"\n        color=\"primary\"\n        (onClick)=\"addRootMenuItem()\"\n      >\n        <i class=\"fa-light fa-plus\"></i>\n      </ax-button>\n    }\n  </axp-state-message>\n}\n\n<!-- Main Content -->\n@else if (showContent()) {\n  <!-- Toolbar -->\n  @if (showToolbar()) {\n    <div class=\"axp-menu-customizer__toolbar\">\n      @if (allowAddItems()) {\n        <ax-button\n          [text]=\"i18nActions + '.add-root.title' | translate | async\"\n          look=\"solid\"\n          color=\"primary\"\n          (onClick)=\"addRootMenuItem()\"\n        >\n          <ax-prefix>\n            <i class=\"fa-light fa-plus\"></i>\n          </ax-prefix>\n        </ax-button>\n      }\n\n      <div class=\"axp-menu-customizer__toolbar-spacer\"></div>\n      <!-- \n      <ax-button\n        [text]=\"i18nActions + '.collapse.title' | translate | async\"\n        look=\"outline\"\n        (onClick)=\"collapseAll()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-minus-square\"></i>\n        </ax-prefix>\n      </ax-button>\n\n      <ax-button\n        [text]=\"i18nActions + '.expand.title' | translate | async\"\n        look=\"outline\"\n        (onClick)=\"expandAll()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-plus-square\"></i>\n        </ax-prefix>\n      </ax-button> -->\n\n      <ax-button\n        [text]=\"i18nActions + '.reset.title' | translate | async\"\n        look=\"outline\"\n        color=\"danger\"\n        (onClick)=\"resetCustomizations()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-rotate-left\"></i>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  }\n\n  <!-- Menu Tree -->\n  <div class=\"axp-menu-customizer__container\">\n    <div class=\"axp-menu-customizer__tree\">\n      <ax-tree-view\n        [(datasource)]=\"treeNodes\"\n        look=\"default\"\n        [nodeTemplate]=\"itemTemplate\"\n        selectMode=\"none\"\n        [showIcons]=\"false\"\n        [showChildrenBadge]=\"false\"\n        [dragBehavior]=\"dragBehavior()\"\n        [dragArea]=\"dragArea()\"\n        (onBeforeDrop)=\"handleBeforeDrop($event)\"\n        (onOrderChange)=\"handleOrderChange($event)\"\n        (onMoveChange)=\"handleMoveChange($event)\"\n      />\n    </div>\n  </div>\n}\n\n<!-- Custom Item Template -->\n<ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n  @let nodeData = node['data'];\n  @let item = nodeData.menuItem;\n  @let metadata = nodeData.metadata;\n  @let isGroup = item.type === 'group';\n  @let isBreak = item.type === 'break';\n  @let isMenu = item.type === 'menu' || !item.type;\n  @let canAddChild = !item.path && isMenu && allowAddItems();\n  @let canToggleVisibility = item.name && metadata.isBuiltIn;\n  @let canDelete = item.name && metadata.isCustom;\n  @let i18nStates = '@platform-management:menu-management.states';\n\n  <div\n    class=\"axp-menu-customizer__item\"\n    [class.axp-menu-customizer__item--hidden]=\"metadata.isHidden\"\n    [class.axp-menu-customizer__item--custom]=\"metadata.isCustom\"\n    [class.axp-menu-customizer__item--group]=\"isGroup\"\n  >\n    <!-- Icon (hidden for groups) -->\n    @if (item.icon && !isGroup) {\n      <i class=\"axp-menu-customizer__item-icon\" [class]=\"item.icon\"></i>\n    }\n\n    <!-- Content based on item type -->\n    @if (isGroup) {\n      <span class=\"axp-menu-customizer__item-group\">\n        <i class=\"fa-light fa-layer-group\"></i>\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (isBreak) {\n      <span class=\"axp-menu-customizer__item-divider\">\n        <i class=\"fa-light fa-minus\"></i>\n        {{ i18nStates + '.divider' | translate | async }}\n      </span>\n    } @else if (item.text) {\n      <span class=\"axp-menu-customizer__item-text\">\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (item.path) {\n      <span class=\"axp-menu-customizer__item-path\">\n        <i class=\"fa-light fa-link\"></i>\n        {{ item.path }}\n      </span>\n    }\n\n    <!-- Menu Name/Key -->\n    @if (item.name) {\n      <code class=\"axp-menu-customizer__item-name\">{{ item.name }}</code>\n    }\n\n    <!-- Status Badges -->\n    @if (metadata.isHidden) {\n      <ax-badge [text]=\"(i18nStates + '.hidden' | translate | async)!\" color=\"danger\" />\n    } @else if (metadata.isCustom) {\n      <ax-badge [text]=\"(i18nStates + '.custom' | translate | async)!\" color=\"success\" />\n    } @else if (metadata.isBuiltIn) {\n      <ax-badge [text]=\"(i18nStates + '.built-in' | translate | async)!\" color=\"primary\" />\n    }\n\n    <!-- Actions Dropdown -->\n    <ax-button class=\"axp-menu-customizer__item-actions\" look=\"blank\" size=\"sm\" [iconOnly]=\"true\">\n      <ax-prefix>\n        <i class=\"fa-light fa-ellipsis-vertical\"></i>\n      </ax-prefix>\n\n      <ax-dropdown-panel #panel>\n        <ax-button-item-list>\n          <!-- Edit (only for items with names) -->\n          @if (item.name) {\n            <ax-button-item\n              [text]=\"('@general:actions.edit.title' | translate | async)!\"\n              (onClick)=\"onAction('edit', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-edit\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Show/Hide (only for built-in items with names) -->\n          @if (canToggleVisibility) {\n            @if (metadata.isHidden) {\n              <ax-button-item\n                [text]=\"(i18nActions + '.show.title' | translate | async)!\"\n                (onClick)=\"onAction('show', nodeData); panel.close()\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-eye\"></i>\n                </ax-prefix>\n              </ax-button-item>\n            } @else {\n              <ax-button-item\n                [text]=\"(i18nActions + '.hide.title' | translate | async)!\"\n                (onClick)=\"onAction('hide', nodeData); panel.close()\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-eye-slash\"></i>\n                </ax-prefix>\n              </ax-button-item>\n            }\n          }\n\n          <!-- Add Child -->\n          @if (canAddChild) {\n            <ax-button-item\n              [text]=\"(i18nActions + '.add-child.title' | translate | async)!\"\n              (onClick)=\"onAction('add-child', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-plus\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Delete (only for custom items with names) -->\n          @if (canDelete) {\n            <ax-divider />\n            <ax-button-item\n              color=\"danger\"\n              [text]=\"('@general:actions.delete.title' | translate | async)!\"\n              (onClick)=\"onAction('delete', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-trash\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Info message for items without names -->\n          @if (!item.name) {\n            <ax-divider />\n            <div class=\"ax-p-2 ax-text-xs ax-text-neutral-500 ax-italic\">\n              {{ i18nBase + '.messages.info.no-name' | translate | async }}\n            </div>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-panel>\n    </ax-button>\n  </div>\n</ng-template>\n", styles: [".axp-menu-customizer{display:flex;height:100%;min-height:0px;flex-direction:column}.axp-menu-customizer__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:1rem;border-bottom-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));flex-shrink:0}.axp-menu-customizer__toolbar-spacer{min-width:1rem;flex:1 1 0%}.axp-menu-customizer__container{display:flex;flex-direction:column;gap:1rem;padding:1rem;min-height:0px;flex:1 1 0%;overflow:auto}.axp-menu-customizer__tree{display:flex;flex-direction:column;gap:.5rem}.axp-menu-customizer__tree ax-tree-view{flex:1 1 0%}.axp-menu-customizer__item{display:flex;flex:1 1 0%;align-items:center;gap:.75rem;border-radius:.375rem;padding:.5rem .75rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;animation-duration:.15s}.axp-menu-customizer__item:hover{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}.axp-menu-customizer__item--hidden{opacity:.5}.axp-menu-customizer__item--hidden .axp-menu-customizer__item-text,.axp-menu-customizer__item--hidden .axp-menu-customizer__item-icon{text-decoration-line:line-through}.axp-menu-customizer__item--custom{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-200),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-primary-50),.3)}.axp-menu-customizer__item--group{padding-top:.75rem;padding-bottom:.75rem;--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}.axp-menu-customizer__item-icon{display:flex;align-items:center;justify-content:center;height:1.5rem;width:1.5rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-600),var(--tw-text-opacity, 1));flex-shrink:0}.axp-menu-customizer__item-text{min-width:0px;flex:1 1 0%;font-size:.875rem;line-height:1.25rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-menu-customizer__item-group{display:flex;flex:1 1 0%;align-items:center;gap:.5rem;font-size:.75rem;line-height:1rem;text-transform:uppercase;font-style:italic;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));letter-spacing:.025em}.axp-menu-customizer__item-group i{--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-menu-customizer__item-divider,.axp-menu-customizer__item-path{display:flex;flex:1 1 0%;align-items:center;gap:.5rem;font-size:.75rem;line-height:1rem;font-style:italic;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));min-width:0px}.axp-menu-customizer__item-divider i,.axp-menu-customizer__item-path i{flex-shrink:0;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-menu-customizer__item-name{display:inline-flex;align-items:center;border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:400;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));-webkit-user-select:all;user-select:all;max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}.axp-menu-customizer__item-actions{margin-left:auto;flex-shrink:0;opacity:.6;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;animation-duration:.15s}.axp-menu-customizer__item:hover .axp-menu-customizer__item-actions{opacity:1}\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.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: i1$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { 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", "doubleClickDuration", "tooltipDelay"], outputs: ["datasourceChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXPMenuCustomizerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axp-menu-customizer', imports: [
-                        CommonModule,
                         AXButtonModule,
                         AXDecoratorModule,
                         AXDropdownButtonModule,
@@ -3275,7 +3436,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
                         AXTreeViewComponent,
                         AXPStateMessageComponent,
                         AXBadgeModule,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'axp-menu-customizer' }, template: "@if (isLoading()) {\n  <!-- Loading State -->\n  <axp-state-message\n    mode=\"loading\"\n    icon=\"fa-light fa-spinner-third fa-spin\"\n    [title]=\"\n      ('@platform-management:menu-management.components.menu-list.empty-states.loading.title' | translate | async)!\n    \"\n    [description]=\"\n      ('@platform-management:menu-management.components.menu-list.empty-states.loading.description'\n        | translate\n        | async)!\n    \"\n  />\n} @else if (error()) {\n  <!-- Error State -->\n  <axp-state-message\n    mode=\"error\"\n    icon=\"fa-light fa-circle-exclamation\"\n    [title]=\"\n      ('@platform-management:menu-management.components.menu-list.empty-states.error.title' | translate | async)!\n    \"\n    [description]=\"\n      ('@platform-management:menu-management.components.menu-list.empty-states.error.description' | translate | async)!\n    \"\n  >\n    <ax-button\n      slot=\"actions\"\n      [text]=\"'@general:actions.retry.title' | translate | async\"\n      [look]=\"'outline'\"\n      [color]=\"'primary'\"\n      (onClick)=\"loadMenuItems()\"\n    >\n      <i class=\"fa-light fa-rotate-left\"></i>\n    </ax-button>\n  </axp-state-message>\n} @else if (treeNodes().length === 0) {\n  <!-- Empty State -->\n  <axp-state-message\n    mode=\"empty\"\n    icon=\"fa-light fa-bars\"\n    [title]=\"\n      ('@platform-management:menu-management.components.menu-list.empty-states.no-data.title' | translate | async)!\n    \"\n    [description]=\"\n      ('@platform-management:menu-management.components.menu-list.empty-states.no-data.description'\n        | translate\n        | async)!\n    \"\n  >\n    @if (allowAddItems()) {\n      <ax-button\n        slot=\"actions\"\n        [text]=\"'@platform-management:menu-management.actions.add-root.title' | translate | async\"\n        [look]=\"'solid'\"\n        [color]=\"'primary'\"\n        (onClick)=\"addRootMenuItem()\"\n      >\n        <i class=\"fa-light fa-plus\"></i>\n      </ax-button>\n    }\n  </axp-state-message>\n} @else {\n  <!-- Toolbar -->\n  @if (showToolbar()) {\n    <div class=\"axp-menu-customizer__toolbar\">\n      @if (allowAddItems()) {\n        <ax-button\n          [text]=\"'@platform-management:menu-management.actions.add-root.title' | translate | async\"\n          [look]=\"'solid'\"\n          [color]=\"'primary'\"\n          (onClick)=\"addRootMenuItem()\"\n        >\n          <ax-prefix>\n            <i class=\"fa-light fa-plus\"></i>\n          </ax-prefix>\n        </ax-button>\n      }\n\n      <div class=\"axp-menu-customizer__toolbar-spacer\"></div>\n\n      <ax-button\n        [text]=\"'@platform-management:menu-management.actions.collapse.title' | translate | async\"\n        [look]=\"'outline'\"\n        (onClick)=\"collapseAll()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-minus-square\"></i>\n        </ax-prefix>\n      </ax-button>\n\n      <ax-button\n        [text]=\"'@platform-management:menu-management.actions.expand.title' | translate | async\"\n        [look]=\"'outline'\"\n        (onClick)=\"expandAll()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-plus-square\"></i>\n        </ax-prefix>\n      </ax-button>\n\n      <ax-button\n        [text]=\"'@platform-management:menu-management.actions.reset.title' | translate | async\"\n        [look]=\"'outline'\"\n        [color]=\"'danger'\"\n        (onClick)=\"resetCustomizations()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-rotate-left\"></i>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  }\n\n  <!-- Menu Tree Content -->\n  <div class=\"axp-menu-customizer__container\">\n    <div class=\"axp-menu-customizer__tree\">\n      <ax-tree-view\n        [(datasource)]=\"treeNodes\"\n        [look]=\"'default'\"\n        [nodeTemplate]=\"itemTemplate\"\n        [selectMode]=\"'none'\"\n        [showIcons]=\"false\"\n        [showChildrenBadge]=\"false\"\n        [dragBehavior]=\"dragBehavior()\"\n        [dragArea]=\"dragArea()\"\n        (onItemsChange)=\"handleAfterDrop($event)\"\n      ></ax-tree-view>\n    </div>\n  </div>\n}\n\n<!-- Custom Item Template -->\n<ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n  @let nodeData = node['data'];\n  @let item = nodeData.menuItem;\n  @let metadata = nodeData.metadata;\n  <div\n    class=\"axp-menu-customizer__item\"\n    [class.axp-menu-customizer__item--hidden]=\"metadata.isHidden\"\n    [class.axp-menu-customizer__item--custom]=\"metadata.isCustom\"\n    [class.axp-menu-customizer__item--group]=\"item.type === 'group'\"\n  >\n    <!-- Icon (hidden for groups) -->\n    @if (item.icon && item.type !== 'group') {\n      <i class=\"axp-menu-customizer__item-icon\" [class]=\"item.icon\"></i>\n    }\n\n    <!-- Text or Info -->\n    @if (item.type === 'group') {\n      <!-- Group Heading -->\n      <span class=\"axp-menu-customizer__item-group\">\n        <i class=\"fa-light fa-layer-group\"></i>\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (item.type === 'break') {\n      <!-- Divider -->\n      <span class=\"axp-menu-customizer__item-divider\">\n        <i class=\"fa-light fa-minus\"></i>\n        {{ '@platform-management:menu-management.states.divider' | translate | async }}\n      </span>\n    } @else if (item.text) {\n      <!-- Regular Menu Item -->\n      <span class=\"axp-menu-customizer__item-text\">\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (item.path) {\n      <!-- Path-only Item -->\n      <span class=\"axp-menu-customizer__item-path\">\n        <i class=\"fa-light fa-link\"></i>\n        {{ item.path }}\n      </span>\n    }\n\n    <!-- Menu Name/Key -->\n    @if (item.name) {\n      <code class=\"axp-menu-customizer__item-name\">{{ item.name }}</code>\n    }\n\n    <!-- Status Badges -->\n    @if (metadata.isHidden) {\n      <ax-badge\n        [text]=\"('@platform-management:menu-management.states.hidden' | translate | async)!\"\n        color=\"danger\"\n      ></ax-badge>\n    } @else if (metadata.isCustom) {\n      <ax-badge\n        [text]=\"('@platform-management:menu-management.states.custom' | translate | async)!\"\n        color=\"success\"\n      ></ax-badge>\n    } @else if (metadata.isBuiltIn) {\n      <ax-badge\n        [text]=\"('@platform-management:menu-management.states.built-in' | translate | async)!\"\n        color=\"primary\"\n      ></ax-badge>\n    }\n\n    <!-- Actions Dropdown -->\n    <ax-button class=\"axp-menu-customizer__item-actions\" [look]=\"'blank'\" [size]=\"'sm'\" [iconOnly]=\"true\">\n      <ax-prefix>\n        <i class=\"fa-light fa-ellipsis-vertical\"></i>\n      </ax-prefix>\n\n      <ax-dropdown-panel #panel>\n        <ax-button-item-list>\n          <!-- Edit (only for items with names) -->\n          @if (item.name) {\n            <ax-button-item\n              [text]=\"('@general:actions.edit.title' | translate | async)!\"\n              (onClick)=\"onAction('edit', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-edit\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Show/Hide (only for items with names) -->\n          @if (item.name && metadata.isBuiltIn) {\n            @if (metadata.isHidden) {\n              <ax-button-item\n                [text]=\"('@platform-management:menu-management.actions.show.title' | translate | async)!\"\n                (onClick)=\"onAction('show', nodeData); panel.close()\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-eye\"></i>\n                </ax-prefix>\n              </ax-button-item>\n            } @else {\n              <ax-button-item\n                [text]=\"('@platform-management:menu-management.actions.hide.title' | translate | async)!\"\n                (onClick)=\"onAction('hide', nodeData); panel.close()\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-eye-slash\"></i>\n                </ax-prefix>\n              </ax-button-item>\n            }\n          }\n\n          @if (!item.path && (item.type === 'menu' || !item.type) && allowAddItems()) {\n            <!-- Add Child -->\n            <ax-button-item\n              [text]=\"('@platform-management:menu-management.actions.add-child.title' | translate | async)!\"\n              (onClick)=\"onAction('add-child', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-plus\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Delete (only for custom items with names) -->\n          @if (item.name && metadata.isCustom) {\n            <ax-divider></ax-divider>\n            <ax-button-item\n              [color]=\"'danger'\"\n              [text]=\"('@general:actions.delete.title' | translate | async)!\"\n              (onClick)=\"onAction('delete', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-trash\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Info message for items without names -->\n          @if (!item.name) {\n            <ax-divider></ax-divider>\n            <div class=\"ax-p-2 ax-text-xs ax-text-neutral-500 ax-italic\">\n              {{ '@platform-management:menu-management.messages.info.no-name' | translate | async }}\n            </div>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-panel>\n    </ax-button>\n  </div>\n</ng-template>\n", styles: [".axp-menu-customizer{display:flex;height:100%;flex-direction:column}.axp-menu-customizer__toolbar{display:flex;align-items:center;gap:.5rem;padding:1rem;border-bottom-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1))}.axp-menu-customizer__toolbar-spacer{flex:1 1 0%}.axp-menu-customizer__container{display:flex;flex:1 1 0%;flex-direction:column;gap:1rem;overflow:auto;padding:1rem}.axp-menu-customizer__tree{display:flex;flex-direction:column;gap:.5rem}.axp-menu-customizer__item{display:flex;flex:1 1 0%;align-items:center;gap:1rem;border-radius:.375rem;padding:.5rem;border-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));transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.axp-menu-customizer__item:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-menu-customizer__item--hidden{opacity:.5}.axp-menu-customizer__item--custom{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))}.axp-menu-customizer__item--group{padding-top:.75rem;padding-bottom:.75rem}.axp-menu-customizer__item-icon{display:flex;align-items:center;justify-content:center;height:1.5rem;width:1.5rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}.axp-menu-customizer__item-text{flex:1 1 0%;font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-menu-customizer__item-group,.axp-menu-customizer__item-divider,.axp-menu-customizer__item-path{display:flex;flex:1 1 0%;align-items:center;gap:.5rem;font-size:.75rem;line-height:1rem;font-style:italic;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-menu-customizer__item-divider i,.axp-menu-customizer__item-path i{--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-menu-customizer__item-name{display:flex;align-items:center;border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:400;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));white-space:nowrap;-webkit-user-select:all;user-select:all}.axp-menu-customizer__item-actions{margin-left:.5rem}\n"] }]
+                        AsyncPipe,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'axp-menu-customizer' }, template: "<!-- i18n path constants -->\n@let i18nBase = '@platform-management:menu-management';\n@let i18nEmptyStates = i18nBase + '.components.menu-list.empty-states';\n@let i18nActions = i18nBase + '.actions';\n\n<!-- Loading State -->\n@if (isLoading()) {\n  <axp-state-message\n    mode=\"loading\"\n    icon=\"fa-light fa-spinner-third fa-spin\"\n    [title]=\"(i18nEmptyStates + '.loading.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.loading.description' | translate | async)!\"\n  />\n}\n\n<!-- Error State -->\n@else if (hasError()) {\n  <axp-state-message\n    mode=\"error\"\n    icon=\"fa-light fa-circle-exclamation\"\n    [title]=\"(i18nEmptyStates + '.error.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.error.description' | translate | async)!\"\n  >\n    <ax-button\n      slot=\"actions\"\n      [text]=\"'@general:actions.retry.title' | translate | async\"\n      look=\"outline\"\n      color=\"primary\"\n      (onClick)=\"loadMenuItems()\"\n    >\n      <i class=\"fa-light fa-rotate-left\"></i>\n    </ax-button>\n  </axp-state-message>\n}\n\n<!-- Empty State -->\n@else if (showEmptyState()) {\n  <axp-state-message\n    mode=\"empty\"\n    icon=\"fa-light fa-bars\"\n    [title]=\"(i18nEmptyStates + '.no-data.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.no-data.description' | translate | async)!\"\n  >\n    @if (allowAddItems()) {\n      <ax-button\n        slot=\"actions\"\n        [text]=\"i18nActions + '.add-root.title' | translate | async\"\n        look=\"solid\"\n        color=\"primary\"\n        (onClick)=\"addRootMenuItem()\"\n      >\n        <i class=\"fa-light fa-plus\"></i>\n      </ax-button>\n    }\n  </axp-state-message>\n}\n\n<!-- Main Content -->\n@else if (showContent()) {\n  <!-- Toolbar -->\n  @if (showToolbar()) {\n    <div class=\"axp-menu-customizer__toolbar\">\n      @if (allowAddItems()) {\n        <ax-button\n          [text]=\"i18nActions + '.add-root.title' | translate | async\"\n          look=\"solid\"\n          color=\"primary\"\n          (onClick)=\"addRootMenuItem()\"\n        >\n          <ax-prefix>\n            <i class=\"fa-light fa-plus\"></i>\n          </ax-prefix>\n        </ax-button>\n      }\n\n      <div class=\"axp-menu-customizer__toolbar-spacer\"></div>\n      <!-- \n      <ax-button\n        [text]=\"i18nActions + '.collapse.title' | translate | async\"\n        look=\"outline\"\n        (onClick)=\"collapseAll()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-minus-square\"></i>\n        </ax-prefix>\n      </ax-button>\n\n      <ax-button\n        [text]=\"i18nActions + '.expand.title' | translate | async\"\n        look=\"outline\"\n        (onClick)=\"expandAll()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-plus-square\"></i>\n        </ax-prefix>\n      </ax-button> -->\n\n      <ax-button\n        [text]=\"i18nActions + '.reset.title' | translate | async\"\n        look=\"outline\"\n        color=\"danger\"\n        (onClick)=\"resetCustomizations()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-rotate-left\"></i>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  }\n\n  <!-- Menu Tree -->\n  <div class=\"axp-menu-customizer__container\">\n    <div class=\"axp-menu-customizer__tree\">\n      <ax-tree-view\n        [(datasource)]=\"treeNodes\"\n        look=\"default\"\n        [nodeTemplate]=\"itemTemplate\"\n        selectMode=\"none\"\n        [showIcons]=\"false\"\n        [showChildrenBadge]=\"false\"\n        [dragBehavior]=\"dragBehavior()\"\n        [dragArea]=\"dragArea()\"\n        (onBeforeDrop)=\"handleBeforeDrop($event)\"\n        (onOrderChange)=\"handleOrderChange($event)\"\n        (onMoveChange)=\"handleMoveChange($event)\"\n      />\n    </div>\n  </div>\n}\n\n<!-- Custom Item Template -->\n<ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n  @let nodeData = node['data'];\n  @let item = nodeData.menuItem;\n  @let metadata = nodeData.metadata;\n  @let isGroup = item.type === 'group';\n  @let isBreak = item.type === 'break';\n  @let isMenu = item.type === 'menu' || !item.type;\n  @let canAddChild = !item.path && isMenu && allowAddItems();\n  @let canToggleVisibility = item.name && metadata.isBuiltIn;\n  @let canDelete = item.name && metadata.isCustom;\n  @let i18nStates = '@platform-management:menu-management.states';\n\n  <div\n    class=\"axp-menu-customizer__item\"\n    [class.axp-menu-customizer__item--hidden]=\"metadata.isHidden\"\n    [class.axp-menu-customizer__item--custom]=\"metadata.isCustom\"\n    [class.axp-menu-customizer__item--group]=\"isGroup\"\n  >\n    <!-- Icon (hidden for groups) -->\n    @if (item.icon && !isGroup) {\n      <i class=\"axp-menu-customizer__item-icon\" [class]=\"item.icon\"></i>\n    }\n\n    <!-- Content based on item type -->\n    @if (isGroup) {\n      <span class=\"axp-menu-customizer__item-group\">\n        <i class=\"fa-light fa-layer-group\"></i>\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (isBreak) {\n      <span class=\"axp-menu-customizer__item-divider\">\n        <i class=\"fa-light fa-minus\"></i>\n        {{ i18nStates + '.divider' | translate | async }}\n      </span>\n    } @else if (item.text) {\n      <span class=\"axp-menu-customizer__item-text\">\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (item.path) {\n      <span class=\"axp-menu-customizer__item-path\">\n        <i class=\"fa-light fa-link\"></i>\n        {{ item.path }}\n      </span>\n    }\n\n    <!-- Menu Name/Key -->\n    @if (item.name) {\n      <code class=\"axp-menu-customizer__item-name\">{{ item.name }}</code>\n    }\n\n    <!-- Status Badges -->\n    @if (metadata.isHidden) {\n      <ax-badge [text]=\"(i18nStates + '.hidden' | translate | async)!\" color=\"danger\" />\n    } @else if (metadata.isCustom) {\n      <ax-badge [text]=\"(i18nStates + '.custom' | translate | async)!\" color=\"success\" />\n    } @else if (metadata.isBuiltIn) {\n      <ax-badge [text]=\"(i18nStates + '.built-in' | translate | async)!\" color=\"primary\" />\n    }\n\n    <!-- Actions Dropdown -->\n    <ax-button class=\"axp-menu-customizer__item-actions\" look=\"blank\" size=\"sm\" [iconOnly]=\"true\">\n      <ax-prefix>\n        <i class=\"fa-light fa-ellipsis-vertical\"></i>\n      </ax-prefix>\n\n      <ax-dropdown-panel #panel>\n        <ax-button-item-list>\n          <!-- Edit (only for items with names) -->\n          @if (item.name) {\n            <ax-button-item\n              [text]=\"('@general:actions.edit.title' | translate | async)!\"\n              (onClick)=\"onAction('edit', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-edit\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Show/Hide (only for built-in items with names) -->\n          @if (canToggleVisibility) {\n            @if (metadata.isHidden) {\n              <ax-button-item\n                [text]=\"(i18nActions + '.show.title' | translate | async)!\"\n                (onClick)=\"onAction('show', nodeData); panel.close()\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-eye\"></i>\n                </ax-prefix>\n              </ax-button-item>\n            } @else {\n              <ax-button-item\n                [text]=\"(i18nActions + '.hide.title' | translate | async)!\"\n                (onClick)=\"onAction('hide', nodeData); panel.close()\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-eye-slash\"></i>\n                </ax-prefix>\n              </ax-button-item>\n            }\n          }\n\n          <!-- Add Child -->\n          @if (canAddChild) {\n            <ax-button-item\n              [text]=\"(i18nActions + '.add-child.title' | translate | async)!\"\n              (onClick)=\"onAction('add-child', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-plus\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Delete (only for custom items with names) -->\n          @if (canDelete) {\n            <ax-divider />\n            <ax-button-item\n              color=\"danger\"\n              [text]=\"('@general:actions.delete.title' | translate | async)!\"\n              (onClick)=\"onAction('delete', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-trash\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Info message for items without names -->\n          @if (!item.name) {\n            <ax-divider />\n            <div class=\"ax-p-2 ax-text-xs ax-text-neutral-500 ax-italic\">\n              {{ i18nBase + '.messages.info.no-name' | translate | async }}\n            </div>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-panel>\n    </ax-button>\n  </div>\n</ng-template>\n", styles: [".axp-menu-customizer{display:flex;height:100%;min-height:0px;flex-direction:column}.axp-menu-customizer__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:1rem;border-bottom-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));flex-shrink:0}.axp-menu-customizer__toolbar-spacer{min-width:1rem;flex:1 1 0%}.axp-menu-customizer__container{display:flex;flex-direction:column;gap:1rem;padding:1rem;min-height:0px;flex:1 1 0%;overflow:auto}.axp-menu-customizer__tree{display:flex;flex-direction:column;gap:.5rem}.axp-menu-customizer__tree ax-tree-view{flex:1 1 0%}.axp-menu-customizer__item{display:flex;flex:1 1 0%;align-items:center;gap:.75rem;border-radius:.375rem;padding:.5rem .75rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;animation-duration:.15s}.axp-menu-customizer__item:hover{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}.axp-menu-customizer__item--hidden{opacity:.5}.axp-menu-customizer__item--hidden .axp-menu-customizer__item-text,.axp-menu-customizer__item--hidden .axp-menu-customizer__item-icon{text-decoration-line:line-through}.axp-menu-customizer__item--custom{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-200),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-primary-50),.3)}.axp-menu-customizer__item--group{padding-top:.75rem;padding-bottom:.75rem;--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}.axp-menu-customizer__item-icon{display:flex;align-items:center;justify-content:center;height:1.5rem;width:1.5rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-600),var(--tw-text-opacity, 1));flex-shrink:0}.axp-menu-customizer__item-text{min-width:0px;flex:1 1 0%;font-size:.875rem;line-height:1.25rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-menu-customizer__item-group{display:flex;flex:1 1 0%;align-items:center;gap:.5rem;font-size:.75rem;line-height:1rem;text-transform:uppercase;font-style:italic;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));letter-spacing:.025em}.axp-menu-customizer__item-group i{--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-menu-customizer__item-divider,.axp-menu-customizer__item-path{display:flex;flex:1 1 0%;align-items:center;gap:.5rem;font-size:.75rem;line-height:1rem;font-style:italic;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));min-width:0px}.axp-menu-customizer__item-divider i,.axp-menu-customizer__item-path i{flex-shrink:0;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-menu-customizer__item-name{display:inline-flex;align-items:center;border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:400;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));-webkit-user-select:all;user-select:all;max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}.axp-menu-customizer__item-actions{margin-left:auto;flex-shrink:0;opacity:.6;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;animation-duration:.15s}.axp-menu-customizer__item:hover .axp-menu-customizer__item-actions{opacity:1}\n"] }]
         }], propDecorators: { scopeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "scopeKey", required: true }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], allowAddItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAddItems", required: false }] }], dragBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragBehavior", required: false }] }], dragArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragArea", required: false }] }], saved: [{ type: i0.Output, args: ["saved"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], tree: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXTreeViewComponent), { isSignal: true }] }] } });
 
 //#region ----   Component Definition   ----