cmat 0.0.87 → 0.0.88

package/fesm2022/cmat-components-password-strength.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Input, ChangeDetectionStrategy, ViewEncapsulation, Component, EventEmitter, Output, signal } from '@angular/core';
+import { input, output, ChangeDetectionStrategy, ViewEncapsulation, Component, signal, computed, effect, untracked } from '@angular/core';
 import * as i1 from '@angular/material/button';
 import { MatButtonModule } from '@angular/material/button';
 import * as i2 from '@angular/material/core';
@@ -14,22 +14,27 @@ import { MatCardModule } from '@angular/material/card';
 
 class CmatPassToggleVisibilityComponent {
     constructor() {
+        this.isVisible = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ []));
+        this.isVisibleChange = output();
+        this.tabindex = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "tabindex" }] : /* istanbul ignore next */ []));
         this._type = 'text';
     }
     get type() {
-        return this.isVisible ? 'text' : 'password';
+        return this.isVisible() ? 'text' : 'password';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPassToggleVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: CmatPassToggleVisibilityComponent, isStandalone: true, selector: "cmat-pass-toggle-visibility", inputs: { isVisible: "isVisible", tabindex: "tabindex" }, exportAs: ["cmatPassToggleVisibility"], ngImport: i0, template: "<button type=\"button\" class=\"matIconButton  cdk-focused cdk-mouse-focused\" matIconButton \r\n    matRipple [matRippleCentered]=\"true\" [attr.tabindex]=\"tabindex ? tabindex : null\" (click)=\"isVisible = !isVisible\">\r\n    <mat-icon svgIcon=\"{{isVisible ? 'mat_outline:visibility' : 'mat_outline:visibility_off' }}\"></mat-icon>\r\n</button>", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    toggleVisibility() {
+        const newValue = !this.isVisible();
+        this.isVisibleChange.emit(newValue);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPassToggleVisibilityComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: CmatPassToggleVisibilityComponent, isStandalone: true, selector: "cmat-pass-toggle-visibility", inputs: { isVisible: { classPropertyName: "isVisible", publicName: "isVisible", isSignal: true, isRequired: false, transformFunction: null }, tabindex: { classPropertyName: "tabindex", publicName: "tabindex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isVisibleChange: "isVisibleChange" }, exportAs: ["cmatPassToggleVisibility"], ngImport: i0, template: "<button type=\"button\" class=\"matIconButton  cdk-focused cdk-mouse-focused\" matIconButton \r\n    matRipple [matRippleCentered]=\"true\" [attr.tabindex]=\"tabindex() ? tabindex() : null\" (click)=\"toggleVisibility()\">\r\n    <mat-icon svgIcon=\"{{isVisible() ? 'mat_outline:visibility' : 'mat_outline:visibility_off' }}\"></mat-icon>\r\n</button>\r\n", dependencies: [{ kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i2.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPassToggleVisibilityComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPassToggleVisibilityComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-pass-toggle-visibility', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatPassToggleVisibility', imports: [MatButtonModule, MatRippleModule, MatIconModule], template: "<button type=\"button\" class=\"matIconButton  cdk-focused cdk-mouse-focused\" matIconButton \r\n    matRipple [matRippleCentered]=\"true\" [attr.tabindex]=\"tabindex ? tabindex : null\" (click)=\"isVisible = !isVisible\">\r\n    <mat-icon svgIcon=\"{{isVisible ? 'mat_outline:visibility' : 'mat_outline:visibility_off' }}\"></mat-icon>\r\n</button>" }]
-        }], propDecorators: { isVisible: [{
-                type: Input
-            }], tabindex: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'cmat-pass-toggle-visibility', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, exportAs: 'cmatPassToggleVisibility', imports: [MatButtonModule, MatRippleModule, MatIconModule], template: "<button type=\"button\" class=\"matIconButton  cdk-focused cdk-mouse-focused\" matIconButton \r\n    matRipple [matRippleCentered]=\"true\" [attr.tabindex]=\"tabindex() ? tabindex() : null\" (click)=\"toggleVisibility()\">\r\n    <mat-icon svgIcon=\"{{isVisible() ? 'mat_outline:visibility' : 'mat_outline:visibility_off' }}\"></mat-icon>\r\n</button>\r\n" }]
+        }], propDecorators: { isVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "isVisible", required: false }] }], isVisibleChange: [{ type: i0.Output, args: ["isVisibleChange"] }], tabindex: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabindex", required: false }] }] } });
 
 /* eslint-disable @typescript-eslint/naming-convention */
 var Colors;
@@ -97,294 +102,336 @@ const RegExpValidator = {
 
 class CmatPasswordStrengthComponent {
     constructor() {
-        this.enableLengthRule = true;
-        this.enableLowerCaseLetterRule = true;
-        this.enableUpperCaseLetterRule = true;
-        this.enableDigitRule = true;
-        this.enableSpecialCharRule = true;
-        this.min = 8;
-        this.max = 30;
-        this.warnThreshold = 21;
-        this.accentThreshold = 81;
-        this.strengthChanged = new EventEmitter();
-        this.criteriaMap = new Map();
+        this.password = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "password" }] : /* istanbul ignore next */ []));
+        this.externalError = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "externalError" }] : /* istanbul ignore next */ []));
+        this.enableLengthRule = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enableLengthRule" }] : /* istanbul ignore next */ []));
+        this.enableLowerCaseLetterRule = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enableLowerCaseLetterRule" }] : /* istanbul ignore next */ []));
+        this.enableUpperCaseLetterRule = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enableUpperCaseLetterRule" }] : /* istanbul ignore next */ []));
+        this.enableDigitRule = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enableDigitRule" }] : /* istanbul ignore next */ []));
+        this.enableSpecialCharRule = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enableSpecialCharRule" }] : /* istanbul ignore next */ []));
+        this.min = input(8, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "min" }] : /* istanbul ignore next */ []));
+        this.max = input(30, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "max" }] : /* istanbul ignore next */ []));
+        this.customValidator = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "customValidator" }] : /* istanbul ignore next */ []));
+        this.warnThreshold = input(21, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "warnThreshold" }] : /* istanbul ignore next */ []));
+        this.accentThreshold = input(81, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "accentThreshold" }] : /* istanbul ignore next */ []));
+        this.strengthChanged = output();
+        this.criteriaMap = signal(new Map(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "criteriaMap" }] : /* istanbul ignore next */ []));
+        this.containAtLeastMinChars = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containAtLeastMinChars" }] : /* istanbul ignore next */ []));
+        this.containAtLeastOneLowerCaseLetter = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containAtLeastOneLowerCaseLetter" }] : /* istanbul ignore next */ []));
+        this.containAtLeastOneUpperCaseLetter = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containAtLeastOneUpperCaseLetter" }] : /* istanbul ignore next */ []));
+        this.containAtLeastOneDigit = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containAtLeastOneDigit" }] : /* istanbul ignore next */ []));
+        this.containAtLeastOneSpecialChar = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containAtLeastOneSpecialChar" }] : /* istanbul ignore next */ []));
+        this.containAtCustomChars = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containAtCustomChars" }] : /* istanbul ignore next */ []));
         this.passwordFormControl = new FormControl();
         this.passwordConfirmationFormControl = new FormControl();
