@mediusinc/mng-commons 5.0.0-rc.1 → 5.0.0-rc.3

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 {
@@ -56,10 +56,10 @@ class DialogKeydownHandlerDirective {
         }
         this.dialogsWithKeydownListener.forEach(c => c.bindDocumentKeydownListener());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: DialogKeydownHandlerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.2", type: DialogKeydownHandlerDirective, isStandalone: true, selector: "[mngDialogKeydownHandler]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: DialogKeydownHandlerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: DialogKeydownHandlerDirective, isStandalone: true, selector: "[mngDialogKeydownHandler]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: DialogKeydownHandlerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: DialogKeydownHandlerDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -97,12 +97,12 @@ class NotificationWrapperComponent {
             this.dialogNotification.set(null);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NotificationWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.2", 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.ɵ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            @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.2", ngImport: i0, type: NotificationWrapperComponent, decorators: [{
+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();
-    }
-    get appDataLanguages() {
-        return this.moduleConfig?.app?.dataLanguages ?? ['en'];
+    clearAppLocale() {
+        this.localStorage.removeItem('lang');
+        this._appLocale.set(this.getDefaultLocale());
     }
-    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;
-        }
-        if (this.appDataLanguages.some(dl => dl === dataLanguage)) {
-            this.localStorage.setItem('dataLang', dataLanguage);
-            this.dataLanguageSubject.next(dataLanguage);
+    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');
         }
     }
-    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();
+    clearAppDataLocale() {
+        this.localStorage.removeItem('lang');
+        this._appDataLocale.set(this.getDefaultLocale());
     }
-    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;
-    }
-    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) {
@@ -769,35 +712,35 @@ class CommonsService {
         titlePieces.push(this.translate.instant('app.name'));
         return titlePieces.join(' - ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: CommonsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: CommonsService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CommonsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CommonsService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: CommonsService, decorators: [{
+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.2", ngImport: i0, type: ErrorPageComponent, deps: [{ token: CommonsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", 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.ɵ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.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.2", ngImport: i0, type: ErrorPageComponent, decorators: [{
+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 {
     constructor(commons) {
         this.commons = commons;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: NotFoundPageComponent, deps: [{ token: CommonsService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.2", 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.ɵ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.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.2", ngImport: i0, type: NotFoundPageComponent, decorators: [{
+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) {
@@ -1408,10 +1351,10 @@ class ComponentDirective {
         }
         this.componentInstanceEventEmitter.next(this.componentRef.instance);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ComponentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.2", 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.ɵ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", parentInjector: "parentInjector" }, outputs: { componentInstanceEventEmitter: "instanceCreated" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ComponentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ComponentDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -1427,7 +1370,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImpor
                 type: Input
             }], attachToHost: [{
                 type: Input
-            }], nodeInjector: [{
+            }], parentInjector: [{
                 type: Input
             }], componentInstanceEventEmitter: [{
                 type: Output,
@@ -1445,10 +1388,10 @@ class TemplateDirective {
     getViewContainerRef() {
         return this.viewContainerRef;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.2", type: TemplateDirective, isStandalone: true, selector: "[mngTemplate]", inputs: { type: "type", name: ["mngTemplate", "name"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.4", type: TemplateDirective, isStandalone: true, selector: "[mngTemplate]", inputs: { type: "type", name: ["mngTemplate", "name"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     standalone: true,
@@ -2352,10 +2295,10 @@ class BooleanPipe {
             return value;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: BooleanPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: BooleanPipe, isStandalone: true, name: "mngBoolean" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: BooleanPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: BooleanPipe, isStandalone: true, name: "mngBoolean" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: BooleanPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: BooleanPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -2373,10 +2316,10 @@ class ClassMapPipe {
             return className ?? '';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ClassMapPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: ClassMapPipe, isStandalone: true, name: "mngClassMap" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ClassMapPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: ClassMapPipe, isStandalone: true, name: "mngClassMap" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ClassMapPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ClassMapPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -2396,10 +2339,10 @@ class EnumPipe {
         }
         return i18nPath ? `${i18nPath}.${enumConstantName}` : enumConstantName;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: EnumPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: EnumPipe, isStandalone: true, name: "mngEnum" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: EnumPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: EnumPipe, isStandalone: true, name: "mngEnum" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: EnumPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: EnumPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -2418,10 +2361,10 @@ class JsonPathPipe {
     transform(value, path = '') {
         return getObjectPropertyByPath(value, path);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: JsonPathPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: JsonPathPipe, isStandalone: true, name: "mngJsonPath" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: JsonPathPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: JsonPathPipe, isStandalone: true, name: "mngJsonPath" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: JsonPathPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: JsonPathPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -2448,10 +2391,10 @@ class EnumeratePipe {
         })
             .join(valueSeparator);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: EnumeratePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: EnumeratePipe, isStandalone: true, name: "mngEnumerate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: EnumeratePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: EnumeratePipe, isStandalone: true, name: "mngEnumerate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: EnumeratePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: EnumeratePipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -2493,10 +2436,10 @@ class EnumerateAsyncPipe {
             }))));
         }), map(i => i.join(valueSeparator)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: EnumerateAsyncPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: EnumerateAsyncPipe, isStandalone: true, name: "mngEnumerateAsync" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: EnumerateAsyncPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: EnumerateAsyncPipe, isStandalone: true, name: "mngEnumerateAsync" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: EnumerateAsyncPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: EnumerateAsyncPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -2512,10 +2455,10 @@ class GetterPipe {
         }
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: GetterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: GetterPipe, isStandalone: true, name: "mngGetter" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GetterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: GetterPipe, isStandalone: true, name: "mngGetter" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: GetterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: GetterPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -2528,10 +2471,10 @@ class I18nPropertyPipe {
     transform(property, model) {
         return getI18nTypePropertyKey(model.i18nBaseKey, property);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: I18nPropertyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: I18nPropertyPipe, isStandalone: true, name: "mngI18nProperty" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: I18nPropertyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: I18nPropertyPipe, isStandalone: true, name: "mngI18nProperty" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: I18nPropertyPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: I18nPropertyPipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -2610,10 +2553,10 @@ class ParametrizePipe {
     parametrizeString(s, params) {
         return s.replace(/{{\s?([^{}\s]*)\s?}}/g, (subs, key) => this.jsonPath.transform(params, key) ?? subs);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParametrizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: ParametrizePipe, isStandalone: true, name: "mngParametrize" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ParametrizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: ParametrizePipe, isStandalone: true, name: "mngParametrize" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: ParametrizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: ParametrizePipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -2632,10 +2575,10 @@ class TemplatePipe {
         }
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TemplatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.2", ngImport: i0, type: TemplatePipe, isStandalone: true, name: "template" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TemplatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.4", ngImport: i0, type: TemplatePipe, isStandalone: true, name: "template" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: TemplatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: TemplatePipe, decorators: [{
             type: Pipe,
             args: [{
                     standalone: true,
@@ -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) {
@@ -2896,10 +2840,10 @@ class PermissionService {
         }
         return serviceInstance.isPermitted(route, this.router.routerState.snapshot, actionCtx);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: PermissionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: PermissionService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: PermissionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: PermissionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: PermissionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: PermissionService, decorators: [{
             type: Injectable
         }] });
 
@@ -2926,89 +2870,95 @@ class RouteBuilder {
             this.routePath = [this.route.path];
         }
     }
-    static create(path, component) {
-        return new RouteBuilder({
-            path: path,
-            component: component
-        });
-    }
-    static createRedirect(path, redirectTo, pathMatch = 'prefix') {
-        return new RouteBuilder({
-            path: path,
-            redirectTo: redirectTo,
-            pathMatch: pathMatch
-        });
-    }
-    static createLazyRouteModule(path, loadChildren, canMatch) {
-        const route = { path: path, loadChildren: loadChildren };
-        if (canMatch?.length) {
-            route.canMatch = canMatch;
-        }
-        return new RouteBuilder(route);
-    }
-    static createLazyRouteComponent(path, loadComponent, canMatch) {
-        const route = { path: path, loadComponent: loadComponent };
-        if (canMatch?.length) {
-            route.canMatch = canMatch;
-        }
-        return new RouteBuilder(route);
-    }
-    static createFromRoute(route) {
-        return new RouteBuilder(route);
-    }
+    /**
+     * Sets the link to root Routes builder.
+     *
+     * @param {RoutesBuilder} routesBuilder - The routes builder to set as the root.
+     */
     withRoot(routesBuilder) {
         this.root = routesBuilder;
         return this;
     }
+    /**
+     * Sets the link to parent Route builder.
+     *
+     * @param {RouteBuilder} parent - The parent route builder.
+     */
     withParent(parent) {
         this.parent = parent;
         this.routePath = removeRouteEmptyPathSegments([...this.parent.routePath, this.route.path ?? '']);
         return this;
     }
+    /**
+     * Sets the breadcrumb.
+     *
+     * @param {BreadcrumbType} breadcrumb - Breadcrumb configuration.
+     */
     withBreadcrumb(breadcrumb) {
-        this.breadcrumb = breadcrumb;
         this.routeData.breadcrumb = breadcrumb;
         return this;
     }
+    /**
+     * Sets the page title for the current route.
+     *
+     * @param {string} pageTitle - The title of the page.
+     */
     withPageTitle(pageTitle) {
-        this.pageTitle = pageTitle;
         this.routeData.pageTitle = pageTitle;
         return this;
     }
-    withRedirectTo(redirectTo) {
-        this.route.redirectTo = redirectTo;
-        return this;
-    }
-    withPathMatch(pathMatch) {
-        this.route.pathMatch = pathMatch;
-        return this;
-    }
+    /**
+     * Sets the page title and the breadcrumb.
+     *
+     * @param {string} title - The title of the page and breadcrumb.
+     */
     withTitle(title) {
         this.withPageTitle(title);
         this.withBreadcrumb(title);
         return this;
     }
-    withCanActivate(diToken) {
+    /**
+     * Adds a can activate guard to route.
+     *
+     * @param {CanActivateFn} fn - The CanActivate function to be added.
+     */
+    withCanActivate(fn) {
         if (!this.route.canActivate) {
             this.route.canActivate = [];
         }
-        this.route.canActivate.push(diToken);
+        this.route.canActivate.push(fn);
         return this;
     }
-    withCanDeactivate(diToken) {
+    /**
+     * Adds a can deactivate guard to route.
+     *
+     * @param {CanDeactivateFn} fn - The CanActivate function to be added.
+     */
+    withCanDeactivate(fn) {
         if (!this.route.canDeactivate) {
             this.route.canDeactivate = [];
         }
-        this.route.canDeactivate.push(diToken);
+        this.route.canDeactivate.push(fn);
         return this;
     }
-    withResolver(diToken, name) {
+    /**
+     * Adds a resolver to route.
+     *
+     * @param {string} name - Name of the resolver.
+     * @param {CanDeactivateFn} fn - The CanActivate function to be added.
+     */
+    withResolver(name, fn) {
         if (!this.route.resolve) {
             this.route.resolve = {};
         }
-        this.route.resolve[name] = diToken;
+        this.route.resolve[name] = fn;
         return this;
     }
+    /**
+     * Adds a provider to the route.
+     *
+     * @param {Provider | EnvironmentProviders} provider - The provider to add.
+     */
     withProvider(provider) {
         if (!this.route.providers) {
             this.route.providers = [];
@@ -3016,19 +2966,49 @@ class RouteBuilder {
         this.route.providers.push(provider);
         return this;
     }
-    withData(data) {
-        if (!data.breadcrumb) {
-            data.breadcrumb = null;
-        }
-        this.routeData = data;
+    /**
+     * Sets the data for the route.
+     *
+     * @param {CommonsRouteData} data - The data to set for the route.
+     * @param {boolean} [merge=true] - If the data should be merged with current data setup (true by default) - page title and breadcrumb config are carried over.
+     */
+    withData(data, merge = true) {
+        this.routeData = merge
+            ? {
+                ...this.routeData,
+                ...data
+            }
+            : {
+                breadcrumb: null,
+                ...data
+            };
         return this;
     }
-    withCommonsMenuItem(menuItem) {
-        this.menuItem = menuItem;
+    /**
+     * Updates the menu item of route. Merging with current configuration (set with {withMenuItem}) takes place.
+     *
+     * @param {CommonsMenuItem} opts - The opts properties to be merged on existing menu item for route.
+     */
+    withMenuItemOpts(opts) {
+        if (!this.menuItem) {
+            this.menuItem = {};
+        }
+        this.menuItem = {
+            ...this.menuItem,
+            ...opts
+        };
         return this;
     }
+    /**
+     * Sets the menu item (basic). For more options, see the {withMenuItemFromOpts}.
+     *
+     * @param {string} [icon] - The icon for the menu item.
+     * @param {string} [label] - The label for the menu item.
+     * @param {Array<string>} [routerLink] - The router link for the menu item.
+     * @param {boolean} [breadcrumb=false] - Indicates whether to display breadcrumb for the menu item.
+     */
     withMenuItem(icon, label, routerLink, breadcrumb = false) {
-        this.menuItem = this.createMenuItem(icon, label, routerLink);
+        this.menuItem = createMenuItem(icon, label, routerLink);
         if (breadcrumb && label) {
             this.withBreadcrumb({
                 label: label
@@ -3037,35 +3017,40 @@ class RouteBuilder {
         return this;
     }
     /**
-     * Adds menu item child to this instance of menu item.
-     * @param label Label.
-     * @param icon Icon.
-     * @param routerLink Router link.
-     * @param afterRouteChildren If false, menu item child will be appended before route children menu items, at the end otherwise.
+     * Adds menu item child to route's menu item. If no menu item is present, children will be appended directly to parent/root menu item.
+     *
+     * @param {string} [icon] - The icon for the menu item.
+     * @param {string} [label] - The label for the menu item.
+     * @param {Array<string>} [routerLink] - The router link for the menu item.
+     * @param {boolean} [afterRouteChildren=false] If false, menu item child will be appended before route's children menu items, at the end otherwise.
      */
-    withMenuItemChild(label, icon, routerLink, afterRouteChildren = false) {
+    withMenuItemChild(icon, label, routerLink, afterRouteChildren = false) {
         if (afterRouteChildren) {
-            this.menuItemChildrenAfter.push(this.createMenuItem(icon, label, routerLink));
+            this.menuItemChildrenAfter.push(createMenuItem(icon, label, routerLink));
         }
         else {
-            this.menuItemChildren.push(this.createMenuItem(icon, label, routerLink));
+            this.menuItemChildren.push(createMenuItem(icon, label, routerLink));
         }
         return this;
     }
     /**
-     * Adds menu item child to this instance of menu item.
-     * @param menuItem Configuration object for menu item.
-     * @param afterRouteChildren If false, menu item child will be appended before route children menu items, at the end otherwise.
+     * Adds menu item child from opts to route's menu item. If no menu item is present, children will be appended directly to parent/root menu item.
+     *
+     * @param {CommonsMenuItem} opts - The opts properties to be merged on existing menu item for route.
+     * @param {boolean} [afterRouteChildren=false] If false, menu item child will be appended before route's children menu items, at the end otherwise.
      */
-    withCommonsMenuItemChild(menuItem, afterRouteChildren = false) {
+    withMenuItemChildFromOpts(opts, afterRouteChildren = false) {
         if (afterRouteChildren) {
-            this.menuItemChildrenAfter.push(menuItem);
+            this.menuItemChildrenAfter.push(opts);
         }
         else {
-            this.menuItemChildren.push(menuItem);
+            this.menuItemChildren.push(opts);
         }
         return this;
     }
+    /**
+     * Sets the menu item's children to be generated lazily from route's lazy loaded routes after the chunk is loaded to runtime.
+     */
     withMenuItemLazyChildren() {
         if (!this.menuItem) {
             this.menuItem = {};
@@ -3073,16 +3058,34 @@ class RouteBuilder {
         this.menuItem.lazyChildren = true;
         return this;
     }
+    /**
+     * Sets the permissions on the route.
+     *
+     * @param {APermissions} permissions - The permissions to be set on the route.
+     */
     withPermissions(permissions) {
         this.permissions = permissions;
         this.withCanActivate(permissionGuard);
         return this;
     }
+    /**
+     * Adds a child route to the current route.
+     *
+     * @param {string} path - The path of the child route.
+     * @param {Type<any>} component - The component associated with the child route.
+     * @param {RouteBuilderAdjustFnType} [adjustFn] - An optional function to adjust the child route builder.
+     */
     addChild(path, component, adjustFn) {
-        const childRouteBuilder = RouteBuilder.create(path, component);
+        const childRouteBuilder = createRoute(path, component);
         adjustFn?.(childRouteBuilder);
         return this.addChildBuilder(childRouteBuilder);
     }
+    /**
+     * Adds a child builder to the current route.
+     *
+     * @param {RouteBuilder} builder - The child builder to be added.
+     * @return {this} - The current builder with the added child builder.
+     */
     addChildBuilder(builder) {
         builder.withParent(this);
         if (this.root) {
@@ -3091,6 +3094,11 @@ class RouteBuilder {
         this.children.push(builder);
         return this;
     }
+    /**
+     * Builds an Angular route based on configurations.
+     *
+     * @returns {Route} The built Angular route.
+     */
     build() {
         const angularRoute = {
             ...this.route
@@ -3141,6 +3149,11 @@ class RouteBuilder {
         }
         return angularRoute;
     }
+    /**
+     * Builds the menu items.
+     *
+     * @returns {Array<CommonsMenuItem>} - The built menu items.
+     */
     buildMenu() {
         const menuItemBuild = this.menuItem ? { ...this.menuItem } : null;
         const routeChildrenMenuItems = this.children.flatMap(child => child.buildMenu());
@@ -3168,7 +3181,7 @@ class RouteBuilder {
         if (!menuItemBuild) {
             return menuItemChildrenBuild;
         }
-        menuItemBuild.label = menuItemBuild.label ?? this.pageTitle;
+        menuItemBuild.label = menuItemBuild.label ?? this.routeData.pageTitle;
         if (typeof menuItemBuild.routerLink === 'string') {
             menuItemBuild.routerLink = [menuItemBuild.routerLink];
         }
@@ -3187,19 +3200,6 @@ class RouteBuilder {
         }
         return [menuItemBuild];
     }
-    createMenuItem(icon, label, routerLink) {
-        const menuItem = {};
-        if (icon) {
-            menuItem.icon = icon;
-        }
-        if (label) {
-            menuItem.label = label;
-        }
-        if (routerLink) {
-            menuItem.routerLink = routerLink;
-        }
-        return menuItem;
-    }
     findMenuItemGuards() {
         const guards = [];
         if (this.route.canActivate?.length) {
@@ -3231,59 +3231,128 @@ class RouteBuilder {
         return undefined;
     }
 }
-
-class RoutesBuilder {
-    constructor(layoutRoute) {
-        this.routes = [];
-        this.layoutRoute = layoutRoute?.withRoot(this);
-        this.currentRoute = layoutRoute;
+function createMenuItem(icon, label, routerLink) {
+    const menuItem = {};
+    if (icon) {
+        menuItem.icon = icon;
     }
-    static create() {
-        return new RoutesBuilder();
+    if (label) {
+        menuItem.label = label;
     }
-    addAngularRoute(route, builderAdjustFn) {
-        const builder = RouteBuilder.createFromRoute(route);
-        builderAdjustFn?.(builder);
-        return this.addRouteBuilder(builder);
+    if (routerLink) {
+        menuItem.routerLink = routerLink;
+    }
+    return menuItem;
+}
+/**
+ * Creates a new instance of RouteBuilder with the given path and component.
+ *
+ * @param {string} path - The path for the route.
+ * @param {Type<any>} component - The component for the route.
+ * @return {RouteBuilder} - A new instance of RouteBuilder.
+ */
+function createRoute(path, component) {
+    return new RouteBuilder({
+        path: path,
+        component: component
+    });
+}
+/**
+ * Creates a redirect route for the given path.
+ *
+ * @param {string} path - The path to match against.
+ * @param {string} redirectTo - The URL path to redirect to.
+ * @param {'full' | 'prefix'} [pathMatch='prefix'] - The path matching strategy ('full' or 'prefix').
+ * @return {RouteBuilder} - A new instance of the RouteBuilder class with the redirect route configuration.
+ */
+function createRouteRedirect(path, redirectTo, pathMatch = 'prefix') {
+    return new RouteBuilder({
+        path: path,
+        redirectTo: redirectTo,
+        pathMatch: pathMatch
+    });
+}
+/**
+ * Creates a lazy route module (or routes).
+ *
+ * @param {string} path - The path for the route.
+ * @param {LoadChildren} loadChildren - The function that loads the lazy module (or routes).
+ * @param {Array<any>} [canMatch] - An optional array of objects that can match the route.
+ * @returns {RouteBuilder} - A new instance of RouteBuilder class.
+ */
+function createLazyChildrenRoute(path, loadChildren, canMatch) {
+    const route = { path: path, loadChildren: loadChildren };
+    if (canMatch?.length) {
+        route.canMatch = canMatch;
     }
-    addRouteRedirect(path, redirectTo, pathMatch = 'prefix') {
-        return this.addRouteBuilder(RouteBuilder.createRedirect(path, redirectTo, pathMatch));
+    return new RouteBuilder(route);
+}
+/**
+ * Creates a lazy route component.
+ *
+ * @param {string} path - The path for the route.
+ * @param {() => Type<unknown> | Observable<Type<unknown> | DefaultExport<Type<unknown>>> | Promise<Type<unknown> | DefaultExport<Type<unknown>>>} loadComponent - The function that loads the component for the route.
+ * @param {Array<any>} [canMatch] - The array of values that determine if the route can match.
+ * @returns {RouteBuilder} - An instance of RouteBuilder with the created route.
+ */
+function createLazyRoute(path, loadComponent, canMatch) {
+    const route = { path: path, loadComponent: loadComponent };
+    if (canMatch?.length) {
+        route.canMatch = canMatch;
     }
-    addLazyRouteComponent(path, loadComponent, canMatch, builderAdjustFn) {
-        const builder = RouteBuilder.createLazyRouteComponent(path, loadComponent, canMatch);
-        builderAdjustFn?.(builder);
-        return this.addRouteBuilder(builder);
+    return new RouteBuilder(route);
+}
+
+class RoutesBuilder {
+    constructor() {
+        this.routes = [];
     }
-    addLazyRouteModule(path, loadChildren, canMatch, builderAdjustFn) {
-        const builder = RouteBuilder.createLazyRouteModule(path, loadChildren, canMatch);
+    /**
+     * Adds an Angular route to the current route configuration.
+     *
+     * @param {Route} route - The Angular route object to be added.
+     * @param {RouteBuilderAdjustFnType} [builderAdjustFn] - Optional function to adjust the route builder before adding.
+     */
+    addFromNgRoute(route, builderAdjustFn) {
+        const builder = new RouteBuilder(route);
         builderAdjustFn?.(builder);
-        return this.addRouteBuilder(builder);
+        return this.add(builder);
     }
-    addRoute(path, component, builderAdjustFn) {
-        const builder = RouteBuilder.create(path, component);
-        builderAdjustFn?.(builder);
-        return this.addRouteBuilder(builder);
+    /**
+     * Adds a route redirect to the Angular route.
+     *
+     * @param {string} path - The path for the redirect.
+     * @param {string} redirectTo - The target route to redirect.
+     * @param {'full' | 'prefix'} pathMatch - The matching strategy for the redirect. Default is 'prefix'.
+     */
+    addRedirect(path, redirectTo, pathMatch = 'prefix') {
+        return this.addFromNgRoute({
+            path: path,
+            redirectTo: redirectTo,
+            pathMatch: pathMatch
+        });
     }
-    addRouteBuilder(routeBuilder) {
-        this.currentRoute = routeBuilder.withRoot(this);
+    /**
+     * Adds a route to the routes.
+     *
+     * @param {RouteBuilder} routeBuilder - The route builder object representing the route to be added.
+     */
+    add(routeBuilder) {
         this.routes.push(routeBuilder);
         return this;
     }
     build() {
-        let angularRoutes = [];
-        for (const route of this.routes) {
-            angularRoutes.push(route.build());
-        }
-        if (this.layoutRoute) {
-            const layoutAngularRoute = this.layoutRoute.build();
-            if (angularRoutes.length > 0) {
-                layoutAngularRoute.children = angularRoutes;
-            }
-            angularRoutes = [layoutAngularRoute];
-        }
-        return angularRoutes;
+        return this.routes.map(r => r.build());
     }
 }
+/**
+ * Creates a new instance of the RoutesBuilder class.
+ *
+ * @return {RoutesBuilder} A new instance of the RoutesBuilder class.
+ */
+function createRoutes() {
+    return new RoutesBuilder();
+}
 
 /**
  * Maps an Observable of data with optional totalCount and data to a data list result object with provided defaults of empty array and count 0.
@@ -3483,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);
             }
@@ -3512,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 = [];
@@ -3648,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.2", ngImport: i0, type: CommonsRouterService, deps: [{ token: i1$1.Router }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: CommonsRouterService }); }
+    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.2", ngImport: i0, type: CommonsRouterService, decorators: [{
+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) {
@@ -3738,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);
@@ -3747,10 +3817,10 @@ class CommonsInitService {
             return throwError(() => err);
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: CommonsInitService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: CommonsInitService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CommonsInitService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CommonsInitService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: CommonsInitService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: CommonsInitService, decorators: [{
             type: Injectable
         }] });
 
@@ -3774,10 +3844,10 @@ class LocalStorageService {
     removeItem(type, key) {
         localStorage.removeItem(this.buildLocalStorageKey(type, key));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: LocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: LocalStorageService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: LocalStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: LocalStorageService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.2", ngImport: i0, type: LocalStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.4", ngImport: i0, type: LocalStorageService, decorators: [{
             type: Injectable
         }] });
 
@@ -3878,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, 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