@testgorilla/tgo-ui 7.6.2 → 7.6.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -18,6 +18,9 @@ class PasswordStrengthComponent {
|
|
|
18
18
|
*/
|
|
19
19
|
set password(value) {
|
|
20
20
|
this._password = value;
|
|
21
|
+
if (value && value.length > 0) {
|
|
22
|
+
this.showError = true;
|
|
23
|
+
}
|
|
21
24
|
this.checkCriteria(this._password);
|
|
22
25
|
}
|
|
23
26
|
constructor(defaultAppTheme) {
|
|
@@ -38,6 +41,7 @@ class PasswordStrengthComponent {
|
|
|
38
41
|
*/
|
|
39
42
|
this.validationCheck = new EventEmitter();
|
|
40
43
|
this.criteriaPassed = {};
|
|
44
|
+
this.showError = false;
|
|
41
45
|
this._password = '';
|
|
42
46
|
this.criteria = [
|
|
43
47
|
{ translateKey: 'PASSWORD.LOWERCASE', key: 'hasLowercase' },
|
|
@@ -78,11 +82,11 @@ class PasswordStrengthComponent {
|
|
|
78
82
|
return this.applicationTheme === 'classic' ? 'Round-check' : 'Check-round-in-line';
|
|
79
83
|
}
|
|
80
84
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PasswordStrengthComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
81
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: PasswordStrengthComponent, isStandalone: false, selector: "ui-password-strength", inputs: { applicationTheme: "applicationTheme", password: "password" }, outputs: { validationCheck: "validationCheck" }, ngImport: i0, template: "<div class=\"criteria-container\">\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-progress-bar>\n </div>\n\n <div\n *ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.criteria-container{margin-top:14px}.criteria-container .progress{margin-bottom:16px}.criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.criteria-container .criterion.error span{color:#e02800}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i3.ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
85
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: PasswordStrengthComponent, isStandalone: false, selector: "ui-password-strength", inputs: { applicationTheme: "applicationTheme", password: "password" }, outputs: { validationCheck: "validationCheck" }, ngImport: i0, template: "<div class=\"criteria-container\">\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-progress-bar>\n </div>\n\n <div\n *ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.criteria-container{margin-top:14px}.criteria-container .progress{margin-bottom:16px}.criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.criteria-container .criterion.error span{color:#e02800}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: i2.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i3.ProgressBarComponent, selector: "ui-progress-bar", inputs: ["companyColor", "progress", "mode", "buffer", "applicationTheme", "ariaLabel", "ariaDescribedBy", "showPercentage"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.UiTranslatePipe, name: "uiTranslate" }] }); }
|
|
82
86
|
}
|
|
83
87
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: PasswordStrengthComponent, decorators: [{
|
|
84
88
|
type: Component,
|
|
85
|
-
args: [{ selector: 'ui-password-strength', standalone: false, template: "<div class=\"criteria-container\">\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-progress-bar>\n </div>\n\n <div\n *ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.criteria-container{margin-top:14px}.criteria-container .progress{margin-bottom:16px}.criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.criteria-container .criterion.error span{color:#e02800}\n"] }]
|
|
89
|
+
args: [{ selector: 'ui-password-strength', standalone: false, template: "<div class=\"criteria-container\">\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-progress-bar>\n </div>\n\n <div\n *ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n </div>\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.criteria-container{margin-top:14px}.criteria-container .progress{margin-bottom:16px}.criteria-container .criterion{display:flex;flex-direction:row;align-items:center;gap:8px}.criteria-container .criterion ui-icon ::ng-deep svg{color:#e9e9e9}.criteria-container .criterion span{text-align:center;font-size:14px;line-height:23px;color:#242424}.criteria-container .criterion.passed ui-icon ::ng-deep svg{color:#242424}.criteria-container .criterion.passed span{color:#666;text-decoration:line-through}.criteria-container .criterion.error ui-icon ::ng-deep svg{color:#e02800}.criteria-container .criterion.error span{color:#e02800}\n"] }]
|
|
86
90
|
}], ctorParameters: () => [{ type: undefined, decorators: [{
|
|
87
91
|
type: Optional
|
|
88
92
|
}, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"testgorilla-tgo-ui-components-password-strength.mjs","sources":["../../../components/password-strength/password-strength.component.ts","../../../components/password-strength/password-strength.component.html","../../../components/password-strength/password-strength.component.module.ts","../../../components/password-strength/testgorilla-tgo-ui-components-password-strength.ts"],"sourcesContent":["import { Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconName } from '@testgorilla/tgo-ui/components/icon';\n\n@Component({\n selector: 'ui-password-strength',\n templateUrl: './password-strength.component.html',\n styleUrls: ['./password-strength.component.scss'],\n standalone: false,\n})\nexport class PasswordStrengthComponent {\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof PasswordStrengthComponent\n */\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /**\n * The password that needs to be checked\n * @property password\n * @type {string}\n * @memberof PasswordStrengthComponent\n */\n @Input() set password(value: string) {\n this._password = value;\n this.checkCriteria(this._password);\n }\n\n /**\n * Event that outputs validation check result\n * @property validationCheck\n * @type {boolean}\n * @memberof PasswordStrengthComponent\n */\n @Output() validationCheck = new EventEmitter<boolean>();\n\n protected progressValue: number;\n protected criteriaPassed: { [key: string]: boolean } = {};\n private _password = '';\n protected criteria: { translateKey: string; key: string }[] = [\n { translateKey: 'PASSWORD.LOWERCASE', key: 'hasLowercase' },\n { translateKey: 'PASSWORD.UPPERCASE', key: 'hasUppercase' },\n { translateKey: 'PASSWORD.NUMBER', key: 'hasNumber' },\n { translateKey: 'PASSWORD.SPECIAL_CHARACTER', key: 'hasSpecialChar' },\n { translateKey: 'PASSWORD.CHARACTERS', key: 'hasMinLength' },\n ];\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (this.defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n checkCriteria(password: string): void {\n this.criteriaPassed = {\n hasLowercase: /^(?=.*?[a-z])/.test(password),\n hasUppercase: /^(?=.*?[A-Z])/.test(password),\n hasNumber: /^(?=.*?[0-9])/.test(password),\n hasSpecialChar: /^(?=.*?[\" !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~])/.test(password),\n hasMinLength: password.length >= 12,\n };\n\n const passedCount = this.countPassed();\n this.progressValue = Math.min(Math.max(passedCount * (100 / Object.keys(this.criteriaPassed).length), 1), 100);\n this.validationCheck.emit(passedCount === Object.keys(this.criteriaPassed).length);\n }\n\n private countPassed(): number {\n let count = 0;\n for (const key in this.criteriaPassed) {\n if (Object.prototype.hasOwnProperty.call(this.criteriaPassed, key) && this.criteriaPassed[key]) {\n count++;\n }\n }\n return count;\n }\n\n get infoIcon(): IconName {\n return this.applicationTheme === 'classic' ? 'Info' : 'Info-in-line';\n }\n\n get checkIcon(): IconName {\n return this.applicationTheme === 'classic' ? 'Round-check' : 'Check-round-in-line';\n }\n}\n","<div class=\"criteria-container\">\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-progress-bar>\n </div>\n\n <div\n *ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PasswordStrengthComponent } from './password-strength.component';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ProgressBarComponentModule } from '@testgorilla/tgo-ui/components/progress-bar';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\n\n@NgModule({\n declarations: [PasswordStrengthComponent],\n imports: [CommonModule, IconComponentModule, ProgressBarComponentModule, UiTranslatePipe],\n exports: [PasswordStrengthComponent],\n})\nexport class PasswordStrengthComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;;;;;;;;;;MAUa,yBAAyB,CAAA;AAUpC;;;;;AAKG;IACH,IAAa,QAAQ,CAAC,KAAa,EAAA;AACjC,QAAA,IAAI,CAAC,SAAS,GAAG,KAAK;
|
|
1
|
+
{"version":3,"file":"testgorilla-tgo-ui-components-password-strength.mjs","sources":["../../../components/password-strength/password-strength.component.ts","../../../components/password-strength/password-strength.component.html","../../../components/password-strength/password-strength.component.module.ts","../../../components/password-strength/testgorilla-tgo-ui-components-password-strength.ts"],"sourcesContent":["import { Component, EventEmitter, Inject, Input, Optional, Output } from '@angular/core';\nimport { ApplicationTheme } from '@testgorilla/tgo-ui/components/core';\nimport { IconName } from '@testgorilla/tgo-ui/components/icon';\n\n@Component({\n selector: 'ui-password-strength',\n templateUrl: './password-strength.component.html',\n styleUrls: ['./password-strength.component.scss'],\n standalone: false,\n})\nexport class PasswordStrengthComponent {\n /**\n *\n * Defines the application theme\n *\n * @type {ApplicationTheme}\n * @memberof PasswordStrengthComponent\n */\n @Input() applicationTheme: ApplicationTheme = 'light';\n\n /**\n * The password that needs to be checked\n * @property password\n * @type {string}\n * @memberof PasswordStrengthComponent\n */\n @Input() set password(value: string) {\n this._password = value;\n if (value && value.length > 0) {\n this.showError = true;\n }\n this.checkCriteria(this._password);\n }\n\n /**\n * Event that outputs validation check result\n * @property validationCheck\n * @type {boolean}\n * @memberof PasswordStrengthComponent\n */\n @Output() validationCheck = new EventEmitter<boolean>();\n\n protected progressValue: number;\n protected criteriaPassed: { [key: string]: boolean } = {};\n protected showError = false;\n private _password = '';\n protected criteria: { translateKey: string; key: string }[] = [\n { translateKey: 'PASSWORD.LOWERCASE', key: 'hasLowercase' },\n { translateKey: 'PASSWORD.UPPERCASE', key: 'hasUppercase' },\n { translateKey: 'PASSWORD.NUMBER', key: 'hasNumber' },\n { translateKey: 'PASSWORD.SPECIAL_CHARACTER', key: 'hasSpecialChar' },\n { translateKey: 'PASSWORD.CHARACTERS', key: 'hasMinLength' },\n ];\n\n constructor(\n @Optional() @Inject('CANOPYUI_DEFAULT_APPLICATION_THEME') private readonly defaultAppTheme: ApplicationTheme\n ) {\n if (this.defaultAppTheme) {\n this.applicationTheme = defaultAppTheme;\n }\n }\n\n checkCriteria(password: string): void {\n this.criteriaPassed = {\n hasLowercase: /^(?=.*?[a-z])/.test(password),\n hasUppercase: /^(?=.*?[A-Z])/.test(password),\n hasNumber: /^(?=.*?[0-9])/.test(password),\n hasSpecialChar: /^(?=.*?[\" !#$%&'()*+,-./:;<=>?@[\\]^_`{|}~])/.test(password),\n hasMinLength: password.length >= 12,\n };\n\n const passedCount = this.countPassed();\n this.progressValue = Math.min(Math.max(passedCount * (100 / Object.keys(this.criteriaPassed).length), 1), 100);\n this.validationCheck.emit(passedCount === Object.keys(this.criteriaPassed).length);\n }\n\n private countPassed(): number {\n let count = 0;\n for (const key in this.criteriaPassed) {\n if (Object.prototype.hasOwnProperty.call(this.criteriaPassed, key) && this.criteriaPassed[key]) {\n count++;\n }\n }\n return count;\n }\n\n get infoIcon(): IconName {\n return this.applicationTheme === 'classic' ? 'Info' : 'Info-in-line';\n }\n\n get checkIcon(): IconName {\n return this.applicationTheme === 'classic' ? 'Round-check' : 'Check-round-in-line';\n }\n}\n","<div class=\"criteria-container\">\n <div class=\"progress\">\n <ui-progress-bar\n [progress]=\"progressValue === 1 ? 0 : progressValue\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-progress-bar>\n </div>\n\n <div\n *ngFor=\"let criterion of criteria\"\n class=\"criterion\"\n [ngClass]=\"{ passed: criteriaPassed[criterion.key], error: !criteriaPassed[criterion.key] && showError }\"\n >\n <ui-icon\n [size]=\"'24'\"\n [color]=\"'rebrand-black'\"\n [name]=\"!criteriaPassed[criterion.key] ? infoIcon : checkIcon\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-icon>\n <span>{{ criterion.translateKey | uiTranslate | async }}</span>\n </div>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { PasswordStrengthComponent } from './password-strength.component';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { ProgressBarComponentModule } from '@testgorilla/tgo-ui/components/progress-bar';\nimport { UiTranslatePipe } from '@testgorilla/tgo-ui/components/core';\n\n@NgModule({\n declarations: [PasswordStrengthComponent],\n imports: [CommonModule, IconComponentModule, ProgressBarComponentModule, UiTranslatePipe],\n exports: [PasswordStrengthComponent],\n})\nexport class PasswordStrengthComponentModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|