@myrmidon/auth-jwt-admin 8.0.2 → 8.0.3

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, input, output, signal, Component, effect } 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 { MatSnackBar } from '@angular/material/snack-bar';
@@ -223,10 +223,10 @@ class AuthJwtAccountService {
             .delete(this._env.get('apiUrl') + 'accounts/' + name)
             .pipe(catchError(this._error.handleError));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AuthJwtAccountService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AuthJwtAccountService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AuthJwtAccountService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AuthJwtAccountService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AuthJwtAccountService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AuthJwtAccountService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -398,89 +398,290 @@ class UserListRepository {
         });
         return promise;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserListRepository, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserListRepository, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserListRepository, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserListRepository, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserListRepository, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserListRepository, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [] });
 
-class PasswordStrengthBarComponent {
+/**
+ * Default labels for password rules.
+ */
+const DEFAULT_RULE_LABELS = {
+    minLength: 'At least {value} characters',
+    maxLength: 'No more than {value} characters',
+    hasUppercase: 'Contains uppercase letter',
+    hasLowercase: 'Contains lowercase letter',
+    hasNumber: 'Contains number',
+    hasSymbol: 'Contains symbol',
+    noUsername: 'Does not contain username',
+    noEmail: 'Does not contain email',
+};
+/**
+ * A modern, fully reactive password checklist component with strength meter.
+ * Uses only signals for state management and is ready for zoneless Angular.
+ */
+class PasswordChecklistComponent {
     constructor() {
-        this._colors = ['#F00', '#F90', '#FF0', '#9F0', '#0F0'];
-        this.passwordToCheck = input(...(ngDevMode ? [undefined, { debugName: "passwordToCheck" }] : []));
-        this.strengthChange = output();
-        this.bars = signal([], ...(ngDevMode ? [{ debugName: "bars" }] : []));
-    }
-    measureStrength(p) {
-        let force = 0;
-        const regex = /[$-/:-?{-~!"^_`\[\]]/g; // "
-        const lowerLetters = /[a-z]+/.test(p);
-        const upperLetters = /[A-Z]+/.test(p);
-        const numbers = /[0-9]+/.test(p);
-        const symbols = regex.test(p);
-        const flags = [lowerLetters, upperLetters, numbers, symbols];
-        let passedMatches = 0;
-        for (const flag of flags) {
-            passedMatches += flag === true ? 1 : 0;
-        }
-        force += 2 * p.length + (p.length >= 10 ? 1 : 0);
-        force += passedMatches * 10;
-        // penalty (short password)
-        force = p.length <= 6 ? Math.min(force, 10) : force;
-        // penalty (poor letiety of characters)
-        force = passedMatches === 1 ? Math.min(force, 10) : force;
-        force = passedMatches === 2 ? Math.min(force, 20) : force;
-        force = passedMatches === 3 ? Math.min(force, 40) : force;
-        return force;
+        // Input signals for password and context
+        this.password = input('', ...(ngDevMode ? [{ debugName: "password" }] : []));
+        this.username = input('', ...(ngDevMode ? [{ debugName: "username" }] : []));
+        this.email = input('', ...(ngDevMode ? [{ debugName: "email" }] : []));
+        this.hidden = input(false, ...(ngDevMode ? [{ debugName: "hidden" }] : []));
+        // Input signals for rule configuration
+        this.minLength = input(null, ...(ngDevMode ? [{ debugName: "minLength" }] : []));
+        this.maxLength = input(null, ...(ngDevMode ? [{ debugName: "maxLength" }] : []));
+        this.requireUppercase = input(false, ...(ngDevMode ? [{ debugName: "requireUppercase" }] : []));
+        this.requireLowercase = input(false, ...(ngDevMode ? [{ debugName: "requireLowercase" }] : []));
+        this.requireNumber = input(false, ...(ngDevMode ? [{ debugName: "requireNumber" }] : []));
+        this.requireSymbol = input(false, ...(ngDevMode ? [{ debugName: "requireSymbol" }] : []));
+        this.checkUsername = input(false, ...(ngDevMode ? [{ debugName: "checkUsername" }] : []));
+        this.checkEmail = input(false, ...(ngDevMode ? [{ debugName: "checkEmail" }] : []));
+        // Input signals for custom labels
+        this.minLengthLabel = input(null, ...(ngDevMode ? [{ debugName: "minLengthLabel" }] : []));
+        this.maxLengthLabel = input(null, ...(ngDevMode ? [{ debugName: "maxLengthLabel" }] : []));
+        this.uppercaseLabel = input(null, ...(ngDevMode ? [{ debugName: "uppercaseLabel" }] : []));
+        this.lowercaseLabel = input(null, ...(ngDevMode ? [{ debugName: "lowercaseLabel" }] : []));
+        this.numberLabel = input(null, ...(ngDevMode ? [{ debugName: "numberLabel" }] : []));
+        this.symbolLabel = input(null, ...(ngDevMode ? [{ debugName: "symbolLabel" }] : []));
+        this.usernameLabel = input(null, ...(ngDevMode ? [{ debugName: "usernameLabel" }] : []));
+        this.emailLabel = input(null, ...(ngDevMode ? [{ debugName: "emailLabel" }] : []));
+        // Input signals for display options
+        this.noChecklist = input(false, ...(ngDevMode ? [{ debugName: "noChecklist" }] : []));
+        this.noMeter = input(false, ...(ngDevMode ? [{ debugName: "noMeter" }] : []));
+        // Output signal for validity
+        this.validChange = output();
+        // Symbol regex pattern
+        this.symbolRegex = /[-`~!@#$%^&*()_+=\[\]{};:'",.<>/?|\\]/;
+        // Computed signals for individual rule checks
+        this.hasMinLength = computed(() => {
+            const min = this.minLength();
+            return min === null || this.password().length >= min;
+        }, ...(ngDevMode ? [{ debugName: "hasMinLength" }] : []));
+        this.hasMaxLength = computed(() => {
+            const max = this.maxLength();
+            return max === null || this.password().length <= max;
+        }, ...(ngDevMode ? [{ debugName: "hasMaxLength" }] : []));
+        this.hasUppercase = computed(() => {
+            return /[A-Z]/.test(this.password());
+        }, ...(ngDevMode ? [{ debugName: "hasUppercase" }] : []));
+        this.hasLowercase = computed(() => {
+            return /[a-z]/.test(this.password());
+        }, ...(ngDevMode ? [{ debugName: "hasLowercase" }] : []));
+        this.hasNumber = computed(() => {
+            return /[0-9]/.test(this.password());
+        }, ...(ngDevMode ? [{ debugName: "hasNumber" }] : []));
+        this.hasSymbol = computed(() => {
+            return this.symbolRegex.test(this.password());
+        }, ...(ngDevMode ? [{ debugName: "hasSymbol" }] : []));
+        this.noUsernameInPassword = computed(() => {
+            const username = this.username().toLowerCase();
+            const pwd = this.password().toLowerCase();
+            return !username || !pwd || !pwd.includes(username);
+        }, ...(ngDevMode ? [{ debugName: "noUsernameInPassword" }] : []));
+        this.noEmailInPassword = computed(() => {
+            const email = this.email().toLowerCase();
+            const pwd = this.password().toLowerCase();
+            return !email || !pwd || !pwd.includes(email);
+        }, ...(ngDevMode ? [{ debugName: "noEmailInPassword" }] : []));
+        // Computed signal for all rules with their status
+        this.rules = computed(() => {
+            const rules = [];
+            if (this.minLength() !== null) {
+                rules.push({
+                    id: 'minLength',
+                    label: this.getLabel('minLength', this.minLengthLabel(), this.minLength()),
+                    enabled: true,
+                });
+            }
+            if (this.maxLength() !== null) {
+                rules.push({
+                    id: 'maxLength',
+                    label: this.getLabel('maxLength', this.maxLengthLabel(), this.maxLength()),
+                    enabled: true,
+                });
+            }
+            if (this.requireUppercase()) {
+                rules.push({
+                    id: 'hasUppercase',
+                    label: this.getLabel('hasUppercase', this.uppercaseLabel()),
+                    enabled: true,
+                });
+            }
+            if (this.requireLowercase()) {
+                rules.push({
+                    id: 'hasLowercase',
+                    label: this.getLabel('hasLowercase', this.lowercaseLabel()),
+                    enabled: true,
+                });
+            }
+            if (this.requireNumber()) {
+                rules.push({
+                    id: 'hasNumber',
+                    label: this.getLabel('hasNumber', this.numberLabel()),
+                    enabled: true,
+                });
+            }
+            if (this.requireSymbol()) {
+                rules.push({
+                    id: 'hasSymbol',
+                    label: this.getLabel('hasSymbol', this.symbolLabel()),
+                    enabled: true,
+                });
+            }
+            if (this.checkUsername()) {
+                rules.push({
+                    id: 'noUsername',
+                    label: this.getLabel('noUsername', this.usernameLabel()),
+                    enabled: true,
+                });
+            }
+            if (this.checkEmail()) {
+                rules.push({
+                    id: 'noEmail',
+                    label: this.getLabel('noEmail', this.emailLabel()),
+                    enabled: true,
+                });
+            }
+            return rules;
+        }, ...(ngDevMode ? [{ debugName: "rules" }] : []));
+        // Computed signal to check if a specific rule is satisfied
+        this.isRuleSatisfied = computed(() => {
+            return (ruleId) => {
+                switch (ruleId) {
+                    case 'minLength':
+                        return this.hasMinLength();
+                    case 'maxLength':
+                        return this.hasMaxLength();
+                    case 'hasUppercase':
+                        return this.hasUppercase();
+                    case 'hasLowercase':
+                        return this.hasLowercase();
+                    case 'hasNumber':
+                        return this.hasNumber();
+                    case 'hasSymbol':
+                        return this.hasSymbol();
+                    case 'noUsername':
+                        return this.noUsernameInPassword();
+                    case 'noEmail':
+                        return this.noEmailInPassword();
+                    default:
+                        return false;
+                }
+            };
+        }, ...(ngDevMode ? [{ debugName: "isRuleSatisfied" }] : []));
+        // Computed signal for overall validity
+        this.isValid = computed(() => {
+            const rules = this.rules();
+            if (rules.length === 0) {
+                return true;
+            }
+            const checkFn = this.isRuleSatisfied();
+            return rules.every((rule) => checkFn(rule.id));
+        }, ...(ngDevMode ? [{ debugName: "isValid" }] : []));
+        // Computed signal for password strength (0-100)
+        this.strength = computed(() => {
+            const pwd = this.password();
+            if (!pwd) {
+                return 0;
+            }
+            let score = 0;
+            // Length contribution (max 30 points)
+            const lengthScore = Math.min(pwd.length * 2, 30);
+            score += lengthScore;
+            // Character variety (max 40 points, 10 per type)
+            const hasLower = /[a-z]/.test(pwd);
+            const hasUpper = /[A-Z]/.test(pwd);
+            const hasDigit = /[0-9]/.test(pwd);
+            const hasSymbol = this.symbolRegex.test(pwd);
+            score += hasLower ? 10 : 0;
+            score += hasUpper ? 10 : 0;
+            score += hasDigit ? 10 : 0;
+            score += hasSymbol ? 10 : 0;
+            // Entropy bonus (max 30 points)
+            const uniqueChars = new Set(pwd).size;
+            const entropyScore = Math.min((uniqueChars / pwd.length) * 30, 30);
+            score += entropyScore;
+            // Penalties
+            if (pwd.length < 8) {
+                score = Math.min(score, 20);
+            }
+            const varietyCount = [hasLower, hasUpper, hasDigit, hasSymbol].filter(Boolean).length;
+            if (varietyCount === 1) {
+                score = Math.min(score, 20);
+            }
+            else if (varietyCount === 2) {
+                score = Math.min(score, 40);
+            }
+            else if (varietyCount === 3) {
+                score = Math.min(score, 70);
+            }
+            return Math.min(Math.round(score), 100);
+        }, ...(ngDevMode ? [{ debugName: "strength" }] : []));
+        // Computed signal for strength level (0-4)
+        this.strengthLevel = computed(() => {
+            const strength = this.strength();
+            if (strength <= 20)
+                return 0;
+            if (strength <= 40)
+                return 1;
+            if (strength <= 60)
+                return 2;
+            if (strength <= 80)
+                return 3;
+            return 4;
+        }, ...(ngDevMode ? [{ debugName: "strengthLevel" }] : []));
+        // Computed signal for strength color
+        this.strengthColor = computed(() => {
+            const colors = ['#F00', '#F90', '#FF0', '#9F0', '#0F0'];
+            return colors[this.strengthLevel()];
+        }, ...(ngDevMode ? [{ debugName: "strengthColor" }] : []));
+        // Computed signal for strength percentage
+        this.strengthPercent = computed(() => {
+            return this.strength();
+        }, ...(ngDevMode ? [{ debugName: "strengthPercent" }] : []));
+        // Effect to emit validity changes
+        // This will automatically track the isValid computed signal
+        effect(() => {
+            const isValid = this.isValid();
+            // Emit the validity status whenever it changes
+            this.validChange.emit(isValid);
+        });
     }
-    getColor(s) {
-        let idx = 0;
-        if (s <= 10) {
-            idx = 0;
-        }
-        else if (s <= 20) {
-            idx = 1;
-        }
-        else if (s <= 30) {
-            idx = 2;
-        }
-        else if (s <= 40) {
-            idx = 3;
-        }
-        else {
-            idx = 4;
+    /**
+     * Gets the label for a rule, using custom label if provided, otherwise default.
+     */
+    getLabel(ruleId, customLabel, value) {
+        if (customLabel) {
+            return this.interpolateLabel(customLabel, value);
         }
-        return {
-            idx: idx + 1,
-            col: this._colors[idx],
-        };
+        const defaultLabel = DEFAULT_RULE_LABELS[ruleId] || ruleId;
+        return this.interpolateLabel(defaultLabel, value);
     }
-    ngOnChanges(changes) {
-        const password = changes['passwordToCheck'].currentValue;
-        this.setBarColors(5, '#DDD');
-        if (password) {
-            const strength = this.measureStrength(password);
-            const c = this.getColor(strength);
-            this.setBarColors(c.idx, c.col);
-            this.strengthChange.emit(strength);
+    /**
+     * Interpolates {value} placeholder in label.
+     */
+    interpolateLabel(label, value) {
+        if (value !== undefined) {
+            return label.replace('{value}', value.toString());
         }
+        return label;
     }
-    setBarColors(count, col) {
-        const bars = this.bars();
-        for (let n = 0; n < count; n++) {
-            bars[n] = col;
-        }
-        this.bars.set(bars);
+    /**
+     * Helper method to check if a rule is satisfied (for template use).
+     */
+    checkRule(ruleId) {
+        return this.isRuleSatisfied()(ruleId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PasswordStrengthBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: PasswordStrengthBarComponent, isStandalone: true, selector: "auth-jwt-password-strength-bar", inputs: { passwordToCheck: { classPropertyName: "passwordToCheck", publicName: "passwordToCheck", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { strengthChange: "strengthChange" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"strength\">\n  <small>strength:</small>\n  <ul id=\"strengthBar\">\n    <li class=\"point\" [style.background-color]=\"bars()[0]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars()[1]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars()[2]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars()[3]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars()[4]\"></li>\n  </ul>\n</div>\n", styles: ["ul#strengthBar{display:inline;list-style:none;margin:0 0 0 15px;padding:0;vertical-align:2px}li.point:last{margin:0!important}li.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;margin-right:1px;width:20px}\n"] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PasswordChecklistComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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:#ddd;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:#4caf50;color:#fff}.checklist-item.unsatisfied .checklist-icon{background-color:#f44336;color:#fff}.checklist-text{flex:1}.checklist-item.satisfied .checklist-text{color:#4caf50}.checklist-item.unsatisfied .checklist-text{color:#f44336}@media(prefers-color-scheme:dark){.strength-bar-container{background-color:#444}.checklist-item.satisfied .checklist-text{color:#81c784}.checklist-item.unsatisfied .checklist-text{color:#e57373}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: PasswordStrengthBarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PasswordChecklistComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'auth-jwt-password-strength-bar', template: "<div id=\"strength\">\n  <small>strength:</small>\n  <ul id=\"strengthBar\">\n    <li class=\"point\" [style.background-color]=\"bars()[0]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars()[1]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars()[2]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars()[3]\"></li>\n    <li class=\"point\" [style.background-color]=\"bars()[4]\"></li>\n  </ul>\n</div>\n", styles: ["ul#strengthBar{display:inline;list-style:none;margin:0 0 0 15px;padding:0;vertical-align:2px}li.point:last{margin:0!important}li.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;margin-right:1px;width:20px}\n"] }]
-        }] });
+            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:#ddd;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:#4caf50;color:#fff}.checklist-item.unsatisfied .checklist-icon{background-color:#f44336;color:#fff}.checklist-text{flex:1}.checklist-item.satisfied .checklist-text{color:#4caf50}.checklist-item.unsatisfied .checklist-text{color:#f44336}@media(prefers-color-scheme:dark){.strength-bar-container{background-color:#444}.checklist-item.satisfied .checklist-text{color:#81c784}.checklist-item.unsatisfied .checklist-text{color:#e57373}}\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"] }] } });
 
 /**
  * User registration form.
@@ -638,10 +839,10 @@ class AuthJwtRegistrationComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AuthJwtRegistrationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: AuthJwtRegistrationComponent, isStandalone: true, selector: "auth-jwt-registration", inputs: { autoConfirm: { classPropertyName: "autoConfirm", publicName: "autoConfirm", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { registered: "registered" }, ngImport: i0, template: "<div>\r\n  <form role=\"form\" [formGroup]=\"form\" (submit)=\"onSubmit()\">\r\n    <fieldset>\r\n      <legend i18n=\"auth-jwt-admin\">registration</legend>\r\n      <!-- email -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label i18n>email</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"email\"\r\n            id=\"email\"\r\n            maxlength=\"256\"\r\n            required\r\n            autofocus\r\n            spellcheck=\"false\"\r\n            [formControl]=\"email\"\r\n          />\r\n          @if ( $any(email).errors?.required && (email.dirty || email.touched) )\r\n          {\r\n          <mat-error i18n=\"auth-jwt-admin\">email required</mat-error>\r\n          } @if ($any(email).errors?.email && (email.dirty || email.touched)) {\r\n          <mat-error i18n=\"auth-jwt-admin\">invalid email</mat-error>\r\n          } @if ( $any(email).errors?.uniqueEmail && (email.dirty ||\r\n          email.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\">email already registered</mat-error>\r\n          }\r\n        </mat-form-field>\r\n        @if (email.pending) {\r\n        <mat-icon>hourglass</mat-icon>\r\n        }\r\n      </div>\r\n\r\n      <!-- name -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">username</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"name\"\r\n            maxlength=\"50\"\r\n            required\r\n            pattern=\"^[a-zA-Z][a-zA-Z0-9]{2,49}$\"\r\n            spellcheck=\"false\"\r\n            [formControl]=\"name\"\r\n          />\r\n          @if ($any(name).errors?.required && (name.dirty || name.touched)) {\r\n          <mat-error i18n=\"auth-jwt-admin\">username required</mat-error>\r\n          } @if ($any(name).errors?.pattern && (name.dirty || name.touched)) {\r\n          <mat-error i18n=\"auth-jwt-admin\">invalid username</mat-error>\r\n          } @if ( $any(name).errors?.uniqueName && (name.dirty || name.touched)\r\n          ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >username already registered</mat-error\r\n          >\r\n          }\r\n        </mat-form-field>\r\n        @if (name.pending) {\r\n        <mat-icon>hourglass</mat-icon>\r\n        }\r\n      </div>\r\n\r\n      <!-- first name -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">first name</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"firstName\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"firstName\"\r\n          />\r\n          @if ( firstName.hasError('required') && (firstName.dirty ||\r\n          firstName.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\" class=\"text-danger small\">\r\n            first name required\r\n          </mat-error>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- last name -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">last name</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"lastName\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"lastName\"\r\n          />\r\n          @if ( lastName.hasError('required') && (lastName.dirty ||\r\n          lastName.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\" class=\"text-danger small\">\r\n            last name required\r\n          </mat-error>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- <div [formGroup]=\"passwords\"> -->\r\n      <!-- password -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">password</mat-label>\r\n          <input\r\n            matInput\r\n            [type]=\"hidePassword() ? 'password' : 'text'\"\r\n            name=\"password\"\r\n            autocomplete=\"new-password\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"password\"\r\n          />\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matSuffix\r\n            (click)=\"hidePassword.set(!hidePassword())\"\r\n            i18n-aria-label=\"auth-jwt-login\"\r\n            aria-label=\"Hide password\"\r\n            [attr.aria-pressed]=\"hidePassword()\"\r\n          >\r\n            <mat-icon>{{\r\n              hidePassword() ? \"visibility_off\" : \"visibility\"\r\n            }}</mat-icon>\r\n          </button>\r\n          <auth-jwt-password-strength-bar [passwordToCheck]=\"password.value\">\r\n          </auth-jwt-password-strength-bar>\r\n          @if ( $any(password).errors?.required && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\">password required</mat-error>\r\n          } @if ( $any(password).errors?.passwordtooshort && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\">at least 8 characters</mat-error>\r\n          } @if ( $any(password).errors?.noupperinpassword && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >at least 1 uppercase letter</mat-error\r\n          >\r\n          } @if ( $any(password).errors?.nolowerinpassword && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >at least 1 lowercase letter</mat-error\r\n          >\r\n          } @if ( $any(password).errors?.nosymbolinpassword && (password.dirty\r\n          || password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >at least 1 punctuation/symbol</mat-error\r\n          >\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- confirm password -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">confirm password</mat-label>\r\n          <input\r\n            matInput\r\n            [type]=\"hidePassword() ? 'password' : 'text'\"\r\n            name=\"confirmPassword\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"confirmPassword\"\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n      @if (form.errors?.areequal && confirmPassword.touched) {\r\n      <div i18n=\"auth-jwt-admin\" class=\"error\">\r\n        password differs from confirmation password\r\n      </div>\r\n      }\r\n\r\n      <button\r\n        i18n=\"auth-jwt-admin\"\r\n        mat-flat-button\r\n        type=\"submit\"\r\n        color=\"primary\"\r\n        class=\"mat-primary\"\r\n        [disabled]=\"\r\n          form.invalid || form.pristine || busy() || name.pending || email.pending\r\n        \"\r\n      >\r\n        register\r\n      </button>\r\n      @if (busy()) {\r\n      <mat-progress-spinner diameter=\"20\"></mat-progress-spinner>\r\n      }\r\n    </fieldset>\r\n  </form>\r\n\r\n  <details>\r\n    <summary i18n=\"auth-jwt-admin\">Hints</summary>\r\n    <div class=\"info\">\r\n      <p i18n=\"auth-jwt-admin\">\r\n        To register a new user, you must provide his email address, choose a\r\n        password, and choose a username, which must be unique (you will be\r\n        notified if another user has already taken that name). The username must\r\n        include only letters/digits, start with a letter, and be no shorter than\r\n        3 characters, nor longer than 50.\r\n      </p>\r\n      <p i18n=\"auth-jwt-admin\">\r\n        To promote a decent security level, the password must include at least 8\r\n        characters, uppercase and lowercase letters, digits, and punctuation\r\n        (like dashes, stops, parentheses, etc.).\r\n      </p>\r\n      <p i18n=\"auth-jwt-admin\">\r\n        Once registered, if messaging is enabled on the server side the user\r\n        will receive an email message to the email address you specified; he\r\n        will have to click on the provided link to complete the registration\r\n        process. Otherwise, you should edit the newly created user and confirm\r\n        the email registration.\r\n      </p>\r\n    </div>\r\n  </details>\r\n</div>\r\n", styles: ["mat-form-field{width:400px}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}details{margin:8px}.info{column-width:600px}.error{color:red}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatButton, selector: "    button[matButton], a[matButton], button[mat-button], button[mat-raised-button],    button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button],    a[mat-flat-button], a[mat-stroked-button]  ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatProgressSpinnerModule }, { kind: "component", type: i6.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: PasswordStrengthBarComponent, selector: "auth-jwt-password-strength-bar", inputs: ["passwordToCheck"], outputs: ["strengthChange"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AuthJwtRegistrationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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 silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}details{margin:8px}.info{column-width:600px}.error{color:red}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: AuthJwtRegistrationComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: AuthJwtRegistrationComponent, decorators: [{
             type: Component,
             args: [{ selector: 'auth-jwt-registration', imports: [
                         ReactiveFormsModule,
@@ -650,9 +851,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                         MatIconModule,
                         MatInputModule,
                         MatProgressSpinnerModule,
-                        PasswordStrengthBarComponent,
-                    ], template: "<div>\r\n  <form role=\"form\" [formGroup]=\"form\" (submit)=\"onSubmit()\">\r\n    <fieldset>\r\n      <legend i18n=\"auth-jwt-admin\">registration</legend>\r\n      <!-- email -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label i18n>email</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"email\"\r\n            id=\"email\"\r\n            maxlength=\"256\"\r\n            required\r\n            autofocus\r\n            spellcheck=\"false\"\r\n            [formControl]=\"email\"\r\n          />\r\n          @if ( $any(email).errors?.required && (email.dirty || email.touched) )\r\n          {\r\n          <mat-error i18n=\"auth-jwt-admin\">email required</mat-error>\r\n          } @if ($any(email).errors?.email && (email.dirty || email.touched)) {\r\n          <mat-error i18n=\"auth-jwt-admin\">invalid email</mat-error>\r\n          } @if ( $any(email).errors?.uniqueEmail && (email.dirty ||\r\n          email.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\">email already registered</mat-error>\r\n          }\r\n        </mat-form-field>\r\n        @if (email.pending) {\r\n        <mat-icon>hourglass</mat-icon>\r\n        }\r\n      </div>\r\n\r\n      <!-- name -->\r\n      <div class=\"form-row\">\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">username</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"name\"\r\n            maxlength=\"50\"\r\n            required\r\n            pattern=\"^[a-zA-Z][a-zA-Z0-9]{2,49}$\"\r\n            spellcheck=\"false\"\r\n            [formControl]=\"name\"\r\n          />\r\n          @if ($any(name).errors?.required && (name.dirty || name.touched)) {\r\n          <mat-error i18n=\"auth-jwt-admin\">username required</mat-error>\r\n          } @if ($any(name).errors?.pattern && (name.dirty || name.touched)) {\r\n          <mat-error i18n=\"auth-jwt-admin\">invalid username</mat-error>\r\n          } @if ( $any(name).errors?.uniqueName && (name.dirty || name.touched)\r\n          ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >username already registered</mat-error\r\n          >\r\n          }\r\n        </mat-form-field>\r\n        @if (name.pending) {\r\n        <mat-icon>hourglass</mat-icon>\r\n        }\r\n      </div>\r\n\r\n      <!-- first name -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">first name</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"firstName\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"firstName\"\r\n          />\r\n          @if ( firstName.hasError('required') && (firstName.dirty ||\r\n          firstName.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\" class=\"text-danger small\">\r\n            first name required\r\n          </mat-error>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- last name -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">last name</mat-label>\r\n          <input\r\n            matInput\r\n            type=\"text\"\r\n            id=\"lastName\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"lastName\"\r\n          />\r\n          @if ( lastName.hasError('required') && (lastName.dirty ||\r\n          lastName.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\" class=\"text-danger small\">\r\n            last name required\r\n          </mat-error>\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- <div [formGroup]=\"passwords\"> -->\r\n      <!-- password -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">password</mat-label>\r\n          <input\r\n            matInput\r\n            [type]=\"hidePassword() ? 'password' : 'text'\"\r\n            name=\"password\"\r\n            autocomplete=\"new-password\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"password\"\r\n          />\r\n          <button\r\n            type=\"button\"\r\n            mat-icon-button\r\n            matSuffix\r\n            (click)=\"hidePassword.set(!hidePassword())\"\r\n            i18n-aria-label=\"auth-jwt-login\"\r\n            aria-label=\"Hide password\"\r\n            [attr.aria-pressed]=\"hidePassword()\"\r\n          >\r\n            <mat-icon>{{\r\n              hidePassword() ? \"visibility_off\" : \"visibility\"\r\n            }}</mat-icon>\r\n          </button>\r\n          <auth-jwt-password-strength-bar [passwordToCheck]=\"password.value\">\r\n          </auth-jwt-password-strength-bar>\r\n          @if ( $any(password).errors?.required && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\">password required</mat-error>\r\n          } @if ( $any(password).errors?.passwordtooshort && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\">at least 8 characters</mat-error>\r\n          } @if ( $any(password).errors?.noupperinpassword && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >at least 1 uppercase letter</mat-error\r\n          >\r\n          } @if ( $any(password).errors?.nolowerinpassword && (password.dirty ||\r\n          password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >at least 1 lowercase letter</mat-error\r\n          >\r\n          } @if ( $any(password).errors?.nosymbolinpassword && (password.dirty\r\n          || password.touched) ) {\r\n          <mat-error i18n=\"auth-jwt-admin\"\r\n            >at least 1 punctuation/symbol</mat-error\r\n          >\r\n          }\r\n        </mat-form-field>\r\n      </div>\r\n\r\n      <!-- confirm password -->\r\n      <div>\r\n        <mat-form-field>\r\n          <mat-label i18n=\"auth-jwt-admin\">confirm password</mat-label>\r\n          <input\r\n            matInput\r\n            [type]=\"hidePassword() ? 'password' : 'text'\"\r\n            name=\"confirmPassword\"\r\n            maxlength=\"50\"\r\n            required\r\n            spellcheck=\"false\"\r\n            [formControl]=\"confirmPassword\"\r\n          />\r\n        </mat-form-field>\r\n      </div>\r\n      @if (form.errors?.areequal && confirmPassword.touched) {\r\n      <div i18n=\"auth-jwt-admin\" class=\"error\">\r\n        password differs from confirmation password\r\n      </div>\r\n      }\r\n\r\n      <button\r\n        i18n=\"auth-jwt-admin\"\r\n        mat-flat-button\r\n        type=\"submit\"\r\n        color=\"primary\"\r\n        class=\"mat-primary\"\r\n        [disabled]=\"\r\n          form.invalid || form.pristine || busy() || name.pending || email.pending\r\n        \"\r\n      >\r\n        register\r\n      </button>\r\n      @if (busy()) {\r\n      <mat-progress-spinner diameter=\"20\"></mat-progress-spinner>\r\n      }\r\n    </fieldset>\r\n  </form>\r\n\r\n  <details>\r\n    <summary i18n=\"auth-jwt-admin\">Hints</summary>\r\n    <div class=\"info\">\r\n      <p i18n=\"auth-jwt-admin\">\r\n        To register a new user, you must provide his email address, choose a\r\n        password, and choose a username, which must be unique (you will be\r\n        notified if another user has already taken that name). The username must\r\n        include only letters/digits, start with a letter, and be no shorter than\r\n        3 characters, nor longer than 50.\r\n      </p>\r\n      <p i18n=\"auth-jwt-admin\">\r\n        To promote a decent security level, the password must include at least 8\r\n        characters, uppercase and lowercase letters, digits, and punctuation\r\n        (like dashes, stops, parentheses, etc.).\r\n      </p>\r\n      <p i18n=\"auth-jwt-admin\">\r\n        Once registered, if messaging is enabled on the server side the user\r\n        will receive an email message to the email address you specified; he\r\n        will have to click on the provided link to complete the registration\r\n        process. Otherwise, you should edit the newly created user and confirm\r\n        the email registration.\r\n      </p>\r\n    </div>\r\n  </details>\r\n</div>\r\n", styles: ["mat-form-field{width:400px}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}details{margin:8px}.info{column-width:600px}.error{color:red}\n"] }]
-        }], ctorParameters: () => [] });
+                        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 silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}details{margin:8px}.info{column-width:600px}.error{color:red}\n"] }]
+        }], ctorParameters: () => [], 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" }] : []));
+        this.strengthChange = output();
+        this.bars = signal([], ...(ngDevMode ? [{ debugName: "bars" }] : []));
+    }
+    measureStrength(p) {
+        let force = 0;
+        const regex = /[$-/:-?{-~!"^_`\[\]]/g; // "
+        const lowerLetters = /[a-z]+/.test(p);
+        const upperLetters = /[A-Z]+/.test(p);
+        const numbers = /[0-9]+/.test(p);
+        const symbols = regex.test(p);
+        const flags = [lowerLetters, upperLetters, numbers, symbols];
+        let passedMatches = 0;
+        for (const flag of flags) {
+            passedMatches += flag === true ? 1 : 0;
+        }
+        force += 2 * p.length + (p.length >= 10 ? 1 : 0);
+        force += passedMatches * 10;
+        // penalty (short password)
+        force = p.length <= 6 ? Math.min(force, 10) : force;
+        // penalty (poor letiety of characters)
+        force = passedMatches === 1 ? Math.min(force, 10) : force;
+        force = passedMatches === 2 ? Math.min(force, 20) : force;
+        force = passedMatches === 3 ? Math.min(force, 40) : force;
+        return force;
+    }
+    getColor(s) {
+        let idx = 0;
+        if (s <= 10) {
+            idx = 0;
+        }
+        else if (s <= 20) {
+            idx = 1;
+        }
+        else if (s <= 30) {
+            idx = 2;
+        }
+        else if (s <= 40) {
+            idx = 3;
+        }
+        else {
+            idx = 4;
+        }
+        return {
+            idx: idx + 1,
+            col: this._colors[idx],
+        };
+    }
+    ngOnChanges(changes) {
+        const password = changes['passwordToCheck'].currentValue;
+        this.setBarColors(5, '#DDD');
+        if (password) {
+            const strength = this.measureStrength(password);
+            const c = this.getColor(strength);
+            this.setBarColors(c.idx, c.col);
+            this.strengthChange.emit(strength);
+        }
+    }
+    setBarColors(count, col) {
+        const bars = this.bars();
+        for (let n = 0; n < count; n++) {
+            bars[n] = col;
+        }
+        this.bars.set(bars);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PasswordStrengthBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", type: PasswordStrengthBarComponent, isStandalone: true, selector: "auth-jwt-password-strength-bar", inputs: { passwordToCheck: { classPropertyName: "passwordToCheck", publicName: "passwordToCheck", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { strengthChange: "strengthChange" }, usesOnChanges: true, ngImport: i0, template: "<div id=\"strength\">\r\n  <small>strength:</small>\r\n  <ul id=\"strengthBar\">\r\n    <li class=\"point\" [style.background-color]=\"bars()[0]\"></li>\r\n    <li class=\"point\" [style.background-color]=\"bars()[1]\"></li>\r\n    <li class=\"point\" [style.background-color]=\"bars()[2]\"></li>\r\n    <li class=\"point\" [style.background-color]=\"bars()[3]\"></li>\r\n    <li class=\"point\" [style.background-color]=\"bars()[4]\"></li>\r\n  </ul>\r\n</div>\r\n", styles: ["ul#strengthBar{display:inline;list-style:none;margin:0 0 0 15px;padding:0;vertical-align:2px}li.point:last{margin:0!important}li.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;margin-right:1px;width:20px}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: PasswordStrengthBarComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'auth-jwt-password-strength-bar', template: "<div id=\"strength\">\r\n  <small>strength:</small>\r\n  <ul id=\"strengthBar\">\r\n    <li class=\"point\" [style.background-color]=\"bars()[0]\"></li>\r\n    <li class=\"point\" [style.background-color]=\"bars()[1]\"></li>\r\n    <li class=\"point\" [style.background-color]=\"bars()[2]\"></li>\r\n    <li class=\"point\" [style.background-color]=\"bars()[3]\"></li>\r\n    <li class=\"point\" [style.background-color]=\"bars()[4]\"></li>\r\n  </ul>\r\n</div>\r\n", styles: ["ul#strengthBar{display:inline;list-style:none;margin:0 0 0 15px;padding:0;vertical-align:2px}li.point:last{margin:0!important}li.point{background:#ddd;border-radius:2px;display:inline-block;height:5px;margin-right:1px;width:20px}\n"] }]
+        }], propDecorators: { passwordToCheck: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordToCheck", required: false }] }], strengthChange: [{ type: i0.Output, args: ["strengthChange"] }] } });
 
 /**
  * Users filter.
@@ -713,10 +990,10 @@ class UserFilterComponent {
         this._filter = this.getFilter();
         this.filterChange.emit(this._filter);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.2.4", type: UserFilterComponent, isStandalone: true, selector: "auth-jwt-user-filter", inputs: { filter: { classPropertyName: "filter", publicName: "filter", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { filterChange: "filterChange" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"apply()\">\r\n  <div class=\"form-row\">\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">name or ID</mat-label>\r\n      <input matInput [formControl]=\"name\" />\r\n      <button\r\n        mat-icon-button\r\n        matSuffix\r\n        type=\"button\"\r\n        (click)=\"reset()\"\r\n        i18n-matTooltip=\"auth-jwt-admin\"\r\n        matTooltip=\"Reset filters\"\r\n        [disabled]=\"disabled()\"\r\n      >\r\n        <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n      </button>\r\n    </mat-form-field>\r\n\r\n    <button\r\n      id=\"apply\"\r\n      type=\"submit\"\r\n      mat-icon-button\r\n      [disabled]=\"disabled()\"\r\n      i18n-matTooltip=\"auth-jwt-admin\"\r\n      matTooltip=\"Apply filters\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#apply{margin-top:-20px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.0", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserFilterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserFilterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'auth-jwt-user-filter', imports: [
                         ReactiveFormsModule,
@@ -726,7 +1003,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                         MatInputModule,
                         MatTooltipModule,
                     ], template: "<form [formGroup]=\"form\" (submit)=\"apply()\">\r\n  <div class=\"form-row\">\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">name or ID</mat-label>\r\n      <input matInput [formControl]=\"name\" />\r\n      <button\r\n        mat-icon-button\r\n        matSuffix\r\n        type=\"button\"\r\n        (click)=\"reset()\"\r\n        i18n-matTooltip=\"auth-jwt-admin\"\r\n        matTooltip=\"Reset filters\"\r\n        [disabled]=\"disabled()\"\r\n      >\r\n        <mat-icon class=\"mat-warn\">clear</mat-icon>\r\n      </button>\r\n    </mat-form-field>\r\n\r\n    <button\r\n      id=\"apply\"\r\n      type=\"submit\"\r\n      mat-icon-button\r\n      [disabled]=\"disabled()\"\r\n      i18n-matTooltip=\"auth-jwt-admin\"\r\n      matTooltip=\"Apply filters\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}#apply{margin-top:-20px}\n"] }]
-        }], ctorParameters: () => [] });
+        }], 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"] }] } });
 
 /**
  * User editor form.
@@ -831,10 +1108,10 @@ class UserEditorComponent {
         }
         this.userChange.emit(this.getUserFromForm());
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: UserEditorComponent, isStandalone: true, selector: "auth-jwt-user-editor", inputs: { user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { userChange: "userChange", editorClose: "editorClose" }, ngImport: i0, template: "<form [formGroup]=\"form\" (submit)=\"save()\">\r\n  <div class=\"form-row\">\r\n    <!-- email -->\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">email</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"email\" />\r\n      @if (email.hasError('required') && (email.dirty || email.touched)) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> email address required </mat-error>\r\n      } @if (email.hasError('pattern') && (email.dirty || email.touched)) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> invalid email address </mat-error>\r\n      }\r\n    </mat-form-field>\r\n\r\n    <!-- emailConfirmed -->\r\n    <mat-checkbox [formControl]=\"emailConfirmed\" i18n=\"auth-jwt-admin\"\r\n      >email address confirmed</mat-checkbox\r\n    >\r\n  </div>\r\n\r\n  <!-- lockoutEnabled -->\r\n  <div class=\"form-row\">\r\n    <mat-checkbox [formControl]=\"lockoutEnabled\" i18n=\"auth-jwt-admin\"\r\n      >lockout enabled</mat-checkbox\r\n    >\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      (click)=\"endLockout()\"\r\n      [disabled]=\"unlocked()\"\r\n      i18n-matTooltip=\"auth-jwt-admin\"\r\n      matTooltip=\"Unlock this user if locked\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">lock_open</mat-icon>\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"form-row\">\r\n    <!-- firstName -->\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">first name</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"firstName\" />\r\n      @if ( firstName.hasError('required') && (firstName.dirty ||\r\n      firstName.touched) ) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> first name required </mat-error>\r\n      } @if ( firstName.hasError('maxlength') && (firstName.dirty ||\r\n      firstName.touched) ) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> first name too long </mat-error>\r\n      }\r\n    </mat-form-field>\r\n\r\n    <!-- lastName -->\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">last name</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"lastName\" />\r\n      @if ( lastName.hasError('required') && (lastName.dirty ||\r\n      lastName.touched) ) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> last name required </mat-error>\r\n      } @if ( lastName.hasError('maxlength') && (lastName.dirty ||\r\n      lastName.touched) ) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> last name too long </mat-error>\r\n      }\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- roles -->\r\n  <div>\r\n    <mat-form-field>\r\n      <mat-label i18n=\"auth-jwt-admin\">roles</mat-label>\r\n      <input type=\"text\" matInput [formControl]=\"roles\" />\r\n      @if (roles.hasError('maxlength') && (roles.dirty || roles.touched)) {\r\n      <mat-error i18n=\"auth-jwt-admin\"> too long </mat-error>\r\n      }\r\n      <mat-hint i18n>roles (separated by space)</mat-hint>\r\n    </mat-form-field>\r\n  </div>\r\n\r\n  <!-- buttons -->\r\n  <br />\r\n  <div>\r\n    <button\r\n      type=\"button\"\r\n      mat-icon-button\r\n      i18n-matTooltip=\"auth-jwt-admin\"\r\n      matTooltip=\"Close\"\r\n      (click)=\"close()\"\r\n    >\r\n      <mat-icon class=\"mat-warn\">cancel</mat-icon>\r\n    </button>\r\n    <button\r\n      type=\"submit\"\r\n      mat-icon-button\r\n      color=\"primary\"\r\n      [disabled]=\"form.invalid\"\r\n      i18n-matTooltip=\"auth-jwt-admin\"\r\n      matTooltip=\"Save user\"\r\n    >\r\n      <mat-icon class=\"mat-primary\">check_circle</mat-icon>\r\n    </button>\r\n  </div>\r\n</form>\r\n", styles: [".form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i3$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", 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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserEditorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'auth-jwt-user-editor', imports: [
                         ReactiveFormsModule,
@@ -845,7 +1122,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                         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"] }]
-        }], ctorParameters: () => [] });
+        }], 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"] }] } });
 
 /**
  * List of users.
@@ -897,10 +1174,10 @@ class UserListComponent {
     getGravatarUrl(email, options) {
         return this._gravatarService.buildGravatarUrl(email, options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.4", type: UserListComponent, isStandalone: true, selector: "auth-jwt-user-list", ngImport: i0, template: "<div id=\"container\">\r\n  <div>\r\n    <!-- filters -->\r\n    <div id=\"filters\">\r\n      <auth-jwt-user-filter\r\n        [filter]=\"filter$ | async\"\r\n        (filterChange)=\"onFilterChange($event)\"\r\n      ></auth-jwt-user-filter>\r\n    </div>\r\n\r\n    <!-- list -->\r\n    @if (page$ | async; as page) {\r\n    <div id=\"list\">\r\n      @if (loading$ | async) {\r\n      <div>\r\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n      </div>\r\n      }\r\n      <table>\r\n        <thead>\r\n          <td></td>\r\n          <td></td>\r\n          <th i18n=\"auth-jwt-admin\">name</th>\r\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">first</th>\r\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">last</th>\r\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">email</th>\r\n          <th i18n=\"auth-jwt-admin\">roles</th>\r\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">lock end</th>\r\n        </thead>\r\n        <tbody>\r\n          @for (user of page.items; track user) {\r\n          <tr>\r\n            <td class=\"fit-width\">\r\n              <button\r\n                mat-icon-button\r\n                type=\"button\"\r\n                i18n-matTooltip=\"auth-jwt-admin\"\r\n                matTooltip=\"Edit this user\"\r\n                color=\"primary\"\r\n                (click)=\"setActiveUser(user)\"\r\n              >\r\n                <mat-icon class=\"mat-primary\">mode_edit</mat-icon>\r\n              </button>\r\n              <button\r\n                mat-icon-button\r\n                type=\"button\"\r\n                i18n-matTooltip=\"auth-jwt-admin\"\r\n                matTooltip=\"Delete this user\"\r\n                color=\"warn\"\r\n                (click)=\"deleteUser(user)\"\r\n              >\r\n                <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td class=\"fit-width\">\r\n              <img\r\n                alt=\"avatar\"\r\n                [src]=\"getGravatarUrl(user.email, { size: '32' })\"\r\n                [alt]=\"user.userName\"\r\n              />\r\n            </td>\r\n            <td>{{ user.userName }}</td>\r\n            <td class=\"noif-lt-md\">{{ user.firstName }}</td>\r\n            <td class=\"noif-lt-md\">{{ user.lastName }}</td>\r\n            <td class=\"noif-lt-md\">\r\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\r\n            </td>\r\n            <td>{{ user.roles.join(\" \") }}</td>\r\n            <td class=\"noif-lt-md\">{{ user.lockoutEnd }}</td>\r\n          </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n      <!-- paginator -->\r\n      <div class=\"form-row\">\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"warn\"\r\n          i18n-matmatTooltip=\"auth-jwt-admin\"\r\n          matTooltip=\"Refresh list\"\r\n          (click)=\"reset()\"\r\n        >\r\n          <mat-icon class=\"mat-warn\">autorenew</mat-icon>\r\n        </button>\r\n        <mat-paginator\r\n          [length]=\"page.total\"\r\n          [pageIndex]=\"page.pageNumber - 1\"\r\n          [pageSize]=\"page.pageSize\"\r\n          [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\r\n          (page)=\"onPageChange($event)\"\r\n          [showFirstLastButtons]=\"true\"\r\n        ></mat-paginator>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- editor -->\r\n  <mat-expansion-panel\r\n    id=\"editor\"\r\n    [expanded]=\"active$ | async\"\r\n    [disabled]=\"!(active$ | async)\"\r\n  >\r\n    @if (active$ | async; as active) {\r\n    <div>\r\n      <fieldset>\r\n        <legend>{{ active.userName }}</legend>\r\n        <auth-jwt-user-editor\r\n          [user]=\"active\"\r\n          (userChange)=\"saveActiveUser($event)\"\r\n          (editorClose)=\"resetActiveUser()\"\r\n        ></auth-jwt-user-editor>\r\n      </fieldset>\r\n    </div>\r\n    }\r\n  </mat-expansion-panel>\r\n</div>\r\n", styles: ["tr:nth-child(odd){background-color:#f8f8f8}th{padding:0 8px;text-align:left;color:silver;font-weight:400}td{padding:0 8px}td.fit-width{width:1px;white-space:nowrap}table{width:100%;border-collapse:collapse}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}div#filters{grid-area:filters}div#list{grid-area:list}div#editor{grid-area:editor}div#container{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"filters\" \"list\" \"editor\";gap:8px}@media only screen and (max-width: 959px){.noif-lt-md{display:none}}@media only screen and (min-width: 1920px){div#container{grid-template-rows:auto 1fr;grid-template-columns:1fr auto;grid-template-areas:\"filters filters\" \"list editor\"}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: UserEditorComponent, selector: "auth-jwt-user-editor", inputs: ["user"], outputs: ["userChange", "editorClose"] }, { kind: "component", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: ["filter", "disabled"], outputs: ["filterChange"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.0", type: UserListComponent, isStandalone: true, selector: "auth-jwt-user-list", ngImport: i0, template: "<div id=\"container\">\n  <div>\n    <!-- filters -->\n    <div id=\"filters\">\n      <auth-jwt-user-filter\n        [filter]=\"filter$ | async\"\n        (filterChange)=\"onFilterChange($event)\"\n      ></auth-jwt-user-filter>\n    </div>\n\n    <!-- list -->\n    @if (page$ | async; as page) {\n    <div id=\"list\">\n      @if (loading$ | async) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n      }\n      <table>\n        <thead>\n          <td></td>\n          <td></td>\n          <th i18n=\"auth-jwt-admin\">name</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">first</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">last</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">email</th>\n          <th i18n=\"auth-jwt-admin\">roles</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">lock end</th>\n        </thead>\n        <tbody>\n          @for (user of page.items; track user) {\n          <tr>\n            <td class=\"fit-width\">\n              <button\n                mat-icon-button\n                type=\"button\"\n                i18n-matTooltip=\"auth-jwt-admin\"\n                matTooltip=\"Edit this user\"\n                color=\"primary\"\n                (click)=\"setActiveUser(user)\"\n              >\n                <mat-icon class=\"mat-primary\">mode_edit</mat-icon>\n              </button>\n              <button\n                mat-icon-button\n                type=\"button\"\n                i18n-matTooltip=\"auth-jwt-admin\"\n                matTooltip=\"Delete this user\"\n                color=\"warn\"\n                (click)=\"deleteUser(user)\"\n              >\n                <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\n              </button>\n            </td>\n            <td class=\"fit-width\">\n              <img\n                alt=\"avatar\"\n                [src]=\"getGravatarUrl(user.email, { size: '32' })\"\n                [alt]=\"user.userName\"\n              />\n            </td>\n            <td>{{ user.userName }}</td>\n            <td class=\"noif-lt-md\">{{ user.firstName }}</td>\n            <td class=\"noif-lt-md\">{{ user.lastName }}</td>\n            <td class=\"noif-lt-md\">\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\n            </td>\n            <td>{{ user.roles.join(\" \") }}</td>\n            <td class=\"noif-lt-md\">{{ user.lockoutEnd }}</td>\n          </tr>\n          }\n        </tbody>\n      </table>\n      <!-- paginator -->\n      <div class=\"form-row\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          color=\"warn\"\n          i18n-matmatTooltip=\"auth-jwt-admin\"\n          matTooltip=\"Refresh list\"\n          (click)=\"reset()\"\n        >\n          <mat-icon class=\"mat-warn\">autorenew</mat-icon>\n        </button>\n        <mat-paginator\n          [length]=\"page.total\"\n          [pageIndex]=\"page.pageNumber - 1\"\n          [pageSize]=\"page.pageSize\"\n          [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\n          (page)=\"onPageChange($event)\"\n          [showFirstLastButtons]=\"true\"\n        ></mat-paginator>\n      </div>\n    </div>\n    }\n  </div>\n\n  <!-- editor -->\n  <mat-expansion-panel\n    id=\"editor\"\n    [expanded]=\"active$ | async\"\n    [disabled]=\"!(active$ | async)\"\n  >\n    @if (active$ | async; as active) {\n    <div>\n      <fieldset>\n        <legend>{{ active.userName }}</legend>\n        <auth-jwt-user-editor\n          [user]=\"active\"\n          (userChange)=\"saveActiveUser($event)\"\n          (editorClose)=\"resetActiveUser()\"\n        ></auth-jwt-user-editor>\n      </fieldset>\n    </div>\n    }\n  </mat-expansion-panel>\n</div>\n", styles: ["tr:nth-child(odd){background-color:#f8f8f8}th{padding:0 8px;text-align:left;color:silver;font-weight:400}td{padding:0 8px}td.fit-width{width:1px;white-space:nowrap}table{width:100%;border-collapse:collapse}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}div#filters{grid-area:filters}div#list{grid-area:list}div#editor{grid-area:editor}div#container{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"filters\" \"list\" \"editor\";gap:8px}@media only screen and (max-width:959px){.noif-lt-md{display:none}}@media only screen and (min-width:1920px){div#container{grid-template-rows:auto 1fr;grid-template-columns:1fr auto;grid-template-areas:\"filters filters\" \"list editor\"}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i2.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatExpansionModule }, { kind: "component", type: i2$1.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i4.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatPaginatorModule }, { kind: "component", type: i4$1.MatPaginator, selector: "mat-paginator", inputs: ["color", "pageIndex", "length", "pageSize", "pageSizeOptions", "hidePageSize", "showFirstLastButtons", "selectConfig", "disabled"], outputs: ["page"], exportAs: ["matPaginator"] }, { kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i5$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i6$1.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: UserEditorComponent, selector: "auth-jwt-user-editor", inputs: ["user"], outputs: ["userChange", "editorClose"] }, { kind: "component", type: UserFilterComponent, selector: "auth-jwt-user-filter", inputs: ["filter", "disabled"], outputs: ["filterChange"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImport: i0, type: UserListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.0", ngImport: i0, type: UserListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'auth-jwt-user-list', imports: [
                         CommonModule,
@@ -914,7 +1191,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
                         MatTooltipModule,
                         UserEditorComponent,
                         UserFilterComponent,
-                    ], template: "<div id=\"container\">\r\n  <div>\r\n    <!-- filters -->\r\n    <div id=\"filters\">\r\n      <auth-jwt-user-filter\r\n        [filter]=\"filter$ | async\"\r\n        (filterChange)=\"onFilterChange($event)\"\r\n      ></auth-jwt-user-filter>\r\n    </div>\r\n\r\n    <!-- list -->\r\n    @if (page$ | async; as page) {\r\n    <div id=\"list\">\r\n      @if (loading$ | async) {\r\n      <div>\r\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\r\n      </div>\r\n      }\r\n      <table>\r\n        <thead>\r\n          <td></td>\r\n          <td></td>\r\n          <th i18n=\"auth-jwt-admin\">name</th>\r\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">first</th>\r\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">last</th>\r\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">email</th>\r\n          <th i18n=\"auth-jwt-admin\">roles</th>\r\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">lock end</th>\r\n        </thead>\r\n        <tbody>\r\n          @for (user of page.items; track user) {\r\n          <tr>\r\n            <td class=\"fit-width\">\r\n              <button\r\n                mat-icon-button\r\n                type=\"button\"\r\n                i18n-matTooltip=\"auth-jwt-admin\"\r\n                matTooltip=\"Edit this user\"\r\n                color=\"primary\"\r\n                (click)=\"setActiveUser(user)\"\r\n              >\r\n                <mat-icon class=\"mat-primary\">mode_edit</mat-icon>\r\n              </button>\r\n              <button\r\n                mat-icon-button\r\n                type=\"button\"\r\n                i18n-matTooltip=\"auth-jwt-admin\"\r\n                matTooltip=\"Delete this user\"\r\n                color=\"warn\"\r\n                (click)=\"deleteUser(user)\"\r\n              >\r\n                <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\r\n              </button>\r\n            </td>\r\n            <td class=\"fit-width\">\r\n              <img\r\n                alt=\"avatar\"\r\n                [src]=\"getGravatarUrl(user.email, { size: '32' })\"\r\n                [alt]=\"user.userName\"\r\n              />\r\n            </td>\r\n            <td>{{ user.userName }}</td>\r\n            <td class=\"noif-lt-md\">{{ user.firstName }}</td>\r\n            <td class=\"noif-lt-md\">{{ user.lastName }}</td>\r\n            <td class=\"noif-lt-md\">\r\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\r\n            </td>\r\n            <td>{{ user.roles.join(\" \") }}</td>\r\n            <td class=\"noif-lt-md\">{{ user.lockoutEnd }}</td>\r\n          </tr>\r\n          }\r\n        </tbody>\r\n      </table>\r\n      <!-- paginator -->\r\n      <div class=\"form-row\">\r\n        <button\r\n          type=\"button\"\r\n          mat-icon-button\r\n          color=\"warn\"\r\n          i18n-matmatTooltip=\"auth-jwt-admin\"\r\n          matTooltip=\"Refresh list\"\r\n          (click)=\"reset()\"\r\n        >\r\n          <mat-icon class=\"mat-warn\">autorenew</mat-icon>\r\n        </button>\r\n        <mat-paginator\r\n          [length]=\"page.total\"\r\n          [pageIndex]=\"page.pageNumber - 1\"\r\n          [pageSize]=\"page.pageSize\"\r\n          [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\r\n          (page)=\"onPageChange($event)\"\r\n          [showFirstLastButtons]=\"true\"\r\n        ></mat-paginator>\r\n      </div>\r\n    </div>\r\n    }\r\n  </div>\r\n\r\n  <!-- editor -->\r\n  <mat-expansion-panel\r\n    id=\"editor\"\r\n    [expanded]=\"active$ | async\"\r\n    [disabled]=\"!(active$ | async)\"\r\n  >\r\n    @if (active$ | async; as active) {\r\n    <div>\r\n      <fieldset>\r\n        <legend>{{ active.userName }}</legend>\r\n        <auth-jwt-user-editor\r\n          [user]=\"active\"\r\n          (userChange)=\"saveActiveUser($event)\"\r\n          (editorClose)=\"resetActiveUser()\"\r\n        ></auth-jwt-user-editor>\r\n      </fieldset>\r\n    </div>\r\n    }\r\n  </mat-expansion-panel>\r\n</div>\r\n", styles: ["tr:nth-child(odd){background-color:#f8f8f8}th{padding:0 8px;text-align:left;color:silver;font-weight:400}td{padding:0 8px}td.fit-width{width:1px;white-space:nowrap}table{width:100%;border-collapse:collapse}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}div#filters{grid-area:filters}div#list{grid-area:list}div#editor{grid-area:editor}div#container{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"filters\" \"list\" \"editor\";gap:8px}@media only screen and (max-width: 959px){.noif-lt-md{display:none}}@media only screen and (min-width: 1920px){div#container{grid-template-rows:auto 1fr;grid-template-columns:1fr auto;grid-template-areas:\"filters filters\" \"list editor\"}}\n"] }]
+                    ], template: "<div id=\"container\">\n  <div>\n    <!-- filters -->\n    <div id=\"filters\">\n      <auth-jwt-user-filter\n        [filter]=\"filter$ | async\"\n        (filterChange)=\"onFilterChange($event)\"\n      ></auth-jwt-user-filter>\n    </div>\n\n    <!-- list -->\n    @if (page$ | async; as page) {\n    <div id=\"list\">\n      @if (loading$ | async) {\n      <div>\n        <mat-progress-bar mode=\"indeterminate\"></mat-progress-bar>\n      </div>\n      }\n      <table>\n        <thead>\n          <td></td>\n          <td></td>\n          <th i18n=\"auth-jwt-admin\">name</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">first</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">last</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">email</th>\n          <th i18n=\"auth-jwt-admin\">roles</th>\n          <th i18n=\"auth-jwt-admin\" class=\"noif-lt-md\">lock end</th>\n        </thead>\n        <tbody>\n          @for (user of page.items; track user) {\n          <tr>\n            <td class=\"fit-width\">\n              <button\n                mat-icon-button\n                type=\"button\"\n                i18n-matTooltip=\"auth-jwt-admin\"\n                matTooltip=\"Edit this user\"\n                color=\"primary\"\n                (click)=\"setActiveUser(user)\"\n              >\n                <mat-icon class=\"mat-primary\">mode_edit</mat-icon>\n              </button>\n              <button\n                mat-icon-button\n                type=\"button\"\n                i18n-matTooltip=\"auth-jwt-admin\"\n                matTooltip=\"Delete this user\"\n                color=\"warn\"\n                (click)=\"deleteUser(user)\"\n              >\n                <mat-icon class=\"mat-warn\">remove_circle</mat-icon>\n              </button>\n            </td>\n            <td class=\"fit-width\">\n              <img\n                alt=\"avatar\"\n                [src]=\"getGravatarUrl(user.email, { size: '32' })\"\n                [alt]=\"user.userName\"\n              />\n            </td>\n            <td>{{ user.userName }}</td>\n            <td class=\"noif-lt-md\">{{ user.firstName }}</td>\n            <td class=\"noif-lt-md\">{{ user.lastName }}</td>\n            <td class=\"noif-lt-md\">\n              <a [href]=\"'mailto:' + user.email\">{{ user.email }}</a>\n            </td>\n            <td>{{ user.roles.join(\" \") }}</td>\n            <td class=\"noif-lt-md\">{{ user.lockoutEnd }}</td>\n          </tr>\n          }\n        </tbody>\n      </table>\n      <!-- paginator -->\n      <div class=\"form-row\">\n        <button\n          type=\"button\"\n          mat-icon-button\n          color=\"warn\"\n          i18n-matmatTooltip=\"auth-jwt-admin\"\n          matTooltip=\"Refresh list\"\n          (click)=\"reset()\"\n        >\n          <mat-icon class=\"mat-warn\">autorenew</mat-icon>\n        </button>\n        <mat-paginator\n          [length]=\"page.total\"\n          [pageIndex]=\"page.pageNumber - 1\"\n          [pageSize]=\"page.pageSize\"\n          [pageSizeOptions]=\"[5, 10, 20, 50, 100]\"\n          (page)=\"onPageChange($event)\"\n          [showFirstLastButtons]=\"true\"\n        ></mat-paginator>\n      </div>\n    </div>\n    }\n  </div>\n\n  <!-- editor -->\n  <mat-expansion-panel\n    id=\"editor\"\n    [expanded]=\"active$ | async\"\n    [disabled]=\"!(active$ | async)\"\n  >\n    @if (active$ | async; as active) {\n    <div>\n      <fieldset>\n        <legend>{{ active.userName }}</legend>\n        <auth-jwt-user-editor\n          [user]=\"active\"\n          (userChange)=\"saveActiveUser($event)\"\n          (editorClose)=\"resetActiveUser()\"\n        ></auth-jwt-user-editor>\n      </fieldset>\n    </div>\n    }\n  </mat-expansion-panel>\n</div>\n", styles: ["tr:nth-child(odd){background-color:#f8f8f8}th{padding:0 8px;text-align:left;color:silver;font-weight:400}td{padding:0 8px}td.fit-width{width:1px;white-space:nowrap}table{width:100%;border-collapse:collapse}fieldset{border:1px solid silver;border-radius:8px;padding:16px}.form-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.form-row *{flex:0 0 auto}div#filters{grid-area:filters}div#list{grid-area:list}div#editor{grid-area:editor}div#container{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;grid-template-areas:\"filters\" \"list\" \"editor\";gap:8px}@media only screen and (max-width:959px){.noif-lt-md{display:none}}@media only screen and (min-width:1920px){div#container{grid-template-rows:auto 1fr;grid-template-columns:1fr auto;grid-template-areas:\"filters filters\" \"list editor\"}}\n"] }]
         }], ctorParameters: () => [] });
 
 /*
@@ -925,5 +1202,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.4", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AuthJwtAccountService, AuthJwtRegistrationComponent, PasswordStrengthBarComponent, PasswordValidators, UserFilterComponent, UserListComponent, UserListRepository };
+export { AuthJwtAccountService, AuthJwtRegistrationComponent, DEFAULT_RULE_LABELS, PasswordChecklistComponent, PasswordStrengthBarComponent, PasswordValidators, UserFilterComponent, UserListComponent, UserListRepository };
 //# sourceMappingURL=myrmidon-auth-jwt-admin.mjs.map