@mediusinc/mng-commons-layout 5.5.0 → 6.0.0-rc.3

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

@@ -1,35 +1,41 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, PLATFORM_ID, signal, computed, afterNextRender, effect, Injectable, Component, ChangeDetectionStrategy, DestroyRef, input, output, viewChild, untracked, ElementRef, Injector, Renderer2 } from '@angular/core';
-import * as i1$4 from '@angular/router';
-import { RouterLink, Router, NavigationEnd, RouterModule, ActivatedRoute } from '@angular/router';
-import * as i1$1 from '@ngx-translate/core';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import * as i1 from 'primeng/button';
-import { ButtonModule, Button } from 'primeng/button';
-import { DOCUMENT, AsyncPipe, NgOptimizedImage, NgClass, NgTemplateOutlet } from '@angular/common';
-import { Subject, ReplaySubject, catchError, of, switchMap, take, startWith, distinctUntilChanged } from 'rxjs';
+import { signal, computed, InjectionToken, inject, PLATFORM_ID, afterNextRender, effect, Injectable, DestroyRef } from '@angular/core';
+import { DOCUMENT } from '@angular/common';
+import { Subject, ReplaySubject, startWith, take } from 'rxjs';
 import * as i2 from '@mediusinc/mng-commons/core';
-import { COMMONS_MODULE_CONFIG_IT, CommonsStorageService, LoggerService, CommonsConfigurationService, JsonPathPipe, CommonsService, ComponentDirective, CommonsRouterService, adjustRouteMenuLazyChildrenRouterLinks, doesUrlMatchRouterLink, PermissionService, toObservable as toObservable$1, EnumerateAsyncPipe, NotificationWrapperComponent, createRoute, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
-import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { map, filter } from 'rxjs/operators';
-import * as i1$2 from '@angular/common/http';
-import * as i3 from '@angular/forms';
-import { FormsModule } from '@angular/forms';
-import * as i4 from 'primeng/dropdown';
-import { DropdownModule } from 'primeng/dropdown';
-import * as i1$3 from 'primeng/ripple';
-import { RippleModule } from 'primeng/ripple';
-import * as i3$1 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';
-import { DynamicDialogConfig, DynamicDialogRef, DialogService } from 'primeng/dynamicdialog';
-import { InputSwitchModule } from 'primeng/inputswitch';
-import * as i2$1 from 'primeng/radiobutton';
-import { RadioButtonModule } from 'primeng/radiobutton';
-import * as i5 from 'primeng/selectbutton';
-import { SelectButtonModule } from 'primeng/selectbutton';
+import { COMMONS_MODULE_CONFIG_IT, CommonsStorageService, LoggerService, CommonsRouterService, adjustRouteMenuLazyChildrenRouterLinks, doesUrlMatchRouterLink, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Router, NavigationEnd } from '@angular/router';
+import { filter, map } from 'rxjs/operators';
+import * as i1 from '@angular/common/http';
+
+/**
+ * @internal
+ */
+function prepareMenuItemsToInternal(menuItems, parentKey = '') {
+    const newItems = menuItems.map((item, idx) => {
+        const itemsProp = signal([]);
+        const lazyChildrenProp = signal(item.lazyChildren ?? false);
+        const hasItemsProp = computed(() => itemsProp().length > 0);
+        const newItem = {
+            ...item,
+            isVisible: item.isVisible,
+            key: parentKey ? parentKey + '-' + idx : idx.toString(),
+            config: item,
+            items: itemsProp,
+            lazyChildren: lazyChildrenProp,
+            itemsVisibility: signal([]),
+            hasItems: hasItemsProp,
+            hasItemsOrLazyChildren: computed(() => lazyChildrenProp() || hasItemsProp())
+        };
+        if (Array.isArray(item.items) && item.items.length > 0) {
+            newItem.items.set(prepareMenuItemsToInternal(item.items, newItem.key));
+            newItem.itemsVisibility.set(newItem.items()?.map(() => signal(true)));
+        }
+        return newItem;
+    });
+    return newItems;
+}
 
 const COMMONS_LAYOUT_FEATURE_CONFIG_IT = new InjectionToken('COMMONS_LAYOUT_FEATURE_CONFIG');
 
@@ -50,7 +56,7 @@ class LayoutService {
         }
     }
     getDefaultColorScheme() {
-        return this.config?.colorScheme ?? this.commonsConfig?.app?.colorScheme ?? 'auto';
+        return this.config?.colorScheme ?? 'auto';
     }
     setColorScheme(scheme) {
         const defaultColorScheme = this.getDefaultColorScheme();
@@ -95,19 +101,11 @@ class LayoutService {
         this._menuMode = signal(this.initMenuMode());
         this.menuMode = this._menuMode.asReadonly();
         // logos
-        this.appLogoLight = signal(this.config?.logoPathLight ?? this.commonsConfig?.app?.logoPathLight ?? this.config?.logoPath ?? this.commonsConfig?.app?.logoPath ?? 'assets/layout/images/logo.png');
-        this.appLogoDark = signal(this.config?.logoPathLight ?? this.commonsConfig?.app?.logoPathDark ?? this.config?.logoPath ?? this.commonsConfig?.app?.logoPath ?? 'assets/layout/images/logo.png');
+        this.appLogoLight = signal(this.config?.logoPathLight ?? this.config?.logoPath ?? 'assets/layout/images/logo.png');
+        this.appLogoDark = signal(this.config?.logoPathLight ?? this.config?.logoPath ?? 'assets/layout/images/logo.png');
         this.appLogo = computed(() => (this.colorSchemeIsLight() ? this.appLogoLight() : this.appLogoDark()));
-        this.appLogoNameLight = signal(this.config?.logoNamePathLight ??
-            this.commonsConfig?.app?.logoNamePathLight ??
-            this.config?.logoNamePath ??
-            this.commonsConfig?.app?.logoNamePath ??
-            'assets/layout/images/logo-appname.png');
-        this.appLogoNameDark = signal(this.config?.logoNamePathDark ??
-            this.commonsConfig?.app?.logoNamePathDark ??
-            this.config?.logoNamePath ??
-            this.commonsConfig?.app?.logoNamePath ??
-            'assets/layout/images/logo-appname.png');
+        this.appLogoNameLight = signal(this.config?.logoNamePathLight ?? this.config?.logoNamePath ?? 'assets/layout/images/logo-appname.png');
+        this.appLogoNameDark = signal(this.config?.logoNamePathDark ?? this.config?.logoNamePath ?? 'assets/layout/images/logo-appname.png');
         this.appLogoName = computed(() => (this.colorSchemeIsLight() ? this.appLogoNameLight() : this.appLogoNameDark()));
         // overlays
         this.isOverlay = computed(() => this.menuMode() === 'overlay');
@@ -202,221 +200,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
             type: Injectable
         }], ctorParameters: () => [] });
 
