@mediusinc/mng-commons-layout 5.2.0-rc.2 → 5.3.0-rc.0

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

@@ -1,28 +1,31 @@
 import { AsyncPipe, NgOptimizedImage, NgClass, NgTemplateOutlet } from '@angular/common';
 import * as i0 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 { InjectionToken, inject, Injectable, DestroyRef, input, signal, computed, Component, ChangeDetectionStrategy, output, viewChild, effect, untracked, ElementRef, Injector, Renderer2 } from '@angular/core';
 import * as i1$1 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
+import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import * as i2 from '@mediusinc/mng-commons/core';
-import { LoggerService, JsonPathPipe, CommonsService, ComponentDirective, CommonsRouterService, adjustRouteMenuLazyChildrenRouterLinks, doesUrlMatchRouterLink, PermissionService, EnumerateAsyncPipe, NotificationWrapperComponent, createRoute, CommonsFeatureTypeEnum } from '@mediusinc/mng-commons/core';
+import { LoggerService, JsonPathPipe, CommonsService, ComponentDirective, LocalStorageService, 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 { ReplaySubject, catchError, of, switchMap, take, Subject, Observable, BehaviorSubject, combineLatest, distinctUntilChanged } from 'rxjs';
+import { ReplaySubject, catchError, of, switchMap, take, Subject, startWith, distinctUntilChanged } from 'rxjs';
 import { map, filter } from 'rxjs/operators';
 import * as i1 from '@angular/common/http';
 import * as i1$3 from '@angular/router';
 import { Router, NavigationEnd, RouterModule, ActivatedRoute } from '@angular/router';
-import * as i2$1 from '@angular/forms';
+import * as i3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
-import { ButtonModule } from 'primeng/button';
-import * as i1$4 from 'primeng/dropdown';
+import { Button, ButtonModule } from 'primeng/button';
+import * as i4 from 'primeng/dropdown';
 import { DropdownModule } from 'primeng/dropdown';
 import * as i1$2 from 'primeng/ripple';
 import { RippleModule } from 'primeng/ripple';
-import * as i3 from 'primeng/styleclass';
+import * 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 * as i2$1 from 'primeng/radiobutton';
+import { RadioButtonModule } from 'primeng/radiobutton';
 
 const COMMONS_LAYOUT_FEATURE_CONFIG_IT = new InjectionToken('COMMONS_LAYOUT_FEATURE_CONFIG');
 
@@ -184,7 +187,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
 
 class MainLayoutComponentService {
     constructor() {
+        this.typeName = 'MainLayoutComponentService';
+        this.storageMenuModeKey = 'menuMode';
         this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
+        this.storageService = inject(LocalStorageService);
         this.state = signal({
             staticMenuDesktopInactive: false,
             overlayMenuActive: false,
@@ -197,6 +203,24 @@ class MainLayoutComponentService {
         });
         this.overlayOpen = new Subject();
         this.overlayOpen$ = this.overlayOpen.asObservable();
+        this.menuModes = this.config?.menuModes ?? ['static', 'overlay', 'reveal', 'drawer', 'slim', 'slim-plus'];
+        this._menuMode = signal(this.initMenuMode());
+        this.menuMode = this._menuMode.asReadonly();
+        this.isOverlay = computed(() => this.menuMode() === 'overlay');
+        this.isSlim = computed(() => this.menuMode() === 'slim');
+        this.isSlimPlus = computed(() => this.menuMode() === 'slim-plus');
+    }
+    onMenuModeChange(mode) {
+        if (!this.menuModes.includes(mode)) {
+            return;
+        }
+        if (mode === this.config?.menuMode) {
+            this.storageService.removeItem(this.typeName, this.storageMenuModeKey);
+        }
+        else {
+            this.storageService.setItem(this.typeName, this.storageMenuModeKey, mode);
+        }
+        this._menuMode.set(mode);
     }
     onMenuToggle() {
         if (this.isOverlay()) {
@@ -227,21 +251,19 @@ class MainLayoutComponentService {
     onOverlaySubmenuOpen() {
         this.overlayOpen.next(null);
     }
-    isOverlay() {
-        return this.config?.menuMode === 'overlay';
-    }
-    isSlim() {
-        return this.config?.menuMode === 'slim';
-    }
-    isSlimPlus() {
-        return this.config?.menuMode === 'slim-plus';
-    }
     isDesktop() {
         return window.innerWidth > 991;
     }
     isMobile() {
         return !this.isDesktop();
     }
+    initMenuMode() {
+        const lsMode = this.storageService.getItem(this.typeName, this.storageMenuModeKey);
+        if (lsMode && this.menuModes.includes(lsMode)) {
+            return lsMode;
+        }
+        return this.config?.menuMode ?? 'static';
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MainLayoutComponentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MainLayoutComponentService }); }
 }
@@ -249,56 +271,76 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
             type: Injectable
         }] });
 
