@open-rlb/ng-app 3.1.86 → 3.1.88

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

@@ -1,11 +1,11 @@
 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, 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 { 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, DestroyRef, 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 * as i1$7 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';
@@ -21,9 +21,9 @@ 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 { 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 { CommonModule, Location, NgClass, NgTemplateOutlet, NgComponentOutlet, isPlatformServer, DatePipe, UpperCasePipe } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormGroup, FormControl, Validators, ReactiveFormsModule, FormsModule, FormBuilder } 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';
 
@@ -2057,7 +2057,7 @@ class SupportComponent {
     }
     ngOnInit() { }
     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 }); }
+    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: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.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.9", ngImport: i0, type: SupportComponent, decorators: [{
             type: Component,
@@ -2180,7 +2180,7 @@ class SettingsDropdownSelectorComponent {
         this.menu()?.close();
     }
     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 }); }
+    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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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: "component", type: ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { 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: SettingsDropdownSelectorComponent, decorators: [{
             type: Component,
@@ -2200,6 +2200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         TranslateModule,
                         FormsModule,
                         RouterModule,
+                        ButtonComponent,
                     ], 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 }] }] } });
 
@@ -2373,7 +2374,7 @@ class AppTemplateComponent {
         this.mobileOffcanvas()?.close();
     }
     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 }); }
+    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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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.9", ngImport: i0, type: AppTemplateComponent, decorators: [{
             type: Component,
@@ -3043,48 +3044,86 @@ class UserAccountComponent {
         this.languageService = inject(LanguageService);
         this.authService = inject(AuthenticationService);
         this.router = inject(Router);
+        this.destroyRef = inject(DestroyRef); // <-- Required for takeUntilDestroyed outside of constructor
+        this.fb = inject(FormBuilder);
         this.keyCloakUser = signal(undefined, ...(ngDevMode ? [{ debugName: "keyCloakUser" }] : /* istanbul ignore next */ []));
-        this.keyCloakDevices = toSignal(this.keycloakProfileService.getDevices());
+        this.keyCloakDevices = toSignal(this.keycloakProfileService.getDevices(), {
+            initialValue: [],
+        });
         this.keycloakCredentials = signal([], ...(ngDevMode ? [{ debugName: "keycloakCredentials" }] : /* istanbul ignore next */ []));
-        this.authService.isAuthenticated$.pipe(takeUntilDestroyed(), filter(isAuth => !isAuth), switchMap(() => this.router.navigate(['/']))).subscribe();
+        this.breadcrumbItems = [
+            { label: 'Home', link: '/', id: '1' },
+            { label: 'Account settings', id: '2' },
+        ];
+        this.profileForm = this.fb.nonNullable.group({
+            username: [{ value: '', disabled: true }],
+            email: [{ value: '', disabled: true }],
+            firstName: [{ value: '', disabled: true }],
+            lastName: [{ value: '', disabled: true }],
+        });
+        this.authService.isAuthenticated$
+            .pipe(takeUntilDestroyed(), filter(isAuth => !isAuth), switchMap(() => this.router.navigate(['/'])))
+            .subscribe();
     }
     backClicked() {
         this._location.back();
     }
     ngOnInit() {
-        this.keycloakProfileService.getUserProfile()
-            .pipe(takeUntilDestroyed())
-            .subscribe((user) => this.keyCloakUser.set(user));
-        this.keycloakProfileService.getCredentials()
-            .pipe(takeUntilDestroyed())
-            .subscribe((credentials) => this.keycloakCredentials.set(credentials));
+        this.keycloakProfileService
+            .getUserProfile()
+            .pipe(takeUntilDestroyed(this.destroyRef)) // Using explicitly injected DestroyRef
+            .subscribe(user => {
+            this.keyCloakUser.set(user);
+            if (user) {
+                this.profileForm.enable();
+                this.profileForm.controls.username.disable();
+                this.profileForm.patchValue({
+                    username: user.username || '',
+                    email: user.email || '',
+                    firstName: user.firstName || '',
+                    lastName: user.lastName || '',
+                });
+            }
+            else {
+                this.profileForm.disable();
+            }
+        });
+        this.keycloakProfileService
+            .getCredentials()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(credentials => this.keycloakCredentials.set(credentials));
     }
     logout() {
         this.store.dispatch(AuthActions.logout());
     }
