@mediusinc/mng-commons-layout 5.1.0 → 5.2.0-rc.1

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

@@ -1,20 +1,19 @@
 import { AsyncPipe, NgOptimizedImage, NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Injectable, Component, ChangeDetectionStrategy, Input, computed, signal, DestroyRef, Injector, EventEmitter, effect, runInInjectionContext, HostBinding, Output, ViewChild, ElementRef, Renderer2 } from '@angular/core';
+import { InjectionToken, inject, Injectable, DestroyRef, input, signal, computed, Component, ChangeDetectionStrategy, Injector, EventEmitter, effect, runInInjectionContext, Input, HostBinding, Output, ViewChild, ElementRef, Renderer2, viewChild } 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, JsonPathPipe, CommonsService, ComponentDirective, CommonsRouterService, adjustRouteMenuLazyChildrenRouterLinks, doesUrlMatchRouterLink, PermissionService, EnumerateAsyncPipe, COMMONS_MODULE_CONFIG_IT, NotificationWrapperComponent, createRoute, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
-import { ReplaySubject, BehaviorSubject, take, Subject, Observable, from, of, combineLatest, distinctUntilChanged } from 'rxjs';
+import { LoggerService, JsonPathPipe, CommonsService, ComponentDirective, CommonsRouterService, adjustRouteMenuLazyChildrenRouterLinks, doesUrlMatchRouterLink, PermissionService, EnumerateAsyncPipe, NotificationWrapperComponent, createRoute, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
+import { toObservable, takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { ReplaySubject, catchError, of, switchMap, take, Subject, Observable, BehaviorSubject, combineLatest, distinctUntilChanged } from 'rxjs';
+import { map, filter } from 'rxjs/operators';
 import * as i1 from '@angular/common/http';
-import { ButtonModule } from 'primeng/button';
-import { InputTextModule } from 'primeng/inputtext';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i1$3 from '@angular/router';
-import { Router, NavigationEnd, ActivatedRoute, GuardsCheckEnd, RouterModule } from '@angular/router';
-import { filter, first, map } from 'rxjs/operators';
+import { Router, NavigationEnd, RouterModule, ActivatedRoute } from '@angular/router';
 import * as i2$1 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
+import { ButtonModule } from 'primeng/button';
 import * as i1$4 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
 import * as i1$2 from 'primeng/ripple';
@@ -68,76 +67,95 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
 class VersionComponent {
     constructor() {
         this.versionService = inject(VersionService);
+        this.destroyRef = inject(DestroyRef);
         this.jsonPathPipe = new JsonPathPipe();
-        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);
-                        }
-                    });
+        this.initVersion = input(undefined, { alias: 'version' });
+        this.isLoading = signal(false);
+        this.loadedVersion = signal(undefined);
+        this.displayVersion = computed(() => {
+            if (typeof this.initVersion() === 'string') {
+                return this.initVersion();
+            }
+            else if (typeof this.initVersion() !== 'undefined') {
+                if (this.initVersion()['info'] || this.initVersion()['urlPath']) {
+                    if (typeof this.loadedVersion() !== 'undefined') {
+                        return this.loadedVersion();
+                    }
+                    else if (this.initVersion()['info']) {
+                        const config = this.initVersion();
+                        return this.jsonPathPipe.transform(config.info, config.infoJsonPath ?? '$.raw');
+                    }
                 }
                 else {
-                    this.displayVersion = this.jsonPathPipe.transform(config.info, config.infoJsonPath ?? '$.raw');
+                    const info = this.initVersion();
+                    return this.jsonPathPipe.transform(info, '$.raw');
                 }
             }
-            else {
-                const info = this.initVersion;
-                this.displayVersion = this.jsonPathPipe.transform(info, '$.raw');
+            return;
+        });
+        this.versions = computed(() => {
+            if (Array.isArray(this.initVersion())) {
+                return this.initVersion();
             }
-        }
+            return;
+        });
+        this.displayName = computed(() => {
+            if (typeof this.initVersion() !== 'undefined') {
+                if (this.initVersion()['info'] || this.initVersion()['urlPath']) {
+                    const config = this.initVersion();
+                    return config.displayName;
+                }
+            }
+            return;
+        });
+        toObservable(this.initVersion)
+            .pipe(catchError(() => of(undefined)), switchMap(version => {
+            if (typeof version !== 'undefined' && (version['info'] || version['urlPath'])) {
+                const config = version;
+                if (config.urlPath) {
+                    this.isLoading.set(true);
+                    return this.versionService.loadVersion(config.urlPath, config.urlBaseConfigKey).pipe(take(1), map(res => ({ res, config })));
+                }
+            }
+            return of({ res: undefined, config: undefined });
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: ({ res, config }) => {
+                if (typeof res !== 'undefined' && typeof config !== 'undefined') {
+                    this.loadedVersion.set(this.jsonPathPipe.transform(res, config.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.0.5", ngImport: i0, type: VersionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: VersionComponent, isStandalone: true, selector: "mng-version", inputs: { initVersion: { classPropertyName: "initVersion", publicName: "version", isSignal: true, isRequired: false, transformFunction: null } }, 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()) {{{ displayName() }}}\n    @if (displayName() && displayVersion()) {: }\n    @if (!isLoading()) {{{ displayVersion() }}}\n}\n", dependencies: [{ kind: "component", type: VersionComponent, selector: "mng-version", inputs: ["version"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", 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" }]
-        }], propDecorators: { initVersion: [{
-                type: Input,
-                args: ['version']
-            }] } });
+            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()) {{{ displayName() }}}\n    @if (displayName() && displayVersion()) {: }\n    @if (!isLoading()) {{{ displayVersion() }}}\n}\n" }]
+        }], ctorParameters: () => [] });
 
 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;
