@volo/ngx-lepton-x.core 2.1.0 → 2.2.0

package/fesm2020/volo-ngx-lepton-x.core.mjs

@@ -1,14 +1,21 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, NgModule, Component, ViewEncapsulation, Input, Directive, Optional, Pipe, EventEmitter, Output, TemplateRef, ContentChild, inject, SecurityContext, HostListener, APP_INITIALIZER, Injector, SkipSelf } from '@angular/core';
+import { inject, InjectionToken, Injectable, Inject, NgModule, Component, ViewEncapsulation, Input, Directive, Optional, Pipe, EventEmitter, Output, TemplateRef, ContentChild, SecurityContext, HostListener, APP_INITIALIZER, Injector, SkipSelf, ElementRef } from '@angular/core';
+import * as i1$1 from '@angular/router';
+import { Router, NavigationEnd, NavigationError, NavigationCancel, RouterModule } from '@angular/router';
 import * as i1 from '@angular/common';
 import { CommonModule, DOCUMENT } from '@angular/common';
 import { map, distinctUntilChanged, filter, take, tap, switchMap, startWith, distinctUntilKeyChanged } from 'rxjs/operators';
-import { BehaviorSubject, Subject, of, from, Observable, EMPTY, combineLatest, fromEvent, Subscription } from 'rxjs';
+import { BehaviorSubject, Subject, Observable, from, of, EMPTY, filter as filter$1, combineLatest, fromEvent, Subscription } from 'rxjs';
 import { FormsModule } from '@angular/forms';
-import * as i1$1 from '@angular/router';
-import { NavigationEnd, RouterModule } from '@angular/router';
+import PerfectScrollbar from 'perfect-scrollbar';
 import { DomSanitizer } from '@angular/platform-browser';
 
+class LpxPerfectScrollbar {
+    constructor() {
+        this.router = inject(Router);
+    }
+}
+
 const LPX_LANGUAGE = new InjectionToken('LPX_LANGUAGE');
 
 class DataStore {
@@ -294,6 +301,57 @@ const CONTENT_BEFORE_ROUTES = new InjectionToken('CONTENT_BEFORE_ROUTES');
 const CONTENT_AFTER_ROUTES = new InjectionToken('CONTENT_AFTER_ROUTES');
 const LPX_MENU_ITEMS = new InjectionToken('LPX_MENU_ITEMS');
 
+function sortItems(a, b) {
+    if (!a.order) {
+        return 1;
+    }
+    if (!b.order) {
+        return -1;
+    }
+    return a.order - b.order;
+}
+function flatArrayDeepToObject(arr) {
+    return arr.reduce((acc, curr) => ({
+        ...acc,
+        ...(Array.isArray(curr) ? flatArrayDeepToObject(curr) : curr),
+    }), {});
+}
+function getStream$(source) {
+    return source instanceof Observable
+        ? source
+        : source instanceof Promise
+            ? from(source)
+            : of(source);
+}
+function isNullOrUndefined(obj) {
+    return obj === null || obj === undefined;
+}
+function isArray(obj) {
+    return Array.isArray(obj);
+}
+
+function createGroupMap(list, othersGroupKey, skipGroupCheck = false) {
+    if (!skipGroupCheck &&
+        (!isArray(list) || !list.some((node) => Boolean(node.group))))
+        return undefined;
+    const mapGroup = new Map();
+    for (const node of list) {
+        const group = node?.group || othersGroupKey;
+        if (typeof group !== 'string') {
+            throw new Error(`Invalid group: ${group}`);
+        }
+        const items = mapGroup.get(group) || [];
+        items.push(node);
+        mapGroup.set(group, items);
+    }
+    return mapGroup;
+}
+function getItemsFromGroup(list, pred) {
+    return list?.reduce((acc, { items }) => [...acc, ...(pred ? items.filter(pred) : items)], []);
+}
+
+const OTHERS_GROUP_KEY = 'AbpUi::OthersGroup';
+
 class NavbarService {
     constructor(menuItems, route, router) {
         this.menuItems = menuItems;
@@ -301,6 +359,15 @@ class NavbarService {
         this.router = router;
         this.store = new DataStore(this.addContainerLinks(this.menuItems));
         this.navbarItems$ = this.store.sliceState((state) => state);
+        this.groupedNavbarItems$ = this.store
+            .sliceState((state) => state)
+            .pipe(filter((navItems) => navItems.some((f) => !!f.group)), map((items) => {
+            const map = createGroupMap(items, OTHERS_GROUP_KEY) || [];
+            return Array.from(map, ([group, items]) => ({
+                group,
+                items,
+            }));
+        }));
         this.expandItemByLink$().pipe(take(1)).subscribe();
     }
     addNavbarItems(...menuItems) {
@@ -519,29 +586,6 @@ function checkType(value) {
     }
 }
 
-function sortItems(a, b) {
-    if (!a.order) {
-        return 1;
-    }
-    if (!b.order) {
-        return -1;
-    }
-    return a.order - b.order;
-}
-function flatArrayDeepToObject(arr) {
-    return arr.reduce((acc, curr) => ({
-        ...acc,
-        ...(Array.isArray(curr) ? flatArrayDeepToObject(curr) : curr),
-    }), {});
-}
-function getStream$(source) {
-    return source instanceof Observable
-        ? source
-        : source instanceof Promise
-            ? from(source)
-            : of(source);
-}
-
 class UserProfileService {
     constructor() {
         this.store = new DataStore({});
@@ -680,6 +724,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 }]
         }], ctorParameters: function () { return []; } });
 
