@myrmidon/auth-jwt-admin 5.1.0 → 7.0.0

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

@@ -1,99 +1,47 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
-import * as i1$1 from '@angular/forms';
-import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { inject, Injectable, input, output, 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';
 import { retry, map, catchError, take } from 'rxjs/operators';
-import * as i2$1 from '@angular/material/snack-bar';
-import { MatSnackBarModule } from '@angular/material/snack-bar';
-import * as i1 from '@angular/common/http';
-import { HttpParams } from '@angular/common/http';
-import * as i2 from '@myrmidon/ng-tools';
-import { NgToolsModule } from '@myrmidon/ng-tools';
-import { BehaviorSubject, tap } from 'rxjs';
-import { PagedListStore } from '@myrmidon/paged-data-browsers';
-import * as i5 from '@angular/material/button';
+import * as i3 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i2 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i6 from '@angular/material/icon';
+import * as i4 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i7 from '@angular/material/input';
+import * as i5 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i8 from '@angular/material/form-field';
-import * as i9 from '@angular/material/progress-spinner';
+import * as i6 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import * as i6$1 from '@angular/material/tooltip';
+import { HttpClient, HttpParams } from '@angular/common/http';
+import { ErrorService, EnvService } from '@myrmidon/ng-tools';
+import { BehaviorSubject, tap } from 'rxjs';
+import { PagedListStore } from '@myrmidon/paged-data-browsers';
+import * as i7 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import * as i5$1 from '@angular/material/paginator';
+import { MatPaginatorModule } from '@angular/material/paginator';
 import '@angular/localize/init';
-import * as i2$3 from '@myrmidon/ng-mat-tools';
-import * as i2$2 from '@myrmidon/auth-jwt-login';
-import { AuthJwtLoginModule } from '@myrmidon/auth-jwt-login';
-import * as i5$1 from '@angular/material/expansion';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i3$2 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
-import * as i7$1 from '@angular/material/paginator';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import * as i8$1 from '@angular/material/progress-bar';
+import * as i6$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
-import * as i4 from '@angular/material/checkbox';
+import { AuthJwtService, GravatarService } from '@myrmidon/auth-jwt-login';
+import { DialogService } from '@myrmidon/ngx-mat-tools';
+import * as i3$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import * as i12 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import { MatCardModule } from '@angular/material/card';
-import { MatDialogModule } from '@angular/material/dialog';
-
-class PasswordValidators {
-    /** "Standard" password validator for my API services. */
-    static standard() {
-        return (control) => {
-            if (!control.value) {
-                return null;
-            }
-            if (control.value.length < 8) {
-                return {
-                    passwordtooshort: true,
-                };
-            }
-            if (!/.*[A-Z].*/.test(control.value)) {
-                return {
-                    noupperinpassword: true,
-                };
-            }
-            if (!/.*[a-z].*/.test(control.value)) {
-                return {
-                    nolowerinpassword: true,
-                };
-            }
-            if (!/.*[A-Z].*/.test(control.value)) {
-                return {
-                    noupperinpassword: true,
-                };
-            }
-            if (!/.*[-`~!@#$%^&*()_+=\[\]{};:'",.<>/?|\\].*/.test(control.value)) {
-                return {
-                    nosymbolinpassword: true,
-                };
-            }
-            return null;
-        };
-    }
-    static areEqual(controlName, otherControlName) {
-        return (control) => {
-            const g = control;
-            const a = g.controls[controlName];
-            const b = g.controls[otherControlName];
-            return a.value !== b.value
-                ? {
-                    areequal: true,
-                }
-                : null;
-        };
-    }
-}
 
+/**
+ * Service for managing user accounts with JWT authentication.
+ */
 class AuthJwtAccountService {
-    constructor(_http, _error, _env) {
-        this._http = _http;
-        this._error = _error;
-        this._env = _env;
+    constructor() {
+        this._http = inject(HttpClient);
+        this._error = inject(ErrorService);
+        this._env = inject(EnvService);
     }
     /**
      * Checks if the specified email address is registered on the server.
@@ -276,15 +224,67 @@ class AuthJwtAccountService {
             .delete(this._env.get('apiUrl') + 'accounts/' + name)
             .pipe(catchError(this._error.handleError));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AuthJwtAccountService, deps: [{ token: i1.HttpClient }, { token: i2.ErrorService }, { token: i2.EnvService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AuthJwtAccountService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: AuthJwtAccountService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: AuthJwtAccountService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AuthJwtAccountService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: AuthJwtAccountService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
                 }]
-        }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.ErrorService }, { type: i2.EnvService }] });
+        }] });
+
+/**
+ * Password validators.
+ */
+class PasswordValidators {
+    /** "Standard" password validator for my API services. */
+    static standard() {
+        return (control) => {
+            if (!control.value) {
+                return null;
+            }
+            if (control.value.length < 8) {
+                return {
+                    passwordtooshort: true,
+                };
+            }
+            if (!/.*[A-Z].*/.test(control.value)) {
+                return {
+                    noupperinpassword: true,
+                };
+            }
+            if (!/.*[a-z].*/.test(control.value)) {
+                return {
+                    nolowerinpassword: true,
+                };
+            }
+            if (!/.*[A-Z].*/.test(control.value)) {
+                return {
+                    noupperinpassword: true,
+                };
+            }
+            if (!/.*[-`~!@#$%^&*()_+=\[\]{};:'",.<>/?|\\].*/.test(control.value)) {
+                return {
+                    nosymbolinpassword: true,
+                };
+            }
+            return null;
+        };
+    }
+    static areEqual(controlName, otherControlName) {
+        return (control) => {
+            const g = control;
+            const a = g.controls[controlName];
+            const b = g.controls[otherControlName];
+            return a.value !== b.value
+                ? {
+                    areequal: true,
+                }
+                : null;
+        };
+    }
+}
 
 class UserListRepository {
     get activeUser$() {
@@ -302,8 +302,8 @@ class UserListRepository {
     get saving$() {
         return this._saving$.asObservable();
     }
-    constructor(_accService) {
-        this._accService = _accService;
+    constructor() {
+        this._accService = inject(AuthJwtAccountService);
         this._store = new PagedListStore(this);
         this._activeUser$ = new BehaviorSubject(undefined);
         this._loading$ = new BehaviorSubject(false);
@@ -399,19 +399,19 @@ class UserListRepository {
         });
         return promise;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UserListRepository, deps: [{ token: AuthJwtAccountService }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UserListRepository, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: UserListRepository, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: UserListRepository, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UserListRepository, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: UserListRepository, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: AuthJwtAccountService }] });
+        }], ctorParameters: () => [] });
 
 class PasswordStrengthBarComponent {
     constructor() {
         this._colors = ['#F00', '#F90', '#FF0', '#9F0', '#0F0'];
-        this.strengthChange = new EventEmitter();
-        this.strengthChange = new EventEmitter();
+        this.passwordToCheck = input();
+        this.strengthChange = output();
         this.bars = [];
     }
     measureStrength(p) {
@@ -473,25 +473,34 @@ class PasswordStrengthBarComponent {
             this.bars[n] = col;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PasswordStrengthBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: PasswordStrengthBarComponent, selector: "auth-jwt-password-strength-bar", inputs: { passwordToCheck: "passwordToCheck" }, 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: "19.0.1", ngImport: i0, type: PasswordStrengthBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", 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"] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: PasswordStrengthBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", 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"] }]