-        }
+        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.0.5", ngImport: i0, type: FooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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.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.0.5", 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.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" }]
+            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.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 {
@@ -157,11 +175,11 @@ class BreadcrumbComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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; 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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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.0.5", 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(); 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" }]
+            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" }]
         }] });
 
 class MainLayoutComponentService {
@@ -353,12 +371,10 @@ class MenuItemComponent {
         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.permissionService = inject(PermissionService);
         this.layoutService = inject(MainLayoutComponentService);
         this.isPermitted = signal(true);
-        this.guardsIsAllowed = signal(true);
         this.childrenVisibilitySubject = [];
         this.root = false;
         this.visibleChangeEventEmitter = new EventEmitter();
@@ -372,8 +388,18 @@ class MenuItemComponent {
         this.menuService.resetSource$.pipe(takeUntilDestroyed()).subscribe(() => {
             this.active.set(false);
         });
+        this.router.events.pipe(takeUntilDestroyed()).subscribe(next => {
+            if (next instanceof NavigationEnd) {
+                if (!this.layoutService.isMobile()) {
+                    this.active.set(false);
+                }
+                else {
+                    this.updateActiveStateFromRoute();
+                }
+            }
+        });
         effect(() => {
-            if (this.isPermitted() && this.guardsIsAllowed()) {
+            if (this.isPermitted()) {
                 this.active.set(false);
                 this.visible.set(true);
             }
@@ -392,30 +418,7 @@ class MenuItemComponent {
                 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.processItemVisibility();
         this.processItemChildrenVisibility();
     }
     ngAfterViewChecked() {
@@ -424,8 +427,7 @@ class MenuItemComponent {
         }
     }
     ngOnDestroy() {
-        this.routerEventsSubscription?.unsubscribe();
-        this.guardsIsAllowedSubscription?.unsubscribe();
+        this.isVisibleSubscription?.unsubscribe();
     }
     get submenuAnimation() {
         if (this.layoutService.isDesktop() && (this.layoutService.isSlim() || this.layoutService.isSlimPlus())) {
@@ -490,39 +492,29 @@ class MenuItemComponent {
             }
         }
     }
-    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
-                        ));
-                    });
+    processItemVisibility() {
+        if (this.item.permissions) {
+            this.permissionService
+                .isMenuItemVisible(this.item.permissions, this.item)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe({
+                next: isPermitted => {
+                    this.isPermitted.set(isPermitted);
                 }
-            }
-            this.guardsIsAllowedSubscription = combineLatest(obs)
-                .pipe(first())
-                .subscribe(next => {
-                const result = next.every(n => n === true);
-                this.guardsIsAllowed.set(result);
             });
         }
-        else {
-            this.guardsIsAllowed.set(true);
+        if (this.item.isVisible && typeof this.item.isVisible === 'function') {
+            let isVisibleObs;
+            runInInjectionContext(this.injector, () => {
+                const isVisibleRes = this.item.isVisible(this.item);
+                if (isVisibleRes instanceof Observable) {
+                    isVisibleObs = isVisibleRes;
+                }
+                else {
+                    isVisibleObs = of(isVisibleRes);
+                }
+            });
+            this.isVisibleSubscription = isVisibleObs?.subscribe(isVisible => this.isPermitted.set(isVisible));
         }
     }
     updateActiveStateFromRoute() {
@@ -550,7 +542,7 @@ class MenuItemComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MenuItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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" } }, providers: [PermissionService], 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'
@@ -586,7 +578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                             })),
                             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" }]
+                    ], 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.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 }]
@@ -612,32 +604,32 @@ class MenuComponent {
         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 }];
