@progressio_resources/gravity-design-system 4.0.20 → 4.0.22
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 +17 -17
- 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: [{
|
|
@@ -8456,11 +8456,11 @@ class GravityTextFieldAmountOnlyComponent {
|
|
|
8456
8456
|
this.inputValue = value;
|
|
8457
8457
|
}
|
|
8458
8458
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityTextFieldAmountOnlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8459
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityTextFieldAmountOnlyComponent, isStandalone: true, selector: "gravity-text-field-amount-only", inputs: { cypressTag: "cypressTag", priority: "priority", placeholder: "placeholder", fiatCurrencies: "fiatCurrencies", fiatCurrenciesSize: "fiatCurrenciesSize", cryptoCurrency: "cryptoCurrency", rate: "rate", rateDirection: "rateDirection", state: "state", width: "width", disabled: "disabled", readonly: "readonly" }, outputs: { swapCurrenciesFlag: "swapCurrenciesFlag", changeFiat: "changeFiat", amountValues: "amountValues" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"amount-only-text-field {{state ? state : null}}\" [class.disabled]=\"disabled\"\n [attr.data-cy]=\"cypressTag ? 'textFieldAmount_'+cypressTag : null\" [class.standard-width]=\"width === 'standard'\"\n [class.full-width]=\"width === 'full'\">\n\n <!--Switch-->\n @if (!readonly) {\n <gravity-icon-button (clickOnIcon)=\"swapCurrencies()\" [icon]=\"'swaps'\"\n [cypressTag]=\"'swapCurrencies'\" [size]=\"'sm'\"\n [supportText]=\"disabled ? null : priority == 'crypto' ? 'Enter the amount in fiat' : 'Enter the amount in crypto'\"\n [type]=\"'primary'\" [state]=\"disabled ? 'disabled' : 'active'\"/>\n }\n\n <div class=\"amounts\" [class.filled]=\"inputValue\" [class.readonly]=\"readonly\">\n\n <!--Enter amount row-->\n <div class=\"enter-amount amount-row\">\n <label class=\"floating-label hr-label sm-regular\">\n {{ placeholder }}\n </label>\n\n <input class=\"hr-label md-regular\" [disabled]=\"disabled\" [readonly]=\"readonly\" (input)=\"calculateValues()\"\n [attr.data-cy]=\"'textFieldAmount_input'\" [ngModel]=\"inputValue\" (ngModelChange)=\"onInputValueChange($event)\"\n placeholder=\"{{placeholder}}\" type=\"number\">\n\n @if (priority == 'fiat') {\n <gravity-currency-dropdown-short [size]=\"fiatCurrenciesSize\" [disabled]=\"disabled\"\n (onClick)=\"updateFiatCurrency($event)\" [cypressTag]=\"'amountFiat'\"\n [config]=\"fiatCurrencies\"/>\n }\n @if (priority == 'crypto') {\n <p class=\"hr-body sm-regular\" [class.gravity-padding-inline-xxs]=\"fiatCurrenciesSize == 'sm'\"\n [class.gravity-padding-inline-sm]=\"fiatCurrenciesSize == 'md'\">{{ cryptoCurrency.currency_iso }}</p>\n }\n </div>\n\n <hr>\n\n <!--Equivalence row-->\n <div class=\"equivalence amount-row\">\n <p class=\"hr-body sm-regular\">\n \u2248 {{ priority == 'crypto' ? valueFiat : valueCrypto }}\n </p>\n\n @if (priority == 'crypto') {\n <gravity-currency-dropdown-short [size]=\"fiatCurrenciesSize\" [readonly]=\"true\" [disabled]=\"disabled\"\n [config]=\"fiatCurrencies\"/>\n }\n @if (priority == 'fiat') {\n <p class=\"hr-body sm-regular\" [class.gravity-padding-inline-xxs]=\"fiatCurrenciesSize == 'sm'\"\n [class.gravity-padding-inline-sm]=\"fiatCurrenciesSize == 'md'\">{{ cryptoCurrency.currency_iso }}</p>\n }\n </div>\n </div>\n </div>", 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}.amount-only-text-field{align-items:center;display:flex;gap:8px;width:fit-content}.amount-only-text-field.standard-width .amounts{width:310px}.amount-only-text-field.full-width,.amount-only-text-field.full-width .amounts{width:100%}.amount-only-text-field.disabled .amounts{pointer-events:none}.amount-only-text-field.disabled .amounts .enter-amount input:disabled{color:var(--on-bg-disabled);cursor:not-allowed;background-color:transparent}.amount-only-text-field.disabled .amounts .enter-amount input:disabled::placeholder{color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts .enter-amount .floating-label{color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts hr{border-top-color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts .enter-amount p,.amount-only-text-field.disabled .amounts .equivalence p{color:var(--on-bg-disabled)}.amount-only-text-field.positive .amounts hr{border-color:var(--positive-primary)}.amount-only-text-field.negative .amounts hr{border-color:var(--negative-primary)}.amount-row{height:30px;align-items:center;display:flex;justify-content:space-between}.amounts{padding:6px;width:100%}.amounts:hover .enter-amount input{color:var(--text-primary)}.amounts:hover .enter-amount input::placeholder{color:var(--text-primary)}.amounts:not(.readonly):focus-within .enter-amount .floating-label{opacity:1;transform:translateY(-12px)}.amounts:not(.readonly):focus-within .enter-amount input::placeholder{opacity:0}.amounts:not(.readonly):focus-within hr{border-color:var(--line-full-enabled-typing-primary)}.amounts .enter-amount{margin-top:12px;position:relative}.amounts .enter-amount .floating-label{position:absolute;top:0;left:0;opacity:0;transform:translateY(10px);pointer-events:none;color:var(--text-primary);transition:all .15s ease}.amounts .enter-amount input{width:100%;border:none;outline:none;color:var(--placeholder-empty-enabled-primary);background:transparent}.amounts .enter-amount input::placeholder{color:var(--placeholder-empty-enabled-primary)}.amounts .enter-amount input[type=number]{-moz-appearance:textfield}.amounts .enter-amount input[type=number]::-webkit-outer-spin-button,.amounts .enter-amount input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.amounts hr{border:none;border-top:1px solid var(--line-empty-enabled-primary);margin:4px 0;opacity:1;transition:border-color .15s ease}.amounts.filled .enter-amount .floating-label{opacity:1;transform:translateY(-12px)}.amounts.filled .enter-amount input{color:var(--text-primary)}.amounts.filled .enter-amount input::placeholder{opacity:0}.amounts.filled hr{border-color:var(--line-full-enabled-typing-primary)}.amounts.readonly{cursor:default}.amounts.readonly .enter-amount input{color:var(--text-primary);cursor:default}.amounts.readonly .enter-amount input::placeholder{color:var(--text-primary)}.amounts.readonly .enter-amount .floating-label{color:var(--text-secondary)}.amounts.readonly hr{border-top-color:var(--line-empty-enabled-readonly)}\n"], dependencies: [{ kind: "component", type: GravityIconButtonComponent, selector: "gravity-icon-button", inputs: ["cypressTag", "icon", "supportText", "variant", "size", "type", "state", "badge"], outputs: ["clickOnIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GravityCurrencyDropdownShortComponent, selector: "gravity-currency-dropdown-short", inputs: ["cypressTag", "size", "readonly", "disabled", "showFlag", "config"], outputs: ["onClick"] }] }); }
|
|
8459
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityTextFieldAmountOnlyComponent, isStandalone: true, selector: "gravity-text-field-amount-only", inputs: { cypressTag: "cypressTag", priority: "priority", placeholder: "placeholder", fiatCurrencies: "fiatCurrencies", fiatCurrenciesSize: "fiatCurrenciesSize", cryptoCurrency: "cryptoCurrency", rate: "rate", rateDirection: "rateDirection", state: "state", width: "width", disabled: "disabled", readonly: "readonly" }, outputs: { swapCurrenciesFlag: "swapCurrenciesFlag", changeFiat: "changeFiat", amountValues: "amountValues" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"amount-only-text-field {{state ? state : null}}\" [class.disabled]=\"disabled\"\n [attr.data-cy]=\"cypressTag ? 'textFieldAmount_'+cypressTag : null\" [class.standard-width]=\"width === 'standard'\"\n [class.full-width]=\"width === 'full'\">\n\n <!--Switch-->\n @if (!readonly) {\n <gravity-icon-button (clickOnIcon)=\"swapCurrencies()\" [icon]=\"'swaps'\"\n [cypressTag]=\"'swapCurrencies'\" [size]=\"'sm'\"\n [supportText]=\"disabled ? null : priority == 'crypto' ? 'Enter the amount in fiat' : 'Enter the amount in crypto'\"\n [type]=\"'primary'\" [state]=\"disabled ? 'disabled' : 'active'\"/>\n }\n\n <div class=\"amounts\" [class.filled]=\"inputValue\" [class.readonly]=\"readonly\">\n\n <!--Enter amount row-->\n <div class=\"enter-amount amount-row\">\n <label class=\"floating-label hr-label sm-regular\">\n {{ placeholder }}\n </label>\n\n <input class=\"hr-label md-regular\" [disabled]=\"disabled\" [readonly]=\"readonly\" (input)=\"calculateValues()\"\n [attr.data-cy]=\"'textFieldAmount_input'\" [ngModel]=\"inputValue\" (ngModelChange)=\"onInputValueChange($event)\"\n placeholder=\"{{placeholder}}\" type=\"number\">\n\n @if (priority == 'fiat') {\n <gravity-currency-dropdown-short [size]=\"fiatCurrenciesSize\" [disabled]=\"disabled\"\n (onClick)=\"updateFiatCurrency($event)\" [cypressTag]=\"'amountFiat'\"\n [config]=\"fiatCurrencies\"/>\n }\n @if (priority == 'crypto') {\n <p class=\"hr-body sm-regular\" [class.gravity-padding-inline-xxs]=\"fiatCurrenciesSize == 'sm'\"\n [class.gravity-padding-inline-sm]=\"fiatCurrenciesSize == 'md'\">{{ cryptoCurrency.currency_iso }}</p>\n }\n </div>\n\n <hr>\n\n <!--Equivalence row-->\n <div class=\"equivalence amount-row\">\n <p class=\"hr-body sm-regular\">\n \u2248 {{ priority == 'crypto' ? valueFiat : valueCrypto }}\n </p>\n\n @if (priority == 'crypto') {\n <gravity-currency-dropdown-short [size]=\"fiatCurrenciesSize\" [readonly]=\"true\" [disabled]=\"disabled\"\n [config]=\"fiatCurrencies\"/>\n }\n @if (priority == 'fiat') {\n <p class=\"hr-body sm-regular\" [class.gravity-padding-inline-xxs]=\"fiatCurrenciesSize == 'sm'\"\n [class.gravity-padding-inline-sm]=\"fiatCurrenciesSize == 'md'\">{{ cryptoCurrency.currency_iso }}</p>\n }\n </div>\n </div>\n </div>", 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}.amount-only-text-field{align-items:center;display:flex;gap:8px;width:fit-content}.enter-amount p:last-child,.equivalence p:last-child{margin-right:2px}.enter-amount ::ng-deep gravity-currency-dropdown-short .header-item,.equivalence ::ng-deep gravity-currency-dropdown-short .header-item{justify-content:flex-end!important}.amount-only-text-field.standard-width .amounts{width:310px}.amount-only-text-field.full-width,.amount-only-text-field.full-width .amounts{width:100%}.amount-only-text-field.disabled .amounts{pointer-events:none}.amount-only-text-field.disabled .amounts .enter-amount input:disabled{color:var(--on-bg-disabled);cursor:not-allowed;background-color:transparent}.amount-only-text-field.disabled .amounts .enter-amount input:disabled::placeholder{color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts .enter-amount .floating-label{color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts hr{border-top-color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts .enter-amount p,.amount-only-text-field.disabled .amounts .equivalence p{color:var(--on-bg-disabled)}.amount-only-text-field.positive .amounts hr{border-color:var(--positive-primary)}.amount-only-text-field.negative .amounts hr{border-color:var(--negative-primary)}.amount-row{height:30px;align-items:center;display:flex;justify-content:space-between}.amounts{padding:6px;width:100%}.amounts:hover .enter-amount input{color:var(--text-primary)}.amounts:hover .enter-amount input::placeholder{color:var(--text-primary)}.amounts:not(.readonly):focus-within .enter-amount .floating-label{opacity:1;transform:translateY(-12px)}.amounts:not(.readonly):focus-within .enter-amount input::placeholder{opacity:0}.amounts:not(.readonly):focus-within hr{border-color:var(--line-full-enabled-typing-primary)}.amounts .enter-amount{margin-top:12px;position:relative}.amounts .enter-amount .floating-label{position:absolute;top:0;left:0;opacity:0;transform:translateY(10px);pointer-events:none;color:var(--text-primary);transition:all .15s ease}.amounts .enter-amount input{width:100%;border:none;outline:none;color:var(--placeholder-empty-enabled-primary);background:transparent}.amounts .enter-amount input::placeholder{color:var(--placeholder-empty-enabled-primary)}.amounts .enter-amount input[type=number]{-moz-appearance:textfield}.amounts .enter-amount input[type=number]::-webkit-outer-spin-button,.amounts .enter-amount input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.amounts hr{border:none;border-top:1px solid var(--line-empty-enabled-primary);margin:4px 0;opacity:1;transition:border-color .15s ease}.amounts.filled .enter-amount .floating-label{opacity:1;transform:translateY(-12px)}.amounts.filled .enter-amount input{color:var(--text-primary)}.amounts.filled .enter-amount input::placeholder{opacity:0}.amounts.filled hr{border-color:var(--line-full-enabled-typing-primary)}.amounts.readonly{cursor:default}.amounts.readonly .enter-amount input{color:var(--text-primary);cursor:default}.amounts.readonly .enter-amount input::placeholder{color:var(--text-primary)}.amounts.readonly .enter-amount .floating-label{color:var(--text-secondary)}.amounts.readonly hr{border-top-color:var(--line-empty-enabled-readonly)}\n"], dependencies: [{ kind: "component", type: GravityIconButtonComponent, selector: "gravity-icon-button", inputs: ["cypressTag", "icon", "supportText", "variant", "size", "type", "state", "badge"], outputs: ["clickOnIcon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GravityCurrencyDropdownShortComponent, selector: "gravity-currency-dropdown-short", inputs: ["cypressTag", "size", "readonly", "disabled", "showFlag", "config"], outputs: ["onClick"] }] }); }
|
|
8460
8460
|
}
|
|
8461
8461
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityTextFieldAmountOnlyComponent, decorators: [{
|
|
8462
8462
|
type: Component,
|
|
8463
|
-
args: [{ selector: 'gravity-text-field-amount-only', standalone: true, imports: [GravityIconButtonComponent, FormsModule, GravityCurrencyDropdownShortComponent], template: "<div class=\"amount-only-text-field {{state ? state : null}}\" [class.disabled]=\"disabled\"\n [attr.data-cy]=\"cypressTag ? 'textFieldAmount_'+cypressTag : null\" [class.standard-width]=\"width === 'standard'\"\n [class.full-width]=\"width === 'full'\">\n\n <!--Switch-->\n @if (!readonly) {\n <gravity-icon-button (clickOnIcon)=\"swapCurrencies()\" [icon]=\"'swaps'\"\n [cypressTag]=\"'swapCurrencies'\" [size]=\"'sm'\"\n [supportText]=\"disabled ? null : priority == 'crypto' ? 'Enter the amount in fiat' : 'Enter the amount in crypto'\"\n [type]=\"'primary'\" [state]=\"disabled ? 'disabled' : 'active'\"/>\n }\n\n <div class=\"amounts\" [class.filled]=\"inputValue\" [class.readonly]=\"readonly\">\n\n <!--Enter amount row-->\n <div class=\"enter-amount amount-row\">\n <label class=\"floating-label hr-label sm-regular\">\n {{ placeholder }}\n </label>\n\n <input class=\"hr-label md-regular\" [disabled]=\"disabled\" [readonly]=\"readonly\" (input)=\"calculateValues()\"\n [attr.data-cy]=\"'textFieldAmount_input'\" [ngModel]=\"inputValue\" (ngModelChange)=\"onInputValueChange($event)\"\n placeholder=\"{{placeholder}}\" type=\"number\">\n\n @if (priority == 'fiat') {\n <gravity-currency-dropdown-short [size]=\"fiatCurrenciesSize\" [disabled]=\"disabled\"\n (onClick)=\"updateFiatCurrency($event)\" [cypressTag]=\"'amountFiat'\"\n [config]=\"fiatCurrencies\"/>\n }\n @if (priority == 'crypto') {\n <p class=\"hr-body sm-regular\" [class.gravity-padding-inline-xxs]=\"fiatCurrenciesSize == 'sm'\"\n [class.gravity-padding-inline-sm]=\"fiatCurrenciesSize == 'md'\">{{ cryptoCurrency.currency_iso }}</p>\n }\n </div>\n\n <hr>\n\n <!--Equivalence row-->\n <div class=\"equivalence amount-row\">\n <p class=\"hr-body sm-regular\">\n \u2248 {{ priority == 'crypto' ? valueFiat : valueCrypto }}\n </p>\n\n @if (priority == 'crypto') {\n <gravity-currency-dropdown-short [size]=\"fiatCurrenciesSize\" [readonly]=\"true\" [disabled]=\"disabled\"\n [config]=\"fiatCurrencies\"/>\n }\n @if (priority == 'fiat') {\n <p class=\"hr-body sm-regular\" [class.gravity-padding-inline-xxs]=\"fiatCurrenciesSize == 'sm'\"\n [class.gravity-padding-inline-sm]=\"fiatCurrenciesSize == 'md'\">{{ cryptoCurrency.currency_iso }}</p>\n }\n </div>\n </div>\n </div>", 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}.amount-only-text-field{align-items:center;display:flex;gap:8px;width:fit-content}.amount-only-text-field.standard-width .amounts{width:310px}.amount-only-text-field.full-width,.amount-only-text-field.full-width .amounts{width:100%}.amount-only-text-field.disabled .amounts{pointer-events:none}.amount-only-text-field.disabled .amounts .enter-amount input:disabled{color:var(--on-bg-disabled);cursor:not-allowed;background-color:transparent}.amount-only-text-field.disabled .amounts .enter-amount input:disabled::placeholder{color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts .enter-amount .floating-label{color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts hr{border-top-color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts .enter-amount p,.amount-only-text-field.disabled .amounts .equivalence p{color:var(--on-bg-disabled)}.amount-only-text-field.positive .amounts hr{border-color:var(--positive-primary)}.amount-only-text-field.negative .amounts hr{border-color:var(--negative-primary)}.amount-row{height:30px;align-items:center;display:flex;justify-content:space-between}.amounts{padding:6px;width:100%}.amounts:hover .enter-amount input{color:var(--text-primary)}.amounts:hover .enter-amount input::placeholder{color:var(--text-primary)}.amounts:not(.readonly):focus-within .enter-amount .floating-label{opacity:1;transform:translateY(-12px)}.amounts:not(.readonly):focus-within .enter-amount input::placeholder{opacity:0}.amounts:not(.readonly):focus-within hr{border-color:var(--line-full-enabled-typing-primary)}.amounts .enter-amount{margin-top:12px;position:relative}.amounts .enter-amount .floating-label{position:absolute;top:0;left:0;opacity:0;transform:translateY(10px);pointer-events:none;color:var(--text-primary);transition:all .15s ease}.amounts .enter-amount input{width:100%;border:none;outline:none;color:var(--placeholder-empty-enabled-primary);background:transparent}.amounts .enter-amount input::placeholder{color:var(--placeholder-empty-enabled-primary)}.amounts .enter-amount input[type=number]{-moz-appearance:textfield}.amounts .enter-amount input[type=number]::-webkit-outer-spin-button,.amounts .enter-amount input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.amounts hr{border:none;border-top:1px solid var(--line-empty-enabled-primary);margin:4px 0;opacity:1;transition:border-color .15s ease}.amounts.filled .enter-amount .floating-label{opacity:1;transform:translateY(-12px)}.amounts.filled .enter-amount input{color:var(--text-primary)}.amounts.filled .enter-amount input::placeholder{opacity:0}.amounts.filled hr{border-color:var(--line-full-enabled-typing-primary)}.amounts.readonly{cursor:default}.amounts.readonly .enter-amount input{color:var(--text-primary);cursor:default}.amounts.readonly .enter-amount input::placeholder{color:var(--text-primary)}.amounts.readonly .enter-amount .floating-label{color:var(--text-secondary)}.amounts.readonly hr{border-top-color:var(--line-empty-enabled-readonly)}\n"] }]
|
|
8463
|
+
args: [{ selector: 'gravity-text-field-amount-only', standalone: true, imports: [GravityIconButtonComponent, FormsModule, GravityCurrencyDropdownShortComponent], template: "<div class=\"amount-only-text-field {{state ? state : null}}\" [class.disabled]=\"disabled\"\n [attr.data-cy]=\"cypressTag ? 'textFieldAmount_'+cypressTag : null\" [class.standard-width]=\"width === 'standard'\"\n [class.full-width]=\"width === 'full'\">\n\n <!--Switch-->\n @if (!readonly) {\n <gravity-icon-button (clickOnIcon)=\"swapCurrencies()\" [icon]=\"'swaps'\"\n [cypressTag]=\"'swapCurrencies'\" [size]=\"'sm'\"\n [supportText]=\"disabled ? null : priority == 'crypto' ? 'Enter the amount in fiat' : 'Enter the amount in crypto'\"\n [type]=\"'primary'\" [state]=\"disabled ? 'disabled' : 'active'\"/>\n }\n\n <div class=\"amounts\" [class.filled]=\"inputValue\" [class.readonly]=\"readonly\">\n\n <!--Enter amount row-->\n <div class=\"enter-amount amount-row\">\n <label class=\"floating-label hr-label sm-regular\">\n {{ placeholder }}\n </label>\n\n <input class=\"hr-label md-regular\" [disabled]=\"disabled\" [readonly]=\"readonly\" (input)=\"calculateValues()\"\n [attr.data-cy]=\"'textFieldAmount_input'\" [ngModel]=\"inputValue\" (ngModelChange)=\"onInputValueChange($event)\"\n placeholder=\"{{placeholder}}\" type=\"number\">\n\n @if (priority == 'fiat') {\n <gravity-currency-dropdown-short [size]=\"fiatCurrenciesSize\" [disabled]=\"disabled\"\n (onClick)=\"updateFiatCurrency($event)\" [cypressTag]=\"'amountFiat'\"\n [config]=\"fiatCurrencies\"/>\n }\n @if (priority == 'crypto') {\n <p class=\"hr-body sm-regular\" [class.gravity-padding-inline-xxs]=\"fiatCurrenciesSize == 'sm'\"\n [class.gravity-padding-inline-sm]=\"fiatCurrenciesSize == 'md'\">{{ cryptoCurrency.currency_iso }}</p>\n }\n </div>\n\n <hr>\n\n <!--Equivalence row-->\n <div class=\"equivalence amount-row\">\n <p class=\"hr-body sm-regular\">\n \u2248 {{ priority == 'crypto' ? valueFiat : valueCrypto }}\n </p>\n\n @if (priority == 'crypto') {\n <gravity-currency-dropdown-short [size]=\"fiatCurrenciesSize\" [readonly]=\"true\" [disabled]=\"disabled\"\n [config]=\"fiatCurrencies\"/>\n }\n @if (priority == 'fiat') {\n <p class=\"hr-body sm-regular\" [class.gravity-padding-inline-xxs]=\"fiatCurrenciesSize == 'sm'\"\n [class.gravity-padding-inline-sm]=\"fiatCurrenciesSize == 'md'\">{{ cryptoCurrency.currency_iso }}</p>\n }\n </div>\n </div>\n </div>", 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}.amount-only-text-field{align-items:center;display:flex;gap:8px;width:fit-content}.enter-amount p:last-child,.equivalence p:last-child{margin-right:2px}.enter-amount ::ng-deep gravity-currency-dropdown-short .header-item,.equivalence ::ng-deep gravity-currency-dropdown-short .header-item{justify-content:flex-end!important}.amount-only-text-field.standard-width .amounts{width:310px}.amount-only-text-field.full-width,.amount-only-text-field.full-width .amounts{width:100%}.amount-only-text-field.disabled .amounts{pointer-events:none}.amount-only-text-field.disabled .amounts .enter-amount input:disabled{color:var(--on-bg-disabled);cursor:not-allowed;background-color:transparent}.amount-only-text-field.disabled .amounts .enter-amount input:disabled::placeholder{color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts .enter-amount .floating-label{color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts hr{border-top-color:var(--on-bg-disabled)}.amount-only-text-field.disabled .amounts .enter-amount p,.amount-only-text-field.disabled .amounts .equivalence p{color:var(--on-bg-disabled)}.amount-only-text-field.positive .amounts hr{border-color:var(--positive-primary)}.amount-only-text-field.negative .amounts hr{border-color:var(--negative-primary)}.amount-row{height:30px;align-items:center;display:flex;justify-content:space-between}.amounts{padding:6px;width:100%}.amounts:hover .enter-amount input{color:var(--text-primary)}.amounts:hover .enter-amount input::placeholder{color:var(--text-primary)}.amounts:not(.readonly):focus-within .enter-amount .floating-label{opacity:1;transform:translateY(-12px)}.amounts:not(.readonly):focus-within .enter-amount input::placeholder{opacity:0}.amounts:not(.readonly):focus-within hr{border-color:var(--line-full-enabled-typing-primary)}.amounts .enter-amount{margin-top:12px;position:relative}.amounts .enter-amount .floating-label{position:absolute;top:0;left:0;opacity:0;transform:translateY(10px);pointer-events:none;color:var(--text-primary);transition:all .15s ease}.amounts .enter-amount input{width:100%;border:none;outline:none;color:var(--placeholder-empty-enabled-primary);background:transparent}.amounts .enter-amount input::placeholder{color:var(--placeholder-empty-enabled-primary)}.amounts .enter-amount input[type=number]{-moz-appearance:textfield}.amounts .enter-amount input[type=number]::-webkit-outer-spin-button,.amounts .enter-amount input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.amounts hr{border:none;border-top:1px solid var(--line-empty-enabled-primary);margin:4px 0;opacity:1;transition:border-color .15s ease}.amounts.filled .enter-amount .floating-label{opacity:1;transform:translateY(-12px)}.amounts.filled .enter-amount input{color:var(--text-primary)}.amounts.filled .enter-amount input::placeholder{opacity:0}.amounts.filled hr{border-color:var(--line-full-enabled-typing-primary)}.amounts.readonly{cursor:default}.amounts.readonly .enter-amount input{color:var(--text-primary);cursor:default}.amounts.readonly .enter-amount input::placeholder{color:var(--text-primary)}.amounts.readonly .enter-amount .floating-label{color:var(--text-secondary)}.amounts.readonly hr{border-top-color:var(--line-empty-enabled-readonly)}\n"] }]
|
|
8464
8464
|
}], propDecorators: { cypressTag: [{
|
|
8465
8465
|
type: Input
|
|
8466
8466
|
}], priority: [{
|
|
@@ -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: [{
|