+class LpxPerfectScrollbarService extends LpxPerfectScrollbar {
+    setElement(value) {
+        if (value) {
+            this.elementRef = value;
+        }
+    }
+    setOptions(value) {
+        if (value) {
+            this.options = value;
+        }
+    }
+    createScrollbar() {
+        this.perfectScrollbar = new PerfectScrollbar(this.elementRef.nativeElement, this.options);
+    }
+    onResize() {
+        this.perfectScrollbar.update();
+    }
+    afterViewInit() {
+        this.createScrollbar();
+        this.subscription?.unsubscribe();
+        this.subscription = this.router.events
+            .pipe(filter$1((event) => event instanceof NavigationEnd ||
+            event instanceof NavigationError ||
+            event instanceof NavigationCancel))
+            .subscribe(() => {
+            const { element } = this.perfectScrollbar;
+            const { topAfterNavigate, leftAfterNavigate } = this.options || {};
+            element.scrollTop = topAfterNavigate || 0;
+            element.scrollLeft = leftAfterNavigate || 0;
+        });
+    }
+    ngOnDestroy() {
+        this.subscription?.unsubscribe();
+    }
+}
+LpxPerfectScrollbarService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxPerfectScrollbarService, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+LpxPerfectScrollbarService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxPerfectScrollbarService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: LpxPerfectScrollbarService, decorators: [{
+            type: Injectable
+        }] });
+
 class TranslatePipe {
     constructor(lpxThemeTranslateService) {
         this.lpxThemeTranslateService = lpxThemeTranslateService;
@@ -756,18 +841,31 @@ class NavbarRoutesComponent {
     constructor(injector) {
         this.injector = injector;
         this.routeClick = new EventEmitter();
+        this.isExpandedOrSelected = (item) => !!(item.expanded || item.selected);
+    }
+    get itemsFromGroup() {
+        if (!this.groupedItems) {
+            return undefined;
+        }
+        return getItemsFromGroup(this.groupedItems);
     }
     onSubnavbarExpand(menuItem, menuItems) {
         if (menuItem.expanded) {
-            menuItems
-                ?.filter((item) => item !== menuItem)
+            const items = this.itemsFromGroup || menuItems;
+            if (!items) {
+                return;
+            }
+            items
+                .filter((item) => item !== menuItem)
                 .forEach((item) => (item.expanded = false));
         }
     }
     onRouteClick(menuItem, menuItems) {
-        const expandedItems = menuItems?.filter((item) => item.expanded || item.selected);
-        if (expandedItems) {
-            expandedItems
+        const expandedItems = menuItems?.filter(this.isExpandedOrSelected);
+        const expandedGroupItems = this.itemsFromGroup?.filter(this.isExpandedOrSelected);
+        const items = expandedGroupItems || expandedItems;
+        if (items) {
+            items
                 .filter((item) => item !== menuItem)
                 .reduce((acc, item) => {
                 return [...acc, item, ...this.flatChildren(item.children || [])];
@@ -792,11 +890,13 @@ class NavbarRoutesComponent {
     }
 }
 NavbarRoutesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavbarRoutesComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-NavbarRoutesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NavbarRoutesComponent, selector: "lpx-navbar-routes", inputs: { navbarItems: "navbarItems", routerItem: "routerItem" }, outputs: { routeClick: "routeClick" }, ngImport: i0, template: "<ul class=\"lpx-nav-menu\">\r\n  <ng-container *ngFor=\"let item of navbarItems\">\r\n    <li class=\"outer-menu-item\" *lpxVisible=\"!item.visible || item.visible(item, injector)\">\r\n      <lpx-sub-navbar\r\n        [item]=\"item\"\r\n        (expand)=\"onSubnavbarExpand($event, navbarItems)\"\r\n        (routeClick)=\"onRouteClick($event, navbarItems)\"\r\n        [routerItem]=\"routerItem\"\r\n      ></lpx-sub-navbar>\r\n    </li>\r\n  </ng-container>\r\n</ul>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: LpxVisibleDirective, selector: "[lpxVisible]", inputs: ["lpxVisible"] }, { kind: "component", type: SubNavbarComponent, selector: "lpx-sub-navbar", inputs: ["item", "routerItem"], outputs: ["routeClick", "expand"] }], encapsulation: i0.ViewEncapsulation.None });
+NavbarRoutesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NavbarRoutesComponent, selector: "lpx-navbar-routes", inputs: { groupedItems: "groupedItems", navbarItems: "navbarItems", routerItem: "routerItem" }, outputs: { routeClick: "routeClick" }, ngImport: i0, template: "<ul class=\"lpx-nav-menu\">\r\n  <ng-container *ngIf=\"groupedItems; else defaultRoute\">\r\n    <ng-container *ngFor=\"let item of groupedItems\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"groupText; context: { $implicit: item }\"\r\n      ></ng-container>\r\n\r\n      <ng-container *ngFor=\"let navbarItem of item.items\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"itemTemplate; context: { $implicit: navbarItem }\"\r\n        ></ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ul>\r\n\r\n<ng-template #defaultRoute>\r\n  <ng-container *ngFor=\"let item of navbarItems\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"\r\n    ></ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-template #groupText let-item>\r\n  <li\r\n    *ngIf=\"item.items.length > 0\"\r\n    class=\"group-menu-item hidden-in-hover-trigger\"\r\n  >\r\n    {{ item.group | lpxTranslate | async }}\r\n  </li>\r\n</ng-template>\r\n<ng-template #itemTemplate let-item>\r\n  <li\r\n    class=\"outer-menu-item\"\r\n    *lpxVisible=\"!item.visible || item.visible(item, injector)\"\r\n  >\r\n    <lpx-sub-navbar\r\n      [item]=\"item\"\r\n      (expand)=\"onSubnavbarExpand($event, navbarItems)\"\r\n      (routeClick)=\"onRouteClick($event, navbarItems)\"\r\n      [routerItem]=\"routerItem\"\r\n    ></lpx-sub-navbar>\r\n  </li>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: LpxVisibleDirective, selector: "[lpxVisible]", inputs: ["lpxVisible"] }, { kind: "component", type: SubNavbarComponent, selector: "lpx-sub-navbar", inputs: ["item", "routerItem"], outputs: ["routeClick", "expand"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: TranslatePipe, name: "lpxTranslate" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavbarRoutesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lpx-navbar-routes', encapsulation: ViewEncapsulation.None, template: "<ul class=\"lpx-nav-menu\">\r\n  <ng-container *ngFor=\"let item of navbarItems\">\r\n    <li class=\"outer-menu-item\" *lpxVisible=\"!item.visible || item.visible(item, injector)\">\r\n      <lpx-sub-navbar\r\n        [item]=\"item\"\r\n        (expand)=\"onSubnavbarExpand($event, navbarItems)\"\r\n        (routeClick)=\"onRouteClick($event, navbarItems)\"\r\n        [routerItem]=\"routerItem\"\r\n      ></lpx-sub-navbar>\r\n    </li>\r\n  </ng-container>\r\n</ul>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { navbarItems: [{
+            args: [{ selector: 'lpx-navbar-routes', encapsulation: ViewEncapsulation.None, template: "<ul class=\"lpx-nav-menu\">\r\n  <ng-container *ngIf=\"groupedItems; else defaultRoute\">\r\n    <ng-container *ngFor=\"let item of groupedItems\">\r\n      <ng-container\r\n        *ngTemplateOutlet=\"groupText; context: { $implicit: item }\"\r\n      ></ng-container>\r\n\r\n      <ng-container *ngFor=\"let navbarItem of item.items\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"itemTemplate; context: { $implicit: navbarItem }\"\r\n        ></ng-container>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ul>\r\n\r\n<ng-template #defaultRoute>\r\n  <ng-container *ngFor=\"let item of navbarItems\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"itemTemplate; context: { $implicit: item }\"\r\n    ></ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n<ng-template #groupText let-item>\r\n  <li\r\n    *ngIf=\"item.items.length > 0\"\r\n    class=\"group-menu-item hidden-in-hover-trigger\"\r\n  >\r\n    {{ item.group | lpxTranslate | async }}\r\n  </li>\r\n</ng-template>\r\n<ng-template #itemTemplate let-item>\r\n  <li\r\n    class=\"outer-menu-item\"\r\n    *lpxVisible=\"!item.visible || item.visible(item, injector)\"\r\n  >\r\n    <lpx-sub-navbar\r\n      [item]=\"item\"\r\n      (expand)=\"onSubnavbarExpand($event, navbarItems)\"\r\n      (routeClick)=\"onRouteClick($event, navbarItems)\"\r\n      [routerItem]=\"routerItem\"\r\n    ></lpx-sub-navbar>\r\n  </li>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { groupedItems: [{
+                type: Input
+            }], navbarItems: [{
                 type: Input
             }], routerItem: [{
                 type: Input
@@ -821,10 +921,10 @@ class NavbarComponent {
     }
 }
 NavbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavbarComponent, deps: [{ token: NavbarService }, { token: i0.Injector }, { token: LayoutService }], target: i0.ɵɵFactoryTarget.Component });
-NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NavbarComponent, selector: "lpx-navbar", queries: [{ propertyName: "routesTemplate", first: true, predicate: NavbarRoutesDirective, descendants: true, read: TemplateRef }, { propertyName: "logoPanel", first: true, predicate: LogoPanelDirective, descendants: true }], ngImport: i0, template: "<nav class=\"lpx-nav\">\r\n  <div class=\"lpx-logo-container\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"logoPanel?.template || defaultLogo\"\r\n    ></ng-container>\r\n    <lpx-icon\r\n      class=\"menu-collapse-icon hidden-in-hover-trigger\"\r\n      iconClass=\"bi bi-filter-left\"\r\n      (click)=\"toggleSidebarHover()\"\r\n    ></lpx-icon>\r\n  </div>\r\n\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      customContentTemplate;\r\n      context: { $implicit: contentBefore }\r\n    \"\r\n  ></ng-container>\r\n\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      routesTemplate || defaultRouteTemplate;\r\n      context: { $implicit: service.navbarItems$ | async }\r\n    \"\r\n  ></ng-container>\r\n\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      customContentTemplate;\r\n      context: { $implicit: contentAfter }\r\n    \"\r\n  ></ng-container>\r\n</nav>\r\n\r\n<ng-template #defaultRouteTemplate let-items>\r\n  <lpx-navbar-routes\r\n    [navbarItems]=\"items\"\r\n    [routerItem]=\"true\"\r\n  ></lpx-navbar-routes>\r\n</ng-template>\r\n\r\n<ng-template #customContentTemplate let-contents>\r\n  <ng-container *ngFor=\"let component of contents\">\r\n    <ng-container\r\n      *ngComponentOutlet=\"component; injector: injector\"\r\n    ></ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultLogo>\r\n  <lpx-brand-logo></lpx-brand-logo>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BrandLogoComponent, selector: "lpx-brand-logo" }, { kind: "component", type: IconComponent, selector: "lpx-icon", inputs: ["iconClass"] }, { kind: "component", type: NavbarRoutesComponent, selector: "lpx-navbar-routes", inputs: ["navbarItems", "routerItem"], outputs: ["routeClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
+NavbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: NavbarComponent, selector: "lpx-navbar", queries: [{ propertyName: "routesTemplate", first: true, predicate: NavbarRoutesDirective, descendants: true, read: TemplateRef }, { propertyName: "logoPanel", first: true, predicate: LogoPanelDirective, descendants: true }], ngImport: i0, template: "<nav class=\"lpx-nav\">\r\n  <div class=\"lpx-logo-container\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"logoPanel?.template || defaultLogo\"\r\n    ></ng-container>\r\n    <lpx-icon\r\n      class=\"menu-collapse-icon hidden-in-hover-trigger\"\r\n      iconClass=\"bi bi-filter-left\"\r\n      (click)=\"toggleSidebarHover()\"\r\n    ></lpx-icon>\r\n  </div>\r\n\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      customContentTemplate;\r\n      context: { $implicit: contentBefore }\r\n    \"\r\n  ></ng-container>\r\n\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      routesTemplate || defaultRouteTemplate;\r\n      context: {\r\n        $implicit: service.navbarItems$ | async,\r\n        groupItems: service.groupedNavbarItems$ | async\r\n      }\r\n    \"\r\n  ></ng-container>\r\n\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      customContentTemplate;\r\n      context: { $implicit: contentAfter }\r\n    \"\r\n  ></ng-container>\r\n</nav>\r\n\r\n<ng-template #defaultRouteTemplate let-items let-groupItems=\"groupItems\">\r\n  <lpx-navbar-routes\r\n    [navbarItems]=\"items\"\r\n    [groupedItems]=\"groupItems\"\r\n    [routerItem]=\"true\"\r\n  ></lpx-navbar-routes>\r\n</ng-template>\r\n\r\n<ng-template #customContentTemplate let-contents>\r\n  <ng-container *ngFor=\"let component of contents\">\r\n    <ng-container\r\n      *ngComponentOutlet=\"component; injector: injector\"\r\n    ></ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultLogo>\r\n  <lpx-brand-logo></lpx-brand-logo>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BrandLogoComponent, selector: "lpx-brand-logo" }, { kind: "component", type: IconComponent, selector: "lpx-icon", inputs: ["iconClass"] }, { kind: "component", type: NavbarRoutesComponent, selector: "lpx-navbar-routes", inputs: ["groupedItems", "navbarItems", "routerItem"], outputs: ["routeClick"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: NavbarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lpx-navbar', encapsulation: ViewEncapsulation.None, template: "<nav class=\"lpx-nav\">\r\n  <div class=\"lpx-logo-container\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"logoPanel?.template || defaultLogo\"\r\n    ></ng-container>\r\n    <lpx-icon\r\n      class=\"menu-collapse-icon hidden-in-hover-trigger\"\r\n      iconClass=\"bi bi-filter-left\"\r\n      (click)=\"toggleSidebarHover()\"\r\n    ></lpx-icon>\r\n  </div>\r\n\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      customContentTemplate;\r\n      context: { $implicit: contentBefore }\r\n    \"\r\n  ></ng-container>\r\n\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      routesTemplate || defaultRouteTemplate;\r\n      context: { $implicit: service.navbarItems$ | async }\r\n    \"\r\n  ></ng-container>\r\n\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      customContentTemplate;\r\n      context: { $implicit: contentAfter }\r\n    \"\r\n  ></ng-container>\r\n</nav>\r\n\r\n<ng-template #defaultRouteTemplate let-items>\r\n  <lpx-navbar-routes\r\n    [navbarItems]=\"items\"\r\n    [routerItem]=\"true\"\r\n  ></lpx-navbar-routes>\r\n</ng-template>\r\n\r\n<ng-template #customContentTemplate let-contents>\r\n  <ng-container *ngFor=\"let component of contents\">\r\n    <ng-container\r\n      *ngComponentOutlet=\"component; injector: injector\"\r\n    ></ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultLogo>\r\n  <lpx-brand-logo></lpx-brand-logo>\r\n</ng-template>\r\n" }]
+            args: [{ selector: 'lpx-navbar', encapsulation: ViewEncapsulation.None, template: "<nav class=\"lpx-nav\">\r\n  <div class=\"lpx-logo-container\">\r\n    <ng-container\r\n      *ngTemplateOutlet=\"logoPanel?.template || defaultLogo\"\r\n    ></ng-container>\r\n    <lpx-icon\r\n      class=\"menu-collapse-icon hidden-in-hover-trigger\"\r\n      iconClass=\"bi bi-filter-left\"\r\n      (click)=\"toggleSidebarHover()\"\r\n    ></lpx-icon>\r\n  </div>\r\n\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      customContentTemplate;\r\n      context: { $implicit: contentBefore }\r\n    \"\r\n  ></ng-container>\r\n\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      routesTemplate || defaultRouteTemplate;\r\n      context: {\r\n        $implicit: service.navbarItems$ | async,\r\n        groupItems: service.groupedNavbarItems$ | async\r\n      }\r\n    \"\r\n  ></ng-container>\r\n\r\n  <ng-container\r\n    *ngTemplateOutlet=\"\r\n      customContentTemplate;\r\n      context: { $implicit: contentAfter }\r\n    \"\r\n  ></ng-container>\r\n</nav>\r\n\r\n<ng-template #defaultRouteTemplate let-items let-groupItems=\"groupItems\">\r\n  <lpx-navbar-routes\r\n    [navbarItems]=\"items\"\r\n    [groupedItems]=\"groupItems\"\r\n    [routerItem]=\"true\"\r\n  ></lpx-navbar-routes>\r\n</ng-template>\r\n\r\n<ng-template #customContentTemplate let-contents>\r\n  <ng-container *ngFor=\"let component of contents\">\r\n    <ng-container\r\n      *ngComponentOutlet=\"component; injector: injector\"\r\n    ></ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #defaultLogo>\r\n  <lpx-brand-logo></lpx-brand-logo>\r\n</ng-template>\r\n" }]
         }], ctorParameters: function () { return [{ type: NavbarService }, { type: i0.Injector }, { type: LayoutService }]; }, propDecorators: { routesTemplate: [{
                 type: ContentChild,
                 args: [NavbarRoutesDirective, { read: TemplateRef }]
@@ -1049,10 +1149,10 @@ class BreadcrumbComponent {
     }
 }
 BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: BreadcrumbService }], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: BreadcrumbComponent, selector: "lpx-breadcrumb", ngImport: i0, template: "<nav aria-label=\"breadcrumb\">\r\n  <ol class=\"lpx-breadcrumb\">\r\n    <ng-container *ngFor=\"let item of service.items$ | async; last as last\">\r\n      <li\r\n        class=\"lpx-breadcrumb-item\"\r\n        (click)=\"onClick(item)\"\r\n        [class.expanded]=\"item.expanded\"\r\n        (lpxClickOutside)=\"item.expanded = false\"\r\n      >\r\n        <lpx-icon\r\n          class=\"lpx-breadcrumb-item-icon\"\r\n          *ngIf=\"item.icon\"\r\n          [iconClass]=\"item.icon\"\r\n        ></lpx-icon>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            item.children?.length ? textTemplate : linkTemplate;\r\n            context: { $implicit: item }\r\n          \"\r\n        ></ng-container>\r\n        <ng-container *ngIf=\"item.children?.length && last\">\r\n          <lpx-icon\r\n            class=\"lpx-caret\"\r\n            [iconClass]=\"item.expanded ? icon.chevronUp : icon.chevronDown\"\r\n          ></lpx-icon>\r\n          <div class=\"lpx-breadcrumb-dropdown\">\r\n            <ul class=\"lpx-breadcrumb-dropdown-container\">\r\n              <li\r\n                class=\"lpx-breadcrumb-dropdown-item\"\r\n                *ngFor=\"let child of item.children\"\r\n                [class.active]=\"child.active\"\r\n                [routerLink]=\"child.link\"\r\n              >\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    textTemplate;\r\n                    context: { $implicit: child }\r\n                  \"\r\n                ></ng-container>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </ng-container>\r\n      </li>\r\n      <li *ngIf=\"!last\" class=\"lpx-breadcrumb-separator\">\r\n        <lpx-icon iconClass=\"bi bi-chevron-right\"></lpx-icon>\r\n      </li>\r\n    </ng-container>\r\n  </ol>\r\n</nav>\r\n\r\n<ng-template #linkTemplate let-item>\r\n  <a [routerLink]=\"item.link\"> {{ item.text | toObservable | async }} </a>\r\n</ng-template>\r\n<ng-template #textTemplate let-item>\r\n  <span class=\"lpx-breadcrumb-item-text\">\r\n    {{ item.text | toObservable | async }}\r\n  </span>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lpx-icon", inputs: ["iconClass"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[lpxClickOutside]", inputs: ["exceptedRefs"], outputs: ["lpxClickOutside"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: ToObservablePipe, name: "toObservable" }], encapsulation: i0.ViewEncapsulation.None });
+BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: BreadcrumbComponent, selector: "lpx-breadcrumb", ngImport: i0, template: "<nav aria-label=\"breadcrumb\">\r\n  <ol class=\"lpx-breadcrumb\">\r\n    <ng-container *ngFor=\"let item of service.items$ | async; last as last\">\r\n      <li\r\n        class=\"lpx-breadcrumb-item\"\r\n        (click)=\"onClick(item)\"\r\n        [class.expanded]=\"item.expanded\"\r\n        (lpxClickOutside)=\"item.expanded = false\"\r\n      >\r\n        <lpx-icon\r\n          class=\"lpx-breadcrumb-item-icon\"\r\n          *ngIf=\"item.icon\"\r\n          [iconClass]=\"item.icon\"\r\n        ></lpx-icon>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            item.children?.length ? textTemplate : linkTemplate;\r\n            context: { $implicit: item }\r\n          \"\r\n        ></ng-container>\r\n      </li>\r\n      <li *ngIf=\"!last\" class=\"lpx-breadcrumb-separator\">\r\n        <lpx-icon iconClass=\"bi bi-chevron-right\"></lpx-icon>\r\n      </li>\r\n    </ng-container>\r\n  </ol>\r\n</nav>\r\n\r\n<ng-template #linkTemplate let-item>\r\n  <a [routerLink]=\"item.link\"> {{ item.text | toObservable | async }} </a>\r\n</ng-template>\r\n<ng-template #textTemplate let-item>\r\n  <span class=\"lpx-breadcrumb-item-text\">\r\n    {{ item.text | toObservable | async }}\r\n  </span>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: IconComponent, selector: "lpx-icon", inputs: ["iconClass"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ClickOutsideDirective, selector: "[lpxClickOutside]", inputs: ["exceptedRefs"], outputs: ["lpxClickOutside"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: ToObservablePipe, name: "toObservable" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lpx-breadcrumb', encapsulation: ViewEncapsulation.None, template: "<nav aria-label=\"breadcrumb\">\r\n  <ol class=\"lpx-breadcrumb\">\r\n    <ng-container *ngFor=\"let item of service.items$ | async; last as last\">\r\n      <li\r\n        class=\"lpx-breadcrumb-item\"\r\n        (click)=\"onClick(item)\"\r\n        [class.expanded]=\"item.expanded\"\r\n        (lpxClickOutside)=\"item.expanded = false\"\r\n      >\r\n        <lpx-icon\r\n          class=\"lpx-breadcrumb-item-icon\"\r\n          *ngIf=\"item.icon\"\r\n          [iconClass]=\"item.icon\"\r\n        ></lpx-icon>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            item.children?.length ? textTemplate : linkTemplate;\r\n            context: { $implicit: item }\r\n          \"\r\n        ></ng-container>\r\n        <ng-container *ngIf=\"item.children?.length && last\">\r\n          <lpx-icon\r\n            class=\"lpx-caret\"\r\n            [iconClass]=\"item.expanded ? icon.chevronUp : icon.chevronDown\"\r\n          ></lpx-icon>\r\n          <div class=\"lpx-breadcrumb-dropdown\">\r\n            <ul class=\"lpx-breadcrumb-dropdown-container\">\r\n              <li\r\n                class=\"lpx-breadcrumb-dropdown-item\"\r\n                *ngFor=\"let child of item.children\"\r\n                [class.active]=\"child.active\"\r\n                [routerLink]=\"child.link\"\r\n              >\r\n                <ng-container\r\n                  *ngTemplateOutlet=\"\r\n                    textTemplate;\r\n                    context: { $implicit: child }\r\n                  \"\r\n                ></ng-container>\r\n              </li>\r\n            </ul>\r\n          </div>\r\n        </ng-container>\r\n      </li>\r\n      <li *ngIf=\"!last\" class=\"lpx-breadcrumb-separator\">\r\n        <lpx-icon iconClass=\"bi bi-chevron-right\"></lpx-icon>\r\n      </li>\r\n    </ng-container>\r\n  </ol>\r\n</nav>\r\n\r\n<ng-template #linkTemplate let-item>\r\n  <a [routerLink]=\"item.link\"> {{ item.text | toObservable | async }} </a>\r\n</ng-template>\r\n<ng-template #textTemplate let-item>\r\n  <span class=\"lpx-breadcrumb-item-text\">\r\n    {{ item.text | toObservable | async }}\r\n  </span>\r\n</ng-template>\r\n" }]
+            args: [{ selector: 'lpx-breadcrumb', encapsulation: ViewEncapsulation.None, template: "<nav aria-label=\"breadcrumb\">\r\n  <ol class=\"lpx-breadcrumb\">\r\n    <ng-container *ngFor=\"let item of service.items$ | async; last as last\">\r\n      <li\r\n        class=\"lpx-breadcrumb-item\"\r\n        (click)=\"onClick(item)\"\r\n        [class.expanded]=\"item.expanded\"\r\n        (lpxClickOutside)=\"item.expanded = false\"\r\n      >\r\n        <lpx-icon\r\n          class=\"lpx-breadcrumb-item-icon\"\r\n          *ngIf=\"item.icon\"\r\n          [iconClass]=\"item.icon\"\r\n        ></lpx-icon>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"\r\n            item.children?.length ? textTemplate : linkTemplate;\r\n            context: { $implicit: item }\r\n          \"\r\n        ></ng-container>\r\n      </li>\r\n      <li *ngIf=\"!last\" class=\"lpx-breadcrumb-separator\">\r\n        <lpx-icon iconClass=\"bi bi-chevron-right\"></lpx-icon>\r\n      </li>\r\n    </ng-container>\r\n  </ol>\r\n</nav>\r\n\r\n<ng-template #linkTemplate let-item>\r\n  <a [routerLink]=\"item.link\"> {{ item.text | toObservable | async }} </a>\r\n</ng-template>\r\n<ng-template #textTemplate let-item>\r\n  <span class=\"lpx-breadcrumb-item-text\">\r\n    {{ item.text | toObservable | async }}\r\n  </span>\r\n</ng-template>\r\n" }]
         }], ctorParameters: function () { return [{ type: BreadcrumbService }]; } });
 
 class LpxClickOutsideModule {
@@ -1456,15 +1556,22 @@ function listenDirectionChange(languageService, styleService) {
     };
 }
 
