@mediusinc/mng-commons-layout 5.0.0-rc.0

package/fesm2022/mediusinc-mng-commons-layout.mjs

@@ -0,0 +1,878 @@
+import { AsyncPipe, NgOptimizedImage, NgClass, NgTemplateOutlet } from '@angular/common';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, Injectable, Component, ChangeDetectionStrategy, Input, signal, Injector, DestroyRef, EventEmitter, effect, runInInjectionContext, HostBinding, Output, ViewChild, ElementRef, Renderer2 } from '@angular/core';
+import * as i1$1 from '@ngx-translate/core';
+import { TranslateModule } from '@ngx-translate/core';
+import * as i2 from '@mediusinc/mng-commons/core';
+import { LoggerService, CommonsService, ComponentDirective, CommonsRouterService, RouteUtil, PermissionService, EnumerateAsyncPipe, COMMONS_MODULE_CONFIG_IT, NotificationWrapperComponent, RouteBuilder, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
+import { ReplaySubject, BehaviorSubject, take, Subject, Observable, from, of, combineLatest, distinctUntilChanged } from 'rxjs';
+import * as i1 from '@angular/common/http';
+import { ButtonModule } from 'primeng/button';
+import { InputTextModule } from 'primeng/inputtext';
+import { map, filter, first } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1$3 from '@angular/router';
+import { Router, NavigationEnd, ActivatedRoute, GuardsCheckEnd, RouterModule } from '@angular/router';
+import * as i2$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i1$4 from 'primeng/dropdown';
+import { DropdownModule } from 'primeng/dropdown';
+import * as i1$2 from 'primeng/ripple';
+import { RippleModule } from 'primeng/ripple';
+import * as i3 from 'primeng/styleclass';
+import { StyleClassModule } from 'primeng/styleclass';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { TooltipModule } from 'primeng/tooltip';
+import { DomSanitizer } from '@angular/platform-browser';
+
+const COMMONS_LAYOUT_FEATURE_CONFIG_IT = new InjectionToken('COMMONS_LAYOUT_FEATURE_CONFIG');
+
+class VersionService {
+    constructor(http, configurationService) {
+        this.http = http;
+        this.configurationService = configurationService;
+        this.logger = inject(LoggerService).create('VersionService');
+        this.cache = {};
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    loadVersion(path, baseConfigKey, jsonPath = '$') {
+        const urlSegments = [];
+        if (baseConfigKey) {
+            const baseUrl = this.configurationService.getConfigValue(baseConfigKey);
+            urlSegments.push(baseUrl.endsWith('/') ? baseUrl.substring(0, baseUrl.length - 1) : baseUrl);
+        }
+        if (path) {
+            urlSegments.push(!path.startsWith('/') ? `/${path}` : path);
+        }
+        const url = urlSegments.join('');
+        if (!this.cache[url]) {
+            this.cache[url] = new ReplaySubject(1);
+            this.http.get(urlSegments.join('')).subscribe({
+                next: res => {
+                    this.cache[url].next(res);
+                },
+                error: err => {
+                    this.logger.error('Version could not be retreived', err);
+                }
+            });
+        }
+        return this.cache[url].asObservable();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: VersionService, deps: [{ token: i1.HttpClient }, { token: i2.CommonsConfigurationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: VersionService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: VersionService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.CommonsConfigurationService }] });
+
+class VersionComponent {
+    constructor(jsonPathPipe, versionService) {
+        this.jsonPathPipe = jsonPathPipe;
+        this.versionService = versionService;
+        this.loadingSubject = new BehaviorSubject(false);
+        this.loading$ = this.loadingSubject.asObservable();
+    }
+    ngOnInit() {
+        if (Array.isArray(this.initVersion)) {
+            this.versions = this.initVersion;
+        }
+        else if (typeof this.initVersion === 'string') {
+            this.displayVersion = this.initVersion;
+        }
+        else if (typeof this.initVersion !== 'undefined') {
+            if (this.initVersion['info'] || this.initVersion['urlPath']) {
+                const config = this.initVersion;
+                this.displayName = config.displayName;
+                if (config.urlPath) {
+                    this.loadingSubject.next(true);
+                    this.versionService
+                        .loadVersion(config.urlPath, config.urlBaseConfigKey)
+                        .pipe(take(1))
+                        .subscribe({
+                        next: res => {
+                            this.displayVersion = this.jsonPathPipe.transform(res, config.infoJsonPath ?? '$');
+                            this.loadingSubject.next(false);
+                        },
+                        error: () => {
+                            this.displayVersion = '';
+                            this.loadingSubject.next(false);
+                        }
+                    });
+                }
+                else {
+                    this.displayVersion = this.jsonPathPipe.transform(config.info, config.infoJsonPath ?? '$.raw');
+                }
+            }
+            else {
+                const info = this.initVersion;
+                this.displayVersion = this.jsonPathPipe.transform(info, '$.raw');
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: VersionComponent, deps: [{ token: i2.JsonPathPipe }, { token: VersionService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: VersionComponent, isStandalone: true, selector: "mng-version", inputs: { initVersion: ["version", "initVersion"] }, ngImport: i0, template: "@if (versions) {\n    @for (v of versions; track v; let last = $last) {\n        <mng-version [version]=\"v\"></mng-version>\n        @if (!last) {\n            <br />\n        }\n    }\n} @else {\n    @if (displayName) {\n        {{ displayName }}:\n    }\n    @if ((loading$ | async) === false) {\n        {{ displayVersion }}\n    }\n}\n", dependencies: [{ kind: "component", type: VersionComponent, selector: "mng-version", inputs: ["version"] }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: VersionComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-version', imports: [AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (versions) {\n    @for (v of versions; track v; let last = $last) {\n        <mng-version [version]=\"v\"></mng-version>\n        @if (!last) {\n            <br />\n        }\n    }\n} @else {\n    @if (displayName) {\n        {{ displayName }}:\n    }\n    @if ((loading$ | async) === false) {\n        {{ displayVersion }}\n    }\n}\n" }]
+        }], ctorParameters: () => [{ type: i2.JsonPathPipe }, { type: VersionService }], propDecorators: { initVersion: [{
+                type: Input,
+                args: ['version']
+            }] } });
+
+class FooterComponent {
+    constructor() {
+        this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
+        this.commons = inject(CommonsService);
+        this.currentYear = new Date().getFullYear();
+        this.versionComponent = VersionComponent;
+    }
+    ngOnInit() {
+        if (this.config?.components?.version !== undefined) {
+            this.versionComponent = this.config?.components?.version;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: FooterComponent, isStandalone: true, selector: "mng-footer", ngImport: i0, template: "<div class=\"layout-footer\">\n    <div class=\"footer-logo-container\">\n        <img id=\"footer-logo\" [src]=\"commons.colorSchemeIsLight ? commons.appLogoDark : commons.appLogoLight\" alt=\"atlantis-layout\" />\n        <span class=\"app-name\">{{ commons.appName | translate }}</span>\n    </div>\n    <div class=\"flex flex-column\">\n        <div>\n            <span class=\"copyright\">&#169; {{ commons.appOwner | translate }} - {{ currentYear }}</span>\n        </div>\n        @if (versionComponent) {\n            <div class=\"version\" [mngComponent]=\"versionComponent\" [inputs]=\"{version: commons.appVersion}\" [attachToHost]=\"true\"></div>\n        }\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "nodeInjector"], outputs: ["instanceCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: FooterComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-footer', imports: [TranslateModule, NgOptimizedImage, VersionComponent, ComponentDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-footer\">\n    <div class=\"footer-logo-container\">\n        <img id=\"footer-logo\" [src]=\"commons.colorSchemeIsLight ? commons.appLogoDark : commons.appLogoLight\" alt=\"atlantis-layout\" />\n        <span class=\"app-name\">{{ commons.appName | translate }}</span>\n    </div>\n    <div class=\"flex flex-column\">\n        <div>\n            <span class=\"copyright\">&#169; {{ commons.appOwner | translate }} - {{ currentYear }}</span>\n        </div>\n        @if (versionComponent) {\n            <div class=\"version\" [mngComponent]=\"versionComponent\" [inputs]=\"{version: commons.appVersion}\" [attachToHost]=\"true\"></div>\n        }\n    </div>\n</div>\n" }]
+        }] });
+
+class BreadcrumbComponent {
+    constructor() {
+        this.commons = inject(CommonsService);
+        this.mappedBreadcrumbs$ = this.commons.breadcrumbs$.pipe(map((items) => items.map(el => this.mapMenuItem(el))));
+    }
+    mapMenuItem(item) {
+        return {
+            ...item,
+            url: item.href,
+            badgeStyleClass: item.badgeClassName,
+            styleClass: item.className
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: BreadcrumbComponent, isStandalone: true, selector: "mng-breadcrumb", ngImport: i0, template: "<div class=\"layout-breadcrumb flex align-items-center relative h-3rem\">\n    <nav>\n        <ol class=\"relative z-2\">\n            @for (item of mappedBreadcrumbs$ | async; track item; let last = $last) {\n                <li>{{ item.label! | translate }}</li>\n                @if (!last) {\n                    <li class=\"layout-breadcrumb-chevron\">/</li>\n                }\n            }\n        </ol>\n    </nav>\n</div>\n", dependencies: [{ kind: "ngmodule", type: InputTextModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-breadcrumb', imports: [NgClass, InputTextModule, ButtonModule, AsyncPipe, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-breadcrumb flex align-items-center relative h-3rem\">\n    <nav>\n        <ol class=\"relative z-2\">\n            @for (item of mappedBreadcrumbs$ | async; track item; let last = $last) {\n                <li>{{ item.label! | translate }}</li>\n                @if (!last) {\n                    <li class=\"layout-breadcrumb-chevron\">/</li>\n                }\n            }\n        </ol>\n    </nav>\n</div>\n" }]
+        }] });
+
+class MainLayoutComponentService {
+    constructor() {
+        this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
+        this.state = signal({
+            staticMenuDesktopInactive: false,
+            overlayMenuActive: false,
+            rightMenuActive: false,
+            configSidebarVisible: false,
+            staticMenuMobileActive: false,
+            menuHoverActive: false,
+            sidebarActive: false,
+            anchored: false
+        });
+        this.overlayOpen = new Subject();
+        this.overlayOpen$ = this.overlayOpen.asObservable();
+    }
+    onMenuToggle() {
+        if (this.isOverlay()) {
+            this.state.update(state => ({
+                ...state,
+                overlayMenuActive: !state.overlayMenuActive
+            }));
+            if (this.state().overlayMenuActive) {
+                this.overlayOpen.next(null);
+            }
+        }
+        if (this.isDesktop()) {
+            this.state.update(state => ({
+                ...state,
+                staticMenuDesktopInactive: !state.staticMenuDesktopInactive
+            }));
+        }
+        else {
+            this.state.update(state => ({
+                ...state,
+                staticMenuMobileActive: !state.staticMenuMobileActive
+            }));
+            if (this.state().staticMenuMobileActive) {
+                this.overlayOpen.next(null);
+            }
+        }
+    }
+    onOverlaySubmenuOpen() {
+        this.overlayOpen.next(null);
+    }
+    isOverlay() {
+        return this.config?.menuMode === 'overlay';
+    }
+    isSlim() {
+        return this.config?.menuMode === 'slim';
+    }
+    isSlimPlus() {
+        return this.config?.menuMode === 'slim-plus';
+    }
+    isDesktop() {
+        return window.innerWidth > 991;
+    }
+    isMobile() {
+        return !this.isDesktop();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MainLayoutComponentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MainLayoutComponentService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MainLayoutComponentService, decorators: [{
+            type: Injectable
+        }] });
+
+class MenuService {
+    constructor() {
+        this.logger = LoggerService.create('MenuService');
+        this.router = inject(Router);
+        this.commonsRouter = inject(CommonsRouterService);
+        this.menuSource = new ReplaySubject(1);
+        this.resetSource = new Subject();
+        this.menuSource$ = this.menuSource.asObservable();
+        this.resetSource$ = this.resetSource.asObservable();
+        this.menuItems = [];
+        this.routeLoadedChildrenSubscriptions = [];
+    }
+    initialize(menuItems) {
+        this.menuItems = menuItems;
+        this.routeLoadedChildrenSubscriptions.forEach(s => s.unsubscribe());
+        this.routeLoadedChildrenSubscriptions = [];
+        this.generateMenuItemKeys(menuItems);
+        this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(e => {
+            this.findAndSetActiveMenuItem(e.urlAfterRedirects);
+        });
+        this.findAndSetActiveMenuItem(this.router.url);
+    }
+    generateMenuItemKeys(menuItems, parentKey = '') {
+        menuItems.forEach((item, idx) => {
+            if (!item.index) {
+                item.index = idx;
+                item.key = parentKey ? parentKey + '-' + idx : idx.toString();
+            }
+            if (item.items) {
+                this.generateMenuItemKeys(item.items, item.key);
+            }
+            else if (item.lazyChildren) {
+                this.listenToMenuItemLazyChildrenLoad(item);
+            }
+        });
+    }
+    findAndSetActiveMenuItem(url) {
+        const matches = this.findActiveRouteMatches(this.menuItems, url);
+        if (matches.length === 0) {
+            this.reset();
+        }
+        else {
+            const matchKey = matches[0][matches[0].length - 1].key;
+            if (matchKey) {
+                this.menuSource.next({
+                    key: matchKey,
+                    routeEvent: true
+                });
+            }
+            else {
+                this.logger.warn(`Found active menu item for url ${url}, but item key is not present`, matches);
+                this.reset();
+            }
+            if (matches.length > 1) {
+                this.logger.warn(`Multiple active menu items found for url ${url}`, matches);
+            }
+        }
+    }
+    listenToMenuItemLazyChildrenLoad(menuItem) {
+        this.routeLoadedChildrenSubscriptions.push(this.commonsRouter
+            .getRouteLoadedChildren$(menuItem.routerLink ?? '/')
+            .pipe(take(1))
+            .subscribe({
+            next: routes => {
+                let menuItems = routes
+                    .filter(r => Array.isArray(r.data?.menuItems))
+                    .flatMap(r => r.data.menuItems);
+                menuItems = RouteUtil.adjustMenuLazyChildrenRouterLinks(menuItem, menuItems);
+                menuItem.items = menuItems;
+                menuItem.lazyChildren = false;
+                this.generateMenuItemKeys(menuItem.items, menuItem.key);
+                this.findAndSetActiveMenuItem(this.router.url);
+            }
+        }));
+    }
+    findActiveRouteMatches(menuItems, url) {
+        const matches = [];
+        for (const menuItem of menuItems) {
+            if (menuItem.routerLink) {
+                const isActive = RouteUtil.doesUrlMatchRouterLink(menuItem.routerLink, url);
+                if (isActive) {
+                    if (Array.isArray(menuItem.items)) {
+                        const itemsMatches = this.findActiveRouteMatches(menuItem.items, url);
+                        if (itemsMatches.length > 0) {
+                            matches.push(...itemsMatches.map(c => [menuItem, ...c]));
+                        }
+                        else {
+                            matches.push([menuItem]);
+                        }
+                    }
+                    else {
+                        matches.push([menuItem]);
+                    }
+                }
+            }
+            else if (Array.isArray(menuItem.items)) {
+                const itemsMatches = this.findActiveRouteMatches(menuItem.items, url);
+                if (itemsMatches.length > 0) {
+                    matches.push(...itemsMatches.map(c => [menuItem, ...c]));
+                }
+            }
+        }
+        return matches;
+    }
+    reset() {
+        this.resetSource.next(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MenuService }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MenuService, decorators: [{
+            type: Injectable
+        }] });
+
+class MenuItemComponent {
+    constructor() {
+        this.router = inject(Router);
+        this.injector = inject(Injector);
+        this.destroyRef = inject(DestroyRef);
+        this.route = inject(ActivatedRoute);
+        this.menuService = inject(MenuService);
+        this.authorization = inject(PermissionService);
+        this.layoutService = inject(MainLayoutComponentService);
+        this.isPermitted = signal(true);
+        this.guardsIsAllowed = signal(true);
+        this.childrenVisibilitySubject = [];
+        this.root = false;
+        this.visibleChangeEventEmitter = new EventEmitter();
+        this.active = signal(false);
+        this.visible = signal(false);
+        this.menuService.menuSource$.pipe(takeUntilDestroyed()).subscribe(value => {
+            setTimeout(() => {
+                this.active.set(this.item.key === value.key || value.key.startsWith((this.item.key ?? '') + '-'));
+            });
+        });
+        this.menuService.resetSource$.pipe(takeUntilDestroyed()).subscribe(() => {
+            this.active.set(false);
+        });
+        effect(() => {
+            if (this.isPermitted() && this.guardsIsAllowed()) {
+                this.active.set(false);
+                this.visible.set(true);
+            }
+            else {
+                this.active.set(true);
+                this.visible.set(false);
+            }
+        }, { allowSignalWrites: true });
+    }
+    ngOnInit() {
+        if (this.item.routerLink) {
+            if (typeof this.item.routerLink === 'string') {
+                this.itemUrl = this.item.routerLink;
+            }
+            else {
+                this.itemUrl = this.router.parseUrl(this.item.routerLink.join('/'));
+            }
+        }
+        this.routerEventsSubscription = this.router.events.subscribe(next => {
+            if (next instanceof GuardsCheckEnd && next.shouldActivate) {
+                this.checkIfMenuItemIsAllowedFromGuard(next.state);
+            }
+            else if (next instanceof NavigationEnd) {
+                if (!this.layoutService.isMobile()) {
+                    this.active.set(false);
+                }
+                else {
+                    this.updateActiveStateFromRoute();
+                }
+            }
+        });
+        if (this.item.permissions) {
+            this.authorization
+                .isPermitted(this.item.permissions)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe({
+                next: isPermitted => {
+                    this.isPermitted.set(isPermitted);
+                }
+            });
+        }
+        this.checkIfMenuItemIsAllowedFromGuard(this.router.routerState.snapshot);
+        this.processItemChildrenVisibility();
+    }
+    ngAfterViewChecked() {
+        if (this.root && this.active() && this.layoutService.isDesktop() && (this.layoutService.isSlim() || this.layoutService.isSlimPlus())) {
+            this.calculatePosition(this.submenu?.nativeElement, this.submenu?.nativeElement.parentElement);
+        }
+    }
+    ngOnDestroy() {
+        this.routerEventsSubscription?.unsubscribe();
+        this.guardsIsAllowedSubscription?.unsubscribe();
+    }
+    get submenuAnimation() {
+        if (this.layoutService.isDesktop() && (this.layoutService.isSlim() || this.layoutService.isSlimPlus())) {
+            return this.active() ? 'visible' : 'hidden';
+        }
+        else {
+            return this.root ? 'expanded' : this.active() ? 'expanded' : 'collapsed';
+        }
+    }
+    get activeClass() {
+        return this.active() && !this.root;
+    }
+    itemClick(event) {
+        // avoid processing disabled items
+        if (this.item.disabled) {
+            event.preventDefault();
+            return;
+        }
+        // toggle active state
+        if (this.item.items || this.item.lazyChildren) {
+            if ((this.root || this.active()) && (this.layoutService.isSlim() || this.layoutService.isSlimPlus())) {
+                this.layoutService.onOverlaySubmenuOpen();
+            }
+        }
+        else {
+            if (this.layoutService.isMobile()) {
+                this.layoutService.state.update(state => ({
+                    ...state,
+                    staticMenuMobileActive: false
+                }));
+            }
+            if (this.layoutService.isSlim() || this.layoutService.isSlimPlus()) {
+                this.menuService.reset();
+                this.layoutService.state.update(state => ({
+                    ...state,
+                    menuHoverActive: false
+                }));
+            }
+        }
+    }
+    onSubmenuAnimated(event) {
+        if (event.toState === 'visible' && this.layoutService.isDesktop() && (this.layoutService.isSlim() || this.layoutService.isSlimPlus())) {
+            const el = event.element;
+            const elParent = el.parentElement;
+            this.calculatePosition(el, elParent);
+        }
+    }
+    onChildVisibleChange(visible, item, idx) {
+        this.childrenVisibilitySubject[idx].next(visible);
+    }
+    calculatePosition(overlay, target) {
+        if (overlay) {
+            const top = target.getBoundingClientRect().top;
+            const vHeight = window.innerHeight;
+            const oHeight = overlay.offsetHeight;
+            // reset
+            overlay.style.top = '';
+            overlay.style.left = '';
+            if (this.layoutService.isSlim() || this.layoutService.isSlimPlus()) {
+                const height = top + oHeight;
+                overlay.style.top = vHeight < height ? `${top - (height - vHeight)}px` : `${top}px`;
+            }
+        }
+    }
+    checkIfMenuItemIsAllowedFromGuard(routerState) {
+        this.guardsIsAllowedSubscription?.unsubscribe();
+        if (this.item.guards?.length) {
+            const obs = [];
+            for (const guard of this.item.guards) {
+                if (guard && typeof guard === 'function') {
+                    const guardFnInstance = guard;
+                    runInInjectionContext(this.injector, () => {
+                        const canActivateRes = guardFnInstance(this.route.snapshot, routerState);
+                        let canActivateObs;
+                        if (canActivateRes instanceof Observable) {
+                            canActivateObs = canActivateRes;
+                        }
+                        else if (canActivateRes instanceof Promise) {
+                            canActivateObs = from(canActivateRes);
+                        }
+                        else {
+                            canActivateObs = of(canActivateRes);
+                        }
+                        obs.push(canActivateObs.pipe(first(), map(res => res === true) // if url tree is present, that means redirect and implies not allowed
+                        ));
+                    });
+                }
+            }
+            this.guardsIsAllowedSubscription = combineLatest(obs)
+                .pipe(first())
+                .subscribe(next => {
+                const result = next.every(n => n === true);
+                this.guardsIsAllowed.set(result);
+            });
+        }
+        else {
+            this.guardsIsAllowed.set(true);
+        }
+    }
+    updateActiveStateFromRoute() {
+        if (this.itemUrl) {
+            this.active.set(this.router.isActive(this.itemUrl, {
+                matrixParams: 'ignored',
+                queryParams: 'ignored',
+                paths: this.item.items ? 'subset' : 'exact',
+                fragment: 'ignored'
+            }));
+        }
+        else {
+            this.active.set(false);
+        }
+    }
+    processItemChildrenVisibility() {
+        if (this.item.items) {
+            this.childrenVisibilitySubject = this.item.items.map(() => new BehaviorSubject(true));
+            combineLatest(this.childrenVisibilitySubject.map(s => s.asObservable().pipe(distinctUntilChanged())))
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(visible => {
+                const anyChildVisible = visible.some(v => v === true);
+                this.active.set(!anyChildVisible);
+            });
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: MenuItemComponent, isStandalone: true, selector: "[mng-menuitem]", inputs: { item: "item", root: "root" }, outputs: { visibleChangeEventEmitter: "visibleChange" }, host: { properties: { "class.layout-root-menuitem": "this.root", "class.active-menuitem": "this.activeClass" } }, viewQueries: [{ propertyName: "submenu", first: true, predicate: ["submenu"], descendants: true }], ngImport: i0, template: "@if (visible()) {\n    @if (root) {\n        <div class=\"layout-menuitem-root-text\">\n            {{ item.label! | translate }}\n        </div>\n    }\n    @if (!item.href) {\n        @if (!item.routerLink || item.items) {\n            <a\n                [attr.href]=\"item.href\"\n                (click)=\"itemClick($event)\"\n                (keydown.enter)=\"itemClick($event)\"\n                [routerLink]=\"item.routerLink\"\n                [attr.target]=\"item.target\"\n                [attr.tabindex]=\"0\"\n                [ngClass]=\"item.className ?? ''\"\n                pRipple>\n                <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n                <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n                @if (item.items || item.lazyChildren) {\n                    <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\"></i>\n                }\n                @if (item.badge) {\n                    <span class=\"menuitem-badge\">{{ item.badge }}</span>\n                }\n            </a>\n        } @else if (item.routerLink && !item.items) {\n            <a\n                (click)=\"itemClick($event)\"\n                [routerLink]=\"item.routerLink\"\n                [attr.target]=\"item.target\"\n                [attr.tabindex]=\"0\"\n                [ngClass]=\"item.className ?? '' + (this.active() ? ' active-route' : '')\"\n                [preserveFragment]=\"item.preserveFragment\"\n                [skipLocationChange]=\"item.skipLocationChange\"\n                [replaceUrl]=\"item.replaceUrl\"\n                [queryParams]=\"item.queryParams\"\n                pRipple>\n                <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n                <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n                @if (item.items || item.lazyChildren) {\n                    <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\"></i>\n                }\n                @if (item.badge) {\n                    <span class=\"menuitem-badge\">{{ item.badge }}</span>\n                }\n            </a>\n        }\n    } @else {\n        @if (!item.items) {\n            <a (click)=\"itemClick($event)\" [attr.href]=\"item.href\" [attr.target]=\"item.target\" [attr.tabindex]=\"0\" [ngClass]=\"item.className ?? ''\" pRipple>\n                <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n                <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n                @if (item.items || item.lazyChildren) {\n                    <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\"></i>\n                }\n                @if (item.badge) {\n                    <span class=\"menuitem-badge\">{{ item.badge }}</span>\n                }\n            </a>\n        }\n    }\n    @if (item.items) {\n        <ul #submenu [@children]=\"submenuAnimation\" (@children.done)=\"onSubmenuAnimated($event)\">\n            @for (child of item.items; track child; let i = $index) {\n                <li mng-menuitem [item]=\"child\" [class]=\"child.badgeClassName\" (visibleChange)=\"onChildVisibleChange($event, item, i)\"></li>\n            }\n        </ul>\n    }\n}\n", dependencies: [{ kind: "component", type: MenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "root"], outputs: ["visibleChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i1$2.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], animations: [
+            trigger('children', [
+                state('collapsed', style({
+                    height: '0'
+                })),
+                state('expanded', style({
+                    height: '*'
+                })),
+                state('hidden', style({
+                    display: 'none'
+                })),
+                state('visible', style({
+                    display: 'block'
+                })),
+                transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MenuItemComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: '[mng-menuitem]', imports: [NgClass, RippleModule, TooltipModule, RouterModule, TranslateModule, AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, animations: [
+                        trigger('children', [
+                            state('collapsed', style({
+                                height: '0'
+                            })),
+                            state('expanded', style({
+                                height: '*'
+                            })),
+                            state('hidden', style({
+                                display: 'none'
+                            })),
+                            state('visible', style({
+                                display: 'block'
+                            })),
+                            transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
+                        ])
+                    ], template: "@if (visible()) {\n    @if (root) {\n        <div class=\"layout-menuitem-root-text\">\n            {{ item.label! | translate }}\n        </div>\n    }\n    @if (!item.href) {\n        @if (!item.routerLink || item.items) {\n            <a\n                [attr.href]=\"item.href\"\n                (click)=\"itemClick($event)\"\n                (keydown.enter)=\"itemClick($event)\"\n                [routerLink]=\"item.routerLink\"\n                [attr.target]=\"item.target\"\n                [attr.tabindex]=\"0\"\n                [ngClass]=\"item.className ?? ''\"\n                pRipple>\n                <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n                <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n                @if (item.items || item.lazyChildren) {\n                    <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\"></i>\n                }\n                @if (item.badge) {\n                    <span class=\"menuitem-badge\">{{ item.badge }}</span>\n                }\n            </a>\n        } @else if (item.routerLink && !item.items) {\n            <a\n                (click)=\"itemClick($event)\"\n                [routerLink]=\"item.routerLink\"\n                [attr.target]=\"item.target\"\n                [attr.tabindex]=\"0\"\n                [ngClass]=\"item.className ?? '' + (this.active() ? ' active-route' : '')\"\n                [preserveFragment]=\"item.preserveFragment\"\n                [skipLocationChange]=\"item.skipLocationChange\"\n                [replaceUrl]=\"item.replaceUrl\"\n                [queryParams]=\"item.queryParams\"\n                pRipple>\n                <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n                <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n                @if (item.items || item.lazyChildren) {\n                    <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\"></i>\n                }\n                @if (item.badge) {\n                    <span class=\"menuitem-badge\">{{ item.badge }}</span>\n                }\n            </a>\n        }\n    } @else {\n        @if (!item.items) {\n            <a (click)=\"itemClick($event)\" [attr.href]=\"item.href\" [attr.target]=\"item.target\" [attr.tabindex]=\"0\" [ngClass]=\"item.className ?? ''\" pRipple>\n                <i [ngClass]=\"item.icon ?? ''\" class=\"layout-menuitem-icon\"></i>\n                <span class=\"layout-menuitem-text\">{{ item.label! | translate }}</span>\n                @if (item.items || item.lazyChildren) {\n                    <i class=\"pi pi-fw pi-angle-down layout-submenu-toggler\"></i>\n                }\n                @if (item.badge) {\n                    <span class=\"menuitem-badge\">{{ item.badge }}</span>\n                }\n            </a>\n        }\n    }\n    @if (item.items) {\n        <ul #submenu [@children]=\"submenuAnimation\" (@children.done)=\"onSubmenuAnimated($event)\">\n            @for (child of item.items; track child; let i = $index) {\n                <li mng-menuitem [item]=\"child\" [class]=\"child.badgeClassName\" (visibleChange)=\"onChildVisibleChange($event, item, i)\"></li>\n            }\n        </ul>\n    }\n}\n" }]
+        }], ctorParameters: () => [], propDecorators: { item: [{
+                type: Input,
+                args: [{ required: true }]
+            }], root: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.layout-root-menuitem']
+            }], visibleChangeEventEmitter: [{
+                type: Output,
+                args: ['visibleChange']
+            }], submenu: [{
+                type: ViewChild,
+                args: ['submenu']
+            }], activeClass: [{
+                type: HostBinding,
+                args: ['class.active-menuitem']
+            }] } });
+
+class MenuComponent {
+    constructor() {
+        this.route = inject(ActivatedRoute);
+        this.menuService = inject(MenuService);
+        this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
+        this.layoutService = inject(MainLayoutComponentService);
+        this.menuItems = [];
+    }
+    ngOnInit() {
+        if (this.config?.menuItems && Array.isArray(this.config.menuItems)) {
+            this.menuItems = this.wrapMenuItems(this.config.menuItems);
+        }
+        else if (Array.isArray(this.route.snapshot.data?.menuItems)) {
+            this.menuItems = this.wrapMenuItems(this.route.snapshot.data.menuItems);
+        }
+        this.menuService.initialize(this.menuItems);
+    }
+    wrapMenuItems(menuItems) {
+        if (this.layoutService.isSlim() || this.layoutService.isSlimPlus()) {
+            return menuItems;
+        }
+        else {
+            return [{ items: menuItems }];
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: MenuComponent, isStandalone: true, selector: "mng-menu", ngImport: i0, template: "<ul class=\"layout-menu\">\n    @for (item of menuItems; track item) {\n        @if (!item.separator) {\n            <li mng-menuitem [item]=\"item\" [root]=\"true\"></li>\n        }\n        @if (item.separator) {\n            <li class=\"menu-separator\"></li>\n        }\n    }\n</ul>\n", dependencies: [{ kind: "component", type: MenuItemComponent, selector: "[mng-menuitem]", inputs: ["item", "root"], outputs: ["visibleChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MenuComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-menu', imports: [MenuItemComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ul class=\"layout-menu\">\n    @for (item of menuItems; track item) {\n        @if (!item.separator) {\n            <li mng-menuitem [item]=\"item\" [root]=\"true\"></li>\n        }\n        @if (item.separator) {\n            <li class=\"menu-separator\"></li>\n        }\n    }\n</ul>\n" }]
+        }] });
+
+class SidebarComponent {
+    constructor() {
+        this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
+        this.commons = inject(CommonsService);
+        this.layoutService = inject(MainLayoutComponentService);
+        this.el = inject(ElementRef);
+        this.timeout = null;
+        this.menuComponent = MenuComponent;
+    }
+    ngOnInit() {
+        if (this.config?.components?.menu !== undefined) {
+            this.menuComponent = this.config.components.menu;
+        }
+    }
+    onMouseEnter() {
+        if (!this.layoutService.state().anchored) {
+            if (this.timeout) {
+                clearTimeout(this.timeout);
+                this.timeout = null;
+            }
+            this.layoutService.state.update(state => ({
+                ...state,
+                sidebarActive: true
+            }));
+        }
+    }
+    onMouseLeave() {
+        if (!this.layoutService.state().anchored) {
+            if (!this.timeout) {
+                this.timeout = setTimeout(() => this.layoutService.state.update(state => ({
+                    ...state,
+                    sidebarActive: false
+                })), 300);
+            }
+        }
+    }
+    anchor() {
+        this.layoutService.state.update(state => ({
+            ...state,
+            anchored: !state.anchored
+        }));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: SidebarComponent, isStandalone: true, selector: "mng-sidebar", viewQueries: [{ propertyName: "menuContainer", first: true, predicate: ["menuContainer"], descendants: true }], ngImport: i0, template: "<div class=\"layout-sidebar\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n    <div class=\"sidebar-header\">\n        <a [routerLink]=\"['/']\" class=\"app-logo\">\n            <div class=\"app-logo-small h-2rem\">\n                <img [src]=\"commons.colorSchemeIsLight ? commons.appLogoDark : commons.appLogoLight\" [alt]=\"'App logo'\" />\n            </div>\n            <div class=\"app-logo-normal\">\n                <img class=\"h-2rem\" [src]=\"commons.colorSchemeIsLight ? commons.appLogoDark : commons.appLogoLight\" [alt]=\"'App logo'\" />\n                <img class=\"h-2rem ml-3\" [src]=\"commons.colorSchemeIsLight ? commons.appLogoNameDark : commons.appLogoNameLight\" [alt]=\"'App name'\" />\n            </div>\n        </a>\n        <button class=\"layout-sidebar-anchor p-link z-2\" type=\"button\" (click)=\"anchor()\"></button>\n    </div>\n\n    @if (menuComponent) {\n        <div #menuContainer class=\"layout-menu-container\">\n            <div [mngComponent]=\"menuComponent\" [attachToHost]=\"true\"></div>\n        </div>\n    }\n</div>\n", dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "nodeInjector"], outputs: ["instanceCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: SidebarComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-sidebar', imports: [RouterModule, MenuComponent, ComponentDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-sidebar\" (mouseenter)=\"onMouseEnter()\" (mouseleave)=\"onMouseLeave()\">\n    <div class=\"sidebar-header\">\n        <a [routerLink]=\"['/']\" class=\"app-logo\">\n            <div class=\"app-logo-small h-2rem\">\n                <img [src]=\"commons.colorSchemeIsLight ? commons.appLogoDark : commons.appLogoLight\" [alt]=\"'App logo'\" />\n            </div>\n            <div class=\"app-logo-normal\">\n                <img class=\"h-2rem\" [src]=\"commons.colorSchemeIsLight ? commons.appLogoDark : commons.appLogoLight\" [alt]=\"'App logo'\" />\n                <img class=\"h-2rem ml-3\" [src]=\"commons.colorSchemeIsLight ? commons.appLogoNameDark : commons.appLogoNameLight\" [alt]=\"'App name'\" />\n            </div>\n        </a>\n        <button class=\"layout-sidebar-anchor p-link z-2\" type=\"button\" (click)=\"anchor()\"></button>\n    </div>\n\n    @if (menuComponent) {\n        <div #menuContainer class=\"layout-menu-container\">\n            <div [mngComponent]=\"menuComponent\" [attachToHost]=\"true\"></div>\n        </div>\n    }\n</div>\n" }]
+        }], propDecorators: { menuContainer: [{
+                type: ViewChild,
+                args: ['menuContainer']
+            }] } });
+
+class TopbarUserComponent {
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
+        this.commons = inject(CommonsService);
+        this.hrefJsVoid = inject(DomSanitizer).bypassSecurityTrustUrl('javascript:void(0)');
+    }
+    ngOnInit() {
+        this.commons.user$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(u => {
+            this.user = u;
+        });
+        this.userRoles$ = this.commons.userRoles$;
+    }
+    logout(user, event) {
+        if (typeof user?.logout === 'function') {
+            event.preventDefault();
+            event.stopPropagation();
+            user.logout();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: TopbarUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: TopbarUserComponent, isStandalone: true, selector: "mng-topbar-user-component", ngImport: i0, template: "<a\n    class=\"cursor-pointer lg:pr-4\"\n    pStyleClass=\"@next\"\n    enterFromClass=\"ng-hidden\"\n    enterActiveClass=\"px-scalein\"\n    leaveToClass=\"ng-hidden\"\n    leaveActiveClass=\"px-fadeout\"\n    [hideOnOutsideClick]=\"true\"\n    pRipple>\n    <i class=\"pi pi-fw pi-user text-2xl\"></i>\n    <span class=\"hidden sm:inline-block\">&nbsp; {{ user?.displayName ?? user?.username }}</span>\n</a>\n<ul class=\"topbar-menu active-topbar-menu w-15rem z-5 ng-hidden border-round\">\n    <li role=\"menuitem\">\n        <a\n            class=\"flex align-items-center transition-duration-200\"\n            pStyleClass=\"@grandparent\"\n            enterFromClass=\"ng-hidden\"\n            enterActiveClass=\"px-scalein\"\n            leaveToClass=\"ng-hidden\"\n            leaveActiveClass=\"px-fadeout\">\n            <i class=\"pi pi-fw pi-user text-base mr-2\"></i>\n            <div>\n                <strong>{{ user?.displayName ?? user?.username }}</strong>\n                @if (((userRoles$ | async)?.length ?? 0) > 0) {\n                    <small>\n                        <br />\n                        {{ userRoles$ | mngEnumerateAsync: undefined : undefined : undefined : 'roles' | async }}\n                    </small>\n                }\n            </div>\n        </a>\n    </li>\n    @if (user?.logout || user?.logoutUrl) {\n        <li role=\"menuitem\">\n            <a\n                [href]=\"user?.logoutUrl ?? hrefJsVoid\"\n                (click)=\"logout(user, $event)\"\n                class=\"flex align-items-center hover:text-primary-500 transition-duration-200\"\n                pStyleClass=\"@grandparent\"\n                enterFromClass=\"ng-hidden\"\n                enterActiveClass=\"px-scalein\"\n                leaveToClass=\"ng-hidden\"\n                leaveActiveClass=\"px-fadeout\">\n                <i class=\"pi pi-fw pi-sign-out text-base mr-2\"></i>\n                <span>{{ 'mngTopbar.logout' | translate }}</span>\n            </a>\n        </li>\n    }\n</ul>\n", dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: EnumerateAsyncPipe, name: "mngEnumerateAsync" }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i1$2.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i3.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: TopbarUserComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-topbar-user-component', imports: [AsyncPipe, EnumerateAsyncPipe, TranslateModule, RippleModule, StyleClassModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<a\n    class=\"cursor-pointer lg:pr-4\"\n    pStyleClass=\"@next\"\n    enterFromClass=\"ng-hidden\"\n    enterActiveClass=\"px-scalein\"\n    leaveToClass=\"ng-hidden\"\n    leaveActiveClass=\"px-fadeout\"\n    [hideOnOutsideClick]=\"true\"\n    pRipple>\n    <i class=\"pi pi-fw pi-user text-2xl\"></i>\n    <span class=\"hidden sm:inline-block\">&nbsp; {{ user?.displayName ?? user?.username }}</span>\n</a>\n<ul class=\"topbar-menu active-topbar-menu w-15rem z-5 ng-hidden border-round\">\n    <li role=\"menuitem\">\n        <a\n            class=\"flex align-items-center transition-duration-200\"\n            pStyleClass=\"@grandparent\"\n            enterFromClass=\"ng-hidden\"\n            enterActiveClass=\"px-scalein\"\n            leaveToClass=\"ng-hidden\"\n            leaveActiveClass=\"px-fadeout\">\n            <i class=\"pi pi-fw pi-user text-base mr-2\"></i>\n            <div>\n                <strong>{{ user?.displayName ?? user?.username }}</strong>\n                @if (((userRoles$ | async)?.length ?? 0) > 0) {\n                    <small>\n                        <br />\n                        {{ userRoles$ | mngEnumerateAsync: undefined : undefined : undefined : 'roles' | async }}\n                    </small>\n                }\n            </div>\n        </a>\n    </li>\n    @if (user?.logout || user?.logoutUrl) {\n        <li role=\"menuitem\">\n            <a\n                [href]=\"user?.logoutUrl ?? hrefJsVoid\"\n                (click)=\"logout(user, $event)\"\n                class=\"flex align-items-center hover:text-primary-500 transition-duration-200\"\n                pStyleClass=\"@grandparent\"\n                enterFromClass=\"ng-hidden\"\n                enterActiveClass=\"px-scalein\"\n                leaveToClass=\"ng-hidden\"\n                leaveActiveClass=\"px-fadeout\">\n                <i class=\"pi pi-fw pi-sign-out text-base mr-2\"></i>\n                <span>{{ 'mngTopbar.logout' | translate }}</span>\n            </a>\n        </li>\n    }\n</ul>\n" }]
+        }] });
+
+class TopbarComponent {
+    constructor() {
+        this.el = inject(ElementRef);
+        this.commons = inject(CommonsService);
+        this.mainLayoutService = inject(MainLayoutComponentService);
+        this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
+        this.breadcrumbComponent = BreadcrumbComponent;
+        this.topbarUserComponent = TopbarUserComponent;
+        this.languages = ['en'];
+        this.selectedLanguage = 'en';
+    }
+    ngOnInit() {
+        if (this.config?.components?.topbarUser !== undefined) {
+            this.topbarUserComponent = this.config.components.topbarUser;
+        }
+        if (this.config?.components?.breadcrumb !== undefined) {
+            this.breadcrumbComponent = this.config.components.breadcrumb;
+        }
+        this.languages = this.commons.appLanguages;
+        this.selectedLanguage = this.commons.getOrInitLanguage();
+    }
+    onMenuButtonClick() {
+        this.mainLayoutService.onMenuToggle();
+    }
+    switchLanguage(language) {
+        this.commons.appLanguage = language;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: TopbarComponent, isStandalone: true, selector: "mng-topbar", viewQueries: [{ propertyName: "menuButton", first: true, predicate: ["menubutton"], descendants: true }, { propertyName: "appSidebar", first: true, predicate: SidebarComponent, descendants: true }], ngImport: i0, template: "<div class=\"layout-topbar\">\n    <div class=\"topbar-start\">\n        <button #menubutton type=\"button\" class=\"topbar-menubutton p-link p-trigger\" (click)=\"onMenuButtonClick()\">\n            <i class=\"pi pi-bars\"></i>\n        </button>\n\n        @if (breadcrumbComponent) {\n            <div class=\"topbar-breadcrumb\">\n                <div [mngComponent]=\"breadcrumbComponent\" [attachToHost]=\"true\"></div>\n            </div>\n        }\n    </div>\n    <div class=\"layout-topbar-menu-section\">\n        <mng-sidebar></mng-sidebar>\n    </div>\n    <div class=\"topbar-end\">\n        <ul class=\"topbar-menu\">\n            @if (languages.length > 1) {\n                <li class=\"profile-item\">\n                    <i class=\"pi pi-fw pi-globe\"></i>\n                    <p-dropdown [ngModel]=\"selectedLanguage\" [options]=\"languages\" (onChange)=\"switchLanguage($event.value)\"></p-dropdown>\n                </li>\n            }\n            @if (topbarUserComponent) {\n                <li #userMenuItem class=\"profile-item topbar-item mr-3\" [mngComponent]=\"topbarUserComponent\" [attachToHost]=\"true\"></li>\n            }\n        </ul>\n    </div>\n</div>\n", dependencies: [{ kind: "component", type: SidebarComponent, selector: "mng-sidebar" }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: StyleClassModule }, { kind: "ngmodule", type: RippleModule }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i1$4.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "filterPlaceholder", "filterLocale", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "nodeInjector"], outputs: ["instanceCreated"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: TopbarComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-topbar', imports: [SidebarComponent, NgClass, ButtonModule, StyleClassModule, RippleModule, BreadcrumbComponent, AsyncPipe, DropdownModule, ComponentDirective, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"layout-topbar\">\n    <div class=\"topbar-start\">\n        <button #menubutton type=\"button\" class=\"topbar-menubutton p-link p-trigger\" (click)=\"onMenuButtonClick()\">\n            <i class=\"pi pi-bars\"></i>\n        </button>\n\n        @if (breadcrumbComponent) {\n            <div class=\"topbar-breadcrumb\">\n                <div [mngComponent]=\"breadcrumbComponent\" [attachToHost]=\"true\"></div>\n            </div>\n        }\n    </div>\n    <div class=\"layout-topbar-menu-section\">\n        <mng-sidebar></mng-sidebar>\n    </div>\n    <div class=\"topbar-end\">\n        <ul class=\"topbar-menu\">\n            @if (languages.length > 1) {\n                <li class=\"profile-item\">\n                    <i class=\"pi pi-fw pi-globe\"></i>\n                    <p-dropdown [ngModel]=\"selectedLanguage\" [options]=\"languages\" (onChange)=\"switchLanguage($event.value)\"></p-dropdown>\n                </li>\n            }\n            @if (topbarUserComponent) {\n                <li #userMenuItem class=\"profile-item topbar-item mr-3\" [mngComponent]=\"topbarUserComponent\" [attachToHost]=\"true\"></li>\n            }\n        </ul>\n    </div>\n</div>\n" }]
+        }], propDecorators: { menuButton: [{
+                type: ViewChild,
+                args: ['menubutton']
+            }], appSidebar: [{
+                type: ViewChild,
+                args: [SidebarComponent]
+            }] } });
+
+class MainLayoutComponent {
+    constructor() {
+        this.commonsConfig = inject(COMMONS_MODULE_CONFIG_IT, { optional: true });
+        this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
+        this.layoutService = inject(MainLayoutComponentService);
+        this.menuService = inject(MenuService);
+        this.renderer = inject(Renderer2);
+        this.colorScheme = signal(this.commonsConfig?.app?.colorScheme ?? 'light');
+        this.menuMode = signal(this.config?.menuMode ?? 'static');
+        this.ripple = signal(this.config?.ripple ?? true);
+        this.useNotificationWrapper = true;
+        this.topbarComponent = TopbarComponent;
+        this.breadcrumbsComponent = BreadcrumbComponent;
+        this.footerComponent = FooterComponent;
+        this.layoutService.overlayOpen$.pipe(takeUntilDestroyed()).subscribe(() => {
+            if (!this.menuOutsideClickListener) {
+                this.menuOutsideClickListener = this.renderer.listen('document', 'click', event => {
+                    const isOutsideClicked = !(this.appTopbar?.nativeElement.isSameNode(event.target) || this.appTopbar?.nativeElement.contains(event.target));
+                    if (isOutsideClicked) {
+                        this.hideMenu();
+                    }
+                });
+            }
+            if (this.layoutService.state().staticMenuMobileActive) {
+                this.blockBodyScroll();
+            }
+        });
+    }
+    ngOnInit() {
+        this.useNotificationWrapper = !this.config?.disableNotificationWrapper;
+        if (this.config?.components?.topbar !== undefined) {
+            this.topbarComponent = this.config.components.topbar;
+        }
+        if (this.config?.components?.breadcrumb !== undefined) {
+            this.breadcrumbsComponent = this.config.components.breadcrumb;
+        }
+        if (this.config?.components?.footer !== undefined) {
+            this.footerComponent = this.config.components.footer;
+        }
+    }
+    blockBodyScroll() {
+        if (document.body.classList) {
+            document.body.classList.add('blocked-scroll');
+        }
+        else {
+            document.body.className += ' blocked-scroll';
+        }
+    }
+    unblockBodyScroll() {
+        if (document.body.classList) {
+            document.body.classList.remove('blocked-scroll');
+        }
+        else {
+            document.body.className = document.body.className.replace(new RegExp('(^|\\b)' + 'blocked-scroll'.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
+        }
+    }
+    hideMenu() {
+        this.layoutService.state.update(state => ({
+            ...state,
+            overlayMenuActive: false,
+            staticMenuMobileActive: false,
+            menuHoverActive: false
+        }));
+        this.menuService.reset();
+        if (this.menuOutsideClickListener) {
+            this.menuOutsideClickListener();
+            this.menuOutsideClickListener = null;
+        }
+        this.unblockBodyScroll();
+    }
+    ngOnDestroy() {
+        if (this.menuOutsideClickListener) {
+            this.menuOutsideClickListener();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MainLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.2.1", type: MainLayoutComponent, isStandalone: true, selector: "mng-main-layout", providers: [MainLayoutComponentService], viewQueries: [{ propertyName: "appTopbar", first: true, predicate: ["topbarCmp"], descendants: true }], ngImport: i0, template: "@if (useNotificationWrapper) {\n    <mng-notification-wrapper>\n        <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n    </mng-notification-wrapper>\n} @else {\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n}\n\n<ng-template #content>\n    <div\n        class=\"layout-container\"\n        [ngClass]=\"{\n            'layout-light': colorScheme() === 'light',\n            'layout-dark': colorScheme() === 'dark',\n            'layout-overlay': menuMode() === 'overlay',\n            'layout-static': menuMode() === 'static',\n            'layout-reveal': menuMode() === 'reveal',\n            'layout-drawer': menuMode() === 'drawer',\n            'layout-slim': menuMode() === 'slim',\n            'layout-slim-plus': menuMode() === 'slim-plus',\n            'layout-static-inactive': layoutService.state().staticMenuDesktopInactive && menuMode() === 'static',\n            'layout-overlay-active': layoutService.state().overlayMenuActive,\n            'layout-mobile-active': layoutService.state().staticMenuMobileActive,\n            'p-ripple-disabled': !ripple(),\n            'layout-sidebar-active': layoutService.state().sidebarActive,\n            'layout-sidebar-anchored': layoutService.state().anchored\n        }\">\n        <div class=\"layout-content-wrapper\">\n            @if (topbarComponent) {\n                <div #topbarCmp class=\"layout-topbar-wrapper\" [mngComponent]=\"topbarComponent\" [attachToHost]=\"true\"></div>\n            }\n            @if (breadcrumbsComponent) {\n                <div class=\"content-breadcrumb\">\n                    <div [mngComponent]=\"breadcrumbsComponent\" [attachToHost]=\"true\"></div>\n                </div>\n            }\n            <div class=\"layout-content\">\n                <router-outlet></router-outlet>\n            </div>\n            <div class=\"layout-mask\"></div>\n            @if (footerComponent) {\n                <div [mngComponent]=\"footerComponent\" [attachToHost]=\"true\"></div>\n            }\n        </div>\n    </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$3.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "nodeInjector"], outputs: ["instanceCreated"] }, { kind: "component", type: NotificationWrapperComponent, selector: "mng-notification-wrapper" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.1", ngImport: i0, type: MainLayoutComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-main-layout', imports: [NgClass, RouterModule, TopbarComponent, BreadcrumbComponent, ComponentDirective, AsyncPipe, NotificationWrapperComponent, NgTemplateOutlet], providers: [MainLayoutComponentService], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (useNotificationWrapper) {\n    <mng-notification-wrapper>\n        <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n    </mng-notification-wrapper>\n} @else {\n    <ng-template [ngTemplateOutlet]=\"content\"></ng-template>\n}\n\n<ng-template #content>\n    <div\n        class=\"layout-container\"\n        [ngClass]=\"{\n            'layout-light': colorScheme() === 'light',\n            'layout-dark': colorScheme() === 'dark',\n            'layout-overlay': menuMode() === 'overlay',\n            'layout-static': menuMode() === 'static',\n            'layout-reveal': menuMode() === 'reveal',\n            'layout-drawer': menuMode() === 'drawer',\n            'layout-slim': menuMode() === 'slim',\n            'layout-slim-plus': menuMode() === 'slim-plus',\n            'layout-static-inactive': layoutService.state().staticMenuDesktopInactive && menuMode() === 'static',\n            'layout-overlay-active': layoutService.state().overlayMenuActive,\n            'layout-mobile-active': layoutService.state().staticMenuMobileActive,\n            'p-ripple-disabled': !ripple(),\n            'layout-sidebar-active': layoutService.state().sidebarActive,\n            'layout-sidebar-anchored': layoutService.state().anchored\n        }\">\n        <div class=\"layout-content-wrapper\">\n            @if (topbarComponent) {\n                <div #topbarCmp class=\"layout-topbar-wrapper\" [mngComponent]=\"topbarComponent\" [attachToHost]=\"true\"></div>\n            }\n            @if (breadcrumbsComponent) {\n                <div class=\"content-breadcrumb\">\n                    <div [mngComponent]=\"breadcrumbsComponent\" [attachToHost]=\"true\"></div>\n                </div>\n            }\n            <div class=\"layout-content\">\n                <router-outlet></router-outlet>\n            </div>\n            <div class=\"layout-mask\"></div>\n            @if (footerComponent) {\n                <div [mngComponent]=\"footerComponent\" [attachToHost]=\"true\"></div>\n            }\n        </div>\n    </div>\n</ng-template>\n" }]
+        }], ctorParameters: () => [], propDecorators: { appTopbar: [{
+                type: ViewChild,
+                args: ['topbarCmp']
+            }] } });
+
+class LayoutRouteBuilder {
+    static create(path) {
+        return RouteBuilder.create(path, MainLayoutComponent);
+    }
+    static fromComponent(path, component) {
+        return RouteBuilder.create(path, component);
+    }
+}
+
+/**
+ * Prepares providers for usage of the layout functionalities.
+ *
+ * @returns {CommonsFeature} The `CommonsFeature` object with the layout configuration.
+ */
+function withLayout(config) {
+    return {
+        type: CommonsFeatureTypeEnum.Layout,
+        providers: [
+            MenuService,
+            VersionService,
+            {
+                provide: COMMONS_LAYOUT_FEATURE_CONFIG_IT,
+                useValue: config
+            }
+        ]
+    };
+}
+
+// components
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { BreadcrumbComponent, COMMONS_LAYOUT_FEATURE_CONFIG_IT, FooterComponent, LayoutRouteBuilder, MainLayoutComponent, MainLayoutComponentService, MenuComponent, MenuItemComponent, MenuService, SidebarComponent, TopbarComponent, TopbarUserComponent, VersionComponent, VersionService, withLayout };
+//# sourceMappingURL=mediusinc-mng-commons-layout.mjs.map