@open-rlb/ng-app 3.1.85 → 3.1.86

package/fesm2022/open-rlb-ng-app.mjs

@@ -1,32 +1,30 @@
 import * as i1$2 from '@angular/common/http';
 import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
 import * as i0 from '@angular/core';
-import { InjectionToken, Injectable, Inject, Optional, inject, EventEmitter, importProvidersFrom, makeStateKey, makeEnvironmentProviders, Pipe, Input, Component, input, output, viewChild, TemplateRef, ViewContainerRef, effect, Directive, PLATFORM_ID, NgModule, model, isDevMode, provideAppInitializer } from '@angular/core';
-import * as i2 from '@angular/router';
-import { NavigationEnd, Router, RoutesRecognized, RouterModule, provideRouter } from '@angular/router';
-import * as i1$4 from '@angular/service-worker';
-import { provideServiceWorker } from '@angular/service-worker';
+import { InjectionToken, Injectable, Inject, Optional, inject, Injector, computed, signal, importProvidersFrom, makeStateKey, makeEnvironmentProviders, input, model, ChangeDetectionStrategy, Component, Pipe, output, viewChild, TemplateRef, ViewContainerRef, effect, Directive, PLATFORM_ID, NgModule, isDevMode, provideAppInitializer } from '@angular/core';
+import * as i5 from '@angular/router';
+import { ActivatedRoute, Router, NavigationEnd, RouterModule, RoutesRecognized, provideRouter } from '@angular/router';
+import { SwUpdate, provideServiceWorker } from '@angular/service-worker';
 import * as i1$8 from '@ngrx/effects';
 import { createEffect, ofType, provideEffects } from '@ngrx/effects';
 import * as i1$1 from '@ngrx/store';
 import { createActionGroup, props, emptyProps, Store, createFeature, createReducer, on, provideStore, provideState } from '@ngrx/store';
-import * as i2$1 from '@open-rlb/ng-bootstrap';
-import { RLB_TRANSLATION_SERVICE, ToastService, RlbBootstrapModule, ModalDirective, ToastDirective, ModalRegistryOptions, ToastRegistryOptions, provideRlbBootstrap } from '@open-rlb/ng-bootstrap';
+import * as i1$3 from '@open-rlb/ng-bootstrap';
+import { UniqueIdService, RLB_TRANSLATION_SERVICE, ModalService, ModalDirective, TooltipDirective, BreadcrumbComponent, TabsComponent, TabComponent, TabContentComponent, TabPaneComponent, AccordionComponent, AccordionHeaderComponent, AccordionBodyComponent, AccordionItemComponent, ListComponent, ListItemComponent, InputComponent, SwitchComponent, ToastService, NavbarDropdownItemComponent, DropdownContainerComponent, CarouselComponent, CarouselSlideComponent, SelectComponent, OptionComponent, ButtonComponent, NavbarComponent, NavbarBrandDirective, NavbarFormComponent, NavbarItemsComponent, NavbarItemComponent, NavbarSeparatorComponent, SidebarComponent, SidebarItemComponent, OffcanvasComponent, OffcanvasHeaderComponent, OffcanvasBodyComponent, RlbFabComponent, InputGroupComponent, ToggleDirective, ModalContainerComponent, ToastContainerComponent, RlbBootstrapModule, ToastDirective, ModalRegistryOptions, ToastRegistryOptions, provideRlbBootstrap } from '@open-rlb/ng-bootstrap';
 import * as i1$5 from 'angular-auth-oidc-client';
 import { AbstractLoggerService, AuthModule, provideAuth, AuthInterceptor, AbstractSecurityStorage } from 'angular-auth-oidc-client';
 import * as i1 from 'ngx-cookie-service-ssr';
-import { of, from, map, catchError, tap, switchMap, filter, BehaviorSubject, share, lastValueFrom, zip, EMPTY, Observable, shareReplay, distinctUntilChanged, take } from 'rxjs';
+import { of, from, map, catchError, tap, switchMap, filter, take, share, lastValueFrom, zip, EMPTY, Observable, combineLatest, startWith, BehaviorSubject, distinctUntilChanged } from 'rxjs';
 import { signalStore, withState, withMethods, patchState } from '@ngrx/signals';
-import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
-import * as i1$3 from '@ngx-translate/core';
-import { TranslateModule } from '@ngx-translate/core';
+import { takeUntilDestroyed, toObservable, toSignal } from '@angular/core/rxjs-interop';
+import * as i1$4 from '@ngx-translate/core';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
 import { provideTranslateHttpLoader } from '@ngx-translate/http-loader';
 import * as i1$6 from '@angular/common';