-        this.validatorsArray = [];
+        this.validatorsArray = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "validatorsArray" }] : /* istanbul ignore next */ []));
+        this.validators = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "validators" }] : /* istanbul ignore next */ []));
+        this.strength = computed(() => this._strength() || 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "strength" }] : /* istanbul ignore next */ []));
+        this.color = computed(() => this._color(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []));
         this.cmatPasswordStrengthValidator = new CmatPasswordStrengthValidator();
-        this._strength = 0;
-        this._color = 'warn';
-    }
-    get strength() {
-        return this._strength ? this._strength : 0;
-    }
-    get color() {
-        return this._color;
-    }
-    ngOnInit() {
+        this._strength = signal(0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_strength" }] : /* istanbul ignore next */ []));
+        this._color = signal('warn', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_color" }] : /* istanbul ignore next */ []));
+        this._isProcessingEffect = false;
+        // 初始化时设置一次验证器
         this.setRulesAndValidators();
-        if (this.password) {
-            this.calculatePasswordStrength();
-        }
-    }
-    ngOnChanges(changes) {
-        if ((changes['externalError']?.firstChange) || (changes['password']?.isFirstChange())) {
-            return;
-        }
-        else if (changes['externalError']?.currentValue) {
-            this._color = Colors.warn;
-            return;
-        }
-        else if (changes['password'] && changes['password'].previousValue === changes['password'].currentValue && !changes['password'].firstChange) {
-            this._checkPassword();
-        }
-        else if (this.password && this.password.length > 0) {
-            this._checkPassword();
-        }
-        else {
-            this.reset();
-        }
+        effect(() => {
+            if (this._isProcessingEffect) {
+                return;
+            }
+            const pwd = this.password();
+            untracked(() => {
+                // 密码为空时重置
+                if (!pwd || pwd.length === 0) {
+                    this.reset();
+                    return;
+                }
+                // 密码存在时计算强度（不重建验证器）
+                this.calculatePasswordStrength(false);
+            });
+        });
+        effect(() => {
+            if (this._isProcessingEffect) {
+                return;
+            }
+            const extError = this.externalError();
+            if (extError) {
+                this._color.set(Colors.warn);
+            }
+        });
+        // 监听配置变化，重新构建验证器
+        effect(() => {
+            if (this._isProcessingEffect) {
+                return;
+            }
+            // 读取所有配置项，任何一项变化都会触发此 effect
+            this.enableLengthRule();
+            this.enableLowerCaseLetterRule();
+            this.enableUpperCaseLetterRule();
+            this.enableDigitRule();
+            this.enableSpecialCharRule();
+            this.min();
+            this.max();
+            this.customValidator();
+            untracked(() => {
+                // 配置变化时重新构建验证器
+                this.setRulesAndValidators();
+                // 如果当前有密码，重新计算强度
+                const pwd = this.password();
+                if (pwd && pwd.length > 0) {
+                    this.calculatePasswordStrength(false);
+                }
+            });
+        });
     }
     parseCustomValidatorsRegex() {
-        if (this.customValidator instanceof RegExp) {
-            return this.customValidator;
+        const validator = this.customValidator();
+        if (validator instanceof RegExp) {
+            return validator;
         }
         else {
-            return RegExp(this.customValidator);
+            return RegExp(validator);
         }
     }
     setRulesAndValidators() {
-        this.validatorsArray = [];
-        this.criteriaMap = new Map();
+        this.validatorsArray.set([]);
+        this.criteriaMap.set(new Map());
         this.passwordConfirmationFormControl
             .setValidators(Validators.compose([
-            Validators.required, this.cmatPasswordStrengthValidator.confirm(this.password)
+            Validators.required, this.cmatPasswordStrengthValidator.confirm(this.password())
         ]));
-        this.validatorsArray.push(Validators.required);
-        if (this.enableLengthRule) {
-            this.criteriaMap.set(Criteria.at_least_eight_chars, RegExp(`^.{${this.min},${this.max}}$`));
-            this.validatorsArray.push(Validators.minLength(this.min));
-            this.validatorsArray.push(Validators.maxLength(this.max));
-        }
-        if (this.enableLowerCaseLetterRule) {
-            this.criteriaMap.set(Criteria.at_least_one_lower_case_char, RegExpValidator.lowerCase);
-            this.validatorsArray.push(Validators.pattern(RegExpValidator.lowerCase));
-        }
-        if (this.enableUpperCaseLetterRule) {
-            this.criteriaMap.set(Criteria.at_least_one_upper_case_char, RegExpValidator.upperCase);
-            this.validatorsArray.push(Validators.pattern(RegExpValidator.upperCase));
-        }
-        if (this.enableDigitRule) {
-            this.criteriaMap.set(Criteria.at_least_one_digit_char, RegExpValidator.digit);
-            this.validatorsArray.push(Validators.pattern(RegExpValidator.digit));
-        }
-        if (this.enableSpecialCharRule) {
-            this.criteriaMap.set(Criteria.at_least_one_special_char, RegExpValidator.specialChar);
-            this.validatorsArray.push(Validators.pattern(RegExpValidator.specialChar));
-        }
-        if (this.customValidator) {
-            this.criteriaMap.set(Criteria.at_custom_chars, this.parseCustomValidatorsRegex());
-            this.validatorsArray.push(Validators.pattern(this.parseCustomValidatorsRegex()));
-        }
-        this.criteriaMap.forEach((value, key) => {
-            this.validatorsArray.push(this.cmatPasswordStrengthValidator.validate(key, value));
+        const validators = [Validators.required];
+        if (this.enableLengthRule()) {
+            this.criteriaMap().set(Criteria.at_least_eight_chars, RegExp(`^.{${this.min()},${this.max()}}$`));
+            validators.push(Validators.minLength(this.min()));
+            validators.push(Validators.maxLength(this.max()));
+        }
+        if (this.enableLowerCaseLetterRule()) {
+            this.criteriaMap().set(Criteria.at_least_one_lower_case_char, RegExpValidator.lowerCase);
+            validators.push(Validators.pattern(RegExpValidator.lowerCase));
+        }
+        if (this.enableUpperCaseLetterRule()) {
+            this.criteriaMap().set(Criteria.at_least_one_upper_case_char, RegExpValidator.upperCase);
+            validators.push(Validators.pattern(RegExpValidator.upperCase));
+        }
+        if (this.enableDigitRule()) {
+            this.criteriaMap().set(Criteria.at_least_one_digit_char, RegExpValidator.digit);
+            validators.push(Validators.pattern(RegExpValidator.digit));
+        }
+        if (this.enableSpecialCharRule()) {
+            this.criteriaMap().set(Criteria.at_least_one_special_char, RegExpValidator.specialChar);
+            validators.push(Validators.pattern(RegExpValidator.specialChar));
+        }
+        if (this.customValidator()) {
+            this.criteriaMap().set(Criteria.at_custom_chars, this.parseCustomValidatorsRegex());
+            validators.push(Validators.pattern(this.parseCustomValidatorsRegex()));
+        }
+        this.criteriaMap().forEach((value, key) => {
+            validators.push(this.cmatPasswordStrengthValidator.validate(key, value));
         });
-        this.passwordFormControl.setValidators(Validators.compose([...this.validatorsArray]));
-        this.validators = Validators.compose([...this.validatorsArray]);
+        this.passwordFormControl.setValidators(Validators.compose([...validators]));
+        this.validatorsArray.set(validators);
+        this.validators.set(Validators.compose([...validators]));
     }
-    calculatePasswordStrength() {
-        const requirements = [];
-        const unit = 100 / this.criteriaMap.size;
-        requirements.push(this.enableLengthRule ? this._containAtLeastMinChars() : false, this.enableLowerCaseLetterRule ? this._containAtLeastOneLowerCaseLetter() : false, this.enableUpperCaseLetterRule ? this._containAtLeastOneUpperCaseLetter() : false, this.enableDigitRule ? this._containAtLeastOneDigit() : false, this.enableSpecialCharRule ? this._containAtLeastOneSpecialChar() : false, this.customValidator ? this._containCustomChars() : false);
-        this._strength = requirements.filter(v => v).length * unit;
-        this.strengthChanged.emit(this.strength);
-        this.setRulesAndValidators();
-        if (this._strength < this.warnThreshold) {
-            this._color = Colors.warn;
-        }
-        else if (this._strength < this.accentThreshold) {
-            this._color = Colors.accent;
+    calculatePasswordStrength(rebuildValidators = false) {
+        try {
+            this._isProcessingEffect = true;
+            // 如果需要重建验证器（仅在配置变化时）
+            if (rebuildValidators) {
+                this.setRulesAndValidators();
+            }
+            const requirements = [];
+            const unit = 100 / this.criteriaMap().size;
+            requirements.push(this.enableLengthRule() ? this._containAtLeastMinChars() : false, this.enableLowerCaseLetterRule() ? this._containAtLeastOneLowerCaseLetter() : false, this.enableUpperCaseLetterRule() ? this._containAtLeastOneUpperCaseLetter() : false, this.enableDigitRule() ? this._containAtLeastOneDigit() : false, this.enableSpecialCharRule() ? this._containAtLeastOneSpecialChar() : false, this.customValidator() ? this._containCustomChars() : false);
+            this._strength.set(requirements.filter(v => v).length * unit);
+            this.strengthChanged.emit(this.strength());
+            const currentStrength = this._strength();
+            if (currentStrength < this.warnThreshold()) {
+                this._color.set(Colors.warn);
+            }
+            else if (currentStrength < this.accentThreshold()) {
+                this._color.set(Colors.accent);
+            }
+            else {
+                this._color.set(Colors.primary);
+            }
         }
-        else {
-            this._color = Colors.primary;
+        finally {
+            this._isProcessingEffect = false;
         }
     }
     reset() {
-        this._strength = 0;
-        this.containAtLeastMinChars =
-            this.containAtLeastOneLowerCaseLetter =
-                this.containAtLeastOneUpperCaseLetter =
-                    this.containAtLeastOneDigit =
-                        this.containAtCustomChars =
-                            this.containAtLeastOneSpecialChar = false;
-        this._color = Colors.warn;
-        this.strengthChanged.emit(this.strength);
+        try {
+            this._isProcessingEffect = true;
+            this._strength.set(0);
+            this.containAtLeastMinChars.set(false);
+            this.containAtLeastOneLowerCaseLetter.set(false);
+            this.containAtLeastOneUpperCaseLetter.set(false);
+            this.containAtLeastOneDigit.set(false);
+            this.containAtCustomChars.set(false);
+            this.containAtLeastOneSpecialChar.set(false);
+            this._color.set(Colors.warn);
+            this.strengthChanged.emit(this.strength());
+        }
+        finally {
+            this._isProcessingEffect = false;
+        }
     }
     _containAtLeastMinChars() {
-        this.containAtLeastMinChars = this.password.length >= this.min;
-        return this.containAtLeastMinChars;
+        const result = this.password().length >= this.min();
+        this.containAtLeastMinChars.set(result);
+        return result;
     }
     _containAtLeastOneLowerCaseLetter() {
-        this.containAtLeastOneLowerCaseLetter =
-            this.criteriaMap
-                .get(Criteria.at_least_one_lower_case_char)?.test(this.password);
-        return this.containAtLeastOneLowerCaseLetter ?? false;
+        const result = this.criteriaMap()
+            .get(Criteria.at_least_one_lower_case_char)?.test(this.password());
+        this.containAtLeastOneLowerCaseLetter.set(result);
+        return result ?? false;
     }
     _containAtLeastOneUpperCaseLetter() {
-        this.containAtLeastOneUpperCaseLetter =
-            this.criteriaMap
-                .get(Criteria.at_least_one_upper_case_char)?.test(this.password);
-        return this.containAtLeastOneUpperCaseLetter ?? false;
+        const result = this.criteriaMap()
+            .get(Criteria.at_least_one_upper_case_char)?.test(this.password());
+        this.containAtLeastOneUpperCaseLetter.set(result);
+        return result ?? false;
     }
     _containAtLeastOneDigit() {
-        this.containAtLeastOneDigit =
-            this.criteriaMap
-                .get(Criteria.at_least_one_digit_char)?.test(this.password);
-        return this.containAtLeastOneDigit ?? false;
+        const result = this.criteriaMap()
+            .get(Criteria.at_least_one_digit_char)?.test(this.password());
+        this.containAtLeastOneDigit.set(result);
+        return result ?? false;
     }
     _containAtLeastOneSpecialChar() {
-        this.containAtLeastOneSpecialChar =
-            this.criteriaMap
-                .get(Criteria.at_least_one_special_char)?.test(this.password);
-        return this.containAtLeastOneSpecialChar ?? false;
+        const result = this.criteriaMap()
+            .get(Criteria.at_least_one_special_char)?.test(this.password());
+        this.containAtLeastOneSpecialChar.set(result);
+        return result ?? false;
     }
     _containCustomChars() {
-        this.containAtCustomChars =
-            this.criteriaMap
-                .get(Criteria.at_custom_chars)?.test(this.password);
-        return this.containAtCustomChars ?? false;
+        const result = this.criteriaMap()
+            .get(Criteria.at_custom_chars)?.test(this.password());
+        this.containAtCustomChars.set(result);
+        return result ?? false;
     }
     _checkPassword() {
         this.calculatePasswordStrength();
         this.passwordConfirmationFormControl.updateValueAndValidity();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPasswordStrengthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.11", type: CmatPasswordStrengthComponent, isStandalone: true, selector: "cmat-password-strength", inputs: { password: "password", externalError: "externalError", enableLengthRule: "enableLengthRule", enableLowerCaseLetterRule: "enableLowerCaseLetterRule", enableUpperCaseLetterRule: "enableUpperCaseLetterRule", enableDigitRule: "enableDigitRule", enableSpecialCharRule: "enableSpecialCharRule", min: "min", max: "max", customValidator: "customValidator", warnThreshold: "warnThreshold", accentThreshold: "accentThreshold" }, outputs: { strengthChanged: "strengthChanged" }, exportAs: ["cmatPasswordStrength"], usesOnChanges: true, ngImport: i0, template: "<mat-progress-bar mode=\"determinate\" [color]=\"color\" [value]=\"strength\"></mat-progress-bar>", dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPasswordStrengthComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.2", type: CmatPasswordStrengthComponent, isStandalone: true, selector: "cmat-password-strength", inputs: { password: { classPropertyName: "password", publicName: "password", isSignal: true, isRequired: false, transformFunction: null }, externalError: { classPropertyName: "externalError", publicName: "externalError", isSignal: true, isRequired: false, transformFunction: null }, enableLengthRule: { classPropertyName: "enableLengthRule", publicName: "enableLengthRule", isSignal: true, isRequired: false, transformFunction: null }, enableLowerCaseLetterRule: { classPropertyName: "enableLowerCaseLetterRule", publicName: "enableLowerCaseLetterRule", isSignal: true, isRequired: false, transformFunction: null }, enableUpperCaseLetterRule: { classPropertyName: "enableUpperCaseLetterRule", publicName: "enableUpperCaseLetterRule", isSignal: true, isRequired: false, transformFunction: null }, enableDigitRule: { classPropertyName: "enableDigitRule", publicName: "enableDigitRule", isSignal: true, isRequired: false, transformFunction: null }, enableSpecialCharRule: { classPropertyName: "enableSpecialCharRule", publicName: "enableSpecialCharRule", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, customValidator: { classPropertyName: "customValidator", publicName: "customValidator", isSignal: true, isRequired: false, transformFunction: null }, warnThreshold: { classPropertyName: "warnThreshold", publicName: "warnThreshold", isSignal: true, isRequired: false, transformFunction: null }, accentThreshold: { classPropertyName: "accentThreshold", publicName: "accentThreshold", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { strengthChanged: "strengthChanged" }, exportAs: ["cmatPasswordStrength"], ngImport: i0, template: "<mat-progress-bar mode=\"determinate\" [color]=\"color()\" [value]=\"strength()\"></mat-progress-bar>", dependencies: [{ kind: "ngmodule", type: MatProgressBarModule }, { kind: "component", type: i1$1.MatProgressBar, selector: "mat-progress-bar", inputs: ["color", "value", "bufferValue", "mode"], outputs: ["animationEnd"], exportAs: ["matProgressBar"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPasswordStrengthComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPasswordStrengthComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-password-strength', exportAs: 'cmatPasswordStrength', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatProgressBarModule], template: "<mat-progress-bar mode=\"determinate\" [color]=\"color\" [value]=\"strength\"></mat-progress-bar>" }]
-        }], propDecorators: { password: [{
-                type: Input
-            }], externalError: [{
-                type: Input
-            }], enableLengthRule: [{
-                type: Input
-            }], enableLowerCaseLetterRule: [{
-                type: Input
-            }], enableUpperCaseLetterRule: [{
-                type: Input
-            }], enableDigitRule: [{
-                type: Input
-            }], enableSpecialCharRule: [{
-                type: Input
-            }], min: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], customValidator: [{
-                type: Input
-            }], warnThreshold: [{
-                type: Input
-            }], accentThreshold: [{
-                type: Input
-            }], strengthChanged: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'cmat-password-strength', exportAs: 'cmatPasswordStrength', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [MatProgressBarModule], template: "<mat-progress-bar mode=\"determinate\" [color]=\"color()\" [value]=\"strength()\"></mat-progress-bar>" }]
+        }], ctorParameters: () => [], propDecorators: { password: [{ type: i0.Input, args: [{ isSignal: true, alias: "password", required: false }] }], externalError: [{ type: i0.Input, args: [{ isSignal: true, alias: "externalError", required: false }] }], enableLengthRule: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableLengthRule", required: false }] }], enableLowerCaseLetterRule: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableLowerCaseLetterRule", required: false }] }], enableUpperCaseLetterRule: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableUpperCaseLetterRule", required: false }] }], enableDigitRule: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableDigitRule", required: false }] }], enableSpecialCharRule: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableSpecialCharRule", required: false }] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], customValidator: [{ type: i0.Input, args: [{ isSignal: true, alias: "customValidator", required: false }] }], warnThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "warnThreshold", required: false }] }], accentThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "accentThreshold", required: false }] }], strengthChanged: [{ type: i0.Output, args: ["strengthChanged"] }] } });
 
 class CmatPasswordStrengthInfoComponent {
     constructor() {
-        this.enableScoreInfo = false;
-        this.lowerCaseCriteriaMsg = '包含至少一个小写字母';
-        this.upperCaseCriteriaMsg = '包含至少一个大写字母';
-        this.digitsCriteriaMsg = '包含至少一个数字';
-        this.specialCharsCriteriaMsg = '包含至少一个特殊字符';
-        this.customCharsCriteriaMsg = '包含至少一个传统字符';
-        this.pageLoaded = signal(false, ...(ngDevMode ? [{ debugName: "pageLoaded" }] : /* istanbul ignore next */ []));
-    }
-    ngOnInit() {
-        if (!this.minCharsCriteriaMsg) {
-            this.minCharsCriteriaMsg = `包含至少 ${this.passwordComponent.min} 个字符`;
-        }
-    }
-    ngAfterViewInit() {
+        this.passwordComponent = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "passwordComponent" }] : /* istanbul ignore next */ []));
+        this.enableScoreInfo = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "enableScoreInfo" }] : /* istanbul ignore next */ []));
+        this.lowerCaseCriteriaMsg = input('包含至少一个小写字母', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "lowerCaseCriteriaMsg" }] : /* istanbul ignore next */ []));
+        this.upperCaseCriteriaMsg = input('包含至少一个大写字母', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "upperCaseCriteriaMsg" }] : /* istanbul ignore next */ []));
+        this.digitsCriteriaMsg = input('包含至少一个数字', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "digitsCriteriaMsg" }] : /* istanbul ignore next */ []));
+        this.specialCharsCriteriaMsg = input('包含至少一个特殊字符', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "specialCharsCriteriaMsg" }] : /* istanbul ignore next */ []));
+        this.customCharsCriteriaMsg = input('包含至少一个传统字符', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "customCharsCriteriaMsg" }] : /* istanbul ignore next */ []));
+        this.minCharsCriteriaMsg = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "minCharsCriteriaMsg" }] : /* istanbul ignore next */ []));
+        this.pageLoaded = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageLoaded" }] : /* istanbul ignore next */ []));
         setTimeout(() => {
             this.pageLoaded.set(true);
         }, 100);
     }