+const LPX_PERFECT_SCROLLBAR = new InjectionToken('LPX_PERFECT_SCROLLBAR');
+
 class LpxCoreModule {
     static forRoot(options) {
         return {
             ngModule: LpxCoreModule,
             providers: [
+                {
+                    provide: LPX_PERFECT_SCROLLBAR,
+                    useClass: LpxPerfectScrollbarService,
+                },
                 createResponsiveProvider(options?.responsiveSettings),
                 createWindowProvider(options?.window),
                 LpxIconModule.forRoot(options?.iconSettings).providers,
-                LpxLanguageModule.forRoot(options?.languageSettings).providers,
+                LpxLanguageModule.forRoot(options?.languageSettings)
+                    .providers,
                 LpxNavbarModule.forRoot(options?.navbarSettings).providers,
                 LpxBreadcrumbModule.forRoot().providers,
                 LPX_TRANSLATE_PROVIDERS,
@@ -1561,6 +1668,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 }]
         }] });
 
+class PerfectScrollbarDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.lpxPerfectService = inject(LPX_PERFECT_SCROLLBAR);
+    }
+    set lpxPerfectScrollbarOptions(value) {
+        this.lpxPerfectService.setOptions(value);
+    }
+    onResize() {
+        this.lpxPerfectService.onResize();
+    }
+    ngAfterViewInit() {
+        this.lpxPerfectService.setElement(this.elementRef);
+        this.lpxPerfectService.afterViewInit();
+    }
+}
+PerfectScrollbarDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PerfectScrollbarDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+PerfectScrollbarDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: PerfectScrollbarDirective, isStandalone: true, selector: "[lpxPerfectScrollbar]", inputs: { lpxPerfectScrollbarOptions: "lpxPerfectScrollbarOptions" }, host: { listeners: { "window:resize": "onResize()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PerfectScrollbarDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[lpxPerfectScrollbar]',
+                    standalone: true,
+                }]
+        }], propDecorators: { lpxPerfectScrollbarOptions: [{
+                type: Input
+            }], onResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
+
 class BreadcrumbPanelDirective {
     constructor(template) {
         this.template = template;
@@ -1786,5 +1924,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent, BodyService, BrandLogoComponent, BreadcrumbComponent, BreadcrumbPanelDirective, BreadcrumbRouteListenerService, BreadcrumbService, CONTENT_AFTER_ROUTES, CONTENT_BEFORE_ROUTES, ClickOutsideDirective, ContentPanelDirective, CurrentUserImagePanelDirective, CurrentUserPanelDirective, DataStore, DefaultAuthService, DefaultTranslateService, FooterComponent, FooterLinksService, FooterPanelDirective, ICON_MAP, IconComponent, LEPTON_X_ICON_SET, LPX_AUTH_SERVICE_PROVIDER, LPX_AUTH_SERVICE_TOKEN, LPX_INITIAL_STYLES, LPX_LANGUAGE, LPX_LAYOUT_STYLE_FINAL, LPX_MENU_ITEMS, LPX_RESPONSIVE_BREAKPOINTS_DEFAULTS, LPX_STYLE_FINAL, LPX_STYLE_PROVIDERS, LPX_TRANSLATE_SERVICE_TOKEN, LPX_TRANSLATE_TOKEN, LanguagePanelDirective, LanguageService, LanguageTranslateDefaults, LanguageTranslateKeys, LayoutService, LogoPanelDirective, LpxAvatarModule, LpxBrandLogoModule, LpxBreadcrumbModule, LpxClickOutsideModule, LpxCoreModule, LpxFooterModule, LpxIconModule, LpxLanguageModule, LpxLocalStorageService, LpxNavbarModule, LpxResponsiveModule, LpxThemeTranslateService, LpxTranslateModule, LpxVisibleDirective, MobileNavbarPanelDirective, NavbarComponent, NavbarPanelDirective, NavbarRoutesComponent, NavbarRoutesDirective, NavbarService, NavitemPanelDirective, PanelsModule, RESPONSIVE_BREAKPOINTS, ResponsiveDirective, ResponsiveService, SafeHtmlPipe, SettingsPanelDirective, StyleService, SubNavbarComponent, ToObservableModule, ToObservablePipe, ToolbarPanelDirective, TopNavbarPanelDirective, TranslatePipe, UserProfileService, WINDOW, breadCrumbInit, createDirectionProvider, createResponsiveProvider, createStyleFactory, createWindowProvider, exportedDeclarations, flatArrayDeepToObject, getStream$, listenDirectionChange, loadInitialStyles, sortItems, styleLoadFactory };
+export { AvatarComponent, BodyService, BrandLogoComponent, BreadcrumbComponent, BreadcrumbPanelDirective, BreadcrumbRouteListenerService, BreadcrumbService, CONTENT_AFTER_ROUTES, CONTENT_BEFORE_ROUTES, ClickOutsideDirective, ContentPanelDirective, CurrentUserImagePanelDirective, CurrentUserPanelDirective, DataStore, DefaultAuthService, DefaultTranslateService, FooterComponent, FooterLinksService, FooterPanelDirective, ICON_MAP, IconComponent, LEPTON_X_ICON_SET, LPX_AUTH_SERVICE_PROVIDER, LPX_AUTH_SERVICE_TOKEN, LPX_INITIAL_STYLES, LPX_LANGUAGE, LPX_LAYOUT_STYLE_FINAL, LPX_MENU_ITEMS, LPX_PERFECT_SCROLLBAR, LPX_RESPONSIVE_BREAKPOINTS_DEFAULTS, LPX_STYLE_FINAL, LPX_STYLE_PROVIDERS, LPX_TRANSLATE_SERVICE_TOKEN, LPX_TRANSLATE_TOKEN, LanguagePanelDirective, LanguageService, LanguageTranslateDefaults, LanguageTranslateKeys, LayoutService, LogoPanelDirective, LpxAvatarModule, LpxBrandLogoModule, LpxBreadcrumbModule, LpxClickOutsideModule, LpxCoreModule, LpxFooterModule, LpxIconModule, LpxLanguageModule, LpxLocalStorageService, LpxNavbarModule, LpxPerfectScrollbar, LpxPerfectScrollbarService, LpxResponsiveModule, LpxThemeTranslateService, LpxTranslateModule, LpxVisibleDirective, MobileNavbarPanelDirective, NavbarComponent, NavbarPanelDirective, NavbarRoutesComponent, NavbarRoutesDirective, NavbarService, NavitemPanelDirective, OTHERS_GROUP_KEY, PanelsModule, PerfectScrollbarDirective, RESPONSIVE_BREAKPOINTS, ResponsiveDirective, ResponsiveService, SafeHtmlPipe, SettingsPanelDirective, StyleService, SubNavbarComponent, ToObservableModule, ToObservablePipe, ToolbarPanelDirective, TopNavbarPanelDirective, TranslatePipe, UserProfileService, WINDOW, breadCrumbInit, createDirectionProvider, createGroupMap, createResponsiveProvider, createStyleFactory, createWindowProvider, exportedDeclarations, flatArrayDeepToObject, getItemsFromGroup, getStream$, isArray, isNullOrUndefined, listenDirectionChange, loadInitialStyles, sortItems, styleLoadFactory };
 //# sourceMappingURL=volo-ngx-lepton-x.core.mjs.map