@open-rlb/ng-app 3.1.69 → 3.1.70

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

@@ -3135,11 +3135,11 @@ class UserAccountComponent {
         this.keycloakProfileService.configureOTP();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: UserAccountComponent, deps: [{ token: i1$6.Location }, { token: i1$1.Store }, { token: KeycloakProfileService }, { token: i2$1.ModalService }, { token: LanguageService }, { token: AuthenticationService }, { token: i2.Router }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: UserAccountComponent, isStandalone: true, selector: "rlb-user-account", ngImport: i0, template: "<div class=\"container mt-2 mb-5\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.account.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n    style=\"font-size: 25px;font-weight: 600;\" (click)=\"backClicked()\"></i>\n    <button rlb-button outline size=\"sm\" class=\"position-absolute end-0 top-50 translate-middle-y\"\n      (click)=\"updateProfile()\">\n      <i class=\"bi bi-floppy\"></i>\n    </button>\n  </div>\n  <rlb-list class=\"settings\">\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.account.username' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          @if (keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.username\" disabled />\n          }\n        </div>\n      </div>\n    </rlb-list-item>\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.account.email' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          @if (keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.email\" />\n          }\n          @if (!keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" readonly />\n          }\n        </div>\n      </div>\n    </rlb-list-item>\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.account.firstName' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          @if (keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.firstName\" />\n          }\n          @if (!keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" readonly />\n          }\n        </div>\n      </div>\n    </rlb-list-item>\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.account.lastName' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          @if (keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.lastName\" />\n          }\n          @if (!keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" readonly />\n          }\n        </div>\n      </div>\n    </rlb-list-item>\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.account.logout' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          <button size=\"sm\" rlb-button (click)=\"logout()\" class=\"w-100\">\n            <i class=\"bi bi-box-arrow-right\"></i>\n          {{ 'core.account.logout' | translate}}</button>\n        </div>\n      </div>\n    </rlb-list-item>\n  </rlb-list>\n  @if (keyCloakUser) {\n    <div class=\"container text-center position-relative mt-5 mb-2\">\n      <h3>{{ 'core.account.credentials.title' | translate}}</h3>\n    </div>\n    @for (type of keycloakCredentials; track type) {\n      <div class=\"container position-relative my-3\">\n        <h6>{{ ('core.account.credentials.'+type?.type) | translate }}</h6>\n        @if (type.type === 'otp') {\n          <button rlb-button size=\"sm\"\n            class=\"position-absolute end-0 top-50 translate-middle-y\" (click)=\"configureOTP()\">\n            {{ 'core.account.credentials.addOTP' | translate}}\n          </button>\n        }\n      </div>\n      <rlb-list class=\"settings mb-5\">\n        @for (cred of type.userCredentialMetadatas; track cred.credential.id) {\n          <rlb-list-item class=\"settings-item\">\n            <div class=\"row\">\n              <div class=\"col-12\">\n                <dl class=\"row signed-in-device-grid\">\n                  <div class=\"col-md-1\">\n                    <i class=\"bi bi-key\" style=\"font-size: 35px;\"></i>\n                  </div>\n                  <div class=\"col-md-5\">\n                    <dt>\n                      <span class=\"text-muted\">\n                        {{ 'core.account.credentials.name' | translate }}\n                      </span>\n                    </dt>\n                    <dd>{{cred.credential.userLabel || cred.credential.type}}</dd>\n                  </div>\n                  <div class=\"col-md-4\">\n                    <dt>\n                      <span class=\"text-muted\">\n                        {{'core.account.credentials.created' | translate}}\n                      </span>\n                    </dt>\n                    <dd>{{cred.credential.createdDate | date:'dd:MM:yyyy HH:mm' }}</dd>\n                  </div>\n                  <div class=\"col-md-2\">\n                    <dt><span class=\"text-muted\">{{'core.account.credentials.actions' |\n                    translate}}</span></dt>\n                    <dd>\n                      @if (type.removeable) {\n                        <button size=\"sm\" rlb-button class=\"w-100\" color=\"danger\"\n                          (click)=\"removeCredential(type.type, cred.credential.id)\">\n                          <i class=\"bi bi-trash\"></i>\n                          {{ 'core.account.credentials.delete' | translate}}\n                        </button>\n                      }\n                      @if (!type.removeable) {\n                        <button size=\"sm\" rlb-button class=\"w-100\" outline\n                          (click)=\"updatePassword()\">\n                          <i class=\"bi bi-trash\"></i>\n                          {{ 'core.account.credentials.update' | translate}}\n                        </button>\n                      }\n                    </dd>\n                  </div>\n                </dl>\n              </div>\n            </div>\n          </rlb-list-item>\n        }\n        @if (type.userCredentialMetadatas.length === 0) {\n          <rlb-list-item>\n            <div class=\"d-flex justify-content-center\">\n              <div class=\"settings-text\">\n                <h6 class=\"mt-1\">{{ 'core.account.credentials.noCredentials' | translate}}</h6>\n              </div>\n            </div>\n          </rlb-list-item>\n        }\n      </rlb-list>\n    }\n    <div class=\"container text-center position-relative mt-5 mb-3\">\n      <h3>{{ 'core.account.session.title' | translate}}</h3>\n    </div>\n    <rlb-list class=\"settings\">\n      @for (d of keyCloakDevices; track d.id) {\n        <rlb-list-item class=\"settings-item\">\n          <div class=\"row mb-2\">\n            <div class=\"col-1\">\n              <i class=\"bi bi-laptop\" style=\"font-size: 35px;\"></i>\n            </div>\n            <div class=\"col-11\">\n              <span class=\"session-title\">{{d.os}} {{d.osVersion}} - {{d.browser}}</span>\n              @if (d.current) {\n                <span class=\"badge bg-success ms-3\">\n                  <span class=\"badge-content\">\n                    {{ 'core.account.session.current' | translate}}\n                  </span>\n                </span>\n              }\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-12\">\n              <dl class=\"row signed-in-device-grid\">\n                <div class=\" col-md-1\">\n                </div>\n                <div class=\" col-md-2\">\n                  <dt><span class=\"text-muted\">{{ 'core.account.session.ip' | translate }}</span>\n                </dt>\n                <dd>{{d.ipAddress}}</dd>\n              </div>\n              <div class=\"col-md-2\">\n                <dt>\n                  <span class=\"text-muted\">\n                    {{'core.account.session.lastAccess' | translate}}\n                  </span>\n                </dt>\n                <dd>{{d.lastAccess*1000 | date:'dd/MM/yyyy - HH:mm'}}</dd>\n              </div>\n              <div class=\"col-md-2\">\n                <dt><span class=\"text-muted\">{{'core.account.session.applications' |\n                translate}}</span></dt>\n                <dd>{{d.clientslist }} </dd>\n              </div>\n              <div class=\"col-md-2\">\n                <dt><span class=\"text-muted\">{{'core.account.session.started' |\n                translate}}</span></dt>\n                <dd>{{d.started*1000 | date:'dd/MM/yyyy - HH:mm'}}</dd>\n              </div>\n              <div class=\"col-md-2\">\n                <dt><span class=\"text-muted\">{{'core.account.session.expires' |\n                translate}}</span></dt>\n                <dd>{{d.expires*1000 | date:'dd/MM/yyyy - HH:mm'}}</dd>\n              </div>\n            </dl>\n          </div>\n        </div>\n      </rlb-list-item>\n    }\n  </rlb-list>\n}\n</div>\n", styles: [".settings .settings-item .settings-control{width:40%}\n"], dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "component", type: i2$1.InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "before-text", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "id", "extValidation", "enable-validation"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: i2$1.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i2$1.ListItemComponent, selector: "rlb-list-item", inputs: ["active", "disabled", "action"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$6.DatePipe, name: "date" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.5", type: UserAccountComponent, isStandalone: true, selector: "rlb-user-account", ngImport: i0, template: "<div class=\"container mt-4 mb-5\">\n\n  <div class=\"d-flex align-items-center justify-content-between\">\n    <h3 class=\"m-0\">{{\"Account settings\"|translate|uppercase}}</h3>\n    <rlb-breadcrumb [cssClasses]=\"'p-0 px-md-1 py-md-2 m-0'\" [items]=\"[{ label: 'Home', link: '/', id: '1' },{ label: 'Account settings', id: '2' }]\" class=\"d-block\"></rlb-breadcrumb>\n  </div>\n\n  <!-- ACCOUNT DETAILS CARD  -->\n  <rlb-card class=\"mt-3\">\n    <rlb-card-header class=\"d-flex justify-content-between align-items-center py-3 px-4\">\n      <h5 class=\"m-0\">{{\"Account\" | translate}}</h5>\n    </rlb-card-header>\n\n    <rlb-card-body class=\"px-4 py-4\">\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.username' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser) {\n            <rlb-input class=\"w-100\"  type=\"text\" [(ngModel)]=\"keyCloakUser.username\" disabled />\n          }\n        </div>\n      </div>\n\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.email' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser) {\n            <rlb-input class=\"w-100\"  type=\"text\" [(ngModel)]=\"keyCloakUser.email\" />\n          } @else {\n            <rlb-input class=\"w-100\"  type=\"text\" readonly />\n          }\n        </div>\n      </div>\n\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.firstName' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser) {\n            <rlb-input class=\"w-100\"  type=\"text\" [(ngModel)]=\"keyCloakUser.firstName\" />\n          } @else {\n            <rlb-input class=\"w-100\"  type=\"text\" readonly />\n          }\n        </div>\n      </div>\n\n      <div class=\"row align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.lastName' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser) {\n            <rlb-input class=\"w-100\" type=\"text\" [(ngModel)]=\"keyCloakUser.lastName\" />\n          } @else {\n            <rlb-input class=\"w-100\" type=\"text\" readonly />\n          }\n        </div>\n      </div>\n    </rlb-card-body>\n\n    <rlb-card-footer>\n      <div class=\"d-flex align-items-center justify-content-end gap-2\">\n        <button rlb-button outline (click)=\"updateProfile()\">\n          <i class=\"bi bi-floppy\"></i>\n          {{'common.save' | translate}}\n        </button>\n        <button rlb-button outline color=\"danger\" (click)=\"logout()\">\n          <i class=\"bi bi-box-arrow-right\"></i>\n          {{'core.account.logout' | translate}}\n        </button>\n      </div>\n    </rlb-card-footer>\n  </rlb-card>\n\n  <!-- CREDENTIALS SECTION -->\n  @if (keyCloakUser) {\n    <h3 class=\"mb-4 text-center mt-5\">{{ 'core.account.credentials.title' | translate}}</h3>\n\n    @for (type of keycloakCredentials; track type) {\n      <rlb-card class=\"mb-4\">\n\n        <rlb-card-header class=\"d-flex justify-content-between align-items-center py-3 px-4\">\n          <h6 class=\"mb-0 fw-bold\">{{ ('core.account.credentials.'+type?.type) | translate }}</h6>\n          @if (type.type === 'otp') {\n            <rlb-fab (click)=\"configureOTP()\" size=\"sm\" [tooltip]=\"'core.account.credentials.addOTP' | translate\">\n              <i class=\"bi bi-plus-circle\"></i>\n            </rlb-fab>\n          }\n        </rlb-card-header>\n\n        <rlb-card-body>\n          <rlb-list class=\"settings m-0\">\n            @for (cred of type.userCredentialMetadatas; track cred.credential.id) {\n              <rlb-list-item class=\"px-4 py-3\">\n                <div class=\"row align-items-center w-100\">\n                  <div class=\"col-md-1 text-center mb-2 mb-md-0\">\n                    <i class=\"bi bi-key text-secondary\" style=\"font-size: 2rem;\"></i>\n                  </div>\n                  <div class=\"col-md-5 mb-2 mb-md-0\">\n                    <span class=\"text-muted small d-block\">{{ 'core.account.credentials.name' | translate }}</span>\n                    <span class=\"fw-semibold\">{{cred.credential.userLabel || cred.credential.type}}</span>\n                  </div>\n                  <div class=\"col-md-4 mb-3 mb-md-0\">\n                    <span class=\"text-muted small d-block\">{{'core.account.credentials.created' | translate}}</span>\n                    <span>{{cred.credential.createdDate | date:'dd:MM:yyyy HH:mm' }}</span>\n                  </div>\n                  <div class=\"col-md-2 text-md-end\">\n                    @if (type.removeable) {\n                      <button rlb-button class=\"w-100\" color=\"danger\" (click)=\"removeCredential(type.type, cred.credential.id)\">\n                        <i class=\"bi bi-trash\"></i> {{ 'core.account.credentials.delete' | translate}}\n                      </button>\n                    } @else {\n                      <button rlb-button class=\"w-100\" outline (click)=\"updatePassword()\">\n                        <i class=\"bi bi-pencil-square\"></i> {{ 'core.account.credentials.update' | translate}}\n                      </button>\n                    }\n                  </div>\n                </div>\n              </rlb-list-item>\n            }\n\n            @if (type.userCredentialMetadatas.length === 0) {\n              <div class=\"py-4 text-center text-muted\">\n                {{ 'core.account.credentials.noCredentials' | translate}}\n              </div>\n            }\n          </rlb-list>\n        </rlb-card-body>\n      </rlb-card>\n    }\n\n      <!-- SESSION SECTION -->\n    <h3 class=\"mb-4 text-center mt-5\">{{ 'core.account.session.title' | translate}}</h3>\n\n    <rlb-card border=\"secondary\" class=\"mb-5\">\n      <rlb-card-body class=\"p-0\">\n        <rlb-list class=\"settings m-0\">\n          @for (d of keyCloakDevices; track d.id) {\n            <rlb-list-item class=\"settings-item px-4 py-4\">\n\n              <!-- Session Top Row (Device Info) -->\n              <div class=\"d-flex align-items-center pb-3 mb-3\">\n                <i class=\"bi bi-laptop text-secondary me-3\" style=\"font-size: 2rem;\"></i>\n                <h6 class=\"mb-0 fw-bold\">{{d.os}} {{d.osVersion}} - {{d.browser}}</h6>\n                @if (d.current) {\n                  <span class=\"badge bg-success ms-3 rounded-pill px-3 py-2\">\n                    {{ 'core.account.session.current' | translate}}\n                  </span>\n                }\n              </div>\n\n              <div class=\"row text-center text-md-start gy-3\">\n                <div class=\"col-sm-6 col-md-3\">\n                  <span class=\"text-muted small d-block\">{{ 'core.account.session.ip' | translate }}</span>\n                  <span class=\"fw-medium\">{{d.ipAddress}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-3\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.lastAccess' | translate}}</span>\n                  <span>{{d.lastAccess*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.applications' | translate}}</span>\n                  <span>{{d.clientslist }} </span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.started' | translate}}</span>\n                  <span>{{d.started*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.expires' | translate}}</span>\n                  <span>{{d.expires*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n              </div>\n            </rlb-list-item>\n          }\n        </rlb-list>\n      </rlb-card-body>\n    </rlb-card>\n  }\n</div>\n", styles: [".settings .settings-item .settings-control{width:40%}\n"], dependencies: [{ kind: "ngmodule", type: RlbAppModule }, { kind: "component", type: i2$1.InputComponent, selector: "rlb-input", inputs: ["disabled", "readonly", "before-text", "placeholder", "type", "size", "name", "max", "min", "step", "date-type", "timezone", "id", "extValidation", "enable-validation"] }, { kind: "component", type: i2$1.BreadcrumbComponent, selector: "rlb-breadcrumb", inputs: ["divider", "items", "cssClasses"] }, { kind: "component", type: i2$1.ButtonComponent, selector: "button[rlb-button], a[rlb-button]", inputs: ["color", "size", "disabled", "outline", "isLink"] }, { kind: "component", type: i2$1.RlbFabComponent, selector: "rlb-fab", inputs: ["color", "size", "disabled", "outline", "position"] }, { kind: "component", type: i2$1.CardBodyComponent, selector: "rlb-card-body" }, { kind: "component", type: i2$1.CardFooterComponent, selector: "rlb-card-footer" }, { kind: "component", type: i2$1.CardHeaderComponent, selector: "rlb-card-header" }, { kind: "component", type: i2$1.CardComponent, selector: "rlb-card", inputs: ["align", "overlay", "background", "border"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[tooltip]", inputs: ["tooltip", "tooltip-placement", "tooltip-class", "tooltip-html"] }, { kind: "component", type: i2$1.ListComponent, selector: "rlb-list", inputs: ["disabled", "numbered", "flush", "horizontal"] }, { kind: "component", type: i2$1.ListItemComponent, selector: "rlb-list-item", inputs: ["active", "disabled", "action"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$3.TranslatePipe, name: "translate" }, { kind: "pipe", type: i1$6.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1$6.DatePipe, name: "date" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.5", ngImport: i0, type: UserAccountComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'rlb-user-account', imports: [RlbAppModule, CommonModule], template: "<div class=\"container mt-2 mb-5\">\n  <div class=\"container text-center position-relative my-3\">\n    <h3>{{ 'core.account.title' | translate}}</h3>\n    <i role=\"button\" class=\"bi bi-chevron-left position-absolute start-0 top-50 translate-middle-y\"\n    style=\"font-size: 25px;font-weight: 600;\" (click)=\"backClicked()\"></i>\n    <button rlb-button outline size=\"sm\" class=\"position-absolute end-0 top-50 translate-middle-y\"\n      (click)=\"updateProfile()\">\n      <i class=\"bi bi-floppy\"></i>\n    </button>\n  </div>\n  <rlb-list class=\"settings\">\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.account.username' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          @if (keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.username\" disabled />\n          }\n        </div>\n      </div>\n    </rlb-list-item>\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.account.email' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          @if (keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.email\" />\n          }\n          @if (!keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" readonly />\n          }\n        </div>\n      </div>\n    </rlb-list-item>\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.account.firstName' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          @if (keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.firstName\" />\n          }\n          @if (!keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" readonly />\n          }\n        </div>\n      </div>\n    </rlb-list-item>\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.account.lastName' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          @if (keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" [(ngModel)]=\"keyCloakUser.lastName\" />\n          }\n          @if (!keyCloakUser) {\n            <rlb-input size=\"small\" type=\"text\" readonly />\n          }\n        </div>\n      </div>\n    </rlb-list-item>\n    <rlb-list-item class=\"settings-item\">\n      <div class=\"d-flex justify-content-between\">\n        <div class=\"settings-text\">\n          <h6 class=\"mt-1\">{{ 'core.account.logout' | translate}}</h6>\n        </div>\n        <div class=\"settings-control\">\n          <button size=\"sm\" rlb-button (click)=\"logout()\" class=\"w-100\">\n            <i class=\"bi bi-box-arrow-right\"></i>\n          {{ 'core.account.logout' | translate}}</button>\n        </div>\n      </div>\n    </rlb-list-item>\n  </rlb-list>\n  @if (keyCloakUser) {\n    <div class=\"container text-center position-relative mt-5 mb-2\">\n      <h3>{{ 'core.account.credentials.title' | translate}}</h3>\n    </div>\n    @for (type of keycloakCredentials; track type) {\n      <div class=\"container position-relative my-3\">\n        <h6>{{ ('core.account.credentials.'+type?.type) | translate }}</h6>\n        @if (type.type === 'otp') {\n          <button rlb-button size=\"sm\"\n            class=\"position-absolute end-0 top-50 translate-middle-y\" (click)=\"configureOTP()\">\n            {{ 'core.account.credentials.addOTP' | translate}}\n          </button>\n        }\n      </div>\n      <rlb-list class=\"settings mb-5\">\n        @for (cred of type.userCredentialMetadatas; track cred.credential.id) {\n          <rlb-list-item class=\"settings-item\">\n            <div class=\"row\">\n              <div class=\"col-12\">\n                <dl class=\"row signed-in-device-grid\">\n                  <div class=\"col-md-1\">\n                    <i class=\"bi bi-key\" style=\"font-size: 35px;\"></i>\n                  </div>\n                  <div class=\"col-md-5\">\n                    <dt>\n                      <span class=\"text-muted\">\n                        {{ 'core.account.credentials.name' | translate }}\n                      </span>\n                    </dt>\n                    <dd>{{cred.credential.userLabel || cred.credential.type}}</dd>\n                  </div>\n                  <div class=\"col-md-4\">\n                    <dt>\n                      <span class=\"text-muted\">\n                        {{'core.account.credentials.created' | translate}}\n                      </span>\n                    </dt>\n                    <dd>{{cred.credential.createdDate | date:'dd:MM:yyyy HH:mm' }}</dd>\n                  </div>\n                  <div class=\"col-md-2\">\n                    <dt><span class=\"text-muted\">{{'core.account.credentials.actions' |\n                    translate}}</span></dt>\n                    <dd>\n                      @if (type.removeable) {\n                        <button size=\"sm\" rlb-button class=\"w-100\" color=\"danger\"\n                          (click)=\"removeCredential(type.type, cred.credential.id)\">\n                          <i class=\"bi bi-trash\"></i>\n                          {{ 'core.account.credentials.delete' | translate}}\n                        </button>\n                      }\n                      @if (!type.removeable) {\n                        <button size=\"sm\" rlb-button class=\"w-100\" outline\n                          (click)=\"updatePassword()\">\n                          <i class=\"bi bi-trash\"></i>\n                          {{ 'core.account.credentials.update' | translate}}\n                        </button>\n                      }\n                    </dd>\n                  </div>\n                </dl>\n              </div>\n            </div>\n          </rlb-list-item>\n        }\n        @if (type.userCredentialMetadatas.length === 0) {\n          <rlb-list-item>\n            <div class=\"d-flex justify-content-center\">\n              <div class=\"settings-text\">\n                <h6 class=\"mt-1\">{{ 'core.account.credentials.noCredentials' | translate}}</h6>\n              </div>\n            </div>\n          </rlb-list-item>\n        }\n      </rlb-list>\n    }\n    <div class=\"container text-center position-relative mt-5 mb-3\">\n      <h3>{{ 'core.account.session.title' | translate}}</h3>\n    </div>\n    <rlb-list class=\"settings\">\n      @for (d of keyCloakDevices; track d.id) {\n        <rlb-list-item class=\"settings-item\">\n          <div class=\"row mb-2\">\n            <div class=\"col-1\">\n              <i class=\"bi bi-laptop\" style=\"font-size: 35px;\"></i>\n            </div>\n            <div class=\"col-11\">\n              <span class=\"session-title\">{{d.os}} {{d.osVersion}} - {{d.browser}}</span>\n              @if (d.current) {\n                <span class=\"badge bg-success ms-3\">\n                  <span class=\"badge-content\">\n                    {{ 'core.account.session.current' | translate}}\n                  </span>\n                </span>\n              }\n            </div>\n          </div>\n          <div class=\"row\">\n            <div class=\"col-12\">\n              <dl class=\"row signed-in-device-grid\">\n                <div class=\" col-md-1\">\n                </div>\n                <div class=\" col-md-2\">\n                  <dt><span class=\"text-muted\">{{ 'core.account.session.ip' | translate }}</span>\n                </dt>\n                <dd>{{d.ipAddress}}</dd>\n              </div>\n              <div class=\"col-md-2\">\n                <dt>\n                  <span class=\"text-muted\">\n                    {{'core.account.session.lastAccess' | translate}}\n                  </span>\n                </dt>\n                <dd>{{d.lastAccess*1000 | date:'dd/MM/yyyy - HH:mm'}}</dd>\n              </div>\n              <div class=\"col-md-2\">\n                <dt><span class=\"text-muted\">{{'core.account.session.applications' |\n                translate}}</span></dt>\n                <dd>{{d.clientslist }} </dd>\n              </div>\n              <div class=\"col-md-2\">\n                <dt><span class=\"text-muted\">{{'core.account.session.started' |\n                translate}}</span></dt>\n                <dd>{{d.started*1000 | date:'dd/MM/yyyy - HH:mm'}}</dd>\n              </div>\n              <div class=\"col-md-2\">\n                <dt><span class=\"text-muted\">{{'core.account.session.expires' |\n                translate}}</span></dt>\n                <dd>{{d.expires*1000 | date:'dd/MM/yyyy - HH:mm'}}</dd>\n              </div>\n            </dl>\n          </div>\n        </div>\n      </rlb-list-item>\n    }\n  </rlb-list>\n}\n</div>\n", styles: [".settings .settings-item .settings-control{width:40%}\n"] }]
+            args: [{ selector: 'rlb-user-account', imports: [RlbAppModule, CommonModule], template: "<div class=\"container mt-4 mb-5\">\n\n  <div class=\"d-flex align-items-center justify-content-between\">\n    <h3 class=\"m-0\">{{\"Account settings\"|translate|uppercase}}</h3>\n    <rlb-breadcrumb [cssClasses]=\"'p-0 px-md-1 py-md-2 m-0'\" [items]=\"[{ label: 'Home', link: '/', id: '1' },{ label: 'Account settings', id: '2' }]\" class=\"d-block\"></rlb-breadcrumb>\n  </div>\n\n  <!-- ACCOUNT DETAILS CARD  -->\n  <rlb-card class=\"mt-3\">\n    <rlb-card-header class=\"d-flex justify-content-between align-items-center py-3 px-4\">\n      <h5 class=\"m-0\">{{\"Account\" | translate}}</h5>\n    </rlb-card-header>\n\n    <rlb-card-body class=\"px-4 py-4\">\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.username' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser) {\n            <rlb-input class=\"w-100\"  type=\"text\" [(ngModel)]=\"keyCloakUser.username\" disabled />\n          }\n        </div>\n      </div>\n\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.email' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser) {\n            <rlb-input class=\"w-100\"  type=\"text\" [(ngModel)]=\"keyCloakUser.email\" />\n          } @else {\n            <rlb-input class=\"w-100\"  type=\"text\" readonly />\n          }\n        </div>\n      </div>\n\n      <div class=\"row mb-3 align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.firstName' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser) {\n            <rlb-input class=\"w-100\"  type=\"text\" [(ngModel)]=\"keyCloakUser.firstName\" />\n          } @else {\n            <rlb-input class=\"w-100\"  type=\"text\" readonly />\n          }\n        </div>\n      </div>\n\n      <div class=\"row align-items-center\">\n        <label class=\"col-md-3 col-form-label fw-semibold\">{{ 'core.account.lastName' | translate}}</label>\n        <div class=\"col-md-9\">\n          @if (keyCloakUser) {\n            <rlb-input class=\"w-100\" type=\"text\" [(ngModel)]=\"keyCloakUser.lastName\" />\n          } @else {\n            <rlb-input class=\"w-100\" type=\"text\" readonly />\n          }\n        </div>\n      </div>\n    </rlb-card-body>\n\n    <rlb-card-footer>\n      <div class=\"d-flex align-items-center justify-content-end gap-2\">\n        <button rlb-button outline (click)=\"updateProfile()\">\n          <i class=\"bi bi-floppy\"></i>\n          {{'common.save' | translate}}\n        </button>\n        <button rlb-button outline color=\"danger\" (click)=\"logout()\">\n          <i class=\"bi bi-box-arrow-right\"></i>\n          {{'core.account.logout' | translate}}\n        </button>\n      </div>\n    </rlb-card-footer>\n  </rlb-card>\n\n  <!-- CREDENTIALS SECTION -->\n  @if (keyCloakUser) {\n    <h3 class=\"mb-4 text-center mt-5\">{{ 'core.account.credentials.title' | translate}}</h3>\n\n    @for (type of keycloakCredentials; track type) {\n      <rlb-card class=\"mb-4\">\n\n        <rlb-card-header class=\"d-flex justify-content-between align-items-center py-3 px-4\">\n          <h6 class=\"mb-0 fw-bold\">{{ ('core.account.credentials.'+type?.type) | translate }}</h6>\n          @if (type.type === 'otp') {\n            <rlb-fab (click)=\"configureOTP()\" size=\"sm\" [tooltip]=\"'core.account.credentials.addOTP' | translate\">\n              <i class=\"bi bi-plus-circle\"></i>\n            </rlb-fab>\n          }\n        </rlb-card-header>\n\n        <rlb-card-body>\n          <rlb-list class=\"settings m-0\">\n            @for (cred of type.userCredentialMetadatas; track cred.credential.id) {\n              <rlb-list-item class=\"px-4 py-3\">\n                <div class=\"row align-items-center w-100\">\n                  <div class=\"col-md-1 text-center mb-2 mb-md-0\">\n                    <i class=\"bi bi-key text-secondary\" style=\"font-size: 2rem;\"></i>\n                  </div>\n                  <div class=\"col-md-5 mb-2 mb-md-0\">\n                    <span class=\"text-muted small d-block\">{{ 'core.account.credentials.name' | translate }}</span>\n                    <span class=\"fw-semibold\">{{cred.credential.userLabel || cred.credential.type}}</span>\n                  </div>\n                  <div class=\"col-md-4 mb-3 mb-md-0\">\n                    <span class=\"text-muted small d-block\">{{'core.account.credentials.created' | translate}}</span>\n                    <span>{{cred.credential.createdDate | date:'dd:MM:yyyy HH:mm' }}</span>\n                  </div>\n                  <div class=\"col-md-2 text-md-end\">\n                    @if (type.removeable) {\n                      <button rlb-button class=\"w-100\" color=\"danger\" (click)=\"removeCredential(type.type, cred.credential.id)\">\n                        <i class=\"bi bi-trash\"></i> {{ 'core.account.credentials.delete' | translate}}\n                      </button>\n                    } @else {\n                      <button rlb-button class=\"w-100\" outline (click)=\"updatePassword()\">\n                        <i class=\"bi bi-pencil-square\"></i> {{ 'core.account.credentials.update' | translate}}\n                      </button>\n                    }\n                  </div>\n                </div>\n              </rlb-list-item>\n            }\n\n            @if (type.userCredentialMetadatas.length === 0) {\n              <div class=\"py-4 text-center text-muted\">\n                {{ 'core.account.credentials.noCredentials' | translate}}\n              </div>\n            }\n          </rlb-list>\n        </rlb-card-body>\n      </rlb-card>\n    }\n\n      <!-- SESSION SECTION -->\n    <h3 class=\"mb-4 text-center mt-5\">{{ 'core.account.session.title' | translate}}</h3>\n\n    <rlb-card border=\"secondary\" class=\"mb-5\">\n      <rlb-card-body class=\"p-0\">\n        <rlb-list class=\"settings m-0\">\n          @for (d of keyCloakDevices; track d.id) {\n            <rlb-list-item class=\"settings-item px-4 py-4\">\n\n              <!-- Session Top Row (Device Info) -->\n              <div class=\"d-flex align-items-center pb-3 mb-3\">\n                <i class=\"bi bi-laptop text-secondary me-3\" style=\"font-size: 2rem;\"></i>\n                <h6 class=\"mb-0 fw-bold\">{{d.os}} {{d.osVersion}} - {{d.browser}}</h6>\n                @if (d.current) {\n                  <span class=\"badge bg-success ms-3 rounded-pill px-3 py-2\">\n                    {{ 'core.account.session.current' | translate}}\n                  </span>\n                }\n              </div>\n\n              <div class=\"row text-center text-md-start gy-3\">\n                <div class=\"col-sm-6 col-md-3\">\n                  <span class=\"text-muted small d-block\">{{ 'core.account.session.ip' | translate }}</span>\n                  <span class=\"fw-medium\">{{d.ipAddress}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-3\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.lastAccess' | translate}}</span>\n                  <span>{{d.lastAccess*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.applications' | translate}}</span>\n                  <span>{{d.clientslist }} </span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.started' | translate}}</span>\n                  <span>{{d.started*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n                <div class=\"col-sm-6 col-md-2\">\n                  <span class=\"text-muted small d-block\">{{'core.account.session.expires' | translate}}</span>\n                  <span>{{d.expires*1000 | date:'dd/MM/yyyy - HH:mm'}}</span>\n                </div>\n              </div>\n            </rlb-list-item>\n          }\n        </rlb-list>\n      </rlb-card-body>\n    </rlb-card>\n  }\n</div>\n", styles: [".settings .settings-item .settings-control{width:40%}\n"] }]
         }], ctorParameters: () => [{ type: i1$6.Location }, { type: i1$1.Store }, { type: KeycloakProfileService }, { type: i2$1.ModalService }, { type: LanguageService }, { type: AuthenticationService }, { type: i2.Router }] });
 
 class SettingsCoreComponent {