+    getMinCharsMsg() {
+        return this.minCharsCriteriaMsg() ?? `包含至少 ${this.passwordComponent().min()} 个字符`;
+    }
     getEnterIndex(itemType) {
         const enabledItems = [];
-        if (this.passwordComponent.enableLowerCaseLetterRule) {
+        if (this.passwordComponent().enableLowerCaseLetterRule()) {
             enabledItems.push('lowerCase');
         }
-        if (this.passwordComponent.enableUpperCaseLetterRule) {
+        if (this.passwordComponent().enableUpperCaseLetterRule()) {
             enabledItems.push('upperCase');
         }
-        if (this.passwordComponent.enableDigitRule) {
+        if (this.passwordComponent().enableDigitRule()) {
             enabledItems.push('digit');
         }
-        if (this.passwordComponent.enableSpecialCharRule) {
+        if (this.passwordComponent().enableSpecialCharRule()) {
             enabledItems.push('specialChar');
         }
-        if (this.passwordComponent.enableLengthRule) {
+        if (this.passwordComponent().enableLengthRule()) {
             enabledItems.push('length');
         }
-        if (this.passwordComponent.customValidator) {
+        if (this.passwordComponent().customValidator()) {
             enabledItems.push('custom');
         }
-        if (this.enableScoreInfo) {
+        if (this.enableScoreInfo()) {
             enabledItems.push('score');
         }
         return enabledItems.findIndex(i => i === itemType);
     }
     getLeaveIndex(itemType) {
         const enabledItems = [];
-        if (this.passwordComponent.enableLowerCaseLetterRule) {
+        if (this.passwordComponent().enableLowerCaseLetterRule()) {
             enabledItems.push('lowerCase');
         }
-        if (this.passwordComponent.enableUpperCaseLetterRule) {
+        if (this.passwordComponent().enableUpperCaseLetterRule()) {
             enabledItems.push('upperCase');
         }
-        if (this.passwordComponent.enableDigitRule) {
+        if (this.passwordComponent().enableDigitRule()) {
             enabledItems.push('digit');
         }
-        if (this.passwordComponent.enableSpecialCharRule) {
+        if (this.passwordComponent().enableSpecialCharRule()) {
             enabledItems.push('specialChar');
         }
-        if (this.passwordComponent.enableLengthRule) {
+        if (this.passwordComponent().enableLengthRule()) {
             enabledItems.push('length');
         }
-        if (this.passwordComponent.customValidator) {
+        if (this.passwordComponent().customValidator()) {
             enabledItems.push('custom');
         }
-        if (this.enableScoreInfo) {
+        if (this.enableScoreInfo()) {
             enabledItems.push('score');
         }
         return enabledItems.length - enabledItems.findIndex(j => j === itemType) - 1;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPasswordStrengthInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.11", type: CmatPasswordStrengthInfoComponent, isStandalone: true, selector: "cmat-password-strength-info", inputs: { passwordComponent: "passwordComponent", enableScoreInfo: "enableScoreInfo", lowerCaseCriteriaMsg: "lowerCaseCriteriaMsg", upperCaseCriteriaMsg: "upperCaseCriteriaMsg", digitsCriteriaMsg: "digitsCriteriaMsg", specialCharsCriteriaMsg: "specialCharsCriteriaMsg", customCharsCriteriaMsg: "customCharsCriteriaMsg", minCharsCriteriaMsg: "minCharsCriteriaMsg" }, exportAs: ["cmatPasswordStrengthInfo"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<mat-card class=\"info-card\">\r\n  <mat-card-content>\r\n    @if (passwordComponent.enableLowerCaseLetterRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('lowerCase')\" [style.--leave-item-index]=\"getLeaveIndex('lowerCase')\">\r\n      @if (passwordComponent.containAtLeastOneLowerCaseLetter) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{lowerCaseCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.enableUpperCaseLetterRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('upperCase')\" [style.--leave-item-index]=\"getLeaveIndex('upperCase')\">\r\n      @if (passwordComponent.containAtLeastOneUpperCaseLetter) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{upperCaseCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.enableDigitRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('digit')\" [style.--leave-item-index]=\"getLeaveIndex('digit')\">\r\n      @if (passwordComponent.containAtLeastOneDigit) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{digitsCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.enableSpecialCharRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('specialChar')\"\r\n      [style.--leave-item-index]=\"getLeaveIndex('specialChar')\">\r\n      @if (passwordComponent.containAtLeastOneSpecialChar) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{specialCharsCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.enableLengthRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('length')\" [style.--leave-item-index]=\"getLeaveIndex('length')\">\r\n      @if (passwordComponent.containAtLeastMinChars) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{minCharsCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.customValidator) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('custom')\" [style.--leave-item-index]=\"getLeaveIndex('custom')\">\r\n      @if (passwordComponent.containAtCustomChars) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>{{customCharsCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (enableScoreInfo) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('score')\" [style.--leave-item-index]=\"getLeaveIndex('score')\">\r\n      @if (passwordComponent.strength === 100) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>\u7035\u55D9\u721C\u5BEE\u54C4\u5BB3= {{passwordComponent.strength}} %100</span>\r\n    </div>\r\n    }\r\n\r\n  </mat-card-content>\r\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->\r\n</mat-card>\r\n", styles: ["cmat-password-strength-info{margin-top:20px}cmat-password-strength-info .mat-mdc-card{display:flex;flex-direction:row;flex:1 1 0%;margin:.5rem;box-sizing:border-box;place-content:stretch;align-items:stretch}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content{display:flex;flex-direction:column;box-sizing:border-box;max-width:100%;place-content:stretch;align-items:stretch}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content .mat-icon{margin-right:1rem}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content .info-row{display:flex;flex-direction:row;box-sizing:border-box;align-items:center}cmat-password-strength-info .info-card .info-row.info-row-enter{transition-property:opacity,transform;transition-delay:calc(.3s * var(--enter-item-index, 0));transition-duration:1s;transition-timing-function:cubic-bezier(.8,-.6,.2,1.5)}@starting-style{cmat-password-strength-info .info-card .info-row.info-row-enter{transform:scale(.5);opacity:0}}cmat-password-strength-info .info-card .info-row.info-row-leave{transition-property:opacity,transform,height;transition-delay:calc(.3s * var(--leave-item-index, 0));transition-duration:1s;transition-timing-function:cubic-bezier(.8,-.6,.2,1.5);opacity:0;transform:scale(.5);height:0;margin:0}@starting-style{cmat-password-strength-info .info-card .info-row.info-row-leave{transform:scale(1);opacity:1;height:inherit}}cmat-password-strength-info .shake-info-animation{animation:shake 1s}cmat-password-strength-info .flip-in-x-animation{backface-visibility:visible;animation:flipInX 1s ease-in}cmat-password-strength-info .flip-in-y-animation{backface-visibility:visible;animation:flipInY 1s ease-in}@keyframes shake{0%{transform:translateZ(0)}10%{transform:translate3d(-10px,0,0)}20%{transform:translate3d(10px,0,0)}30%{transform:translate3d(-10px,0,0)}40%{transform:translate3d(10px,0,0)}50%{transform:translate3d(-10px,0,0)}60%{transform:translate3d(10px,0,0)}70%{transform:translate3d(-10px,0,0)}80%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-10px,0,0)}to{transform:translateZ(0)}}@keyframes flipInX{0%{opacity:0;transform:perspective(400px) rotateX(90deg)}40%{opacity:1;transform:perspective(400px) rotateX(-20deg)}60%{transform:perspective(400px) rotateX(10deg)}80%{transform:perspective(400px) rotateX(-5deg)}to{opacity:1;transform:perspective(400px) rotate3d(0,0,0,0)}}@keyframes flipInY{0%{opacity:0;transform:perspective(400px) rotateY(90deg)}40%{opacity:1;transform:perspective(400px) rotateY(-20deg)}60%{transform:perspective(400px) rotateY(10deg)}80%{transform:perspective(400px) rotateY(-5deg)}to{opacity:1;transform:perspective(400px) rotate3d(0,0,0,0)}}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPasswordStrengthInfoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.2", type: CmatPasswordStrengthInfoComponent, isStandalone: true, selector: "cmat-password-strength-info", inputs: { passwordComponent: { classPropertyName: "passwordComponent", publicName: "passwordComponent", isSignal: true, isRequired: true, transformFunction: null }, enableScoreInfo: { classPropertyName: "enableScoreInfo", publicName: "enableScoreInfo", isSignal: true, isRequired: false, transformFunction: null }, lowerCaseCriteriaMsg: { classPropertyName: "lowerCaseCriteriaMsg", publicName: "lowerCaseCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null }, upperCaseCriteriaMsg: { classPropertyName: "upperCaseCriteriaMsg", publicName: "upperCaseCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null }, digitsCriteriaMsg: { classPropertyName: "digitsCriteriaMsg", publicName: "digitsCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null }, specialCharsCriteriaMsg: { classPropertyName: "specialCharsCriteriaMsg", publicName: "specialCharsCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null }, customCharsCriteriaMsg: { classPropertyName: "customCharsCriteriaMsg", publicName: "customCharsCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null }, minCharsCriteriaMsg: { classPropertyName: "minCharsCriteriaMsg", publicName: "minCharsCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["cmatPasswordStrengthInfo"], ngImport: i0, template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<mat-card class=\"info-card\">\r\n  <mat-card-content>\r\n    @if (passwordComponent().enableLowerCaseLetterRule()) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('lowerCase')\" [style.--leave-item-index]=\"getLeaveIndex('lowerCase')\">\r\n      @if (passwordComponent().containAtLeastOneLowerCaseLetter()) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{lowerCaseCriteriaMsg()}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent().enableUpperCaseLetterRule()) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('upperCase')\" [style.--leave-item-index]=\"getLeaveIndex('upperCase')\">\r\n      @if (passwordComponent().containAtLeastOneUpperCaseLetter()) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{upperCaseCriteriaMsg()}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent().enableDigitRule()) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('digit')\" [style.--leave-item-index]=\"getLeaveIndex('digit')\">\r\n      @if (passwordComponent().containAtLeastOneDigit()) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{digitsCriteriaMsg()}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent().enableSpecialCharRule()) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('specialChar')\"\r\n      [style.--leave-item-index]=\"getLeaveIndex('specialChar')\">\r\n      @if (passwordComponent().containAtLeastOneSpecialChar()) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{specialCharsCriteriaMsg()}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent().enableLengthRule()) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('length')\" [style.--leave-item-index]=\"getLeaveIndex('length')\">\r\n      @if (passwordComponent().containAtLeastMinChars()) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{getMinCharsMsg()}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent().customValidator()) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('custom')\" [style.--leave-item-index]=\"getLeaveIndex('custom')\">\r\n      @if (passwordComponent().containAtCustomChars()) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{customCharsCriteriaMsg()}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (enableScoreInfo()) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('score')\" [style.--leave-item-index]=\"getLeaveIndex('score')\">\r\n      @if (passwordComponent().strength() === 100) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>\u5BC6\u7801\u5F3A\u5EA6= {{passwordComponent().strength()}} %100</span>\r\n    </div>\r\n    }\r\n\r\n  </mat-card-content>\r\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->\r\n</mat-card>\r\n", styles: ["cmat-password-strength-info{margin-top:20px}cmat-password-strength-info .mat-mdc-card{display:flex;flex-direction:row;flex:1 1 0%;margin:.5rem;box-sizing:border-box;place-content:stretch;align-items:stretch}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content{display:flex;flex-direction:column;box-sizing:border-box;max-width:100%;place-content:stretch;align-items:stretch}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content .mat-icon{margin-right:1rem}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content .info-row{display:flex;flex-direction:row;box-sizing:border-box;align-items:center}cmat-password-strength-info .info-card .info-row.info-row-enter{transition-property:opacity,transform;transition-delay:calc(.3s * var(--enter-item-index, 0));transition-duration:1s;transition-timing-function:cubic-bezier(.8,-.6,.2,1.5)}@starting-style{cmat-password-strength-info .info-card .info-row.info-row-enter{transform:scale(.5);opacity:0}}cmat-password-strength-info .info-card .info-row.info-row-leave{transition-property:opacity,transform,height;transition-delay:calc(.3s * var(--leave-item-index, 0));transition-duration:1s;transition-timing-function:cubic-bezier(.8,-.6,.2,1.5);opacity:0;transform:scale(.5);height:0;margin:0}@starting-style{cmat-password-strength-info .info-card .info-row.info-row-leave{transform:scale(1);opacity:1;height:inherit}}cmat-password-strength-info .shake-info-animation{animation:shake 1s}cmat-password-strength-info .flip-in-x-animation{backface-visibility:visible;animation:flipInX 1s ease-in}cmat-password-strength-info .flip-in-y-animation{backface-visibility:visible;animation:flipInY 1s ease-in}@keyframes shake{0%{transform:translateZ(0)}10%{transform:translate3d(-10px,0,0)}20%{transform:translate3d(10px,0,0)}30%{transform:translate3d(-10px,0,0)}40%{transform:translate3d(10px,0,0)}50%{transform:translate3d(-10px,0,0)}60%{transform:translate3d(10px,0,0)}70%{transform:translate3d(-10px,0,0)}80%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-10px,0,0)}to{transform:translateZ(0)}}@keyframes flipInX{0%{opacity:0;transform:perspective(400px) rotateX(90deg)}40%{opacity:1;transform:perspective(400px) rotateX(-20deg)}60%{transform:perspective(400px) rotateX(10deg)}80%{transform:perspective(400px) rotateX(-5deg)}to{opacity:1;transform:perspective(400px) rotate3d(0,0,0,0)}}@keyframes flipInY{0%{opacity:0;transform:perspective(400px) rotateY(90deg)}40%{opacity:1;transform:perspective(400px) rotateY(-20deg)}60%{transform:perspective(400px) rotateY(10deg)}80%{transform:perspective(400px) rotateY(-5deg)}to{opacity:1;transform:perspective(400px) rotate3d(0,0,0,0)}}\n"], dependencies: [{ kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i1$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i1$2.MatCardContent, selector: "mat-card-content" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.11", ngImport: i0, type: CmatPasswordStrengthInfoComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.2", ngImport: i0, type: CmatPasswordStrengthInfoComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cmat-password-strength-info', exportAs: 'cmatPasswordStrengthInfo', encapsulation: ViewEncapsulation.None, imports: [MatCardModule, MatIconModule], template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<mat-card class=\"info-card\">\r\n  <mat-card-content>\r\n    @if (passwordComponent.enableLowerCaseLetterRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('lowerCase')\" [style.--leave-item-index]=\"getLeaveIndex('lowerCase')\">\r\n      @if (passwordComponent.containAtLeastOneLowerCaseLetter) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{lowerCaseCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.enableUpperCaseLetterRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('upperCase')\" [style.--leave-item-index]=\"getLeaveIndex('upperCase')\">\r\n      @if (passwordComponent.containAtLeastOneUpperCaseLetter) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{upperCaseCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.enableDigitRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('digit')\" [style.--leave-item-index]=\"getLeaveIndex('digit')\">\r\n      @if (passwordComponent.containAtLeastOneDigit) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{digitsCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.enableSpecialCharRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('specialChar')\"\r\n      [style.--leave-item-index]=\"getLeaveIndex('specialChar')\">\r\n      @if (passwordComponent.containAtLeastOneSpecialChar) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{specialCharsCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.enableLengthRule) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('length')\" [style.--leave-item-index]=\"getLeaveIndex('length')\">\r\n      @if (passwordComponent.containAtLeastMinChars) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{minCharsCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent.customValidator) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('custom')\" [style.--leave-item-index]=\"getLeaveIndex('custom')\">\r\n      @if (passwordComponent.containAtCustomChars) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>{{customCharsCriteriaMsg}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (enableScoreInfo) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('score')\" [style.--leave-item-index]=\"getLeaveIndex('score')\">\r\n      @if (passwordComponent.strength === 100) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded\"></mat-icon>\r\n      }\r\n      <span>\u7035\u55D9\u721C\u5BEE\u54C4\u5BB3= {{passwordComponent.strength}} %100</span>\r\n    </div>\r\n    }\r\n\r\n  </mat-card-content>\r\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->\r\n</mat-card>\r\n", styles: ["cmat-password-strength-info{margin-top:20px}cmat-password-strength-info .mat-mdc-card{display:flex;flex-direction:row;flex:1 1 0%;margin:.5rem;box-sizing:border-box;place-content:stretch;align-items:stretch}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content{display:flex;flex-direction:column;box-sizing:border-box;max-width:100%;place-content:stretch;align-items:stretch}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content .mat-icon{margin-right:1rem}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content .info-row{display:flex;flex-direction:row;box-sizing:border-box;align-items:center}cmat-password-strength-info .info-card .info-row.info-row-enter{transition-property:opacity,transform;transition-delay:calc(.3s * var(--enter-item-index, 0));transition-duration:1s;transition-timing-function:cubic-bezier(.8,-.6,.2,1.5)}@starting-style{cmat-password-strength-info .info-card .info-row.info-row-enter{transform:scale(.5);opacity:0}}cmat-password-strength-info .info-card .info-row.info-row-leave{transition-property:opacity,transform,height;transition-delay:calc(.3s * var(--leave-item-index, 0));transition-duration:1s;transition-timing-function:cubic-bezier(.8,-.6,.2,1.5);opacity:0;transform:scale(.5);height:0;margin:0}@starting-style{cmat-password-strength-info .info-card .info-row.info-row-leave{transform:scale(1);opacity:1;height:inherit}}cmat-password-strength-info .shake-info-animation{animation:shake 1s}cmat-password-strength-info .flip-in-x-animation{backface-visibility:visible;animation:flipInX 1s ease-in}cmat-password-strength-info .flip-in-y-animation{backface-visibility:visible;animation:flipInY 1s ease-in}@keyframes shake{0%{transform:translateZ(0)}10%{transform:translate3d(-10px,0,0)}20%{transform:translate3d(10px,0,0)}30%{transform:translate3d(-10px,0,0)}40%{transform:translate3d(10px,0,0)}50%{transform:translate3d(-10px,0,0)}60%{transform:translate3d(10px,0,0)}70%{transform:translate3d(-10px,0,0)}80%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-10px,0,0)}to{transform:translateZ(0)}}@keyframes flipInX{0%{opacity:0;transform:perspective(400px) rotateX(90deg)}40%{opacity:1;transform:perspective(400px) rotateX(-20deg)}60%{transform:perspective(400px) rotateX(10deg)}80%{transform:perspective(400px) rotateX(-5deg)}to{opacity:1;transform:perspective(400px) rotate3d(0,0,0,0)}}@keyframes flipInY{0%{opacity:0;transform:perspective(400px) rotateY(90deg)}40%{opacity:1;transform:perspective(400px) rotateY(-20deg)}60%{transform:perspective(400px) rotateY(10deg)}80%{transform:perspective(400px) rotateY(-5deg)}to{opacity:1;transform:perspective(400px) rotate3d(0,0,0,0)}}\n"] }]
-        }], propDecorators: { passwordComponent: [{
-                type: Input
-            }], enableScoreInfo: [{
-                type: Input
-            }], lowerCaseCriteriaMsg: [{
-                type: Input
-            }], upperCaseCriteriaMsg: [{
-                type: Input
-            }], digitsCriteriaMsg: [{
-                type: Input
-            }], specialCharsCriteriaMsg: [{
-                type: Input
-            }], customCharsCriteriaMsg: [{
-                type: Input
-            }], minCharsCriteriaMsg: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'cmat-password-strength-info', exportAs: 'cmatPasswordStrengthInfo', encapsulation: ViewEncapsulation.None, imports: [MatCardModule, MatIconModule], template: "<!-- eslint-disable @angular-eslint/template/no-inline-styles -->\r\n<mat-card class=\"info-card\">\r\n  <mat-card-content>\r\n    @if (passwordComponent().enableLowerCaseLetterRule()) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('lowerCase')\" [style.--leave-item-index]=\"getLeaveIndex('lowerCase')\">\r\n      @if (passwordComponent().containAtLeastOneLowerCaseLetter()) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{lowerCaseCriteriaMsg()}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent().enableUpperCaseLetterRule()) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('upperCase')\" [style.--leave-item-index]=\"getLeaveIndex('upperCase')\">\r\n      @if (passwordComponent().containAtLeastOneUpperCaseLetter()) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{upperCaseCriteriaMsg()}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent().enableDigitRule()) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('digit')\" [style.--leave-item-index]=\"getLeaveIndex('digit')\">\r\n      @if (passwordComponent().containAtLeastOneDigit()) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{digitsCriteriaMsg()}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent().enableSpecialCharRule()) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('specialChar')\"\r\n      [style.--leave-item-index]=\"getLeaveIndex('specialChar')\">\r\n      @if (passwordComponent().containAtLeastOneSpecialChar()) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{specialCharsCriteriaMsg()}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent().enableLengthRule()) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('length')\" [style.--leave-item-index]=\"getLeaveIndex('length')\">\r\n      @if (passwordComponent().containAtLeastMinChars()) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{getMinCharsMsg()}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (passwordComponent().customValidator()) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('custom')\" [style.--leave-item-index]=\"getLeaveIndex('custom')\">\r\n      @if (passwordComponent().containAtCustomChars()) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>{{customCharsCriteriaMsg()}}</span>\r\n    </div>\r\n    }\r\n\r\n    @if (enableScoreInfo()) {\r\n    <div class=\"info-row info-row-enter\" animate.leave=\"info-row-leave\"\r\n      [style.--enter-item-index]=\"getEnterIndex('score')\" [style.--leave-item-index]=\"getLeaveIndex('score')\">\r\n      @if (passwordComponent().strength() === 100) {\r\n      <mat-icon animate.enter=\"flip-in-x-animation\" color=\"primary\" svgIcon=\"mat_outline:done\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      } @else {\r\n      <mat-icon animate.enter=\"shake-info-animation\" color=\"warn\" svgIcon=\"mat_outline:error\" [class.animate-none]=\"!pageLoaded()\"></mat-icon>\r\n      }\r\n      <span>\u5BC6\u7801\u5F3A\u5EA6= {{passwordComponent().strength()}} %100</span>\r\n    </div>\r\n    }\r\n\r\n  </mat-card-content>\r\n<!-- eslint-enable @angular-eslint/template/no-inline-styles -->\r\n</mat-card>\r\n", styles: ["cmat-password-strength-info{margin-top:20px}cmat-password-strength-info .mat-mdc-card{display:flex;flex-direction:row;flex:1 1 0%;margin:.5rem;box-sizing:border-box;place-content:stretch;align-items:stretch}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content{display:flex;flex-direction:column;box-sizing:border-box;max-width:100%;place-content:stretch;align-items:stretch}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content .mat-icon{margin-right:1rem}cmat-password-strength-info .mat-mdc-card .mat-mdc-card-content .info-row{display:flex;flex-direction:row;box-sizing:border-box;align-items:center}cmat-password-strength-info .info-card .info-row.info-row-enter{transition-property:opacity,transform;transition-delay:calc(.3s * var(--enter-item-index, 0));transition-duration:1s;transition-timing-function:cubic-bezier(.8,-.6,.2,1.5)}@starting-style{cmat-password-strength-info .info-card .info-row.info-row-enter{transform:scale(.5);opacity:0}}cmat-password-strength-info .info-card .info-row.info-row-leave{transition-property:opacity,transform,height;transition-delay:calc(.3s * var(--leave-item-index, 0));transition-duration:1s;transition-timing-function:cubic-bezier(.8,-.6,.2,1.5);opacity:0;transform:scale(.5);height:0;margin:0}@starting-style{cmat-password-strength-info .info-card .info-row.info-row-leave{transform:scale(1);opacity:1;height:inherit}}cmat-password-strength-info .shake-info-animation{animation:shake 1s}cmat-password-strength-info .flip-in-x-animation{backface-visibility:visible;animation:flipInX 1s ease-in}cmat-password-strength-info .flip-in-y-animation{backface-visibility:visible;animation:flipInY 1s ease-in}@keyframes shake{0%{transform:translateZ(0)}10%{transform:translate3d(-10px,0,0)}20%{transform:translate3d(10px,0,0)}30%{transform:translate3d(-10px,0,0)}40%{transform:translate3d(10px,0,0)}50%{transform:translate3d(-10px,0,0)}60%{transform:translate3d(10px,0,0)}70%{transform:translate3d(-10px,0,0)}80%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-10px,0,0)}to{transform:translateZ(0)}}@keyframes flipInX{0%{opacity:0;transform:perspective(400px) rotateX(90deg)}40%{opacity:1;transform:perspective(400px) rotateX(-20deg)}60%{transform:perspective(400px) rotateX(10deg)}80%{transform:perspective(400px) rotateX(-5deg)}to{opacity:1;transform:perspective(400px) rotate3d(0,0,0,0)}}@keyframes flipInY{0%{opacity:0;transform:perspective(400px) rotateY(90deg)}40%{opacity:1;transform:perspective(400px) rotateY(-20deg)}60%{transform:perspective(400px) rotateY(10deg)}80%{transform:perspective(400px) rotateY(-5deg)}to{opacity:1;transform:perspective(400px) rotate3d(0,0,0,0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { passwordComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "passwordComponent", required: true }] }], enableScoreInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "enableScoreInfo", required: false }] }], lowerCaseCriteriaMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "lowerCaseCriteriaMsg", required: false }] }], upperCaseCriteriaMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "upperCaseCriteriaMsg", required: false }] }], digitsCriteriaMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "digitsCriteriaMsg", required: false }] }], specialCharsCriteriaMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "specialCharsCriteriaMsg", required: false }] }], customCharsCriteriaMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "customCharsCriteriaMsg", required: false }] }], minCharsCriteriaMsg: [{ type: i0.Input, args: [{ isSignal: true, alias: "minCharsCriteriaMsg", required: false }] }] } });
 
 /**
  * Generated bundle index. Do not edit.