@progressio_resources/gravity-design-system 4.0.45 → 4.1.1
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.
|
@@ -1,17 +1,16 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, Component, EventEmitter, Output, Pipe,
|
|
2
|
+
import { Injectable, signal, Input, Component, EventEmitter, Output, Pipe, HostListener, ViewChild, InjectionToken, Optional, Inject, Directive, NgModule, HostBinding, ChangeDetectionStrategy, ViewChildren } from '@angular/core';
|
|
3
3
|
import { NgClass, NgTemplateOutlet, CommonModule, AsyncPipe, DatePipe, NgComponentOutlet, NgOptimizedImage, NgStyle } from '@angular/common';
|
|
4
|
-
import * as i1$
|
|
4
|
+
import * as i1$2 from '@angular/forms';
|
|
5
5
|
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
|
|
6
|
-
import * as i1 from 'angular-svg-icon';
|
|
6
|
+
import * as i1$1 from 'angular-svg-icon';
|
|
7
7
|
import { SvgIconComponent, AngularSvgIconModule } from 'angular-svg-icon';
|
|
8
|
-
import
|
|
8
|
+
import { map, shareReplay, Subject, Subscription, combineLatest, BehaviorSubject, timer } from 'rxjs';
|
|
9
|
+
import * as i1 from '@angular/common/http';
|
|
10
|
+
import * as i1$3 from '@ng-bootstrap/ng-bootstrap';
|
|
9
11
|
import { NgbProgressbar, NgbToast, NgbDatepickerModule, NgbOffcanvasModule, NgbProgressbarModule, NgbToastModule } from '@ng-bootstrap/ng-bootstrap';
|
|
10
12
|
import { RouterLink } from '@angular/router';
|
|
11
|
-
import {
|
|
12
|
-
import * as i2$1 from 'angular-svg-icon-preloader';
|
|
13
|
-
import { AngularSvgIconPreloaderModule } from 'angular-svg-icon-preloader';
|
|
14
|
-
import { filter, map, take, takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
|
13
|
+
import { filter, map as map$1, take, takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
|
|
15
14
|
import { isFirstDayOfWeek, getDay, shiftDate, isBefore, endOf, isAfter, startOf, getFirstDayOfMonth, formatDate, isSameMonth, isSameDay, isSameYear, isDateValid, isArray, setFullDate, getLocale, isSame, getFullYear, getMonth } from 'ngx-bootstrap/chronos';
|
|
16
15
|
import { trigger, state, style, transition, animate } from '@angular/animations';
|
|
17
16
|
import { MiniStore, MiniState } from 'ngx-bootstrap/mini-ngrx';
|
|
@@ -19,9 +18,38 @@ import * as i7 from 'ngx-bootstrap/positioning';
|
|
|
19
18
|
import * as i2 from 'ngx-bootstrap/component-loader';
|
|
20
19
|
import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
|
|
21
20
|
|
|
21
|
+
class GravityIconCatalogService {
|
|
22
|
+
constructor(http) {
|
|
23
|
+
this.http = http;
|
|
24
|
+
this.catalogUrl = './assets/gravity/json/icons.json';
|
|
25
|
+
this.catalog$ = null;
|
|
26
|
+
}
|
|
27
|
+
getCatalog() {
|
|
28
|
+
if (!this.catalog$) {
|
|
29
|
+
this.catalog$ = this.http.get(this.catalogUrl).pipe(map(json => {
|
|
30
|
+
const map = new Map();
|
|
31
|
+
for (const entry of json.iconImageFiles) {
|
|
32
|
+
map.set(entry.iconName, entry.iconPath);
|
|
33
|
+
}
|
|
34
|
+
return map;
|
|
35
|
+
}), shareReplay(1) // cache: solo se pide una vez, sin importar cuántos íconos se rendericen
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
return this.catalog$;
|
|
39
|
+
}
|
|
40
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityIconCatalogService, deps: [{ token: i1.HttpClient }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
41
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityIconCatalogService, providedIn: 'root' }); }
|
|
42
|
+
}
|
|
43
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityIconCatalogService, decorators: [{
|
|
44
|
+
type: Injectable,
|
|
45
|
+
args: [{ providedIn: 'root' }]
|
|
46
|
+
}], ctorParameters: () => [{ type: i1.HttpClient }] });
|
|
47
|
+
|
|
22
48
|
class GravityIconComponent {
|
|
23
|
-
constructor(iconRegistry) {
|
|
49
|
+
constructor(iconRegistry, iconCatalog) {
|
|
24
50
|
this.iconRegistry = iconRegistry;
|
|
51
|
+
this.iconCatalog = iconCatalog;
|
|
52
|
+
this.iconExists = signal(false, ...(ngDevMode ? [{ debugName: "iconExists" }] : []));
|
|
25
53
|
}
|
|
26
54
|
static isOldIcon(iconName) {
|
|
27
55
|
return OLD_ICONS[iconName] != undefined;
|
|
@@ -29,13 +57,30 @@ class GravityIconComponent {
|
|
|
29
57
|
static isNewIcon(iconName) {
|
|
30
58
|
return ICONS[iconName] != undefined;
|
|
31
59
|
}
|
|
32
|
-
|
|
60
|
+
ngOnChanges() {
|
|
61
|
+
this.loadIconOnDemand();
|
|
62
|
+
}
|
|
63
|
+
get fullIconName() {
|
|
64
|
+
return this.getFullIconName();
|
|
65
|
+
}
|
|
66
|
+
loadIconOnDemand() {
|
|
33
67
|
const fullIconName = this.getFullIconName();
|
|
34
68
|
const iconsMap = this.iconRegistry.iconsByUrl;
|
|
35
|
-
if (iconsMap && iconsMap
|
|
36
|
-
|
|
69
|
+
if (iconsMap instanceof Map && iconsMap.has(fullIconName)) {
|
|
70
|
+
this.iconExists.set(true);
|
|
71
|
+
return;
|
|
37
72
|
}
|
|
38
|
-
|
|
73
|
+
this.iconCatalog.getCatalog().subscribe(catalog => {
|
|
74
|
+
const path = catalog.get(fullIconName);
|
|
75
|
+
if (!path) {
|
|
76
|
+
this.iconExists.set(false);
|
|
77
|
+
return;
|
|
78
|
+
}
|
|
79
|
+
this.iconRegistry.loadSvg(path, fullIconName).subscribe({
|
|
80
|
+
next: () => this.iconExists.set(true),
|
|
81
|
+
error: () => this.iconExists.set(false)
|
|
82
|
+
});
|
|
83
|
+
});
|
|
39
84
|
}
|
|
40
85
|
getFullIconName() {
|
|
41
86
|
if (this.isCoin) {
|
|
@@ -46,13 +91,13 @@ class GravityIconComponent {
|
|
|
46
91
|
}
|
|
47
92
|
return this.iconName;
|
|
48
93
|
}
|
|
49
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityIconComponent, deps: [{ token: i1.SvgIconRegistryService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
50
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityIconComponent, isStandalone: true, selector: "gravity-icon", inputs: { customIconColorVariable: "customIconColorVariable", iconName: "iconName", iconSize: "iconSize", hoverIcon: "hoverIcon", size: "size", isCoin: "isCoin" }, ngImport: i0, template: "@if (iconExists) {\n <svg-icon
|
|
94
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityIconComponent, deps: [{ token: i1$1.SvgIconRegistryService }, { token: GravityIconCatalogService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
95
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityIconComponent, isStandalone: true, selector: "gravity-icon", inputs: { customIconColorVariable: "customIconColorVariable", iconName: "iconName", iconSize: "iconSize", hoverIcon: "hoverIcon", size: "size", isCoin: "isCoin" }, usesOnChanges: true, ngImport: i0, template: "@if (iconExists()) {\n <svg-icon\n [attr.data-cy]=\"'icon_' + iconName\"\n [class.with-hover]=\"hoverIcon\"\n class=\"{{size}} {{iconSize}}\"\n [style.--icon-color]=\"customIconColorVariable\"\n [name]=\"fullIconName\">\n </svg-icon>\n}", styles: [":host{--icon-color: var(--icon-active-primary);display:block;height:var(--icon-height);min-height:var(--icon-height);min-width:var(--icon-width);width:var(--icon-width)}:host:hover svg-icon.with-hover{--icon-color: var(--icon-hover-primary)}:host:has(.sm){--icon-height: 1rem;--icon-width: 1rem}:host:has(.md){--icon-height: 1.5rem;--icon-width: 1.5rem}:host:has(.lg){--icon-height: 2rem;--icon-width: 2rem}:host:has(.sm-12){--icon-height: 12px;--icon-width: 12px}:host:has(.md-16){--icon-height: 16px;--icon-width: 16px}:host:has(.lg-24){--icon-height: 24px;--icon-width: 24px}:host:has(.xl-32){--icon-height: 32px;--icon-width: 32px}svg-icon{pointer-events:none}svg-icon ::ng-deep svg{display:block;height:100%;line-height:0;width:100%}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }] }); }
|
|
51
96
|
}
|
|
52
97
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityIconComponent, decorators: [{
|
|
53
98
|
type: Component,
|
|
54
|
-
args: [{ selector: 'gravity-icon', standalone: true, imports: [SvgIconComponent], template: "@if (iconExists) {\n <svg-icon
|
|
55
|
-
}], ctorParameters: () => [{ type: i1.SvgIconRegistryService }], propDecorators: { customIconColorVariable: [{
|
|
99
|
+
args: [{ selector: 'gravity-icon', standalone: true, imports: [SvgIconComponent], template: "@if (iconExists()) {\n <svg-icon\n [attr.data-cy]=\"'icon_' + iconName\"\n [class.with-hover]=\"hoverIcon\"\n class=\"{{size}} {{iconSize}}\"\n [style.--icon-color]=\"customIconColorVariable\"\n [name]=\"fullIconName\">\n </svg-icon>\n}", styles: [":host{--icon-color: var(--icon-active-primary);display:block;height:var(--icon-height);min-height:var(--icon-height);min-width:var(--icon-width);width:var(--icon-width)}:host:hover svg-icon.with-hover{--icon-color: var(--icon-hover-primary)}:host:has(.sm){--icon-height: 1rem;--icon-width: 1rem}:host:has(.md){--icon-height: 1.5rem;--icon-width: 1.5rem}:host:has(.lg){--icon-height: 2rem;--icon-width: 2rem}:host:has(.sm-12){--icon-height: 12px;--icon-width: 12px}:host:has(.md-16){--icon-height: 16px;--icon-width: 16px}:host:has(.lg-24){--icon-height: 24px;--icon-width: 24px}:host:has(.xl-32){--icon-height: 32px;--icon-width: 32px}svg-icon{pointer-events:none}svg-icon ::ng-deep svg{display:block;height:100%;line-height:0;width:100%}\n"] }]
|
|
100
|
+
}], ctorParameters: () => [{ type: i1$1.SvgIconRegistryService }, { type: GravityIconCatalogService }], propDecorators: { customIconColorVariable: [{
|
|
56
101
|
type: Input
|
|
57
102
|
}], iconName: [{
|
|
58
103
|
type: Input
|
|
@@ -947,7 +992,7 @@ class GravityDropdownListComponent {
|
|
|
947
992
|
scrollToSelected() { this.containerRef?.nativeElement.querySelector('.item.selected')?.scrollIntoView({ behavior: 'smooth', block: 'nearest' }); }
|
|
948
993
|
isIconLeftNew() { return this.iconLeft ? GravityIconComponent.isNewIcon(this.iconLeft) : false; }
|
|
949
994
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityDropdownListComponent, deps: [{ token: GravityDropdownManagerService }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
950
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityDropdownListComponent, isStandalone: true, selector: "gravity-dropdown-list", inputs: { label: "label", iconLeft: "iconLeft", customValues: "customValues", cypressTag: "cypressTag", placeholder: "placeholder", supportText: "supportText", items: "items", hasError: "hasError", clearable: "clearable", multiple: "multiple", required: "required", isDisabled: "isDisabled", isReadonly: "isReadonly", currentLang: "currentLang", config: "config", labelSize: "labelSize", size: "size", inputType: "inputType", width: "width", type: "type", dropdownState: "dropdownState" }, outputs: { dropdownStateChange: "dropdownStateChange", selectedItemsResponse: "response" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [FilterByPipe], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "watch", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (inputType === 'field' && label) {\n <label class=\"hr-label sm-bold {{getStatus()}}\"> {{ label }}\n @if (required || hasError) { <span>*</span> }\n </label>\n}\n\n<div #inputField class=\"gravity-input-field {{inputType}}-{{labelSize}} {{size}} {{width}}-width {{getStatus()}}\"\n [attr.data-cy]=\"cypressTag ? 'dropdown_'+cypressTag : null\" (click)=\"toggleDropdown();\">\n\n @switch (inputType) {\n @case ('field') {\n @if ((iconLeft && !dropdownOpened) || (iconLeft && !items?.length)) {\n <gravity-icon class=\"left\" [iconName]=\"iconLeft\" [iconSize]=\"isIconLeftNew() ? 'md-16' : null\"/>\n }\n\n @if (dropdownOpened && items?.length) {\n <gravity-icon class=\"search-icon\" [iconName]=\"'search'\" [iconSize]=\"'sm-12'\"/>\n }\n\n @if (!dropdownOpened && networkConfig) {\n <div class=\"network-pill\">\n <span class=\"hr-label {{size}}-regular\">{{ networkConfig.label }}</span>\n <gravity-network-pill [disabled]=\"isDisabled\" [network]=\"{iso: networkConfig.iso, id: networkConfig.id}\"/>\n </div>\n } @else if (!dropdownOpened && currencyConfig) {\n <div class=\"network-pill\">\n <span class=\"hr-label {{size}}-regular\">{{ currencyConfig.iso }}</span>\n <gravity-network-pill [disabled]=\"isDisabled\" [network]=\"{iso: currencyConfig.networkIso, id: currencyConfig.networkId}\"/>\n </div>\n } @else {\n @if (type == 'regular' || selectedItems.length < 1 || dropdownOpened) {\n <input #searchInput autocomplete=\"off\" class=\"hr-label {{size}}-regular {{getStatus()}}\"\n (ngModelChange)=\"searchText = $event\"\n [attr.data-cy]=\"'dropdown_searchInput'\"\n (input)=\"filterItems(); dropdownOpened = true\"\n (keydown)=\"preventTypingWhenLocked($event, searchInput)\"\n (focus)=\"searchText = ''\" [class.locked]=\"!dropdownOpened || !items?.length\"\n [ngModel]=\"(dropdownOpened && items?.length) ? searchText : inputDisplayValue()\"\n [placeholder]=\"(dropdownOpened && items?.length) ? uiTexts.SEARCH : (placeholder || label)\">\n }\n\n @if (type === 'currency' && !dropdownOpened && selectedItems.length > 0) {\n <div class=\"network-pill-list\">\n @for (currency of currencyDisplay.items; track currency; let last = $last) {\n <span class=\"hr-label sm-regular\">{{ currency.iso }}</span>\n @if (currency.network?.code) {\n <gravity-network-pill [disabled]=\"isDisabled\" [network]=\"{iso: currency.network.code, id: currency.network.id}\"/>\n }\n @if (!last) { <span class=\"hr-label sm-regular\">,</span> }\n }\n @if (currencyDisplay.hasMore) { <span class=\"hr-label sm-regular\">...</span> }\n </div>\n }\n\n\n @if (type === 'network' && !dropdownOpened && selectedItems.length > 0) {\n <div class=\"network-pill-list\">\n @for (network of networkPillsDisplay.items; track network; let last = $last) {\n <gravity-network-pill [disabled]=\"isDisabled\" [network]=\"{iso: network.iso, id: network.id}\"/>\n @if (!last) { <span class=\"hr-label sm-regular\">,</span> }\n }\n @if (networkPillsDisplay.hasMore) { <span class=\"hr-label sm-regular\">...</span> }\n </div>\n }\n }\n\n @if (!isReadonly && searchText.length == 0) {\n <gravity-icon class=\"right\" [iconName]=\"dropdownOpened ? 'arrow-up': 'arrow-down'\" [iconSize]=\"'md-16'\"/>\n }\n\n @if (dropdownOpened && searchText.length > 0) {\n <gravity-icon class=\"right\" [iconName]=\"'unsuccess'\" (click)=\"clearSearch()\" [iconSize]=\"'md-16'\"/>\n }\n }\n\n @case ('label') {\n <gravity-dropdown-label (onClickLabel)=\"toggleDropdown()\" [label]=\"getLabelText()\" [size]=\"labelSize\" [isOpen]=\"dropdownOpened\"/>\n }\n }\n\n @if (items?.length && dropdownOpened) {\n <div class=\"dropdown-panel {{getStatus()}}\" (click)=\"$event.stopPropagation()\" [attr.data-cy]=\"'dropdown_panel'\">\n @if (inputType === 'label') {\n <div class=\"search-input\">\n <gravity-icon class=\"search-icon\" [iconName]=\"'search'\" [iconSize]=\"'sm-12'\"/>\n <input #searchInput autocomplete=\"off\" class=\"hr-label {{size}}-regular\"\n [attr.data-cy]=\"'dropdown_searchInput'\" [placeholder]=\"uiTexts.SEARCH\" [ngModel]=\"searchText\"\n (ngModelChange)=\"onSearchTextChange($event)\" (input)=\"filterItems()\">\n\n @if (searchText?.length > 0) {\n <gravity-icon class=\"pointer reset-icon\" (click)=\"searchText = ''; filterItems()\" [iconName]=\"'unsuccess'\" [iconSize]=\"'sm-12'\"/>\n }\n </div>\n }\n\n @if (multiple && availableOptions.length != 0) {\n <div class=\"select-all\">\n <gravity-checkbox [ngClass]=\"getSpacingClass(size)\" (click)=\"selectAllItems($event)\" [checked]=\"checkIfSelected()\"/>\n <p class=\"hr-label {{size}}-regular\"> {{ uiTexts.SELECT_ALL }} </p>\n </div>\n }\n\n <div class=\"items-container\" #containerRef>\n <div class=\"items\" [class.has-overflow]=\"availableOptions.length > 5\">\n @for (item of availableOptions; track item) {\n <div class=\"item-container\" [attr.data-cy]=\"type === 'currency' ? 'dropdown_currencyId' + item.currency_id : 'dropdown_option' + getDisplayValue(item, config)\">\n <div class=\"hr-label item {{size}}-regular pointer\"\n [class.selected]=\"checkIfSelected(item)\" [class.partial]=\"isPartiallySelected(item)\"\n (click)=\"item.children?.length ? (multiple ? selectItem(item) : toggleChildren(item, $event)) : selectItem(item)\">\n\n @if (multiple) {\n <gravity-checkbox [ngClass]=\"getSpacingClass(size)\" [isPartial]=\"isPartiallySelected(item)\" [checked]=\"checkIfSelected(item)\"/>\n }\n\n @switch (type) {\n @case ('network') { <gravity-network-pill [network]=\"{ iso: item.iso, id: item.id }\"/> }\n @case ('currency') {\n <gravity-currency-display-v2 [ngClass]=\"getSpacingClass(size)\" [type]=\"item.type === 'FIAT' ? 'fiat-short' : 'short-hrz'\"\n [currency]=\"{ currency_name: item.name, currency_id: item.currency_id, currency_iso: item.iso, network_id: item.network?.id,\n network_iso: item.network?.code, pill_type: checkIfSelected(item) ? 'secondary' : 'primary'}\"/>\n }\n @default { <div [ngClass]=\"getSpacingClass(size)\"> {{ getDisplayValue(item, config) }} </div> }\n }\n\n @if (item.children?.length) {\n <gravity-icon style=\"margin-left: auto\" (click)=\"toggleChildren(item, $event)\"\n [iconName]=\"isChildrenOpen(item) ? 'arrow-up' : 'arrow-down'\" [iconSize]=\"'md-16'\"/>\n }\n </div>\n\n @if (item.children?.length && isChildrenOpen(item)) {\n <div class=\"item-children\">\n @for (child of item.children; track child) {\n <div class=\"hr-label item {{size}}-regular pointer\" [ngClass]=\"{'multiple' : multiple}\"\n [class.selected]=\"checkIfSelected(child)\" (click)=\"selectItem(child)\">\n\n @if (multiple) {\n <gravity-checkbox [ngClass]=\"getMultilevelSpacingClass(size)\" [checked]=\"checkIfSelected(child)\"/>\n }\n\n @if (type === 'currency') {\n <gravity-currency [ngClass]=\"getSpacingClass(size)\" [size]=\"getCurrencyIconSize(size)\" [currency]=\"{currency_iso: child.currency_iso}\"/>\n }\n\n <div [ngClass]=\"getSpacingClass(size)\">{{ getDisplayValue(child, config) }}</div>\n\n @if (type === 'currency') {\n <gravity-network-pill [type]=\"checkIfSelected(child) ? 'secondary' : 'primary'\" [network]=\"{ iso: child.network?.code, id: child.network?.id }\"/>\n }\n </div>\n }\n </div>\n }\n </div>\n } @empty {\n <div class=\"item-container\">\n <div class=\"hr-label item {{size}}-bold no-results\"> {{ uiTexts.NO_RESULTS }} </div>\n </div>\n }\n </div>\n </div>\n\n @if (hasFooterContent) {\n <div class=\"dropdown-footer\" [class.not-clearable]=\"!clearable\" [class.no-results]=\"availableOptions.length === 0\">\n @if (availableOptions.length !== 0) {\n @if (clearable && selectedItems.length > 0) {\n <gravity-link (click)=\"clearSelection()\" [fontClass]=\"'hr-label sm-regular'\" [attr.data-cy]=\"'dropdown_clear'\" [linkText]=\"uiTexts.CLEAR_SELECTION\"/>\n }\n @if (multiple) {\n <gravity-link [fontClass]=\"'hr-label sm-bold'\" [attr.data-cy]=\"'dropdown_apply'\" (click)=\"$event.stopPropagation(); toggleDropdown()\" [linkText]=\"uiTexts.APPLY\"/>\n }\n } @else if (clearable) {\n <gravity-link (click)=\"clearSearch()\" [fontClass]=\"'hr-label sm-regular'\" [attr.data-cy]=\"'dropdown_clearSearch'\" [linkText]=\"uiTexts.CLEAR_SEARCH\"/>\n }\n </div>\n }\n </div>\n }\n\n @if (!items?.length && dropdownOpened) {\n <section class=\"external-content\" (click)=\"$event.stopPropagation()\"> <ng-content></ng-content> </section>\n }\n</div>\n\n@if (inputType === 'field' && supportText) {\n <p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\"> {{ supportText }} </p>\n}", styles: [".scrollbar-sm::-webkit-scrollbar,.dropdown-panel .items-container::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track,.dropdown-panel .items-container::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb,.dropdown-panel .items-container::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover,.dropdown-panel .items-container::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}:root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.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}:host{display:block}label{color:var(--text-field-label-color);display:block;margin:0 12px 5px}label.active,label.hover{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.open{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.selected,label.error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.error span{color:var(--negative-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.gravity-input-field{display:flex;cursor:pointer;padding:10px 12px;position:relative;align-items:center;width:var(--text-field-input-field-width);height:var(--text-field-input-field-height);--text-field-input-field-border-width: .5px;border-radius:.3125rem;color:var(--text-field-input-field-content-color);background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color)}.gravity-input-field gravity-icon{--icon-width: var(--text-field-input-field-content);--icon-height: var(--text-field-input-field-content);--icon-color: var(--text-field-input-field-icon-color)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.left,.gravity-input-field gravity-icon.search-icon{margin-right:var(--icon-margin)}.gravity-input-field gravity-icon.right{margin-left:var(--icon-margin)}.gravity-input-field p.value{width:100%;margin-left:0;overflow:hidden;white-space:nowrap;line-height:normal;text-overflow:ellipsis;height:var(--text-field-input-field-input);color:var(--text-field-input-field-content-color)}.gravity-input-field input{margin:0;padding:0;width:100%;border:none;outline:none;cursor:pointer;border-radius:0;background-color:transparent;color:var(--text-field-label-color)}.gravity-input-field input::placeholder{color:var(--placeholder-empty-enabled-primary)}.gravity-input-field input.active,.gravity-input-field input.hover{--text-field-label-color: var(--label-text-empty-enabled-primary)}.gravity-input-field input.open{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-input-field input.selected{--text-field-label-color: var(--label-text-full-enabled-primary)}.gravity-input-field input.disabled{--text-field-label-color: var(--on-bg-disabled)}.gravity-input-field input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.gravity-input-field input.locked{caret-color:transparent!important}.gravity-input-field .network-pill-list{width:100%;display:flex;overflow:hidden;align-items:flex-end;gap:var(--gravity-spacing-xxs)}.gravity-input-field .network-pill{width:100%;display:flex;align-items:center;gap:var(--gravity-spacing-xxs)}.gravity-input-field .network-pill gravity-network-pill{margin-top:1px}.gravity-input-field.sm{--icon-margin: 5px;--dropdown-top-margin: 5px;--span-checkmark-margin: 5px;--span-checkmark-width: 14px;--span-checkmark-height: 14px;--text-field-input-field-input: 13px;--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--dropdown-items-gap: .5rem;--dropdown-item-multiple-children-padding: .25rem;--dropdown-item-padding: .5rem .25rem;--dropdown-select-all-padding: .75rem ;--dropdown-item-children-padding: .5rem 4px .5rem 28px}.gravity-input-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-input-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-input-field.sm.full-width,.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--icon-margin: 8px;--dropdown-items-gap: 12px;--dropdown-top-margin: 8px;--span-checkmark-margin: 8px;--span-checkmark-width: 16px;--span-checkmark-height: 16px;--text-field-input-field-input: 18px;--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--dropdown-item-padding: .5rem;--dropdown-item-multiple-children-padding: .5rem;--dropdown-select-all-padding: 1rem ;--dropdown-item-children-padding: .5rem .5rem .5rem 40px}.gravity-input-field.md.short-width{--text-field-input-field-width: 242px}.gravity-input-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-input-field.md.full-width,.gravity-input-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.active{--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.open{--text-field-input-field-border-width: 1px;--text-field-input-field-icon-color: var(--icon-active-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary)}.gravity-input-field.selected{--text-field-input-field-icon-color: var(--icon-active-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.selected:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.error{--text-field-input-field-border-color: var(--negative-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary)}.gravity-input-field.error:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{cursor:initial;--text-field-input-field-icon-color: var(--on-bg-disabled);--text-field-input-field-background-color: var(--bg-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-border-color: var(--outline-disabled)}.gravity-input-field.disabled input{cursor:initial}.gravity-input-field.readonly{cursor:initial;--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary);--text-field-input-field-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-background-color: var(--bg-field-full-read-only-primary)}.gravity-input-field.readonly input{cursor:initial}.dropdown-panel{left:-1px;cursor:initial;position:absolute;z-index:5;top:calc(100% + var(--dropdown-top-margin));border-radius:.3125rem;width:calc(var(--text-field-input-field-width) + 2px);background-color:var(--bg-field-full-enabled-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary)}.dropdown-panel .search-input{display:flex;padding:12px;align-items:center;border-bottom:1px solid var(--outline-field-full-enabled-pressed-primary)}.dropdown-panel .search-input gravity-icon.search-icon{margin-right:.5rem}.dropdown-panel .search-input gravity-icon.reset-icon{margin-left:.5rem}.dropdown-panel .search-input input{margin:0;padding:0;width:100%;border:none;outline:none;border-radius:0;background-color:transparent;color:var(--input-text-full-enabled-primary)}.dropdown-panel .search-input input::placeholder{color:var(--placeholder-empty-enabled-primary)}.dropdown-panel .select-all{display:flex;align-items:center;padding:12px var(--dropdown-select-all-padding);border-bottom:1px solid var(--outline-field-full-enabled-pressed-primary)}.dropdown-panel .select-all p{cursor:pointer;text-decoration:underline;color:var(--on-bg-button-active-secondary)}.dropdown-panel .select-all gravity-checkbox ::ng-deep .gravity-checkbox-field span.checkmark{width:var(--span-checkmark-width);height:var(--span-checkmark-height);min-width:var(--span-checkmark-width);min-height:var(--span-checkmark-height)}.dropdown-panel .items-container{margin:4px;overflow:auto;position:relative;z-index:5;padding:var(--gravity-spacing-xxs)}.dropdown-panel .items-container .items{display:flex;min-width:100%;max-height:200px;width:fit-content;flex-direction:column;gap:var(--dropdown-items-gap)}.dropdown-panel .items-container .items .item-container .item{height:32px;display:flex;cursor:pointer;white-space:nowrap;align-items:center;border:1px solid transparent;padding:var(--dropdown-item-padding);color:var(--label-text-full-enabled-primary)}.dropdown-panel .items-container .items .item-container .item:hover:not(.no-results){border-color:var(--bg-menu-button-hover-primary)}.dropdown-panel .items-container .items .item-container .item.selected,.dropdown-panel .items-container .items .item-container .item:active:not(.no-results){color:var(--on-bg-menu-button-active-primary);background-color:var(--bg-menu-button-hover-primary)}.dropdown-panel .items-container .items .item-container .item gravity-checkbox ::ng-deep .gravity-checkbox-field span.checkmark{width:var(--span-checkmark-width);height:var(--span-checkmark-height);min-width:var(--span-checkmark-width);min-height:var(--span-checkmark-height)}.dropdown-panel .items-container .items .item-container .item-children{border-top:1px solid var(--label-text-full-enabled-primary);border-left:1px solid var(--on-bg-menu-button-disabled-primary)}.dropdown-panel .items-container .items .item-container .item-children .item{padding:var(--dropdown-item-children-padding)}.dropdown-panel .items-container .items .item-container .item-children .item.multiple{padding-left:var(--dropdown-item-multiple-children-padding)!important}.dropdown-panel .items-container .items .no-results{color:var(--outline-field-empty-enabled-primary)!important}.dropdown-panel .items-container .items.has-overflow>.item-container:last-of-type .item{margin-bottom:var(--gravity-spacing-xxs)}.dropdown-panel .dropdown-footer{display:flex;align-items:center;padding:12px 12px 20px;justify-content:space-between}.dropdown-panel .dropdown-footer.no-results{padding:0 12px 20px}.dropdown-panel .dropdown-footer.not-clearable{justify-content:end}.dropdown-panel .dropdown-footer p{cursor:pointer;margin-left:0}.dropdown-panel.error,.dropdown-panel.error .select-all{border-color:var(--negative-primary)}.external-content{left:-1px;cursor:default;-webkit-user-select:none;user-select:none;position:absolute;z-index:5;top:calc(100% + var(--dropdown-top-margin))}.supporting-text{display:flex;align-items:center;margin:5px 12px 0;color:var(--text-field-supporting-text-color)}.supporting-text.active,.supporting-text.hover{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{margin-right:5px;--icon-color: var(--negative-primary);--icon-width: var(--text-field-supporting-text-icon-size);--icon-height: var(--text-field-supporting-text-icon-size)}.gravity-input-field.label-sm,.gravity-input-field.label-md,.gravity-input-field.label-lg{padding:0;border:none;display:flex;justify-content:center}.gravity-input-field.label-sm{height:24px}.gravity-input-field.label-md{height:36px}.gravity-input-field.label-lg{height:42px}\n"], dependencies: [{ kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityNetworkPillComponent, selector: "gravity-network-pill", inputs: ["cypressTag", "disabled", "showNetworkIcon", "network", "type"] }, { 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.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: GravityDropdownLabelComponent, selector: "gravity-dropdown-label", inputs: ["label", "fontClass", "isOpen", "stopPropagation", "size", "state"], outputs: ["onClickLabel"] }, { kind: "component", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: ["cypressTag", "checked", "disabled", "name", "size", "value", "isPartial", "type"], outputs: ["change"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GravityCurrencyDisplayV2Component, selector: "gravity-currency-display-v2", inputs: ["cypressTag", "disabled", "type", "currency"] }, { kind: "component", type: GravityCurrencyComponent, selector: "gravity-currency", inputs: ["cypressTag", "disabled", "size", "currency", "showLayers"] }, { kind: "component", type: GravityLinkComponent, selector: "gravity-link", inputs: ["linkText", "fontClass", "link", "cypressTag", "iconName", "target", "iconPosition", "iconSize", "state"] }] }); }
|
|
995
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityDropdownListComponent, isStandalone: true, selector: "gravity-dropdown-list", inputs: { label: "label", iconLeft: "iconLeft", customValues: "customValues", cypressTag: "cypressTag", placeholder: "placeholder", supportText: "supportText", items: "items", hasError: "hasError", clearable: "clearable", multiple: "multiple", required: "required", isDisabled: "isDisabled", isReadonly: "isReadonly", currentLang: "currentLang", config: "config", labelSize: "labelSize", size: "size", inputType: "inputType", width: "width", type: "type", dropdownState: "dropdownState" }, outputs: { dropdownStateChange: "dropdownStateChange", selectedItemsResponse: "response" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [FilterByPipe], viewQueries: [{ propertyName: "inputField", first: true, predicate: ["inputField"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }, { propertyName: "watch", first: true, predicate: ["searchInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (inputType === 'field' && label) {\n <label class=\"hr-label sm-bold {{getStatus()}}\"> {{ label }}\n @if (required || hasError) { <span>*</span> }\n </label>\n}\n\n<div #inputField class=\"gravity-input-field {{inputType}}-{{labelSize}} {{size}} {{width}}-width {{getStatus()}}\"\n [attr.data-cy]=\"cypressTag ? 'dropdown_'+cypressTag : null\" (click)=\"toggleDropdown();\">\n\n @switch (inputType) {\n @case ('field') {\n @if ((iconLeft && !dropdownOpened) || (iconLeft && !items?.length)) {\n <gravity-icon class=\"left\" [iconName]=\"iconLeft\" [iconSize]=\"isIconLeftNew() ? 'md-16' : null\"/>\n }\n\n @if (dropdownOpened && items?.length) {\n <gravity-icon class=\"search-icon\" [iconName]=\"'search'\" [iconSize]=\"'sm-12'\"/>\n }\n\n @if (!dropdownOpened && networkConfig) {\n <div class=\"network-pill\">\n <span class=\"hr-label {{size}}-regular\">{{ networkConfig.label }}</span>\n <gravity-network-pill [disabled]=\"isDisabled\" [network]=\"{iso: networkConfig.iso, id: networkConfig.id}\"/>\n </div>\n } @else if (!dropdownOpened && currencyConfig) {\n <div class=\"network-pill\">\n <span class=\"hr-label {{size}}-regular\">{{ currencyConfig.iso }}</span>\n <gravity-network-pill [disabled]=\"isDisabled\" [network]=\"{iso: currencyConfig.networkIso, id: currencyConfig.networkId}\"/>\n </div>\n } @else {\n @if (type == 'regular' || selectedItems.length < 1 || dropdownOpened) {\n <input #searchInput autocomplete=\"off\" class=\"hr-label {{size}}-regular {{getStatus()}}\"\n (ngModelChange)=\"searchText = $event\"\n [attr.data-cy]=\"'dropdown_searchInput'\"\n (input)=\"filterItems(); dropdownOpened = true\"\n (keydown)=\"preventTypingWhenLocked($event, searchInput)\"\n (focus)=\"searchText = ''\" [class.locked]=\"!dropdownOpened || !items?.length\"\n [ngModel]=\"(dropdownOpened && items?.length) ? searchText : inputDisplayValue()\"\n [placeholder]=\"(dropdownOpened && items?.length) ? uiTexts.SEARCH : (placeholder || label)\">\n }\n\n @if (type === 'currency' && !dropdownOpened && selectedItems.length > 0) {\n <div class=\"network-pill-list\">\n @for (currency of currencyDisplay.items; track currency; let last = $last) {\n <span class=\"hr-label sm-regular\">{{ currency.iso }}</span>\n @if (currency.network?.code) {\n <gravity-network-pill [disabled]=\"isDisabled\" [network]=\"{iso: currency.network.code, id: currency.network.id}\"/>\n }\n @if (!last) { <span class=\"hr-label sm-regular\">,</span> }\n }\n @if (currencyDisplay.hasMore) { <span class=\"hr-label sm-regular\">...</span> }\n </div>\n }\n\n\n @if (type === 'network' && !dropdownOpened && selectedItems.length > 0) {\n <div class=\"network-pill-list\">\n @for (network of networkPillsDisplay.items; track network; let last = $last) {\n <gravity-network-pill [disabled]=\"isDisabled\" [network]=\"{iso: network.iso, id: network.id}\"/>\n @if (!last) { <span class=\"hr-label sm-regular\">,</span> }\n }\n @if (networkPillsDisplay.hasMore) { <span class=\"hr-label sm-regular\">...</span> }\n </div>\n }\n }\n\n @if (!isReadonly && searchText.length == 0) {\n <gravity-icon class=\"right\" [iconName]=\"dropdownOpened ? 'arrow-up': 'arrow-down'\" [iconSize]=\"'md-16'\"/>\n }\n\n @if (dropdownOpened && searchText.length > 0) {\n <gravity-icon class=\"right\" [iconName]=\"'unsuccess'\" (click)=\"clearSearch()\" [iconSize]=\"'md-16'\"/>\n }\n }\n\n @case ('label') {\n <gravity-dropdown-label (onClickLabel)=\"toggleDropdown()\" [label]=\"getLabelText()\" [size]=\"labelSize\" [isOpen]=\"dropdownOpened\"/>\n }\n }\n\n @if (items?.length && dropdownOpened) {\n <div class=\"dropdown-panel {{getStatus()}}\" (click)=\"$event.stopPropagation()\" [attr.data-cy]=\"'dropdown_panel'\">\n @if (inputType === 'label') {\n <div class=\"search-input\">\n <gravity-icon class=\"search-icon\" [iconName]=\"'search'\" [iconSize]=\"'sm-12'\"/>\n <input #searchInput autocomplete=\"off\" class=\"hr-label {{size}}-regular\"\n [attr.data-cy]=\"'dropdown_searchInput'\" [placeholder]=\"uiTexts.SEARCH\" [ngModel]=\"searchText\"\n (ngModelChange)=\"onSearchTextChange($event)\" (input)=\"filterItems()\">\n\n @if (searchText?.length > 0) {\n <gravity-icon class=\"pointer reset-icon\" (click)=\"searchText = ''; filterItems()\" [iconName]=\"'unsuccess'\" [iconSize]=\"'sm-12'\"/>\n }\n </div>\n }\n\n @if (multiple && availableOptions.length != 0) {\n <div class=\"select-all\">\n <gravity-checkbox [ngClass]=\"getSpacingClass(size)\" (click)=\"selectAllItems($event)\" [checked]=\"checkIfSelected()\"/>\n <p class=\"hr-label {{size}}-regular\"> {{ uiTexts.SELECT_ALL }} </p>\n </div>\n }\n\n <div class=\"items-container\" #containerRef>\n <div class=\"items\" [class.has-overflow]=\"availableOptions.length > 5\">\n @for (item of availableOptions; track item) {\n <div class=\"item-container\" [attr.data-cy]=\"type === 'currency' ? 'dropdown_currencyId' + item.currency_id : 'dropdown_option' + getDisplayValue(item, config)\">\n <div class=\"hr-label item {{size}}-regular pointer\"\n [class.selected]=\"checkIfSelected(item)\" [class.partial]=\"isPartiallySelected(item)\"\n (click)=\"item.children?.length ? (multiple ? selectItem(item) : toggleChildren(item, $event)) : selectItem(item)\">\n\n @if (multiple) {\n <gravity-checkbox [ngClass]=\"getSpacingClass(size)\" [isPartial]=\"isPartiallySelected(item)\" [checked]=\"checkIfSelected(item)\"/>\n }\n\n @switch (type) {\n @case ('network') { <gravity-network-pill [network]=\"{ iso: item.iso, id: item.id }\"/> }\n @case ('currency') {\n <gravity-currency-display-v2 [ngClass]=\"getSpacingClass(size)\" [type]=\"item.type === 'FIAT' ? 'fiat-short' : 'short-hrz'\"\n [currency]=\"{ currency_name: item.name, currency_id: item.currency_id, currency_iso: item.iso, network_id: item.network?.id,\n network_iso: item.network?.code, pill_type: checkIfSelected(item) ? 'secondary' : 'primary'}\"/>\n }\n @default { <div [ngClass]=\"getSpacingClass(size)\"> {{ getDisplayValue(item, config) }} </div> }\n }\n\n @if (item.children?.length) {\n <gravity-icon style=\"margin-left: auto\" (click)=\"toggleChildren(item, $event)\"\n [iconName]=\"isChildrenOpen(item) ? 'arrow-up' : 'arrow-down'\" [iconSize]=\"'md-16'\"/>\n }\n </div>\n\n @if (item.children?.length && isChildrenOpen(item)) {\n <div class=\"item-children\">\n @for (child of item.children; track child) {\n <div class=\"hr-label item {{size}}-regular pointer\" [ngClass]=\"{'multiple' : multiple}\"\n [class.selected]=\"checkIfSelected(child)\" (click)=\"selectItem(child)\">\n\n @if (multiple) {\n <gravity-checkbox [ngClass]=\"getMultilevelSpacingClass(size)\" [checked]=\"checkIfSelected(child)\"/>\n }\n\n @if (type === 'currency') {\n <gravity-currency [ngClass]=\"getSpacingClass(size)\" [size]=\"getCurrencyIconSize(size)\" [currency]=\"{currency_iso: child.currency_iso}\"/>\n }\n\n <div [ngClass]=\"getSpacingClass(size)\">{{ getDisplayValue(child, config) }}</div>\n\n @if (type === 'currency') {\n <gravity-network-pill [type]=\"checkIfSelected(child) ? 'secondary' : 'primary'\" [network]=\"{ iso: child.network?.code, id: child.network?.id }\"/>\n }\n </div>\n }\n </div>\n }\n </div>\n } @empty {\n <div class=\"item-container\">\n <div class=\"hr-label item {{size}}-bold no-results\"> {{ uiTexts.NO_RESULTS }} </div>\n </div>\n }\n </div>\n </div>\n\n @if (hasFooterContent) {\n <div class=\"dropdown-footer\" [class.not-clearable]=\"!clearable\" [class.no-results]=\"availableOptions.length === 0\">\n @if (availableOptions.length !== 0) {\n @if (clearable && selectedItems.length > 0) {\n <gravity-link (click)=\"clearSelection()\" [fontClass]=\"'hr-label sm-regular'\" [attr.data-cy]=\"'dropdown_clear'\" [linkText]=\"uiTexts.CLEAR_SELECTION\"/>\n }\n @if (multiple) {\n <gravity-link [fontClass]=\"'hr-label sm-bold'\" [attr.data-cy]=\"'dropdown_apply'\" (click)=\"$event.stopPropagation(); toggleDropdown()\" [linkText]=\"uiTexts.APPLY\"/>\n }\n } @else if (clearable) {\n <gravity-link (click)=\"clearSearch()\" [fontClass]=\"'hr-label sm-regular'\" [attr.data-cy]=\"'dropdown_clearSearch'\" [linkText]=\"uiTexts.CLEAR_SEARCH\"/>\n }\n </div>\n }\n </div>\n }\n\n @if (!items?.length && dropdownOpened) {\n <section class=\"external-content\" (click)=\"$event.stopPropagation()\"> <ng-content></ng-content> </section>\n }\n</div>\n\n@if (inputType === 'field' && supportText) {\n <p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\"> {{ supportText }} </p>\n}", styles: [".scrollbar-sm::-webkit-scrollbar,.dropdown-panel .items-container::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track,.dropdown-panel .items-container::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb,.dropdown-panel .items-container::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover,.dropdown-panel .items-container::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}:root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.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}:host{display:block}label{color:var(--text-field-label-color);display:block;margin:0 12px 5px}label.active,label.hover{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.open{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.selected,label.error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.error span{color:var(--negative-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.gravity-input-field{display:flex;cursor:pointer;padding:10px 12px;position:relative;align-items:center;width:var(--text-field-input-field-width);height:var(--text-field-input-field-height);--text-field-input-field-border-width: .5px;border-radius:.3125rem;color:var(--text-field-input-field-content-color);background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color)}.gravity-input-field gravity-icon{--icon-width: var(--text-field-input-field-content);--icon-height: var(--text-field-input-field-content);--icon-color: var(--text-field-input-field-icon-color)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.left,.gravity-input-field gravity-icon.search-icon{margin-right:var(--icon-margin)}.gravity-input-field gravity-icon.right{margin-left:var(--icon-margin)}.gravity-input-field p.value{width:100%;margin-left:0;overflow:hidden;white-space:nowrap;line-height:normal;text-overflow:ellipsis;height:var(--text-field-input-field-input);color:var(--text-field-input-field-content-color)}.gravity-input-field input{margin:0;padding:0;width:100%;border:none;outline:none;cursor:pointer;border-radius:0;background-color:transparent;color:var(--text-field-label-color)}.gravity-input-field input::placeholder{color:var(--placeholder-empty-enabled-primary)}.gravity-input-field input.active,.gravity-input-field input.hover{--text-field-label-color: var(--label-text-empty-enabled-primary)}.gravity-input-field input.open{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}.gravity-input-field input.selected{--text-field-label-color: var(--label-text-full-enabled-primary)}.gravity-input-field input.disabled{--text-field-label-color: var(--on-bg-disabled)}.gravity-input-field input.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.gravity-input-field input.locked{caret-color:transparent!important}.gravity-input-field .network-pill-list{width:100%;display:flex;overflow:hidden;align-items:flex-end;gap:var(--gravity-spacing-xxs)}.gravity-input-field .network-pill{width:100%;display:flex;align-items:center;gap:var(--gravity-spacing-xxs)}.gravity-input-field .network-pill gravity-network-pill{margin-top:1px}.gravity-input-field.sm{--icon-margin: 5px;--dropdown-top-margin: 5px;--span-checkmark-margin: 5px;--span-checkmark-width: 14px;--span-checkmark-height: 14px;--text-field-input-field-input: 13px;--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--dropdown-items-gap: .5rem;--dropdown-item-multiple-children-padding: .25rem;--dropdown-item-padding: .5rem .25rem;--dropdown-select-all-padding: .75rem ;--dropdown-item-children-padding: .5rem 4px .5rem 28px}.gravity-input-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-input-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-input-field.sm.full-width,.gravity-input-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.md{--icon-margin: 8px;--dropdown-items-gap: 12px;--dropdown-top-margin: 8px;--span-checkmark-margin: 8px;--span-checkmark-width: 16px;--span-checkmark-height: 16px;--text-field-input-field-input: 18px;--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--dropdown-item-padding: .5rem;--dropdown-item-multiple-children-padding: .5rem;--dropdown-select-all-padding: 1rem ;--dropdown-item-children-padding: .5rem .5rem .5rem 40px}.gravity-input-field.md.short-width{--text-field-input-field-width: 242px}.gravity-input-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-input-field.md.full-width,.gravity-input-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-input-field.active{--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary)}.gravity-input-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.open{--text-field-input-field-border-width: 1px;--text-field-input-field-icon-color: var(--icon-active-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary)}.gravity-input-field.selected{--text-field-input-field-icon-color: var(--icon-active-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.selected:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.error{--text-field-input-field-border-color: var(--negative-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary);--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary)}.gravity-input-field.error:hover{--text-field-input-field-border-width: 1px}.gravity-input-field.disabled{cursor:initial;--text-field-input-field-icon-color: var(--on-bg-disabled);--text-field-input-field-background-color: var(--bg-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-border-color: var(--outline-disabled)}.gravity-input-field.disabled input{cursor:initial}.gravity-input-field.readonly{cursor:initial;--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary);--text-field-input-field-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-background-color: var(--bg-field-full-read-only-primary)}.gravity-input-field.readonly input{cursor:initial}.dropdown-panel{left:-1px;cursor:initial;position:absolute;z-index:5;top:calc(100% + var(--dropdown-top-margin));border-radius:.3125rem;width:calc(var(--text-field-input-field-width) + 2px);background-color:var(--bg-field-full-enabled-primary);border:1px solid var(--outline-field-full-enabled-pressed-primary)}.dropdown-panel .search-input{display:flex;padding:12px;align-items:center;border-bottom:1px solid var(--outline-field-full-enabled-pressed-primary)}.dropdown-panel .search-input gravity-icon.search-icon{margin-right:.5rem}.dropdown-panel .search-input gravity-icon.reset-icon{margin-left:.5rem}.dropdown-panel .search-input input{margin:0;padding:0;width:100%;border:none;outline:none;border-radius:0;background-color:transparent;color:var(--input-text-full-enabled-primary)}.dropdown-panel .search-input input::placeholder{color:var(--placeholder-empty-enabled-primary)}.dropdown-panel .select-all{display:flex;align-items:center;padding:12px var(--dropdown-select-all-padding);border-bottom:1px solid var(--outline-field-full-enabled-pressed-primary)}.dropdown-panel .select-all p{cursor:pointer;text-decoration:underline;color:var(--on-bg-button-active-secondary)}.dropdown-panel .select-all gravity-checkbox ::ng-deep .gravity-checkbox-field span.checkmark{width:var(--span-checkmark-width);height:var(--span-checkmark-height);min-width:var(--span-checkmark-width);min-height:var(--span-checkmark-height)}.dropdown-panel .items-container{margin:4px;overflow:auto;position:relative;z-index:5;padding:var(--gravity-spacing-xxs)}.dropdown-panel .items-container .items{display:flex;min-width:100%;max-height:200px;width:fit-content;flex-direction:column;gap:var(--dropdown-items-gap)}.dropdown-panel .items-container .items .item-container .item{height:32px;display:flex;cursor:pointer;white-space:nowrap;align-items:center;border:1px solid transparent;padding:var(--dropdown-item-padding);color:var(--label-text-full-enabled-primary)}.dropdown-panel .items-container .items .item-container .item:hover:not(.no-results){border-color:var(--bg-menu-button-hover-primary)}.dropdown-panel .items-container .items .item-container .item.selected,.dropdown-panel .items-container .items .item-container .item:active:not(.no-results){color:var(--on-bg-menu-button-active-primary);background-color:var(--bg-menu-button-hover-primary)}.dropdown-panel .items-container .items .item-container .item gravity-checkbox ::ng-deep .gravity-checkbox-field span.checkmark{width:var(--span-checkmark-width);height:var(--span-checkmark-height);min-width:var(--span-checkmark-width);min-height:var(--span-checkmark-height)}.dropdown-panel .items-container .items .item-container .item-children{border-top:1px solid var(--label-text-full-enabled-primary);border-left:1px solid var(--on-bg-menu-button-disabled-primary)}.dropdown-panel .items-container .items .item-container .item-children .item{padding:var(--dropdown-item-children-padding)}.dropdown-panel .items-container .items .item-container .item-children .item.multiple{padding-left:var(--dropdown-item-multiple-children-padding)!important}.dropdown-panel .items-container .items .no-results{color:var(--outline-field-empty-enabled-primary)!important}.dropdown-panel .items-container .items.has-overflow>.item-container:last-of-type .item{margin-bottom:var(--gravity-spacing-xxs)}.dropdown-panel .dropdown-footer{display:flex;align-items:center;padding:12px 12px 20px;justify-content:space-between}.dropdown-panel .dropdown-footer.no-results{padding:0 12px 20px}.dropdown-panel .dropdown-footer.not-clearable{justify-content:end}.dropdown-panel .dropdown-footer p{cursor:pointer;margin-left:0}.dropdown-panel.error,.dropdown-panel.error .select-all{border-color:var(--negative-primary)}.external-content{left:-1px;cursor:default;-webkit-user-select:none;user-select:none;position:absolute;z-index:5;top:calc(100% + var(--dropdown-top-margin))}.supporting-text{display:flex;align-items:center;margin:5px 12px 0;color:var(--text-field-supporting-text-color)}.supporting-text.active,.supporting-text.hover{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{margin-right:5px;--icon-color: var(--negative-primary);--icon-width: var(--text-field-supporting-text-icon-size);--icon-height: var(--text-field-supporting-text-icon-size)}.gravity-input-field.label-sm,.gravity-input-field.label-md,.gravity-input-field.label-lg{padding:0;border:none;display:flex;justify-content:center}.gravity-input-field.label-sm{height:24px}.gravity-input-field.label-md{height:36px}.gravity-input-field.label-lg{height:42px}\n"], dependencies: [{ kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityNetworkPillComponent, selector: "gravity-network-pill", inputs: ["cypressTag", "disabled", "showNetworkIcon", "network", "type"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GravityDropdownLabelComponent, selector: "gravity-dropdown-label", inputs: ["label", "fontClass", "isOpen", "stopPropagation", "size", "state"], outputs: ["onClickLabel"] }, { kind: "component", type: GravityCheckboxComponent, selector: "gravity-checkbox", inputs: ["cypressTag", "checked", "disabled", "name", "size", "value", "isPartial", "type"], outputs: ["change"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GravityCurrencyDisplayV2Component, selector: "gravity-currency-display-v2", inputs: ["cypressTag", "disabled", "type", "currency"] }, { kind: "component", type: GravityCurrencyComponent, selector: "gravity-currency", inputs: ["cypressTag", "disabled", "size", "currency", "showLayers"] }, { kind: "component", type: GravityLinkComponent, selector: "gravity-link", inputs: ["linkText", "fontClass", "link", "cypressTag", "iconName", "target", "iconPosition", "iconSize", "state"] }] }); }
|
|
951
996
|
}
|
|
952
997
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityDropdownListComponent, decorators: [{
|
|
953
998
|
type: Component,
|
|
@@ -1166,7 +1211,7 @@ class GravityDropdownListDisplayComponent {
|
|
|
1166
1211
|
this.searchText = value;
|
|
1167
1212
|
}
|
|
1168
1213
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityDropdownListDisplayComponent, deps: [{ token: GravityDropdownManagerService }, { token: FilterByPipe }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1169
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityDropdownListDisplayComponent, isStandalone: true, selector: "gravity-dropdown-list-display", inputs: { cypressTag: "cypressTag", placeholder: "placeholder", currentLang: "currentLang", isReadonly: "isReadonly", isDisabled: "isDisabled", customValues: "customValues", disableSearch: "disableSearch", defaultSelectedItemIndex: "defaultSelectedItemIndex", items: "items", fiatRate: "fiatRate", label: "label", size: "size", width: "width" }, outputs: { selectedItemsResponse: "response" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [FilterByPipe], viewQueries: [{ propertyName: "watch", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [attr.data-cy]=\"cypressTag? 'currencyDropdown_' + cypressTag : null\" class=\"gravity-input-field {{size}} {{width}}-width {{getStatus()}}\"\n [class.has-value]=\"selectedItems.length > 0\"\n (mouseenter)=\"selectedItem ? selectedItem.isHovered = true : null\"\n (mouseleave)=\"selectedItem ? selectedItem.isHovered = false : null\"\n (click)=\"toggleDropdown()\">\n\n <div class=\"value\">\n\n <div class=\"dropdown-label\" [class.floating]=\"selectedItems.length > 0\">\n @if (label && selectedItems.length > 0) {\n <span class=\"hr-label sm-bold\">{{label}}</span>\n }\n </div>\n\n @if (selectedItems.length == 0) {\n <div class=\"placeholder hr-label md-regular\">{{ placeholder }}</div>\n }\n @if (selectedItems.length > 0) {\n <div class=\"selected-value\">\n <gravity-currency-display-v2\n [currency]=\"{ currency_name: selectedItem.currency_name,\n currency_id: selectedItem.currency_id, currency_iso: selectedItem.currency_iso,\n network_id: selectedItem.network_id, network_iso: selectedItem.network_iso,\n pill_type: isReadonly || selectedItem.isHovered ? 'primary' : (getStatus() === 'selected' ? 'secondary' : 'primary')}\">\n </gravity-currency-display-v2>\n </div>\n }\n </div>\n\n @if (!isReadonly) {\n <gravity-icon class=\"right\" [iconName]=\"dropdownOpened ? 'arrow-up': 'arrow-down'\" [iconSize]=\"'sm-12'\"/>\n }\n\n @if (dropdownOpened) {\n <div class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\"\n [attr.data-cy]=\"'currencyDropdown_panel'\">\n <div class=\"search-input\" [class.disabled]=\"disableSearch\">\n <gravity-icon [style.--icon-color]=\"disableSearch ? 'var(--on-bg-disabled)' : null\"\n class=\"search-icon\" [iconName]=\"'search'\" [iconSize]=\"'sm-12'\">\n </gravity-icon>\n <input autocomplete=\"off\" class=\"hr-label {{size}}-regular\" (input)=\"filterItems()\"\n [attr.data-cy]=\"'currencyDropdown_searchInput'\" #searchInput [disabled]=\"disableSearch\"\n [ngModel]=\"searchText\" (ngModelChange)=\"onSearchTextChange($event)\" placeholder=\"{{currentLang == 'es' ? 'Buscar moneda' : 'Search currency'}}\">\n @if (searchText?.length > 0) {\n <gravity-icon class=\"pointer reset-icon\" (click)=\"searchText = ''; filterItems()\" [iconName]=\"'unsuccess'\"\n [iconSize]=\"'sm-12'\">\n </gravity-icon>\n }\n </div>\n <div class=\"items-container\" #containerRef>\n <div class=\"items\">\n @for (item of availableOptions; track item) {\n <div class=\"item-container\" [class.expanded]=\"item.is_expanded\">\n <div class=\"hr-label item {{size}}-regular pointer\" [class.disabled]=\"item?.disabled\"\n [class.selected]=\"item.sub_items?.length > 0 ? null : checkIfSelected(item)\"\n (click)=\"item.sub_items?.length > 0 ? item.is_expanded = !item.is_expanded : selectItem(item)\"\n (mouseenter)=\"item.isHovered = true\" (mouseleave)=\"item.isHovered = false\" [attr.data-cy]=\"'currencyDropdown_currencyId'+item.currency_id\">\n <gravity-currency-display-v2\n [disabled]=\"item?.disabled\"\n [currency]=\"{ currency_name: item.currency_name,\n currency_iso: item.currency_iso, currency_id: item.currency_id,\n network_id: item.network_id, network_iso: item.network_iso,\n pill_type: (checkIfSelected(item) || item.isHovered) ? 'secondary' : 'primary' }\">\n </gravity-currency-display-v2>\n @if (!item.sub_items) {\n <span class=\"hr-body sm-regular gravity-margin-right-sm currency-info\">\n {{ item?.balance_amount }} {{ item?.balance_currency }}\n </span>\n }\n @if (item.sub_items?.length > 0 && item?.disabled !== true) {\n <gravity-icon class=\"pointer expand-icon\"\n [iconSize]=\"'sm-12'\" [iconName]=\"item.is_expanded ? 'arrow-up' : 'arrow-down'\">\n </gravity-icon>\n }\n </div>\n @if (item.is_expanded && item.sub_items) {\n @for (subItem of item.sub_items; track subItem) {\n <div class=\"hr-label item {{size}}-regular pointer\"\n [class.selected]=\"checkIfSelected(subItem)\" (click)=\"selectItem(subItem)\" [class.disabled]=\"subItem?.disabled\"\n (mouseenter)=\"subItem.isHovered = true\" (mouseleave)=\"subItem.isHovered = false\">\n <div class=\"subitem-line\"></div>\n <gravity-currency-display-v2\n [disabled]=\"subItem?.disabled\"\n [currency]=\"{ currency_name: subItem.currency_name,\n currency_iso: subItem.currency_iso, currency_id: subItem.currency_id,\n network_id: subItem.network_id, network_iso: subItem.network_iso,\n pill_type: (checkIfSelected(subItem) || subItem.isHovered) ? 'secondary' : 'primary' }\" >\n </gravity-currency-display-v2>\n <span class=\"hr-body sm-regular gravity-margin-right-sm currency-info\">\n {{ subItem.balance_amount }} {{ subItem.balance_currency }}\n </span>\n </div>\n }\n }\n </div>\n }\n @if (availableOptions.length === 0) {\n <div class=\"hr-label item {{size}}-bold no-results\">\n {{ currentLang == 'es' ? 'Sin resultados' : 'No results' }}\n </div>\n }\n </div>\n </div>\n </div>\n }\n</div>\n\n@if (selectedItems.length > 0) {\n <div class=\"wallet-balance-info {{width}}-width\">\n <p class=\"hr-label sm-regular wallet-balance-text\">{{ currentLang == 'es' ? 'Saldo de cartera' : 'Wallet balance' }}\n : {{ selectedItem.balance_amount }} {{ selectedItem.balance_currency }} @if (fiatRate) {\n <span> | \u2248 {{fiatRate.amount}} {{fiatRate.iso}} </span>\n }</p>\n </div>\n}\n\n", styles: [".scrollbar-sm::-webkit-scrollbar,.dropdown-panel .items-container::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track,.dropdown-panel .items-container::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb,.dropdown-panel .items-container::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover,.dropdown-panel .items-container::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}:root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.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}:host{display:block}.gravity-input-field{display:flex;cursor:pointer;margin-top:25px;position:relative;align-items:center;border-radius:.3125rem;padding:1rem 12px;width:var(--dropdown-cd-field-input-width);height:var(--dropdown-cd-field-input-height);--text-field-input-field-border-width: .5px;color:var(--text-field-input-field-content-color);background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color)}.gravity-input-field gravity-icon{--icon-width: var(--text-field-input-field-content);--icon-height: var(--text-field-input-field-content);--icon-color: var(--text-field-input-field-icon-color)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.right{margin-right:var(--icon-margin)}.gravity-input-field .value{width:100%}.dropdown-label{left:0;top:50%;opacity:0;position:absolute;pointer-events:none;transition:all .3s ease;transform:translateY(-50%)}.gravity-input-field.has-value .dropdown-label{opacity:1;top:-25px;transform:translateY(0)}.placeholder{opacity:1;background-color:transparent;transition:opacity .15s ease}.gravity-input-field.has-value .placeholder{opacity:0}.selected-value{transition:transform .3s ease}.gravity-input-field.md{--dropdown-margin: 8px;--dropdown-items-padding: 6px;--text-field-input-field-content: 15px;--dropdown-cd-field-input-height: 58px;--dropdown-cd-items-container-height: 502px}.gravity-input-field.closed{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-dropdown-list-dc-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.open{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.disabled{cursor:default;pointer-events:none;--text-field-input-field-border-width: 1px;--text-field-input-field-icon-color: var(--on-bg-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-border-color: var(--outline-disabled)}.gravity-input-field.selected{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--icon-active-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-dropdown-list-dc-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.selected ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary{background-color:var(--surface-secondary)}.gravity-input-field.readonly{cursor:initial;--text-field-input-field-border-width: 1px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field:not(.readonly):hover{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field:not(.readonly):hover ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary{background-color:var(--surface-primary)}.dropdown-panel{left:-2px;cursor:initial;position:absolute;z-index:5;border-radius:.3125rem;top:calc(100% + var(--dropdown-margin));width:var(--dropdown-cd-field-input-width);background-color:var(--bg-field-full-enabled-primary);border:1px solid var(--outline-dropdown-list-dc-primary)}.dropdown-panel .search-input{display:flex;padding:12px;align-items:center;border-bottom:1px solid var(--outline-field-full-enabled-pressed-primary)}.dropdown-panel .search-input search-input:focus-within{border-bottom:1px solid var(--text-primary)}.dropdown-panel .search-input.disabled{border-bottom:1px solid var(--outline-disabled)}.dropdown-panel .search-input gravity-icon.search-icon{margin-right:.5rem}.dropdown-panel .search-input gravity-icon.reset-icon{margin-left:.5rem}.dropdown-panel .search-input input{margin:0;padding:0;width:100%;border:none;outline:none;border-radius:0;background-color:transparent;color:var(--input-text-full-enabled-primary)}.dropdown-panel .search-input input::placeholder{color:var(--placeholder-empty-enabled-primary)}.dropdown-panel .items-container{overflow:auto;margin:var(--dropdown-margin) 0;max-height:var(--dropdown-cd-items-container-height)}.dropdown-panel .items-container .items{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:0 var(--dropdown-items-padding);max-height:var(--dropdown-cd-items-container-height)}.dropdown-panel .items-container .items .item-container.expanded{display:grid;gap:var(--gravity-spacing-xxs);border-bottom:1px solid var(--bg-disabled)}.dropdown-panel .items-container .items .item-container .item{height:60px;display:flex;cursor:pointer;position:relative;white-space:nowrap;align-items:center;justify-content:space-between;padding:.75rem var(--gravity-spacing-sm);color:var(--label-text-full-enabled-primary)}.dropdown-panel .items-container .items .item-container .item .expand-icon{position:absolute;top:var(--gravity-spacing-md);right:var(--gravity-spacing-sm)}.dropdown-panel .items-container .items .item-container .item .subitem-line{top:-18px;height:40px;position:absolute;border-left:1px solid var(--on-bg-disabled);left:calc(var(--gravity-spacing-md) + var(--gravity-spacing-xxs))}.dropdown-panel .items-container .items .item-container .item:hover:not(.no-results):not(.disabled),.dropdown-panel .items-container .items .item-container .item.selected{border-radius:.3125rem;color:var(--on-bg-menu-button-active-primary);background-color:var(--bg-menu-button-hover-primary)}.dropdown-panel .items-container .items .item-container .item:hover:not(.no-results):not(.disabled) ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary,.dropdown-panel .items-container .items .item-container .item.selected ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary{background-color:var(--surface-secondary)!important}.dropdown-panel .items-container .items .item-container .item.disabled{cursor:default;pointer-events:none}.dropdown-panel .items-container .items .item-container .item.disabled .currency-info{color:var(--on-bg-disabled)}.dropdown-panel .items-container .items .item-container .item .currency-info{right:0;bottom:10px;position:absolute}.wallet-balance-info{width:var(--dropdown-cd-field-input-width);text-align:end;margin-top:12px;padding-right:12px}.wallet-balance-text{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.wallet-balance-text span{white-space:nowrap}.no-results{cursor:default!important}.standard-width{--dropdown-cd-field-input-width: 350px}.full-width{--dropdown-cd-field-input-width: 100%}\n"], dependencies: [{ kind: "component", type: GravityCurrencyDisplayV2Component, selector: "gravity-currency-display-v2", inputs: ["cypressTag", "disabled", "type", "currency"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { 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.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"] }] }); }
|
|
1214
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityDropdownListDisplayComponent, isStandalone: true, selector: "gravity-dropdown-list-display", inputs: { cypressTag: "cypressTag", placeholder: "placeholder", currentLang: "currentLang", isReadonly: "isReadonly", isDisabled: "isDisabled", customValues: "customValues", disableSearch: "disableSearch", defaultSelectedItemIndex: "defaultSelectedItemIndex", items: "items", fiatRate: "fiatRate", label: "label", size: "size", width: "width" }, outputs: { selectedItemsResponse: "response" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [FilterByPipe], viewQueries: [{ propertyName: "watch", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "containerRef", first: true, predicate: ["containerRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div [attr.data-cy]=\"cypressTag? 'currencyDropdown_' + cypressTag : null\" class=\"gravity-input-field {{size}} {{width}}-width {{getStatus()}}\"\n [class.has-value]=\"selectedItems.length > 0\"\n (mouseenter)=\"selectedItem ? selectedItem.isHovered = true : null\"\n (mouseleave)=\"selectedItem ? selectedItem.isHovered = false : null\"\n (click)=\"toggleDropdown()\">\n\n <div class=\"value\">\n\n <div class=\"dropdown-label\" [class.floating]=\"selectedItems.length > 0\">\n @if (label && selectedItems.length > 0) {\n <span class=\"hr-label sm-bold\">{{label}}</span>\n }\n </div>\n\n @if (selectedItems.length == 0) {\n <div class=\"placeholder hr-label md-regular\">{{ placeholder }}</div>\n }\n @if (selectedItems.length > 0) {\n <div class=\"selected-value\">\n <gravity-currency-display-v2\n [currency]=\"{ currency_name: selectedItem.currency_name,\n currency_id: selectedItem.currency_id, currency_iso: selectedItem.currency_iso,\n network_id: selectedItem.network_id, network_iso: selectedItem.network_iso,\n pill_type: isReadonly || selectedItem.isHovered ? 'primary' : (getStatus() === 'selected' ? 'secondary' : 'primary')}\">\n </gravity-currency-display-v2>\n </div>\n }\n </div>\n\n @if (!isReadonly) {\n <gravity-icon class=\"right\" [iconName]=\"dropdownOpened ? 'arrow-up': 'arrow-down'\" [iconSize]=\"'sm-12'\"/>\n }\n\n @if (dropdownOpened) {\n <div class=\"dropdown-panel\" (click)=\"$event.stopPropagation()\"\n [attr.data-cy]=\"'currencyDropdown_panel'\">\n <div class=\"search-input\" [class.disabled]=\"disableSearch\">\n <gravity-icon [style.--icon-color]=\"disableSearch ? 'var(--on-bg-disabled)' : null\"\n class=\"search-icon\" [iconName]=\"'search'\" [iconSize]=\"'sm-12'\">\n </gravity-icon>\n <input autocomplete=\"off\" class=\"hr-label {{size}}-regular\" (input)=\"filterItems()\"\n [attr.data-cy]=\"'currencyDropdown_searchInput'\" #searchInput [disabled]=\"disableSearch\"\n [ngModel]=\"searchText\" (ngModelChange)=\"onSearchTextChange($event)\" placeholder=\"{{currentLang == 'es' ? 'Buscar moneda' : 'Search currency'}}\">\n @if (searchText?.length > 0) {\n <gravity-icon class=\"pointer reset-icon\" (click)=\"searchText = ''; filterItems()\" [iconName]=\"'unsuccess'\"\n [iconSize]=\"'sm-12'\">\n </gravity-icon>\n }\n </div>\n <div class=\"items-container\" #containerRef>\n <div class=\"items\">\n @for (item of availableOptions; track item) {\n <div class=\"item-container\" [class.expanded]=\"item.is_expanded\">\n <div class=\"hr-label item {{size}}-regular pointer\" [class.disabled]=\"item?.disabled\"\n [class.selected]=\"item.sub_items?.length > 0 ? null : checkIfSelected(item)\"\n (click)=\"item.sub_items?.length > 0 ? item.is_expanded = !item.is_expanded : selectItem(item)\"\n (mouseenter)=\"item.isHovered = true\" (mouseleave)=\"item.isHovered = false\" [attr.data-cy]=\"'currencyDropdown_currencyId'+item.currency_id\">\n <gravity-currency-display-v2\n [disabled]=\"item?.disabled\"\n [currency]=\"{ currency_name: item.currency_name,\n currency_iso: item.currency_iso, currency_id: item.currency_id,\n network_id: item.network_id, network_iso: item.network_iso,\n pill_type: (checkIfSelected(item) || item.isHovered) ? 'secondary' : 'primary' }\">\n </gravity-currency-display-v2>\n @if (!item.sub_items) {\n <span class=\"hr-body sm-regular gravity-margin-right-sm currency-info\">\n {{ item?.balance_amount }} {{ item?.balance_currency }}\n </span>\n }\n @if (item.sub_items?.length > 0 && item?.disabled !== true) {\n <gravity-icon class=\"pointer expand-icon\"\n [iconSize]=\"'sm-12'\" [iconName]=\"item.is_expanded ? 'arrow-up' : 'arrow-down'\">\n </gravity-icon>\n }\n </div>\n @if (item.is_expanded && item.sub_items) {\n @for (subItem of item.sub_items; track subItem) {\n <div class=\"hr-label item {{size}}-regular pointer\"\n [class.selected]=\"checkIfSelected(subItem)\" (click)=\"selectItem(subItem)\" [class.disabled]=\"subItem?.disabled\"\n (mouseenter)=\"subItem.isHovered = true\" (mouseleave)=\"subItem.isHovered = false\">\n <div class=\"subitem-line\"></div>\n <gravity-currency-display-v2\n [disabled]=\"subItem?.disabled\"\n [currency]=\"{ currency_name: subItem.currency_name,\n currency_iso: subItem.currency_iso, currency_id: subItem.currency_id,\n network_id: subItem.network_id, network_iso: subItem.network_iso,\n pill_type: (checkIfSelected(subItem) || subItem.isHovered) ? 'secondary' : 'primary' }\" >\n </gravity-currency-display-v2>\n <span class=\"hr-body sm-regular gravity-margin-right-sm currency-info\">\n {{ subItem.balance_amount }} {{ subItem.balance_currency }}\n </span>\n </div>\n }\n }\n </div>\n }\n @if (availableOptions.length === 0) {\n <div class=\"hr-label item {{size}}-bold no-results\">\n {{ currentLang == 'es' ? 'Sin resultados' : 'No results' }}\n </div>\n }\n </div>\n </div>\n </div>\n }\n</div>\n\n@if (selectedItems.length > 0) {\n <div class=\"wallet-balance-info {{width}}-width\">\n <p class=\"hr-label sm-regular wallet-balance-text\">{{ currentLang == 'es' ? 'Saldo de cartera' : 'Wallet balance' }}\n : {{ selectedItem.balance_amount }} {{ selectedItem.balance_currency }} @if (fiatRate) {\n <span> | \u2248 {{fiatRate.amount}} {{fiatRate.iso}} </span>\n }</p>\n </div>\n}\n\n", styles: [".scrollbar-sm::-webkit-scrollbar,.dropdown-panel .items-container::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track,.dropdown-panel .items-container::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb,.dropdown-panel .items-container::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover,.dropdown-panel .items-container::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}:root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}.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}:host{display:block}.gravity-input-field{display:flex;cursor:pointer;margin-top:25px;position:relative;align-items:center;border-radius:.3125rem;padding:1rem 12px;width:var(--dropdown-cd-field-input-width);height:var(--dropdown-cd-field-input-height);--text-field-input-field-border-width: .5px;color:var(--text-field-input-field-content-color);background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--text-field-input-field-border-color)}.gravity-input-field gravity-icon{--icon-width: var(--text-field-input-field-content);--icon-height: var(--text-field-input-field-content);--icon-color: var(--text-field-input-field-icon-color)}.gravity-input-field gravity-icon.pointer{cursor:pointer}.gravity-input-field gravity-icon.right{margin-right:var(--icon-margin)}.gravity-input-field .value{width:100%}.dropdown-label{left:0;top:50%;opacity:0;position:absolute;pointer-events:none;transition:all .3s ease;transform:translateY(-50%)}.gravity-input-field.has-value .dropdown-label{opacity:1;top:-25px;transform:translateY(0)}.placeholder{opacity:1;background-color:transparent;transition:opacity .15s ease}.gravity-input-field.has-value .placeholder{opacity:0}.selected-value{transition:transform .3s ease}.gravity-input-field.md{--dropdown-margin: 8px;--dropdown-items-padding: 6px;--text-field-input-field-content: 15px;--dropdown-cd-field-input-height: 58px;--dropdown-cd-items-container-height: 502px}.gravity-input-field.closed{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-dropdown-list-dc-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.open{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.disabled{cursor:default;pointer-events:none;--text-field-input-field-border-width: 1px;--text-field-input-field-icon-color: var(--on-bg-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-border-color: var(--outline-disabled)}.gravity-input-field.selected{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--icon-active-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-dropdown-list-dc-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field.selected ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary{background-color:var(--surface-secondary)}.gravity-input-field.readonly{cursor:initial;--text-field-input-field-border-width: 1px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field:not(.readonly):hover{--text-field-input-field-border-width: 2px;--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-dropdown-list-dc-primary);--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary)}.gravity-input-field:not(.readonly):hover ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary{background-color:var(--surface-primary)}.dropdown-panel{left:-2px;cursor:initial;position:absolute;z-index:5;border-radius:.3125rem;top:calc(100% + var(--dropdown-margin));width:var(--dropdown-cd-field-input-width);background-color:var(--bg-field-full-enabled-primary);border:1px solid var(--outline-dropdown-list-dc-primary)}.dropdown-panel .search-input{display:flex;padding:12px;align-items:center;border-bottom:1px solid var(--outline-field-full-enabled-pressed-primary)}.dropdown-panel .search-input search-input:focus-within{border-bottom:1px solid var(--text-primary)}.dropdown-panel .search-input.disabled{border-bottom:1px solid var(--outline-disabled)}.dropdown-panel .search-input gravity-icon.search-icon{margin-right:.5rem}.dropdown-panel .search-input gravity-icon.reset-icon{margin-left:.5rem}.dropdown-panel .search-input input{margin:0;padding:0;width:100%;border:none;outline:none;border-radius:0;background-color:transparent;color:var(--input-text-full-enabled-primary)}.dropdown-panel .search-input input::placeholder{color:var(--placeholder-empty-enabled-primary)}.dropdown-panel .items-container{overflow:auto;margin:var(--dropdown-margin) 0;max-height:var(--dropdown-cd-items-container-height)}.dropdown-panel .items-container .items{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:0 var(--dropdown-items-padding);max-height:var(--dropdown-cd-items-container-height)}.dropdown-panel .items-container .items .item-container.expanded{display:grid;gap:var(--gravity-spacing-xxs);border-bottom:1px solid var(--bg-disabled)}.dropdown-panel .items-container .items .item-container .item{height:60px;display:flex;cursor:pointer;position:relative;white-space:nowrap;align-items:center;justify-content:space-between;padding:.75rem var(--gravity-spacing-sm);color:var(--label-text-full-enabled-primary)}.dropdown-panel .items-container .items .item-container .item .expand-icon{position:absolute;top:var(--gravity-spacing-md);right:var(--gravity-spacing-sm)}.dropdown-panel .items-container .items .item-container .item .subitem-line{top:-18px;height:40px;position:absolute;border-left:1px solid var(--on-bg-disabled);left:calc(var(--gravity-spacing-md) + var(--gravity-spacing-xxs))}.dropdown-panel .items-container .items .item-container .item:hover:not(.no-results):not(.disabled),.dropdown-panel .items-container .items .item-container .item.selected{border-radius:.3125rem;color:var(--on-bg-menu-button-active-primary);background-color:var(--bg-menu-button-hover-primary)}.dropdown-panel .items-container .items .item-container .item:hover:not(.no-results):not(.disabled) ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary,.dropdown-panel .items-container .items .item-container .item.selected ::ng-deep gravity-currency-display gravity-network-pill .gravity-network-pill.primary{background-color:var(--surface-secondary)!important}.dropdown-panel .items-container .items .item-container .item.disabled{cursor:default;pointer-events:none}.dropdown-panel .items-container .items .item-container .item.disabled .currency-info{color:var(--on-bg-disabled)}.dropdown-panel .items-container .items .item-container .item .currency-info{right:0;bottom:10px;position:absolute}.wallet-balance-info{width:var(--dropdown-cd-field-input-width);text-align:end;margin-top:12px;padding-right:12px}.wallet-balance-text{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px}.wallet-balance-text span{white-space:nowrap}.no-results{cursor:default!important}.standard-width{--dropdown-cd-field-input-width: 350px}.full-width{--dropdown-cd-field-input-width: 100%}\n"], dependencies: [{ kind: "component", type: GravityCurrencyDisplayV2Component, selector: "gravity-currency-display-v2", inputs: ["cypressTag", "disabled", "type", "currency"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
|
|
1170
1215
|
}
|
|
1171
1216
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityDropdownListDisplayComponent, decorators: [{
|
|
1172
1217
|
type: Component,
|
|
@@ -2582,7 +2627,7 @@ class BsDatepickerEffects {
|
|
|
2582
2627
|
container.monthsCalendar = this._store.select(state => state.flaggedMonthsCalendar).pipe(filter(months => !!months));
|
|
2583
2628
|
container.yearsCalendar = this._store.select(state => state.yearsCalendarFlagged).pipe(filter(years => !!years));
|
|
2584
2629
|
container.viewMode = this._store.select(state => state.view?.mode);
|
|
2585
|
-
container.options$ = combineLatest([this._store.select(state => state.displayMonths)]).pipe(map((latest) => ({ displayMonths: latest[0] })));
|
|
2630
|
+
container.options$ = combineLatest([this._store.select(state => state.displayMonths)]).pipe(map$1((latest) => ({ displayMonths: latest[0] })));
|
|
2586
2631
|
return this;
|
|
2587
2632
|
}
|
|
2588
2633
|
/** event handlers */
|
|
@@ -4860,7 +4905,7 @@ class GravityCalendarV2Component {
|
|
|
4860
4905
|
this.inputLabel = value;
|
|
4861
4906
|
}
|
|
4862
4907
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityCalendarV2Component, deps: [{ token: HeaderTypeService }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4863
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityCalendarV2Component, isStandalone: true, selector: "gravity-calendar-v2", inputs: { clearable: "clearable", currentLang: "currentLang", cypressTag: "cypressTag", hasError: "hasError", isDisabled: "isDisabled", isReadonly: "isReadonly", label: "label", placeholder: "placeholder", required: "required", supportText: "supportText", minDate: "minDate", maxDate: "maxDate", size: "size", labelSize: "labelSize", inputType: "inputType", width: "width", calendarType: "calendarType", calendarMode: "calendarMode", selectionMode: "selectionMode", customDate: "customDate", customDates: "customDates" }, outputs: { calendarResponse: "response" }, host: { listeners: { "window:resize": "onResize()" } }, usesOnChanges: true, ngImport: i0, template: "@if (label) {\n <label class=\"hr-label sm-bold {{getStatus()}}\">\n {{ label }} @if (required || hasError) {\n <span>*</span>\n }\n</label>\n}\n<div [attr.elementId]=\"elementId\" class=\"gravity-calendar-field {{size}} {{width}}-width {{getStatus()}} {{inputType}}-{{labelSize}}\">\n <div class=\"mobile-calendar-container\" [class.hide]=\"!showMobileCalendar\" [class.show]=\"showMobileCalendar\">\n <div class=\"mobile-calendar-body\">\n @if (!displayRangePicker) {\n <div class=\"calendar-container\"\n gravityDatePickerInline\n [bsConfig]=\"calendarConfiguration\"\n [isDisabled]=\"isDisabled || isReadonly\"\n [isMobile]=\"isMobile\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [minMode]=\"calendarType\"\n [(bsValue)]=\"selectedDate\"\n (bsValueChange)=\"updateSelectedDate($event)\"\n (onApplyEmit)=\"closeMobileCalendar()\"\n >\n @if (headerTypeService.getCalendarType() === 'days') {\n <div class=\"calendar-close-icon\">\n <gravity-icon class=\"pointer\" (click)=\"closeMobileCalendar()\" [iconName]=\"'unsuccess'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n </div>\n }\n </div>\n }\n\n @if (displayRangePicker) {\n <div class=\"calendar-container\"\n gravityRangePickerInline\n [bsConfig]=\"calendarConfiguration\"\n [isDisabled]=\"isDisabled || isReadonly\"\n [isMobile]=\"isMobile\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [(bsValue)]=\"selectedDates\"\n (bsValueChange)=\"updateSelectedDate($event)\"\n (onApplyEmit)=\"closeMobileCalendar()\">\n @if (headerTypeService.getCalendarType() === 'days') {\n <div class=\"calendar-close-icon\">\n <gravity-icon class=\"pointer\" (click)=\"closeMobileCalendar()\" [iconName]=\"'unsuccess'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n </div>\n }\n </div>\n }\n </div>\n </div>\n\n @if (isMobile && inputType === 'field') {\n <div [attr.data-cy]=\"cypressTag\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n class=\"gravity-calendar-field-trigger\"\n [class.disabled]=\"isDisabled || isReadonly\"\n [class.readonly]=\"isReadonly\"\n (click)=\"openMobileCalendar()\"\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\">\n <gravity-icon class=\"placement-left\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n <input [attr.data-cy]=\"cypressTag + '_input'\"\n [attr.readonly]=\"isReadonly\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n (ngModelChange)=\"onInputLabelChange($event)\"\n [ngModel]=\"inputLabel | dateFormating: currentLang\"\n class=\"hr-label {{size}}-regular\"\n [placeholder]=\"placeholder && placeholder != '' ? placeholder : selectionMode == 'range' ? 'Select date range' : 'Select a ' + calendarType\">\n <gravity-icon [iconName]=\"focusInput ? 'arrow-up' : 'arrow-down'\" [iconSize]=\"'md-16'\"></gravity-icon>\n </div>\n }\n\n @if (!isMobile || inputType === 'label') {\n @if (!displayRangePicker) {\n <div [attr.data-cy]=\"cypressTag\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n class=\"gravity-calendar-field-trigger\"\n [class.disabled]=\"isDisabled || isReadonly\"\n [class.readonly]=\"isReadonly\"\n gravityDatePicker\n [bsConfig]=\"calendarConfiguration\"\n [container]=\"getGtCalendarContainer()\"\n [isDisabled]=\"isDisabled || isReadonly\"\n [isMobile]=\"isMobile\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [minMode]=\"calendarType\"\n [(bsValue)]=\"selectedDate\"\n (blur)=\"focusInput = false\"\n (bsValueChange)=\"updateSelectedDate($event)\"\n (focus)=\"focusInput = true\"\n (onHidden)=\"focusInput = false; restartCalendarType(); isCalendarOpen = false;\"\n (onShown)=\"restartCalendarType(); isCalendarOpen = true;\">\n @if (inputType === 'label') {\n <gravity-dropdown-label [size]=\"labelSize\" [stopPropagation]=\"false\" [isOpen]=\"isCalendarOpen\"\n [label]=\"inputLabel ? (inputLabel | dateFormating: currentLang : false): 'Select a ' + calendarType\" >\n </gravity-dropdown-label>\n }\n @if (inputType === 'field') {\n <gravity-icon class=\"placement-left\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n <input [attr.data-cy]=\"cypressTag + '_input'\"\n [attr.readonly]=\"isReadonly\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n (ngModelChange)=\"onInputLabelChange($event)\" [ngModel]=\"inputLabel | dateFormating: currentLang\"\n class=\"hr-label {{size}}-regular\"\n [placeholder]=\"placeholder && placeholder != '' ? placeholder : 'Select a ' + calendarType\">\n <gravity-icon [iconName]=\"focusInput ? 'arrow-up' : 'arrow-down'\" [iconSize]=\"'md-16'\"></gravity-icon>\n }\n </div>\n }\n @if (displayRangePicker) {\n <div [attr.data-cy]=\"cypressTag\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n class=\"gravity-calendar-field-trigger\"\n [class.disabled]=\"isDisabled\"\n [class.readonly]=\"isReadonly\"\n gravityRangePicker\n [bsConfig]=\"calendarConfiguration\"\n [container]=\"getGtCalendarContainer()\"\n [isDisabled]=\"isDisabled || isReadonly\"\n [isMobile]=\"isMobile\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [(bsValue)]=\"selectedDates\"\n (blur)=\"focusInput = false\"\n (bsValueChange)=\"updateSelectedDate($event)\"\n (focus)=\"focusInput = true\"\n (onHidden)=\"focusInput = false; restartCalendarType()\"\n (onShown)=\"restartCalendarType()\">\n <gravity-icon class=\"placement-left\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n <input [attr.data-cy]=\"cypressTag + '_input'\"\n [attr.readonly]=\"isReadonly\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n (ngModelChange)=\"onInputLabelChange($event)\" [ngModel]=\"inputLabel | dateFormating: currentLang\"\n class=\"hr-label {{size}}-regular\"\n [placeholder]=\"placeholder && placeholder != '' ? placeholder : 'Select a date range'\">\n <gravity-icon [iconName]=\"focusInput ? 'arrow-up' : 'arrow-down'\" [iconSize]=\"'md-16'\"></gravity-icon>\n </div>\n }\n }\n</div>\n@if (supportText) {\n <p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\">\n @if (hasError) {\n <gravity-icon [iconName]=\"'question-circle'\" [iconSize]=\"'md-16'\"></gravity-icon>\n }\n {{ supportText }}\n </p>\n}\n@if (!supportText && getStatus() == 'active' && inputLabel?.length == 0 && required) {\n <p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\">\n {{ currentLang == 'es' ? 'Requerido' : 'Required' }}\n </p>\n}\n", styles: [".text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}.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}:host{display:block}label{color:var(--text-field-label-color);display:block;margin:0 12px 5px}label.active,label.hover{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.open{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.selected,label.error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.error span{color:var(--negative-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.gravity-calendar-field{background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;color:var(--text-field-input-field-content-color);cursor:pointer;height:var(--text-field-input-field-height);position:relative;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width);display:flex;align-items:center}.gravity-calendar-field .placement-left{margin-right:5px}.gravity-calendar-field-trigger{align-items:center;display:flex;height:100%;padding:10px 12px;width:100%}.gravity-calendar-field-trigger gravity-icon{--icon-color: var(--text-field-input-field-icon-color);--icon-height: var(--text-field-input-field-content);--icon-width: var(--text-field-input-field-content)}.gravity-calendar-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:1;outline:none;padding:0;resize:none;width:100%}.gravity-calendar-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-calendar-field input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px var(--bg-field-autofill) inset!important;-webkit-text-fill-color:var(--label-text-full-enabled-primary)!important}.gravity-calendar-field.sm{--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--text-field-input-field-input: 13px}.gravity-calendar-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-calendar-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-calendar-field.sm.full-width,.gravity-calendar-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-calendar-field.md{--icon-margin: 8px;--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--text-field-input-field-input: 18px}.gravity-calendar-field.md.short-width{--text-field-input-field-width: 242px}.gravity-calendar-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-calendar-field.md.full-width,.gravity-calendar-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-calendar-field.active{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary)}.gravity-calendar-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-calendar-field.open{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-calendar-field.selected{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-calendar-field.error{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--negative-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary)}.gravity-calendar-field.error:hover{--text-field-input-field-border-width: 1px}.gravity-calendar-field.disabled{cursor:initial;--text-field-input-field-background-color: var(--bg-disabled);--text-field-input-field-border-color: var(--outline-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-icon-color: var(--on-bg-disabled)}.gravity-calendar-field.readonly{cursor:initial;--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary)}.gravity-calendar-field.label-sm,.gravity-calendar-field.label-md,.gravity-calendar-field.label-lg{border:none}.gravity-calendar-field.label-sm .gravity-calendar-field-trigger,.gravity-calendar-field.label-md .gravity-calendar-field-trigger,.gravity-calendar-field.label-lg .gravity-calendar-field-trigger{justify-content:center;padding:0}.gravity-calendar-field.label-sm{border:none;height:40px;--text-field-input-field-width: 359px !important}.gravity-calendar-field.label-md{border:none;height:30px;--text-field-input-field-width: 359px !important}.gravity-calendar-field.label-lg{border:none;height:12px;--text-field-input-field-width: 344px !important}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}.mobile-calendar-container{width:100%;height:100%;display:flex;overflow:auto;position:fixed;z-index:1;justify-content:center;background-color:var(--surface-secondary)}.mobile-calendar-container.hide{left:1000vw;top:1000vh;visibility:hidden}.mobile-calendar-container.show{top:0;left:0;visibility:visible}.mobile-calendar-container .mobile-calendar-body{max-width:400px;min-width:328px;position:relative;margin:var(--gravity-spacing-sm);width:calc(100% - var(--gravity-spacing-lg));height:calc(100% - var(--gravity-spacing-lg))}.mobile-calendar-container .mobile-calendar-body .calendar-close-icon{display:flex;position:absolute;justify-content:flex-end;right:var(--gravity-spacing-sm)}.mobile-calendar-container .mobile-calendar-body .calendar-close-icon gravity-icon{margin:var(--gravity-spacing-sm) var(--gravity-spacing-xxs) 0 0;--icon-color: var(--bg-calendar-nav-primary)}\n"], dependencies: [{ kind: "directive", type: BsDatepickerInlineDirective, selector: "[gravityDatePickerInline]", inputs: ["bsConfig", "isDisabled", "isMobile", "maxDate", "minDate", "minMode", "bsValue"], outputs: ["bsValueChange", "onApplyEmit"], exportAs: ["gravityDatePickerInline"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "directive", type: BsDaterangepickerInlineDirective, selector: "[gravityRangePickerInline]", inputs: ["bsConfig", "isDisabled", "isMobile", "maxDate", "minDate", "bsValue"], outputs: ["bsValueChange", "onApplyEmit"], exportAs: ["gravityRangePickerInline"] }, { 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.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: "directive", type: BsDatepickerDirective, selector: "[gravityDatePicker]", inputs: ["bsConfig", "container", "isDisabled", "isMobile", "maxDate", "minDate", "minMode", "isOpen", "bsValue"], outputs: ["bsValueChange", "onApplyEmit", "onHidden", "onShown"], exportAs: ["gravityDatePicker"] }, { kind: "component", type: GravityDropdownLabelComponent, selector: "gravity-dropdown-label", inputs: ["label", "fontClass", "isOpen", "stopPropagation", "size", "state"], outputs: ["onClickLabel"] }, { kind: "directive", type: BsDaterangepickerDirective, selector: "[gravityRangePicker]", inputs: ["bsConfig", "container", "isDisabled", "isMobile", "maxDate", "minDate", "isOpen", "bsValue"], outputs: ["bsValueChange", "onApplyEmit", "onHidden", "onShown"], exportAs: ["gravityRangePicker"] }, { kind: "pipe", type: DateAbbreviationPipe, name: "dateFormating" }] }); }
|
|
4908
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityCalendarV2Component, isStandalone: true, selector: "gravity-calendar-v2", inputs: { clearable: "clearable", currentLang: "currentLang", cypressTag: "cypressTag", hasError: "hasError", isDisabled: "isDisabled", isReadonly: "isReadonly", label: "label", placeholder: "placeholder", required: "required", supportText: "supportText", minDate: "minDate", maxDate: "maxDate", size: "size", labelSize: "labelSize", inputType: "inputType", width: "width", calendarType: "calendarType", calendarMode: "calendarMode", selectionMode: "selectionMode", customDate: "customDate", customDates: "customDates" }, outputs: { calendarResponse: "response" }, host: { listeners: { "window:resize": "onResize()" } }, usesOnChanges: true, ngImport: i0, template: "@if (label) {\n <label class=\"hr-label sm-bold {{getStatus()}}\">\n {{ label }} @if (required || hasError) {\n <span>*</span>\n }\n</label>\n}\n<div [attr.elementId]=\"elementId\" class=\"gravity-calendar-field {{size}} {{width}}-width {{getStatus()}} {{inputType}}-{{labelSize}}\">\n <div class=\"mobile-calendar-container\" [class.hide]=\"!showMobileCalendar\" [class.show]=\"showMobileCalendar\">\n <div class=\"mobile-calendar-body\">\n @if (!displayRangePicker) {\n <div class=\"calendar-container\"\n gravityDatePickerInline\n [bsConfig]=\"calendarConfiguration\"\n [isDisabled]=\"isDisabled || isReadonly\"\n [isMobile]=\"isMobile\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [minMode]=\"calendarType\"\n [(bsValue)]=\"selectedDate\"\n (bsValueChange)=\"updateSelectedDate($event)\"\n (onApplyEmit)=\"closeMobileCalendar()\"\n >\n @if (headerTypeService.getCalendarType() === 'days') {\n <div class=\"calendar-close-icon\">\n <gravity-icon class=\"pointer\" (click)=\"closeMobileCalendar()\" [iconName]=\"'unsuccess'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n </div>\n }\n </div>\n }\n\n @if (displayRangePicker) {\n <div class=\"calendar-container\"\n gravityRangePickerInline\n [bsConfig]=\"calendarConfiguration\"\n [isDisabled]=\"isDisabled || isReadonly\"\n [isMobile]=\"isMobile\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [(bsValue)]=\"selectedDates\"\n (bsValueChange)=\"updateSelectedDate($event)\"\n (onApplyEmit)=\"closeMobileCalendar()\">\n @if (headerTypeService.getCalendarType() === 'days') {\n <div class=\"calendar-close-icon\">\n <gravity-icon class=\"pointer\" (click)=\"closeMobileCalendar()\" [iconName]=\"'unsuccess'\" [iconSize]=\"'sm-12'\"></gravity-icon>\n </div>\n }\n </div>\n }\n </div>\n </div>\n\n @if (isMobile && inputType === 'field') {\n <div [attr.data-cy]=\"cypressTag\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n class=\"gravity-calendar-field-trigger\"\n [class.disabled]=\"isDisabled || isReadonly\"\n [class.readonly]=\"isReadonly\"\n (click)=\"openMobileCalendar()\"\n (blur)=\"focusInput = false\"\n (focus)=\"focusInput = true\">\n <gravity-icon class=\"placement-left\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n <input [attr.data-cy]=\"cypressTag + '_input'\"\n [attr.readonly]=\"isReadonly\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n (ngModelChange)=\"onInputLabelChange($event)\"\n [ngModel]=\"inputLabel | dateFormating: currentLang\"\n class=\"hr-label {{size}}-regular\"\n [placeholder]=\"placeholder && placeholder != '' ? placeholder : selectionMode == 'range' ? 'Select date range' : 'Select a ' + calendarType\">\n <gravity-icon [iconName]=\"focusInput ? 'arrow-up' : 'arrow-down'\" [iconSize]=\"'md-16'\"></gravity-icon>\n </div>\n }\n\n @if (!isMobile || inputType === 'label') {\n @if (!displayRangePicker) {\n <div [attr.data-cy]=\"cypressTag\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n class=\"gravity-calendar-field-trigger\"\n [class.disabled]=\"isDisabled || isReadonly\"\n [class.readonly]=\"isReadonly\"\n gravityDatePicker\n [bsConfig]=\"calendarConfiguration\"\n [container]=\"getGtCalendarContainer()\"\n [isDisabled]=\"isDisabled || isReadonly\"\n [isMobile]=\"isMobile\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [minMode]=\"calendarType\"\n [(bsValue)]=\"selectedDate\"\n (blur)=\"focusInput = false\"\n (bsValueChange)=\"updateSelectedDate($event)\"\n (focus)=\"focusInput = true\"\n (onHidden)=\"focusInput = false; restartCalendarType(); isCalendarOpen = false;\"\n (onShown)=\"restartCalendarType(); isCalendarOpen = true;\">\n @if (inputType === 'label') {\n <gravity-dropdown-label [size]=\"labelSize\" [stopPropagation]=\"false\" [isOpen]=\"isCalendarOpen\"\n [label]=\"inputLabel ? (inputLabel | dateFormating: currentLang : false): 'Select a ' + calendarType\" >\n </gravity-dropdown-label>\n }\n @if (inputType === 'field') {\n <gravity-icon class=\"placement-left\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n <input [attr.data-cy]=\"cypressTag + '_input'\"\n [attr.readonly]=\"isReadonly\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n (ngModelChange)=\"onInputLabelChange($event)\" [ngModel]=\"inputLabel | dateFormating: currentLang\"\n class=\"hr-label {{size}}-regular\"\n [placeholder]=\"placeholder && placeholder != '' ? placeholder : 'Select a ' + calendarType\">\n <gravity-icon [iconName]=\"focusInput ? 'arrow-up' : 'arrow-down'\" [iconSize]=\"'md-16'\"></gravity-icon>\n }\n </div>\n }\n @if (displayRangePicker) {\n <div [attr.data-cy]=\"cypressTag\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n class=\"gravity-calendar-field-trigger\"\n [class.disabled]=\"isDisabled\"\n [class.readonly]=\"isReadonly\"\n gravityRangePicker\n [bsConfig]=\"calendarConfiguration\"\n [container]=\"getGtCalendarContainer()\"\n [isDisabled]=\"isDisabled || isReadonly\"\n [isMobile]=\"isMobile\"\n [maxDate]=\"maxDate\"\n [minDate]=\"minDate\"\n [(bsValue)]=\"selectedDates\"\n (blur)=\"focusInput = false\"\n (bsValueChange)=\"updateSelectedDate($event)\"\n (focus)=\"focusInput = true\"\n (onHidden)=\"focusInput = false; restartCalendarType()\"\n (onShown)=\"restartCalendarType()\">\n <gravity-icon class=\"placement-left\" [iconName]=\"'calendar'\" [iconSize]=\"'md-16'\"></gravity-icon>\n <input [attr.data-cy]=\"cypressTag + '_input'\"\n [attr.readonly]=\"isReadonly\"\n [style.cursor]=\"!isDisabled && !isReadonly ? 'pointer' : 'text'\"\n (ngModelChange)=\"onInputLabelChange($event)\" [ngModel]=\"inputLabel | dateFormating: currentLang\"\n class=\"hr-label {{size}}-regular\"\n [placeholder]=\"placeholder && placeholder != '' ? placeholder : 'Select a date range'\">\n <gravity-icon [iconName]=\"focusInput ? 'arrow-up' : 'arrow-down'\" [iconSize]=\"'md-16'\"></gravity-icon>\n </div>\n }\n }\n</div>\n@if (supportText) {\n <p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\">\n @if (hasError) {\n <gravity-icon [iconName]=\"'question-circle'\" [iconSize]=\"'md-16'\"></gravity-icon>\n }\n {{ supportText }}\n </p>\n}\n@if (!supportText && getStatus() == 'active' && inputLabel?.length == 0 && required) {\n <p class=\"hr-label sm-regular supporting-text {{getStatus()}} {{size}}\">\n {{ currentLang == 'es' ? 'Requerido' : 'Required' }}\n </p>\n}\n", styles: [".text-negative{color:var(--negative-primary)}.text-neutro{color:var(--text-primary)}.text-positive{color:var(--positive-primary)}.support-text{margin-left:0;margin-top:.3125rem;padding-inline:1rem}.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}:host{display:block}label{color:var(--text-field-label-color);display:block;margin:0 12px 5px}label.active,label.hover{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.open{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.selected,label.error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.error span{color:var(--negative-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}.gravity-calendar-field{background-color:var(--text-field-input-field-background-color);border:var(--text-field-input-field-border-width) solid var(--outline-field-full-enabled-pressed-primary);border-radius:.3125rem;color:var(--text-field-input-field-content-color);cursor:pointer;height:var(--text-field-input-field-height);position:relative;--text-field-input-field-border-width: .5px;width:var(--text-field-input-field-width);display:flex;align-items:center}.gravity-calendar-field .placement-left{margin-right:5px}.gravity-calendar-field-trigger{align-items:center;display:flex;height:100%;padding:10px 12px;width:100%}.gravity-calendar-field-trigger gravity-icon{--icon-color: var(--text-field-input-field-icon-color);--icon-height: var(--text-field-input-field-content);--icon-width: var(--text-field-input-field-content)}.gravity-calendar-field input{background-color:transparent;border:none;box-shadow:none;color:var(--text-field-input-field-content-color);height:var(--text-field-input-field-input);line-height:1;outline:none;padding:0;resize:none;width:100%}.gravity-calendar-field input::placeholder{color:var(--text-field-input-field-placeholder-color)}.gravity-calendar-field input:-webkit-autofill{-webkit-box-shadow:0 0 0 30px var(--bg-field-autofill) inset!important;-webkit-text-fill-color:var(--label-text-full-enabled-primary)!important}.gravity-calendar-field.sm{--text-field-input-field-height: 29px;--text-field-input-field-content: 9px;--text-field-input-field-input: 13px}.gravity-calendar-field.sm.short-width{--text-field-input-field-width: 195px}.gravity-calendar-field.sm.medium-width{--text-field-input-field-width: 276px}.gravity-calendar-field.sm.full-width,.gravity-calendar-field.sm.fit-width{--text-field-input-field-width: 100%}.gravity-calendar-field.md{--icon-margin: 8px;--text-field-input-field-height: 35px;--text-field-input-field-content: 15px;--text-field-input-field-input: 18px}.gravity-calendar-field.md.short-width{--text-field-input-field-width: 242px}.gravity-calendar-field.md.medium-width{--text-field-input-field-width: 329px}.gravity-calendar-field.md.full-width,.gravity-calendar-field.md.fit-width{--text-field-input-field-width: 100%}.gravity-calendar-field.active{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-empty-enabled-primary);--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--label-text-empty-enabled-primary)}.gravity-calendar-field.active:hover{--text-field-input-field-border-width: 1px}.gravity-calendar-field.open{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-pressed-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-empty-enabled-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-calendar-field.selected{--text-field-input-field-background-color: var(--bg-field-empty-enabled-primary);--text-field-input-field-border-color: var(--outline-field-full-enabled-primary);--text-field-input-field-border-width: 1px;--text-field-input-field-content-color: var(--placeholder-full-enabled-pressed-primary);--text-field-input-field-icon-color: var(--icon-active-primary)}.gravity-calendar-field.error{--text-field-input-field-background-color: var(--bg-field-full-enabled-primary);--text-field-input-field-border-color: var(--negative-primary);--text-field-input-field-content-color: var(--label-text-full-enabled-primary);--text-field-input-field-icon-color: var(--label-text-full-enabled-primary)}.gravity-calendar-field.error:hover{--text-field-input-field-border-width: 1px}.gravity-calendar-field.disabled{cursor:initial;--text-field-input-field-background-color: var(--bg-disabled);--text-field-input-field-border-color: var(--outline-disabled);--text-field-input-field-content-color: var(--on-bg-disabled);--text-field-input-field-icon-color: var(--on-bg-disabled)}.gravity-calendar-field.readonly{cursor:initial;--text-field-input-field-background-color: var(--bg-field-full-read-only-primary);--text-field-input-field-border-color: var(--bg-field-full-read-only-primary);--text-field-input-field-content-color: var(--input-text-full-read-only-primary);--text-field-input-field-icon-color: var(--input-text-full-read-only-primary)}.gravity-calendar-field.label-sm,.gravity-calendar-field.label-md,.gravity-calendar-field.label-lg{border:none}.gravity-calendar-field.label-sm .gravity-calendar-field-trigger,.gravity-calendar-field.label-md .gravity-calendar-field-trigger,.gravity-calendar-field.label-lg .gravity-calendar-field-trigger{justify-content:center;padding:0}.gravity-calendar-field.label-sm{border:none;height:40px;--text-field-input-field-width: 359px !important}.gravity-calendar-field.label-md{border:none;height:30px;--text-field-input-field-width: 359px !important}.gravity-calendar-field.label-lg{border:none;height:12px;--text-field-input-field-width: 344px !important}.supporting-text{align-items:center;color:var(--text-field-supporting-text-color);display:flex;margin:5px 12px 0}.supporting-text.active,.supporting-text.hover{--text-field-supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--text-field-supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--text-field-supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.error{--text-field-supporting-text-color: var(--negative-primary)}.supporting-text.disabled{--text-field-supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--text-field-supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text.sm{--text-field-supporting-text-icon-size: 9px}.supporting-text.md{--text-field-supporting-text-icon-size: 15px}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--text-field-supporting-text-icon-size);--icon-width: var(--text-field-supporting-text-icon-size);margin-right:5px}.mobile-calendar-container{width:100%;height:100%;display:flex;overflow:auto;position:fixed;z-index:1;justify-content:center;background-color:var(--surface-secondary)}.mobile-calendar-container.hide{left:1000vw;top:1000vh;visibility:hidden}.mobile-calendar-container.show{top:0;left:0;visibility:visible}.mobile-calendar-container .mobile-calendar-body{max-width:400px;min-width:328px;position:relative;margin:var(--gravity-spacing-sm);width:calc(100% - var(--gravity-spacing-lg));height:calc(100% - var(--gravity-spacing-lg))}.mobile-calendar-container .mobile-calendar-body .calendar-close-icon{display:flex;position:absolute;justify-content:flex-end;right:var(--gravity-spacing-sm)}.mobile-calendar-container .mobile-calendar-body .calendar-close-icon gravity-icon{margin:var(--gravity-spacing-sm) var(--gravity-spacing-xxs) 0 0;--icon-color: var(--bg-calendar-nav-primary)}\n"], dependencies: [{ kind: "directive", type: BsDatepickerInlineDirective, selector: "[gravityDatePickerInline]", inputs: ["bsConfig", "isDisabled", "isMobile", "maxDate", "minDate", "minMode", "bsValue"], outputs: ["bsValueChange", "onApplyEmit"], exportAs: ["gravityDatePickerInline"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "directive", type: BsDaterangepickerInlineDirective, selector: "[gravityRangePickerInline]", inputs: ["bsConfig", "isDisabled", "isMobile", "maxDate", "minDate", "bsValue"], outputs: ["bsValueChange", "onApplyEmit"], exportAs: ["gravityRangePickerInline"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: BsDatepickerDirective, selector: "[gravityDatePicker]", inputs: ["bsConfig", "container", "isDisabled", "isMobile", "maxDate", "minDate", "minMode", "isOpen", "bsValue"], outputs: ["bsValueChange", "onApplyEmit", "onHidden", "onShown"], exportAs: ["gravityDatePicker"] }, { kind: "component", type: GravityDropdownLabelComponent, selector: "gravity-dropdown-label", inputs: ["label", "fontClass", "isOpen", "stopPropagation", "size", "state"], outputs: ["onClickLabel"] }, { kind: "directive", type: BsDaterangepickerDirective, selector: "[gravityRangePicker]", inputs: ["bsConfig", "container", "isDisabled", "isMobile", "maxDate", "minDate", "isOpen", "bsValue"], outputs: ["bsValueChange", "onApplyEmit", "onHidden", "onShown"], exportAs: ["gravityRangePicker"] }, { kind: "pipe", type: DateAbbreviationPipe, name: "dateFormating" }] }); }
|
|
4864
4909
|
}
|
|
4865
4910
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityCalendarV2Component, decorators: [{
|
|
4866
4911
|
type: Component,
|
|
@@ -5009,13 +5054,13 @@ class GravityDialogComponent {
|
|
|
5009
5054
|
isNewIcon(iconName) {
|
|
5010
5055
|
return GravityIconComponent.isNewIcon(iconName);
|
|
5011
5056
|
}
|
|
5012
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityDialogComponent, deps: [{ token: i1$
|
|
5057
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityDialogComponent, deps: [{ token: i1$3.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5013
5058
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityDialogComponent, isStandalone: true, selector: "ng-component", inputs: { dialogContent: "dialogContent" }, ngImport: i0, template: "<div class=\"dialog-header\">\n <div class=\"hr-title lg-bold title\" [attr.data-cy]=\"'dialog_title'\">\n @if (dialogContent.titleIconName && dialogContent.titleIconName.length > 0) {\n <gravity-icon class=\"title-icon\"\n [iconName]=\"dialogContent.titleIconName\" [title]=\"dialogContent.titleIconName\"\n [size]=\"isNewIcon(dialogContent.titleIconName) ? null : 'md'\"\n [iconSize]=\"isNewIcon(dialogContent.titleIconName) ? 'lg-24' : null\"></gravity-icon>\n }\n {{ dialogContent.title }}\n </div>\n @if (dialogContent.showCloseIcon) {\n <gravity-icon [attr.data-cy]=\"'dialog_closeButton'\" class=\"close\" (click)=\"closeModal()\"\n [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\"\n [title]=\"'Close'\"/>\n }\n</div>\n\n<div class=\"dialog-body\" [class.with-footer]=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\" [attr.data-cy]=\"'dialog_body'\">\n @if (dialogContent.contentTemplateRef) {\n <ng-container *ngTemplateOutlet=\"dialogContent.contentTemplateRef\"></ng-container>\n }\n @if (dialogContent.contentTemplateComponent) {\n <ng-container\n *ngComponentOutlet=\"dialogContent.contentTemplateComponent; inputs: dialogContent.componentInputs\"></ng-container>\n }\n</div>\n\n@if (dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent) {\n <div class=\"dialog-footer\">\n @if (dialogContent.footerTemplateRef) {\n <ng-container *ngTemplateOutlet=\"dialogContent.footerTemplateRef\"></ng-container>\n }\n @if (dialogContent.footerTemplateComponent) {\n <ng-container *ngComponentOutlet=\"dialogContent.footerTemplateComponent\"></ng-container>\n }\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}.dialog-header{align-items:center;background-color:var(--bg-dialog-header-primary);border-radius:.625rem .625rem 0 0;color:var(--on-bg-dialog-header-primary);display:flex;height:5rem;justify-content:space-between;padding:1rem 3rem}.dialog-header .title{align-items:center;display:flex}.dialog-header .title .title-icon{align-items:center;background-color:var(--bg-icon-dialog-primary);display:flex;border-radius:50%;justify-content:center;line-height:0;margin-right:1rem;min-height:2.5rem;min-width:2.5rem;padding:.5rem}.dialog-header .title .title-icon ::ng-deep svg-icon{--icon-color: var(--on-bg-icon-dialog-primary)}.dialog-header gravity-icon.close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:1rem;line-height:0;justify-content:center;width:1rem}.dialog-header gravity-icon.close ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-active-primary)}.dialog-header gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}.dialog-header gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.dialog-body{padding:1.5rem 3rem 2rem;position:relative}.dialog-body.with-footer{padding-bottom:1rem}.dialog-footer:not(:empty){padding:1rem 3rem 1.5rem}\n"], dependencies: [{ kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }] }); }
|
|
5014
5059
|
}
|
|
5015
5060
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityDialogComponent, decorators: [{
|
|
5016
5061
|
type: Component,
|
|
5017
5062
|
args: [{ standalone: true, imports: [GravityIconComponent, NgTemplateOutlet, NgComponentOutlet], template: "<div class=\"dialog-header\">\n <div class=\"hr-title lg-bold title\" [attr.data-cy]=\"'dialog_title'\">\n @if (dialogContent.titleIconName && dialogContent.titleIconName.length > 0) {\n <gravity-icon class=\"title-icon\"\n [iconName]=\"dialogContent.titleIconName\" [title]=\"dialogContent.titleIconName\"\n [size]=\"isNewIcon(dialogContent.titleIconName) ? null : 'md'\"\n [iconSize]=\"isNewIcon(dialogContent.titleIconName) ? 'lg-24' : null\"></gravity-icon>\n }\n {{ dialogContent.title }}\n </div>\n @if (dialogContent.showCloseIcon) {\n <gravity-icon [attr.data-cy]=\"'dialog_closeButton'\" class=\"close\" (click)=\"closeModal()\"\n [iconName]=\"'unsuccess'\" [iconSize]=\"'md-16'\"\n [title]=\"'Close'\"/>\n }\n</div>\n\n<div class=\"dialog-body\" [class.with-footer]=\"dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent\" [attr.data-cy]=\"'dialog_body'\">\n @if (dialogContent.contentTemplateRef) {\n <ng-container *ngTemplateOutlet=\"dialogContent.contentTemplateRef\"></ng-container>\n }\n @if (dialogContent.contentTemplateComponent) {\n <ng-container\n *ngComponentOutlet=\"dialogContent.contentTemplateComponent; inputs: dialogContent.componentInputs\"></ng-container>\n }\n</div>\n\n@if (dialogContent.footerTemplateRef || dialogContent.footerTemplateComponent) {\n <div class=\"dialog-footer\">\n @if (dialogContent.footerTemplateRef) {\n <ng-container *ngTemplateOutlet=\"dialogContent.footerTemplateRef\"></ng-container>\n }\n @if (dialogContent.footerTemplateComponent) {\n <ng-container *ngComponentOutlet=\"dialogContent.footerTemplateComponent\"></ng-container>\n }\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}.dialog-header{align-items:center;background-color:var(--bg-dialog-header-primary);border-radius:.625rem .625rem 0 0;color:var(--on-bg-dialog-header-primary);display:flex;height:5rem;justify-content:space-between;padding:1rem 3rem}.dialog-header .title{align-items:center;display:flex}.dialog-header .title .title-icon{align-items:center;background-color:var(--bg-icon-dialog-primary);display:flex;border-radius:50%;justify-content:center;line-height:0;margin-right:1rem;min-height:2.5rem;min-width:2.5rem;padding:.5rem}.dialog-header .title .title-icon ::ng-deep svg-icon{--icon-color: var(--on-bg-icon-dialog-primary)}.dialog-header gravity-icon.close{align-items:center;border-radius:50%;cursor:pointer;display:flex;height:1rem;line-height:0;justify-content:center;width:1rem}.dialog-header gravity-icon.close ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-active-primary)}.dialog-header gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}.dialog-header gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.dialog-body{padding:1.5rem 3rem 2rem;position:relative}.dialog-body.with-footer{padding-bottom:1rem}.dialog-footer:not(:empty){padding:1rem 3rem 1.5rem}\n"] }]
|
|
5018
|
-
}], ctorParameters: () => [{ type: i1$
|
|
5063
|
+
}], ctorParameters: () => [{ type: i1$3.NgbActiveModal }], propDecorators: { dialogContent: [{
|
|
5019
5064
|
type: Input
|
|
5020
5065
|
}] } });
|
|
5021
5066
|
|
|
@@ -5043,13 +5088,13 @@ class GravityNotificationComponent {
|
|
|
5043
5088
|
}
|
|
5044
5089
|
this.closeModal();
|
|
5045
5090
|
}
|
|
5046
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityNotificationComponent, deps: [{ token: i1$
|
|
5091
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityNotificationComponent, deps: [{ token: i1$3.NgbActiveModal }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5047
5092
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityNotificationComponent, isStandalone: true, selector: "ng-component", inputs: { notificationContent: "notificationContent" }, ngImport: i0, template: "<main class=\"alert-content {{notificationContent.state}}\" [attr.data-cy]=\"'notification'\">\n <gravity-icon class=\"close\" (click)=\"closeModal()\" data-cy=\"gravity_notification_informative_close_icon\"\n [iconName]=\"'unsuccess'\" [title]=\"'Close'\" [size]=\"'sm'\" [iconSize]=\"'sm-12'\" [attr.data-cy]=\"'notification_closeButton'\"></gravity-icon>\n\n <div class=\"title\">\n <gravity-icon class=\"title-icon\" [iconName]=\"iconByState\" [iconSize]=\"'md-16'\"></gravity-icon>\n <h1 class=\"hr-title lg-bold\" [attr.data-cy]=\"'notification_title'\">{{notificationContent.title}}</h1>\n </div>\n\n <div class=\"content\">\n <h2 class=\"hr-body md-regular\" [attr.data-cy]=\"'notification_body'\" [innerHTML]=\"notificationContent.text\"></h2>\n @if (notificationContent.details) {\n <h2 class=\"hr-body md-regular\">\n Detail: <b>{{notificationContent.details}}</b>\n </h2>\n }\n @if (notificationContent.errorCode) {\n <h2 class=\"error-code hr-body md-regular\">\n Error code: <b>{{notificationContent.errorCode}}</b>\n </h2>\n }\n </div>\n\n @if (notificationContent.buttonText) {\n <div class=\"notification-action\">\n <gravity-button [type]=\"'primary'\" [size]=\"'sm'\" (click)=\"onCustomAction()\" [attr.data-cy]=\"'notification_customButton'\">\n {{notificationContent.buttonText}}\n </gravity-button>\n </div>\n }\n</main>\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}main.alert-content{border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-md);position:relative;display:grid}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;position:absolute;top:var(--gravity-spacing-md);right:var(--gravity-spacing-md)}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{display:flex;align-items:center;padding-right:var(--gravity-spacing-sm)}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}.content .error-code{margin-top:var(--gravity-spacing-md)}.notification-action{display:flex;justify-content:center;margin-top:var(--gravity-spacing-xs)}\n"], dependencies: [{ kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "fullWidth", "isLoading", "showContent", "iconName", "size", "iconPosition", "customState", "type"] }] }); }
|
|
5048
5093
|
}
|
|
5049
5094
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityNotificationComponent, decorators: [{
|
|
5050
5095
|
type: Component,
|
|
5051
5096
|
args: [{ standalone: true, imports: [GravityIconComponent, GravityButtonComponent], template: "<main class=\"alert-content {{notificationContent.state}}\" [attr.data-cy]=\"'notification'\">\n <gravity-icon class=\"close\" (click)=\"closeModal()\" data-cy=\"gravity_notification_informative_close_icon\"\n [iconName]=\"'unsuccess'\" [title]=\"'Close'\" [size]=\"'sm'\" [iconSize]=\"'sm-12'\" [attr.data-cy]=\"'notification_closeButton'\"></gravity-icon>\n\n <div class=\"title\">\n <gravity-icon class=\"title-icon\" [iconName]=\"iconByState\" [iconSize]=\"'md-16'\"></gravity-icon>\n <h1 class=\"hr-title lg-bold\" [attr.data-cy]=\"'notification_title'\">{{notificationContent.title}}</h1>\n </div>\n\n <div class=\"content\">\n <h2 class=\"hr-body md-regular\" [attr.data-cy]=\"'notification_body'\" [innerHTML]=\"notificationContent.text\"></h2>\n @if (notificationContent.details) {\n <h2 class=\"hr-body md-regular\">\n Detail: <b>{{notificationContent.details}}</b>\n </h2>\n }\n @if (notificationContent.errorCode) {\n <h2 class=\"error-code hr-body md-regular\">\n Error code: <b>{{notificationContent.errorCode}}</b>\n </h2>\n }\n </div>\n\n @if (notificationContent.buttonText) {\n <div class=\"notification-action\">\n <gravity-button [type]=\"'primary'\" [size]=\"'sm'\" (click)=\"onCustomAction()\" [attr.data-cy]=\"'notification_customButton'\">\n {{notificationContent.buttonText}}\n </gravity-button>\n </div>\n }\n</main>\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}main.alert-content{border-bottom:.75rem solid var(--notification-highlight-color);border-radius:.625rem;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-md);position:relative;display:grid}main.alert-content.success{--notification-highlight-color: var(--notification-success-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-success-primary);--notification-icon-color: var(--on-bg-icon-notification-success-primary)}main.alert-content.error{--notification-highlight-color: var(--notification-error-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-error-primary);--notification-icon-color: var(--on-bg-icon-notification-error-primary)}main.alert-content.warning{--notification-highlight-color: var(--notification-warning-highlight-primary);--notification-icon-background-color: var(--bg-icon-notification-warning-primary);--notification-icon-color: var(--on-bg-icon-notification-warning-primary)}gravity-icon.close{cursor:pointer;position:absolute;top:var(--gravity-spacing-md);right:var(--gravity-spacing-md)}gravity-icon.close:hover{background-color:var(--bg-close-dialog-header-hover-primary)}gravity-icon.close:hover ::ng-deep svg-icon{--icon-color: var(--close-dialog-header-hover-primary)}.title{display:flex;align-items:center;padding-right:var(--gravity-spacing-sm)}.title gravity-icon.title-icon{align-items:center;background-color:var(--notification-icon-background-color);border-radius:50%;display:flex;height:2rem;line-height:0;justify-content:center;margin-right:1rem;max-height:2rem;max-width:2rem;min-height:2rem;min-width:2rem;padding:.5rem;width:2rem}.title gravity-icon.title-icon ::ng-deep svg-icon{--icon-color: var(--notification-icon-color)}.content{margin-left:3rem}.content .error-code{margin-top:var(--gravity-spacing-md)}.notification-action{display:flex;justify-content:center;margin-top:var(--gravity-spacing-xs)}\n"] }]
|
|
5052
|
-
}], ctorParameters: () => [{ type: i1$
|
|
5097
|
+
}], ctorParameters: () => [{ type: i1$3.NgbActiveModal }], propDecorators: { notificationContent: [{
|
|
5053
5098
|
type: Input
|
|
5054
5099
|
}] } });
|
|
5055
5100
|
|
|
@@ -5893,7 +5938,7 @@ class GravityTextFieldNumberOnlyComponent {
|
|
|
5893
5938
|
this.inputValue = value;
|
|
5894
5939
|
}
|
|
5895
5940
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityTextFieldNumberOnlyComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5896
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityTextFieldNumberOnlyComponent, isStandalone: true, selector: "gravity-text-field-number-only", inputs: { currentLang: "currentLang", customState: "customState", cypressTag: "cypressTag", label: "label", required: "required", size: "size", supportText: "supportText", labelExtraText: "labelExtraText" }, outputs: { textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "digitContainer0", first: true, predicate: ["digitContainer0"], descendants: true }, { propertyName: "digitContainer1", first: true, predicate: ["digitContainer1"], descendants: true }, { propertyName: "digitContainer2", first: true, predicate: ["digitContainer2"], descendants: true }, { propertyName: "digitContainer3", first: true, predicate: ["digitContainer3"], descendants: true }, { propertyName: "digitContainer4", first: true, predicate: ["digitContainer4"], descendants: true }, { propertyName: "digitContainer5", first: true, predicate: ["digitContainer5"], descendants: true }], ngImport: i0, template: "<div class=\"{{size}}\" style=\"width: fit-content\">\n @if (label) {\n <label class=\"hr-label sm-bold {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\">\n {{label}}\n @if (required || getTextFieldStatus() == 'typed-error') {\n <span>*</span>\n }\n @if (labelExtraText) {\n <span [class.extra-text]=\"labelExtraText\">{{ labelExtraText }}</span>\n }\n </label>\n}\n<div class=\"text-field-number-only-wrapper {{getTextFieldStatus()}}\">\n <textarea [attr.data-cy]=\"cypressTag ? 'textFieldNumbers_'+cypressTag : null\"\n [attr.disabled]=\"customState == 'disabled' ? true : null\"\n [attr.readonly]=\"customState == 'readonly' ? true : null\"\n #textAreaElement\n\n autocomplete=\"off\"\n class=\"hr-label {{size}}-regular\"\n cols=\"6\"\n maxlength=\"6\"\n minlength=\"6\"\n inputmode=\"numeric\"\n placeholder=\"______\"\n rows=\"1\"\n type=\"text\"\n [ngModel]=\"inputValue\"\n (ngModelChange)=\"onInputValueChange($event)\"\n\n (blur)=\"focusInput = false\"\n (click)=\"setFocus(textAreaElement)\"\n (focus)=\"focusInput = true\"\n (keydown)=\"onKeyDownEvent($event)\"\n (keyup)=\"setFocus(textAreaElement); returnValue()\"></textarea>\n <div class=\"digit-container\" #digitContainer0></div>\n <div class=\"digit-container\" #digitContainer1></div>\n <div class=\"digit-container\" #digitContainer2></div>\n <div class=\"digit-container\" #digitContainer3></div>\n <div class=\"digit-container\" #digitContainer4></div>\n <div class=\"digit-container\" #digitContainer5></div>\n <div class=\"overflow\"></div>\n</div>\n@if (supportText) {\n <p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\"\n >\n @if (getTextFieldStatus() == 'typed-error') {\n <gravity-icon [iconName]=\"'question-circle'\"\n [iconSize]=\"'sm-12'\"></gravity-icon>\n }\n {{supportText}}\n </p>\n}\n</div>\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}:host{display:block}label{color:var(--text-field-label-color);display:block;margin:var(--label-margin)}label.active,label.hover,label.autofill{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.typing{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.typed,label.typed-error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.typed-error span{color:var(--negative-primary)}label.typed-positive{--text-field-label-color: var(--label-text-full-enabled-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label .extra-text{font-weight:343!important;color:var(--placeholder-empty-enabled-primary)!important;margin-left:.25rem}.text-field-number-only-wrapper{display:flex;grid-column-gap:var(--text-field-number-only-wrapper-grid-column-gap);--input-border-width: .5px;position:relative}textarea{background-color:transparent;border:0;color:var(--textarea-color);height:var(--textarea-height);letter-spacing:var(--textarea-letter-spacing)!important;line-height:1;resize:none;outline:0;padding:var(--textarea-padding);position:absolute;width:var(--textarea-width)}textarea::placeholder{color:var(--textarea-placeholder-color)}textarea.hide-caret{caret-color:transparent}.digit-container{background-color:var(--input-background-color);border:var(--input-border-width) solid var(--input-border-color);border-radius:.3125rem;height:var(--textarea-height);padding:var(--input-padding);width:var(--input-width)}.overflow{height:var(--textarea-height);left:100%;position:absolute;top:0;width:var(--input-width)}.text-field-number-only-wrapper.active{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-empty-enabled-primary);--textarea-color: var(--placeholder-empty-enabled-primary);--textarea-placeholder-color: var(--placeholder-empty-enabled-primary)}.text-field-number-only-wrapper.active:hover{--input-border-width: 1px}.text-field-number-only-wrapper.hover{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-empty-enabled-primary);--input-border-width: 1px;--textarea-color: var(--placeholder-empty-enabled-primary);--textarea-placeholder-color: var(--placeholder-empty-enabled-primary)}.text-field-number-only-wrapper.typing{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-full-enabled-primary);--input-border-width: 1px;--textarea-color: var(--placeholder-full-enabled-pressed-primary);--textarea-placeholder-color: var(--placeholder-full-enabled-pressed-primary)}.text-field-number-only-wrapper.typing .digit-container.focused{--input-border-color: var(--outline-field-full-enabled-pressed-primary);outline:var(--input-border-width) solid var(--input-border-color)}.text-field-number-only-wrapper.typed{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--outline-field-full-enabled-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.typed-error{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--negative-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.typed-positive{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--positive-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.disabled,.text-field-number-only-wrapper input[disabled]{--input-background-color: var(--bg-field-empty-disabled-primary);--input-border-color: var(--outline-disabled);--input-border-width: 1px;--textarea-color: var(--on-bg-disabled);--textarea-placeholder-color: var(--on-bg-disabled)}.text-field-number-only-wrapper.readonly,.text-field-number-only-wrapper input[readonly]{--input-background-color: var(--bg-field-full-read-only-primary);--input-border-color: var(--bg-field-full-read-only-primary);--input-border-width: 1px;--textarea-color: var(--input-text-full-read-only-primary);--textarea-placeholder-color: var(--input-text-full-read-only-primary)}.supporting-text{align-items:center;color:var(--supporting-text-color);display:flex;margin-left:0;margin-top:var(--supporting-text-margin-top)}.supporting-text.active,.supporting-text.hover,.supporting-text.autofill{--supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.typed-error{--supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--supporting-text-color: var(--positive-primary)}.supporting-text.disabled{--supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--supporting-text-icon-size);--icon-width: var(--supporting-text-icon-size);margin-right:5px}\n", ".md{--label-margin: 0 0 8px;--input-padding: 11px 12px;--input-width: 35px;--supporting-text-icon-size: 9px;--supporting-text-margin-top: 8px;--text-field-number-only-wrapper-grid-column-gap: 5px;--textarea-height: 35px;--textarea-letter-spacing: 31.3px;--textarea-padding: 9px 12px;--textarea-width: 290px}.md .text-field-number-only-wrapper textarea:placeholder-shown{--textarea-letter-spacing: 32.5px}.sm{--label-margin: 0 0 5px;--input-padding: 8px 12px;--input-width: 33px;--supporting-text-icon-size: 9px;--supporting-text-margin-top: 5px;--text-field-number-only-wrapper-grid-column-gap: 4px;--textarea-height: 29px;--textarea-letter-spacing: 30.5px;--textarea-padding: var(--input-padding);--textarea-width: 260px}.sm .text-field-number-only-wrapper textarea:placeholder-shown{--textarea-letter-spacing: 31.5px}\n"], dependencies: [{ 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
5941
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityTextFieldNumberOnlyComponent, isStandalone: true, selector: "gravity-text-field-number-only", inputs: { currentLang: "currentLang", customState: "customState", cypressTag: "cypressTag", label: "label", required: "required", size: "size", supportText: "supportText", labelExtraText: "labelExtraText" }, outputs: { textFieldValueResponse: "response" }, viewQueries: [{ propertyName: "digitContainer0", first: true, predicate: ["digitContainer0"], descendants: true }, { propertyName: "digitContainer1", first: true, predicate: ["digitContainer1"], descendants: true }, { propertyName: "digitContainer2", first: true, predicate: ["digitContainer2"], descendants: true }, { propertyName: "digitContainer3", first: true, predicate: ["digitContainer3"], descendants: true }, { propertyName: "digitContainer4", first: true, predicate: ["digitContainer4"], descendants: true }, { propertyName: "digitContainer5", first: true, predicate: ["digitContainer5"], descendants: true }], ngImport: i0, template: "<div class=\"{{size}}\" style=\"width: fit-content\">\n @if (label) {\n <label class=\"hr-label sm-bold {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\">\n {{label}}\n @if (required || getTextFieldStatus() == 'typed-error') {\n <span>*</span>\n }\n @if (labelExtraText) {\n <span [class.extra-text]=\"labelExtraText\">{{ labelExtraText }}</span>\n }\n </label>\n}\n<div class=\"text-field-number-only-wrapper {{getTextFieldStatus()}}\">\n <textarea [attr.data-cy]=\"cypressTag ? 'textFieldNumbers_'+cypressTag : null\"\n [attr.disabled]=\"customState == 'disabled' ? true : null\"\n [attr.readonly]=\"customState == 'readonly' ? true : null\"\n #textAreaElement\n\n autocomplete=\"off\"\n class=\"hr-label {{size}}-regular\"\n cols=\"6\"\n maxlength=\"6\"\n minlength=\"6\"\n inputmode=\"numeric\"\n placeholder=\"______\"\n rows=\"1\"\n type=\"text\"\n [ngModel]=\"inputValue\"\n (ngModelChange)=\"onInputValueChange($event)\"\n\n (blur)=\"focusInput = false\"\n (click)=\"setFocus(textAreaElement)\"\n (focus)=\"focusInput = true\"\n (keydown)=\"onKeyDownEvent($event)\"\n (keyup)=\"setFocus(textAreaElement); returnValue()\"></textarea>\n <div class=\"digit-container\" #digitContainer0></div>\n <div class=\"digit-container\" #digitContainer1></div>\n <div class=\"digit-container\" #digitContainer2></div>\n <div class=\"digit-container\" #digitContainer3></div>\n <div class=\"digit-container\" #digitContainer4></div>\n <div class=\"digit-container\" #digitContainer5></div>\n <div class=\"overflow\"></div>\n</div>\n@if (supportText) {\n <p class=\"hr-label sm-regular supporting-text {{getTextFieldStatus()}}\" [class.custom-label-size]=\"size == 'sm'\"\n >\n @if (getTextFieldStatus() == 'typed-error') {\n <gravity-icon [iconName]=\"'question-circle'\"\n [iconSize]=\"'sm-12'\"></gravity-icon>\n }\n {{supportText}}\n </p>\n}\n</div>\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}:root{--gravity-spacing-none: 0;--gravity-spacing-xxxs: .125rem;--gravity-spacing-xxs: .25rem;--gravity-spacing-xs: .5rem;--gravity-spacing-sm: 1rem;--gravity-spacing-md: 1.5rem;--gravity-spacing-lg: 2rem;--gravity-spacing-xl: 2.5rem;--gravity-spacing-xxl: 3rem;--gravity-spacing-xxxl: 4rem;--gravity-spacing-xxxxl: 6rem;--gravity-spacing-xxxxxl: 12rem}.gravity-padding-none{padding:0!important}.gravity-padding-top-none{padding-top:0!important}.gravity-padding-bottom-none{padding-bottom:0!important}.gravity-padding-left-none{padding-left:0!important}.gravity-padding-right-none{padding-right:0!important}.gravity-padding-block-none{padding-block:0!important}.gravity-padding-inline-none{padding-inline:0!important}.gravity-padding-xxs{padding:.25rem!important}.gravity-padding-top-xxs{padding-top:.25rem!important}.gravity-padding-bottom-xxs{padding-bottom:.25rem!important}.gravity-padding-left-xxs{padding-left:.25rem!important}.gravity-padding-right-xxs{padding-right:.25rem!important}.gravity-padding-block-xxs{padding-block:.25rem!important}.gravity-padding-inline-xxs{padding-inline:.25rem!important}.gravity-padding-xs{padding:.5rem!important}.gravity-padding-top-xs{padding-top:.5rem!important}.gravity-padding-bottom-xs{padding-bottom:.5rem!important}.gravity-padding-left-xs{padding-left:.5rem!important}.gravity-padding-right-xs{padding-right:.5rem!important}.gravity-padding-block-xs{padding-block:.5rem!important}.gravity-padding-inline-xs{padding-inline:.5rem!important}.gravity-padding-sm{padding:1rem!important}.gravity-padding-top-sm{padding-top:1rem!important}.gravity-padding-bottom-sm{padding-bottom:1rem!important}.gravity-padding-left-sm{padding-left:1rem!important}.gravity-padding-right-sm{padding-right:1rem!important}.gravity-padding-block-sm{padding-block:1rem!important}.gravity-padding-inline-sm{padding-inline:1rem!important}.gravity-padding-md{padding:1.5rem!important}.gravity-padding-top-md{padding-top:1.5rem!important}.gravity-padding-bottom-md{padding-bottom:1.5rem!important}.gravity-padding-left-md{padding-left:1.5rem!important}.gravity-padding-right-md{padding-right:1.5rem!important}.gravity-padding-block-md{padding-block:1.5rem!important}.gravity-padding-inline-md{padding-inline:1.5rem!important}.gravity-padding-lg{padding:2rem!important}.gravity-padding-top-lg{padding-top:2rem!important}.gravity-padding-bottom-lg{padding-bottom:2rem!important}.gravity-padding-left-lg{padding-left:2rem!important}.gravity-padding-right-lg{padding-right:2rem!important}.gravity-padding-block-lg{padding-block:2rem!important}.gravity-padding-inline-lg{padding-inline:2rem!important}.gravity-padding-xl{padding:2.5rem!important}.gravity-padding-top-xl{padding-top:2.5rem!important}.gravity-padding-bottom-xl{padding-bottom:2.5rem!important}.gravity-padding-left-xl{padding-left:2.5rem!important}.gravity-padding-right-xl{padding-right:2.5rem!important}.gravity-padding-block-xl{padding-block:2.5rem!important}.gravity-padding-inline-xl{padding-inline:2.5rem!important}.gravity-padding-xxl{padding:3rem!important}.gravity-padding-top-xxl{padding-top:3rem!important}.gravity-padding-bottom-xxl{padding-bottom:3rem!important}.gravity-padding-left-xxl{padding-left:3rem!important}.gravity-padding-right-xxl{padding-right:3rem!important}.gravity-padding-block-xxl{padding-block:3rem!important}.gravity-padding-inline-xxl{padding-inline:3rem!important}.gravity-padding-xxxl{padding:4rem!important}.gravity-padding-top-xxxl{padding-top:4rem!important}.gravity-padding-bottom-xxxl{padding-bottom:4rem!important}.gravity-padding-left-xxxl{padding-left:4rem!important}.gravity-padding-right-xxxl{padding-right:4rem!important}.gravity-padding-block-xxxl{padding-block:4rem!important}.gravity-padding-inline-xxxl{padding-inline:4rem!important}.gravity-padding-xxxxl{padding:6rem!important}.gravity-padding-top-xxxxl{padding-top:6rem!important}.gravity-padding-bottom-xxxxl{padding-bottom:6rem!important}.gravity-padding-left-xxxxl{padding-left:6rem!important}.gravity-padding-right-xxxxl{padding-right:6rem!important}.gravity-padding-block-xxxxl{padding-block:6rem!important}.gravity-padding-inline-xxxxl{padding-inline:6rem!important}.gravity-padding-xxxxxl{padding:12rem!important}.gravity-padding-top-xxxxxl{padding-top:12rem!important}.gravity-padding-bottom-xxxxxl{padding-bottom:12rem!important}.gravity-padding-left-xxxxxl{padding-left:12rem!important}.gravity-padding-right-xxxxxl{padding-right:12rem!important}.gravity-padding-block-xxxxxl{padding-block:12rem!important}.gravity-padding-inline-xxxxxl{padding-inline:12rem!important}.gravity-margin-none{margin:0!important}.gravity-margin-top-none{margin-top:0!important}.gravity-margin-bottom-none{margin-bottom:0!important}.gravity-margin-left-none{margin-left:0!important}.gravity-margin-right-none{margin-right:0!important}.gravity-margin-block-none{margin-block:0!important}.gravity-margin-inline-none{margin-inline:0!important}.gravity-margin-xxs{margin:.25rem!important}.gravity-margin-top-xxs{margin-top:.25rem!important}.gravity-margin-bottom-xxs{margin-bottom:.25rem!important}.gravity-margin-left-xxs{margin-left:.25rem!important}.gravity-margin-right-xxs{margin-right:.25rem!important}.gravity-margin-block-xxs{margin-block:.25rem!important}.gravity-margin-inline-xxs{margin-inline:.25rem!important}.gravity-margin-xs{margin:.5rem!important}.gravity-margin-top-xs{margin-top:.5rem!important}.gravity-margin-bottom-xs{margin-bottom:.5rem!important}.gravity-margin-left-xs{margin-left:.5rem!important}.gravity-margin-right-xs{margin-right:.5rem!important}.gravity-margin-block-xs{margin-block:.5rem!important}.gravity-margin-inline-xs{margin-inline:.5rem!important}.gravity-margin-sm{margin:1rem!important}.gravity-margin-top-sm{margin-top:1rem!important}.gravity-margin-bottom-sm{margin-bottom:1rem!important}.gravity-margin-left-sm{margin-left:1rem!important}.gravity-margin-right-sm{margin-right:1rem!important}.gravity-margin-block-sm{margin-block:1rem!important}.gravity-margin-inline-sm{margin-inline:1rem!important}.gravity-margin-md{margin:1.5rem!important}.gravity-margin-top-md{margin-top:1.5rem!important}.gravity-margin-bottom-md{margin-bottom:1.5rem!important}.gravity-margin-left-md{margin-left:1.5rem!important}.gravity-margin-right-md{margin-right:1.5rem!important}.gravity-margin-block-md{margin-block:1.5rem!important}.gravity-margin-inline-md{margin-inline:1.5rem!important}.gravity-margin-lg{margin:2rem!important}.gravity-margin-top-lg{margin-top:2rem!important}.gravity-margin-bottom-lg{margin-bottom:2rem!important}.gravity-margin-left-lg{margin-left:2rem!important}.gravity-margin-right-lg{margin-right:2rem!important}.gravity-margin-block-lg{margin-block:2rem!important}.gravity-margin-inline-lg{margin-inline:2rem!important}.gravity-margin-xl{margin:2.5rem!important}.gravity-margin-top-xl{margin-top:2.5rem!important}.gravity-margin-bottom-xl{margin-bottom:2.5rem!important}.gravity-margin-left-xl{margin-left:2.5rem!important}.gravity-margin-right-xl{margin-right:2.5rem!important}.gravity-margin-block-xl{margin-block:2.5rem!important}.gravity-margin-inline-xl{margin-inline:2.5rem!important}.gravity-margin-xxl{margin:3rem!important}.gravity-margin-top-xxl{margin-top:3rem!important}.gravity-margin-bottom-xxl{margin-bottom:3rem!important}.gravity-margin-left-xxl{margin-left:3rem!important}.gravity-margin-right-xxl{margin-right:3rem!important}.gravity-margin-block-xxl{margin-block:3rem!important}.gravity-margin-inline-xxl{margin-inline:3rem!important}.gravity-margin-xxxl{margin:4rem!important}.gravity-margin-top-xxxl{margin-top:4rem!important}.gravity-margin-bottom-xxxl{margin-bottom:4rem!important}.gravity-margin-left-xxxl{margin-left:4rem!important}.gravity-margin-right-xxxl{margin-right:4rem!important}.gravity-margin-block-xxxl{margin-block:4rem!important}.gravity-margin-inline-xxxl{margin-inline:4rem!important}.gravity-margin-xxxxl{margin:6rem!important}.gravity-margin-top-xxxxl{margin-top:6rem!important}.gravity-margin-bottom-xxxxl{margin-bottom:6rem!important}.gravity-margin-left-xxxxl{margin-left:6rem!important}.gravity-margin-right-xxxxl{margin-right:6rem!important}.gravity-margin-block-xxxxl{margin-block:6rem!important}.gravity-margin-inline-xxxxl{margin-inline:6rem!important}.gravity-margin-xxxxxl{margin:12rem!important}.gravity-margin-top-xxxxxl{margin-top:12rem!important}.gravity-margin-bottom-xxxxxl{margin-bottom:12rem!important}.gravity-margin-left-xxxxxl{margin-left:12rem!important}.gravity-margin-right-xxxxxl{margin-right:12rem!important}.gravity-margin-block-xxxxxl{margin-block:12rem!important}.gravity-margin-inline-xxxxxl{margin-inline:12rem!important}:host{display:block}label{color:var(--text-field-label-color);display:block;margin:var(--label-margin)}label.active,label.hover,label.autofill{--text-field-label-color: var(--label-text-empty-enabled-primary)}label.typing{--text-field-label-color: var(--label-text-full-enabled-pressed-primary)}label.typed,label.typed-error{--text-field-label-color: var(--label-text-full-enabled-primary)}label.typed-error span{color:var(--negative-primary)}label.typed-positive{--text-field-label-color: var(--label-text-full-enabled-primary)}label.disabled{--text-field-label-color: var(--on-bg-disabled)}label.readonly{--text-field-label-color: var(--label-text-full-read-only-primary)}label .extra-text{font-weight:343!important;color:var(--placeholder-empty-enabled-primary)!important;margin-left:.25rem}.text-field-number-only-wrapper{display:flex;grid-column-gap:var(--text-field-number-only-wrapper-grid-column-gap);--input-border-width: .5px;position:relative}textarea{background-color:transparent;border:0;color:var(--textarea-color);height:var(--textarea-height);letter-spacing:var(--textarea-letter-spacing)!important;line-height:1;resize:none;outline:0;padding:var(--textarea-padding);position:absolute;width:var(--textarea-width)}textarea::placeholder{color:var(--textarea-placeholder-color)}textarea.hide-caret{caret-color:transparent}.digit-container{background-color:var(--input-background-color);border:var(--input-border-width) solid var(--input-border-color);border-radius:.3125rem;height:var(--textarea-height);padding:var(--input-padding);width:var(--input-width)}.overflow{height:var(--textarea-height);left:100%;position:absolute;top:0;width:var(--input-width)}.text-field-number-only-wrapper.active{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-empty-enabled-primary);--textarea-color: var(--placeholder-empty-enabled-primary);--textarea-placeholder-color: var(--placeholder-empty-enabled-primary)}.text-field-number-only-wrapper.active:hover{--input-border-width: 1px}.text-field-number-only-wrapper.hover{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-empty-enabled-primary);--input-border-width: 1px;--textarea-color: var(--placeholder-empty-enabled-primary);--textarea-placeholder-color: var(--placeholder-empty-enabled-primary)}.text-field-number-only-wrapper.typing{--input-background-color: var(--bg-field-empty-enabled-primary);--input-border-color: var(--outline-field-full-enabled-primary);--input-border-width: 1px;--textarea-color: var(--placeholder-full-enabled-pressed-primary);--textarea-placeholder-color: var(--placeholder-full-enabled-pressed-primary)}.text-field-number-only-wrapper.typing .digit-container.focused{--input-border-color: var(--outline-field-full-enabled-pressed-primary);outline:var(--input-border-width) solid var(--input-border-color)}.text-field-number-only-wrapper.typed{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--outline-field-full-enabled-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.typed-error{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--negative-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.typed-positive{--input-background-color: var(--bg-field-full-enabled-primary);--input-border-color: var(--positive-primary);--input-border-width: 1px;--textarea-color: var(--label-text-full-enabled-primary);--textarea-placeholder-color: var(--label-text-full-enabled-primary)}.text-field-number-only-wrapper.disabled,.text-field-number-only-wrapper input[disabled]{--input-background-color: var(--bg-field-empty-disabled-primary);--input-border-color: var(--outline-disabled);--input-border-width: 1px;--textarea-color: var(--on-bg-disabled);--textarea-placeholder-color: var(--on-bg-disabled)}.text-field-number-only-wrapper.readonly,.text-field-number-only-wrapper input[readonly]{--input-background-color: var(--bg-field-full-read-only-primary);--input-border-color: var(--bg-field-full-read-only-primary);--input-border-width: 1px;--textarea-color: var(--input-text-full-read-only-primary);--textarea-placeholder-color: var(--input-text-full-read-only-primary)}.supporting-text{align-items:center;color:var(--supporting-text-color);display:flex;margin-left:0;margin-top:var(--supporting-text-margin-top)}.supporting-text.active,.supporting-text.hover,.supporting-text.autofill{--supporting-text-color: var(--label-text-empty-enabled-primary)}.supporting-text.typing{--supporting-text-color: var(--label-text-full-enabled-pressed-primary)}.supporting-text.typed{--supporting-text-color: var(--label-text-full-enabled-primary)}.supporting-text.typed-error{--supporting-text-color: var(--negative-primary)}.supporting-text.typed-positive{--supporting-text-color: var(--positive-primary)}.supporting-text.disabled{--supporting-text-color: var(--on-bg-disabled)}.supporting-text.readonly{--supporting-text-color: var(--label-text-full-read-only-primary)}.supporting-text gravity-icon{--icon-color: var(--negative-primary);--icon-height: var(--supporting-text-icon-size);--icon-width: var(--supporting-text-icon-size);margin-right:5px}\n", ".md{--label-margin: 0 0 8px;--input-padding: 11px 12px;--input-width: 35px;--supporting-text-icon-size: 9px;--supporting-text-margin-top: 8px;--text-field-number-only-wrapper-grid-column-gap: 5px;--textarea-height: 35px;--textarea-letter-spacing: 31.3px;--textarea-padding: 9px 12px;--textarea-width: 290px}.md .text-field-number-only-wrapper textarea:placeholder-shown{--textarea-letter-spacing: 32.5px}.sm{--label-margin: 0 0 5px;--input-padding: 8px 12px;--input-width: 33px;--supporting-text-icon-size: 9px;--supporting-text-margin-top: 5px;--text-field-number-only-wrapper-grid-column-gap: 4px;--textarea-height: 29px;--textarea-letter-spacing: 30.5px;--textarea-padding: var(--input-padding);--textarea-width: 260px}.sm .text-field-number-only-wrapper textarea:placeholder-shown{--textarea-letter-spacing: 31.5px}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.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$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
5897
5942
|
}
|
|
5898
5943
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityTextFieldNumberOnlyComponent, decorators: [{
|
|
5899
5944
|
type: Component,
|
|
@@ -7783,6 +7828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
7783
7828
|
|
|
7784
7829
|
class GravityHeaderComponent {
|
|
7785
7830
|
constructor() {
|
|
7831
|
+
this.systemTime = '';
|
|
7786
7832
|
this.language = 'en';
|
|
7787
7833
|
this.notifications = false;
|
|
7788
7834
|
this.backButtonResponse = new EventEmitter();
|
|
@@ -7799,6 +7845,9 @@ class GravityHeaderComponent {
|
|
|
7799
7845
|
get isMenuOpen() {
|
|
7800
7846
|
return this._isMenuOpen;
|
|
7801
7847
|
}
|
|
7848
|
+
get systemTimeText() {
|
|
7849
|
+
return this.language === 'en' ? 'System time: ' : 'Hora del sistema: ';
|
|
7850
|
+
}
|
|
7802
7851
|
toggleMenu() {
|
|
7803
7852
|
setTimeout(function () {
|
|
7804
7853
|
this.toggleMenuResponse.emit(this._isMenuOpen);
|
|
@@ -7814,11 +7863,11 @@ class GravityHeaderComponent {
|
|
|
7814
7863
|
return this.resolution === 'xs' || this.resolution === 'sm' || this.resolution === 'md';
|
|
7815
7864
|
}
|
|
7816
7865
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7817
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityHeaderComponent, isStandalone: true, selector: "gravity-header", inputs: { title: "title", logoUrl: "logoUrl", longTitle: "longTitle", backButton: "backButton", breadCrumb: "breadCrumb", language: "language", notifications: "notifications", resolution: "resolution", userNotifications: "userNotifications", isMenuOpen: "isMenuOpen" }, outputs: { backButtonResponse: "backButtonResponse", toggleMenuResponse: "toggleMenuResponse", viewedNotificationsResponse: "viewedNotificationsResponse" }, ngImport: i0, template: "<div class=\"gravity-header\" [class.mobile]=\"isMobile()\">\n <section class=\"first-level\" [class.long-title]=\"longTitle\">\n @if (isMobile() && logoUrl && !backButton) {\n <svg-icon class=\"logo-header\" [src]=\"logoUrl\"/>\n }\n\n @if (backButton && breadCrumb?.list?.length < 1) {\n <div\n class=\"back-button\" [class.pressed]=\"isBackButtonPressed\"\n (mousedown)=\"isBackButtonPressed = true\" (mouseup)=\"isBackButtonPressed = false\" (click)=\"backAction()\"\n (mouseleave)=\"isBackButtonPressed = false\" (touchstart)=\"isBackButtonPressed = true\"\n (touchend)=\"isBackButtonPressed = false; $event.preventDefault(); backAction()\"\n (touchcancel)=\"isBackButtonPressed = false\">\n <gravity-icon [style.--icon-color]=\"'var(--back-button-color)'\" [iconSize]=\"'sm-12'\" [iconName]=\"'arrow-left'\"/>\n <span class=\"'hr-label md-regular')\">{{ language === 'en' ? 'Back' : 'Atr\u00E1s' }}</span>\n </div>\n }\n\n @if (breadCrumb?.list?.length > 0 && (resolution === 'lg' || resolution === 'xl')) {\n <div class=\"breadcrumb\">\n @if (breadCrumb.icon) {\n <gravity-icon class=\"gravity-margin-right-xs\" [iconSize]=\"'md-16'\"\n [style.--icon-color]=\"'var(--breadcrumb-button-base-primary)'\" [iconName]=\"breadCrumb.icon\"/>\n }\n @for (item of breadCrumb.list; track item; let last = $last; let i = $index) {\n <div class=\"breadcrumb-item\" [class.is-last]=\"last\" [class.has-prev]=\"i !== 0\"\n (mousedown)=\"item.isPressed = true\" (mouseup)=\"item.isPressed = false\"\n (mouseleave)=\"item.isPressed = false\" (touchstart)=\"item.isPressed = true\">\n <span [ngClass]=\"'hr-body ' + (resolution === 'xl' ? 'md-regular' : 'sm-regular')\"\n [class.pressed]=\"item.isPressed\" (click)=\"!last && item.callback?.()\">{{ item.text }} </span>\n </div>\n }\n </div>\n }\n\n @if (!backButton && (!isMobile() || (isMobile() && !logoUrl)) && breadCrumb?.list?.length < 1) {\n <h1\n [ngClass]=\"!isMobile() ? 'hr-headline md-bold' : 'hr-title ' + (resolution === 'md' ? 'md-bold' : 'lg-bold')\">\n {{ title }}\n </h1>\n }\n\n @if (isMobile() && backButton) {\n <h1 [ngClass]=\"'hr-body md-bold'\"> {{ longTitle }} </h1>\n }\n\n <div class=\"main-actions\">\n <ng-content select=\"[main-actions]\"/>\n\n @if ((notifications && !isMobile()) || (notifications && isMobile() && !backButton)) {\n <gravity-push-notifications\n [userNotifications]=\"userNotifications\"\n (viewedNotificationsResponse)=\"handleViewedNotificationsResponse($event)\"/>\n }\n\n @if (isMobile()) {\n <gravity-icon [style.--icon-color]=\"'var(--back-button-color)'\"\n [iconSize]=\"'lg-24'\" [iconName]=\"'menu'\" (click)=\"toggleMenu()\"/>\n }\n </div>\n </section>\n\n @if (!isMobile() && (backButton || breadCrumb?.list?.length > 0) && title) {\n <section class=\"second-level\">\n <h1 class=\"hr-headline md-bold\">{{ title }}</h1>\n </section>\n }\n\n @if (isMobile() && logoUrl && !backButton && title) {\n <section class=\"second-level\">\n <h1 [ngClass]=\"'hr-title ' + (resolution === 'md' ? 'md-bold' : 'lg-bold')\">{{ title }}</h1>\n </section>\n }\n\n</div>", styles: [".gravity-header{width:100%;display:flex;-webkit-user-select:none;user-select:none;align-items:center;flex-direction:column;color:var(--text-primary);justify-content:space-between;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-md) var(--gravity-spacing-md) var(--gravity-spacing-xs) var(--gravity-spacing-md)}.gravity-header h1{height:27px;line-height:27px;white-space:nowrap}.gravity-header .first-level{display:flex;align-items:center;align-self:stretch;justify-content:space-between}.gravity-header .first-level .logo-header svg{display:flex;max-width:55px;max-height:22px}.gravity-header .first-level .back-button{height:20px;display:flex;cursor:pointer;padding:4px 6px;align-items:center;gap:var(--gravity-spacing-xs);color:var(--back-button-color);--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .back-button:hover{border-radius:2px;color:var(--back-button-color);background:var(--surface-primary);--back-button-color: var(--on-bg-back-button-hover-primary)}.gravity-header .first-level .back-button.pressed{background:none;color:var(--back-button-color);--back-button-color: var(--back-button-pressed-primary)}.gravity-header .first-level .breadcrumb{display:flex;align-items:center;justify-content:flex-start}.gravity-header .first-level .breadcrumb .breadcrumb-item{display:flex;align-items:center;gap:var(--gravity-spacing-xxxs)}.gravity-header .first-level .breadcrumb .breadcrumb-item.has-prev:before{content:\"/\";gap:var(--gravity-spacing-xxxs);color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item.is-last span{cursor:default;color:var(--breadcrumb-button-active-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span{cursor:pointer;color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span:hover{background:var(--surface-primary);color:var(--on-bg-breadcrumb-button-hover-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span.pressed{background:none;color:var(--breadcrumb-button-pressed-primary)}.gravity-header .first-level .main-actions{display:flex;align-items:center}.gravity-header .first-level .main-actions gravity-icon{cursor:pointer;margin-left:var(--gravity-spacing-sm);transition:transform .1s ease-in-out;--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .main-actions gravity-push-notifications{position:relative;margin-left:var(--gravity-spacing-sm)}.gravity-header .second-level{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:space-between;gap:var(--gravity-spacing-xs)}.gravity-header .second-level.no-title{justify-content:flex-end}.gravity-header.mobile{min-width:320px;max-width:1099px;padding:var(--gravity-spacing-sm)}.gravity-header.mobile h1{height:21px;line-height:21px}.gravity-header.mobile .long-title{
|
|
7866
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityHeaderComponent, isStandalone: true, selector: "gravity-header", inputs: { title: "title", logoUrl: "logoUrl", longTitle: "longTitle", backButton: "backButton", breadCrumb: "breadCrumb", systemTime: "systemTime", language: "language", notifications: "notifications", resolution: "resolution", userNotifications: "userNotifications", isMenuOpen: "isMenuOpen" }, outputs: { backButtonResponse: "backButtonResponse", toggleMenuResponse: "toggleMenuResponse", viewedNotificationsResponse: "viewedNotificationsResponse" }, ngImport: i0, template: "<div class=\"gravity-header\" [class.mobile]=\"isMobile()\">\n <section class=\"first-level\" [class.long-title]=\"longTitle\">\n @if (isMobile() && logoUrl && !backButton) {\n <svg-icon class=\"logo-header\" [src]=\"logoUrl\"/>\n }\n\n @if (backButton && breadCrumb?.list?.length < 1) {\n <div\n class=\"back-button\" [class.pressed]=\"isBackButtonPressed\"\n (mousedown)=\"isBackButtonPressed = true\" (mouseup)=\"isBackButtonPressed = false\" (click)=\"backAction()\"\n (mouseleave)=\"isBackButtonPressed = false\" (touchstart)=\"isBackButtonPressed = true\"\n (touchend)=\"isBackButtonPressed = false; $event.preventDefault(); backAction()\"\n (touchcancel)=\"isBackButtonPressed = false\">\n <gravity-icon [style.--icon-color]=\"'var(--back-button-color)'\" [iconSize]=\"'sm-12'\" [iconName]=\"'arrow-left'\"/>\n <span class=\"'hr-label md-regular')\">{{ language === 'en' ? 'Back' : 'Atr\u00E1s' }}</span>\n </div>\n }\n\n @if (breadCrumb?.list?.length > 0 && (resolution === 'lg' || resolution === 'xl')) {\n <div class=\"breadcrumb\">\n @if (breadCrumb.icon) {\n <gravity-icon class=\"gravity-margin-right-xs\" [iconSize]=\"'md-16'\"\n [style.--icon-color]=\"'var(--breadcrumb-button-base-primary)'\" [iconName]=\"breadCrumb.icon\"/>\n }\n @for (item of breadCrumb.list; track item; let last = $last; let i = $index) {\n <div class=\"breadcrumb-item\" [class.is-last]=\"last\" [class.has-prev]=\"i !== 0\"\n (mousedown)=\"item.isPressed = true\" (mouseup)=\"item.isPressed = false\"\n (mouseleave)=\"item.isPressed = false\" (touchstart)=\"item.isPressed = true\">\n <span [ngClass]=\"'hr-body ' + (resolution === 'xl' ? 'md-regular' : 'sm-regular')\"\n [class.pressed]=\"item.isPressed\" (click)=\"!last && item.callback?.()\">{{ item.text }} </span>\n </div>\n }\n </div>\n }\n\n @if (!backButton && (!isMobile() || (isMobile() && !logoUrl)) && breadCrumb?.list?.length < 1) {\n <h1\n [ngClass]=\"!isMobile() ? 'hr-headline md-bold' : 'hr-title ' + (resolution === 'md' ? 'md-bold' : 'lg-bold')\">\n {{ title }}\n </h1>\n }\n\n @if (isMobile() && backButton) {\n <div class=\"long-title-content\">\n <h1 [ngClass]=\"'hr-body md-bold'\"> {{ longTitle }} </h1>\n <ng-container *ngTemplateOutlet=\"systemTimeTemplate\"/>\n </div>\n }\n\n <div class=\"main-actions\">\n <ng-content select=\"[main-actions]\"/>\n\n @if ((notifications && !isMobile()) || (notifications && isMobile() && !backButton)) {\n <gravity-push-notifications\n [userNotifications]=\"userNotifications\"\n (viewedNotificationsResponse)=\"handleViewedNotificationsResponse($event)\"/>\n }\n\n @if (isMobile()) {\n <gravity-icon [style.--icon-color]=\"'var(--back-button-color)'\"\n [iconSize]=\"'lg-24'\" [iconName]=\"'menu'\" (click)=\"toggleMenu()\"/>\n }\n </div>\n </section>\n\n @if (!isMobile() && (backButton || breadCrumb?.list?.length > 0) && title) {\n <section class=\"second-level\">\n <h1 class=\"hr-headline md-bold\">{{ title }}</h1>\n </section>\n }\n\n @if (isMobile() && logoUrl && !backButton && title) {\n <section class=\"second-level\">\n <h1 [ngClass]=\"'hr-title ' + (resolution === 'md' ? 'md-bold' : 'lg-bold')\">{{ title }}</h1>\n <ng-container *ngTemplateOutlet=\"systemTimeTemplate\"/>\n </section>\n }\n</div>\n\n<ng-template #systemTimeTemplate>\n @if (systemTime) {\n <div class=\"system-time\">\n <gravity-icon [size]=\"'md'\" [iconSize]=\"'md-16'\" [iconName]=\"'clock'\" />\n <p>\n <span class=\"hr-label sm-regular\">{{ systemTimeText }}</span>\n <span class=\"hr-label sm-bold\">{{ systemTime }}</span>\n </p>\n </div>\n }\n</ng-template>", styles: [".gravity-header{width:100%;display:flex;-webkit-user-select:none;user-select:none;align-items:center;flex-direction:column;color:var(--text-primary);justify-content:space-between;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-md) var(--gravity-spacing-md) var(--gravity-spacing-xs) var(--gravity-spacing-md)}.gravity-header h1{height:27px;line-height:27px;white-space:nowrap}.gravity-header .first-level{display:flex;align-items:center;align-self:stretch;justify-content:space-between}.gravity-header .first-level .logo-header svg{display:flex;max-width:55px;max-height:22px}.gravity-header .first-level .back-button{height:20px;display:flex;cursor:pointer;padding:4px 6px;align-items:center;gap:var(--gravity-spacing-xs);color:var(--back-button-color);--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .back-button:hover{border-radius:2px;color:var(--back-button-color);background:var(--surface-primary);--back-button-color: var(--on-bg-back-button-hover-primary)}.gravity-header .first-level .back-button.pressed{background:none;color:var(--back-button-color);--back-button-color: var(--back-button-pressed-primary)}.gravity-header .first-level .breadcrumb{display:flex;align-items:center;justify-content:flex-start}.gravity-header .first-level .breadcrumb .breadcrumb-item{display:flex;align-items:center;gap:var(--gravity-spacing-xxxs)}.gravity-header .first-level .breadcrumb .breadcrumb-item.has-prev:before{content:\"/\";gap:var(--gravity-spacing-xxxs);color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item.is-last span{cursor:default;color:var(--breadcrumb-button-active-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span{cursor:pointer;color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span:hover{background:var(--surface-primary);color:var(--on-bg-breadcrumb-button-hover-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span.pressed{background:none;color:var(--breadcrumb-button-pressed-primary)}.gravity-header .first-level .main-actions{display:flex;align-items:center}.gravity-header .first-level .main-actions gravity-icon{cursor:pointer;margin-left:var(--gravity-spacing-sm);transition:transform .1s ease-in-out;--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .main-actions gravity-push-notifications{position:relative;margin-left:var(--gravity-spacing-sm)}.gravity-header .second-level{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:space-between;gap:var(--gravity-spacing-xs)}.gravity-header .second-level.no-title{justify-content:flex-end}.gravity-header .second-level .system-time{width:100%;display:flex;align-items:center;gap:var(--gravity-spacing-xs);padding:0 var(--gravity-spacing-xxs)}.gravity-header.mobile{gap:0;min-width:320px;max-width:1099px;padding:var(--gravity-spacing-sm)}.gravity-header.mobile h1{width:100%;height:21px;line-height:21px}.gravity-header.mobile .long-title{padding-top:var(--gravity-spacing-xs)}.gravity-header.mobile .long-title .long-title-content{display:flex;flex-direction:column;gap:var(--gravity-spacing-xs)}.gravity-header.mobile .long-title .long-title-content h1{display:flex;justify-content:center}.gravity-header.mobile .long-title .long-title-content .system-time{width:100%;display:flex;align-items:center;justify-content:center;gap:var(--gravity-spacing-xs)}.gravity-header.mobile .second-level{flex-direction:column;margin-top:var(--gravity-spacing-sm)}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: GravityPushNotificationsComponent, selector: "gravity-push-notifications", inputs: ["userNotifications"], outputs: ["viewedNotificationsResponse"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
|
|
7818
7867
|
}
|
|
7819
7868
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityHeaderComponent, decorators: [{
|
|
7820
7869
|
type: Component,
|
|
7821
|
-
args: [{ selector: 'gravity-header', standalone: true, imports: [SvgIconComponent, GravityIconComponent, NgClass, GravityPushNotificationsComponent], template: "<div class=\"gravity-header\" [class.mobile]=\"isMobile()\">\n <section class=\"first-level\" [class.long-title]=\"longTitle\">\n @if (isMobile() && logoUrl && !backButton) {\n <svg-icon class=\"logo-header\" [src]=\"logoUrl\"/>\n }\n\n @if (backButton && breadCrumb?.list?.length < 1) {\n <div\n class=\"back-button\" [class.pressed]=\"isBackButtonPressed\"\n (mousedown)=\"isBackButtonPressed = true\" (mouseup)=\"isBackButtonPressed = false\" (click)=\"backAction()\"\n (mouseleave)=\"isBackButtonPressed = false\" (touchstart)=\"isBackButtonPressed = true\"\n (touchend)=\"isBackButtonPressed = false; $event.preventDefault(); backAction()\"\n (touchcancel)=\"isBackButtonPressed = false\">\n <gravity-icon [style.--icon-color]=\"'var(--back-button-color)'\" [iconSize]=\"'sm-12'\" [iconName]=\"'arrow-left'\"/>\n <span class=\"'hr-label md-regular')\">{{ language === 'en' ? 'Back' : 'Atr\u00E1s' }}</span>\n </div>\n }\n\n @if (breadCrumb?.list?.length > 0 && (resolution === 'lg' || resolution === 'xl')) {\n <div class=\"breadcrumb\">\n @if (breadCrumb.icon) {\n <gravity-icon class=\"gravity-margin-right-xs\" [iconSize]=\"'md-16'\"\n [style.--icon-color]=\"'var(--breadcrumb-button-base-primary)'\" [iconName]=\"breadCrumb.icon\"/>\n }\n @for (item of breadCrumb.list; track item; let last = $last; let i = $index) {\n <div class=\"breadcrumb-item\" [class.is-last]=\"last\" [class.has-prev]=\"i !== 0\"\n (mousedown)=\"item.isPressed = true\" (mouseup)=\"item.isPressed = false\"\n (mouseleave)=\"item.isPressed = false\" (touchstart)=\"item.isPressed = true\">\n <span [ngClass]=\"'hr-body ' + (resolution === 'xl' ? 'md-regular' : 'sm-regular')\"\n [class.pressed]=\"item.isPressed\" (click)=\"!last && item.callback?.()\">{{ item.text }} </span>\n </div>\n }\n </div>\n }\n\n @if (!backButton && (!isMobile() || (isMobile() && !logoUrl)) && breadCrumb?.list?.length < 1) {\n <h1\n [ngClass]=\"!isMobile() ? 'hr-headline md-bold' : 'hr-title ' + (resolution === 'md' ? 'md-bold' : 'lg-bold')\">\n {{ title }}\n </h1>\n }\n\n @if (isMobile() && backButton) {\n <h1 [ngClass]=\"'hr-body md-bold'\"> {{ longTitle }} </h1>\n }\n\n <div class=\"main-actions\">\n <ng-content select=\"[main-actions]\"/>\n\n @if ((notifications && !isMobile()) || (notifications && isMobile() && !backButton)) {\n <gravity-push-notifications\n [userNotifications]=\"userNotifications\"\n (viewedNotificationsResponse)=\"handleViewedNotificationsResponse($event)\"/>\n }\n\n @if (isMobile()) {\n <gravity-icon [style.--icon-color]=\"'var(--back-button-color)'\"\n [iconSize]=\"'lg-24'\" [iconName]=\"'menu'\" (click)=\"toggleMenu()\"/>\n }\n </div>\n </section>\n\n @if (!isMobile() && (backButton || breadCrumb?.list?.length > 0) && title) {\n <section class=\"second-level\">\n <h1 class=\"hr-headline md-bold\">{{ title }}</h1>\n </section>\n }\n\n @if (isMobile() && logoUrl && !backButton && title) {\n <section class=\"second-level\">\n <h1 [ngClass]=\"'hr-title ' + (resolution === 'md' ? 'md-bold' : 'lg-bold')\">{{ title }}</h1>\n </section>\n }\n\n</div>", styles: [".gravity-header{width:100%;display:flex;-webkit-user-select:none;user-select:none;align-items:center;flex-direction:column;color:var(--text-primary);justify-content:space-between;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-md) var(--gravity-spacing-md) var(--gravity-spacing-xs) var(--gravity-spacing-md)}.gravity-header h1{height:27px;line-height:27px;white-space:nowrap}.gravity-header .first-level{display:flex;align-items:center;align-self:stretch;justify-content:space-between}.gravity-header .first-level .logo-header svg{display:flex;max-width:55px;max-height:22px}.gravity-header .first-level .back-button{height:20px;display:flex;cursor:pointer;padding:4px 6px;align-items:center;gap:var(--gravity-spacing-xs);color:var(--back-button-color);--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .back-button:hover{border-radius:2px;color:var(--back-button-color);background:var(--surface-primary);--back-button-color: var(--on-bg-back-button-hover-primary)}.gravity-header .first-level .back-button.pressed{background:none;color:var(--back-button-color);--back-button-color: var(--back-button-pressed-primary)}.gravity-header .first-level .breadcrumb{display:flex;align-items:center;justify-content:flex-start}.gravity-header .first-level .breadcrumb .breadcrumb-item{display:flex;align-items:center;gap:var(--gravity-spacing-xxxs)}.gravity-header .first-level .breadcrumb .breadcrumb-item.has-prev:before{content:\"/\";gap:var(--gravity-spacing-xxxs);color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item.is-last span{cursor:default;color:var(--breadcrumb-button-active-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span{cursor:pointer;color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span:hover{background:var(--surface-primary);color:var(--on-bg-breadcrumb-button-hover-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span.pressed{background:none;color:var(--breadcrumb-button-pressed-primary)}.gravity-header .first-level .main-actions{display:flex;align-items:center}.gravity-header .first-level .main-actions gravity-icon{cursor:pointer;margin-left:var(--gravity-spacing-sm);transition:transform .1s ease-in-out;--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .main-actions gravity-push-notifications{position:relative;margin-left:var(--gravity-spacing-sm)}.gravity-header .second-level{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:space-between;gap:var(--gravity-spacing-xs)}.gravity-header .second-level.no-title{justify-content:flex-end}.gravity-header.mobile{min-width:320px;max-width:1099px;padding:var(--gravity-spacing-sm)}.gravity-header.mobile h1{height:21px;line-height:21px}.gravity-header.mobile .long-title{
|
|
7870
|
+
args: [{ selector: 'gravity-header', standalone: true, imports: [SvgIconComponent, GravityIconComponent, NgClass, GravityPushNotificationsComponent, NgTemplateOutlet], template: "<div class=\"gravity-header\" [class.mobile]=\"isMobile()\">\n <section class=\"first-level\" [class.long-title]=\"longTitle\">\n @if (isMobile() && logoUrl && !backButton) {\n <svg-icon class=\"logo-header\" [src]=\"logoUrl\"/>\n }\n\n @if (backButton && breadCrumb?.list?.length < 1) {\n <div\n class=\"back-button\" [class.pressed]=\"isBackButtonPressed\"\n (mousedown)=\"isBackButtonPressed = true\" (mouseup)=\"isBackButtonPressed = false\" (click)=\"backAction()\"\n (mouseleave)=\"isBackButtonPressed = false\" (touchstart)=\"isBackButtonPressed = true\"\n (touchend)=\"isBackButtonPressed = false; $event.preventDefault(); backAction()\"\n (touchcancel)=\"isBackButtonPressed = false\">\n <gravity-icon [style.--icon-color]=\"'var(--back-button-color)'\" [iconSize]=\"'sm-12'\" [iconName]=\"'arrow-left'\"/>\n <span class=\"'hr-label md-regular')\">{{ language === 'en' ? 'Back' : 'Atr\u00E1s' }}</span>\n </div>\n }\n\n @if (breadCrumb?.list?.length > 0 && (resolution === 'lg' || resolution === 'xl')) {\n <div class=\"breadcrumb\">\n @if (breadCrumb.icon) {\n <gravity-icon class=\"gravity-margin-right-xs\" [iconSize]=\"'md-16'\"\n [style.--icon-color]=\"'var(--breadcrumb-button-base-primary)'\" [iconName]=\"breadCrumb.icon\"/>\n }\n @for (item of breadCrumb.list; track item; let last = $last; let i = $index) {\n <div class=\"breadcrumb-item\" [class.is-last]=\"last\" [class.has-prev]=\"i !== 0\"\n (mousedown)=\"item.isPressed = true\" (mouseup)=\"item.isPressed = false\"\n (mouseleave)=\"item.isPressed = false\" (touchstart)=\"item.isPressed = true\">\n <span [ngClass]=\"'hr-body ' + (resolution === 'xl' ? 'md-regular' : 'sm-regular')\"\n [class.pressed]=\"item.isPressed\" (click)=\"!last && item.callback?.()\">{{ item.text }} </span>\n </div>\n }\n </div>\n }\n\n @if (!backButton && (!isMobile() || (isMobile() && !logoUrl)) && breadCrumb?.list?.length < 1) {\n <h1\n [ngClass]=\"!isMobile() ? 'hr-headline md-bold' : 'hr-title ' + (resolution === 'md' ? 'md-bold' : 'lg-bold')\">\n {{ title }}\n </h1>\n }\n\n @if (isMobile() && backButton) {\n <div class=\"long-title-content\">\n <h1 [ngClass]=\"'hr-body md-bold'\"> {{ longTitle }} </h1>\n <ng-container *ngTemplateOutlet=\"systemTimeTemplate\"/>\n </div>\n }\n\n <div class=\"main-actions\">\n <ng-content select=\"[main-actions]\"/>\n\n @if ((notifications && !isMobile()) || (notifications && isMobile() && !backButton)) {\n <gravity-push-notifications\n [userNotifications]=\"userNotifications\"\n (viewedNotificationsResponse)=\"handleViewedNotificationsResponse($event)\"/>\n }\n\n @if (isMobile()) {\n <gravity-icon [style.--icon-color]=\"'var(--back-button-color)'\"\n [iconSize]=\"'lg-24'\" [iconName]=\"'menu'\" (click)=\"toggleMenu()\"/>\n }\n </div>\n </section>\n\n @if (!isMobile() && (backButton || breadCrumb?.list?.length > 0) && title) {\n <section class=\"second-level\">\n <h1 class=\"hr-headline md-bold\">{{ title }}</h1>\n </section>\n }\n\n @if (isMobile() && logoUrl && !backButton && title) {\n <section class=\"second-level\">\n <h1 [ngClass]=\"'hr-title ' + (resolution === 'md' ? 'md-bold' : 'lg-bold')\">{{ title }}</h1>\n <ng-container *ngTemplateOutlet=\"systemTimeTemplate\"/>\n </section>\n }\n</div>\n\n<ng-template #systemTimeTemplate>\n @if (systemTime) {\n <div class=\"system-time\">\n <gravity-icon [size]=\"'md'\" [iconSize]=\"'md-16'\" [iconName]=\"'clock'\" />\n <p>\n <span class=\"hr-label sm-regular\">{{ systemTimeText }}</span>\n <span class=\"hr-label sm-bold\">{{ systemTime }}</span>\n </p>\n </div>\n }\n</ng-template>", styles: [".gravity-header{width:100%;display:flex;-webkit-user-select:none;user-select:none;align-items:center;flex-direction:column;color:var(--text-primary);justify-content:space-between;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-md) var(--gravity-spacing-md) var(--gravity-spacing-xs) var(--gravity-spacing-md)}.gravity-header h1{height:27px;line-height:27px;white-space:nowrap}.gravity-header .first-level{display:flex;align-items:center;align-self:stretch;justify-content:space-between}.gravity-header .first-level .logo-header svg{display:flex;max-width:55px;max-height:22px}.gravity-header .first-level .back-button{height:20px;display:flex;cursor:pointer;padding:4px 6px;align-items:center;gap:var(--gravity-spacing-xs);color:var(--back-button-color);--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .back-button:hover{border-radius:2px;color:var(--back-button-color);background:var(--surface-primary);--back-button-color: var(--on-bg-back-button-hover-primary)}.gravity-header .first-level .back-button.pressed{background:none;color:var(--back-button-color);--back-button-color: var(--back-button-pressed-primary)}.gravity-header .first-level .breadcrumb{display:flex;align-items:center;justify-content:flex-start}.gravity-header .first-level .breadcrumb .breadcrumb-item{display:flex;align-items:center;gap:var(--gravity-spacing-xxxs)}.gravity-header .first-level .breadcrumb .breadcrumb-item.has-prev:before{content:\"/\";gap:var(--gravity-spacing-xxxs);color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item.is-last span{cursor:default;color:var(--breadcrumb-button-active-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span{cursor:pointer;color:var(--breadcrumb-button-base-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span:hover{background:var(--surface-primary);color:var(--on-bg-breadcrumb-button-hover-primary)}.gravity-header .first-level .breadcrumb .breadcrumb-item:not(.is-last) span.pressed{background:none;color:var(--breadcrumb-button-pressed-primary)}.gravity-header .first-level .main-actions{display:flex;align-items:center}.gravity-header .first-level .main-actions gravity-icon{cursor:pointer;margin-left:var(--gravity-spacing-sm);transition:transform .1s ease-in-out;--back-button-color: var(--bg-button-active-primary)}.gravity-header .first-level .main-actions gravity-push-notifications{position:relative;margin-left:var(--gravity-spacing-sm)}.gravity-header .second-level{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:space-between;gap:var(--gravity-spacing-xs)}.gravity-header .second-level.no-title{justify-content:flex-end}.gravity-header .second-level .system-time{width:100%;display:flex;align-items:center;gap:var(--gravity-spacing-xs);padding:0 var(--gravity-spacing-xxs)}.gravity-header.mobile{gap:0;min-width:320px;max-width:1099px;padding:var(--gravity-spacing-sm)}.gravity-header.mobile h1{width:100%;height:21px;line-height:21px}.gravity-header.mobile .long-title{padding-top:var(--gravity-spacing-xs)}.gravity-header.mobile .long-title .long-title-content{display:flex;flex-direction:column;gap:var(--gravity-spacing-xs)}.gravity-header.mobile .long-title .long-title-content h1{display:flex;justify-content:center}.gravity-header.mobile .long-title .long-title-content .system-time{width:100%;display:flex;align-items:center;justify-content:center;gap:var(--gravity-spacing-xs)}.gravity-header.mobile .second-level{flex-direction:column;margin-top:var(--gravity-spacing-sm)}\n"] }]
|
|
7822
7871
|
}], propDecorators: { title: [{
|
|
7823
7872
|
type: Input
|
|
7824
7873
|
}], logoUrl: [{
|
|
@@ -7829,6 +7878,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
7829
7878
|
type: Input
|
|
7830
7879
|
}], breadCrumb: [{
|
|
7831
7880
|
type: Input
|
|
7881
|
+
}], systemTime: [{
|
|
7882
|
+
type: Input
|
|
7832
7883
|
}], language: [{
|
|
7833
7884
|
type: Input
|
|
7834
7885
|
}], notifications: [{
|
|
@@ -7993,12 +8044,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
7993
8044
|
}] } });
|
|
7994
8045
|
|
|
7995
8046
|
class GravityMenuComponent {
|
|
8047
|
+
get systemTimeText() {
|
|
8048
|
+
return this.language === 'en' ? 'System time ' : 'Hora del sistema ';
|
|
8049
|
+
}
|
|
7996
8050
|
constructor(elRef, renderer) {
|
|
7997
8051
|
this.elRef = elRef;
|
|
7998
8052
|
this.renderer = renderer;
|
|
8053
|
+
this.showCloseButton = true;
|
|
7999
8054
|
this.isOpen = false;
|
|
8055
|
+
this.systemTime = '';
|
|
8000
8056
|
this.collapsable = false;
|
|
8001
|
-
this.
|
|
8057
|
+
this.language = 'en';
|
|
8002
8058
|
this.maxCardButtonsPerRow = 3;
|
|
8003
8059
|
this.currentLink = null;
|
|
8004
8060
|
this.size = 'xl';
|
|
@@ -8177,22 +8233,26 @@ class GravityMenuComponent {
|
|
|
8177
8233
|
el.scrollTo({ top: 62 * index, behavior: 'auto' });
|
|
8178
8234
|
}
|
|
8179
8235
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityMenuComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8180
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityMenuComponent, isStandalone: true, selector: "gravity-menu", inputs: { items: "items", userInfo: "userInfo", logoUrl: "logoUrl", isOpen: "isOpen", collapsable: "collapsable", showCloseButton: "showCloseButton", cardButtons: "cardButtons", maxCardButtonsPerRow: "maxCardButtonsPerRow", currentLink: "currentLink", secondaryActions: "secondaryActions", size: "size", mainFooterAction: "mainFooterAction" }, outputs: { close: "close", selected: "selected", collapsed: "collapsed" }, viewQueries: [{ propertyName: "menuBody", first: true, predicate: ["menuBody"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"gravity-menu {{size}}\" [class.open]=\"isOpen\" [class.closing]=\"closing\"\n [class.collapsed]=\"collapsedMode && (size === 'xl' || size === 'lg')\">\n\n <div class=\"menu-header\">\n @if (logoUrl?.main_logo_url) {\n <svg-icon\n [src]=\"(collapsedMode && logoUrl.collapsed_logo_url) ? logoUrl.collapsed_logo_url : logoUrl.main_logo_url\"/>\n }\n\n @if ((size === 'md' || size === 'sm') && showCloseButton) {\n <gravity-icon\n [iconSize]=\"'lg-24'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu()\"/>\n }\n\n @if (collapsable && (size === 'xl' || size === 'lg')) {\n <div class=\"collapse-button\" (click)=\"collapseMenu()\">\n <gravity-icon [style.--icon-color]=\"'var(--bg-button-active-primary)'\" [iconSize]=\"'sm-12'\"\n [iconName]=\"collapsedMode ? 'arrow-right' : 'arrow-left'\"/>\n </div>\n }\n </div>\n\n <div class=\"menu-content\">\n <section #menuBody class=\"menu-body\" [class.sub-menu]=\"visibleSubMenu\">\n <div class=\"menu-section\">\n @for (header of items; track header; let i = $index) {\n <div class=\"levels\">\n <section class=\"first-level\" [class.selected]=\"isHeaderSelected(header)\"\n [routerLink]=\"header.link || undefined\" (click)=\"toggleMenuHeader(header, i)\"\n [class.is-open]=\"!header.collapsed\" [class.empty]=\"header.headerOptions?.length < 1\"\n [style.--expanded-margin]=\"header.headerOptions?.length > 0 ? (38 + (34 * header.headerOptions?.length)) + 'px' : '0'\">\n <p class=\"hr-label sm-regular\">\n @if (header.icon !== '') {\n <gravity-icon [style.--icon-color]=\"'var(--option-icon-color)'\" [iconName]=\"header.icon\" [iconSize]=\"'md-16'\"/>\n }\n @if (hasOptionBadge(header) && (size === 'xl' || size === 'lg')) {\n <gravity-badge class=\"badge\"\n [class.collapsed]=\"collapsedMode\" [size]=\"'sm'\" [type]=\"'neutral'\"></gravity-badge>\n }\n {{ header.text }}\n </p>\n @if (!collapsedMode) {\n <div>\n @if (header.headerOptions?.length > 0) {\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n }\n </div>\n }\n </section>\n @if (!header.collapsed && header.headerOptions?.length > 0) {\n <section class=\"second-level\"\n [@fadeSlide] [style.--submenu-offset]=\"((156 - scrollPosition) + (78 * i)) + 'px'\"\n [ngClass]=\"collapsedMode ? 'elevation-xs' : ''\">\n <div class=\"options-list\" [class.collapsed]=\"collapsedMode\">\n @for (option of header.headerOptions; track option) {\n <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n <div class=\"line\"\n [class.selected]=\"(size === 'xl' || size == 'lg') && option === selectedOption\"></div>\n <div class=\"option-text\"\n [ngClass]=\"(size === 'sm' || size === 'md') ? 'hr-label md-regular' : 'hr-label sm-regular'\"\n [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option, header)\">\n {{ option.text }}\n @if (option.badge_text && (size === 'xl' || size === 'lg')) {\n <gravity-badge\n [text]=\"option.badge_text\" [type]=\"'neutral'\" [size]=\"'sm'\"></gravity-badge>\n }\n </div>\n </div>\n }\n </div>\n </section>\n }\n </div>\n }\n </div>\n </section>\n\n @if ((secondaryActions || userInfo) && (size === 'xl' || size === 'lg')) {\n <section\n class=\"menu-footer elevation-xs\">\n <section class=\"footer-content\">\n @if (secondaryActions) {\n <div class=\"secondary-actions\">\n @for (action of secondaryActions; track action) {\n <div class=\"action\"\n (click)=\"action.callback(); clearSelection(action.clear_selection)\">\n @if (action.icon !== '') {\n <gravity-icon [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n }\n <span class=\"hr-label sm-regular\">{{ action.text }}</span>\n </div>\n }\n </div>\n }\n @if (secondaryActions && userInfo) {\n <hr class=\"separator-line\">\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div class=\"user-info\">\n @if (userInfo.icon !== '') {\n <gravity-icon class=\"icon\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"\n [tooltip]=\"collapsedMode ? tooltipUserInfoTemplate : null\" [contentType]=\"'template'\" [placement]=\"'right'\"/>\n }\n @if (!collapsedMode) {\n <span class=\"hr-label sm-regular\">{{ userInfo.info }}</span>\n }\n <ng-template #tooltipUserInfoTemplate>\n <gravity-tooltip-container [tooltipSimple]=\"{text: userInfo.info}\"/>\n </ng-template>\n </div>\n }\n </div>\n }\n </section>\n </section>\n }\n\n <!-- - - - - - - - - - - Mobile Resolutions - - - - - - - - - - -->\n\n @if ((cardButtons || userInfo) && (size === 'md' || size === 'sm')) {\n <section class=\"menu-footer-mobile\">\n <section class=\"footer-content\">\n @if (cardButtons) {\n <div class=\"secondary-actions\">\n <div class=\"action-cards\">\n @for (row of getCardButtonsRows(); track row) {\n <div class=\"action-cards-row\">\n @for (button of row; track button) {\n <gravity-action-card\n [type]=\"'secondary'\"\n [orientation]=\"'vrt-center'\"\n [iconName]=\"button.icon\" [label]=\"button.text\"\n (clicked)=\"button.callback(); clearSelection(button.clear_selection); selected.emit()\"/>\n }\n </div>\n }\n </div>\n @if (mainFooterAction) {\n <gravity-button [size]=\"'md'\" [type]=\"'tertiary'\" [fullWidth]=\"size === 'sm' || size === 'md'\"\n [iconName]=\"mainFooterAction.icon\" [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\">\n {{ mainFooterAction.text }}\n </gravity-button>\n }\n </div>\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div class=\"user-info\">\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"userInfo.icon\"/>\n <span class=\"hr-label sm-regular\">{{ userInfo.info }}</span>\n </div>\n }\n </div>\n }\n </section>\n </section>\n }\n </div>\n</div>\n\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.gravity-menu .menu-content .menu-body.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.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-menu{height:100%;width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md);transition:width .28s ease,gap .28s ease}.gravity-menu .menu-header{width:100%;display:flex;position:relative;align-items:center;padding:24px 26px 0 24px;justify-content:space-between}.gravity-menu .menu-header gravity-icon{cursor:pointer}.gravity-menu .menu-header svg{width:60px;height:24px;display:flex}.gravity-menu .menu-header .collapse-button{right:26px;display:flex;position:absolute;background:var(--surface-primary);padding:var(--gravity-spacing-xxs);border-radius:6.25rem}.gravity-menu .menu-content{width:100%;height:100%;display:flex;overflow:hidden;flex-direction:column;justify-content:space-between}.gravity-menu .menu-content .menu-body{display:flex;overflow-y:auto;flex-direction:column;align-items:flex-start;padding:0 18px 12px 24px}.gravity-menu .menu-content .menu-body:not(.has-scroll),.gravity-menu .menu-content .menu-body.has-scroll:not(:hover){margin-right:8px;scrollbar-width:none}.gravity-menu .menu-content .menu-body:not(.has-scroll)::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:not(:hover)::-webkit-scrollbar{width:0;height:0}.gravity-menu .menu-content .menu-body.has-scroll:hover{margin-right:0}.gravity-menu .menu-content .menu-body.sub-menu:hover{margin-right:8px!important}.gravity-menu .menu-content .menu-body .menu-section{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels{width:100%;color:var(--on-bg-menu-button-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level{width:100%;display:flex;cursor:pointer;position:relative;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);height:var(--gravity-spacing-md);border-left:4px solid transparent;padding:0 var(--gravity-spacing-xxs);--option-icon-color: var(--on-bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.is-open p{text-decoration:underline}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.selected{border-left:4px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p .badge{position:absolute;right:20px;top:8px}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level:hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level{display:flex;align-self:stretch;align-items:flex-start;justify-content:center;padding-left:var(--gravity-spacing-xxs);transition:max-height .3s ease-in-out,opacity .3s ease-in-out}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list{flex:1 0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line{height:100%;margin-left:var(--gravity-spacing-xs);border-left:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line.selected{margin:0 -1px 0 7px;border-left:3px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option{width:100%;height:34px;display:flex;align-items:center;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text{flex:1 0 0;height:24px;display:flex;cursor:pointer;align-items:center;justify-content:space-between;padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:not(.disabled):not(.selected):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.disabled{cursor:default;pointer-events:none;color:var(--on-bg-menu-button-disabled-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected{color:var(--on-bg-menu-button-pressed-primary);background-color:var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text .badge{height:14px;display:flex;border-radius:2.5px;align-items:flex-end;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-xxs);background:var(--bg-menu-badge-button);color:var(--on-bg-notification-badge-button)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text .badge span{line-height:6px}.gravity-menu .menu-content .menu-footer{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16px 22px 20px 24px;gap:var(--gravity-spacing-md);width:calc(100% - var(--gravity-spacing-xs));box-shadow:-8px 1px 4px rgba(var(--shadow-primary-rgba),var(--shadow-opacity))}.gravity-menu .menu-content .menu-footer .footer-content{width:234px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action{width:100%;height:24px;display:flex;align-items:center;gap:var(--gravity-spacing-xs);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action:hover{cursor:pointer;color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-footer .footer-content hr{margin:0;width:100%;border:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list{display:grid;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list .user-info{display:flex;padding:1px 2px;align-items:center;gap:var(--gravity-spacing-xxs)}.gravity-menu.collapsed{width:100px;position:relative;gap:var(--gravity-spacing-lg)}.gravity-menu.collapsed .menu-header{padding:24px 0 0;justify-content:center}.gravity-menu.collapsed .menu-header .collapse-button{right:-10px}.gravity-menu.collapsed .menu-content .menu-body{padding:0}.gravity-menu.collapsed .menu-content .menu-body.sub-menu{overflow:hidden!important}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level{height:70px!important;justify-content:center!important}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level:not(.empty).is-open{margin-bottom:var(--expanded-margin);background-color:var(--surface-primary);border-left:4px solid var(--on-bg-menu-button-disabled-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level:not(.empty).is-open.selected{background-color:var(--bg-button-active-tertiary);border-left:4px solid var(--bg-menu-button-pressed-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level p{width:100%;display:flex;text-align:center;position:relative;align-items:center;flex-direction:column;justify-content:center;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level p .badge.collapsed{top:3px;right:26px}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .second-level{min-width:220px;position:absolute;width:max-content;z-index:1;top:var(--submenu-offset, 0px);border-radius:.3125rem;padding:var(--gravity-spacing-xs);background:var(--surface-secondary);border:1px solid var(--surface-primary);background-color:var(--surface-secondary)}.gravity-menu.collapsed .menu-content .menu-footer{width:100%;padding:16px 8px 20px}.gravity-menu.collapsed .menu-content .menu-footer .footer-content{width:84px}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .secondary-actions{gap:var(--gravity-spacing-sm)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .secondary-actions .action{height:auto;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .user-info-list{width:100%;justify-items:center}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .user-info-list .user-info .icon{cursor:pointer}.gravity-menu.md,.gravity-menu.sm{gap:0;width:100%;max-width:100%;position:fixed;min-width:577px;transition:none;transform:translate(101%);background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md.open,.gravity-menu.sm.open{transform:translate(0);transition:transform .165s ease-in-out}.gravity-menu.md:not(.open),.gravity-menu.sm:not(.open){transform:translate(101%)}.gravity-menu.md.closing,.gravity-menu.sm.closing{transition:transform .165s ease-in-out}.gravity-menu.md .menu-logo svg,.gravity-menu.sm .menu-logo svg{width:70px;height:28px}.gravity-menu.md .menu-content,.gravity-menu.sm .menu-content{margin-top:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{padding:0 18px 0 24px}.gravity-menu.md .menu-content .menu-body .menu-section .levels,.gravity-menu.sm .menu-content .menu-body .menu-section .levels{display:flex;flex-direction:column;gap:var(--gravity-spacing-sm);border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level{height:20px;background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level:hover{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option{height:45px}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:hover,.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected{background-color:var(--bg-menu-mobile-button-pressed-primary)}.gravity-menu.md .menu-content .menu-footer-mobile,.gravity-menu.sm .menu-content .menu-footer-mobile{display:flex;align-items:center;align-self:stretch;flex-direction:column;justify-content:flex-end;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:0 var(--gravity-spacing-lg)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row{width:100%;display:flex;flex-direction:row;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container{padding:0;width:100%;min-width:auto}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list{gap:0;display:grid;border-top:1px solid var(--surface-secondary)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:center;gap:var(--gravity-spacing-xs);padding-top:var(--gravity-spacing-sm)}.gravity-menu.sm{min-width:320px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: GravityBadgeComponent, selector: "gravity-badge", inputs: ["size", "text", "number", "cypressTag", "type"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "component", type: GravityTooltipContainerComponent, selector: "gravity-tooltip-container", inputs: ["cypressTag", "tooltipBanner", "tooltipSimple"], outputs: ["closeBanner", "actionButton"] }, { kind: "component", type: GravityActionCardComponent, selector: "gravity-action-card", inputs: ["cypressTag", "label", "iconName", "fullWidth", "type", "state", "orientation"], outputs: ["clicked"] }, { kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "fullWidth", "isLoading", "showContent", "iconName", "size", "iconPosition", "customState", "type"] }] }); }
|
|
8236
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.0", type: GravityMenuComponent, isStandalone: true, selector: "gravity-menu", inputs: { items: "items", userInfo: "userInfo", logoUrl: "logoUrl", showCloseButton: "showCloseButton", isOpen: "isOpen", systemTime: "systemTime", collapsable: "collapsable", language: "language", cardButtons: "cardButtons", maxCardButtonsPerRow: "maxCardButtonsPerRow", currentLink: "currentLink", secondaryActions: "secondaryActions", size: "size", mainFooterAction: "mainFooterAction" }, outputs: { close: "close", selected: "selected", collapsed: "collapsed" }, viewQueries: [{ propertyName: "menuBody", first: true, predicate: ["menuBody"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"gravity-menu {{size}}\" [class.open]=\"isOpen\" [class.closing]=\"closing\"\n [class.collapsed]=\"collapsedMode && (size === 'xl' || size === 'lg')\">\n\n <div class=\"menu-header\">\n @if (logoUrl?.main_logo_url) {\n <svg-icon [src]=\"(collapsedMode && logoUrl.collapsed_logo_url) ? logoUrl.collapsed_logo_url : logoUrl.main_logo_url\"/>\n }\n\n @if ((size === 'md' || size === 'sm') && showCloseButton) {\n <gravity-icon [iconSize]=\"'lg-24'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu()\"/>\n }\n\n @if (collapsable && (size === 'xl' || size === 'lg')) {\n <div class=\"collapse-button\" (click)=\"collapseMenu()\">\n <gravity-icon [style.--icon-color]=\"'var(--bg-button-active-primary)'\" [iconSize]=\"'sm-12'\"\n [iconName]=\"collapsedMode ? 'arrow-right' : 'arrow-left'\"/>\n </div>\n }\n </div>\n\n <div class=\"menu-content\">\n <section #menuBody class=\"menu-body\" [class.sub-menu]=\"visibleSubMenu\">\n <div class=\"menu-section\">\n @for (header of items; track header; let i = $index) {\n <div class=\"levels\">\n <section class=\"first-level\" [class.selected]=\"isHeaderSelected(header)\"\n [routerLink]=\"header.link || undefined\" (click)=\"toggleMenuHeader(header, i)\"\n [class.is-open]=\"!header.collapsed\" [class.empty]=\"header.headerOptions?.length < 1\"\n [style.--expanded-margin]=\"header.headerOptions?.length > 0 ? (38 + (34 * header.headerOptions?.length)) + 'px' : '0'\">\n <p class=\"hr-label sm-regular\">\n @if (header.icon !== '') {\n <gravity-icon [style.--icon-color]=\"'var(--option-icon-color)'\" [iconName]=\"header.icon\" [iconSize]=\"'md-16'\"/>\n }\n @if (hasOptionBadge(header) && (size === 'xl' || size === 'lg')) {\n <gravity-badge class=\"badge\"\n [class.collapsed]=\"collapsedMode\" [size]=\"'sm'\" [type]=\"'neutral'\"></gravity-badge>\n }\n {{ header.text }}\n </p>\n @if (!collapsedMode) {\n <div>\n @if (header.headerOptions?.length > 0) {\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n }\n </div>\n }\n </section>\n @if (!header.collapsed && header.headerOptions?.length > 0) {\n <section class=\"second-level\"\n [@fadeSlide] [style.--submenu-offset]=\"((156 - scrollPosition) + (78 * i)) + 'px'\"\n [ngClass]=\"collapsedMode ? 'elevation-xs' : ''\">\n <div class=\"options-list\" [class.collapsed]=\"collapsedMode\">\n @for (option of header.headerOptions; track option) {\n <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n <div class=\"line\"\n [class.selected]=\"(size === 'xl' || size == 'lg') && option === selectedOption\"></div>\n <div class=\"option-text\"\n [ngClass]=\"(size === 'sm' || size === 'md') ? 'hr-label md-regular' : 'hr-label sm-regular'\"\n [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option, header)\">\n {{ option.text }}\n @if (option.badge_text && (size === 'xl' || size === 'lg')) {\n <gravity-badge\n [text]=\"option.badge_text\" [type]=\"'neutral'\" [size]=\"'sm'\"></gravity-badge>\n }\n </div>\n </div>\n }\n </div>\n </section>\n }\n </div>\n }\n </div>\n </section>\n\n @if ((secondaryActions || userInfo) && (size === 'xl' || size === 'lg')) {\n <section\n class=\"menu-footer elevation-xs\">\n <section class=\"footer-content\">\n @if (secondaryActions) {\n <div class=\"secondary-actions\">\n @for (action of secondaryActions; track action) {\n <div class=\"action\"\n (click)=\"action.callback(); clearSelection(action.clear_selection)\">\n @if (action.icon !== '') {\n <gravity-icon [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n }\n <span class=\"hr-label sm-regular\">{{ action.text }}</span>\n </div>\n }\n </div>\n }\n @if (secondaryActions && userInfo) {\n <hr class=\"separator-line\">\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div class=\"user-info\" [tooltip]=\"collapsedMode ? tooltipUserInfoTemplate : null\" [contentType]=\"'template'\" [placement]=\"'right'\">\n @if (userInfo.icon !== '') {\n <gravity-icon class=\"icon\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"/>\n }\n @if (!collapsedMode) {\n <span class=\"hr-label sm-regular\">{{ userInfo.info }}</span>\n }\n <ng-template #tooltipUserInfoTemplate>\n <gravity-tooltip-container [tooltipSimple]=\"{text: userInfo.info}\"/>\n </ng-template>\n </div>\n }\n </div>\n }\n\n @if (systemTime) {\n <div class=\"system-time\" [tooltip]=\"tooltipSystemTimeTemplate\" [contentType]=\"'template'\" [placement]=\"'top'\">\n <gravity-icon [iconName]=\"'clock'\" [iconSize]=\"'md-16'\" />\n <span class=\"hr-label sm-regular\" >\n {{ collapsedMode ? systemTime.replace(' ', '\\n') : systemTime }}\n </span>\n </div>\n\n <ng-template #tooltipSystemTimeTemplate>\n <gravity-tooltip-container [tooltipSimple]=\"{text: systemTimeText}\"/>\n </ng-template>\n }\n </section>\n </section>\n }\n\n <!-- - - - - - - - - - - Mobile Resolutions - - - - - - - - - - -->\n\n @if ((cardButtons || userInfo) && (size === 'md' || size === 'sm')) {\n <section class=\"menu-footer-mobile\">\n <section class=\"footer-content\">\n @if (cardButtons) {\n <div class=\"secondary-actions\">\n <div class=\"action-cards\">\n @for (row of getCardButtonsRows(); track row) {\n <div class=\"action-cards-row\">\n @for (button of row; track button) {\n <gravity-action-card\n [type]=\"'secondary'\"\n [orientation]=\"'vrt-center'\"\n [iconName]=\"button.icon\" [label]=\"button.text\"\n (clicked)=\"button.callback(); clearSelection(button.clear_selection); selected.emit()\"/>\n }\n </div>\n }\n </div>\n @if (mainFooterAction) {\n <gravity-button [size]=\"'md'\" [type]=\"'tertiary'\" [fullWidth]=\"size === 'sm' || size === 'md'\"\n [iconName]=\"mainFooterAction.icon\" [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\">\n {{ mainFooterAction.text }}\n </gravity-button>\n }\n </div>\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div class=\"user-info\">\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"userInfo.icon\"/>\n <span class=\"hr-label sm-regular\">{{ userInfo.info }}</span>\n </div>\n }\n </div>\n }\n </section>\n </section>\n }\n </div>\n</div>\n\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.gravity-menu .menu-content .menu-body.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.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-menu{height:100%;width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md);transition:width .28s ease,gap .28s ease}.gravity-menu .menu-header{width:100%;display:flex;position:relative;align-items:center;padding:24px 26px 0 24px;justify-content:space-between}.gravity-menu .menu-header gravity-icon{cursor:pointer}.gravity-menu .menu-header svg{width:60px;height:24px;display:flex}.gravity-menu .menu-header .collapse-button{right:26px;display:flex;position:absolute;background:var(--surface-primary);padding:var(--gravity-spacing-xxs);border-radius:6.25rem}.gravity-menu .menu-content{width:100%;height:100%;display:flex;overflow:hidden;flex-direction:column;justify-content:space-between}.gravity-menu .menu-content .menu-body{display:flex;overflow-y:auto;flex-direction:column;align-items:flex-start;padding:0 18px 12px 24px}.gravity-menu .menu-content .menu-body:not(.has-scroll),.gravity-menu .menu-content .menu-body.has-scroll:not(:hover){margin-right:8px;scrollbar-width:none}.gravity-menu .menu-content .menu-body:not(.has-scroll)::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:not(:hover)::-webkit-scrollbar{width:0;height:0}.gravity-menu .menu-content .menu-body.has-scroll:hover{margin-right:0}.gravity-menu .menu-content .menu-body.sub-menu:hover{margin-right:8px!important}.gravity-menu .menu-content .menu-body .menu-section{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels{width:100%;color:var(--on-bg-menu-button-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level{width:100%;display:flex;cursor:pointer;position:relative;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);height:var(--gravity-spacing-md);border-left:4px solid transparent;padding:0 var(--gravity-spacing-xxs);--option-icon-color: var(--on-bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.is-open p{text-decoration:underline}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.selected{border-left:4px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p .badge{position:absolute;right:20px;top:8px}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level:hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level{display:flex;align-self:stretch;align-items:flex-start;justify-content:center;padding-left:var(--gravity-spacing-xxs);transition:max-height .3s ease-in-out,opacity .3s ease-in-out}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list{flex:1 0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line{height:100%;margin-left:var(--gravity-spacing-xs);border-left:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line.selected{margin:0 -1px 0 7px;border-left:3px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option{width:100%;height:34px;display:flex;align-items:center;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text{flex:1 0 0;height:24px;display:flex;cursor:pointer;align-items:center;justify-content:space-between;padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:not(.disabled):not(.selected):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.disabled{cursor:default;pointer-events:none;color:var(--on-bg-menu-button-disabled-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected{color:var(--on-bg-menu-button-pressed-primary);background-color:var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text .badge{height:14px;display:flex;border-radius:2.5px;align-items:flex-end;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-xxs);background:var(--bg-menu-badge-button);color:var(--on-bg-notification-badge-button)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text .badge span{line-height:6px}.gravity-menu .menu-content .menu-footer{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16px 22px 20px 24px;gap:var(--gravity-spacing-md);width:calc(100% - var(--gravity-spacing-xs));box-shadow:-8px 1px 4px rgba(var(--shadow-primary-rgba),var(--shadow-opacity))}.gravity-menu .menu-content .menu-footer .footer-content{width:234px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action{width:100%;height:24px;display:flex;align-items:center;gap:var(--gravity-spacing-xs);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action:hover{cursor:pointer;color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-footer .footer-content hr{margin:0;width:100%;border:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list{display:grid;align-items:center;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list .user-info{display:flex;padding:1px 2px;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .system-time{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .system-time span{white-space:pre-line}.gravity-menu.collapsed{width:100px;position:relative;gap:var(--gravity-spacing-lg)}.gravity-menu.collapsed .menu-header{padding:24px 0 0;justify-content:center}.gravity-menu.collapsed .menu-header .collapse-button{right:-10px}.gravity-menu.collapsed .menu-content .menu-body{padding:0}.gravity-menu.collapsed .menu-content .menu-body.sub-menu{overflow:hidden!important}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level{height:70px!important;justify-content:center!important}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level:not(.empty).is-open{margin-bottom:var(--expanded-margin);background-color:var(--surface-primary);border-left:4px solid var(--on-bg-menu-button-disabled-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level:not(.empty).is-open.selected{background-color:var(--bg-button-active-tertiary);border-left:4px solid var(--bg-menu-button-pressed-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level p{width:100%;display:flex;text-align:center;position:relative;align-items:center;flex-direction:column;justify-content:center;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level p .badge.collapsed{top:3px;right:26px}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .second-level{min-width:220px;position:absolute;width:max-content;z-index:1;top:var(--submenu-offset, 0px);border-radius:.3125rem;padding:var(--gravity-spacing-xs);background:var(--surface-secondary);border:1px solid var(--surface-primary);background-color:var(--surface-secondary)}.gravity-menu.collapsed .menu-content .menu-footer{width:100%;padding:16px 8px 20px}.gravity-menu.collapsed .menu-content .menu-footer .footer-content{width:84px}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .secondary-actions{gap:var(--gravity-spacing-sm)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .secondary-actions .action{height:auto;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .user-info-list{width:100%;justify-items:center}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .user-info-list .user-info{padding:0 var(--gravity-spacing-xs)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .system-time{width:100%;display:flex;text-align:center;align-items:center;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.md,.gravity-menu.sm{gap:0;width:100%;max-width:100%;position:fixed;min-width:577px;transition:none;transform:translate(101%);background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md.open,.gravity-menu.sm.open{transform:translate(0);transition:transform .165s ease-in-out}.gravity-menu.md:not(.open),.gravity-menu.sm:not(.open){transform:translate(101%)}.gravity-menu.md.closing,.gravity-menu.sm.closing{transition:transform .165s ease-in-out}.gravity-menu.md .menu-logo svg,.gravity-menu.sm .menu-logo svg{width:70px;height:28px}.gravity-menu.md .menu-content,.gravity-menu.sm .menu-content{margin-top:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{padding:0 18px 0 24px}.gravity-menu.md .menu-content .menu-body .menu-section .levels,.gravity-menu.sm .menu-content .menu-body .menu-section .levels{display:flex;flex-direction:column;gap:var(--gravity-spacing-sm);border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level{height:20px;background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level:hover{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option{height:45px}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:hover,.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected{background-color:var(--bg-menu-mobile-button-pressed-primary)}.gravity-menu.md .menu-content .menu-footer-mobile,.gravity-menu.sm .menu-content .menu-footer-mobile{display:flex;align-items:center;align-self:stretch;flex-direction:column;justify-content:flex-end;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:0 var(--gravity-spacing-lg)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row{width:100%;display:flex;flex-direction:row;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container{padding:0;width:100%;min-width:auto}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list{gap:0;display:grid;border-top:1px solid var(--surface-secondary)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:center;gap:var(--gravity-spacing-xs);padding-top:var(--gravity-spacing-sm)}.gravity-menu.sm{min-width:320px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}\n"], dependencies: [{ kind: "component", type: SvgIconComponent, selector: "svg-icon", inputs: ["src", "name", "stretch", "applyClass", "svgClass", "class", "viewBox", "svgAriaLabel", "onSVGLoaded", "svgStyle"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: GravityBadgeComponent, selector: "gravity-badge", inputs: ["size", "text", "number", "cypressTag", "type"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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"] }, { kind: "component", type: GravityTooltipContainerComponent, selector: "gravity-tooltip-container", inputs: ["cypressTag", "tooltipBanner", "tooltipSimple"], outputs: ["closeBanner", "actionButton"] }, { kind: "component", type: GravityActionCardComponent, selector: "gravity-action-card", inputs: ["cypressTag", "label", "iconName", "fullWidth", "type", "state", "orientation"], outputs: ["clicked"] }, { kind: "component", type: GravityButtonComponent, selector: "gravity-button", inputs: ["cypressTag", "disabled", "fullWidth", "isLoading", "showContent", "iconName", "size", "iconPosition", "customState", "type"] }] }); }
|
|
8181
8237
|
}
|
|
8182
8238
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityMenuComponent, decorators: [{
|
|
8183
8239
|
type: Component,
|
|
8184
|
-
args: [{ selector: 'gravity-menu', standalone: true, imports: [SvgIconComponent, GravityIconComponent, RouterLink, GravityBadgeComponent, NgClass, GravityTooltipDirective, GravityTooltipContainerComponent, GravityActionCardComponent, GravityButtonComponent], template: "<div class=\"gravity-menu {{size}}\" [class.open]=\"isOpen\" [class.closing]=\"closing\"\n [class.collapsed]=\"collapsedMode && (size === 'xl' || size === 'lg')\">\n\n <div class=\"menu-header\">\n @if (logoUrl?.main_logo_url) {\n <svg-icon\n [src]=\"(collapsedMode && logoUrl.collapsed_logo_url) ? logoUrl.collapsed_logo_url : logoUrl.main_logo_url\"/>\n }\n\n @if ((size === 'md' || size === 'sm') && showCloseButton) {\n <gravity-icon\n [iconSize]=\"'lg-24'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu()\"/>\n }\n\n @if (collapsable && (size === 'xl' || size === 'lg')) {\n <div class=\"collapse-button\" (click)=\"collapseMenu()\">\n <gravity-icon [style.--icon-color]=\"'var(--bg-button-active-primary)'\" [iconSize]=\"'sm-12'\"\n [iconName]=\"collapsedMode ? 'arrow-right' : 'arrow-left'\"/>\n </div>\n }\n </div>\n\n <div class=\"menu-content\">\n <section #menuBody class=\"menu-body\" [class.sub-menu]=\"visibleSubMenu\">\n <div class=\"menu-section\">\n @for (header of items; track header; let i = $index) {\n <div class=\"levels\">\n <section class=\"first-level\" [class.selected]=\"isHeaderSelected(header)\"\n [routerLink]=\"header.link || undefined\" (click)=\"toggleMenuHeader(header, i)\"\n [class.is-open]=\"!header.collapsed\" [class.empty]=\"header.headerOptions?.length < 1\"\n [style.--expanded-margin]=\"header.headerOptions?.length > 0 ? (38 + (34 * header.headerOptions?.length)) + 'px' : '0'\">\n <p class=\"hr-label sm-regular\">\n @if (header.icon !== '') {\n <gravity-icon [style.--icon-color]=\"'var(--option-icon-color)'\" [iconName]=\"header.icon\" [iconSize]=\"'md-16'\"/>\n }\n @if (hasOptionBadge(header) && (size === 'xl' || size === 'lg')) {\n <gravity-badge class=\"badge\"\n [class.collapsed]=\"collapsedMode\" [size]=\"'sm'\" [type]=\"'neutral'\"></gravity-badge>\n }\n {{ header.text }}\n </p>\n @if (!collapsedMode) {\n <div>\n @if (header.headerOptions?.length > 0) {\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n }\n </div>\n }\n </section>\n @if (!header.collapsed && header.headerOptions?.length > 0) {\n <section class=\"second-level\"\n [@fadeSlide] [style.--submenu-offset]=\"((156 - scrollPosition) + (78 * i)) + 'px'\"\n [ngClass]=\"collapsedMode ? 'elevation-xs' : ''\">\n <div class=\"options-list\" [class.collapsed]=\"collapsedMode\">\n @for (option of header.headerOptions; track option) {\n <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n <div class=\"line\"\n [class.selected]=\"(size === 'xl' || size == 'lg') && option === selectedOption\"></div>\n <div class=\"option-text\"\n [ngClass]=\"(size === 'sm' || size === 'md') ? 'hr-label md-regular' : 'hr-label sm-regular'\"\n [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option, header)\">\n {{ option.text }}\n @if (option.badge_text && (size === 'xl' || size === 'lg')) {\n <gravity-badge\n [text]=\"option.badge_text\" [type]=\"'neutral'\" [size]=\"'sm'\"></gravity-badge>\n }\n </div>\n </div>\n }\n </div>\n </section>\n }\n </div>\n }\n </div>\n </section>\n\n @if ((secondaryActions || userInfo) && (size === 'xl' || size === 'lg')) {\n <section\n class=\"menu-footer elevation-xs\">\n <section class=\"footer-content\">\n @if (secondaryActions) {\n <div class=\"secondary-actions\">\n @for (action of secondaryActions; track action) {\n <div class=\"action\"\n (click)=\"action.callback(); clearSelection(action.clear_selection)\">\n @if (action.icon !== '') {\n <gravity-icon [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n }\n <span class=\"hr-label sm-regular\">{{ action.text }}</span>\n </div>\n }\n </div>\n }\n @if (secondaryActions && userInfo) {\n <hr class=\"separator-line\">\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div class=\"user-info\">\n @if (userInfo.icon !== '') {\n <gravity-icon class=\"icon\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"\n [tooltip]=\"collapsedMode ? tooltipUserInfoTemplate : null\" [contentType]=\"'template'\" [placement]=\"'right'\"/>\n }\n @if (!collapsedMode) {\n <span class=\"hr-label sm-regular\">{{ userInfo.info }}</span>\n }\n <ng-template #tooltipUserInfoTemplate>\n <gravity-tooltip-container [tooltipSimple]=\"{text: userInfo.info}\"/>\n </ng-template>\n </div>\n }\n </div>\n }\n </section>\n </section>\n }\n\n <!-- - - - - - - - - - - Mobile Resolutions - - - - - - - - - - -->\n\n @if ((cardButtons || userInfo) && (size === 'md' || size === 'sm')) {\n <section class=\"menu-footer-mobile\">\n <section class=\"footer-content\">\n @if (cardButtons) {\n <div class=\"secondary-actions\">\n <div class=\"action-cards\">\n @for (row of getCardButtonsRows(); track row) {\n <div class=\"action-cards-row\">\n @for (button of row; track button) {\n <gravity-action-card\n [type]=\"'secondary'\"\n [orientation]=\"'vrt-center'\"\n [iconName]=\"button.icon\" [label]=\"button.text\"\n (clicked)=\"button.callback(); clearSelection(button.clear_selection); selected.emit()\"/>\n }\n </div>\n }\n </div>\n @if (mainFooterAction) {\n <gravity-button [size]=\"'md'\" [type]=\"'tertiary'\" [fullWidth]=\"size === 'sm' || size === 'md'\"\n [iconName]=\"mainFooterAction.icon\" [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\">\n {{ mainFooterAction.text }}\n </gravity-button>\n }\n </div>\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div class=\"user-info\">\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"userInfo.icon\"/>\n <span class=\"hr-label sm-regular\">{{ userInfo.info }}</span>\n </div>\n }\n </div>\n }\n </section>\n </section>\n }\n </div>\n</div>\n\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.gravity-menu .menu-content .menu-body.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.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-menu{height:100%;width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md);transition:width .28s ease,gap .28s ease}.gravity-menu .menu-header{width:100%;display:flex;position:relative;align-items:center;padding:24px 26px 0 24px;justify-content:space-between}.gravity-menu .menu-header gravity-icon{cursor:pointer}.gravity-menu .menu-header svg{width:60px;height:24px;display:flex}.gravity-menu .menu-header .collapse-button{right:26px;display:flex;position:absolute;background:var(--surface-primary);padding:var(--gravity-spacing-xxs);border-radius:6.25rem}.gravity-menu .menu-content{width:100%;height:100%;display:flex;overflow:hidden;flex-direction:column;justify-content:space-between}.gravity-menu .menu-content .menu-body{display:flex;overflow-y:auto;flex-direction:column;align-items:flex-start;padding:0 18px 12px 24px}.gravity-menu .menu-content .menu-body:not(.has-scroll),.gravity-menu .menu-content .menu-body.has-scroll:not(:hover){margin-right:8px;scrollbar-width:none}.gravity-menu .menu-content .menu-body:not(.has-scroll)::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:not(:hover)::-webkit-scrollbar{width:0;height:0}.gravity-menu .menu-content .menu-body.has-scroll:hover{margin-right:0}.gravity-menu .menu-content .menu-body.sub-menu:hover{margin-right:8px!important}.gravity-menu .menu-content .menu-body .menu-section{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels{width:100%;color:var(--on-bg-menu-button-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level{width:100%;display:flex;cursor:pointer;position:relative;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);height:var(--gravity-spacing-md);border-left:4px solid transparent;padding:0 var(--gravity-spacing-xxs);--option-icon-color: var(--on-bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.is-open p{text-decoration:underline}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.selected{border-left:4px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p .badge{position:absolute;right:20px;top:8px}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level:hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level{display:flex;align-self:stretch;align-items:flex-start;justify-content:center;padding-left:var(--gravity-spacing-xxs);transition:max-height .3s ease-in-out,opacity .3s ease-in-out}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list{flex:1 0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line{height:100%;margin-left:var(--gravity-spacing-xs);border-left:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line.selected{margin:0 -1px 0 7px;border-left:3px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option{width:100%;height:34px;display:flex;align-items:center;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text{flex:1 0 0;height:24px;display:flex;cursor:pointer;align-items:center;justify-content:space-between;padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:not(.disabled):not(.selected):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.disabled{cursor:default;pointer-events:none;color:var(--on-bg-menu-button-disabled-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected{color:var(--on-bg-menu-button-pressed-primary);background-color:var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text .badge{height:14px;display:flex;border-radius:2.5px;align-items:flex-end;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-xxs);background:var(--bg-menu-badge-button);color:var(--on-bg-notification-badge-button)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text .badge span{line-height:6px}.gravity-menu .menu-content .menu-footer{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16px 22px 20px 24px;gap:var(--gravity-spacing-md);width:calc(100% - var(--gravity-spacing-xs));box-shadow:-8px 1px 4px rgba(var(--shadow-primary-rgba),var(--shadow-opacity))}.gravity-menu .menu-content .menu-footer .footer-content{width:234px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action{width:100%;height:24px;display:flex;align-items:center;gap:var(--gravity-spacing-xs);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action:hover{cursor:pointer;color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-footer .footer-content hr{margin:0;width:100%;border:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list{display:grid;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list .user-info{display:flex;padding:1px 2px;align-items:center;gap:var(--gravity-spacing-xxs)}.gravity-menu.collapsed{width:100px;position:relative;gap:var(--gravity-spacing-lg)}.gravity-menu.collapsed .menu-header{padding:24px 0 0;justify-content:center}.gravity-menu.collapsed .menu-header .collapse-button{right:-10px}.gravity-menu.collapsed .menu-content .menu-body{padding:0}.gravity-menu.collapsed .menu-content .menu-body.sub-menu{overflow:hidden!important}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level{height:70px!important;justify-content:center!important}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level:not(.empty).is-open{margin-bottom:var(--expanded-margin);background-color:var(--surface-primary);border-left:4px solid var(--on-bg-menu-button-disabled-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level:not(.empty).is-open.selected{background-color:var(--bg-button-active-tertiary);border-left:4px solid var(--bg-menu-button-pressed-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level p{width:100%;display:flex;text-align:center;position:relative;align-items:center;flex-direction:column;justify-content:center;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level p .badge.collapsed{top:3px;right:26px}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .second-level{min-width:220px;position:absolute;width:max-content;z-index:1;top:var(--submenu-offset, 0px);border-radius:.3125rem;padding:var(--gravity-spacing-xs);background:var(--surface-secondary);border:1px solid var(--surface-primary);background-color:var(--surface-secondary)}.gravity-menu.collapsed .menu-content .menu-footer{width:100%;padding:16px 8px 20px}.gravity-menu.collapsed .menu-content .menu-footer .footer-content{width:84px}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .secondary-actions{gap:var(--gravity-spacing-sm)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .secondary-actions .action{height:auto;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .user-info-list{width:100%;justify-items:center}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .user-info-list .user-info .icon{cursor:pointer}.gravity-menu.md,.gravity-menu.sm{gap:0;width:100%;max-width:100%;position:fixed;min-width:577px;transition:none;transform:translate(101%);background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md.open,.gravity-menu.sm.open{transform:translate(0);transition:transform .165s ease-in-out}.gravity-menu.md:not(.open),.gravity-menu.sm:not(.open){transform:translate(101%)}.gravity-menu.md.closing,.gravity-menu.sm.closing{transition:transform .165s ease-in-out}.gravity-menu.md .menu-logo svg,.gravity-menu.sm .menu-logo svg{width:70px;height:28px}.gravity-menu.md .menu-content,.gravity-menu.sm .menu-content{margin-top:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{padding:0 18px 0 24px}.gravity-menu.md .menu-content .menu-body .menu-section .levels,.gravity-menu.sm .menu-content .menu-body .menu-section .levels{display:flex;flex-direction:column;gap:var(--gravity-spacing-sm);border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level{height:20px;background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level:hover{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option{height:45px}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:hover,.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected{background-color:var(--bg-menu-mobile-button-pressed-primary)}.gravity-menu.md .menu-content .menu-footer-mobile,.gravity-menu.sm .menu-content .menu-footer-mobile{display:flex;align-items:center;align-self:stretch;flex-direction:column;justify-content:flex-end;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:0 var(--gravity-spacing-lg)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row{width:100%;display:flex;flex-direction:row;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container{padding:0;width:100%;min-width:auto}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list{gap:0;display:grid;border-top:1px solid var(--surface-secondary)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:center;gap:var(--gravity-spacing-xs);padding-top:var(--gravity-spacing-sm)}.gravity-menu.sm{min-width:320px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}\n"] }]
|
|
8240
|
+
args: [{ selector: 'gravity-menu', standalone: true, imports: [SvgIconComponent, GravityIconComponent, RouterLink, GravityBadgeComponent, NgClass, GravityTooltipDirective, GravityTooltipContainerComponent, GravityActionCardComponent, GravityButtonComponent], template: "<div class=\"gravity-menu {{size}}\" [class.open]=\"isOpen\" [class.closing]=\"closing\"\n [class.collapsed]=\"collapsedMode && (size === 'xl' || size === 'lg')\">\n\n <div class=\"menu-header\">\n @if (logoUrl?.main_logo_url) {\n <svg-icon [src]=\"(collapsedMode && logoUrl.collapsed_logo_url) ? logoUrl.collapsed_logo_url : logoUrl.main_logo_url\"/>\n }\n\n @if ((size === 'md' || size === 'sm') && showCloseButton) {\n <gravity-icon [iconSize]=\"'lg-24'\" [iconName]=\"'unsuccess'\" (click)=\"closeMenu()\"/>\n }\n\n @if (collapsable && (size === 'xl' || size === 'lg')) {\n <div class=\"collapse-button\" (click)=\"collapseMenu()\">\n <gravity-icon [style.--icon-color]=\"'var(--bg-button-active-primary)'\" [iconSize]=\"'sm-12'\"\n [iconName]=\"collapsedMode ? 'arrow-right' : 'arrow-left'\"/>\n </div>\n }\n </div>\n\n <div class=\"menu-content\">\n <section #menuBody class=\"menu-body\" [class.sub-menu]=\"visibleSubMenu\">\n <div class=\"menu-section\">\n @for (header of items; track header; let i = $index) {\n <div class=\"levels\">\n <section class=\"first-level\" [class.selected]=\"isHeaderSelected(header)\"\n [routerLink]=\"header.link || undefined\" (click)=\"toggleMenuHeader(header, i)\"\n [class.is-open]=\"!header.collapsed\" [class.empty]=\"header.headerOptions?.length < 1\"\n [style.--expanded-margin]=\"header.headerOptions?.length > 0 ? (38 + (34 * header.headerOptions?.length)) + 'px' : '0'\">\n <p class=\"hr-label sm-regular\">\n @if (header.icon !== '') {\n <gravity-icon [style.--icon-color]=\"'var(--option-icon-color)'\" [iconName]=\"header.icon\" [iconSize]=\"'md-16'\"/>\n }\n @if (hasOptionBadge(header) && (size === 'xl' || size === 'lg')) {\n <gravity-badge class=\"badge\"\n [class.collapsed]=\"collapsedMode\" [size]=\"'sm'\" [type]=\"'neutral'\"></gravity-badge>\n }\n {{ header.text }}\n </p>\n @if (!collapsedMode) {\n <div>\n @if (header.headerOptions?.length > 0) {\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"header.collapsed ? 'arrow-down' : 'arrow-up'\"/>\n }\n </div>\n }\n </section>\n @if (!header.collapsed && header.headerOptions?.length > 0) {\n <section class=\"second-level\"\n [@fadeSlide] [style.--submenu-offset]=\"((156 - scrollPosition) + (78 * i)) + 'px'\"\n [ngClass]=\"collapsedMode ? 'elevation-xs' : ''\">\n <div class=\"options-list\" [class.collapsed]=\"collapsedMode\">\n @for (option of header.headerOptions; track option) {\n <div class=\"option\" [attr.data-cy]=\"option.cypress_tag\" [class.selected]=\"option === selectedOption\">\n <div class=\"line\"\n [class.selected]=\"(size === 'xl' || size == 'lg') && option === selectedOption\"></div>\n <div class=\"option-text\"\n [ngClass]=\"(size === 'sm' || size === 'md') ? 'hr-label md-regular' : 'hr-label sm-regular'\"\n [class.disabled]=\"option.disabled\" [class.selected]=\"option === selectedOption\"\n [routerLink]=\"option.link || undefined\" (click)=\"selectOption(option, header)\">\n {{ option.text }}\n @if (option.badge_text && (size === 'xl' || size === 'lg')) {\n <gravity-badge\n [text]=\"option.badge_text\" [type]=\"'neutral'\" [size]=\"'sm'\"></gravity-badge>\n }\n </div>\n </div>\n }\n </div>\n </section>\n }\n </div>\n }\n </div>\n </section>\n\n @if ((secondaryActions || userInfo) && (size === 'xl' || size === 'lg')) {\n <section\n class=\"menu-footer elevation-xs\">\n <section class=\"footer-content\">\n @if (secondaryActions) {\n <div class=\"secondary-actions\">\n @for (action of secondaryActions; track action) {\n <div class=\"action\"\n (click)=\"action.callback(); clearSelection(action.clear_selection)\">\n @if (action.icon !== '') {\n <gravity-icon [iconName]=\"action.icon\" [iconSize]=\"'md-16'\"/>\n }\n <span class=\"hr-label sm-regular\">{{ action.text }}</span>\n </div>\n }\n </div>\n }\n @if (secondaryActions && userInfo) {\n <hr class=\"separator-line\">\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div class=\"user-info\" [tooltip]=\"collapsedMode ? tooltipUserInfoTemplate : null\" [contentType]=\"'template'\" [placement]=\"'right'\">\n @if (userInfo.icon !== '') {\n <gravity-icon class=\"icon\" [iconName]=\"userInfo.icon\" [iconSize]=\"'sm-12'\"/>\n }\n @if (!collapsedMode) {\n <span class=\"hr-label sm-regular\">{{ userInfo.info }}</span>\n }\n <ng-template #tooltipUserInfoTemplate>\n <gravity-tooltip-container [tooltipSimple]=\"{text: userInfo.info}\"/>\n </ng-template>\n </div>\n }\n </div>\n }\n\n @if (systemTime) {\n <div class=\"system-time\" [tooltip]=\"tooltipSystemTimeTemplate\" [contentType]=\"'template'\" [placement]=\"'top'\">\n <gravity-icon [iconName]=\"'clock'\" [iconSize]=\"'md-16'\" />\n <span class=\"hr-label sm-regular\" >\n {{ collapsedMode ? systemTime.replace(' ', '\\n') : systemTime }}\n </span>\n </div>\n\n <ng-template #tooltipSystemTimeTemplate>\n <gravity-tooltip-container [tooltipSimple]=\"{text: systemTimeText}\"/>\n </ng-template>\n }\n </section>\n </section>\n }\n\n <!-- - - - - - - - - - - Mobile Resolutions - - - - - - - - - - -->\n\n @if ((cardButtons || userInfo) && (size === 'md' || size === 'sm')) {\n <section class=\"menu-footer-mobile\">\n <section class=\"footer-content\">\n @if (cardButtons) {\n <div class=\"secondary-actions\">\n <div class=\"action-cards\">\n @for (row of getCardButtonsRows(); track row) {\n <div class=\"action-cards-row\">\n @for (button of row; track button) {\n <gravity-action-card\n [type]=\"'secondary'\"\n [orientation]=\"'vrt-center'\"\n [iconName]=\"button.icon\" [label]=\"button.text\"\n (clicked)=\"button.callback(); clearSelection(button.clear_selection); selected.emit()\"/>\n }\n </div>\n }\n </div>\n @if (mainFooterAction) {\n <gravity-button [size]=\"'md'\" [type]=\"'tertiary'\" [fullWidth]=\"size === 'sm' || size === 'md'\"\n [iconName]=\"mainFooterAction.icon\" [iconPosition]=\"'left'\" (click)=\"mainFooterAction.callback()\">\n {{ mainFooterAction.text }}\n </gravity-button>\n }\n </div>\n }\n @if (userInfo) {\n <div class=\"user-info-list\">\n @for (userInfo of userInfo; track userInfo) {\n <div class=\"user-info\">\n <gravity-icon [iconSize]=\"'sm-12'\" [iconName]=\"userInfo.icon\"/>\n <span class=\"hr-label sm-regular\">{{ userInfo.info }}</span>\n </div>\n }\n </div>\n }\n </section>\n </section>\n }\n </div>\n</div>\n\n", styles: [".scrollbar-sm::-webkit-scrollbar{width:4px;height:4px}.scrollbar-sm::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-sm::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.scrollbar-md::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar{width:8px;height:8px}.scrollbar-md::-webkit-scrollbar-track,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-track{background-color:var(--surface-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb,.gravity-menu .menu-content .menu-body.has-scroll:hover::-webkit-scrollbar-thumb{background-color:var(--placeholder-empty-enabled-primary);border-radius:5px}.scrollbar-md::-webkit-scrollbar-thumb:hover,.gravity-menu .menu-content .menu-body.has-scroll::-webkit-scrollbar-thumb:hover{background-color:var(--line-empty-enabled-primary)}.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-menu{height:100%;width:266px;-webkit-user-select:none;user-select:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-md);transition:width .28s ease,gap .28s ease}.gravity-menu .menu-header{width:100%;display:flex;position:relative;align-items:center;padding:24px 26px 0 24px;justify-content:space-between}.gravity-menu .menu-header gravity-icon{cursor:pointer}.gravity-menu .menu-header svg{width:60px;height:24px;display:flex}.gravity-menu .menu-header .collapse-button{right:26px;display:flex;position:absolute;background:var(--surface-primary);padding:var(--gravity-spacing-xxs);border-radius:6.25rem}.gravity-menu .menu-content{width:100%;height:100%;display:flex;overflow:hidden;flex-direction:column;justify-content:space-between}.gravity-menu .menu-content .menu-body{display:flex;overflow-y:auto;flex-direction:column;align-items:flex-start;padding:0 18px 12px 24px}.gravity-menu .menu-content .menu-body:not(.has-scroll),.gravity-menu .menu-content .menu-body.has-scroll:not(:hover){margin-right:8px;scrollbar-width:none}.gravity-menu .menu-content .menu-body:not(.has-scroll)::-webkit-scrollbar,.gravity-menu .menu-content .menu-body.has-scroll:not(:hover)::-webkit-scrollbar{width:0;height:0}.gravity-menu .menu-content .menu-body.has-scroll:hover{margin-right:0}.gravity-menu .menu-content .menu-body.sub-menu:hover{margin-right:8px!important}.gravity-menu .menu-content .menu-body .menu-section{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels{width:100%;color:var(--on-bg-menu-button-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level{width:100%;display:flex;cursor:pointer;position:relative;align-items:center;justify-content:space-between;gap:var(--gravity-spacing-xs);height:var(--gravity-spacing-md);border-left:4px solid transparent;padding:0 var(--gravity-spacing-xxs);--option-icon-color: var(--on-bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.is-open p{text-decoration:underline}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level.selected{border-left:4px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level p .badge{position:absolute;right:20px;top:8px}.gravity-menu .menu-content .menu-body .menu-section .levels .first-level:hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level{display:flex;align-self:stretch;align-items:flex-start;justify-content:center;padding-left:var(--gravity-spacing-xxs);transition:max-height .3s ease-in-out,opacity .3s ease-in-out}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list{flex:1 0 0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line{height:100%;margin-left:var(--gravity-spacing-xs);border-left:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .line.selected{margin:0 -1px 0 7px;border-left:3px solid var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option{width:100%;height:34px;display:flex;align-items:center;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text{flex:1 0 0;height:24px;display:flex;cursor:pointer;align-items:center;justify-content:space-between;padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:not(.disabled):not(.selected):hover{color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.disabled{cursor:default;pointer-events:none;color:var(--on-bg-menu-button-disabled-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected{color:var(--on-bg-menu-button-pressed-primary);background-color:var(--bg-menu-button-pressed-primary)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text .badge{height:14px;display:flex;border-radius:2.5px;align-items:flex-end;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-xxs);background:var(--bg-menu-badge-button);color:var(--on-bg-notification-badge-button)}.gravity-menu .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text .badge span{line-height:6px}.gravity-menu .menu-content .menu-footer{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:16px 22px 20px 24px;gap:var(--gravity-spacing-md);width:calc(100% - var(--gravity-spacing-xs));box-shadow:-8px 1px 4px rgba(var(--shadow-primary-rgba),var(--shadow-opacity))}.gravity-menu .menu-content .menu-footer .footer-content{width:234px;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions{width:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action{width:100%;height:24px;display:flex;align-items:center;gap:var(--gravity-spacing-xs);padding:0 var(--gravity-spacing-xxs)}.gravity-menu .menu-content .menu-footer .footer-content .secondary-actions .action:hover{cursor:pointer;color:var(--on-bg-menu-button-hover-primary);background-color:var(--bg-menu-button-hover-primary)}.gravity-menu .menu-content .menu-footer .footer-content hr{margin:0;width:100%;border:1px solid var(--divider-menu-active-primary)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list{display:grid;align-items:center;gap:var(--gravity-spacing-sm)}.gravity-menu .menu-content .menu-footer .footer-content .user-info-list .user-info{display:flex;padding:1px 2px;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .system-time{display:flex;align-items:center;gap:var(--gravity-spacing-xs)}.gravity-menu .menu-content .menu-footer .footer-content .system-time span{white-space:pre-line}.gravity-menu.collapsed{width:100px;position:relative;gap:var(--gravity-spacing-lg)}.gravity-menu.collapsed .menu-header{padding:24px 0 0;justify-content:center}.gravity-menu.collapsed .menu-header .collapse-button{right:-10px}.gravity-menu.collapsed .menu-content .menu-body{padding:0}.gravity-menu.collapsed .menu-content .menu-body.sub-menu{overflow:hidden!important}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level{height:70px!important;justify-content:center!important}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level:not(.empty).is-open{margin-bottom:var(--expanded-margin);background-color:var(--surface-primary);border-left:4px solid var(--on-bg-menu-button-disabled-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level:not(.empty).is-open.selected{background-color:var(--bg-button-active-tertiary);border-left:4px solid var(--bg-menu-button-pressed-primary)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level p{width:100%;display:flex;text-align:center;position:relative;align-items:center;flex-direction:column;justify-content:center;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .first-level p .badge.collapsed{top:3px;right:26px}.gravity-menu.collapsed .menu-content .menu-body .menu-section .levels .second-level{min-width:220px;position:absolute;width:max-content;z-index:1;top:var(--submenu-offset, 0px);border-radius:.3125rem;padding:var(--gravity-spacing-xs);background:var(--surface-secondary);border:1px solid var(--surface-primary);background-color:var(--surface-secondary)}.gravity-menu.collapsed .menu-content .menu-footer{width:100%;padding:16px 8px 20px}.gravity-menu.collapsed .menu-content .menu-footer .footer-content{width:84px}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .secondary-actions{gap:var(--gravity-spacing-sm)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .secondary-actions .action{height:auto;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .user-info-list{width:100%;justify-items:center}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .user-info-list .user-info{padding:0 var(--gravity-spacing-xs)}.gravity-menu.collapsed .menu-content .menu-footer .footer-content .system-time{width:100%;display:flex;text-align:center;align-items:center;flex-direction:column;gap:var(--gravity-spacing-xxs);padding:var(--gravity-spacing-xs) var(--gravity-spacing-xxs)}.gravity-menu.md,.gravity-menu.sm{gap:0;width:100%;max-width:100%;position:fixed;min-width:577px;transition:none;transform:translate(101%);background-color:var(--bg-menu-mobile-primary)}.gravity-menu.md.open,.gravity-menu.sm.open{transform:translate(0);transition:transform .165s ease-in-out}.gravity-menu.md:not(.open),.gravity-menu.sm:not(.open){transform:translate(101%)}.gravity-menu.md.closing,.gravity-menu.sm.closing{transition:transform .165s ease-in-out}.gravity-menu.md .menu-logo svg,.gravity-menu.sm .menu-logo svg{width:70px;height:28px}.gravity-menu.md .menu-content,.gravity-menu.sm .menu-content{margin-top:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-body,.gravity-menu.sm .menu-content .menu-body{padding:0 18px 0 24px}.gravity-menu.md .menu-content .menu-body .menu-section .levels,.gravity-menu.sm .menu-content .menu-body .menu-section .levels{display:flex;flex-direction:column;gap:var(--gravity-spacing-sm);border-radius:.3125rem;padding:var(--gravity-spacing-sm);background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level{height:20px;background-color:var(--bg-menu-mobile-card-primary)}.gravity-menu.md .menu-content .menu-body .menu-section .levels .first-level:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .first-level:hover{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option{height:45px}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:hover,.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text:hover,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option .option-text.selected{background:none!important}.gravity-menu.md .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected,.gravity-menu.sm .menu-content .menu-body .menu-section .levels .second-level .options-list .option.selected{background-color:var(--bg-menu-mobile-button-pressed-primary)}.gravity-menu.md .menu-content .menu-footer-mobile,.gravity-menu.sm .menu-content .menu-footer-mobile{display:flex;align-items:center;align-self:stretch;flex-direction:column;justify-content:flex-end;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-md)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content{width:100%;display:flex;flex-direction:column;gap:var(--gravity-spacing-sm)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:0 var(--gravity-spacing-lg)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards{display:flex;align-self:stretch;flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row{width:100%;display:flex;flex-direction:row;gap:var(--gravity-spacing-xs)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions .action-cards .action-cards-row ::ng-deep gravity-action-card .action-card-container{padding:0;width:100%;min-width:auto}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .secondary-actions gravity-button{width:100%}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list{gap:0;display:grid;border-top:1px solid var(--surface-secondary)}.gravity-menu.md .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info,.gravity-menu.sm .menu-content .menu-footer-mobile .footer-content .user-info-list .user-info{display:flex;flex-direction:row;align-items:center;align-self:stretch;justify-content:center;gap:var(--gravity-spacing-xs);padding-top:var(--gravity-spacing-sm)}.gravity-menu.sm{min-width:320px}.gravity-menu.sm .menu-footer-mobile .footer-content .secondary-actions{padding:0!important}\n"] }]
|
|
8185
8241
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { items: [{
|
|
8186
8242
|
type: Input
|
|
8187
8243
|
}], userInfo: [{
|
|
8188
8244
|
type: Input
|
|
8189
8245
|
}], logoUrl: [{
|
|
8190
8246
|
type: Input
|
|
8247
|
+
}], showCloseButton: [{
|
|
8248
|
+
type: Input
|
|
8191
8249
|
}], isOpen: [{
|
|
8192
8250
|
type: Input
|
|
8251
|
+
}], systemTime: [{
|
|
8252
|
+
type: Input
|
|
8193
8253
|
}], collapsable: [{
|
|
8194
8254
|
type: Input
|
|
8195
|
-
}],
|
|
8255
|
+
}], language: [{
|
|
8196
8256
|
type: Input
|
|
8197
8257
|
}], cardButtons: [{
|
|
8198
8258
|
type: Input
|
|
@@ -8412,7 +8472,7 @@ class GravityTextFieldAmountOnlyComponent {
|
|
|
8412
8472
|
this.inputValue = value;
|
|
8413
8473
|
}
|
|
8414
8474
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityTextFieldAmountOnlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8415
|
-
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$
|
|
8475
|
+
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$2.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$2.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.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"] }] }); }
|
|
8416
8476
|
}
|
|
8417
8477
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityTextFieldAmountOnlyComponent, decorators: [{
|
|
8418
8478
|
type: Component,
|
|
@@ -8584,7 +8644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
8584
8644
|
|
|
8585
8645
|
class GravityDesignSystemModule {
|
|
8586
8646
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityDesignSystemModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
8587
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: GravityDesignSystemModule, imports: [i1
|
|
8647
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.0", ngImport: i0, type: GravityDesignSystemModule, imports: [i1$1.AngularSvgIconModule, BsDatepickerModule,
|
|
8588
8648
|
CommonModule,
|
|
8589
8649
|
FormsModule, GravityTooltipModule, NgbDatepickerModule,
|
|
8590
8650
|
NgbOffcanvasModule,
|
|
@@ -8717,9 +8777,6 @@ class GravityDesignSystemModule {
|
|
|
8717
8777
|
GravityMenuComponent,
|
|
8718
8778
|
GravityTooltipContainerComponent] }); }
|
|
8719
8779
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityDesignSystemModule, imports: [AngularSvgIconModule.forRoot(),
|
|
8720
|
-
AngularSvgIconPreloaderModule.forRoot({
|
|
8721
|
-
configUrl: './assets/gravity/json/icons.json',
|
|
8722
|
-
}),
|
|
8723
8780
|
BsDatepickerModule,
|
|
8724
8781
|
CommonModule,
|
|
8725
8782
|
FormsModule,
|
|
@@ -8795,9 +8852,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImpor
|
|
|
8795
8852
|
args: [{
|
|
8796
8853
|
imports: [
|
|
8797
8854
|
AngularSvgIconModule.forRoot(),
|
|
8798
|
-
AngularSvgIconPreloaderModule.forRoot({
|
|
8799
|
-
configUrl: './assets/gravity/json/icons.json',
|
|
8800
|
-
}),
|
|
8801
8855
|
BsDatepickerModule,
|
|
8802
8856
|
CommonModule,
|
|
8803
8857
|
FormsModule,
|
|
@@ -9236,13 +9290,13 @@ class GravityDialogManagerService {
|
|
|
9236
9290
|
}
|
|
9237
9291
|
return true;
|
|
9238
9292
|
}
|
|
9239
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityDialogManagerService, deps: [{ token: i1$
|
|
9293
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityDialogManagerService, deps: [{ token: i1$3.NgbModal }, { token: GravityInstantNotificationsService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
9240
9294
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityDialogManagerService, providedIn: "root" }); }
|
|
9241
9295
|
}
|
|
9242
9296
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.0", ngImport: i0, type: GravityDialogManagerService, decorators: [{
|
|
9243
9297
|
type: Injectable,
|
|
9244
9298
|
args: [{ providedIn: "root" }]
|
|
9245
|
-
}], ctorParameters: () => [{ type: i1$
|
|
9299
|
+
}], ctorParameters: () => [{ type: i1$3.NgbModal }, { type: GravityInstantNotificationsService }] });
|
|
9246
9300
|
|
|
9247
9301
|
/*
|
|
9248
9302
|
* Public API Surface of gravity-design-system
|