@acorex/modules 20.7.8 → 20.7.10

package/fesm2022/acorex-modules-platform-management-menu-list.component-BxGLun0f.mjs

@@ -0,0 +1,519 @@
+import * as i4 from '@acorex/components/badge';
+import { AXBadgeModule } from '@acorex/components/badge';
+import * as i1 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i2 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXDialogService } from '@acorex/components/dialog';
+import * as i3 from '@acorex/components/dropdown';
+import { AXDropdownModule } from '@acorex/components/dropdown';
+import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import { AXToastService } from '@acorex/components/toast';
+import { AXTreeViewComponent } from '@acorex/components/tree-view';
+import * as i6 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import { AXPPlatformScope } from '@acorex/platform/core';
+import { AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
+import { AXPThemeLayoutBlockComponent, AXPStateMessageComponent } from '@acorex/platform/layout/components';
+import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex/platform/layout/views';
+import * as i5 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, viewChild, signal, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Subject, takeUntil } from 'rxjs';
+import { A as AXPMenuManagementService } from './acorex-modules-platform-management-acorex-modules-platform-management-BAIx0BJe.mjs';
+
+//#region ----   Menu List Component   ----
+class AXMMenuListComponent extends AXPPageLayoutBaseComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----   Dependencies   ----
+        this.menuManagementService = inject(AXPMenuManagementService);
+        this.layoutBuilder = inject(AXPLayoutBuilderService);
+        this.dialogService = inject(AXDialogService);
+        this.toastService = inject(AXToastService);
+        this.translationService = inject(AXTranslationService);
+        this.route = inject(ActivatedRoute);
+        //#endregion
+        //#region ----   Component State   ----
+        this.tree = viewChild(AXTreeViewComponent, ...(ngDevMode ? [{ debugName: "tree" }] : []));
+        this.treeNodes = signal([], ...(ngDevMode ? [{ debugName: "treeNodes" }] : []));
+        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.error = signal('', ...(ngDevMode ? [{ debugName: "error" }] : []));
+        this.currentScope = signal(AXPPlatformScope.User, ...(ngDevMode ? [{ debugName: "currentScope" }] : []));
+        this.isSyncing = false; // Prevent concurrent sync operations
+        this.destroy$ = new Subject(); // For subscription cleanup
+    }
+    //#endregion
+    //#region ----   Lifecycle   ----
+    async ngOnInit() {
+        await super.ngOnInit();
+        // Get scope from route (with memory leak prevention)
+        this.route.params.pipe(takeUntil(this.destroy$)).subscribe(async (params) => {
+            const scope = params['scope'];
+            if (scope) {
+                this.currentScope.set(scope);
+                await this.loadMenuItems();
+                this.recompute(); // Update page header after loading
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    //#endregion
+    //#region ----   Event Handlers   ----
+    /**
+     * Handle before drop validation
+     */
+    async handleBeforeDrop(e) {
+        console.log('[handleBeforeDrop] Event triggered!', {
+            movedNode: e.movedNode?.['id'],
+            previousParent: e.previousParent?.['id'],
+            currentParent: e.currentParent?.['id'],
+            previousIndex: e.previousIndex,
+            currentIndex: e.currentIndex,
+        });
+        const targetParent = e.currentParent?.['data'] || null;
+        // 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;
+        }
+        // Note: Circular reference validation is handled by the tree component itself
+        // Additional validation can be added here if needed based on business rules
+    }
+    /**
+     * Handle after drop event to sync changes
+     * The event contains information about the moved node and its new position
+     */
+    async handleAfterDrop(event) {
+        console.log('[handleAfterDrop] Event triggered!', {
+            movedNode: event.node?.['id'],
+            movedNodeData: event.node?.['data'],
+            previousParent: event.previousParent?.['id'],
+            currentParent: event.currentParent?.['id'],
+            previousIndex: event.previousIndex,
+            currentIndex: event.currentIndex,
+        });
+        // Check what the tree component has
+        const treeComp = this.tree();
+        if (treeComp) {
+            console.log('[handleAfterDrop] Tree component datasource:', treeComp.datasource);
+        }
+        // Check our signal
+        console.log('[handleAfterDrop] Our treeNodes signal:', this.treeNodes());
+        await this.syncTreeChanges();
+    }
+    //#endregion
+    //#region ----   Data Loading   ----
+    /**
+     * Load menu tree for current scope
+     */
+    async loadMenuItems() {
+        try {
+            this.isLoading.set(true);
+            this.error.set('');
+            const treeNodes = await this.menuManagementService.getMenuTreeByScope(this.currentScope());
+            this.treeNodes.set(treeNodes);
+            this.recompute();
+        }
+        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);
+        }
+    }
+    /**
+     * Sync tree changes to backend
+     */
+    async syncTreeChanges() {
+        // Prevent concurrent sync operations
+        if (this.isSyncing) {
+            return;
+        }
+        try {
+            this.isSyncing = true;
+            const scope = this.currentScope();
+            // 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();
+            console.log('[syncTreeChanges] nodes count:', nodes?.length);
+            // Log detailed node structure
+            const logNode = (n, level = 0) => ({
+                id: n['id'],
+                title: n['title'],
+                level,
+                childrenCount: n['children']?.length ?? 0,
+                children: n['children']?.map((c) => logNode(c, level + 1)) ?? [],
+            });
+            console.log('[syncTreeChanges] Full tree structure:', JSON.stringify(nodes?.map(n => logNode(n)), null, 2));
+            if (!nodes || nodes.length === 0) {
+                console.log('[syncTreeChanges] No nodes to sync');
+                return;
+            }
+            await this.menuManagementService.syncTreeChangesByScope(scope, nodes);
+            const message = await this.translationService.translateAsync('@platform-management:menu-management.messages.success.reorder');
+            this.toastService.success(message);
+        }
+        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);
+        }
+        finally {
+            this.isSyncing = false;
+        }
+    }
+    //#endregion
+    //#region ----   Page Layout Interface   ----
+    /**
+     * Get page title
+     */
+    async getPageTitle() {
+        const scopeName = this.currentScope();
+        const scopeKey = scopeName === AXPPlatformScope.User ? 'user' : 'tenant';
+        return this.translationService.translateAsync(`@platform-management:menu-management.menus.${scopeKey}.title`);
+    }
+    /**
+     * Get page description
+     */
+    async getPageDescription() {
+        return this.translationService.translateAsync('@platform-management:menu-management.components.menu-list.description');
+    }
+    /**
+     * Get primary menu items (actions)
+     */
+    async getPrimaryMenuItems() {
+        return [
+            {
+                title: await this.translationService.translateAsync('@platform-management:menu-management.actions.add-root.title'),
+                icon: 'fa-light fa-plus',
+                color: 'primary',
+                command: { name: 'add-root' },
+            },
+        ];
+    }
+    /**
+     * Get secondary menu items
+     */
+    async getSecondaryMenuItems() {
+        return [
+            {
+                title: await this.translationService.translateAsync('@platform-management:menu-management.actions.collapse.title'),
+                icon: 'fa-light fa-minus-square',
+                command: { name: 'collapse' },
+            },
+            {
+                title: await this.translationService.translateAsync('@platform-management:menu-management.actions.expand.title'),
+                icon: 'fa-light fa-plus-square',
+                command: { name: 'expand' },
+                break: true,
+            },
+            {
+                title: await this.translationService.translateAsync('@platform-management:menu-management.actions.reset.title'),
+                icon: 'fa-light fa-rotate-left',
+                color: 'danger',
+                command: { name: 'reset' },
+            },
+        ];
+    }
+    /**
+     * Execute commands from page actions
+     */
+    async execute(command) {
+        switch (command.name) {
+            case 'add-root':
+                await this.addRootMenuItem();
+                break;
+            case 'collapse':
+                this.tree()?.collapseAll();
+                break;
+            case 'expand':
+                this.tree()?.expandAll();
+                break;
+            case 'reset':
+                await this.resetCustomizations();
+                break;
+        }
+    }
+    //#endregion
+    //#region ----   Action Handlers   ----
+    /**
+     * Handle menu item action
+     */
+    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;
+        }
+    }
+    /**
+     * Add new root menu item
+     */
+    async addRootMenuItem() {
+        await this.showMenuItemDialog(null, null);
+    }
+    /**
+     * Add new child menu item
+     */
+    async addChildMenuItem(parentNodeData) {
+        await this.showMenuItemDialog(null, parentNodeData.menuItem.name);
+    }
+    /**
+     * Reset customizations
+     */
+    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);
+        if (!confirmed)
+            return;
+        try {
+            // Reset customizations for current scope
+            await this.menuManagementService.resetCustomizationsByScope(this.currentScope());
+            const message = await this.translationService.translateAsync('@platform-management:menu-management.messages.success.reset');
+            this.toastService.success(message);
+        }
+        catch (error) {
+            console.error('Failed to reset customizations:', error);
+            const message = await this.translationService.translateAsync('@platform-management:menu-management.messages.error.reset');
+            this.toastService.danger(message);
+        }
+        finally {
+            // Reload anyway to show current state
+            await this.loadMenuItems();
+        }
+    }
+    //#endregion
+    //#region ----   Menu Item Actions   ----
+    /**
+     * Show menu item
+     */
+    async showMenuItem(nodeData) {
+        await this.executeMenuAction(() => this.menuManagementService.showMenuItemByScope(this.currentScope(), nodeData.menuItem.name), '@platform-management:menu-management.messages.success.show', '@platform-management:menu-management.messages.error.show');
+    }
+    /**
+     * Hide menu item
+     */
+    async hideMenuItem(nodeData) {
+        await this.executeMenuAction(() => this.menuManagementService.hideMenuItemByScope(this.currentScope(), nodeData.menuItem.name), '@platform-management:menu-management.messages.success.hide', '@platform-management:menu-management.messages.error.hide');
+    }
+    /**
+     * Edit menu item
+     */
+    async editMenuItem(nodeData) {
+        await this.showMenuItemDialog(nodeData);
+    }
+    /**
+     * Delete custom menu item
+     */
+    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);
+        if (!confirmed)
+            return;
+        try {
+            const item = nodeData.menuItem;
+            if (!item.name)
+                return;
+            await this.menuManagementService.deleteCustomMenuItemByScope(this.currentScope(), item.name);
+            const message = await this.translationService.translateAsync('@platform-management:menu-management.messages.success.delete');
+            this.toastService.success(message);
+            await this.loadMenuItems();
+        }
+        catch (error) {
+            const message = await this.translationService.translateAsync('@platform-management:menu-management.messages.error.delete');
+            this.toastService.danger(message);
+        }
+    }
+    //#endregion
+    //#region ----   Dialog Helpers   ----
+    /**
+     * Show menu item dialog (add/edit)
+     */
+    async showMenuItemDialog(nodeData, parentName = null) {
+        const item = nodeData?.menuItem;
+        const isEdit = !!item;
+        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 dialogRef = await this.layoutBuilder
+            .create()
+            .dialog((dialog) => {
+            dialog
+                .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,
+                    });
+                });
+            })
+                .setActions((actions) => {
+                actions.cancel('@general:actions.cancel.title').submit('@general:actions.save.title');
+            });
+        })
+            .show();
+        const action = dialogRef.action();
+        if (action === 'cancel') {
+            dialogRef.close();
+            return;
+        }
+        const formData = dialogRef.context();
+        try {
+            if (isEdit && item?.name) {
+                // Update existing item
+                if (nodeData?.metadata?.isCustom) {
+                    await this.menuManagementService.updateCustomMenuItemByScope(this.currentScope(), item.name, formData);
+                }
+                else {
+                    await this.menuManagementService.updateMenuPropertiesByScope(this.currentScope(), item.name, formData);
+                }
+            }
+            else {
+                // Add new custom item
+                const newItem = {
+                    name: formData.name,
+                    text: formData.text,
+                    icon: formData.icon,
+                    path: formData.path,
+                    priority: formData.priority,
+                    description: formData.description,
+                };
+                // If parent is specified, add as child
+                if (parentName) {
+                    // Add custom item as child of parent
+                    await this.menuManagementService.addCustomMenuItemByScope(this.currentScope(), newItem, parentName);
+                }
+                else {
+                    // Add as root level item
+                    await this.menuManagementService.addCustomMenuItemByScope(this.currentScope(), newItem, null);
+                }
+            }
+            const message = await this.translationService.translateAsync('@platform-management:menu-management.messages.success.save');
+            this.toastService.success(message);
+            await this.loadMenuItems();
+            dialogRef.close();
+        }
+        catch (error) {
+            const message = await this.translationService.translateAsync('@platform-management:menu-management.messages.error.save');
+            this.toastService.danger(message);
+        }
+    }
+    /**
+     * Execute a menu action with common error handling
+     */
+    async executeMenuAction(action, successMessageKey, errorMessageKey) {
+        try {
+            await action();
+            const message = await this.translationService.translateAsync(successMessageKey);
+            this.toastService.success(message);
+            await this.loadMenuItems();
+        }
+        catch (error) {
+            console.error('Menu action failed:', error);
+            const message = await this.translationService.translateAsync(errorMessageKey);
+            this.toastService.danger(message);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXMMenuListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AXMMenuListComponent, isStandalone: true, selector: "axm-menu-list", host: { classAttribute: "axm-menu-list-page" }, providers: [
+            {
+                provide: AXPPageLayoutBase,
+                useExisting: AXMMenuListComponent,
+            },
+        ], viewQueries: [{ propertyName: "tree", first: true, predicate: AXTreeViewComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout>\n  <axp-page-content>\n    @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'\n            | translate\n            | 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        <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      </axp-state-message>\n    } @else {\n      <!-- Menu Tree Content -->\n      <div class=\"axm-menu-list__container\">\n        <!-- Menu Tree -->\n        <div class=\"axm-menu-list__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]=\"'move'\"\n            [dragArea]=\"'handler'\"\n            (onBeforeDrop)=\"handleBeforeDrop($event)\"\n            (onItemsChange)=\"handleAfterDrop($event)\"\n          ></ax-tree-view>\n        </div>\n      </div>\n    }\n  </axp-page-content>\n</axp-page-layout>\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=\"axm-menu-tree-item__wrapper\"\n    [class.axm-menu-tree-item__wrapper--hidden]=\"metadata.isHidden\"\n    [class.axm-menu-tree-item__wrapper--custom]=\"metadata.isCustom\"\n    [class.axm-menu-tree-item__wrapper--group]=\"item.type === 'group'\"\n  >\n    <!-- Icon (hidden for groups) -->\n    @if (item.icon && item.type !== 'group') {\n      <i class=\"axm-menu-tree-item__icon\" [class]=\"item.icon\"></i>\n    }\n\n    <!-- Text or Info -->\n    @if (item.type === 'group') {\n      <!-- Group Heading -->\n      <span class=\"axm-menu-tree-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=\"axm-menu-tree-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=\"axm-menu-tree-item__text\">\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (item.path) {\n      <!-- Path-only Item -->\n      <span class=\"axm-menu-tree-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=\"axm-menu-tree-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=\"axm-menu-tree-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)) {\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: [".axm-menu-list-page .axm-menu-list__container{display:flex;flex-direction:column;gap:1rem;padding:1.5rem}.axm-menu-list-page .axm-menu-list__tree{display:flex;flex-direction:column;gap:.5rem}.axm-menu-list-page .axm-menu-tree-item__wrapper{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}.axm-menu-list-page .axm-menu-tree-item__wrapper: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))}.axm-menu-list-page .axm-menu-tree-item__wrapper--hidden{opacity:.5}.axm-menu-list-page .axm-menu-tree-item__wrapper--custom{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))}.axm-menu-list-page .axm-menu-tree-item__wrapper--group{padding-top:.75rem;padding-bottom:.75rem}.axm-menu-list-page .axm-menu-tree-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))}.axm-menu-list-page .axm-menu-tree-item__text{flex:1 1 0%;font-size:.875rem;line-height:1.25rem;font-weight:500}.axm-menu-list-page .axm-menu-tree-item__group,.axm-menu-list-page .axm-menu-tree-item__divider,.axm-menu-list-page .axm-menu-tree-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))}.axm-menu-list-page .axm-menu-tree-item__divider i,.axm-menu-list-page .axm-menu-tree-item__path i{--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axm-menu-list-page .axm-menu-tree-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}.axm-menu-list-page .axm-menu-tree-item__actions{margin-left:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.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.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.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: i3.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: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i4.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AXMMenuListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-menu-list', imports: [
+                        CommonModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXDropdownButtonModule,
+                        AXDropdownModule,
+                        AXTranslationModule,
+                        AXTreeViewComponent,
+                        AXPPageLayoutComponent,
+                        AXPThemeLayoutBlockComponent,
+                        AXPStateMessageComponent,
+                        AXBadgeModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        {
+                            provide: AXPPageLayoutBase,
+                            useExisting: AXMMenuListComponent,
+                        },
+                    ], host: { class: 'axm-menu-list-page' }, template: "<axp-page-layout>\n  <axp-page-content>\n    @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'\n            | translate\n            | 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        <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      </axp-state-message>\n    } @else {\n      <!-- Menu Tree Content -->\n      <div class=\"axm-menu-list__container\">\n        <!-- Menu Tree -->\n        <div class=\"axm-menu-list__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]=\"'move'\"\n            [dragArea]=\"'handler'\"\n            (onBeforeDrop)=\"handleBeforeDrop($event)\"\n            (onItemsChange)=\"handleAfterDrop($event)\"\n          ></ax-tree-view>\n        </div>\n      </div>\n    }\n  </axp-page-content>\n</axp-page-layout>\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=\"axm-menu-tree-item__wrapper\"\n    [class.axm-menu-tree-item__wrapper--hidden]=\"metadata.isHidden\"\n    [class.axm-menu-tree-item__wrapper--custom]=\"metadata.isCustom\"\n    [class.axm-menu-tree-item__wrapper--group]=\"item.type === 'group'\"\n  >\n    <!-- Icon (hidden for groups) -->\n    @if (item.icon && item.type !== 'group') {\n      <i class=\"axm-menu-tree-item__icon\" [class]=\"item.icon\"></i>\n    }\n\n    <!-- Text or Info -->\n    @if (item.type === 'group') {\n      <!-- Group Heading -->\n      <span class=\"axm-menu-tree-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=\"axm-menu-tree-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=\"axm-menu-tree-item__text\">\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (item.path) {\n      <!-- Path-only Item -->\n      <span class=\"axm-menu-tree-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=\"axm-menu-tree-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=\"axm-menu-tree-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)) {\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: [".axm-menu-list-page .axm-menu-list__container{display:flex;flex-direction:column;gap:1rem;padding:1.5rem}.axm-menu-list-page .axm-menu-list__tree{display:flex;flex-direction:column;gap:.5rem}.axm-menu-list-page .axm-menu-tree-item__wrapper{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}.axm-menu-list-page .axm-menu-tree-item__wrapper: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))}.axm-menu-list-page .axm-menu-tree-item__wrapper--hidden{opacity:.5}.axm-menu-list-page .axm-menu-tree-item__wrapper--custom{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-500),var(--tw-border-opacity, 1))}.axm-menu-list-page .axm-menu-tree-item__wrapper--group{padding-top:.75rem;padding-bottom:.75rem}.axm-menu-list-page .axm-menu-tree-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))}.axm-menu-list-page .axm-menu-tree-item__text{flex:1 1 0%;font-size:.875rem;line-height:1.25rem;font-weight:500}.axm-menu-list-page .axm-menu-tree-item__group,.axm-menu-list-page .axm-menu-tree-item__divider,.axm-menu-list-page .axm-menu-tree-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))}.axm-menu-list-page .axm-menu-tree-item__divider i,.axm-menu-list-page .axm-menu-tree-item__path i{--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axm-menu-list-page .axm-menu-tree-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}.axm-menu-list-page .axm-menu-tree-item__actions{margin-left:.5rem}\n"] }]
+        }], propDecorators: { tree: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXTreeViewComponent), { isSignal: true }] }] } });
+
+export { AXMMenuListComponent };
+//# sourceMappingURL=acorex-modules-platform-management-menu-list.component-BxGLun0f.mjs.map