@progressio_resources/gravity-design-system 4.0.41 → 4.0.42
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.
|
@@ -8407,11 +8407,11 @@ class GravityTextFieldAmountOnlyComponent {
|
|
|
8407
8407
|
this.inputValue = value;
|
|
8408
8408
|
}
|
|
8409
8409
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityTextFieldAmountOnlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8410
|
-
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", tooltipText: "tooltipText", 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\"\n [tooltip]=\"(tooltipText && !disabled
|
|
8410
|
+
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", tooltipText: "tooltipText", 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\"\n [tooltip]=\"(tooltipText && !disabled) ? tooltipTemplate : null\" [contentType]=\"'template'\" [placement]=\"'top-left'\"\n [disabled]=\"disabled\" [readonly]=\"readonly\" (input)=\"calculateValues()\"\n [attr.data-cy]=\"'textFieldAmount_input'\" [ngModel]=\"inputValue\" (ngModelChange)=\"onInputValueChange($event)\"\n placeholder=\"{{placeholder}}\" type=\"number\">\n\n <ng-template #tooltipTemplate>\n <gravity-tooltip-container [tooltipSimple]=\"{text: tooltipText}\"/>\n </ng-template>\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"] }, { kind: "component", type: GravityTooltipContainerComponent, selector: "gravity-tooltip-container", inputs: ["cypressTag", "tooltipBanner", "tooltipSimple"], outputs: ["closeBanner", "actionButton"] }, { kind: "directive", type: GravityTooltipDirective, selector: "[tooltip]", inputs: ["options", "tooltip", "placement", "autoPlacement", "content-type", "contentType", "hide-delay-mobile", "hideDelayTouchscreen", "z-index", "zIndex", "animation-duration", "animationDuration", "trigger", "tooltip-class", "tooltipClass", "display", "display-mobile", "displayTouchscreen", "shadow", "theme", "offset", "width", "persistent", "max-width", "maxWidth", "id", "show-delay", "showDelay", "hide-delay", "hideDelay", "hideDelayAfterClick", "pointerEvents", "position"], outputs: ["events"], exportAs: ["tooltip"] }] }); }
|
|
8411
8411
|
}
|
|
8412
8412
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityTextFieldAmountOnlyComponent, decorators: [{
|
|
8413
8413
|
type: Component,
|
|
8414
|
-
args: [{ selector: 'gravity-text-field-amount-only', standalone: true, imports: [GravityIconButtonComponent, FormsModule, GravityCurrencyDropdownShortComponent, GravityTooltipContainerComponent, GravityTooltipDirective], 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\"\n [tooltip]=\"(tooltipText && !disabled
|
|
8414
|
+
args: [{ selector: 'gravity-text-field-amount-only', standalone: true, imports: [GravityIconButtonComponent, FormsModule, GravityCurrencyDropdownShortComponent, GravityTooltipContainerComponent, GravityTooltipDirective], 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\"\n [tooltip]=\"(tooltipText && !disabled) ? tooltipTemplate : null\" [contentType]=\"'template'\" [placement]=\"'top-left'\"\n [disabled]=\"disabled\" [readonly]=\"readonly\" (input)=\"calculateValues()\"\n [attr.data-cy]=\"'textFieldAmount_input'\" [ngModel]=\"inputValue\" (ngModelChange)=\"onInputValueChange($event)\"\n placeholder=\"{{placeholder}}\" type=\"number\">\n\n <ng-template #tooltipTemplate>\n <gravity-tooltip-container [tooltipSimple]=\"{text: tooltipText}\"/>\n </ng-template>\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"] }]
|
|
8415
8415
|
}], propDecorators: { cypressTag: [{
|
|
8416
8416
|
type: Input
|
|
8417
8417
|
}], priority: [{
|