-        }
+        this.routeData = toSignal(this.route.data);
+        this.menuItems = computed(() => {
+            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.layoutService.isSlim() || this.layoutService.isSlimPlus())) {
+                items = [{ items }];
+            }
+            return items;
+        });
+        effect(() => {
+            this.menuService.initialize(this.menuItems());
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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: "18.0.5", 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" }]
-        }] });
+            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" }]
+        }], ctorParameters: () => [] });
 
 class SidebarComponent {
     constructor() {
@@ -645,13 +637,8 @@ class SidebarComponent {
         this.commons = inject(CommonsService);
         this.layoutService = inject(MainLayoutComponentService);
         this.el = inject(ElementRef);
+        this.menuComponent = signal(this.config?.components?.menu === false ? undefined : this.config?.components?.menu ?? MenuComponent);
         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) {
@@ -682,23 +669,19 @@ class SidebarComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: SidebarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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.appLogo()\" [alt]=\"'App logo'\" />\n            </div>\n            <div class=\"app-logo-normal\">\n                <img class=\"h-2rem\" [src]=\"commons.appLogo()\" [alt]=\"'App logo'\" />\n                <img class=\"h-2rem ml-3\" [src]=\"commons.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$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", "parentInjector"], outputs: ["instanceCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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]=\"commons.appLogo()\" [alt]=\"'App logo'\" />\n            </div>\n            <div class=\"app-logo-normal\">\n                <img class=\"h-2rem\" [src]=\"commons.appLogo()\" [alt]=\"'App logo'\" />\n                <img class=\"h-2rem ml-3\" [src]=\"commons.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$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", "parentInjector"], outputs: ["instanceCreated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", 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.appLogo()\" [alt]=\"'App logo'\" />\n            </div>\n            <div class=\"app-logo-normal\">\n                <img class=\"h-2rem\" [src]=\"commons.appLogo()\" [alt]=\"'App logo'\" />\n                <img class=\"h-2rem ml-3\" [src]=\"commons.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" }]
-        }], propDecorators: { menuContainer: [{
-                type: ViewChild,
-                args: ['menuContainer']
-            }] } });
+            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.appLogo()\" [alt]=\"'App logo'\" />\n            </div>\n            <div class=\"app-logo-normal\">\n                <img class=\"h-2rem\" [src]=\"commons.appLogo()\" [alt]=\"'App logo'\" />\n                <img class=\"h-2rem ml-3\" [src]=\"commons.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" }]
+        }] });
 
 class TopbarUserComponent {
     constructor() {
-        this.destroyRef = inject(DestroyRef);
         this.commons = inject(CommonsService);
+        this.hrefJsVoid = inject(DomSanitizer).bypassSecurityTrustUrl('javascript:void(0)');
         this.user = computed(() => this.commons.user());
         this.userRoles = computed(() => this.commons.userRoles());
-        this.hrefJsVoid = inject(DomSanitizer).bypassSecurityTrustUrl('javascript:void(0)');
     }
     logout(user, event) {
         if (typeof user?.logout === 'function') {
@@ -721,20 +704,8 @@ class TopbarComponent {
         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.locales = ['en'];
-        this.selectedLocale = '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.locales = this.commons.appLocales();
-        this.selectedLocale = this.commons.appLocale();
+        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.mainLayoutService.onMenuToggle();
@@ -743,37 +714,32 @@ class TopbarComponent {
         this.commons.setAppLocale(language);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: TopbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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 (locales.length > 1) {\n                <li class=\"profile-item\">\n                    <i class=\"pi pi-fw pi-globe\"></i>\n                    <p-dropdown [ngModel]=\"selectedLocale\" [options]=\"locales\" (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: i1$4.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", "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: 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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: i1$4.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", "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: 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: "18.0.5", 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 (locales.length > 1) {\n                <li class=\"profile-item\">\n                    <i class=\"pi pi-fw pi-globe\"></i>\n                    <p-dropdown [ngModel]=\"selectedLocale\" [options]=\"locales\" (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" }]
-        }], propDecorators: { menuButton: [{
-                type: ViewChild,
-                args: ['menubutton']
-            }], appSidebar: [{
-                type: ViewChild,
-                args: [SidebarComponent]
-            }] } });
+            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() {
-        this.commonsConfig = inject(COMMONS_MODULE_CONFIG_IT, { optional: true });
+        this.commonsService = inject(CommonsService);
         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.appTopbar = viewChild('topbarCmp');
+        this.colorScheme = computed(() => this.commonsService.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.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.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));
+                    const isOutsideClicked = !(this.appTopbar()?.nativeElement.isSameNode(event.target) || this.appTopbar()?.nativeElement.contains(event.target));
                     if (isOutsideClicked) {
                         this.hideMenu();
                     }
@@ -784,18 +750,6 @@ class MainLayoutComponent {
             }
         });
     }
-    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');
@@ -832,15 +786,12 @@ class MainLayoutComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MainLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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", "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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", type: MainLayoutComponent, isStandalone: true, selector: "mng-main-layout", providers: [MainLayoutComponentService], 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': 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", "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.0.5", 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']
-            }] } });
+            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: () => [] });
 
 /**
  * Creates a layout route on the specified path.