@mediusinc/mng-commons 5.0.0-rc.2 → 5.0.0-rc.4

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Directive, computed, signal, Component, ChangeDetectionStrategy, InjectionToken, Injectable, Injector, ElementRef, ApplicationRef, ViewContainerRef, EventEmitter, createComponent, Input, Output, TemplateRef, booleanAttribute, numberAttribute, Pipe, APP_INITIALIZER, ErrorHandler } from '@angular/core';
+import { inject, Directive, computed, signal, Component, ChangeDetectionStrategy, InjectionToken, DestroyRef, effect, Injectable, Injector, ElementRef, ApplicationRef, ViewContainerRef, EventEmitter, EnvironmentInjector, createComponent, Input, Output, TemplateRef, booleanAttribute, numberAttribute, Pipe, APP_INITIALIZER, ErrorHandler } from '@angular/core';
 import * as i3$1 from '@ngx-translate/core';
 import { TranslateModule, TranslateService } from '@ngx-translate/core';
 import * as i3 from 'primeng/confirmdialog';
@@ -10,16 +10,16 @@ import * as i1 from 'primeng/toast';
 import { ToastModule } from 'primeng/toast';
 import { DialogService, DynamicDialogComponent } from 'primeng/dynamicdialog';
 import * as i2 from 'primeng/api';
-import { PrimeNGConfig, FilterService, MessageService, ConfirmationService } from 'primeng/api';
-import * as i1$1 from '@angular/router';
+import { PrimeNGConfig, MessageService, ConfirmationService } from 'primeng/api';
 import { Router, NavigationEnd, RouterLink, NavigationStart, RouteConfigLoadStart, RouteConfigLoadEnd, NavigationCancel, NavigationError } from '@angular/router';
 import * as i2$1 from 'primeng/button';
 import { ButtonModule } from 'primeng/button';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { Title } from '@angular/platform-browser';
-import { BehaviorSubject, ReplaySubject, distinctUntilChanged, isObservable, of, mergeMap, combineLatest, Observable, tap, Subject, take, throwError } from 'rxjs';
 import { filter, map, first, catchError } from 'rxjs/operators';
 import { DatePipe } from '@angular/common';
 import { HttpErrorResponse, HttpClient, HttpBackend } from '@angular/common/http';
