@progressio_resources/gravity-design-system 4.0.20 → 4.0.21
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.
- package/fesm2022/progressio_resources-gravity-design-system.mjs +15 -15
- package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/package.json +1 -1
- package/src/lib/assets/icon-set/gt-icon-unsuccess/gt-icon-unsuccess-lg-24.svg +1 -1
- package/src/lib/assets/icon-set/gt-icon-unsuccess/gt-icon-unsuccess-md-16.svg +1 -1
- package/src/lib/assets/icon-set/gt-icon-unsuccess/gt-icon-unsuccess-sm-12.svg +1 -1
- package/src/lib/assets/icon-set/gt-icon-unsuccess/gt-icon-unsuccess-xl-32.svg +1 -1
|
@@ -6206,11 +6206,11 @@ class GravityTabPrimaryComponent {
|
|
|
6206
6206
|
this.pressed.emit(index);
|
|
6207
6207
|
}
|
|
6208
6208
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityTabPrimaryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6209
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityTabPrimaryComponent, isStandalone: true, selector: "gravity-tab-primary", inputs: { selected: "selected", size: "size", paddingClass: "paddingClass", tabs: "tabs" }, outputs: { pressed: "pressed" }, ngImport: i0, template: "<div class=\"gravity-tab-primary\">\n <div class=\"tabs-container\">\n <div class=\"below-line {{paddingClass}}\"></div>\n @for (tab of tabs; track tab; let i = $index) {\n <div class=\"tab {{size}}\" [class.selected]=\"selected === i\"\n [attr.data-cy]=\"tab.cypressTag ? 'tabPrimary_' + tab.cypressTag : null\" (click)=\"setActiveTab(i)\">\n @if (tab.icon) {\n <gravity-icon [style.--icon-color]=\"'var(--text-highlight-primary)'\" [size]=\"'md'\"\n [iconName]=\"tab.icon\" [iconSize]=\"'md-16'\" class=\"icon-left\">\n </gravity-icon>\n }\n <p class=\"hr-label\" [ngClass]=\"selected === i ? 'sm-bold' : 'sm-regular'\">{{tab.title}}</p>\n </div>\n }\n <div class=\"bottom-line\"></div>\n </div>\n</div>\n\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-tab-primary .tabs-container{width:100%;display:flex;color:var(--on-bg-button-active-tertiary)}.gravity-tab-primary .tabs-container .tab{display:flex;cursor:default;align-items:center;justify-content:center;gap:var(--gravity-spacing-xs);background-color:var(--surface-secondary);border-radius:.3125rem .3125rem 0 0;border-bottom:1.5px solid var(--bg-button-hover-tertiary)
|
|
6209
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityTabPrimaryComponent, isStandalone: true, selector: "gravity-tab-primary", inputs: { selected: "selected", size: "size", paddingClass: "paddingClass", tabs: "tabs" }, outputs: { pressed: "pressed" }, ngImport: i0, template: "<div class=\"gravity-tab-primary\">\n <div class=\"tabs-container\">\n <div class=\"below-line {{paddingClass}}\"></div>\n @for (tab of tabs; track tab; let i = $index) {\n <div class=\"tab {{size}}\" [class.selected]=\"selected === i\"\n [attr.data-cy]=\"tab.cypressTag ? 'tabPrimary_' + tab.cypressTag : null\" (click)=\"setActiveTab(i)\">\n @if (tab.icon) {\n <gravity-icon [style.--icon-color]=\"'var(--text-highlight-primary)'\" [size]=\"'md'\"\n [iconName]=\"tab.icon\" [iconSize]=\"'md-16'\" class=\"icon-left\">\n </gravity-icon>\n }\n <p class=\"hr-label\" [ngClass]=\"selected === i ? 'sm-bold' : 'sm-regular'\">{{tab.title}}</p>\n </div>\n }\n <div class=\"bottom-line\"></div>\n </div>\n</div>\n\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-tab-primary .tabs-container{width:100%;display:flex;color:var(--on-bg-button-active-tertiary)}.gravity-tab-primary .tabs-container .tab{display:flex;cursor:default;align-items:center;justify-content:center;gap:var(--gravity-spacing-xs);background-color:var(--surface-secondary);border-radius:.3125rem .3125rem 0 0;border-bottom:1.5px solid var(--bg-button-hover-tertiary)}.gravity-tab-primary .tabs-container .tab.sm{padding:var(--gravity-spacing-sm) var(--gravity-spacing-xs)}.gravity-tab-primary .tabs-container .tab.md{padding:var(--gravity-spacing-sm) var(--gravity-spacing-sm)}.gravity-tab-primary .tabs-container .tab.lg{padding:var(--gravity-spacing-md) var(--gravity-spacing-lg)}.gravity-tab-primary .tabs-container .tab.selected{border:1.5px solid var(--bg-button-hover-tertiary);border-bottom:none}.gravity-tab-primary .tabs-container .tab:not(.selected):hover{cursor:pointer;background-color:var(--bg-button-active-tertiary)}.gravity-tab-primary .tabs-container .tab p{white-space:nowrap;color:var(--on-bg-button-active-tertiary)}.gravity-tab-primary .tabs-container .bottom-line{width:100%;border-bottom:1.5px solid var(--bg-button-hover-tertiary)}.gravity-tab-primary .tabs-container .below-line{border-bottom:1.5px solid var(--bg-button-hover-tertiary)}\n"], dependencies: [{ kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
|
|
6210
6210
|
}
|
|
6211
6211
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityTabPrimaryComponent, decorators: [{
|
|
6212
6212
|
type: Component,
|
|
6213
|
-
args: [{ selector: 'gravity-tab-primary', standalone: true, imports: [GravityIconComponent, NgClass], template: "<div class=\"gravity-tab-primary\">\n <div class=\"tabs-container\">\n <div class=\"below-line {{paddingClass}}\"></div>\n @for (tab of tabs; track tab; let i = $index) {\n <div class=\"tab {{size}}\" [class.selected]=\"selected === i\"\n [attr.data-cy]=\"tab.cypressTag ? 'tabPrimary_' + tab.cypressTag : null\" (click)=\"setActiveTab(i)\">\n @if (tab.icon) {\n <gravity-icon [style.--icon-color]=\"'var(--text-highlight-primary)'\" [size]=\"'md'\"\n [iconName]=\"tab.icon\" [iconSize]=\"'md-16'\" class=\"icon-left\">\n </gravity-icon>\n }\n <p class=\"hr-label\" [ngClass]=\"selected === i ? 'sm-bold' : 'sm-regular'\">{{tab.title}}</p>\n </div>\n }\n <div class=\"bottom-line\"></div>\n </div>\n</div>\n\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-tab-primary .tabs-container{width:100%;display:flex;color:var(--on-bg-button-active-tertiary)}.gravity-tab-primary .tabs-container .tab{display:flex;cursor:default;align-items:center;justify-content:center;gap:var(--gravity-spacing-xs);background-color:var(--surface-secondary);border-radius:.3125rem .3125rem 0 0;border-bottom:1.5px solid var(--bg-button-hover-tertiary)
|
|
6213
|
+
args: [{ selector: 'gravity-tab-primary', standalone: true, imports: [GravityIconComponent, NgClass], template: "<div class=\"gravity-tab-primary\">\n <div class=\"tabs-container\">\n <div class=\"below-line {{paddingClass}}\"></div>\n @for (tab of tabs; track tab; let i = $index) {\n <div class=\"tab {{size}}\" [class.selected]=\"selected === i\"\n [attr.data-cy]=\"tab.cypressTag ? 'tabPrimary_' + tab.cypressTag : null\" (click)=\"setActiveTab(i)\">\n @if (tab.icon) {\n <gravity-icon [style.--icon-color]=\"'var(--text-highlight-primary)'\" [size]=\"'md'\"\n [iconName]=\"tab.icon\" [iconSize]=\"'md-16'\" class=\"icon-left\">\n </gravity-icon>\n }\n <p class=\"hr-label\" [ngClass]=\"selected === i ? 'sm-bold' : 'sm-regular'\">{{tab.title}}</p>\n </div>\n }\n <div class=\"bottom-line\"></div>\n </div>\n</div>\n\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-tab-primary .tabs-container{width:100%;display:flex;color:var(--on-bg-button-active-tertiary)}.gravity-tab-primary .tabs-container .tab{display:flex;cursor:default;align-items:center;justify-content:center;gap:var(--gravity-spacing-xs);background-color:var(--surface-secondary);border-radius:.3125rem .3125rem 0 0;border-bottom:1.5px solid var(--bg-button-hover-tertiary)}.gravity-tab-primary .tabs-container .tab.sm{padding:var(--gravity-spacing-sm) var(--gravity-spacing-xs)}.gravity-tab-primary .tabs-container .tab.md{padding:var(--gravity-spacing-sm) var(--gravity-spacing-sm)}.gravity-tab-primary .tabs-container .tab.lg{padding:var(--gravity-spacing-md) var(--gravity-spacing-lg)}.gravity-tab-primary .tabs-container .tab.selected{border:1.5px solid var(--bg-button-hover-tertiary);border-bottom:none}.gravity-tab-primary .tabs-container .tab:not(.selected):hover{cursor:pointer;background-color:var(--bg-button-active-tertiary)}.gravity-tab-primary .tabs-container .tab p{white-space:nowrap;color:var(--on-bg-button-active-tertiary)}.gravity-tab-primary .tabs-container .bottom-line{width:100%;border-bottom:1.5px solid var(--bg-button-hover-tertiary)}.gravity-tab-primary .tabs-container .below-line{border-bottom:1.5px solid var(--bg-button-hover-tertiary)}\n"] }]
|
|
6214
6214
|
}], propDecorators: { selected: [{
|
|
6215
6215
|
type: Input
|
|
6216
6216
|
}], size: [{
|
|
@@ -9076,10 +9076,9 @@ class GravityPasswordFieldComponent {
|
|
|
9076
9076
|
}
|
|
9077
9077
|
onBlur() {
|
|
9078
9078
|
this.focusInput = false;
|
|
9079
|
-
if (
|
|
9080
|
-
|
|
9081
|
-
this.
|
|
9082
|
-
this.supportText = this._translations[lang].errorSupport;
|
|
9079
|
+
if (this.passwordStrength !== 'strong') {
|
|
9080
|
+
this.supportText = '';
|
|
9081
|
+
this.supportTextIcon = '';
|
|
9083
9082
|
}
|
|
9084
9083
|
}
|
|
9085
9084
|
validatePassword(password) {
|
|
@@ -9108,18 +9107,18 @@ class GravityPasswordFieldComponent {
|
|
|
9108
9107
|
_updateComponentState() {
|
|
9109
9108
|
if (!this.hasUserTyped)
|
|
9110
9109
|
return;
|
|
9111
|
-
const lang = this.currentLang === 'es' ? 'es' : 'en';
|
|
9112
9110
|
if (this.hasInvalidPasswordRequirements) {
|
|
9113
|
-
this.customState = 'typed-error';
|
|
9114
|
-
this.allPasswordRequirementsValid = false;
|
|
9115
|
-
this.supportTextIcon = 'information-circle';
|
|
9116
9111
|
this.supportText = '';
|
|
9112
|
+
this.supportTextIcon = '';
|
|
9113
|
+
this.customState = 'default';
|
|
9117
9114
|
this.showStrengthMeter = true;
|
|
9115
|
+
this.allPasswordRequirementsValid = false;
|
|
9118
9116
|
}
|
|
9119
9117
|
else {
|
|
9118
|
+
const lang = this.currentLang === 'es' ? 'es' : 'en';
|
|
9119
|
+
this.supportTextIcon = 'check';
|
|
9120
9120
|
this.customState = 'typed-positive';
|
|
9121
9121
|
this.allPasswordRequirementsValid = true;
|
|
9122
|
-
this.supportTextIcon = 'check';
|
|
9123
9122
|
this.supportText = this._translations[lang].positiveSupport;
|
|
9124
9123
|
this.showStrengthMeter = this.focusInput ? true : this.passwordStrength !== 'strong';
|
|
9125
9124
|
}
|
|
@@ -9128,8 +9127,9 @@ class GravityPasswordFieldComponent {
|
|
|
9128
9127
|
return this.passwordRequirements.some(r => !r.isValid);
|
|
9129
9128
|
}
|
|
9130
9129
|
get passwordStrength() {
|
|
9131
|
-
if (this.isPasswordEmpty)
|
|
9132
|
-
return 'default';
|
|
9130
|
+
if (this.isPasswordEmpty) {
|
|
9131
|
+
return this.focusInput ? 'weak' : 'default';
|
|
9132
|
+
}
|
|
9133
9133
|
const validCount = this.passwordRequirements.filter(r => r.isValid).length;
|
|
9134
9134
|
if (validCount <= 2)
|
|
9135
9135
|
return 'weak';
|
|
@@ -9145,7 +9145,7 @@ class GravityPasswordFieldComponent {
|
|
|
9145
9145
|
return `${this.width}-width`;
|
|
9146
9146
|
}
|
|
9147
9147
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityPasswordFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9148
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityPasswordFieldComponent, isStandalone: true, selector: "gravity-password-field", inputs: { cypressTag: "cypressTag", size: "size", customState: "customState", currentLang: "currentLang", width: "width" }, outputs: { textFieldValueResponse: "response" }, usesOnChanges: true, ngImport: i0, template: "<gravity-text-field\n [size]=\"size\"\n [label]=\"label\"\n [width]=\"width\"\n [required]=\"true\"\n [iconLeft]=\"'security'\"\n [clickOnRightIcon]=\"true\"\n [cypressTag]=\"cypressTag\"\n [supportText]=\"supportText\"\n [currentLang]=\"currentLang\"\n [customState]=\"customState\"\n [placeholder]=\"placeholder\"\n [labelExtraText]=\"labelExtraText\"\n [supportTextIcon]=\"supportTextIcon\"\n [iconRight]=\"showPassword ? 'eye-open' : 'eye-closed'\"\n [inputContentType]=\"showPassword ? 'text' : 'password'\"\n\n (onBlur)=\"onBlur()\"\n (onFocus)=\"onFocus()\"\n (response)=\"onValueChange($event)\"\n (clickIconRight)=\"togglePasswordVisibility()\">\n</gravity-text-field>\n\n@if (shouldShowStrengthMeter) {\n <div class=\"strength-meter-container\" [ngClass]=\"[widthClass, size]\">\n <gravity-strength-meter\n [strength]=\"passwordStrength\"\n [label]=\"passwordStrengthLabel\"\n [language]=\"currentLang === 'es' ? 'es' : 'en'\">\n </gravity-strength-meter>\n </div>\n}\n\n@if (passwordRequirements.length > 0 && !allPasswordRequirementsValid) {\n <div class=\"password-requirements\">\n <p class=\"hr-label sm-bold\">{{ requirementsTitle }}</p>\n <div class=\"requirements\">\n @for (requirement of passwordRequirements; track requirement.key) {\n <div class=\"requirement-list-item\">\n <div class=\"requirement-item\">\n @if (!isPasswordEmpty) {\n <gravity-status-indicator\n [size]=\"'sm'\"\n [type]=\"'tertiary'\"\n [icon]=\"requirement.isValid ? 'check' : 'unsuccess'\"\n [status]=\"requirement.isValid ? 'positive' : 'neutro'\">\n </gravity-status-indicator>\n }\n <span class=\"hr-label sm-regular\">{{ requirement.label }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n}", styles: [".strength-meter-container.sm.short-width{width:195px}.strength-meter-container.sm.medium-width{width:276px}.strength-meter-container.sm.full-width,.strength-meter-container.sm.fit-width{width:100%}.strength-meter-container.md.short-width{width:242px}.strength-meter-container.md.medium-width{width:329px}.strength-meter-container.md.full-width,.strength-meter-container.md.fit-width{width:100%}.password-requirements{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs);margin-top:var(--gravity-spacing-md)}.password-requirements .requirements{display:grid;gap:var(--gravity-spacing-xxs)}.password-requirements .requirement-item{height:16px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--gravity-spacing-xxs)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GravityStrengthMeterComponent, selector: "gravity-strength-meter", inputs: ["variant", "strength", "label", "language"] }, { kind: "component", type: GravityStatusIndicatorComponent, selector: "gravity-status-indicator", inputs: ["icon", "text", "cypressTag", "size", "type", "status"] }, { kind: "component", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: ["label", "required", "cypressTag", "supportText", "prefix", "customInputValue", "currentLang", "textFieldType", "customState", "iconLeft", "iconColor", "iconRight", "supportTextIcon", "clickOnLeftIcon", "clickOnRightIcon", "placeholder", "labelExtraText", "size", "autocomplete", "characterCounter", "width", "validations", "passwordRequirements", "inputContentType"], outputs: ["onBlur", "onFocus", "clickIconLeft", "clickIconRight", "response"] }] }); }
|
|
9148
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityPasswordFieldComponent, isStandalone: true, selector: "gravity-password-field", inputs: { cypressTag: "cypressTag", size: "size", customState: "customState", currentLang: "currentLang", width: "width" }, outputs: { textFieldValueResponse: "response" }, usesOnChanges: true, ngImport: i0, template: "<gravity-text-field\n [size]=\"size\"\n [label]=\"label\"\n [width]=\"width\"\n [required]=\"true\"\n [iconLeft]=\"'security'\"\n [clickOnRightIcon]=\"true\"\n [cypressTag]=\"cypressTag\"\n [supportText]=\"supportText\"\n [currentLang]=\"currentLang\"\n [customState]=\"customState\"\n [placeholder]=\"placeholder\"\n [labelExtraText]=\"labelExtraText\"\n [supportTextIcon]=\"supportTextIcon\"\n [iconRight]=\"showPassword ? 'eye-open' : 'eye-closed'\"\n [inputContentType]=\"showPassword ? 'text' : 'password'\"\n\n (onBlur)=\"onBlur()\"\n (onFocus)=\"onFocus()\"\n (response)=\"onValueChange($event)\"\n (clickIconRight)=\"togglePasswordVisibility()\">\n</gravity-text-field>\n\n@if (shouldShowStrengthMeter) {\n <div class=\"strength-meter-container\" [ngClass]=\"[widthClass, size]\">\n <gravity-strength-meter\n [strength]=\"passwordStrength\"\n [label]=\"passwordStrengthLabel\"\n [language]=\"currentLang === 'es' ? 'es' : 'en'\">\n </gravity-strength-meter>\n </div>\n}\n\n@if (passwordRequirements.length > 0 && !allPasswordRequirementsValid) {\n <div class=\"password-requirements\">\n <p class=\"hr-label sm-bold\">{{ requirementsTitle }}</p>\n <div class=\"requirements\">\n @for (requirement of passwordRequirements; track requirement.key) {\n <div class=\"requirement-list-item\">\n <div class=\"requirement-item\">\n @if (!isPasswordEmpty || focusInput) {\n <gravity-status-indicator\n [size]=\"'sm'\"\n [type]=\"'tertiary'\"\n [icon]=\"requirement.isValid ? 'check' : 'unsuccess'\"\n [status]=\"requirement.isValid ? 'positive' : 'neutro'\">\n </gravity-status-indicator>\n }\n <span class=\"hr-label sm-regular\">{{ requirement.label }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n}", styles: [".strength-meter-container.sm.short-width{width:195px}.strength-meter-container.sm.medium-width{width:276px}.strength-meter-container.sm.full-width,.strength-meter-container.sm.fit-width{width:100%}.strength-meter-container.md.short-width{width:242px}.strength-meter-container.md.medium-width{width:329px}.strength-meter-container.md.full-width,.strength-meter-container.md.fit-width{width:100%}.password-requirements{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs);margin-top:var(--gravity-spacing-md)}.password-requirements .requirements{display:grid;gap:var(--gravity-spacing-xxs)}.password-requirements .requirement-item{height:16px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--gravity-spacing-xxs)}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GravityStrengthMeterComponent, selector: "gravity-strength-meter", inputs: ["variant", "strength", "label", "language"] }, { kind: "component", type: GravityStatusIndicatorComponent, selector: "gravity-status-indicator", inputs: ["icon", "text", "cypressTag", "size", "type", "status"] }, { kind: "component", type: GravityTextFieldComponent, selector: "gravity-text-field", inputs: ["label", "required", "cypressTag", "supportText", "prefix", "customInputValue", "currentLang", "textFieldType", "customState", "iconLeft", "iconColor", "iconRight", "supportTextIcon", "clickOnLeftIcon", "clickOnRightIcon", "placeholder", "labelExtraText", "size", "autocomplete", "characterCounter", "width", "validations", "passwordRequirements", "inputContentType"], outputs: ["onBlur", "onFocus", "clickIconLeft", "clickIconRight", "response"] }] }); }
|
|
9149
9149
|
}
|
|
9150
9150
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityPasswordFieldComponent, decorators: [{
|
|
9151
9151
|
type: Component,
|
|
@@ -9154,7 +9154,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
9154
9154
|
GravityStrengthMeterComponent,
|
|
9155
9155
|
GravityStatusIndicatorComponent,
|
|
9156
9156
|
GravityTextFieldComponent
|
|
9157
|
-
], template: "<gravity-text-field\n [size]=\"size\"\n [label]=\"label\"\n [width]=\"width\"\n [required]=\"true\"\n [iconLeft]=\"'security'\"\n [clickOnRightIcon]=\"true\"\n [cypressTag]=\"cypressTag\"\n [supportText]=\"supportText\"\n [currentLang]=\"currentLang\"\n [customState]=\"customState\"\n [placeholder]=\"placeholder\"\n [labelExtraText]=\"labelExtraText\"\n [supportTextIcon]=\"supportTextIcon\"\n [iconRight]=\"showPassword ? 'eye-open' : 'eye-closed'\"\n [inputContentType]=\"showPassword ? 'text' : 'password'\"\n\n (onBlur)=\"onBlur()\"\n (onFocus)=\"onFocus()\"\n (response)=\"onValueChange($event)\"\n (clickIconRight)=\"togglePasswordVisibility()\">\n</gravity-text-field>\n\n@if (shouldShowStrengthMeter) {\n <div class=\"strength-meter-container\" [ngClass]=\"[widthClass, size]\">\n <gravity-strength-meter\n [strength]=\"passwordStrength\"\n [label]=\"passwordStrengthLabel\"\n [language]=\"currentLang === 'es' ? 'es' : 'en'\">\n </gravity-strength-meter>\n </div>\n}\n\n@if (passwordRequirements.length > 0 && !allPasswordRequirementsValid) {\n <div class=\"password-requirements\">\n <p class=\"hr-label sm-bold\">{{ requirementsTitle }}</p>\n <div class=\"requirements\">\n @for (requirement of passwordRequirements; track requirement.key) {\n <div class=\"requirement-list-item\">\n <div class=\"requirement-item\">\n @if (!isPasswordEmpty) {\n <gravity-status-indicator\n [size]=\"'sm'\"\n [type]=\"'tertiary'\"\n [icon]=\"requirement.isValid ? 'check' : 'unsuccess'\"\n [status]=\"requirement.isValid ? 'positive' : 'neutro'\">\n </gravity-status-indicator>\n }\n <span class=\"hr-label sm-regular\">{{ requirement.label }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n}", styles: [".strength-meter-container.sm.short-width{width:195px}.strength-meter-container.sm.medium-width{width:276px}.strength-meter-container.sm.full-width,.strength-meter-container.sm.fit-width{width:100%}.strength-meter-container.md.short-width{width:242px}.strength-meter-container.md.medium-width{width:329px}.strength-meter-container.md.full-width,.strength-meter-container.md.fit-width{width:100%}.password-requirements{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs);margin-top:var(--gravity-spacing-md)}.password-requirements .requirements{display:grid;gap:var(--gravity-spacing-xxs)}.password-requirements .requirement-item{height:16px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--gravity-spacing-xxs)}\n"] }]
|
|
9157
|
+
], template: "<gravity-text-field\n [size]=\"size\"\n [label]=\"label\"\n [width]=\"width\"\n [required]=\"true\"\n [iconLeft]=\"'security'\"\n [clickOnRightIcon]=\"true\"\n [cypressTag]=\"cypressTag\"\n [supportText]=\"supportText\"\n [currentLang]=\"currentLang\"\n [customState]=\"customState\"\n [placeholder]=\"placeholder\"\n [labelExtraText]=\"labelExtraText\"\n [supportTextIcon]=\"supportTextIcon\"\n [iconRight]=\"showPassword ? 'eye-open' : 'eye-closed'\"\n [inputContentType]=\"showPassword ? 'text' : 'password'\"\n\n (onBlur)=\"onBlur()\"\n (onFocus)=\"onFocus()\"\n (response)=\"onValueChange($event)\"\n (clickIconRight)=\"togglePasswordVisibility()\">\n</gravity-text-field>\n\n@if (shouldShowStrengthMeter) {\n <div class=\"strength-meter-container\" [ngClass]=\"[widthClass, size]\">\n <gravity-strength-meter\n [strength]=\"passwordStrength\"\n [label]=\"passwordStrengthLabel\"\n [language]=\"currentLang === 'es' ? 'es' : 'en'\">\n </gravity-strength-meter>\n </div>\n}\n\n@if (passwordRequirements.length > 0 && !allPasswordRequirementsValid) {\n <div class=\"password-requirements\">\n <p class=\"hr-label sm-bold\">{{ requirementsTitle }}</p>\n <div class=\"requirements\">\n @for (requirement of passwordRequirements; track requirement.key) {\n <div class=\"requirement-list-item\">\n <div class=\"requirement-item\">\n @if (!isPasswordEmpty || focusInput) {\n <gravity-status-indicator\n [size]=\"'sm'\"\n [type]=\"'tertiary'\"\n [icon]=\"requirement.isValid ? 'check' : 'unsuccess'\"\n [status]=\"requirement.isValid ? 'positive' : 'neutro'\">\n </gravity-status-indicator>\n }\n <span class=\"hr-label sm-regular\">{{ requirement.label }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n}", styles: [".strength-meter-container.sm.short-width{width:195px}.strength-meter-container.sm.medium-width{width:276px}.strength-meter-container.sm.full-width,.strength-meter-container.sm.fit-width{width:100%}.strength-meter-container.md.short-width{width:242px}.strength-meter-container.md.medium-width{width:329px}.strength-meter-container.md.full-width,.strength-meter-container.md.fit-width{width:100%}.password-requirements{display:flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs);margin-top:var(--gravity-spacing-md)}.password-requirements .requirements{display:grid;gap:var(--gravity-spacing-xxs)}.password-requirements .requirement-item{height:16px;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--gravity-spacing-xxs)}\n"] }]
|
|
9158
9158
|
}], propDecorators: { cypressTag: [{
|
|
9159
9159
|
type: Input
|
|
9160
9160
|
}], size: [{
|