@valtimo/account 5.14.0 → 5.15.0

package/esm2020/lib/account-routing.module.mjs

@@ -38,10 +38,10 @@ const routes = [
 ];
 export class AccountRoutingModule {
 }
-AccountRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AccountRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountRoutingModule, imports: [CommonModule, i1.RouterModule], exports: [RouterModule] });
-AccountRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountRoutingModule, imports: [[CommonModule, RouterModule.forChild(routes)], RouterModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountRoutingModule, decorators: [{
+AccountRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AccountRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountRoutingModule, imports: [CommonModule, i1.RouterModule], exports: [RouterModule] });
+AccountRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountRoutingModule, imports: [[CommonModule, RouterModule.forChild(routes)], RouterModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],

package/esm2020/lib/account.module.mjs

@@ -27,8 +27,8 @@ import * as i0 from "@angular/core";
 import * as i1 from "@ngx-translate/core";
 export class AccountModule {
 }
-AccountModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AccountModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountModule, declarations: [ProfileComponent, PasswordComponent], imports: [CommonModule,
+AccountModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AccountModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountModule, declarations: [ProfileComponent, PasswordComponent], imports: [CommonModule,
         AccountRoutingModule,
         WidgetModule,
         ListModule,
@@ -36,7 +36,7 @@ AccountModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         FormsModule, i1.TranslateModule, ReactiveFormsModule,
         UploaderModule,
         AlertModule], exports: [ProfileComponent, PasswordComponent] });
-AccountModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountModule, providers: [], imports: [[
+AccountModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountModule, providers: [], imports: [[
             CommonModule,
             AccountRoutingModule,
             WidgetModule,
@@ -54,7 +54,7 @@ AccountModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             UploaderModule,
             AlertModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ProfileComponent, PasswordComponent],

package/esm2020/lib/password/password.component.mjs

@@ -95,9 +95,9 @@ export class PasswordComponent {
         this.initData();
     }
 }
-PasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PasswordComponent, deps: [{ token: i1.FormBuilder }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-PasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PasswordComponent, selector: "valtimo-password", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget *ngIf=\"profile\">\n        <div>\n          <div class=\"card-body\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\">\n                    <strong>Last password changed</strong>\n                  </div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.last_password_reset }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div *ngIf=\"errorMsg\" class=\"bg-danger text-white mb-0 p-3 text-center\">\n            {{ errorMsg }}\n          </div>\n          <div class=\"card-body-contrast p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"password\"\n                  >New password</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"password\"\n                    id=\"password\"\n                    minlength=\"4\"\n                    maxlength=\"50\"\n                    formControlName=\"password\"\n                    class=\"form-control\"\n                    placeholder=\"Your new password\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.password.touched && formControls.password.valid,\n                      'is-invalid': formControls.password.touched && formControls.password.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.password.touched && formControls.password.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.password.errors.required\">\n                      Your password is required\n                    </div>\n                    <div *ngIf=\"formControls.password.errors.pattern\">\n                      It expects at least 1 lowercase letter, 1 uppercase letter, 1 digit and 1\n                      special characters. The length should be greater than 4 characters. The\n                      sequence of the characters is not important.\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"confirmPassword\"\n                  >New password confirmation</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"password\"\n                    id=\"confirmPassword\"\n                    minlength=\"4\"\n                    maxlength=\"50\"\n                    formControlName=\"confirmPassword\"\n                    class=\"form-control\"\n                    placeholder=\"Your new password confirmation\"\n                    [ngClass]=\"{\n                      'is-valid':\n                        formControls.confirmPassword.touched && formControls.confirmPassword.valid,\n                      'is-invalid':\n                        formControls.confirmPassword.touched && formControls.confirmPassword.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"\n                      formControls.confirmPassword.touched && formControls.confirmPassword.errors\n                    \"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.confirmPassword.errors.required\">\n                      Your new password confirmation is required\n                    </div>\n                    <div *ngIf=\"formControls.confirmPassword.errors.minlength\">\n                      Your new password confirmation is required to be at least 4 characters\n                    </div>\n                    <div *ngIf=\"formControls.confirmPassword.errors.mustMatch\">\n                      Your password and confirmation password must match\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"row pt-3 mt-1\">\n                <div class=\"col-12\">\n                  <div class=\"text-right\">\n                    <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                      Reset\n                    </button>\n                    <button\n                      class=\"btn btn-space btn-primary\"\n                      type=\"submit\"\n                      [disabled]=\"form.invalid\"\n                    >\n                      Submit\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </form>\n          </div>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""], components: [{ type: i2.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.FieldAutoFocusDirective, selector: "[valtimoFieldAutoFocus]" }, { type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PasswordComponent, decorators: [{
+PasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PasswordComponent, deps: [{ token: i1.FormBuilder }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+PasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PasswordComponent, selector: "valtimo-password", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget *ngIf=\"profile\">\n        <div>\n          <div class=\"card-body\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\">\n                    <strong>Last password changed</strong>\n                  </div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.last_password_reset }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div *ngIf=\"errorMsg\" class=\"bg-danger text-white mb-0 p-3 text-center\">\n            {{ errorMsg }}\n          </div>\n          <div class=\"card-body-contrast p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"password\"\n                  >New password</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"password\"\n                    id=\"password\"\n                    minlength=\"4\"\n                    maxlength=\"50\"\n                    formControlName=\"password\"\n                    class=\"form-control\"\n                    placeholder=\"Your new password\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.password.touched && formControls.password.valid,\n                      'is-invalid': formControls.password.touched && formControls.password.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.password.touched && formControls.password.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.password.errors.required\">\n                      Your password is required\n                    </div>\n                    <div *ngIf=\"formControls.password.errors.pattern\">\n                      It expects at least 1 lowercase letter, 1 uppercase letter, 1 digit and 1\n                      special characters. The length should be greater than 4 characters. The\n                      sequence of the characters is not important.\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"confirmPassword\"\n                  >New password confirmation</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"password\"\n                    id=\"confirmPassword\"\n                    minlength=\"4\"\n                    maxlength=\"50\"\n                    formControlName=\"confirmPassword\"\n                    class=\"form-control\"\n                    placeholder=\"Your new password confirmation\"\n                    [ngClass]=\"{\n                      'is-valid':\n                        formControls.confirmPassword.touched && formControls.confirmPassword.valid,\n                      'is-invalid':\n                        formControls.confirmPassword.touched && formControls.confirmPassword.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"\n                      formControls.confirmPassword.touched && formControls.confirmPassword.errors\n                    \"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.confirmPassword.errors.required\">\n                      Your new password confirmation is required\n                    </div>\n                    <div *ngIf=\"formControls.confirmPassword.errors.minlength\">\n                      Your new password confirmation is required to be at least 4 characters\n                    </div>\n                    <div *ngIf=\"formControls.confirmPassword.errors.mustMatch\">\n                      Your password and confirmation password must match\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"row pt-3 mt-1\">\n                <div class=\"col-12\">\n                  <div class=\"text-right\">\n                    <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                      Reset\n                    </button>\n                    <button\n                      class=\"btn btn-space btn-primary\"\n                      type=\"submit\"\n                      [disabled]=\"form.invalid\"\n                    >\n                      Submit\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </form>\n          </div>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""], components: [{ type: i2.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }], directives: [{ type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.FieldAutoFocusDirective, selector: "[valtimoFieldAutoFocus]" }, { type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PasswordComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-password', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget *ngIf=\"profile\">\n        <div>\n          <div class=\"card-body\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\">\n                    <strong>Last password changed</strong>\n                  </div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.last_password_reset }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div *ngIf=\"errorMsg\" class=\"bg-danger text-white mb-0 p-3 text-center\">\n            {{ errorMsg }}\n          </div>\n          <div class=\"card-body-contrast p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"password\"\n                  >New password</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"password\"\n                    id=\"password\"\n                    minlength=\"4\"\n                    maxlength=\"50\"\n                    formControlName=\"password\"\n                    class=\"form-control\"\n                    placeholder=\"Your new password\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.password.touched && formControls.password.valid,\n                      'is-invalid': formControls.password.touched && formControls.password.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.password.touched && formControls.password.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.password.errors.required\">\n                      Your password is required\n                    </div>\n                    <div *ngIf=\"formControls.password.errors.pattern\">\n                      It expects at least 1 lowercase letter, 1 uppercase letter, 1 digit and 1\n                      special characters. The length should be greater than 4 characters. The\n                      sequence of the characters is not important.\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"confirmPassword\"\n                  >New password confirmation</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"password\"\n                    id=\"confirmPassword\"\n                    minlength=\"4\"\n                    maxlength=\"50\"\n                    formControlName=\"confirmPassword\"\n                    class=\"form-control\"\n                    placeholder=\"Your new password confirmation\"\n                    [ngClass]=\"{\n                      'is-valid':\n                        formControls.confirmPassword.touched && formControls.confirmPassword.valid,\n                      'is-invalid':\n                        formControls.confirmPassword.touched && formControls.confirmPassword.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"\n                      formControls.confirmPassword.touched && formControls.confirmPassword.errors\n                    \"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.confirmPassword.errors.required\">\n                      Your new password confirmation is required\n                    </div>\n                    <div *ngIf=\"formControls.confirmPassword.errors.minlength\">\n                      Your new password confirmation is required to be at least 4 characters\n                    </div>\n                    <div *ngIf=\"formControls.confirmPassword.errors.mustMatch\">\n                      Your password and confirmation password must match\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"row pt-3 mt-1\">\n                <div class=\"col-12\">\n                  <div class=\"text-right\">\n                    <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                      Reset\n                    </button>\n                    <button\n                      class=\"btn btn-space btn-primary\"\n                      type=\"submit\"\n                      [disabled]=\"form.invalid\"\n                    >\n                      Submit\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </form>\n          </div>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: i2.AlertService }]; } });

package/esm2020/lib/profile/profile.component.mjs

@@ -80,9 +80,9 @@ export class ProfileComponent {
         this.initData();
     }
 }
-ProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProfileComponent, deps: [{ token: i1.FormBuilder }, { token: i2.AlertService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-ProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ProfileComponent, selector: "valtimo-profile", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget *ngIf=\"profile\">\n        <div>\n          <div class=\"card-body\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Nickname</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ profile.nickname }}</div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Email</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ profile.email }}</div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Authorities</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    <span\n                      class=\"badge badge-pill badge-success mb-1 mr-1\"\n                      *ngFor=\"let role of profile.roles\"\n                      >{{ role }}</span\n                    >\n                  </div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Account status</strong></div>\n                  <div\n                    class=\"col-12 col-sm-8 col-lg-6\"\n                    [ngClass]=\"{'text-danger': profile.blocked}\"\n                  >\n                    {{ profile.blocked ? 'Blocked' : 'Activated' }}\n                  </div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Account created</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.created_at }}\n                  </div>\n                </div>\n\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Last updated</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.updated_at }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"card-body-contrast p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"firstName\"\n                  >First name</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"text\"\n                    id=\"firstName\"\n                    formControlName=\"firstName\"\n                    class=\"form-control\"\n                    placeholder=\"Your first name\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.firstName.touched && formControls.firstName.valid,\n                      'is-invalid': formControls.firstName.touched && formControls.firstName.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.firstName.touched && formControls.firstName.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.firstName.errors.required\">\n                      Your first name is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"lastName\"\n                  >Last name</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"text\"\n                    id=\"lastName\"\n                    formControlName=\"lastName\"\n                    class=\"form-control\"\n                    placeholder=\"Your last name\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.lastName.touched && formControls.lastName.valid,\n                      'is-invalid': formControls.lastName.touched && formControls.lastName.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.lastName.touched && formControls.lastName.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.lastName.errors.required\">\n                      Your last name is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"langKey\"\n                  >Language</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <select\n                    id=\"langKey\"\n                    formControlName=\"langKey\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.langKey.touched && formControls.langKey.valid,\n                      'is-invalid': formControls.langKey.touched && formControls.langKey.errors\n                    }\"\n                    required\n                  >\n                    <option\n                      *ngFor=\"let lang of translate.getLangs()\"\n                      [value]=\"lang\"\n                      [selected]=\"lang === translate.currentLang\"\n                    >\n                      {{ 'settings.language.options.' + lang | translate }}\n                    </option>\n                  </select>\n                  <div\n                    *ngIf=\"formControls.langKey.touched && formControls.langKey.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.langKey.errors.required\">\n                      Your language is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"row pt-3 mt-1\">\n                <div class=\"col-12\">\n                  <div class=\"text-right\">\n                    <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                      Reset\n                    </button>\n                    <button\n                      class=\"btn btn-space btn-primary\"\n                      type=\"submit\"\n                      [disabled]=\"form.invalid\"\n                    >\n                      Submit\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </form>\n          </div>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""], components: [{ type: i2.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.FieldAutoFocusDirective, selector: "[valtimoFieldAutoFocus]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "translate": i3.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProfileComponent, decorators: [{
+ProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProfileComponent, deps: [{ token: i1.FormBuilder }, { token: i2.AlertService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+ProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ProfileComponent, selector: "valtimo-profile", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget *ngIf=\"profile\">\n        <div>\n          <div class=\"card-body\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Nickname</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ profile.nickname }}</div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Email</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ profile.email }}</div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Authorities</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    <span\n                      class=\"badge badge-pill badge-success mb-1 mr-1\"\n                      *ngFor=\"let role of profile.roles\"\n                      >{{ role }}</span\n                    >\n                  </div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Account status</strong></div>\n                  <div\n                    class=\"col-12 col-sm-8 col-lg-6\"\n                    [ngClass]=\"{'text-danger': profile.blocked}\"\n                  >\n                    {{ profile.blocked ? 'Blocked' : 'Activated' }}\n                  </div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Account created</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.created_at }}\n                  </div>\n                </div>\n\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Last updated</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.updated_at }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"card-body-contrast p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"firstName\"\n                  >First name</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"text\"\n                    id=\"firstName\"\n                    formControlName=\"firstName\"\n                    class=\"form-control\"\n                    placeholder=\"Your first name\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.firstName.touched && formControls.firstName.valid,\n                      'is-invalid': formControls.firstName.touched && formControls.firstName.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.firstName.touched && formControls.firstName.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.firstName.errors.required\">\n                      Your first name is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"lastName\"\n                  >Last name</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"text\"\n                    id=\"lastName\"\n                    formControlName=\"lastName\"\n                    class=\"form-control\"\n                    placeholder=\"Your last name\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.lastName.touched && formControls.lastName.valid,\n                      'is-invalid': formControls.lastName.touched && formControls.lastName.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.lastName.touched && formControls.lastName.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.lastName.errors.required\">\n                      Your last name is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"langKey\"\n                  >Language</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <select\n                    id=\"langKey\"\n                    formControlName=\"langKey\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.langKey.touched && formControls.langKey.valid,\n                      'is-invalid': formControls.langKey.touched && formControls.langKey.errors\n                    }\"\n                    required\n                  >\n                    <option\n                      *ngFor=\"let lang of translate.getLangs()\"\n                      [value]=\"lang\"\n                      [selected]=\"lang === translate.currentLang\"\n                    >\n                      {{ 'settings.language.options.' + lang | translate }}\n                    </option>\n                  </select>\n                  <div\n                    *ngIf=\"formControls.langKey.touched && formControls.langKey.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.langKey.errors.required\">\n                      Your language is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"row pt-3 mt-1\">\n                <div class=\"col-12\">\n                  <div class=\"text-right\">\n                    <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                      Reset\n                    </button>\n                    <button\n                      class=\"btn btn-space btn-primary\"\n                      type=\"submit\"\n                      [disabled]=\"form.invalid\"\n                    >\n                      Submit\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </form>\n          </div>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""], components: [{ type: i2.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.FieldAutoFocusDirective, selector: "[valtimoFieldAutoFocus]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProfileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-profile', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget *ngIf=\"profile\">\n        <div>\n          <div class=\"card-body\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Nickname</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ profile.nickname }}</div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Email</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ profile.email }}</div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Authorities</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    <span\n                      class=\"badge badge-pill badge-success mb-1 mr-1\"\n                      *ngFor=\"let role of profile.roles\"\n                      >{{ role }}</span\n                    >\n                  </div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Account status</strong></div>\n                  <div\n                    class=\"col-12 col-sm-8 col-lg-6\"\n                    [ngClass]=\"{'text-danger': profile.blocked}\"\n                  >\n                    {{ profile.blocked ? 'Blocked' : 'Activated' }}\n                  </div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Account created</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.created_at }}\n                  </div>\n                </div>\n\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Last updated</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.updated_at }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"card-body-contrast p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"firstName\"\n                  >First name</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"text\"\n                    id=\"firstName\"\n                    formControlName=\"firstName\"\n                    class=\"form-control\"\n                    placeholder=\"Your first name\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.firstName.touched && formControls.firstName.valid,\n                      'is-invalid': formControls.firstName.touched && formControls.firstName.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.firstName.touched && formControls.firstName.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.firstName.errors.required\">\n                      Your first name is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"lastName\"\n                  >Last name</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"text\"\n                    id=\"lastName\"\n                    formControlName=\"lastName\"\n                    class=\"form-control\"\n                    placeholder=\"Your last name\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.lastName.touched && formControls.lastName.valid,\n                      'is-invalid': formControls.lastName.touched && formControls.lastName.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.lastName.touched && formControls.lastName.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.lastName.errors.required\">\n                      Your last name is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"langKey\"\n                  >Language</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <select\n                    id=\"langKey\"\n                    formControlName=\"langKey\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.langKey.touched && formControls.langKey.valid,\n                      'is-invalid': formControls.langKey.touched && formControls.langKey.errors\n                    }\"\n                    required\n                  >\n                    <option\n                      *ngFor=\"let lang of translate.getLangs()\"\n                      [value]=\"lang\"\n                      [selected]=\"lang === translate.currentLang\"\n                    >\n                      {{ 'settings.language.options.' + lang | translate }}\n                    </option>\n                  </select>\n                  <div\n                    *ngIf=\"formControls.langKey.touched && formControls.langKey.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.langKey.errors.required\">\n                      Your language is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"row pt-3 mt-1\">\n                <div class=\"col-12\">\n                  <div class=\"text-right\">\n                    <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                      Reset\n                    </button>\n                    <button\n                      class=\"btn btn-space btn-primary\"\n                      type=\"submit\"\n                      [disabled]=\"form.invalid\"\n                    >\n                      Submit\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </form>\n          </div>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: i2.AlertService }, { type: i3.TranslateService }]; } });

package/fesm2015/valtimo-account.mjs

@@ -89,9 +89,9 @@ class ProfileComponent {
         this.initData();
     }
 }
-ProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProfileComponent, deps: [{ token: i1.FormBuilder }, { token: i2.AlertService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-ProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ProfileComponent, selector: "valtimo-profile", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget *ngIf=\"profile\">\n        <div>\n          <div class=\"card-body\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Nickname</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ profile.nickname }}</div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Email</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ profile.email }}</div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Authorities</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    <span\n                      class=\"badge badge-pill badge-success mb-1 mr-1\"\n                      *ngFor=\"let role of profile.roles\"\n                      >{{ role }}</span\n                    >\n                  </div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Account status</strong></div>\n                  <div\n                    class=\"col-12 col-sm-8 col-lg-6\"\n                    [ngClass]=\"{'text-danger': profile.blocked}\"\n                  >\n                    {{ profile.blocked ? 'Blocked' : 'Activated' }}\n                  </div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Account created</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.created_at }}\n                  </div>\n                </div>\n\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Last updated</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.updated_at }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"card-body-contrast p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"firstName\"\n                  >First name</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"text\"\n                    id=\"firstName\"\n                    formControlName=\"firstName\"\n                    class=\"form-control\"\n                    placeholder=\"Your first name\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.firstName.touched && formControls.firstName.valid,\n                      'is-invalid': formControls.firstName.touched && formControls.firstName.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.firstName.touched && formControls.firstName.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.firstName.errors.required\">\n                      Your first name is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"lastName\"\n                  >Last name</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"text\"\n                    id=\"lastName\"\n                    formControlName=\"lastName\"\n                    class=\"form-control\"\n                    placeholder=\"Your last name\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.lastName.touched && formControls.lastName.valid,\n                      'is-invalid': formControls.lastName.touched && formControls.lastName.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.lastName.touched && formControls.lastName.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.lastName.errors.required\">\n                      Your last name is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"langKey\"\n                  >Language</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <select\n                    id=\"langKey\"\n                    formControlName=\"langKey\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.langKey.touched && formControls.langKey.valid,\n                      'is-invalid': formControls.langKey.touched && formControls.langKey.errors\n                    }\"\n                    required\n                  >\n                    <option\n                      *ngFor=\"let lang of translate.getLangs()\"\n                      [value]=\"lang\"\n                      [selected]=\"lang === translate.currentLang\"\n                    >\n                      {{ 'settings.language.options.' + lang | translate }}\n                    </option>\n                  </select>\n                  <div\n                    *ngIf=\"formControls.langKey.touched && formControls.langKey.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.langKey.errors.required\">\n                      Your language is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"row pt-3 mt-1\">\n                <div class=\"col-12\">\n                  <div class=\"text-right\">\n                    <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                      Reset\n                    </button>\n                    <button\n                      class=\"btn btn-space btn-primary\"\n                      type=\"submit\"\n                      [disabled]=\"form.invalid\"\n                    >\n                      Submit\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </form>\n          </div>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""], components: [{ type: i2.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.FieldAutoFocusDirective, selector: "[valtimoFieldAutoFocus]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "translate": i3.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProfileComponent, decorators: [{
+ProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProfileComponent, deps: [{ token: i1.FormBuilder }, { token: i2.AlertService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+ProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ProfileComponent, selector: "valtimo-profile", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget *ngIf=\"profile\">\n        <div>\n          <div class=\"card-body\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Nickname</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ profile.nickname }}</div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Email</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ profile.email }}</div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Authorities</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    <span\n                      class=\"badge badge-pill badge-success mb-1 mr-1\"\n                      *ngFor=\"let role of profile.roles\"\n                      >{{ role }}</span\n                    >\n                  </div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Account status</strong></div>\n                  <div\n                    class=\"col-12 col-sm-8 col-lg-6\"\n                    [ngClass]=\"{'text-danger': profile.blocked}\"\n                  >\n                    {{ profile.blocked ? 'Blocked' : 'Activated' }}\n                  </div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Account created</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.created_at }}\n                  </div>\n                </div>\n\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Last updated</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.updated_at }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"card-body-contrast p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"firstName\"\n                  >First name</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"text\"\n                    id=\"firstName\"\n                    formControlName=\"firstName\"\n                    class=\"form-control\"\n                    placeholder=\"Your first name\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.firstName.touched && formControls.firstName.valid,\n                      'is-invalid': formControls.firstName.touched && formControls.firstName.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.firstName.touched && formControls.firstName.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.firstName.errors.required\">\n                      Your first name is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"lastName\"\n                  >Last name</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"text\"\n                    id=\"lastName\"\n                    formControlName=\"lastName\"\n                    class=\"form-control\"\n                    placeholder=\"Your last name\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.lastName.touched && formControls.lastName.valid,\n                      'is-invalid': formControls.lastName.touched && formControls.lastName.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.lastName.touched && formControls.lastName.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.lastName.errors.required\">\n                      Your last name is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"langKey\"\n                  >Language</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <select\n                    id=\"langKey\"\n                    formControlName=\"langKey\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.langKey.touched && formControls.langKey.valid,\n                      'is-invalid': formControls.langKey.touched && formControls.langKey.errors\n                    }\"\n                    required\n                  >\n                    <option\n                      *ngFor=\"let lang of translate.getLangs()\"\n                      [value]=\"lang\"\n                      [selected]=\"lang === translate.currentLang\"\n                    >\n                      {{ 'settings.language.options.' + lang | translate }}\n                    </option>\n                  </select>\n                  <div\n                    *ngIf=\"formControls.langKey.touched && formControls.langKey.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.langKey.errors.required\">\n                      Your language is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"row pt-3 mt-1\">\n                <div class=\"col-12\">\n                  <div class=\"text-right\">\n                    <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                      Reset\n                    </button>\n                    <button\n                      class=\"btn btn-space btn-primary\"\n                      type=\"submit\"\n                      [disabled]=\"form.invalid\"\n                    >\n                      Submit\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </form>\n          </div>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""], components: [{ type: i2.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.FieldAutoFocusDirective, selector: "[valtimoFieldAutoFocus]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProfileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-profile', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget *ngIf=\"profile\">\n        <div>\n          <div class=\"card-body\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Nickname</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ profile.nickname }}</div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Email</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ profile.email }}</div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Authorities</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    <span\n                      class=\"badge badge-pill badge-success mb-1 mr-1\"\n                      *ngFor=\"let role of profile.roles\"\n                      >{{ role }}</span\n                    >\n                  </div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Account status</strong></div>\n                  <div\n                    class=\"col-12 col-sm-8 col-lg-6\"\n                    [ngClass]=\"{'text-danger': profile.blocked}\"\n                  >\n                    {{ profile.blocked ? 'Blocked' : 'Activated' }}\n                  </div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Account created</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.created_at }}\n                  </div>\n                </div>\n\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Last updated</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.updated_at }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"card-body-contrast p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"firstName\"\n                  >First name</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"text\"\n                    id=\"firstName\"\n                    formControlName=\"firstName\"\n                    class=\"form-control\"\n                    placeholder=\"Your first name\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.firstName.touched && formControls.firstName.valid,\n                      'is-invalid': formControls.firstName.touched && formControls.firstName.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.firstName.touched && formControls.firstName.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.firstName.errors.required\">\n                      Your first name is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"lastName\"\n                  >Last name</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"text\"\n                    id=\"lastName\"\n                    formControlName=\"lastName\"\n                    class=\"form-control\"\n                    placeholder=\"Your last name\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.lastName.touched && formControls.lastName.valid,\n                      'is-invalid': formControls.lastName.touched && formControls.lastName.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.lastName.touched && formControls.lastName.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.lastName.errors.required\">\n                      Your last name is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"langKey\"\n                  >Language</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <select\n                    id=\"langKey\"\n                    formControlName=\"langKey\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.langKey.touched && formControls.langKey.valid,\n                      'is-invalid': formControls.langKey.touched && formControls.langKey.errors\n                    }\"\n                    required\n                  >\n                    <option\n                      *ngFor=\"let lang of translate.getLangs()\"\n                      [value]=\"lang\"\n                      [selected]=\"lang === translate.currentLang\"\n                    >\n                      {{ 'settings.language.options.' + lang | translate }}\n                    </option>\n                  </select>\n                  <div\n                    *ngIf=\"formControls.langKey.touched && formControls.langKey.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.langKey.errors.required\">\n                      Your language is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"row pt-3 mt-1\">\n                <div class=\"col-12\">\n                  <div class=\"text-right\">\n                    <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                      Reset\n                    </button>\n                    <button\n                      class=\"btn btn-space btn-primary\"\n                      type=\"submit\"\n                      [disabled]=\"form.invalid\"\n                    >\n                      Submit\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </form>\n          </div>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: i2.AlertService }, { type: i3.TranslateService }]; } });
@@ -186,9 +186,9 @@ class PasswordComponent {
         this.initData();
     }
 }
-PasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PasswordComponent, deps: [{ token: i1.FormBuilder }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-PasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PasswordComponent, selector: "valtimo-password", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget *ngIf=\"profile\">\n        <div>\n          <div class=\"card-body\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\">\n                    <strong>Last password changed</strong>\n                  </div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.last_password_reset }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div *ngIf=\"errorMsg\" class=\"bg-danger text-white mb-0 p-3 text-center\">\n            {{ errorMsg }}\n          </div>\n          <div class=\"card-body-contrast p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"password\"\n                  >New password</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"password\"\n                    id=\"password\"\n                    minlength=\"4\"\n                    maxlength=\"50\"\n                    formControlName=\"password\"\n                    class=\"form-control\"\n                    placeholder=\"Your new password\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.password.touched && formControls.password.valid,\n                      'is-invalid': formControls.password.touched && formControls.password.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.password.touched && formControls.password.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.password.errors.required\">\n                      Your password is required\n                    </div>\n                    <div *ngIf=\"formControls.password.errors.pattern\">\n                      It expects at least 1 lowercase letter, 1 uppercase letter, 1 digit and 1\n                      special characters. The length should be greater than 4 characters. The\n                      sequence of the characters is not important.\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"confirmPassword\"\n                  >New password confirmation</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"password\"\n                    id=\"confirmPassword\"\n                    minlength=\"4\"\n                    maxlength=\"50\"\n                    formControlName=\"confirmPassword\"\n                    class=\"form-control\"\n                    placeholder=\"Your new password confirmation\"\n                    [ngClass]=\"{\n                      'is-valid':\n                        formControls.confirmPassword.touched && formControls.confirmPassword.valid,\n                      'is-invalid':\n                        formControls.confirmPassword.touched && formControls.confirmPassword.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"\n                      formControls.confirmPassword.touched && formControls.confirmPassword.errors\n                    \"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.confirmPassword.errors.required\">\n                      Your new password confirmation is required\n                    </div>\n                    <div *ngIf=\"formControls.confirmPassword.errors.minlength\">\n                      Your new password confirmation is required to be at least 4 characters\n                    </div>\n                    <div *ngIf=\"formControls.confirmPassword.errors.mustMatch\">\n                      Your password and confirmation password must match\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"row pt-3 mt-1\">\n                <div class=\"col-12\">\n                  <div class=\"text-right\">\n                    <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                      Reset\n                    </button>\n                    <button\n                      class=\"btn btn-space btn-primary\"\n                      type=\"submit\"\n                      [disabled]=\"form.invalid\"\n                    >\n                      Submit\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </form>\n          </div>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""], components: [{ type: i2.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.FieldAutoFocusDirective, selector: "[valtimoFieldAutoFocus]" }, { type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PasswordComponent, decorators: [{
+PasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PasswordComponent, deps: [{ token: i1.FormBuilder }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+PasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PasswordComponent, selector: "valtimo-password", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget *ngIf=\"profile\">\n        <div>\n          <div class=\"card-body\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\">\n                    <strong>Last password changed</strong>\n                  </div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.last_password_reset }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div *ngIf=\"errorMsg\" class=\"bg-danger text-white mb-0 p-3 text-center\">\n            {{ errorMsg }}\n          </div>\n          <div class=\"card-body-contrast p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"password\"\n                  >New password</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"password\"\n                    id=\"password\"\n                    minlength=\"4\"\n                    maxlength=\"50\"\n                    formControlName=\"password\"\n                    class=\"form-control\"\n                    placeholder=\"Your new password\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.password.touched && formControls.password.valid,\n                      'is-invalid': formControls.password.touched && formControls.password.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.password.touched && formControls.password.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.password.errors.required\">\n                      Your password is required\n                    </div>\n                    <div *ngIf=\"formControls.password.errors.pattern\">\n                      It expects at least 1 lowercase letter, 1 uppercase letter, 1 digit and 1\n                      special characters. The length should be greater than 4 characters. The\n                      sequence of the characters is not important.\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"confirmPassword\"\n                  >New password confirmation</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"password\"\n                    id=\"confirmPassword\"\n                    minlength=\"4\"\n                    maxlength=\"50\"\n                    formControlName=\"confirmPassword\"\n                    class=\"form-control\"\n                    placeholder=\"Your new password confirmation\"\n                    [ngClass]=\"{\n                      'is-valid':\n                        formControls.confirmPassword.touched && formControls.confirmPassword.valid,\n                      'is-invalid':\n                        formControls.confirmPassword.touched && formControls.confirmPassword.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"\n                      formControls.confirmPassword.touched && formControls.confirmPassword.errors\n                    \"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.confirmPassword.errors.required\">\n                      Your new password confirmation is required\n                    </div>\n                    <div *ngIf=\"formControls.confirmPassword.errors.minlength\">\n                      Your new password confirmation is required to be at least 4 characters\n                    </div>\n                    <div *ngIf=\"formControls.confirmPassword.errors.mustMatch\">\n                      Your password and confirmation password must match\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"row pt-3 mt-1\">\n                <div class=\"col-12\">\n                  <div class=\"text-right\">\n                    <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                      Reset\n                    </button>\n                    <button\n                      class=\"btn btn-space btn-primary\"\n                      type=\"submit\"\n                      [disabled]=\"form.invalid\"\n                    >\n                      Submit\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </form>\n          </div>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""], components: [{ type: i2.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.FieldAutoFocusDirective, selector: "[valtimoFieldAutoFocus]" }, { type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PasswordComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-password', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget *ngIf=\"profile\">\n        <div>\n          <div class=\"card-body\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\">\n                    <strong>Last password changed</strong>\n                  </div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.last_password_reset }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div *ngIf=\"errorMsg\" class=\"bg-danger text-white mb-0 p-3 text-center\">\n            {{ errorMsg }}\n          </div>\n          <div class=\"card-body-contrast p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"password\"\n                  >New password</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"password\"\n                    id=\"password\"\n                    minlength=\"4\"\n                    maxlength=\"50\"\n                    formControlName=\"password\"\n                    class=\"form-control\"\n                    placeholder=\"Your new password\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.password.touched && formControls.password.valid,\n                      'is-invalid': formControls.password.touched && formControls.password.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.password.touched && formControls.password.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.password.errors.required\">\n                      Your password is required\n                    </div>\n                    <div *ngIf=\"formControls.password.errors.pattern\">\n                      It expects at least 1 lowercase letter, 1 uppercase letter, 1 digit and 1\n                      special characters. The length should be greater than 4 characters. The\n                      sequence of the characters is not important.\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"confirmPassword\"\n                  >New password confirmation</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"password\"\n                    id=\"confirmPassword\"\n                    minlength=\"4\"\n                    maxlength=\"50\"\n                    formControlName=\"confirmPassword\"\n                    class=\"form-control\"\n                    placeholder=\"Your new password confirmation\"\n                    [ngClass]=\"{\n                      'is-valid':\n                        formControls.confirmPassword.touched && formControls.confirmPassword.valid,\n                      'is-invalid':\n                        formControls.confirmPassword.touched && formControls.confirmPassword.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"\n                      formControls.confirmPassword.touched && formControls.confirmPassword.errors\n                    \"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.confirmPassword.errors.required\">\n                      Your new password confirmation is required\n                    </div>\n                    <div *ngIf=\"formControls.confirmPassword.errors.minlength\">\n                      Your new password confirmation is required to be at least 4 characters\n                    </div>\n                    <div *ngIf=\"formControls.confirmPassword.errors.mustMatch\">\n                      Your password and confirmation password must match\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"row pt-3 mt-1\">\n                <div class=\"col-12\">\n                  <div class=\"text-right\">\n                    <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                      Reset\n                    </button>\n                    <button\n                      class=\"btn btn-space btn-primary\"\n                      type=\"submit\"\n                      [disabled]=\"form.invalid\"\n                    >\n                      Submit\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </form>\n          </div>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: i2.AlertService }]; } });
@@ -224,10 +224,10 @@ const routes = [
 ];
 class AccountRoutingModule {
 }
-AccountRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AccountRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountRoutingModule, imports: [CommonModule, i1$1.RouterModule], exports: [RouterModule] });
-AccountRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountRoutingModule, imports: [[CommonModule, RouterModule.forChild(routes)], RouterModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountRoutingModule, decorators: [{
+AccountRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AccountRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountRoutingModule, imports: [CommonModule, i1$1.RouterModule], exports: [RouterModule] });
+AccountRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountRoutingModule, imports: [[CommonModule, RouterModule.forChild(routes)], RouterModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -253,8 +253,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class AccountModule {
 }
-AccountModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AccountModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountModule, declarations: [ProfileComponent, PasswordComponent], imports: [CommonModule,
+AccountModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AccountModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountModule, declarations: [ProfileComponent, PasswordComponent], imports: [CommonModule,
         AccountRoutingModule,
         WidgetModule,
         ListModule,
@@ -262,7 +262,7 @@ AccountModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         FormsModule, i3.TranslateModule, ReactiveFormsModule,
         UploaderModule,
         AlertModule], exports: [ProfileComponent, PasswordComponent] });
-AccountModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountModule, providers: [], imports: [[
+AccountModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountModule, providers: [], imports: [[
             CommonModule,
             AccountRoutingModule,
             WidgetModule,
@@ -280,7 +280,7 @@ AccountModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             UploaderModule,
             AlertModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ProfileComponent, PasswordComponent],

package/fesm2020/valtimo-account.mjs

@@ -89,9 +89,9 @@ class ProfileComponent {
         this.initData();
     }
 }
-ProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProfileComponent, deps: [{ token: i1.FormBuilder }, { token: i2.AlertService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
-ProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: ProfileComponent, selector: "valtimo-profile", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget *ngIf=\"profile\">\n        <div>\n          <div class=\"card-body\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Nickname</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ profile.nickname }}</div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Email</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ profile.email }}</div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Authorities</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    <span\n                      class=\"badge badge-pill badge-success mb-1 mr-1\"\n                      *ngFor=\"let role of profile.roles\"\n                      >{{ role }}</span\n                    >\n                  </div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Account status</strong></div>\n                  <div\n                    class=\"col-12 col-sm-8 col-lg-6\"\n                    [ngClass]=\"{'text-danger': profile.blocked}\"\n                  >\n                    {{ profile.blocked ? 'Blocked' : 'Activated' }}\n                  </div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Account created</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.created_at }}\n                  </div>\n                </div>\n\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Last updated</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.updated_at }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"card-body-contrast p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"firstName\"\n                  >First name</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"text\"\n                    id=\"firstName\"\n                    formControlName=\"firstName\"\n                    class=\"form-control\"\n                    placeholder=\"Your first name\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.firstName.touched && formControls.firstName.valid,\n                      'is-invalid': formControls.firstName.touched && formControls.firstName.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.firstName.touched && formControls.firstName.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.firstName.errors.required\">\n                      Your first name is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"lastName\"\n                  >Last name</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"text\"\n                    id=\"lastName\"\n                    formControlName=\"lastName\"\n                    class=\"form-control\"\n                    placeholder=\"Your last name\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.lastName.touched && formControls.lastName.valid,\n                      'is-invalid': formControls.lastName.touched && formControls.lastName.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.lastName.touched && formControls.lastName.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.lastName.errors.required\">\n                      Your last name is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"langKey\"\n                  >Language</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <select\n                    id=\"langKey\"\n                    formControlName=\"langKey\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.langKey.touched && formControls.langKey.valid,\n                      'is-invalid': formControls.langKey.touched && formControls.langKey.errors\n                    }\"\n                    required\n                  >\n                    <option\n                      *ngFor=\"let lang of translate.getLangs()\"\n                      [value]=\"lang\"\n                      [selected]=\"lang === translate.currentLang\"\n                    >\n                      {{ 'settings.language.options.' + lang | translate }}\n                    </option>\n                  </select>\n                  <div\n                    *ngIf=\"formControls.langKey.touched && formControls.langKey.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.langKey.errors.required\">\n                      Your language is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"row pt-3 mt-1\">\n                <div class=\"col-12\">\n                  <div class=\"text-right\">\n                    <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                      Reset\n                    </button>\n                    <button\n                      class=\"btn btn-space btn-primary\"\n                      type=\"submit\"\n                      [disabled]=\"form.invalid\"\n                    >\n                      Submit\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </form>\n          </div>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""], components: [{ type: i2.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.FieldAutoFocusDirective, selector: "[valtimoFieldAutoFocus]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "translate": i3.TranslatePipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: ProfileComponent, decorators: [{
+ProfileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProfileComponent, deps: [{ token: i1.FormBuilder }, { token: i2.AlertService }, { token: i3.TranslateService }], target: i0.ɵɵFactoryTarget.Component });
+ProfileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: ProfileComponent, selector: "valtimo-profile", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget *ngIf=\"profile\">\n        <div>\n          <div class=\"card-body\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Nickname</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ profile.nickname }}</div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Email</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ profile.email }}</div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Authorities</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    <span\n                      class=\"badge badge-pill badge-success mb-1 mr-1\"\n                      *ngFor=\"let role of profile.roles\"\n                      >{{ role }}</span\n                    >\n                  </div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Account status</strong></div>\n                  <div\n                    class=\"col-12 col-sm-8 col-lg-6\"\n                    [ngClass]=\"{'text-danger': profile.blocked}\"\n                  >\n                    {{ profile.blocked ? 'Blocked' : 'Activated' }}\n                  </div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Account created</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.created_at }}\n                  </div>\n                </div>\n\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Last updated</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.updated_at }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"card-body-contrast p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"firstName\"\n                  >First name</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"text\"\n                    id=\"firstName\"\n                    formControlName=\"firstName\"\n                    class=\"form-control\"\n                    placeholder=\"Your first name\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.firstName.touched && formControls.firstName.valid,\n                      'is-invalid': formControls.firstName.touched && formControls.firstName.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.firstName.touched && formControls.firstName.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.firstName.errors.required\">\n                      Your first name is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"lastName\"\n                  >Last name</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"text\"\n                    id=\"lastName\"\n                    formControlName=\"lastName\"\n                    class=\"form-control\"\n                    placeholder=\"Your last name\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.lastName.touched && formControls.lastName.valid,\n                      'is-invalid': formControls.lastName.touched && formControls.lastName.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.lastName.touched && formControls.lastName.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.lastName.errors.required\">\n                      Your last name is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"langKey\"\n                  >Language</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <select\n                    id=\"langKey\"\n                    formControlName=\"langKey\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.langKey.touched && formControls.langKey.valid,\n                      'is-invalid': formControls.langKey.touched && formControls.langKey.errors\n                    }\"\n                    required\n                  >\n                    <option\n                      *ngFor=\"let lang of translate.getLangs()\"\n                      [value]=\"lang\"\n                      [selected]=\"lang === translate.currentLang\"\n                    >\n                      {{ 'settings.language.options.' + lang | translate }}\n                    </option>\n                  </select>\n                  <div\n                    *ngIf=\"formControls.langKey.touched && formControls.langKey.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.langKey.errors.required\">\n                      Your language is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"row pt-3 mt-1\">\n                <div class=\"col-12\">\n                  <div class=\"text-right\">\n                    <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                      Reset\n                    </button>\n                    <button\n                      class=\"btn btn-space btn-primary\"\n                      type=\"submit\"\n                      [disabled]=\"form.invalid\"\n                    >\n                      Submit\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </form>\n          </div>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""], components: [{ type: i2.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.FieldAutoFocusDirective, selector: "[valtimoFieldAutoFocus]" }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }], pipes: { "translate": i3.TranslatePipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: ProfileComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-profile', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget *ngIf=\"profile\">\n        <div>\n          <div class=\"card-body\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Nickname</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ profile.nickname }}</div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Email</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">{{ profile.email }}</div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Authorities</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    <span\n                      class=\"badge badge-pill badge-success mb-1 mr-1\"\n                      *ngFor=\"let role of profile.roles\"\n                      >{{ role }}</span\n                    >\n                  </div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Account status</strong></div>\n                  <div\n                    class=\"col-12 col-sm-8 col-lg-6\"\n                    [ngClass]=\"{'text-danger': profile.blocked}\"\n                  >\n                    {{ profile.blocked ? 'Blocked' : 'Activated' }}\n                  </div>\n                </div>\n\n                <div class=\"row mb-3\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Account created</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.created_at }}\n                  </div>\n                </div>\n\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\"><strong>Last updated</strong></div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.updated_at }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div class=\"card-body-contrast p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"firstName\"\n                  >First name</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"text\"\n                    id=\"firstName\"\n                    formControlName=\"firstName\"\n                    class=\"form-control\"\n                    placeholder=\"Your first name\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.firstName.touched && formControls.firstName.valid,\n                      'is-invalid': formControls.firstName.touched && formControls.firstName.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.firstName.touched && formControls.firstName.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.firstName.errors.required\">\n                      Your first name is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"lastName\"\n                  >Last name</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"text\"\n                    id=\"lastName\"\n                    formControlName=\"lastName\"\n                    class=\"form-control\"\n                    placeholder=\"Your last name\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.lastName.touched && formControls.lastName.valid,\n                      'is-invalid': formControls.lastName.touched && formControls.lastName.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.lastName.touched && formControls.lastName.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.lastName.errors.required\">\n                      Your last name is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"langKey\"\n                  >Language</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <select\n                    id=\"langKey\"\n                    formControlName=\"langKey\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.langKey.touched && formControls.langKey.valid,\n                      'is-invalid': formControls.langKey.touched && formControls.langKey.errors\n                    }\"\n                    required\n                  >\n                    <option\n                      *ngFor=\"let lang of translate.getLangs()\"\n                      [value]=\"lang\"\n                      [selected]=\"lang === translate.currentLang\"\n                    >\n                      {{ 'settings.language.options.' + lang | translate }}\n                    </option>\n                  </select>\n                  <div\n                    *ngIf=\"formControls.langKey.touched && formControls.langKey.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.langKey.errors.required\">\n                      Your language is required\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"row pt-3 mt-1\">\n                <div class=\"col-12\">\n                  <div class=\"text-right\">\n                    <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                      Reset\n                    </button>\n                    <button\n                      class=\"btn btn-space btn-primary\"\n                      type=\"submit\"\n                      [disabled]=\"form.invalid\"\n                    >\n                      Submit\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </form>\n          </div>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: i2.AlertService }, { type: i3.TranslateService }]; } });
@@ -186,9 +186,9 @@ class PasswordComponent {
         this.initData();
     }
 }
-PasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PasswordComponent, deps: [{ token: i1.FormBuilder }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component });
-PasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: PasswordComponent, selector: "valtimo-password", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget *ngIf=\"profile\">\n        <div>\n          <div class=\"card-body\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\">\n                    <strong>Last password changed</strong>\n                  </div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.last_password_reset }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div *ngIf=\"errorMsg\" class=\"bg-danger text-white mb-0 p-3 text-center\">\n            {{ errorMsg }}\n          </div>\n          <div class=\"card-body-contrast p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"password\"\n                  >New password</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"password\"\n                    id=\"password\"\n                    minlength=\"4\"\n                    maxlength=\"50\"\n                    formControlName=\"password\"\n                    class=\"form-control\"\n                    placeholder=\"Your new password\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.password.touched && formControls.password.valid,\n                      'is-invalid': formControls.password.touched && formControls.password.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.password.touched && formControls.password.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.password.errors.required\">\n                      Your password is required\n                    </div>\n                    <div *ngIf=\"formControls.password.errors.pattern\">\n                      It expects at least 1 lowercase letter, 1 uppercase letter, 1 digit and 1\n                      special characters. The length should be greater than 4 characters. The\n                      sequence of the characters is not important.\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"confirmPassword\"\n                  >New password confirmation</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"password\"\n                    id=\"confirmPassword\"\n                    minlength=\"4\"\n                    maxlength=\"50\"\n                    formControlName=\"confirmPassword\"\n                    class=\"form-control\"\n                    placeholder=\"Your new password confirmation\"\n                    [ngClass]=\"{\n                      'is-valid':\n                        formControls.confirmPassword.touched && formControls.confirmPassword.valid,\n                      'is-invalid':\n                        formControls.confirmPassword.touched && formControls.confirmPassword.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"\n                      formControls.confirmPassword.touched && formControls.confirmPassword.errors\n                    \"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.confirmPassword.errors.required\">\n                      Your new password confirmation is required\n                    </div>\n                    <div *ngIf=\"formControls.confirmPassword.errors.minlength\">\n                      Your new password confirmation is required to be at least 4 characters\n                    </div>\n                    <div *ngIf=\"formControls.confirmPassword.errors.mustMatch\">\n                      Your password and confirmation password must match\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"row pt-3 mt-1\">\n                <div class=\"col-12\">\n                  <div class=\"text-right\">\n                    <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                      Reset\n                    </button>\n                    <button\n                      class=\"btn btn-space btn-primary\"\n                      type=\"submit\"\n                      [disabled]=\"form.invalid\"\n                    >\n                      Submit\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </form>\n          </div>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""], components: [{ type: i2.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.FieldAutoFocusDirective, selector: "[valtimoFieldAutoFocus]" }, { type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: PasswordComponent, decorators: [{
+PasswordComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PasswordComponent, deps: [{ token: i1.FormBuilder }, { token: i2.AlertService }], target: i0.ɵɵFactoryTarget.Component });
+PasswordComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.12", type: PasswordComponent, selector: "valtimo-password", ngImport: i0, template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget *ngIf=\"profile\">\n        <div>\n          <div class=\"card-body\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\">\n                    <strong>Last password changed</strong>\n                  </div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.last_password_reset }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div *ngIf=\"errorMsg\" class=\"bg-danger text-white mb-0 p-3 text-center\">\n            {{ errorMsg }}\n          </div>\n          <div class=\"card-body-contrast p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"password\"\n                  >New password</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"password\"\n                    id=\"password\"\n                    minlength=\"4\"\n                    maxlength=\"50\"\n                    formControlName=\"password\"\n                    class=\"form-control\"\n                    placeholder=\"Your new password\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.password.touched && formControls.password.valid,\n                      'is-invalid': formControls.password.touched && formControls.password.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.password.touched && formControls.password.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.password.errors.required\">\n                      Your password is required\n                    </div>\n                    <div *ngIf=\"formControls.password.errors.pattern\">\n                      It expects at least 1 lowercase letter, 1 uppercase letter, 1 digit and 1\n                      special characters. The length should be greater than 4 characters. The\n                      sequence of the characters is not important.\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"confirmPassword\"\n                  >New password confirmation</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"password\"\n                    id=\"confirmPassword\"\n                    minlength=\"4\"\n                    maxlength=\"50\"\n                    formControlName=\"confirmPassword\"\n                    class=\"form-control\"\n                    placeholder=\"Your new password confirmation\"\n                    [ngClass]=\"{\n                      'is-valid':\n                        formControls.confirmPassword.touched && formControls.confirmPassword.valid,\n                      'is-invalid':\n                        formControls.confirmPassword.touched && formControls.confirmPassword.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"\n                      formControls.confirmPassword.touched && formControls.confirmPassword.errors\n                    \"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.confirmPassword.errors.required\">\n                      Your new password confirmation is required\n                    </div>\n                    <div *ngIf=\"formControls.confirmPassword.errors.minlength\">\n                      Your new password confirmation is required to be at least 4 characters\n                    </div>\n                    <div *ngIf=\"formControls.confirmPassword.errors.mustMatch\">\n                      Your password and confirmation password must match\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"row pt-3 mt-1\">\n                <div class=\"col-12\">\n                  <div class=\"text-right\">\n                    <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                      Reset\n                    </button>\n                    <button\n                      class=\"btn btn-space btn-primary\"\n                      type=\"submit\"\n                      [disabled]=\"form.invalid\"\n                    >\n                      Submit\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </form>\n          </div>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""], components: [{ type: i2.WidgetComponent, selector: "valtimo-widget", inputs: ["type", "name", "icon", "contrast", "divider", "title", "subtitle", "collapseAble", "collapse", "additionalClasses"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2.FieldAutoFocusDirective, selector: "[valtimoFieldAutoFocus]" }, { type: i1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: PasswordComponent, decorators: [{
             type: Component,
             args: [{ selector: 'valtimo-password', template: "<!--\n  ~ Copyright 2015-2020 Ritense BV, the Netherlands.\n  ~\n  ~ Licensed under EUPL, Version 1.2 (the \"License\");\n  ~ you may not use this file except in compliance with the License.\n  ~ You may obtain a copy of the License at\n  ~\n  ~ https://joinup.ec.europa.eu/collection/eupl/eupl-text-eupl-12\n  ~\n  ~ Unless required by applicable law or agreed to in writing, software\n  ~ distributed under the License is distributed on an \"AS IS\" basis,\n  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n  ~ See the License for the specific language governing permissions and\n  ~ limitations under the License.\n  -->\n\n<div class=\"main-content\">\n  <div class=\"container-fluid\">\n    <div class=\"col-12 px-0 mb-5\">\n      <valtimo-widget *ngIf=\"profile\">\n        <div>\n          <div class=\"card-body\">\n            <div class=\"row py-5\">\n              <div class=\"col-12\">\n                <div class=\"row\">\n                  <div class=\"col-12 col-sm-3 text-sm-right\">\n                    <strong>Last password changed</strong>\n                  </div>\n                  <div class=\"col-12 col-sm-8 col-lg-6\">\n                    {{ profile.humanize_dates.last_password_reset }}\n                  </div>\n                </div>\n              </div>\n            </div>\n          </div>\n          <div *ngIf=\"errorMsg\" class=\"bg-danger text-white mb-0 p-3 text-center\">\n            {{ errorMsg }}\n          </div>\n          <div class=\"card-body-contrast p-5\">\n            <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"password\"\n                  >New password</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    valtimoFieldAutoFocus\n                    type=\"password\"\n                    id=\"password\"\n                    minlength=\"4\"\n                    maxlength=\"50\"\n                    formControlName=\"password\"\n                    class=\"form-control\"\n                    placeholder=\"Your new password\"\n                    [ngClass]=\"{\n                      'is-valid': formControls.password.touched && formControls.password.valid,\n                      'is-invalid': formControls.password.touched && formControls.password.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"formControls.password.touched && formControls.password.errors\"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.password.errors.required\">\n                      Your password is required\n                    </div>\n                    <div *ngIf=\"formControls.password.errors.pattern\">\n                      It expects at least 1 lowercase letter, 1 uppercase letter, 1 digit and 1\n                      special characters. The length should be greater than 4 characters. The\n                      sequence of the characters is not important.\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"form-group row\">\n                <label class=\"col-12 col-sm-3 col-form-label text-sm-right\" for=\"confirmPassword\"\n                  >New password confirmation</label\n                >\n                <div class=\"col-12 col-sm-8 col-lg-6\">\n                  <input\n                    type=\"password\"\n                    id=\"confirmPassword\"\n                    minlength=\"4\"\n                    maxlength=\"50\"\n                    formControlName=\"confirmPassword\"\n                    class=\"form-control\"\n                    placeholder=\"Your new password confirmation\"\n                    [ngClass]=\"{\n                      'is-valid':\n                        formControls.confirmPassword.touched && formControls.confirmPassword.valid,\n                      'is-invalid':\n                        formControls.confirmPassword.touched && formControls.confirmPassword.errors\n                    }\"\n                    required\n                  />\n                  <div\n                    *ngIf=\"\n                      formControls.confirmPassword.touched && formControls.confirmPassword.errors\n                    \"\n                    class=\"invalid-feedback\"\n                  >\n                    <div *ngIf=\"formControls.confirmPassword.errors.required\">\n                      Your new password confirmation is required\n                    </div>\n                    <div *ngIf=\"formControls.confirmPassword.errors.minlength\">\n                      Your new password confirmation is required to be at least 4 characters\n                    </div>\n                    <div *ngIf=\"formControls.confirmPassword.errors.mustMatch\">\n                      Your password and confirmation password must match\n                    </div>\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"row pt-3 mt-1\">\n                <div class=\"col-12\">\n                  <div class=\"text-right\">\n                    <button class=\"btn btn-space btn-secondary\" type=\"button\" (click)=\"reset()\">\n                      Reset\n                    </button>\n                    <button\n                      class=\"btn btn-space btn-primary\"\n                      type=\"submit\"\n                      [disabled]=\"form.invalid\"\n                    >\n                      Submit\n                    </button>\n                  </div>\n                </div>\n              </div>\n            </form>\n          </div>\n        </div>\n      </valtimo-widget>\n    </div>\n  </div>\n</div>\n", styles: [""] }]
         }], ctorParameters: function () { return [{ type: i1.FormBuilder }, { type: i2.AlertService }]; } });
@@ -224,10 +224,10 @@ const routes = [
 ];
 class AccountRoutingModule {
 }
-AccountRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AccountRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountRoutingModule, imports: [CommonModule, i1$1.RouterModule], exports: [RouterModule] });
-AccountRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountRoutingModule, imports: [[CommonModule, RouterModule.forChild(routes)], RouterModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountRoutingModule, decorators: [{
+AccountRoutingModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountRoutingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AccountRoutingModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountRoutingModule, imports: [CommonModule, i1$1.RouterModule], exports: [RouterModule] });
+AccountRoutingModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountRoutingModule, imports: [[CommonModule, RouterModule.forChild(routes)], RouterModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountRoutingModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],
@@ -253,8 +253,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
  */
 class AccountModule {
 }
-AccountModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-AccountModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountModule, declarations: [ProfileComponent, PasswordComponent], imports: [CommonModule,
+AccountModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+AccountModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountModule, declarations: [ProfileComponent, PasswordComponent], imports: [CommonModule,
         AccountRoutingModule,
         WidgetModule,
         ListModule,
@@ -262,7 +262,7 @@ AccountModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version:
         FormsModule, i3.TranslateModule, ReactiveFormsModule,
         UploaderModule,
         AlertModule], exports: [ProfileComponent, PasswordComponent] });
-AccountModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountModule, providers: [], imports: [[
+AccountModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountModule, providers: [], imports: [[
             CommonModule,
             AccountRoutingModule,
             WidgetModule,
@@ -280,7 +280,7 @@ AccountModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version:
             UploaderModule,
             AlertModule,
         ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: AccountModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: AccountModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [ProfileComponent, PasswordComponent],

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@valtimo/account",
   "license": "EUPL-1.2",
-  "version": "5.14.0",
+  "version": "5.15.0",
   "peerDependencies": {
     "moment": "^2.29.4",
     "@angular/common": "^13.2.3",