+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(i => signal(true)));
+        }
+        return newItem;
+    });
+    return newItems;
+}
+
 class MenuService {
     constructor() {
         this.destroyRef = inject(DestroyRef);
         this.logger = LoggerService.create('MenuService');
         this.router = inject(Router);
         this.commonsRouter = inject(CommonsRouterService);
-        this.menuSource = new ReplaySubject(1);
-        this.resetSource = new Subject();
-        this.menuSource$ = this.menuSource.asObservable();
-        this.resetSource$ = this.resetSource.asObservable();
-        this.menuItems = [];
+        this._menuItems = signal([]);
+        this.menuItems = this._menuItems.asReadonly();
+        this.menuChangeSubject = new ReplaySubject(1);
+        this.menuChange$ = this.menuChangeSubject.asObservable();
         this.routeLoadedChildrenSubscriptions = [];
     }
-    initialize(menuItems) {
-        this.menuItems = menuItems;
+    setItems(menuItems) {
         this.routeLoadedChildrenSubscriptions.forEach(s => s.unsubscribe());
         this.routeLoadedChildrenSubscriptions = [];
-        this.generateMenuItemKeys(menuItems);
+        this._menuItems.set(prepareMenuItemsToInternal(menuItems));
+        this.appendListenersToLazyChildren(this._menuItems());
+        this.router.events;
         this.router.events
-            .pipe(filter(event => event instanceof NavigationEnd), takeUntilDestroyed(this.destroyRef))
+            .pipe(startWith(new NavigationEnd(0, this.router.url, this.router.url)), filter(event => event instanceof NavigationEnd), map(e => e), takeUntilDestroyed(this.destroyRef))
             .subscribe(e => {
             this.findAndSetActiveMenuItem(e.urlAfterRedirects);
         });
-        this.findAndSetActiveMenuItem(this.router.url);
     }
-    generateMenuItemKeys(menuItems, parentKey = '') {
-        menuItems.forEach((item, idx) => {
-            if (!item.index) {
-                item.index = idx;
-                item.key = parentKey ? parentKey + '-' + idx : idx.toString();
-            }
-            if (item.items) {
-                this.generateMenuItemKeys(item.items, item.key);
-            }
-            else if (item.lazyChildren) {
+    appendListenersToLazyChildren(menuItems) {
+        menuItems.forEach(item => {
+            if (item.lazyChildren()) {
                 this.listenToMenuItemLazyChildrenLoad(item);
             }
+            else if (item.items()) {
+                this.appendListenersToLazyChildren(item.items());
+            }
         });
     }
     findAndSetActiveMenuItem(url) {
-        const matches = this.findActiveRouteMatches(this.menuItems, url);
+        const matches = this.findActiveRouteMatches(this.menuItems(), url);
         if (matches.length === 0) {
             this.reset();
         }
         else {
             const matchKey = matches[0][matches[0].length - 1].key;
             if (matchKey) {
-                this.menuSource.next({
+                this.menuChangeSubject.next({
                     key: matchKey,
-                    routeEvent: true
+                    eventType: 'routeChange'
                 });
             }
             else {
@@ -316,13 +358,14 @@ class MenuService {
             .pipe(take(1))
             .subscribe({
             next: routes => {
-                let menuItems = routes
+                const menuItemsFromRoutes = routes
                     .filter(r => Array.isArray(r.data?.menuItems))
                     .flatMap(r => r.data.menuItems);
-                menuItems = adjustRouteMenuLazyChildrenRouterLinks(menuItem, menuItems);
-                menuItem.items = menuItems;
-                menuItem.lazyChildren = false;
-                this.generateMenuItemKeys(menuItem.items, menuItem.key);
+                const menuItems = adjustRouteMenuLazyChildrenRouterLinks(menuItem, menuItemsFromRoutes);
+                menuItem.items.set(prepareMenuItemsToInternal(menuItems, menuItem.key));
+                this.appendListenersToLazyChildren(menuItem.items());
+                menuItem.itemsVisibility.set(menuItem.items()?.map(i => signal(true)));
+                menuItem.lazyChildren.set(false);
                 this.findAndSetActiveMenuItem(this.router.url);
             }
         }));
@@ -330,11 +373,12 @@ class MenuService {
     findActiveRouteMatches(menuItems, url) {
         const matches = [];
         for (const menuItem of menuItems) {
+            const chidldren = menuItem.items();
             if (menuItem.routerLink) {
                 const isActive = doesUrlMatchRouterLink(menuItem.routerLink, url);
                 if (isActive) {
-                    if (Array.isArray(menuItem.items)) {
-                        const itemsMatches = this.findActiveRouteMatches(menuItem.items, url);
+                    if (Array.isArray(chidldren)) {
+                        const itemsMatches = this.findActiveRouteMatches(chidldren, url);
                         if (itemsMatches.length > 0) {
                             matches.push(...itemsMatches.map(c => [menuItem, ...c]));
                         }
@@ -347,8 +391,8 @@ class MenuService {
                     }
                 }
             }
-            else if (Array.isArray(menuItem.items)) {
-                const itemsMatches = this.findActiveRouteMatches(menuItem.items, url);
+            else if (Array.isArray(chidldren)) {
+                const itemsMatches = this.findActiveRouteMatches(chidldren, url);
                 if (itemsMatches.length > 0) {
                     matches.push(...itemsMatches.map(c => [menuItem, ...c]));
                 }
@@ -357,7 +401,9 @@ class MenuService {
         return matches;
     }
     reset() {
-        this.resetSource.next(true);
+        this.menuChangeSubject.next({
+            eventType: 'reset'
+        });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MenuService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: MenuService }); }
@@ -368,87 +414,70 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
 
 class MenuItemComponent {
     constructor() {
-        this.router = inject(Router);
-        this.injector = inject(Injector);
-        this.destroyRef = inject(DestroyRef);
         this.menuService = inject(MenuService);
         this.permissionService = inject(PermissionService);
         this.layoutService = inject(MainLayoutComponentService);
-        this.isPermitted = signal(true);
-        this.childrenVisibilitySubject = [];
-        this.root = false;
-        this.visibleChangeEventEmitter = new EventEmitter();
-        this.active = signal(false);
-        this.visible = signal(false);
-        this.menuService.menuSource$.pipe(takeUntilDestroyed()).subscribe(value => {
-            setTimeout(() => {
-                this.active.set(this.item.key === value.key || value.key.startsWith((this.item.key ?? '') + '-'));
-            });
-        });
-        this.menuService.resetSource$.pipe(takeUntilDestroyed()).subscribe(() => {
-            this.active.set(false);
+        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.router.events.pipe(takeUntilDestroyed()).subscribe(next => {
-            if (next instanceof NavigationEnd) {
-                if (!this.layoutService.isMobile()) {
-                    this.active.set(false);
-                }
-                else {
-                    this.updateActiveStateFromRoute();
-                }
-            }
+        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;
         });
         effect(() => {
-            if (this.isPermitted()) {
-                this.active.set(false);
-                this.visible.set(true);
-            }
-            else {
-                this.active.set(true);
-                this.visible.set(false);
-            }
-        }, { allowSignalWrites: true });
-    }
-    ngOnInit() {
-        if (this.item.routerLink) {
-            if (typeof this.item.routerLink === 'string') {
-                this.itemUrl = this.item.routerLink;
-            }
-            else {
-                this.itemUrl = this.router.parseUrl(this.item.routerLink.join('/'));
+            if (this.root() && this.active() && this.layoutService.isDesktop() && (this.layoutService.isSlim() || this.layoutService.isSlimPlus())) {
+                this.calculatePosition(this.submenuElRef()?.nativeElement, this.submenuElRef()?.nativeElement.parentElement);
             }
-        }
-        this.processItemVisibility();
-        this.processItemChildrenVisibility();
-    }
-    ngAfterViewChecked() {
-        if (this.root && this.active() && this.layoutService.isDesktop() && (this.layoutService.isSlim() || this.layoutService.isSlimPlus())) {
-            this.calculatePosition(this.submenu?.nativeElement, this.submenu?.nativeElement.parentElement);
-        }
-    }
-    ngOnDestroy() {
-        this.isVisibleSubscription?.unsubscribe();
+        });
     }
     get submenuAnimation() {
         if (this.layoutService.isDesktop() && (this.layoutService.isSlim() || this.layoutService.isSlimPlus())) {
             return this.active() ? 'visible' : 'hidden';
         }
         else {
-            return this.root ? 'expanded' : this.active() ? 'expanded' : 'collapsed';
+            return this.root() ? 'expanded' : this.active() ? 'expanded' : 'collapsed';
         }
     }
-    get activeClass() {
-        return this.active() && !this.root;
-    }
     itemClick(event) {
+        const item = this.item();
         // avoid processing disabled items
-        if (this.item.disabled) {
+        if (item.disabled) {
             event.preventDefault();
             return;
         }
         // toggle active state
-        if (this.item.items || this.item.lazyChildren) {
-            if ((this.root || this.active()) && (this.layoutService.isSlim() || this.layoutService.isSlimPlus())) {
+        if (item.hasItemsOrLazyChildren()) {
+            if ((this.root() || this.active()) && (this.layoutService.isSlim() || this.layoutService.isSlimPlus())) {
                 this.layoutService.onOverlaySubmenuOpen();
             }
         }
@@ -476,7 +505,7 @@ class MenuItemComponent {
         }
     }
     onChildVisibleChange(visible, item, idx) {
-        this.childrenVisibilitySubject[idx].next(visible);
+        this.item().itemsVisibility()[idx]?.set(visible);
     }
     calculatePosition(overlay, target) {
         if (overlay) {
@@ -492,57 +521,8 @@ class MenuItemComponent {
             }
         }
     }
-    processItemVisibility() {
-        if (this.item.permissions) {
-            this.permissionService
-                .isMenuItemVisible(this.item.permissions, this.item)
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe({
-                next: isPermitted => {
-                    this.isPermitted.set(isPermitted);
-                }
-            });
-        }
-        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() {
-        if (this.itemUrl) {
-            this.active.set(this.router.isActive(this.itemUrl, {
-                matrixParams: 'ignored',
-                queryParams: 'ignored',
-                paths: this.item.items ? 'subset' : 'exact',
-                fragment: 'ignored'
-            }));
-        }
-        else {
-            this.active.set(false);
-        }
-    }
-    processItemChildrenVisibility() {
-        if (this.item.items) {
-            this.childrenVisibilitySubject = this.item.items.map(() => new BehaviorSubject(true));
-            combineLatest(this.childrenVisibilitySubject.map(s => s.asObservable().pipe(distinctUntilChanged())))
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(visible => {
-                const anyChildVisible = visible.some(v => v === true);
-                this.active.set(!anyChildVisible);
-            });
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "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" } }, 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: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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                (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().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$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'
@@ -578,34 +558,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
                             })),
                             transition('collapsed <=> expanded', animate('400ms cubic-bezier(0.86, 0, 0.07, 1)'))
                         ])
-                    ], 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 }]
-            }], root: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.layout-root-menuitem']
-            }], visibleChangeEventEmitter: [{
-                type: Output,
-                args: ['visibleChange']
-            }], submenu: [{
-                type: ViewChild,
-                args: ['submenu']
-            }], activeClass: [{
-                type: HostBinding,
-                args: ['class.active-menuitem']
-            }] } });
+                    ], 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                (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().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.menuService = inject(MenuService);
         this.config = inject(COMMONS_LAYOUT_FEATURE_CONFIG_IT, { optional: true });
         this.layoutService = inject(MainLayoutComponentService);
+        this.menuService = inject(MenuService);
         this.routeData = toSignal(this.route.data);
-        this.menuItems = computed(() => {
+        effect(() => {
             let items = [];
             if (this.config?.menuItems && Array.isArray(this.config.menuItems)) {
                 items = this.config.menuItems;
@@ -617,18 +583,15 @@ class MenuComponent {
             if (!(this.layoutService.isSlim() || this.layoutService.isSlimPlus())) {
                 items = [{ items }];
             }
-            return items;
-        });
-        effect(() => {
-            this.menuService.initialize(this.menuItems());
+            untracked(() => this.menuService.setItems(items));
         });
     }
     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 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.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 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 {
@@ -676,8 +639,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImpor
             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 SettingsComponent {
+    constructor() {
+        this.dynamicDialogConfig = inject(DynamicDialogConfig);
+        this.dynamicDialogRef = inject(DynamicDialogRef);
+        this.injector = this.dynamicDialogConfig.data.injector;
+        this.translate = this.injector.get(TranslateService);
+        this.commons = this.injector.get(CommonsService);
+        this.layoutService = this.injector.get(MainLayoutComponentService);
+        this.menuModes = this.layoutService.menuModes;
+        this.translate
+            .stream('mngSettings.title')
+            .pipe(takeUntilDestroyed())
+            .subscribe(t => {
+            setTimeout(() => (this.dynamicDialogConfig.header = t));
+        });
+    }
+    switchLocale(language) {
+        this.commons.setAppLocale(language);
+    }
+    switchDataLocale(language) {
+        this.commons.setAppDataLocale(language);
+    }
+    onMenuModeChange(mode) {
+        this.layoutService.onMenuModeChange(mode);
+    }
+    closeDialog() {
+        this.dynamicDialogRef.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: SettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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        @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]=\"layoutService.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", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.0.5", ngImport: i0, type: SettingsComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'mng-settings', imports: [TranslateModule, RadioButtonModule, FormsModule, Button, DropdownModule], 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        @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]=\"layoutService.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.user = computed(() => this.commons.user());
@@ -690,12 +691,21 @@ class TopbarUserComponent {
             user.logout();
         }
     }
+    openSettings() {
+        this.dialogService.open(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.0.5", ngImport: i0, type: TopbarUserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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 (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$2.Ripple, selector: "[pRipple]" }, { kind: "ngmodule", type: StyleClassModule }, { kind: "directive", type: i3.StyleClass, selector: "[pStyleClass]", inputs: ["pStyleClass", "enterClass", "enterFromClass", "enterActiveClass", "enterToClass", "leaveClass", "leaveFromClass", "leaveActiveClass", "leaveToClass", "hideOnOutsideClick", "toggleClass", "hideOnEscape"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.0.5", 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    <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    @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$2.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.0.5", 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 (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" }]
+            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    <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    @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 {
@@ -714,7 +724,7 @@ 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", 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 }); }
+    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: 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", "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.0.5", ngImport: i0, type: TopbarComponent, decorators: [{
             type: Component,
@@ -730,7 +740,6 @@ class MainLayoutComponent {
         this.renderer = inject(Renderer2);
         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.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);
@@ -786,11 +795,11 @@ 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, 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 }); }
+    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': layoutService.menuMode() === 'overlay',\n            'layout-static': layoutService.menuMode() === 'static',\n            'layout-reveal': layoutService.menuMode() === 'reveal',\n            'layout-drawer': layoutService.menuMode() === 'drawer',\n            'layout-slim': layoutService.menuMode() === 'slim',\n            'layout-slim-plus': layoutService.menuMode() === 'slim-plus',\n            'layout-static-inactive': layoutService.state().staticMenuDesktopInactive && layoutService.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" }]
+            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': layoutService.menuMode() === 'overlay',\n            'layout-static': layoutService.menuMode() === 'static',\n            'layout-reveal': layoutService.menuMode() === 'reveal',\n            'layout-drawer': layoutService.menuMode() === 'drawer',\n            'layout-slim': layoutService.menuMode() === 'slim',\n            'layout-slim-plus': layoutService.menuMode() === 'slim-plus',\n            'layout-static-inactive': layoutService.state().staticMenuDesktopInactive && layoutService.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: () => [] });
 
 /**
@@ -828,5 +837,5 @@ function withLayout(config) {
  * Generated bundle index. Do not edit.
  */
 
-export { BreadcrumbComponent, COMMONS_LAYOUT_FEATURE_CONFIG_IT, FooterComponent, MainLayoutComponent, MainLayoutComponentService, MenuComponent, MenuItemComponent, MenuService, SidebarComponent, TopbarComponent, TopbarUserComponent, VersionComponent, VersionService, createLayoutRoute, withLayout };
+export { BreadcrumbComponent, COMMONS_LAYOUT_FEATURE_CONFIG_IT, FooterComponent, MainLayoutComponent, MainLayoutComponentService, MenuComponent, MenuItemComponent, MenuService, SettingsComponent, SidebarComponent, TopbarComponent, TopbarUserComponent, VersionComponent, VersionService, createLayoutRoute, withLayout };
 //# sourceMappingURL=mediusinc-mng-commons-layout.mjs.map