@acorex/platform 20.6.0-next.10 → 20.6.0-next.11

package/fesm2022/acorex-platform-themes-default.mjs

@@ -235,10 +235,10 @@ class AXPRootLayoutMenuComponent {
         this.settingService = inject(AXPSettingService);
         this.badgeVisible = signal(true, ...(ngDevMode ? [{ debugName: "badgeVisible" }] : []));
         // Debug: Track menu items changes
-        effect(() => {
-            const items = this.menuStore.items();
-            console.log('🎯 Sidebar menu items updated:', items.map(i => ({ name: i.name, priority: i.priority })));
-        });
+        // effect(() => {
+        //   const items = this.menuStore.items();
+        //   console.log('🎯 Sidebar menu items updated:', items.map(i => ({ name: i.name, priority: i.priority })));
+        // });
     }
     async ngOnInit() {
         this.badgeVisible.set(await this.settingService.scope(AXPPlatformScope.User).get(AXPThemeLayoutSetting.MenuBadgeVisible));
@@ -249,10 +249,11 @@ class AXPRootLayoutMenuComponent {
             }
         });
     }
-    onMenuItemClick(item) {
-        if (!item.children?.length) {
-            this.menuStore.executeCommand(item);
+    onMenuItemClick(item, hasRouterLink) {
+        if (hasRouterLink || item.children?.length) {
+            return;
         }
+        this.menuStore.executeCommand(item);
     }
     sort(items) {
         return sortBy(items, [(c) => c.priority ?? 0, (c) => c.text]);
@@ -260,8 +261,108 @@ class AXPRootLayoutMenuComponent {
     getMenuBadge(item) {
         return AXPMenuBadgeHelper.getTotalCount(item, this.badgeService);
     }
+    //#region ----   Menu Navigation Helpers   ----
+    /**
+     * Builds a UrlTree that can be consumed by the routerLink directive when the menu item targets
+     * an internal route. When the item does not represent an internal route, null is returned so the
+     * command execution pipeline remains responsible for navigation.
+     */
+    getRouterLink(item) {
+        const navigation = this.extractRouterNavigation(item);
+        if (!navigation) {
+            return null;
+        }
+        if (!this.isRouterLinkCompatible(navigation)) {
+            return null;
+        }
+        const normalizedPath = this.normalizeRouterPath(navigation.path);
+        try {
+            return this.router.parseUrl(normalizedPath);
+        }
+        catch (error) {
+            console.warn('Failed to create router link for menu item.', { item, error });
+            return null;
+        }
+    }
+    /**
+     * Extracts internal navigation data regardless of whether it is provided via the legacy `path`
+     * property, a direct navigate command, or the execution command wrapper.
+     */
+    extractRouterNavigation(item) {
+        if (item.path) {
+            return { path: item.path };
+        }
+        const command = item.command;
+        if (!command) {
+            return null;
+        }
+        const navigateCommand = command;
+        if (navigateCommand?.type === 'router' && typeof navigateCommand.options?.path === 'string') {
+            return {
+                path: navigateCommand.options.path,
+                extras: navigateCommand.options.extras,
+            };
+        }
+        const executeCommand = command;
+        if (executeCommand?.options && typeof executeCommand.options === 'object') {
+            const commandOptions = executeCommand.options;
+            if (commandOptions?.type === 'router') {
+                const routerOptions = commandOptions.options ?? commandOptions;
+                if (typeof routerOptions?.path === 'string') {
+                    return {
+                        path: routerOptions.path,
+                        extras: routerOptions.extras,
+                    };
+                }
+            }
+            if (typeof commandOptions?.path === 'string') {
+                return { path: commandOptions.path };
+            }
+        }
+        return null;
+    }
+    /**
+     * Determines whether routerLink can safely be used based on the target path and navigation
+     * extras. If the navigation requires additional runtime behaviour (e.g., opening in a new tab),
+     * we fallback to the imperative command pipeline.
+     */
+    isRouterLinkCompatible(navigation) {
+        if (!navigation.path) {
+            return false;
+        }
+        if (this.isExternalNavigation(navigation.path)) {
+            return false;
+        }
+        const extras = navigation.extras;
+        if (!extras) {
+            return true;
+        }
+        if (extras.target === 'blank') {
+            return false;
+        }
+        const unsupportedKeys = ['skipLocationChange', 'replaceUrl', 'state'];
+        return !unsupportedKeys.some((key) => extras[key] !== undefined);
+    }
+    /**
+     * Ensures router links include a leading slash while preserving any query parameters or
+     * fragments present in the original path.
+     */
+    normalizeRouterPath(path) {
+        const trimmed = path.trim();
+        if (!trimmed.length) {
+            return trimmed;
+        }
+        if (trimmed.startsWith('/') || trimmed.startsWith('?') || trimmed.startsWith('#')) {
+            return trimmed;
+        }
+        return `/${trimmed}`;
+    }
+    isExternalNavigation(path) {
+        const lowerPath = path.trim().toLowerCase();
+        return lowerPath.startsWith('http://') || lowerPath.startsWith('https://');
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPRootLayoutMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPRootLayoutMenuComponent, isStandalone: true, selector: "axp-side-menu", ngImport: i0, template: "<ax-side-menu look=\"pills\">\n  @for (item of sort(menuStore.items()); track item) {\n    <ng-container [ngTemplateOutlet]=\"recursiveMenu\" [ngTemplateOutletContext]=\"{ item: item }\"> </ng-container>\n  }\n</ax-side-menu>\n<ng-template #recursiveMenu let-item=\"item\">\n  @if (item.type == 'group') {\n    <ax-title *permission=\"item.data?.requiredPermission\">{{ item.text | translate | async }}</ax-title>\n  } @else if (item.type == 'break') {\n    <ax-divider></ax-divider>\n  } @else {\n    <ax-side-menu-item\n      [attr.id]=\"'axp-menu-item-' + (item.name || item.text)\"\n      *permission=\"item.data?.requiredPermission\"\n      (onClick)=\"onMenuItemClick(item)\"\n      [active]=\"item === menuStore.selectedMenuItem().item\"\n      [isCollapsed]=\"!menuStore.isItemOpen(item)\"\n    >\n      <ax-prefix>\n        <ax-icon [class]=\"item.icon\" class=\"fa-fw\"></ax-icon>\n      </ax-prefix>\n      <span>{{ item.text | translate | async }}</span>\n      @if (item.children?.length) {\n        <ng-container>\n          @for (child of sort(item.children); track $index) {\n            <ng-container [ngTemplateOutlet]=\"recursiveMenu\" [ngTemplateOutletContext]=\"{ item: child }\">\n            </ng-container>\n          }\n        </ng-container>\n      }\n      <ax-suffix>\n        @if (badgeVisible()) {\n          <ax-badge [axp-task-badge]=\"getMenuBadge(item)()\" color=\"secondary\"></ax-badge>\n        }\n      </ax-suffix>\n    </ax-side-menu-item>\n  }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXSideMenuModule }, { kind: "component", type: i2$2.AXSideMenuComponent, selector: "ax-side-menu", inputs: ["items", "look", "location"], outputs: ["itemsChange"] }, { kind: "component", type: i2$2.AXSideMenuItemComponent, selector: "ax-side-menu-item", inputs: ["disabled", "text", "active", "isLoading", "isCollapsed", "toggleOnClick", "href", "routerLink", "routerLinkActive", "routerLinkActiveOptions", "target"], outputs: ["textChange", "activeChange", "isLoadingChange", "isCollapsedChange", "onClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXPTaskBadgeDirective, selector: "[axp-task-badge]", inputs: ["badgeKey", "axp-task-badge"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i4.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPAuthModule }, { kind: "directive", type: i5$1.AXPPermissionDirective, selector: "[permission]", inputs: ["permission", "permissionElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPRootLayoutMenuComponent, isStandalone: true, selector: "axp-side-menu", ngImport: i0, template: "<ax-side-menu look=\"pills\">\n  @for (item of sort(menuStore.items()); track item) {\n  <ng-container [ngTemplateOutlet]=\"recursiveMenu\" [ngTemplateOutletContext]=\"{ item: item }\"> </ng-container>\n  }\n</ax-side-menu>\n<ng-template #recursiveMenu let-item=\"item\">\n  @if (item.type == 'group') {\n  <ax-title *permission=\"item.data?.requiredPermission\">{{ item.text | translate | async }}</ax-title>\n  } @else if (item.type == 'break') {\n  <ax-divider></ax-divider>\n  } @else {\n  @let routerLinkValue = getRouterLink(item);\n  @if (routerLinkValue) {\n  <ax-side-menu-item [attr.id]=\"'axp-menu-item-' + (item.name || item.text)\" *permission=\"item.data?.requiredPermission\"\n    (onClick)=\"onMenuItemClick(item, true)\" [routerLink]=\"routerLinkValue\"\n    [active]=\"item === menuStore.selectedMenuItem().item\" [isCollapsed]=\"!menuStore.isItemOpen(item)\">\n    <ax-prefix>\n      <ax-icon [class]=\"item.icon\" class=\"fa-fw\"></ax-icon>\n    </ax-prefix>\n    <span>{{ item.text | translate | async }}</span>\n    @if (item.children?.length) {\n    <ng-container>\n      @for (child of sort(item.children); track $index) {\n      <ng-container [ngTemplateOutlet]=\"recursiveMenu\" [ngTemplateOutletContext]=\"{ item: child }\">\n      </ng-container>\n      }\n    </ng-container>\n    }\n    <ax-suffix>\n      @if (badgeVisible()) {\n      <ax-badge [axp-task-badge]=\"getMenuBadge(item)()\" color=\"secondary\"></ax-badge>\n      }\n    </ax-suffix>\n  </ax-side-menu-item>\n  } @else {\n  <ax-side-menu-item [attr.id]=\"'axp-menu-item-' + (item.name || item.text)\" *permission=\"item.data?.requiredPermission\"\n    (onClick)=\"onMenuItemClick(item)\" [active]=\"item === menuStore.selectedMenuItem().item\"\n    [isCollapsed]=\"!menuStore.isItemOpen(item)\">\n    <ax-prefix>\n      <ax-icon [class]=\"item.icon\" class=\"fa-fw\"></ax-icon>\n    </ax-prefix>\n    <span>{{ item.text | translate | async }}</span>\n    @if (item.children?.length) {\n    <ng-container>\n      @for (child of sort(item.children); track $index) {\n      <ng-container [ngTemplateOutlet]=\"recursiveMenu\" [ngTemplateOutletContext]=\"{ item: child }\">\n      </ng-container>\n      }\n    </ng-container>\n    }\n    <ax-suffix>\n      @if (badgeVisible()) {\n      <ax-badge [axp-task-badge]=\"getMenuBadge(item)()\" color=\"secondary\"></ax-badge>\n      }\n    </ax-suffix>\n  </ax-side-menu-item>\n  }\n  }\n</ng-template>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXSideMenuModule }, { kind: "component", type: i2$2.AXSideMenuComponent, selector: "ax-side-menu", inputs: ["items", "look", "location"], outputs: ["itemsChange"] }, { kind: "component", type: i2$2.AXSideMenuItemComponent, selector: "ax-side-menu-item", inputs: ["disabled", "text", "active", "isLoading", "isCollapsed", "toggleOnClick", "href", "routerLink", "routerLinkActive", "routerLinkActiveOptions", "target"], outputs: ["textChange", "activeChange", "isLoadingChange", "isCollapsedChange", "onClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXPTaskBadgeDirective, selector: "[axp-task-badge]", inputs: ["badgeKey", "axp-task-badge"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i4.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPAuthModule }, { kind: "directive", type: i5$1.AXPPermissionDirective, selector: "[permission]", inputs: ["permission", "permissionElse"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPRootLayoutMenuComponent, decorators: [{
             type: Component,
@@ -273,7 +374,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                         AXPTaskBadgeDirective,
                         AXBadgeModule,
                         AXPAuthModule,
-                    ], template: "<ax-side-menu look=\"pills\">\n  @for (item of sort(menuStore.items()); track item) {\n    <ng-container [ngTemplateOutlet]=\"recursiveMenu\" [ngTemplateOutletContext]=\"{ item: item }\"> </ng-container>\n  }\n</ax-side-menu>\n<ng-template #recursiveMenu let-item=\"item\">\n  @if (item.type == 'group') {\n    <ax-title *permission=\"item.data?.requiredPermission\">{{ item.text | translate | async }}</ax-title>\n  } @else if (item.type == 'break') {\n    <ax-divider></ax-divider>\n  } @else {\n    <ax-side-menu-item\n      [attr.id]=\"'axp-menu-item-' + (item.name || item.text)\"\n      *permission=\"item.data?.requiredPermission\"\n      (onClick)=\"onMenuItemClick(item)\"\n      [active]=\"item === menuStore.selectedMenuItem().item\"\n      [isCollapsed]=\"!menuStore.isItemOpen(item)\"\n    >\n      <ax-prefix>\n        <ax-icon [class]=\"item.icon\" class=\"fa-fw\"></ax-icon>\n      </ax-prefix>\n      <span>{{ item.text | translate | async }}</span>\n      @if (item.children?.length) {\n        <ng-container>\n          @for (child of sort(item.children); track $index) {\n            <ng-container [ngTemplateOutlet]=\"recursiveMenu\" [ngTemplateOutletContext]=\"{ item: child }\">\n            </ng-container>\n          }\n        </ng-container>\n      }\n      <ax-suffix>\n        @if (badgeVisible()) {\n          <ax-badge [axp-task-badge]=\"getMenuBadge(item)()\" color=\"secondary\"></ax-badge>\n        }\n      </ax-suffix>\n    </ax-side-menu-item>\n  }\n</ng-template>\n" }]
+                    ], template: "<ax-side-menu look=\"pills\">\n  @for (item of sort(menuStore.items()); track item) {\n  <ng-container [ngTemplateOutlet]=\"recursiveMenu\" [ngTemplateOutletContext]=\"{ item: item }\"> </ng-container>\n  }\n</ax-side-menu>\n<ng-template #recursiveMenu let-item=\"item\">\n  @if (item.type == 'group') {\n  <ax-title *permission=\"item.data?.requiredPermission\">{{ item.text | translate | async }}</ax-title>\n  } @else if (item.type == 'break') {\n  <ax-divider></ax-divider>\n  } @else {\n  @let routerLinkValue = getRouterLink(item);\n  @if (routerLinkValue) {\n  <ax-side-menu-item [attr.id]=\"'axp-menu-item-' + (item.name || item.text)\" *permission=\"item.data?.requiredPermission\"\n    (onClick)=\"onMenuItemClick(item, true)\" [routerLink]=\"routerLinkValue\"\n    [active]=\"item === menuStore.selectedMenuItem().item\" [isCollapsed]=\"!menuStore.isItemOpen(item)\">\n    <ax-prefix>\n      <ax-icon [class]=\"item.icon\" class=\"fa-fw\"></ax-icon>\n    </ax-prefix>\n    <span>{{ item.text | translate | async }}</span>\n    @if (item.children?.length) {\n    <ng-container>\n      @for (child of sort(item.children); track $index) {\n      <ng-container [ngTemplateOutlet]=\"recursiveMenu\" [ngTemplateOutletContext]=\"{ item: child }\">\n      </ng-container>\n      }\n    </ng-container>\n    }\n    <ax-suffix>\n      @if (badgeVisible()) {\n      <ax-badge [axp-task-badge]=\"getMenuBadge(item)()\" color=\"secondary\"></ax-badge>\n      }\n    </ax-suffix>\n  </ax-side-menu-item>\n  } @else {\n  <ax-side-menu-item [attr.id]=\"'axp-menu-item-' + (item.name || item.text)\" *permission=\"item.data?.requiredPermission\"\n    (onClick)=\"onMenuItemClick(item)\" [active]=\"item === menuStore.selectedMenuItem().item\"\n    [isCollapsed]=\"!menuStore.isItemOpen(item)\">\n    <ax-prefix>\n      <ax-icon [class]=\"item.icon\" class=\"fa-fw\"></ax-icon>\n    </ax-prefix>\n    <span>{{ item.text | translate | async }}</span>\n    @if (item.children?.length) {\n    <ng-container>\n      @for (child of sort(item.children); track $index) {\n      <ng-container [ngTemplateOutlet]=\"recursiveMenu\" [ngTemplateOutletContext]=\"{ item: child }\">\n      </ng-container>\n      }\n    </ng-container>\n    }\n    <ax-suffix>\n      @if (badgeVisible()) {\n      <ax-badge [axp-task-badge]=\"getMenuBadge(item)()\" color=\"secondary\"></ax-badge>\n      }\n    </ax-suffix>\n  </ax-side-menu-item>\n  }\n  }\n</ng-template>" }]
         }], ctorParameters: () => [] });
 
 class AXPHorizontalMenuComponent {
@@ -638,7 +739,7 @@ class AXPDefaultThemeModule {
                                 ///
                                 modify: () => import('./acorex-platform-themes-default-entity-master-modify-view.component-BTA6h7Xd.mjs').then((c) => c.AXPEntityMasterModifyViewComponent),
                                 //
-                                list: () => import('./acorex-platform-themes-default-entity-master-list-view.component-CD7rJIMh.mjs').then((c) => c.AXPEntityMasterListViewComponent),
+                                list: () => import('./acorex-platform-themes-default-entity-master-list-view.component-xq3eQ6t2.mjs').then((c) => c.AXPEntityMasterListViewComponent),
                             },
                         },
                     };
@@ -674,7 +775,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImpo
                                             ///
                                             modify: () => import('./acorex-platform-themes-default-entity-master-modify-view.component-BTA6h7Xd.mjs').then((c) => c.AXPEntityMasterModifyViewComponent),
                                             //
-                                            list: () => import('./acorex-platform-themes-default-entity-master-list-view.component-CD7rJIMh.mjs').then((c) => c.AXPEntityMasterListViewComponent),
+                                            list: () => import('./acorex-platform-themes-default-entity-master-list-view.component-xq3eQ6t2.mjs').then((c) => c.AXPEntityMasterListViewComponent),
                                         },
                                     },
                                 };