@myrmidon/auth-jwt-admin 8.0.4 → 10.0.0

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

@@ -1,36 +1,35 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, input, output, computed, effect, ChangeDetectionStrategy, Component, signal } from '@angular/core';
-import * as i1 from '@angular/forms';
-import { FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import { inject, Injectable, input, output, computed, effect, ChangeDetectionStrategy, Component, signal, resource } from '@angular/core';
+import { form, required, email, validateAsync, pattern, maxLength, validate, FormField, FormRoot, disabled } from '@angular/forms/signals';
+import { BehaviorSubject, tap, firstValueFrom } from 'rxjs';
 import { MatSnackBar } from '@angular/material/snack-bar';
-import { retry, map, catchError, take } from 'rxjs/operators';
-import * as i3 from '@angular/material/form-field';
+import * as i2 from '@angular/material/form-field';
 import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i2 from '@angular/material/button';
+import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
-import * as i4 from '@angular/material/icon';
+import * as i3 from '@angular/material/icon';
 import { MatIconModule } from '@angular/material/icon';
-import * as i5 from '@angular/material/input';
+import * as i4 from '@angular/material/input';
 import { MatInputModule } from '@angular/material/input';
-import * as i6 from '@angular/material/progress-spinner';
+import * as i5 from '@angular/material/progress-spinner';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { HttpClient, HttpParams } from '@angular/common/http';
+import { retry, map, catchError } from 'rxjs/operators';
 import { ErrorService, EnvService } from '@myrmidon/ngx-tools';
-import { BehaviorSubject, tap } from 'rxjs';
 import { PagedListStore } from '@myrmidon/paged-data-browsers';
-import * as i6$1 from '@angular/material/tooltip';
+import * as i6 from '@angular/material/tooltip';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import * as i4$1 from '@angular/material/paginator';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import * as i7 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2$1 from '@angular/material/expansion';
+import * as i2$2 from '@angular/material/expansion';
 import { MatExpansionModule } from '@angular/material/expansion';
 import * as i5$1 from '@angular/material/progress-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { AuthJwtService, GravatarService } from '@myrmidon/auth-jwt-login';
 import { DialogService } from '@myrmidon/ngx-mat-tools';
-import * as i3$1 from '@angular/material/checkbox';
+import * as i2$1 from '@angular/material/checkbox';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 
 /**
@@ -223,10 +222,10 @@ class AuthJwtAccountService {
             .delete(this._env.get('apiUrl') + 'accounts/' + name)
             .pipe(catchError(this._error.handleError));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AuthJwtAccountService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AuthJwtAccountService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AuthJwtAccountService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AuthJwtAccountService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AuthJwtAccountService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AuthJwtAccountService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -234,55 +233,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
         }] });
 
 /**
- * Password validators.
+ * Password validators as pure predicate functions returning Signal Forms
+ * compatible ValidationError objects ({ kind: string }).
  */
 class PasswordValidators {
-    /** "Standard" password validator for my API services. */
     static standard() {
-        return (control) => {
-            if (!control.value) {
+        return (value) => {
+            if (!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,
-                };
-            }
+            if (value.length < 8)
+                return { kind: 'passwordtooshort' };
+            if (!/.*[A-Z].*/.test(value))
+                return { kind: 'noupperinpassword' };
+            if (!/.*[a-z].*/.test(value))
+                return { kind: 'nolowerinpassword' };
+            if (!/.*[-`~!@#$%^&*()_+=\[\]{};:'",.<>/?|\\].*/.test(value))
+                return { kind: 'nosymbolinpassword' };
             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 {
@@ -398,10 +367,10 @@ class UserListRepository {
         });
         return promise;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UserListRepository, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UserListRepository, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: UserListRepository, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: UserListRepository, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UserListRepository, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: UserListRepository, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
@@ -426,31 +395,53 @@ const DEFAULT_RULE_LABELS = {
 class PasswordChecklistComponent {
     constructor() {
         // Input signals for password and context
-        this.password = input('', ...(ngDevMode ? [{ debugName: "password" }] : /* istanbul ignore next */ []));
-        this.username = input('', ...(ngDevMode ? [{ debugName: "username" }] : /* istanbul ignore next */ []));
-        this.email = input('', ...(ngDevMode ? [{ debugName: "email" }] : /* istanbul ignore next */ []));
-        this.hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
+        this.password = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "password" }] : /* istanbul ignore next */ []));
+        this.username = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "username" }] : /* istanbul ignore next */ []));
+        this.email = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "email" }] : /* istanbul ignore next */ []));
+        this.hidden = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []));
         // Input signals for rule configuration
-        this.minLength = input(null, ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
-        this.maxLength = input(null, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
-        this.requireUppercase = input(false, ...(ngDevMode ? [{ debugName: "requireUppercase" }] : /* istanbul ignore next */ []));
-        this.requireLowercase = input(false, ...(ngDevMode ? [{ debugName: "requireLowercase" }] : /* istanbul ignore next */ []));
-        this.requireNumber = input(false, ...(ngDevMode ? [{ debugName: "requireNumber" }] : /* istanbul ignore next */ []));
-        this.requireSymbol = input(false, ...(ngDevMode ? [{ debugName: "requireSymbol" }] : /* istanbul ignore next */ []));
-        this.checkUsername = input(false, ...(ngDevMode ? [{ debugName: "checkUsername" }] : /* istanbul ignore next */ []));
-        this.checkEmail = input(false, ...(ngDevMode ? [{ debugName: "checkEmail" }] : /* istanbul ignore next */ []));
+        this.minLength = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minLength" }] : /* istanbul ignore next */ []));
+        this.maxLength = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+        this.requireUppercase = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "requireUppercase" }] : /* istanbul ignore next */ []));
+        this.requireLowercase = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "requireLowercase" }] : /* istanbul ignore next */ []));
+        this.requireNumber = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "requireNumber" }] : /* istanbul ignore next */ []));
+        this.requireSymbol = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "requireSymbol" }] : /* istanbul ignore next */ []));
+        this.checkUsername = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checkUsername" }] : /* istanbul ignore next */ []));
+        this.checkEmail = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "checkEmail" }] : /* istanbul ignore next */ []));
         // Input signals for custom labels
-        this.minLengthLabel = input(null, ...(ngDevMode ? [{ debugName: "minLengthLabel" }] : /* istanbul ignore next */ []));
-        this.maxLengthLabel = input(null, ...(ngDevMode ? [{ debugName: "maxLengthLabel" }] : /* istanbul ignore next */ []));
-        this.uppercaseLabel = input(null, ...(ngDevMode ? [{ debugName: "uppercaseLabel" }] : /* istanbul ignore next */ []));
-        this.lowercaseLabel = input(null, ...(ngDevMode ? [{ debugName: "lowercaseLabel" }] : /* istanbul ignore next */ []));
-        this.numberLabel = input(null, ...(ngDevMode ? [{ debugName: "numberLabel" }] : /* istanbul ignore next */ []));
-        this.symbolLabel = input(null, ...(ngDevMode ? [{ debugName: "symbolLabel" }] : /* istanbul ignore next */ []));
-        this.usernameLabel = input(null, ...(ngDevMode ? [{ debugName: "usernameLabel" }] : /* istanbul ignore next */ []));
-        this.emailLabel = input(null, ...(ngDevMode ? [{ debugName: "emailLabel" }] : /* istanbul ignore next */ []));
+        this.minLengthLabel = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "minLengthLabel" }] : /* istanbul ignore next */ []));
+        this.maxLengthLabel = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "maxLengthLabel" }] : /* istanbul ignore next */ []));
+        this.uppercaseLabel = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "uppercaseLabel" }] : /* istanbul ignore next */ []));
+        this.lowercaseLabel = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lowercaseLabel" }] : /* istanbul ignore next */ []));
+        this.numberLabel = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "numberLabel" }] : /* istanbul ignore next */ []));
+        this.symbolLabel = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "symbolLabel" }] : /* istanbul ignore next */ []));
+        this.usernameLabel = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "usernameLabel" }] : /* istanbul ignore next */ []));
+        this.emailLabel = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "emailLabel" }] : /* istanbul ignore next */ []));
         // Input signals for display options
-        this.noChecklist = input(false, ...(ngDevMode ? [{ debugName: "noChecklist" }] : /* istanbul ignore next */ []));
-        this.noMeter = input(false, ...(ngDevMode ? [{ debugName: "noMeter" }] : /* istanbul ignore next */ []));
+        this.noChecklist = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "noChecklist" }] : /* istanbul ignore next */ []));
+        this.noMeter = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "noMeter" }] : /* istanbul ignore next */ []));
         // Output signal for validity
         this.validChange = output();
         // Symbol regex pattern
@@ -459,33 +450,41 @@ class PasswordChecklistComponent {
         this.hasMinLength = computed(() => {
             const min = this.minLength();
             return min === null || this.password().length >= min;
-        }, ...(ngDevMode ? [{ debugName: "hasMinLength" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasMinLength" }] : /* istanbul ignore next */ []));
         this.hasMaxLength = computed(() => {
             const max = this.maxLength();
             return max === null || this.password().length <= max;
-        }, ...(ngDevMode ? [{ debugName: "hasMaxLength" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasMaxLength" }] : /* istanbul ignore next */ []));
         this.hasUppercase = computed(() => {
             return /[A-Z]/.test(this.password());
-        }, ...(ngDevMode ? [{ debugName: "hasUppercase" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasUppercase" }] : /* istanbul ignore next */ []));
         this.hasLowercase = computed(() => {
             return /[a-z]/.test(this.password());
-        }, ...(ngDevMode ? [{ debugName: "hasLowercase" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasLowercase" }] : /* istanbul ignore next */ []));
         this.hasNumber = computed(() => {
             return /[0-9]/.test(this.password());
-        }, ...(ngDevMode ? [{ debugName: "hasNumber" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasNumber" }] : /* istanbul ignore next */ []));
         this.hasSymbol = computed(() => {
             return this.symbolRegex.test(this.password());
-        }, ...(ngDevMode ? [{ debugName: "hasSymbol" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasSymbol" }] : /* istanbul ignore next */ []));
         this.noUsernameInPassword = computed(() => {
             const username = this.username().toLowerCase();
             const pwd = this.password().toLowerCase();
             return !username || !pwd || !pwd.includes(username);
-        }, ...(ngDevMode ? [{ debugName: "noUsernameInPassword" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "noUsernameInPassword" }] : /* istanbul ignore next */ []));
         this.noEmailInPassword = computed(() => {
             const email = this.email().toLowerCase();
             const pwd = this.password().toLowerCase();
             return !email || !pwd || !pwd.includes(email);
-        }, ...(ngDevMode ? [{ debugName: "noEmailInPassword" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "noEmailInPassword" }] : /* istanbul ignore next */ []));
         // Computed signal for all rules with their status
         this.rules = computed(() => {
             const rules = [];
@@ -546,7 +545,8 @@ class PasswordChecklistComponent {
                 });
             }
             return rules;
-        }, ...(ngDevMode ? [{ debugName: "rules" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rules" }] : /* istanbul ignore next */ []));
         // Computed signal to check if a specific rule is satisfied
         this.isRuleSatisfied = computed(() => {
             return (ruleId) => {
@@ -571,7 +571,8 @@ class PasswordChecklistComponent {
                         return false;
                 }
             };
-        }, ...(ngDevMode ? [{ debugName: "isRuleSatisfied" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isRuleSatisfied" }] : /* istanbul ignore next */ []));
         // Computed signal for overall validity
         this.isValid = computed(() => {
             const rules = this.rules();
@@ -580,7 +581,8 @@ class PasswordChecklistComponent {
             }
             const checkFn = this.isRuleSatisfied();
             return rules.every((rule) => checkFn(rule.id));
-        }, ...(ngDevMode ? [{ debugName: "isValid" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isValid" }] : /* istanbul ignore next */ []));
         // Computed signal for password strength (0-100)
         this.strength = computed(() => {
             const pwd = this.password();
@@ -619,7 +621,8 @@ class PasswordChecklistComponent {
                 score = Math.min(score, 70);
             }
             return Math.min(Math.round(score), 100);
-        }, ...(ngDevMode ? [{ debugName: "strength" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "strength" }] : /* istanbul ignore next */ []));
         // Computed signal for strength level (0-4)
         this.strengthLevel = computed(() => {
             const strength = this.strength();
@@ -632,16 +635,19 @@ class PasswordChecklistComponent {
             if (strength <= 80)
                 return 3;
             return 4;
-        }, ...(ngDevMode ? [{ debugName: "strengthLevel" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "strengthLevel" }] : /* istanbul ignore next */ []));
         // Computed signal for strength color
         this.strengthColor = computed(() => {
             const colors = ['#F00', '#F90', '#FF0', '#9F0', '#0F0'];
             return colors[this.strengthLevel()];
-        }, ...(ngDevMode ? [{ debugName: "strengthColor" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "strengthColor" }] : /* istanbul ignore next */ []));
         // Computed signal for strength percentage
         this.strengthPercent = computed(() => {
             return this.strength();
-        }, ...(ngDevMode ? [{ debugName: "strengthPercent" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "strengthPercent" }] : /* istanbul ignore next */ []));
         // Effect to emit validity changes
         // This will automatically track the isValid computed signal
         effect(() => {
@@ -675,10 +681,10 @@ class PasswordChecklistComponent {
     checkRule(ruleId) {
         return this.isRuleSatisfied()(ruleId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PasswordChecklistComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: PasswordChecklistComponent, isStandalone: true, selector: "auth-jwt-password-checklist", inputs: { password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, requireUppercase: { classPropertyName: "requireUppercase", publicName: "requireUppercase", isSignal: true, isRequired: false, transformFunction: null }, requireLowercase: { classPropertyName: "requireLowercase", publicName: "requireLowercase", isSignal: true, isRequired: false, transformFunction: null }, requireNumber: { classPropertyName: "requireNumber", publicName: "requireNumber", isSignal: true, isRequired: false, transformFunction: null }, requireSymbol: { classPropertyName: "requireSymbol", publicName: "requireSymbol", isSignal: true, isRequired: false, transformFunction: null }, checkUsername: { classPropertyName: "checkUsername", publicName: "checkUsername", isSignal: true, isRequired: false, transformFunction: null }, checkEmail: { classPropertyName: "checkEmail", publicName: "checkEmail", isSignal: true, isRequired: false, transformFunction: null }, minLengthLabel: { classPropertyName: "minLengthLabel", publicName: "minLengthLabel", isSignal: true, isRequired: false, transformFunction: null }, maxLengthLabel: { classPropertyName: "maxLengthLabel", publicName: "maxLengthLabel", isSignal: true, isRequired: false, transformFunction: null }, uppercaseLabel: { classPropertyName: "uppercaseLabel", publicName: "uppercaseLabel", isSignal: true, isRequired: false, transformFunction: null }, lowercaseLabel: { classPropertyName: "lowercaseLabel", publicName: "lowercaseLabel", isSignal: true, isRequired: false, transformFunction: null }, numberLabel: { classPropertyName: "numberLabel", publicName: "numberLabel", isSignal: true, isRequired: false, transformFunction: null }, symbolLabel: { classPropertyName: "symbolLabel", publicName: "symbolLabel", isSignal: true, isRequired: false, transformFunction: null }, usernameLabel: { classPropertyName: "usernameLabel", publicName: "usernameLabel", isSignal: true, isRequired: false, transformFunction: null }, emailLabel: { classPropertyName: "emailLabel", publicName: "emailLabel", isSignal: true, isRequired: false, transformFunction: null }, noChecklist: { classPropertyName: "noChecklist", publicName: "noChecklist", isSignal: true, isRequired: false, transformFunction: null }, noMeter: { classPropertyName: "noMeter", publicName: "noMeter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { validChange: "validChange" }, ngImport: i0, template: "@if (!hidden()) {\r\n<div class=\"password-checklist-container\">\r\n  <!-- Strength Meter -->\r\n  @if (!noMeter() && password()) {\r\n  <div class=\"strength-meter\">\r\n    <div class=\"strength-label\">\r\n      <small>Strength:</small>\r\n    </div>\r\n    <div class=\"strength-bar-container\">\r\n      <div\r\n        class=\"strength-bar\"\r\n        [style.width.%]=\"strengthPercent()\"\r\n        [style.background-color]=\"strengthColor()\"\r\n      ></div>\r\n    </div>\r\n    <div class=\"strength-percentage\">\r\n      <small>{{ strengthPercent() }}%</small>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  <!-- Checklist -->\r\n  @if (!noChecklist() && password() && rules().length > 0) {\r\n  <div class=\"checklist\">\r\n    <ul class=\"checklist-items\">\r\n      @for (rule of rules(); track rule.id) {\r\n      <li\r\n        class=\"checklist-item\"\r\n        [class.satisfied]=\"checkRule(rule.id)\"\r\n        [class.unsatisfied]=\"!checkRule(rule.id)\"\r\n      >\r\n        <span class=\"checklist-icon\">\r\n          {{ checkRule(rule.id) ? '\u2713' : '\u2717' }}\r\n        </span>\r\n        <span class=\"checklist-text\">{{ rule.label }}</span>\r\n      </li>\r\n      }\r\n    </ul>\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n", styles: [".password-checklist-container{margin-top:.5rem}.strength-meter{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.strength-label{flex-shrink:0}.strength-bar-container{position:relative;flex:1;height:6px;background-color:var(--mat-sys-surface-variant);border-radius:3px;overflow:hidden}.strength-bar{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:3px}.strength-percentage{flex-shrink:0;min-width:3rem;text-align:right}.checklist{font-size:.875rem}.checklist-items{list-style:none;margin:0;padding:0}.checklist-item{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;transition:color .2s ease}.checklist-icon{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:50%;font-weight:700;font-size:.75rem;flex-shrink:0;transition:background-color .2s ease,color .2s ease}.checklist-item.satisfied .checklist-icon{background-color:var(--mat-sys-success);color:var(--mat-sys-on-success)}.checklist-item.unsatisfied .checklist-icon{background-color:var(--mat-sys-error);color:var(--mat-sys-on-error)}.checklist-text{flex:1}.checklist-item.satisfied .checklist-text{color:var(--mat-sys-success)}.checklist-item.unsatisfied .checklist-text{color:var(--mat-sys-error)}@media(prefers-color-scheme:dark){.strength-bar-container{background-color:var(--mat-sys-surface-variant)}.checklist-item.satisfied .checklist-text{color:var(--mat-sys-success)}.checklist-item.unsatisfied .checklist-text{color:var(--mat-sys-error)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PasswordChecklistComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: PasswordChecklistComponent, isStandalone: true, selector: "auth-jwt-password-checklist", inputs: { password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, email: { classPropertyName: "email", publicName: "email", isSignal: true, isRequired: false, transformFunction: null }, hidden: { classPropertyName: "hidden", publicName: "hidden", isSignal: true, isRequired: false, transformFunction: null }, minLength: { classPropertyName: "minLength", publicName: "minLength", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, requireUppercase: { classPropertyName: "requireUppercase", publicName: "requireUppercase", isSignal: true, isRequired: false, transformFunction: null }, requireLowercase: { classPropertyName: "requireLowercase", publicName: "requireLowercase", isSignal: true, isRequired: false, transformFunction: null }, requireNumber: { classPropertyName: "requireNumber", publicName: "requireNumber", isSignal: true, isRequired: false, transformFunction: null }, requireSymbol: { classPropertyName: "requireSymbol", publicName: "requireSymbol", isSignal: true, isRequired: false, transformFunction: null }, checkUsername: { classPropertyName: "checkUsername", publicName: "checkUsername", isSignal: true, isRequired: false, transformFunction: null }, checkEmail: { classPropertyName: "checkEmail", publicName: "checkEmail", isSignal: true, isRequired: false, transformFunction: null }, minLengthLabel: { classPropertyName: "minLengthLabel", publicName: "minLengthLabel", isSignal: true, isRequired: false, transformFunction: null }, maxLengthLabel: { classPropertyName: "maxLengthLabel", publicName: "maxLengthLabel", isSignal: true, isRequired: false, transformFunction: null }, uppercaseLabel: { classPropertyName: "uppercaseLabel", publicName: "uppercaseLabel", isSignal: true, isRequired: false, transformFunction: null }, lowercaseLabel: { classPropertyName: "lowercaseLabel", publicName: "lowercaseLabel", isSignal: true, isRequired: false, transformFunction: null }, numberLabel: { classPropertyName: "numberLabel", publicName: "numberLabel", isSignal: true, isRequired: false, transformFunction: null }, symbolLabel: { classPropertyName: "symbolLabel", publicName: "symbolLabel", isSignal: true, isRequired: false, transformFunction: null }, usernameLabel: { classPropertyName: "usernameLabel", publicName: "usernameLabel", isSignal: true, isRequired: false, transformFunction: null }, emailLabel: { classPropertyName: "emailLabel", publicName: "emailLabel", isSignal: true, isRequired: false, transformFunction: null }, noChecklist: { classPropertyName: "noChecklist", publicName: "noChecklist", isSignal: true, isRequired: false, transformFunction: null }, noMeter: { classPropertyName: "noMeter", publicName: "noMeter", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { validChange: "validChange" }, ngImport: i0, template: "@if (!hidden()) {\r\n<div class=\"password-checklist-container\">\r\n  <!-- Strength Meter -->\r\n  @if (!noMeter() && password()) {\r\n  <div class=\"strength-meter\">\r\n    <div class=\"strength-label\">\r\n      <small>Strength:</small>\r\n    </div>\r\n    <div class=\"strength-bar-container\">\r\n      <div\r\n        class=\"strength-bar\"\r\n        [style.width.%]=\"strengthPercent()\"\r\n        [style.background-color]=\"strengthColor()\"\r\n      ></div>\r\n    </div>\r\n    <div class=\"strength-percentage\">\r\n      <small>{{ strengthPercent() }}%</small>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  <!-- Checklist -->\r\n  @if (!noChecklist() && password() && rules().length > 0) {\r\n  <div class=\"checklist\">\r\n    <ul class=\"checklist-items\">\r\n      @for (rule of rules(); track rule.id) {\r\n      <li\r\n        class=\"checklist-item\"\r\n        [class.satisfied]=\"checkRule(rule.id)\"\r\n        [class.unsatisfied]=\"!checkRule(rule.id)\"\r\n      >\r\n        <span class=\"checklist-icon\">\r\n          {{ checkRule(rule.id) ? '\u2713' : '\u2717' }}\r\n        </span>\r\n        <span class=\"checklist-text\">{{ rule.label }}</span>\r\n      </li>\r\n      }\r\n    </ul>\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n", styles: [".password-checklist-container{margin-top:.5rem}.strength-meter{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.strength-label{flex-shrink:0}.strength-bar-container{position:relative;flex:1;height:6px;background-color:var(--mat-sys-surface-variant);border-radius:3px;overflow:hidden}.strength-bar{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:3px}.strength-percentage{flex-shrink:0;min-width:3rem;text-align:right}.checklist{font-size:.875rem}.checklist-items{list-style:none;margin:0;padding:0}.checklist-item{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;transition:color .2s ease}.checklist-icon{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:50%;font-weight:700;font-size:.75rem;flex-shrink:0;transition:background-color .2s ease,color .2s ease}.checklist-item.satisfied .checklist-icon{background-color:var(--mat-sys-success);color:var(--mat-sys-on-success)}.checklist-item.unsatisfied .checklist-icon{background-color:var(--mat-sys-error);color:var(--mat-sys-on-error)}.checklist-text{flex:1}.checklist-item.satisfied .checklist-text{color:var(--mat-sys-success)}.checklist-item.unsatisfied .checklist-text{color:var(--mat-sys-error)}@media(prefers-color-scheme:dark){.strength-bar-container{background-color:var(--mat-sys-surface-variant)}.checklist-item.satisfied .checklist-text{color:var(--mat-sys-success)}.checklist-item.unsatisfied .checklist-text{color:var(--mat-sys-error)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PasswordChecklistComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PasswordChecklistComponent, decorators: [{
             type: Component,
             args: [{ selector: 'auth-jwt-password-checklist', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!hidden()) {\r\n<div class=\"password-checklist-container\">\r\n  <!-- Strength Meter -->\r\n  @if (!noMeter() && password()) {\r\n  <div class=\"strength-meter\">\r\n    <div class=\"strength-label\">\r\n      <small>Strength:</small>\r\n    </div>\r\n    <div class=\"strength-bar-container\">\r\n      <div\r\n        class=\"strength-bar\"\r\n        [style.width.%]=\"strengthPercent()\"\r\n        [style.background-color]=\"strengthColor()\"\r\n      ></div>\r\n    </div>\r\n    <div class=\"strength-percentage\">\r\n      <small>{{ strengthPercent() }}%</small>\r\n    </div>\r\n  </div>\r\n  }\r\n\r\n  <!-- Checklist -->\r\n  @if (!noChecklist() && password() && rules().length > 0) {\r\n  <div class=\"checklist\">\r\n    <ul class=\"checklist-items\">\r\n      @for (rule of rules(); track rule.id) {\r\n      <li\r\n        class=\"checklist-item\"\r\n        [class.satisfied]=\"checkRule(rule.id)\"\r\n        [class.unsatisfied]=\"!checkRule(rule.id)\"\r\n      >\r\n        <span class=\"checklist-icon\">\r\n          {{ checkRule(rule.id) ? '\u2713' : '\u2717' }}\r\n        </span>\r\n        <span class=\"checklist-text\">{{ rule.label }}</span>\r\n      </li>\r\n      }\r\n    </ul>\r\n  </div>\r\n  }\r\n</div>\r\n}\r\n", styles: [".password-checklist-container{margin-top:.5rem}.strength-meter{display:flex;align-items:center;gap:.5rem;margin-bottom:.75rem}.strength-label{flex-shrink:0}.strength-bar-container{position:relative;flex:1;height:6px;background-color:var(--mat-sys-surface-variant);border-radius:3px;overflow:hidden}.strength-bar{height:100%;transition:width .3s ease,background-color .3s ease;border-radius:3px}.strength-percentage{flex-shrink:0;min-width:3rem;text-align:right}.checklist{font-size:.875rem}.checklist-items{list-style:none;margin:0;padding:0}.checklist-item{display:flex;align-items:center;gap:.5rem;padding:.25rem 0;transition:color .2s ease}.checklist-icon{display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;border-radius:50%;font-weight:700;font-size:.75rem;flex-shrink:0;transition:background-color .2s ease,color .2s ease}.checklist-item.satisfied .checklist-icon{background-color:var(--mat-sys-success);color:var(--mat-sys-on-success)}.checklist-item.unsatisfied .checklist-icon{background-color:var(--mat-sys-error);color:var(--mat-sys-on-error)}.checklist-text{flex:1}.checklist-item.satisfied .checklist-text{color:var(--mat-sys-success)}.checklist-item.unsatisfied .checklist-text{color:var(--mat-sys-error)}@media(prefers-color-scheme:dark){.strength-bar-container{background-color:var(--mat-sys-surface-variant)}.checklist-item.satisfied .checklist-text{color:var(--mat-sys-success)}.checklist-item.unsatisfied .checklist-text{color:var(--mat-sys-error)}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { password: [{ type: i0.Input, args: [{ isSignal: true, alias: "password", required: false }] }], username: [{ type: i0.Input, args: [{ isSignal: true, alias: "username", required: false }] }], email: [{ type: i0.Input, args: [{ isSignal: true, alias: "email", required: false }] }], hidden: [{ type: i0.Input, args: [{ isSignal: true, alias: "hidden", required: false }] }], minLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLength", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], requireUppercase: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireUppercase", required: false }] }], requireLowercase: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireLowercase", required: false }] }], requireNumber: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireNumber", required: false }] }], requireSymbol: [{ type: i0.Input, args: [{ isSignal: true, alias: "requireSymbol", required: false }] }], checkUsername: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkUsername", required: false }] }], checkEmail: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkEmail", required: false }] }], minLengthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "minLengthLabel", required: false }] }], maxLengthLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLengthLabel", required: false }] }], uppercaseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "uppercaseLabel", required: false }] }], lowercaseLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lowercaseLabel", required: false }] }], numberLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "numberLabel", required: false }] }], symbolLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "symbolLabel", required: false }] }], usernameLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "usernameLabel", required: false }] }], emailLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "emailLabel", required: false }] }], noChecklist: [{ type: i0.Input, args: [{ isSignal: true, alias: "noChecklist", required: false }] }], noMeter: [{ type: i0.Input, args: [{ isSignal: true, alias: "noMeter", required: false }] }], validChange: [{ type: i0.Output, args: ["validChange"] }] } });
@@ -691,176 +697,124 @@ class AuthJwtRegistrationComponent {
         this._snackbar = inject(MatSnackBar);
         this._accountService = inject(AuthJwtAccountService);
         this._userRepository = inject(UserListRepository);
-        /**
-         * True if the registration should be confirmed automatically.
-         */
-        this.autoConfirm = input(...(ngDevMode ? [undefined, { debugName: "autoConfirm" }] : /* istanbul ignore next */ []));
-        /**
-         * Emitted when a user was successfully registered. Usually
-         * you should handle this to move away from the registration
-         * page.
-         */
-        this.registered = output();
-        this.busy = signal(undefined, ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
-        this.hidePassword = signal(true, ...(ngDevMode ? [{ debugName: "hidePassword" }] : /* istanbul ignore next */ []));
-        const formBuilder = inject(FormBuilder);
-        // form
-        this.email = formBuilder.control('', {
-            validators: [Validators.required, Validators.email],
-            asyncValidators: this.getUniqueEmailValidator(this._accountService).bind(this),
-            nonNullable: true,
-        });
-        this.name = formBuilder.control('', {
-            validators: Validators.required,
-            asyncValidators: this.getUniqueNameValidator(this._accountService).bind(this),
-            nonNullable: true,
-        });
-        this.firstName = formBuilder.control('', {
-            validators: [Validators.required, Validators.maxLength(50)],
-            nonNullable: true,
-        });
-        this.lastName = formBuilder.control('', {
-            validators: [Validators.required, Validators.maxLength(50)],
-            nonNullable: true,
-        });
-        // http://stackoverflow.com/questions/35474991/angular-2-form-validating-for-repeat-password
-        this.password = formBuilder.control('', {
-            validators: [Validators.required, PasswordValidators.standard()],
-            nonNullable: true,
-        });
-        this.confirmPassword = formBuilder.control('', {
-            validators: Validators.required,
-            nonNullable: true,
-        });
-        this.form = formBuilder.group({
-            email: this.email,
-            name: this.name,
-            firstName: this.firstName,
-            lastName: this.lastName,
-            password: this.password,
-            confirmPassword: this.confirmPassword,
-        }, {
-            validators: [
-                PasswordValidators.areEqual('password', 'confirmPassword'),
-            ],
-        });
-    }
-    /**
-     * Creates a unique name validator. There is no dependency injection at this level,
-     * but we can use closures. As a matter of fact, we have access to the service instance
-     * from the component where we register validators. So we will implement a function
-     * that will accept the service as parameter, and create the actual validation function.
-     * This function will have access to the service when called during the validation process.
-     * See http://restlet.com/blog/2016/02/17/implementing-angular2-forms-beyond-basics-part-2/.
-     */
-    getUniqueNameValidator(service) {
-        return (control) => {
-            return new Promise((resolve, reject) => {
-                // avoid checking if empty
-                if (!control.value) {
-                    resolve(null);
-                }
-                else {
-                    service.isNameRegistered(control.value).subscribe({
-                        next: (data) => {
-                            if (!data.isExisting) {
-                                resolve(null);
-                            }
-                            else {
-                                resolve({ uniqueName: true });
-                            }
-                        },
-                        error: (error) => {
-                            console.error('Unique name validator error' +
-                                (error ? JSON.stringify(error) : ''));
-                            resolve({ uniqueName: true });
-                        },
-                    });
-                }
+        this.formModel = signal({
+            email: '',
+            name: '',
+            firstName: '',
+            lastName: '',
+            password: '',
+            confirmPassword: '',
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formModel" }] : /* istanbul ignore next */ []));
+        this.userForm = form(this.formModel, (p) => {
+            // email
+            required(p.email);
+            email(p.email);
+            validateAsync(p.email, {
+                params: ({ value }) => value() || undefined,
+                factory: (emailParam) => resource({
+                    params: () => emailParam(),
+                    loader: async ({ params: emailVal }) => firstValueFrom(this._accountService.isEmailRegistered(emailVal)),
+                }),
+                onSuccess: (result) => result?.isExisting ? { kind: 'uniqueEmail' } : undefined,
+                onError: (err) => {
+                    console.error('Unique email validator error:', err);
+                    return { kind: 'uniqueEmail' };
+                },
+                debounce: 300,
             });
-        };
-    }
-    getUniqueEmailValidator(service) {
-        return (control) => {
-            return new Promise((resolve, reject) => {
-                // avoid checking if empty
-                if (!control.value) {
-                    resolve(null);
-                }
-                else {
-                    service.isEmailRegistered(control.value).subscribe({
-                        next: (data) => {
-                            if (!data.isExisting) {
-                                resolve(null);
-                            }
-                            else {
-                                resolve({ uniqueEmail: true });
-                            }
-                        },
-                        error: (error) => {
-                            console.error('Unique email validator error' +
-                                (error ? JSON.stringify(error) : ''));
-                            resolve({ uniqueEmail: true });
-                        },
-                    });
-                }
+            // name
+            required(p.name);
+            pattern(p.name, /^[a-zA-Z][a-zA-Z0-9]{2,49}$/);
+            validateAsync(p.name, {
+                params: ({ value }) => value() || undefined,
+                factory: (nameParam) => resource({
+                    params: () => nameParam(),
+                    loader: async ({ params: nameVal }) => firstValueFrom(this._accountService.isNameRegistered(nameVal)),
+                }),
+                onSuccess: (result) => result?.isExisting ? { kind: 'uniqueName' } : undefined,
+                onError: (err) => {
+                    console.error('Unique name validator error:', err);
+                    return { kind: 'uniqueName' };
+                },
+                debounce: 300,
             });
-        };
-    }
-    onSubmit() {
-        if (!this.form.valid ||
-            this.busy() ||
-            this.name.pending ||
-            this.email.pending) {
-            return;
-        }
-        const model = {
-            email: this.email.value,
-            name: this.name.value,
-            firstName: this.firstName.value,
-            lastName: this.lastName.value,
-            password: this.password.value,
-        };
-        this.busy.set(true);
-        this._accountService
-            .register(model, this.autoConfirm())
-            .pipe(take(1))
-            .subscribe({
-            next: () => {
-                this.busy.set(false);
-                this._snackbar.open($localize `:auth-jwt-admin:Registration succeeded`, 'OK');
-                this._userRepository.reset();
-                this.registered.emit();
-            },
-            error: (error) => {
-                this.busy.set(false);
-                console.error('Registration  error' + (error ? JSON.stringify(error) : ''));
-                this._snackbar.open($localize `:auth-jwt-admin:Registration error`, 'OK');
+            // first/last name
+            required(p.firstName);
+            maxLength(p.firstName, 50);
+            required(p.lastName);
+            maxLength(p.lastName, 50);
+            // password
+            required(p.password);
+            validate(p.password, ({ value }) => PasswordValidators.standard()(value()));
+            // confirmPassword + cross-field match
+            required(p.confirmPassword);
+            validate(p, ({ value }) => {
+                const m = value();
+                return m.password !== m.confirmPassword ? { kind: 'areequal' } : null;
+            });
+        }, {
+            submission: {
+                action: async () => {
+                    if (this.busy())
+                        return;
+                    const m = this.formModel();
+                    const model = {
+                        email: m.email,
+                        name: m.name,
+                        firstName: m.firstName,
+                        lastName: m.lastName,
+                        password: m.password,
+                    };
+                    this.busy.set(true);
+                    try {
+                        await firstValueFrom(this._accountService.register(model, this.autoConfirm()));
+                        this.busy.set(false);
+                        this._snackbar.open($localize `:auth-jwt-admin:Registration succeeded`, 'OK');
+                        this._userRepository.reset();
+                        this.registered.emit();
+                    }
+                    catch (error) {
+                        this.busy.set(false);
+                        console.error('Registration error' + (error ? JSON.stringify(error) : ''));
+                        this._snackbar.open($localize `:auth-jwt-admin:Registration error`, 'OK');
+                    }
+                },
             },
         });
+        this.autoConfirm = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "autoConfirm" }] : /* istanbul ignore next */ []));
+        this.registered = output();
+        this.busy = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "busy" }] : /* istanbul ignore next */ []));
+        this.hidePassword = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hidePassword" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AuthJwtRegistrationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: AuthJwtRegistrationComponent, isStandalone: true, selector: "auth-jwt-registration", inputs: { autoConfirm: { classPropertyName: "autoConfirm", publicName: "autoConfirm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { registered: "registered" }, ngImport: i0, template: "<div>\r\n  <form role=\"form\" [formGroup]=\"form\" (submit)=\"onSubmit()\">\r\n    <fieldset>\r\n      <legend i18n=\"auth-jwt-admin\">registration</legend>\r\n      <!-- email -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label i18n>email</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"email\"\r\n            id=\"email\"\r\n            maxlength=\"256\"\r\n            required\r\n            autofocus\r\n            spellcheck=\"false\"\r\n            [formControl]=\"email\"\r\n          />\r\n          @if ( $any(email).errors?.required && (email.dirty || email.touched) )\r\n          {\r\n          <mat-error i18n=\"auth-jwt-admin\">email required</mat-error>\r\n          } @if ($any(email).errors?.email && (email.dirty || email.touched)) {\r\n          <mat-error i18n=\"auth-jwt-admin\">invalid email</mat-error>\r\n          } @if ( $any(email).errors?.uniqueEmail && (email.dirty ||\r\n          email.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\">email already registered</mat-error>\r\n          }\r\n        </mat-form-field>\r\n        @if (email.pending) {\r\n        <mat-icon>hourglass</mat-icon>\r\n        }\r\n      </div>\r\n\r\n      <!-- name -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">username</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"name\"\r\n            maxlength=\"50\"\r\n            required\r\n            pattern=\"^[a-zA-Z][a-zA-Z0-9]{2,49}$\"\r\n            spellcheck=\"false\"\r\n            [formControl]=\"name\"\r\n          />\r\n          @if ($any(name).errors?.required && (name.dirty || name.touched)) {\r\n          <mat-error i18n=\"auth-jwt-admin\">username required</mat-error>\r\n          } @if ($any(name).errors?.pattern && (name.dirty || name.touched)) {\r\n          <mat-error i18n=\"auth-jwt-admin\">invalid username</mat-error>\r\n          } @if ( $any(name).errors?.uniqueName && (name.dirty || name.touched)\r\n          ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >username already registered</mat-error\r\n          >\r\n          }\r\n        </mat-form-field>\r\n        @if (name.pending) {\r\n        <mat-icon>hourglass</mat-icon>\r\n        }\r\n      </div>\r\n\r\n      <!-- first name -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">first name</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"firstName\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"firstName\"\r\n          />\r\n          @if ( firstName.hasError('required') && (firstName.dirty ||\r\n          firstName.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\" class=\"text-danger small\">\r\n            first name required\r\n          </mat-error>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- last name -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">last name</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"lastName\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"lastName\"\r\n          />\r\n          @if ( lastName.hasError('required') && (lastName.dirty ||\r\n          lastName.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\" class=\"text-danger small\">\r\n            last name required\r\n          </mat-error>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- <div [formGroup]=\"passwords\"> -->\r\n      <!-- password -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">password</mat-label>\r\n          <input\r\n            matInput\r\n            [type]=\"hidePassword() ? 'password' : 'text'\"\r\n            name=\"password\"\r\n            autocomplete=\"new-password\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"password\"\r\n          />\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matSuffix\r\n            (click)=\"hidePassword.set(!hidePassword())\"\r\n            i18n-aria-label=\"auth-jwt-login\"\r\n            aria-label=\"Hide password\"\r\n            [attr.aria-pressed]=\"hidePassword()\"\r\n          >\r\n            <mat-icon>{{\r\n              hidePassword() ? \"visibility_off\" : \"visibility\"\r\n            }}</mat-icon>\r\n          </button>\r\n          <auth-jwt-password-checklist\r\n            [password]=\"password.value\"\r\n            [username]=\"name.value\"\r\n            [email]=\"email.value\"\r\n            [minLength]=\"8\"\r\n            [requireUppercase]=\"true\"\r\n            [requireLowercase]=\"true\"\r\n            [requireSymbol]=\"true\"\r\n            [minLengthLabel]=\"'At least 8 characters'\"\r\n            [uppercaseLabel]=\"'At least 1 uppercase letter'\"\r\n            [lowercaseLabel]=\"'At least 1 lowercase letter'\"\r\n            [symbolLabel]=\"'At least 1 punctuation/symbol'\">\r\n          </auth-jwt-password-checklist>\r\n          @if ( $any(password).errors?.required && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\">password required</mat-error>\r\n          } @if ( $any(password).errors?.passwordtooshort && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\">at least 8 characters</mat-error>\r\n          } @if ( $any(password).errors?.noupperinpassword && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >at least 1 uppercase letter</mat-error\r\n          >\r\n          } @if ( $any(password).errors?.nolowerinpassword && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >at least 1 lowercase letter</mat-error\r\n          >\r\n          } @if ( $any(password).errors?.nosymbolinpassword && (password.dirty\r\n          || password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >at least 1 punctuation/symbol</mat-error\r\n          >\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- confirm password -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">confirm password</mat-label>\r\n          <input\r\n            matInput\r\n            [type]=\"hidePassword() ? 'password' : 'text'\"\r\n            name=\"confirmPassword\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"confirmPassword\"\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n      @if (form.errors?.areequal && confirmPassword.touched) {\r\n      <div i18n=\"auth-jwt-admin\" class=\"error\">\r\n        password differs from confirmation password\r\n      </div>\r\n      }\r\n\r\n      <button\r\n        i18n=\"auth-jwt-admin\"\r\n        mat-flat-button\r\n        type=\"submit\"\r\n        color=\"primary\"\r\n        class=\"mat-primary\"\r\n        [disabled]=\"\r\n          form.invalid || form.pristine || busy() || name.pending || email.pending\r\n        \"\r\n      >\r\n        register\r\n      </button>\r\n      @if (busy()) {\r\n      <mat-progress-spinner diameter=\"20\"></mat-progress-spinner>\r\n      }\r\n    </fieldset>\r\n  </form>\r\n\r\n  <details>\r\n    <summary i18n=\"auth-jwt-admin\">Hints</summary>\r\n    <div class=\"info\">\r\n      <p i18n=\"auth-jwt-admin\">\r\n        To register a new user, you must provide his email address, choose a\r\n        password, and choose a username, which must be unique (you will be\r\n        notified if another user has already taken that name). The username must\r\n        include only letters/digits, start with a letter, and be no shorter than\r\n        3 characters, nor longer than 50.\r\n      </p>\r\n      <p i18n=\"auth-jwt-admin\">\r\n        To promote a decent security level, the password must include at least 8\r\n        characters, uppercase and lowercase letters, digits, and punctuation\r\n        (like dashes, stops, parentheses, etc.).\r\n      </p>\r\n      <p i18n=\"auth-jwt-admin\">\r\n        Once registered, if messaging is enabled on the server side the user\r\n        will receive an email message to the email address you specified; he\r\n        will have to click on the provided link to complete the registration\r\n        process. Otherwise, you should edit the newly created user and confirm\r\n        the email registration.\r\n      </p>\r\n    </div>\r\n  </details>\r\n</div>\r\n", styles: ["mat-form-field{width:400px}fieldset{border:1px solid var(--mat-sys-on-surface-variant);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:var(--mat-sys-error)}\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],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: PasswordChecklistComponent, selector: "auth-jwt-password-checklist", inputs: ["password", "username", "email", "hidden", "minLength", "maxLength", "requireUppercase", "requireLowercase", "requireNumber", "requireSymbol", "checkUsername", "checkEmail", "minLengthLabel", "maxLengthLabel", "uppercaseLabel", "lowercaseLabel", "numberLabel", "symbolLabel", "usernameLabel", "emailLabel", "noChecklist", "noMeter"], outputs: ["validChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AuthJwtRegistrationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: AuthJwtRegistrationComponent, isStandalone: true, selector: "auth-jwt-registration", inputs: { autoConfirm: { classPropertyName: "autoConfirm", publicName: "autoConfirm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { registered: "registered" }, ngImport: i0, template: "<div>\n  <form role=\"form\" [formRoot]=\"userForm\">\n    <fieldset>\n      <legend i18n=\"auth-jwt-admin\">registration</legend>\n\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            autofocus\n            spellcheck=\"false\"\n            [formField]=\"userForm.email\"\n          />\n          @if (userForm.email().getError('required') && (userForm.email().dirty() || userForm.email().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">email required</mat-error>\n          }\n          @if (userForm.email().getError('email') && (userForm.email().dirty() || userForm.email().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">invalid email</mat-error>\n          }\n          @if (userForm.email().getError('uniqueEmail') && (userForm.email().dirty() || userForm.email().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">email already registered</mat-error>\n          }\n        </mat-form-field>\n        @if (userForm.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            spellcheck=\"false\"\n            [formField]=\"userForm.name\"\n          />\n          @if (userForm.name().getError('required') && (userForm.name().dirty() || userForm.name().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">username required</mat-error>\n          }\n          @if (userForm.name().getError('pattern') && (userForm.name().dirty() || userForm.name().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">invalid username</mat-error>\n          }\n          @if (userForm.name().getError('uniqueName') && (userForm.name().dirty() || userForm.name().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">username already registered</mat-error>\n          }\n        </mat-form-field>\n        @if (userForm.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            spellcheck=\"false\"\n            [formField]=\"userForm.firstName\"\n          />\n          @if (userForm.firstName().getError('required') && (userForm.firstName().dirty() || userForm.firstName().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\" class=\"text-danger small\">first name required</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            spellcheck=\"false\"\n            [formField]=\"userForm.lastName\"\n          />\n          @if (userForm.lastName().getError('required') && (userForm.lastName().dirty() || userForm.lastName().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\" class=\"text-danger small\">last name required</mat-error>\n          }\n        </mat-form-field>\n      </div>\n\n      <!-- password -->\n      <div>\n        <mat-form-field>\n          <mat-label i18n=\"auth-jwt-admin\">password</mat-label>\n          <input\n            matInput\n            [type]=\"hidePassword() ? 'password' : 'text'\"\n            autocomplete=\"new-password\"\n            spellcheck=\"false\"\n            [formField]=\"userForm.password\"\n          />\n          <button\n            type=\"button\"\n            mat-icon-button\n            matSuffix\n            (click)=\"hidePassword.set(!hidePassword())\"\n            i18n-aria-label=\"auth-jwt-login\"\n            aria-label=\"Hide password\"\n            [attr.aria-pressed]=\"hidePassword()\"\n          >\n            <mat-icon>{{ hidePassword() ? \"visibility_off\" : \"visibility\" }}</mat-icon>\n          </button>\n          <auth-jwt-password-checklist\n            [password]=\"formModel().password\"\n            [username]=\"formModel().name\"\n            [email]=\"formModel().email\"\n            [minLength]=\"8\"\n            [requireUppercase]=\"true\"\n            [requireLowercase]=\"true\"\n            [requireSymbol]=\"true\"\n            [minLengthLabel]=\"'At least 8 characters'\"\n            [uppercaseLabel]=\"'At least 1 uppercase letter'\"\n            [lowercaseLabel]=\"'At least 1 lowercase letter'\"\n            [symbolLabel]=\"'At least 1 punctuation/symbol'\"\n          />\n          @if (userForm.password().getError('required') && (userForm.password().dirty() || userForm.password().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">password required</mat-error>\n          }\n          @if (userForm.password().getError('passwordtooshort') && (userForm.password().dirty() || userForm.password().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">at least 8 characters</mat-error>\n          }\n          @if (userForm.password().getError('noupperinpassword') && (userForm.password().dirty() || userForm.password().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">at least 1 uppercase letter</mat-error>\n          }\n          @if (userForm.password().getError('nolowerinpassword') && (userForm.password().dirty() || userForm.password().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">at least 1 lowercase letter</mat-error>\n          }\n          @if (userForm.password().getError('nosymbolinpassword') && (userForm.password().dirty() || userForm.password().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">at least 1 punctuation/symbol</mat-error>\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]=\"hidePassword() ? 'password' : 'text'\"\n            autocomplete=\"new-password\"\n            spellcheck=\"false\"\n            [formField]=\"userForm.confirmPassword\"\n          />\n        </mat-form-field>\n      </div>\n      @if (userForm().getError('areequal') && userForm.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]=\"!userForm().valid() || busy()\"\n      >\n        register\n      </button>\n      @if (busy()) {\n        <mat-progress-spinner diameter=\"20\" />\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 var(--mat-sys-on-surface-variant);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:var(--mat-sys-error)}\n"], dependencies: [{ kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: FormRoot, selector: "form[formRoot]", inputs: ["formRoot"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.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: i5.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: PasswordChecklistComponent, selector: "auth-jwt-password-checklist", inputs: ["password", "username", "email", "hidden", "minLength", "maxLength", "requireUppercase", "requireLowercase", "requireNumber", "requireSymbol", "checkUsername", "checkEmail", "minLengthLabel", "maxLengthLabel", "uppercaseLabel", "lowercaseLabel", "numberLabel", "symbolLabel", "usernameLabel", "emailLabel", "noChecklist", "noMeter"], outputs: ["validChange"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: AuthJwtRegistrationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: AuthJwtRegistrationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'auth-jwt-registration', imports: [
-                        ReactiveFormsModule,
+                        FormField,
+                        FormRoot,
                         MatButtonModule,
                         MatFormFieldModule,
                         MatIconModule,
                         MatInputModule,
                         MatProgressSpinnerModule,
                         PasswordChecklistComponent,
-                    ], template: "<div>\r\n  <form role=\"form\" [formGroup]=\"form\" (submit)=\"onSubmit()\">\r\n    <fieldset>\r\n      <legend i18n=\"auth-jwt-admin\">registration</legend>\r\n      <!-- email -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label i18n>email</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"email\"\r\n            id=\"email\"\r\n            maxlength=\"256\"\r\n            required\r\n            autofocus\r\n            spellcheck=\"false\"\r\n            [formControl]=\"email\"\r\n          />\r\n          @if ( $any(email).errors?.required && (email.dirty || email.touched) )\r\n          {\r\n          <mat-error i18n=\"auth-jwt-admin\">email required</mat-error>\r\n          } @if ($any(email).errors?.email && (email.dirty || email.touched)) {\r\n          <mat-error i18n=\"auth-jwt-admin\">invalid email</mat-error>\r\n          } @if ( $any(email).errors?.uniqueEmail && (email.dirty ||\r\n          email.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\">email already registered</mat-error>\r\n          }\r\n        </mat-form-field>\r\n        @if (email.pending) {\r\n        <mat-icon>hourglass</mat-icon>\r\n        }\r\n      </div>\r\n\r\n      <!-- name -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">username</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"name\"\r\n            maxlength=\"50\"\r\n            required\r\n            pattern=\"^[a-zA-Z][a-zA-Z0-9]{2,49}$\"\r\n            spellcheck=\"false\"\r\n            [formControl]=\"name\"\r\n          />\r\n          @if ($any(name).errors?.required && (name.dirty || name.touched)) {\r\n          <mat-error i18n=\"auth-jwt-admin\">username required</mat-error>\r\n          } @if ($any(name).errors?.pattern && (name.dirty || name.touched)) {\r\n          <mat-error i18n=\"auth-jwt-admin\">invalid username</mat-error>\r\n          } @if ( $any(name).errors?.uniqueName && (name.dirty || name.touched)\r\n          ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >username already registered</mat-error\r\n          >\r\n          }\r\n        </mat-form-field>\r\n        @if (name.pending) {\r\n        <mat-icon>hourglass</mat-icon>\r\n        }\r\n      </div>\r\n\r\n      <!-- first name -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">first name</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"firstName\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"firstName\"\r\n          />\r\n          @if ( firstName.hasError('required') && (firstName.dirty ||\r\n          firstName.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\" class=\"text-danger small\">\r\n            first name required\r\n          </mat-error>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- last name -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">last name</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"lastName\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"lastName\"\r\n          />\r\n          @if ( lastName.hasError('required') && (lastName.dirty ||\r\n          lastName.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\" class=\"text-danger small\">\r\n            last name required\r\n          </mat-error>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- <div [formGroup]=\"passwords\"> -->\r\n      <!-- password -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">password</mat-label>\r\n          <input\r\n            matInput\r\n            [type]=\"hidePassword() ? 'password' : 'text'\"\r\n            name=\"password\"\r\n            autocomplete=\"new-password\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"password\"\r\n          />\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matSuffix\r\n            (click)=\"hidePassword.set(!hidePassword())\"\r\n            i18n-aria-label=\"auth-jwt-login\"\r\n            aria-label=\"Hide password\"\r\n            [attr.aria-pressed]=\"hidePassword()\"\r\n          >\r\n            <mat-icon>{{\r\n              hidePassword() ? \"visibility_off\" : \"visibility\"\r\n            }}</mat-icon>\r\n          </button>\r\n          <auth-jwt-password-checklist\r\n            [password]=\"password.value\"\r\n            [username]=\"name.value\"\r\n            [email]=\"email.value\"\r\n            [minLength]=\"8\"\r\n            [requireUppercase]=\"true\"\r\n            [requireLowercase]=\"true\"\r\n            [requireSymbol]=\"true\"\r\n            [minLengthLabel]=\"'At least 8 characters'\"\r\n            [uppercaseLabel]=\"'At least 1 uppercase letter'\"\r\n            [lowercaseLabel]=\"'At least 1 lowercase letter'\"\r\n            [symbolLabel]=\"'At least 1 punctuation/symbol'\">\r\n          </auth-jwt-password-checklist>\r\n          @if ( $any(password).errors?.required && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\">password required</mat-error>\r\n          } @if ( $any(password).errors?.passwordtooshort && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\">at least 8 characters</mat-error>\r\n          } @if ( $any(password).errors?.noupperinpassword && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >at least 1 uppercase letter</mat-error\r\n          >\r\n          } @if ( $any(password).errors?.nolowerinpassword && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >at least 1 lowercase letter</mat-error\r\n          >\r\n          } @if ( $any(password).errors?.nosymbolinpassword && (password.dirty\r\n          || password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >at least 1 punctuation/symbol</mat-error\r\n          >\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- confirm password -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">confirm password</mat-label>\r\n          <input\r\n            matInput\r\n            [type]=\"hidePassword() ? 'password' : 'text'\"\r\n            name=\"confirmPassword\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"confirmPassword\"\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n      @if (form.errors?.areequal && confirmPassword.touched) {\r\n      <div i18n=\"auth-jwt-admin\" class=\"error\">\r\n        password differs from confirmation password\r\n      </div>\r\n      }\r\n\r\n      <button\r\n        i18n=\"auth-jwt-admin\"\r\n        mat-flat-button\r\n        type=\"submit\"\r\n        color=\"primary\"\r\n        class=\"mat-primary\"\r\n        [disabled]=\"\r\n          form.invalid || form.pristine || busy() || name.pending || email.pending\r\n        \"\r\n      >\r\n        register\r\n      </button>\r\n      @if (busy()) {\r\n      <mat-progress-spinner diameter=\"20\"></mat-progress-spinner>\r\n      }\r\n    </fieldset>\r\n  </form>\r\n\r\n  <details>\r\n    <summary i18n=\"auth-jwt-admin\">Hints</summary>\r\n    <div class=\"info\">\r\n      <p i18n=\"auth-jwt-admin\">\r\n        To register a new user, you must provide his email address, choose a\r\n        password, and choose a username, which must be unique (you will be\r\n        notified if another user has already taken that name). The username must\r\n        include only letters/digits, start with a letter, and be no shorter than\r\n        3 characters, nor longer than 50.\r\n      </p>\r\n      <p i18n=\"auth-jwt-admin\">\r\n        To promote a decent security level, the password must include at least 8\r\n        characters, uppercase and lowercase letters, digits, and punctuation\r\n        (like dashes, stops, parentheses, etc.).\r\n      </p>\r\n      <p i18n=\"auth-jwt-admin\">\r\n        Once registered, if messaging is enabled on the server side the user\r\n        will receive an email message to the email address you specified; he\r\n        will have to click on the provided link to complete the registration\r\n        process. Otherwise, you should edit the newly created user and confirm\r\n        the email registration.\r\n      </p>\r\n    </div>\r\n  </details>\r\n</div>\r\n", styles: ["mat-form-field{width:400px}fieldset{border:1px solid var(--mat-sys-on-surface-variant);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:var(--mat-sys-error)}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { autoConfirm: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoConfirm", required: false }] }], registered: [{ type: i0.Output, args: ["registered"] }] } });
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<div>\n  <form role=\"form\" [formRoot]=\"userForm\">\n    <fieldset>\n      <legend i18n=\"auth-jwt-admin\">registration</legend>\n\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            autofocus\n            spellcheck=\"false\"\n            [formField]=\"userForm.email\"\n          />\n          @if (userForm.email().getError('required') && (userForm.email().dirty() || userForm.email().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">email required</mat-error>\n          }\n          @if (userForm.email().getError('email') && (userForm.email().dirty() || userForm.email().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">invalid email</mat-error>\n          }\n          @if (userForm.email().getError('uniqueEmail') && (userForm.email().dirty() || userForm.email().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">email already registered</mat-error>\n          }\n        </mat-form-field>\n        @if (userForm.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            spellcheck=\"false\"\n            [formField]=\"userForm.name\"\n          />\n          @if (userForm.name().getError('required') && (userForm.name().dirty() || userForm.name().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">username required</mat-error>\n          }\n          @if (userForm.name().getError('pattern') && (userForm.name().dirty() || userForm.name().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">invalid username</mat-error>\n          }\n          @if (userForm.name().getError('uniqueName') && (userForm.name().dirty() || userForm.name().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">username already registered</mat-error>\n          }\n        </mat-form-field>\n        @if (userForm.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            spellcheck=\"false\"\n            [formField]=\"userForm.firstName\"\n          />\n          @if (userForm.firstName().getError('required') && (userForm.firstName().dirty() || userForm.firstName().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\" class=\"text-danger small\">first name required</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            spellcheck=\"false\"\n            [formField]=\"userForm.lastName\"\n          />\n          @if (userForm.lastName().getError('required') && (userForm.lastName().dirty() || userForm.lastName().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\" class=\"text-danger small\">last name required</mat-error>\n          }\n        </mat-form-field>\n      </div>\n\n      <!-- password -->\n      <div>\n        <mat-form-field>\n          <mat-label i18n=\"auth-jwt-admin\">password</mat-label>\n          <input\n            matInput\n            [type]=\"hidePassword() ? 'password' : 'text'\"\n            autocomplete=\"new-password\"\n            spellcheck=\"false\"\n            [formField]=\"userForm.password\"\n          />\n          <button\n            type=\"button\"\n            mat-icon-button\n            matSuffix\n            (click)=\"hidePassword.set(!hidePassword())\"\n            i18n-aria-label=\"auth-jwt-login\"\n            aria-label=\"Hide password\"\n            [attr.aria-pressed]=\"hidePassword()\"\n          >\n            <mat-icon>{{ hidePassword() ? \"visibility_off\" : \"visibility\" }}</mat-icon>\n          </button>\n          <auth-jwt-password-checklist\n            [password]=\"formModel().password\"\n            [username]=\"formModel().name\"\n            [email]=\"formModel().email\"\n            [minLength]=\"8\"\n            [requireUppercase]=\"true\"\n            [requireLowercase]=\"true\"\n            [requireSymbol]=\"true\"\n            [minLengthLabel]=\"'At least 8 characters'\"\n            [uppercaseLabel]=\"'At least 1 uppercase letter'\"\n            [lowercaseLabel]=\"'At least 1 lowercase letter'\"\n            [symbolLabel]=\"'At least 1 punctuation/symbol'\"\n          />\n          @if (userForm.password().getError('required') && (userForm.password().dirty() || userForm.password().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">password required</mat-error>\n          }\n          @if (userForm.password().getError('passwordtooshort') && (userForm.password().dirty() || userForm.password().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">at least 8 characters</mat-error>\n          }\n          @if (userForm.password().getError('noupperinpassword') && (userForm.password().dirty() || userForm.password().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">at least 1 uppercase letter</mat-error>\n          }\n          @if (userForm.password().getError('nolowerinpassword') && (userForm.password().dirty() || userForm.password().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">at least 1 lowercase letter</mat-error>\n          }\n          @if (userForm.password().getError('nosymbolinpassword') && (userForm.password().dirty() || userForm.password().touched())) {\n            <mat-error i18n=\"auth-jwt-admin\">at least 1 punctuation/symbol</mat-error>\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]=\"hidePassword() ? 'password' : 'text'\"\n            autocomplete=\"new-password\"\n            spellcheck=\"false\"\n            [formField]=\"userForm.confirmPassword\"\n          />\n        </mat-form-field>\n      </div>\n      @if (userForm().getError('areequal') && userForm.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]=\"!userForm().valid() || busy()\"\n      >\n        register\n      </button>\n      @if (busy()) {\n        <mat-progress-spinner diameter=\"20\" />\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 var(--mat-sys-on-surface-variant);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:var(--mat-sys-error)}\n"] }]
+        }], propDecorators: { autoConfirm: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoConfirm", required: false }] }], registered: [{ type: i0.Output, args: ["registered"] }] } });
 
 class PasswordStrengthBarComponent {
     constructor() {
         this._colors = ['#F00', '#F90', '#FF0', '#9F0', '#0F0'];
-        this.passwordToCheck = input(...(ngDevMode ? [undefined, { debugName: "passwordToCheck" }] : /* istanbul ignore next */ []));
+        this.passwordToCheck = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "passwordToCheck" }] : /* istanbul ignore next */ []));
         this.strengthChange = output();
-        this.bars = signal([], ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
+        this.bars = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "bars" }] : /* istanbul ignore next */ []));
     }
     measureStrength(p) {
         let force = 0;
@@ -923,12 +877,12 @@ class PasswordStrengthBarComponent {
         }
         this.bars.set(bars);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PasswordStrengthBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: PasswordStrengthBarComponent, isStandalone: true, selector: "auth-jwt-password-strength-bar", inputs: { passwordToCheck: { classPropertyName: "passwordToCheck", publicName: "passwordToCheck", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { strengthChange: "strengthChange" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"strength\">\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:var(--mat-sys-surface-variant);border-radius:2px;display:inline-block;height:5px;margin-right:1px;width:20px}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PasswordStrengthBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: PasswordStrengthBarComponent, isStandalone: true, selector: "auth-jwt-password-strength-bar", inputs: { passwordToCheck: { classPropertyName: "passwordToCheck", publicName: "passwordToCheck", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { strengthChange: "strengthChange" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"strength\">\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:var(--mat-sys-surface-variant);border-radius:2px;display:inline-block;height:5px;margin-right:1px;width:20px}\n"], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: PasswordStrengthBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PasswordStrengthBarComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'auth-jwt-password-strength-bar', template: "<div id=\"strength\">\r\n  <small>strength:</small>\r\n  <ul id=\"strengthBar\">\r\n    <li class=\"point\" [style.background-color]=\"bars()[0]\"></li>\r\n    <li class=\"point\" [style.background-color]=\"bars()[1]\"></li>\r\n    <li class=\"point\" [style.background-color]=\"bars()[2]\"></li>\r\n    <li class=\"point\" [style.background-color]=\"bars()[3]\"></li>\r\n    <li class=\"point\" [style.background-color]=\"bars()[4]\"></li>\r\n  </ul>\r\n</div>\r\n", styles: ["ul#strengthBar{display:inline;list-style:none;margin:0 0 0 15px;padding:0;vertical-align:2px}li.point:last{margin:0!important}li.point{background:var(--mat-sys-surface-variant);border-radius:2px;display:inline-block;height:5px;margin-right:1px;width:20px}\n"] }]
+            args: [{ selector: 'auth-jwt-password-strength-bar', changeDetection: ChangeDetectionStrategy.Eager, 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:var(--mat-sys-surface-variant);border-radius:2px;display:inline-block;height:5px;margin-right:1px;width:20px}\n"] }]
         }], propDecorators: { passwordToCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordToCheck", required: false }] }], strengthChange: [{ type: i0.Output, args: ["strengthChange"] }] } });
 
 /**
@@ -936,73 +890,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
  */
 class UserFilterComponent {
     constructor() {
-        /**
-         * The filter.
-         */
-        this.filter = input(...(ngDevMode ? [undefined, { debugName: "filter" }] : /* istanbul ignore next */ []));
-        /**
-         * Whether the filter is disabled.
-         */
-        this.disabled = input(...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
-        /**
-         * Event emitted when the filter changes.
-         */
+        this.filter = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "filter" }] : /* istanbul ignore next */ []));
+        this.disabled = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.filterChange = output();
-        const formBuilder = inject(FormBuilder);
-        // form
-        this.name = formBuilder.control(null);
-        this.form = formBuilder.group({
-            name: this.name,
-        });
-        // update form when filter changes
-        effect(() => {
-            this.updateForm(this.filter() || undefined);
+        this.formModel = signal({ name: '' }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formModel" }] : /* istanbul ignore next */ []));
+        this.userForm = form(this.formModel, (p) => {
+            disabled(p.name, { when: () => this.disabled() ?? false });
+        }, {
+            submission: {
+                action: async () => {
+                    const name = this.formModel().name.trim();
+                    this.filterChange.emit({ name: name || undefined });
+                },
+            },
         });
-        // disable form when disabled
         effect(() => {
-            if (this.disabled()) {
-                this.form.disable();
-            }
-            else {
-                this.form.enable();
-            }
+            const filter = this.filter();
+            this.formModel.set({ name: filter?.name || '' });
         });
     }
-    updateForm(filter) {
-        if (!filter) {
-            this.form.reset();
-            return;
-        }
-        this.name.setValue(filter.name || null);
-        this.form.markAsPristine();
-    }
-    getFilter() {
-        return {
-            name: this.name.value?.trim(),
-        };
-    }
     reset() {
-        this.form.reset();
-        this._filter = {};
-        this.filterChange.emit(this._filter);
-    }
-    apply() {
-        this._filter = this.getFilter();
-        this.filterChange.emit(this._filter);
+        this.formModel.set({ name: '' });
+        this.filterChange.emit({});
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UserFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.4", type: UserFilterComponent, isStandalone: true, selector: "auth-jwt-user-filter", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"apply()\">\r\n  <div class=\"form-row\">\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">name or ID</mat-label>\r\n      <input matInput [formControl]=\"name\" />\r\n      <button\r\n        mat-icon-button\r\n        matSuffix\r\n        type=\"button\"\r\n        (click)=\"reset()\"\r\n        i18n-matTooltip=\"auth-jwt-admin\"\r\n        matTooltip=\"Reset filters\"\r\n        [disabled]=\"disabled()\"\r\n      >\r\n        <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n      </button>\r\n    </mat-form-field>\r\n\r\n    <button\r\n      id=\"apply\"\r\n      type=\"submit\"\r\n      mat-icon-button\r\n      [disabled]=\"disabled()\"\r\n      i18n-matTooltip=\"auth-jwt-admin\"\r\n      matTooltip=\"Apply filters\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#apply{margin-top:-20px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: UserFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: UserFilterComponent, isStandalone: true, selector: "auth-jwt-user-filter", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, ngImport: i0, template: "<form [formRoot]=\"userForm\">\n  <div class=\"form-row\">\n    <mat-form-field>\n      <mat-label i18n=\"auth-jwt-admin\">name or ID</mat-label>\n      <input matInput [formField]=\"userForm.name\" />\n      <button\n        mat-icon-button\n        matSuffix\n        type=\"button\"\n        (click)=\"reset()\"\n        i18n-matTooltip=\"auth-jwt-admin\"\n        matTooltip=\"Reset filters\"\n        [disabled]=\"disabled()\"\n      >\n        <mat-icon class=\"mat-warn\">clear</mat-icon>\n      </button>\n    </mat-form-field>\n\n    <button\n      id=\"apply\"\n      type=\"submit\"\n      mat-icon-button\n      [disabled]=\"disabled()\"\n      i18n-matTooltip=\"auth-jwt-admin\"\n      matTooltip=\"Apply filters\"\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}#apply{margin-top:-20px}\n"], dependencies: [{ kind: "directive", type: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: FormRoot, selector: "form[formRoot]", inputs: ["formRoot"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UserFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: UserFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'auth-jwt-user-filter', imports: [
-                        ReactiveFormsModule,
+                        FormField,
+                        FormRoot,
                         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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<form [formRoot]=\"userForm\">\n  <div class=\"form-row\">\n    <mat-form-field>\n      <mat-label i18n=\"auth-jwt-admin\">name or ID</mat-label>\n      <input matInput [formField]=\"userForm.name\" />\n      <button\n        mat-icon-button\n        matSuffix\n        type=\"button\"\n        (click)=\"reset()\"\n        i18n-matTooltip=\"auth-jwt-admin\"\n        matTooltip=\"Reset filters\"\n        [disabled]=\"disabled()\"\n      >\n        <mat-icon class=\"mat-warn\">clear</mat-icon>\n      </button>\n    </mat-form-field>\n\n    <button\n      id=\"apply\"\n      type=\"submit\"\n      mat-icon-button\n      [disabled]=\"disabled()\"\n      i18n-matTooltip=\"auth-jwt-admin\"\n      matTooltip=\"Apply filters\"\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}#apply{margin-top:-20px}\n"] }]
         }], ctorParameters: () => [], propDecorators: { filter: [{ type: i0.Input, args: [{ isSignal: true, alias: "filter", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], filterChange: [{ type: i0.Output, args: ["filterChange"] }] } });
 
 /**
@@ -1011,84 +938,74 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
 class UserEditorComponent {
     constructor() {
         this._authService = inject(AuthJwtService);
-        this.unlocked = signal(undefined, ...(ngDevMode ? [{ debugName: "unlocked" }] : /* istanbul ignore next */ []));
-        /**
-         * The user to edit.
-         */
-        this.user = input(undefined, ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
-        /**
-         * Emitted when user changes.
-         */
+        this.formModel = signal({
+            email: '',
+            emailConfirmed: false,
+            lockoutEnabled: false,
+            firstName: '',
+            lastName: '',
+            roles: '',
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formModel" }] : /* istanbul ignore next */ []));
+        this.userForm = form(this.formModel, (p) => {
+            required(p.email);
+            email(p.email);
+            required(p.firstName);
+            maxLength(p.firstName, 50);
+            required(p.lastName);
+            maxLength(p.lastName, 50);
+            maxLength(p.roles, 200);
+        }, {
+            submission: {
+                action: async () => {
+                    this.userChange.emit(this.getUserFromForm());
+                },
+            },
+        });
+        this.unlocked = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "unlocked" }] : /* istanbul ignore next */ []));
+        this.user = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
         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, {
-            nonNullable: true,
-        });
-        this.lockoutEnabled = formBuilder.control(false, {
-            nonNullable: true,
-        });
-        this.firstName = formBuilder.control(null, [
-            Validators.required,
-            Validators.maxLength(50),
-        ]);
-        this.lastName = formBuilder.control(null, [
-            Validators.required,
-            Validators.maxLength(50),
-        ]);
-        this.roles = formBuilder.control(null, Validators.maxLength(200));
-        this.form = formBuilder.group({
-            email: this.email,
-            emailConfirmed: this.emailConfirmed,
-            lockoutEnabled: this.lockoutEnabled,
-            firstName: this.firstName,
-            lastName: this.lastName,
-            roles: this.roles,
-        });
-        // update form when user changes
         effect(() => {
             this.updateForm(this.user() || undefined);
         });
     }
     updateForm(user) {
         if (!user) {
-            this.form.reset();
+            this.formModel.set({
+                email: '',
+                emailConfirmed: false,
+                lockoutEnabled: false,
+                firstName: '',
+                lastName: '',
+                roles: '',
+            });
         }
         else {
-            this.email.setValue(user.email);
-            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.formModel.set({
+                email: user.email,
+                emailConfirmed: user.emailConfirmed || false,
+                lockoutEnabled: user.lockoutEnabled || false,
+                firstName: user.firstName || '',
+                lastName: user.lastName || '',
+                roles: user.roles?.length > 0 ? user.roles.join(' ') : '',
+            });
             this.unlocked.set(user.lockoutEnabled &&
                 (!user.lockoutEnd || user.lockoutEnd < this._authService.getUTCDate()));
         }
     }
     getUserFromForm() {
+        const m = this.formModel();
         return {
             userName: this.user()?.userName || '',
-            email: this.email.value || '',
-            emailConfirmed: this.emailConfirmed.value,
-            lockoutEnabled: this.lockoutEnabled.value,
-            firstName: this.firstName.value || '',
-            lastName: this.lastName.value || '',
-            roles: this.roles.value
-                ? this.roles.value.split(' ').filter((s) => s)
-                : [],
+            email: m.email || '',
+            emailConfirmed: m.emailConfirmed,
+            lockoutEnabled: m.lockoutEnabled,
+            firstName: m.firstName || '',
+            lastName: m.lastName || '',
+            roles: m.roles.trim() ? m.roles.split(' ').filter((s) => s) : [],
         };
     }
     endLockout() {
@@ -1102,26 +1019,21 @@ class UserEditorComponent {
     close() {
         this.editorClose.emit();
     }
-    save() {
-        if (this.form.invalid) {
-            return;
-        }
-        this.userChange.emit(this.getUserFromForm());
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UserEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", type: UserEditorComponent, isStandalone: true, selector: "auth-jwt-user-editor", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { userChange: "userChange", editorClose: "editorClose" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- email -->\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">email</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"email\" />\r\n      @if (email.hasError('required') && (email.dirty || email.touched)) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> email address required </mat-error>\r\n      } @if (email.hasError('pattern') && (email.dirty || email.touched)) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> invalid email address </mat-error>\r\n      }\r\n    </mat-form-field>\r\n\r\n    <!-- emailConfirmed -->\r\n    <mat-checkbox [formControl]=\"emailConfirmed\" i18n=\"auth-jwt-admin\"\r\n      >email address confirmed</mat-checkbox\r\n    >\r\n  </div>\r\n\r\n  <!-- lockoutEnabled -->\r\n  <div class=\"form-row\">\r\n    <mat-checkbox [formControl]=\"lockoutEnabled\" i18n=\"auth-jwt-admin\"\r\n      >lockout enabled</mat-checkbox\r\n    >\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      (click)=\"endLockout()\"\r\n      [disabled]=\"unlocked()\"\r\n      i18n-matTooltip=\"auth-jwt-admin\"\r\n      matTooltip=\"Unlock this user if locked\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">lock_open</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"form-row\">\r\n    <!-- firstName -->\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">first name</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"firstName\" />\r\n      @if ( firstName.hasError('required') && (firstName.dirty ||\r\n      firstName.touched) ) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> first name required </mat-error>\r\n      } @if ( firstName.hasError('maxlength') && (firstName.dirty ||\r\n      firstName.touched) ) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> first name too long </mat-error>\r\n      }\r\n    </mat-form-field>\r\n\r\n    <!-- lastName -->\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">last name</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"lastName\" />\r\n      @if ( lastName.hasError('required') && (lastName.dirty ||\r\n      lastName.touched) ) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> last name required </mat-error>\r\n      } @if ( lastName.hasError('maxlength') && (lastName.dirty ||\r\n      lastName.touched) ) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> last name too long </mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- roles -->\r\n  <div>\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">roles</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"roles\" />\r\n      @if (roles.hasError('maxlength') && (roles.dirty || roles.touched)) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> too long </mat-error>\r\n      }\r\n      <mat-hint i18n>roles (separated by space)</mat-hint>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- buttons -->\r\n  <br />\r\n  <div>\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      i18n-matTooltip=\"auth-jwt-admin\"\r\n      matTooltip=\"Close\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">cancel</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      [disabled]=\"form.invalid\"\r\n      i18n-matTooltip=\"auth-jwt-admin\"\r\n      matTooltip=\"Save user\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: UserEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: UserEditorComponent, isStandalone: true, selector: "auth-jwt-user-editor", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { userChange: "userChange", editorClose: "editorClose" }, ngImport: i0, template: "<form [formRoot]=\"userForm\">\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 [formField]=\"userForm.email\" />\n      @if (userForm.email().getError('required') && (userForm.email().dirty() || userForm.email().touched())) {\n        <mat-error i18n=\"auth-jwt-admin\">email address required</mat-error>\n      }\n      @if (userForm.email().getError('email') && (userForm.email().dirty() || userForm.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 [formField]=\"userForm.emailConfirmed\" i18n=\"auth-jwt-admin\">\n      email address confirmed\n    </mat-checkbox>\n  </div>\n\n  <!-- lockoutEnabled -->\n  <div class=\"form-row\">\n    <mat-checkbox [formField]=\"userForm.lockoutEnabled\" i18n=\"auth-jwt-admin\">\n      lockout enabled\n    </mat-checkbox>\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 [formField]=\"userForm.firstName\" />\n      @if (userForm.firstName().getError('required') && (userForm.firstName().dirty() || userForm.firstName().touched())) {\n        <mat-error i18n=\"auth-jwt-admin\">first name required</mat-error>\n      }\n      @if (userForm.firstName().getError('maxLength') && (userForm.firstName().dirty() || userForm.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 [formField]=\"userForm.lastName\" />\n      @if (userForm.lastName().getError('required') && (userForm.lastName().dirty() || userForm.lastName().touched())) {\n        <mat-error i18n=\"auth-jwt-admin\">last name required</mat-error>\n      }\n      @if (userForm.lastName().getError('maxLength') && (userForm.lastName().dirty() || userForm.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 [formField]=\"userForm.roles\" />\n      @if (userForm.roles().getError('maxLength') && (userForm.roles().dirty() || userForm.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]=\"!userForm().valid()\"\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: FormField, selector: "[formField]", inputs: ["formField"], exportAs: ["formField"] }, { kind: "directive", type: FormRoot, selector: "form[formRoot]", inputs: ["formRoot"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$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: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i4.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UserEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: UserEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'auth-jwt-user-editor', imports: [
-                        ReactiveFormsModule,
+                        FormField,
+                        FormRoot,
                         MatButtonModule,
                         MatCheckboxModule,
                         MatFormFieldModule,
                         MatIconModule,
                         MatInputModule,
                         MatTooltipModule,
-                    ], template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- email -->\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">email</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"email\" />\r\n      @if (email.hasError('required') && (email.dirty || email.touched)) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> email address required </mat-error>\r\n      } @if (email.hasError('pattern') && (email.dirty || email.touched)) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> invalid email address </mat-error>\r\n      }\r\n    </mat-form-field>\r\n\r\n    <!-- emailConfirmed -->\r\n    <mat-checkbox [formControl]=\"emailConfirmed\" i18n=\"auth-jwt-admin\"\r\n      >email address confirmed</mat-checkbox\r\n    >\r\n  </div>\r\n\r\n  <!-- lockoutEnabled -->\r\n  <div class=\"form-row\">\r\n    <mat-checkbox [formControl]=\"lockoutEnabled\" i18n=\"auth-jwt-admin\"\r\n      >lockout enabled</mat-checkbox\r\n    >\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      (click)=\"endLockout()\"\r\n      [disabled]=\"unlocked()\"\r\n      i18n-matTooltip=\"auth-jwt-admin\"\r\n      matTooltip=\"Unlock this user if locked\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">lock_open</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"form-row\">\r\n    <!-- firstName -->\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">first name</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"firstName\" />\r\n      @if ( firstName.hasError('required') && (firstName.dirty ||\r\n      firstName.touched) ) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> first name required </mat-error>\r\n      } @if ( firstName.hasError('maxlength') && (firstName.dirty ||\r\n      firstName.touched) ) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> first name too long </mat-error>\r\n      }\r\n    </mat-form-field>\r\n\r\n    <!-- lastName -->\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">last name</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"lastName\" />\r\n      @if ( lastName.hasError('required') && (lastName.dirty ||\r\n      lastName.touched) ) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> last name required </mat-error>\r\n      } @if ( lastName.hasError('maxlength') && (lastName.dirty ||\r\n      lastName.touched) ) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> last name too long </mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- roles -->\r\n  <div>\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">roles</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"roles\" />\r\n      @if (roles.hasError('maxlength') && (roles.dirty || roles.touched)) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> too long </mat-error>\r\n      }\r\n      <mat-hint i18n>roles (separated by space)</mat-hint>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- buttons -->\r\n  <br />\r\n  <div>\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      i18n-matTooltip=\"auth-jwt-admin\"\r\n      matTooltip=\"Close\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">cancel</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      [disabled]=\"form.invalid\"\r\n      i18n-matTooltip=\"auth-jwt-admin\"\r\n      matTooltip=\"Save user\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, template: "<form [formRoot]=\"userForm\">\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 [formField]=\"userForm.email\" />\n      @if (userForm.email().getError('required') && (userForm.email().dirty() || userForm.email().touched())) {\n        <mat-error i18n=\"auth-jwt-admin\">email address required</mat-error>\n      }\n      @if (userForm.email().getError('email') && (userForm.email().dirty() || userForm.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 [formField]=\"userForm.emailConfirmed\" i18n=\"auth-jwt-admin\">\n      email address confirmed\n    </mat-checkbox>\n  </div>\n\n  <!-- lockoutEnabled -->\n  <div class=\"form-row\">\n    <mat-checkbox [formField]=\"userForm.lockoutEnabled\" i18n=\"auth-jwt-admin\">\n      lockout enabled\n    </mat-checkbox>\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 [formField]=\"userForm.firstName\" />\n      @if (userForm.firstName().getError('required') && (userForm.firstName().dirty() || userForm.firstName().touched())) {\n        <mat-error i18n=\"auth-jwt-admin\">first name required</mat-error>\n      }\n      @if (userForm.firstName().getError('maxLength') && (userForm.firstName().dirty() || userForm.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 [formField]=\"userForm.lastName\" />\n      @if (userForm.lastName().getError('required') && (userForm.lastName().dirty() || userForm.lastName().touched())) {\n        <mat-error i18n=\"auth-jwt-admin\">last name required</mat-error>\n      }\n      @if (userForm.lastName().getError('maxLength') && (userForm.lastName().dirty() || userForm.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 [formField]=\"userForm.roles\" />\n      @if (userForm.roles().getError('maxLength') && (userForm.roles().dirty() || userForm.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]=\"!userForm().valid()\"\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: () => [], propDecorators: { user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: false }] }], userChange: [{ type: i0.Output, args: ["userChange"] }], editorClose: [{ type: i0.Output, args: ["editorClose"] }] } });
 
 /**
@@ -1174,14 +1086,13 @@ class UserListComponent {
     getGravatarUrl(email, options) {
         return this._gravatarService.buildGravatarUrl(email, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UserListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.4", 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: ["table{width:100%;border-collapse:collapse}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}fieldset{border:1px solid var(--mat-sys-on-surface-variant);border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}div#filters{grid-area:filters}div#list{grid-area:list}div#editor{grid-area:editor}div#container{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"filters\" \"list\" \"editor\";gap:8px}@media only screen and (max-width:959px){.noif-lt-md{display:none}}@media only screen and (min-width:1920px){div#container{grid-template-rows:auto 1fr;grid-template-columns:1fr auto;grid-template-areas:\"filters filters\" \"list editor\"}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: UserEditorComponent, selector: "auth-jwt-user-editor", inputs: ["user"], outputs: ["userChange", "editorClose"] }, { kind: "component", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: ["filter", "disabled"], outputs: ["filterChange"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: UserListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", 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: ["table{width:100%;border-collapse:collapse}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}fieldset{border:1px solid var(--mat-sys-on-surface-variant);border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}div#filters{grid-area:filters}div#list{grid-area:list}div#editor{grid-area:editor}div#container{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"filters\" \"list\" \"editor\";gap:8px}@media only screen and (max-width:959px){.noif-lt-md{display:none}}@media only screen and (min-width:1920px){div#container{grid-template-rows:auto 1fr;grid-template-columns:1fr auto;grid-template-areas:\"filters filters\" \"list editor\"}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: UserEditorComponent, selector: "auth-jwt-user-editor", inputs: ["user"], outputs: ["userChange", "editorClose"] }, { kind: "component", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: ["filter", "disabled"], outputs: ["filterChange"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImport: i0, type: UserListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: UserListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'auth-jwt-user-list', imports: [
                         CommonModule,
-                        ReactiveFormsModule,
                         MatButtonModule,
                         MatExpansionModule,
                         MatIconModule,
@@ -1191,7 +1102,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.4", ngImpor
                         MatTooltipModule,
                         UserEditorComponent,
                         UserFilterComponent,
-                    ], template: "<div id=\"container\">\n  <div>\n    <!-- filters -->\n    <div id=\"filters\">\n      <auth-jwt-user-filter\n        [filter]=\"filter$ | async\"\n        (filterChange)=\"onFilterChange($event)\"\n      ></auth-jwt-user-filter>\n    </div>\n\n    <!-- list -->\n    @if (page$ | async; as page) {\n    <div id=\"list\">\n      @if (loading$ | async) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n      }\n      <table>\n        <thead>\n          <td></td>\n          <td></td>\n          <th i18n=\"auth-jwt-admin\">name</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">first</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">last</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">email</th>\n          <th i18n=\"auth-jwt-admin\">roles</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">lock end</th>\n        </thead>\n        <tbody>\n          @for (user of page.items; track user) {\n          <tr>\n            <td class=\"fit-width\">\n              <button\n                mat-icon-button\n                type=\"button\"\n                i18n-matTooltip=\"auth-jwt-admin\"\n                matTooltip=\"Edit this user\"\n                color=\"primary\"\n                (click)=\"setActiveUser(user)\"\n              >\n                <mat-icon class=\"mat-primary\">mode_edit</mat-icon>\n              </button>\n              <button\n                mat-icon-button\n                type=\"button\"\n                i18n-matTooltip=\"auth-jwt-admin\"\n                matTooltip=\"Delete this user\"\n                color=\"warn\"\n                (click)=\"deleteUser(user)\"\n              >\n                <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\n              </button>\n            </td>\n            <td class=\"fit-width\">\n              <img\n                alt=\"avatar\"\n                [src]=\"getGravatarUrl(user.email, { size: '32' })\"\n                [alt]=\"user.userName\"\n              />\n            </td>\n            <td>{{ user.userName }}</td>\n            <td class=\"noif-lt-md\">{{ user.firstName }}</td>\n            <td class=\"noif-lt-md\">{{ user.lastName }}</td>\n            <td class=\"noif-lt-md\">\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\n            </td>\n            <td>{{ user.roles.join(\" \") }}</td>\n            <td class=\"noif-lt-md\">{{ user.lockoutEnd }}</td>\n          </tr>\n          }\n        </tbody>\n      </table>\n      <!-- paginator -->\n      <div class=\"form-row\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          color=\"warn\"\n          i18n-matmatTooltip=\"auth-jwt-admin\"\n          matTooltip=\"Refresh list\"\n          (click)=\"reset()\"\n        >\n          <mat-icon class=\"mat-warn\">autorenew</mat-icon>\n        </button>\n        <mat-paginator\n          [length]=\"page.total\"\n          [pageIndex]=\"page.pageNumber - 1\"\n          [pageSize]=\"page.pageSize\"\n          [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\n          (page)=\"onPageChange($event)\"\n          [showFirstLastButtons]=\"true\"\n        ></mat-paginator>\n      </div>\n    </div>\n    }\n  </div>\n\n  <!-- editor -->\n  <mat-expansion-panel\n    id=\"editor\"\n    [expanded]=\"active$ | async\"\n    [disabled]=\"!(active$ | async)\"\n  >\n    @if (active$ | async; as active) {\n    <div>\n      <fieldset>\n        <legend>{{ active.userName }}</legend>\n        <auth-jwt-user-editor\n          [user]=\"active\"\n          (userChange)=\"saveActiveUser($event)\"\n          (editorClose)=\"resetActiveUser()\"\n        ></auth-jwt-user-editor>\n      </fieldset>\n    </div>\n    }\n  </mat-expansion-panel>\n</div>\n", styles: ["table{width:100%;border-collapse:collapse}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}fieldset{border:1px solid var(--mat-sys-on-surface-variant);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"] }]
+                    ], changeDetection: ChangeDetectionStrategy.Eager, 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: ["table{width:100%;border-collapse:collapse}tbody tr:nth-child(odd){background-color:var(--mat-sys-surface-container)}th{text-align:left;font-weight:400;color:var(--mat-sys-on-surface-variant)}tbody tr:hover{background-color:var(--mat-sys-surface-container-high)}td.fit-width{width:1px;white-space:nowrap}tbody tr.selected{background-color:var(--mat-sys-secondary-container);color:var(--mat-sys-on-secondary-container)}fieldset{border:1px solid var(--mat-sys-on-surface-variant);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: () => [] });
 
 /*