@open-rlb/ng-app 3.0.39 → 3.1.1

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

@@ -10,7 +10,7 @@ import * as i1$8 from '@ngrx/effects';
 import { createEffect, ofType, provideEffects } from '@ngrx/effects';
 import * as i1$1 from '@ngrx/store';
 import { createActionGroup, props, emptyProps, createFeature, createReducer, on, provideStore, provideState } from '@ngrx/store';
-import * as i6 from '@open-rlb/ng-bootstrap';
+import * as i2$1 from '@open-rlb/ng-bootstrap';
 import { RLB_TRANSLATION_SERVICE, RlbBootstrapModule, ModalDirective, ToastDirective, provideRlbBootstrap, ModalRegistryOptions, ToastRegistryOptions } from '@open-rlb/ng-bootstrap';
 import * as i1$5 from 'angular-auth-oidc-client';
 import { AbstractLoggerService, AuthModule, provideAuth, AuthInterceptor, AbstractSecurityStorage } from 'angular-auth-oidc-client';
@@ -569,7 +569,7 @@ class AppsService {
             if (redirectApps?.length > 1) {
                 this.logger.warn('Multiple apps have autoRedirectOnRootEnabled: true. Picking the first one.', redirectApps);
             }
-            if (redirectApps) {
+            if (redirectApps.length) {
                 const targetUrl = redirectApps[0].core?.url;
                 this.logger.info(`[AutoRedirect] Detected app with root redirect. Redirecting to: ${targetUrl}`);
                 this.router.navigate([targetUrl], {
@@ -724,6 +724,7 @@ class LanguageService {
             case 'es': return 'Español';
             case 'fr': return 'Francés';
             case 'ja': return '日本語';
+            case 'de': return 'Deutsch';
             default: return '';
         }
     }
@@ -1020,7 +1021,7 @@ class ErrorManagementService {
             }));
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ErrorManagementService, deps: [{ token: i6.ModalService }, { token: i6.ToastService }, { token: LanguageService }, { token: RLB_CFG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ErrorManagementService, deps: [{ token: i2$1.ModalService }, { token: i2$1.ToastService }, { token: LanguageService }, { token: RLB_CFG, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ErrorManagementService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ErrorManagementService, decorators: [{
@@ -1028,7 +1029,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i6.ModalService }, { type: i6.ToastService }, { type: LanguageService }, { type: undefined, decorators: [{
+        }], ctorParameters: () => [{ type: i2$1.ModalService }, { type: i2$1.ToastService }, { type: LanguageService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [RLB_CFG]
                 }, {
@@ -1043,13 +1044,13 @@ class RlbTranslateAdapterService {
     instant(key, params) {
         return this.translateService.instant(key, params);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RlbTranslateAdapterService, deps: [{ token: i1$2.TranslateService }, { token: i6.UniqueIdService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RlbTranslateAdapterService, deps: [{ token: i1$2.TranslateService }, { token: i2$1.UniqueIdService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RlbTranslateAdapterService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RlbTranslateAdapterService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i1$2.TranslateService }, { type: i6.UniqueIdService }] });
+        }], ctorParameters: () => [{ type: i1$2.TranslateService }, { type: i2$1.UniqueIdService }] });
 
 function provideRlbI18n(i18n) {
     if (!i18n)
@@ -1170,7 +1171,7 @@ class PwaUpdaterService {
         }), switchMap(() => this.modalService.openSimpleModal(this.languageService.translate('core.pwa.newVersionAvailable'), this.languageService.translate('core.pwa.updateMessage'), this.languageService.translate('core.pwa.updateNow'), this.languageService.translate('core.pwa.update'), this.languageService.translate('core.pwa.later'))), filter((res) => res?.reason === 'ok'), //si ferma se l'evento non è una action
         map(() => this.updates.activateUpdate().then(() => location.reload())));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PwaUpdaterService, deps: [{ token: i1$4.SwUpdate }, { token: i6.ModalService }, { token: LanguageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PwaUpdaterService, deps: [{ token: i1$4.SwUpdate }, { token: i2$1.ModalService }, { token: LanguageService }], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PwaUpdaterService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PwaUpdaterService, decorators: [{
@@ -1178,7 +1179,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i1$4.SwUpdate }, { type: i6.ModalService }, { type: LanguageService }] });
+        }], ctorParameters: () => [{ type: i1$4.SwUpdate }, { type: i2$1.ModalService }, { type: LanguageService }] });
 
 class UtilsService {
     isNumber(evt) {
@@ -1646,11 +1647,11 @@ class CmsComponent {
         return md;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CmsComponent, deps: [{ token: StrapiService }, { token: LanguageService }, { token: RLB_CFG_CMS, optional: true }, { token: AbstractMdService, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CmsComponent, isStandalone: false, selector: "rlb-cms-template", inputs: { contentId: "contentId", breadcrumb: "breadcrumb" }, ngImport: i0, template: "<div>\n  <div class=\"container\" *ngIf=\"page\">\n    <div class=\"row my-4\" *ngIf=\"breadcrumb\">\n      <div class=\"col-12\">\n        <rlb-breadcrumb [items]=\"breadcrumb\"></rlb-breadcrumb>\n      </div>\n    </div>\n    <div class=\"row my-4\">\n      <div class=\"col-12\">\n        <h1 class=\"text-center\">{{page.Title}}</h1>\n      </div>\n    </div>\n    <div class=\"row my-4\" *ngIf=\"page.Content\">\n      <div class=\"col-12\">\n        <div [innerHTML]=\"page.Content \"></div>\n      </div>\n    </div>\n    <div class=\"row my-4\" *ngIf=\"page.page_tabs.length>0\">\n      <div class=\"col-12\">\n        <rlb-tabs>\n          <rlb-tab *ngFor=\"let tab of page.page_tabs; let i = index\" [target]=\"'cms-tab-'+i\">\n            {{tab.Title}}\n          </rlb-tab>\n        </rlb-tabs>\n        <rlb-tab-content>\n          <rlb-tab-pane *ngFor=\"let tab of page.page_tabs; let i = index\" [id]=\"'cms-tab-'+i\">\n            <div class=\"container-fluid\">\n              <div class=\"row my-4\" *ngIf=\"tab.Content\">\n                <div class=\"col-12\">\n                  <div [innerHTML]=\"tab.Content \"></div>\n                </div>\n              </div>\n              <div class=\"row my-4 mx-auto card-steps\" *ngFor=\"let step of tab.steps; let i = index\"\n                style=\"max-width: 350px; border-bottom: 1px solid rgb(192, 198, 204);\">\n                <div class=\"col-8\">\n                  <div class=\"pb-2\">\n                    <div style=\"height: 54px; min-width: 54px; width: 54px; border: 5px solid rgb(192, 198, 204);\"\n                      class=\"round-counter\">\n                      <span class=\"red\">{{i+1}}</span>\n                    </div>\n                  </div>\n                  <div>\n                    <div [innerHTML]=\"step.Content \"></div>\n                  </div>\n                </div>\n                <div class=\"col-4 pb-2\">\n                  <img [src]=\"step.Picture.url|cms\">\n                </div>\n              </div>\n              <div class=\"row my-4\" *ngIf=\"tab.faqs.length>0\">\n                <div class=\"col-12\">\n                  <h2 class=\"py-3\">{{tab.FaqTitle}}</h2>\n                </div>\n              </div>\n              <div class=\"row my-4\" *ngIf=\"tab.faqs.length>0 && tab.FaqContent\">\n                <div class=\"col-12\">\n                  <div [innerHTML]=\"tab.FaqContent \"></div>\n                </div>\n              </div>\n              <div class=\"row   my-4\" *ngIf=\"tab.faqs.length>0\">\n                <div class=\"col-12\">\n                  <rlb-accordion>\n                    <div rlb-accordion-item [expanded]=\"true\" *ngFor=\"let faq of tab.faqs\">\n                      <rlb-accordion-header>\n                        {{faq.Title}}\n                      </rlb-accordion-header>\n                      <div rlb-accordion-body>\n                        <div [innerHTML]=\"faq.Content\"> </div>\n                      </div>\n                    </div>\n                  </rlb-accordion>\n                </div>\n              </div>\n              <div class=\"row   my-4\">\n                <div class=\"col-12\">\n                  <span>\n                    <a routerLink=\"/support\">\n                      <i class=\"bi bi-info-circle-fill\" style=\"margin-bottom: -6px;margin-right: 6px;\"></i>\n                      <span>{{'pages.support.infoPage' | translate}}</span>\n                    </a>\n                  </span>\n                </div>\n              </div>\n              <div class=\"row my-4\" *ngIf=\"page.topics.length>0\" style=\"padding: 4px\">\n                <div class=\"col-lg-6 col-md-12 col-sm-12 col-xs-12\" *ngFor=\"let topic of page.topics\">\n                  <a [routerLink]=\"'/informations/'+topic.page.ContentId\" style=\"color: inherit;text-decoration: none;\">\n                    <div class=\"card mb-4\" style=\"min-height: 230px;\">\n                      <img [src]=\"topic.Picture.url | cms\" class=\"card-img-top\"\n                        style=\"height: 91px; margin: 16px -16px;\">\n                      <div class=\"card-body\">\n                        <h5 class=\"card-title\">{{topic.Title}}</h5>\n                        <div class=\"card-text\" [innerHTML]=\"topic.Content \"></div>\n                      </div>\n                    </div>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </rlb-tab-pane>\n        </rlb-tab-content>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.BreadcrumbComponent, selector: "rlb-breadcrumb", inputs: ["divider", "items", "cssClasses"] }, { kind: "component", type: i6.AccordionComponent, selector: "rlb-accordion", inputs: ["flush", "always-open", "id"] }, { kind: "component", type: i6.AccordionItemComponent, selector: "div[rlb-accordion-item]", inputs: ["name", "expanded", "class", "style", "status"], outputs: ["statusChange"] }, { kind: "component", type: i6.AccordionHeaderComponent, selector: "rlb-accordion-header" }, { kind: "component", type: i6.AccordionBodyComponent, selector: "div[rlb-accordion-body]" }, { kind: "component", type: i6.TabsComponent, selector: "rlb-tabs", inputs: ["horizontal-alignment", "view", "vertical", "fill", "id", "class"] }, { kind: "component", type: i6.TabComponent, selector: "rlb-tab", inputs: ["active", "disabled", "target", "class"] }, { kind: "component", type: i6.TabContentComponent, selector: "rlb-tab-content" }, { kind: "component", type: i6.TabPaneComponent, selector: "rlb-tab-pane", inputs: ["id", "active", "fade"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: CmsPipe, name: "cms" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CmsComponent, isStandalone: false, selector: "rlb-cms-template", inputs: { contentId: "contentId", breadcrumb: "breadcrumb" }, ngImport: i0, template: "<div>\n  @if (page) {\n    <div class=\"container\">\n      @if (breadcrumb) {\n        <div class=\"row my-4\">\n          <div class=\"col-12\">\n            <rlb-breadcrumb [items]=\"breadcrumb\"></rlb-breadcrumb>\n          </div>\n        </div>\n      }\n      <div class=\"row my-4\">\n        <div class=\"col-12\">\n          <h1 class=\"text-center\">{{page.Title}}</h1>\n        </div>\n      </div>\n      @if (page.Content) {\n        <div class=\"row my-4\">\n          <div class=\"col-12\">\n            <div [innerHTML]=\"page.Content \"></div>\n          </div>\n        </div>\n      }\n      @if (page.page_tabs.length>0) {\n        <div class=\"row my-4\">\n          <div class=\"col-12\">\n            <rlb-tabs>\n              @for (tab of page.page_tabs; track tab.id; let i = $index) {\n                <rlb-tab [target]=\"'cms-tab-'+i\">\n                  {{tab.Title}}\n                </rlb-tab>\n              }\n            </rlb-tabs>\n            <rlb-tab-content>\n              @for (tab of page.page_tabs; track tab.id; let i = $index) {\n                <rlb-tab-pane [id]=\"'cms-tab-'+i\">\n                  <div class=\"container-fluid\">\n                    @if (tab.Content) {\n                      <div class=\"row my-4\">\n                        <div class=\"col-12\">\n                          <div [innerHTML]=\"tab.Content \"></div>\n                        </div>\n                      </div>\n                    }\n                    @for (step of tab.steps; track step.ContentId; let i = $index) {\n                      <div class=\"row my-4 mx-auto card-steps\"\n                        style=\"max-width: 350px; border-bottom: 1px solid rgb(192, 198, 204);\">\n                        <div class=\"col-8\">\n                          <div class=\"pb-2\">\n                            <div style=\"height: 54px; min-width: 54px; width: 54px; border: 5px solid rgb(192, 198, 204);\"\n                              class=\"round-counter\">\n                              <span class=\"red\">{{i+1}}</span>\n                            </div>\n                          </div>\n                          <div>\n                            <div [innerHTML]=\"step.Content \"></div>\n                          </div>\n                        </div>\n                        <div class=\"col-4 pb-2\">\n                          <img [src]=\"step.Picture.url|cms\">\n                        </div>\n                      </div>\n                    }\n                    @if (tab.faqs.length>0) {\n                      <div class=\"row my-4\">\n                        <div class=\"col-12\">\n                          <h2 class=\"py-3\">{{tab.FaqTitle}}</h2>\n                        </div>\n                      </div>\n                    }\n                    @if (tab.faqs.length>0 && tab.FaqContent) {\n                      <div class=\"row my-4\">\n                        <div class=\"col-12\">\n                          <div [innerHTML]=\"tab.FaqContent \"></div>\n                        </div>\n                      </div>\n                    }\n                    @if (tab.faqs.length>0) {\n                      <div class=\"row   my-4\">\n                        <div class=\"col-12\">\n                          <rlb-accordion>\n                            @for (faq of tab.faqs; track faq) {\n                              <div rlb-accordion-item [expanded]=\"true\">\n                                <rlb-accordion-header>\n                                  {{faq.Title}}\n                                </rlb-accordion-header>\n                                <div rlb-accordion-body>\n                                  <div [innerHTML]=\"faq.Content\"> </div>\n                                </div>\n                              </div>\n                            }\n                          </rlb-accordion>\n                        </div>\n                      </div>\n                    }\n                    <div class=\"row   my-4\">\n                      <div class=\"col-12\">\n                        <span>\n                          <a routerLink=\"/support\">\n                            <i class=\"bi bi-info-circle-fill\" style=\"margin-bottom: -6px;margin-right: 6px;\"></i>\n                            <span>{{'pages.support.infoPage' | translate}}</span>\n                          </a>\n                        </span>\n                      </div>\n                    </div>\n                    @if (page.topics.length>0) {\n                      <div class=\"row my-4\" style=\"padding: 4px\">\n                        @for (topic of page.topics; track topic.ContentId) {\n                          <div class=\"col-lg-6 col-md-12 col-sm-12 col-xs-12\">\n                            <a [routerLink]=\"'/informations/'+topic.page.ContentId\" style=\"color: inherit;text-decoration: none;\">\n                              <div class=\"card mb-4\" style=\"min-height: 230px;\">\n                                <img [src]=\"topic.Picture.url | cms\" class=\"card-img-top\"\n                                  style=\"height: 91px; margin: 16px -16px;\">\n                                  <div class=\"card-body\">\n                                    <h5 class=\"card-title\">{{topic.Title}}</h5>\n                                    <div class=\"card-text\" [innerHTML]=\"topic.Content \"></div>\n                                  </div>\n                                </div>\n                              </a>\n                            </div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  </rlb-tab-pane>\n                }\n              </rlb-tab-content>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n", styles: [""], dependencies: [{ kind: "component", type: i2$1.BreadcrumbComponent, selector: "rlb-breadcrumb", inputs: ["divider", "items", "cssClasses"] }, { kind: "component", type: i2$1.AccordionComponent, selector: "rlb-accordion", inputs: ["flush", "always-open", "id"] }, { kind: "component", type: i2$1.AccordionItemComponent, selector: "div[rlb-accordion-item]", inputs: ["name", "expanded", "class", "style", "status"], outputs: ["statusChange"] }, { kind: "component", type: i2$1.AccordionHeaderComponent, selector: "rlb-accordion-header" }, { kind: "component", type: i2$1.AccordionBodyComponent, selector: "div[rlb-accordion-body]" }, { kind: "component", type: i2$1.TabsComponent, selector: "rlb-tabs", inputs: ["horizontal-alignment", "view", "vertical", "fill", "id", "class"] }, { kind: "component", type: i2$1.TabComponent, selector: "rlb-tab", inputs: ["active", "disabled", "target", "class"] }, { kind: "component", type: i2$1.TabContentComponent, selector: "rlb-tab-content" }, { kind: "component", type: i2$1.TabPaneComponent, selector: "rlb-tab-pane", inputs: ["id", "active", "fade"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: CmsPipe, name: "cms" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CmsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-cms-template', standalone: false, template: "<div>\n  <div class=\"container\" *ngIf=\"page\">\n    <div class=\"row my-4\" *ngIf=\"breadcrumb\">\n      <div class=\"col-12\">\n        <rlb-breadcrumb [items]=\"breadcrumb\"></rlb-breadcrumb>\n      </div>\n    </div>\n    <div class=\"row my-4\">\n      <div class=\"col-12\">\n        <h1 class=\"text-center\">{{page.Title}}</h1>\n      </div>\n    </div>\n    <div class=\"row my-4\" *ngIf=\"page.Content\">\n      <div class=\"col-12\">\n        <div [innerHTML]=\"page.Content \"></div>\n      </div>\n    </div>\n    <div class=\"row my-4\" *ngIf=\"page.page_tabs.length>0\">\n      <div class=\"col-12\">\n        <rlb-tabs>\n          <rlb-tab *ngFor=\"let tab of page.page_tabs; let i = index\" [target]=\"'cms-tab-'+i\">\n            {{tab.Title}}\n          </rlb-tab>\n        </rlb-tabs>\n        <rlb-tab-content>\n          <rlb-tab-pane *ngFor=\"let tab of page.page_tabs; let i = index\" [id]=\"'cms-tab-'+i\">\n            <div class=\"container-fluid\">\n              <div class=\"row my-4\" *ngIf=\"tab.Content\">\n                <div class=\"col-12\">\n                  <div [innerHTML]=\"tab.Content \"></div>\n                </div>\n              </div>\n              <div class=\"row my-4 mx-auto card-steps\" *ngFor=\"let step of tab.steps; let i = index\"\n                style=\"max-width: 350px; border-bottom: 1px solid rgb(192, 198, 204);\">\n                <div class=\"col-8\">\n                  <div class=\"pb-2\">\n                    <div style=\"height: 54px; min-width: 54px; width: 54px; border: 5px solid rgb(192, 198, 204);\"\n                      class=\"round-counter\">\n                      <span class=\"red\">{{i+1}}</span>\n                    </div>\n                  </div>\n                  <div>\n                    <div [innerHTML]=\"step.Content \"></div>\n                  </div>\n                </div>\n                <div class=\"col-4 pb-2\">\n                  <img [src]=\"step.Picture.url|cms\">\n                </div>\n              </div>\n              <div class=\"row my-4\" *ngIf=\"tab.faqs.length>0\">\n                <div class=\"col-12\">\n                  <h2 class=\"py-3\">{{tab.FaqTitle}}</h2>\n                </div>\n              </div>\n              <div class=\"row my-4\" *ngIf=\"tab.faqs.length>0 && tab.FaqContent\">\n                <div class=\"col-12\">\n                  <div [innerHTML]=\"tab.FaqContent \"></div>\n                </div>\n              </div>\n              <div class=\"row   my-4\" *ngIf=\"tab.faqs.length>0\">\n                <div class=\"col-12\">\n                  <rlb-accordion>\n                    <div rlb-accordion-item [expanded]=\"true\" *ngFor=\"let faq of tab.faqs\">\n                      <rlb-accordion-header>\n                        {{faq.Title}}\n                      </rlb-accordion-header>\n                      <div rlb-accordion-body>\n                        <div [innerHTML]=\"faq.Content\"> </div>\n                      </div>\n                    </div>\n                  </rlb-accordion>\n                </div>\n              </div>\n              <div class=\"row   my-4\">\n                <div class=\"col-12\">\n                  <span>\n                    <a routerLink=\"/support\">\n                      <i class=\"bi bi-info-circle-fill\" style=\"margin-bottom: -6px;margin-right: 6px;\"></i>\n                      <span>{{'pages.support.infoPage' | translate}}</span>\n                    </a>\n                  </span>\n                </div>\n              </div>\n              <div class=\"row my-4\" *ngIf=\"page.topics.length>0\" style=\"padding: 4px\">\n                <div class=\"col-lg-6 col-md-12 col-sm-12 col-xs-12\" *ngFor=\"let topic of page.topics\">\n                  <a [routerLink]=\"'/informations/'+topic.page.ContentId\" style=\"color: inherit;text-decoration: none;\">\n                    <div class=\"card mb-4\" style=\"min-height: 230px;\">\n                      <img [src]=\"topic.Picture.url | cms\" class=\"card-img-top\"\n                        style=\"height: 91px; margin: 16px -16px;\">\n                      <div class=\"card-body\">\n                        <h5 class=\"card-title\">{{topic.Title}}</h5>\n                        <div class=\"card-text\" [innerHTML]=\"topic.Content \"></div>\n                      </div>\n                    </div>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </rlb-tab-pane>\n        </rlb-tab-content>\n      </div>\n    </div>\n  </div>\n</div>\n" }]
+            args: [{ selector: 'rlb-cms-template', standalone: false, template: "<div>\n  @if (page) {\n    <div class=\"container\">\n      @if (breadcrumb) {\n        <div class=\"row my-4\">\n          <div class=\"col-12\">\n            <rlb-breadcrumb [items]=\"breadcrumb\"></rlb-breadcrumb>\n          </div>\n        </div>\n      }\n      <div class=\"row my-4\">\n        <div class=\"col-12\">\n          <h1 class=\"text-center\">{{page.Title}}</h1>\n        </div>\n      </div>\n      @if (page.Content) {\n        <div class=\"row my-4\">\n          <div class=\"col-12\">\n            <div [innerHTML]=\"page.Content \"></div>\n          </div>\n        </div>\n      }\n      @if (page.page_tabs.length>0) {\n        <div class=\"row my-4\">\n          <div class=\"col-12\">\n            <rlb-tabs>\n              @for (tab of page.page_tabs; track tab.id; let i = $index) {\n                <rlb-tab [target]=\"'cms-tab-'+i\">\n                  {{tab.Title}}\n                </rlb-tab>\n              }\n            </rlb-tabs>\n            <rlb-tab-content>\n              @for (tab of page.page_tabs; track tab.id; let i = $index) {\n                <rlb-tab-pane [id]=\"'cms-tab-'+i\">\n                  <div class=\"container-fluid\">\n                    @if (tab.Content) {\n                      <div class=\"row my-4\">\n                        <div class=\"col-12\">\n                          <div [innerHTML]=\"tab.Content \"></div>\n                        </div>\n                      </div>\n                    }\n                    @for (step of tab.steps; track step.ContentId; let i = $index) {\n                      <div class=\"row my-4 mx-auto card-steps\"\n                        style=\"max-width: 350px; border-bottom: 1px solid rgb(192, 198, 204);\">\n                        <div class=\"col-8\">\n                          <div class=\"pb-2\">\n                            <div style=\"height: 54px; min-width: 54px; width: 54px; border: 5px solid rgb(192, 198, 204);\"\n                              class=\"round-counter\">\n                              <span class=\"red\">{{i+1}}</span>\n                            </div>\n                          </div>\n                          <div>\n                            <div [innerHTML]=\"step.Content \"></div>\n                          </div>\n                        </div>\n                        <div class=\"col-4 pb-2\">\n                          <img [src]=\"step.Picture.url|cms\">\n                        </div>\n                      </div>\n                    }\n                    @if (tab.faqs.length>0) {\n                      <div class=\"row my-4\">\n                        <div class=\"col-12\">\n                          <h2 class=\"py-3\">{{tab.FaqTitle}}</h2>\n                        </div>\n                      </div>\n                    }\n                    @if (tab.faqs.length>0 && tab.FaqContent) {\n                      <div class=\"row my-4\">\n                        <div class=\"col-12\">\n                          <div [innerHTML]=\"tab.FaqContent \"></div>\n                        </div>\n                      </div>\n                    }\n                    @if (tab.faqs.length>0) {\n                      <div class=\"row   my-4\">\n                        <div class=\"col-12\">\n                          <rlb-accordion>\n                            @for (faq of tab.faqs; track faq) {\n                              <div rlb-accordion-item [expanded]=\"true\">\n                                <rlb-accordion-header>\n                                  {{faq.Title}}\n                                </rlb-accordion-header>\n                                <div rlb-accordion-body>\n                                  <div [innerHTML]=\"faq.Content\"> </div>\n                                </div>\n                              </div>\n                            }\n                          </rlb-accordion>\n                        </div>\n                      </div>\n                    }\n                    <div class=\"row   my-4\">\n                      <div class=\"col-12\">\n                        <span>\n                          <a routerLink=\"/support\">\n                            <i class=\"bi bi-info-circle-fill\" style=\"margin-bottom: -6px;margin-right: 6px;\"></i>\n                            <span>{{'pages.support.infoPage' | translate}}</span>\n                          </a>\n                        </span>\n                      </div>\n                    </div>\n                    @if (page.topics.length>0) {\n                      <div class=\"row my-4\" style=\"padding: 4px\">\n                        @for (topic of page.topics; track topic.ContentId) {\n                          <div class=\"col-lg-6 col-md-12 col-sm-12 col-xs-12\">\n                            <a [routerLink]=\"'/informations/'+topic.page.ContentId\" style=\"color: inherit;text-decoration: none;\">\n                              <div class=\"card mb-4\" style=\"min-height: 230px;\">\n                                <img [src]=\"topic.Picture.url | cms\" class=\"card-img-top\"\n                                  style=\"height: 91px; margin: 16px -16px;\">\n                                  <div class=\"card-body\">\n                                    <h5 class=\"card-title\">{{topic.Title}}</h5>\n                                    <div class=\"card-text\" [innerHTML]=\"topic.Content \"></div>\n                                  </div>\n                                </div>\n                              </a>\n                            </div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  </rlb-tab-pane>\n                }\n              </rlb-tab-content>\n            </div>\n          </div>\n        }\n      </div>\n    }\n  </div>\n" }]
         }], ctorParameters: () => [{ type: StrapiService }, { type: LanguageService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [RLB_CFG_CMS]
@@ -1735,7 +1736,7 @@ class SupportComponent {
     }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SupportComponent, deps: [{ token: AbstractSupportService }, { token: i1$6.Location }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SupportComponent, isStandalone: false, selector: "rlb-support", ngImport: i0, template: "<div class=\"container mt-2 mb-5\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'pages.support.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n      style=\"font-size: 25px;font-weight: 600;\" (click)=\"backClicked()\"></i>\n  </div>\n  <form [formGroup]=\"supportForm\" class=\"needs-validation\" (ngSubmit)=\"sendSupport(supportForm.value)\">\n    <rlb-list class=\"settings\">\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.name' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\" size=\"small\" formControlName=\"name\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.email' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\"  size=\"small\" formControlName=\"email\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.subject' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\"  size=\"small\" formControlName=\"subject\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.message' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\"  size=\"small\" formControlName=\"message\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.legal' | translate}}</h6>\n            <span>{{ 'pages.support.infoPage' | translate}}</span>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-switch size=\"small\" formControlName=\"legal\" />\n          </div>\n        </div>\n      </rlb-list-item>\n    </rlb-list>\n  </form>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i6.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: i6.SwitchComponent, selector: "rlb-switch", inputs: ["disabled", "readonly", "size", "id"] }, { kind: "component", type: i6.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i6.ListItemComponent, selector: "rlb-list-item", inputs: ["active", "disabled", "action"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SupportComponent, isStandalone: false, selector: "rlb-support", ngImport: i0, template: "<div class=\"container mt-2 mb-5\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'pages.support.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n      style=\"font-size: 25px;font-weight: 600;\" (click)=\"backClicked()\"></i>\n  </div>\n  <form [formGroup]=\"supportForm\" class=\"needs-validation\" (ngSubmit)=\"sendSupport(supportForm.value)\">\n    <rlb-list class=\"settings\">\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.name' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\" size=\"small\" formControlName=\"name\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.email' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\"  size=\"small\" formControlName=\"email\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.subject' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\"  size=\"small\" formControlName=\"subject\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.message' | translate}}</h6>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-input type=\"text\"  size=\"small\" formControlName=\"message\" />\n          </div>\n        </div>\n      </rlb-list-item>\n      <rlb-list-item class=\"settings-item\">\n        <div class=\"d-flex justify-content-between\">\n          <div class=\"settings-text\">\n            <h6 class=\"mt-1\">{{ 'pages.support.legal' | translate}}</h6>\n            <span>{{ 'pages.support.infoPage' | translate}}</span>\n          </div>\n          <div class=\"settings-control\">\n            <rlb-switch size=\"small\" formControlName=\"legal\" />\n          </div>\n        </div>\n      </rlb-list-item>\n    </rlb-list>\n  </form>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "before-text", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "id", "extValidation", "enable-validation"] }, { kind: "component", type: i2$1.SwitchComponent, selector: "rlb-switch", inputs: ["disabled", "readonly", "size", "id"] }, { kind: "component", type: i2$1.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i2$1.ListItemComponent, selector: "rlb-list-item", inputs: ["active", "disabled", "action"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SupportComponent, decorators: [{
             type: Component,
@@ -1926,11 +1927,11 @@ class AppTemplateComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppTemplateComponent, deps: [{ token: RLB_CFG_ENV }, { token: i1$1.Store }, { token: AppsService }, { token: AuthenticationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AppTemplateComponent, isStandalone: false, selector: "rlb-app-template", inputs: { modalContainerId: ["modal-container-id", "modalContainerId"], toastContainerIds: ["toast-container-ids", "toastContainerIds"] }, ngImport: i0, template: "<div class=\"rlb-app\">\n  <ng-container *ngIf=\"navVisible$ | async\">\n    <rlb-navbar expand=\"lg\" *ngIf=\"navVisible$ | async\" class=\"border-bottom py-1 rlb-navbar\">\n      <a *ngIf=\"navHeader$ | async\" rlb-navbar-brand href=\"#\">{{ navHeader$ | async }}</a>\n      <rlb-navbar-form *ngIf=\"navSearchVisible$ | async\">\n        <rlb-input-group class=\"my-1 mx-3\" validate>\n          <rlb-input type=\"search\" class=\"search-input\" placeholder=\"Search\" [(ngModel)]=\"navSearchText\"\n                     (keyup.enter)=\"setNavbarSearchText(navSearchText)\" name=\"search\" size=\"small\">\n            <button after rlb-button outline type=\"submit\" (click)=\"setNavbarSearchText(navSearchText)\" size=\"sm\">\n              <i class=\"bi bi-search\"></i>\n            </button>\n          </rlb-input>\n        </rlb-input-group>\n      </rlb-navbar-form>\n      <rlb-navbar-items class=\"ms-lg-auto\">\n        <ng-container ngProjectAs=\"rlb-navbar-item\" *ngFor=\"let navComponent of navLeftItems$ | async\">\n          <ng-container *ngComponentOutlet=\"navComponent | leftComponent\"></ng-container>\n        </ng-container>\n      </rlb-navbar-items>\n      <rlb-navbar-items>\n        <ng-container ngProjectAs=\"rlb-navbar-item\" *ngFor=\"let navComponent of navRightItems$ | async\">\n          <ng-container *ngComponentOutlet=\"navComponent | rightComponent\"></ng-container>\n        </ng-container>\n        <rlb-navbar-separator *ngIf=\"(separatorVisible$ | async)\" />\n        <rlb-navbar-item *ngIf=\"(navbarHasLogin$ | async) && !(isAuth$ | async)\" (click)=\"loginNav($event)\">\n          <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.login') |translate\">\n            <i class=\" bi bi-box-arrow-in-left\"></i>\n          </span>\n          <span class=\"ms-1 d-lg-none\">{{'core.account.login' | translate}}</span>\n        </rlb-navbar-item>\n        <rlb-navbar-item *ngIf=\" (navbarHasLogin$ | async) && (isAuth$ | async)\" [router-link]=\"'/profile'\">\n          <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.title') |translate\">\n            <i class=\"bi bi-person\"></i>\n          </span>\n          <span class=\"ms-1 d-lg-none\">{{'core.account.title' | translate}}</span>\n        </rlb-navbar-item>\n        <rlb-navbar-item *ngIf=\"navbarHasSettings$ | async\" [router-link]=\"'/setting'\">\n          <span tooltip-placement=\"bottom\" [tooltip]=\"('core.settings.title') |translate\">\n            <i class=\"bi bi-gear\"></i>\n          </span>\n          <span class=\"ms-1 d-lg-none\">{{'core.settings.title' | translate}}</span>\n        </rlb-navbar-item>\n        <rlb-navbar-item *ngIf=\"(navbarHasApps$ | async) && apps.length > 1\" [router-link]=\"'/apps'\">\n          <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') |translate\">\n            <i class=\"bi bi-grid-3x3-gap-fill\"></i>\n          </span>\n          <span class=\"ms-1 d-lg-none\">{{'core.apps.button' | translate}}</span>\n        </rlb-navbar-item>\n      </rlb-navbar-items>\n    </rlb-navbar>\n  </ng-container>\n  <div class=\"rlb-main-wrapper\">\n    <rlb-sidebar id=\"sidebar\" class=\"rlb-sidebar\" *ngIf=\"(sidebarVisible$ | async)\">\n      <rlb-sidebar-item\n        *ngFor=\"let item of  (sidebarItems$ | async)\"\n        [icon]=\"item.icon\" [link]=\"item.url\"\n        [title]=\"item.title\" [label]=\"item.label\"\n        [badgeCounter]=\"item.badgeCounter\"\n        (click)=\"onSideBarItemClick(item)\"\n      >\n        {{item.label}}\n        <rlb-sidebar-item\n          *ngFor=\"let subitem of item.items || []\"\n          [icon]=\"subitem.icon\"\n          [link]=\"subitem.url\"\n          [title]=\"subitem.title\"\n          [label]=\"subitem.label\"\n          [badgeCounter]=\"subitem.badgeCounter\"\n          (click)=\"onSideBarItemClick(subitem)\"\n        >\n          {{subitem.label}}\n        </rlb-sidebar-item>\n      </rlb-sidebar-item>\n    </rlb-sidebar>\n    <div class=\"rlb-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"modalContainerId\">\n  <rlb-modal-container [id]=\"modalContainerId\" />\n</ng-container>\n\n<ng-container *ngIf=\"toastContainerIds\">\n  <ng-container *ngIf=\"toastContainerIds.constructor.name === 'Array'; else toastContainerIdsIsNotArray\">\n    <rlb-toast-container *ngFor=\"let toastContainerId of toastContainerIds | asMulti\" [id]=\"toastContainerId\" />\n  </ng-container>\n  <ng-template #toastContainerIdsIsNotArray>\n    <rlb-toast-container class=\"position-fixed bottom-0 end-0 p-3\" [id]=\"toastContainerIds | asSingle\" />\n  </ng-template>\n</ng-container>\n", styles: [".separator{border-left:1px solid;padding:0 2px}\n"], dependencies: [{ kind: "directive", type: i1$6.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i1$6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: i6.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: i6.InputGroupComponent, selector: "rlb-input-group", inputs: ["text", "validate", "size"] }, { kind: "component", type: i6.ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "directive", type: i6.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "directive", type: i6.NavbarBrandDirective, selector: "[rlb-navbar-brand]" }, { kind: "component", type: i6.NavbarComponent, selector: "rlb-navbar", inputs: ["dark", "color", "placement", "expand", "class", "enable-dropdown-toggler"] }, { kind: "component", type: i6.NavbarFormComponent, selector: "rlb-navbar-form", inputs: ["role", "class"] }, { kind: "component", type: i6.NavbarItemsComponent, selector: "rlb-navbar-items", inputs: ["scroll", "class"], outputs: ["click"] }, { kind: "component", type: i6.NavbarItemComponent, selector: "rlb-navbar-item", inputs: ["disabled", "router-link", "class"], outputs: ["click"] }, { kind: "component", type: i6.NavbarSeparatorComponent, selector: "rlb-navbar-separator", inputs: ["class"] }, { kind: "component", type: i6.SidebarComponent, selector: "rlb-sidebar", inputs: ["rounded"] }, { kind: "component", type: i6.SidebarItemComponent, selector: "rlb-sidebar-item", inputs: ["title", "icon", "label", "link", "badgeCounter"], outputs: ["click"] }, { kind: "component", type: i6.ModalContainerComponent, selector: "rlb-modal-container", inputs: ["id"] }, { kind: "component", type: i6.ToastContainerComponent, selector: "rlb-toast-container", inputs: ["id"] }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsMultiPipe, name: "asMulti" }, { kind: "pipe", type: AsSinglePipe, name: "asSingle" }, { kind: "pipe", type: LeftComponentPipe, name: "leftComponent" }, { kind: "pipe", type: RightComponentPipe, name: "rightComponent" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AppTemplateComponent, isStandalone: false, selector: "rlb-app-template", inputs: { modalContainerId: ["modal-container-id", "modalContainerId"], toastContainerIds: ["toast-container-ids", "toastContainerIds"] }, ngImport: i0, template: "<div class=\"rlb-app\">\n  @if (navVisible$ | async) {\n    @if (navVisible$ | async) {\n      <rlb-navbar expand=\"lg\" class=\"border-bottom py-1 rlb-navbar\">\n        @if (navHeader$ | async) {\n          <a rlb-navbar-brand href=\"#\">{{ navHeader$ | async }}</a>\n        }\n        @if (navSearchVisible$ | async) {\n          <rlb-navbar-form>\n            <rlb-input-group class=\"my-1 mx-3\" validate>\n              <rlb-input type=\"search\" class=\"search-input\" placeholder=\"Search\" [(ngModel)]=\"navSearchText\"\n                (keyup.enter)=\"setNavbarSearchText(navSearchText)\" name=\"search\" size=\"small\">\n                <button after rlb-button outline type=\"submit\" (click)=\"setNavbarSearchText(navSearchText)\" size=\"sm\">\n                  <i class=\"bi bi-search\"></i>\n                </button>\n              </rlb-input>\n            </rlb-input-group>\n          </rlb-navbar-form>\n        }\n        <rlb-navbar-items class=\"ms-lg-auto\">\n          @for (navComponent of navLeftItems$ | async; track navComponent) {\n            <ng-container ngProjectAs=\"rlb-navbar-item\">\n              <ng-container *ngComponentOutlet=\"navComponent | leftComponent\"></ng-container>\n            </ng-container>\n          }\n        </rlb-navbar-items>\n        <rlb-navbar-items>\n          @for (navComponent of navRightItems$ | async; track navComponent) {\n            <ng-container ngProjectAs=\"rlb-navbar-item\">\n              <ng-container *ngComponentOutlet=\"navComponent | rightComponent\"></ng-container>\n            </ng-container>\n          }\n          @if ((separatorVisible$ | async)) {\n            <rlb-navbar-separator />\n          }\n          @if ((navbarHasLogin$ | async) && !(isAuth$ | async)) {\n            <rlb-navbar-item (click)=\"loginNav($event)\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.login') |translate\">\n                <i class=\" bi bi-box-arrow-in-left\"></i>\n              </span>\n              <span class=\"ms-1 d-lg-none\">{{'core.account.login' | translate}}</span>\n            </rlb-navbar-item>\n          }\n          @if ( (navbarHasLogin$ | async) && (isAuth$ | async)) {\n            <rlb-navbar-item [router-link]=\"'/profile'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.title') |translate\">\n                <i class=\"bi bi-person\"></i>\n              </span>\n              <span class=\"ms-1 d-lg-none\">{{'core.account.title' | translate}}</span>\n            </rlb-navbar-item>\n          }\n          @if (navbarHasSettings$ | async) {\n            <rlb-navbar-item [router-link]=\"'/setting'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.settings.title') |translate\">\n                <i class=\"bi bi-gear\"></i>\n              </span>\n              <span class=\"ms-1 d-lg-none\">{{'core.settings.title' | translate}}</span>\n            </rlb-navbar-item>\n          }\n          @if ((navbarHasApps$ | async) && apps.length > 1) {\n            <rlb-navbar-item [router-link]=\"'/apps'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') |translate\">\n                <i class=\"bi bi-grid-3x3-gap-fill\"></i>\n              </span>\n              <span class=\"ms-1 d-lg-none\">{{'core.apps.button' | translate}}</span>\n            </rlb-navbar-item>\n          }\n        </rlb-navbar-items>\n      </rlb-navbar>\n    }\n  }\n  <div class=\"rlb-main-wrapper\">\n    @if ((sidebarVisible$ | async)) {\n      <rlb-sidebar id=\"sidebar\" class=\"rlb-sidebar\">\n        @for (item of  (sidebarItems$ | async); track item) {\n          <rlb-sidebar-item\n            [icon]=\"item.icon\" [link]=\"item.url\"\n            [title]=\"item.title\" [label]=\"item.label\"\n            [badgeCounter]=\"item.badgeCounter\"\n            (click)=\"onSideBarItemClick(item)\"\n            >\n            {{item.label}}\n            @for (subitem of item.items || []; track subitem) {\n              <rlb-sidebar-item\n                [icon]=\"subitem.icon\"\n                [link]=\"subitem.url\"\n                [title]=\"subitem.title\"\n                [label]=\"subitem.label\"\n                [badgeCounter]=\"subitem.badgeCounter\"\n                (click)=\"onSideBarItemClick(subitem)\"\n                >\n                {{subitem.label}}\n              </rlb-sidebar-item>\n            }\n          </rlb-sidebar-item>\n        }\n      </rlb-sidebar>\n    }\n    <div class=\"rlb-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n@if (modalContainerId) {\n  <rlb-modal-container [id]=\"modalContainerId\" />\n}\n\n@if (toastContainerIds) {\n  @if (toastContainerIds.constructor.name === 'Array') {\n    @for (toastContainerId of toastContainerIds | asMulti; track toastContainerId) {\n      <rlb-toast-container [id]=\"toastContainerId\" />\n    }\n  } @else {\n    <rlb-toast-container class=\"position-fixed bottom-0 end-0 p-3\" [id]=\"toastContainerIds | asSingle\" />\n  }\n}\n", styles: [".separator{border-left:1px solid;padding:0 2px}\n"], dependencies: [{ kind: "directive", type: i1$6.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i2$1.InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "before-text", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "id", "extValidation", "enable-validation"] }, { kind: "component", type: i2$1.InputGroupComponent, selector: "rlb-input-group", inputs: ["text", "validate", "size"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "directive", type: i2$1.NavbarBrandDirective, selector: "[rlb-navbar-brand]" }, { kind: "component", type: i2$1.NavbarComponent, selector: "rlb-navbar", inputs: ["dark", "color", "placement", "expand", "class", "enable-dropdown-toggler"] }, { kind: "component", type: i2$1.NavbarFormComponent, selector: "rlb-navbar-form", inputs: ["role", "class"] }, { kind: "component", type: i2$1.NavbarItemsComponent, selector: "rlb-navbar-items", inputs: ["scroll", "class"], outputs: ["click"] }, { kind: "component", type: i2$1.NavbarItemComponent, selector: "rlb-navbar-item", inputs: ["disabled", "router-link", "class"], outputs: ["click"] }, { kind: "component", type: i2$1.NavbarSeparatorComponent, selector: "rlb-navbar-separator", inputs: ["class"] }, { kind: "component", type: i2$1.SidebarComponent, selector: "rlb-sidebar", inputs: ["rounded"] }, { kind: "component", type: i2$1.SidebarItemComponent, selector: "rlb-sidebar-item", inputs: ["title", "icon", "label", "link", "badgeCounter"], outputs: ["click"] }, { kind: "component", type: i2$1.ModalContainerComponent, selector: "rlb-modal-container", inputs: ["id"] }, { kind: "component", type: i2$1.ToastContainerComponent, selector: "rlb-toast-container", inputs: ["id"] }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: AsMultiPipe, name: "asMulti" }, { kind: "pipe", type: AsSinglePipe, name: "asSingle" }, { kind: "pipe", type: LeftComponentPipe, name: "leftComponent" }, { kind: "pipe", type: RightComponentPipe, name: "rightComponent" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppTemplateComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-app-template', standalone: false, template: "<div class=\"rlb-app\">\n  <ng-container *ngIf=\"navVisible$ | async\">\n    <rlb-navbar expand=\"lg\" *ngIf=\"navVisible$ | async\" class=\"border-bottom py-1 rlb-navbar\">\n      <a *ngIf=\"navHeader$ | async\" rlb-navbar-brand href=\"#\">{{ navHeader$ | async }}</a>\n      <rlb-navbar-form *ngIf=\"navSearchVisible$ | async\">\n        <rlb-input-group class=\"my-1 mx-3\" validate>\n          <rlb-input type=\"search\" class=\"search-input\" placeholder=\"Search\" [(ngModel)]=\"navSearchText\"\n                     (keyup.enter)=\"setNavbarSearchText(navSearchText)\" name=\"search\" size=\"small\">\n            <button after rlb-button outline type=\"submit\" (click)=\"setNavbarSearchText(navSearchText)\" size=\"sm\">\n              <i class=\"bi bi-search\"></i>\n            </button>\n          </rlb-input>\n        </rlb-input-group>\n      </rlb-navbar-form>\n      <rlb-navbar-items class=\"ms-lg-auto\">\n        <ng-container ngProjectAs=\"rlb-navbar-item\" *ngFor=\"let navComponent of navLeftItems$ | async\">\n          <ng-container *ngComponentOutlet=\"navComponent | leftComponent\"></ng-container>\n        </ng-container>\n      </rlb-navbar-items>\n      <rlb-navbar-items>\n        <ng-container ngProjectAs=\"rlb-navbar-item\" *ngFor=\"let navComponent of navRightItems$ | async\">\n          <ng-container *ngComponentOutlet=\"navComponent | rightComponent\"></ng-container>\n        </ng-container>\n        <rlb-navbar-separator *ngIf=\"(separatorVisible$ | async)\" />\n        <rlb-navbar-item *ngIf=\"(navbarHasLogin$ | async) && !(isAuth$ | async)\" (click)=\"loginNav($event)\">\n          <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.login') |translate\">\n            <i class=\" bi bi-box-arrow-in-left\"></i>\n          </span>\n          <span class=\"ms-1 d-lg-none\">{{'core.account.login' | translate}}</span>\n        </rlb-navbar-item>\n        <rlb-navbar-item *ngIf=\" (navbarHasLogin$ | async) && (isAuth$ | async)\" [router-link]=\"'/profile'\">\n          <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.title') |translate\">\n            <i class=\"bi bi-person\"></i>\n          </span>\n          <span class=\"ms-1 d-lg-none\">{{'core.account.title' | translate}}</span>\n        </rlb-navbar-item>\n        <rlb-navbar-item *ngIf=\"navbarHasSettings$ | async\" [router-link]=\"'/setting'\">\n          <span tooltip-placement=\"bottom\" [tooltip]=\"('core.settings.title') |translate\">\n            <i class=\"bi bi-gear\"></i>\n          </span>\n          <span class=\"ms-1 d-lg-none\">{{'core.settings.title' | translate}}</span>\n        </rlb-navbar-item>\n        <rlb-navbar-item *ngIf=\"(navbarHasApps$ | async) && apps.length > 1\" [router-link]=\"'/apps'\">\n          <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') |translate\">\n            <i class=\"bi bi-grid-3x3-gap-fill\"></i>\n          </span>\n          <span class=\"ms-1 d-lg-none\">{{'core.apps.button' | translate}}</span>\n        </rlb-navbar-item>\n      </rlb-navbar-items>\n    </rlb-navbar>\n  </ng-container>\n  <div class=\"rlb-main-wrapper\">\n    <rlb-sidebar id=\"sidebar\" class=\"rlb-sidebar\" *ngIf=\"(sidebarVisible$ | async)\">\n      <rlb-sidebar-item\n        *ngFor=\"let item of  (sidebarItems$ | async)\"\n        [icon]=\"item.icon\" [link]=\"item.url\"\n        [title]=\"item.title\" [label]=\"item.label\"\n        [badgeCounter]=\"item.badgeCounter\"\n        (click)=\"onSideBarItemClick(item)\"\n      >\n        {{item.label}}\n        <rlb-sidebar-item\n          *ngFor=\"let subitem of item.items || []\"\n          [icon]=\"subitem.icon\"\n          [link]=\"subitem.url\"\n          [title]=\"subitem.title\"\n          [label]=\"subitem.label\"\n          [badgeCounter]=\"subitem.badgeCounter\"\n          (click)=\"onSideBarItemClick(subitem)\"\n        >\n          {{subitem.label}}\n        </rlb-sidebar-item>\n      </rlb-sidebar-item>\n    </rlb-sidebar>\n    <div class=\"rlb-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-container *ngIf=\"modalContainerId\">\n  <rlb-modal-container [id]=\"modalContainerId\" />\n</ng-container>\n\n<ng-container *ngIf=\"toastContainerIds\">\n  <ng-container *ngIf=\"toastContainerIds.constructor.name === 'Array'; else toastContainerIdsIsNotArray\">\n    <rlb-toast-container *ngFor=\"let toastContainerId of toastContainerIds | asMulti\" [id]=\"toastContainerId\" />\n  </ng-container>\n  <ng-template #toastContainerIdsIsNotArray>\n    <rlb-toast-container class=\"position-fixed bottom-0 end-0 p-3\" [id]=\"toastContainerIds | asSingle\" />\n  </ng-template>\n</ng-container>\n", styles: [".separator{border-left:1px solid;padding:0 2px}\n"] }]
+            args: [{ selector: 'rlb-app-template', standalone: false, template: "<div class=\"rlb-app\">\n  @if (navVisible$ | async) {\n    @if (navVisible$ | async) {\n      <rlb-navbar expand=\"lg\" class=\"border-bottom py-1 rlb-navbar\">\n        @if (navHeader$ | async) {\n          <a rlb-navbar-brand href=\"#\">{{ navHeader$ | async }}</a>\n        }\n        @if (navSearchVisible$ | async) {\n          <rlb-navbar-form>\n            <rlb-input-group class=\"my-1 mx-3\" validate>\n              <rlb-input type=\"search\" class=\"search-input\" placeholder=\"Search\" [(ngModel)]=\"navSearchText\"\n                (keyup.enter)=\"setNavbarSearchText(navSearchText)\" name=\"search\" size=\"small\">\n                <button after rlb-button outline type=\"submit\" (click)=\"setNavbarSearchText(navSearchText)\" size=\"sm\">\n                  <i class=\"bi bi-search\"></i>\n                </button>\n              </rlb-input>\n            </rlb-input-group>\n          </rlb-navbar-form>\n        }\n        <rlb-navbar-items class=\"ms-lg-auto\">\n          @for (navComponent of navLeftItems$ | async; track navComponent) {\n            <ng-container ngProjectAs=\"rlb-navbar-item\">\n              <ng-container *ngComponentOutlet=\"navComponent | leftComponent\"></ng-container>\n            </ng-container>\n          }\n        </rlb-navbar-items>\n        <rlb-navbar-items>\n          @for (navComponent of navRightItems$ | async; track navComponent) {\n            <ng-container ngProjectAs=\"rlb-navbar-item\">\n              <ng-container *ngComponentOutlet=\"navComponent | rightComponent\"></ng-container>\n            </ng-container>\n          }\n          @if ((separatorVisible$ | async)) {\n            <rlb-navbar-separator />\n          }\n          @if ((navbarHasLogin$ | async) && !(isAuth$ | async)) {\n            <rlb-navbar-item (click)=\"loginNav($event)\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.login') |translate\">\n                <i class=\" bi bi-box-arrow-in-left\"></i>\n              </span>\n              <span class=\"ms-1 d-lg-none\">{{'core.account.login' | translate}}</span>\n            </rlb-navbar-item>\n          }\n          @if ( (navbarHasLogin$ | async) && (isAuth$ | async)) {\n            <rlb-navbar-item [router-link]=\"'/profile'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.account.title') |translate\">\n                <i class=\"bi bi-person\"></i>\n              </span>\n              <span class=\"ms-1 d-lg-none\">{{'core.account.title' | translate}}</span>\n            </rlb-navbar-item>\n          }\n          @if (navbarHasSettings$ | async) {\n            <rlb-navbar-item [router-link]=\"'/setting'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.settings.title') |translate\">\n                <i class=\"bi bi-gear\"></i>\n              </span>\n              <span class=\"ms-1 d-lg-none\">{{'core.settings.title' | translate}}</span>\n            </rlb-navbar-item>\n          }\n          @if ((navbarHasApps$ | async) && apps.length > 1) {\n            <rlb-navbar-item [router-link]=\"'/apps'\">\n              <span tooltip-placement=\"bottom\" [tooltip]=\"('core.apps.button') |translate\">\n                <i class=\"bi bi-grid-3x3-gap-fill\"></i>\n              </span>\n              <span class=\"ms-1 d-lg-none\">{{'core.apps.button' | translate}}</span>\n            </rlb-navbar-item>\n          }\n        </rlb-navbar-items>\n      </rlb-navbar>\n    }\n  }\n  <div class=\"rlb-main-wrapper\">\n    @if ((sidebarVisible$ | async)) {\n      <rlb-sidebar id=\"sidebar\" class=\"rlb-sidebar\">\n        @for (item of  (sidebarItems$ | async); track item) {\n          <rlb-sidebar-item\n            [icon]=\"item.icon\" [link]=\"item.url\"\n            [title]=\"item.title\" [label]=\"item.label\"\n            [badgeCounter]=\"item.badgeCounter\"\n            (click)=\"onSideBarItemClick(item)\"\n            >\n            {{item.label}}\n            @for (subitem of item.items || []; track subitem) {\n              <rlb-sidebar-item\n                [icon]=\"subitem.icon\"\n                [link]=\"subitem.url\"\n                [title]=\"subitem.title\"\n                [label]=\"subitem.label\"\n                [badgeCounter]=\"subitem.badgeCounter\"\n                (click)=\"onSideBarItemClick(subitem)\"\n                >\n                {{subitem.label}}\n              </rlb-sidebar-item>\n            }\n          </rlb-sidebar-item>\n        }\n      </rlb-sidebar>\n    }\n    <div class=\"rlb-content\">\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n@if (modalContainerId) {\n  <rlb-modal-container [id]=\"modalContainerId\" />\n}\n\n@if (toastContainerIds) {\n  @if (toastContainerIds.constructor.name === 'Array') {\n    @for (toastContainerId of toastContainerIds | asMulti; track toastContainerId) {\n      <rlb-toast-container [id]=\"toastContainerId\" />\n    }\n  } @else {\n    <rlb-toast-container class=\"position-fixed bottom-0 end-0 p-3\" [id]=\"toastContainerIds | asSingle\" />\n  }\n}\n", styles: [".separator{border-left:1px solid;padding:0 2px}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [RLB_CFG_ENV]
@@ -1958,11 +1959,11 @@ class BaseComponent {
     }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BaseComponent, deps: [{ token: i1$7.BreakpointObserver }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BaseComponent, isStandalone: false, selector: "rlb-base-template", inputs: { breadcrumb: "breadcrumb", title: "title", subtitle: "subtitle" }, ngImport: i0, template: "<div class=\" mb-3\">\n    <div class=\"container-fluid\" *ngIf=\"!(isHandset$ | async) else mobileMode\">\n      <div class=\"row mt-1\">\n        <div class=\"col-xl-8 col-lg-10 col-md-12 col-sm-12 col-xs-12 mx-auto\">\n          <div class=\"row\">\n            <div class=\"col-12 pb-0\">\n              <rlb-breadcrumb *ngIf=\"breadcrumb\" [items]=\"breadcrumb\"></rlb-breadcrumb>\n              <h1 class=\"pt-5 pb-0 text-center\">\n                {{title}}\n              </h1>\n            </div>\n          </div>\n          <div class=\"row\" *ngIf=\"subtitle\">\n            <div class=\"col-12 pb-12\">\n              <span class=\"d-block text-h6 text-center\">\n                {{subtitle}}\n              </span>\n            </div>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n          <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <ng-template class=\"container-fluid\" #mobileMode>\n      <div class=\"row\">\n        <div class=\"col-12 pb-0\">\n          <h1 class=\"pt-5 pb-0 text-center\">\n            {{title}}\n          </h1>\n        </div>\n      </div>\n      <div class=\"row\" *ngIf=\"subtitle\">\n        <div class=\"col-12 pb-7\">\n          <div class=\"d-block text-h6 text-center\">\n            {{subtitle}}\n          </div>\n        </div>\n      </div>\n      <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"mobile\"></ng-container>\n    </ng-template>\n  </div>\n  \n  <ng-template #all>\n    <ng-content select=\"[all]\"></ng-content>\n  </ng-template>\n  \n  <ng-template #default>\n    <ng-content select=\"[default]\"></ng-content>\n  </ng-template>\n  \n  <ng-template #mobile>\n    <ng-content select=\"[mobile]\"></ng-content>\n  </ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i1$6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i6.BreadcrumbComponent, selector: "rlb-breadcrumb", inputs: ["divider", "items", "cssClasses"] }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: BaseComponent, isStandalone: false, selector: "rlb-base-template", inputs: { breadcrumb: "breadcrumb", title: "title", subtitle: "subtitle" }, ngImport: i0, template: "<div class=\" mb-3\">\n  @if (!(isHandset$ | async)) {\n    <div class=\"container-fluid\">\n      <div class=\"row mt-1\">\n        <div class=\"col-xl-8 col-lg-10 col-md-12 col-sm-12 col-xs-12 mx-auto\">\n          <div class=\"row\">\n            <div class=\"col-12 pb-0\">\n              @if (breadcrumb) {\n                <rlb-breadcrumb [items]=\"breadcrumb\"></rlb-breadcrumb>\n              }\n              <h1 class=\"pt-5 pb-0 text-center\">\n                {{title}}\n              </h1>\n            </div>\n          </div>\n          @if (subtitle) {\n            <div class=\"row\">\n              <div class=\"col-12 pb-12\">\n                <span class=\"d-block text-h6 text-center\">\n                  {{subtitle}}\n                </span>\n              </div>\n            </div>\n          }\n          <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n          <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n        </div>\n      </div>\n    </div>\n  } @else {\n    <!--old ng-template #mobileMode-->\n    <div class=\"row\">\n      <div class=\"col-12 pb-0\">\n        <h1 class=\"pt-5 pb-0 text-center\">\n          {{title}}\n        </h1>\n      </div>\n    </div>\n    @if (subtitle) {\n      <div class=\"row\">\n        <div class=\"col-12 pb-7\">\n          <div class=\"d-block text-h6 text-center\">\n            {{subtitle}}\n          </div>\n        </div>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"mobile\"></ng-container>\n  }\n</div>\n\n<ng-template #all>\n  <ng-content select=\"[all]\"></ng-content>\n</ng-template>\n\n<ng-template #default>\n  <ng-content select=\"[default]\"></ng-content>\n</ng-template>\n\n<ng-template #mobile>\n  <ng-content select=\"[mobile]\"></ng-content>\n</ng-template>\n", styles: [""], dependencies: [{ kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$1.BreadcrumbComponent, selector: "rlb-breadcrumb", inputs: ["divider", "items", "cssClasses"] }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BaseComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-base-template', standalone: false, template: "<div class=\" mb-3\">\n    <div class=\"container-fluid\" *ngIf=\"!(isHandset$ | async) else mobileMode\">\n      <div class=\"row mt-1\">\n        <div class=\"col-xl-8 col-lg-10 col-md-12 col-sm-12 col-xs-12 mx-auto\">\n          <div class=\"row\">\n            <div class=\"col-12 pb-0\">\n              <rlb-breadcrumb *ngIf=\"breadcrumb\" [items]=\"breadcrumb\"></rlb-breadcrumb>\n              <h1 class=\"pt-5 pb-0 text-center\">\n                {{title}}\n              </h1>\n            </div>\n          </div>\n          <div class=\"row\" *ngIf=\"subtitle\">\n            <div class=\"col-12 pb-12\">\n              <span class=\"d-block text-h6 text-center\">\n                {{subtitle}}\n              </span>\n            </div>\n          </div>\n          <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n          <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <ng-template class=\"container-fluid\" #mobileMode>\n      <div class=\"row\">\n        <div class=\"col-12 pb-0\">\n          <h1 class=\"pt-5 pb-0 text-center\">\n            {{title}}\n          </h1>\n        </div>\n      </div>\n      <div class=\"row\" *ngIf=\"subtitle\">\n        <div class=\"col-12 pb-7\">\n          <div class=\"d-block text-h6 text-center\">\n            {{subtitle}}\n          </div>\n        </div>\n      </div>\n      <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"mobile\"></ng-container>\n    </ng-template>\n  </div>\n  \n  <ng-template #all>\n    <ng-content select=\"[all]\"></ng-content>\n  </ng-template>\n  \n  <ng-template #default>\n    <ng-content select=\"[default]\"></ng-content>\n  </ng-template>\n  \n  <ng-template #mobile>\n    <ng-content select=\"[mobile]\"></ng-content>\n  </ng-template>" }]
+            args: [{ selector: 'rlb-base-template', standalone: false, template: "<div class=\" mb-3\">\n  @if (!(isHandset$ | async)) {\n    <div class=\"container-fluid\">\n      <div class=\"row mt-1\">\n        <div class=\"col-xl-8 col-lg-10 col-md-12 col-sm-12 col-xs-12 mx-auto\">\n          <div class=\"row\">\n            <div class=\"col-12 pb-0\">\n              @if (breadcrumb) {\n                <rlb-breadcrumb [items]=\"breadcrumb\"></rlb-breadcrumb>\n              }\n              <h1 class=\"pt-5 pb-0 text-center\">\n                {{title}}\n              </h1>\n            </div>\n          </div>\n          @if (subtitle) {\n            <div class=\"row\">\n              <div class=\"col-12 pb-12\">\n                <span class=\"d-block text-h6 text-center\">\n                  {{subtitle}}\n                </span>\n              </div>\n            </div>\n          }\n          <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n          <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n        </div>\n      </div>\n    </div>\n  } @else {\n    <!--old ng-template #mobileMode-->\n    <div class=\"row\">\n      <div class=\"col-12 pb-0\">\n        <h1 class=\"pt-5 pb-0 text-center\">\n          {{title}}\n        </h1>\n      </div>\n    </div>\n    @if (subtitle) {\n      <div class=\"row\">\n        <div class=\"col-12 pb-7\">\n          <div class=\"d-block text-h6 text-center\">\n            {{subtitle}}\n          </div>\n        </div>\n      </div>\n    }\n    <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"mobile\"></ng-container>\n  }\n</div>\n\n<ng-template #all>\n  <ng-content select=\"[all]\"></ng-content>\n</ng-template>\n\n<ng-template #default>\n  <ng-content select=\"[default]\"></ng-content>\n</ng-template>\n\n<ng-template #mobile>\n  <ng-content select=\"[mobile]\"></ng-content>\n</ng-template>\n" }]
         }], ctorParameters: () => [{ type: i1$7.BreakpointObserver }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -1990,11 +1991,11 @@ class ContentComponent {
     }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ContentComponent, deps: [{ token: i1$7.BreakpointObserver }, { token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ContentComponent, isStandalone: false, selector: "rlb-content-template", ngImport: i0, template: "<div class=\" mb-3\">\n    <div class=\"container-fluid\" *ngIf=\"!(isHandset$ | async) else mobileMode\">\n      <div class=\"row mt-1\">\n        <div class=\"mx-auto col-sm-12 col-md-8 col-lg-9 col-xl-8\">\n          <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n          <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <ng-template class=\"container-fluid\" #mobileMode>\n      <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"mobile\"></ng-container>\n    </ng-template>\n  </div>\n  \n  <ng-template #all>\n    <ng-content select=\"[all]\"></ng-content>\n  </ng-template>\n  \n  <ng-template #default>\n      <ng-content select=\"[default]\"></ng-content>\n  </ng-template>\n  \n  <ng-template #mobile>\n    <ng-content select=\"[mobile]\"></ng-content>\n  </ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i1$6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ContentComponent, isStandalone: false, selector: "rlb-content-template", ngImport: i0, template: "<div class=\" mb-3\">\n  @if (!(isHandset$ | async)) {\n    <div class=\"container-fluid\">\n      <div class=\"row mt-1\">\n        <div class=\"mx-auto col-sm-12 col-md-8 col-lg-9 col-xl-8\">\n          <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n          <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n        </div>\n      </div>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"mobile\"></ng-container>\n  }\n</div>\n\n<ng-template #all>\n  <ng-content select=\"[all]\"></ng-content>\n</ng-template>\n\n<ng-template #default>\n  <ng-content select=\"[default]\"></ng-content>\n</ng-template>\n\n<ng-template #mobile>\n  <ng-content select=\"[mobile]\"></ng-content>\n</ng-template>", styles: [""], dependencies: [{ kind: "directive", type: i1$6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ContentComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-content-template', standalone: false, template: "<div class=\" mb-3\">\n    <div class=\"container-fluid\" *ngIf=\"!(isHandset$ | async) else mobileMode\">\n      <div class=\"row mt-1\">\n        <div class=\"mx-auto col-sm-12 col-md-8 col-lg-9 col-xl-8\">\n          <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n          <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n        </div>\n      </div>\n    </div>\n    <ng-template class=\"container-fluid\" #mobileMode>\n      <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n      <ng-container [ngTemplateOutlet]=\"mobile\"></ng-container>\n    </ng-template>\n  </div>\n  \n  <ng-template #all>\n    <ng-content select=\"[all]\"></ng-content>\n  </ng-template>\n  \n  <ng-template #default>\n      <ng-content select=\"[default]\"></ng-content>\n  </ng-template>\n  \n  <ng-template #mobile>\n    <ng-content select=\"[mobile]\"></ng-content>\n  </ng-template>" }]
+            args: [{ selector: 'rlb-content-template', standalone: false, template: "<div class=\" mb-3\">\n  @if (!(isHandset$ | async)) {\n    <div class=\"container-fluid\">\n      <div class=\"row mt-1\">\n        <div class=\"mx-auto col-sm-12 col-md-8 col-lg-9 col-xl-8\">\n          <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n          <ng-container [ngTemplateOutlet]=\"default\"></ng-container>\n        </div>\n      </div>\n    </div>\n  } @else {\n    <ng-container [ngTemplateOutlet]=\"all\"></ng-container>\n    <ng-container [ngTemplateOutlet]=\"mobile\"></ng-container>\n  }\n</div>\n\n<ng-template #all>\n  <ng-content select=\"[all]\"></ng-content>\n</ng-template>\n\n<ng-template #default>\n  <ng-content select=\"[default]\"></ng-content>\n</ng-template>\n\n<ng-template #mobile>\n  <ng-content select=\"[mobile]\"></ng-content>\n</ng-template>" }]
         }], ctorParameters: () => [{ type: i1$7.BreakpointObserver }, { type: Object, decorators: [{
                     type: Inject,
                     args: [PLATFORM_ID]
@@ -2108,11 +2109,11 @@ class AppContainerComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppContainerComponent, deps: [{ token: RLB_CFG_ENV }, { token: i1$1.Store }, { token: i2.Router }, { token: AppStorageService }, { token: PwaUpdaterService }, { token: AppsService }, { token: AppLoggerService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AppContainerComponent, isStandalone: false, selector: "rlb-app-container", inputs: { modalContainerId: ["modal-container-id", "modalContainerId"], toastContainerIds: ["toast-container-ids", "toastContainerIds"] }, ngImport: i0, template: "<ng-container *ngIf=\"(template$ | async) === 'app'\">\n  <rlb-app-template>\n    <router-outlet />\n  </rlb-app-template>\n</ng-container>\n<ng-container *ngIf=\"(template$ | async) === 'basic'\">\n  <router-outlet />\n</ng-container>\n\n\n<ng-container *ngIf=\"modalContainerId\">\n  <rlb-modal-container [id]=\"modalContainerId\" />\n</ng-container>\n\n<ng-container *ngIf=\"toastContainerIds\">\n  <ng-container *ngIf=\"toastContainerIds.constructor.name === 'Array'; else toastContainerIdsIsNotArray\">\n    <rlb-toast-container *ngFor=\"let toastContainerId of toastContainerIds | asMulti\" [id]=\"toastContainerId\" />\n  </ng-container>\n  <ng-template #toastContainerIdsIsNotArray>\n    <rlb-toast-container class=\"position-fixed bottom-0 end-0 p-3\" [id]=\"toastContainerIds | asSingle\" />\n  </ng-template>\n</ng-container>", dependencies: [{ kind: "directive", type: i1$6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i6.ModalContainerComponent, selector: "rlb-modal-container", inputs: ["id"] }, { kind: "component", type: i6.ToastContainerComponent, selector: "rlb-toast-container", inputs: ["id"] }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppTemplateComponent, selector: "rlb-app-template", inputs: ["modal-container-id", "toast-container-ids"] }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }, { kind: "pipe", type: AsMultiPipe, name: "asMulti" }, { kind: "pipe", type: AsSinglePipe, name: "asSingle" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AppContainerComponent, isStandalone: false, selector: "rlb-app-container", inputs: { modalContainerId: ["modal-container-id", "modalContainerId"], toastContainerIds: ["toast-container-ids", "toastContainerIds"] }, ngImport: i0, template: "@if ((template$ | async) === 'app') {\n  <rlb-app-template>\n    <router-outlet />\n  </rlb-app-template>\n}\n@if ((template$ | async) === 'basic') {\n  <router-outlet />\n}\n\n\n@if (modalContainerId) {\n  <rlb-modal-container [id]=\"modalContainerId\" />\n}\n\n@if (toastContainerIds) {\n  @if (toastContainerIds.constructor.name === 'Array') {\n    @for (toastContainerId of toastContainerIds | asMulti; track toastContainerId) {\n      <rlb-toast-container [id]=\"toastContainerId\" />\n    }\n  } @else {\n    <rlb-toast-container class=\"position-fixed bottom-0 end-0 p-3\" [id]=\"toastContainerIds | asSingle\" />\n  }\n}", dependencies: [{ kind: "component", type: i2$1.ModalContainerComponent, selector: "rlb-modal-container", inputs: ["id"] }, { kind: "component", type: i2$1.ToastContainerComponent, selector: "rlb-toast-container", inputs: ["id"] }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "component", type: AppTemplateComponent, selector: "rlb-app-template", inputs: ["modal-container-id", "toast-container-ids"] }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }, { kind: "pipe", type: AsMultiPipe, name: "asMulti" }, { kind: "pipe", type: AsSinglePipe, name: "asSingle" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-app-container', standalone: false, template: "<ng-container *ngIf=\"(template$ | async) === 'app'\">\n  <rlb-app-template>\n    <router-outlet />\n  </rlb-app-template>\n</ng-container>\n<ng-container *ngIf=\"(template$ | async) === 'basic'\">\n  <router-outlet />\n</ng-container>\n\n\n<ng-container *ngIf=\"modalContainerId\">\n  <rlb-modal-container [id]=\"modalContainerId\" />\n</ng-container>\n\n<ng-container *ngIf=\"toastContainerIds\">\n  <ng-container *ngIf=\"toastContainerIds.constructor.name === 'Array'; else toastContainerIdsIsNotArray\">\n    <rlb-toast-container *ngFor=\"let toastContainerId of toastContainerIds | asMulti\" [id]=\"toastContainerId\" />\n  </ng-container>\n  <ng-template #toastContainerIdsIsNotArray>\n    <rlb-toast-container class=\"position-fixed bottom-0 end-0 p-3\" [id]=\"toastContainerIds | asSingle\" />\n  </ng-template>\n</ng-container>" }]
+            args: [{ selector: 'rlb-app-container', standalone: false, template: "@if ((template$ | async) === 'app') {\n  <rlb-app-template>\n    <router-outlet />\n  </rlb-app-template>\n}\n@if ((template$ | async) === 'basic') {\n  <router-outlet />\n}\n\n\n@if (modalContainerId) {\n  <rlb-modal-container [id]=\"modalContainerId\" />\n}\n\n@if (toastContainerIds) {\n  @if (toastContainerIds.constructor.name === 'Array') {\n    @for (toastContainerId of toastContainerIds | asMulti; track toastContainerId) {\n      <rlb-toast-container [id]=\"toastContainerId\" />\n    }\n  } @else {\n    <rlb-toast-container class=\"position-fixed bottom-0 end-0 p-3\" [id]=\"toastContainerIds | asSingle\" />\n  }\n}" }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Inject,
                     args: [RLB_CFG_ENV]
@@ -2246,7 +2247,7 @@ class ErrorModalComponent {
     onEnter() { }
     ngOnInit() { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ErrorModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ErrorModalComponent, isStandalone: true, selector: "ng-component", hostDirectives: [{ directive: i6.ModalDirective, inputs: ["id", "id", "data-instance", "data-instance", "data-options", "data-options"] }], ngImport: i0, template: ` <div class="modal-header">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ErrorModalComponent, isStandalone: true, selector: "ng-component", hostDirectives: [{ directive: i2$1.ModalDirective, inputs: ["id", "id", "data-instance", "data-instance", "data-options", "data-options"] }], ngImport: i0, template: ` <div class="modal-header">
       <h5 class="modal-title">{{ data.title }}</h5>
       <button
         type="button"
@@ -2262,12 +2263,12 @@ class ErrorModalComponent {
       <button type="button" class="btn btn-primary" data-modal-reason="close">
         {{ data.ok }}
       </button>
-    </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "ngmodule", type: CommonModule }] }); }
+    </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RlbAppModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ErrorModalComponent, decorators: [{
             type: Component,
             args: [{
-                    imports: [RlbAppModule, CommonModule],
+                    imports: [RlbAppModule],
                     template: ` <div class="modal-header">
       <h5 class="modal-title">{{ data.title }}</h5>
       <button
@@ -2303,23 +2304,25 @@ class ModalAppsComponent {
         this.result = app;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalAppsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ModalAppsComponent, isStandalone: true, selector: "ng-component", hostDirectives: [{ directive: i6.ModalDirective, inputs: ["id", "id", "data-instance", "data-instance", "data-options", "data-options"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ModalAppsComponent, isStandalone: true, selector: "ng-component", hostDirectives: [{ directive: i2$1.ModalDirective, inputs: ["id", "id", "data-instance", "data-instance", "data-options", "data-options"] }], ngImport: i0, template: `
     <div class="modal-header">
       <h5 class="modal-title">{{ data.title }}</h5>
       <button type="button" class="btn-close" aria-label="Close" data-modal-reason="close"></button>
     </div>
     <div class="modal-body">
       <ul class="row row-cols-4 list-unstyled list">
-        <li *ngFor="let app of data.content" class="col my-2" [tooltip]="app.description | translate">
-          <a class="d-block text-body-emphasis text-decoration-none" (click)="appSelected(app)" [class.disabled]="!app.enabled" data-modal-reason="ok">
-            <div class="px-3 py-4 mb-2 bg-body-secondary text-center rounded">
-              <i [ngClass]="app.icon"></i>
-            </div>
-            <div class="name text-muted text-decoration-none text-center pt-1">{{app.name | translate}}</div>
-          </a>
-        </li>
+        @for (app of data.content; track app) {
+          <li class="col my-2" [tooltip]="app.description | translate">
+            <a class="d-block text-body-emphasis text-decoration-none" (click)="appSelected(app)" [class.disabled]="!app.enabled" data-modal-reason="ok">
+              <div class="px-3 py-4 mb-2 bg-body-secondary text-center rounded">
+                <i [ngClass]="app.icon"></i>
+              </div>
+              <div class="name text-muted text-decoration-none text-center pt-1">{{app.name | translate}}</div>
+            </a>
+          </li>
+        }
       </ul>
-    </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "directive", type: i6.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ModalAppsComponent, decorators: [{
             type: Component,
@@ -2332,14 +2335,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
     </div>
     <div class="modal-body">
       <ul class="row row-cols-4 list-unstyled list">
-        <li *ngFor="let app of data.content" class="col my-2" [tooltip]="app.description | translate">
-          <a class="d-block text-body-emphasis text-decoration-none" (click)="appSelected(app)" [class.disabled]="!app.enabled" data-modal-reason="ok">
-            <div class="px-3 py-4 mb-2 bg-body-secondary text-center rounded">
-              <i [ngClass]="app.icon"></i>
-            </div>
-            <div class="name text-muted text-decoration-none text-center pt-1">{{app.name | translate}}</div>
-          </a>
-        </li>
+        @for (app of data.content; track app) {
+          <li class="col my-2" [tooltip]="app.description | translate">
+            <a class="d-block text-body-emphasis text-decoration-none" (click)="appSelected(app)" [class.disabled]="!app.enabled" data-modal-reason="ok">
+              <div class="px-3 py-4 mb-2 bg-body-secondary text-center rounded">
+                <i [ngClass]="app.icon"></i>
+              </div>
+              <div class="name text-muted text-decoration-none text-center pt-1">{{app.name | translate}}</div>
+            </a>
+          </li>
+        }
       </ul>
     </div>`,
                     hostDirectives: [{ directive: ModalDirective, inputs: ['id', 'data-instance', 'data-options'] }]
@@ -2365,11 +2370,11 @@ class AppSelectorComponent {
         return this.authService.isAuthenticated$;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppSelectorComponent, deps: [{ token: i1$6.Location }, { token: AppsService }, { token: AuthenticationService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: AppSelectorComponent, isStandalone: true, selector: "rlb-app-selector", ngImport: i0, template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.apps.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y cur\"\n      style=\"font-size: 25px;font-weight: 600;\" (click)=\"backClicked()\"></i>\n  </div>\n  <rlb-list>\n    <ng-container ngProjectAs=\"rlb-list-item-image\" *ngFor=\"let app of apps\">\n      <ng-container ngProjectAs=\"rlb-list-item-image\" *ngIf=\"app.core\">\n        <rlb-list-item-image [icon]=\"app.core.icon\" [avatar-size]=\"35\"\n          [line-1]=\"(app.core.title | translate) + (app.data?.appName ? ' - ' + app.data?.appName : '')\"\n          [disabled]=\"!app.enabled && (app.core.auth && !(auth$ | async))\" [line-2]=\"app.core.description | translate\"\n          (click)=\"selectApp(app)\">\n        </rlb-list-item-image>\n      </ng-container>\n    </ng-container>\n  </rlb-list>\n</div>", styles: [""], dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "component", type: i6.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i6.ListItemImageComponent, selector: "rlb-list-item-image", inputs: ["active", "disabled", "counter-empty", "counter-pill", "counter-border", "avatar-size", "username", "line-1", "line-2", "avatar", "counter", "counter-color", "icon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AppSelectorComponent, isStandalone: true, selector: "rlb-app-selector", ngImport: i0, template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.apps.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y cur\"\n    style=\"font-size: 25px;font-weight: 600;\" (click)=\"backClicked()\"></i>\n  </div>\n  <rlb-list>\n    @for (app of apps; track app.id) {\n      <ng-container ngProjectAs=\"rlb-list-item-image\">\n        @if (app.core) {\n          <ng-container ngProjectAs=\"rlb-list-item-image\">\n            <rlb-list-item-image [icon]=\"app.core.icon\" [avatar-size]=\"35\"\n              [line-1]=\"(app.core.title | translate) + (app.data?.appName ? ' - ' + app.data?.appName : '')\"\n              [disabled]=\"!app.enabled && (app.core.auth && !(auth$ | async))\" [line-2]=\"app.core.description | translate\"\n              (click)=\"selectApp(app)\">\n            </rlb-list-item-image>\n          </ng-container>\n        }\n      </ng-container>\n    }\n  </rlb-list>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "component", type: i2$1.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i2$1.ListItemImageComponent, selector: "rlb-list-item-image", inputs: ["active", "disabled", "counter-empty", "counter-pill", "counter-border", "avatar-size", "username", "line-1", "line-2", "avatar", "counter", "counter-color", "icon"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AppSelectorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-app-selector', imports: [RlbAppModule, CommonModule], template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.apps.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y cur\"\n      style=\"font-size: 25px;font-weight: 600;\" (click)=\"backClicked()\"></i>\n  </div>\n  <rlb-list>\n    <ng-container ngProjectAs=\"rlb-list-item-image\" *ngFor=\"let app of apps\">\n      <ng-container ngProjectAs=\"rlb-list-item-image\" *ngIf=\"app.core\">\n        <rlb-list-item-image [icon]=\"app.core.icon\" [avatar-size]=\"35\"\n          [line-1]=\"(app.core.title | translate) + (app.data?.appName ? ' - ' + app.data?.appName : '')\"\n          [disabled]=\"!app.enabled && (app.core.auth && !(auth$ | async))\" [line-2]=\"app.core.description | translate\"\n          (click)=\"selectApp(app)\">\n        </rlb-list-item-image>\n      </ng-container>\n    </ng-container>\n  </rlb-list>\n</div>" }]
+            args: [{ selector: 'rlb-app-selector', imports: [RlbAppModule, CommonModule], template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.apps.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y cur\"\n    style=\"font-size: 25px;font-weight: 600;\" (click)=\"backClicked()\"></i>\n  </div>\n  <rlb-list>\n    @for (app of apps; track app.id) {\n      <ng-container ngProjectAs=\"rlb-list-item-image\">\n        @if (app.core) {\n          <ng-container ngProjectAs=\"rlb-list-item-image\">\n            <rlb-list-item-image [icon]=\"app.core.icon\" [avatar-size]=\"35\"\n              [line-1]=\"(app.core.title | translate) + (app.data?.appName ? ' - ' + app.data?.appName : '')\"\n              [disabled]=\"!app.enabled && (app.core.auth && !(auth$ | async))\" [line-2]=\"app.core.description | translate\"\n              (click)=\"selectApp(app)\">\n            </rlb-list-item-image>\n          </ng-container>\n        }\n      </ng-container>\n    }\n  </rlb-list>\n</div>\n" }]
         }], ctorParameters: () => [{ type: i1$6.Location }, { type: AppsService }, { type: AuthenticationService }] });
 
 class RlbRole {
@@ -2742,13 +2747,13 @@ class UserAccountComponent {
     configureOTP() {
         this.keycloakProfileService.configureOTP();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: UserAccountComponent, deps: [{ token: i1$6.Location }, { token: i1$1.Store }, { token: KeycloakProfileService }, { token: i6.ModalService }, { token: LanguageService }, { token: AuthenticationService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", 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          <rlb-input *ngIf=\"keyCloakUser\" size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.username\" disabled />\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          <rlb-input *ngIf=\"keyCloakUser\" size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.email\" />\n          <rlb-input *ngIf=\"!keyCloakUser\" size=\"small\" type=\"text\" readonly />\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          <rlb-input *ngIf=\"keyCloakUser\" size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.firstName\" />\n          <rlb-input *ngIf=\"!keyCloakUser\" size=\"small\" type=\"text\" readonly />\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          <rlb-input *ngIf=\"keyCloakUser\" size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.lastName\" />\n          <rlb-input *ngIf=\"!keyCloakUser\" size=\"small\" type=\"text\" readonly />\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  <ng-container *ngIf=\"keyCloakUser\">\n    <div class=\"container text-center position-relative mt-5 mb-2\">\n      <h3>{{ 'core.account.credentials.title' | translate}}</h3>\n    </div>\n    <ng-container *ngFor=\"let type of keycloakCredentials\">\n      <div class=\"container position-relative my-3\">\n        <h6>{{ ('core.account.credentials.'+type?.type) | translate }}</h6>\n        <button *ngIf=\"type.type === 'otp'\" 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      </div>\n      <rlb-list class=\"settings mb-5\">\n        <rlb-list-item class=\"settings-item\" *ngFor=\"let cred of type.userCredentialMetadatas\">\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                    <button *ngIf=\"type.removeable\" 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                    <button *ngIf=\"!type.removeable\" 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                  </dd>\n                </div>\n              </dl>\n            </div>\n          </div>\n        </rlb-list-item>\n        <rlb-list-item *ngIf=\"type.userCredentialMetadatas.length === 0\">\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      </rlb-list>\n    </ng-container>\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      <rlb-list-item class=\"settings-item\" *ngFor=\"let d of keyCloakDevices\">\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            <span *ngIf=\"d.current\" class=\"badge bg-success ms-3\">\n              <span class=\"badge-content\">\n                {{ 'core.account.session.current' | translate}}\n              </span>\n            </span>\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    </rlb-list>\n  </ng-container>\n</div>", styles: [".settings .settings-item .settings-control{width:40%}\n"], dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "component", type: i6.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: i6.ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: i6.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i6.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: "directive", type: i1$6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$6.DatePipe, name: "date" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", 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: "20.3.16", 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$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$6.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", 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          <rlb-input *ngIf=\"keyCloakUser\" size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.username\" disabled />\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          <rlb-input *ngIf=\"keyCloakUser\" size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.email\" />\n          <rlb-input *ngIf=\"!keyCloakUser\" size=\"small\" type=\"text\" readonly />\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          <rlb-input *ngIf=\"keyCloakUser\" size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.firstName\" />\n          <rlb-input *ngIf=\"!keyCloakUser\" size=\"small\" type=\"text\" readonly />\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          <rlb-input *ngIf=\"keyCloakUser\" size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.lastName\" />\n          <rlb-input *ngIf=\"!keyCloakUser\" size=\"small\" type=\"text\" readonly />\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  <ng-container *ngIf=\"keyCloakUser\">\n    <div class=\"container text-center position-relative mt-5 mb-2\">\n      <h3>{{ 'core.account.credentials.title' | translate}}</h3>\n    </div>\n    <ng-container *ngFor=\"let type of keycloakCredentials\">\n      <div class=\"container position-relative my-3\">\n        <h6>{{ ('core.account.credentials.'+type?.type) | translate }}</h6>\n        <button *ngIf=\"type.type === 'otp'\" 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      </div>\n      <rlb-list class=\"settings mb-5\">\n        <rlb-list-item class=\"settings-item\" *ngFor=\"let cred of type.userCredentialMetadatas\">\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                    <button *ngIf=\"type.removeable\" 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                    <button *ngIf=\"!type.removeable\" 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                  </dd>\n                </div>\n              </dl>\n            </div>\n          </div>\n        </rlb-list-item>\n        <rlb-list-item *ngIf=\"type.userCredentialMetadatas.length === 0\">\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      </rlb-list>\n    </ng-container>\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      <rlb-list-item class=\"settings-item\" *ngFor=\"let d of keyCloakDevices\">\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            <span *ngIf=\"d.current\" class=\"badge bg-success ms-3\">\n              <span class=\"badge-content\">\n                {{ 'core.account.session.current' | translate}}\n              </span>\n            </span>\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    </rlb-list>\n  </ng-container>\n</div>", styles: [".settings .settings-item .settings-control{width:40%}\n"] }]
-        }], ctorParameters: () => [{ type: i1$6.Location }, { type: i1$1.Store }, { type: KeycloakProfileService }, { type: i6.ModalService }, { type: LanguageService }, { type: AuthenticationService }, { type: i2.Router }] });
+            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"] }]
+        }], ctorParameters: () => [{ type: i1$6.Location }, { type: i1$1.Store }, { type: KeycloakProfileService }, { type: i2$1.ModalService }, { type: LanguageService }, { type: AuthenticationService }, { type: i2.Router }] });
 
 class SettingsCoreComponent {
     constructor(_location, toastService, languageService, store) {
@@ -2792,13 +2797,13 @@ class SettingsCoreComponent {
             ok: this.languageService.translate('ok'),
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SettingsCoreComponent, deps: [{ token: i1$6.Location }, { token: i6.ToastService }, { token: LanguageService }, { token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SettingsCoreComponent, isStandalone: true, selector: "rlb-settings-core", ngImport: i0, template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.settings.generalTitle' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n      (click)=\"backClicked()\" style=\"font-size: 25px;font-weight: 600;\"></i>\n  </div>\n  <rlb-list class=\"settings\">\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.settings.generalTheme' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          <rlb-switch size=\"small\" [(ngModel)]=\"darkMode\" class=\"mt-2\" />\n        </div>\n      </div>\n    </rlb-list-item>\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.settings.generalLanguage' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          <rlb-select size=\"small\" [(ngModel)]=\"currentLanguage\">\n            <rlb-option *ngFor=\"let l of languages\" [value]=\"l.value\">{{l.label}}</rlb-option>\n          </rlb-select>\n        </div>\n      </div>\n    </rlb-list-item>\n  </rlb-list>\n</div>\n", styles: [".settings .settings-item .settings-control{width:40%}.settings .settings-item .settings-control ::ng-deep rlb-switch .form-check{display:block;margin-left:auto}\n"], dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "component", type: i6.SwitchComponent, selector: "rlb-switch", inputs: ["disabled", "readonly", "size", "id"] }, { kind: "component", type: i6.SelectComponent, selector: "rlb-select", inputs: ["placeholder", "size", "disabled", "readonly", "multiple", "display", "id", "enable-validation"] }, { kind: "component", type: i6.OptionComponent, selector: "rlb-option", inputs: ["disabled", "value", "class"] }, { kind: "component", type: i6.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i6.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: "directive", type: i1$6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SettingsCoreComponent, deps: [{ token: i1$6.Location }, { token: i2$1.ToastService }, { token: LanguageService }, { token: i1$1.Store }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SettingsCoreComponent, isStandalone: true, selector: "rlb-settings-core", ngImport: i0, template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.settings.generalTitle' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n    (click)=\"backClicked()\" style=\"font-size: 25px;font-weight: 600;\"></i>\n  </div>\n  <rlb-list class=\"settings\">\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.settings.generalTheme' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          <rlb-switch size=\"small\" [(ngModel)]=\"darkMode\" class=\"mt-2\" />\n        </div>\n      </div>\n    </rlb-list-item>\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.settings.generalLanguage' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          <rlb-select size=\"small\" [(ngModel)]=\"currentLanguage\">\n            @for (l of languages; track l.value) {\n              <rlb-option [value]=\"l.value\">{{l.label}}</rlb-option>\n            }\n          </rlb-select>\n        </div>\n      </div>\n    </rlb-list-item>\n  </rlb-list>\n</div>\n", styles: [".settings .settings-item .settings-control{width:40%}.settings .settings-item .settings-control ::ng-deep rlb-switch .form-check{display:block;margin-left:auto}\n"], dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "component", type: i2$1.SwitchComponent, selector: "rlb-switch", inputs: ["disabled", "readonly", "size", "id"] }, { kind: "component", type: i2$1.SelectComponent, selector: "rlb-select", inputs: ["placeholder", "size", "disabled", "readonly", "multiple", "display", "id", "enable-validation"] }, { kind: "component", type: i2$1.OptionComponent, selector: "rlb-option", inputs: ["disabled", "value", "class"] }, { kind: "component", type: i2$1.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i2$1.ListItemComponent, selector: "rlb-list-item", inputs: ["active", "disabled", "action"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SettingsCoreComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-settings-core', imports: [RlbAppModule, CommonModule], template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.settings.generalTitle' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n      (click)=\"backClicked()\" style=\"font-size: 25px;font-weight: 600;\"></i>\n  </div>\n  <rlb-list class=\"settings\">\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.settings.generalTheme' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          <rlb-switch size=\"small\" [(ngModel)]=\"darkMode\" class=\"mt-2\" />\n        </div>\n      </div>\n    </rlb-list-item>\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.settings.generalLanguage' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          <rlb-select size=\"small\" [(ngModel)]=\"currentLanguage\">\n            <rlb-option *ngFor=\"let l of languages\" [value]=\"l.value\">{{l.label}}</rlb-option>\n          </rlb-select>\n        </div>\n      </div>\n    </rlb-list-item>\n  </rlb-list>\n</div>\n", styles: [".settings .settings-item .settings-control{width:40%}.settings .settings-item .settings-control ::ng-deep rlb-switch .form-check{display:block;margin-left:auto}\n"] }]
-        }], ctorParameters: () => [{ type: i1$6.Location }, { type: i6.ToastService }, { type: LanguageService }, { type: i1$1.Store }] });
+            args: [{ selector: 'rlb-settings-core', imports: [RlbAppModule], template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.settings.generalTitle' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n    (click)=\"backClicked()\" style=\"font-size: 25px;font-weight: 600;\"></i>\n  </div>\n  <rlb-list class=\"settings\">\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.settings.generalTheme' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          <rlb-switch size=\"small\" [(ngModel)]=\"darkMode\" class=\"mt-2\" />\n        </div>\n      </div>\n    </rlb-list-item>\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.settings.generalLanguage' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          <rlb-select size=\"small\" [(ngModel)]=\"currentLanguage\">\n            @for (l of languages; track l.value) {\n              <rlb-option [value]=\"l.value\">{{l.label}}</rlb-option>\n            }\n          </rlb-select>\n        </div>\n      </div>\n    </rlb-list-item>\n  </rlb-list>\n</div>\n", styles: [".settings .settings-item .settings-control{width:40%}.settings .settings-item .settings-control ::ng-deep rlb-switch .form-check{display:block;margin-left:auto}\n"] }]
+        }], ctorParameters: () => [{ type: i1$6.Location }, { type: i2$1.ToastService }, { type: LanguageService }, { type: i1$1.Store }] });
 
 class SettingsListComponent {
     constructor(_location, appsService, authService, pageOptions) {
@@ -2823,11 +2828,11 @@ class SettingsListComponent {
         return this.authService.isAuthenticated$;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SettingsListComponent, deps: [{ token: i1$6.Location }, { token: AppsService }, { token: AuthenticationService }, { token: RLB_CFG_PAGES, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SettingsListComponent, isStandalone: true, selector: "rlb-settings-list", ngImport: i0, template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.settings.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n      (click)=\"backClicked()\" style=\"font-size: 25px;font-weight: 600;\"></i>\n  </div>\n  <rlb-list>\n    <rlb-list-item-image icon=\"bi bi-gear\" [avatar-size]=\"35\" [line-1]=\" 'core.settings.generalTitle' | translate\"\n      [routerLink]=\"'/setting/general'\" [line-2]=\" 'core.settings.generalDescription' | translate\">\n    </rlb-list-item-image>\n    <ng-container ngProjectAs=\"rlb-list-item-image\" *ngFor=\"let app of apps\">\n      <ng-container ngProjectAs=\"rlb-list-item-image\" *ngIf=\"app.settings\">\n        <rlb-list-item-image [icon]=\"app.settings.icon\" [avatar-size]=\"35\"\n          [line-1]=\"(app.settings.title | translate) + (app.data?.appName ? ' - ' + app.data?.appName : '')\"\n          [disabled]=\"!app.enabled && (app.settings.auth && !(auth$ | async))\"\n          [line-2]=\"app.settings.description | translate\" (click)=\"selectApp(app)\">\n        </rlb-list-item-image>\n      </ng-container>\n    </ng-container>\n  </rlb-list>\n\n  <rlb-list class=\"mt-5\" *ngIf=\"pages?.['status']?.path || pages?.['logger']?.path\">\n    <rlb-list-item-image icon=\"bi bi-check2-circle\" *ngIf=\"pages?.['status']?.path\" [avatar-size]=\"18\"\n      [line-1]=\"'core.settings.status' | translate\" [routerLink]=\"'/status'\">\n    </rlb-list-item-image>\n    <rlb-list-item-image icon=\"bi bi-file-text\" *ngIf=\"pages?.['logger']?.path\" [avatar-size]=\"18\"\n      [line-1]=\"'core.settings.logger' | translate\" [routerLink]=\"'/logger'\">\n    </rlb-list-item-image>\n  </rlb-list>\n\n  <rlb-list class=\"mt-4\"\n    *ngIf=\"pages?.['privacy']?.path || pages?.['cookies']?.path || pages?.['terms']?.path || pages?.['support']?.path\">\n    <rlb-list-item-image icon=\"bi bi-shield-check\" *ngIf=\"pages?.['privacy']?.path\" [avatar-size]=\"18\"\n      [line-1]=\"'core.settings.privacy' | translate\" [routerLink]=\"'/privacy'\">\n    </rlb-list-item-image>\n    <rlb-list-item-image icon=\"bi bi bi-cookie\" *ngIf=\"pages?.['cookies']?.path\" [avatar-size]=\"18\"\n      [line-1]=\"'core.settings.cookies' | translate\" [routerLink]=\"'/cookies'\">\n    </rlb-list-item-image>\n    <rlb-list-item-image icon=\"bi bi-vector-pen\" *ngIf=\"pages?.['terms']?.path\" [avatar-size]=\"18\"\n      [line-1]=\"'core.settings.legal' | translate\" [routerLink]=\"'/terms'\">\n    </rlb-list-item-image>\n    <rlb-list-item-image icon=\"bi bi-chat-quote\" *ngIf=\"pages?.['support']?.path\" [avatar-size]=\"18\"\n      [line-1]=\" 'core.settings.support' | translate\" [routerLink]=\"'/support'\">\n    </rlb-list-item-image>\n  </rlb-list>\n</div>", styles: [".settings .settings-item .settings-control{width:40%}\n"], dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "component", type: i6.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i6.ListItemImageComponent, selector: "rlb-list-item-image", inputs: ["active", "disabled", "counter-empty", "counter-pill", "counter-border", "avatar-size", "username", "line-1", "line-2", "avatar", "counter", "counter-color", "icon"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SettingsListComponent, isStandalone: true, selector: "rlb-settings-list", ngImport: i0, template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.settings.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n    (click)=\"backClicked()\" style=\"font-size: 25px;font-weight: 600;\"></i>\n  </div>\n  <rlb-list>\n    <rlb-list-item-image icon=\"bi bi-gear\" [avatar-size]=\"35\" [line-1]=\" 'core.settings.generalTitle' | translate\"\n      [routerLink]=\"'/setting/general'\" [line-2]=\" 'core.settings.generalDescription' | translate\">\n    </rlb-list-item-image>\n    @for (app of apps; track app.id) {\n      <ng-container ngProjectAs=\"rlb-list-item-image\">\n        @if (app.settings) {\n          <ng-container ngProjectAs=\"rlb-list-item-image\">\n            <rlb-list-item-image [icon]=\"app.settings.icon\" [avatar-size]=\"35\"\n              [line-1]=\"(app.settings.title | translate) + (app.data?.appName ? ' - ' + app.data?.appName : '')\"\n              [disabled]=\"!app.enabled && (app.settings.auth && !(auth$ | async))\"\n              [line-2]=\"app.settings.description | translate\" (click)=\"selectApp(app)\">\n            </rlb-list-item-image>\n          </ng-container>\n        }\n      </ng-container>\n    }\n  </rlb-list>\n\n  @if (pages?.['status']?.path || pages?.['logger']?.path) {\n    <rlb-list class=\"mt-5\">\n      @if (pages?.['status']?.path) {\n        <rlb-list-item-image icon=\"bi bi-check2-circle\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.status' | translate\" [routerLink]=\"'/status'\">\n        </rlb-list-item-image>\n      }\n      @if (pages?.['logger']?.path) {\n        <rlb-list-item-image icon=\"bi bi-file-text\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.logger' | translate\" [routerLink]=\"'/logger'\">\n        </rlb-list-item-image>\n      }\n    </rlb-list>\n  }\n\n  @if (pages?.['privacy']?.path || pages?.['cookies']?.path || pages?.['terms']?.path || pages?.['support']?.path) {\n    <rlb-list class=\"mt-4\"\n      >\n      @if (pages?.['privacy']?.path) {\n        <rlb-list-item-image icon=\"bi bi-shield-check\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.privacy' | translate\" [routerLink]=\"'/privacy'\">\n        </rlb-list-item-image>\n      }\n      @if (pages?.['cookies']?.path) {\n        <rlb-list-item-image icon=\"bi bi bi-cookie\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.cookies' | translate\" [routerLink]=\"'/cookies'\">\n        </rlb-list-item-image>\n      }\n      @if (pages?.['terms']?.path) {\n        <rlb-list-item-image icon=\"bi bi-vector-pen\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.legal' | translate\" [routerLink]=\"'/terms'\">\n        </rlb-list-item-image>\n      }\n      @if (pages?.['support']?.path) {\n        <rlb-list-item-image icon=\"bi bi-chat-quote\" [avatar-size]=\"18\"\n          [line-1]=\" 'core.settings.support' | translate\" [routerLink]=\"'/support'\">\n        </rlb-list-item-image>\n      }\n    </rlb-list>\n  }\n</div>\n", styles: [".settings .settings-item .settings-control{width:40%}\n"], dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "component", type: i2$1.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i2$1.ListItemImageComponent, selector: "rlb-list-item-image", inputs: ["active", "disabled", "counter-empty", "counter-pill", "counter-border", "avatar-size", "username", "line-1", "line-2", "avatar", "counter", "counter-color", "icon"] }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$2.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$6.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SettingsListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-settings-list', imports: [RlbAppModule, CommonModule], template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.settings.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n      (click)=\"backClicked()\" style=\"font-size: 25px;font-weight: 600;\"></i>\n  </div>\n  <rlb-list>\n    <rlb-list-item-image icon=\"bi bi-gear\" [avatar-size]=\"35\" [line-1]=\" 'core.settings.generalTitle' | translate\"\n      [routerLink]=\"'/setting/general'\" [line-2]=\" 'core.settings.generalDescription' | translate\">\n    </rlb-list-item-image>\n    <ng-container ngProjectAs=\"rlb-list-item-image\" *ngFor=\"let app of apps\">\n      <ng-container ngProjectAs=\"rlb-list-item-image\" *ngIf=\"app.settings\">\n        <rlb-list-item-image [icon]=\"app.settings.icon\" [avatar-size]=\"35\"\n          [line-1]=\"(app.settings.title | translate) + (app.data?.appName ? ' - ' + app.data?.appName : '')\"\n          [disabled]=\"!app.enabled && (app.settings.auth && !(auth$ | async))\"\n          [line-2]=\"app.settings.description | translate\" (click)=\"selectApp(app)\">\n        </rlb-list-item-image>\n      </ng-container>\n    </ng-container>\n  </rlb-list>\n\n  <rlb-list class=\"mt-5\" *ngIf=\"pages?.['status']?.path || pages?.['logger']?.path\">\n    <rlb-list-item-image icon=\"bi bi-check2-circle\" *ngIf=\"pages?.['status']?.path\" [avatar-size]=\"18\"\n      [line-1]=\"'core.settings.status' | translate\" [routerLink]=\"'/status'\">\n    </rlb-list-item-image>\n    <rlb-list-item-image icon=\"bi bi-file-text\" *ngIf=\"pages?.['logger']?.path\" [avatar-size]=\"18\"\n      [line-1]=\"'core.settings.logger' | translate\" [routerLink]=\"'/logger'\">\n    </rlb-list-item-image>\n  </rlb-list>\n\n  <rlb-list class=\"mt-4\"\n    *ngIf=\"pages?.['privacy']?.path || pages?.['cookies']?.path || pages?.['terms']?.path || pages?.['support']?.path\">\n    <rlb-list-item-image icon=\"bi bi-shield-check\" *ngIf=\"pages?.['privacy']?.path\" [avatar-size]=\"18\"\n      [line-1]=\"'core.settings.privacy' | translate\" [routerLink]=\"'/privacy'\">\n    </rlb-list-item-image>\n    <rlb-list-item-image icon=\"bi bi bi-cookie\" *ngIf=\"pages?.['cookies']?.path\" [avatar-size]=\"18\"\n      [line-1]=\"'core.settings.cookies' | translate\" [routerLink]=\"'/cookies'\">\n    </rlb-list-item-image>\n    <rlb-list-item-image icon=\"bi bi-vector-pen\" *ngIf=\"pages?.['terms']?.path\" [avatar-size]=\"18\"\n      [line-1]=\"'core.settings.legal' | translate\" [routerLink]=\"'/terms'\">\n    </rlb-list-item-image>\n    <rlb-list-item-image icon=\"bi bi-chat-quote\" *ngIf=\"pages?.['support']?.path\" [avatar-size]=\"18\"\n      [line-1]=\" 'core.settings.support' | translate\" [routerLink]=\"'/support'\">\n    </rlb-list-item-image>\n  </rlb-list>\n</div>", styles: [".settings .settings-item .settings-control{width:40%}\n"] }]
+            args: [{ selector: 'rlb-settings-list', imports: [RlbAppModule, CommonModule], template: "<div class=\"container mt-2\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.settings.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n    (click)=\"backClicked()\" style=\"font-size: 25px;font-weight: 600;\"></i>\n  </div>\n  <rlb-list>\n    <rlb-list-item-image icon=\"bi bi-gear\" [avatar-size]=\"35\" [line-1]=\" 'core.settings.generalTitle' | translate\"\n      [routerLink]=\"'/setting/general'\" [line-2]=\" 'core.settings.generalDescription' | translate\">\n    </rlb-list-item-image>\n    @for (app of apps; track app.id) {\n      <ng-container ngProjectAs=\"rlb-list-item-image\">\n        @if (app.settings) {\n          <ng-container ngProjectAs=\"rlb-list-item-image\">\n            <rlb-list-item-image [icon]=\"app.settings.icon\" [avatar-size]=\"35\"\n              [line-1]=\"(app.settings.title | translate) + (app.data?.appName ? ' - ' + app.data?.appName : '')\"\n              [disabled]=\"!app.enabled && (app.settings.auth && !(auth$ | async))\"\n              [line-2]=\"app.settings.description | translate\" (click)=\"selectApp(app)\">\n            </rlb-list-item-image>\n          </ng-container>\n        }\n      </ng-container>\n    }\n  </rlb-list>\n\n  @if (pages?.['status']?.path || pages?.['logger']?.path) {\n    <rlb-list class=\"mt-5\">\n      @if (pages?.['status']?.path) {\n        <rlb-list-item-image icon=\"bi bi-check2-circle\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.status' | translate\" [routerLink]=\"'/status'\">\n        </rlb-list-item-image>\n      }\n      @if (pages?.['logger']?.path) {\n        <rlb-list-item-image icon=\"bi bi-file-text\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.logger' | translate\" [routerLink]=\"'/logger'\">\n        </rlb-list-item-image>\n      }\n    </rlb-list>\n  }\n\n  @if (pages?.['privacy']?.path || pages?.['cookies']?.path || pages?.['terms']?.path || pages?.['support']?.path) {\n    <rlb-list class=\"mt-4\"\n      >\n      @if (pages?.['privacy']?.path) {\n        <rlb-list-item-image icon=\"bi bi-shield-check\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.privacy' | translate\" [routerLink]=\"'/privacy'\">\n        </rlb-list-item-image>\n      }\n      @if (pages?.['cookies']?.path) {\n        <rlb-list-item-image icon=\"bi bi bi-cookie\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.cookies' | translate\" [routerLink]=\"'/cookies'\">\n        </rlb-list-item-image>\n      }\n      @if (pages?.['terms']?.path) {\n        <rlb-list-item-image icon=\"bi bi-vector-pen\" [avatar-size]=\"18\"\n          [line-1]=\"'core.settings.legal' | translate\" [routerLink]=\"'/terms'\">\n        </rlb-list-item-image>\n      }\n      @if (pages?.['support']?.path) {\n        <rlb-list-item-image icon=\"bi bi-chat-quote\" [avatar-size]=\"18\"\n          [line-1]=\" 'core.settings.support' | translate\" [routerLink]=\"'/support'\">\n        </rlb-list-item-image>\n      }\n    </rlb-list>\n  }\n</div>\n", styles: [".settings .settings-item .settings-control{width:40%}\n"] }]
         }], ctorParameters: () => [{ type: i1$6.Location }, { type: AppsService }, { type: AuthenticationService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [RLB_CFG_PAGES]
@@ -2999,7 +3004,7 @@ class ToastComponent {
         this.valid = true;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ToastComponent, isStandalone: true, selector: "ng-component", hostDirectives: [{ directive: i6.ToastDirective, inputs: ["id", "id", "data-instance", "data-instance", "data-options", "data-options"] }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ToastComponent, isStandalone: true, selector: "ng-component", hostDirectives: [{ directive: i2$1.ToastDirective, inputs: ["id", "id", "data-instance", "data-instance", "data-options", "data-options"] }], ngImport: i0, template: `
     <div class="toast-header">
       <strong class="me-auto">
         <svg
@@ -3010,12 +3015,14 @@ class ToastComponent {
           aria-hidden="true"
           preserveAspectRatio="xMidYMid slice"
           focusable="false"
-        >
+          >
           <rect width="100%" height="100%" fill="#007aff"></rect>
         </svg>
         {{ data.title }}
       </strong>
-      <small *ngIf="data.subtitle"> {{ data.subtitle }}</small>
+      @if (data.subtitle) {
+        <small> {{ data.subtitle }}</small>
+      }
       <button
         type="button"
         class="btn-close"
@@ -3024,12 +3031,12 @@ class ToastComponent {
       ></button>
     </div>
     <div class="toast-body">{{ data.content }}</div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
+    `, isInline: true, dependencies: [{ kind: "ngmodule", type: RlbAppModule }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
             args: [{
-                    imports: [RlbAppModule, CommonModule],
+                    imports: [RlbAppModule],
                     template: `
     <div class="toast-header">
       <strong class="me-auto">
@@ -3041,12 +3048,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
           aria-hidden="true"
           preserveAspectRatio="xMidYMid slice"
           focusable="false"
-        >
+          >
           <rect width="100%" height="100%" fill="#007aff"></rect>
         </svg>
         {{ data.title }}
       </strong>
-      <small *ngIf="data.subtitle"> {{ data.subtitle }}</small>
+      @if (data.subtitle) {
+        <small> {{ data.subtitle }}</small>
+      }
       <button
         type="button"
         class="btn-close"
@@ -3055,7 +3064,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
       ></button>
     </div>
     <div class="toast-body">{{ data.content }}</div>
-  `,
+    `,
                     hostDirectives: [
                         {
                             directive: ToastDirective,