+import { isObservable, of, mergeMap, combineLatest, Observable, tap, ReplaySubject, Subject, take, throwError } from 'rxjs';
 import 'reflect-metadata';
 
 class DialogKeydownHandlerDirective {
@@ -98,11 +98,11 @@ class NotificationWrapperComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NotificationWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: NotificationWrapperComponent, isStandalone: true, selector: "mng-notification-wrapper", ngImport: i0, template: "<ng-content></ng-content>\n<p-confirmDialog appendTo=\"body\" [baseZIndex]=\"50\"></p-confirmDialog>\n\n<p-toast [baseZIndex]=\"50\">\n    <ng-template let-message pTemplate=\"message\">\n        <span [class]=\"'p-toast-message-icon pi ' + getNotificationIconClass(message)\"></span>\n        <div class=\"p-toast-message-text\">\n            <div class=\"p-toast-summary\">{{ message.summary }}</div>\n            <div class=\"p-toast-detail\">{{ message.detail.slice(0, notificationCutoff) + (message.detail.length > notificationCutoff ? '...' : '') }}</div>\n            @if (message.detail.length > notificationCutoff) {\n                <div (click)=\"onShowNotificationInDialog(message)\" class=\"p-link font-semibold text-sm mt-2 flex align-items-center\">\n                    <i class=\"pi pi-chevron-down mr-1\"></i>{{ 'notification.details' | translate }}\n                </div>\n            }\n        </div>\n    </ng-template>\n</p-toast>\n\n<p-dialog\n    [visible]=\"isDialogNotificationVisible()\"\n    (visibleChange)=\"onDialogNotificationVisibilityChange($event)\"\n    [styleClass]=\"'p-fluid mng-dialog mng-dialog-xs ' + 'mng-message-detail-dialog mng-message-detail-dialog-' + (dialogNotification()?.severity ?? '')\">\n    <ng-template pTemplate=\"header\" mngDialogKeydownHandler>\n        <span class=\"p-dialog-title font-bold mng-dialog-success\">\n            <span [class]=\"'mr-2 pi ' + getNotificationIconClass(dialogNotification())\"></span>\n            {{ dialogNotification()?.summary ?? '' }}\n        </span>\n    </ng-template>\n    <div>\n        {{ dialogNotification()?.detail ?? '' }}\n    </div>\n</p-dialog>\n", dependencies: [{ kind: "ngmodule", type: ToastModule }, { kind: "component", type: i1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i3.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: DialogKeydownHandlerDirective, selector: "[mngDialogKeydownHandler]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.4", type: NotificationWrapperComponent, isStandalone: true, selector: "mng-notification-wrapper", ngImport: i0, template: "<ng-content></ng-content>\n<p-confirmDialog appendTo=\"body\" [baseZIndex]=\"50\"></p-confirmDialog>\n\n<p-toast [baseZIndex]=\"50\">\n    <ng-template let-message pTemplate=\"message\">\n        <span [class]=\"'p-toast-message-icon pi ' + getNotificationIconClass(message)\"></span>\n        <div class=\"p-toast-message-text\">\n            <div class=\"p-toast-summary\">{{ message.summary }}</div>\n            @if (message.detail) {\n                <div class=\"p-toast-detail\">{{ message.detail.slice(0, notificationCutoff) + (message.detail.length > notificationCutoff ? '...' : '') }}</div>\n                @if (message.detail.length > notificationCutoff) {\n                    <div (click)=\"onShowNotificationInDialog(message)\" class=\"p-link font-semibold text-sm mt-2 flex align-items-center\">\n                        <i class=\"pi pi-chevron-down mr-1\"></i>{{ 'notification.details' | translate }}\n                    </div>\n                }\n            }\n        </div>\n    </ng-template>\n</p-toast>\n\n<p-dialog\n    [visible]=\"isDialogNotificationVisible()\"\n    (visibleChange)=\"onDialogNotificationVisibilityChange($event)\"\n    [styleClass]=\"'p-fluid mng-dialog mng-dialog-xs ' + 'mng-message-detail-dialog mng-message-detail-dialog-' + (dialogNotification()?.severity ?? '')\">\n    <ng-template pTemplate=\"header\" mngDialogKeydownHandler>\n        <span class=\"p-dialog-title font-bold mng-dialog-success\">\n            <span [class]=\"'mr-2 pi ' + getNotificationIconClass(dialogNotification())\"></span>\n            {{ dialogNotification()?.summary ?? '' }}\n        </span>\n    </ng-template>\n    <div>\n        {{ dialogNotification()?.detail ?? '' }}\n    </div>\n</p-dialog>\n", dependencies: [{ kind: "ngmodule", type: ToastModule }, { kind: "component", type: i1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i3.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "directive", type: DialogKeydownHandlerDirective, selector: "[mngDialogKeydownHandler]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NotificationWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-notification-wrapper', standalone: true, imports: [ToastModule, ConfirmDialogModule, TranslateModule, DialogModule, DialogKeydownHandlerDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<p-confirmDialog appendTo=\"body\" [baseZIndex]=\"50\"></p-confirmDialog>\n\n<p-toast [baseZIndex]=\"50\">\n    <ng-template let-message pTemplate=\"message\">\n        <span [class]=\"'p-toast-message-icon pi ' + getNotificationIconClass(message)\"></span>\n        <div class=\"p-toast-message-text\">\n            <div class=\"p-toast-summary\">{{ message.summary }}</div>\n            <div class=\"p-toast-detail\">{{ message.detail.slice(0, notificationCutoff) + (message.detail.length > notificationCutoff ? '...' : '') }}</div>\n            @if (message.detail.length > notificationCutoff) {\n                <div (click)=\"onShowNotificationInDialog(message)\" class=\"p-link font-semibold text-sm mt-2 flex align-items-center\">\n                    <i class=\"pi pi-chevron-down mr-1\"></i>{{ 'notification.details' | translate }}\n                </div>\n            }\n        </div>\n    </ng-template>\n</p-toast>\n\n<p-dialog\n    [visible]=\"isDialogNotificationVisible()\"\n    (visibleChange)=\"onDialogNotificationVisibilityChange($event)\"\n    [styleClass]=\"'p-fluid mng-dialog mng-dialog-xs ' + 'mng-message-detail-dialog mng-message-detail-dialog-' + (dialogNotification()?.severity ?? '')\">\n    <ng-template pTemplate=\"header\" mngDialogKeydownHandler>\n        <span class=\"p-dialog-title font-bold mng-dialog-success\">\n            <span [class]=\"'mr-2 pi ' + getNotificationIconClass(dialogNotification())\"></span>\n            {{ dialogNotification()?.summary ?? '' }}\n        </span>\n    </ng-template>\n    <div>\n        {{ dialogNotification()?.detail ?? '' }}\n    </div>\n</p-dialog>\n" }]
+            args: [{ selector: 'mng-notification-wrapper', standalone: true, imports: [ToastModule, ConfirmDialogModule, TranslateModule, DialogModule, DialogKeydownHandlerDirective], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<p-confirmDialog appendTo=\"body\" [baseZIndex]=\"50\"></p-confirmDialog>\n\n<p-toast [baseZIndex]=\"50\">\n    <ng-template let-message pTemplate=\"message\">\n        <span [class]=\"'p-toast-message-icon pi ' + getNotificationIconClass(message)\"></span>\n        <div class=\"p-toast-message-text\">\n            <div class=\"p-toast-summary\">{{ message.summary }}</div>\n            @if (message.detail) {\n                <div class=\"p-toast-detail\">{{ message.detail.slice(0, notificationCutoff) + (message.detail.length > notificationCutoff ? '...' : '') }}</div>\n                @if (message.detail.length > notificationCutoff) {\n                    <div (click)=\"onShowNotificationInDialog(message)\" class=\"p-link font-semibold text-sm mt-2 flex align-items-center\">\n                        <i class=\"pi pi-chevron-down mr-1\"></i>{{ 'notification.details' | translate }}\n                    </div>\n                }\n            }\n        </div>\n    </ng-template>\n</p-toast>\n\n<p-dialog\n    [visible]=\"isDialogNotificationVisible()\"\n    (visibleChange)=\"onDialogNotificationVisibilityChange($event)\"\n    [styleClass]=\"'p-fluid mng-dialog mng-dialog-xs ' + 'mng-message-detail-dialog mng-message-detail-dialog-' + (dialogNotification()?.severity ?? '')\">\n    <ng-template pTemplate=\"header\" mngDialogKeydownHandler>\n        <span class=\"p-dialog-title font-bold mng-dialog-success\">\n            <span [class]=\"'mr-2 pi ' + getNotificationIconClass(dialogNotification())\"></span>\n            {{ dialogNotification()?.summary ?? '' }}\n        </span>\n    </ng-template>\n    <div>\n        {{ dialogNotification()?.detail ?? '' }}\n    </div>\n</p-dialog>\n" }]
         }] });
 
 class ACommonsErrorBase extends Error {
@@ -398,190 +398,127 @@ const BROWSER_STORAGE_IT = new InjectionToken('BROWSER_STORAGE');
 const COMMONS_MODULE_CONFIG_IT = new InjectionToken('COMMONS_MODULE_CONFIG');
 
 class CommonsService {
-    constructor() {
-        // internal
-        this.logger = inject(LoggerService).create('CommonsService');
-        this.router = inject(Router);
-        this.primengConfig = inject(PrimeNGConfig);
-        this.translate = inject(TranslateService);
-        this.titleService = inject(Title);
-        this.filterService = inject(FilterService);
-        this.moduleConfig = inject(COMMONS_MODULE_CONFIG_IT, { optional: true });
-        this.localStorage = inject(BROWSER_STORAGE_IT);
-        // breadcrumbs
-        this.breadcrumbHomeSubject = new BehaviorSubject({
-            icon: 'pi pi-home',
-            routerLink: '/'
-        });
-        this.breadcrumbsSubject = new BehaviorSubject([]);
-        // visual
-        this._colorScheme = 'light';
-        this.userSubject = new ReplaySubject(1);
-        this._userRoles = [];
-        this.userRolesSubject = new BehaviorSubject([]);
-        // language
-        this.languageSubject = new ReplaySubject(1);
-        this.dataLanguageSubject = new ReplaySubject(1);
-    }
-    // APP section
-    get appName() {
-        return this.moduleConfig?.app?.name ?? 'app.name';
-    }
-    get appOwner() {
-        return this.moduleConfig?.app?.owner ?? 'app.owner';
-    }
-    get appLogoLight() {
-        return this.moduleConfig?.app?.logoPathLight ? this.moduleConfig.app.logoPathLight : this.moduleConfig?.app?.logoPath ?? 'assets/layout/images/logo.png';
-    }
-    get appLogoDark() {
-        return this.moduleConfig?.app?.logoPathDark ? this.moduleConfig.app.logoPathDark : this.moduleConfig?.app?.logoPath ?? 'assets/layout/images/logo.png';
-    }
-    get appLogoNameLight() {
-        return this.moduleConfig?.app?.logoNamePathLight
-            ? this.moduleConfig.app.logoNamePathLight
-            : this.moduleConfig?.app?.logoNamePath ?? 'assets/layout/images/logo-appname.png';
-    }
-    get appLogoNameDark() {
-        return this.moduleConfig?.app?.logoNamePathDark ? this.moduleConfig.app.logoNamePathDark : this.moduleConfig?.app?.logoNamePath ?? 'assets/layout/images/logo-appname.png';
-    }
-    get appLanguages() {
-        return this.moduleConfig?.app?.languages ?? ['en'];
+    getDefaultLocale() {
+        const browserLang = this.translate.getBrowserLang();
+        if (browserLang && this.appLocales().some(l => l === browserLang)) {
+            return browserLang;
+        }
+        return this.appLocales()?.length > 0 ? this.appLocales()[0] : 'en';
     }
-    get appLanguage() {
+    initAppLocale() {
         const lsLang = this.localStorage.getItem('lang');
-        if (lsLang && this.appLanguages.some(l => l === lsLang)) {
+        if (lsLang && this.appLocales().some(l => l === lsLang)) {
             return lsLang;
         }
-        return null;
+        return this.getDefaultLocale();
     }
-    set appLanguage(language) {
-        if (language === null) {
-            this.localStorage.removeItem('lang');
-            this.languageSubject.next(language);
-            return;
-        }
-        if (this.appLanguages.some(l => l === language)) {
-            this.localStorage.setItem('lang', language);
-            this.languageSubject.next(language);
+    setAppLocale(language) {
+        if (this.appLocales().some(l => l === language)) {
             this.translate.use(language);
+            this._appLocale.set(language);
+            if (language !== this.getDefaultLocale())
+                this.localStorage.setItem('lang', language);
+            else
+                this.localStorage.removeItem('lang');
         }
     }
-    get appLanguage$() {
-        return this.languageSubject.asObservable().pipe(distinctUntilChanged());
-    }
-    initLanguage() {
-        const browserLang = this.translate.getBrowserLang();
-        if (browserLang && this.appLanguages.some(l => l === browserLang)) {
-            this.appLanguage = browserLang;
-            return browserLang;
-        }
-        const defaultLanguage = this.appLanguages?.length > 0 ? this.appLanguages[0] : 'en';
-        this.appLanguage = defaultLanguage;
-        return defaultLanguage;
-    }
-    getOrInitLanguage() {
-        return this.appLanguage || this.initLanguage();
+    clearAppLocale() {
+        this.localStorage.removeItem('lang');
+        this._appLocale.set(this.getDefaultLocale());
     }
-    get appDataLanguages() {
-        return this.moduleConfig?.app?.dataLanguages ?? ['en'];
-    }
-    get appDataLanguageDefault() {
-        return this.appDataLanguages[0];
-    }
-    get appDataLanguage() {
+    initAppDataLocale() {
         const dataLang = this.localStorage.getItem('dataLang');
-        if (dataLang && this.appDataLanguages.some(dl => dl === dataLang)) {
+        if (dataLang && this.appDataLocales().some(dl => dl === dataLang)) {
             return dataLang;
         }
-        return this.defaultDataLanguage;
+        return this.appDataLocales()?.length > 0 ? this.getDefaultLocale() : 'en';
     }
-    set appDataLanguage(dataLanguage) {
-        if (dataLanguage === null) {
-            this.localStorage.removeItem('dataLang');
-            this.dataLanguageSubject.next(dataLanguage);
-            return;
+    setAppDataLocale(dataLocale) {
+        if (this.appDataLocales().some(dl => dl === dataLocale)) {
+            this._appDataLocale.set(dataLocale);
+            if (dataLocale !== this.getDefaultLocale())
+                this.localStorage.setItem('dataLang', dataLocale);
+            else
+                this.localStorage.removeItem('dataLang');
         }
-        if (this.appDataLanguages.some(dl => dl === dataLanguage)) {
-            this.localStorage.setItem('dataLang', dataLanguage);
-            this.dataLanguageSubject.next(dataLanguage);
-        }
-    }
-    get appDataLanguage$() {
-        return this.dataLanguageSubject.asObservable().pipe(distinctUntilChanged());
-    }
-    // We assume, that default data language is the first one from the array of all available data languages
-    get defaultDataLanguage() {
-        return this.appDataLanguages[0];
-    }
-    get appVersion() {
-        return this.moduleConfig?.app?.version;
-    }
-    // BREADCRUMB section
-    get breadcrumbHome$() {
-        return this.breadcrumbHomeSubject.asObservable();
-    }
-    get breadcrumbs$() {
-        return this.breadcrumbsSubject.asObservable();
-    }
-    // VISUAL section
-    get colorSchemeIsLight() {
-        return this._colorScheme === 'light';
-    }
-    get colorSchemeIsDark() {
-        return this._colorScheme === 'dark';
-    }
-    // USER section
-    get user() {
-        return this._user;
-    }
-    set user(user) {
-        this._user = user;
-        this.userSubject.next(user);
-    }
-    get user$() {
-        return this.userSubject.asObservable();
     }
-    get userRoles() {
-        return this._userRoles;
+    clearAppDataLocale() {
+        this.localStorage.removeItem('lang');
+        this._appDataLocale.set(this.getDefaultLocale());
     }
-    set userRoles(roles) {
-        this._userRoles = roles;
-        this.userRolesSubject.next(roles);
-    }
-    get userRoles$() {
-        return this.userRolesSubject.asObservable();
-    }
-    reset() {
+    constructor() {
+        // internal
+        this.logger = inject(LoggerService).create('CommonsService');
+        this.router = inject(Router);
+        this.primengConfig = inject(PrimeNGConfig);
+        this.translate = inject(TranslateService);
+        this.titleService = inject(Title);
+        this.moduleConfig = inject(COMMONS_MODULE_CONFIG_IT, { optional: true });
+        this.localStorage = inject(BROWSER_STORAGE_IT);
+        this.destroyRef = inject(DestroyRef);
+        // breadcrumbs
+        this.breadcrumbHome = signal({
+            icon: 'pi pi-home',
+            routerLink: '/'
+        });
+        this.breadcrumbs = signal([]);
         // visual
-        this._colorScheme = this.moduleConfig?.app?.colorScheme ?? 'light';
+        this.colorScheme = signal(this.moduleConfig?.app?.colorScheme ?? 'light');
+        this.colorSchemeIsLight = computed(() => this.colorScheme() === 'light');
+        // user
+        this.user = signal(undefined);
+        this.userRoles = signal([]);
+        // APP section
+        this.appName = signal(this.moduleConfig?.app?.name ?? 'app.name');
+        this.appOwner = signal(this.moduleConfig?.app?.owner ?? 'app.owner');
+        this.appLogoLight = signal(this.moduleConfig?.app?.logoPathLight ? this.moduleConfig.app.logoPathLight : this.moduleConfig?.app?.logoPath ?? 'assets/layout/images/logo.png');
+        this.appLogoDark = signal(this.moduleConfig?.app?.logoPathDark ? this.moduleConfig.app.logoPathDark : this.moduleConfig?.app?.logoPath ?? 'assets/layout/images/logo.png');
+        this.appLogo = computed(() => (this.colorSchemeIsLight() ? this.appLogoDark() : this.appLogoLight()));
+        this.appLogoNameLight = signal(this.moduleConfig?.app?.logoPathDark ? this.moduleConfig.app.logoPathDark : this.moduleConfig?.app?.logoPath ?? 'assets/layout/images/logo.png');
+        this.appLogoNameDark = signal(this.moduleConfig?.app?.logoNamePathDark ? this.moduleConfig.app.logoNamePathDark : this.moduleConfig?.app?.logoNamePath ?? 'assets/layout/images/logo-appname.png');
+        this.appLogoName = computed(() => (this.colorSchemeIsLight() ? this.appLogoNameDark() : this.appLogoNameLight()));
+        this.appLocales = signal(this.moduleConfig?.app?.locales ?? ['en']);
+        this._appLocale = signal(this.initAppLocale());
+        this.appLocale = computed(() => this._appLocale());
+        this.appDataLocales = signal(this.moduleConfig?.app?.dataLocales ?? ['en']);
+        this._appDataLocale = signal(this.initAppDataLocale());
+        this.appDataLocale = computed(() => this._appDataLocale());
+        this.appVersion = signal(this.moduleConfig?.app?.version);
         // ripple
         this.primengConfig.ripple = true;
-        // translate
-        this.translate.langs = this.appLanguages;
-        const lang = this.getOrInitLanguage();
-        this.languageSubject.next(lang);
-        this.dataLanguageSubject.next(this.appDataLanguage);
-        this.translate.use(lang);
-        this.translate.get('mngPrime').subscribe(value => this.primengConfig.setTranslation(value));
-        this.routerEventsSubscription?.unsubscribe();
-        this.routerEventsSubscription = this.router.events
+        effect(() => {
+            const appLocales = this.appLocales();
+            if (appLocales) {
+                this.setAppLocale(this.initAppLocale());
+                this.translate.langs = this.appLocales();
+            }
+            const appDataLocales = this.appDataLocales();
+            if (appDataLocales)
+                this.setAppDataLocale(this.initAppDataLocale());
+        }, { allowSignalWrites: true });
+        this.router.events
             .pipe(
         // Filter the NavigationEnd events as the breadcrumb is updated only when the route reaches its end
-        filter(event => event instanceof NavigationEnd))
+        filter(event => event instanceof NavigationEnd), takeUntilDestroyed())
             .subscribe(() => {
             this.updateBreadcrumbs();
             this.setPageTitle();
         });
-        this.translateLangChangeSubscription?.unsubscribe();
-        this.translateLangChangeSubscription = this.translate.onLangChange.subscribe(() => {
+        this.translate.onLangChange.pipe(takeUntilDestroyed()).subscribe(() => {
             this.updateBreadcrumbs();
             this.setPageTitle();
         });
-        this.logger.debug('Reset');
+        this.translate
+            .stream('mngPrime')
+            .pipe(takeUntilDestroyed())
+            .subscribe(value => this.primengConfig.setTranslation(value));
+    }
+    initialize() {
+        this.logger.debug('Initialize');
     }
     // BREADCRUMB actions
     findBreadcrumbItem(item) {
-        const items = this.breadcrumbsSubject.value;
+        const items = this.breadcrumbs();
         if (item.id) {
             return items.find(i => i.id && i.id === item.id) ?? null;
         }
@@ -601,7 +538,7 @@ class CommonsService {
         return null;
     }
     updateBreadcrumbItem(item) {
-        const items = [...this.breadcrumbsSubject.value];
+        const items = [...this.breadcrumbs()];
         let posIdx = -1;
         if (item.id) {
             posIdx = items.findIndex(i => i.id && i.id === item.id);
@@ -627,7 +564,7 @@ class CommonsService {
             ...item,
             updated: true
         };
-        this.breadcrumbsSubject.next(items);
+        this.breadcrumbs.set(items);
         return true;
     }
     updateBreadcrumbs() {
@@ -643,13 +580,16 @@ class CommonsService {
         const homeBreadcrumb = this.generateHomeBreadcrumb(rootRoute);
         if (homeBreadcrumb) {
             if (homeBreadcrumb.label) {
-                this.breadcrumbHomeTranslateSubscription = this.translate.get(homeBreadcrumb.label).subscribe(i18n => {
+                this.breadcrumbHomeTranslateSubscription = this.translate
+                    .get(homeBreadcrumb.label)
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe(i18n => {
                     homeBreadcrumb.label = i18n;
-                    this.breadcrumbHomeSubject.next(homeBreadcrumb);
+                    this.breadcrumbHome.set(homeBreadcrumb);
                 });
             }
             else {
-                this.breadcrumbHomeSubject.next(homeBreadcrumb);
+                this.breadcrumbHome.set(homeBreadcrumb);
             }
         }
         const breadcrumbs = [];
@@ -659,7 +599,10 @@ class CommonsService {
         });
         const i18nKeys = breadcrumbs.filter(b => typeof b.label === 'string').map(b => b.label);
         if (i18nKeys.length > 0) {
-            this.breadcrumbsTranslateSubscription = this.translate.get(i18nKeys).subscribe(i18n => {
+            this.breadcrumbsTranslateSubscription = this.translate
+                .get(i18nKeys)
+                .pipe(takeUntilDestroyed(this.destroyRef))
+                .subscribe(i18n => {
                 // Construct the breadcrumb hierarchy
                 breadcrumbs.forEach(b => {
                     if (b.label && i18n[b.label]) {
@@ -667,11 +610,11 @@ class CommonsService {
                     }
                 });
                 // Emit the new breadcrumbs
-                this.breadcrumbsSubject.next(breadcrumbs);
+                this.breadcrumbs.set(breadcrumbs);
             });
         }
         else {
-            this.breadcrumbsSubject.next(breadcrumbs);
+            this.breadcrumbs.set(breadcrumbs);
         }
     }
     generateHomeBreadcrumb(route) {
@@ -774,18 +717,18 @@ class CommonsService {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CommonsService, decorators: [{
             type: Injectable
-        }] });
+        }], ctorParameters: () => [] });
 
 class ErrorPageComponent {
     constructor(commons) {
         this.commons = commons;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ErrorPageComponent, deps: [{ token: CommonsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: ErrorPageComponent, isStandalone: true, selector: "mng-error-page", ngImport: i0, template: "<div [class]=\"'exception-body min-h-screen ' + (commons.colorSchemeIsLight ? 'layout-light' : 'layout-dark')\">\n    <div class=\"exception-container min-h-screen flex align-items-center justify-content-center flex-column bg-auto md:bg-contain bg-no-repeat\">\n        <div class=\"exception-panel text-center flex align-items-center justify-content-center flex-column\">\n            <h1 class=\"text-red-400 mb-0\">{{ 'pages.notFound.title' | translate }}</h1>\n            <h3 class=\"text-red-300\">{{ 'pages.notFound.subtitle' | translate }}</h3>\n            <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n        </div>\n        <div class=\"exception-footer align-items-center flex\">\n            <img [src]=\"commons.colorSchemeIsLight ? commons.appLogoDark : commons.appLogoLight\" class=\"exception-logo\" alt=\"App logo\" />\n            <img [src]=\"commons.colorSchemeIsLight ? commons.appLogoNameDark : commons.appLogoNameLight\" class=\"exception-appname ml-3\" alt=\"App name\" />\n        </div>\n    </div>\n</div>\n", styles: [".exception-body{background:var(--surface-ground)}.exception-body .exception-container{background:var(--exception-pages-image);background-repeat:no-repeat;background-size:contain;box-sizing:border-box}.exception-body .exception-container .exception-panel{box-sizing:border-box;flex-grow:1;margin-top:3rem;margin-bottom:3rem}.exception-body .exception-container .exception-panel h1{font-size:140px;font-weight:900;text-shadow:0 0 50px rgba(252,97,97,.2)}.exception-body .exception-container .exception-panel h3{font-size:80px;font-weight:900;margin-top:-90px;margin-bottom:50px}.exception-body .exception-container .exception-panel button{margin-top:50px}.exception-body .exception-container .exception-footer{margin-bottom:2rem}.exception-body .exception-container .exception-footer .exception-logo{width:34px}.exception-body .exception-container .exception-footer .exception-appname{width:72px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: ErrorPageComponent, isStandalone: true, selector: "mng-error-page", ngImport: i0, template: "<div [class]=\"'exception-body min-h-screen ' + (commons.colorSchemeIsLight() ? 'layout-light' : 'layout-dark')\">\n    <div class=\"exception-container min-h-screen flex align-items-center justify-content-center flex-column bg-auto md:bg-contain bg-no-repeat\">\n        <div class=\"exception-panel text-center flex align-items-center justify-content-center flex-column\">\n            <h1 class=\"text-red-400 mb-0\">{{ 'pages.notFound.title' | translate }}</h1>\n            <h3 class=\"text-red-300\">{{ 'pages.notFound.subtitle' | translate }}</h3>\n            <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n        </div>\n        <div class=\"exception-footer align-items-center flex\">\n            <img [src]=\"commons.appLogo()\" class=\"exception-logo\" alt=\"App logo\" />\n            <img [src]=\"commons.appLogoName()\" class=\"exception-appname ml-3\" alt=\"App name\" />\n        </div>\n    </div>\n</div>\n", styles: [".exception-body{background:var(--surface-ground)}.exception-body .exception-container{background:var(--exception-pages-image);background-repeat:no-repeat;background-size:contain;box-sizing:border-box}.exception-body .exception-container .exception-panel{box-sizing:border-box;flex-grow:1;margin-top:3rem;margin-bottom:3rem}.exception-body .exception-container .exception-panel h1{font-size:140px;font-weight:900;text-shadow:0 0 50px rgba(252,97,97,.2)}.exception-body .exception-container .exception-panel h3{font-size:80px;font-weight:900;margin-top:-90px;margin-bottom:50px}.exception-body .exception-container .exception-panel button{margin-top:50px}.exception-body .exception-container .exception-footer{margin-bottom:2rem}.exception-body .exception-container .exception-footer .exception-logo{width:34px}.exception-body .exception-container .exception-footer .exception-appname{width:72px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ErrorPageComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-error-page', imports: [ButtonModule, TranslateModule, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'exception-body min-h-screen ' + (commons.colorSchemeIsLight ? 'layout-light' : 'layout-dark')\">\n    <div class=\"exception-container min-h-screen flex align-items-center justify-content-center flex-column bg-auto md:bg-contain bg-no-repeat\">\n        <div class=\"exception-panel text-center flex align-items-center justify-content-center flex-column\">\n            <h1 class=\"text-red-400 mb-0\">{{ 'pages.notFound.title' | translate }}</h1>\n            <h3 class=\"text-red-300\">{{ 'pages.notFound.subtitle' | translate }}</h3>\n            <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n        </div>\n        <div class=\"exception-footer align-items-center flex\">\n            <img [src]=\"commons.colorSchemeIsLight ? commons.appLogoDark : commons.appLogoLight\" class=\"exception-logo\" alt=\"App logo\" />\n            <img [src]=\"commons.colorSchemeIsLight ? commons.appLogoNameDark : commons.appLogoNameLight\" class=\"exception-appname ml-3\" alt=\"App name\" />\n        </div>\n    </div>\n</div>\n", styles: [".exception-body{background:var(--surface-ground)}.exception-body .exception-container{background:var(--exception-pages-image);background-repeat:no-repeat;background-size:contain;box-sizing:border-box}.exception-body .exception-container .exception-panel{box-sizing:border-box;flex-grow:1;margin-top:3rem;margin-bottom:3rem}.exception-body .exception-container .exception-panel h1{font-size:140px;font-weight:900;text-shadow:0 0 50px rgba(252,97,97,.2)}.exception-body .exception-container .exception-panel h3{font-size:80px;font-weight:900;margin-top:-90px;margin-bottom:50px}.exception-body .exception-container .exception-panel button{margin-top:50px}.exception-body .exception-container .exception-footer{margin-bottom:2rem}.exception-body .exception-container .exception-footer .exception-logo{width:34px}.exception-body .exception-container .exception-footer .exception-appname{width:72px}\n"] }]
+            args: [{ standalone: true, selector: 'mng-error-page', imports: [ButtonModule, TranslateModule, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'exception-body min-h-screen ' + (commons.colorSchemeIsLight() ? 'layout-light' : 'layout-dark')\">\n    <div class=\"exception-container min-h-screen flex align-items-center justify-content-center flex-column bg-auto md:bg-contain bg-no-repeat\">\n        <div class=\"exception-panel text-center flex align-items-center justify-content-center flex-column\">\n            <h1 class=\"text-red-400 mb-0\">{{ 'pages.notFound.title' | translate }}</h1>\n            <h3 class=\"text-red-300\">{{ 'pages.notFound.subtitle' | translate }}</h3>\n            <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n        </div>\n        <div class=\"exception-footer align-items-center flex\">\n            <img [src]=\"commons.appLogo()\" class=\"exception-logo\" alt=\"App logo\" />\n            <img [src]=\"commons.appLogoName()\" class=\"exception-appname ml-3\" alt=\"App name\" />\n        </div>\n    </div>\n</div>\n", styles: [".exception-body{background:var(--surface-ground)}.exception-body .exception-container{background:var(--exception-pages-image);background-repeat:no-repeat;background-size:contain;box-sizing:border-box}.exception-body .exception-container .exception-panel{box-sizing:border-box;flex-grow:1;margin-top:3rem;margin-bottom:3rem}.exception-body .exception-container .exception-panel h1{font-size:140px;font-weight:900;text-shadow:0 0 50px rgba(252,97,97,.2)}.exception-body .exception-container .exception-panel h3{font-size:80px;font-weight:900;margin-top:-90px;margin-bottom:50px}.exception-body .exception-container .exception-panel button{margin-top:50px}.exception-body .exception-container .exception-footer{margin-bottom:2rem}.exception-body .exception-container .exception-footer .exception-logo{width:34px}.exception-body .exception-container .exception-footer .exception-appname{width:72px}\n"] }]
         }], ctorParameters: () => [{ type: CommonsService }] });
 
 class NotFoundPageComponent {
@@ -793,11 +736,11 @@ class NotFoundPageComponent {
         this.commons = commons;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NotFoundPageComponent, deps: [{ token: CommonsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: NotFoundPageComponent, isStandalone: true, selector: "mng-not-found-page", ngImport: i0, template: "<div [class]=\"'exception-body min-h-screen ' + (commons.colorSchemeIsLight ? 'layout-light' : 'layout-dark')\">\n    <div class=\"exception-container min-h-screen flex align-items-center justify-content-center flex-column bg-auto md:bg-contain bg-no-repeat\">\n        <div class=\"exception-panel text-center flex align-items-center justify-content-center flex-column\">\n            <h1 class=\"text-red-400 mb-0\">{{ 'pages.notFound.title' | translate }}</h1>\n            <h3 class=\"text-red-300\">{{ 'pages.notFound.subtitle' | translate }}</h3>\n            <p>{{ 'pages.notFound.message' | translate }}</p>\n            <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n        </div>\n        <div class=\"exception-footer align-items-center flex\">\n            <img [src]=\"commons.colorSchemeIsLight ? commons.appLogoDark : commons.appLogoLight\" class=\"exception-logo\" alt=\"App logo\" />\n            <img [src]=\"commons.colorSchemeIsLight ? commons.appLogoNameDark : commons.appLogoNameLight\" class=\"exception-appname ml-3\" alt=\"App name\" />\n        </div>\n    </div>\n</div>\n", styles: [".exception-body{background:var(--surface-ground)}.exception-body .exception-container{background:var(--exception-pages-image);background-repeat:no-repeat;background-size:contain;box-sizing:border-box}.exception-body .exception-container .exception-panel{box-sizing:border-box;flex-grow:1;margin-top:3rem;margin-bottom:3rem}.exception-body .exception-container .exception-panel h1{font-size:140px;font-weight:900;text-shadow:0 0 50px rgba(252,97,97,.2)}.exception-body .exception-container .exception-panel h3{font-size:80px;font-weight:900;margin-top:-90px;margin-bottom:50px}.exception-body .exception-container .exception-panel p{font-size:24px;font-weight:400;max-width:320px}.exception-body .exception-container .exception-panel button{margin-top:50px}.exception-body .exception-container .exception-footer{margin-bottom:2rem}.exception-body .exception-container .exception-footer .exception-logo{width:34px}.exception-body .exception-container .exception-footer .exception-appname{width:72px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.4", type: NotFoundPageComponent, isStandalone: true, selector: "mng-not-found-page", ngImport: i0, template: "<div [class]=\"'exception-body min-h-screen ' + (commons.colorSchemeIsLight() ? 'layout-light' : 'layout-dark')\">\n    <div class=\"exception-container min-h-screen flex align-items-center justify-content-center flex-column bg-auto md:bg-contain bg-no-repeat\">\n        <div class=\"exception-panel text-center flex align-items-center justify-content-center flex-column\">\n            <h1 class=\"text-red-400 mb-0\">{{ 'pages.notFound.title' | translate }}</h1>\n            <h3 class=\"text-red-300\">{{ 'pages.notFound.subtitle' | translate }}</h3>\n            <p>{{ 'pages.notFound.message' | translate }}</p>\n            <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n        </div>\n        <div class=\"exception-footer align-items-center flex\">\n            <img [src]=\"commons.appLogo()\" class=\"exception-logo\" alt=\"App logo\" />\n            <img [src]=\"commons.appLogoName()\" class=\"exception-appname ml-3\" alt=\"App name\" />\n        </div>\n    </div>\n</div>\n", styles: [".exception-body{background:var(--surface-ground)}.exception-body .exception-container{background:var(--exception-pages-image);background-repeat:no-repeat;background-size:contain;box-sizing:border-box}.exception-body .exception-container .exception-panel{box-sizing:border-box;flex-grow:1;margin-top:3rem;margin-bottom:3rem}.exception-body .exception-container .exception-panel h1{font-size:140px;font-weight:900;text-shadow:0 0 50px rgba(252,97,97,.2)}.exception-body .exception-container .exception-panel h3{font-size:80px;font-weight:900;margin-top:-90px;margin-bottom:50px}.exception-body .exception-container .exception-panel p{font-size:24px;font-weight:400;max-width:320px}.exception-body .exception-container .exception-panel button{margin-top:50px}.exception-body .exception-container .exception-footer{margin-bottom:2rem}.exception-body .exception-container .exception-footer .exception-logo{width:34px}.exception-body .exception-container .exception-footer .exception-appname{width:72px}\n"], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[pButton]", inputs: ["iconPos", "loadingIcon", "label", "icon", "loading"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3$1.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: NotFoundPageComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'mng-not-found-page', imports: [ButtonModule, RouterLink, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'exception-body min-h-screen ' + (commons.colorSchemeIsLight ? 'layout-light' : 'layout-dark')\">\n    <div class=\"exception-container min-h-screen flex align-items-center justify-content-center flex-column bg-auto md:bg-contain bg-no-repeat\">\n        <div class=\"exception-panel text-center flex align-items-center justify-content-center flex-column\">\n            <h1 class=\"text-red-400 mb-0\">{{ 'pages.notFound.title' | translate }}</h1>\n            <h3 class=\"text-red-300\">{{ 'pages.notFound.subtitle' | translate }}</h3>\n            <p>{{ 'pages.notFound.message' | translate }}</p>\n            <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n        </div>\n        <div class=\"exception-footer align-items-center flex\">\n            <img [src]=\"commons.colorSchemeIsLight ? commons.appLogoDark : commons.appLogoLight\" class=\"exception-logo\" alt=\"App logo\" />\n            <img [src]=\"commons.colorSchemeIsLight ? commons.appLogoNameDark : commons.appLogoNameLight\" class=\"exception-appname ml-3\" alt=\"App name\" />\n        </div>\n    </div>\n</div>\n", styles: [".exception-body{background:var(--surface-ground)}.exception-body .exception-container{background:var(--exception-pages-image);background-repeat:no-repeat;background-size:contain;box-sizing:border-box}.exception-body .exception-container .exception-panel{box-sizing:border-box;flex-grow:1;margin-top:3rem;margin-bottom:3rem}.exception-body .exception-container .exception-panel h1{font-size:140px;font-weight:900;text-shadow:0 0 50px rgba(252,97,97,.2)}.exception-body .exception-container .exception-panel h3{font-size:80px;font-weight:900;margin-top:-90px;margin-bottom:50px}.exception-body .exception-container .exception-panel p{font-size:24px;font-weight:400;max-width:320px}.exception-body .exception-container .exception-panel button{margin-top:50px}.exception-body .exception-container .exception-footer{margin-bottom:2rem}.exception-body .exception-container .exception-footer .exception-logo{width:34px}.exception-body .exception-container .exception-footer .exception-appname{width:72px}\n"] }]
+            args: [{ standalone: true, selector: 'mng-not-found-page', imports: [ButtonModule, RouterLink, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'exception-body min-h-screen ' + (commons.colorSchemeIsLight() ? 'layout-light' : 'layout-dark')\">\n    <div class=\"exception-container min-h-screen flex align-items-center justify-content-center flex-column bg-auto md:bg-contain bg-no-repeat\">\n        <div class=\"exception-panel text-center flex align-items-center justify-content-center flex-column\">\n            <h1 class=\"text-red-400 mb-0\">{{ 'pages.notFound.title' | translate }}</h1>\n            <h3 class=\"text-red-300\">{{ 'pages.notFound.subtitle' | translate }}</h3>\n            <p>{{ 'pages.notFound.message' | translate }}</p>\n            <button type=\"button\" pButton [label]=\"'general.returnHome' | translate\" [routerLink]=\"['/']\"></button>\n        </div>\n        <div class=\"exception-footer align-items-center flex\">\n            <img [src]=\"commons.appLogo()\" class=\"exception-logo\" alt=\"App logo\" />\n            <img [src]=\"commons.appLogoName()\" class=\"exception-appname ml-3\" alt=\"App name\" />\n        </div>\n    </div>\n</div>\n", styles: [".exception-body{background:var(--surface-ground)}.exception-body .exception-container{background:var(--exception-pages-image);background-repeat:no-repeat;background-size:contain;box-sizing:border-box}.exception-body .exception-container .exception-panel{box-sizing:border-box;flex-grow:1;margin-top:3rem;margin-bottom:3rem}.exception-body .exception-container .exception-panel h1{font-size:140px;font-weight:900;text-shadow:0 0 50px rgba(252,97,97,.2)}.exception-body .exception-container .exception-panel h3{font-size:80px;font-weight:900;margin-top:-90px;margin-bottom:50px}.exception-body .exception-container .exception-panel p{font-size:24px;font-weight:400;max-width:320px}.exception-body .exception-container .exception-panel button{margin-top:50px}.exception-body .exception-container .exception-footer{margin-bottom:2rem}.exception-body .exception-container .exception-footer .exception-logo{width:34px}.exception-body .exception-container .exception-footer .exception-appname{width:72px}\n"] }]
         }], ctorParameters: () => [{ type: CommonsService }] });
 
 class FilterMatchMode {
@@ -1334,36 +1277,33 @@ class DataProviderInst {
         return true;
     }
 }
+
 class DataProvider extends DataProviderInst {
     constructor() {
         super(undefined, undefined);
     }
     static create() {
-        return new DataProviderInst(undefined, undefined);
+        return dataProviderBase();
     }
     static fromClass(type) {
-        return new DataProviderInst(type, undefined);
+        return dataProviderFromClass(type);
     }
     static fromClassWithService(type, serviceType) {
-        return new DataProviderInst(type, serviceType);
+        return dataProviderFromClass(type, serviceType);
     }
     static fromService(serviceType) {
-        return new DataProviderInst(undefined, serviceType);
-    }
-    static fromAnyParam(type, serviceType) {
-        if (typeof type !== 'undefined') {
-            return typeof serviceType !== 'undefined'
-                ? DataProvider.fromClassWithService(type, serviceType)
-                : DataProvider.fromClass(type);
-        }
-        else if (typeof serviceType !== 'undefined') {
-            return DataProvider.fromService(serviceType);
-        }
-        else {
-            return DataProvider.create();
-        }
+        return dataProviderWithService(serviceType);
     }
 }
+function dataProviderBase() {
+    return new DataProviderInst(undefined, undefined);
+}
+function dataProviderWithService(serviceType) {
+    return new DataProviderInst(undefined, serviceType);
+}
+function dataProviderFromClass(type, serviceType) {
+    return new DataProviderInst(type, serviceType);
+}
 
 class ComponentDirective {
     constructor() {
@@ -1385,17 +1325,20 @@ class ComponentDirective {
         if (!component) {
             throw new CommonsInternalError(`Component cannot be created, no component (${this.component}) or no or invalid injection token provided (${this.componentIt}).`);
         }
+        const elementInjector = this.parentInjector ?? this.injector;
+        const environmentInjector = elementInjector.get(EnvironmentInjector, null, { optional: true }) ?? this.applicationRef.injector;
         if (this.attachToHost) {
             this.componentRef = createComponent(component, {
                 hostElement: this.elementRef.nativeElement,
-                environmentInjector: this.applicationRef.injector,
-                elementInjector: this.nodeInjector ?? this.injector
+                environmentInjector: environmentInjector,
+                elementInjector: elementInjector
             });
         }
         else {
             this.viewContainerRef.clear();
             this.componentRef = this.viewContainerRef.createComponent(component, {
-                injector: this.nodeInjector ?? undefined
+                environmentInjector: environmentInjector,
+                injector: elementInjector
             });
         }
         if (this.inputs) {
@@ -1409,7 +1352,7 @@ class ComponentDirective {
         this.componentInstanceEventEmitter.next(this.componentRef.instance);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ComponentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: ComponentDirective, isStandalone: true, selector: "[mngComponent]", inputs: { component: ["mngComponent", "component"], componentIt: ["injectionToken", "componentIt"], inputs: "inputs", attachToHost: "attachToHost", nodeInjector: "nodeInjector" }, outputs: { componentInstanceEventEmitter: "instanceCreated" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: ComponentDirective, isStandalone: true, selector: "[mngComponent]", inputs: { component: ["mngComponent", "component"], componentIt: ["injectionToken", "componentIt"], inputs: "inputs", attachToHost: "attachToHost", parentInjector: "parentInjector" }, outputs: { componentInstanceEventEmitter: "instanceCreated" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ComponentDirective, decorators: [{
             type: Directive,
@@ -1427,7 +1370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImpor
                 type: Input
             }], attachToHost: [{
                 type: Input
-            }], nodeInjector: [{
+            }], parentInjector: [{
                 type: Input
             }], componentInstanceEventEmitter: [{
                 type: Output,
@@ -2869,6 +2812,7 @@ class PermissionService {
         this.injector = inject(Injector);
         this.commons = inject(CommonsService);
         this.logger = inject(LoggerService).create('AuthorizationService');
+        this.userRoles$ = toObservable(this.commons.userRoles());
     }
     isPermitted(permissions, route, actionCtx) {
         switch (permissions.authorizationType) {
@@ -2879,7 +2823,7 @@ class PermissionService {
             case PermissionTypeEnum.Service:
                 return this.isPermittedService(permissions, route, actionCtx);
             default:
-                return this.commons.userRoles$.pipe(map(ur => isPermitted(permissions, ur)));
+                return this.userRoles$.pipe(map(ur => isPermitted(permissions, ur)));
         }
     }
     isPermittedAll(permission, route, actionCtx) {
@@ -3608,21 +3552,13 @@ class CommonsConfigurationService {
 }
 
 class CommonsRouterService {
-    constructor(router) {
-        this.router = router;
+    constructor() {
+        this.router = inject(Router);
         this.logger = inject(LoggerService).create('CommonsRouterService');
         this.routesLoadedPropKey = '_loadedRoutes';
         this.currentNavigationModuleKeys = [];
         this.lazyLoadedRoutesConfig = {};
-    }
-    getRouteLoadedChildren(path) {
-        return this.getOrCreateRouteForModule(this.getModulePathFromRouterLink(path)).loadedRoutes;
-    }
-    getRouteLoadedChildren$(path) {
-        return this.getOrCreateRouteForModule(this.getModulePathFromRouterLink(path)).loadedRoutesSubject.asObservable().pipe(first());
-    }
-    initialize() {
-        this.router.events.subscribe(event => {
+        this.router.events.pipe(takeUntilDestroyed()).subscribe(event => {
             if (event instanceof NavigationStart) {
                 this.startNavigation(event.url);
             }
@@ -3637,6 +3573,15 @@ class CommonsRouterService {
             }
         });
     }
+    getRouteLoadedChildren(path) {
+        return this.getOrCreateRouteForModule(this.getModulePathFromRouterLink(path)).loadedRoutes;
+    }
+    getRouteLoadedChildren$(path) {
+        return this.getOrCreateRouteForModule(this.getModulePathFromRouterLink(path)).loadedRoutesSubject.asObservable().pipe(first());
+    }
+    initialize() {
+        this.logger.debug('Initialized.');
+    }
     startNavigation(url) {
         this.currentNavigationPath = url.split('?')[0].split('#')[0];
         this.currentNavigationModuleKeys = [];
@@ -3773,12 +3718,12 @@ class CommonsRouterService {
     getModulePathFromRouterLink(path) {
         return ('/' + (Array.isArray(path) ? path.join('/') : path)).replace(/\/\//g, '/');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CommonsRouterService, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CommonsRouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CommonsRouterService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CommonsRouterService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$1.Router }] });
+        }], ctorParameters: () => [] });
 
 var CommonsInitEventEnum;
 (function (CommonsInitEventEnum) {
@@ -3863,7 +3808,7 @@ class CommonsInitService {
             this.commonsInitServiceEvents.next(CommonsInitEventEnum.CommonsInitEnd);
             this.commonsInitServiceEvents.complete();
             this.isInitializedSubject.next(true);
-            return this.commons.reset();
+            return this.commons.initialize();
         }), catchError(err => {
             ctxLogger.warn('Commons initialization failed with error', err);
             this.commonsInitServiceEvents.next(CommonsInitEventEnum.CommonsInitError);
@@ -4003,5 +3948,5 @@ function provideCommons(config, ...features) {
  * Generated bundle index. Do not edit.
  */
 
-export { ACommonsErrorBase, APermissions, BROWSER_STORAGE_IT, BooleanPipe, COMMONS_INITIALIZER_IT, COMMONS_MODULE_CONFIG_IT, ClassMapPipe, CommonsConfigurationService, CommonsErrorHandler, CommonsFeatureTypeEnum, CommonsHttpError, CommonsInitEventEnum, CommonsInitService, CommonsInternalError, CommonsRouterService, CommonsService, ComponentDirective, DataProvider, DataProviderInst, DialogKeydownHandlerDirective, EnumName, EnumPipe, EnumerateAsyncPipe, EnumeratePipe, ErrorPageComponent, FilterMatchMode, GetterPipe, I18nPropertyPipe, JsonPathPipe, LOG_PUBLISHERS, LocalStorageService, LogLevelEnum, LogPublisherConsoleService, LoggerService, NotFoundPageComponent, NotificationWrapperComponent, ParametrizePipe, PermissionService, PermissionTypeEnum, Permissions, RouteBuilder, RoutesBuilder, StyleLevelEnum, StyleSizeEnum, Styles, TemplateDirective, TemplatePipe, TypeName, TypeRegistry, adjustRouteMenuLazyChildrenRouterLinks, angularDateFormatHasSeconds, angularDateFormatHasTime, appendRoutePathToBasePath, boolean$Attribute, commonsActionErrorContextToString, commonsErrorToString, commonsInitializerProvider, copyDataListParams, createLazyChildrenRoute, createLazyRoute, createRoute, createRouteRedirect, createRoutes, dataListParamsFilterToUrlQuery, dataListParamsFilterValueToUrlString, dataListParamsFiltersToUrlQuery, dataListParamsSortToUrlQuery, dataListParamsToUrlQuery, dateToIsoString, defineReflectEnumName, defineReflectTypeName, doesUrlMatchRouterLink, errorCauseToString, errorToString, escapeHtml, escapeHtmlAny, findReflectEnumName, findReflectTypeName, findTemplateByName, flattenObjectKeys, fromAngularDateFormatToPrime, fromEnumConstantsAsValueArray, fromEnumValuesAsValueArray, fromSubscribeError, fromTableLoadToDataListParams, fromUrlQueryToDataListParams, getEnumConstantName, getEnumConstantNameFromObject, getEnumConstantNames, getEnumConstantNamesFromObject, getEnumConstantValuesAsNumber, getEnumConstantValuesAsString, getEnumerationI18nBaseKey, getErrorLogLevel, getErrorName, getHttpErrorResponse, getHttpErrorResponseStatus, getI18n, getI18nAsync, getI18nClassGroupKey, getI18nClassKeyBasePath, getI18nClassName, getI18nClassNameAsync, getI18nClassParams, getI18nClassParamsAsync, getI18nClassPropertyKey, getI18nClassTabKey, getI18nErrorParams, getI18nForError, getI18nTypeGroupKey, getI18nTypeKeyBasePath, getI18nTypeName, getI18nTypeNameAsync, getI18nTypeParams, getI18nTypeParamsAsync, getI18nTypePropertyKey, getI18nTypeTabKey, getObjectGetters, getObjectProperties, getObjectPropertyByPath, httpErrorResponseToString, isHttpErrorResponse, isPermitted, isRbacPermitted, itemIdToDefined, itemIdToNumber, itemIdToString, mapToDataList, mergeDataListParamsWithDefaults, number$Attribute, objectDeepCopy, objectDeepMerge, permissionGuard, populateI18nParams, populateI18nTypeParams, provideCommons, reflectEnumNameKey, reflectTypeNameExists, reflectTypeNameKey, removeRouteEmptyPathSegments, selectEnumerationI18n, selectI18n, stringify, toEnumerationI18nEnumerate, toObservable, toastMessage, valueToDefined };
+export { ACommonsErrorBase, APermissions, BROWSER_STORAGE_IT, BooleanPipe, COMMONS_INITIALIZER_IT, COMMONS_MODULE_CONFIG_IT, ClassMapPipe, CommonsConfigurationService, CommonsErrorHandler, CommonsFeatureTypeEnum, CommonsHttpError, CommonsInitEventEnum, CommonsInitService, CommonsInternalError, CommonsRouterService, CommonsService, ComponentDirective, DataProvider, DataProviderInst, DialogKeydownHandlerDirective, EnumName, EnumPipe, EnumerateAsyncPipe, EnumeratePipe, ErrorPageComponent, FilterMatchMode, GetterPipe, I18nPropertyPipe, JsonPathPipe, LOG_PUBLISHERS, LocalStorageService, LogLevelEnum, LogPublisherConsoleService, LoggerService, NotFoundPageComponent, NotificationWrapperComponent, ParametrizePipe, PermissionService, PermissionTypeEnum, Permissions, RouteBuilder, RoutesBuilder, StyleLevelEnum, StyleSizeEnum, Styles, TemplateDirective, TemplatePipe, TypeName, TypeRegistry, adjustRouteMenuLazyChildrenRouterLinks, angularDateFormatHasSeconds, angularDateFormatHasTime, appendRoutePathToBasePath, boolean$Attribute, commonsActionErrorContextToString, commonsErrorToString, commonsInitializerProvider, copyDataListParams, createLazyChildrenRoute, createLazyRoute, createRoute, createRouteRedirect, createRoutes, dataListParamsFilterToUrlQuery, dataListParamsFilterValueToUrlString, dataListParamsFiltersToUrlQuery, dataListParamsSortToUrlQuery, dataListParamsToUrlQuery, dataProviderBase, dataProviderFromClass, dataProviderWithService, dateToIsoString, defineReflectEnumName, defineReflectTypeName, doesUrlMatchRouterLink, errorCauseToString, errorToString, escapeHtml, escapeHtmlAny, findReflectEnumName, findReflectTypeName, findTemplateByName, flattenObjectKeys, fromAngularDateFormatToPrime, fromEnumConstantsAsValueArray, fromEnumValuesAsValueArray, fromSubscribeError, fromTableLoadToDataListParams, fromUrlQueryToDataListParams, getEnumConstantName, getEnumConstantNameFromObject, getEnumConstantNames, getEnumConstantNamesFromObject, getEnumConstantValuesAsNumber, getEnumConstantValuesAsString, getEnumerationI18nBaseKey, getErrorLogLevel, getErrorName, getHttpErrorResponse, getHttpErrorResponseStatus, getI18n, getI18nAsync, getI18nClassGroupKey, getI18nClassKeyBasePath, getI18nClassName, getI18nClassNameAsync, getI18nClassParams, getI18nClassParamsAsync, getI18nClassPropertyKey, getI18nClassTabKey, getI18nErrorParams, getI18nForError, getI18nTypeGroupKey, getI18nTypeKeyBasePath, getI18nTypeName, getI18nTypeNameAsync, getI18nTypeParams, getI18nTypeParamsAsync, getI18nTypePropertyKey, getI18nTypeTabKey, getObjectGetters, getObjectProperties, getObjectPropertyByPath, httpErrorResponseToString, isHttpErrorResponse, isPermitted, isRbacPermitted, itemIdToDefined, itemIdToNumber, itemIdToString, mapToDataList, mergeDataListParamsWithDefaults, number$Attribute, objectDeepCopy, objectDeepMerge, permissionGuard, populateI18nParams, populateI18nTypeParams, provideCommons, reflectEnumNameKey, reflectTypeNameExists, reflectTypeNameKey, removeRouteEmptyPathSegments, selectEnumerationI18n, selectI18n, stringify, toEnumerationI18nEnumerate, toObservable, toastMessage, valueToDefined };
 //# sourceMappingURL=mediusinc-mng-commons-core.mjs.map