-import { isPlatformServer, CommonModule } from '@angular/common';
-import * as i3 from '@angular/forms';
-import { FormGroup, FormControl, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i1$7 from '@angular/cdk/layout';
-import { Breakpoints } from '@angular/cdk/layout';
+import { CommonModule, Location, NgClass, NgTemplateOutlet, NgComponentOutlet, isPlatformServer } from '@angular/common';
+import * as i1$7 from '@angular/forms';
+import { FormGroup, FormControl, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { tap as tap$1, map as map$1, switchMap as switchMap$1 } from 'rxjs/operators';
 
 // export const RLB_CFG = 'rlb.options';
@@ -55,10 +53,10 @@ class TokenCookiesService {
     }
     clear() {
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TokenCookiesService, deps: [{ token: i1.SsrCookieService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TokenCookiesService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TokenCookiesService, deps: [{ token: i1.SsrCookieService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TokenCookiesService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TokenCookiesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TokenCookiesService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -90,10 +88,10 @@ class AppStorageService {
     clearSession() {
         sessionStorage.clear();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppStorageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppStorageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppStorageService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -116,10 +114,10 @@ class TokenSessionService {
     clear() {
         this.store.clearSession();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TokenSessionService, deps: [{ token: AppStorageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TokenSessionService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TokenSessionService, deps: [{ token: AppStorageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TokenSessionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TokenSessionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TokenSessionService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -142,10 +140,10 @@ class TokenStoreService {
     clear() {
         this.store.clearLocal();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TokenStoreService, deps: [{ token: AppStorageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TokenStoreService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TokenStoreService, deps: [{ token: AppStorageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TokenStoreService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TokenStoreService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TokenStoreService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -245,10 +243,10 @@ class AppLoggerService {
                 console.log(`%c${prefix}`, colors.log, ...messageArgs);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppLoggerService, deps: [{ token: RLB_CFG_ENV }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppLoggerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppLoggerService, deps: [{ token: RLB_CFG_ENV }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppLoggerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppLoggerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppLoggerService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
@@ -316,10 +314,10 @@ class AuthFeatureService {
     logout() {
         this.store.dispatch(AuthActions.logout());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AuthFeatureService, deps: [{ token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AuthFeatureService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AuthFeatureService, deps: [{ token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AuthFeatureService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AuthFeatureService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AuthFeatureService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -365,7 +363,7 @@ const initialNavbarState = {
     settingsVisible: false,
     appsVisible: false,
     separatorVisible: true,
-    actionsLayout: 'default',
+    actionsLayout: 'dropdown',
 };
 
 const SidebarActionsInternal = createActionGroup({
@@ -425,10 +423,10 @@ class AdminApiService {
         const url = `${endpoint.baseUrl}/${path}`;
         return this.httpClient.get(url).pipe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AdminApiService, deps: [{ token: i1$2.HttpClient }, { token: RLB_CFG, optional: true }, { token: RLB_CFG_ACL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AdminApiService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AdminApiService, deps: [{ token: i1$2.HttpClient }, { token: RLB_CFG, optional: true }, { token: RLB_CFG_ACL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AdminApiService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AdminApiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AdminApiService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: undefined, decorators: [{
@@ -487,10 +485,10 @@ const AclStore = signalStore({ providedIn: 'root' }, withState(initialAclState),
 })));
 
 class AbstractSupportService {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AbstractSupportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AbstractSupportService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AbstractSupportService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AbstractSupportService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AbstractSupportService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AbstractSupportService, decorators: [{
             type: Injectable
         }] });
 
@@ -509,81 +507,72 @@ const DEFAULT_ROUTES_CONFIG = [
 ];
 
 class AppsService {
-    constructor(store, activatedRoute, router, loggerService, confAuth, confAcl) {
-        this.store = store;
-        this.activatedRoute = activatedRoute;
-        this.router = router;
-        this.loggerService = loggerService;
-        this.confAuth = confAuth;
-        this.confAcl = confAcl;
-        this.aclStore = inject(AclStore); // Inject SignalStore here
-        this.logger = this.loggerService.for(this.constructor.name);
-        this.logger.log('AppsService initialized');
-        this.initAuthProviders(store, confAuth);
-        this.initRouterListener();
-    }
-    get currentDomain() {
-        return window.location.hostname;
-    }
-    get apps() {
-        const apps = this.store.selectSignal(state => state[appContextFeatureKey].apps)();
-        const resources = this.aclStore.resources();
-        const confAcl = this.confAcl;
-        return apps.filter(app => {
-            // Basic domain check
-            const isDomainAllowed = !app.domains || app.domains.includes(this.currentDomain);
-            if (!isDomainAllowed)
-                return false;
-            // If acl config doesnt exist return apps filtered by domain
-            if (!confAcl)
-                return true;
-            if (!resources && app.actions?.length)
-                return false; // If app has actions defined, but no resources in store, we assume it's ACL protected and not allowed
-            if (resources && !app.actions?.length)
-                return true; // If app has no actions defined, we assume it's not ACL protected and allow it
-            return resources?.some(userResource => {
-                // Matching by Business ID
-                // IMPORTANT: app.data must have key, name of this key is in confAcl
-                const appBusId = app.data?.[confAcl.businessIdKey];
-                const matchBusId = userResource.resourceBusinessId === appBusId;
-                if (!matchBusId)
+    constructor() {
+        this.store = inject((Store));
+        this.activatedRoute = inject(ActivatedRoute);
+        this.router = inject(Router);
+        this.loggerService = inject(AppLoggerService);
+        this.confAuth = inject(RLB_CFG_AUTH, { optional: true });
+        this.confAcl = inject(RLB_CFG_ACL, { optional: true });
+        this.aclStore = inject(AclStore);
+        this.injector = inject(Injector);
+        this.currentDomain = window.location.hostname;
+        this.apps = computed(() => {
+            const apps = this.store.selectSignal(state => state[appContextFeatureKey].apps)();
+            const resources = this.aclStore.resources();
+            const confAcl = this.confAcl;
+            return apps.filter((app) => {
+                const isDomainAllowed = !app.domains || app.domains.includes(this.currentDomain);
+                if (!isDomainAllowed)
                     return false;
-                // Matching by Resource ID
-                return userResource.resources.some(res => {
-                    const appResId = app.data?.[confAcl.resourceIdKey];
-                    const matchResId = res.resourceId === appResId;
-                    if (!matchResId)
+                if (!confAcl)
+                    return true;
+                if (!resources && app.actions?.length)
+                    return false;
+                if (resources && !app.actions?.length)
+                    return true;
+                return resources?.some(userResource => {
+                    const appBusId = app.data?.[confAcl.businessIdKey];
+                    const matchBusId = userResource.resourceBusinessId === appBusId;
+                    if (!matchBusId)
                         return false;
-                    return res.actions.some(action => app.actions?.includes(action));
+                    return userResource.resources.some(res => {
+                        const appResId = app.data?.[confAcl.resourceIdKey];
+                        const matchResId = res.resourceId === appResId;
+                        if (!matchResId)
+                            return false;
+                        return res.actions.some(action => app.actions?.includes(action));
+                    });
                 });
             });
-        });
-    }
-    get currentAppAclInfo() {
-        const app = this.currentApp;
-        if (!app || !app.data || !this.confAcl)
-            return null;
-        return {
-            busId: app.data[this.confAcl.businessIdKey],
-            resId: app.data[this.confAcl.resourceIdKey],
-        };
-    }
-    get currentApp() {
-        const app = this.store.selectSignal(state => state[appContextFeatureKey].currentApp)();
-        this.logger.log('Current app from store:', app);
-        return app;
+        }, ...(ngDevMode ? [{ debugName: "apps" }] : /* istanbul ignore next */ []));
+        this.currentApp = this.store.selectSignal((state) => state[appContextFeatureKey].currentApp);
+        this.currentAppId = computed(() => this.currentApp()?.id, ...(ngDevMode ? [{ debugName: "currentAppId" }] : /* istanbul ignore next */ []));
+        this.currentAppAclInfo = computed(() => {
+            const app = this.currentApp();
+            if (!app || !app.data || !this.confAcl)
+                return null;
+            return {
+                busId: app.data[this.confAcl.businessIdKey],
+                resId: app.data[this.confAcl.resourceIdKey],
+            };
+        }, ...(ngDevMode ? [{ debugName: "currentAppAclInfo" }] : /* istanbul ignore next */ []));
+        this.logger = this.loggerService.for(this.constructor.name);
+        this.logger.log('AppsService initialized');
+        this.initAuthProviders();
+        this.initRouterListener();
     }
     isAppSelected(appId) {
         return this.getStoredAppId() === appId;
     }
     checkPermissionInCurrentApp(action) {
-        const info = this.currentAppAclInfo;
+        const info = this.currentAppAclInfo();
         if (!info)
             return false;
         return this.aclStore.hasPermission(info.busId, info.resId, action);
     }
     selectApp(app, viewMode, url) {
-        const currentApp = this.currentApp;
+        const currentApp = this.currentApp();
         if (!app) {
             this.logger.warn('Deselecting app (null).');
             this.store.dispatch(AppContextActions.setCurrentApp({ app: null }));
@@ -596,7 +585,8 @@ class AppsService {
         this.logger.warn('Dispatching setCurrentApp with:', { app, mode: viewMode, url });
         this.store.dispatch(AppContextActions.setCurrentApp({ app, mode: viewMode, url }));
     }
-    initAuthProviders(store, confAuth) {
+    initAuthProviders() {
+        const confAuth = this.confAuth;
         const currentProviderInStore = this.store.selectSignal(state => state[authsFeatureKey].currentProvider)();
         if (currentProviderInStore) {
             this.logger.info(`Auth provider already set to '${currentProviderInStore}' by Initializer. AppsService initAuthProviders skipping init.`);
@@ -608,14 +598,14 @@ class AppsService {
         }
         if (confAuth?.providers && confAuth.providers.length === 1) {
             this.logger.info('Single auth provider detected:', confAuth.providers[0]);
-            store.dispatch(AuthActions.setCurrentProvider({ currentProvider: confAuth.providers[0].configId }));
+            this.store.dispatch(AuthActions.setCurrentProvider({ currentProvider: confAuth.providers[0].configId }));
             return;
         }
         this.logger.info('Multiple auth providers detected, checking by domain:', this.currentDomain);
         const authProvidersMatched = confAuth.providers.filter(provider => provider.domains?.includes(this.currentDomain));
         if (authProvidersMatched && authProvidersMatched.length === 1) {
             this.logger.info('Auth provider matched by domain:', authProvidersMatched[0]);
-            store.dispatch(AuthActions.setCurrentProvider({ currentProvider: authProvidersMatched[0].configId }));
+            this.store.dispatch(AuthActions.setCurrentProvider({ currentProvider: authProvidersMatched[0].configId }));
         }
         else if (authProvidersMatched && authProvidersMatched.length > 1) {
             this.logger.warn(`Multiple auth providers found for the current domain: ${this.currentDomain}. Please specify a single provider in the configuration.`);
@@ -632,37 +622,32 @@ class AppsService {
     // Core logic
     resolveRouteAndApps() {
         const route = this.findDeepestChild(this.activatedRoute);
-        // 1. Get abstract route template (LIKE ".../:id")
         const configPath = this.getConfigPath(route);
-        // 2. Get REAL url path (LIKE ".../abc-123")
         const actualPath = this.getActualPath(route);
         this.logger.info(`Resolving. ConfigPath: '${configPath}', ActualPath: '${actualPath}'`);
-        const appRoutes = this.apps?.map(app => ({
+        const appRoutes = this.apps()?.map((app) => ({
             type: app.type,
             routes: app.routes || [],
             viewMode: app.viewMode,
             enabled: app.enabled,
             core: app.core,
-        }));
+        })) || [];
         let appRoutesMatched = [];
         if (configPath && !this.isDefaultRoute(configPath)) {
-            appRoutesMatched =
-                appRoutes?.filter(app => app.routes?.some(r => r.includes(configPath))) ?? [];
+            appRoutesMatched = appRoutes.filter((app) => app.routes?.some(r => r.includes(configPath)));
         }
         this.logger.info('Matched appRoute:', appRoutesMatched);
-        return this.store
-            .select(state => state[appContextFeatureKey].apps)
-            .pipe(
-        // waiting for all "finalizeApp" dispatches
-        filter(apps => {
+        return toObservable(this.store.selectSignal(state => state[appContextFeatureKey].apps), 
+        // fix init load error
+        { injector: this.injector }).pipe(filter((apps) => {
             if (!apps || apps.length === 0)
                 return true;
-            const allFinalized = !apps.some(app => !app.id);
+            const allFinalized = !apps.some((app) => !app.id);
             if (!allFinalized) {
                 this.logger.info('Waiting for apps initialization (finalizeApp)...');
             }
             return allFinalized;
-        }), map(apps => {
+        }), take(1), map(apps => {
             if (appRoutesMatched.length > 0 || actualPath === '') {
                 return {
                     route,
@@ -735,7 +720,7 @@ class AppsService {
         // CASE 3: Standard logic to get app (Deep linking) ---
         // Here we go only if route not empty  !="" and not root !="/"
         const configPath = this.getConfigPath(route);
-        const matchedApps = domainApps.filter(app => {
+        const matchedApps = domainApps.filter((app) => {
             if (!configPath || configPath === '') {
                 return false;
             }
@@ -811,56 +796,51 @@ class AppsService {
         }
         return segments.join('/');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppsService, deps: [{ token: i1$1.Store }, { token: i2.ActivatedRoute }, { token: i2.Router }, { token: AppLoggerService }, { token: RLB_CFG_AUTH, optional: true }, { token: RLB_CFG_ACL, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$1.Store }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: AppLoggerService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [RLB_CFG_AUTH]
-                }, {
-                    type: Optional
-                }] }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [RLB_CFG_ACL]
-                }, {
-                    type: Optional
-                }] }] });
+        }], ctorParameters: () => [] });
 
 class LanguageService {
-    constructor(translateService, cookiesService, i18nOptions) {
-        this.translateService = translateService;
-        this.cookiesService = cookiesService;
-        this.i18nOptions = i18nOptions;
-        this.contentLanguageChanged$ = new EventEmitter();
+    constructor() {
+        this.translateService = inject(TranslateService);
+        this.cookiesService = inject(CookiesService);
+        this.i18nOptions = inject(RLB_CFG_I18N, { optional: true });
+        this._language = signal(this.translateService.currentLang || this.i18nOptions?.defaultLanguage || 'en', ...(ngDevMode ? [{ debugName: "_language" }] : /* istanbul ignore next */ []));
+        this._contentLanguage = signal(undefined, ...(ngDevMode ? [{ debugName: "_contentLanguage" }] : /* istanbul ignore next */ []));
+        this.language = this._language.asReadonly();
+        this.contentLanguage = this._contentLanguage.asReadonly();
+        this.languageChanged$ = this.translateService.onLangChange;
+        this.contentLanguageChanged = this._contentLanguage.asReadonly();
+        // Sync private signal with translate service changes
+        this.translateService.onLangChange
+            .pipe(takeUntilDestroyed())
+            .subscribe(e => this._language.set(e.lang));
         if (this.i18nOptions) {
-            translateService.addLangs(this.i18nOptions.availableLangs);
+            this.translateService.addLangs(this.i18nOptions.availableLangs);
             const languageUI = this.cookiesService.getCookie('ui-locale') || this.defaultLanguage || this.browserLanguage;
             const languageContent = this.cookiesService.getCookie('content-locale') || this.defaultLanguage;
-            translateService.use(languageUI);
-            this.contentLanguage = languageContent;
+            this.translateService.use(languageUI);
+            this.setContentLanguage(languageContent);
         }
     }
-    get language() {
-        return this.translateService.getCurrentLang() || this.i18nOptions.defaultLanguage;
+    get currentLanguage() {
+        return this.language();
     }
-    set language(value) {
+    setLanguage(value) {
         if (!value)
             return;
         this.cookiesService.setCookie('ui-locale', value);
         this.translateService.use(value);
     }
-    get contentLanguage() {
-        return this._contentLanguage;
-    }
-    set contentLanguage(value) {
+    setContentLanguage(value) {
         this.cookiesService.setCookie('content-locale', value || this.defaultLanguage);
-        this._contentLanguage = value;
-        this.contentLanguageChanged$.emit(value);
+        this._contentLanguage.set(value);
     }
     get languages() {
         return this.translateService.getLangs();
@@ -880,55 +860,52 @@ class LanguageService {
     translateAsync(key, interpolateParams) {
         return this.translateService.get(key, interpolateParams);
     }
-    get languageChanged$() {
-        return this.translateService.onLangChange;
-    }
     getLanguageName(l) {
-        switch (l) {
-            case 'it': return 'Italiano';
-            case 'en': return 'English';
-            case 'es': return 'Español';
-            case 'fr': return 'Francés';
-            case 'ja': return '日本語';
-            case 'de': return 'Deutsch';
-            default: return '';
-        }
+        const names = {
+            it: 'Italiano',
+            en: 'English',
+            es: 'Español',
+            fr: 'Francés',
+            ja: '日本語',
+            de: 'Deutsch',
+        };
+        return names[l] || '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: LanguageService, deps: [{ token: i1$3.TranslateService }, { token: CookiesService }, { token: RLB_CFG_I18N, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: LanguageService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LanguageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LanguageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: LanguageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LanguageService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$3.TranslateService }, { type: CookiesService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [RLB_CFG_I18N]
-                }, {
-                    type: Optional
-                }] }] });
+        }], ctorParameters: () => [] });
 
 class AppBreadcrumbService {
-    constructor(router, route, loggerService, languageService, idService) {
-        this.router = router;
-        this.route = route;
-        this.loggerService = loggerService;
-        this.languageService = languageService;
-        this.idService = idService;
-        this._breadcrumbs$ = new BehaviorSubject([]);
-        this.breadcrumbs$ = this._breadcrumbs$.asObservable();
+    constructor() {
+        this.router = inject(Router);
+        this.route = inject(ActivatedRoute);
+        this.loggerService = inject(AppLoggerService);
+        this.languageService = inject(LanguageService);
+        this.idService = inject(UniqueIdService);
+        this._breadcrumbs = signal([], ...(ngDevMode ? [{ debugName: "_breadcrumbs" }] : /* istanbul ignore next */ []));
+        this.breadcrumbs = this._breadcrumbs.asReadonly();
+        /**
+         * @deprecated Use `breadcrumbs` (signal-based) instead.
+         */
+        this.breadcrumbs$ = toObservable(this._breadcrumbs);
         this.logger = this.loggerService.for(this.constructor.name);
         this.logger.info('Service initialized');
         this.router.events
-            .pipe(filter((event) => event instanceof NavigationEnd))
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed())
             .subscribe(() => this.updateBreadcrumbs());
         this.languageService.languageChanged$
+            .pipe(takeUntilDestroyed())
             .subscribe(() => this.updateBreadcrumbs());
         // init construct
         this.updateBreadcrumbs();
     }
     updateBreadcrumbs() {
         const crumbs = this.buildBreadcrumbFromRoot(this.route);
-        this._breadcrumbs$.next(crumbs);
+        this._breadcrumbs.set(crumbs);
         this.logger.info('Breadcrumbs updated', crumbs);
     }
     buildBreadcrumbFromRoot(route) {
@@ -944,7 +921,7 @@ class AppBreadcrumbService {
                 breadcrumbs.push({
                     label: this.languageService.translate(label),
                     link: accumulatedLink || '/',
-                    id: `breadcrumb${this.idService.id}`
+                    id: `breadcrumb${this.idService.id}`,
                 });
                 this.logger.debug('Pushed breadcrumb', { label, link: accumulatedLink });
             }
@@ -954,13 +931,13 @@ class AppBreadcrumbService {
         }
         return breadcrumbs;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppBreadcrumbService, deps: [{ token: i2.Router }, { token: i2.ActivatedRoute }, { token: AppLoggerService }, { token: LanguageService }, { token: i2$1.UniqueIdService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppBreadcrumbService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppBreadcrumbService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppBreadcrumbService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppBreadcrumbService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppBreadcrumbService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i2.Router }, { type: i2.ActivatedRoute }, { type: AppLoggerService }, { type: LanguageService }, { type: i2$1.UniqueIdService }] });
+        }], ctorParameters: () => [] });
 
 class LocalCacheService {
     constructor(options) {
@@ -1021,10 +998,10 @@ class LocalCacheService {
             }
         }), share());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: LocalCacheService, deps: [{ token: RLB_CFG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: LocalCacheService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LocalCacheService, deps: [{ token: RLB_CFG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LocalCacheService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: LocalCacheService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LocalCacheService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1038,10 +1015,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
 
 class AbstractMdService {
     constructor() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AbstractMdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AbstractMdService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AbstractMdService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AbstractMdService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AbstractMdService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AbstractMdService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1106,10 +1083,10 @@ class StrapiService {
         }));
         return this.cache.getData(__r, `strapiPage/${lang}/${cid}`, this.cmsOptions.chacheDuration || 3600);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: StrapiService, deps: [{ token: i1$2.HttpClient }, { token: LocalCacheService }, { token: RLB_CFG_CMS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: StrapiService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StrapiService, deps: [{ token: i1$2.HttpClient }, { token: LocalCacheService }, { token: RLB_CFG_CMS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StrapiService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: StrapiService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: StrapiService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1189,15 +1166,15 @@ class ErrorManagementService {
             }));
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ErrorManagementService, deps: [{ token: i2$1.ModalService }, { token: i2$1.ToastService }, { token: LanguageService }, { token: RLB_CFG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ErrorManagementService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ErrorManagementService, deps: [{ token: i1$3.ModalService }, { token: i1$3.ToastService }, { token: LanguageService }, { token: RLB_CFG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ErrorManagementService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ErrorManagementService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ErrorManagementService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i2$1.ModalService }, { type: i2$1.ToastService }, { type: LanguageService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$3.ModalService }, { type: i1$3.ToastService }, { type: LanguageService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [RLB_CFG]
                 }, {
@@ -1212,13 +1189,13 @@ class RlbTranslateAdapterService {
     instant(key, params) {
         return this.translateService.instant(key, params);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: RlbTranslateAdapterService, deps: [{ token: i1$3.TranslateService }, { token: i2$1.UniqueIdService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: RlbTranslateAdapterService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RlbTranslateAdapterService, deps: [{ token: i1$4.TranslateService }, { token: i1$3.UniqueIdService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RlbTranslateAdapterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: RlbTranslateAdapterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RlbTranslateAdapterService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$3.TranslateService }, { type: i2$1.UniqueIdService }] });
+        }], ctorParameters: () => [{ type: i1$4.TranslateService }, { type: i1$3.UniqueIdService }] });
 
 function provideRlbI18n(i18n) {
     if (!i18n)
@@ -1302,10 +1279,10 @@ class CookiesService {
         }
         document.cookie = cookie;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CookiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CookiesService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CookiesService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CookiesService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CookiesService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CookiesService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1314,15 +1291,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
 
 class PwaUpdaterService {
     get newVersionAvailable$() {
-        return this._newVersionAvailable$.asObservable();
+        return toObservable(this._newVersionAvailable);
     }
-    constructor(updates, modalService, languageService) {
-        this.updates = updates;
-        this.modalService = modalService;
-        this.languageService = languageService;
-        this._newVersionAvailable$ = new EventEmitter();
+    constructor() {
+        this.updates = inject(SwUpdate);
+        this.modalService = inject(ModalService);
+        this.languageService = inject(LanguageService);
+        this._newVersionAvailable = signal(false, ...(ngDevMode ? [{ debugName: "_newVersionAvailable" }] : /* istanbul ignore next */ []));
+        this.newVersionAvailable = this._newVersionAvailable.asReadonly();
         this.updates.versionUpdates
-            .pipe(filter((evt) => (evt.type === 'VERSION_READY'))).subscribe(() => this._newVersionAvailable$.emit());
+            .pipe(filter((evt) => (evt.type === 'VERSION_READY')), takeUntilDestroyed()).subscribe(() => this._newVersionAvailable.set(true));
     }
     update() {
         this.updates.activateUpdate()
@@ -1336,18 +1314,17 @@ class PwaUpdaterService {
             .pipe(filter((evt) => {
             const result = evt.type === 'VERSION_READY';
             return result;
-        }), switchMap(() => this.modalService.openSimpleModal(this.languageService.translate('core.pwa.newVersionAvailable'), this.languageService.translate('core.pwa.updateMessage'), this.languageService.translate('core.pwa.updateNow'), this.languageService.translate('core.pwa.update'), this.languageService.translate('core.pwa.later'))), filter((res) => res?.reason === 'ok'), //si ferma se l'evento non è una action
-        map(() => this.updates.activateUpdate().then(() => location.reload())));
+        }), switchMap(() => this.modalService.openSimpleModal(this.languageService.translate('core.pwa.newVersionAvailable'), this.languageService.translate('core.pwa.updateMessage'), this.languageService.translate('core.pwa.updateNow'), this.languageService.translate('core.pwa.update'), this.languageService.translate('core.pwa.later'))), filter((res) => res?.reason === 'ok'), map(() => this.updates.activateUpdate().then(() => location.reload())));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PwaUpdaterService, deps: [{ token: i1$4.SwUpdate }, { token: i2$1.ModalService }, { token: LanguageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PwaUpdaterService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PwaUpdaterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PwaUpdaterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PwaUpdaterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PwaUpdaterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$4.SwUpdate }, { type: i2$1.ModalService }, { type: LanguageService }] });
+        }], ctorParameters: () => [] });
 
 class UtilsService {
     isNumber(evt) {
@@ -1488,10 +1465,10 @@ class UtilsService {
         }
         return '0.00';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: UtilsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UtilsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: UtilsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UtilsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1517,10 +1494,10 @@ class ParseJwtService {
         }
     }
     ;
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ParseJwtService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ParseJwtService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ParseJwtService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ParseJwtService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ParseJwtService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ParseJwtService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1630,15 +1607,15 @@ class AuthenticationService {
             }, 0);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AuthenticationService, deps: [{ token: i1$5.OidcSecurityService }, { token: CookiesService }, { token: i2.Router }, { token: ParseJwtService }, { token: i1$1.Store }, { token: AppLoggerService }, { token: AppStorageService }, { token: AdminApiService }, { token: RLB_CFG_ENV, optional: true }, { token: RLB_CFG_AUTH, optional: true }, { token: RLB_CFG, optional: true }, { token: RLB_AUTH_URL_HANDLER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AuthenticationService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AuthenticationService, deps: [{ token: i1$5.OidcSecurityService }, { token: CookiesService }, { token: i5.Router }, { token: ParseJwtService }, { token: i1$1.Store }, { token: AppLoggerService }, { token: AppStorageService }, { token: AdminApiService }, { token: RLB_CFG_ENV, optional: true }, { token: RLB_CFG_AUTH, optional: true }, { token: RLB_CFG, optional: true }, { token: RLB_AUTH_URL_HANDLER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AuthenticationService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AuthenticationService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AuthenticationService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1$5.OidcSecurityService }, { type: CookiesService }, { type: i2.Router }, { type: ParseJwtService }, { type: i1$1.Store }, { type: AppLoggerService }, { type: AppStorageService }, { type: AdminApiService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$5.OidcSecurityService }, { type: CookiesService }, { type: i5.Router }, { type: ParseJwtService }, { type: i1$1.Store }, { type: AppLoggerService }, { type: AppStorageService }, { type: AdminApiService }, { type: undefined, decorators: [{
                     type: Optional
                 }, {
                     type: Inject,
@@ -1680,10 +1657,10 @@ class TokenOauthInterceptor {
             return next.handle(request);
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TokenOauthInterceptor, deps: [{ token: AuthenticationService }, { token: RLB_CFG }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TokenOauthInterceptor }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TokenOauthInterceptor, deps: [{ token: AuthenticationService }, { token: RLB_CFG }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TokenOauthInterceptor }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TokenOauthInterceptor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TokenOauthInterceptor, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: AuthenticationService }, { type: undefined, decorators: [{
                     type: Inject,
@@ -1716,10 +1693,10 @@ class CompanyInterceptor {
         const clonedReq = req.clone({ params });
         return next.handle(clonedReq);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CompanyInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CompanyInterceptor }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CompanyInterceptor, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CompanyInterceptor }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CompanyInterceptor, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CompanyInterceptor, decorators: [{
             type: Injectable
         }] });
 
@@ -1765,143 +1742,297 @@ function provideRlbCodeBrowserOAuth(auth) {
     return makeEnvironmentProviders(providers);
 }
 
+class ErrorModalComponent {
+    constructor() {
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.valid = model(true, ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
+    }
+    onEnter() { }
+    ngOnInit() {
+        console.log(this.data());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: ErrorModalComponent, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valid: "validChange" }, hostDirectives: [{ directive: i1$3.ModalDirective, inputs: ["id", "id", "data-instance", "data-instance", "data-options", "data-options"] }], ngImport: i0, template: `
+    <div class="modal-header">
+      <h5 class="modal-title">{{ data().title }}</h5>
+      <button
+        type="button"
+        class="btn-close"
+        aria-label="Close"
+        data-modal-reason="close"
+      ></button>
+    </div>
+    <div class="modal-body">
+      <span>{{ data().content }}</span>
+    </div>
+    <div class="modal-footer">
+      <button
+        type="button"
+        class="btn btn-primary"
+        data-modal-reason="close"
+      >
+        {{ data().ok }}
+      </button>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ErrorModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div class="modal-header">
+      <h5 class="modal-title">{{ data().title }}</h5>
+      <button
+        type="button"
+        class="btn-close"
+        aria-label="Close"
+        data-modal-reason="close"
+      ></button>
+    </div>
+    <div class="modal-body">
+      <span>{{ data().content }}</span>
+    </div>
+    <div class="modal-footer">
+      <button
+        type="button"
+        class="btn btn-primary"
+        data-modal-reason="close"
+      >
+        {{ data().ok }}
+      </button>
+    </div>
+  `,
+                    hostDirectives: [
+                        {
+                            directive: ModalDirective,
+                            inputs: ['id', 'data-instance', 'data-options'],
+                        },
+                    ],
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], valid: [{ type: i0.Input, args: [{ isSignal: true, alias: "valid", required: false }] }, { type: i0.Output, args: ["validChange"] }] } });
+
+class ModalAppsComponent {
+    constructor() {
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.valid = model(true, ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
+        this.apps = [];
+    }
+    appSelected(app) {
+        this.result = app;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ModalAppsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ModalAppsComponent, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valid: "validChange" }, hostDirectives: [{ directive: i1$3.ModalDirective, inputs: ["id", "id", "data-instance", "data-instance", "data-options", "data-options"] }], ngImport: i0, template: `
+    <div class="modal-header">
+      <h5 class="modal-title">{{ data().title }}</h5>
+      <button
+        type="button"
+        class="btn-close"
+        aria-label="Close"
+        data-modal-reason="close"
+      ></button>
+    </div>
+    <div class="modal-body">
+      <ul class="row row-cols-4 list-unstyled list">
+        @for (app of data().content; track app) {
+          <li
+            class="col my-2"
+            [tooltip]="app.description | translate"
+          >
+            <a
+              class="d-block text-body-emphasis text-decoration-none"
+              (click)="appSelected(app)"
+              [class.disabled]="!app.enabled"
+              data-modal-reason="ok"
+            >
+              <div class="px-3 py-4 mb-2 bg-body-secondary text-center rounded">
+                <i [ngClass]="app.icon"></i>
+              </div>
+              <div class="name text-muted text-decoration-none text-center pt-1">
+                {{ app.name | translate }}
+              </div>
+            </a>
+          </li>
+        }
+      </ul>
+    </div>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "pipe", type: i1$4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ModalAppsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    imports: [TranslateModule, CommonModule, TooltipDirective],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div class="modal-header">
+      <h5 class="modal-title">{{ data().title }}</h5>
+      <button
+        type="button"
+        class="btn-close"
+        aria-label="Close"
+        data-modal-reason="close"
+      ></button>
+    </div>
+    <div class="modal-body">
+      <ul class="row row-cols-4 list-unstyled list">
+        @for (app of data().content; track app) {
+          <li
+            class="col my-2"
+            [tooltip]="app.description | translate"
+          >
+            <a
+              class="d-block text-body-emphasis text-decoration-none"
+              (click)="appSelected(app)"
+              [class.disabled]="!app.enabled"
+              data-modal-reason="ok"
+            >
+              <div class="px-3 py-4 mb-2 bg-body-secondary text-center rounded">
+                <i [ngClass]="app.icon"></i>
+              </div>
+              <div class="name text-muted text-decoration-none text-center pt-1">
+                {{ app.name | translate }}
+              </div>
+            </a>
+          </li>
+        }
+      </ul>
+    </div>
+  `,
+                    hostDirectives: [{ directive: ModalDirective, inputs: ['id', 'data-instance', 'data-options'] }],
+                }]
+        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], valid: [{ type: i0.Input, args: [{ isSignal: true, alias: "valid", required: false }] }, { type: i0.Output, args: ["validChange"] }] } });
+
 class CmsPipe {
-    constructor(cmsOptions) {
-        this.cmsOptions = cmsOptions;
+    constructor() {
+        this.cmsOptions = inject(RLB_CFG_CMS, { optional: true });
     }
     transform(value, ...args) {
-        let cms = this.cmsOptions.endpoint;
+        let cms = this.cmsOptions?.endpoint;
         if (!cms) {
             return value;
         }
-        if (cms.endsWith("/")) {
+        if (cms.endsWith('/')) {
             cms = cms.substring(0, cms.length - 1);
         }
-        if (value.startsWith("/")) {
+        if (value.startsWith('/')) {
             value = value.substring(1);
         }
         return `${cms}/${value}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmsPipe, deps: [{ token: RLB_CFG_CMS, optional: true }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: CmsPipe, isStandalone: false, name: "cms" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: CmsPipe, isStandalone: true, name: "cms" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmsPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'cms',
-                    standalone: false
                 }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [RLB_CFG_CMS]
-                }, {
-                    type: Optional
-                }] }] });
+        }] });
 
 class CmsComponent {
-    constructor(strapiService, languageService, cmsOptions, mdService) {
-        this.strapiService = strapiService;
-        this.languageService = languageService;
-        this.cmsOptions = cmsOptions;
-        this.mdService = mdService;
-    }
-    ngOnDestroy() {
-        this.subscriptionLang?.unsubscribe();
-        this.subscriptionPage?.unsubscribe();
-    }
-    ngOnInit() {
-        const lang = this.cmsOptions.useAppLanguage ? this.languageService.language : this.languageService.contentLanguage;
-        const page$ = this.strapiService.fetchPage(lang || this.languageService.defaultLanguage, this.contentId || '');
-        this.subscriptionLang = this.languageService.languageChanged$.pipe(switchMap(langEvent => {
-            if (langEvent.lang) {
-                return page$;
-            }
-            return EMPTY;
-        })).subscribe(p => this.page = p);
-        this.subscriptionPage = page$.subscribe(p => this.page = p);
+    constructor() {
+        this.strapiService = inject(StrapiService);
+        this.languageService = inject(LanguageService);
+        this.cmsOptions = inject(RLB_CFG_CMS, { optional: true });
+        this.mdService = inject(AbstractMdService, { optional: true });
+        this.contentId = input(...(ngDevMode ? [undefined, { debugName: "contentId" }] : /* istanbul ignore next */ []));
+        this.breadcrumbInput = input(undefined, { ...(ngDevMode ? { debugName: "breadcrumbInput" } : /* istanbul ignore next */ {}), alias: 'breadcrumb' });
+        this.breadcrumb = computed(() => this.breadcrumbInput() ?? [], ...(ngDevMode ? [{ debugName: "breadcrumb" }] : /* istanbul ignore next */ []));
+        this.page = toSignal(combineLatest([
+            this.languageService.languageChanged$.pipe(startWith({ lang: this.languageService.language() })),
+            toObservable(this.contentId),
+        ]).pipe(switchMap(([_, id]) => {
+            const lang = this.cmsOptions?.useAppLanguage
+                ? this.languageService.language()
+                : this.languageService.contentLanguage();
+            if (id === undefined)
+                return EMPTY;
+            return this.strapiService.fetchPage(lang || this.languageService.defaultLanguage, id);
+        })));
     }
     md(md) {
-        if (this.cmsOptions.markdown === 'ignore') {
+        if (this.cmsOptions?.markdown === 'ignore') {
             return md;
         }
         else {
             if (!this.mdService) {
                 throw new Error('No MdService provided');
             }
-            else if (this.cmsOptions.markdown === 'text') {
+            else if (this.cmsOptions?.markdown === 'text') {
                 return this.mdService.md2text(md);
             }
-            else if (this.cmsOptions.markdown === 'html') {
+            else if (this.cmsOptions?.markdown === 'html') {
                 return this.mdService.md2html(md);
             }
         }
         return md;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmsComponent, deps: [{ token: StrapiService }, { token: LanguageService }, { token: RLB_CFG_CMS, optional: true }, { token: AbstractMdService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: CmsComponent, isStandalone: false, selector: "rlb-cms-template", inputs: { contentId: "contentId", breadcrumb: "breadcrumb" }, ngImport: i0, template: "<div>\n  @if (page) {\n    <div class=\"container\">\n      @if (breadcrumb) {\n        <div class=\"row my-4\">\n          <div class=\"col-12\">\n            <rlb-breadcrumb [items]=\"breadcrumb\"></rlb-breadcrumb>\n          </div>\n        </div>\n      }\n      <div class=\"row my-4\">\n        <div class=\"col-12\">\n          <h1 class=\"text-center\">{{page.Title}}</h1>\n        </div>\n      </div>\n      @if (page.Content) {\n        <div class=\"row my-4\">\n          <div class=\"col-12\">\n            <div [innerHTML]=\"page.Content \"></div>\n          </div>\n        </div>\n      }\n      @if (page.page_tabs.length>0) {\n        <div class=\"row my-4\">\n          <div class=\"col-12\">\n            <rlb-tabs>\n              @for (tab of page.page_tabs; track tab.id; let i = $index) {\n                <rlb-tab [target]=\"'cms-tab-'+i\">\n                  {{tab.Title}}\n                </rlb-tab>\n              }\n            </rlb-tabs>\n            <rlb-tab-content>\n              @for (tab of page.page_tabs; track tab.id; let i = $index) {\n                <rlb-tab-pane [id]=\"'cms-tab-'+i\">\n                  <div class=\"container-fluid\">\n                    @if (tab.Content) {\n                      <div class=\"row my-4\">\n                        <div class=\"col-12\">\n                          <div [innerHTML]=\"tab.Content \"></div>\n                        </div>\n                      </div>\n                    }\n                    @for (step of tab.steps; track step.ContentId; let i = $index) {\n                      <div class=\"row my-4 mx-auto card-steps\"\n                        style=\"max-width: 350px; border-bottom: 1px solid rgb(192, 198, 204);\">\n                        <div class=\"col-8\">\n                          <div class=\"pb-2\">\n                            <div style=\"height: 54px; min-width: 54px; width: 54px; border: 5px solid rgb(192, 198, 204);\"\n                              class=\"round-counter\">\n                              <span class=\"red\">{{i+1}}</span>\n                            </div>\n                          </div>\n                          <div>\n                            <div [innerHTML]=\"step.Content \"></div>\n                          </div>\n                        </div>\n                        <div class=\"col-4 pb-2\">\n                          <img [src]=\"step.Picture.url|cms\">\n                        </div>\n                      </div>\n                    }\n                    @if (tab.faqs.length>0) {\n                      <div class=\"row my-4\">\n                        <div class=\"col-12\">\n                          <h2 class=\"py-3\">{{tab.FaqTitle}}</h2>\n                        </div>\n                      </div>\n                    }\n                    @if (tab.faqs.length>0 && tab.FaqContent) {\n                      <div class=\"row my-4\">\n                        <div class=\"col-12\">\n                          <div [innerHTML]=\"tab.FaqContent \"></div>\n                        </div>\n                      </div>\n                    }\n                    @if (tab.faqs.length>0) {\n                      <div class=\"row   my-4\">\n                        <div class=\"col-12\">\n                          <rlb-accordion>\n                            @for (faq of tab.faqs; track faq) {\n                              <div rlb-accordion-item [expanded]=\"true\">\n                                <rlb-accordion-header>\n                                  {{faq.Title}}\n                                </rlb-accordion-header>\n                                <div rlb-accordion-body>\n                                  <div [innerHTML]=\"faq.Content\"> </div>\n                                </div>\n                              </div>\n                            }\n                          </rlb-accordion>\n                        </div>\n                      </div>\n                    }\n                    <div class=\"row   my-4\">\n                      <div class=\"col-12\">\n                        <span>\n                          <a routerLink=\"/support\">\n                            <i class=\"bi bi-info-circle-fill\" style=\"margin-bottom: -6px;margin-right: 6px;\"></i>\n                            <span>{{'pages.support.infoPage' | translate}}</span>\n                          </a>\n                        </span>\n                      </div>\n                    </div>\n                    @if (page.topics.length>0) {\n                      <div class=\"row my-4\" style=\"padding: 4px\">\n                        @for (topic of page.topics; track topic.ContentId) {\n                          <div class=\"col-lg-6 col-md-12 col-sm-12 col-xs-12\">\n                            <a [routerLink]=\"'/informations/'+topic.page.ContentId\" style=\"color: inherit;text-decoration: none;\">\n                              <div class=\"card mb-4\" style=\"min-height: 230px;\">\n                                <img [src]=\"topic.Picture.url | cms\" class=\"card-img-top\"\n                                  style=\"height: 91px; margin: 16px -16px;\">\n                                  <div class=\"card-body\">\n                                    <h5 class=\"card-title\">{{topic.Title}}</h5>\n                                    <div class=\"card-text\" [innerHTML]=\"topic.Content \"></div>\n                                  </div>\n                                </div>\n                              </a>\n                            </div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  </rlb-tab-pane>\n                }\n              </rlb-tab-content>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n", styles: [""], dependencies: [{ kind: "component", type: i2$1.BreadcrumbComponent, selector: "rlb-breadcrumb", inputs: ["divider", "items", "cssClasses"] }, { kind: "component", type: i2$1.AccordionComponent, selector: "rlb-accordion", inputs: ["flush", "always-open", "id", "card-style"] }, { kind: "component", type: i2$1.AccordionItemComponent, selector: "div[rlb-accordion-item]", inputs: ["name", "expanded", "class", "style"], outputs: ["statusChange"] }, { kind: "component", type: i2$1.AccordionHeaderComponent, selector: "rlb-accordion-header" }, { kind: "component", type: i2$1.AccordionBodyComponent, selector: "div[rlb-accordion-body]" }, { kind: "component", type: i2$1.TabsComponent, selector: "rlb-tabs", inputs: ["horizontal-alignment", "view", "vertical", "fill", "id", "class"] }, { kind: "component", type: i2$1.TabComponent, selector: "rlb-tab", inputs: ["active", "disabled", "target", "class"] }, { kind: "component", type: i2$1.TabContentComponent, selector: "rlb-tab-content" }, { kind: "component", type: i2$1.TabPaneComponent, selector: "rlb-tab-pane", inputs: ["id", "active", "fade"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: CmsPipe, name: "cms" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: CmsComponent, isStandalone: true, selector: "rlb-cms-template", inputs: { contentId: { classPropertyName: "contentId", publicName: "contentId", isSignal: true, isRequired: false, transformFunction: null }, breadcrumbInput: { classPropertyName: "breadcrumbInput", publicName: "breadcrumb", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div>\n  @if (page(); as p) {\n    <div class=\"container\">\n      @if (breadcrumb()) {\n        <div class=\"row my-4\">\n          <div class=\"col-12\">\n            <rlb-breadcrumb [items]=\"breadcrumb()\"></rlb-breadcrumb>\n          </div>\n        </div>\n      }\n      <div class=\"row my-4\">\n        <div class=\"col-12\">\n          <h1 class=\"text-center\">{{p.Title}}</h1>\n        </div>\n      </div>\n      @if (p.Content) {\n        <div class=\"row my-4\">\n          <div class=\"col-12\">\n            <div [innerHTML]=\"p.Content \"></div>\n          </div>\n        </div>\n      }\n      @if (p.page_tabs.length>0) {\n        <div class=\"row my-4\">\n          <div class=\"col-12\">\n            <rlb-tabs>\n              @for (tab of p.page_tabs; track tab.id; let i = $index) {\n                <rlb-tab [target]=\"'cms-tab-'+i\">\n                  {{tab.Title}}\n                </rlb-tab>\n              }\n            </rlb-tabs>\n            <rlb-tab-content>\n              @for (tab of p.page_tabs; track tab.id; let i = $index) {\n                <rlb-tab-pane [id]=\"'cms-tab-'+i\">\n                  <div class=\"container-fluid\">\n                    @if (tab.Content) {\n                      <div class=\"row my-4\">\n                        <div class=\"col-12\">\n                          <div [innerHTML]=\"tab.Content \"></div>\n                        </div>\n                      </div>\n                    }\n                    @for (step of tab.steps; track step.ContentId; let i = $index) {\n                      <div class=\"row my-4 mx-auto card-steps\"\n                        style=\"max-width: 350px; border-bottom: 1px solid rgb(192, 198, 204);\">\n                        <div class=\"col-8\">\n                          <div class=\"pb-2\">\n                            <div style=\"height: 54px; min-width: 54px; width: 54px; border: 5px solid rgb(192, 198, 204);\"\n                              class=\"round-counter\">\n                              <span class=\"red\">{{i+1}}</span>\n                            </div>\n                          </div>\n                          <div>\n                            <div [innerHTML]=\"step.Content \"></div>\n                          </div>\n                        </div>\n                        <div class=\"col-4 pb-2\">\n                          <img [src]=\"step.Picture.url|cms\">\n                        </div>\n                      </div>\n                    }\n                    @if (tab.faqs.length>0) {\n                      <div class=\"row my-4\">\n                        <div class=\"col-12\">\n                          <h2 class=\"py-3\">{{tab.FaqTitle}}</h2>\n                        </div>\n                      </div>\n                    }\n                    @if (tab.faqs.length>0 && tab.FaqContent) {\n                      <div class=\"row my-4\">\n                        <div class=\"col-12\">\n                          <div [innerHTML]=\"tab.FaqContent \"></div>\n                        </div>\n                      </div>\n                    }\n                    @if (tab.faqs.length>0) {\n                      <div class=\"row   my-4\">\n                        <div class=\"col-12\">\n                          <rlb-accordion>\n                            @for (faq of tab.faqs; track faq) {\n                              <div rlb-accordion-item [expanded]=\"true\">\n                                <rlb-accordion-header>\n                                  {{faq.Title}}\n                                </rlb-accordion-header>\n                                <div rlb-accordion-body>\n                                  <div [innerHTML]=\"faq.Content\"> </div>\n                                </div>\n                              </div>\n                            }\n                          </rlb-accordion>\n                        </div>\n                      </div>\n                    }\n                    <div class=\"row   my-4\">\n                      <div class=\"col-12\">\n                        <span>\n                          <a routerLink=\"/support\">\n                            <i class=\"bi bi-info-circle-fill\" style=\"margin-bottom: -6px;margin-right: 6px;\"></i>\n                            <span>{{'pages.support.infoPage' | translate}}</span>\n                          </a>\n                        </span>\n                      </div>\n                    </div>\n                    @if (p.topics.length>0) {\n                      <div class=\"row my-4\" style=\"padding: 4px\">\n                        @for (topic of p.topics; track topic.ContentId) {\n                          <div class=\"col-lg-6 col-md-12 col-sm-12 col-xs-12\">\n                            <a [routerLink]=\"'/informations/'+topic.page.ContentId\" style=\"color: inherit;text-decoration: none;\">\n                              <div class=\"card mb-4\" style=\"min-height: 230px;\">\n                                <img [src]=\"topic.Picture.url | cms\" class=\"card-img-top\"\n                                  style=\"height: 91px; margin: 16px -16px;\">\n                                  <div class=\"card-body\">\n                                    <h5 class=\"card-title\">{{topic.Title}}</h5>\n                                    <div class=\"card-text\" [innerHTML]=\"topic.Content \"></div>\n                                  </div>\n                                </div>\n                              </a>\n                            </div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  </rlb-tab-pane>\n                }\n            </rlb-tab-content>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n", styles: [""], dependencies: [{ kind: "component", type: BreadcrumbComponent, selector: "rlb-breadcrumb", inputs: ["divider", "items", "cssClasses"] }, { kind: "component", type: TabsComponent, selector: "rlb-tabs", inputs: ["horizontal-alignment", "view", "vertical", "fill", "id", "class"] }, { kind: "component", type: TabComponent, selector: "rlb-tab", inputs: ["active", "disabled", "target", "class"] }, { kind: "component", type: TabContentComponent, selector: "rlb-tab-content" }, { kind: "component", type: TabPaneComponent, selector: "rlb-tab-pane", inputs: ["id", "active", "fade"] }, { kind: "component", type: AccordionComponent, selector: "rlb-accordion", inputs: ["flush", "always-open", "id", "card-style"] }, { kind: "component", type: AccordionHeaderComponent, selector: "rlb-accordion-header" }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: AccordionBodyComponent, selector: "div[rlb-accordion-body]" }, { kind: "component", type: AccordionItemComponent, selector: "div[rlb-accordion-item]", inputs: ["name", "expanded", "class", "style"], outputs: ["statusChange"] }, { kind: "pipe", type: i1$4.TranslatePipe, name: "translate" }, { kind: "pipe", type: CmsPipe, name: "cms" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-cms-template', standalone: false, template: "<div>\n  @if (page) {\n    <div class=\"container\">\n      @if (breadcrumb) {\n        <div class=\"row my-4\">\n          <div class=\"col-12\">\n            <rlb-breadcrumb [items]=\"breadcrumb\"></rlb-breadcrumb>\n          </div>\n        </div>\n      }\n      <div class=\"row my-4\">\n        <div class=\"col-12\">\n          <h1 class=\"text-center\">{{page.Title}}</h1>\n        </div>\n      </div>\n      @if (page.Content) {\n        <div class=\"row my-4\">\n          <div class=\"col-12\">\n            <div [innerHTML]=\"page.Content \"></div>\n          </div>\n        </div>\n      }\n      @if (page.page_tabs.length>0) {\n        <div class=\"row my-4\">\n          <div class=\"col-12\">\n            <rlb-tabs>\n              @for (tab of page.page_tabs; track tab.id; let i = $index) {\n                <rlb-tab [target]=\"'cms-tab-'+i\">\n                  {{tab.Title}}\n                </rlb-tab>\n              }\n            </rlb-tabs>\n            <rlb-tab-content>\n              @for (tab of page.page_tabs; track tab.id; let i = $index) {\n                <rlb-tab-pane [id]=\"'cms-tab-'+i\">\n                  <div class=\"container-fluid\">\n                    @if (tab.Content) {\n                      <div class=\"row my-4\">\n                        <div class=\"col-12\">\n                          <div [innerHTML]=\"tab.Content \"></div>\n                        </div>\n                      </div>\n                    }\n                    @for (step of tab.steps; track step.ContentId; let i = $index) {\n                      <div class=\"row my-4 mx-auto card-steps\"\n                        style=\"max-width: 350px; border-bottom: 1px solid rgb(192, 198, 204);\">\n                        <div class=\"col-8\">\n                          <div class=\"pb-2\">\n                            <div style=\"height: 54px; min-width: 54px; width: 54px; border: 5px solid rgb(192, 198, 204);\"\n                              class=\"round-counter\">\n                              <span class=\"red\">{{i+1}}</span>\n                            </div>\n                          </div>\n                          <div>\n                            <div [innerHTML]=\"step.Content \"></div>\n                          </div>\n                        </div>\n                        <div class=\"col-4 pb-2\">\n                          <img [src]=\"step.Picture.url|cms\">\n                        </div>\n                      </div>\n                    }\n                    @if (tab.faqs.length>0) {\n                      <div class=\"row my-4\">\n                        <div class=\"col-12\">\n                          <h2 class=\"py-3\">{{tab.FaqTitle}}</h2>\n                        </div>\n                      </div>\n                    }\n                    @if (tab.faqs.length>0 && tab.FaqContent) {\n                      <div class=\"row my-4\">\n                        <div class=\"col-12\">\n                          <div [innerHTML]=\"tab.FaqContent \"></div>\n                        </div>\n                      </div>\n                    }\n                    @if (tab.faqs.length>0) {\n                      <div class=\"row   my-4\">\n                        <div class=\"col-12\">\n                          <rlb-accordion>\n                            @for (faq of tab.faqs; track faq) {\n                              <div rlb-accordion-item [expanded]=\"true\">\n                                <rlb-accordion-header>\n                                  {{faq.Title}}\n                                </rlb-accordion-header>\n                                <div rlb-accordion-body>\n                                  <div [innerHTML]=\"faq.Content\"> </div>\n                                </div>\n                              </div>\n                            }\n                          </rlb-accordion>\n                        </div>\n                      </div>\n                    }\n                    <div class=\"row   my-4\">\n                      <div class=\"col-12\">\n                        <span>\n                          <a routerLink=\"/support\">\n                            <i class=\"bi bi-info-circle-fill\" style=\"margin-bottom: -6px;margin-right: 6px;\"></i>\n                            <span>{{'pages.support.infoPage' | translate}}</span>\n                          </a>\n                        </span>\n                      </div>\n                    </div>\n                    @if (page.topics.length>0) {\n                      <div class=\"row my-4\" style=\"padding: 4px\">\n                        @for (topic of page.topics; track topic.ContentId) {\n                          <div class=\"col-lg-6 col-md-12 col-sm-12 col-xs-12\">\n                            <a [routerLink]=\"'/informations/'+topic.page.ContentId\" style=\"color: inherit;text-decoration: none;\">\n                              <div class=\"card mb-4\" style=\"min-height: 230px;\">\n                                <img [src]=\"topic.Picture.url | cms\" class=\"card-img-top\"\n                                  style=\"height: 91px; margin: 16px -16px;\">\n                                  <div class=\"card-body\">\n                                    <h5 class=\"card-title\">{{topic.Title}}</h5>\n                                    <div class=\"card-text\" [innerHTML]=\"topic.Content \"></div>\n                                  </div>\n                                </div>\n                              </a>\n                            </div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  </rlb-tab-pane>\n                }\n              </rlb-tab-content>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n" }]
-        }], ctorParameters: () => [{ type: StrapiService }, { type: LanguageService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [RLB_CFG_CMS]
-                }, {
-                    type: Optional
-                }] }, { type: AbstractMdService, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { contentId: [{
-                type: Input
-            }], breadcrumb: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'rlb-cms-template', imports: [
+                        BreadcrumbComponent,
+                        TabsComponent,
+                        TabComponent,
+                        TabContentComponent,
+                        TabPaneComponent,
+                        AccordionComponent,
+                        AccordionHeaderComponent,
+                        RouterModule,
+                        TranslateModule,
+                        CmsPipe,
+                        AccordionBodyComponent,
+                        AccordionItemComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div>\n  @if (page(); as p) {\n    <div class=\"container\">\n      @if (breadcrumb()) {\n        <div class=\"row my-4\">\n          <div class=\"col-12\">\n            <rlb-breadcrumb [items]=\"breadcrumb()\"></rlb-breadcrumb>\n          </div>\n        </div>\n      }\n      <div class=\"row my-4\">\n        <div class=\"col-12\">\n          <h1 class=\"text-center\">{{p.Title}}</h1>\n        </div>\n      </div>\n      @if (p.Content) {\n        <div class=\"row my-4\">\n          <div class=\"col-12\">\n            <div [innerHTML]=\"p.Content \"></div>\n          </div>\n        </div>\n      }\n      @if (p.page_tabs.length>0) {\n        <div class=\"row my-4\">\n          <div class=\"col-12\">\n            <rlb-tabs>\n              @for (tab of p.page_tabs; track tab.id; let i = $index) {\n                <rlb-tab [target]=\"'cms-tab-'+i\">\n                  {{tab.Title}}\n                </rlb-tab>\n              }\n            </rlb-tabs>\n            <rlb-tab-content>\n              @for (tab of p.page_tabs; track tab.id; let i = $index) {\n                <rlb-tab-pane [id]=\"'cms-tab-'+i\">\n                  <div class=\"container-fluid\">\n                    @if (tab.Content) {\n                      <div class=\"row my-4\">\n                        <div class=\"col-12\">\n                          <div [innerHTML]=\"tab.Content \"></div>\n                        </div>\n                      </div>\n                    }\n                    @for (step of tab.steps; track step.ContentId; let i = $index) {\n                      <div class=\"row my-4 mx-auto card-steps\"\n                        style=\"max-width: 350px; border-bottom: 1px solid rgb(192, 198, 204);\">\n                        <div class=\"col-8\">\n                          <div class=\"pb-2\">\n                            <div style=\"height: 54px; min-width: 54px; width: 54px; border: 5px solid rgb(192, 198, 204);\"\n                              class=\"round-counter\">\n                              <span class=\"red\">{{i+1}}</span>\n                            </div>\n                          </div>\n                          <div>\n                            <div [innerHTML]=\"step.Content \"></div>\n                          </div>\n                        </div>\n                        <div class=\"col-4 pb-2\">\n                          <img [src]=\"step.Picture.url|cms\">\n                        </div>\n                      </div>\n                    }\n                    @if (tab.faqs.length>0) {\n                      <div class=\"row my-4\">\n                        <div class=\"col-12\">\n                          <h2 class=\"py-3\">{{tab.FaqTitle}}</h2>\n                        </div>\n                      </div>\n                    }\n                    @if (tab.faqs.length>0 && tab.FaqContent) {\n                      <div class=\"row my-4\">\n                        <div class=\"col-12\">\n                          <div [innerHTML]=\"tab.FaqContent \"></div>\n                        </div>\n                      </div>\n                    }\n                    @if (tab.faqs.length>0) {\n                      <div class=\"row   my-4\">\n                        <div class=\"col-12\">\n                          <rlb-accordion>\n                            @for (faq of tab.faqs; track faq) {\n                              <div rlb-accordion-item [expanded]=\"true\">\n                                <rlb-accordion-header>\n                                  {{faq.Title}}\n                                </rlb-accordion-header>\n                                <div rlb-accordion-body>\n                                  <div [innerHTML]=\"faq.Content\"> </div>\n                                </div>\n                              </div>\n                            }\n                          </rlb-accordion>\n                        </div>\n                      </div>\n                    }\n                    <div class=\"row   my-4\">\n                      <div class=\"col-12\">\n                        <span>\n                          <a routerLink=\"/support\">\n                            <i class=\"bi bi-info-circle-fill\" style=\"margin-bottom: -6px;margin-right: 6px;\"></i>\n                            <span>{{'pages.support.infoPage' | translate}}</span>\n                          </a>\n                        </span>\n                      </div>\n                    </div>\n                    @if (p.topics.length>0) {\n                      <div class=\"row my-4\" style=\"padding: 4px\">\n                        @for (topic of p.topics; track topic.ContentId) {\n                          <div class=\"col-lg-6 col-md-12 col-sm-12 col-xs-12\">\n                            <a [routerLink]=\"'/informations/'+topic.page.ContentId\" style=\"color: inherit;text-decoration: none;\">\n                              <div class=\"card mb-4\" style=\"min-height: 230px;\">\n                                <img [src]=\"topic.Picture.url | cms\" class=\"card-img-top\"\n                                  style=\"height: 91px; margin: 16px -16px;\">\n                                  <div class=\"card-body\">\n                                    <h5 class=\"card-title\">{{topic.Title}}</h5>\n                                    <div class=\"card-text\" [innerHTML]=\"topic.Content \"></div>\n                                  </div>\n                                </div>\n                              </a>\n                            </div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  </rlb-tab-pane>\n                }\n            </rlb-tab-content>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n" }]
+        }], propDecorators: { contentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "contentId", required: false }] }], breadcrumbInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumb", required: false }] }] } });
 
 class CmsContentComponent {
-    constructor(route) {
-        this.route = route;
-    }
-    get contentId() {
-        return this.route.snapshot.params['id'];
+    constructor() {
+        this.route = inject(ActivatedRoute);
+        this.contentId = toSignal(this.route.params.pipe(map(params => params['id'])), { initialValue: this.route.snapshot.params['id'] });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmsContentComponent, deps: [{ token: i2.ActivatedRoute }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: CmsContentComponent, isStandalone: false, selector: "rlb-cms-content", ngImport: i0, template: "<rlb-cms-template [contentId]=\"contentId\"></rlb-cms-template>", styles: [""], dependencies: [{ kind: "component", type: CmsComponent, selector: "rlb-cms-template", inputs: ["contentId", "breadcrumb"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmsContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: CmsContentComponent, isStandalone: true, selector: "rlb-cms-content", ngImport: i0, template: "<rlb-cms-template [contentId]=\"contentId()\"></rlb-cms-template>", styles: [""], dependencies: [{ kind: "component", type: CmsComponent, selector: "rlb-cms-template", inputs: ["contentId", "breadcrumb"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CmsContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CmsContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-cms-content', standalone: false, template: "<rlb-cms-template [contentId]=\"contentId\"></rlb-cms-template>" }]
-        }], ctorParameters: () => [{ type: i2.ActivatedRoute }] });
+            args: [{ selector: 'rlb-cms-content', imports: [CmsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<rlb-cms-template [contentId]=\"contentId()\"></rlb-cms-template>" }]
+        }] });
 
 class CookiesComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CookiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: CookiesComponent, isStandalone: false, selector: "rlb-cookies", ngImport: i0, template: "<rlb-cms-template contentId=\"adb_cookies\"></rlb-cms-template>", styles: [""], dependencies: [{ kind: "component", type: CmsComponent, selector: "rlb-cms-template", inputs: ["contentId", "breadcrumb"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CookiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: CookiesComponent, isStandalone: true, selector: "rlb-cookies", ngImport: i0, template: "<rlb-cms-template contentId=\"adb_cookies\"></rlb-cms-template>", styles: [""], dependencies: [{ kind: "component", type: CmsComponent, selector: "rlb-cms-template", inputs: ["contentId", "breadcrumb"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: CookiesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: CookiesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-cookies', standalone: false, template: "<rlb-cms-template contentId=\"adb_cookies\"></rlb-cms-template>" }]
+            args: [{ selector: 'rlb-cookies', imports: [CmsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<rlb-cms-template contentId=\"adb_cookies\"></rlb-cms-template>" }]
         }] });
 
 class NotFoundComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: NotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: NotFoundComponent, isStandalone: false, selector: "rlb-not-found", ngImport: i0, template: "<div class=\"container\" style=\"height:calc(100vh - 58px);\">\n  <div class=\"align-center\">\n    <div class=\"text-center\">\n      <h1 class=\"text-primary\">\n        {{ 'pages.notFound.title' | translate }}\n      </h1>\n      <p>{{ 'pages.notFound.content' | translate }}</p><a href=\"/\" class=\"btn btn-outline-primary\">\n        <span>\n          {{ 'pages.notFound.button' | translate }}\n        </span></a>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NotFoundComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: NotFoundComponent, isStandalone: true, selector: "rlb-not-found", ngImport: i0, template: "<div class=\"container\" style=\"height:calc(100vh - 58px);\">\n  <div class=\"align-center\">\n    <div class=\"text-center\">\n      <h1 class=\"text-primary\">\n        {{ 'pages.notFound.title' | translate }}\n      </h1>\n      <p>{{ 'pages.notFound.content' | translate }}</p><a href=\"/\" class=\"btn btn-outline-primary\">\n        <span>\n          {{ 'pages.notFound.button' | translate }}\n        </span></a>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: NotFoundComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: NotFoundComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-not-found', standalone: false, template: "<div class=\"container\" style=\"height:calc(100vh - 58px);\">\n  <div class=\"align-center\">\n    <div class=\"text-center\">\n      <h1 class=\"text-primary\">\n        {{ 'pages.notFound.title' | translate }}\n      </h1>\n      <p>{{ 'pages.notFound.content' | translate }}</p><a href=\"/\" class=\"btn btn-outline-primary\">\n        <span>\n          {{ 'pages.notFound.button' | translate }}\n        </span></a>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rlb-not-found', imports: [TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\" style=\"height:calc(100vh - 58px);\">\n  <div class=\"align-center\">\n    <div class=\"text-center\">\n      <h1 class=\"text-primary\">\n        {{ 'pages.notFound.title' | translate }}\n      </h1>\n      <p>{{ 'pages.notFound.content' | translate }}</p><a href=\"/\" class=\"btn btn-outline-primary\">\n        <span>\n          {{ 'pages.notFound.button' | translate }}\n        </span></a>\n    </div>\n  </div>\n</div>\n" }]
         }] });
 
 class PrivacyComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PrivacyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: PrivacyComponent, isStandalone: false, selector: "rlb-privacy", ngImport: i0, template: "<rlb-cms-template contentId=\"adb_privacy\"></rlb-cms-template>", styles: [""], dependencies: [{ kind: "component", type: CmsComponent, selector: "rlb-cms-template", inputs: ["contentId", "breadcrumb"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PrivacyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: PrivacyComponent, isStandalone: true, selector: "rlb-privacy", ngImport: i0, template: "<rlb-cms-template contentId=\"adb_privacy\"></rlb-cms-template>", styles: [""], dependencies: [{ kind: "component", type: CmsComponent, selector: "rlb-cms-template", inputs: ["contentId", "breadcrumb"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: PrivacyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: PrivacyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-privacy', standalone: false, template: "<rlb-cms-template contentId=\"adb_privacy\"></rlb-cms-template>" }]
+            args: [{ selector: 'rlb-privacy', imports: [CmsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<rlb-cms-template contentId=\"adb_privacy\"></rlb-cms-template>" }]
         }] });
 
 class SupportComponent {
-    constructor(supportService, _location) {
-        this.supportService = supportService;
-        this._location = _location;
+    constructor() {
+        this.supportService = inject(AbstractSupportService);
+        this._location = inject(Location);
         this.supportForm = new FormGroup({
             name: new FormControl('', [Validators.required]),
             email: new FormControl('', [Validators.required, Validators.email]),
@@ -1911,11 +2042,10 @@ class SupportComponent {
         });
     }
     hasError(form, controlName, errorName) {
-        switch (form) {
-            case 'supportForm':
-                return this.supportForm.controls[controlName].hasError(errorName);
-            default: return false;
+        if (form === 'supportForm') {
+            return this.supportForm.get(controlName)?.hasError(errorName);
         }
+        return false;
     }
     sendSupport(data) {
         if (this.supportForm.valid) {
@@ -1926,21 +2056,21 @@ class SupportComponent {
         this._location.back();
     }
     ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SupportComponent, deps: [{ token: AbstractSupportService }, { token: i1$6.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: SupportComponent, isStandalone: false, selector: "rlb-support", ngImport: i0, template: "<div class=\"container mt-2 mb-5\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'pages.support.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n      style=\"font-size: 25px;font-weight: 600;\" (click)=\"backClicked()\"></i>\n  </div>\n  <form [formGroup]=\"supportForm\" class=\"needs-validation\" (ngSubmit)=\"sendSupport(supportForm.value)\">\n    <rlb-list class=\"settings\">\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.name' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\" size=\"small\" formControlName=\"name\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.email' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\"  size=\"small\" formControlName=\"email\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.subject' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\"  size=\"small\" formControlName=\"subject\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.message' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\"  size=\"small\" formControlName=\"message\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.legal' | translate}}</h6>\n            <span>{{ 'pages.support.infoPage' | translate}}</span>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-switch size=\"small\" formControlName=\"legal\" />\n          </div>\n        </div>\n      </rlb-list-item>\n    </rlb-list>\n  </form>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "inputId", "extValidation", "enable-validation"] }, { kind: "component", type: i2$1.SwitchComponent, selector: "rlb-switch", inputs: ["disabled", "readonly", "size", "id"] }, { kind: "component", type: i2$1.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i2$1.ListItemComponent, selector: "rlb-list-item", inputs: ["active", "disabled", "action"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SupportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: SupportComponent, isStandalone: true, selector: "rlb-support", ngImport: i0, template: "<div class=\"container mt-2 mb-5\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'pages.support.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n      style=\"font-size: 25px;font-weight: 600;\" (click)=\"backClicked()\"></i>\n  </div>\n  <form [formGroup]=\"supportForm\" class=\"needs-validation\" (ngSubmit)=\"sendSupport(supportForm.value)\">\n    <rlb-list class=\"settings\">\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.name' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\" size=\"small\" formControlName=\"name\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.email' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\"  size=\"small\" formControlName=\"email\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.subject' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\"  size=\"small\" formControlName=\"subject\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.message' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\"  size=\"small\" formControlName=\"message\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.legal' | translate}}</h6>\n            <span>{{ 'pages.support.infoPage' | translate}}</span>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-switch size=\"small\" formControlName=\"legal\" />\n          </div>\n        </div>\n      </rlb-list-item>\n    </rlb-list>\n  </form>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$7.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$7.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$7.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: ListItemComponent, selector: "rlb-list-item", inputs: ["active", "disabled", "action"] }, { kind: "component", type: InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "inputId", "extValidation", "enable-validation"] }, { kind: "component", type: SwitchComponent, selector: "rlb-switch", inputs: ["disabled", "readonly", "size", "id"] }, { kind: "pipe", type: i1$4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SupportComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SupportComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-support', standalone: false, template: "<div class=\"container mt-2 mb-5\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'pages.support.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n      style=\"font-size: 25px;font-weight: 600;\" (click)=\"backClicked()\"></i>\n  </div>\n  <form [formGroup]=\"supportForm\" class=\"needs-validation\" (ngSubmit)=\"sendSupport(supportForm.value)\">\n    <rlb-list class=\"settings\">\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.name' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\" size=\"small\" formControlName=\"name\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.email' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\"  size=\"small\" formControlName=\"email\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.subject' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\"  size=\"small\" formControlName=\"subject\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.message' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\"  size=\"small\" formControlName=\"message\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.legal' | translate}}</h6>\n            <span>{{ 'pages.support.infoPage' | translate}}</span>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-switch size=\"small\" formControlName=\"legal\" />\n          </div>\n        </div>\n      </rlb-list-item>\n    </rlb-list>\n  </form>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: AbstractSupportService }, { type: i1$6.Location }] });
+            args: [{ selector: 'rlb-support', imports: [ReactiveFormsModule, TranslateModule, ListComponent, ListItemComponent, InputComponent, SwitchComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container mt-2 mb-5\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'pages.support.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n      style=\"font-size: 25px;font-weight: 600;\" (click)=\"backClicked()\"></i>\n  </div>\n  <form [formGroup]=\"supportForm\" class=\"needs-validation\" (ngSubmit)=\"sendSupport(supportForm.value)\">\n    <rlb-list class=\"settings\">\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.name' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\" size=\"small\" formControlName=\"name\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.email' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\"  size=\"small\" formControlName=\"email\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.subject' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\"  size=\"small\" formControlName=\"subject\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.message' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\"  size=\"small\" formControlName=\"message\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.legal' | translate}}</h6>\n            <span>{{ 'pages.support.infoPage' | translate}}</span>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-switch size=\"small\" formControlName=\"legal\" />\n          </div>\n        </div>\n      </rlb-list-item>\n    </rlb-list>\n  </form>\n</div>\n" }]
+        }] });
 
 class TermsAndConditionsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TermsAndConditionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: TermsAndConditionsComponent, isStandalone: false, selector: "rlb-terms-and-conditions", ngImport: i0, template: "<rlb-cms-template contentId=\"adb_terms\"></rlb-cms-template>", styles: [""], dependencies: [{ kind: "component", type: CmsComponent, selector: "rlb-cms-template", inputs: ["contentId", "breadcrumb"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TermsAndConditionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: TermsAndConditionsComponent, isStandalone: true, selector: "rlb-terms-and-conditions", ngImport: i0, template: "<rlb-cms-template contentId=\"adb_terms\"></rlb-cms-template>", styles: [""], dependencies: [{ kind: "component", type: CmsComponent, selector: "rlb-cms-template", inputs: ["contentId", "breadcrumb"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TermsAndConditionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TermsAndConditionsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-terms-and-conditions', standalone: false, template: "<rlb-cms-template contentId=\"adb_terms\"></rlb-cms-template>" }]
+            args: [{ selector: 'rlb-terms-and-conditions', imports: [CmsComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<rlb-cms-template contentId=\"adb_terms\"></rlb-cms-template>" }]
         }] });
 
 class AsMultiPipe {
@@ -1950,14 +2080,13 @@ class AsMultiPipe {
         }
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AsMultiPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: AsMultiPipe, isStandalone: false, name: "asMulti" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AsMultiPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AsMultiPipe, isStandalone: true, name: "asMulti" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AsMultiPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AsMultiPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'asMulti',
-                    standalone: false
+                    name: 'asMulti'
                 }]
         }] });
 class AsSinglePipe {
@@ -1967,14 +2096,13 @@ class AsSinglePipe {
         }
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AsSinglePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: AsSinglePipe, isStandalone: false, name: "asSingle" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AsSinglePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AsSinglePipe, isStandalone: true, name: "asSingle" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AsSinglePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AsSinglePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'asSingle',
-                    standalone: false
+                    name: 'asSingle'
                 }]
         }] });
 
@@ -1995,12 +2123,39 @@ class SettingsDropdownSelectorComponent {
         this.router = inject(Router);
         this.menu = viewChild('menu', ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
         this.appsService = inject(AppsService);
-        this.router.events.subscribe(() => this.close());
+        this.pages = computed(() => this.pageOptions, ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+        this.languages = computed(() => {
+            return this.store.selectSignal(o => o[appContextFeatureKey].supportedLanguages)().map((lang) => {
+                return {
+                    value: lang,
+                    label: this.languageService.getLanguageName(lang),
+                };
+            });
+        }, ...(ngDevMode ? [{ debugName: "languages" }] : /* istanbul ignore next */ []));
+        this.currentLanguage = toSignal(this.store.select(o => o[appContextFeatureKey].language), { initialValue: 'en' });
+        this.darkMode = computed(() => this.store.selectSignal(o => o[appContextFeatureKey].theme)() === 'dark', ...(ngDevMode ? [{ debugName: "darkMode" }] : /* istanbul ignore next */ []));
+        this.currentAppId = computed(() => this.appsService.currentApp()?.id, ...(ngDevMode ? [{ debugName: "currentAppId" }] : /* istanbul ignore next */ []));
+        this.router.events.pipe(takeUntilDestroyed()).subscribe(() => this.close());
     }
-    get pages() {
-        return this.pageOptions;
+    setCurrentLanguage(value) {
+        this.store.dispatch(AppContextActions.setLanguage({ language: value }));
+        this.toastService.openToast('toast-c-1', 'toast-component', {
+            title: this.languageService.translate('common.saved'),
+            content: this.languageService.translate('common.savedSuccessfully'),
+            type: 'success',
+            ok: this.languageService.translate('ok'),
+        });
     }
-    selectApp(app) {
+    setDarkMode(value) {
+        this.store.dispatch(AppContextActions.setTheme({ theme: value ? 'dark' : 'light' }));
+        this.toastService.openToast('toast-c-1', 'toast-component', {
+            title: this.languageService.translate('common.saved'),
+            content: this.languageService.translate('common.savedSuccessfully'),
+            type: 'success',
+            ok: this.languageService.translate('ok'),
+        });
+    }
+    selectApp(app) {
         this.appSelected.emit(app);
     }
     goToFirstSlide() {
@@ -2019,86 +2174,76 @@ class SettingsDropdownSelectorComponent {
         }
     }
     isAppSelected(appId) {
-        if (appId) {
-            return this.appsService.isAppSelected(appId);
-        }
-        else {
-            console.error('AppId is not defined');
-            return false;
-        }
-    }
-    get languages() {
-        return this.store
-            .selectSignal(o => o[appContextFeatureKey].supportedLanguages)()
-            .map((lang) => {
-            return {
-                value: lang,
-                label: this.languageService.getLanguageName(lang),
-            };
-        });
-    }
-    get currentLanguage() {
-        return this.store.selectSignal(o => o[appContextFeatureKey].language)();
-    }
-    set currentLanguage(value) {
-        this.store.dispatch(AppContextActions.setLanguage({ language: value }));
-        this.toastService.openToast('toast-c-1', 'toast-component', {
-            title: this.languageService.translate('common.saved'),
-            content: this.languageService.translate('common.savedSuccessfully'),
-            type: 'success',
-            ok: this.languageService.translate('ok'),
-        });
-    }
-    get darkMode() {
-        return this.store.selectSignal(o => o[appContextFeatureKey].theme)() === 'dark';
-    }
-    set darkMode(value) {
-        this.store.dispatch(AppContextActions.setTheme({ theme: value ? 'dark' : 'light' }));
-        this.toastService.openToast('toast-c-1', 'toast-component', {
-            title: this.languageService.translate('common.saved'),
-            content: this.languageService.translate('common.savedSuccessfully'),
-            type: 'success',
-            ok: this.languageService.translate('ok'),
-        });
+        return this.currentAppId() === appId;
     }
     close() {
         this.menu()?.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SettingsDropdownSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SettingsDropdownSelectorComponent, isStandalone: false, selector: "rlb-settings-dropdown-selector", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, apps: { classPropertyName: "apps", publicName: "apps", isSignal: true, isRequired: true, transformFunction: null }, isAuthenticated: { classPropertyName: "isAuthenticated", publicName: "isAuthenticated", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { appSelected: "appSelected" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (mode() === 'desktop') {\n  <rlb-navbar-dropdown-item #menu dropdown auto-close=\"outside\" (status-changed)=\"change($event)\">\n    <span tooltip-placement=\"bottom\" [tooltip]=\"('core.settings.title') | translate\">\n        <i class=\"bi bi-gear fs-5\"></i>\n    </span>\n    <rlb-dropdown-container placement=\"right\">\n      <div style=\"width: 320px;\">\n        <ng-container *ngTemplateOutlet=\"settingsCarousel\"></ng-container>\n      </div>\n    </rlb-dropdown-container>\n  </rlb-navbar-dropdown-item>\n} @else {\n  <!-- Inline mode for Offcanvas -->\n  <ng-container *ngTemplateOutlet=\"settingsCarousel\"></ng-container>\n}\n\n<ng-template #settingsCarousel>\n  <rlb-carousel [hide-indicators]=\"true\" [hide-controls]=\"true\" autoplay=\"none\"[no-touch]=\"true\" [(current-slide)]=\"activeSlide\" class=\"w-100 d-block\">\n    <rlb-carousel-slide [active]=\"true\">\n      <div class=\"p-3\">\n        <h6 class=\"dropdown-header px-0 text-center mb-2 fw-bold text-dark\">\n          {{ 'core.settings.title' | translate }}\n        </h6>\n\n        <div class=\"row row-cols-3 g-2\">\n\n          @if (isAuthenticated()) {\n            <!-- General Settings -->\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                (click)=\"goToInlineSettings()\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-person fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">{{ 'core.account.settings.title' | translate }}</span>\n              </button>\n            </div>\n          }\n\n          <!-- Dynamic App Settings -->\n          @for (app of apps(); track app.id) {\n            @if (app.settings && app.enabled && (app.settings.auth && (isAuthenticated()))) {\n              <div class=\"col\">\n                <button\n                  rlb-button\n                  outline\n                  color=\"primary\"\n                  [disabled]=\"!app.enabled && (app.settings.auth && !(isAuthenticated()))\"\n                  (click)=\"selectApp(app)\"\n                  [class.active]=\"isAppSelected(app.id)\"\n                  class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                  <i [ngClass]=\"['bi', 'fs-4', 'mb-1', app.settings.icon || 'bi-gear']\"></i>\n                  <span class=\"small text-truncate w-100\" [title]=\"app.data.friendlyName ? app.data.friendlyName : app.settings.title | translate\">\n                    {{ app.data.friendlyName ? app.data.friendlyName : app.settings.title | translate }}\n                </span>\n                </button>\n              </div>\n            }\n          }\n\n          <!-- System / Status -->\n          @if (pages?.['status']?.path) {\n            <div class=\"col\">\n              <button rlb-button outline color=\"primary\" routerLink=\"/status\" routerLinkActive=\"active\" class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-check2-circle fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">{{ 'core.settings.status' | translate }}</span>\n              </button>\n            </div>\n          }\n\n          <!-- Logger -->\n          @if (pages?.['logger']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/logger\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-file-text fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.logger' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n          <!-- Privacy -->\n          @if (pages?.['privacy']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/privacy\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-shield-check fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                  {{ 'core.settings.privacy' | translate }}\n                </span>\n              </button>\n            </div>\n          }\n\n          <!-- Cookies -->\n          @if (pages?.['cookies']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/cookies\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-cookie fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.cookies' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n          <!-- Terms -->\n          @if (pages?.['terms']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/terms\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-vector-pen fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.legal' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n          <!-- Support -->\n          @if (pages?.['support']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/support\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-chat-quote fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.support' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n        </div>\n      </div>\n    </rlb-carousel-slide>\n\n    <rlb-carousel-slide>\n      <div class=\"p-3\">\n\n        <!-- Header -->\n        <div class=\"d-flex align-items-center mb-3\">\n          <button class=\"btn btn-sm btn-link text-reset p-0 me-2 border-0 text-decoration-none\" (click)=\"goToFirstSlide()\">\n            <i class=\"bi bi-arrow-left fs-5\"></i>\n          </button>\n          <h6 class=\"mb-0 fw-bold\">{{ 'core.account.settings.title' | translate }}</h6>\n        </div>\n\n        <rlb-list class=\"settings\">\n\n          <!-- Theme Settings -->\n          <rlb-list-item class=\"settings-item\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.settings.generalTheme' | translate}}</span>\n              </div>\n              <div class=\"settings-control\">\n                <rlb-switch size=\"small\" [(ngModel)]=\"darkMode\" />\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Language Settings -->\n          <rlb-list-item class=\"settings-item\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.settings.generalLanguage' | translate}}</span>\n              </div>\n              <div class=\"settings-control\">\n                <rlb-select size=\"small\" [(ngModel)]=\"currentLanguage\">\n                  @for (l of languages; track l.value) {\n                    <rlb-option [value]=\"l.value\">{{l.label}}</rlb-option>\n                  }\n                </rlb-select>\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Show More -->\n          <rlb-list-item action class=\"settings-item\" routerLink=\"/profile\" style=\"cursor: pointer;\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.account.settings.showMore' | translate }}</span>\n              </div>\n              <div class=\"settings-control text-primary\">\n                <i class=\"bi bi-arrow-up-right-square fs-5\"></i>\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Logout -->\n          <rlb-list-item action (click)=\"logout()\" class=\"settings-item\" style=\"cursor: pointer;\">\n            <div class=\"d-flex justify-content-between align-items-center text-danger\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.account.logout' | translate }}</span>\n              </div>\n              <div class=\"settings-control\">\n                <i class=\"bi bi-box-arrow-left fs-5\"></i>\n              </div>\n            </div>\n          </rlb-list-item>\n\n        </rlb-list>\n      </div>\n    </rlb-carousel-slide>\n  </rlb-carousel>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.SwitchComponent, selector: "rlb-switch", inputs: ["disabled", "readonly", "size", "id"] }, { kind: "component", type: i2$1.SelectComponent, selector: "rlb-select", inputs: ["placeholder", "size", "disabled", "readonly", "multiple", "display", "inputId", "enable-validation"] }, { kind: "component", type: i2$1.OptionComponent, selector: "rlb-option", inputs: ["value", "disabled"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "component", type: i2$1.DropdownContainerComponent, selector: "ul[rlb-dropdown-menu], rlb-dropdown-container", inputs: ["placement", "placement-sm", "placement-md", "placement-lg", "placement-xl", "placement-xxl"] }, { kind: "component", type: i2$1.NavbarDropdownItemComponent, selector: "rlb-navbar-dropdown-item", inputs: ["disabled", "dropdown", "href", "class", "toggle", "auto-close"], outputs: ["click", "status-changed"] }, { kind: "component", type: i2$1.CarouselComponent, selector: "rlb-carousel", inputs: ["id", "hide-indicators", "hide-controls", "cross-fade", "autoplay", "interval", "pause", "wrap", "no-touch", "keyboard", "current-slide"], outputs: ["slid", "slide", "current-slideChange", "slide-count"] }, { kind: "component", type: i2$1.CarouselSlideComponent, selector: "rlb-carousel-slide", inputs: ["active", "id"] }, { kind: "component", type: i2$1.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i2$1.ListItemComponent, selector: "rlb-list-item", inputs: ["active", "disabled", "action"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SettingsDropdownSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SettingsDropdownSelectorComponent, isStandalone: true, selector: "rlb-settings-dropdown-selector", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, apps: { classPropertyName: "apps", publicName: "apps", isSignal: true, isRequired: true, transformFunction: null }, isAuthenticated: { classPropertyName: "isAuthenticated", publicName: "isAuthenticated", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { appSelected: "appSelected" }, viewQueries: [{ propertyName: "menu", first: true, predicate: ["menu"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (mode() === 'desktop') {\n  <rlb-navbar-dropdown-item #menu dropdown auto-close=\"outside\" (status-changed)=\"change($event)\">\n    <span tooltip-placement=\"bottom\" [tooltip]=\"('core.settings.title') | translate\">\n        <i class=\"bi bi-gear fs-5\"></i>\n    </span>\n    <rlb-dropdown-container placement=\"right\">\n      <div style=\"width: 320px;\">\n        <ng-container *ngTemplateOutlet=\"settingsCarousel\"></ng-container>\n      </div>\n    </rlb-dropdown-container>\n  </rlb-navbar-dropdown-item>\n} @else {\n  <!-- Inline mode for Offcanvas -->\n  <ng-container *ngTemplateOutlet=\"settingsCarousel\"></ng-container>\n}\n\n<ng-template #settingsCarousel>\n  <rlb-carousel [hide-indicators]=\"true\" [hide-controls]=\"true\" autoplay=\"none\" [no-touch]=\"true\" [(current-slide)]=\"activeSlide\" class=\"w-100 d-block\">\n    <rlb-carousel-slide [active]=\"true\">\n      <div class=\"p-3\">\n        <h6 class=\"dropdown-header px-0 text-center mb-2 fw-bold text-dark\">\n          {{ 'core.settings.title' | translate }}\n        </h6>\n\n        <div class=\"row row-cols-3 g-2\">\n\n          @if (isAuthenticated()) {\n            <!-- General Settings -->\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                (click)=\"goToInlineSettings()\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-person fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">{{ 'core.account.settings.title' | translate }}</span>\n              </button>\n            </div>\n          }\n\n          <!-- Dynamic App Settings -->\n          @for (app of apps(); track app.id) {\n            @if (app.settings && app.enabled && (app.settings.auth && (isAuthenticated()))) {\n              <div class=\"col\">\n                <button\n                  rlb-button\n                  outline\n                  color=\"primary\"\n                  [disabled]=\"!app.enabled && (app.settings.auth && !(isAuthenticated()))\"\n                  (click)=\"selectApp(app)\"\n                  [class.active]=\"isAppSelected(app.id)\"\n                  class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                  <i [ngClass]=\"['bi', 'fs-4', 'mb-1', app.settings.icon || 'bi-gear']\"></i>\n                  <span class=\"small text-truncate w-100\" [title]=\"app.data.friendlyName ? app.data.friendlyName : app.settings.title | translate\">\n                    {{ app.data.friendlyName ? app.data.friendlyName : app.settings.title | translate }}\n                </span>\n                </button>\n              </div>\n            }\n          }\n\n          <!-- System / Status -->\n          @if (pages()?.['status']?.path) {\n            <div class=\"col\">\n              <button rlb-button outline color=\"primary\" routerLink=\"/status\" routerLinkActive=\"active\" class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-check2-circle fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">{{ 'core.settings.status' | translate }}</span>\n              </button>\n            </div>\n          }\n\n          <!-- Logger -->\n          @if (pages()?.['logger']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/logger\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-file-text fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.logger' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n          <!-- Privacy -->\n          @if (pages()?.['privacy']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/privacy\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-shield-check fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                  {{ 'core.settings.privacy' | translate }}\n                </span>\n              </button>\n            </div>\n          }\n\n          <!-- Cookies -->\n          @if (pages()?.['cookies']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/cookies\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-cookie fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.cookies' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n          <!-- Terms -->\n          @if (pages()?.['terms']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/terms\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-vector-pen fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.legal' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n          <!-- Support -->\n          @if (pages()?.['support']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/support\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-chat-quote fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.support' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n        </div>\n      </div>\n    </rlb-carousel-slide>\n\n    <rlb-carousel-slide>\n      <div class=\"p-3\">\n\n        <!-- Header -->\n        <div class=\"d-flex align-items-center mb-3\">\n          <button class=\"btn btn-sm btn-link text-reset p-0 me-2 border-0 text-decoration-none\" (click)=\"goToFirstSlide()\">\n            <i class=\"bi bi-arrow-left fs-5\"></i>\n          </button>\n          <h6 class=\"mb-0 fw-bold\">{{ 'core.account.settings.title' | translate }}</h6>\n        </div>\n\n        <rlb-list class=\"settings\">\n\n          <!-- Theme Settings -->\n          <rlb-list-item class=\"settings-item\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.settings.generalTheme' | translate}}</span>\n              </div>\n              <div class=\"settings-control\">\n                <rlb-switch size=\"small\" [ngModel]=\"darkMode()\" (ngModelChange)=\"setDarkMode($event)\" />\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Language Settings -->\n          <rlb-list-item class=\"settings-item\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.settings.generalLanguage' | translate}}</span>\n              </div>\n              <div class=\"settings-control\">\n                <rlb-select size=\"small\" [ngModel]=\"currentLanguage()\" (ngModelChange)=\"setCurrentLanguage($event)\">\n                  @for (l of languages(); track l.value) {\n                    <rlb-option [value]=\"l.value\">{{l.label}}</rlb-option>\n                  }\n                </rlb-select>\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Show More -->\n          <rlb-list-item action class=\"settings-item\" routerLink=\"/profile\" style=\"cursor: pointer;\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.account.settings.showMore' | translate }}</span>\n              </div>\n              <div class=\"settings-control text-primary\">\n                <i class=\"bi bi-arrow-up-right-square fs-5\"></i>\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Logout -->\n          <rlb-list-item action (click)=\"logout()\" class=\"settings-item\" style=\"cursor: pointer;\">\n            <div class=\"d-flex justify-content-between align-items-center text-danger\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.account.logout' | translate }}</span>\n              </div>\n              <div class=\"settings-control\">\n                <i class=\"bi bi-box-arrow-left fs-5\"></i>\n              </div>\n            </div>\n          </rlb-list-item>\n\n        </rlb-list>\n      </div>\n    </rlb-carousel-slide>\n  </rlb-carousel>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: NavbarDropdownItemComponent, selector: "rlb-navbar-dropdown-item", inputs: ["disabled", "dropdown", "href", "class", "toggle", "auto-close"], outputs: ["click", "status-changed"] }, { kind: "component", type: DropdownContainerComponent, selector: "ul[rlb-dropdown-menu], rlb-dropdown-container", inputs: ["placement", "placement-sm", "placement-md", "placement-lg", "placement-xl", "placement-xxl"] }, { kind: "component", type: CarouselComponent, selector: "rlb-carousel", inputs: ["id", "hide-indicators", "hide-controls", "cross-fade", "autoplay", "interval", "pause", "wrap", "no-touch", "keyboard", "current-slide"], outputs: ["slid", "slide", "current-slideChange", "slide-count"] }, { kind: "component", type: CarouselSlideComponent, selector: "rlb-carousel-slide", inputs: ["active", "id"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "component", type: ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: ListItemComponent, selector: "rlb-list-item", inputs: ["active", "disabled", "action"] }, { kind: "component", type: SwitchComponent, selector: "rlb-switch", inputs: ["disabled", "readonly", "size", "id"] }, { kind: "component", type: SelectComponent, selector: "rlb-select", inputs: ["placeholder", "size", "disabled", "readonly", "multiple", "display", "inputId", "enable-validation"] }, { kind: "component", type: OptionComponent, selector: "rlb-option", inputs: ["value", "disabled"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i1$4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SettingsDropdownSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SettingsDropdownSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-settings-dropdown-selector', standalone: false, template: "@if (mode() === 'desktop') {\n  <rlb-navbar-dropdown-item #menu dropdown auto-close=\"outside\" (status-changed)=\"change($event)\">\n    <span tooltip-placement=\"bottom\" [tooltip]=\"('core.settings.title') | translate\">\n        <i class=\"bi bi-gear fs-5\"></i>\n    </span>\n    <rlb-dropdown-container placement=\"right\">\n      <div style=\"width: 320px;\">\n        <ng-container *ngTemplateOutlet=\"settingsCarousel\"></ng-container>\n      </div>\n    </rlb-dropdown-container>\n  </rlb-navbar-dropdown-item>\n} @else {\n  <!-- Inline mode for Offcanvas -->\n  <ng-container *ngTemplateOutlet=\"settingsCarousel\"></ng-container>\n}\n\n<ng-template #settingsCarousel>\n  <rlb-carousel [hide-indicators]=\"true\" [hide-controls]=\"true\" autoplay=\"none\"[no-touch]=\"true\" [(current-slide)]=\"activeSlide\" class=\"w-100 d-block\">\n    <rlb-carousel-slide [active]=\"true\">\n      <div class=\"p-3\">\n        <h6 class=\"dropdown-header px-0 text-center mb-2 fw-bold text-dark\">\n          {{ 'core.settings.title' | translate }}\n        </h6>\n\n        <div class=\"row row-cols-3 g-2\">\n\n          @if (isAuthenticated()) {\n            <!-- General Settings -->\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                (click)=\"goToInlineSettings()\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-person fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">{{ 'core.account.settings.title' | translate }}</span>\n              </button>\n            </div>\n          }\n\n          <!-- Dynamic App Settings -->\n          @for (app of apps(); track app.id) {\n            @if (app.settings && app.enabled && (app.settings.auth && (isAuthenticated()))) {\n              <div class=\"col\">\n                <button\n                  rlb-button\n                  outline\n                  color=\"primary\"\n                  [disabled]=\"!app.enabled && (app.settings.auth && !(isAuthenticated()))\"\n                  (click)=\"selectApp(app)\"\n                  [class.active]=\"isAppSelected(app.id)\"\n                  class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                  <i [ngClass]=\"['bi', 'fs-4', 'mb-1', app.settings.icon || 'bi-gear']\"></i>\n                  <span class=\"small text-truncate w-100\" [title]=\"app.data.friendlyName ? app.data.friendlyName : app.settings.title | translate\">\n                    {{ app.data.friendlyName ? app.data.friendlyName : app.settings.title | translate }}\n                </span>\n                </button>\n              </div>\n            }\n          }\n\n          <!-- System / Status -->\n          @if (pages?.['status']?.path) {\n            <div class=\"col\">\n              <button rlb-button outline color=\"primary\" routerLink=\"/status\" routerLinkActive=\"active\" class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-check2-circle fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">{{ 'core.settings.status' | translate }}</span>\n              </button>\n            </div>\n          }\n\n          <!-- Logger -->\n          @if (pages?.['logger']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/logger\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-file-text fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.logger' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n          <!-- Privacy -->\n          @if (pages?.['privacy']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/privacy\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-shield-check fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                  {{ 'core.settings.privacy' | translate }}\n                </span>\n              </button>\n            </div>\n          }\n\n          <!-- Cookies -->\n          @if (pages?.['cookies']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/cookies\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-cookie fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.cookies' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n          <!-- Terms -->\n          @if (pages?.['terms']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/terms\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-vector-pen fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.legal' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n          <!-- Support -->\n          @if (pages?.['support']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/support\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-chat-quote fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.support' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n        </div>\n      </div>\n    </rlb-carousel-slide>\n\n    <rlb-carousel-slide>\n      <div class=\"p-3\">\n\n        <!-- Header -->\n        <div class=\"d-flex align-items-center mb-3\">\n          <button class=\"btn btn-sm btn-link text-reset p-0 me-2 border-0 text-decoration-none\" (click)=\"goToFirstSlide()\">\n            <i class=\"bi bi-arrow-left fs-5\"></i>\n          </button>\n          <h6 class=\"mb-0 fw-bold\">{{ 'core.account.settings.title' | translate }}</h6>\n        </div>\n\n        <rlb-list class=\"settings\">\n\n          <!-- Theme Settings -->\n          <rlb-list-item class=\"settings-item\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.settings.generalTheme' | translate}}</span>\n              </div>\n              <div class=\"settings-control\">\n                <rlb-switch size=\"small\" [(ngModel)]=\"darkMode\" />\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Language Settings -->\n          <rlb-list-item class=\"settings-item\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.settings.generalLanguage' | translate}}</span>\n              </div>\n              <div class=\"settings-control\">\n                <rlb-select size=\"small\" [(ngModel)]=\"currentLanguage\">\n                  @for (l of languages; track l.value) {\n                    <rlb-option [value]=\"l.value\">{{l.label}}</rlb-option>\n                  }\n                </rlb-select>\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Show More -->\n          <rlb-list-item action class=\"settings-item\" routerLink=\"/profile\" style=\"cursor: pointer;\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.account.settings.showMore' | translate }}</span>\n              </div>\n              <div class=\"settings-control text-primary\">\n                <i class=\"bi bi-arrow-up-right-square fs-5\"></i>\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Logout -->\n          <rlb-list-item action (click)=\"logout()\" class=\"settings-item\" style=\"cursor: pointer;\">\n            <div class=\"d-flex justify-content-between align-items-center text-danger\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.account.logout' | translate }}</span>\n              </div>\n              <div class=\"settings-control\">\n                <i class=\"bi bi-box-arrow-left fs-5\"></i>\n              </div>\n            </div>\n          </rlb-list-item>\n\n        </rlb-list>\n      </div>\n    </rlb-carousel-slide>\n  </rlb-carousel>\n</ng-template>\n" }]
+            args: [{ selector: 'rlb-settings-dropdown-selector', imports: [
+                        NavbarDropdownItemComponent,
+                        DropdownContainerComponent,
+                        CarouselComponent,
+                        CarouselSlideComponent,
+                        TooltipDirective,
+                        ListComponent,
+                        ListItemComponent,
+                        SwitchComponent,
+                        SelectComponent,
+                        OptionComponent,
+                        NgClass,
+                        NgTemplateOutlet,
+                        TranslateModule,
+                        FormsModule,
+                        RouterModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (mode() === 'desktop') {\n  <rlb-navbar-dropdown-item #menu dropdown auto-close=\"outside\" (status-changed)=\"change($event)\">\n    <span tooltip-placement=\"bottom\" [tooltip]=\"('core.settings.title') | translate\">\n        <i class=\"bi bi-gear fs-5\"></i>\n    </span>\n    <rlb-dropdown-container placement=\"right\">\n      <div style=\"width: 320px;\">\n        <ng-container *ngTemplateOutlet=\"settingsCarousel\"></ng-container>\n      </div>\n    </rlb-dropdown-container>\n  </rlb-navbar-dropdown-item>\n} @else {\n  <!-- Inline mode for Offcanvas -->\n  <ng-container *ngTemplateOutlet=\"settingsCarousel\"></ng-container>\n}\n\n<ng-template #settingsCarousel>\n  <rlb-carousel [hide-indicators]=\"true\" [hide-controls]=\"true\" autoplay=\"none\" [no-touch]=\"true\" [(current-slide)]=\"activeSlide\" class=\"w-100 d-block\">\n    <rlb-carousel-slide [active]=\"true\">\n      <div class=\"p-3\">\n        <h6 class=\"dropdown-header px-0 text-center mb-2 fw-bold text-dark\">\n          {{ 'core.settings.title' | translate }}\n        </h6>\n\n        <div class=\"row row-cols-3 g-2\">\n\n          @if (isAuthenticated()) {\n            <!-- General Settings -->\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                (click)=\"goToInlineSettings()\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-person fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">{{ 'core.account.settings.title' | translate }}</span>\n              </button>\n            </div>\n          }\n\n          <!-- Dynamic App Settings -->\n          @for (app of apps(); track app.id) {\n            @if (app.settings && app.enabled && (app.settings.auth && (isAuthenticated()))) {\n              <div class=\"col\">\n                <button\n                  rlb-button\n                  outline\n                  color=\"primary\"\n                  [disabled]=\"!app.enabled && (app.settings.auth && !(isAuthenticated()))\"\n                  (click)=\"selectApp(app)\"\n                  [class.active]=\"isAppSelected(app.id)\"\n                  class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                  <i [ngClass]=\"['bi', 'fs-4', 'mb-1', app.settings.icon || 'bi-gear']\"></i>\n                  <span class=\"small text-truncate w-100\" [title]=\"app.data.friendlyName ? app.data.friendlyName : app.settings.title | translate\">\n                    {{ app.data.friendlyName ? app.data.friendlyName : app.settings.title | translate }}\n                </span>\n                </button>\n              </div>\n            }\n          }\n\n          <!-- System / Status -->\n          @if (pages()?.['status']?.path) {\n            <div class=\"col\">\n              <button rlb-button outline color=\"primary\" routerLink=\"/status\" routerLinkActive=\"active\" class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-check2-circle fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">{{ 'core.settings.status' | translate }}</span>\n              </button>\n            </div>\n          }\n\n          <!-- Logger -->\n          @if (pages()?.['logger']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/logger\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-file-text fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.logger' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n          <!-- Privacy -->\n          @if (pages()?.['privacy']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/privacy\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-shield-check fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                  {{ 'core.settings.privacy' | translate }}\n                </span>\n              </button>\n            </div>\n          }\n\n          <!-- Cookies -->\n          @if (pages()?.['cookies']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/cookies\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-cookie fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.cookies' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n          <!-- Terms -->\n          @if (pages()?.['terms']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/terms\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-vector-pen fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.legal' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n          <!-- Support -->\n          @if (pages()?.['support']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/support\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-chat-quote fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.support' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n        </div>\n      </div>\n    </rlb-carousel-slide>\n\n    <rlb-carousel-slide>\n      <div class=\"p-3\">\n\n        <!-- Header -->\n        <div class=\"d-flex align-items-center mb-3\">\n          <button class=\"btn btn-sm btn-link text-reset p-0 me-2 border-0 text-decoration-none\" (click)=\"goToFirstSlide()\">\n            <i class=\"bi bi-arrow-left fs-5\"></i>\n          </button>\n          <h6 class=\"mb-0 fw-bold\">{{ 'core.account.settings.title' | translate }}</h6>\n        </div>\n\n        <rlb-list class=\"settings\">\n\n          <!-- Theme Settings -->\n          <rlb-list-item class=\"settings-item\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.settings.generalTheme' | translate}}</span>\n              </div>\n              <div class=\"settings-control\">\n                <rlb-switch size=\"small\" [ngModel]=\"darkMode()\" (ngModelChange)=\"setDarkMode($event)\" />\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Language Settings -->\n          <rlb-list-item class=\"settings-item\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.settings.generalLanguage' | translate}}</span>\n              </div>\n              <div class=\"settings-control\">\n                <rlb-select size=\"small\" [ngModel]=\"currentLanguage()\" (ngModelChange)=\"setCurrentLanguage($event)\">\n                  @for (l of languages(); track l.value) {\n                    <rlb-option [value]=\"l.value\">{{l.label}}</rlb-option>\n                  }\n                </rlb-select>\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Show More -->\n          <rlb-list-item action class=\"settings-item\" routerLink=\"/profile\" style=\"cursor: pointer;\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.account.settings.showMore' | translate }}</span>\n              </div>\n              <div class=\"settings-control text-primary\">\n                <i class=\"bi bi-arrow-up-right-square fs-5\"></i>\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Logout -->\n          <rlb-list-item action (click)=\"logout()\" class=\"settings-item\" style=\"cursor: pointer;\">\n            <div class=\"d-flex justify-content-between align-items-center text-danger\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.account.logout' | translate }}</span>\n              </div>\n              <div class=\"settings-control\">\n                <i class=\"bi bi-box-arrow-left fs-5\"></i>\n              </div>\n            </div>\n          </rlb-list-item>\n\n        </rlb-list>\n      </div>\n    </rlb-carousel-slide>\n  </rlb-carousel>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], apps: [{ type: i0.Input, args: [{ isSignal: true, alias: "apps", required: true }] }], isAuthenticated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAuthenticated", required: true }] }], appSelected: [{ type: i0.Output, args: ["appSelected"] }], menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }] } });
 
-class AppDropdownSelectorComponent {
+class LeftComponentPipe {
     constructor() {
-        this.mode = input('desktop', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
-        this.apps = input.required(...(ngDevMode ? [{ debugName: "apps" }] : /* istanbul ignore next */ []));
-        this.isAuthenticated = input.required(...(ngDevMode ? [{ debugName: "isAuthenticated" }] : /* istanbul ignore next */ []));
-        this.appSelected = output();
-        this.appsService = inject(AppsService);
-    }
-    selectApp(app) {
-        this.appSelected.emit(app);
+        this.config = inject(RLB_APP_NAVCOMP);
     }
-    isAppSelected(appId) {
-        if (appId) {
-            return this.appsService.isAppSelected(appId);
+    transform(value) {
+        const t = this.config.left.find(c => c.name === value)?.component;
+        if (!t) {
+            throw new Error(`No component found for name ${value}`);
         }
-        else {
-            console.error('AppId is not defined');
-            return false;
+        return t;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LeftComponentPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: LeftComponentPipe, isStandalone: true, name: "leftComponent" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: LeftComponentPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'leftComponent'
+                }]
+        }] });
+
+class RightComponentPipe {
+    constructor() {
+        this.config = inject(RLB_APP_NAVCOMP);
+    }
+    transform(value) {
+        const t = this.config.right.find(c => c.name === value)?.component;
+        if (!t) {
+            throw new Error(`No component found for name ${value}`);
         }
+        return t;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppDropdownSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: AppDropdownSelectorComponent, isStandalone: false, selector: "rlb-app-dropdown-selector", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, apps: { classPropertyName: "apps", publicName: "apps", isSignal: true, isRequired: true, transformFunction: null }, isAuthenticated: { classPropertyName: "isAuthenticated", publicName: "isAuthenticated", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { appSelected: "appSelected" }, ngImport: i0, template: "@if (mode() === 'desktop') {\n  <rlb-navbar-dropdown-item dropdown>\n    <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') | translate\">\n      <i class=\"bi bi-grid-3x3-gap-fill fs-5\"></i>\n    </span>\n    <rlb-dropdown-container placement=\"right\">\n\n      <div style=\"width: 320px;\">\n        <ng-container *ngTemplateOutlet=\"appGrid\"></ng-container>\n      </div>\n\n    </rlb-dropdown-container>\n  </rlb-navbar-dropdown-item>\n} @else {\n  <ng-container *ngTemplateOutlet=\"appGrid\"></ng-container>\n}\n\n<ng-template #appGrid>\n  <div class=\"row row-cols-3 g-2 p-3\">\n    @for (app of apps(); track app.id) {\n      @if (app.core) {\n        <div class=\"col\">\n          <button\n            rlb-button\n            outline\n            class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-center\"\n            [class.active]=\"isAppSelected(app.id)\"\n            [disabled]=\"!app.enabled && (app.core.auth && !(isAuthenticated()))\"\n            (click)=\"selectApp(app)\"\n          >\n            <i [ngClass]=\"['fs-3', 'mb-1', app.core.icon || 'bi bi-app']\"></i>\n            <span class=\"small text-truncate w-100\" [title]=\"app?.data?.friendlyName ? app.data.friendlyName : app.core.title | translate\">\n              {{ app?.data?.friendlyName ? app.data.friendlyName : app.core.title | translate }}\n            </span>\n          </button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "component", type: i2$1.DropdownContainerComponent, selector: "ul[rlb-dropdown-menu], rlb-dropdown-container", inputs: ["placement", "placement-sm", "placement-md", "placement-lg", "placement-xl", "placement-xxl"] }, { kind: "component", type: i2$1.NavbarDropdownItemComponent, selector: "rlb-navbar-dropdown-item", inputs: ["disabled", "dropdown", "href", "class", "toggle", "auto-close"], outputs: ["click", "status-changed"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RightComponentPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RightComponentPipe, isStandalone: true, name: "rightComponent" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppDropdownSelectorComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'rlb-app-dropdown-selector', standalone: false, template: "@if (mode() === 'desktop') {\n  <rlb-navbar-dropdown-item dropdown>\n    <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') | translate\">\n      <i class=\"bi bi-grid-3x3-gap-fill fs-5\"></i>\n    </span>\n    <rlb-dropdown-container placement=\"right\">\n\n      <div style=\"width: 320px;\">\n        <ng-container *ngTemplateOutlet=\"appGrid\"></ng-container>\n      </div>\n\n    </rlb-dropdown-container>\n  </rlb-navbar-dropdown-item>\n} @else {\n  <ng-container *ngTemplateOutlet=\"appGrid\"></ng-container>\n}\n\n<ng-template #appGrid>\n  <div class=\"row row-cols-3 g-2 p-3\">\n    @for (app of apps(); track app.id) {\n      @if (app.core) {\n        <div class=\"col\">\n          <button\n            rlb-button\n            outline\n            class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-center\"\n            [class.active]=\"isAppSelected(app.id)\"\n            [disabled]=\"!app.enabled && (app.core.auth && !(isAuthenticated()))\"\n            (click)=\"selectApp(app)\"\n          >\n            <i [ngClass]=\"['fs-3', 'mb-1', app.core.icon || 'bi bi-app']\"></i>\n            <span class=\"small text-truncate w-100\" [title]=\"app?.data?.friendlyName ? app.data.friendlyName : app.core.title | translate\">\n              {{ app?.data?.friendlyName ? app.data.friendlyName : app.core.title | translate }}\n            </span>\n          </button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n" }]
-        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], apps: [{ type: i0.Input, args: [{ isSignal: true, alias: "apps", required: true }] }], isAuthenticated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAuthenticated", required: true }] }], appSelected: [{ type: i0.Output, args: ["appSelected"] }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RightComponentPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'rightComponent'
+                }]
+        }] });
 
 class RlbRole {
     constructor() {
@@ -2117,155 +2262,88 @@ class RlbRole {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: RlbRole, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.7", type: RlbRole, isStandalone: false, selector: "[roles]", inputs: { action: { classPropertyName: "action", publicName: "roles", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RlbRole, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.9", type: RlbRole, isStandalone: true, selector: "[roles]", inputs: { action: { classPropertyName: "action", publicName: "roles", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: RlbRole, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RlbRole, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[roles]',
-                    standalone: false,
+                    selector: '[roles]'
                 }]
         }], ctorParameters: () => [], propDecorators: { action: [{ type: i0.Input, args: [{ isSignal: true, alias: "roles", required: false }] }] } });
 
-class LeftComponentPipe {
-    constructor(config) {
-        this.config = config;
-    }
-    transform(value) {
-        const t = this.config.left.find(c => c.name === value)?.component;
-        if (!t) {
-            throw new Error(`No component found for name ${value}`);
-        }
-        return t;
+class AppDropdownSelectorComponent {
+    constructor() {
+        this.mode = input('desktop', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+        this.apps = input.required(...(ngDevMode ? [{ debugName: "apps" }] : /* istanbul ignore next */ []));
+        this.isAuthenticated = input.required(...(ngDevMode ? [{ debugName: "isAuthenticated" }] : /* istanbul ignore next */ []));
+        this.appSelected = output();
+        this.appsService = inject(AppsService);
+        this.currentAppId = computed(() => this.appsService.currentApp()?.id, ...(ngDevMode ? [{ debugName: "currentAppId" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: LeftComponentPipe, deps: [{ token: RLB_APP_NAVCOMP }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: LeftComponentPipe, isStandalone: false, name: "leftComponent" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: LeftComponentPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'leftComponent',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [RLB_APP_NAVCOMP]
-                }] }] });
-
-class RightComponentPipe {
-    constructor(config) {
-        this.config = config;
+    selectApp(app) {
+        this.appSelected.emit(app);
     }
-    transform(value) {
-        const t = this.config.right.find(c => c.name === value)?.component;
-        if (!t) {
-            throw new Error(`No component found for name ${value}`);
-        }
-        return t;
+    isAppSelected(appId) {
+        return this.currentAppId() === appId;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: RightComponentPipe, deps: [{ token: RLB_APP_NAVCOMP }], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: RightComponentPipe, isStandalone: false, name: "rightComponent" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppDropdownSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AppDropdownSelectorComponent, isStandalone: true, selector: "rlb-app-dropdown-selector", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, apps: { classPropertyName: "apps", publicName: "apps", isSignal: true, isRequired: true, transformFunction: null }, isAuthenticated: { classPropertyName: "isAuthenticated", publicName: "isAuthenticated", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { appSelected: "appSelected" }, ngImport: i0, template: "@if (mode() === 'desktop') {\n  <rlb-navbar-dropdown-item dropdown>\n    <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') | translate\">\n      <i class=\"bi bi-grid-3x3-gap-fill fs-5\"></i>\n    </span>\n    <rlb-dropdown-container placement=\"right\">\n\n      <div style=\"width: 320px;\">\n        <ng-container *ngTemplateOutlet=\"appGrid\"></ng-container>\n      </div>\n\n    </rlb-dropdown-container>\n  </rlb-navbar-dropdown-item>\n} @else {\n  <ng-container *ngTemplateOutlet=\"appGrid\"></ng-container>\n}\n\n<ng-template #appGrid>\n  <div class=\"row row-cols-3 g-2 p-3\">\n    @for (app of apps(); track app.id) {\n      @if (app.core) {\n        <div class=\"col\">\n          <button\n            rlb-button\n            outline\n            class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-center\"\n            [class.active]=\"isAppSelected(app.id)\"\n            [disabled]=\"!app.enabled && (app.core.auth && !(isAuthenticated()))\"\n            (click)=\"selectApp(app)\"\n          >\n            <i [ngClass]=\"['fs-3', 'mb-1', app.core.icon || 'bi bi-app']\"></i>\n            <span class=\"small text-truncate w-100\" [title]=\"app?.data?.friendlyName ? app.data.friendlyName : app.core.title | translate\">\n              {{ app?.data?.friendlyName ? app.data.friendlyName : app.core.title | translate }}\n            </span>\n          </button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "component", type: NavbarDropdownItemComponent, selector: "rlb-navbar-dropdown-item", inputs: ["disabled", "dropdown", "href", "class", "toggle", "auto-close"], outputs: ["click", "status-changed"] }, { kind: "component", type: DropdownContainerComponent, selector: "ul[rlb-dropdown-menu], rlb-dropdown-container", inputs: ["placement", "placement-sm", "placement-md", "placement-lg", "placement-xl", "placement-xxl"] }, { kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: RightComponentPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'rightComponent',
-                    standalone: false
-                }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [RLB_APP_NAVCOMP]
-                }] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppDropdownSelectorComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rlb-app-dropdown-selector', imports: [
+                        NavbarDropdownItemComponent,
+                        DropdownContainerComponent,
+                        ButtonComponent,
+                        TooltipDirective,
+                        NgClass,
+                        NgTemplateOutlet,
+                        TranslateModule,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (mode() === 'desktop') {\n  <rlb-navbar-dropdown-item dropdown>\n    <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') | translate\">\n      <i class=\"bi bi-grid-3x3-gap-fill fs-5\"></i>\n    </span>\n    <rlb-dropdown-container placement=\"right\">\n\n      <div style=\"width: 320px;\">\n        <ng-container *ngTemplateOutlet=\"appGrid\"></ng-container>\n      </div>\n\n    </rlb-dropdown-container>\n  </rlb-navbar-dropdown-item>\n} @else {\n  <ng-container *ngTemplateOutlet=\"appGrid\"></ng-container>\n}\n\n<ng-template #appGrid>\n  <div class=\"row row-cols-3 g-2 p-3\">\n    @for (app of apps(); track app.id) {\n      @if (app.core) {\n        <div class=\"col\">\n          <button\n            rlb-button\n            outline\n            class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-center\"\n            [class.active]=\"isAppSelected(app.id)\"\n            [disabled]=\"!app.enabled && (app.core.auth && !(isAuthenticated()))\"\n            (click)=\"selectApp(app)\"\n          >\n            <i [ngClass]=\"['fs-3', 'mb-1', app.core.icon || 'bi bi-app']\"></i>\n            <span class=\"small text-truncate w-100\" [title]=\"app?.data?.friendlyName ? app.data.friendlyName : app.core.title | translate\">\n              {{ app?.data?.friendlyName ? app.data.friendlyName : app.core.title | translate }}\n            </span>\n          </button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n" }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], apps: [{ type: i0.Input, args: [{ isSignal: true, alias: "apps", required: true }] }], isAuthenticated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAuthenticated", required: true }] }], appSelected: [{ type: i0.Output, args: ["appSelected"] }] } });
 
 class AppTemplateComponent {
-    constructor(env, store, appsService, authService, router) {
-        this.env = env;
-        this.store = store;
-        this.appsService = appsService;
-        this.authService = authService;
-        this.router = router;
+    constructor() {
+        this.Array = Array;
         this.navSearchText = null;
-        this.navbarItems = [];
-        this.sidebarItems = [];
-        this.sidebarFooterItems = [];
+        this.modalContainerId = input.required({ ...(ngDevMode ? { debugName: "modalContainerId" } : /* istanbul ignore next */ {}), alias: 'modal-container-id' });
+        this.breadcrumbInput = input(undefined, { ...(ngDevMode ? { debugName: "breadcrumbInput" } : /* istanbul ignore next */ {}), alias: 'breadcrumb' });
+        this.breadcrumb = computed(() => this.breadcrumbInput() ?? [], ...(ngDevMode ? [{ debugName: "breadcrumb" }] : /* istanbul ignore next */ []));
+        this.toastContainerIds = input.required({ ...(ngDevMode ? { debugName: "toastContainerIds" } : /* istanbul ignore next */ {}), alias: 'toast-container-ids' });
         this.mobileOffcanvas = viewChild('mobileOffcanvas', ...(ngDevMode ? [{ debugName: "mobileOffcanvas" }] : /* istanbul ignore next */ []));
         this.mobileSettingsMenu = viewChild('mobileSettingsMenu', ...(ngDevMode ? [{ debugName: "mobileSettingsMenu" }] : /* istanbul ignore next */ []));
-        this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
+        this.env = inject(RLB_CFG_ENV);
+        this.store = inject((Store));
+        this.appsService = inject(AppsService);
+        this.authService = inject(AuthenticationService);
+        this.router = inject(Router);
+        this.sidebarVisible = this.store.selectSignal((state) => state[sidebarsFeatureKey].visible);
+        this.sidearHasLogin = this.store.selectSignal((state) => state[sidebarsFeatureKey].loginVisible);
+        this.sidearHasSearch = this.store.selectSignal((state) => state[sidebarsFeatureKey].searchVisible);
+        this.sidebarItems = this.store.selectSignal((state) => state[sidebarsFeatureKey].items);
+        this.sidearHasSettings = this.store.selectSignal((state) => state[sidebarsFeatureKey].settingsVisible);
+        this.sidearAppsVisible = this.store.selectSignal((state) => state[sidebarsFeatureKey].appsVisible);
+        this.navVisible = this.store.selectSignal((state) => state[navbarsFeatureKey].visible);
+        this.navSearchVisible = this.store.selectSignal((state) => state[navbarsFeatureKey].searchVisible);
+        this.navHeader = this.store.selectSignal((state) => state[navbarsFeatureKey].header);
+        this.navLeftItems = this.store.selectSignal((state) => state[navbarsFeatureKey].leftItems);
+        this.navRightItems = this.store.selectSignal((state) => state[navbarsFeatureKey].rightItems);
+        this.navbarHasLogin = this.store.selectSignal((state) => state[navbarsFeatureKey].loginVisible);
+        this.navbarHasSettings = this.store.selectSignal((state) => state[navbarsFeatureKey].settingsVisible);
+        this.navbarHasApps = this.store.selectSignal(state => state[navbarsFeatureKey].appsVisible);
+        this.navbarLayout = this.store.selectSignal(state => state[navbarsFeatureKey].actionsLayout);
+        this.separatorVisible = this.store.selectSignal(state => state[navbarsFeatureKey].separatorVisible);
+        this.isAuthenticated = toSignal(this.authService.isAuthenticated$, { initialValue: false });
+        this.userInfo = toSignal(this.authService.userInfo$, { initialValue: null });
+        this.theme = this.store.selectSignal(state => state[appContextFeatureKey].theme);
+        this.apps = computed(() => this.appsService.apps().filter((app) => app.enabled && app.id), ...(ngDevMode ? [{ debugName: "apps" }] : /* istanbul ignore next */ []));
+        this.router.events
+            .pipe(filter((event) => event instanceof NavigationEnd), takeUntilDestroyed())
+            .subscribe(() => {
             this.closeMobileMenu();
         });
     }
-    ngOnDestroy() {
-        this.navbarItemsSubscription?.unsubscribe();
-        this.sidebarItemsSubscription?.unsubscribe();
-        this.sidebarFooterItemsSubscription?.unsubscribe();
-    }
-    get sidebarVisible$() {
-        return this.store.select(state => state[sidebarsFeatureKey].visible);
-    }
-    get sidearHasLogin$() {
-        return this.store.select(state => state[sidebarsFeatureKey].loginVisible);
-    }
-    get sidearHasSearch$() {
-        return this.store.select(state => state[sidebarsFeatureKey].searchVisible);
-    }
-    get sidebarItems$() {
-        return this.store.select(state => state[sidebarsFeatureKey].items);
-    }
-    setSidearSearchText(text) {
-        this.store.dispatch(SidebarActions.setSearchText({ text }));
-    }
-    setNavbarSearchText(text) {
-        this.store.dispatch(NavbarActions.setSearchText({ text }));
-    }
-    get sidearHasSettings$() {
-        return this.store.select(state => state[sidebarsFeatureKey].settingsVisible);
-    }
-    get sidearAppsVisible$() {
-        return this.store.select(state => state[sidebarsFeatureKey].appsVisible);
-    }
-    get navVisible$() {
-        return this.store.select(state => state[navbarsFeatureKey].visible);
-    }
-    get navSearchVisible$() {
-        return this.store.select(state => state[navbarsFeatureKey].searchVisible);
-    }
-    get navHeader$() {
-        return this.store.select(state => state[navbarsFeatureKey].header);
-    }
-    get isAuthenticated$() {
-        return this.authService.isAuthenticated$;
-    }
-    get user$() {
-        return this.authService.userInfo$;
-    }
-    get navLeftItems$() {
-        return this.store.select(state => state[navbarsFeatureKey].leftItems);
-    }
-    get navRightItems$() {
-        return this.store.select(state => state[navbarsFeatureKey].rightItems);
-    }
-    get theme() {
-        return this.store.selectSignal(state => state[appContextFeatureKey].theme)();
-    }
-    get navbarHasLogin$() {
-        return this.store.select(state => state[navbarsFeatureKey].loginVisible);
-    }
-    get navbarHasSettings$() {
-        return this.store.select(state => state[navbarsFeatureKey].settingsVisible);
-    }
-    get navbarHasApps$() {
-        return this.store.select(state => state[navbarsFeatureKey].appsVisible);
-    }
-    get navbarLayout$() {
-        return this.store.select(state => state[navbarsFeatureKey].actionsLayout);
-    }
-    get apps() {
-        return this.appsService.apps.filter(app => app.enabled && app.id); // Only enabled and initialized apps (with id). 
-    }
-    get separatorVisible$() {
-        return this.store.select(state => state[navbarsFeatureKey].separatorVisible);
-    }
     loginNav(event) {
         event?.preventDefault();
         event?.stopPropagation();
@@ -2285,83 +2363,86 @@ class AppTemplateComponent {
             this.mobileSettingsMenu()?.goToFirstSlide();
         }
     }
+    setSidearSearchText(text) {
+        this.store.dispatch(SidebarActions.setSearchText({ text }));
+    }
+    setNavbarSearchText(text) {
+        this.store.dispatch(NavbarActions.setSearchText({ text }));
+    }
     closeMobileMenu() {
         this.mobileOffcanvas()?.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppTemplateComponent, deps: [{ token: RLB_CFG_ENV }, { token: i1$1.Store }, { token: AppsService }, { token: AuthenticationService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: AppTemplateComponent, isStandalone: false, selector: "rlb-app-template", inputs: { modalContainerId: ["modal-container-id", "modalContainerId"], toastContainerIds: ["toast-container-ids", "toastContainerIds"] }, viewQueries: [{ propertyName: "mobileOffcanvas", first: true, predicate: ["mobileOffcanvas"], descendants: true, isSignal: true }, { propertyName: "mobileSettingsMenu", first: true, predicate: ["mobileSettingsMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"rlb-app\">\n  @if (navVisible$ | async) {\n    <rlb-navbar [dark]=\"theme === 'dark'\" [showSideBarToggler]=\"(sidebarVisible$ | async)\"  expand=\"lg\" class=\"border-bottom py-1 rlb-navbar\">\n      @if (navHeader$ | async; as header) {\n        <a rlb-navbar-brand href=\"#\">\n\n          @if (header.type === 'text') {\n            {{ header.text }}\n          }\n\n          @if (header.type === 'image') {\n            <img\n              [src]=\"header.src\"\n              [alt]=\"header.alt ?? 'Brand'\"\n              [height]=\"header.height ?? 40\"\n            />\n          }\n        </a>\n      }\n      @if (navSearchVisible$ | async) {\n        <rlb-navbar-form>\n          <rlb-input-group class=\"my-1 mx-3\" validate>\n            <rlb-input type=\"search\" class=\"search-input\" placeholder=\"Search\" [(ngModel)]=\"navSearchText\"\n                       (keyup.enter)=\"setNavbarSearchText(navSearchText)\" name=\"search\" size=\"small\">\n              <button after rlb-button outline type=\"submit\" (click)=\"setNavbarSearchText(navSearchText)\" size=\"sm\">\n                <i class=\"bi bi-search\"></i>\n              </button>\n            </rlb-input>\n          </rlb-input-group>\n        </rlb-navbar-form>\n      }\n\n      <!-- MOBILE VIEWS -->\n      <div rlb-custom-navbar-items class=\"d-flex d-lg-none\">\n        @if (isAuthenticated$ | async) {\n          <rlb-fab size=\"sm\" outline toggle=\"offcanvas\" toggle-target=\"mobileMenuOffcanvas\">\n            <i class=\"bi bi-three-dots-vertical\"></i>\n          </rlb-fab>\n\n          <rlb-offcanvas\n            #mobileOffcanvas\n            id=\"mobileMenuOffcanvas\"\n            [placement]=\"'end'\"\n            (statusChange)=\"onMobileMenuStatusChange($event)\"\n          >\n            <rlb-offcanvas-header class=\"border-bottom\">\n              <h5 rlb-offcanvas-title class=\"fw-bold mb-0\">Menu</h5>\n            </rlb-offcanvas-header>\n\n            <rlb-offcanvas-body class=\"p-0 overflow-x-hidden\">\n\n              <!-- Mobile Apps Grid -->\n              @if ((navbarHasApps$ | async) && apps.length > 1) {\n                <div class=\"border-bottom pb-2\">\n                  <rlb-app-dropdown-selector\n                    mode=\"mobile\"\n                    [apps]=\"apps\"\n                    [isAuthenticated]=\"isAuthenticated$ | async\"\n                    (appSelected)=\"selectApp($event, 'app')\"\n                  />\n                </div>\n              }\n\n              <!-- Mobile Settings Carousel -->\n              @if (((isAuthenticated$ | async)) || (navbarHasSettings$ | async)) {\n                <div class=\"pt-2\">\n                  <rlb-settings-dropdown-selector\n                    mode=\"mobile\"\n                    #mobileSettingsMenu\n                    [apps]=\"apps\"\n                    [isAuthenticated]=\"isAuthenticated$ | async\"\n                    (appSelected)=\"selectApp($event, 'settings')\"\n                  />\n                </div>\n              }\n\n            </rlb-offcanvas-body>\n          </rlb-offcanvas>\n        } @else {\n          <rlb-fab size=\"sm\" (click)=\"loginNav($event)\" [tooltip]=\"('core.account.login') |translate\">\n            <i class=\" bi bi-box-arrow-in-left\"></i>\n          </rlb-fab>\n        }\n\n      </div>\n\n      <rlb-navbar-items>\n        @for (navComponent of navLeftItems$ | async; track navComponent) {\n          <ng-container ngProjectAs=\"rlb-navbar-item\">\n            <ng-container *ngComponentOutlet=\"navComponent | leftComponent\"></ng-container>\n          </ng-container>\n        }\n      </rlb-navbar-items>\n\n      <rlb-navbar-items class=\"ms-auto align-items-center\">\n        @for (navComponent of navRightItems$ | async; track navComponent) {\n          <ng-container ngProjectAs=\"rlb-navbar-item\">\n            <ng-container *ngComponentOutlet=\"navComponent | rightComponent\"></ng-container>\n          </ng-container>\n        }\n        @if ((separatorVisible$ | async) && (isAuthenticated$ | async)) {\n          <rlb-navbar-separator />\n        }\n\n        <ng-container ngProjectAs=\"rlb-navbar-item\">\n          @if ((navbarLayout$ | async) == 'default') {\n            @if ((navbarHasLogin$ | async) && !(isAuthenticated$ | async)) {\n              <rlb-navbar-item (click)=\"loginNav($event)\">\n                <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.login') |translate\">\n                  <i class=\" bi bi-box-arrow-in-left\"></i>\n                </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.account.login' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if ((navbarHasLogin$ | async) && (isAuthenticated$ | async)) {\n              <rlb-navbar-item [router-link]=\"'/profile'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.title') |translate\">\n                <i class=\"bi bi-person\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.account.title' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if (navbarHasSettings$ | async) {\n              <rlb-navbar-item [router-link]=\"'/settings'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.settings.title') |translate\">\n                <i class=\"bi bi-gear\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.settings.title' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if ((navbarHasApps$ | async) && apps.length > 1) {\n              <rlb-navbar-item [router-link]=\"'/apps'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') |translate\">\n                <i class=\"bi bi-grid-3x3-gap-fill\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.apps.button' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n          } @else if ((navbarLayout$ | async) == 'dropdown') {\n            <!-- MODERN DROPDOWN MODE -->\n\n            <!--Unauthenticated Login -->\n            @if ((navbarHasLogin$ | async) && !(isAuthenticated$ | async)) {\n              <rlb-navbar-item (click)=\"loginNav($event)\">\n                <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.login') | translate\">\n                  <i class=\"bi bi-box-arrow-in-left fs-5\"></i>\n                </span>\n                <span class=\"ms-1 d-lg-none\">{{ 'core.account.login' | translate }}</span>\n              </rlb-navbar-item>\n            }\n\n            <!-- Profile & Settings Account Card -->\n            @if (((navbarHasSettings$ | async) && (isAuthenticated$ | async))) {\n              <rlb-settings-dropdown-selector\n                [apps]=\"apps\"\n                [isAuthenticated]=\"isAuthenticated$ | async\"\n                (appSelected)=\"selectApp($event, 'settings')\"\n              />\n            }\n\n            <!-- Apps Launcher -->\n            @if ((navbarHasApps$ | async) && (isAuthenticated$ | async) && apps.length > 1) {\n              <rlb-app-dropdown-selector\n                [apps]=\"apps\"\n                [isAuthenticated]=\"isAuthenticated$ | async\"\n                (appSelected)=\"selectApp($event, 'app')\"\n              />\n            }\n          }\n        </ng-container>\n      </rlb-navbar-items>\n    </rlb-navbar>\n  }\n  <div class=\"rlb-main-wrapper\">\n    @if ((sidebarVisible$ | async)) {\n      <rlb-sidebar [dark]=\"theme === 'dark'\" id=\"sidebar\" class=\"rlb-sidebar\">\n        @for (item of  (sidebarItems$ | async); track $index) {\n          <rlb-sidebar-item\n            *roles=\"item.action\"\n            [icon]=\"item.icon\" [link]=\"item.url\"\n            [title]=\"item.title\" [label]=\"item.label\"\n            [badgeCounter]=\"item.badgeCounter\"\n            (click)=\"onSideBarItemClick(item)\"\n            >\n            {{item.label}}\n            @for (subitem of item.items || []; track $index) {\n              <rlb-sidebar-item\n                *roles=\"subitem.action\"\n                [icon]=\"subitem.icon\"\n                [link]=\"subitem.url\"\n                [title]=\"subitem.title\"\n                [label]=\"subitem.label\"\n                [badgeCounter]=\"subitem.badgeCounter\"\n                (click)=\"onSideBarItemClick(subitem)\"\n                >\n                {{subitem.label}}\n              </rlb-sidebar-item>\n            }\n          </rlb-sidebar-item>\n        }\n      </rlb-sidebar>\n    }\n    <div class=\"rlb-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n@if (modalContainerId) {\n  <rlb-modal-container [id]=\"modalContainerId\" />\n}\n\n@if (toastContainerIds) {\n  @if (toastContainerIds.constructor.name === 'Array') {\n    @for (toastContainerId of toastContainerIds | asMulti; track toastContainerId) {\n      <rlb-toast-container [id]=\"toastContainerId\" />\n    }\n  } @else {\n    <rlb-toast-container class=\"position-fixed bottom-0 end-0 p-3\" [id]=\"toastContainerIds | asSingle\" />\n  }\n}\n", styles: [".separator{border-left:1px solid;padding:0 2px}\n"], dependencies: [{ kind: "directive", type: i1$6.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "inputId", "extValidation", "enable-validation"] }, { kind: "component", type: i2$1.InputGroupComponent, selector: "rlb-input-group", inputs: ["text", "validate", "size"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: i2$1.RlbFabComponent, selector: "rlb-fab", inputs: ["color", "size", "disabled", "outline", "position"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "directive", type: i2$1.NavbarBrandDirective, selector: "[rlb-navbar-brand]" }, { kind: "directive", type: i2$1.NavbarCustomItemsDirective, selector: "[rlb-custom-navbar-items]" }, { kind: "component", type: i2$1.NavbarComponent, selector: "rlb-navbar", inputs: ["dark", "showSideBarToggler", "color", "placement", "expand", "class", "enable-dropdown-toggler"] }, { kind: "component", type: i2$1.NavbarFormComponent, selector: "rlb-navbar-form", inputs: ["role", "class"] }, { kind: "component", type: i2$1.NavbarItemsComponent, selector: "rlb-navbar-items", inputs: ["scroll", "class"], outputs: ["click"] }, { kind: "component", type: i2$1.NavbarItemComponent, selector: "rlb-navbar-item", inputs: ["disabled", "router-link", "class"], outputs: ["click"] }, { kind: "component", type: i2$1.NavbarSeparatorComponent, selector: "rlb-navbar-separator", inputs: ["class"] }, { kind: "component", type: i2$1.OffcanvasComponent, selector: "rlb-offcanvas", inputs: ["id", "body-scroll", "scroll-backup", "close-manual", "placement", "responsive"], outputs: ["statusChange"] }, { kind: "component", type: i2$1.OffcanvasHeaderComponent, selector: "rlb-offcanvas-header", inputs: ["offcanvasId"] }, { kind: "component", type: i2$1.OffcanvasBodyComponent, selector: "rlb-offcanvas-body" }, { kind: "directive", type: i2$1.ToggleDirective, selector: "    button[toggle],    a[toggle],    rlb-navbar-item[toggle],    rlb-button-toolbar[toggle],    rlb-fab[toggle],", inputs: ["toggle", "toggle-target", "collapsed", "auto-close"] }, { kind: "component", type: i2$1.SidebarComponent, selector: "rlb-sidebar", inputs: ["dark", "rounded"] }, { kind: "component", type: i2$1.SidebarItemComponent, selector: "rlb-sidebar-item", inputs: ["title", "icon", "label", "link", "badgeCounter"], outputs: ["click"] }, { kind: "component", type: i2$1.ModalContainerComponent, selector: "rlb-modal-container", inputs: ["id"] }, { kind: "component", type: i2$1.ToastContainerComponent, selector: "rlb-toast-container", inputs: ["id"] }, { kind: "component", type: SettingsDropdownSelectorComponent, selector: "rlb-settings-dropdown-selector", inputs: ["mode", "apps", "isAuthenticated"], outputs: ["appSelected"] }, { kind: "component", type: AppDropdownSelectorComponent, selector: "rlb-app-dropdown-selector", inputs: ["mode", "apps", "isAuthenticated"], outputs: ["appSelected"] }, { kind: "directive", type: RlbRole, selector: "[roles]", inputs: ["roles"] }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsMultiPipe, name: "asMulti" }, { kind: "pipe", type: AsSinglePipe, name: "asSingle" }, { kind: "pipe", type: LeftComponentPipe, name: "leftComponent" }, { kind: "pipe", type: RightComponentPipe, name: "rightComponent" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppTemplateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AppTemplateComponent, isStandalone: true, selector: "rlb-app-template", inputs: { modalContainerId: { classPropertyName: "modalContainerId", publicName: "modal-container-id", isSignal: true, isRequired: true, transformFunction: null }, breadcrumbInput: { classPropertyName: "breadcrumbInput", publicName: "breadcrumb", isSignal: true, isRequired: false, transformFunction: null }, toastContainerIds: { classPropertyName: "toastContainerIds", publicName: "toast-container-ids", isSignal: true, isRequired: true, transformFunction: null } }, viewQueries: [{ propertyName: "mobileOffcanvas", first: true, predicate: ["mobileOffcanvas"], descendants: true, isSignal: true }, { propertyName: "mobileSettingsMenu", first: true, predicate: ["mobileSettingsMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"rlb-app\">\n  @if (navVisible()) {\n    <rlb-navbar [dark]=\"theme() === 'dark'\" [showSideBarToggler]=\"sidebarVisible()\"  expand=\"lg\" class=\"border-bottom py-1 rlb-navbar\">\n      @if (navHeader(); as header) {\n        <a rlb-navbar-brand href=\"#\">\n\n          @if (header.type === 'text') {\n            {{ header.text }}\n          }\n\n          @if (header.type === 'image') {\n            <img\n              [src]=\"header.src\"\n              [alt]=\"header.alt ?? 'Brand'\"\n              [height]=\"header.height ?? 40\"\n            />\n          }\n        </a>\n      }\n      @if (navSearchVisible()) {\n        <rlb-navbar-form>\n          <rlb-input-group class=\"my-1 mx-3\" validate>\n            <rlb-input type=\"search\" class=\"search-input\" placeholder=\"Search\" [(ngModel)]=\"navSearchText\"\n                       (keyup.enter)=\"setNavbarSearchText(navSearchText)\" name=\"search\" size=\"small\">\n              <button after rlb-button outline type=\"submit\" (click)=\"setNavbarSearchText(navSearchText)\" size=\"sm\">\n                <i class=\"bi bi-search\"></i>\n              </button>\n            </rlb-input>\n          </rlb-input-group>\n        </rlb-navbar-form>\n      }\n\n      <!-- MOBILE VIEWS -->\n      <div rlb-custom-navbar-items class=\"d-flex d-lg-none\">\n        @if (isAuthenticated()) {\n          <rlb-fab size=\"sm\" outline toggle=\"offcanvas\" toggle-target=\"mobileMenuOffcanvas\">\n            <i class=\"bi bi-three-dots-vertical\"></i>\n          </rlb-fab>\n\n          <rlb-offcanvas\n            #mobileOffcanvas\n            id=\"mobileMenuOffcanvas\"\n            [placement]=\"'end'\"\n            (statusChange)=\"onMobileMenuStatusChange($event)\"\n          >\n            <rlb-offcanvas-header class=\"border-bottom\">\n              <h5 rlb-offcanvas-title class=\"fw-bold mb-0\">Menu</h5>\n            </rlb-offcanvas-header>\n\n            <rlb-offcanvas-body class=\"p-0 overflow-x-hidden\">\n\n              <!-- Mobile Apps Grid -->\n              @if (navbarHasApps() && apps().length > 1) {\n                <div class=\"border-bottom pb-2\">\n                  <rlb-app-dropdown-selector\n                    mode=\"mobile\"\n                    [apps]=\"apps()\"\n                    [isAuthenticated]=\"isAuthenticated()\"\n                    (appSelected)=\"selectApp($event, 'app')\"\n                  />\n                </div>\n              }\n\n              <!-- Mobile Settings Carousel -->\n              @if (isAuthenticated() || navbarHasSettings()) {\n                <div class=\"pt-2\">\n                  <rlb-settings-dropdown-selector\n                    mode=\"mobile\"\n                    #mobileSettingsMenu\n                    [apps]=\"apps()\"\n                    [isAuthenticated]=\"isAuthenticated()\"\n                    (appSelected)=\"selectApp($event, 'settings')\"\n                  />\n                </div>\n              }\n\n            </rlb-offcanvas-body>\n          </rlb-offcanvas>\n        } @else {\n          <rlb-fab size=\"sm\" (click)=\"loginNav($event)\" [tooltip]=\"('core.account.login') |translate\">\n            <i class=\" bi bi-box-arrow-in-left\"></i>\n          </rlb-fab>\n        }\n\n      </div>\n\n      <rlb-navbar-items>\n        @for (navComponent of navLeftItems(); track navComponent) {\n          <ng-container ngProjectAs=\"rlb-navbar-item\">\n            <ng-container *ngComponentOutlet=\"navComponent | leftComponent\"></ng-container>\n          </ng-container>\n        }\n      </rlb-navbar-items>\n\n      <rlb-navbar-items class=\"ms-auto align-items-center\">\n        @for (navComponent of navRightItems(); track navComponent) {\n          <ng-container ngProjectAs=\"rlb-navbar-item\">\n            <ng-container *ngComponentOutlet=\"navComponent | rightComponent\"></ng-container>\n          </ng-container>\n        }\n        @if (separatorVisible() && isAuthenticated()) {\n          <rlb-navbar-separator />\n        }\n\n        <ng-container ngProjectAs=\"rlb-navbar-item\">\n          @if (navbarLayout() == 'default') {\n            @if (navbarHasLogin() && !isAuthenticated()) {\n              <rlb-navbar-item (click)=\"loginNav($event)\">\n                <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.login') |translate\">\n                  <i class=\" bi bi-box-arrow-in-left\"></i>\n                </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.account.login' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if (navbarHasLogin() && isAuthenticated()) {\n              <rlb-navbar-item [router-link]=\"'/profile'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.title') |translate\">\n                <i class=\"bi bi-person\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.account.title' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if (navbarHasSettings()) {\n              <rlb-navbar-item [router-link]=\"'/settings'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.settings.title') |translate\">\n                <i class=\"bi bi-gear\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.settings.title' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if (navbarHasApps() && apps().length > 1) {\n              <rlb-navbar-item [router-link]=\"'/apps'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') |translate\">\n                <i class=\"bi bi-grid-3x3-gap-fill\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.apps.button' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n          } @else if (navbarLayout() == 'dropdown') {\n            <!-- MODERN DROPDOWN MODE -->\n\n            <!--Unauthenticated Login -->\n            @if (navbarHasLogin() && !isAuthenticated()) {\n              <rlb-navbar-item (click)=\"loginNav($event)\">\n                <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.login') | translate\">\n                  <i class=\"bi bi-box-arrow-in-left fs-5\"></i>\n                </span>\n                <span class=\"ms-1 d-lg-none\">{{ 'core.account.login' | translate }}</span>\n              </rlb-navbar-item>\n            }\n\n            <!-- Profile & Settings Account Card -->\n            @if (navbarHasSettings() && isAuthenticated()) {\n              <rlb-settings-dropdown-selector\n                [apps]=\"apps()\"\n                [isAuthenticated]=\"isAuthenticated()\"\n                (appSelected)=\"selectApp($event, 'settings')\"\n              />\n            }\n\n            <!-- Apps Launcher -->\n            @if (navbarHasApps() && isAuthenticated() && apps().length > 1) {\n              <rlb-app-dropdown-selector\n                [apps]=\"apps()\"\n                [isAuthenticated]=\"isAuthenticated()\"\n                (appSelected)=\"selectApp($event, 'app')\"\n              />\n            }\n          }\n        </ng-container>\n      </rlb-navbar-items>\n    </rlb-navbar>\n  }\n  <div class=\"rlb-main-wrapper\">\n    @if (sidebarVisible()) {\n      <rlb-sidebar [dark]=\"theme() === 'dark'\" id=\"sidebar\" class=\"rlb-sidebar\">\n        @for (item of sidebarItems(); track $index) {\n          <rlb-sidebar-item\n            *roles=\"item.action\"\n            [icon]=\"item.icon\" [link]=\"item.url\"\n            [title]=\"item.title\" [label]=\"item.label\"\n            [badgeCounter]=\"item.badgeCounter\"\n            (click)=\"onSideBarItemClick(item)\"\n            >\n            {{item.label}}\n            @for (subitem of item.items || []; track $index) {\n              <rlb-sidebar-item\n                *roles=\"subitem.action\"\n                [icon]=\"subitem.icon\"\n                [link]=\"subitem.url\"\n                [title]=\"subitem.title\"\n                [label]=\"subitem.label\"\n                [badgeCounter]=\"subitem.badgeCounter\"\n                (click)=\"onSideBarItemClick(subitem)\"\n                >\n                {{subitem.label}}\n              </rlb-sidebar-item>\n            }\n          </rlb-sidebar-item>\n        }\n      </rlb-sidebar>\n    }\n    <div class=\"rlb-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<!--@if (modalContainerId()) {-->\n<!--  <rlb-modal-container [id]=\"modalContainerId()\" />-->\n<!--}-->\n\n<!--@if (toastContainerIds()) {-->\n<!--  @if (Array.isArray(toastContainerIds())) {-->\n<!--    @for (toastContainerId of toastContainerIds() | asMulti; track toastContainerId) {-->\n<!--      <rlb-toast-container [id]=\"toastContainerId\" />-->\n<!--    }-->\n<!--  } @else {-->\n<!--    <rlb-toast-container class=\"position-fixed bottom-0 end-0 p-3\" [id]=\"toastContainerIds() | asSingle\" />-->\n<!--  }-->\n<!--}-->\n", styles: [".separator{border-left:1px solid;padding:0 2px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: TranslateModule }, { kind: "component", type: NavbarComponent, selector: "rlb-navbar", inputs: ["dark", "showSideBarToggler", "color", "placement", "expand", "class", "enable-dropdown-toggler"] }, { kind: "directive", type: NavbarBrandDirective, selector: "[rlb-navbar-brand]" }, { kind: "component", type: NavbarFormComponent, selector: "rlb-navbar-form", inputs: ["role", "class"] }, { kind: "component", type: NavbarItemsComponent, selector: "rlb-navbar-items", inputs: ["scroll", "class"], outputs: ["click"] }, { kind: "component", type: NavbarItemComponent, selector: "rlb-navbar-item", inputs: ["disabled", "router-link", "class"], outputs: ["click"] }, { kind: "component", type: NavbarSeparatorComponent, selector: "rlb-navbar-separator", inputs: ["class"] }, { kind: "component", type: SidebarComponent, selector: "rlb-sidebar", inputs: ["dark", "rounded"] }, { kind: "component", type: SidebarItemComponent, selector: "rlb-sidebar-item", inputs: ["title", "icon", "label", "link", "badgeCounter"], outputs: ["click"] }, { kind: "component", type: OffcanvasComponent, selector: "rlb-offcanvas", inputs: ["id", "body-scroll", "scroll-backup", "close-manual", "placement", "responsive"], outputs: ["statusChange"] }, { kind: "component", type: OffcanvasHeaderComponent, selector: "rlb-offcanvas-header", inputs: ["offcanvasId"] }, { kind: "component", type: OffcanvasBodyComponent, selector: "rlb-offcanvas-body" }, { kind: "component", type: RlbFabComponent, selector: "rlb-fab", inputs: ["color", "size", "disabled", "outline", "position"] }, { kind: "component", type: InputGroupComponent, selector: "rlb-input-group", inputs: ["text", "validate", "size"] }, { kind: "component", type: InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "inputId", "extValidation", "enable-validation"] }, { kind: "directive", type: TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "directive", type: RlbRole, selector: "[roles]", inputs: ["roles"] }, { kind: "component", type: AppDropdownSelectorComponent, selector: "rlb-app-dropdown-selector", inputs: ["mode", "apps", "isAuthenticated"], outputs: ["appSelected"] }, { kind: "component", type: SettingsDropdownSelectorComponent, selector: "rlb-settings-dropdown-selector", inputs: ["mode", "apps", "isAuthenticated"], outputs: ["appSelected"] }, { kind: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "directive", type: ToggleDirective, selector: "    button[toggle],    a[toggle],    rlb-navbar-item[toggle],    rlb-button-toolbar[toggle],    rlb-fab[toggle],", inputs: ["toggle", "toggle-target", "collapsed", "auto-close"] }, { kind: "pipe", type: i1$4.TranslatePipe, name: "translate" }, { kind: "pipe", type: LeftComponentPipe, name: "leftComponent" }, { kind: "pipe", type: RightComponentPipe, name: "rightComponent" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppTemplateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-app-template', standalone: false, template: "<div class=\"rlb-app\">\n  @if (navVisible$ | async) {\n    <rlb-navbar [dark]=\"theme === 'dark'\" [showSideBarToggler]=\"(sidebarVisible$ | async)\"  expand=\"lg\" class=\"border-bottom py-1 rlb-navbar\">\n      @if (navHeader$ | async; as header) {\n        <a rlb-navbar-brand href=\"#\">\n\n          @if (header.type === 'text') {\n            {{ header.text }}\n          }\n\n          @if (header.type === 'image') {\n            <img\n              [src]=\"header.src\"\n              [alt]=\"header.alt ?? 'Brand'\"\n              [height]=\"header.height ?? 40\"\n            />\n          }\n        </a>\n      }\n      @if (navSearchVisible$ | async) {\n        <rlb-navbar-form>\n          <rlb-input-group class=\"my-1 mx-3\" validate>\n            <rlb-input type=\"search\" class=\"search-input\" placeholder=\"Search\" [(ngModel)]=\"navSearchText\"\n                       (keyup.enter)=\"setNavbarSearchText(navSearchText)\" name=\"search\" size=\"small\">\n              <button after rlb-button outline type=\"submit\" (click)=\"setNavbarSearchText(navSearchText)\" size=\"sm\">\n                <i class=\"bi bi-search\"></i>\n              </button>\n            </rlb-input>\n          </rlb-input-group>\n        </rlb-navbar-form>\n      }\n\n      <!-- MOBILE VIEWS -->\n      <div rlb-custom-navbar-items class=\"d-flex d-lg-none\">\n        @if (isAuthenticated$ | async) {\n          <rlb-fab size=\"sm\" outline toggle=\"offcanvas\" toggle-target=\"mobileMenuOffcanvas\">\n            <i class=\"bi bi-three-dots-vertical\"></i>\n          </rlb-fab>\n\n          <rlb-offcanvas\n            #mobileOffcanvas\n            id=\"mobileMenuOffcanvas\"\n            [placement]=\"'end'\"\n            (statusChange)=\"onMobileMenuStatusChange($event)\"\n          >\n            <rlb-offcanvas-header class=\"border-bottom\">\n              <h5 rlb-offcanvas-title class=\"fw-bold mb-0\">Menu</h5>\n            </rlb-offcanvas-header>\n\n            <rlb-offcanvas-body class=\"p-0 overflow-x-hidden\">\n\n              <!-- Mobile Apps Grid -->\n              @if ((navbarHasApps$ | async) && apps.length > 1) {\n                <div class=\"border-bottom pb-2\">\n                  <rlb-app-dropdown-selector\n                    mode=\"mobile\"\n                    [apps]=\"apps\"\n                    [isAuthenticated]=\"isAuthenticated$ | async\"\n                    (appSelected)=\"selectApp($event, 'app')\"\n                  />\n                </div>\n              }\n\n              <!-- Mobile Settings Carousel -->\n              @if (((isAuthenticated$ | async)) || (navbarHasSettings$ | async)) {\n                <div class=\"pt-2\">\n                  <rlb-settings-dropdown-selector\n                    mode=\"mobile\"\n                    #mobileSettingsMenu\n                    [apps]=\"apps\"\n                    [isAuthenticated]=\"isAuthenticated$ | async\"\n                    (appSelected)=\"selectApp($event, 'settings')\"\n                  />\n                </div>\n              }\n\n            </rlb-offcanvas-body>\n          </rlb-offcanvas>\n        } @else {\n          <rlb-fab size=\"sm\" (click)=\"loginNav($event)\" [tooltip]=\"('core.account.login') |translate\">\n            <i class=\" bi bi-box-arrow-in-left\"></i>\n          </rlb-fab>\n        }\n\n      </div>\n\n      <rlb-navbar-items>\n        @for (navComponent of navLeftItems$ | async; track navComponent) {\n          <ng-container ngProjectAs=\"rlb-navbar-item\">\n            <ng-container *ngComponentOutlet=\"navComponent | leftComponent\"></ng-container>\n          </ng-container>\n        }\n      </rlb-navbar-items>\n\n      <rlb-navbar-items class=\"ms-auto align-items-center\">\n        @for (navComponent of navRightItems$ | async; track navComponent) {\n          <ng-container ngProjectAs=\"rlb-navbar-item\">\n            <ng-container *ngComponentOutlet=\"navComponent | rightComponent\"></ng-container>\n          </ng-container>\n        }\n        @if ((separatorVisible$ | async) && (isAuthenticated$ | async)) {\n          <rlb-navbar-separator />\n        }\n\n        <ng-container ngProjectAs=\"rlb-navbar-item\">\n          @if ((navbarLayout$ | async) == 'default') {\n            @if ((navbarHasLogin$ | async) && !(isAuthenticated$ | async)) {\n              <rlb-navbar-item (click)=\"loginNav($event)\">\n                <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.login') |translate\">\n                  <i class=\" bi bi-box-arrow-in-left\"></i>\n                </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.account.login' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if ((navbarHasLogin$ | async) && (isAuthenticated$ | async)) {\n              <rlb-navbar-item [router-link]=\"'/profile'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.title') |translate\">\n                <i class=\"bi bi-person\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.account.title' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if (navbarHasSettings$ | async) {\n              <rlb-navbar-item [router-link]=\"'/settings'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.settings.title') |translate\">\n                <i class=\"bi bi-gear\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.settings.title' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if ((navbarHasApps$ | async) && apps.length > 1) {\n              <rlb-navbar-item [router-link]=\"'/apps'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') |translate\">\n                <i class=\"bi bi-grid-3x3-gap-fill\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.apps.button' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n          } @else if ((navbarLayout$ | async) == 'dropdown') {\n            <!-- MODERN DROPDOWN MODE -->\n\n            <!--Unauthenticated Login -->\n            @if ((navbarHasLogin$ | async) && !(isAuthenticated$ | async)) {\n              <rlb-navbar-item (click)=\"loginNav($event)\">\n                <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.login') | translate\">\n                  <i class=\"bi bi-box-arrow-in-left fs-5\"></i>\n                </span>\n                <span class=\"ms-1 d-lg-none\">{{ 'core.account.login' | translate }}</span>\n              </rlb-navbar-item>\n            }\n\n            <!-- Profile & Settings Account Card -->\n            @if (((navbarHasSettings$ | async) && (isAuthenticated$ | async))) {\n              <rlb-settings-dropdown-selector\n                [apps]=\"apps\"\n                [isAuthenticated]=\"isAuthenticated$ | async\"\n                (appSelected)=\"selectApp($event, 'settings')\"\n              />\n            }\n\n            <!-- Apps Launcher -->\n            @if ((navbarHasApps$ | async) && (isAuthenticated$ | async) && apps.length > 1) {\n              <rlb-app-dropdown-selector\n                [apps]=\"apps\"\n                [isAuthenticated]=\"isAuthenticated$ | async\"\n                (appSelected)=\"selectApp($event, 'app')\"\n              />\n            }\n          }\n        </ng-container>\n      </rlb-navbar-items>\n    </rlb-navbar>\n  }\n  <div class=\"rlb-main-wrapper\">\n    @if ((sidebarVisible$ | async)) {\n      <rlb-sidebar [dark]=\"theme === 'dark'\" id=\"sidebar\" class=\"rlb-sidebar\">\n        @for (item of  (sidebarItems$ | async); track $index) {\n          <rlb-sidebar-item\n            *roles=\"item.action\"\n            [icon]=\"item.icon\" [link]=\"item.url\"\n            [title]=\"item.title\" [label]=\"item.label\"\n            [badgeCounter]=\"item.badgeCounter\"\n            (click)=\"onSideBarItemClick(item)\"\n            >\n            {{item.label}}\n            @for (subitem of item.items || []; track $index) {\n              <rlb-sidebar-item\n                *roles=\"subitem.action\"\n                [icon]=\"subitem.icon\"\n                [link]=\"subitem.url\"\n                [title]=\"subitem.title\"\n                [label]=\"subitem.label\"\n                [badgeCounter]=\"subitem.badgeCounter\"\n                (click)=\"onSideBarItemClick(subitem)\"\n                >\n                {{subitem.label}}\n              </rlb-sidebar-item>\n            }\n          </rlb-sidebar-item>\n        }\n      </rlb-sidebar>\n    }\n    <div class=\"rlb-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n@if (modalContainerId) {\n  <rlb-modal-container [id]=\"modalContainerId\" />\n}\n\n@if (toastContainerIds) {\n  @if (toastContainerIds.constructor.name === 'Array') {\n    @for (toastContainerId of toastContainerIds | asMulti; track toastContainerId) {\n      <rlb-toast-container [id]=\"toastContainerId\" />\n    }\n  } @else {\n    <rlb-toast-container class=\"position-fixed bottom-0 end-0 p-3\" [id]=\"toastContainerIds | asSingle\" />\n  }\n}\n", styles: [".separator{border-left:1px solid;padding:0 2px}\n"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [RLB_CFG_ENV]
-                }] }, { type: i1$1.Store }, { type: AppsService }, { type: AuthenticationService }, { type: i2.Router }], propDecorators: { modalContainerId: [{
-                type: Input,
-                args: ['modal-container-id']
-            }], toastContainerIds: [{
-                type: Input,
-                args: ['toast-container-ids']
-            }], mobileOffcanvas: [{ type: i0.ViewChild, args: ['mobileOffcanvas', { isSignal: true }] }], mobileSettingsMenu: [{ type: i0.ViewChild, args: ['mobileSettingsMenu', { isSignal: true }] }] } });
+            args: [{ selector: 'rlb-app-template', imports: [
+                        CommonModule,
+                        FormsModule,
+                        RouterModule,
+                        TranslateModule,
+                        NgComponentOutlet,
+                        NavbarComponent,
+                        NavbarBrandDirective,
+                        NavbarFormComponent,
+                        NavbarItemsComponent,
+                        NavbarItemComponent,
+                        NavbarSeparatorComponent,
+                        SidebarComponent,
+                        SidebarItemComponent,
+                        OffcanvasComponent,
+                        OffcanvasHeaderComponent,
+                        OffcanvasBodyComponent,
+                        RlbFabComponent,
+                        InputGroupComponent,
+                        InputComponent,
+                        TooltipDirective,
+                        LeftComponentPipe,
+                        RightComponentPipe,
+                        RlbRole,
+                        AppDropdownSelectorComponent,
+                        SettingsDropdownSelectorComponent,
+                        ButtonComponent,
+                        ToggleDirective,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"rlb-app\">\n  @if (navVisible()) {\n    <rlb-navbar [dark]=\"theme() === 'dark'\" [showSideBarToggler]=\"sidebarVisible()\"  expand=\"lg\" class=\"border-bottom py-1 rlb-navbar\">\n      @if (navHeader(); as header) {\n        <a rlb-navbar-brand href=\"#\">\n\n          @if (header.type === 'text') {\n            {{ header.text }}\n          }\n\n          @if (header.type === 'image') {\n            <img\n              [src]=\"header.src\"\n              [alt]=\"header.alt ?? 'Brand'\"\n              [height]=\"header.height ?? 40\"\n            />\n          }\n        </a>\n      }\n      @if (navSearchVisible()) {\n        <rlb-navbar-form>\n          <rlb-input-group class=\"my-1 mx-3\" validate>\n            <rlb-input type=\"search\" class=\"search-input\" placeholder=\"Search\" [(ngModel)]=\"navSearchText\"\n                       (keyup.enter)=\"setNavbarSearchText(navSearchText)\" name=\"search\" size=\"small\">\n              <button after rlb-button outline type=\"submit\" (click)=\"setNavbarSearchText(navSearchText)\" size=\"sm\">\n                <i class=\"bi bi-search\"></i>\n              </button>\n            </rlb-input>\n          </rlb-input-group>\n        </rlb-navbar-form>\n      }\n\n      <!-- MOBILE VIEWS -->\n      <div rlb-custom-navbar-items class=\"d-flex d-lg-none\">\n        @if (isAuthenticated()) {\n          <rlb-fab size=\"sm\" outline toggle=\"offcanvas\" toggle-target=\"mobileMenuOffcanvas\">\n            <i class=\"bi bi-three-dots-vertical\"></i>\n          </rlb-fab>\n\n          <rlb-offcanvas\n            #mobileOffcanvas\n            id=\"mobileMenuOffcanvas\"\n            [placement]=\"'end'\"\n            (statusChange)=\"onMobileMenuStatusChange($event)\"\n          >\n            <rlb-offcanvas-header class=\"border-bottom\">\n              <h5 rlb-offcanvas-title class=\"fw-bold mb-0\">Menu</h5>\n            </rlb-offcanvas-header>\n\n            <rlb-offcanvas-body class=\"p-0 overflow-x-hidden\">\n\n              <!-- Mobile Apps Grid -->\n              @if (navbarHasApps() && apps().length > 1) {\n                <div class=\"border-bottom pb-2\">\n                  <rlb-app-dropdown-selector\n                    mode=\"mobile\"\n                    [apps]=\"apps()\"\n                    [isAuthenticated]=\"isAuthenticated()\"\n                    (appSelected)=\"selectApp($event, 'app')\"\n                  />\n                </div>\n              }\n\n              <!-- Mobile Settings Carousel -->\n              @if (isAuthenticated() || navbarHasSettings()) {\n                <div class=\"pt-2\">\n                  <rlb-settings-dropdown-selector\n                    mode=\"mobile\"\n                    #mobileSettingsMenu\n                    [apps]=\"apps()\"\n                    [isAuthenticated]=\"isAuthenticated()\"\n                    (appSelected)=\"selectApp($event, 'settings')\"\n                  />\n                </div>\n              }\n\n            </rlb-offcanvas-body>\n          </rlb-offcanvas>\n        } @else {\n          <rlb-fab size=\"sm\" (click)=\"loginNav($event)\" [tooltip]=\"('core.account.login') |translate\">\n            <i class=\" bi bi-box-arrow-in-left\"></i>\n          </rlb-fab>\n        }\n\n      </div>\n\n      <rlb-navbar-items>\n        @for (navComponent of navLeftItems(); track navComponent) {\n          <ng-container ngProjectAs=\"rlb-navbar-item\">\n            <ng-container *ngComponentOutlet=\"navComponent | leftComponent\"></ng-container>\n          </ng-container>\n        }\n      </rlb-navbar-items>\n\n      <rlb-navbar-items class=\"ms-auto align-items-center\">\n        @for (navComponent of navRightItems(); track navComponent) {\n          <ng-container ngProjectAs=\"rlb-navbar-item\">\n            <ng-container *ngComponentOutlet=\"navComponent | rightComponent\"></ng-container>\n          </ng-container>\n        }\n        @if (separatorVisible() && isAuthenticated()) {\n          <rlb-navbar-separator />\n        }\n\n        <ng-container ngProjectAs=\"rlb-navbar-item\">\n          @if (navbarLayout() == 'default') {\n            @if (navbarHasLogin() && !isAuthenticated()) {\n              <rlb-navbar-item (click)=\"loginNav($event)\">\n                <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.login') |translate\">\n                  <i class=\" bi bi-box-arrow-in-left\"></i>\n                </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.account.login' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if (navbarHasLogin() && isAuthenticated()) {\n              <rlb-navbar-item [router-link]=\"'/profile'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.title') |translate\">\n                <i class=\"bi bi-person\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.account.title' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if (navbarHasSettings()) {\n              <rlb-navbar-item [router-link]=\"'/settings'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.settings.title') |translate\">\n                <i class=\"bi bi-gear\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.settings.title' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n            @if (navbarHasApps() && apps().length > 1) {\n              <rlb-navbar-item [router-link]=\"'/apps'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') |translate\">\n                <i class=\"bi bi-grid-3x3-gap-fill\"></i>\n              </span>\n                <span class=\"ms-1 d-lg-none\">{{'core.apps.button' | translate}}</span>\n              </rlb-navbar-item>\n            }\n\n          } @else if (navbarLayout() == 'dropdown') {\n            <!-- MODERN DROPDOWN MODE -->\n\n            <!--Unauthenticated Login -->\n            @if (navbarHasLogin() && !isAuthenticated()) {\n              <rlb-navbar-item (click)=\"loginNav($event)\">\n                <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.login') | translate\">\n                  <i class=\"bi bi-box-arrow-in-left fs-5\"></i>\n                </span>\n                <span class=\"ms-1 d-lg-none\">{{ 'core.account.login' | translate }}</span>\n              </rlb-navbar-item>\n            }\n\n            <!-- Profile & Settings Account Card -->\n            @if (navbarHasSettings() && isAuthenticated()) {\n              <rlb-settings-dropdown-selector\n                [apps]=\"apps()\"\n                [isAuthenticated]=\"isAuthenticated()\"\n                (appSelected)=\"selectApp($event, 'settings')\"\n              />\n            }\n\n            <!-- Apps Launcher -->\n            @if (navbarHasApps() && isAuthenticated() && apps().length > 1) {\n              <rlb-app-dropdown-selector\n                [apps]=\"apps()\"\n                [isAuthenticated]=\"isAuthenticated()\"\n                (appSelected)=\"selectApp($event, 'app')\"\n              />\n            }\n          }\n        </ng-container>\n      </rlb-navbar-items>\n    </rlb-navbar>\n  }\n  <div class=\"rlb-main-wrapper\">\n    @if (sidebarVisible()) {\n      <rlb-sidebar [dark]=\"theme() === 'dark'\" id=\"sidebar\" class=\"rlb-sidebar\">\n        @for (item of sidebarItems(); track $index) {\n          <rlb-sidebar-item\n            *roles=\"item.action\"\n            [icon]=\"item.icon\" [link]=\"item.url\"\n            [title]=\"item.title\" [label]=\"item.label\"\n            [badgeCounter]=\"item.badgeCounter\"\n            (click)=\"onSideBarItemClick(item)\"\n            >\n            {{item.label}}\n            @for (subitem of item.items || []; track $index) {\n              <rlb-sidebar-item\n                *roles=\"subitem.action\"\n                [icon]=\"subitem.icon\"\n                [link]=\"subitem.url\"\n                [title]=\"subitem.title\"\n                [label]=\"subitem.label\"\n                [badgeCounter]=\"subitem.badgeCounter\"\n                (click)=\"onSideBarItemClick(subitem)\"\n                >\n                {{subitem.label}}\n              </rlb-sidebar-item>\n            }\n          </rlb-sidebar-item>\n        }\n      </rlb-sidebar>\n    }\n    <div class=\"rlb-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<!--@if (modalContainerId()) {-->\n<!--  <rlb-modal-container [id]=\"modalContainerId()\" />-->\n<!--}-->\n\n<!--@if (toastContainerIds()) {-->\n<!--  @if (Array.isArray(toastContainerIds())) {-->\n<!--    @for (toastContainerId of toastContainerIds() | asMulti; track toastContainerId) {-->\n<!--      <rlb-toast-container [id]=\"toastContainerId\" />-->\n<!--    }-->\n<!--  } @else {-->\n<!--    <rlb-toast-container class=\"position-fixed bottom-0 end-0 p-3\" [id]=\"toastContainerIds() | asSingle\" />-->\n<!--  }-->\n<!--}-->\n", styles: [".separator{border-left:1px solid;padding:0 2px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { modalContainerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal-container-id", required: true }] }], breadcrumbInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumb", required: false }] }], toastContainerIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast-container-ids", required: true }] }], mobileOffcanvas: [{ type: i0.ViewChild, args: ['mobileOffcanvas', { isSignal: true }] }], mobileSettingsMenu: [{ type: i0.ViewChild, args: ['mobileSettingsMenu', { isSignal: true }] }] } });
 
 class BaseComponent {
-    constructor(breakpointObserver, platformId) {
-        this.breakpointObserver = breakpointObserver;
-        this.platformId = platformId;
-    }
-    get isHandset$() {
-        if (isPlatformServer(this.platformId)) {
-            return of(true);
-        }
-        else {
-            return this.breakpointObserver.observe(Breakpoints.Handset)
-                .pipe(map(result => result.matches), shareReplay());
-        }
-    }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: BaseComponent, deps: [{ token: i1$7.BreakpointObserver }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: BaseComponent, isStandalone: false, selector: "rlb-base-template", inputs: { breadcrumb: "breadcrumb", title: "title", subtitle: "subtitle" }, ngImport: i0, template: "<div class=\" mb-3\">\n  @if (!(isHandset$ | async)) {\n    <div class=\"container-fluid\">\n      <div class=\"row mt-1\">\n        <div class=\"col-xl-8 col-lg-10 col-md-12 col-sm-12 col-xs-12 mx-auto\">\n          <div class=\"row\">\n            <div class=\"col-12 pb-0\">\n              @if (breadcrumb) {\n                <rlb-breadcrumb [items]=\"breadcrumb\"></rlb-breadcrumb>\n              }\n              <h1 class=\"pt-5 pb-0 text-center\">\n                {{title}}\n              </h1>\n            </div>\n          </div>\n          @if (subtitle) {\n            <div class=\"row\">\n              <div class=\"col-12 pb-12\">\n                <span class=\"d-block text-h6 text-center\">\n                  {{subtitle}}\n                </span>\n              </div>\n            </div>\n          }\n          <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n          <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n        </div>\n      </div>\n    </div>\n  } @else {\n    <!--old ng-template #mobileMode-->\n    <div class=\"row\">\n      <div class=\"col-12 pb-0\">\n        <h1 class=\"pt-5 pb-0 text-center\">\n          {{title}}\n        </h1>\n      </div>\n    </div>\n    @if (subtitle) {\n      <div class=\"row\">\n        <div class=\"col-12 pb-7\">\n          <div class=\"d-block text-h6 text-center\">\n            {{subtitle}}\n          </div>\n        </div>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"mobile\"></ng-container>\n  }\n</div>\n\n<ng-template #all>\n  <ng-content select=\"[all]\"></ng-content>\n</ng-template>\n\n<ng-template #default>\n  <ng-content select=\"[default]\"></ng-content>\n</ng-template>\n\n<ng-template #mobile>\n  <ng-content select=\"[mobile]\"></ng-content>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.BreadcrumbComponent, selector: "rlb-breadcrumb", inputs: ["divider", "items", "cssClasses"] }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: BaseComponent, decorators: [{
+    constructor() {
+        this.breakpointObserver = inject(BreakpointObserver);
+        this.platformId = inject(PLATFORM_ID);
+        this.breadcrumbInput = input(undefined, { ...(ngDevMode ? { debugName: "breadcrumbInput" } : /* istanbul ignore next */ {}), alias: 'breadcrumb' });
+        this.breadcrumb = computed(() => this.breadcrumbInput() ?? [], ...(ngDevMode ? [{ debugName: "breadcrumb" }] : /* istanbul ignore next */ []));
+        this.title = input.required(...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : /* istanbul ignore next */ []));
+        this.isHandset = toSignal(isPlatformServer(this.platformId)
+            ? of(true)
+            : this.breakpointObserver.observe(Breakpoints.Handset).pipe(map(result => result.matches)), { initialValue: true });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: BaseComponent, isStandalone: true, selector: "rlb-base-template", inputs: { breadcrumbInput: { classPropertyName: "breadcrumbInput", publicName: "breadcrumb", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\" mb-3\">\n  @if (!isHandset()) {\n    <div class=\"container-fluid\">\n      <div class=\"row mt-1\">\n        <div class=\"col-xl-8 col-lg-10 col-md-12 col-sm-12 col-xs-12 mx-auto\">\n          <div class=\"row\">\n            <div class=\"col-12 pb-0\">\n              @if (breadcrumb()) {\n                <rlb-breadcrumb [items]=\"breadcrumb()\"></rlb-breadcrumb>\n              }\n              <h1 class=\"pt-5 pb-0 text-center\">\n                {{title()}}\n              </h1>\n            </div>\n          </div>\n          @if (subtitle()) {\n            <div class=\"row\">\n              <div class=\"col-12 pb-12\">\n                <span class=\"d-block text-h6 text-center\">\n                  {{subtitle()}}\n                </span>\n              </div>\n            </div>\n          }\n          <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n          <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n        </div>\n      </div>\n    </div>\n  } @else {\n    <!--old ng-template #mobileMode-->\n    <div class=\"row\">\n      <div class=\"col-12 pb-0\">\n        <h1 class=\"pt-5 pb-0 text-center\">\n          {{title()}}\n        </h1>\n      </div>\n    </div>\n    @if (subtitle()) {\n      <div class=\"row\">\n        <div class=\"col-12 pb-7\">\n          <div class=\"d-block text-h6 text-center\">\n            {{subtitle()}}\n          </div>\n        </div>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"mobile\"></ng-container>\n  }\n</div>\n\n\n<ng-template #all>\n  <ng-content select=\"[all]\"></ng-content>\n</ng-template>\n\n<ng-template #default>\n  <ng-content select=\"[default]\"></ng-content>\n</ng-template>\n\n<ng-template #mobile>\n  <ng-content select=\"[mobile]\"></ng-content>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: BreadcrumbComponent, selector: "rlb-breadcrumb", inputs: ["divider", "items", "cssClasses"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: BaseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-base-template', standalone: false, template: "<div class=\" mb-3\">\n  @if (!(isHandset$ | async)) {\n    <div class=\"container-fluid\">\n      <div class=\"row mt-1\">\n        <div class=\"col-xl-8 col-lg-10 col-md-12 col-sm-12 col-xs-12 mx-auto\">\n          <div class=\"row\">\n            <div class=\"col-12 pb-0\">\n              @if (breadcrumb) {\n                <rlb-breadcrumb [items]=\"breadcrumb\"></rlb-breadcrumb>\n              }\n              <h1 class=\"pt-5 pb-0 text-center\">\n                {{title}}\n              </h1>\n            </div>\n          </div>\n          @if (subtitle) {\n            <div class=\"row\">\n              <div class=\"col-12 pb-12\">\n                <span class=\"d-block text-h6 text-center\">\n                  {{subtitle}}\n                </span>\n              </div>\n            </div>\n          }\n          <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n          <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n        </div>\n      </div>\n    </div>\n  } @else {\n    <!--old ng-template #mobileMode-->\n    <div class=\"row\">\n      <div class=\"col-12 pb-0\">\n        <h1 class=\"pt-5 pb-0 text-center\">\n          {{title}}\n        </h1>\n      </div>\n    </div>\n    @if (subtitle) {\n      <div class=\"row\">\n        <div class=\"col-12 pb-7\">\n          <div class=\"d-block text-h6 text-center\">\n            {{subtitle}}\n          </div>\n        </div>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"mobile\"></ng-container>\n  }\n</div>\n\n<ng-template #all>\n  <ng-content select=\"[all]\"></ng-content>\n</ng-template>\n\n<ng-template #default>\n  <ng-content select=\"[default]\"></ng-content>\n</ng-template>\n\n<ng-template #mobile>\n  <ng-content select=\"[mobile]\"></ng-content>\n</ng-template>\n" }]
-        }], ctorParameters: () => [{ type: i1$7.BreakpointObserver }, { type: Object, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }], propDecorators: { breadcrumb: [{
-                type: Input
-            }], title: [{
-                type: Input
-            }], subtitle: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'rlb-base-template', imports: [NgTemplateOutlet, BreadcrumbComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\" mb-3\">\n  @if (!isHandset()) {\n    <div class=\"container-fluid\">\n      <div class=\"row mt-1\">\n        <div class=\"col-xl-8 col-lg-10 col-md-12 col-sm-12 col-xs-12 mx-auto\">\n          <div class=\"row\">\n            <div class=\"col-12 pb-0\">\n              @if (breadcrumb()) {\n                <rlb-breadcrumb [items]=\"breadcrumb()\"></rlb-breadcrumb>\n              }\n              <h1 class=\"pt-5 pb-0 text-center\">\n                {{title()}}\n              </h1>\n            </div>\n          </div>\n          @if (subtitle()) {\n            <div class=\"row\">\n              <div class=\"col-12 pb-12\">\n                <span class=\"d-block text-h6 text-center\">\n                  {{subtitle()}}\n                </span>\n              </div>\n            </div>\n          }\n          <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n          <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n        </div>\n      </div>\n    </div>\n  } @else {\n    <!--old ng-template #mobileMode-->\n    <div class=\"row\">\n      <div class=\"col-12 pb-0\">\n        <h1 class=\"pt-5 pb-0 text-center\">\n          {{title()}}\n        </h1>\n      </div>\n    </div>\n    @if (subtitle()) {\n      <div class=\"row\">\n        <div class=\"col-12 pb-7\">\n          <div class=\"d-block text-h6 text-center\">\n            {{subtitle()}}\n          </div>\n        </div>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"mobile\"></ng-container>\n  }\n</div>\n\n\n<ng-template #all>\n  <ng-content select=\"[all]\"></ng-content>\n</ng-template>\n\n<ng-template #default>\n  <ng-content select=\"[default]\"></ng-content>\n</ng-template>\n\n<ng-template #mobile>\n  <ng-content select=\"[mobile]\"></ng-content>\n</ng-template>\n" }]
+        }], propDecorators: { breadcrumbInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumb", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }] } });
 
 class ContentComponent {
-    constructor(breakpointObserver, platformId) {
-        this.breakpointObserver = breakpointObserver;
-        this.platformId = platformId;
-    }
-    get isHandset$() {
-        if (isPlatformServer(this.platformId)) {
-            return of(true);
-        }
-        else {
-            return this.breakpointObserver.observe(Breakpoints.Handset)
-                .pipe(map(result => result.matches), shareReplay());
-        }
+    constructor() {
+        this.breakpointObserver = inject(BreakpointObserver);
+        this.platformId = inject(PLATFORM_ID);
+        this.isHandset = toSignal(isPlatformServer(this.platformId)
+            ? of(true)
+            : this.breakpointObserver.observe(Breakpoints.Handset).pipe(map(result => result.matches)), { initialValue: true });
     }
-    ngOnInit() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ContentComponent, deps: [{ token: i1$7.BreakpointObserver }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ContentComponent, isStandalone: false, selector: "rlb-content-template", ngImport: i0, template: "<div class=\" mb-3\">\n  @if (!(isHandset$ | async)) {\n    <div class=\"container-fluid\">\n      <div class=\"row mt-1\">\n        <div class=\"mx-auto col-sm-12 col-md-8 col-lg-9 col-xl-8\">\n          <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n          <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n        </div>\n      </div>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"mobile\"></ng-container>\n  }\n</div>\n\n<ng-template #all>\n  <ng-content select=\"[all]\"></ng-content>\n</ng-template>\n\n<ng-template #default>\n  <ng-content select=\"[default]\"></ng-content>\n</ng-template>\n\n<ng-template #mobile>\n  <ng-content select=\"[mobile]\"></ng-content>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ContentComponent, isStandalone: true, selector: "rlb-content-template", ngImport: i0, template: "<div class=\" mb-3\">\n  @if (!isHandset()) {\n    <div class=\"container-fluid\">\n      <div class=\"row mt-1\">\n        <div class=\"mx-auto col-sm-12 col-md-8 col-lg-9 col-xl-8\">\n          <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n          <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n        </div>\n      </div>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"mobile\"></ng-container>\n  }\n</div>\n\n\n<ng-template #all>\n  <ng-content select=\"[all]\"></ng-content>\n</ng-template>\n\n<ng-template #default>\n  <ng-content select=\"[default]\"></ng-content>\n</ng-template>\n\n<ng-template #mobile>\n  <ng-content select=\"[mobile]\"></ng-content>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-content-template', standalone: false, template: "<div class=\" mb-3\">\n  @if (!(isHandset$ | async)) {\n    <div class=\"container-fluid\">\n      <div class=\"row mt-1\">\n        <div class=\"mx-auto col-sm-12 col-md-8 col-lg-9 col-xl-8\">\n          <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n          <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n        </div>\n      </div>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"mobile\"></ng-container>\n  }\n</div>\n\n<ng-template #all>\n  <ng-content select=\"[all]\"></ng-content>\n</ng-template>\n\n<ng-template #default>\n  <ng-content select=\"[default]\"></ng-content>\n</ng-template>\n\n<ng-template #mobile>\n  <ng-content select=\"[mobile]\"></ng-content>\n</ng-template>" }]
-        }], ctorParameters: () => [{ type: i1$7.BreakpointObserver }, { type: Object, decorators: [{
-                    type: Inject,
-                    args: [PLATFORM_ID]
-                }] }] });
+            args: [{ selector: 'rlb-content-template', imports: [NgTemplateOutlet], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\" mb-3\">\n  @if (!isHandset()) {\n    <div class=\"container-fluid\">\n      <div class=\"row mt-1\">\n        <div class=\"mx-auto col-sm-12 col-md-8 col-lg-9 col-xl-8\">\n          <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n          <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n        </div>\n      </div>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"mobile\"></ng-container>\n  }\n</div>\n\n\n<ng-template #all>\n  <ng-content select=\"[all]\"></ng-content>\n</ng-template>\n\n<ng-template #default>\n  <ng-content select=\"[default]\"></ng-content>\n</ng-template>\n\n<ng-template #mobile>\n  <ng-content select=\"[mobile]\"></ng-content>\n</ng-template>" }]
+        }] });
 
 class TruncatePipe {
     transform(value, limit = 25, completeWords = false, ellipsis = '...') {
@@ -2372,14 +2453,13 @@ class TruncatePipe {
         }
         return value.length > limit ? value.slice(0, limit) + ellipsis : value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: TruncatePipe, isStandalone: false, name: "truncate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: TruncatePipe, isStandalone: true, name: "truncate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: TruncatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: TruncatePipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'truncate',
-                    standalone: false
+                    name: 'truncate'
                 }]
         }] });
 
@@ -2404,34 +2484,36 @@ class AutolinkPipe {
             return '' + space + link;
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AutolinkPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: AutolinkPipe, isStandalone: false, name: "autolink" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AutolinkPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AutolinkPipe, isStandalone: true, name: "autolink" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AutolinkPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AutolinkPipe, decorators: [{
             type: Pipe,
             args: [{
-                    name: 'autolink',
-                    standalone: false
+                    name: 'autolink'
                 }]
         }] });
 
 class AppContainerComponent {
-    constructor(env, store, router, storage, pwaUpdaterService, appsService, loggerService) {
-        this.env = env;
-        this.store = store;
-        this.router = router;
-        this.storage = storage;
-        this.pwaUpdaterService = pwaUpdaterService;
-        this.appsService = appsService;
-        this.loggerService = loggerService;
+    constructor() {
+        this.Array = Array;
         this.templateSubject = new BehaviorSubject('app');
+        this.modalContainerId = input.required({ ...(ngDevMode ? { debugName: "modalContainerId" } : /* istanbul ignore next */ {}), alias: 'modal-container-id' });
+        this.toastContainerIds = input.required({ ...(ngDevMode ? { debugName: "toastContainerIds" } : /* istanbul ignore next */ {}), alias: 'toast-container-ids' });
+        this.env = inject(RLB_CFG_ENV);
+        this.store = inject((Store));
+        this.router = inject(Router);
+        this.storage = inject(AppStorageService);
+        this.pwaUpdaterService = inject(PwaUpdaterService);
+        this.appsService = inject(AppsService);
+        this.loggerService = inject(AppLoggerService);
         this.logger = this.loggerService.for(this.constructor.name);
         const theme = (this.storage.readLocal('theme') || 'dark');
         this.store.dispatch(AppContextActions.setTheme({ theme }));
         this.store.dispatch(AppContextActions.setLanguage({ language: this.storage.readLocal('locale') || 'en' }));
         this.store
             .select((state) => state[appContextFeatureKey].currentApp)
-            .pipe(distinctUntilChanged())
+            .pipe(distinctUntilChanged(), takeUntilDestroyed())
             .subscribe(async (currentApp) => {
             this.logger.info('currentApp:', currentApp);
             if (!currentApp)
@@ -2457,39 +2539,25 @@ class AppContainerComponent {
             }
         });
         this.router.events
-            .pipe(filter(event => event instanceof RoutesRecognized), map((event) => event?.state?.root?.firstChild?.data?.['template'] || 'app'), map(o => o), tap((template) => this.templateSubject.next(template))).subscribe();
+            .pipe(filter(event => event instanceof RoutesRecognized), map((event) => event?.state?.root?.firstChild?.data?.['template'] || 'app'), map(o => o), tap((template) => this.templateSubject.next(template)), takeUntilDestroyed()).subscribe();
+        if (this.env.pwaUpdateEnabled) {
+            this.pwaUpdaterService.checkWithDialog().pipe(takeUntilDestroyed()).subscribe();
+        }
     }
     get template$() {
         return this.templateSubject.asObservable();
     }
-    ngOnDestroy() {
-        this.swUpdateSubscription?.unsubscribe();
-    }
-    ngOnInit() {
-        if (this.env.pwaUpdateEnabled) {
-            this.swUpdateSubscription = this.pwaUpdaterService.checkWithDialog().subscribe();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppContainerComponent, deps: [{ token: RLB_CFG_ENV }, { token: i1$1.Store }, { token: i2.Router }, { token: AppStorageService }, { token: PwaUpdaterService }, { token: AppsService }, { token: AppLoggerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: AppContainerComponent, isStandalone: false, selector: "rlb-app-container", inputs: { modalContainerId: ["modal-container-id", "modalContainerId"], toastContainerIds: ["toast-container-ids", "toastContainerIds"] }, ngImport: i0, template: "@if ((template$ | async) === 'app') {\n  <rlb-app-template>\n    <router-outlet />\n  </rlb-app-template>\n}\n@if ((template$ | async) === 'basic') {\n  <router-outlet />\n}\n\n\n@if (modalContainerId) {\n  <rlb-modal-container [id]=\"modalContainerId\" />\n}\n\n@if (toastContainerIds) {\n  @if (toastContainerIds.constructor.name === 'Array') {\n    @for (toastContainerId of toastContainerIds | asMulti; track toastContainerId) {\n      <rlb-toast-container [id]=\"toastContainerId\" />\n    }\n  } @else {\n    <rlb-toast-container class=\"position-fixed bottom-0 end-0 p-3\" [id]=\"toastContainerIds | asSingle\" />\n  }\n}", dependencies: [{ kind: "component", type: i2$1.ModalContainerComponent, selector: "rlb-modal-container", inputs: ["id"] }, { kind: "component", type: i2$1.ToastContainerComponent, selector: "rlb-toast-container", inputs: ["id"] }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppTemplateComponent, selector: "rlb-app-template", inputs: ["modal-container-id", "toast-container-ids"] }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }, { kind: "pipe", type: AsMultiPipe, name: "asMulti" }, { kind: "pipe", type: AsSinglePipe, name: "asSingle" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AppContainerComponent, isStandalone: true, selector: "rlb-app-container", inputs: { modalContainerId: { classPropertyName: "modalContainerId", publicName: "modal-container-id", isSignal: true, isRequired: true, transformFunction: null }, toastContainerIds: { classPropertyName: "toastContainerIds", publicName: "toast-container-ids", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "@if ((template$ | async) === 'app') {\n  <rlb-app-template [modal-container-id]=\"modalContainerId()\" [toast-container-ids]=\"toastContainerIds()\">\n    <router-outlet />\n  </rlb-app-template>\n}\n@if ((template$ | async) === 'basic') {\n  <router-outlet />\n}\n\n\n@if (modalContainerId()) {\n  <rlb-modal-container [id]=\"modalContainerId()\" />\n}\n\n@if (toastContainerIds()) {\n  @if (Array.isArray(toastContainerIds())) {\n    @for (toastContainerId of toastContainerIds() | asMulti; track toastContainerId) {\n      <rlb-toast-container [id]=\"toastContainerId\" />\n    }\n  } @else {\n    <rlb-toast-container class=\"position-fixed bottom-0 end-0 p-3\" [id]=\"toastContainerIds() | asSingle\" />\n  }\n}", dependencies: [{ kind: "component", type: AppTemplateComponent, selector: "rlb-app-template", inputs: ["modal-container-id", "breadcrumb", "toast-container-ids"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i5.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: ModalContainerComponent, selector: "rlb-modal-container", inputs: ["id"] }, { kind: "component", type: ToastContainerComponent, selector: "rlb-toast-container", inputs: ["id"] }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }, { kind: "pipe", type: AsMultiPipe, name: "asMulti" }, { kind: "pipe", type: AsSinglePipe, name: "asSingle" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppContainerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-app-container', standalone: false, template: "@if ((template$ | async) === 'app') {\n  <rlb-app-template>\n    <router-outlet />\n  </rlb-app-template>\n}\n@if ((template$ | async) === 'basic') {\n  <router-outlet />\n}\n\n\n@if (modalContainerId) {\n  <rlb-modal-container [id]=\"modalContainerId\" />\n}\n\n@if (toastContainerIds) {\n  @if (toastContainerIds.constructor.name === 'Array') {\n    @for (toastContainerId of toastContainerIds | asMulti; track toastContainerId) {\n      <rlb-toast-container [id]=\"toastContainerId\" />\n    }\n  } @else {\n    <rlb-toast-container class=\"position-fixed bottom-0 end-0 p-3\" [id]=\"toastContainerIds | asSingle\" />\n  }\n}" }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [RLB_CFG_ENV]
-                }] }, { type: i1$1.Store }, { type: i2.Router }, { type: AppStorageService }, { type: PwaUpdaterService }, { type: AppsService }, { type: AppLoggerService }], propDecorators: { modalContainerId: [{
-                type: Input,
-                args: ['modal-container-id']
-            }], toastContainerIds: [{
-                type: Input,
-                args: ['toast-container-ids']
-            }] } });
+            args: [{ selector: 'rlb-app-container', imports: [AppTemplateComponent, CommonModule, RouterModule, ModalContainerComponent, ToastContainerComponent, AsMultiPipe, AsSinglePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ((template$ | async) === 'app') {\n  <rlb-app-template [modal-container-id]=\"modalContainerId()\" [toast-container-ids]=\"toastContainerIds()\">\n    <router-outlet />\n  </rlb-app-template>\n}\n@if ((template$ | async) === 'basic') {\n  <router-outlet />\n}\n\n\n@if (modalContainerId()) {\n  <rlb-modal-container [id]=\"modalContainerId()\" />\n}\n\n@if (toastContainerIds()) {\n  @if (Array.isArray(toastContainerIds())) {\n    @for (toastContainerId of toastContainerIds() | asMulti; track toastContainerId) {\n      <rlb-toast-container [id]=\"toastContainerId\" />\n    }\n  } @else {\n    <rlb-toast-container class=\"position-fixed bottom-0 end-0 p-3\" [id]=\"toastContainerIds() | asSingle\" />\n  }\n}" }]
+        }], ctorParameters: () => [], propDecorators: { modalContainerId: [{ type: i0.Input, args: [{ isSignal: true, alias: "modal-container-id", required: true }] }], toastContainerIds: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast-container-ids", required: true }] }] } });
 
 class ForbiddenComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ForbiddenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.7", type: ForbiddenComponent, isStandalone: false, selector: "rlb-forbidden", ngImport: i0, template: `<div class="container" style="height:calc(100vh - 58px);">
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ForbiddenComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: ForbiddenComponent, isStandalone: true, selector: "rlb-forbidden", ngImport: i0, template: `<div class="container" style="height:calc(100vh - 58px);">
   <div class="align-center">
     <div class="text-center">
       <h1 class="text-primary">
@@ -2502,13 +2570,13 @@ class ForbiddenComponent {
     </div>
   </div>
 </div>
-`, isInline: true, dependencies: [{ kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] }); }
+`, isInline: true, dependencies: [{ kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1$4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ForbiddenComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ForbiddenComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'rlb-forbidden',
-                    standalone: false,
+                    imports: [TranslateModule],
                     template: `<div class="container" style="height:calc(100vh - 58px);">
   <div class="align-center">
     <div class="text-center">
@@ -2522,14 +2590,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
     </div>
   </div>
 </div>
-`
+`,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
 class RlbAppModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: RlbAppModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.7", ngImport: i0, type: RlbAppModule, declarations: [
-            // pages
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RlbAppModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: RlbAppModule, imports: [CommonModule,
+            FormsModule,
+            ReactiveFormsModule,
+            TranslateModule,
+            RlbBootstrapModule,
+            RouterModule,
+            // standalone
             CmsContentComponent,
             CookiesComponent,
             NotFoundComponent,
@@ -2537,7 +2611,6 @@ class RlbAppModule {
             SupportComponent,
             TermsAndConditionsComponent,
             ForbiddenComponent,
-            // pipes
             CmsPipe,
             AsMultiPipe,
             AsSinglePipe,
@@ -2545,7 +2618,6 @@ class RlbAppModule {
             RightComponentPipe,
             TruncatePipe,
             AutolinkPipe,
-            // templates
             BaseComponent,
             CmsComponent,
             ContentComponent,
@@ -2553,13 +2625,7 @@ class RlbAppModule {
             AppContainerComponent,
             SettingsDropdownSelectorComponent,
             AppDropdownSelectorComponent,
-            // directives
-            RlbRole], imports: [CommonModule,
-            FormsModule,
-            ReactiveFormsModule,
-            TranslateModule,
-            RlbBootstrapModule,
-            RouterModule], exports: [
+            RlbRole], exports: [
             // pipes
             CmsPipe,
             AsMultiPipe,
@@ -2581,49 +2647,36 @@ class RlbAppModule {
             FormsModule,
             // directives
             RlbRole] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: RlbAppModule, imports: [CommonModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RlbAppModule, imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             TranslateModule,
             RlbBootstrapModule,
-            RouterModule, 
+            RouterModule,
+            // standalone
+            CmsContentComponent,
+            CookiesComponent,
+            NotFoundComponent,
+            PrivacyComponent,
+            SupportComponent,
+            TermsAndConditionsComponent,
+            ForbiddenComponent,
+            BaseComponent,
+            CmsComponent,
+            AppTemplateComponent,
+            AppContainerComponent,
+            SettingsDropdownSelectorComponent,
+            AppDropdownSelectorComponent, 
             // modules
             TranslateModule,
             RlbBootstrapModule,
             RouterModule,
             FormsModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: RlbAppModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: RlbAppModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [
-                        // pages
-                        CmsContentComponent,
-                        CookiesComponent,
-                        NotFoundComponent,
-                        PrivacyComponent,
-                        SupportComponent,
-                        TermsAndConditionsComponent,
-                        ForbiddenComponent,
-                        // pipes
-                        CmsPipe,
-                        AsMultiPipe,
-                        AsSinglePipe,
-                        LeftComponentPipe,
-                        RightComponentPipe,
-                        TruncatePipe,
-                        AutolinkPipe,
-                        // templates
-                        BaseComponent,
-                        CmsComponent,
-                        ContentComponent,
-                        AppTemplateComponent,
-                        AppContainerComponent,
-                        SettingsDropdownSelectorComponent,
-                        AppDropdownSelectorComponent,
-                        // directives
-                        RlbRole,
-                    ],
+                    declarations: [],
                     exports: [
                         // pipes
                         CmsPipe,
@@ -2654,177 +2707,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
                         TranslateModule,
                         RlbBootstrapModule,
                         RouterModule,
+                        // standalone
+                        CmsContentComponent,
+                        CookiesComponent,
+                        NotFoundComponent,
+                        PrivacyComponent,
+                        SupportComponent,
+                        TermsAndConditionsComponent,
+                        ForbiddenComponent,
+                        CmsPipe,
+                        AsMultiPipe,
+                        AsSinglePipe,
+                        LeftComponentPipe,
+                        RightComponentPipe,
+                        TruncatePipe,
+                        AutolinkPipe,
+                        BaseComponent,
+                        CmsComponent,
+                        ContentComponent,
+                        AppTemplateComponent,
+                        AppContainerComponent,
+                        SettingsDropdownSelectorComponent,
+                        AppDropdownSelectorComponent,
+                        RlbRole,
                     ],
                 }]
         }] });
 
-class ErrorModalComponent {
-    constructor() {
-        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-        this.valid = model(true, ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
-    }
-    onEnter() { }
-    ngOnInit() {
-        console.log(this.data());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.7", type: ErrorModalComponent, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valid: "validChange" }, hostDirectives: [{ directive: i2$1.ModalDirective, inputs: ["id", "id", "data-instance", "data-instance", "data-options", "data-options"] }], ngImport: i0, template: `
-    <div class="modal-header">
-      <h5 class="modal-title">{{ data().title }}</h5>
-      <button
-        type="button"
-        class="btn-close"
-        aria-label="Close"
-        data-modal-reason="close"
-      ></button>
-    </div>
-    <div class="modal-body">
-      <span>{{ data().content }}</span>
-    </div>
-    <div class="modal-footer">
-      <button
-        type="button"
-        class="btn btn-primary"
-        data-modal-reason="close"
-      >
-        {{ data().ok }}
-      </button>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: RlbAppModule }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ErrorModalComponent, decorators: [{
-            type: Component,
-            args: [{
-                    imports: [RlbAppModule],
-                    template: `
-    <div class="modal-header">
-      <h5 class="modal-title">{{ data().title }}</h5>
-      <button
-        type="button"
-        class="btn-close"
-        aria-label="Close"
-        data-modal-reason="close"
-      ></button>
-    </div>
-    <div class="modal-body">
-      <span>{{ data().content }}</span>
-    </div>
-    <div class="modal-footer">
-      <button
-        type="button"
-        class="btn btn-primary"
-        data-modal-reason="close"
-      >
-        {{ data().ok }}
-      </button>
-    </div>
-  `,
-                    hostDirectives: [
-                        {
-                            directive: ModalDirective,
-                            inputs: ['id', 'data-instance', 'data-options'],
-                        },
-                    ],
-                }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], valid: [{ type: i0.Input, args: [{ isSignal: true, alias: "valid", required: false }] }, { type: i0.Output, args: ["validChange"] }] } });
-
-class ModalAppsComponent {
-    constructor() {
-        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-        this.valid = model(true, ...(ngDevMode ? [{ debugName: "valid" }] : /* istanbul ignore next */ []));
-        this.apps = [];
-    }
-    appSelected(app) {
-        this.result = app;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ModalAppsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ModalAppsComponent, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, valid: { classPropertyName: "valid", publicName: "valid", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valid: "validChange" }, hostDirectives: [{ directive: i2$1.ModalDirective, inputs: ["id", "id", "data-instance", "data-instance", "data-options", "data-options"] }], ngImport: i0, template: `
-    <div class="modal-header">
-      <h5 class="modal-title">{{ data().title }}</h5>
-      <button
-        type="button"
-        class="btn-close"
-        aria-label="Close"
-        data-modal-reason="close"
-      ></button>
-    </div>
-    <div class="modal-body">
-      <ul class="row row-cols-4 list-unstyled list">
-        @for (app of data().content; track app) {
-          <li
-            class="col my-2"
-            [tooltip]="app.description | translate"
-          >
-            <a
-              class="d-block text-body-emphasis text-decoration-none"
-              (click)="appSelected(app)"
-              [class.disabled]="!app.enabled"
-              data-modal-reason="ok"
-            >
-              <div class="px-3 py-4 mb-2 bg-body-secondary text-center rounded">
-                <i [ngClass]="app.icon"></i>
-              </div>
-              <div class="name text-muted text-decoration-none text-center pt-1">
-                {{ app.name | translate }}
-              </div>
-            </a>
-          </li>
-        }
-      </ul>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ModalAppsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    imports: [RlbAppModule, CommonModule],
-                    template: `
-    <div class="modal-header">
-      <h5 class="modal-title">{{ data().title }}</h5>
-      <button
-        type="button"
-        class="btn-close"
-        aria-label="Close"
-        data-modal-reason="close"
-      ></button>
-    </div>
-    <div class="modal-body">
-      <ul class="row row-cols-4 list-unstyled list">
-        @for (app of data().content; track app) {
-          <li
-            class="col my-2"
-            [tooltip]="app.description | translate"
-          >
-            <a
-              class="d-block text-body-emphasis text-decoration-none"
-              (click)="appSelected(app)"
-              [class.disabled]="!app.enabled"
-              data-modal-reason="ok"
-            >
-              <div class="px-3 py-4 mb-2 bg-body-secondary text-center rounded">
-                <i [ngClass]="app.icon"></i>
-              </div>
-              <div class="name text-muted text-decoration-none text-center pt-1">
-                {{ app.name | translate }}
-              </div>
-            </a>
-          </li>
-        }
-      </ul>
-    </div>
-  `,
-                    hostDirectives: [{ directive: ModalDirective, inputs: ['id', 'data-instance', 'data-options'] }],
-                }]
-        }], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], valid: [{ type: i0.Input, args: [{ isSignal: true, alias: "valid", required: false }] }, { type: i0.Output, args: ["validChange"] }] } });
-
 class AppSelectorComponent {
-    constructor(_location, appsService, authService) {
-        this._location = _location;
-        this.appsService = appsService;
-        this.authService = authService;
-    }
-    get apps() {
-        return this.appsService.apps;
+    constructor() {
+        this._location = inject(Location);
+        this.appsService = inject(AppsService);
+        this.authService = inject(AuthenticationService);
+        this.apps = this.appsService.apps;
+        this.auth$ = this.authService.isAuthenticated$;
     }
     backClicked() {
         this._location.back();
@@ -2832,16 +2748,13 @@ class AppSelectorComponent {
     selectApp(app) {
         this.appsService.selectApp(app, 'app');
     }
-    get auth$() {
-        return this.authService.isAuthenticated$;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppSelectorComponent, deps: [{ token: i1$6.Location }, { token: AppsService }, { token: AuthenticationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: AppSelectorComponent, isStandalone: true, selector: "rlb-app-selector", ngImport: i0, template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.apps.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y cur\"\n    style=\"font-size: 25px;font-weight: 600;\" (click)=\"backClicked()\"></i>\n  </div>\n  <rlb-list>\n    @for (app of apps; track app.id) {\n      <ng-container ngProjectAs=\"rlb-list-item-image\">\n        @if (app.core) {\n          <ng-container ngProjectAs=\"rlb-list-item-image\">\n            <rlb-list-item-image [icon]=\"app.core.icon\" [avatar-size]=\"35\"\n              [line-1]=\"app.data.friendlyName ? app.data.friendlyName : app.core.title | translate\"\n              [disabled]=\"!app.enabled && (app.core.auth && !(auth$ | async))\" [line-2]=\"app.core.description | translate\"\n              (click)=\"selectApp(app)\">\n            </rlb-list-item-image>\n          </ng-container>\n        }\n      </ng-container>\n    }\n  </rlb-list>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "component", type: i2$1.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i2$1.ListItemImageComponent, selector: "rlb-list-item-image", inputs: ["active", "disabled", "counter-empty", "counter-pill", "counter-border", "avatar-size", "username", "line-1", "line-2", "avatar", "counter", "counter-color", "icon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AppSelectorComponent, isStandalone: true, selector: "rlb-app-selector", ngImport: i0, template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.apps.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y cur\"\n    style=\"font-size: 25px;font-weight: 600;\" (click)=\"backClicked()\"></i>\n  </div>\n  <rlb-list>\n    @for (app of apps(); track app.id) {\n      <ng-container ngProjectAs=\"rlb-list-item-image\">\n        @if (app.core) {\n          <ng-container ngProjectAs=\"rlb-list-item-image\">\n            <rlb-list-item-image [icon]=\"app.core.icon\" [avatar-size]=\"35\"\n              [line-1]=\"app.data.friendlyName ? app.data.friendlyName : app.core.title | translate\"\n              [disabled]=\"!app.enabled && (app.core.auth && !(auth$ | async))\" [line-2]=\"app.core.description | translate\"\n              (click)=\"selectApp(app)\">\n            </rlb-list-item-image>\n          </ng-container>\n        }\n      </ng-container>\n    }\n  </rlb-list>\n</div>\n\n", styles: [""], dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "component", type: i1$3.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i1$3.ListItemImageComponent, selector: "rlb-list-item-image", inputs: ["active", "disabled", "counter-empty", "counter-pill", "counter-border", "avatar-size", "username", "line-1", "line-2", "avatar", "counter", "counter-color", "icon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppSelectorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-app-selector', imports: [RlbAppModule, CommonModule], template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.apps.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y cur\"\n    style=\"font-size: 25px;font-weight: 600;\" (click)=\"backClicked()\"></i>\n  </div>\n  <rlb-list>\n    @for (app of apps; track app.id) {\n      <ng-container ngProjectAs=\"rlb-list-item-image\">\n        @if (app.core) {\n          <ng-container ngProjectAs=\"rlb-list-item-image\">\n            <rlb-list-item-image [icon]=\"app.core.icon\" [avatar-size]=\"35\"\n              [line-1]=\"app.data.friendlyName ? app.data.friendlyName : app.core.title | translate\"\n              [disabled]=\"!app.enabled && (app.core.auth && !(auth$ | async))\" [line-2]=\"app.core.description | translate\"\n              (click)=\"selectApp(app)\">\n            </rlb-list-item-image>\n          </ng-container>\n        }\n      </ng-container>\n    }\n  </rlb-list>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i1$6.Location }, { type: AppsService }, { type: AuthenticationService }] });
+            args: [{ selector: 'rlb-app-selector', imports: [RlbAppModule, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.apps.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y cur\"\n    style=\"font-size: 25px;font-weight: 600;\" (click)=\"backClicked()\"></i>\n  </div>\n  <rlb-list>\n    @for (app of apps(); track app.id) {\n      <ng-container ngProjectAs=\"rlb-list-item-image\">\n        @if (app.core) {\n          <ng-container ngProjectAs=\"rlb-list-item-image\">\n            <rlb-list-item-image [icon]=\"app.core.icon\" [avatar-size]=\"35\"\n              [line-1]=\"app.data.friendlyName ? app.data.friendlyName : app.core.title | translate\"\n              [disabled]=\"!app.enabled && (app.core.auth && !(auth$ | async))\" [line-2]=\"app.core.description | translate\"\n              (click)=\"selectApp(app)\">\n            </rlb-list-item-image>\n          </ng-container>\n        }\n      </ng-container>\n    }\n  </rlb-list>\n</div>\n\n" }]
+        }] });
 
 const oauthGuard = (route, state) => {
     const authService = inject(AuthenticationService);
@@ -3021,10 +2934,10 @@ class OauthPasswordService {
             }, r.expires_in * 1000 - 60000);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: OauthPasswordService, deps: [{ token: i1$2.HttpClient }, { token: AuthenticationService }, { token: AppLoggerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: OauthPasswordService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OauthPasswordService, deps: [{ token: i1$2.HttpClient }, { token: AuthenticationService }, { token: AppLoggerService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OauthPasswordService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: OauthPasswordService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: OauthPasswordService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3111,10 +3024,10 @@ class KeycloakProfileService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KeycloakProfileService, deps: [{ token: i1$2.HttpClient }, { token: AuthenticationService }, { token: ErrorManagementService }, { token: i1$5.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KeycloakProfileService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: KeycloakProfileService, deps: [{ token: i1$2.HttpClient }, { token: AuthenticationService }, { token: ErrorManagementService }, { token: i1$5.OidcSecurityService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: KeycloakProfileService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: KeycloakProfileService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: KeycloakProfileService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -3122,35 +3035,29 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImpor
         }], ctorParameters: () => [{ type: i1$2.HttpClient }, { type: AuthenticationService }, { type: ErrorManagementService }, { type: i1$5.OidcSecurityService }] });
 
 class UserAccountComponent {
-    constructor(_location, store, keycloakProfileService, modalService, languageService, authService, router) {
-        this._location = _location;
-        this.store = store;
-        this.keycloakProfileService = keycloakProfileService;
-        this.modalService = modalService;
-        this.languageService = languageService;
-        this.authService = authService;
-        this.router = router;
-        this.subs = [];
-        this.authService.isAuthenticated$.pipe(filter(isAuth => !isAuth), switchMap(() => this.router.navigate(['/']))).subscribe();
+    constructor() {
+        this._location = inject(Location);
+        this.store = inject((Store));
+        this.keycloakProfileService = inject(KeycloakProfileService);
+        this.modalService = inject(ModalService);
+        this.languageService = inject(LanguageService);
+        this.authService = inject(AuthenticationService);
+        this.router = inject(Router);
+        this.keyCloakUser = signal(undefined, ...(ngDevMode ? [{ debugName: "keyCloakUser" }] : /* istanbul ignore next */ []));
+        this.keyCloakDevices = toSignal(this.keycloakProfileService.getDevices());
+        this.keycloakCredentials = signal([], ...(ngDevMode ? [{ debugName: "keycloakCredentials" }] : /* istanbul ignore next */ []));
+        this.authService.isAuthenticated$.pipe(takeUntilDestroyed(), filter(isAuth => !isAuth), switchMap(() => this.router.navigate(['/']))).subscribe();
     }
     backClicked() {
         this._location.back();
     }
     ngOnInit() {
-        this.subs.push(this.keycloakProfileService.getUserProfile().subscribe((user) => {
-            this.keyCloakUser = user;
-        }));
-        this.subs.push(this.keycloakProfileService.getDevices().subscribe((devices) => {
-            this.keyCloakDevices = devices;
-        }));
-        this.subs.push(this.keycloakProfileService.getCredentials().subscribe((credentials) => {
-            this.keycloakCredentials = credentials;
-        }));
-    }
-    ngOnDestroy() {
-        while (this.subs.length) {
-            this.subs.pop()?.unsubscribe();
-        }
+        this.keycloakProfileService.getUserProfile()
+            .pipe(takeUntilDestroyed())
+            .subscribe((user) => this.keyCloakUser.set(user));
+        this.keycloakProfileService.getCredentials()
+            .pipe(takeUntilDestroyed())
+            .subscribe((credentials) => this.keycloakCredentials.set(credentials));
     }
     logout() {
         this.store.dispatch(AuthActions.logout());
@@ -3159,18 +3066,25 @@ class UserAccountComponent {
         return await lastValueFrom(this.modalService.openConfirmModal(this.languageService.translate("core.account.credentials.deleteTitle"), this.languageService.translate("core.account.credentials.deleteMessage"), this.languageService.translate("core.account.credentials.deleteHeader"), this.languageService.translate("common.yes"), this.languageService.translate("common.cancel")).pipe(switchMap((result) => {
             if (result) {
                 return this.keycloakProfileService.removeCredential(id).pipe(tap(() => {
-                    const meta = this.keycloakCredentials.find((c) => c.type === type)?.userCredentialMetadatas;
-                    const idx = meta?.findIndex((m) => m.credential.id === id);
-                    if (meta && idx !== undefined && idx !== -1) {
-                        meta.splice(idx, 1);
-                    }
+                    this.keycloakCredentials.update(credentials => {
+                        const newCredentials = [...credentials];
+                        const credType = newCredentials.find(c => c.type === type);
+                        if (credType?.userCredentialMetadatas) {
+                            credType.userCredentialMetadatas = credType.userCredentialMetadatas.filter(m => m.credential.id !== id);
+                        }
+                        return newCredentials;
+                    });
                 }));
             }
             return EMPTY;
         })));
     }
     async updateProfile() {
-        return await lastValueFrom(this.keycloakProfileService.updateUserProfile(this.keyCloakUser));
+        const user = this.keyCloakUser();
+        if (user) {
+            return await lastValueFrom(this.keycloakProfileService.updateUserProfile(user));
+        }
+        return;
     }
     updatePassword() {
         this.keycloakProfileService.updatePassword();
@@ -3178,36 +3092,36 @@ class UserAccountComponent {
     configureOTP() {
         this.keycloakProfileService.configureOTP();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: UserAccountComponent, deps: [{ token: i1$6.Location }, { token: i1$1.Store }, { token: KeycloakProfileService }, { token: i2$1.ModalService }, { token: LanguageService }, { token: AuthenticationService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: UserAccountComponent, isStandalone: true, selector: "rlb-user-account", ngImport: i0, template: "<div class=\"container mt-4 mb-5\">\n\n  <div class=\"d-flex align-items-center justify-content-between\">\n    <h3 class=\"m-0\">{{\"Account settings\"|translate|uppercase}}</h3>\n    <rlb-breadcrumb [cssClasses]=\"'p-0 px-md-1 py-md-2 m-0'\" [items]=\"[{ label: 'Home', link: '/', id: '1' },{ label: 'Account settings', id: '2' }]\" class=\"d-block\"></rlb-breadcrumb>\n  </div>\n\n  <!-- ACCOUNT DETAILS CARD  -->\n  <rlb-card class=\"mt-3\">\n    <rlb-card-header class=\"d-flex justify-content-between align-items-center py-3 px-4\">\n      <h5 class=\"m-0\">{{\"Account\" | translate}}</h5>\n    </rlb-card-header>\n\n    <rlb-card-body class=\"px-4 py-4\">\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.username' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser) {\n            <rlb-input class=\"w-100\"  type=\"text\" [(ngModel)]=\"keyCloakUser.username\" disabled />\n          }\n        </div>\n      </div>\n\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.email' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser) {\n            <rlb-input class=\"w-100\"  type=\"text\" [(ngModel)]=\"keyCloakUser.email\" />\n          } @else {\n            <rlb-input class=\"w-100\"  type=\"text\" readonly />\n          }\n        </div>\n      </div>\n\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.firstName' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser) {\n            <rlb-input class=\"w-100\"  type=\"text\" [(ngModel)]=\"keyCloakUser.firstName\" />\n          } @else {\n            <rlb-input class=\"w-100\"  type=\"text\" readonly />\n          }\n        </div>\n      </div>\n\n      <div class=\"row align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.lastName' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser) {\n            <rlb-input class=\"w-100\" type=\"text\" [(ngModel)]=\"keyCloakUser.lastName\" />\n          } @else {\n            <rlb-input class=\"w-100\" type=\"text\" readonly />\n          }\n        </div>\n      </div>\n    </rlb-card-body>\n\n    <rlb-card-footer>\n      <div class=\"d-flex align-items-center justify-content-end gap-2\">\n        <button rlb-button outline (click)=\"updateProfile()\">\n          <i class=\"bi bi-floppy\"></i>\n          {{'common.save' | translate}}\n        </button>\n        <button rlb-button outline color=\"danger\" (click)=\"logout()\">\n          <i class=\"bi bi-box-arrow-right\"></i>\n          {{'core.account.logout' | translate}}\n        </button>\n      </div>\n    </rlb-card-footer>\n  </rlb-card>\n\n  <!-- CREDENTIALS SECTION -->\n  @if (keyCloakUser) {\n    <h3 class=\"mb-4 text-center mt-5\">{{ 'core.account.credentials.title' | translate}}</h3>\n\n    @for (type of keycloakCredentials; track type) {\n      <rlb-card class=\"mb-4\">\n\n        <rlb-card-header class=\"d-flex justify-content-between align-items-center py-3 px-4\">\n          <h6 class=\"mb-0 fw-bold\">{{ ('core.account.credentials.'+type?.type) | translate }}</h6>\n          @if (type.type === 'otp') {\n            <rlb-fab (click)=\"configureOTP()\" size=\"sm\" [tooltip]=\"'core.account.credentials.addOTP' | translate\">\n              <i class=\"bi bi-plus-circle\"></i>\n            </rlb-fab>\n          }\n        </rlb-card-header>\n\n        <rlb-card-body>\n          <rlb-list class=\"settings m-0\">\n            @for (cred of type.userCredentialMetadatas; track cred.credential.id) {\n              <rlb-list-item class=\"px-4 py-3\">\n                <div class=\"row align-items-center w-100\">\n                  <div class=\"col-md-1 text-center mb-2 mb-md-0\">\n                    <i class=\"bi bi-key text-secondary\" style=\"font-size: 2rem;\"></i>\n                  </div>\n                  <div class=\"col-md-5 mb-2 mb-md-0\">\n                    <span class=\"text-muted small d-block\">{{ 'core.account.credentials.name' | translate }}</span>\n                    <span class=\"fw-semibold\">{{cred.credential.userLabel || cred.credential.type}}</span>\n                  </div>\n                  <div class=\"col-md-4 mb-3 mb-md-0\">\n                    <span class=\"text-muted small d-block\">{{'core.account.credentials.created' | translate}}</span>\n                    <span>{{cred.credential.createdDate | date:'dd:MM:yyyy HH:mm' }}</span>\n                  </div>\n                  <div class=\"col-md-2 text-md-end\">\n                    @if (type.removeable) {\n                      <button rlb-button class=\"w-100\" color=\"danger\" (click)=\"removeCredential(type.type, cred.credential.id)\">\n                        <i class=\"bi bi-trash\"></i> {{ 'core.account.credentials.delete' | translate}}\n                      </button>\n                    } @else {\n                      <button rlb-button class=\"w-100\" outline (click)=\"updatePassword()\">\n                        <i class=\"bi bi-pencil-square\"></i> {{ 'core.account.credentials.update' | translate}}\n                      </button>\n                    }\n                  </div>\n                </div>\n              </rlb-list-item>\n            }\n\n            @if (type.userCredentialMetadatas.length === 0) {\n              <rlb-list-item>\n                <div class=\"py-4 text-center text-muted\">\n                  {{ 'core.account.credentials.noCredentials' | translate}}\n                </div>\n              </rlb-list-item>\n            }\n          </rlb-list>\n        </rlb-card-body>\n      </rlb-card>\n    }\n\n      <!-- SESSION SECTION -->\n    <h3 class=\"mb-4 text-center mt-5\">{{ 'core.account.session.title' | translate}}</h3>\n\n    <rlb-card border=\"secondary\" class=\"mb-5\">\n      <rlb-card-body class=\"p-0\">\n        <rlb-list class=\"settings m-0\">\n          @for (d of keyCloakDevices; track d.id) {\n            <rlb-list-item class=\"settings-item px-4 py-4\">\n\n              <!-- Session Top Row (Device Info) -->\n              <div class=\"d-flex align-items-center pb-3 mb-3\">\n                <i class=\"bi bi-laptop text-secondary me-3\" style=\"font-size: 2rem;\"></i>\n                <h6 class=\"mb-0 fw-bold\">{{d.os}} {{d.osVersion}} - {{d.browser}}</h6>\n                @if (d.current) {\n                  <span class=\"badge bg-success ms-3 rounded-pill px-3 py-2\">\n                    {{ 'core.account.session.current' | translate}}\n                  </span>\n                }\n              </div>\n\n              <div class=\"row text-center text-md-start gy-3\">\n                <div class=\"col-sm-6 col-md-3\">\n                  <span class=\"text-muted small d-block\">{{ 'core.account.session.ip' | translate }}</span>\n                  <span class=\"fw-medium\">{{d.ipAddress}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-3\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.lastAccess' | translate}}</span>\n                  <span>{{d.lastAccess*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.applications' | translate}}</span>\n                  <span>{{d.clientslist }} </span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.started' | translate}}</span>\n                  <span>{{d.started*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.expires' | translate}}</span>\n                  <span>{{d.expires*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n              </div>\n            </rlb-list-item>\n          }\n        </rlb-list>\n      </rlb-card-body>\n    </rlb-card>\n  }\n</div>\n", styles: [".settings .settings-item .settings-control{width:40%}\n"], dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "component", type: i2$1.InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "inputId", "extValidation", "enable-validation"] }, { kind: "component", type: i2$1.BreadcrumbComponent, selector: "rlb-breadcrumb", inputs: ["divider", "items", "cssClasses"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: i2$1.RlbFabComponent, selector: "rlb-fab", inputs: ["color", "size", "disabled", "outline", "position"] }, { kind: "component", type: i2$1.CardBodyComponent, selector: "rlb-card-body" }, { kind: "component", type: i2$1.CardFooterComponent, selector: "rlb-card-footer" }, { kind: "component", type: i2$1.CardHeaderComponent, selector: "rlb-card-header" }, { kind: "component", type: i2$1.CardComponent, selector: "rlb-card", inputs: ["align", "overlay", "background", "border"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "component", type: i2$1.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i2$1.ListItemComponent, selector: "rlb-list-item", inputs: ["active", "disabled", "action"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$6.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$6.DatePipe, name: "date" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UserAccountComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: UserAccountComponent, isStandalone: true, selector: "rlb-user-account", ngImport: i0, template: "<div class=\"container mt-4 mb-5\">\n\n  <div class=\"d-flex align-items-center justify-content-between\">\n    <h3 class=\"m-0\">{{\"Account settings\"|translate|uppercase}}</h3>\n    <rlb-breadcrumb [cssClasses]=\"'p-0 px-md-1 py-md-2 m-0'\" [items]=\"[{ label: 'Home', link: '/', id: '1' },{ label: 'Account settings', id: '2' }]\" class=\"d-block\"></rlb-breadcrumb>\n  </div>\n\n  <!-- ACCOUNT DETAILS CARD  -->\n  <rlb-card class=\"mt-3\">\n    <rlb-card-header class=\"d-flex justify-content-between align-items-center py-3 px-4\">\n      <h5 class=\"m-0\">{{\"Account\" | translate}}</h5>\n    </rlb-card-header>\n\n    <rlb-card-body class=\"px-4 py-4\">\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.username' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser()) {\n            <rlb-input class=\"w-100\"  type=\"text\" [ngModel]=\"keyCloakUser()?.username\" disabled />\n          }\n        </div>\n      </div>\n\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.email' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser()) {\n            <rlb-input class=\"w-100\"  type=\"text\" [(ngModel)]=\"keyCloakUser()!.email\" />\n          } @else {\n            <rlb-input class=\"w-100\"  type=\"text\" readonly />\n          }\n        </div>\n      </div>\n\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.firstName' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser()) {\n            <rlb-input class=\"w-100\"  type=\"text\" [(ngModel)]=\"keyCloakUser()!.firstName\" />\n          } @else {\n            <rlb-input class=\"w-100\"  type=\"text\" readonly />\n          }\n        </div>\n      </div>\n\n      <div class=\"row align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.lastName' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser()) {\n            <rlb-input class=\"w-100\" type=\"text\" [(ngModel)]=\"keyCloakUser()!.lastName\" />\n          } @else {\n            <rlb-input class=\"w-100\" type=\"text\" readonly />\n          }\n        </div>\n      </div>\n    </rlb-card-body>\n\n    <rlb-card-footer>\n      <div class=\"d-flex align-items-center justify-content-end gap-2\">\n        <button rlb-button outline (click)=\"updateProfile()\">\n          <i class=\"bi bi-floppy\"></i>\n          {{'common.save' | translate}}\n        </button>\n        <button rlb-button outline color=\"danger\" (click)=\"logout()\">\n          <i class=\"bi bi-box-arrow-right\"></i>\n          {{'core.account.logout' | translate}}\n        </button>\n      </div>\n    </rlb-card-footer>\n  </rlb-card>\n\n  <!-- CREDENTIALS SECTION -->\n  @if (keyCloakUser()) {\n    <h3 class=\"mb-4 text-center mt-5\">{{ 'core.account.credentials.title' | translate}}</h3>\n\n    @for (type of keycloakCredentials(); track type) {\n      <rlb-card class=\"mb-4\">\n\n        <rlb-card-header class=\"d-flex justify-content-between align-items-center py-3 px-4\">\n          <h6 class=\"mb-0 fw-bold\">{{ ('core.account.credentials.'+type?.type) | translate }}</h6>\n          @if (type.type === 'otp') {\n            <rlb-fab (click)=\"configureOTP()\" size=\"sm\" [tooltip]=\"'core.account.credentials.addOTP' | translate\">\n              <i class=\"bi bi-plus-circle\"></i>\n            </rlb-fab>\n          }\n        </rlb-card-header>\n\n        <rlb-card-body>\n          <rlb-list class=\"settings m-0\">\n            @for (cred of type.userCredentialMetadatas; track cred.credential.id) {\n              <rlb-list-item class=\"px-4 py-3\">\n                <div class=\"row align-items-center w-100\">\n                  <div class=\"col-md-1 text-center mb-2 mb-md-0\">\n                    <i class=\"bi bi-key text-secondary\" style=\"font-size: 2rem;\"></i>\n                  </div>\n                  <div class=\"col-md-5 mb-2 mb-md-0\">\n                    <span class=\"text-muted small d-block\">{{ 'core.account.credentials.name' | translate }}</span>\n                    <span class=\"fw-semibold\">{{cred.credential.userLabel || cred.credential.type}}</span>\n                  </div>\n                  <div class=\"col-md-4 mb-3 mb-md-0\">\n                    <span class=\"text-muted small d-block\">{{'core.account.credentials.created' | translate}}</span>\n                    <span>{{cred.credential.createdDate | date:'dd:MM:yyyy HH:mm' }}</span>\n                  </div>\n                  <div class=\"col-md-2 text-md-end\">\n                    @if (type.removeable) {\n                      <button rlb-button class=\"w-100\" color=\"danger\" (click)=\"removeCredential(type.type, cred.credential.id)\">\n                        <i class=\"bi bi-trash\"></i> {{ 'core.account.credentials.delete' | translate}}\n                      </button>\n                    } @else {\n                      <button rlb-button class=\"w-100\" outline (click)=\"updatePassword()\">\n                        <i class=\"bi bi-pencil-square\"></i> {{ 'core.account.credentials.update' | translate}}\n                      </button>\n                    }\n                  </div>\n                </div>\n              </rlb-list-item>\n            }\n\n            @if (type.userCredentialMetadatas.length === 0) {\n              <rlb-list-item>\n                <div class=\"py-4 text-center text-muted\">\n                  {{ 'core.account.credentials.noCredentials' | translate}}\n                </div>\n              </rlb-list-item>\n            }\n          </rlb-list>\n        </rlb-card-body>\n      </rlb-card>\n    }\n\n      <!-- SESSION SECTION -->\n    <h3 class=\"mb-4 text-center mt-5\">{{ 'core.account.session.title' | translate}}</h3>\n\n    <rlb-card border=\"secondary\" class=\"mb-5\">\n      <rlb-card-body class=\"p-0\">\n        <rlb-list class=\"settings m-0\">\n          @for (d of keyCloakDevices(); track d.id) {\n            <rlb-list-item class=\"settings-item px-4 py-4\">\n\n              <!-- Session Top Row (Device Info) -->\n              <div class=\"d-flex align-items-center pb-3 mb-3\">\n                <i class=\"bi bi-laptop text-secondary me-3\" style=\"font-size: 2rem;\"></i>\n                <h6 class=\"mb-0 fw-bold\">{{d.os}} {{d.osVersion}} - {{d.browser}}</h6>\n                @if (d.current) {\n                  <span class=\"badge bg-success ms-3 rounded-pill px-3 py-2\">\n                    {{ 'core.account.session.current' | translate}}\n                  </span>\n                }\n              </div>\n\n              <div class=\"row text-center text-md-start gy-3\">\n                <div class=\"col-sm-6 col-md-3\">\n                  <span class=\"text-muted small d-block\">{{ 'core.account.session.ip' | translate }}</span>\n                  <span class=\"fw-medium\">{{d.ipAddress}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-3\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.lastAccess' | translate}}</span>\n                  <span>{{d.lastAccess*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.applications' | translate}}</span>\n                  <span>{{d.clientslist }} </span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.started' | translate}}</span>\n                  <span>{{d.started*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.expires' | translate}}</span>\n                  <span>{{d.expires*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n              </div>\n            </rlb-list-item>\n          }\n        </rlb-list>\n      </rlb-card-body>\n    </rlb-card>\n  }\n</div>\n\n", styles: [".settings .settings-item .settings-control{width:40%}\n"], dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "component", type: i1$3.InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "inputId", "extValidation", "enable-validation"] }, { kind: "component", type: i1$3.BreadcrumbComponent, selector: "rlb-breadcrumb", inputs: ["divider", "items", "cssClasses"] }, { kind: "component", type: i1$3.ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: i1$3.RlbFabComponent, selector: "rlb-fab", inputs: ["color", "size", "disabled", "outline", "position"] }, { kind: "component", type: i1$3.CardBodyComponent, selector: "rlb-card-body" }, { kind: "component", type: i1$3.CardFooterComponent, selector: "rlb-card-footer" }, { kind: "component", type: i1$3.CardHeaderComponent, selector: "rlb-card-header" }, { kind: "component", type: i1$3.CardComponent, selector: "rlb-card", inputs: ["align", "overlay", "background", "border"] }, { kind: "directive", type: i1$3.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "component", type: i1$3.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i1$3.ListItemComponent, selector: "rlb-list-item", inputs: ["active", "disabled", "action"] }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$6.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$6.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: UserAccountComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: UserAccountComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-user-account', imports: [RlbAppModule, CommonModule], template: "<div class=\"container mt-4 mb-5\">\n\n  <div class=\"d-flex align-items-center justify-content-between\">\n    <h3 class=\"m-0\">{{\"Account settings\"|translate|uppercase}}</h3>\n    <rlb-breadcrumb [cssClasses]=\"'p-0 px-md-1 py-md-2 m-0'\" [items]=\"[{ label: 'Home', link: '/', id: '1' },{ label: 'Account settings', id: '2' }]\" class=\"d-block\"></rlb-breadcrumb>\n  </div>\n\n  <!-- ACCOUNT DETAILS CARD  -->\n  <rlb-card class=\"mt-3\">\n    <rlb-card-header class=\"d-flex justify-content-between align-items-center py-3 px-4\">\n      <h5 class=\"m-0\">{{\"Account\" | translate}}</h5>\n    </rlb-card-header>\n\n    <rlb-card-body class=\"px-4 py-4\">\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.username' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser) {\n            <rlb-input class=\"w-100\"  type=\"text\" [(ngModel)]=\"keyCloakUser.username\" disabled />\n          }\n        </div>\n      </div>\n\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.email' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser) {\n            <rlb-input class=\"w-100\"  type=\"text\" [(ngModel)]=\"keyCloakUser.email\" />\n          } @else {\n            <rlb-input class=\"w-100\"  type=\"text\" readonly />\n          }\n        </div>\n      </div>\n\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.firstName' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser) {\n            <rlb-input class=\"w-100\"  type=\"text\" [(ngModel)]=\"keyCloakUser.firstName\" />\n          } @else {\n            <rlb-input class=\"w-100\"  type=\"text\" readonly />\n          }\n        </div>\n      </div>\n\n      <div class=\"row align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.lastName' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser) {\n            <rlb-input class=\"w-100\" type=\"text\" [(ngModel)]=\"keyCloakUser.lastName\" />\n          } @else {\n            <rlb-input class=\"w-100\" type=\"text\" readonly />\n          }\n        </div>\n      </div>\n    </rlb-card-body>\n\n    <rlb-card-footer>\n      <div class=\"d-flex align-items-center justify-content-end gap-2\">\n        <button rlb-button outline (click)=\"updateProfile()\">\n          <i class=\"bi bi-floppy\"></i>\n          {{'common.save' | translate}}\n        </button>\n        <button rlb-button outline color=\"danger\" (click)=\"logout()\">\n          <i class=\"bi bi-box-arrow-right\"></i>\n          {{'core.account.logout' | translate}}\n        </button>\n      </div>\n    </rlb-card-footer>\n  </rlb-card>\n\n  <!-- CREDENTIALS SECTION -->\n  @if (keyCloakUser) {\n    <h3 class=\"mb-4 text-center mt-5\">{{ 'core.account.credentials.title' | translate}}</h3>\n\n    @for (type of keycloakCredentials; track type) {\n      <rlb-card class=\"mb-4\">\n\n        <rlb-card-header class=\"d-flex justify-content-between align-items-center py-3 px-4\">\n          <h6 class=\"mb-0 fw-bold\">{{ ('core.account.credentials.'+type?.type) | translate }}</h6>\n          @if (type.type === 'otp') {\n            <rlb-fab (click)=\"configureOTP()\" size=\"sm\" [tooltip]=\"'core.account.credentials.addOTP' | translate\">\n              <i class=\"bi bi-plus-circle\"></i>\n            </rlb-fab>\n          }\n        </rlb-card-header>\n\n        <rlb-card-body>\n          <rlb-list class=\"settings m-0\">\n            @for (cred of type.userCredentialMetadatas; track cred.credential.id) {\n              <rlb-list-item class=\"px-4 py-3\">\n                <div class=\"row align-items-center w-100\">\n                  <div class=\"col-md-1 text-center mb-2 mb-md-0\">\n                    <i class=\"bi bi-key text-secondary\" style=\"font-size: 2rem;\"></i>\n                  </div>\n                  <div class=\"col-md-5 mb-2 mb-md-0\">\n                    <span class=\"text-muted small d-block\">{{ 'core.account.credentials.name' | translate }}</span>\n                    <span class=\"fw-semibold\">{{cred.credential.userLabel || cred.credential.type}}</span>\n                  </div>\n                  <div class=\"col-md-4 mb-3 mb-md-0\">\n                    <span class=\"text-muted small d-block\">{{'core.account.credentials.created' | translate}}</span>\n                    <span>{{cred.credential.createdDate | date:'dd:MM:yyyy HH:mm' }}</span>\n                  </div>\n                  <div class=\"col-md-2 text-md-end\">\n                    @if (type.removeable) {\n                      <button rlb-button class=\"w-100\" color=\"danger\" (click)=\"removeCredential(type.type, cred.credential.id)\">\n                        <i class=\"bi bi-trash\"></i> {{ 'core.account.credentials.delete' | translate}}\n                      </button>\n                    } @else {\n                      <button rlb-button class=\"w-100\" outline (click)=\"updatePassword()\">\n                        <i class=\"bi bi-pencil-square\"></i> {{ 'core.account.credentials.update' | translate}}\n                      </button>\n                    }\n                  </div>\n                </div>\n              </rlb-list-item>\n            }\n\n            @if (type.userCredentialMetadatas.length === 0) {\n              <rlb-list-item>\n                <div class=\"py-4 text-center text-muted\">\n                  {{ 'core.account.credentials.noCredentials' | translate}}\n                </div>\n              </rlb-list-item>\n            }\n          </rlb-list>\n        </rlb-card-body>\n      </rlb-card>\n    }\n\n      <!-- SESSION SECTION -->\n    <h3 class=\"mb-4 text-center mt-5\">{{ 'core.account.session.title' | translate}}</h3>\n\n    <rlb-card border=\"secondary\" class=\"mb-5\">\n      <rlb-card-body class=\"p-0\">\n        <rlb-list class=\"settings m-0\">\n          @for (d of keyCloakDevices; track d.id) {\n            <rlb-list-item class=\"settings-item px-4 py-4\">\n\n              <!-- Session Top Row (Device Info) -->\n              <div class=\"d-flex align-items-center pb-3 mb-3\">\n                <i class=\"bi bi-laptop text-secondary me-3\" style=\"font-size: 2rem;\"></i>\n                <h6 class=\"mb-0 fw-bold\">{{d.os}} {{d.osVersion}} - {{d.browser}}</h6>\n                @if (d.current) {\n                  <span class=\"badge bg-success ms-3 rounded-pill px-3 py-2\">\n                    {{ 'core.account.session.current' | translate}}\n                  </span>\n                }\n              </div>\n\n              <div class=\"row text-center text-md-start gy-3\">\n                <div class=\"col-sm-6 col-md-3\">\n                  <span class=\"text-muted small d-block\">{{ 'core.account.session.ip' | translate }}</span>\n                  <span class=\"fw-medium\">{{d.ipAddress}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-3\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.lastAccess' | translate}}</span>\n                  <span>{{d.lastAccess*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.applications' | translate}}</span>\n                  <span>{{d.clientslist }} </span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.started' | translate}}</span>\n                  <span>{{d.started*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.expires' | translate}}</span>\n                  <span>{{d.expires*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n              </div>\n            </rlb-list-item>\n          }\n        </rlb-list>\n      </rlb-card-body>\n    </rlb-card>\n  }\n</div>\n", styles: [".settings .settings-item .settings-control{width:40%}\n"] }]
-        }], ctorParameters: () => [{ type: i1$6.Location }, { type: i1$1.Store }, { type: KeycloakProfileService }, { type: i2$1.ModalService }, { type: LanguageService }, { type: AuthenticationService }, { type: i2.Router }] });
+            args: [{ selector: 'rlb-user-account', imports: [RlbAppModule, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container mt-4 mb-5\">\n\n  <div class=\"d-flex align-items-center justify-content-between\">\n    <h3 class=\"m-0\">{{\"Account settings\"|translate|uppercase}}</h3>\n    <rlb-breadcrumb [cssClasses]=\"'p-0 px-md-1 py-md-2 m-0'\" [items]=\"[{ label: 'Home', link: '/', id: '1' },{ label: 'Account settings', id: '2' }]\" class=\"d-block\"></rlb-breadcrumb>\n  </div>\n\n  <!-- ACCOUNT DETAILS CARD  -->\n  <rlb-card class=\"mt-3\">\n    <rlb-card-header class=\"d-flex justify-content-between align-items-center py-3 px-4\">\n      <h5 class=\"m-0\">{{\"Account\" | translate}}</h5>\n    </rlb-card-header>\n\n    <rlb-card-body class=\"px-4 py-4\">\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.username' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser()) {\n            <rlb-input class=\"w-100\"  type=\"text\" [ngModel]=\"keyCloakUser()?.username\" disabled />\n          }\n        </div>\n      </div>\n\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.email' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser()) {\n            <rlb-input class=\"w-100\"  type=\"text\" [(ngModel)]=\"keyCloakUser()!.email\" />\n          } @else {\n            <rlb-input class=\"w-100\"  type=\"text\" readonly />\n          }\n        </div>\n      </div>\n\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.firstName' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser()) {\n            <rlb-input class=\"w-100\"  type=\"text\" [(ngModel)]=\"keyCloakUser()!.firstName\" />\n          } @else {\n            <rlb-input class=\"w-100\"  type=\"text\" readonly />\n          }\n        </div>\n      </div>\n\n      <div class=\"row align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.lastName' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser()) {\n            <rlb-input class=\"w-100\" type=\"text\" [(ngModel)]=\"keyCloakUser()!.lastName\" />\n          } @else {\n            <rlb-input class=\"w-100\" type=\"text\" readonly />\n          }\n        </div>\n      </div>\n    </rlb-card-body>\n\n    <rlb-card-footer>\n      <div class=\"d-flex align-items-center justify-content-end gap-2\">\n        <button rlb-button outline (click)=\"updateProfile()\">\n          <i class=\"bi bi-floppy\"></i>\n          {{'common.save' | translate}}\n        </button>\n        <button rlb-button outline color=\"danger\" (click)=\"logout()\">\n          <i class=\"bi bi-box-arrow-right\"></i>\n          {{'core.account.logout' | translate}}\n        </button>\n      </div>\n    </rlb-card-footer>\n  </rlb-card>\n\n  <!-- CREDENTIALS SECTION -->\n  @if (keyCloakUser()) {\n    <h3 class=\"mb-4 text-center mt-5\">{{ 'core.account.credentials.title' | translate}}</h3>\n\n    @for (type of keycloakCredentials(); track type) {\n      <rlb-card class=\"mb-4\">\n\n        <rlb-card-header class=\"d-flex justify-content-between align-items-center py-3 px-4\">\n          <h6 class=\"mb-0 fw-bold\">{{ ('core.account.credentials.'+type?.type) | translate }}</h6>\n          @if (type.type === 'otp') {\n            <rlb-fab (click)=\"configureOTP()\" size=\"sm\" [tooltip]=\"'core.account.credentials.addOTP' | translate\">\n              <i class=\"bi bi-plus-circle\"></i>\n            </rlb-fab>\n          }\n        </rlb-card-header>\n\n        <rlb-card-body>\n          <rlb-list class=\"settings m-0\">\n            @for (cred of type.userCredentialMetadatas; track cred.credential.id) {\n              <rlb-list-item class=\"px-4 py-3\">\n                <div class=\"row align-items-center w-100\">\n                  <div class=\"col-md-1 text-center mb-2 mb-md-0\">\n                    <i class=\"bi bi-key text-secondary\" style=\"font-size: 2rem;\"></i>\n                  </div>\n                  <div class=\"col-md-5 mb-2 mb-md-0\">\n                    <span class=\"text-muted small d-block\">{{ 'core.account.credentials.name' | translate }}</span>\n                    <span class=\"fw-semibold\">{{cred.credential.userLabel || cred.credential.type}}</span>\n                  </div>\n                  <div class=\"col-md-4 mb-3 mb-md-0\">\n                    <span class=\"text-muted small d-block\">{{'core.account.credentials.created' | translate}}</span>\n                    <span>{{cred.credential.createdDate | date:'dd:MM:yyyy HH:mm' }}</span>\n                  </div>\n                  <div class=\"col-md-2 text-md-end\">\n                    @if (type.removeable) {\n                      <button rlb-button class=\"w-100\" color=\"danger\" (click)=\"removeCredential(type.type, cred.credential.id)\">\n                        <i class=\"bi bi-trash\"></i> {{ 'core.account.credentials.delete' | translate}}\n                      </button>\n                    } @else {\n                      <button rlb-button class=\"w-100\" outline (click)=\"updatePassword()\">\n                        <i class=\"bi bi-pencil-square\"></i> {{ 'core.account.credentials.update' | translate}}\n                      </button>\n                    }\n                  </div>\n                </div>\n              </rlb-list-item>\n            }\n\n            @if (type.userCredentialMetadatas.length === 0) {\n              <rlb-list-item>\n                <div class=\"py-4 text-center text-muted\">\n                  {{ 'core.account.credentials.noCredentials' | translate}}\n                </div>\n              </rlb-list-item>\n            }\n          </rlb-list>\n        </rlb-card-body>\n      </rlb-card>\n    }\n\n      <!-- SESSION SECTION -->\n    <h3 class=\"mb-4 text-center mt-5\">{{ 'core.account.session.title' | translate}}</h3>\n\n    <rlb-card border=\"secondary\" class=\"mb-5\">\n      <rlb-card-body class=\"p-0\">\n        <rlb-list class=\"settings m-0\">\n          @for (d of keyCloakDevices(); track d.id) {\n            <rlb-list-item class=\"settings-item px-4 py-4\">\n\n              <!-- Session Top Row (Device Info) -->\n              <div class=\"d-flex align-items-center pb-3 mb-3\">\n                <i class=\"bi bi-laptop text-secondary me-3\" style=\"font-size: 2rem;\"></i>\n                <h6 class=\"mb-0 fw-bold\">{{d.os}} {{d.osVersion}} - {{d.browser}}</h6>\n                @if (d.current) {\n                  <span class=\"badge bg-success ms-3 rounded-pill px-3 py-2\">\n                    {{ 'core.account.session.current' | translate}}\n                  </span>\n                }\n              </div>\n\n              <div class=\"row text-center text-md-start gy-3\">\n                <div class=\"col-sm-6 col-md-3\">\n                  <span class=\"text-muted small d-block\">{{ 'core.account.session.ip' | translate }}</span>\n                  <span class=\"fw-medium\">{{d.ipAddress}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-3\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.lastAccess' | translate}}</span>\n                  <span>{{d.lastAccess*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.applications' | translate}}</span>\n                  <span>{{d.clientslist }} </span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.started' | translate}}</span>\n                  <span>{{d.started*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.expires' | translate}}</span>\n                  <span>{{d.expires*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n              </div>\n            </rlb-list-item>\n          }\n        </rlb-list>\n      </rlb-card-body>\n    </rlb-card>\n  }\n</div>\n\n", styles: [".settings .settings-item .settings-control{width:40%}\n"] }]
+        }], ctorParameters: () => [] });
 
 class SettingsCoreComponent {
-    constructor(_location, toastService, languageService, store) {
-        this._location = _location;
-        this.toastService = toastService;
-        this.languageService = languageService;
-        this.store = store;
+    constructor() {
+        this._location = inject(Location);
+        this.toastService = inject(ToastService);
+        this.languageService = inject(LanguageService);
+        this.store = inject(Store);
+        this.languages = computed(() => {
+            return this.store.selectSignal(o => o[appContextFeatureKey].supportedLanguages)()
+                .map((lang) => {
+                return {
+                    value: lang,
+                    label: this.languageService.getLanguageName(lang),
+                };
+            });
+        }, ...(ngDevMode ? [{ debugName: "languages" }] : /* istanbul ignore next */ []));
+        this.currentLanguage = toSignal(this.store.select(o => o[appContextFeatureKey].language), { initialValue: 'en' });
+        this.darkMode = computed(() => this.store.selectSignal(o => o[appContextFeatureKey].theme)() === 'dark', ...(ngDevMode ? [{ debugName: "darkMode" }] : /* istanbul ignore next */ []));
     }
     backClicked() {
         this._location.back();
     }
-    get languages() {
-        return this.store.selectSignal(o => o[appContextFeatureKey].supportedLanguages)().map((lang) => {
-            return {
-                value: lang,
-                label: this.languageService.getLanguageName(lang)
-            };
-        });
-    }
-    get currentLanguage() {
-        return this.store.selectSignal(o => o[appContextFeatureKey].language)();
-    }
-    set currentLanguage(value) {
+    setCurrentLanguage(value) {
         this.store.dispatch(AppContextActions.setLanguage({ language: value }));
         this.toastService.openToast('toast-c-1', 'toast-component', {
             title: this.languageService.translate('common.saved'),
@@ -3216,10 +3130,7 @@ class SettingsCoreComponent {
             ok: this.languageService.translate('ok'),
         });
     }
-    get darkMode() {
-        return this.store.selectSignal(o => o[appContextFeatureKey].theme)() === 'dark';
-    }
-    set darkMode(value) {
+    setDarkMode(value) {
         this.store.dispatch(AppContextActions.setTheme({ theme: value ? 'dark' : 'light' }));
         this.toastService.openToast('toast-c-1', 'toast-component', {
             title: this.languageService.translate('common.saved'),
@@ -3228,13 +3139,13 @@ class SettingsCoreComponent {
             ok: this.languageService.translate('ok'),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SettingsCoreComponent, deps: [{ token: i1$6.Location }, { token: i2$1.ToastService }, { token: LanguageService }, { token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SettingsCoreComponent, isStandalone: true, selector: "rlb-settings-core", ngImport: i0, template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.settings.generalTitle' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n    (click)=\"backClicked()\" style=\"font-size: 25px;font-weight: 600;\"></i>\n  </div>\n  <rlb-list class=\"settings\">\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.settings.generalTheme' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          <rlb-switch size=\"small\" [(ngModel)]=\"darkMode\" class=\"mt-2\" />\n        </div>\n      </div>\n    </rlb-list-item>\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.settings.generalLanguage' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          <rlb-select size=\"small\" [(ngModel)]=\"currentLanguage\">\n            @for (l of languages; track l.value) {\n              <rlb-option [value]=\"l.value\">{{l.label}}</rlb-option>\n            }\n          </rlb-select>\n        </div>\n      </div>\n    </rlb-list-item>\n  </rlb-list>\n</div>\n", styles: [".settings .settings-item .settings-control{width:40%}.settings .settings-item .settings-control ::ng-deep rlb-switch .form-check{display:block;margin-left:auto}\n"], dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "component", type: i2$1.SwitchComponent, selector: "rlb-switch", inputs: ["disabled", "readonly", "size", "id"] }, { kind: "component", type: i2$1.SelectComponent, selector: "rlb-select", inputs: ["placeholder", "size", "disabled", "readonly", "multiple", "display", "inputId", "enable-validation"] }, { kind: "component", type: i2$1.OptionComponent, selector: "rlb-option", inputs: ["value", "disabled"] }, { kind: "component", type: i2$1.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i2$1.ListItemComponent, selector: "rlb-list-item", inputs: ["active", "disabled", "action"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SettingsCoreComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SettingsCoreComponent, isStandalone: true, selector: "rlb-settings-core", ngImport: i0, template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.settings.generalTitle' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n    (click)=\"backClicked()\" style=\"font-size: 25px;font-weight: 600;\"></i>\n  </div>\n  <rlb-list class=\"settings\">\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.settings.generalTheme' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          <rlb-switch size=\"small\" [ngModel]=\"darkMode()\" (ngModelChange)=\"setDarkMode($event)\" class=\"mt-2\" />\n        </div>\n      </div>\n    </rlb-list-item>\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.settings.generalLanguage' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          <rlb-select size=\"small\" [ngModel]=\"currentLanguage()\" (ngModelChange)=\"setCurrentLanguage($event)\">\n            @for (l of languages(); track l.value) {\n              <rlb-option [value]=\"l.value\">{{l.label}}</rlb-option>\n            }\n          </rlb-select>\n        </div>\n      </div>\n    </rlb-list-item>\n  </rlb-list>\n</div>\n\n", styles: [".settings .settings-item .settings-control{width:40%}.settings .settings-item .settings-control ::ng-deep rlb-switch .form-check{display:block;margin-left:auto}\n"], dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "component", type: i1$3.SwitchComponent, selector: "rlb-switch", inputs: ["disabled", "readonly", "size", "id"] }, { kind: "component", type: i1$3.SelectComponent, selector: "rlb-select", inputs: ["placeholder", "size", "disabled", "readonly", "multiple", "display", "inputId", "enable-validation"] }, { kind: "component", type: i1$3.OptionComponent, selector: "rlb-option", inputs: ["value", "disabled"] }, { kind: "component", type: i1$3.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i1$3.ListItemComponent, selector: "rlb-list-item", inputs: ["active", "disabled", "action"] }, { kind: "directive", type: i1$7.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$7.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$4.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SettingsCoreComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SettingsCoreComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-settings-core', imports: [RlbAppModule], template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.settings.generalTitle' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n    (click)=\"backClicked()\" style=\"font-size: 25px;font-weight: 600;\"></i>\n  </div>\n  <rlb-list class=\"settings\">\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.settings.generalTheme' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          <rlb-switch size=\"small\" [(ngModel)]=\"darkMode\" class=\"mt-2\" />\n        </div>\n      </div>\n    </rlb-list-item>\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.settings.generalLanguage' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          <rlb-select size=\"small\" [(ngModel)]=\"currentLanguage\">\n            @for (l of languages; track l.value) {\n              <rlb-option [value]=\"l.value\">{{l.label}}</rlb-option>\n            }\n          </rlb-select>\n        </div>\n      </div>\n    </rlb-list-item>\n  </rlb-list>\n</div>\n", styles: [".settings .settings-item .settings-control{width:40%}.settings .settings-item .settings-control ::ng-deep rlb-switch .form-check{display:block;margin-left:auto}\n"] }]
-        }], ctorParameters: () => [{ type: i1$6.Location }, { type: i2$1.ToastService }, { type: LanguageService }, { type: i1$1.Store }] });
+            args: [{ selector: 'rlb-settings-core', imports: [RlbAppModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.settings.generalTitle' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n    (click)=\"backClicked()\" style=\"font-size: 25px;font-weight: 600;\"></i>\n  </div>\n  <rlb-list class=\"settings\">\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.settings.generalTheme' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          <rlb-switch size=\"small\" [ngModel]=\"darkMode()\" (ngModelChange)=\"setDarkMode($event)\" class=\"mt-2\" />\n        </div>\n      </div>\n    </rlb-list-item>\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.settings.generalLanguage' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          <rlb-select size=\"small\" [ngModel]=\"currentLanguage()\" (ngModelChange)=\"setCurrentLanguage($event)\">\n            @for (l of languages(); track l.value) {\n              <rlb-option [value]=\"l.value\">{{l.label}}</rlb-option>\n            }\n          </rlb-select>\n        </div>\n      </div>\n    </rlb-list-item>\n  </rlb-list>\n</div>\n\n", styles: [".settings .settings-item .settings-control{width:40%}.settings .settings-item .settings-control ::ng-deep rlb-switch .form-check{display:block;margin-left:auto}\n"] }]
+        }] });
 
 class SettingsListComponent {
     constructor(_location, appsService, authService, pageOptions) {
@@ -3242,9 +3153,8 @@ class SettingsListComponent {
         this.appsService = appsService;
         this.authService = authService;
         this.pageOptions = pageOptions;
-    }
-    get apps() {
-        return this.appsService.apps;
+        this.apps = this.appsService.apps;
+        this.pages = computed(() => this.pageOptions, ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
     }
     backClicked() {
         this._location.back();
@@ -3252,18 +3162,15 @@ class SettingsListComponent {
     selectApp(app) {
         this.appsService.selectApp(app, 'settings');
     }
-    get pages() {
-        return this.pageOptions;
-    }
     get auth$() {
         return this.authService.isAuthenticated$;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SettingsListComponent, deps: [{ token: i1$6.Location }, { token: AppsService }, { token: AuthenticationService }, { token: RLB_CFG_PAGES, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: SettingsListComponent, isStandalone: true, selector: "rlb-settings-list", ngImport: i0, template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.settings.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n    (click)=\"backClicked()\" style=\"font-size: 25px;font-weight: 600;\"></i>\n  </div>\n  <rlb-list>\n    <rlb-list-item-image icon=\"bi bi-gear\" [avatar-size]=\"35\" [line-1]=\" 'core.settings.generalTitle' | translate\"\n      [routerLink]=\"'/settings/general'\" [line-2]=\" 'core.settings.generalDescription' | translate\">\n    </rlb-list-item-image>\n    @for (app of apps; track app.id) {\n      <ng-container ngProjectAs=\"rlb-list-item-image\">\n        @if (app.settings) {\n          <ng-container ngProjectAs=\"rlb-list-item-image\">\n            <rlb-list-item-image [icon]=\"app.settings.icon\" [avatar-size]=\"35\"\n              [line-1]=\"app.data.friendlyName ? app.data.friendlyName : app.settings.title | translate\"\n              [disabled]=\"!app.enabled && (app.settings.auth && !(auth$ | async))\"\n              [line-2]=\"app.settings.description | translate\" (click)=\"selectApp(app)\">\n            </rlb-list-item-image>\n          </ng-container>\n        }\n      </ng-container>\n    }\n  </rlb-list>\n\n  @if (pages?.['status']?.path || pages?.['logger']?.path) {\n    <rlb-list class=\"mt-5\">\n      @if (pages?.['status']?.path) {\n        <rlb-list-item-image icon=\"bi bi-check2-circle\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.status' | translate\" [routerLink]=\"'/status'\">\n        </rlb-list-item-image>\n      }\n      @if (pages?.['logger']?.path) {\n        <rlb-list-item-image icon=\"bi bi-file-text\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.logger' | translate\" [routerLink]=\"'/logger'\">\n        </rlb-list-item-image>\n      }\n    </rlb-list>\n  }\n\n  @if (pages?.['privacy']?.path || pages?.['cookies']?.path || pages?.['terms']?.path || pages?.['support']?.path) {\n    <rlb-list class=\"mt-4\"\n      >\n      @if (pages?.['privacy']?.path) {\n        <rlb-list-item-image icon=\"bi bi-shield-check\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.privacy' | translate\" [routerLink]=\"'/privacy'\">\n        </rlb-list-item-image>\n      }\n      @if (pages?.['cookies']?.path) {\n        <rlb-list-item-image icon=\"bi bi bi-cookie\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.cookies' | translate\" [routerLink]=\"'/cookies'\">\n        </rlb-list-item-image>\n      }\n      @if (pages?.['terms']?.path) {\n        <rlb-list-item-image icon=\"bi bi-vector-pen\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.legal' | translate\" [routerLink]=\"'/terms'\">\n        </rlb-list-item-image>\n      }\n      @if (pages?.['support']?.path) {\n        <rlb-list-item-image icon=\"bi bi-chat-quote\" [avatar-size]=\"18\"\n          [line-1]=\" 'core.settings.support' | translate\" [routerLink]=\"'/support'\">\n        </rlb-list-item-image>\n      }\n    </rlb-list>\n  }\n</div>\n", styles: [".settings .settings-item .settings-control{width:40%}\n"], dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "component", type: i2$1.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i2$1.ListItemImageComponent, selector: "rlb-list-item-image", inputs: ["active", "disabled", "counter-empty", "counter-pill", "counter-border", "avatar-size", "username", "line-1", "line-2", "avatar", "counter", "counter-color", "icon"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SettingsListComponent, deps: [{ token: i1$6.Location }, { token: AppsService }, { token: AuthenticationService }, { token: RLB_CFG_PAGES, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: SettingsListComponent, isStandalone: true, selector: "rlb-settings-list", ngImport: i0, template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.settings.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n    (click)=\"backClicked()\" style=\"font-size: 25px;font-weight: 600;\"></i>\n  </div>\n  <rlb-list>\n    <rlb-list-item-image icon=\"bi bi-gear\" [avatar-size]=\"35\" [line-1]=\" 'core.settings.generalTitle' | translate\"\n      [routerLink]=\"'/settings/general'\" [line-2]=\" 'core.settings.generalDescription' | translate\">\n    </rlb-list-item-image>\n    @for (app of apps(); track app.id) {\n      <ng-container ngProjectAs=\"rlb-list-item-image\">\n        @if (app.settings) {\n          <ng-container ngProjectAs=\"rlb-list-item-image\">\n            <rlb-list-item-image [icon]=\"app.settings.icon\" [avatar-size]=\"35\"\n              [line-1]=\"app.data.friendlyName ? app.data.friendlyName : app.settings.title | translate\"\n              [disabled]=\"!app.enabled && (app.settings.auth && !(auth$ | async))\"\n              [line-2]=\"app.settings.description | translate\" (click)=\"selectApp(app)\">\n            </rlb-list-item-image>\n          </ng-container>\n        }\n      </ng-container>\n    }\n  </rlb-list>\n\n  @if (pages()?.['status']?.path || pages()?.['logger']?.path) {\n    <rlb-list class=\"mt-5\">\n      @if (pages()?.['status']?.path) {\n        <rlb-list-item-image icon=\"bi bi-check2-circle\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.status' | translate\" [routerLink]=\"'/status'\">\n        </rlb-list-item-image>\n      }\n      @if (pages()?.['logger']?.path) {\n        <rlb-list-item-image icon=\"bi bi-file-text\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.logger' | translate\" [routerLink]=\"'/logger'\">\n        </rlb-list-item-image>\n      }\n    </rlb-list>\n  }\n\n  @if (pages()?.['privacy']?.path || pages()?.['cookies']?.path || pages()?.['terms']?.path || pages()?.['support']?.path) {\n    <rlb-list class=\"mt-4\"\n      >\n      @if (pages()?.['privacy']?.path) {\n        <rlb-list-item-image icon=\"bi bi-shield-check\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.privacy' | translate\" [routerLink]=\"'/privacy'\">\n        </rlb-list-item-image>\n      }\n      @if (pages()?.['cookies']?.path) {\n        <rlb-list-item-image icon=\"bi bi bi-cookie\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.cookies' | translate\" [routerLink]=\"'/cookies'\">\n        </rlb-list-item-image>\n      }\n      @if (pages()?.['terms']?.path) {\n        <rlb-list-item-image icon=\"bi bi-vector-pen\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.legal' | translate\" [routerLink]=\"'/terms'\">\n        </rlb-list-item-image>\n      }\n      @if (pages()?.['support']?.path) {\n        <rlb-list-item-image icon=\"bi bi-chat-quote\" [avatar-size]=\"18\"\n          [line-1]=\" 'core.settings.support' | translate\" [routerLink]=\"'/support'\">\n        </rlb-list-item-image>\n      }\n    </rlb-list>\n  }\n</div>\n\n", styles: [".settings .settings-item .settings-control{width:40%}\n"], dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "component", type: i1$3.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i1$3.ListItemImageComponent, selector: "rlb-list-item-image", inputs: ["active", "disabled", "counter-empty", "counter-pill", "counter-border", "avatar-size", "username", "line-1", "line-2", "avatar", "counter", "counter-color", "icon"] }, { kind: "directive", type: i5.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$4.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: SettingsListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: SettingsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-settings-list', imports: [RlbAppModule, CommonModule], template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.settings.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n    (click)=\"backClicked()\" style=\"font-size: 25px;font-weight: 600;\"></i>\n  </div>\n  <rlb-list>\n    <rlb-list-item-image icon=\"bi bi-gear\" [avatar-size]=\"35\" [line-1]=\" 'core.settings.generalTitle' | translate\"\n      [routerLink]=\"'/settings/general'\" [line-2]=\" 'core.settings.generalDescription' | translate\">\n    </rlb-list-item-image>\n    @for (app of apps; track app.id) {\n      <ng-container ngProjectAs=\"rlb-list-item-image\">\n        @if (app.settings) {\n          <ng-container ngProjectAs=\"rlb-list-item-image\">\n            <rlb-list-item-image [icon]=\"app.settings.icon\" [avatar-size]=\"35\"\n              [line-1]=\"app.data.friendlyName ? app.data.friendlyName : app.settings.title | translate\"\n              [disabled]=\"!app.enabled && (app.settings.auth && !(auth$ | async))\"\n              [line-2]=\"app.settings.description | translate\" (click)=\"selectApp(app)\">\n            </rlb-list-item-image>\n          </ng-container>\n        }\n      </ng-container>\n    }\n  </rlb-list>\n\n  @if (pages?.['status']?.path || pages?.['logger']?.path) {\n    <rlb-list class=\"mt-5\">\n      @if (pages?.['status']?.path) {\n        <rlb-list-item-image icon=\"bi bi-check2-circle\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.status' | translate\" [routerLink]=\"'/status'\">\n        </rlb-list-item-image>\n      }\n      @if (pages?.['logger']?.path) {\n        <rlb-list-item-image icon=\"bi bi-file-text\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.logger' | translate\" [routerLink]=\"'/logger'\">\n        </rlb-list-item-image>\n      }\n    </rlb-list>\n  }\n\n  @if (pages?.['privacy']?.path || pages?.['cookies']?.path || pages?.['terms']?.path || pages?.['support']?.path) {\n    <rlb-list class=\"mt-4\"\n      >\n      @if (pages?.['privacy']?.path) {\n        <rlb-list-item-image icon=\"bi bi-shield-check\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.privacy' | translate\" [routerLink]=\"'/privacy'\">\n        </rlb-list-item-image>\n      }\n      @if (pages?.['cookies']?.path) {\n        <rlb-list-item-image icon=\"bi bi bi-cookie\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.cookies' | translate\" [routerLink]=\"'/cookies'\">\n        </rlb-list-item-image>\n      }\n      @if (pages?.['terms']?.path) {\n        <rlb-list-item-image icon=\"bi bi-vector-pen\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.legal' | translate\" [routerLink]=\"'/terms'\">\n        </rlb-list-item-image>\n      }\n      @if (pages?.['support']?.path) {\n        <rlb-list-item-image icon=\"bi bi-chat-quote\" [avatar-size]=\"18\"\n          [line-1]=\" 'core.settings.support' | translate\" [routerLink]=\"'/support'\">\n        </rlb-list-item-image>\n      }\n    </rlb-list>\n  }\n</div>\n", styles: [".settings .settings-item .settings-control{width:40%}\n"] }]
+            args: [{ selector: 'rlb-settings-list', imports: [RlbAppModule, CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.settings.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n    (click)=\"backClicked()\" style=\"font-size: 25px;font-weight: 600;\"></i>\n  </div>\n  <rlb-list>\n    <rlb-list-item-image icon=\"bi bi-gear\" [avatar-size]=\"35\" [line-1]=\" 'core.settings.generalTitle' | translate\"\n      [routerLink]=\"'/settings/general'\" [line-2]=\" 'core.settings.generalDescription' | translate\">\n    </rlb-list-item-image>\n    @for (app of apps(); track app.id) {\n      <ng-container ngProjectAs=\"rlb-list-item-image\">\n        @if (app.settings) {\n          <ng-container ngProjectAs=\"rlb-list-item-image\">\n            <rlb-list-item-image [icon]=\"app.settings.icon\" [avatar-size]=\"35\"\n              [line-1]=\"app.data.friendlyName ? app.data.friendlyName : app.settings.title | translate\"\n              [disabled]=\"!app.enabled && (app.settings.auth && !(auth$ | async))\"\n              [line-2]=\"app.settings.description | translate\" (click)=\"selectApp(app)\">\n            </rlb-list-item-image>\n          </ng-container>\n        }\n      </ng-container>\n    }\n  </rlb-list>\n\n  @if (pages()?.['status']?.path || pages()?.['logger']?.path) {\n    <rlb-list class=\"mt-5\">\n      @if (pages()?.['status']?.path) {\n        <rlb-list-item-image icon=\"bi bi-check2-circle\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.status' | translate\" [routerLink]=\"'/status'\">\n        </rlb-list-item-image>\n      }\n      @if (pages()?.['logger']?.path) {\n        <rlb-list-item-image icon=\"bi bi-file-text\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.logger' | translate\" [routerLink]=\"'/logger'\">\n        </rlb-list-item-image>\n      }\n    </rlb-list>\n  }\n\n  @if (pages()?.['privacy']?.path || pages()?.['cookies']?.path || pages()?.['terms']?.path || pages()?.['support']?.path) {\n    <rlb-list class=\"mt-4\"\n      >\n      @if (pages()?.['privacy']?.path) {\n        <rlb-list-item-image icon=\"bi bi-shield-check\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.privacy' | translate\" [routerLink]=\"'/privacy'\">\n        </rlb-list-item-image>\n      }\n      @if (pages()?.['cookies']?.path) {\n        <rlb-list-item-image icon=\"bi bi bi-cookie\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.cookies' | translate\" [routerLink]=\"'/cookies'\">\n        </rlb-list-item-image>\n      }\n      @if (pages()?.['terms']?.path) {\n        <rlb-list-item-image icon=\"bi bi-vector-pen\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.legal' | translate\" [routerLink]=\"'/terms'\">\n        </rlb-list-item-image>\n      }\n      @if (pages()?.['support']?.path) {\n        <rlb-list-item-image icon=\"bi bi-chat-quote\" [avatar-size]=\"18\"\n          [line-1]=\" 'core.settings.support' | translate\" [routerLink]=\"'/support'\">\n        </rlb-list-item-image>\n      }\n    </rlb-list>\n  }\n</div>\n\n", styles: [".settings .settings-item .settings-control{width:40%}\n"] }]
         }], ctorParameters: () => [{ type: i1$6.Location }, { type: AppsService }, { type: AuthenticationService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [RLB_CFG_PAGES]
@@ -3318,7 +3225,7 @@ class AppContextEffects {
         this.loggerService = loggerService;
         this.apps = apps;
         this.setLanguage$ = createEffect(() => {
-            return this.actions$.pipe(ofType(AppContextActions.setLanguage), tap$1(({ language }) => this.languageService.language = language), tap$1(({ language }) => {
+            return this.actions$.pipe(ofType(AppContextActions.setLanguage), tap$1(({ language }) => this.languageService.setLanguage(language)), tap$1(({ language }) => {
                 this.renderer.setAttribute(document.documentElement, 'lang', language);
             }), tap$1(({ language }) => { this.storage.writeLocal('locale', language); }), map$1(({ language }) => AppContextActionsInternal.setLanguage({ language })));
         });
@@ -3352,12 +3259,12 @@ class AppContextEffects {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppContextEffects, deps: [{ token: i1$8.Actions }, { token: LanguageService }, { token: i0.RendererFactory2 }, { token: AppStorageService }, { token: i1$1.Store }, { token: i2.Router }, { token: AppLoggerService }, { token: RLB_APPS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppContextEffects }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppContextEffects, deps: [{ token: i1$8.Actions }, { token: LanguageService }, { token: i0.RendererFactory2 }, { token: AppStorageService }, { token: i1$1.Store }, { token: i5.Router }, { token: AppLoggerService }, { token: RLB_APPS, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppContextEffects }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AppContextEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppContextEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$8.Actions }, { type: LanguageService }, { type: i0.RendererFactory2 }, { type: AppStorageService }, { type: i1$1.Store }, { type: i2.Router }, { type: AppLoggerService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$8.Actions }, { type: LanguageService }, { type: i0.RendererFactory2 }, { type: AppStorageService }, { type: i1$1.Store }, { type: i5.Router }, { type: AppLoggerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [RLB_APPS]
                 }, {
@@ -3407,10 +3314,10 @@ class AuthEffects {
         this.logger = this.loggerService.for(this.constructor.name);
         this.logger.log(`Initialized AuthEffects}`);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AuthEffects, deps: [{ token: i1$8.Actions }, { token: AuthenticationService }, { token: AppLoggerService }, { token: RLB_CFG_AUTH, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AuthEffects }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AuthEffects, deps: [{ token: i1$8.Actions }, { token: AuthenticationService }, { token: AppLoggerService }, { token: RLB_CFG_AUTH, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AuthEffects }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: AuthEffects, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AuthEffects, decorators: [{
             type: Injectable
         }], ctorParameters: () => [{ type: i1$8.Actions }, { type: AuthenticationService }, { type: AppLoggerService }, { type: undefined, decorators: [{
                     type: Inject,
@@ -3465,8 +3372,8 @@ class ToastComponent {
         this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
         this.valid = true;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.7", type: ToastComponent, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: i2$1.ToastDirective, inputs: ["id", "id", "data-instance", "data-instance", "data-options", "data-options"] }], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: ToastComponent, isStandalone: true, selector: "ng-component", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null } }, hostDirectives: [{ directive: i1$3.ToastDirective, inputs: ["id", "id", "data-instance", "data-instance", "data-options", "data-options"] }], ngImport: i0, template: `
     <div class="toast-header">
       <strong class="me-auto">
         <svg
@@ -3497,12 +3404,13 @@ class ToastComponent {
       ></button>
     </div>
     <div class="toast-body">{{ data().content }}</div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: RlbAppModule }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: RlbAppModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.7", ngImport: i0, type: ToastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
             args: [{
                     imports: [RlbAppModule],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     template: `
     <div class="toast-header">
       <strong class="me-auto">