-        }], ctorParameters: () => [], propDecorators: { passwordToCheck: [{
-                type: Input
-            }], strengthChange: [{
-                type: Output
-            }] } });
+        }] });
 
+/**
+ * User registration form.
+ */
 class AuthJwtRegistrationComponent {
-    constructor(formBuilder, _snackbar, _accountService, _userRepository) {
-        this._snackbar = _snackbar;
-        this._accountService = _accountService;
-        this._userRepository = _userRepository;
+    constructor() {
+        this._snackbar = inject(MatSnackBar);
+        this._accountService = inject(AuthJwtAccountService);
+        this._userRepository = inject(UserListRepository);
+        /**
+         * True if the registration should be confirmed automatically.
+         */
+        this.autoConfirm = input();
+        /**
+         * 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.registered = new EventEmitter();
+        const formBuilder = inject(FormBuilder);
         // form
         this.email = formBuilder.control('', {
             validators: [Validators.required, Validators.email],
@@ -611,7 +620,7 @@ class AuthJwtRegistrationComponent {
         };
         this.busy = true;
         this._accountService
-            .register(model, this.autoConfirm)
+            .register(model, this.autoConfirm())
             .pipe(take(1))
             .subscribe({
             next: () => {
@@ -627,37 +636,58 @@ class AuthJwtRegistrationComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AuthJwtRegistrationComponent, deps: [{ token: i1$1.FormBuilder }, { token: i2$1.MatSnackBar }, { token: AuthJwtAccountService }, { token: UserListRepository }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: AuthJwtRegistrationComponent, selector: "auth-jwt-registration", inputs: { autoConfirm: "autoConfirm" }, 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\" style=\"color: red\">\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}\n"], dependencies: [{ kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i9.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: "19.0.1", ngImport: i0, type: AuthJwtRegistrationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AuthJwtRegistrationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: AuthJwtRegistrationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'auth-jwt-registration', 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\" style=\"color: red\">\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}\n"] }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }, { type: i2$1.MatSnackBar }, { type: AuthJwtAccountService }, { type: UserListRepository }], propDecorators: { autoConfirm: [{
-                type: Input
-            }], registered: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'auth-jwt-registration', imports: [
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        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"] }]
+        }], ctorParameters: () => [] });
 
+/**
+ * Users filter.
+ */
 class UserFilterComponent {
-    get filter() {
-        return this._filter;
-    }
-    set filter(value) {
-        if (this._filter === value) {
-            return;
-        }
-        this._filter = value || undefined;
-        this.updateForm(this._filter);
-    }
-    constructor(formBuilder) {
+    constructor() {
+        /**
+         * The filter.
+         */
+        this.filter = input();
+        /**
+         * Whether the filter is disabled.
+         */
+        this.disabled = input();
+        /**
+         * Event emitted when the filter changes.
+         */
+        this.filterChange = output();
+        const formBuilder = inject(FormBuilder);
         // form
         this.name = formBuilder.control(null);
         this.form = formBuilder.group({
             name: this.name,
         });
-        // event
-        this.filterChange = new EventEmitter();
+        // update form when filter changes
+        effect(() => {
+            this.updateForm(this.filter() || undefined);
+        });
+        // disable form when disabled
+        effect(() => {
+            if (this.disabled()) {
+                this.form.disable();
+            }
+            else {
+                this.form.enable();
+            }
+        });
     }
     updateForm(filter) {
         if (!filter) {
@@ -681,40 +711,51 @@ class UserFilterComponent {
         this._filter = this.getFilter();
         this.filterChange.emit(this._filter);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UserFilterComponent, deps: [{ token: i1$1.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.0", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: { filter: "filter", disabled: "disabled" }, outputs: { filterChange: "filterChange" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"apply()\" ng-disabled=\"disabled\">\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        color=\"warn\"\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      color=\"primary\"\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: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: UserFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "19.0.1", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UserFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: UserFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'auth-jwt-user-filter', template: "<form [formGroup]=\"form\" (submit)=\"apply()\" ng-disabled=\"disabled\">\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        color=\"warn\"\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      color=\"primary\"\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"] }]
-        }], ctorParameters: () => [{ type: i1$1.FormBuilder }], propDecorators: { filter: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], filterChange: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'auth-jwt-user-filter', imports: [
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatFormFieldModule,
+                        MatIconModule,
+                        MatInputModule,
+                        MatTooltipModule,
+                    ], 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"] }]
+        }], ctorParameters: () => [] });
 
+/**
+ * User editor form.
+ */
 class UserEditorComponent {
-    set user(value) {
-        this._user = value;
-        this.updateForm(value);
-    }
-    get user() {
-        return this._user;
-    }
-    constructor(formBuilder, _authService) {
-        this._authService = _authService;
-        // events
-        this.userChange = new EventEmitter();
-        this.editorClose = new EventEmitter();
+    constructor() {
+        this._authService = inject(AuthJwtService);
+        /**
+         * The user to edit.
+         */
+        this.user = input(undefined);
+        /**
+         * Emitted when user changes.
+         */
+        this.userChange = output();
+        /**
+         * Emitted when the user requests to close the user editor.
+         */
+        this.editorClose = output();
+        const formBuilder = inject(FormBuilder);
         // form
         this.email = formBuilder.control(null, [
             Validators.required,
             Validators.email,
         ]);
-        this.emailConfirmed = formBuilder.control(false);
-        this.lockoutEnabled = formBuilder.control(false);
+        this.emailConfirmed = formBuilder.control(false, {
+            nonNullable: true,
+        });
+        this.lockoutEnabled = formBuilder.control(false, {
+            nonNullable: true,
+        });
         this.firstName = formBuilder.control(null, [
             Validators.required,
             Validators.maxLength(50),
@@ -732,34 +773,40 @@ class UserEditorComponent {
             lastName: this.lastName,
             roles: this.roles,
         });
+        // update form when user changes
+        effect(() => {
+            this.updateForm(this.user() || undefined);
+        });
     }
-    ngOnInit() { }
     updateForm(user) {
         if (!user) {
             this.form.reset();
         }
         else {
             this.email.setValue(user.email);
-            this.emailConfirmed.setValue(user.emailConfirmed);
-            this.lockoutEnabled.setValue(user.lockoutEnabled);
-            this.firstName.setValue(user.firstName);
-            this.lastName.setValue(user.lastName);
+            this.emailConfirmed.setValue(user.emailConfirmed || false);
+            this.lockoutEnabled.setValue(user.lockoutEnabled || false);
+            this.firstName.setValue(user.firstName || '');
+            this.lastName.setValue(user.lastName || '');
             if (user.roles?.length > 0) {
                 this.roles.setValue(user.roles.join(' '));
             }
             else {
                 this.roles.setValue(null);
             }
+            this.unlocked =
+                user.lockoutEnabled &&
+                    (!user.lockoutEnd || user.lockoutEnd < this._authService.getUTCDate());
         }
     }
     getUserFromForm() {
         return {
-            userName: this._user?.userName || '',
-            email: this.email.value,
+            userName: this.user()?.userName || '',
+            email: this.email.value || '',
             emailConfirmed: this.emailConfirmed.value,
             lockoutEnabled: this.lockoutEnabled.value,
-            firstName: this.firstName.value,
-            lastName: this.lastName.value,
+            firstName: this.firstName.value || '',
+            lastName: this.lastName.value || '',
             roles: this.roles.value
                 ? this.roles.value.split(' ').filter((s) => s)
                 : [],
@@ -769,8 +816,9 @@ class UserEditorComponent {
         if (this.unlocked) {
             return;
         }
-        this._user.lockoutEnd = this._authService.getUTCDate();
-        this.unlocked = true;
+        const user = this.getUserFromForm();
+        user.lockoutEnd = this._authService.getUTCDate();
+        this.userChange.emit(user);
     }
     close() {
         this.editorClose.emit();
@@ -781,25 +829,31 @@ class UserEditorComponent {
         }
         this.userChange.emit(this.getUserFromForm());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UserEditorComponent, deps: [{ token: i1$1.UntypedFormBuilder }, { token: i2$2.AuthJwtService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: UserEditorComponent, selector: "auth-jwt-user-editor", inputs: { user: "user" }, 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      color=\"primary\"\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 style=\"width: 16em\">\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      color=\"warn\"\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: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i4.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: i7.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "directive", type: i8.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i8.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: UserEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UserEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: UserEditorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'auth-jwt-user-editor', 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      color=\"primary\"\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 style=\"width: 16em\">\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      color=\"warn\"\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"] }]
-        }], ctorParameters: () => [{ type: i1$1.UntypedFormBuilder }, { type: i2$2.AuthJwtService }], propDecorators: { user: [{
-                type: Input
-            }], userChange: [{
-                type: Output
-            }], editorClose: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'auth-jwt-user-editor', imports: [
+                        ReactiveFormsModule,
+                        MatButtonModule,
+                        MatCheckboxModule,
+                        MatFormFieldModule,
+                        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"] }]
+        }], ctorParameters: () => [] });
 
+/**
+ * List of users.
+ */
 class UserListComponent {
-    constructor(_repository, _dialogService, _gravatarService) {
-        this._repository = _repository;
-        this._dialogService = _dialogService;
-        this._gravatarService = _gravatarService;
+    constructor() {
+        this._repository = inject(UserListRepository);
+        this._dialogService = inject(DialogService);
+        this._gravatarService = inject(GravatarService);
+        const _repository = this._repository;
         this.filter$ = _repository.filter$;
         this.page$ = _repository.page$;
         this.active$ = _repository.activeUser$;
@@ -830,7 +884,9 @@ class UserListComponent {
         this._repository.setActiveUser(null);
     }
     saveActiveUser(user) {
-        this._repository.updateActiveUser(user);
+        if (user) {
+            this._repository.updateActiveUser(user);
+        }
         this._repository.setActiveUser(null);
     }
     onUserEditorClose() {
@@ -839,101 +895,25 @@ class UserListComponent {
     getGravatarUrl(email, options) {
         return this._gravatarService.buildGravatarUrl(email, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UserListComponent, deps: [{ token: UserListRepository }, { token: i2$3.DialogService }, { token: i2$2.GravatarService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.0", type: UserListComponent, 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: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "component", type: i8$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: ["filter", "disabled"], outputs: ["filterChange"] }, { kind: "component", type: UserEditorComponent, selector: "auth-jwt-user-editor", inputs: ["user"], outputs: ["userChange", "editorClose"] }, { kind: "pipe", type: i12.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: UserListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.1", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: UserListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.1", ngImport: i0, type: UserListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'auth-jwt-user-list', 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"] }]
-        }], ctorParameters: () => [{ type: UserListRepository }, { type: i2$3.DialogService }, { type: i2$2.GravatarService }] });
-
-class AuthJwtAdminModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AuthJwtAdminModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.1.0", ngImport: i0, type: AuthJwtAdminModule, declarations: [AuthJwtRegistrationComponent,
-            PasswordStrengthBarComponent,
-            UserFilterComponent,
-            UserListComponent,
-            UserEditorComponent], imports: [CommonModule,
-            FormsModule,
-            RouterModule,
-            ReactiveFormsModule,
-            // material
-            MatButtonModule,
-            MatCardModule,
-            MatCheckboxModule,
-            MatDialogModule,
-            MatExpansionModule,
-            MatIconModule,
-            MatInputModule,
-            MatPaginatorModule,
-            MatProgressBarModule,
-            MatProgressSpinnerModule,
-            MatSnackBarModule,
-            MatTooltipModule,
-            AuthJwtLoginModule,
-            NgToolsModule], exports: [AuthJwtRegistrationComponent,
-            PasswordStrengthBarComponent,
-            UserFilterComponent,
-            UserListComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AuthJwtAdminModule, imports: [CommonModule,
-            FormsModule,
-            RouterModule,
-            ReactiveFormsModule,
-            // material
-            MatButtonModule,
-            MatCardModule,
-            MatCheckboxModule,
-            MatDialogModule,
-            MatExpansionModule,
-            MatIconModule,
-            MatInputModule,
-            MatPaginatorModule,
-            MatProgressBarModule,
-            MatProgressSpinnerModule,
-            MatSnackBarModule,
-            MatTooltipModule,
-            AuthJwtLoginModule,
-            NgToolsModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImport: i0, type: AuthJwtAdminModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        AuthJwtRegistrationComponent,
-                        PasswordStrengthBarComponent,
-                        UserFilterComponent,
-                        UserListComponent,
-                        UserEditorComponent,
-                    ],
-                    exports: [
-                        AuthJwtRegistrationComponent,
-                        PasswordStrengthBarComponent,
-                        UserFilterComponent,
-                        UserListComponent,
-                    ],
-                    imports: [
+            args: [{ selector: 'auth-jwt-user-list', imports: [
                         CommonModule,
-                        FormsModule,
-                        RouterModule,
                         ReactiveFormsModule,
-                        // material
                         MatButtonModule,
-                        MatCardModule,
-                        MatCheckboxModule,
-                        MatDialogModule,
                         MatExpansionModule,
                         MatIconModule,
                         MatInputModule,
                         MatPaginatorModule,
                         MatProgressBarModule,
-                        MatProgressSpinnerModule,
-                        MatSnackBarModule,
                         MatTooltipModule,
-                        AuthJwtLoginModule,
-                        NgToolsModule,
-                    ],
-                }]
-        }] });
+                        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"] }]
+        }], ctorParameters: () => [] });
 
 /*
  * Public API Surface of auth-jwt-admin
@@ -943,5 +923,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthJwtAccountService, AuthJwtAdminModule, AuthJwtRegistrationComponent, PasswordStrengthBarComponent, PasswordValidators, UserFilterComponent, UserListComponent, UserListRepository };
+export { AuthJwtAccountService, AuthJwtRegistrationComponent, PasswordStrengthBarComponent, PasswordValidators, UserFilterComponent, UserListComponent, UserListRepository };
 //# sourceMappingURL=myrmidon-auth-jwt-admin.mjs.map