-class ErrorPageComponent {
-    constructor() {
-        this.layout = inject(LayoutService);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ErrorPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: ErrorPageComponent, isStandalone: true, selector: "mng-error-page", ngImport: i0, template: "<div [class]=\"'exception-body min-h-screen ' + (layout.colorSchemeIsLight() ? 'layout-light' : 'layout-dark')\">\n    <div class=\"exception-container min-h-screen flex align-items-center justify-content-center flex-column bg-auto md:bg-contain bg-no-repeat\">\n        <div class=\"exception-panel text-center flex align-items-center justify-content-center flex-column\">\n            <h1 class=\"text-red-400 mb-0\">{{ 'pages.notFound.title' | translate }}</h1>\n            <h3 class=\"text-red-300\">{{ 'pages.notFound.subtitle' | translate }}</h3>\n            <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n        </div>\n        <div class=\"exception-footer align-items-center flex\">\n            <img [src]=\"layout.appLogo()\" class=\"exception-logo\" alt=\"App logo\" />\n            <img [src]=\"layout.appLogoName()\" class=\"exception-appname ml-3\" alt=\"App name\" />\n        </div>\n    </div>\n</div>\n", styles: [".exception-body{background:var(--surface-ground)}.exception-body .exception-container{background:var(--exception-pages-image);background-repeat:no-repeat;background-size:contain;box-sizing:border-box}.exception-body .exception-container .exception-panel{box-sizing:border-box;flex-grow:1;margin-top:3rem;margin-bottom:3rem}.exception-body .exception-container .exception-panel h1{font-size:140px;font-weight:900;text-shadow:0 0 50px rgba(252,97,97,.2)}.exception-body .exception-container .exception-panel h3{font-size:80px;font-weight:900;margin-top:-90px;margin-bottom:50px}.exception-body .exception-container .exception-panel button{margin-top:50px}.exception-body .exception-container .exception-footer{margin-bottom:2rem}.exception-body .exception-container .exception-footer .exception-logo{width:34px}.exception-body .exception-container .exception-footer .exception-appname{width:72px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ErrorPageComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'mng-error-page', imports: [ButtonModule, TranslateModule, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'exception-body min-h-screen ' + (layout.colorSchemeIsLight() ? 'layout-light' : 'layout-dark')\">\n    <div class=\"exception-container min-h-screen flex align-items-center justify-content-center flex-column bg-auto md:bg-contain bg-no-repeat\">\n        <div class=\"exception-panel text-center flex align-items-center justify-content-center flex-column\">\n            <h1 class=\"text-red-400 mb-0\">{{ 'pages.notFound.title' | translate }}</h1>\n            <h3 class=\"text-red-300\">{{ 'pages.notFound.subtitle' | translate }}</h3>\n            <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n        </div>\n        <div class=\"exception-footer align-items-center flex\">\n            <img [src]=\"layout.appLogo()\" class=\"exception-logo\" alt=\"App logo\" />\n            <img [src]=\"layout.appLogoName()\" class=\"exception-appname ml-3\" alt=\"App name\" />\n        </div>\n    </div>\n</div>\n", styles: [".exception-body{background:var(--surface-ground)}.exception-body .exception-container{background:var(--exception-pages-image);background-repeat:no-repeat;background-size:contain;box-sizing:border-box}.exception-body .exception-container .exception-panel{box-sizing:border-box;flex-grow:1;margin-top:3rem;margin-bottom:3rem}.exception-body .exception-container .exception-panel h1{font-size:140px;font-weight:900;text-shadow:0 0 50px rgba(252,97,97,.2)}.exception-body .exception-container .exception-panel h3{font-size:80px;font-weight:900;margin-top:-90px;margin-bottom:50px}.exception-body .exception-container .exception-panel button{margin-top:50px}.exception-body .exception-container .exception-footer{margin-bottom:2rem}.exception-body .exception-container .exception-footer .exception-logo{width:34px}.exception-body .exception-container .exception-footer .exception-appname{width:72px}\n"] }]
-        }] });
-
-class NotFoundPageComponent {
-    constructor() {
-        this.layout = inject(LayoutService);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NotFoundPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.12", type: NotFoundPageComponent, isStandalone: true, selector: "mng-not-found-page", ngImport: i0, template: "<div [class]=\"'exception-body min-h-screen ' + (layout.colorSchemeIsLight() ? 'layout-light' : 'layout-dark')\">\n    <div class=\"exception-container min-h-screen flex align-items-center justify-content-center flex-column bg-auto md:bg-contain bg-no-repeat\">\n        <div class=\"exception-panel text-center flex align-items-center justify-content-center flex-column\">\n            <h1 class=\"text-red-400 mb-0\">{{ 'pages.notFound.title' | translate }}</h1>\n            <h3 class=\"text-red-300\">{{ 'pages.notFound.subtitle' | translate }}</h3>\n            <p>{{ 'pages.notFound.message' | translate }}</p>\n            <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n        </div>\n        <div class=\"exception-footer align-items-center flex\">\n            <img [src]=\"layout.appLogo()\" class=\"exception-logo\" alt=\"App logo\" />\n            <img [src]=\"layout.appLogoName()\" class=\"exception-appname ml-3\" alt=\"App name\" />\n        </div>\n    </div>\n</div>\n", styles: [".exception-body{background:var(--surface-ground)}.exception-body .exception-container{background:var(--exception-pages-image);background-repeat:no-repeat;background-size:contain;box-sizing:border-box}.exception-body .exception-container .exception-panel{box-sizing:border-box;flex-grow:1;margin-top:3rem;margin-bottom:3rem}.exception-body .exception-container .exception-panel h1{font-size:140px;font-weight:900;text-shadow:0 0 50px rgba(252,97,97,.2)}.exception-body .exception-container .exception-panel h3{font-size:80px;font-weight:900;margin-top:-90px;margin-bottom:50px}.exception-body .exception-container .exception-panel p{font-size:24px;font-weight:400;max-width:320px}.exception-body .exception-container .exception-panel button{margin-top:50px}.exception-body .exception-container .exception-footer{margin-bottom:2rem}.exception-body .exception-container .exception-footer .exception-logo{width:34px}.exception-body .exception-container .exception-footer .exception-appname{width:72px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading", "severity", "raised", "rounded", "text", "outlined", "size", "plain"] }, { kind: "directive", type: 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" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NotFoundPageComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'mng-not-found-page', imports: [ButtonModule, RouterLink, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'exception-body min-h-screen ' + (layout.colorSchemeIsLight() ? 'layout-light' : 'layout-dark')\">\n    <div class=\"exception-container min-h-screen flex align-items-center justify-content-center flex-column bg-auto md:bg-contain bg-no-repeat\">\n        <div class=\"exception-panel text-center flex align-items-center justify-content-center flex-column\">\n            <h1 class=\"text-red-400 mb-0\">{{ 'pages.notFound.title' | translate }}</h1>\n            <h3 class=\"text-red-300\">{{ 'pages.notFound.subtitle' | translate }}</h3>\n            <p>{{ 'pages.notFound.message' | translate }}</p>\n            <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n        </div>\n        <div class=\"exception-footer align-items-center flex\">\n            <img [src]=\"layout.appLogo()\" class=\"exception-logo\" alt=\"App logo\" />\n            <img [src]=\"layout.appLogoName()\" class=\"exception-appname ml-3\" alt=\"App name\" />\n        </div>\n    </div>\n</div>\n", styles: [".exception-body{background:var(--surface-ground)}.exception-body .exception-container{background:var(--exception-pages-image);background-repeat:no-repeat;background-size:contain;box-sizing:border-box}.exception-body .exception-container .exception-panel{box-sizing:border-box;flex-grow:1;margin-top:3rem;margin-bottom:3rem}.exception-body .exception-container .exception-panel h1{font-size:140px;font-weight:900;text-shadow:0 0 50px rgba(252,97,97,.2)}.exception-body .exception-container .exception-panel h3{font-size:80px;font-weight:900;margin-top:-90px;margin-bottom:50px}.exception-body .exception-container .exception-panel p{font-size:24px;font-weight:400;max-width:320px}.exception-body .exception-container .exception-panel button{margin-top:50px}.exception-body .exception-container .exception-footer{margin-bottom:2rem}.exception-body .exception-container .exception-footer .exception-logo{width:34px}.exception-body .exception-container .exception-footer .exception-appname{width:72px}\n"] }]
-        }] });
-
-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: "18.2.12", ngImport: i0, type: VersionService, deps: [{ token: i1$2.HttpClient }, { token: i2.CommonsConfigurationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: VersionService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: VersionService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: i2.CommonsConfigurationService }] });
-
-class VersionComponent {
-    constructor() {
-        this.versionService = inject(VersionService);
-        this.configService = inject(CommonsConfigurationService);
-        this.destroyRef = inject(DestroyRef);
-        this.jsonPathPipe = new JsonPathPipe();
-        this.versionInput = input(undefined, { alias: 'version' });
-        this.isLoading = signal(false);
-        this.loadedVersion = signal(undefined);
-        this.versionAsArray = computed(() => {
-            if (Array.isArray(this.versionInput())) {
-                return this.versionInput();
-            }
-            return undefined;
-        });
-        this.versionInfo = computed(() => {
-            if (this.versionAsArray() !== undefined) {
-                return undefined; // Each version will be processed separately in child component
-            }
-            const initVersion = this.versionInput();
-            if (typeof initVersion === 'string') {
-                return initVersion;
-            }
-            else if (typeof initVersion !== 'undefined' && !Array.isArray(initVersion)) {
-                const source = initVersion.source;
-                switch (source) {
-                    case 'config':
-                        return this.configService.getConfigValue(initVersion.configKey);
-                    case 'httpResource':
-                        return this.loadedVersion();
-                    case 'info':
-                        return initVersion.info;
-                    default:
-                        return initVersion;
-                }
-            }
-            return undefined;
-        });
-        this.versionAsString = computed(() => {
-            const versionInfo = this.versionInfo();
-            if (versionInfo == null) {
-                return undefined;
-            }
-            else if (typeof versionInfo === 'string') {
-                return versionInfo;
-            }
-            else {
-                return versionInfo.raw;
-            }
-        });
-        this.displayName = computed(() => this.versionInput()?.displayName);
-        this.displayText = computed(() => `${this.displayName() ?? ''}${this.displayName() && this.versionAsString() ? ': ' : ''}${!this.isLoading() ? (this.versionAsString() ?? '') : ''}`);
-        toObservable(this.versionInput)
-            .pipe(catchError(() => of(undefined)), switchMap(version => {
-            if (typeof version !== 'undefined' && !Array.isArray(version)) {
-                const config = version;
-                if (config.source === 'httpResource') {
-                    this.isLoading.set(true);
-                    const infoJsonPath = config.infoJsonPath;
-                    return this.versionService.loadVersion(config.urlPath, config.urlBaseConfigKey).pipe(take(1), map(res => ({ res, infoJsonPath })));
-                }
-            }
-            return of({ res: undefined, infoJsonPath: undefined });
-        }), takeUntilDestroyed(this.destroyRef))
-            .subscribe({
-            next: ({ res, infoJsonPath }) => {
-                if (typeof res !== 'undefined') {
-                    this.loadedVersion.set(this.jsonPathPipe.transform(res, infoJsonPath ?? '$'));
-                }
-                else {
-                    this.loadedVersion.set(undefined);
-                }
-                this.isLoading.set(false);
-            },
-            error: () => {
-                this.loadedVersion.set('');
-                this.isLoading.set(false);
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: VersionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: VersionComponent, isStandalone: true, selector: "mng-version", inputs: { versionInput: { classPropertyName: "versionInput", publicName: "version", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (versionAsArray()) {\n    @for (v of versionAsArray(); track v; let last = $last) {\n        <mng-version [version]=\"v\"></mng-version>\n        @if (!last) {\n            <br />\n        }\n    }\n} @else if (displayText()) {\n    {{ displayText() }}\n}\n", dependencies: [{ kind: "component", type: VersionComponent, selector: "mng-version", inputs: ["version"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: VersionComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'mng-version', imports: [AsyncPipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (versionAsArray()) {\n    @for (v of versionAsArray(); track v; let last = $last) {\n        <mng-version [version]=\"v\"></mng-version>\n        @if (!last) {\n            <br />\n        }\n    }\n} @else if (displayText()) {\n    {{ displayText() }}\n}\n" }]
-        }], ctorParameters: () => [] });
-
-class FooterComponent {
-    constructor() {
-        this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
-        this.layout = inject(LayoutService);
-        this.commons = inject(CommonsService);
-        this.currentYear = signal(new Date().getFullYear());
-        this.versionComponent = signal(this.config?.components?.version === false ? undefined : (this.config?.components?.version ?? VersionComponent));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", 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]=\"layout.appLogo()\" 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", "parentInjector"], outputs: ["instanceCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", 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]=\"layout.appLogo()\" 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 = computed(() => {
-            const items = this.commons.breadcrumbs();
-            return 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: "18.2.12", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", 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(); track item.id; 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: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BreadcrumbComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'mng-breadcrumb', imports: [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(); track item.id; 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" }]
-        }] });
-
-function prepareMenuItemsToInternal(menuItems, parentKey = '') {
-    const newItems = menuItems.map((item, idx) => {
-        const itemsProp = signal([]);
-        const lazyChildrenProp = signal(item.lazyChildren ?? false);
-        const hasItemsProp = computed(() => itemsProp().length > 0);
-        const newItem = {
-            ...item,
-            isVisible: typeof item.isVisible !== 'undefined' ? item.isVisible : item.visible,
-            key: parentKey ? parentKey + '-' + idx : idx.toString(),
-            config: item,
-            items: itemsProp,
-            lazyChildren: lazyChildrenProp,
-            itemsVisibility: signal([]),
-            hasItems: hasItemsProp,
-            hasItemsOrLazyChildren: computed(() => lazyChildrenProp() || hasItemsProp())
-        };
-        if (Array.isArray(item.items) && item.items.length > 0) {
-            newItem.items.set(prepareMenuItemsToInternal(item.items, newItem.key));
-            newItem.itemsVisibility.set(newItem.items()?.map(() => signal(true)));
-        }
-        return newItem;
-    });
-    return newItems;
-}
-
 class MenuService {
     constructor() {
         this.destroyRef = inject(DestroyRef);
@@ -530,448 +313,43 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
             type: Injectable
         }] });
 
-class MenuItemComponent {
-    constructor() {
-        this.menuService = inject(MenuService);
-        this.permissionService = inject(PermissionService);
-        this.layout = inject(LayoutService);
-        this.item = input.required();
-        this.root = input(false);
-        this.visibleChange = output();
-        this.submenuElRef = viewChild('submenu');
-        this.isPermitted = toSignal(toObservable(this.item).pipe(switchMap(i => (i.permissions ? this.permissionService.isMenuItemVisible(i.permissions, i.config) : of(true)))));
-        this.isVisibleFromItemSettings = toSignal(toObservable(this.item).pipe(switchMap(i => (typeof i.isVisible === 'function' ? toObservable$1(i.isVisible(i.config)) : of(i.isVisible ?? true)))));
-        this.menuChangeEvents = toSignal(this.menuService.menuChange$.pipe(distinctUntilChanged((v1, v2) => v1.key === v2.key)));
-        this.active = computed(() => {
-            if (!this.isPermitted()) {
-                return false;
-            }
-            const menuChangeEvent = this.menuChangeEvents();
-            if (menuChangeEvent) {
-                return menuChangeEvent.eventType === 'reset' || !menuChangeEvent.key
-                    ? false
-                    : this.item().key === menuChangeEvent.key || menuChangeEvent.key.startsWith((this.item().key ?? '') + '-');
-            }
-            return false;
-        });
-        this.visible = computed(() => {
-            const isPermitted = this.isPermitted();
-            if (!isPermitted) {
-                return false;
-            }
-            if (!this.isVisibleFromItemSettings()) {
-                return false;
-            }
-            const items = this.item().items();
-            if (Array.isArray(items) &&
-                items.length > 0 &&
-                this.item()
-                    .itemsVisibility()
-                    .every(v => !v())) {
-                return false;
-            }
-            return true;
-        });
-        this.submenuAnimation = computed(() => {
-            if (this.layout.isDesktop() && (this.layout.isSlim() || this.layout.isSlimPlus())) {
-                return this.layout.submenuOverlayKey() === this.item().key ? 'visible' : 'hidden';
-            }
-            else {
-                return this.root() ? 'expanded' : this.active() ? 'expanded' : 'collapsed';
-            }
-        });
-        effect(() => {
-            if (this.root() && this.active() && this.layout.isDesktop() && (this.layout.isSlim() || this.layout.isSlimPlus())) {
-                this.calculatePosition(this.submenuElRef()?.nativeElement, this.submenuElRef()?.nativeElement.parentElement);
-            }
-        });
-    }
-    itemClick(event) {
-        const item = this.item();
-        // avoid processing disabled items
-        if (item.disabled) {
-            event.preventDefault();
-            return;
-        }
-        if (item.hasItemsOrLazyChildren()) {
-            // open submenu in slim/slim+ mode
-            if (this.root() && (this.layout.isSlim() || this.layout.isSlimPlus())) {
-                this.layout.onOverlaySubmenuOpen(item.key);
-            }
-        }
-        else {
-            if (this.layout.isMobile()) {
-                this.layout.state.update(state => ({
-                    ...state,
-                    staticMenuMobileActive: false
-                }));
-            }
-            if (this.layout.isSlim() || this.layout.isSlimPlus()) {
-                this.layout.state.update(state => ({
-                    ...state,
-                    menuHoverActive: false
-                }));
-            }
-            if (this.layout.submenuOverlayKey() !== undefined) {
-                this.layout.onOverlaySubmenuClose();
-            }
-        }
-    }
-    onSubmenuAnimated(event) {
-        if (event.toState === 'visible' && this.layout.isDesktop() && (this.layout.isSlim() || this.layout.isSlimPlus())) {
-            const el = event.element;
-            const elParent = el.parentElement;
-            this.calculatePosition(el, elParent);
-        }
-    }
-    onChildVisibleChange(visible, item, idx) {
-        this.item().itemsVisibility()[idx]?.set(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.layout.isSlim() || this.layout.isSlimPlus()) {
-                const height = top + oHeight;
-                overlay.style.top = vHeight < height ? `${top - (height - vHeight)}px` : `${top}px`;
-            }
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: MenuItemComponent, isStandalone: true, selector: "[mng-menuitem]", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, root: { classPropertyName: "root", publicName: "root", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, host: { properties: { "class.active-menuitem": "!root() && active()", "class.layout-root-menuitem": "root()" } }, providers: [PermissionService], viewQueries: [{ propertyName: "submenuElRef", first: true, predicate: ["submenu"], descendants: true, isSignal: 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().hasItems()) {\n            <a\n                [attr.href]=\"item().href\"\n                [routerLink]=\"layout.isSlim() || layout.isSlimPlus() ? null : item().routerLink\"\n                (click)=\"itemClick($event)\"\n                (keydown.enter)=\"itemClick($event)\"\n                [attr.target]=\"item().target\"\n                [attr.tabindex]=\"0\"\n                [ngClass]=\"item().className ?? '' + (this.active() ? ' active-route' : '')\"\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().hasItemsOrLazyChildren()) {\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().hasItems()) {\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().hasItemsOrLazyChildren()) {\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().hasItems()) {\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().hasItemsOrLazyChildren()) {\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().hasItems()) {\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, child, 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$3.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: TooltipModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$4.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: "18.2.12", 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)'))
-                        ])
-                    ], host: {
-                        '[class.active-menuitem]': '!root() && active()',
-                        '[class.layout-root-menuitem]': 'root()'
-                    }, providers: [PermissionService], 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().hasItems()) {\n            <a\n                [attr.href]=\"item().href\"\n                [routerLink]=\"layout.isSlim() || layout.isSlimPlus() ? null : item().routerLink\"\n                (click)=\"itemClick($event)\"\n                (keydown.enter)=\"itemClick($event)\"\n                [attr.target]=\"item().target\"\n                [attr.tabindex]=\"0\"\n                [ngClass]=\"item().className ?? '' + (this.active() ? ' active-route' : '')\"\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().hasItemsOrLazyChildren()) {\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().hasItems()) {\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().hasItemsOrLazyChildren()) {\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().hasItems()) {\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().hasItemsOrLazyChildren()) {\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().hasItems()) {\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, child, i)\"></li>\n            }\n        </ul>\n    }\n}\n" }]
-        }], ctorParameters: () => [] });
-
-class MenuComponent {
-    constructor() {
-        this.route = inject(ActivatedRoute);
-        this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
-        this.layout = inject(LayoutService);
-        this.menuService = inject(MenuService);
-        this.routeData = toSignal(this.route.data);
-        effect(() => {
-            let items = [];
-            if (this.config?.menuItems && Array.isArray(this.config.menuItems)) {
-                items = this.config.menuItems;
-            }
-            else if (Array.isArray(this.routeData()?.menuItems)) {
-                items = this.routeData().menuItems;
-            }
-            // Wraps menu items
-            if (!(this.layout.isSlim() || this.layout.isSlimPlus())) {
-                items = [{ items }];
-            }
-            untracked(() => this.menuService.setItems(items));
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: MenuComponent, isStandalone: true, selector: "mng-menu", ngImport: i0, template: "<ul class=\"layout-menu\">\n    @for (item of menuService.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: "18.2.12", 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 menuService.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" }]
-        }], ctorParameters: () => [] });
-
-class SidebarComponent {
-    constructor() {
-        this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
-        this.layout = inject(LayoutService);
-        this.el = inject(ElementRef);
-        this.menuComponent = signal(this.config?.components?.menu === false ? undefined : (this.config?.components?.menu ?? MenuComponent));
-        this.timeout = null;
-    }
-    onMouseEnter() {
-        if (!this.layout.state().anchored) {
-            if (this.timeout) {
-                clearTimeout(this.timeout);
-                this.timeout = null;
-            }
-            this.layout.state.update(state => ({
-                ...state,
-                sidebarActive: true
-            }));
-        }
-    }
-    onMouseLeave() {
-        if (!this.layout.state().anchored) {
-            if (!this.timeout) {
-                this.timeout = setTimeout(() => this.layout.state.update(state => ({
-                    ...state,
-                    sidebarActive: false
-                })), 300);
-            }
-        }
-    }
-    anchor() {
-        this.layout.state.update(state => ({
-            ...state,
-            anchored: !state.anchored
-        }));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: SidebarComponent, isStandalone: true, selector: "mng-sidebar", 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]=\"layout.appLogo()\" [alt]=\"'App logo'\" />\n            </div>\n            <div class=\"app-logo-normal\">\n                <img class=\"h-2rem\" [src]=\"layout.appLogo()\" [alt]=\"'App logo'\" />\n                <img class=\"h-2rem ml-3\" [src]=\"layout.appLogoName()\" [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$4.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", "parentInjector"], outputs: ["instanceCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", 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]=\"layout.appLogo()\" [alt]=\"'App logo'\" />\n            </div>\n            <div class=\"app-logo-normal\">\n                <img class=\"h-2rem\" [src]=\"layout.appLogo()\" [alt]=\"'App logo'\" />\n                <img class=\"h-2rem ml-3\" [src]=\"layout.appLogoName()\" [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" }]
-        }] });
-
-const defaultColorSchemeOpts = [
-    {
-        value: 'auto',
-        label: 'system'
-    },
-    {
-        value: 'light',
-        label: 'light'
-    },
-    {
-        value: 'dark',
-        label: 'dark'
-    }
-];
-class SettingsComponent {
-    constructor() {
-        this.dynamicDialogConfig = inject(DynamicDialogConfig);
-        this.dynamicDialogRef = inject(DynamicDialogRef);
-        this.colorSchemeOptions = signal(defaultColorSchemeOpts);
-        this.injector = this.dynamicDialogConfig.data.injector;
-        this.translate = this.injector.get(TranslateService);
-        this.commons = this.injector.get(CommonsService);
-        this.layout = this.injector.get(LayoutService);
-        this.menuModes = this.layout.menuModes;
-        this.translate
-            .stream('mngSettings.title')
-            .pipe(takeUntilDestroyed())
-            .subscribe(t => {
-            setTimeout(() => (this.dynamicDialogConfig.header = t));
-        });
-        const translateKey = 'mngSettings.colorScheme.options';
-        this.translate
-            .stream(translateKey)
-            .pipe(takeUntilDestroyed())
-            .subscribe(t => {
-            if (t === translateKey) {
-                this.colorSchemeOptions.set(defaultColorSchemeOpts);
-            }
-            else {
-                this.colorSchemeOptions.update(options => options.map(o => ({
-                    value: o.value,
-                    label: `${t[o.value]}`
-                })));
-            }
-        });
-    }
-    switchLocale(language) {
-        this.commons.setAppLocale(language);
-    }
-    switchDataLocale(language) {
-        this.commons.setAppDataLocale(language);
-    }
-    onMenuModeChange(mode) {
-        this.layout.onMenuModeChange(mode);
-    }
-    onColorSchemeChange(scheme) {
-        this.layout.setColorScheme(scheme);
-    }
-    closeDialog() {
-        this.dynamicDialogRef.close();
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: SettingsComponent, isStandalone: true, selector: "mng-settings", ngImport: i0, template: "<div class=\"h-full flex flex-column\">\n    <div class=\"flex-grow-1 mng-action-editor-form-container\">\n        @if (commons.appLocales().length > 1 || commons.appDataLocales().length > 1) {\n            <h5>{{ 'mngSettings.locales' | translate }}</h5>\n            <div class=\"formgrid grid\">\n                @if (commons.appLocales().length > 1) {\n                    <div class=\"field pr-4\">\n                        <i class=\"pi pi-fw pi-globe\"></i>\n                        <p-dropdown [ngModel]=\"commons.appLocale()\" [options]=\"commons.appLocales()\" (onChange)=\"switchLocale($event.value)\"></p-dropdown>\n                    </div>\n                }\n                @if (commons.appDataLocales().length > 1) {\n                    <div class=\"field pr-4\">\n                        <i class=\"pi pi-fw pi-database\"></i>\n                        <p-dropdown [ngModel]=\"commons.appDataLocale()\" [options]=\"commons.appDataLocales()\" (onChange)=\"switchDataLocale($event.value)\"></p-dropdown>\n                    </div>\n                }\n            </div>\n        }\n\n        <h5>{{ 'mngSettings.colorScheme.title' | translate }}</h5>\n        <div class=\"formgrid grid\">\n            <p-selectButton\n                [options]=\"colorSchemeOptions()\"\n                [ngModel]=\"layout.colorSchemeSetting()\"\n                (ngModelChange)=\"onColorSchemeChange($event)\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                allowEmpty=\"false\" />\n        </div>\n\n        @if (menuModes.length > 1) {\n            <h5>{{ 'mngSettings.menuMode.title' | translate }}</h5>\n            <div class=\"formgrid grid\">\n                @for (mode of menuModes; track mode) {\n                    <div class=\"field-radiobutton col-6 md:col-4\">\n                        <p-radioButton name=\"category\" [value]=\"mode\" [ngModel]=\"layout.menuMode()\" (ngModelChange)=\"onMenuModeChange(mode)\" />\n                        <label [for]=\"mode\" class=\"ml-2\">\n                            {{ 'mngSettings.menuMode.' + mode | translate }}\n                        </label>\n                    </div>\n                }\n            </div>\n        }\n\n        <div class=\"flex flex-row justify-content-between mng-action-editor-footer-container\">\n            <div></div>\n            <div>\n                <p-button (onClick)=\"closeDialog()\" [label]=\"'general.close' | translate\" icon=\"pi pi-times\" styleClass=\"p-button-primary p-button-text\" />\n            </div>\n        </div>\n    </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RadioButtonModule }, { kind: "component", type: i2$1.RadioButton, selector: "p-radioButton", inputs: ["value", "formControlName", "name", "disabled", "label", "variant", "tabindex", "inputId", "ariaLabelledBy", "ariaLabel", "style", "styleClass", "labelStyleClass", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: Button, selector: "p-button", inputs: ["type", "iconPos", "icon", "badge", "label", "disabled", "loading", "loadingIcon", "raised", "rounded", "text", "plain", "severity", "outlined", "link", "tabindex", "size", "style", "styleClass", "badgeClass", "ariaLabel", "autofocus"], outputs: ["onClick", "onFocus", "onBlur"] }, { kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i4.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "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", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "ngmodule", type: InputSwitchModule }, { kind: "ngmodule", type: SelectButtonModule }, { kind: "component", type: i5.SelectButton, selector: "p-selectButton", inputs: ["options", "optionLabel", "optionValue", "optionDisabled", "unselectable", "tabindex", "multiple", "allowEmpty", "style", "styleClass", "ariaLabelledBy", "disabled", "dataKey", "autofocus"], outputs: ["onOptionClick", "onChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: SettingsComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'mng-settings', imports: [TranslateModule, RadioButtonModule, FormsModule, Button, DropdownModule, InputSwitchModule, SelectButtonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"h-full flex flex-column\">\n    <div class=\"flex-grow-1 mng-action-editor-form-container\">\n        @if (commons.appLocales().length > 1 || commons.appDataLocales().length > 1) {\n            <h5>{{ 'mngSettings.locales' | translate }}</h5>\n            <div class=\"formgrid grid\">\n                @if (commons.appLocales().length > 1) {\n                    <div class=\"field pr-4\">\n                        <i class=\"pi pi-fw pi-globe\"></i>\n                        <p-dropdown [ngModel]=\"commons.appLocale()\" [options]=\"commons.appLocales()\" (onChange)=\"switchLocale($event.value)\"></p-dropdown>\n                    </div>\n                }\n                @if (commons.appDataLocales().length > 1) {\n                    <div class=\"field pr-4\">\n                        <i class=\"pi pi-fw pi-database\"></i>\n                        <p-dropdown [ngModel]=\"commons.appDataLocale()\" [options]=\"commons.appDataLocales()\" (onChange)=\"switchDataLocale($event.value)\"></p-dropdown>\n                    </div>\n                }\n            </div>\n        }\n\n        <h5>{{ 'mngSettings.colorScheme.title' | translate }}</h5>\n        <div class=\"formgrid grid\">\n            <p-selectButton\n                [options]=\"colorSchemeOptions()\"\n                [ngModel]=\"layout.colorSchemeSetting()\"\n                (ngModelChange)=\"onColorSchemeChange($event)\"\n                optionLabel=\"label\"\n                optionValue=\"value\"\n                allowEmpty=\"false\" />\n        </div>\n\n        @if (menuModes.length > 1) {\n            <h5>{{ 'mngSettings.menuMode.title' | translate }}</h5>\n            <div class=\"formgrid grid\">\n                @for (mode of menuModes; track mode) {\n                    <div class=\"field-radiobutton col-6 md:col-4\">\n                        <p-radioButton name=\"category\" [value]=\"mode\" [ngModel]=\"layout.menuMode()\" (ngModelChange)=\"onMenuModeChange(mode)\" />\n                        <label [for]=\"mode\" class=\"ml-2\">\n                            {{ 'mngSettings.menuMode.' + mode | translate }}\n                        </label>\n                    </div>\n                }\n            </div>\n        }\n\n        <div class=\"flex flex-row justify-content-between mng-action-editor-footer-container\">\n            <div></div>\n            <div>\n                <p-button (onClick)=\"closeDialog()\" [label]=\"'general.close' | translate\" icon=\"pi pi-times\" styleClass=\"p-button-primary p-button-text\" />\n            </div>\n        </div>\n    </div>\n</div>\n" }]
-        }], ctorParameters: () => [] });
-
-class TopbarUserComponent {
-    constructor() {
-        this.injector = inject(Injector);
-        this.dialogService = inject(DialogService);
-        this.commons = inject(CommonsService);
-        this.hrefJsVoid = inject(DomSanitizer).bypassSecurityTrustUrl('javascript:void(0)');
-        this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
-        this.user = computed(() => this.commons.user());
-        this.userRoles = computed(() => this.commons.userRoles());
-        this.settingsDisabled = signal(this.config?.components?.settings === false);
-    }
-    logout(user, event) {
-        if (typeof user?.logout === 'function') {
-            event.preventDefault();
-            event.stopPropagation();
-            user.logout();
-        }
-    }
-    openSettings() {
-        if (this.config?.components?.settings === false) {
-            return;
-        }
-        this.dialogService.open(this.config?.components?.settings ?? SettingsComponent, {
-            modal: true,
-            styleClass: 'mng-dialog mng-action-editor-dialog mng-dialog-xs',
-            data: {
-                injector: this.injector
-            }
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TopbarUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", 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().length > 0) {\n                    <small>\n                        <br />\n                        {{ userRoles() }}\n                    </small>\n                }\n            </div>\n        </a>\n    </li>\n    @if (!settingsDisabled()) {\n        <li role=\"menuitem\">\n            <a\n                [href]=\"hrefJsVoid\"\n                (click)=\"openSettings()\"\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-cog text-base mr-2\"></i>\n                {{ 'mngSettings.title' | translate }}\n            </a>\n        </li>\n    }\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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: RippleModule }, { kind: "directive", type: i1$3.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i3$1.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: "18.2.12", 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().length > 0) {\n                    <small>\n                        <br />\n                        {{ userRoles() }}\n                    </small>\n                }\n            </div>\n        </a>\n    </li>\n    @if (!settingsDisabled()) {\n        <li role=\"menuitem\">\n            <a\n                [href]=\"hrefJsVoid\"\n                (click)=\"openSettings()\"\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-cog text-base mr-2\"></i>\n                {{ 'mngSettings.title' | translate }}\n            </a>\n        </li>\n    }\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.layout = inject(LayoutService);
-        this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
-        this.topbarUserComponent = signal(this.config?.components?.topbarUser === false ? undefined : (this.config?.components?.topbarUser ?? TopbarUserComponent));
-        this.breadcrumbComponent = signal(this.config?.components?.breadcrumb === false ? undefined : (this.config?.components?.breadcrumb ?? BreadcrumbComponent));
-    }
-    onMenuButtonClick() {
-        this.layout.onMenuToggle();
-    }
-    switchLocale(language) {
-        this.commons.setAppLocale(language);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: TopbarComponent, isStandalone: true, selector: "mng-topbar", 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 (commons.appLocales().length > 1) {\n                <li class=\"profile-item\">\n                    <i class=\"pi pi-fw pi-globe\"></i>\n                    <p-dropdown [ngModel]=\"commons.appLocale()\" [options]=\"commons.appLocales()\" (onChange)=\"switchLocale($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: i4.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "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", "autoShowPanelOnPrintableCharacterKeyDown", "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", "parentInjector"], outputs: ["instanceCreated"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.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: "18.2.12", 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 (commons.appLocales().length > 1) {\n                <li class=\"profile-item\">\n                    <i class=\"pi pi-fw pi-globe\"></i>\n                    <p-dropdown [ngModel]=\"commons.appLocale()\" [options]=\"commons.appLocales()\" (onChange)=\"switchLocale($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" }]
-        }] });
-
-class MainLayoutComponent {
-    constructor() {
-        // private readonly commonsService = inject(CommonsService);
-        this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
-        this.layout = inject(LayoutService);
-        this.menuService = inject(MenuService);
-        this.renderer = inject(Renderer2);
-        this.appTopbar = viewChild('topbarCmp');
-        this.ripple = signal(this.config?.ripple ?? true);
-        this.topbarComponent = signal(this.config?.components?.topbar === false ? undefined : (this.config?.components?.topbar ?? TopbarComponent));
-        this.breadcrumbsComponent = signal(this.config?.components?.breadcrumb === false ? undefined : (this.config?.components?.breadcrumb ?? BreadcrumbComponent));
-        this.footerComponent = signal(this.config?.components?.footer === false ? undefined : (this.config?.components?.footer ?? FooterComponent));
-        this.useNotificationWrapper = signal(!this.config?.disableNotificationWrapper);
-        this.layout.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.layout.state().staticMenuMobileActive) {
-                this.blockBodyScroll();
-            }
-        });
-    }
-    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'), ' ');
-        }
+class VersionService {
+    constructor(http, configurationService) {
+        this.http = http;
+        this.configurationService = configurationService;
+        this.logger = inject(LoggerService).create('VersionService');
+        this.cache = {};
     }
-    hideMenu() {
-        this.layout.state.update(state => ({
-            ...state,
-            overlayMenuActive: false,
-            staticMenuMobileActive: false,
-            menuHoverActive: false
-        }));
-        if (this.layout.submenuOverlayKey() !== undefined) {
-            this.layout.onOverlaySubmenuClose();
-        }
-        if (!(this.layout.isSlim() || this.layout.isSlimPlus())) {
-            this.menuService.reset();
+    // 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 (this.menuOutsideClickListener) {
-            this.menuOutsideClickListener();
-            this.menuOutsideClickListener = null;
+        if (path) {
+            urlSegments.push(!path.startsWith('/') ? `/${path}` : path);
         }
-        this.unblockBodyScroll();
-    }
-    ngOnDestroy() {
-        if (this.menuOutsideClickListener) {
-            this.menuOutsideClickListener();
+        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: "18.2.12", ngImport: i0, type: MainLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: MainLayoutComponent, isStandalone: true, selector: "mng-main-layout", viewQueries: [{ propertyName: "appTopbar", first: true, predicate: ["topbarCmp"], descendants: true, isSignal: 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': layout.colorScheme() === 'light',\n            'layout-dark': layout.colorScheme() === 'dark',\n            'layout-overlay': layout.menuMode() === 'overlay',\n            'layout-static': layout.menuMode() === 'static',\n            'layout-reveal': layout.menuMode() === 'reveal',\n            'layout-drawer': layout.menuMode() === 'drawer',\n            'layout-slim': layout.menuMode() === 'slim',\n            'layout-slim-plus': layout.menuMode() === 'slim-plus',\n            'layout-static-inactive': layout.state().staticMenuDesktopInactive && layout.menuMode() === 'static',\n            'layout-overlay-active': layout.state().overlayMenuActive,\n            'layout-mobile-active': layout.state().staticMenuMobileActive,\n            'p-ripple-disabled': !ripple(),\n            'layout-sidebar-active': layout.state().sidebarActive,\n            'layout-sidebar-anchored': layout.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$4.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "directive", type: ComponentDirective, selector: "[mngComponent]", inputs: ["mngComponent", "injectionToken", "inputs", "attachToHost", "parentInjector"], 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: "18.2.12", ngImport: i0, type: MainLayoutComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: true, selector: 'mng-main-layout', imports: [NgClass, RouterModule, TopbarComponent, BreadcrumbComponent, ComponentDirective, AsyncPipe, NotificationWrapperComponent, NgTemplateOutlet], 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': layout.colorScheme() === 'light',\n            'layout-dark': layout.colorScheme() === 'dark',\n            'layout-overlay': layout.menuMode() === 'overlay',\n            'layout-static': layout.menuMode() === 'static',\n            'layout-reveal': layout.menuMode() === 'reveal',\n            'layout-drawer': layout.menuMode() === 'drawer',\n            'layout-slim': layout.menuMode() === 'slim',\n            'layout-slim-plus': layout.menuMode() === 'slim-plus',\n            'layout-static-inactive': layout.state().staticMenuDesktopInactive && layout.menuMode() === 'static',\n            'layout-overlay-active': layout.state().overlayMenuActive,\n            'layout-mobile-active': layout.state().staticMenuMobileActive,\n            'p-ripple-disabled': !ripple(),\n            'layout-sidebar-active': layout.state().sidebarActive,\n            'layout-sidebar-anchored': layout.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: () => [] });
-
-/**
- * Creates a layout route on the specified path.
- *
- * @param {String} path - The path of the route.
- * @return {RouteBuilder} - The route builder for the layout route.
- */
-function createLayoutRoute(path) {
-    return createRoute(path, MainLayoutComponent);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", 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: "18.2.12", ngImport: i0, type: VersionService }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: VersionService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.CommonsConfigurationService }] });
 
 /**
  * Prepares providers for usage of the layout functionalities.
@@ -993,11 +371,11 @@ function withLayout(config) {
     };
 }
 
-// components
+// helpers
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BreadcrumbComponent, COMMONS_LAYOUT_FEATURE_CONFIG_IT, ErrorPageComponent, FooterComponent, LayoutService, MainLayoutComponent, MenuComponent, MenuItemComponent, MenuService, NotFoundPageComponent, SettingsComponent, SidebarComponent, TopbarComponent, TopbarUserComponent, VersionComponent, VersionService, createLayoutRoute, withLayout };
+export { COMMONS_LAYOUT_FEATURE_CONFIG_IT, LayoutService, MenuService, VersionService, prepareMenuItemsToInternal, withLayout };
 //# sourceMappingURL=mediusinc-mng-commons-layout.mjs.map