@open-rlb/ng-app 3.1.68 → 3.1.70

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

@@ -571,6 +571,9 @@ class AppsService {
         this.logger.log('Current app from store:', app);
         return app;
     }
+    isAppSelected(appId) {
+        return this.getStoredAppId() === appId;
+    }
     checkPermissionInCurrentApp(action) {
         const info = this.currentAppAclInfo;
         if (!info)
@@ -1994,6 +1997,7 @@ class SettingsDropdownSelectorComponent {
         this.toastService = inject(ToastService);
         this.router = inject(Router);
         this.menu = viewChild('menu', ...(ngDevMode ? [{ debugName: "menu" }] : /* istanbul ignore next */ []));
+        this.appsService = inject(AppsService);
         this.router.events.subscribe(() => this.close());
     }
     get pages() {
@@ -2017,6 +2021,12 @@ class SettingsDropdownSelectorComponent {
             this.goToFirstSlide();
         }
     }
+    isAppSelected(appId) {
+        if (appId) {
+            return this.appsService.isAppSelected(appId);
+        }
+        throw new Error(`${appId} is not defined`);
+    }
     get languages() {
         return this.store
             .selectSignal(o => o[appContextFeatureKey].supportedLanguages)()
@@ -2055,11 +2065,11 @@ class SettingsDropdownSelectorComponent {
         this.menu()?.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SettingsDropdownSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SettingsDropdownSelectorComponent, isStandalone: false, selector: "rlb-settings-dropdown-selector", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, apps: { classPropertyName: "apps", publicName: "apps", isSignal: true, isRequired: true, transformFunction: null }, navbarHasSettings: { classPropertyName: "navbarHasSettings", publicName: "navbarHasSettings", isSignal: true, isRequired: true, transformFunction: null }, navbarHasLogin: { classPropertyName: "navbarHasLogin", publicName: "navbarHasLogin", 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=\"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.settings.title | translate) || app.data?.appName\">\n                    {{ (app.settings.title | translate) || app.data?.appName }}\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\" 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                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                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                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                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                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-chat-quote fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.support' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n        </div>\n      </div>\n    </rlb-carousel-slide>\n\n    <rlb-carousel-slide>\n      <div class=\"p-3\">\n\n        <!-- Header -->\n        <div class=\"d-flex align-items-center mb-3\">\n          <button class=\"btn btn-sm btn-link text-reset p-0 me-2 border-0 text-decoration-none\" (click)=\"goToFirstSlide()\">\n            <i class=\"bi bi-arrow-left fs-5\"></i>\n          </button>\n          <h6 class=\"mb-0 fw-bold\">{{ 'core.account.settings.title' | translate }}</h6>\n        </div>\n\n        <rlb-list class=\"settings\">\n\n          <!-- Theme Settings -->\n          <rlb-list-item class=\"settings-item\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.settings.generalTheme' | translate}}</span>\n              </div>\n              <div class=\"settings-control\">\n                <rlb-switch size=\"small\" [(ngModel)]=\"darkMode\" />\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Language Settings -->\n          <rlb-list-item class=\"settings-item\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.settings.generalLanguage' | translate}}</span>\n              </div>\n              <div class=\"settings-control\">\n                <rlb-select size=\"small\" [(ngModel)]=\"currentLanguage\">\n                  @for (l of languages; track l.value) {\n                    <rlb-option [value]=\"l.value\">{{l.label}}</rlb-option>\n                  }\n                </rlb-select>\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Show More -->\n          <rlb-list-item action class=\"settings-item\" routerLink=\"/profile\" style=\"cursor: pointer;\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.account.settings.showMore' | translate }}</span>\n              </div>\n              <div class=\"settings-control text-primary\">\n                <i class=\"bi bi-arrow-up-right-square fs-5\"></i>\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Logout -->\n          <rlb-list-item action (click)=\"logout()\" class=\"settings-item\" style=\"cursor: pointer;\">\n            <div class=\"d-flex justify-content-between align-items-center text-danger\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.account.logout' | translate }}</span>\n              </div>\n              <div class=\"settings-control\">\n                <i class=\"bi bi-box-arrow-left fs-5\"></i>\n              </div>\n            </div>\n          </rlb-list-item>\n\n        </rlb-list>\n      </div>\n    </rlb-carousel-slide>\n  </rlb-carousel>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.SwitchComponent, selector: "rlb-switch", inputs: ["disabled", "readonly", "size", "id"] }, { kind: "component", type: i2$1.SelectComponent, selector: "rlb-select", inputs: ["placeholder", "size", "disabled", "readonly", "multiple", "display", "id", "enable-validation"] }, { kind: "component", type: i2$1.OptionComponent, selector: "rlb-option", inputs: ["value", "disabled"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "component", type: i2$1.DropdownContainerComponent, selector: "ul[rlb-dropdown-menu], rlb-dropdown-container", inputs: ["placement", "placement-sm", "placement-md", "placement-lg", "placement-xl", "placement-xxl"] }, { kind: "component", type: i2$1.NavbarDropdownItemComponent, selector: "rlb-navbar-dropdown-item", inputs: ["disabled", "dropdown", "href", "class", "toggle", "auto-close"], outputs: ["click", "status-changed"] }, { kind: "component", type: i2$1.CarouselComponent, selector: "rlb-carousel", inputs: ["id", "hide-indicators", "hide-controls", "cross-fade", "autoplay", "interval", "pause", "wrap", "no-touch", "keyboard", "current-slide"], outputs: ["slid", "slide", "current-slideChange", "slide-count"] }, { kind: "component", type: i2$1.CarouselSlideComponent, selector: "rlb-carousel-slide", inputs: ["active", "id"] }, { kind: "component", type: i2$1.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i2$1.ListItemComponent, selector: "rlb-list-item", inputs: ["active", "disabled", "action"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: SettingsDropdownSelectorComponent, isStandalone: false, selector: "rlb-settings-dropdown-selector", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, apps: { classPropertyName: "apps", publicName: "apps", isSignal: true, isRequired: true, transformFunction: null }, navbarHasSettings: { classPropertyName: "navbarHasSettings", publicName: "navbarHasSettings", isSignal: true, isRequired: true, transformFunction: null }, navbarHasLogin: { classPropertyName: "navbarHasLogin", publicName: "navbarHasLogin", 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.settings.title | translate) || app.data?.appName\">\n                    {{ (app.settings.title | translate) || app.data?.appName }}\n                </span>\n                </button>\n              </div>\n            }\n          }\n\n          <!-- System / Status -->\n          @if (pages?.['status']?.path) {\n            <div class=\"col\">\n              <button rlb-button outline color=\"primary\" routerLink=\"/status\" routerLinkActive=\"active\" class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-check2-circle fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">{{ 'core.settings.status' | translate }}</span>\n              </button>\n            </div>\n          }\n\n          <!-- Logger -->\n          @if (pages?.['logger']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/logger\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-file-text fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.logger' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n          <!-- Privacy -->\n          @if (pages?.['privacy']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/privacy\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-shield-check fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                  {{ 'core.settings.privacy' | translate }}\n                </span>\n              </button>\n            </div>\n          }\n\n          <!-- Cookies -->\n          @if (pages?.['cookies']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/cookies\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-cookie fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.cookies' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n          <!-- Terms -->\n          @if (pages?.['terms']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/terms\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-vector-pen fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.legal' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n          <!-- Support -->\n          @if (pages?.['support']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/support\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-chat-quote fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.support' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n        </div>\n      </div>\n    </rlb-carousel-slide>\n\n    <rlb-carousel-slide>\n      <div class=\"p-3\">\n\n        <!-- Header -->\n        <div class=\"d-flex align-items-center mb-3\">\n          <button class=\"btn btn-sm btn-link text-reset p-0 me-2 border-0 text-decoration-none\" (click)=\"goToFirstSlide()\">\n            <i class=\"bi bi-arrow-left fs-5\"></i>\n          </button>\n          <h6 class=\"mb-0 fw-bold\">{{ 'core.account.settings.title' | translate }}</h6>\n        </div>\n\n        <rlb-list class=\"settings\">\n\n          <!-- Theme Settings -->\n          <rlb-list-item class=\"settings-item\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.settings.generalTheme' | translate}}</span>\n              </div>\n              <div class=\"settings-control\">\n                <rlb-switch size=\"small\" [(ngModel)]=\"darkMode\" />\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Language Settings -->\n          <rlb-list-item class=\"settings-item\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.settings.generalLanguage' | translate}}</span>\n              </div>\n              <div class=\"settings-control\">\n                <rlb-select size=\"small\" [(ngModel)]=\"currentLanguage\">\n                  @for (l of languages; track l.value) {\n                    <rlb-option [value]=\"l.value\">{{l.label}}</rlb-option>\n                  }\n                </rlb-select>\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Show More -->\n          <rlb-list-item action class=\"settings-item\" routerLink=\"/profile\" style=\"cursor: pointer;\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.account.settings.showMore' | translate }}</span>\n              </div>\n              <div class=\"settings-control text-primary\">\n                <i class=\"bi bi-arrow-up-right-square fs-5\"></i>\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Logout -->\n          <rlb-list-item action (click)=\"logout()\" class=\"settings-item\" style=\"cursor: pointer;\">\n            <div class=\"d-flex justify-content-between align-items-center text-danger\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.account.logout' | translate }}</span>\n              </div>\n              <div class=\"settings-control\">\n                <i class=\"bi bi-box-arrow-left fs-5\"></i>\n              </div>\n            </div>\n          </rlb-list-item>\n\n        </rlb-list>\n      </div>\n    </rlb-carousel-slide>\n  </rlb-carousel>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.SwitchComponent, selector: "rlb-switch", inputs: ["disabled", "readonly", "size", "id"] }, { kind: "component", type: i2$1.SelectComponent, selector: "rlb-select", inputs: ["placeholder", "size", "disabled", "readonly", "multiple", "display", "id", "enable-validation"] }, { kind: "component", type: i2$1.OptionComponent, selector: "rlb-option", inputs: ["value", "disabled"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "component", type: i2$1.DropdownContainerComponent, selector: "ul[rlb-dropdown-menu], rlb-dropdown-container", inputs: ["placement", "placement-sm", "placement-md", "placement-lg", "placement-xl", "placement-xxl"] }, { kind: "component", type: i2$1.NavbarDropdownItemComponent, selector: "rlb-navbar-dropdown-item", inputs: ["disabled", "dropdown", "href", "class", "toggle", "auto-close"], outputs: ["click", "status-changed"] }, { kind: "component", type: i2$1.CarouselComponent, selector: "rlb-carousel", inputs: ["id", "hide-indicators", "hide-controls", "cross-fade", "autoplay", "interval", "pause", "wrap", "no-touch", "keyboard", "current-slide"], outputs: ["slid", "slide", "current-slideChange", "slide-count"] }, { kind: "component", type: i2$1.CarouselSlideComponent, selector: "rlb-carousel-slide", inputs: ["active", "id"] }, { kind: "component", type: i2$1.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i2$1.ListItemComponent, selector: "rlb-list-item", inputs: ["active", "disabled", "action"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: SettingsDropdownSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-settings-dropdown-selector', standalone: false, template: "@if (mode() === 'desktop') {\n  <rlb-navbar-dropdown-item #menu dropdown auto-close=\"outside\" (status-changed)=\"change($event)\">\n    <span tooltip-placement=\"bottom\" [tooltip]=\"('core.settings.title') | translate\">\n        <i class=\"bi bi-gear fs-5\"></i>\n    </span>\n    <rlb-dropdown-container placement=\"right\">\n      <div style=\"width: 320px;\">\n        <ng-container *ngTemplateOutlet=\"settingsCarousel\"></ng-container>\n      </div>\n    </rlb-dropdown-container>\n  </rlb-navbar-dropdown-item>\n} @else {\n  <!-- Inline mode for Offcanvas -->\n  <ng-container *ngTemplateOutlet=\"settingsCarousel\"></ng-container>\n}\n\n<ng-template #settingsCarousel>\n  <rlb-carousel [hide-indicators]=\"true\" [hide-controls]=\"true\" autoplay=\"none\"[no-touch]=\"true\" [(current-slide)]=\"activeSlide\" class=\"w-100 d-block\">\n    <rlb-carousel-slide [active]=\"true\">\n      <div class=\"p-3\">\n        <h6 class=\"dropdown-header px-0 text-center mb-2 fw-bold text-dark\">\n          {{ 'core.settings.title' | translate }}\n        </h6>\n\n        <div class=\"row row-cols-3 g-2\">\n\n          @if (isAuthenticated()) {\n            <!-- General Settings -->\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                (click)=\"goToInlineSettings()\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-person fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">{{ 'core.account.settings.title' | translate }}</span>\n              </button>\n            </div>\n          }\n\n          <!-- Dynamic App Settings -->\n          @for (app of apps(); track app.id) {\n            @if (app.settings && app.enabled && (app.settings.auth && !(isAuthenticated()))) {\n              <div class=\"col\">\n                <button\n                  rlb-button\n                  outline\n                  color=\"primary\"\n                  [disabled]=\"!app.enabled && (app.settings.auth && !(isAuthenticated()))\"\n                  (click)=\"selectApp(app)\"\n                  class=\"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.settings.title | translate) || app.data?.appName\">\n                    {{ (app.settings.title | translate) || app.data?.appName }}\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\" 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                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                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                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                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                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-chat-quote fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.support' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n        </div>\n      </div>\n    </rlb-carousel-slide>\n\n    <rlb-carousel-slide>\n      <div class=\"p-3\">\n\n        <!-- Header -->\n        <div class=\"d-flex align-items-center mb-3\">\n          <button class=\"btn btn-sm btn-link text-reset p-0 me-2 border-0 text-decoration-none\" (click)=\"goToFirstSlide()\">\n            <i class=\"bi bi-arrow-left fs-5\"></i>\n          </button>\n          <h6 class=\"mb-0 fw-bold\">{{ 'core.account.settings.title' | translate }}</h6>\n        </div>\n\n        <rlb-list class=\"settings\">\n\n          <!-- Theme Settings -->\n          <rlb-list-item class=\"settings-item\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.settings.generalTheme' | translate}}</span>\n              </div>\n              <div class=\"settings-control\">\n                <rlb-switch size=\"small\" [(ngModel)]=\"darkMode\" />\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Language Settings -->\n          <rlb-list-item class=\"settings-item\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.settings.generalLanguage' | translate}}</span>\n              </div>\n              <div class=\"settings-control\">\n                <rlb-select size=\"small\" [(ngModel)]=\"currentLanguage\">\n                  @for (l of languages; track l.value) {\n                    <rlb-option [value]=\"l.value\">{{l.label}}</rlb-option>\n                  }\n                </rlb-select>\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Show More -->\n          <rlb-list-item action class=\"settings-item\" routerLink=\"/profile\" style=\"cursor: pointer;\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.account.settings.showMore' | translate }}</span>\n              </div>\n              <div class=\"settings-control text-primary\">\n                <i class=\"bi bi-arrow-up-right-square fs-5\"></i>\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Logout -->\n          <rlb-list-item action (click)=\"logout()\" class=\"settings-item\" style=\"cursor: pointer;\">\n            <div class=\"d-flex justify-content-between align-items-center text-danger\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.account.logout' | translate }}</span>\n              </div>\n              <div class=\"settings-control\">\n                <i class=\"bi bi-box-arrow-left fs-5\"></i>\n              </div>\n            </div>\n          </rlb-list-item>\n\n        </rlb-list>\n      </div>\n    </rlb-carousel-slide>\n  </rlb-carousel>\n</ng-template>\n" }]
+            args: [{ selector: 'rlb-settings-dropdown-selector', standalone: false, template: "@if (mode() === 'desktop') {\n  <rlb-navbar-dropdown-item #menu dropdown auto-close=\"outside\" (status-changed)=\"change($event)\">\n    <span tooltip-placement=\"bottom\" [tooltip]=\"('core.settings.title') | translate\">\n        <i class=\"bi bi-gear fs-5\"></i>\n    </span>\n    <rlb-dropdown-container placement=\"right\">\n      <div style=\"width: 320px;\">\n        <ng-container *ngTemplateOutlet=\"settingsCarousel\"></ng-container>\n      </div>\n    </rlb-dropdown-container>\n  </rlb-navbar-dropdown-item>\n} @else {\n  <!-- Inline mode for Offcanvas -->\n  <ng-container *ngTemplateOutlet=\"settingsCarousel\"></ng-container>\n}\n\n<ng-template #settingsCarousel>\n  <rlb-carousel [hide-indicators]=\"true\" [hide-controls]=\"true\" autoplay=\"none\"[no-touch]=\"true\" [(current-slide)]=\"activeSlide\" class=\"w-100 d-block\">\n    <rlb-carousel-slide [active]=\"true\">\n      <div class=\"p-3\">\n        <h6 class=\"dropdown-header px-0 text-center mb-2 fw-bold text-dark\">\n          {{ 'core.settings.title' | translate }}\n        </h6>\n\n        <div class=\"row row-cols-3 g-2\">\n\n          @if (isAuthenticated()) {\n            <!-- General Settings -->\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                (click)=\"goToInlineSettings()\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-person fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">{{ 'core.account.settings.title' | translate }}</span>\n              </button>\n            </div>\n          }\n\n          <!-- Dynamic App Settings -->\n          @for (app of apps(); track app.id) {\n            @if (app.settings && app.enabled && (app.settings.auth && (isAuthenticated()))) {\n              <div class=\"col\">\n                <button\n                  rlb-button\n                  outline\n                  color=\"primary\"\n                  [disabled]=\"!app.enabled && (app.settings.auth && !(isAuthenticated()))\"\n                  (click)=\"selectApp(app)\"\n                  [class.active]=\"isAppSelected(app.id)\"\n                  class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                  <i [ngClass]=\"['bi', 'fs-4', 'mb-1', app.settings.icon || 'bi-gear']\"></i>\n                  <span class=\"small text-truncate w-100\" [title]=\"(app.settings.title | translate) || app.data?.appName\">\n                    {{ (app.settings.title | translate) || app.data?.appName }}\n                </span>\n                </button>\n              </div>\n            }\n          }\n\n          <!-- System / Status -->\n          @if (pages?.['status']?.path) {\n            <div class=\"col\">\n              <button rlb-button outline color=\"primary\" routerLink=\"/status\" routerLinkActive=\"active\" class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-check2-circle fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">{{ 'core.settings.status' | translate }}</span>\n              </button>\n            </div>\n          }\n\n          <!-- Logger -->\n          @if (pages?.['logger']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/logger\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-file-text fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.logger' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n          <!-- Privacy -->\n          @if (pages?.['privacy']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/privacy\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-shield-check fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                  {{ 'core.settings.privacy' | translate }}\n                </span>\n              </button>\n            </div>\n          }\n\n          <!-- Cookies -->\n          @if (pages?.['cookies']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/cookies\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-cookie fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.cookies' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n          <!-- Terms -->\n          @if (pages?.['terms']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/terms\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-vector-pen fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.legal' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n          <!-- Support -->\n          @if (pages?.['support']?.path) {\n            <div class=\"col\">\n              <button\n                rlb-button\n                outline\n                color=\"primary\"\n                routerLink=\"/support\"\n                routerLinkActive=\"active\"\n                class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-decoration-none\">\n                <i class=\"bi bi-chat-quote fs-4 mb-1\"></i>\n                <span class=\"small text-truncate w-100\">\n                {{ 'core.settings.support' | translate }}\n              </span>\n              </button>\n            </div>\n          }\n\n        </div>\n      </div>\n    </rlb-carousel-slide>\n\n    <rlb-carousel-slide>\n      <div class=\"p-3\">\n\n        <!-- Header -->\n        <div class=\"d-flex align-items-center mb-3\">\n          <button class=\"btn btn-sm btn-link text-reset p-0 me-2 border-0 text-decoration-none\" (click)=\"goToFirstSlide()\">\n            <i class=\"bi bi-arrow-left fs-5\"></i>\n          </button>\n          <h6 class=\"mb-0 fw-bold\">{{ 'core.account.settings.title' | translate }}</h6>\n        </div>\n\n        <rlb-list class=\"settings\">\n\n          <!-- Theme Settings -->\n          <rlb-list-item class=\"settings-item\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.settings.generalTheme' | translate}}</span>\n              </div>\n              <div class=\"settings-control\">\n                <rlb-switch size=\"small\" [(ngModel)]=\"darkMode\" />\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Language Settings -->\n          <rlb-list-item class=\"settings-item\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.settings.generalLanguage' | translate}}</span>\n              </div>\n              <div class=\"settings-control\">\n                <rlb-select size=\"small\" [(ngModel)]=\"currentLanguage\">\n                  @for (l of languages; track l.value) {\n                    <rlb-option [value]=\"l.value\">{{l.label}}</rlb-option>\n                  }\n                </rlb-select>\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Show More -->\n          <rlb-list-item action class=\"settings-item\" routerLink=\"/profile\" style=\"cursor: pointer;\">\n            <div class=\"d-flex justify-content-between align-items-center\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.account.settings.showMore' | translate }}</span>\n              </div>\n              <div class=\"settings-control text-primary\">\n                <i class=\"bi bi-arrow-up-right-square fs-5\"></i>\n              </div>\n            </div>\n          </rlb-list-item>\n\n          <!-- Logout -->\n          <rlb-list-item action (click)=\"logout()\" class=\"settings-item\" style=\"cursor: pointer;\">\n            <div class=\"d-flex justify-content-between align-items-center text-danger\">\n              <div class=\"settings-text\">\n                <span class=\"fw-semibold\">{{ 'core.account.logout' | translate }}</span>\n              </div>\n              <div class=\"settings-control\">\n                <i class=\"bi bi-box-arrow-left fs-5\"></i>\n              </div>\n            </div>\n          </rlb-list-item>\n\n        </rlb-list>\n      </div>\n    </rlb-carousel-slide>\n  </rlb-carousel>\n</ng-template>\n" }]
         }], ctorParameters: () => [], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], apps: [{ type: i0.Input, args: [{ isSignal: true, alias: "apps", required: true }] }], navbarHasSettings: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbarHasSettings", required: true }] }], navbarHasLogin: [{ type: i0.Input, args: [{ isSignal: true, alias: "navbarHasLogin", required: true }] }], isAuthenticated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAuthenticated", required: true }] }], appSelected: [{ type: i0.Output, args: ["appSelected"] }], menu: [{ type: i0.ViewChild, args: ['menu', { isSignal: true }] }] } });
 
 class AppDropdownSelectorComponent {
@@ -2068,16 +2078,23 @@ class AppDropdownSelectorComponent {
         this.apps = input.required(...(ngDevMode ? [{ debugName: "apps" }] : /* istanbul ignore next */ []));
         this.isAuthenticated = input.required(...(ngDevMode ? [{ debugName: "isAuthenticated" }] : /* istanbul ignore next */ []));
         this.appSelected = output();
+        this.appsService = inject(AppsService);
     }
     selectApp(app) {
         this.appSelected.emit(app);
     }
+    isAppSelected(appId) {
+        if (appId) {
+            return this.appsService.isAppSelected(appId);
+        }
+        throw new Error(`${appId} is not defined`);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AppDropdownSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AppDropdownSelectorComponent, isStandalone: false, selector: "rlb-app-dropdown-selector", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, apps: { classPropertyName: "apps", publicName: "apps", isSignal: true, isRequired: true, transformFunction: null }, isAuthenticated: { classPropertyName: "isAuthenticated", publicName: "isAuthenticated", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { appSelected: "appSelected" }, ngImport: i0, template: "@if (mode() === 'desktop') {\n  <rlb-navbar-dropdown-item dropdown>\n    <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') | translate\">\n      <i class=\"bi bi-grid-3x3-gap-fill fs-5\"></i>\n    </span>\n    <rlb-dropdown-container placement=\"right\">\n\n      <div style=\"width: 320px;\">\n        <ng-container *ngTemplateOutlet=\"appGrid\"></ng-container>\n      </div>\n\n    </rlb-dropdown-container>\n  </rlb-navbar-dropdown-item>\n} @else {\n  <ng-container *ngTemplateOutlet=\"appGrid\"></ng-container>\n}\n\n<ng-template #appGrid>\n  <div class=\"row row-cols-3 g-2 p-3\">\n    @for (app of apps(); track app.id) {\n      @if (app.core) {\n        <div class=\"col\">\n          <button rlb-button outline class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-center\"\n                  [disabled]=\"!app.enabled && (app.core.auth && !(isAuthenticated()))\" (click)=\"selectApp(app)\">\n            <i [ngClass]=\"['fs-3', 'mb-1', app.core.icon || 'bi bi-app']\"></i>\n            <span class=\"small text-truncate w-100\" [title]=\"app.data.friendlyName ? app.data.friendlyName : app.core.title | translate\">\n              {{ app.data.friendlyName ? app.data.friendlyName : app.core.title | translate }}\n            </span>\n          </button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "component", type: i2$1.DropdownContainerComponent, selector: "ul[rlb-dropdown-menu], rlb-dropdown-container", inputs: ["placement", "placement-sm", "placement-md", "placement-lg", "placement-xl", "placement-xxl"] }, { kind: "component", type: i2$1.NavbarDropdownItemComponent, selector: "rlb-navbar-dropdown-item", inputs: ["disabled", "dropdown", "href", "class", "toggle", "auto-close"], outputs: ["click", "status-changed"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: AppDropdownSelectorComponent, isStandalone: false, selector: "rlb-app-dropdown-selector", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, apps: { classPropertyName: "apps", publicName: "apps", isSignal: true, isRequired: true, transformFunction: null }, isAuthenticated: { classPropertyName: "isAuthenticated", publicName: "isAuthenticated", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { appSelected: "appSelected" }, ngImport: i0, template: "@if (mode() === 'desktop') {\n  <rlb-navbar-dropdown-item dropdown>\n    <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') | translate\">\n      <i class=\"bi bi-grid-3x3-gap-fill fs-5\"></i>\n    </span>\n    <rlb-dropdown-container placement=\"right\">\n\n      <div style=\"width: 320px;\">\n        <ng-container *ngTemplateOutlet=\"appGrid\"></ng-container>\n      </div>\n\n    </rlb-dropdown-container>\n  </rlb-navbar-dropdown-item>\n} @else {\n  <ng-container *ngTemplateOutlet=\"appGrid\"></ng-container>\n}\n\n<ng-template #appGrid>\n  <div class=\"row row-cols-3 g-2 p-3\">\n    @for (app of apps(); track app.id) {\n      @if (app.core) {\n        <div class=\"col\">\n          <button\n            rlb-button\n            outline\n            class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-center\"\n            [class.active]=\"isAppSelected(app.id)\"\n            [disabled]=\"!app.enabled && (app.core.auth && !(isAuthenticated()))\"\n            (click)=\"selectApp(app)\"\n          >\n            <i [ngClass]=\"['fs-3', 'mb-1', app.core.icon || 'bi bi-app']\"></i>\n            <span class=\"small text-truncate w-100\" [title]=\"app.data.friendlyName ? app.data.friendlyName : app.core.title | translate\">\n              {{ app.data.friendlyName ? app.data.friendlyName : app.core.title | translate }}\n            </span>\n          </button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "component", type: i2$1.DropdownContainerComponent, selector: "ul[rlb-dropdown-menu], rlb-dropdown-container", inputs: ["placement", "placement-sm", "placement-md", "placement-lg", "placement-xl", "placement-xxl"] }, { kind: "component", type: i2$1.NavbarDropdownItemComponent, selector: "rlb-navbar-dropdown-item", inputs: ["disabled", "dropdown", "href", "class", "toggle", "auto-close"], outputs: ["click", "status-changed"] }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: AppDropdownSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-app-dropdown-selector', standalone: false, template: "@if (mode() === 'desktop') {\n  <rlb-navbar-dropdown-item dropdown>\n    <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') | translate\">\n      <i class=\"bi bi-grid-3x3-gap-fill fs-5\"></i>\n    </span>\n    <rlb-dropdown-container placement=\"right\">\n\n      <div style=\"width: 320px;\">\n        <ng-container *ngTemplateOutlet=\"appGrid\"></ng-container>\n      </div>\n\n    </rlb-dropdown-container>\n  </rlb-navbar-dropdown-item>\n} @else {\n  <ng-container *ngTemplateOutlet=\"appGrid\"></ng-container>\n}\n\n<ng-template #appGrid>\n  <div class=\"row row-cols-3 g-2 p-3\">\n    @for (app of apps(); track app.id) {\n      @if (app.core) {\n        <div class=\"col\">\n          <button rlb-button outline class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-center\"\n                  [disabled]=\"!app.enabled && (app.core.auth && !(isAuthenticated()))\" (click)=\"selectApp(app)\">\n            <i [ngClass]=\"['fs-3', 'mb-1', app.core.icon || 'bi bi-app']\"></i>\n            <span class=\"small text-truncate w-100\" [title]=\"app.data.friendlyName ? app.data.friendlyName : app.core.title | translate\">\n              {{ app.data.friendlyName ? app.data.friendlyName : app.core.title | translate }}\n            </span>\n          </button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n" }]
+            args: [{ selector: 'rlb-app-dropdown-selector', standalone: false, template: "@if (mode() === 'desktop') {\n  <rlb-navbar-dropdown-item dropdown>\n    <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') | translate\">\n      <i class=\"bi bi-grid-3x3-gap-fill fs-5\"></i>\n    </span>\n    <rlb-dropdown-container placement=\"right\">\n\n      <div style=\"width: 320px;\">\n        <ng-container *ngTemplateOutlet=\"appGrid\"></ng-container>\n      </div>\n\n    </rlb-dropdown-container>\n  </rlb-navbar-dropdown-item>\n} @else {\n  <ng-container *ngTemplateOutlet=\"appGrid\"></ng-container>\n}\n\n<ng-template #appGrid>\n  <div class=\"row row-cols-3 g-2 p-3\">\n    @for (app of apps(); track app.id) {\n      @if (app.core) {\n        <div class=\"col\">\n          <button\n            rlb-button\n            outline\n            class=\"w-100 h-100 d-flex flex-column align-items-center justify-content-center p-2 text-center\"\n            [class.active]=\"isAppSelected(app.id)\"\n            [disabled]=\"!app.enabled && (app.core.auth && !(isAuthenticated()))\"\n            (click)=\"selectApp(app)\"\n          >\n            <i [ngClass]=\"['fs-3', 'mb-1', app.core.icon || 'bi bi-app']\"></i>\n            <span class=\"small text-truncate w-100\" [title]=\"app.data.friendlyName ? app.data.friendlyName : app.core.title | translate\">\n              {{ app.data.friendlyName ? app.data.friendlyName : app.core.title | translate }}\n            </span>\n          </button>\n        </div>\n      }\n    }\n  </div>\n</ng-template>\n" }]
         }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], apps: [{ type: i0.Input, args: [{ isSignal: true, alias: "apps", required: true }] }], isAuthenticated: [{ type: i0.Input, args: [{ isSignal: true, alias: "isAuthenticated", required: true }] }], appSelected: [{ type: i0.Output, args: ["appSelected"] }] } });
 
 class RlbRole {
@@ -3118,11 +3135,11 @@ class UserAccountComponent {
         this.keycloakProfileService.configureOTP();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: UserAccountComponent, deps: [{ token: i1$6.Location }, { token: i1$1.Store }, { token: KeycloakProfileService }, { token: i2$1.ModalService }, { token: LanguageService }, { token: AuthenticationService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: UserAccountComponent, isStandalone: true, selector: "rlb-user-account", ngImport: i0, template: "<div class=\"container mt-2 mb-5\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.account.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    <button rlb-button outline size=\"sm\" class=\"position-absolute end-0 top-50 translate-middle-y\"\n      (click)=\"updateProfile()\">\n      <i class=\"bi bi-floppy\"></i>\n    </button>\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.account.username' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          @if (keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.username\" disabled />\n          }\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.account.email' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          @if (keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.email\" />\n          }\n          @if (!keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" readonly />\n          }\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.account.firstName' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          @if (keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.firstName\" />\n          }\n          @if (!keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" readonly />\n          }\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.account.lastName' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          @if (keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.lastName\" />\n          }\n          @if (!keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" readonly />\n          }\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.account.logout' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          <button size=\"sm\" rlb-button (click)=\"logout()\" class=\"w-100\">\n            <i class=\"bi bi-box-arrow-right\"></i>\n          {{ 'core.account.logout' | translate}}</button>\n        </div>\n      </div>\n    </rlb-list-item>\n  </rlb-list>\n  @if (keyCloakUser) {\n    <div class=\"container text-center position-relative mt-5 mb-2\">\n      <h3>{{ 'core.account.credentials.title' | translate}}</h3>\n    </div>\n    @for (type of keycloakCredentials; track type) {\n      <div class=\"container position-relative my-3\">\n        <h6>{{ ('core.account.credentials.'+type?.type) | translate }}</h6>\n        @if (type.type === 'otp') {\n          <button rlb-button size=\"sm\"\n            class=\"position-absolute end-0 top-50 translate-middle-y\" (click)=\"configureOTP()\">\n            {{ 'core.account.credentials.addOTP' | translate}}\n          </button>\n        }\n      </div>\n      <rlb-list class=\"settings mb-5\">\n        @for (cred of type.userCredentialMetadatas; track cred.credential.id) {\n          <rlb-list-item class=\"settings-item\">\n            <div class=\"row\">\n              <div class=\"col-12\">\n                <dl class=\"row signed-in-device-grid\">\n                  <div class=\"col-md-1\">\n                    <i class=\"bi bi-key\" style=\"font-size: 35px;\"></i>\n                  </div>\n                  <div class=\"col-md-5\">\n                    <dt>\n                      <span class=\"text-muted\">\n                        {{ 'core.account.credentials.name' | translate }}\n                      </span>\n                    </dt>\n                    <dd>{{cred.credential.userLabel || cred.credential.type}}</dd>\n                  </div>\n                  <div class=\"col-md-4\">\n                    <dt>\n                      <span class=\"text-muted\">\n                        {{'core.account.credentials.created' | translate}}\n                      </span>\n                    </dt>\n                    <dd>{{cred.credential.createdDate | date:'dd:MM:yyyy HH:mm' }}</dd>\n                  </div>\n                  <div class=\"col-md-2\">\n                    <dt><span class=\"text-muted\">{{'core.account.credentials.actions' |\n                    translate}}</span></dt>\n                    <dd>\n                      @if (type.removeable) {\n                        <button size=\"sm\" rlb-button class=\"w-100\" color=\"danger\"\n                          (click)=\"removeCredential(type.type, cred.credential.id)\">\n                          <i class=\"bi bi-trash\"></i>\n                          {{ 'core.account.credentials.delete' | translate}}\n                        </button>\n                      }\n                      @if (!type.removeable) {\n                        <button size=\"sm\" rlb-button class=\"w-100\" outline\n                          (click)=\"updatePassword()\">\n                          <i class=\"bi bi-trash\"></i>\n                          {{ 'core.account.credentials.update' | translate}}\n                        </button>\n                      }\n                    </dd>\n                  </div>\n                </dl>\n              </div>\n            </div>\n          </rlb-list-item>\n        }\n        @if (type.userCredentialMetadatas.length === 0) {\n          <rlb-list-item>\n            <div class=\"d-flex justify-content-center\">\n              <div class=\"settings-text\">\n                <h6 class=\"mt-1\">{{ 'core.account.credentials.noCredentials' | translate}}</h6>\n              </div>\n            </div>\n          </rlb-list-item>\n        }\n      </rlb-list>\n    }\n    <div class=\"container text-center position-relative mt-5 mb-3\">\n      <h3>{{ 'core.account.session.title' | translate}}</h3>\n    </div>\n    <rlb-list class=\"settings\">\n      @for (d of keyCloakDevices; track d.id) {\n        <rlb-list-item class=\"settings-item\">\n          <div class=\"row mb-2\">\n            <div class=\"col-1\">\n              <i class=\"bi bi-laptop\" style=\"font-size: 35px;\"></i>\n            </div>\n            <div class=\"col-11\">\n              <span class=\"session-title\">{{d.os}} {{d.osVersion}} - {{d.browser}}</span>\n              @if (d.current) {\n                <span class=\"badge bg-success ms-3\">\n                  <span class=\"badge-content\">\n                    {{ 'core.account.session.current' | translate}}\n                  </span>\n                </span>\n              }\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-12\">\n              <dl class=\"row signed-in-device-grid\">\n                <div class=\" col-md-1\">\n                </div>\n                <div class=\" col-md-2\">\n                  <dt><span class=\"text-muted\">{{ 'core.account.session.ip' | translate }}</span>\n                </dt>\n                <dd>{{d.ipAddress}}</dd>\n              </div>\n              <div class=\"col-md-2\">\n                <dt>\n                  <span class=\"text-muted\">\n                    {{'core.account.session.lastAccess' | translate}}\n                  </span>\n                </dt>\n                <dd>{{d.lastAccess*1000 | date:'dd/MM/yyyy - HH:mm'}}</dd>\n              </div>\n              <div class=\"col-md-2\">\n                <dt><span class=\"text-muted\">{{'core.account.session.applications' |\n                translate}}</span></dt>\n                <dd>{{d.clientslist }} </dd>\n              </div>\n              <div class=\"col-md-2\">\n                <dt><span class=\"text-muted\">{{'core.account.session.started' |\n                translate}}</span></dt>\n                <dd>{{d.started*1000 | date:'dd/MM/yyyy - HH:mm'}}</dd>\n              </div>\n              <div class=\"col-md-2\">\n                <dt><span class=\"text-muted\">{{'core.account.session.expires' |\n                translate}}</span></dt>\n                <dd>{{d.expires*1000 | date:'dd/MM/yyyy - HH:mm'}}</dd>\n              </div>\n            </dl>\n          </div>\n        </div>\n      </rlb-list-item>\n    }\n  </rlb-list>\n}\n</div>\n", styles: [".settings .settings-item .settings-control{width:40%}\n"], dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "component", type: i2$1.InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "before-text", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "id", "extValidation", "enable-validation"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: i2$1.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i2$1.ListItemComponent, selector: "rlb-list-item", inputs: ["active", "disabled", "action"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$6.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", 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              <div class=\"py-4 text-center text-muted\">\n                {{ 'core.account.credentials.noCredentials' | translate}}\n              </div>\n            }\n          </rlb-list>\n        </rlb-card-body>\n      </rlb-card>\n    }\n\n      <!-- SESSION SECTION -->\n    <h3 class=\"mb-4 text-center mt-5\">{{ 'core.account.session.title' | translate}}</h3>\n\n    <rlb-card border=\"secondary\" class=\"mb-5\">\n      <rlb-card-body class=\"p-0\">\n        <rlb-list class=\"settings m-0\">\n          @for (d of keyCloakDevices; track d.id) {\n            <rlb-list-item class=\"settings-item px-4 py-4\">\n\n              <!-- Session Top Row (Device Info) -->\n              <div class=\"d-flex align-items-center pb-3 mb-3\">\n                <i class=\"bi bi-laptop text-secondary me-3\" style=\"font-size: 2rem;\"></i>\n                <h6 class=\"mb-0 fw-bold\">{{d.os}} {{d.osVersion}} - {{d.browser}}</h6>\n                @if (d.current) {\n                  <span class=\"badge bg-success ms-3 rounded-pill px-3 py-2\">\n                    {{ 'core.account.session.current' | translate}}\n                  </span>\n                }\n              </div>\n\n              <div class=\"row text-center text-md-start gy-3\">\n                <div class=\"col-sm-6 col-md-3\">\n                  <span class=\"text-muted small d-block\">{{ 'core.account.session.ip' | translate }}</span>\n                  <span class=\"fw-medium\">{{d.ipAddress}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-3\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.lastAccess' | translate}}</span>\n                  <span>{{d.lastAccess*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.applications' | translate}}</span>\n                  <span>{{d.clientslist }} </span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.started' | translate}}</span>\n                  <span>{{d.started*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.expires' | translate}}</span>\n                  <span>{{d.expires*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n              </div>\n            </rlb-list-item>\n          }\n        </rlb-list>\n      </rlb-card-body>\n    </rlb-card>\n  }\n</div>\n", styles: [".settings .settings-item .settings-control{width:40%}\n"], dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "component", type: i2$1.InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "before-text", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "id", "extValidation", "enable-validation"] }, { kind: "component", type: i2$1.BreadcrumbComponent, selector: "rlb-breadcrumb", inputs: ["divider", "items", "cssClasses"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: i2$1.RlbFabComponent, selector: "rlb-fab", inputs: ["color", "size", "disabled", "outline", "position"] }, { kind: "component", type: i2$1.CardBodyComponent, selector: "rlb-card-body" }, { kind: "component", type: i2$1.CardFooterComponent, selector: "rlb-card-footer" }, { kind: "component", type: i2$1.CardHeaderComponent, selector: "rlb-card-header" }, { kind: "component", type: i2$1.CardComponent, selector: "rlb-card", inputs: ["align", "overlay", "background", "border"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "component", type: i2$1.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i2$1.ListItemComponent, selector: "rlb-list-item", inputs: ["active", "disabled", "action"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$6.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$6.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: UserAccountComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-user-account', imports: [RlbAppModule, CommonModule], template: "<div class=\"container mt-2 mb-5\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.account.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    <button rlb-button outline size=\"sm\" class=\"position-absolute end-0 top-50 translate-middle-y\"\n      (click)=\"updateProfile()\">\n      <i class=\"bi bi-floppy\"></i>\n    </button>\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.account.username' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          @if (keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.username\" disabled />\n          }\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.account.email' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          @if (keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.email\" />\n          }\n          @if (!keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" readonly />\n          }\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.account.firstName' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          @if (keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.firstName\" />\n          }\n          @if (!keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" readonly />\n          }\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.account.lastName' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          @if (keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.lastName\" />\n          }\n          @if (!keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" readonly />\n          }\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.account.logout' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          <button size=\"sm\" rlb-button (click)=\"logout()\" class=\"w-100\">\n            <i class=\"bi bi-box-arrow-right\"></i>\n          {{ 'core.account.logout' | translate}}</button>\n        </div>\n      </div>\n    </rlb-list-item>\n  </rlb-list>\n  @if (keyCloakUser) {\n    <div class=\"container text-center position-relative mt-5 mb-2\">\n      <h3>{{ 'core.account.credentials.title' | translate}}</h3>\n    </div>\n    @for (type of keycloakCredentials; track type) {\n      <div class=\"container position-relative my-3\">\n        <h6>{{ ('core.account.credentials.'+type?.type) | translate }}</h6>\n        @if (type.type === 'otp') {\n          <button rlb-button size=\"sm\"\n            class=\"position-absolute end-0 top-50 translate-middle-y\" (click)=\"configureOTP()\">\n            {{ 'core.account.credentials.addOTP' | translate}}\n          </button>\n        }\n      </div>\n      <rlb-list class=\"settings mb-5\">\n        @for (cred of type.userCredentialMetadatas; track cred.credential.id) {\n          <rlb-list-item class=\"settings-item\">\n            <div class=\"row\">\n              <div class=\"col-12\">\n                <dl class=\"row signed-in-device-grid\">\n                  <div class=\"col-md-1\">\n                    <i class=\"bi bi-key\" style=\"font-size: 35px;\"></i>\n                  </div>\n                  <div class=\"col-md-5\">\n                    <dt>\n                      <span class=\"text-muted\">\n                        {{ 'core.account.credentials.name' | translate }}\n                      </span>\n                    </dt>\n                    <dd>{{cred.credential.userLabel || cred.credential.type}}</dd>\n                  </div>\n                  <div class=\"col-md-4\">\n                    <dt>\n                      <span class=\"text-muted\">\n                        {{'core.account.credentials.created' | translate}}\n                      </span>\n                    </dt>\n                    <dd>{{cred.credential.createdDate | date:'dd:MM:yyyy HH:mm' }}</dd>\n                  </div>\n                  <div class=\"col-md-2\">\n                    <dt><span class=\"text-muted\">{{'core.account.credentials.actions' |\n                    translate}}</span></dt>\n                    <dd>\n                      @if (type.removeable) {\n                        <button size=\"sm\" rlb-button class=\"w-100\" color=\"danger\"\n                          (click)=\"removeCredential(type.type, cred.credential.id)\">\n                          <i class=\"bi bi-trash\"></i>\n                          {{ 'core.account.credentials.delete' | translate}}\n                        </button>\n                      }\n                      @if (!type.removeable) {\n                        <button size=\"sm\" rlb-button class=\"w-100\" outline\n                          (click)=\"updatePassword()\">\n                          <i class=\"bi bi-trash\"></i>\n                          {{ 'core.account.credentials.update' | translate}}\n                        </button>\n                      }\n                    </dd>\n                  </div>\n                </dl>\n              </div>\n            </div>\n          </rlb-list-item>\n        }\n        @if (type.userCredentialMetadatas.length === 0) {\n          <rlb-list-item>\n            <div class=\"d-flex justify-content-center\">\n              <div class=\"settings-text\">\n                <h6 class=\"mt-1\">{{ 'core.account.credentials.noCredentials' | translate}}</h6>\n              </div>\n            </div>\n          </rlb-list-item>\n        }\n      </rlb-list>\n    }\n    <div class=\"container text-center position-relative mt-5 mb-3\">\n      <h3>{{ 'core.account.session.title' | translate}}</h3>\n    </div>\n    <rlb-list class=\"settings\">\n      @for (d of keyCloakDevices; track d.id) {\n        <rlb-list-item class=\"settings-item\">\n          <div class=\"row mb-2\">\n            <div class=\"col-1\">\n              <i class=\"bi bi-laptop\" style=\"font-size: 35px;\"></i>\n            </div>\n            <div class=\"col-11\">\n              <span class=\"session-title\">{{d.os}} {{d.osVersion}} - {{d.browser}}</span>\n              @if (d.current) {\n                <span class=\"badge bg-success ms-3\">\n                  <span class=\"badge-content\">\n                    {{ 'core.account.session.current' | translate}}\n                  </span>\n                </span>\n              }\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-12\">\n              <dl class=\"row signed-in-device-grid\">\n                <div class=\" col-md-1\">\n                </div>\n                <div class=\" col-md-2\">\n                  <dt><span class=\"text-muted\">{{ 'core.account.session.ip' | translate }}</span>\n                </dt>\n                <dd>{{d.ipAddress}}</dd>\n              </div>\n              <div class=\"col-md-2\">\n                <dt>\n                  <span class=\"text-muted\">\n                    {{'core.account.session.lastAccess' | translate}}\n                  </span>\n                </dt>\n                <dd>{{d.lastAccess*1000 | date:'dd/MM/yyyy - HH:mm'}}</dd>\n              </div>\n              <div class=\"col-md-2\">\n                <dt><span class=\"text-muted\">{{'core.account.session.applications' |\n                translate}}</span></dt>\n                <dd>{{d.clientslist }} </dd>\n              </div>\n              <div class=\"col-md-2\">\n                <dt><span class=\"text-muted\">{{'core.account.session.started' |\n                translate}}</span></dt>\n                <dd>{{d.started*1000 | date:'dd/MM/yyyy - HH:mm'}}</dd>\n              </div>\n              <div class=\"col-md-2\">\n                <dt><span class=\"text-muted\">{{'core.account.session.expires' |\n                translate}}</span></dt>\n                <dd>{{d.expires*1000 | date:'dd/MM/yyyy - HH:mm'}}</dd>\n              </div>\n            </dl>\n          </div>\n        </div>\n      </rlb-list-item>\n    }\n  </rlb-list>\n}\n</div>\n", styles: [".settings .settings-item .settings-control{width:40%}\n"] }]
+            args: [{ selector: 'rlb-user-account', imports: [RlbAppModule, CommonModule], template: "<div class=\"container mt-4 mb-5\">\n\n  <div class=\"d-flex align-items-center justify-content-between\">\n    <h3 class=\"m-0\">{{\"Account settings\"|translate|uppercase}}</h3>\n    <rlb-breadcrumb [cssClasses]=\"'p-0 px-md-1 py-md-2 m-0'\" [items]=\"[{ label: 'Home', link: '/', id: '1' },{ label: 'Account settings', id: '2' }]\" class=\"d-block\"></rlb-breadcrumb>\n  </div>\n\n  <!-- ACCOUNT DETAILS CARD  -->\n  <rlb-card class=\"mt-3\">\n    <rlb-card-header class=\"d-flex justify-content-between align-items-center py-3 px-4\">\n      <h5 class=\"m-0\">{{\"Account\" | translate}}</h5>\n    </rlb-card-header>\n\n    <rlb-card-body class=\"px-4 py-4\">\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.username' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser) {\n            <rlb-input class=\"w-100\"  type=\"text\" [(ngModel)]=\"keyCloakUser.username\" disabled />\n          }\n        </div>\n      </div>\n\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.email' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser) {\n            <rlb-input class=\"w-100\"  type=\"text\" [(ngModel)]=\"keyCloakUser.email\" />\n          } @else {\n            <rlb-input class=\"w-100\"  type=\"text\" readonly />\n          }\n        </div>\n      </div>\n\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.firstName' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser) {\n            <rlb-input class=\"w-100\"  type=\"text\" [(ngModel)]=\"keyCloakUser.firstName\" />\n          } @else {\n            <rlb-input class=\"w-100\"  type=\"text\" readonly />\n          }\n        </div>\n      </div>\n\n      <div class=\"row align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.lastName' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser) {\n            <rlb-input class=\"w-100\" type=\"text\" [(ngModel)]=\"keyCloakUser.lastName\" />\n          } @else {\n            <rlb-input class=\"w-100\" type=\"text\" readonly />\n          }\n        </div>\n      </div>\n    </rlb-card-body>\n\n    <rlb-card-footer>\n      <div class=\"d-flex align-items-center justify-content-end gap-2\">\n        <button rlb-button outline (click)=\"updateProfile()\">\n          <i class=\"bi bi-floppy\"></i>\n          {{'common.save' | translate}}\n        </button>\n        <button rlb-button outline color=\"danger\" (click)=\"logout()\">\n          <i class=\"bi bi-box-arrow-right\"></i>\n          {{'core.account.logout' | translate}}\n        </button>\n      </div>\n    </rlb-card-footer>\n  </rlb-card>\n\n  <!-- CREDENTIALS SECTION -->\n  @if (keyCloakUser) {\n    <h3 class=\"mb-4 text-center mt-5\">{{ 'core.account.credentials.title' | translate}}</h3>\n\n    @for (type of keycloakCredentials; track type) {\n      <rlb-card class=\"mb-4\">\n\n        <rlb-card-header class=\"d-flex justify-content-between align-items-center py-3 px-4\">\n          <h6 class=\"mb-0 fw-bold\">{{ ('core.account.credentials.'+type?.type) | translate }}</h6>\n          @if (type.type === 'otp') {\n            <rlb-fab (click)=\"configureOTP()\" size=\"sm\" [tooltip]=\"'core.account.credentials.addOTP' | translate\">\n              <i class=\"bi bi-plus-circle\"></i>\n            </rlb-fab>\n          }\n        </rlb-card-header>\n\n        <rlb-card-body>\n          <rlb-list class=\"settings m-0\">\n            @for (cred of type.userCredentialMetadatas; track cred.credential.id) {\n              <rlb-list-item class=\"px-4 py-3\">\n                <div class=\"row align-items-center w-100\">\n                  <div class=\"col-md-1 text-center mb-2 mb-md-0\">\n                    <i class=\"bi bi-key text-secondary\" style=\"font-size: 2rem;\"></i>\n                  </div>\n                  <div class=\"col-md-5 mb-2 mb-md-0\">\n                    <span class=\"text-muted small d-block\">{{ 'core.account.credentials.name' | translate }}</span>\n                    <span class=\"fw-semibold\">{{cred.credential.userLabel || cred.credential.type}}</span>\n                  </div>\n                  <div class=\"col-md-4 mb-3 mb-md-0\">\n                    <span class=\"text-muted small d-block\">{{'core.account.credentials.created' | translate}}</span>\n                    <span>{{cred.credential.createdDate | date:'dd:MM:yyyy HH:mm' }}</span>\n                  </div>\n                  <div class=\"col-md-2 text-md-end\">\n                    @if (type.removeable) {\n                      <button rlb-button class=\"w-100\" color=\"danger\" (click)=\"removeCredential(type.type, cred.credential.id)\">\n                        <i class=\"bi bi-trash\"></i> {{ 'core.account.credentials.delete' | translate}}\n                      </button>\n                    } @else {\n                      <button rlb-button class=\"w-100\" outline (click)=\"updatePassword()\">\n                        <i class=\"bi bi-pencil-square\"></i> {{ 'core.account.credentials.update' | translate}}\n                      </button>\n                    }\n                  </div>\n                </div>\n              </rlb-list-item>\n            }\n\n            @if (type.userCredentialMetadatas.length === 0) {\n              <div class=\"py-4 text-center text-muted\">\n                {{ 'core.account.credentials.noCredentials' | translate}}\n              </div>\n            }\n          </rlb-list>\n        </rlb-card-body>\n      </rlb-card>\n    }\n\n      <!-- SESSION SECTION -->\n    <h3 class=\"mb-4 text-center mt-5\">{{ 'core.account.session.title' | translate}}</h3>\n\n    <rlb-card border=\"secondary\" class=\"mb-5\">\n      <rlb-card-body class=\"p-0\">\n        <rlb-list class=\"settings m-0\">\n          @for (d of keyCloakDevices; track d.id) {\n            <rlb-list-item class=\"settings-item px-4 py-4\">\n\n              <!-- Session Top Row (Device Info) -->\n              <div class=\"d-flex align-items-center pb-3 mb-3\">\n                <i class=\"bi bi-laptop text-secondary me-3\" style=\"font-size: 2rem;\"></i>\n                <h6 class=\"mb-0 fw-bold\">{{d.os}} {{d.osVersion}} - {{d.browser}}</h6>\n                @if (d.current) {\n                  <span class=\"badge bg-success ms-3 rounded-pill px-3 py-2\">\n                    {{ 'core.account.session.current' | translate}}\n                  </span>\n                }\n              </div>\n\n              <div class=\"row text-center text-md-start gy-3\">\n                <div class=\"col-sm-6 col-md-3\">\n                  <span class=\"text-muted small d-block\">{{ 'core.account.session.ip' | translate }}</span>\n                  <span class=\"fw-medium\">{{d.ipAddress}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-3\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.lastAccess' | translate}}</span>\n                  <span>{{d.lastAccess*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.applications' | translate}}</span>\n                  <span>{{d.clientslist }} </span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.started' | translate}}</span>\n                  <span>{{d.started*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.expires' | translate}}</span>\n                  <span>{{d.expires*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n              </div>\n            </rlb-list-item>\n          }\n        </rlb-list>\n      </rlb-card-body>\n    </rlb-card>\n  }\n</div>\n", styles: [".settings .settings-item .settings-control{width:40%}\n"] }]
         }], ctorParameters: () => [{ type: i1$6.Location }, { type: i1$1.Store }, { type: KeycloakProfileService }, { type: i2$1.ModalService }, { type: LanguageService }, { type: AuthenticationService }, { type: i2.Router }] });
 
 class SettingsCoreComponent {