-    async removeCredential(type, id) {
-        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) {
+    removeCredential(type, id) {
+        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.reason === 'ok') {
                 return this.keycloakProfileService.removeCredential(id).pipe(tap(() => {
-                    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);
+                    this.keycloakCredentials.update(credentials => credentials.map(credType => {
+                        if (credType.type === type && credType.userCredentialMetadatas) {
+                            return {
+                                ...credType,
+                                userCredentialMetadatas: credType.userCredentialMetadatas.filter(m => m.credential.id !== id),
+                            };
                         }
-                        return newCredentials;
-                    });
+                        return credType;
+                    }));
                 }));
             }
             return EMPTY;
-        })));
+        }), takeUntilDestroyed(this.destroyRef))
+            .subscribe();
     }
     async updateProfile() {
         const user = this.keyCloakUser();
-        if (user) {
-            return await lastValueFrom(this.keycloakProfileService.updateUserProfile(user));
+        if (user && this.profileForm.valid) {
+            const updatedUser = { ...user, ...this.profileForm.getRawValue() };
+            await lastValueFrom(this.keycloakProfileService.updateUserProfile(updatedUser));
+            this.keyCloakUser.set(updatedUser);
         }
-        return;
     }
     updatePassword() {
         this.keycloakProfileService.updatePassword();
@@ -3093,11 +3132,11 @@ class UserAccountComponent {
         this.keycloakProfileService.configureOTP();
     }
     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 }); }
+    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  <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]=\"breadcrumbItems\" 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\" [formGroup]=\"profileForm\">\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          <rlb-input class=\"w-100\" type=\"text\" formControlName=\"username\" />\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          <rlb-input class=\"w-100\" type=\"text\" formControlName=\"email\" />\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          <rlb-input class=\"w-100\" type=\"text\" formControlName=\"firstName\" />\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          <rlb-input class=\"w-100\" type=\"text\" formControlName=\"lastName\" />\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()\" [disabled]=\"profileForm.invalid || !keyCloakUser()\">\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.type) {\n      <rlb-card class=\"mb-4\">\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              <!-- 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: 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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i1$4.TranslatePipe, name: "translate" }, { kind: "pipe", type: DatePipe, name: "date" }, { kind: "pipe", type: UpperCasePipe, name: "uppercase" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 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], 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"] }]
+            args: [{ selector: 'rlb-user-account', imports: [RlbAppModule, ReactiveFormsModule, DatePipe, UpperCasePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container mt-4 mb-5\">\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]=\"breadcrumbItems\" 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\" [formGroup]=\"profileForm\">\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          <rlb-input class=\"w-100\" type=\"text\" formControlName=\"username\" />\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          <rlb-input class=\"w-100\" type=\"text\" formControlName=\"email\" />\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          <rlb-input class=\"w-100\" type=\"text\" formControlName=\"firstName\" />\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          <rlb-input class=\"w-100\" type=\"text\" formControlName=\"lastName\" />\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()\" [disabled]=\"profileForm.invalid || !keyCloakUser()\">\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.type) {\n      <rlb-card class=\"mb-4\">\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              <!-- 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: () => [] });
 
 class SettingsCoreComponent {
@@ -3140,7 +3179,7 @@ class SettingsCoreComponent {
         });
     }
     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 }); }
+    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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.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.9", ngImport: i0, type: SettingsCoreComponent, decorators: [{
             type: Component,
@@ -3259,12 +3298,12 @@ class 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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AppContextEffects, deps: [{ token: i1$7.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.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: i5.Router }, { type: AppLoggerService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$7.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]
                 }, {
@@ -3314,12 +3353,12 @@ 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.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.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AuthEffects, deps: [{ token: i1$7.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.9", ngImport: i0, type: AuthEffects, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i1$8.Actions }, { type: AuthenticationService }, { type: AppLoggerService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i1$7.Actions }, { type: AuthenticationService }, { type: AppLoggerService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [RLB_CFG_AUTH]
                 }, {