@myrmidon/auth-jwt-admin 7.1.1 → 8.0.2

package/README.md

@@ -1,24 +1,24 @@
-# AuthJwtAdmin
-
-This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.1.0.
-
-## Code scaffolding
-
-Run `ng generate component component-name --project auth-jwt-admin` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project auth-jwt-admin`.
-> Note: Don't forget to add `--project auth-jwt-admin` or else it will be added to the default project in your `angular.json` file. 
-
-## Build
-
-Run `ng build auth-jwt-admin` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Publishing
-
-After building your library with `ng build auth-jwt-admin`, go to the dist folder `cd dist/auth-jwt-admin` and run `npm publish`.
-
-## Running unit tests
-
-Run `ng test auth-jwt-admin` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+# AuthJwtAdmin
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 12.1.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project auth-jwt-admin` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project auth-jwt-admin`.
+> Note: Don't forget to add `--project auth-jwt-admin` or else it will be added to the default project in your `angular.json` file. 
+
+## Build
+
+Run `ng build auth-jwt-admin` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build auth-jwt-admin`, go to the dist folder `cd dist/auth-jwt-admin` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test auth-jwt-admin` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.

package/fesm2022/myrmidon-auth-jwt-admin.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, input, output, Component, effect } from '@angular/core';
+import { inject, Injectable, input, output, signal, Component, effect } from '@angular/core';
 import * as i1 from '@angular/forms';
 import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { MatSnackBar } from '@angular/material/snack-bar';
@@ -18,15 +18,15 @@ import { HttpClient, HttpParams } from '@angular/common/http';
 import { ErrorService, EnvService } from '@myrmidon/ngx-tools';
 import { BehaviorSubject, tap } from 'rxjs';
 import { PagedListStore } from '@myrmidon/paged-data-browsers';
-import * as i7 from '@angular/material/tooltip';
+import * as i6$1 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import * as i5$1 from '@angular/material/paginator';
+import * as i4$1 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
-import * as i1$1 from '@angular/common';
+import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i3$2 from '@angular/material/expansion';
+import * as i2$1 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i6$1 from '@angular/material/progress-bar';
+import * as i5$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { AuthJwtService, GravatarService } from '@myrmidon/auth-jwt-login';
 import { DialogService } from '@myrmidon/ngx-mat-tools';
@@ -223,10 +223,10 @@ class AuthJwtAccountService {
             .delete(this._env.get('apiUrl') + 'accounts/' + name)
             .pipe(catchError(this._error.handleError));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AuthJwtAccountService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AuthJwtAccountService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AuthJwtAccountService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AuthJwtAccountService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AuthJwtAccountService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AuthJwtAccountService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -398,10 +398,10 @@ class UserListRepository {
         });
         return promise;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UserListRepository, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UserListRepository, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserListRepository, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserListRepository, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UserListRepository, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserListRepository, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -409,9 +409,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 class PasswordStrengthBarComponent {
     constructor() {
         this._colors = ['#F00', '#F90', '#FF0', '#9F0', '#0F0'];
-        this.passwordToCheck = input();
+        this.passwordToCheck = input(...(ngDevMode ? [undefined, { debugName: "passwordToCheck" }] : []));
         this.strengthChange = output();
-        this.bars = [];
+        this.bars = signal([], ...(ngDevMode ? [{ debugName: "bars" }] : []));
     }
     measureStrength(p) {
         let force = 0;
@@ -468,16 +468,18 @@ class PasswordStrengthBarComponent {
         }
     }
     setBarColors(count, col) {
+        const bars = this.bars();
         for (let n = 0; n < count; n++) {
-            this.bars[n] = col;
+            bars[n] = col;
         }
+        this.bars.set(bars);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PasswordStrengthBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: PasswordStrengthBarComponent, isStandalone: true, selector: "auth-jwt-password-strength-bar", inputs: { passwordToCheck: { classPropertyName: "passwordToCheck", publicName: "passwordToCheck", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { strengthChange: "strengthChange" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"strength\">\r\n  <small>strength:</small>\r\n  <ul id=\"strengthBar\">\r\n    <li class=\"point\" [style.background-color]=\"bars[0]\"></li>\r\n    <li class=\"point\" [style.background-color]=\"bars[1]\"></li>\r\n    <li class=\"point\" [style.background-color]=\"bars[2]\"></li>\r\n    <li class=\"point\" [style.background-color]=\"bars[3]\"></li>\r\n    <li class=\"point\" [style.background-color]=\"bars[4]\"></li>\r\n  </ul>\r\n</div>\r\n", styles: ["ul#strengthBar{display:inline;list-style:none;margin:0 0 0 15px;padding:0;vertical-align:2px}li.point:last{margin:0!important}li.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;margin-right:1px;width:20px}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PasswordStrengthBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: PasswordStrengthBarComponent, isStandalone: true, selector: "auth-jwt-password-strength-bar", inputs: { passwordToCheck: { classPropertyName: "passwordToCheck", publicName: "passwordToCheck", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { strengthChange: "strengthChange" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"strength\">\n  <small>strength:</small>\n  <ul id=\"strengthBar\">\n    <li class=\"point\" [style.background-color]=\"bars()[0]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars()[1]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars()[2]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars()[3]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars()[4]\"></li>\n  </ul>\n</div>\n", styles: ["ul#strengthBar{display:inline;list-style:none;margin:0 0 0 15px;padding:0;vertical-align:2px}li.point:last{margin:0!important}li.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;margin-right:1px;width:20px}\n"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: PasswordStrengthBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PasswordStrengthBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'auth-jwt-password-strength-bar', template: "<div id=\"strength\">\r\n  <small>strength:</small>\r\n  <ul id=\"strengthBar\">\r\n    <li class=\"point\" [style.background-color]=\"bars[0]\"></li>\r\n    <li class=\"point\" [style.background-color]=\"bars[1]\"></li>\r\n    <li class=\"point\" [style.background-color]=\"bars[2]\"></li>\r\n    <li class=\"point\" [style.background-color]=\"bars[3]\"></li>\r\n    <li class=\"point\" [style.background-color]=\"bars[4]\"></li>\r\n  </ul>\r\n</div>\r\n", styles: ["ul#strengthBar{display:inline;list-style:none;margin:0 0 0 15px;padding:0;vertical-align:2px}li.point:last{margin:0!important}li.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;margin-right:1px;width:20px}\n"] }]
+            args: [{ selector: 'auth-jwt-password-strength-bar', template: "<div id=\"strength\">\n  <small>strength:</small>\n  <ul id=\"strengthBar\">\n    <li class=\"point\" [style.background-color]=\"bars()[0]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars()[1]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars()[2]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars()[3]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars()[4]\"></li>\n  </ul>\n</div>\n", styles: ["ul#strengthBar{display:inline;list-style:none;margin:0 0 0 15px;padding:0;vertical-align:2px}li.point:last{margin:0!important}li.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;margin-right:1px;width:20px}\n"] }]
         }] });
 
 /**
@@ -491,14 +493,15 @@ class AuthJwtRegistrationComponent {
         /**
          * True if the registration should be confirmed automatically.
          */
-        this.autoConfirm = input();
+        this.autoConfirm = input(...(ngDevMode ? [undefined, { debugName: "autoConfirm" }] : []));
         /**
          * Emitted when a user was successfully registered. Usually
          * you should handle this to move away from the registration
          * page.
          */
         this.registered = output();
-        this.hide = true;
+        this.busy = signal(undefined, ...(ngDevMode ? [{ debugName: "busy" }] : []));
+        this.hidePassword = signal(true, ...(ngDevMode ? [{ debugName: "hidePassword" }] : []));
         const formBuilder = inject(FormBuilder);
         // form
         this.email = formBuilder.control('', {
@@ -605,7 +608,7 @@ class AuthJwtRegistrationComponent {
     }
     onSubmit() {
         if (!this.form.valid ||
-            this.busy ||
+            this.busy() ||
             this.name.pending ||
             this.email.pending) {
             return;
@@ -617,28 +620,28 @@ class AuthJwtRegistrationComponent {
             lastName: this.lastName.value,
             password: this.password.value,
         };
-        this.busy = true;
+        this.busy.set(true);
         this._accountService
             .register(model, this.autoConfirm())
             .pipe(take(1))
             .subscribe({
             next: () => {
-                this.busy = false;
+                this.busy.set(false);
                 this._snackbar.open($localize `:auth-jwt-admin:Registration succeeded`, 'OK');
                 this._userRepository.reset();
                 this.registered.emit();
             },
             error: (error) => {
-                this.busy = false;
+                this.busy.set(false);
                 console.error('Registration  error' + (error ? JSON.stringify(error) : ''));
                 this._snackbar.open($localize `:auth-jwt-admin:Registration error`, 'OK');
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AuthJwtRegistrationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: AuthJwtRegistrationComponent, isStandalone: true, selector: "auth-jwt-registration", inputs: { autoConfirm: { classPropertyName: "autoConfirm", publicName: "autoConfirm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { registered: "registered" }, ngImport: i0, template: "<div>\n  <form role=\"form\" [formGroup]=\"form\" (submit)=\"onSubmit()\">\n    <fieldset>\n      <legend i18n=\"auth-jwt-admin\">registration</legend>\n      <!-- email -->\n      <div class=\"form-row\">\n        <mat-form-field>\n          <mat-label i18n>email</mat-label>\n          <input\n            matInput\n            type=\"email\"\n            id=\"email\"\n            maxlength=\"256\"\n            required\n            autofocus\n            spellcheck=\"false\"\n            [formControl]=\"email\"\n          />\n          @if ( $any(email).errors?.required && (email.dirty || email.touched) )\n          {\n          <mat-error i18n=\"auth-jwt-admin\">email required</mat-error>\n          } @if ($any(email).errors?.email && (email.dirty || email.touched)) {\n          <mat-error i18n=\"auth-jwt-admin\">invalid email</mat-error>\n          } @if ( $any(email).errors?.uniqueEmail && (email.dirty ||\n          email.touched) ) {\n          <mat-error i18n=\"auth-jwt-admin\">email already registered</mat-error>\n          }\n        </mat-form-field>\n        @if (email.pending) {\n        <mat-icon>hourglass</mat-icon>\n        }\n      </div>\n\n      <!-- name -->\n      <div class=\"form-row\">\n        <mat-form-field>\n          <mat-label i18n=\"auth-jwt-admin\">username</mat-label>\n          <input\n            matInput\n            type=\"text\"\n            id=\"name\"\n            maxlength=\"50\"\n            required\n            pattern=\"^[a-zA-Z][a-zA-Z0-9]{2,49}$\"\n            spellcheck=\"false\"\n            [formControl]=\"name\"\n          />\n          @if ($any(name).errors?.required && (name.dirty || name.touched)) {\n          <mat-error i18n=\"auth-jwt-admin\">username required</mat-error>\n          } @if ($any(name).errors?.pattern && (name.dirty || name.touched)) {\n          <mat-error i18n=\"auth-jwt-admin\">invalid username</mat-error>\n          } @if ( $any(name).errors?.uniqueName && (name.dirty || name.touched)\n          ) {\n          <mat-error i18n=\"auth-jwt-admin\"\n            >username already registered</mat-error\n          >\n          }\n        </mat-form-field>\n        @if (name.pending) {\n        <mat-icon>hourglass</mat-icon>\n        }\n      </div>\n\n      <!-- first name -->\n      <div>\n        <mat-form-field>\n          <mat-label i18n=\"auth-jwt-admin\">first name</mat-label>\n          <input\n            matInput\n            type=\"text\"\n            id=\"firstName\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\n            [formControl]=\"firstName\"\n          />\n          @if ( firstName.hasError('required') && (firstName.dirty ||\n          firstName.touched) ) {\n          <mat-error i18n=\"auth-jwt-admin\" class=\"text-danger small\">\n            first name required\n          </mat-error>\n          }\n        </mat-form-field>\n      </div>\n\n      <!-- last name -->\n      <div>\n        <mat-form-field>\n          <mat-label i18n=\"auth-jwt-admin\">last name</mat-label>\n          <input\n            matInput\n            type=\"text\"\n            id=\"lastName\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\n            [formControl]=\"lastName\"\n          />\n          @if ( lastName.hasError('required') && (lastName.dirty ||\n          lastName.touched) ) {\n          <mat-error i18n=\"auth-jwt-admin\" class=\"text-danger small\">\n            last name required\n          </mat-error>\n          }\n        </mat-form-field>\n      </div>\n\n      <!-- <div [formGroup]=\"passwords\"> -->\n      <!-- password -->\n      <div>\n        <mat-form-field>\n          <mat-label i18n=\"auth-jwt-admin\">password</mat-label>\n          <input\n            matInput\n            [type]=\"hide ? 'password' : 'text'\"\n            name=\"password\"\n            autocomplete=\"new-password\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\n            [formControl]=\"password\"\n          />\n          <button\n            type=\"button\"\n            mat-icon-button\n            matSuffix\n            (click)=\"hide = !hide\"\n            i18n-aria-label=\"auth-jwt-login\"\n            aria-label=\"Hide password\"\n            [attr.aria-pressed]=\"hide\"\n          >\n            <mat-icon>{{ hide ? \"visibility_off\" : \"visibility\" }}</mat-icon>\n          </button>\n          <auth-jwt-password-strength-bar [passwordToCheck]=\"password.value\">\n          </auth-jwt-password-strength-bar>\n          @if ( $any(password).errors?.required && (password.dirty ||\n          password.touched) ) {\n          <mat-error i18n=\"auth-jwt-admin\">password required</mat-error>\n          } @if ( $any(password).errors?.passwordtooshort && (password.dirty ||\n          password.touched) ) {\n          <mat-error i18n=\"auth-jwt-admin\">at least 8 characters</mat-error>\n          } @if ( $any(password).errors?.noupperinpassword && (password.dirty ||\n          password.touched) ) {\n          <mat-error i18n=\"auth-jwt-admin\"\n            >at least 1 uppercase letter</mat-error\n          >\n          } @if ( $any(password).errors?.nolowerinpassword && (password.dirty ||\n          password.touched) ) {\n          <mat-error i18n=\"auth-jwt-admin\"\n            >at least 1 lowercase letter</mat-error\n          >\n          } @if ( $any(password).errors?.nosymbolinpassword && (password.dirty\n          || password.touched) ) {\n          <mat-error i18n=\"auth-jwt-admin\"\n            >at least 1 punctuation/symbol</mat-error\n          >\n          }\n        </mat-form-field>\n      </div>\n\n      <!-- confirm password -->\n      <div>\n        <mat-form-field>\n          <mat-label i18n=\"auth-jwt-admin\">confirm password</mat-label>\n          <input\n            matInput\n            [type]=\"hide ? 'password' : 'text'\"\n            name=\"confirmPassword\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\n            [formControl]=\"confirmPassword\"\n          />\n        </mat-form-field>\n      </div>\n      @if (form.errors?.areequal && confirmPassword.touched) {\n      <div i18n=\"auth-jwt-admin\" class=\"error\">\n        password differs from confirmation password\n      </div>\n      }\n\n      <button\n        i18n=\"auth-jwt-admin\"\n        mat-flat-button\n        type=\"submit\"\n        color=\"primary\"\n        class=\"mat-primary\"\n        [disabled]=\"\n          form.invalid || form.pristine || busy || name.pending || email.pending\n        \"\n      >\n        register\n      </button>\n      @if (busy) {\n      <mat-progress-spinner diameter=\"20\"></mat-progress-spinner>\n      }\n    </fieldset>\n  </form>\n\n  <details>\n    <summary i18n=\"auth-jwt-admin\">Hints</summary>\n    <div class=\"info\">\n      <p i18n=\"auth-jwt-admin\">\n        To register a new user, you must provide his email address, choose a\n        password, and choose a username, which must be unique (you will be\n        notified if another user has already taken that name). The username must\n        include only letters/digits, start with a letter, and be no shorter than\n        3 characters, nor longer than 50.\n      </p>\n      <p i18n=\"auth-jwt-admin\">\n        To promote a decent security level, the password must include at least 8\n        characters, uppercase and lowercase letters, digits, and punctuation\n        (like dashes, stops, parentheses, etc.).\n      </p>\n      <p i18n=\"auth-jwt-admin\">\n        Once registered, if messaging is enabled on the server side the user\n        will receive an email message to the email address you specified; he\n        will have to click on the provided link to complete the registration\n        process. Otherwise, you should edit the newly created user and confirm\n        the email registration.\n      </p>\n    </div>\n  </details>\n</div>\n", styles: ["mat-form-field{width:400px}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}details{margin:8px}.info{column-width:600px}.error{color:red}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: PasswordStrengthBarComponent, selector: "auth-jwt-password-strength-bar", inputs: ["passwordToCheck"], outputs: ["strengthChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AuthJwtRegistrationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AuthJwtRegistrationComponent, isStandalone: true, selector: "auth-jwt-registration", inputs: { autoConfirm: { classPropertyName: "autoConfirm", publicName: "autoConfirm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { registered: "registered" }, ngImport: i0, template: "<div>\r\n  <form role=\"form\" [formGroup]=\"form\" (submit)=\"onSubmit()\">\r\n    <fieldset>\r\n      <legend i18n=\"auth-jwt-admin\">registration</legend>\r\n      <!-- email -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label i18n>email</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"email\"\r\n            id=\"email\"\r\n            maxlength=\"256\"\r\n            required\r\n            autofocus\r\n            spellcheck=\"false\"\r\n            [formControl]=\"email\"\r\n          />\r\n          @if ( $any(email).errors?.required && (email.dirty || email.touched) )\r\n          {\r\n          <mat-error i18n=\"auth-jwt-admin\">email required</mat-error>\r\n          } @if ($any(email).errors?.email && (email.dirty || email.touched)) {\r\n          <mat-error i18n=\"auth-jwt-admin\">invalid email</mat-error>\r\n          } @if ( $any(email).errors?.uniqueEmail && (email.dirty ||\r\n          email.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\">email already registered</mat-error>\r\n          }\r\n        </mat-form-field>\r\n        @if (email.pending) {\r\n        <mat-icon>hourglass</mat-icon>\r\n        }\r\n      </div>\r\n\r\n      <!-- name -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">username</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"name\"\r\n            maxlength=\"50\"\r\n            required\r\n            pattern=\"^[a-zA-Z][a-zA-Z0-9]{2,49}$\"\r\n            spellcheck=\"false\"\r\n            [formControl]=\"name\"\r\n          />\r\n          @if ($any(name).errors?.required && (name.dirty || name.touched)) {\r\n          <mat-error i18n=\"auth-jwt-admin\">username required</mat-error>\r\n          } @if ($any(name).errors?.pattern && (name.dirty || name.touched)) {\r\n          <mat-error i18n=\"auth-jwt-admin\">invalid username</mat-error>\r\n          } @if ( $any(name).errors?.uniqueName && (name.dirty || name.touched)\r\n          ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >username already registered</mat-error\r\n          >\r\n          }\r\n        </mat-form-field>\r\n        @if (name.pending) {\r\n        <mat-icon>hourglass</mat-icon>\r\n        }\r\n      </div>\r\n\r\n      <!-- first name -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">first name</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"firstName\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"firstName\"\r\n          />\r\n          @if ( firstName.hasError('required') && (firstName.dirty ||\r\n          firstName.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\" class=\"text-danger small\">\r\n            first name required\r\n          </mat-error>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- last name -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">last name</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"lastName\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"lastName\"\r\n          />\r\n          @if ( lastName.hasError('required') && (lastName.dirty ||\r\n          lastName.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\" class=\"text-danger small\">\r\n            last name required\r\n          </mat-error>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- <div [formGroup]=\"passwords\"> -->\r\n      <!-- password -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">password</mat-label>\r\n          <input\r\n            matInput\r\n            [type]=\"hidePassword() ? 'password' : 'text'\"\r\n            name=\"password\"\r\n            autocomplete=\"new-password\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"password\"\r\n          />\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matSuffix\r\n            (click)=\"hidePassword.set(!hidePassword())\"\r\n            i18n-aria-label=\"auth-jwt-login\"\r\n            aria-label=\"Hide password\"\r\n            [attr.aria-pressed]=\"hidePassword()\"\r\n          >\r\n            <mat-icon>{{\r\n              hidePassword() ? \"visibility_off\" : \"visibility\"\r\n            }}</mat-icon>\r\n          </button>\r\n          <auth-jwt-password-strength-bar [passwordToCheck]=\"password.value\">\r\n          </auth-jwt-password-strength-bar>\r\n          @if ( $any(password).errors?.required && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\">password required</mat-error>\r\n          } @if ( $any(password).errors?.passwordtooshort && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\">at least 8 characters</mat-error>\r\n          } @if ( $any(password).errors?.noupperinpassword && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >at least 1 uppercase letter</mat-error\r\n          >\r\n          } @if ( $any(password).errors?.nolowerinpassword && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >at least 1 lowercase letter</mat-error\r\n          >\r\n          } @if ( $any(password).errors?.nosymbolinpassword && (password.dirty\r\n          || password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >at least 1 punctuation/symbol</mat-error\r\n          >\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- confirm password -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">confirm password</mat-label>\r\n          <input\r\n            matInput\r\n            [type]=\"hidePassword() ? 'password' : 'text'\"\r\n            name=\"confirmPassword\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"confirmPassword\"\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n      @if (form.errors?.areequal && confirmPassword.touched) {\r\n      <div i18n=\"auth-jwt-admin\" class=\"error\">\r\n        password differs from confirmation password\r\n      </div>\r\n      }\r\n\r\n      <button\r\n        i18n=\"auth-jwt-admin\"\r\n        mat-flat-button\r\n        type=\"submit\"\r\n        color=\"primary\"\r\n        class=\"mat-primary\"\r\n        [disabled]=\"\r\n          form.invalid || form.pristine || busy() || name.pending || email.pending\r\n        \"\r\n      >\r\n        register\r\n      </button>\r\n      @if (busy()) {\r\n      <mat-progress-spinner diameter=\"20\"></mat-progress-spinner>\r\n      }\r\n    </fieldset>\r\n  </form>\r\n\r\n  <details>\r\n    <summary i18n=\"auth-jwt-admin\">Hints</summary>\r\n    <div class=\"info\">\r\n      <p i18n=\"auth-jwt-admin\">\r\n        To register a new user, you must provide his email address, choose a\r\n        password, and choose a username, which must be unique (you will be\r\n        notified if another user has already taken that name). The username must\r\n        include only letters/digits, start with a letter, and be no shorter than\r\n        3 characters, nor longer than 50.\r\n      </p>\r\n      <p i18n=\"auth-jwt-admin\">\r\n        To promote a decent security level, the password must include at least 8\r\n        characters, uppercase and lowercase letters, digits, and punctuation\r\n        (like dashes, stops, parentheses, etc.).\r\n      </p>\r\n      <p i18n=\"auth-jwt-admin\">\r\n        Once registered, if messaging is enabled on the server side the user\r\n        will receive an email message to the email address you specified; he\r\n        will have to click on the provided link to complete the registration\r\n        process. Otherwise, you should edit the newly created user and confirm\r\n        the email registration.\r\n      </p>\r\n    </div>\r\n  </details>\r\n</div>\r\n", styles: ["mat-form-field{width:400px}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}details{margin:8px}.info{column-width:600px}.error{color:red}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: PasswordStrengthBarComponent, selector: "auth-jwt-password-strength-bar", inputs: ["passwordToCheck"], outputs: ["strengthChange"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: AuthJwtRegistrationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AuthJwtRegistrationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'auth-jwt-registration', imports: [
                         ReactiveFormsModule,
@@ -648,7 +651,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                         MatInputModule,
                         MatProgressSpinnerModule,
                         PasswordStrengthBarComponent,
-                    ], template: "<div>\n  <form role=\"form\" [formGroup]=\"form\" (submit)=\"onSubmit()\">\n    <fieldset>\n      <legend i18n=\"auth-jwt-admin\">registration</legend>\n      <!-- email -->\n      <div class=\"form-row\">\n        <mat-form-field>\n          <mat-label i18n>email</mat-label>\n          <input\n            matInput\n            type=\"email\"\n            id=\"email\"\n            maxlength=\"256\"\n            required\n            autofocus\n            spellcheck=\"false\"\n            [formControl]=\"email\"\n          />\n          @if ( $any(email).errors?.required && (email.dirty || email.touched) )\n          {\n          <mat-error i18n=\"auth-jwt-admin\">email required</mat-error>\n          } @if ($any(email).errors?.email && (email.dirty || email.touched)) {\n          <mat-error i18n=\"auth-jwt-admin\">invalid email</mat-error>\n          } @if ( $any(email).errors?.uniqueEmail && (email.dirty ||\n          email.touched) ) {\n          <mat-error i18n=\"auth-jwt-admin\">email already registered</mat-error>\n          }\n        </mat-form-field>\n        @if (email.pending) {\n        <mat-icon>hourglass</mat-icon>\n        }\n      </div>\n\n      <!-- name -->\n      <div class=\"form-row\">\n        <mat-form-field>\n          <mat-label i18n=\"auth-jwt-admin\">username</mat-label>\n          <input\n            matInput\n            type=\"text\"\n            id=\"name\"\n            maxlength=\"50\"\n            required\n            pattern=\"^[a-zA-Z][a-zA-Z0-9]{2,49}$\"\n            spellcheck=\"false\"\n            [formControl]=\"name\"\n          />\n          @if ($any(name).errors?.required && (name.dirty || name.touched)) {\n          <mat-error i18n=\"auth-jwt-admin\">username required</mat-error>\n          } @if ($any(name).errors?.pattern && (name.dirty || name.touched)) {\n          <mat-error i18n=\"auth-jwt-admin\">invalid username</mat-error>\n          } @if ( $any(name).errors?.uniqueName && (name.dirty || name.touched)\n          ) {\n          <mat-error i18n=\"auth-jwt-admin\"\n            >username already registered</mat-error\n          >\n          }\n        </mat-form-field>\n        @if (name.pending) {\n        <mat-icon>hourglass</mat-icon>\n        }\n      </div>\n\n      <!-- first name -->\n      <div>\n        <mat-form-field>\n          <mat-label i18n=\"auth-jwt-admin\">first name</mat-label>\n          <input\n            matInput\n            type=\"text\"\n            id=\"firstName\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\n            [formControl]=\"firstName\"\n          />\n          @if ( firstName.hasError('required') && (firstName.dirty ||\n          firstName.touched) ) {\n          <mat-error i18n=\"auth-jwt-admin\" class=\"text-danger small\">\n            first name required\n          </mat-error>\n          }\n        </mat-form-field>\n      </div>\n\n      <!-- last name -->\n      <div>\n        <mat-form-field>\n          <mat-label i18n=\"auth-jwt-admin\">last name</mat-label>\n          <input\n            matInput\n            type=\"text\"\n            id=\"lastName\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\n            [formControl]=\"lastName\"\n          />\n          @if ( lastName.hasError('required') && (lastName.dirty ||\n          lastName.touched) ) {\n          <mat-error i18n=\"auth-jwt-admin\" class=\"text-danger small\">\n            last name required\n          </mat-error>\n          }\n        </mat-form-field>\n      </div>\n\n      <!-- <div [formGroup]=\"passwords\"> -->\n      <!-- password -->\n      <div>\n        <mat-form-field>\n          <mat-label i18n=\"auth-jwt-admin\">password</mat-label>\n          <input\n            matInput\n            [type]=\"hide ? 'password' : 'text'\"\n            name=\"password\"\n            autocomplete=\"new-password\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\n            [formControl]=\"password\"\n          />\n          <button\n            type=\"button\"\n            mat-icon-button\n            matSuffix\n            (click)=\"hide = !hide\"\n            i18n-aria-label=\"auth-jwt-login\"\n            aria-label=\"Hide password\"\n            [attr.aria-pressed]=\"hide\"\n          >\n            <mat-icon>{{ hide ? \"visibility_off\" : \"visibility\" }}</mat-icon>\n          </button>\n          <auth-jwt-password-strength-bar [passwordToCheck]=\"password.value\">\n          </auth-jwt-password-strength-bar>\n          @if ( $any(password).errors?.required && (password.dirty ||\n          password.touched) ) {\n          <mat-error i18n=\"auth-jwt-admin\">password required</mat-error>\n          } @if ( $any(password).errors?.passwordtooshort && (password.dirty ||\n          password.touched) ) {\n          <mat-error i18n=\"auth-jwt-admin\">at least 8 characters</mat-error>\n          } @if ( $any(password).errors?.noupperinpassword && (password.dirty ||\n          password.touched) ) {\n          <mat-error i18n=\"auth-jwt-admin\"\n            >at least 1 uppercase letter</mat-error\n          >\n          } @if ( $any(password).errors?.nolowerinpassword && (password.dirty ||\n          password.touched) ) {\n          <mat-error i18n=\"auth-jwt-admin\"\n            >at least 1 lowercase letter</mat-error\n          >\n          } @if ( $any(password).errors?.nosymbolinpassword && (password.dirty\n          || password.touched) ) {\n          <mat-error i18n=\"auth-jwt-admin\"\n            >at least 1 punctuation/symbol</mat-error\n          >\n          }\n        </mat-form-field>\n      </div>\n\n      <!-- confirm password -->\n      <div>\n        <mat-form-field>\n          <mat-label i18n=\"auth-jwt-admin\">confirm password</mat-label>\n          <input\n            matInput\n            [type]=\"hide ? 'password' : 'text'\"\n            name=\"confirmPassword\"\n            maxlength=\"50\"\n            required\n            spellcheck=\"false\"\n            [formControl]=\"confirmPassword\"\n          />\n        </mat-form-field>\n      </div>\n      @if (form.errors?.areequal && confirmPassword.touched) {\n      <div i18n=\"auth-jwt-admin\" class=\"error\">\n        password differs from confirmation password\n      </div>\n      }\n\n      <button\n        i18n=\"auth-jwt-admin\"\n        mat-flat-button\n        type=\"submit\"\n        color=\"primary\"\n        class=\"mat-primary\"\n        [disabled]=\"\n          form.invalid || form.pristine || busy || name.pending || email.pending\n        \"\n      >\n        register\n      </button>\n      @if (busy) {\n      <mat-progress-spinner diameter=\"20\"></mat-progress-spinner>\n      }\n    </fieldset>\n  </form>\n\n  <details>\n    <summary i18n=\"auth-jwt-admin\">Hints</summary>\n    <div class=\"info\">\n      <p i18n=\"auth-jwt-admin\">\n        To register a new user, you must provide his email address, choose a\n        password, and choose a username, which must be unique (you will be\n        notified if another user has already taken that name). The username must\n        include only letters/digits, start with a letter, and be no shorter than\n        3 characters, nor longer than 50.\n      </p>\n      <p i18n=\"auth-jwt-admin\">\n        To promote a decent security level, the password must include at least 8\n        characters, uppercase and lowercase letters, digits, and punctuation\n        (like dashes, stops, parentheses, etc.).\n      </p>\n      <p i18n=\"auth-jwt-admin\">\n        Once registered, if messaging is enabled on the server side the user\n        will receive an email message to the email address you specified; he\n        will have to click on the provided link to complete the registration\n        process. Otherwise, you should edit the newly created user and confirm\n        the email registration.\n      </p>\n    </div>\n  </details>\n</div>\n", styles: ["mat-form-field{width:400px}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}details{margin:8px}.info{column-width:600px}.error{color:red}\n"] }]
+                    ], template: "<div>\r\n  <form role=\"form\" [formGroup]=\"form\" (submit)=\"onSubmit()\">\r\n    <fieldset>\r\n      <legend i18n=\"auth-jwt-admin\">registration</legend>\r\n      <!-- email -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label i18n>email</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"email\"\r\n            id=\"email\"\r\n            maxlength=\"256\"\r\n            required\r\n            autofocus\r\n            spellcheck=\"false\"\r\n            [formControl]=\"email\"\r\n          />\r\n          @if ( $any(email).errors?.required && (email.dirty || email.touched) )\r\n          {\r\n          <mat-error i18n=\"auth-jwt-admin\">email required</mat-error>\r\n          } @if ($any(email).errors?.email && (email.dirty || email.touched)) {\r\n          <mat-error i18n=\"auth-jwt-admin\">invalid email</mat-error>\r\n          } @if ( $any(email).errors?.uniqueEmail && (email.dirty ||\r\n          email.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\">email already registered</mat-error>\r\n          }\r\n        </mat-form-field>\r\n        @if (email.pending) {\r\n        <mat-icon>hourglass</mat-icon>\r\n        }\r\n      </div>\r\n\r\n      <!-- name -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">username</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"name\"\r\n            maxlength=\"50\"\r\n            required\r\n            pattern=\"^[a-zA-Z][a-zA-Z0-9]{2,49}$\"\r\n            spellcheck=\"false\"\r\n            [formControl]=\"name\"\r\n          />\r\n          @if ($any(name).errors?.required && (name.dirty || name.touched)) {\r\n          <mat-error i18n=\"auth-jwt-admin\">username required</mat-error>\r\n          } @if ($any(name).errors?.pattern && (name.dirty || name.touched)) {\r\n          <mat-error i18n=\"auth-jwt-admin\">invalid username</mat-error>\r\n          } @if ( $any(name).errors?.uniqueName && (name.dirty || name.touched)\r\n          ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >username already registered</mat-error\r\n          >\r\n          }\r\n        </mat-form-field>\r\n        @if (name.pending) {\r\n        <mat-icon>hourglass</mat-icon>\r\n        }\r\n      </div>\r\n\r\n      <!-- first name -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">first name</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"firstName\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"firstName\"\r\n          />\r\n          @if ( firstName.hasError('required') && (firstName.dirty ||\r\n          firstName.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\" class=\"text-danger small\">\r\n            first name required\r\n          </mat-error>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- last name -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">last name</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"lastName\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"lastName\"\r\n          />\r\n          @if ( lastName.hasError('required') && (lastName.dirty ||\r\n          lastName.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\" class=\"text-danger small\">\r\n            last name required\r\n          </mat-error>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- <div [formGroup]=\"passwords\"> -->\r\n      <!-- password -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">password</mat-label>\r\n          <input\r\n            matInput\r\n            [type]=\"hidePassword() ? 'password' : 'text'\"\r\n            name=\"password\"\r\n            autocomplete=\"new-password\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"password\"\r\n          />\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matSuffix\r\n            (click)=\"hidePassword.set(!hidePassword())\"\r\n            i18n-aria-label=\"auth-jwt-login\"\r\n            aria-label=\"Hide password\"\r\n            [attr.aria-pressed]=\"hidePassword()\"\r\n          >\r\n            <mat-icon>{{\r\n              hidePassword() ? \"visibility_off\" : \"visibility\"\r\n            }}</mat-icon>\r\n          </button>\r\n          <auth-jwt-password-strength-bar [passwordToCheck]=\"password.value\">\r\n          </auth-jwt-password-strength-bar>\r\n          @if ( $any(password).errors?.required && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\">password required</mat-error>\r\n          } @if ( $any(password).errors?.passwordtooshort && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\">at least 8 characters</mat-error>\r\n          } @if ( $any(password).errors?.noupperinpassword && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >at least 1 uppercase letter</mat-error\r\n          >\r\n          } @if ( $any(password).errors?.nolowerinpassword && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >at least 1 lowercase letter</mat-error\r\n          >\r\n          } @if ( $any(password).errors?.nosymbolinpassword && (password.dirty\r\n          || password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >at least 1 punctuation/symbol</mat-error\r\n          >\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- confirm password -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">confirm password</mat-label>\r\n          <input\r\n            matInput\r\n            [type]=\"hidePassword() ? 'password' : 'text'\"\r\n            name=\"confirmPassword\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"confirmPassword\"\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n      @if (form.errors?.areequal && confirmPassword.touched) {\r\n      <div i18n=\"auth-jwt-admin\" class=\"error\">\r\n        password differs from confirmation password\r\n      </div>\r\n      }\r\n\r\n      <button\r\n        i18n=\"auth-jwt-admin\"\r\n        mat-flat-button\r\n        type=\"submit\"\r\n        color=\"primary\"\r\n        class=\"mat-primary\"\r\n        [disabled]=\"\r\n          form.invalid || form.pristine || busy() || name.pending || email.pending\r\n        \"\r\n      >\r\n        register\r\n      </button>\r\n      @if (busy()) {\r\n      <mat-progress-spinner diameter=\"20\"></mat-progress-spinner>\r\n      }\r\n    </fieldset>\r\n  </form>\r\n\r\n  <details>\r\n    <summary i18n=\"auth-jwt-admin\">Hints</summary>\r\n    <div class=\"info\">\r\n      <p i18n=\"auth-jwt-admin\">\r\n        To register a new user, you must provide his email address, choose a\r\n        password, and choose a username, which must be unique (you will be\r\n        notified if another user has already taken that name). The username must\r\n        include only letters/digits, start with a letter, and be no shorter than\r\n        3 characters, nor longer than 50.\r\n      </p>\r\n      <p i18n=\"auth-jwt-admin\">\r\n        To promote a decent security level, the password must include at least 8\r\n        characters, uppercase and lowercase letters, digits, and punctuation\r\n        (like dashes, stops, parentheses, etc.).\r\n      </p>\r\n      <p i18n=\"auth-jwt-admin\">\r\n        Once registered, if messaging is enabled on the server side the user\r\n        will receive an email message to the email address you specified; he\r\n        will have to click on the provided link to complete the registration\r\n        process. Otherwise, you should edit the newly created user and confirm\r\n        the email registration.\r\n      </p>\r\n    </div>\r\n  </details>\r\n</div>\r\n", styles: ["mat-form-field{width:400px}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}details{margin:8px}.info{column-width:600px}.error{color:red}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -659,11 +662,11 @@ class UserFilterComponent {
         /**
          * The filter.
          */
-        this.filter = input();
+        this.filter = input(...(ngDevMode ? [undefined, { debugName: "filter" }] : []));
         /**
          * Whether the filter is disabled.
          */
-        this.disabled = input();
+        this.disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : []));
         /**
          * Event emitted when the filter changes.
          */
@@ -710,10 +713,10 @@ class UserFilterComponent {
         this._filter = this.getFilter();
         this.filterChange.emit(this._filter);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UserFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.6", type: UserFilterComponent, isStandalone: true, selector: "auth-jwt-user-filter", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"apply()\">\r\n  <div class=\"form-row\">\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">name or ID</mat-label>\r\n      <input matInput [formControl]=\"name\" />\r\n      <button\r\n        mat-icon-button\r\n        matSuffix\r\n        type=\"button\"\r\n        (click)=\"reset()\"\r\n        i18n-matTooltip=\"auth-jwt-admin\"\r\n        matTooltip=\"Reset filters\"\r\n        [disabled]=\"disabled()\"\r\n      >\r\n        <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n      </button>\r\n    </mat-form-field>\r\n\r\n    <button\r\n      id=\"apply\"\r\n      type=\"submit\"\r\n      mat-icon-button\r\n      [disabled]=\"disabled()\"\r\n      i18n-matTooltip=\"auth-jwt-admin\"\r\n      matTooltip=\"Apply filters\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#apply{margin-top:-20px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: UserFilterComponent, isStandalone: true, selector: "auth-jwt-user-filter", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"apply()\">\r\n  <div class=\"form-row\">\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">name or ID</mat-label>\r\n      <input matInput [formControl]=\"name\" />\r\n      <button\r\n        mat-icon-button\r\n        matSuffix\r\n        type=\"button\"\r\n        (click)=\"reset()\"\r\n        i18n-matTooltip=\"auth-jwt-admin\"\r\n        matTooltip=\"Reset filters\"\r\n        [disabled]=\"disabled()\"\r\n      >\r\n        <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n      </button>\r\n    </mat-form-field>\r\n\r\n    <button\r\n      id=\"apply\"\r\n      type=\"submit\"\r\n      mat-icon-button\r\n      [disabled]=\"disabled()\"\r\n      i18n-matTooltip=\"auth-jwt-admin\"\r\n      matTooltip=\"Apply filters\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#apply{margin-top:-20px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UserFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'auth-jwt-user-filter', imports: [
                         ReactiveFormsModule,
@@ -731,10 +734,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
 class UserEditorComponent {
     constructor() {
         this._authService = inject(AuthJwtService);
+        this.unlocked = signal(undefined, ...(ngDevMode ? [{ debugName: "unlocked" }] : []));
         /**
          * The user to edit.
          */
-        this.user = input(undefined);
+        this.user = input(undefined, ...(ngDevMode ? [{ debugName: "user" }] : []));
         /**
          * Emitted when user changes.
          */
@@ -793,9 +797,8 @@ class UserEditorComponent {
             else {
                 this.roles.setValue(null);
             }
-            this.unlocked =
-                user.lockoutEnabled &&
-                    (!user.lockoutEnd || user.lockoutEnd < this._authService.getUTCDate());
+            this.unlocked.set(user.lockoutEnabled &&
+                (!user.lockoutEnd || user.lockoutEnd < this._authService.getUTCDate()));
         }
     }
     getUserFromForm() {
@@ -812,7 +815,7 @@ class UserEditorComponent {
         };
     }
     endLockout() {
-        if (this.unlocked) {
+        if (this.unlocked()) {
             return;
         }
         const user = this.getUserFromForm();
@@ -828,10 +831,10 @@ class UserEditorComponent {
         }
         this.userChange.emit(this.getUserFromForm());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UserEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: UserEditorComponent, isStandalone: true, selector: "auth-jwt-user-editor", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { userChange: "userChange", editorClose: "editorClose" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\n  <div class=\"form-row\">\n    <!-- email -->\n    <mat-form-field>\n      <mat-label i18n=\"auth-jwt-admin\">email</mat-label>\n      <input type=\"text\" matInput [formControl]=\"email\" />\n      @if (email.hasError('required') && (email.dirty || email.touched)) {\n      <mat-error i18n=\"auth-jwt-admin\"> email address required </mat-error>\n      } @if (email.hasError('pattern') && (email.dirty || email.touched)) {\n      <mat-error i18n=\"auth-jwt-admin\"> invalid email address </mat-error>\n      }\n    </mat-form-field>\n\n    <!-- emailConfirmed -->\n    <mat-checkbox [formControl]=\"emailConfirmed\" i18n=\"auth-jwt-admin\"\n      >email address confirmed</mat-checkbox\n    >\n  </div>\n\n  <!-- lockoutEnabled -->\n  <div class=\"form-row\">\n    <mat-checkbox [formControl]=\"lockoutEnabled\" i18n=\"auth-jwt-admin\"\n      >lockout enabled</mat-checkbox\n    >\n    <button\n      type=\"button\"\n      mat-icon-button\n      (click)=\"endLockout()\"\n      [disabled]=\"unlocked\"\n      i18n-matTooltip=\"auth-jwt-admin\"\n      matTooltip=\"Unlock this user if locked\"\n    >\n      <mat-icon class=\"mat-primary\">lock_open</mat-icon>\n    </button>\n  </div>\n\n  <div class=\"form-row\">\n    <!-- firstName -->\n    <mat-form-field>\n      <mat-label i18n=\"auth-jwt-admin\">first name</mat-label>\n      <input type=\"text\" matInput [formControl]=\"firstName\" />\n      @if ( firstName.hasError('required') && (firstName.dirty ||\n      firstName.touched) ) {\n      <mat-error i18n=\"auth-jwt-admin\"> first name required </mat-error>\n      } @if ( firstName.hasError('maxlength') && (firstName.dirty ||\n      firstName.touched) ) {\n      <mat-error i18n=\"auth-jwt-admin\"> first name too long </mat-error>\n      }\n    </mat-form-field>\n\n    <!-- lastName -->\n    <mat-form-field>\n      <mat-label i18n=\"auth-jwt-admin\">last name</mat-label>\n      <input type=\"text\" matInput [formControl]=\"lastName\" />\n      @if ( lastName.hasError('required') && (lastName.dirty ||\n      lastName.touched) ) {\n      <mat-error i18n=\"auth-jwt-admin\"> last name required </mat-error>\n      } @if ( lastName.hasError('maxlength') && (lastName.dirty ||\n      lastName.touched) ) {\n      <mat-error i18n=\"auth-jwt-admin\"> last name too long </mat-error>\n      }\n    </mat-form-field>\n  </div>\n\n  <!-- roles -->\n  <div>\n    <mat-form-field>\n      <mat-label i18n=\"auth-jwt-admin\">roles</mat-label>\n      <input type=\"text\" matInput [formControl]=\"roles\" />\n      @if (roles.hasError('maxlength') && (roles.dirty || roles.touched)) {\n      <mat-error i18n=\"auth-jwt-admin\"> too long </mat-error>\n      }\n      <mat-hint i18n>roles (separated by space)</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <!-- buttons -->\n  <br />\n  <div>\n    <button\n      type=\"button\"\n      mat-icon-button\n      i18n-matTooltip=\"auth-jwt-admin\"\n      matTooltip=\"Close\"\n      (click)=\"close()\"\n    >\n      <mat-icon class=\"mat-warn\">cancel</mat-icon>\n    </button>\n    <button\n      type=\"submit\"\n      mat-icon-button\n      color=\"primary\"\n      [disabled]=\"form.invalid\"\n      i18n-matTooltip=\"auth-jwt-admin\"\n      matTooltip=\"Save user\"\n    >\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\n    </button>\n  </div>\n</form>\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: UserEditorComponent, isStandalone: true, selector: "auth-jwt-user-editor", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { userChange: "userChange", editorClose: "editorClose" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- email -->\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">email</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"email\" />\r\n      @if (email.hasError('required') && (email.dirty || email.touched)) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> email address required </mat-error>\r\n      } @if (email.hasError('pattern') && (email.dirty || email.touched)) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> invalid email address </mat-error>\r\n      }\r\n    </mat-form-field>\r\n\r\n    <!-- emailConfirmed -->\r\n    <mat-checkbox [formControl]=\"emailConfirmed\" i18n=\"auth-jwt-admin\"\r\n      >email address confirmed</mat-checkbox\r\n    >\r\n  </div>\r\n\r\n  <!-- lockoutEnabled -->\r\n  <div class=\"form-row\">\r\n    <mat-checkbox [formControl]=\"lockoutEnabled\" i18n=\"auth-jwt-admin\"\r\n      >lockout enabled</mat-checkbox\r\n    >\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      (click)=\"endLockout()\"\r\n      [disabled]=\"unlocked()\"\r\n      i18n-matTooltip=\"auth-jwt-admin\"\r\n      matTooltip=\"Unlock this user if locked\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">lock_open</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"form-row\">\r\n    <!-- firstName -->\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">first name</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"firstName\" />\r\n      @if ( firstName.hasError('required') && (firstName.dirty ||\r\n      firstName.touched) ) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> first name required </mat-error>\r\n      } @if ( firstName.hasError('maxlength') && (firstName.dirty ||\r\n      firstName.touched) ) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> first name too long </mat-error>\r\n      }\r\n    </mat-form-field>\r\n\r\n    <!-- lastName -->\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">last name</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"lastName\" />\r\n      @if ( lastName.hasError('required') && (lastName.dirty ||\r\n      lastName.touched) ) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> last name required </mat-error>\r\n      } @if ( lastName.hasError('maxlength') && (lastName.dirty ||\r\n      lastName.touched) ) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> last name too long </mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- roles -->\r\n  <div>\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">roles</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"roles\" />\r\n      @if (roles.hasError('maxlength') && (roles.dirty || roles.touched)) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> too long </mat-error>\r\n      }\r\n      <mat-hint i18n>roles (separated by space)</mat-hint>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- buttons -->\r\n  <br />\r\n  <div>\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      i18n-matTooltip=\"auth-jwt-admin\"\r\n      matTooltip=\"Close\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">cancel</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      [disabled]=\"form.invalid\"\r\n      i18n-matTooltip=\"auth-jwt-admin\"\r\n      matTooltip=\"Save user\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", 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]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UserEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'auth-jwt-user-editor', imports: [
                         ReactiveFormsModule,
@@ -841,7 +844,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                         MatIconModule,
                         MatInputModule,
                         MatTooltipModule,
-                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\n  <div class=\"form-row\">\n    <!-- email -->\n    <mat-form-field>\n      <mat-label i18n=\"auth-jwt-admin\">email</mat-label>\n      <input type=\"text\" matInput [formControl]=\"email\" />\n      @if (email.hasError('required') && (email.dirty || email.touched)) {\n      <mat-error i18n=\"auth-jwt-admin\"> email address required </mat-error>\n      } @if (email.hasError('pattern') && (email.dirty || email.touched)) {\n      <mat-error i18n=\"auth-jwt-admin\"> invalid email address </mat-error>\n      }\n    </mat-form-field>\n\n    <!-- emailConfirmed -->\n    <mat-checkbox [formControl]=\"emailConfirmed\" i18n=\"auth-jwt-admin\"\n      >email address confirmed</mat-checkbox\n    >\n  </div>\n\n  <!-- lockoutEnabled -->\n  <div class=\"form-row\">\n    <mat-checkbox [formControl]=\"lockoutEnabled\" i18n=\"auth-jwt-admin\"\n      >lockout enabled</mat-checkbox\n    >\n    <button\n      type=\"button\"\n      mat-icon-button\n      (click)=\"endLockout()\"\n      [disabled]=\"unlocked\"\n      i18n-matTooltip=\"auth-jwt-admin\"\n      matTooltip=\"Unlock this user if locked\"\n    >\n      <mat-icon class=\"mat-primary\">lock_open</mat-icon>\n    </button>\n  </div>\n\n  <div class=\"form-row\">\n    <!-- firstName -->\n    <mat-form-field>\n      <mat-label i18n=\"auth-jwt-admin\">first name</mat-label>\n      <input type=\"text\" matInput [formControl]=\"firstName\" />\n      @if ( firstName.hasError('required') && (firstName.dirty ||\n      firstName.touched) ) {\n      <mat-error i18n=\"auth-jwt-admin\"> first name required </mat-error>\n      } @if ( firstName.hasError('maxlength') && (firstName.dirty ||\n      firstName.touched) ) {\n      <mat-error i18n=\"auth-jwt-admin\"> first name too long </mat-error>\n      }\n    </mat-form-field>\n\n    <!-- lastName -->\n    <mat-form-field>\n      <mat-label i18n=\"auth-jwt-admin\">last name</mat-label>\n      <input type=\"text\" matInput [formControl]=\"lastName\" />\n      @if ( lastName.hasError('required') && (lastName.dirty ||\n      lastName.touched) ) {\n      <mat-error i18n=\"auth-jwt-admin\"> last name required </mat-error>\n      } @if ( lastName.hasError('maxlength') && (lastName.dirty ||\n      lastName.touched) ) {\n      <mat-error i18n=\"auth-jwt-admin\"> last name too long </mat-error>\n      }\n    </mat-form-field>\n  </div>\n\n  <!-- roles -->\n  <div>\n    <mat-form-field>\n      <mat-label i18n=\"auth-jwt-admin\">roles</mat-label>\n      <input type=\"text\" matInput [formControl]=\"roles\" />\n      @if (roles.hasError('maxlength') && (roles.dirty || roles.touched)) {\n      <mat-error i18n=\"auth-jwt-admin\"> too long </mat-error>\n      }\n      <mat-hint i18n>roles (separated by space)</mat-hint>\n    </mat-form-field>\n  </div>\n\n  <!-- buttons -->\n  <br />\n  <div>\n    <button\n      type=\"button\"\n      mat-icon-button\n      i18n-matTooltip=\"auth-jwt-admin\"\n      matTooltip=\"Close\"\n      (click)=\"close()\"\n    >\n      <mat-icon class=\"mat-warn\">cancel</mat-icon>\n    </button>\n    <button\n      type=\"submit\"\n      mat-icon-button\n      color=\"primary\"\n      [disabled]=\"form.invalid\"\n      i18n-matTooltip=\"auth-jwt-admin\"\n      matTooltip=\"Save user\"\n    >\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\n    </button>\n  </div>\n</form>\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"] }]
+                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- email -->\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">email</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"email\" />\r\n      @if (email.hasError('required') && (email.dirty || email.touched)) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> email address required </mat-error>\r\n      } @if (email.hasError('pattern') && (email.dirty || email.touched)) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> invalid email address </mat-error>\r\n      }\r\n    </mat-form-field>\r\n\r\n    <!-- emailConfirmed -->\r\n    <mat-checkbox [formControl]=\"emailConfirmed\" i18n=\"auth-jwt-admin\"\r\n      >email address confirmed</mat-checkbox\r\n    >\r\n  </div>\r\n\r\n  <!-- lockoutEnabled -->\r\n  <div class=\"form-row\">\r\n    <mat-checkbox [formControl]=\"lockoutEnabled\" i18n=\"auth-jwt-admin\"\r\n      >lockout enabled</mat-checkbox\r\n    >\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      (click)=\"endLockout()\"\r\n      [disabled]=\"unlocked()\"\r\n      i18n-matTooltip=\"auth-jwt-admin\"\r\n      matTooltip=\"Unlock this user if locked\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">lock_open</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"form-row\">\r\n    <!-- firstName -->\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">first name</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"firstName\" />\r\n      @if ( firstName.hasError('required') && (firstName.dirty ||\r\n      firstName.touched) ) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> first name required </mat-error>\r\n      } @if ( firstName.hasError('maxlength') && (firstName.dirty ||\r\n      firstName.touched) ) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> first name too long </mat-error>\r\n      }\r\n    </mat-form-field>\r\n\r\n    <!-- lastName -->\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">last name</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"lastName\" />\r\n      @if ( lastName.hasError('required') && (lastName.dirty ||\r\n      lastName.touched) ) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> last name required </mat-error>\r\n      } @if ( lastName.hasError('maxlength') && (lastName.dirty ||\r\n      lastName.touched) ) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> last name too long </mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- roles -->\r\n  <div>\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">roles</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"roles\" />\r\n      @if (roles.hasError('maxlength') && (roles.dirty || roles.touched)) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> too long </mat-error>\r\n      }\r\n      <mat-hint i18n>roles (separated by space)</mat-hint>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- buttons -->\r\n  <br />\r\n  <div>\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      i18n-matTooltip=\"auth-jwt-admin\"\r\n      matTooltip=\"Close\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">cancel</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      [disabled]=\"form.invalid\"\r\n      i18n-matTooltip=\"auth-jwt-admin\"\r\n      matTooltip=\"Save user\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"] }]
         }], ctorParameters: () => [] });
 
 /**
@@ -894,10 +897,10 @@ class UserListComponent {
     getGravatarUrl(email, options) {
         return this._gravatarService.buildGravatarUrl(email, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UserListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: UserListComponent, isStandalone: true, selector: "auth-jwt-user-list", ngImport: i0, template: "<div id=\"container\">\n  <div>\n    <!-- filters -->\n    <div id=\"filters\">\n      <auth-jwt-user-filter\n        [filter]=\"filter$ | async\"\n        (filterChange)=\"onFilterChange($event)\"\n      ></auth-jwt-user-filter>\n    </div>\n\n    <!-- list -->\n    @if (page$ | async; as page) {\n    <div id=\"list\">\n      @if (loading$ | async) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n      }\n      <table>\n        <thead>\n          <td></td>\n          <td></td>\n          <th i18n=\"auth-jwt-admin\">name</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">first</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">last</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">email</th>\n          <th i18n=\"auth-jwt-admin\">roles</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">lock end</th>\n        </thead>\n        <tbody>\n          @for (user of page.items; track user) {\n          <tr>\n            <td class=\"fit-width\">\n              <button\n                mat-icon-button\n                type=\"button\"\n                i18n-matTooltip=\"auth-jwt-admin\"\n                matTooltip=\"Edit this user\"\n                color=\"primary\"\n                (click)=\"setActiveUser(user)\"\n              >\n                <mat-icon class=\"mat-primary\">mode_edit</mat-icon>\n              </button>\n              <button\n                mat-icon-button\n                type=\"button\"\n                i18n-matTooltip=\"auth-jwt-admin\"\n                matTooltip=\"Delete this user\"\n                color=\"warn\"\n                (click)=\"deleteUser(user)\"\n              >\n                <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\n              </button>\n            </td>\n            <td class=\"fit-width\">\n              <img\n                alt=\"avatar\"\n                [src]=\"getGravatarUrl(user.email, { size: '32' })\"\n                [alt]=\"user.userName\"\n              />\n            </td>\n            <td>{{ user.userName }}</td>\n            <td class=\"noif-lt-md\">{{ user.firstName }}</td>\n            <td class=\"noif-lt-md\">{{ user.lastName }}</td>\n            <td class=\"noif-lt-md\">\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\n            </td>\n            <td>{{ user.roles.join(\" \") }}</td>\n            <td class=\"noif-lt-md\">{{ user.lockoutEnd }}</td>\n          </tr>\n          }\n        </tbody>\n      </table>\n      <!-- paginator -->\n      <div class=\"form-row\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          color=\"warn\"\n          i18n-matmatTooltip=\"auth-jwt-admin\"\n          matTooltip=\"Refresh list\"\n          (click)=\"reset()\"\n        >\n          <mat-icon class=\"mat-warn\">autorenew</mat-icon>\n        </button>\n        <mat-paginator\n          [length]=\"page.total\"\n          [pageIndex]=\"page.pageNumber - 1\"\n          [pageSize]=\"page.pageSize\"\n          [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\n          (page)=\"onPageChange($event)\"\n          [showFirstLastButtons]=\"true\"\n        ></mat-paginator>\n      </div>\n    </div>\n    }\n  </div>\n\n  <!-- editor -->\n  <mat-expansion-panel\n    id=\"editor\"\n    [expanded]=\"active$ | async\"\n    [disabled]=\"!(active$ | async)\"\n  >\n    @if (active$ | async; as active) {\n    <div>\n      <fieldset>\n        <legend>{{ active.userName }}</legend>\n        <auth-jwt-user-editor\n          [user]=\"active\"\n          (userChange)=\"saveActiveUser($event)\"\n          (editorClose)=\"resetActiveUser()\"\n        ></auth-jwt-user-editor>\n      </fieldset>\n    </div>\n    }\n  </mat-expansion-panel>\n</div>\n", styles: ["tr:nth-child(odd){background-color:#f8f8f8}th{padding:0 8px;text-align:left;color:silver;font-weight:400}td{padding:0 8px}td.fit-width{width:1px;white-space:nowrap}table{width:100%;border-collapse:collapse}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}div#filters{grid-area:filters}div#list{grid-area:list}div#editor{grid-area:editor}div#container{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"filters\" \"list\" \"editor\";gap:8px}@media only screen and (max-width: 959px){.noif-lt-md{display:none}}@media only screen and (min-width: 1920px){div#container{grid-template-rows:auto 1fr;grid-template-columns:1fr auto;grid-template-areas:\"filters filters\" \"list editor\"}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i3$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i5$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i6$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i7.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: UserEditorComponent, selector: "auth-jwt-user-editor", inputs: ["user"], outputs: ["userChange", "editorClose"] }, { kind: "component", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: ["filter", "disabled"], outputs: ["filterChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: UserListComponent, isStandalone: true, selector: "auth-jwt-user-list", ngImport: i0, template: "<div id=\"container\">\r\n  <div>\r\n    <!-- filters -->\r\n    <div id=\"filters\">\r\n      <auth-jwt-user-filter\r\n        [filter]=\"filter$ | async\"\r\n        (filterChange)=\"onFilterChange($event)\"\r\n      ></auth-jwt-user-filter>\r\n    </div>\r\n\r\n    <!-- list -->\r\n    @if (page$ | async; as page) {\r\n    <div id=\"list\">\r\n      @if (loading$ | async) {\r\n      <div>\r\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n      </div>\r\n      }\r\n      <table>\r\n        <thead>\r\n          <td></td>\r\n          <td></td>\r\n          <th i18n=\"auth-jwt-admin\">name</th>\r\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">first</th>\r\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">last</th>\r\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">email</th>\r\n          <th i18n=\"auth-jwt-admin\">roles</th>\r\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">lock end</th>\r\n        </thead>\r\n        <tbody>\r\n          @for (user of page.items; track user) {\r\n          <tr>\r\n            <td class=\"fit-width\">\r\n              <button\r\n                mat-icon-button\r\n                type=\"button\"\r\n                i18n-matTooltip=\"auth-jwt-admin\"\r\n                matTooltip=\"Edit this user\"\r\n                color=\"primary\"\r\n                (click)=\"setActiveUser(user)\"\r\n              >\r\n                <mat-icon class=\"mat-primary\">mode_edit</mat-icon>\r\n              </button>\r\n              <button\r\n                mat-icon-button\r\n                type=\"button\"\r\n                i18n-matTooltip=\"auth-jwt-admin\"\r\n                matTooltip=\"Delete this user\"\r\n                color=\"warn\"\r\n                (click)=\"deleteUser(user)\"\r\n              >\r\n                <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td class=\"fit-width\">\r\n              <img\r\n                alt=\"avatar\"\r\n                [src]=\"getGravatarUrl(user.email, { size: '32' })\"\r\n                [alt]=\"user.userName\"\r\n              />\r\n            </td>\r\n            <td>{{ user.userName }}</td>\r\n            <td class=\"noif-lt-md\">{{ user.firstName }}</td>\r\n            <td class=\"noif-lt-md\">{{ user.lastName }}</td>\r\n            <td class=\"noif-lt-md\">\r\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\r\n            </td>\r\n            <td>{{ user.roles.join(\" \") }}</td>\r\n            <td class=\"noif-lt-md\">{{ user.lockoutEnd }}</td>\r\n          </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n      <!-- paginator -->\r\n      <div class=\"form-row\">\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"warn\"\r\n          i18n-matmatTooltip=\"auth-jwt-admin\"\r\n          matTooltip=\"Refresh list\"\r\n          (click)=\"reset()\"\r\n        >\r\n          <mat-icon class=\"mat-warn\">autorenew</mat-icon>\r\n        </button>\r\n        <mat-paginator\r\n          [length]=\"page.total\"\r\n          [pageIndex]=\"page.pageNumber - 1\"\r\n          [pageSize]=\"page.pageSize\"\r\n          [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\r\n          (page)=\"onPageChange($event)\"\r\n          [showFirstLastButtons]=\"true\"\r\n        ></mat-paginator>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- editor -->\r\n  <mat-expansion-panel\r\n    id=\"editor\"\r\n    [expanded]=\"active$ | async\"\r\n    [disabled]=\"!(active$ | async)\"\r\n  >\r\n    @if (active$ | async; as active) {\r\n    <div>\r\n      <fieldset>\r\n        <legend>{{ active.userName }}</legend>\r\n        <auth-jwt-user-editor\r\n          [user]=\"active\"\r\n          (userChange)=\"saveActiveUser($event)\"\r\n          (editorClose)=\"resetActiveUser()\"\r\n        ></auth-jwt-user-editor>\r\n      </fieldset>\r\n    </div>\r\n    }\r\n  </mat-expansion-panel>\r\n</div>\r\n", styles: ["tr:nth-child(odd){background-color:#f8f8f8}th{padding:0 8px;text-align:left;color:silver;font-weight:400}td{padding:0 8px}td.fit-width{width:1px;white-space:nowrap}table{width:100%;border-collapse:collapse}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}div#filters{grid-area:filters}div#list{grid-area:list}div#editor{grid-area:editor}div#container{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"filters\" \"list\" \"editor\";gap:8px}@media only screen and (max-width: 959px){.noif-lt-md{display:none}}@media only screen and (min-width: 1920px){div#container{grid-template-rows:auto 1fr;grid-template-columns:1fr auto;grid-template-areas:\"filters filters\" \"list editor\"}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: UserEditorComponent, selector: "auth-jwt-user-editor", inputs: ["user"], outputs: ["userChange", "editorClose"] }, { kind: "component", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: ["filter", "disabled"], outputs: ["filterChange"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: UserListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'auth-jwt-user-list', imports: [
                         CommonModule,
@@ -911,7 +914,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
                         MatTooltipModule,
                         UserEditorComponent,
                         UserFilterComponent,
-                    ], template: "<div id=\"container\">\n  <div>\n    <!-- filters -->\n    <div id=\"filters\">\n      <auth-jwt-user-filter\n        [filter]=\"filter$ | async\"\n        (filterChange)=\"onFilterChange($event)\"\n      ></auth-jwt-user-filter>\n    </div>\n\n    <!-- list -->\n    @if (page$ | async; as page) {\n    <div id=\"list\">\n      @if (loading$ | async) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n      }\n      <table>\n        <thead>\n          <td></td>\n          <td></td>\n          <th i18n=\"auth-jwt-admin\">name</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">first</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">last</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">email</th>\n          <th i18n=\"auth-jwt-admin\">roles</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">lock end</th>\n        </thead>\n        <tbody>\n          @for (user of page.items; track user) {\n          <tr>\n            <td class=\"fit-width\">\n              <button\n                mat-icon-button\n                type=\"button\"\n                i18n-matTooltip=\"auth-jwt-admin\"\n                matTooltip=\"Edit this user\"\n                color=\"primary\"\n                (click)=\"setActiveUser(user)\"\n              >\n                <mat-icon class=\"mat-primary\">mode_edit</mat-icon>\n              </button>\n              <button\n                mat-icon-button\n                type=\"button\"\n                i18n-matTooltip=\"auth-jwt-admin\"\n                matTooltip=\"Delete this user\"\n                color=\"warn\"\n                (click)=\"deleteUser(user)\"\n              >\n                <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\n              </button>\n            </td>\n            <td class=\"fit-width\">\n              <img\n                alt=\"avatar\"\n                [src]=\"getGravatarUrl(user.email, { size: '32' })\"\n                [alt]=\"user.userName\"\n              />\n            </td>\n            <td>{{ user.userName }}</td>\n            <td class=\"noif-lt-md\">{{ user.firstName }}</td>\n            <td class=\"noif-lt-md\">{{ user.lastName }}</td>\n            <td class=\"noif-lt-md\">\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\n            </td>\n            <td>{{ user.roles.join(\" \") }}</td>\n            <td class=\"noif-lt-md\">{{ user.lockoutEnd }}</td>\n          </tr>\n          }\n        </tbody>\n      </table>\n      <!-- paginator -->\n      <div class=\"form-row\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          color=\"warn\"\n          i18n-matmatTooltip=\"auth-jwt-admin\"\n          matTooltip=\"Refresh list\"\n          (click)=\"reset()\"\n        >\n          <mat-icon class=\"mat-warn\">autorenew</mat-icon>\n        </button>\n        <mat-paginator\n          [length]=\"page.total\"\n          [pageIndex]=\"page.pageNumber - 1\"\n          [pageSize]=\"page.pageSize\"\n          [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\n          (page)=\"onPageChange($event)\"\n          [showFirstLastButtons]=\"true\"\n        ></mat-paginator>\n      </div>\n    </div>\n    }\n  </div>\n\n  <!-- editor -->\n  <mat-expansion-panel\n    id=\"editor\"\n    [expanded]=\"active$ | async\"\n    [disabled]=\"!(active$ | async)\"\n  >\n    @if (active$ | async; as active) {\n    <div>\n      <fieldset>\n        <legend>{{ active.userName }}</legend>\n        <auth-jwt-user-editor\n          [user]=\"active\"\n          (userChange)=\"saveActiveUser($event)\"\n          (editorClose)=\"resetActiveUser()\"\n        ></auth-jwt-user-editor>\n      </fieldset>\n    </div>\n    }\n  </mat-expansion-panel>\n</div>\n", styles: ["tr:nth-child(odd){background-color:#f8f8f8}th{padding:0 8px;text-align:left;color:silver;font-weight:400}td{padding:0 8px}td.fit-width{width:1px;white-space:nowrap}table{width:100%;border-collapse:collapse}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}div#filters{grid-area:filters}div#list{grid-area:list}div#editor{grid-area:editor}div#container{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"filters\" \"list\" \"editor\";gap:8px}@media only screen and (max-width: 959px){.noif-lt-md{display:none}}@media only screen and (min-width: 1920px){div#container{grid-template-rows:auto 1fr;grid-template-columns:1fr auto;grid-template-areas:\"filters filters\" \"list editor\"}}\n"] }]
+                    ], template: "<div id=\"container\">\r\n  <div>\r\n    <!-- filters -->\r\n    <div id=\"filters\">\r\n      <auth-jwt-user-filter\r\n        [filter]=\"filter$ | async\"\r\n        (filterChange)=\"onFilterChange($event)\"\r\n      ></auth-jwt-user-filter>\r\n    </div>\r\n\r\n    <!-- list -->\r\n    @if (page$ | async; as page) {\r\n    <div id=\"list\">\r\n      @if (loading$ | async) {\r\n      <div>\r\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n      </div>\r\n      }\r\n      <table>\r\n        <thead>\r\n          <td></td>\r\n          <td></td>\r\n          <th i18n=\"auth-jwt-admin\">name</th>\r\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">first</th>\r\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">last</th>\r\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">email</th>\r\n          <th i18n=\"auth-jwt-admin\">roles</th>\r\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">lock end</th>\r\n        </thead>\r\n        <tbody>\r\n          @for (user of page.items; track user) {\r\n          <tr>\r\n            <td class=\"fit-width\">\r\n              <button\r\n                mat-icon-button\r\n                type=\"button\"\r\n                i18n-matTooltip=\"auth-jwt-admin\"\r\n                matTooltip=\"Edit this user\"\r\n                color=\"primary\"\r\n                (click)=\"setActiveUser(user)\"\r\n              >\r\n                <mat-icon class=\"mat-primary\">mode_edit</mat-icon>\r\n              </button>\r\n              <button\r\n                mat-icon-button\r\n                type=\"button\"\r\n                i18n-matTooltip=\"auth-jwt-admin\"\r\n                matTooltip=\"Delete this user\"\r\n                color=\"warn\"\r\n                (click)=\"deleteUser(user)\"\r\n              >\r\n                <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td class=\"fit-width\">\r\n              <img\r\n                alt=\"avatar\"\r\n                [src]=\"getGravatarUrl(user.email, { size: '32' })\"\r\n                [alt]=\"user.userName\"\r\n              />\r\n            </td>\r\n            <td>{{ user.userName }}</td>\r\n            <td class=\"noif-lt-md\">{{ user.firstName }}</td>\r\n            <td class=\"noif-lt-md\">{{ user.lastName }}</td>\r\n            <td class=\"noif-lt-md\">\r\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\r\n            </td>\r\n            <td>{{ user.roles.join(\" \") }}</td>\r\n            <td class=\"noif-lt-md\">{{ user.lockoutEnd }}</td>\r\n          </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n      <!-- paginator -->\r\n      <div class=\"form-row\">\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"warn\"\r\n          i18n-matmatTooltip=\"auth-jwt-admin\"\r\n          matTooltip=\"Refresh list\"\r\n          (click)=\"reset()\"\r\n        >\r\n          <mat-icon class=\"mat-warn\">autorenew</mat-icon>\r\n        </button>\r\n        <mat-paginator\r\n          [length]=\"page.total\"\r\n          [pageIndex]=\"page.pageNumber - 1\"\r\n          [pageSize]=\"page.pageSize\"\r\n          [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\r\n          (page)=\"onPageChange($event)\"\r\n          [showFirstLastButtons]=\"true\"\r\n        ></mat-paginator>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- editor -->\r\n  <mat-expansion-panel\r\n    id=\"editor\"\r\n    [expanded]=\"active$ | async\"\r\n    [disabled]=\"!(active$ | async)\"\r\n  >\r\n    @if (active$ | async; as active) {\r\n    <div>\r\n      <fieldset>\r\n        <legend>{{ active.userName }}</legend>\r\n        <auth-jwt-user-editor\r\n          [user]=\"active\"\r\n          (userChange)=\"saveActiveUser($event)\"\r\n          (editorClose)=\"resetActiveUser()\"\r\n        ></auth-jwt-user-editor>\r\n      </fieldset>\r\n    </div>\r\n    }\r\n  </mat-expansion-panel>\r\n</div>\r\n", styles: ["tr:nth-child(odd){background-color:#f8f8f8}th{padding:0 8px;text-align:left;color:silver;font-weight:400}td{padding:0 8px}td.fit-width{width:1px;white-space:nowrap}table{width:100%;border-collapse:collapse}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}div#filters{grid-area:filters}div#list{grid-area:list}div#editor{grid-area:editor}div#container{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"filters\" \"list\" \"editor\";gap:8px}@media only screen and (max-width: 959px){.noif-lt-md{display:none}}@media only screen and (min-width: 1920px){div#container{grid-template-rows:auto 1fr;grid-template-columns:1fr auto;grid-template-areas:\"filters filters\" \"list editor\"}}\n"] }]
         }], ctorParameters: () => [] });
 
 /*