@progressio_resources/gravity-design-system 3.0.43 → 3.0.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/gravity-icon-button/gravity-icon-button.component.mjs +12 -3
- package/esm2022/lib/components/gravity-status-indicator/gravity-status-indicator.component.mjs +3 -9
- package/fesm2022/progressio_resources-gravity-design-system.mjs +13 -10
- package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/lib/components/gravity-icon-button/gravity-icon-button.component.d.ts +4 -1
- package/lib/components/gravity-status-indicator/gravity-status-indicator.component.d.ts +0 -1
- package/package.json +1 -1
|
@@ -9,18 +9,27 @@ export class GravityIconButtonComponent {
|
|
|
9
9
|
this.type = "primary";
|
|
10
10
|
this.state = 'active';
|
|
11
11
|
this.clickOnIcon = new EventEmitter();
|
|
12
|
+
this.isPressed = false;
|
|
12
13
|
}
|
|
13
14
|
onClick() {
|
|
14
15
|
if (this.state != 'disabled') {
|
|
15
16
|
this.clickOnIcon.emit();
|
|
16
17
|
}
|
|
17
18
|
}
|
|
19
|
+
onPress() {
|
|
20
|
+
if (this.state !== 'disabled') {
|
|
21
|
+
this.isPressed = true;
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
onRelease() {
|
|
25
|
+
this.isPressed = false;
|
|
26
|
+
}
|
|
18
27
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
19
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityIconButtonComponent, selector: "gravity-icon-button", inputs: { cypressTag: "cypressTag", icon: "icon", supportText: "supportText", variant: "variant", size: "size", type: "type", state: "state" }, outputs: { clickOnIcon: "clickOnIcon" }, ngImport: i0, template: "<div class=\"gravity-icon-button {{type}} {{state}} {{size}}\"
|
|
28
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityIconButtonComponent, selector: "gravity-icon-button", inputs: { cypressTag: "cypressTag", icon: "icon", supportText: "supportText", variant: "variant", size: "size", type: "type", state: "state" }, outputs: { clickOnIcon: "clickOnIcon" }, ngImport: i0, template: "<div class=\"gravity-icon-button {{type}} {{isPressed ? 'pressed' : state}} {{size}}\" (click)=\"onClick()\" (mousedown)=\"onPress()\" (mouseup)=\"onRelease()\" (mouseleave)=\"onRelease()\" [attr.data-cy]=\"cypressTag\">\n <gravity-icon [iconName]=\"icon\" [iconSize]=\"size === 'sm' ? 'md-16' : 'lg-24'\"></gravity-icon>\n <div *ngIf=\"supportText\">\n <span class=\"hr-body sm-regular\">{{ supportText }}</span>\n </div>\n</div>\n\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-icon-button{display:flex;padding:6.5px;flex-wrap:wrap;position:relative;align-items:center;justify-content:center;width:var(--icon-container-size);height:var(--icon-container-size);border-radius:6.25rem}.gravity-icon-button div{white-space:nowrap;color:var(--surface-secondary);margin-top:var(--gravity-spacing-xxs)}.gravity-icon-button div span{opacity:0;padding:0 2px;visibility:hidden;border-radius:1.105px;background-color:var(--bg-label-icon-button-hover);transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.gravity-icon-button gravity-icon{--icon-color: var(--text-primary)}.gravity-icon-button:not(.disabled):hover div span{opacity:1;visibility:visible}.gravity-icon-button.sm{--icon-container-size: 29px}.gravity-icon-button.md{--icon-container-size: 36.514px}.gravity-icon-button.disabled gravity-icon{--icon-color: var(--on-bg-disabled)}.gravity-icon-button.primary.active:hover{cursor:pointer;background-color:var(--bg-icon-button-hover)}.gravity-icon-button.primary.pressed{cursor:pointer;background-color:var(--bg-icon-button-pressed)}.gravity-icon-button.secondary:not(.disabled){cursor:pointer;background-color:var(--bg-button-active-tertiary)}.gravity-icon-button.secondary:not(.disabled) gravity-icon{--icon-color: var(--on-bg-button-active-tertiary)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
20
29
|
}
|
|
21
30
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityIconButtonComponent, decorators: [{
|
|
22
31
|
type: Component,
|
|
23
|
-
args: [{ selector: 'gravity-icon-button', template: "<div class=\"gravity-icon-button {{type}} {{state}} {{size}}\"
|
|
32
|
+
args: [{ selector: 'gravity-icon-button', template: "<div class=\"gravity-icon-button {{type}} {{isPressed ? 'pressed' : state}} {{size}}\" (click)=\"onClick()\" (mousedown)=\"onPress()\" (mouseup)=\"onRelease()\" (mouseleave)=\"onRelease()\" [attr.data-cy]=\"cypressTag\">\n <gravity-icon [iconName]=\"icon\" [iconSize]=\"size === 'sm' ? 'md-16' : 'lg-24'\"></gravity-icon>\n <div *ngIf=\"supportText\">\n <span class=\"hr-body sm-regular\">{{ supportText }}</span>\n </div>\n</div>\n\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-icon-button{display:flex;padding:6.5px;flex-wrap:wrap;position:relative;align-items:center;justify-content:center;width:var(--icon-container-size);height:var(--icon-container-size);border-radius:6.25rem}.gravity-icon-button div{white-space:nowrap;color:var(--surface-secondary);margin-top:var(--gravity-spacing-xxs)}.gravity-icon-button div span{opacity:0;padding:0 2px;visibility:hidden;border-radius:1.105px;background-color:var(--bg-label-icon-button-hover);transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.gravity-icon-button gravity-icon{--icon-color: var(--text-primary)}.gravity-icon-button:not(.disabled):hover div span{opacity:1;visibility:visible}.gravity-icon-button.sm{--icon-container-size: 29px}.gravity-icon-button.md{--icon-container-size: 36.514px}.gravity-icon-button.disabled gravity-icon{--icon-color: var(--on-bg-disabled)}.gravity-icon-button.primary.active:hover{cursor:pointer;background-color:var(--bg-icon-button-hover)}.gravity-icon-button.primary.pressed{cursor:pointer;background-color:var(--bg-icon-button-pressed)}.gravity-icon-button.secondary:not(.disabled){cursor:pointer;background-color:var(--bg-button-active-tertiary)}.gravity-icon-button.secondary:not(.disabled) gravity-icon{--icon-color: var(--on-bg-button-active-tertiary)}\n"] }]
|
|
24
33
|
}], propDecorators: { cypressTag: [{
|
|
25
34
|
type: Input
|
|
26
35
|
}], icon: [{
|
|
@@ -38,4 +47,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
38
47
|
}], clickOnIcon: [{
|
|
39
48
|
type: Output
|
|
40
49
|
}] } });
|
|
41
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
50
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3Jhdml0eS1pY29uLWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ncmF2aXR5LWRlc2lnbi1zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2dyYXZpdHktaWNvbi1idXR0b24vZ3Jhdml0eS1pY29uLWJ1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ncmF2aXR5LWRlc2lnbi1zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2dyYXZpdHktaWNvbi1idXR0b24vZ3Jhdml0eS1pY29uLWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFlBQVksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFDLE1BQU0sZUFBZSxDQUFDOzs7O0FBT3JFLE1BQU0sT0FBTywwQkFBMEI7SUFMdkM7UUFTa0IsWUFBTyxHQUFZLEtBQUssQ0FBQztRQUN6QixTQUFJLEdBQWdCLElBQUksQ0FBQztRQUN6QixTQUFJLEdBQTRCLFNBQVMsQ0FBQztRQUMxQyxVQUFLLEdBQTBCLFFBQVEsQ0FBQztRQUV2QyxnQkFBVyxHQUF1QixJQUFJLFlBQVksRUFBUSxDQUFDO1FBRXJFLGNBQVMsR0FBWSxLQUFLLENBQUM7S0FpQm5DO0lBZlEsT0FBTztRQUNaLElBQUksSUFBSSxDQUFDLEtBQUssSUFBSSxVQUFVLEVBQUU7WUFDNUIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUN6QjtJQUNILENBQUM7SUFFTSxPQUFPO1FBQ1osSUFBSSxJQUFJLENBQUMsS0FBSyxLQUFLLFVBQVUsRUFBRTtZQUM3QixJQUFJLENBQUMsU0FBUyxHQUFHLElBQUksQ0FBQztTQUN2QjtJQUNILENBQUM7SUFFTSxTQUFTO1FBQ2QsSUFBSSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7SUFDekIsQ0FBQzsrR0EzQlUsMEJBQTBCO21HQUExQiwwQkFBMEIsb1BDUHZDLDJiQU9BOzs0RkRBYSwwQkFBMEI7a0JBTHRDLFNBQVM7K0JBQ0UscUJBQXFCOzhCQUtmLFVBQVU7c0JBQXpCLEtBQUs7Z0JBQ1UsSUFBSTtzQkFBbkIsS0FBSztnQkFDVSxXQUFXO3NCQUExQixLQUFLO2dCQUNVLE9BQU87c0JBQXRCLEtBQUs7Z0JBQ1UsSUFBSTtzQkFBbkIsS0FBSztnQkFDVSxJQUFJO3NCQUFuQixLQUFLO2dCQUNVLEtBQUs7c0JBQXBCLEtBQUs7Z0JBRVcsV0FBVztzQkFBM0IsTUFBTSIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBFdmVudEVtaXR0ZXIsIElucHV0LCBPdXRwdXR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdncmF2aXR5LWljb24tYnV0dG9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2dyYXZpdHktaWNvbi1idXR0b24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9ncmF2aXR5LWljb24tYnV0dG9uLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgR3Jhdml0eUljb25CdXR0b25Db21wb25lbnQge1xuICBASW5wdXQoKSBwdWJsaWMgY3lwcmVzc1RhZzogc3RyaW5nO1xuICBASW5wdXQoKSBwdWJsaWMgaWNvbjogc3RyaW5nO1xuICBASW5wdXQoKSBwdWJsaWMgc3VwcG9ydFRleHQ6IHN0cmluZztcbiAgQElucHV0KCkgcHVibGljIHZhcmlhbnQ6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgcHVibGljIHNpemU6ICdzbScgfCAnbWQnID0gJ3NtJztcbiAgQElucHV0KCkgcHVibGljIHR5cGU6ICdwcmltYXJ5JyB8ICdzZWNvbmRhcnknID0gXCJwcmltYXJ5XCI7XG4gIEBJbnB1dCgpIHB1YmxpYyBzdGF0ZTogJ2FjdGl2ZScgfCAnZGlzYWJsZWQnID0gJ2FjdGl2ZSc7XG5cbiAgQE91dHB1dCgpIHB1YmxpYyBjbGlja09uSWNvbjogRXZlbnRFbWl0dGVyPHZvaWQ+ID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gIHB1YmxpYyBpc1ByZXNzZWQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBwdWJsaWMgb25DbGljaygpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5zdGF0ZSAhPSAnZGlzYWJsZWQnKSB7XG4gICAgICB0aGlzLmNsaWNrT25JY29uLmVtaXQoKTtcbiAgICB9XG4gIH1cblxuICBwdWJsaWMgb25QcmVzcygpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5zdGF0ZSAhPT0gJ2Rpc2FibGVkJykge1xuICAgICAgdGhpcy5pc1ByZXNzZWQgPSB0cnVlO1xuICAgIH1cbiAgfVxuXG4gIHB1YmxpYyBvblJlbGVhc2UoKTogdm9pZCB7XG4gICAgdGhpcy5pc1ByZXNzZWQgPSBmYWxzZTtcbiAgfVxufVxuIiwiPGRpdiBjbGFzcz1cImdyYXZpdHktaWNvbi1idXR0b24ge3t0eXBlfX0ge3tpc1ByZXNzZWQgPyAncHJlc3NlZCcgOiBzdGF0ZX19IHt7c2l6ZX19XCIgIChjbGljayk9XCJvbkNsaWNrKClcIiAobW91c2Vkb3duKT1cIm9uUHJlc3MoKVwiIChtb3VzZXVwKT1cIm9uUmVsZWFzZSgpXCIgKG1vdXNlbGVhdmUpPVwib25SZWxlYXNlKClcIiBbYXR0ci5kYXRhLWN5XT1cImN5cHJlc3NUYWdcIj5cbiAgPGdyYXZpdHktaWNvbiBbaWNvbk5hbWVdPVwiaWNvblwiIFtpY29uU2l6ZV09XCJzaXplID09PSAnc20nID8gJ21kLTE2JyA6ICdsZy0yNCdcIj48L2dyYXZpdHktaWNvbj5cbiAgPGRpdiAqbmdJZj1cInN1cHBvcnRUZXh0XCI+XG4gICAgPHNwYW4gY2xhc3M9XCJoci1ib2R5IHNtLXJlZ3VsYXJcIj57eyBzdXBwb3J0VGV4dCB9fTwvc3Bhbj5cbiAgPC9kaXY+XG48L2Rpdj5cblxuIl19
|
package/esm2022/lib/components/gravity-status-indicator/gravity-status-indicator.component.mjs
CHANGED
|
@@ -8,18 +8,12 @@ export class GravityStatusIndicatorComponent {
|
|
|
8
8
|
this.type = 'primary';
|
|
9
9
|
this.status = 'neutro';
|
|
10
10
|
}
|
|
11
|
-
getIconSizeClass(size) {
|
|
12
|
-
switch (size) {
|
|
13
|
-
case 'sm': return 'sm-12';
|
|
14
|
-
case 'md': return 'md-16';
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
11
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityStatusIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
18
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityStatusIndicatorComponent, selector: "gravity-status-indicator", inputs: { icon: "icon", text: "text", size: "size", type: "type", status: "status" }, ngImport: i0, template: "<div class=\"gravity-status-indicator hr-body {{size}}-regular {{status}} {{size}}\" *ngIf=\"type === 'primary'\">\n <span>{{text}}</span> <gravity-icon [iconName]=\"icon\" [iconSize]=\"
|
|
12
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityStatusIndicatorComponent, selector: "gravity-status-indicator", inputs: { icon: "icon", text: "text", size: "size", type: "type", status: "status" }, ngImport: i0, template: "<div class=\"gravity-status-indicator hr-body {{size}}-regular {{status}} {{size}}\" *ngIf=\"type === 'primary'\">\n <span>{{text}}</span> <gravity-icon [iconName]=\"icon\" [iconSize]=\"'sm-12'\" *ngIf=\"icon\"></gravity-icon>\n</div>\n\n<div class=\"gravity-status-indicator-dot hr-body sm-regular {{status}}\" *ngIf=\"type === 'secondary'\">\n <div></div> <span>{{text}}</span>\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}:host{display:block}.gravity-status-indicator,.gravity-status-indicator-dot{gap:4px;display:flex;line-height:1;padding:2.5px 6px;width:-moz-fit-content;width:fit-content;align-items:center;white-space:nowrap;border:1px solid transparent;border-radius:6.25rem;color:var(--gravity-status-indicator-text-color);background-color:var(--gravity-status-indicator-background-color)}.gravity-status-indicator gravity-icon,.gravity-status-indicator-dot gravity-icon{--icon-color: var(--gravity-status-indicator-text-color)}.gravity-status-indicator-dot{padding:0}.gravity-status-indicator.sm{height:17px}.gravity-status-indicator.md{height:24px}.gravity-status-indicator.positive{--gravity-status-indicator-text-color: var(--on-bg-button-active-positive);--gravity-status-indicator-background-color: var(--bg-button-active-positive)}.gravity-status-indicator.negative{--gravity-status-indicator-text-color: var(--on-bg-button-active-negative);--gravity-status-indicator-background-color: var(--bg-button-active-negative)}.gravity-status-indicator.attention{--gravity-status-indicator-text-color: var(--on-bg-button-active-tertiary);--gravity-status-indicator-background-color: var(--bg-button-active-tertiary)}.gravity-status-indicator.neutro{--gravity-status-indicator-text-color: var(--text-primary);--gravity-status-indicator-background-color: var(--bg-disabled)}.gravity-status-indicator.disabled{border:1px solid var(--outline-disabled);--gravity-status-indicator-text-color: var(--on-bg-disabled);--gravity-status-indicator-background-color: var(--bg-disabled)}.gravity-status-indicator-dot div{width:12px;height:12px;border-radius:6.25rem;background-color:var(--gravity-status-indicator-dot-color)}.gravity-status-indicator-dot.positive{--gravity-status-indicator-dot-color: var(--bg-button-pressed-positive)}.gravity-status-indicator-dot.negative{--gravity-status-indicator-dot-color: var(--bg-button-pressed-negative)}.gravity-status-indicator-dot.attention{--gravity-status-indicator-dot-color: var(--bg-button-hover-tertiary)}.gravity-status-indicator-dot.neutro{--gravity-status-indicator-dot-color: var(--bg-neutro-dot-primary)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
19
13
|
}
|
|
20
14
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityStatusIndicatorComponent, decorators: [{
|
|
21
15
|
type: Component,
|
|
22
|
-
args: [{ selector: 'gravity-status-indicator', template: "<div class=\"gravity-status-indicator hr-body {{size}}-regular {{status}} {{size}}\" *ngIf=\"type === 'primary'\">\n <span>{{text}}</span> <gravity-icon [iconName]=\"icon\" [iconSize]=\"
|
|
16
|
+
args: [{ selector: 'gravity-status-indicator', template: "<div class=\"gravity-status-indicator hr-body {{size}}-regular {{status}} {{size}}\" *ngIf=\"type === 'primary'\">\n <span>{{text}}</span> <gravity-icon [iconName]=\"icon\" [iconSize]=\"'sm-12'\" *ngIf=\"icon\"></gravity-icon>\n</div>\n\n<div class=\"gravity-status-indicator-dot hr-body sm-regular {{status}}\" *ngIf=\"type === 'secondary'\">\n <div></div> <span>{{text}}</span>\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}:host{display:block}.gravity-status-indicator,.gravity-status-indicator-dot{gap:4px;display:flex;line-height:1;padding:2.5px 6px;width:-moz-fit-content;width:fit-content;align-items:center;white-space:nowrap;border:1px solid transparent;border-radius:6.25rem;color:var(--gravity-status-indicator-text-color);background-color:var(--gravity-status-indicator-background-color)}.gravity-status-indicator gravity-icon,.gravity-status-indicator-dot gravity-icon{--icon-color: var(--gravity-status-indicator-text-color)}.gravity-status-indicator-dot{padding:0}.gravity-status-indicator.sm{height:17px}.gravity-status-indicator.md{height:24px}.gravity-status-indicator.positive{--gravity-status-indicator-text-color: var(--on-bg-button-active-positive);--gravity-status-indicator-background-color: var(--bg-button-active-positive)}.gravity-status-indicator.negative{--gravity-status-indicator-text-color: var(--on-bg-button-active-negative);--gravity-status-indicator-background-color: var(--bg-button-active-negative)}.gravity-status-indicator.attention{--gravity-status-indicator-text-color: var(--on-bg-button-active-tertiary);--gravity-status-indicator-background-color: var(--bg-button-active-tertiary)}.gravity-status-indicator.neutro{--gravity-status-indicator-text-color: var(--text-primary);--gravity-status-indicator-background-color: var(--bg-disabled)}.gravity-status-indicator.disabled{border:1px solid var(--outline-disabled);--gravity-status-indicator-text-color: var(--on-bg-disabled);--gravity-status-indicator-background-color: var(--bg-disabled)}.gravity-status-indicator-dot div{width:12px;height:12px;border-radius:6.25rem;background-color:var(--gravity-status-indicator-dot-color)}.gravity-status-indicator-dot.positive{--gravity-status-indicator-dot-color: var(--bg-button-pressed-positive)}.gravity-status-indicator-dot.negative{--gravity-status-indicator-dot-color: var(--bg-button-pressed-negative)}.gravity-status-indicator-dot.attention{--gravity-status-indicator-dot-color: var(--bg-button-hover-tertiary)}.gravity-status-indicator-dot.neutro{--gravity-status-indicator-dot-color: var(--bg-neutro-dot-primary)}\n"] }]
|
|
23
17
|
}], propDecorators: { icon: [{
|
|
24
18
|
type: Input
|
|
25
19
|
}], text: [{
|
|
@@ -31,4 +25,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
31
25
|
}], status: [{
|
|
32
26
|
type: Input
|
|
33
27
|
}] } });
|
|
34
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
28
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3Jhdml0eS1zdGF0dXMtaW5kaWNhdG9yLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL2dyYXZpdHktZGVzaWduLXN5c3RlbS9zcmMvbGliL2NvbXBvbmVudHMvZ3Jhdml0eS1zdGF0dXMtaW5kaWNhdG9yL2dyYXZpdHktc3RhdHVzLWluZGljYXRvci5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ncmF2aXR5LWRlc2lnbi1zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2dyYXZpdHktc3RhdHVzLWluZGljYXRvci9ncmF2aXR5LXN0YXR1cy1pbmRpY2F0b3IuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFDLFNBQVMsRUFBRSxLQUFLLEVBQUMsTUFBTSxlQUFlLENBQUM7Ozs7QUFPL0MsTUFBTSxPQUFPLCtCQUErQjtJQUw1QztRQVFrQixTQUFJLEdBQWdCLElBQUksQ0FBQztRQUN6QixTQUFJLEdBQTRCLFNBQVMsQ0FBQztRQUMxQyxXQUFNLEdBQWtFLFFBQVEsQ0FBQztLQUVsRzsrR0FQWSwrQkFBK0I7bUdBQS9CLCtCQUErQixzSkNQNUMsMllBTU07OzRGRENPLCtCQUErQjtrQkFMM0MsU0FBUzsrQkFDRSwwQkFBMEI7OEJBS3BCLElBQUk7c0JBQW5CLEtBQUs7Z0JBQ1UsSUFBSTtzQkFBbkIsS0FBSztnQkFDVSxJQUFJO3NCQUFuQixLQUFLO2dCQUNVLElBQUk7c0JBQW5CLEtBQUs7Z0JBQ1UsTUFBTTtzQkFBckIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7Q29tcG9uZW50LCBJbnB1dH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2dyYXZpdHktc3RhdHVzLWluZGljYXRvcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9ncmF2aXR5LXN0YXR1cy1pbmRpY2F0b3IuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9ncmF2aXR5LXN0YXR1cy1pbmRpY2F0b3IuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBHcmF2aXR5U3RhdHVzSW5kaWNhdG9yQ29tcG9uZW50IHtcbiAgQElucHV0KCkgcHVibGljIGljb246IHN0cmluZztcbiAgQElucHV0KCkgcHVibGljIHRleHQ6IHN0cmluZztcbiAgQElucHV0KCkgcHVibGljIHNpemU6ICdzbScgfCAnbWQnID0gJ3NtJztcbiAgQElucHV0KCkgcHVibGljIHR5cGU6ICdwcmltYXJ5JyB8ICdzZWNvbmRhcnknID0gJ3ByaW1hcnknO1xuICBASW5wdXQoKSBwdWJsaWMgc3RhdHVzOiAncG9zaXRpdmUnIHwgJ25lZ2F0aXZlJyB8ICdhdHRlbnRpb24nIHwgJ25ldXRybycgfCAnZGlzYWJsZWQnID0gJ25ldXRybyc7XG5cbn1cbiIsIjxkaXYgY2xhc3M9XCJncmF2aXR5LXN0YXR1cy1pbmRpY2F0b3IgaHItYm9keSB7e3NpemV9fS1yZWd1bGFyIHt7c3RhdHVzfX0ge3tzaXplfX1cIiAqbmdJZj1cInR5cGUgPT09ICdwcmltYXJ5J1wiPlxuICAgIDxzcGFuPnt7dGV4dH19PC9zcGFuPiA8Z3Jhdml0eS1pY29uIFtpY29uTmFtZV09XCJpY29uXCIgW2ljb25TaXplXT1cIidzbS0xMidcIiAqbmdJZj1cImljb25cIj48L2dyYXZpdHktaWNvbj5cbjwvZGl2PlxuXG48ZGl2IGNsYXNzPVwiZ3Jhdml0eS1zdGF0dXMtaW5kaWNhdG9yLWRvdCBoci1ib2R5IHNtLXJlZ3VsYXIge3tzdGF0dXN9fVwiICpuZ0lmPVwidHlwZSA9PT0gJ3NlY29uZGFyeSdcIj5cbiAgICA8ZGl2PjwvZGl2PiA8c3Bhbj57e3RleHR9fTwvc3Bhbj5cbjwvZGl2PiJdfQ==
|
|
@@ -5365,18 +5365,27 @@ class GravityIconButtonComponent {
|
|
|
5365
5365
|
this.type = "primary";
|
|
5366
5366
|
this.state = 'active';
|
|
5367
5367
|
this.clickOnIcon = new EventEmitter();
|
|
5368
|
+
this.isPressed = false;
|
|
5368
5369
|
}
|
|
5369
5370
|
onClick() {
|
|
5370
5371
|
if (this.state != 'disabled') {
|
|
5371
5372
|
this.clickOnIcon.emit();
|
|
5372
5373
|
}
|
|
5373
5374
|
}
|
|
5375
|
+
onPress() {
|
|
5376
|
+
if (this.state !== 'disabled') {
|
|
5377
|
+
this.isPressed = true;
|
|
5378
|
+
}
|
|
5379
|
+
}
|
|
5380
|
+
onRelease() {
|
|
5381
|
+
this.isPressed = false;
|
|
5382
|
+
}
|
|
5374
5383
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityIconButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5375
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityIconButtonComponent, selector: "gravity-icon-button", inputs: { cypressTag: "cypressTag", icon: "icon", supportText: "supportText", variant: "variant", size: "size", type: "type", state: "state" }, outputs: { clickOnIcon: "clickOnIcon" }, ngImport: i0, template: "<div class=\"gravity-icon-button {{type}} {{state}} {{size}}\"
|
|
5384
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityIconButtonComponent, selector: "gravity-icon-button", inputs: { cypressTag: "cypressTag", icon: "icon", supportText: "supportText", variant: "variant", size: "size", type: "type", state: "state" }, outputs: { clickOnIcon: "clickOnIcon" }, ngImport: i0, template: "<div class=\"gravity-icon-button {{type}} {{isPressed ? 'pressed' : state}} {{size}}\" (click)=\"onClick()\" (mousedown)=\"onPress()\" (mouseup)=\"onRelease()\" (mouseleave)=\"onRelease()\" [attr.data-cy]=\"cypressTag\">\n <gravity-icon [iconName]=\"icon\" [iconSize]=\"size === 'sm' ? 'md-16' : 'lg-24'\"></gravity-icon>\n <div *ngIf=\"supportText\">\n <span class=\"hr-body sm-regular\">{{ supportText }}</span>\n </div>\n</div>\n\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-icon-button{display:flex;padding:6.5px;flex-wrap:wrap;position:relative;align-items:center;justify-content:center;width:var(--icon-container-size);height:var(--icon-container-size);border-radius:6.25rem}.gravity-icon-button div{white-space:nowrap;color:var(--surface-secondary);margin-top:var(--gravity-spacing-xxs)}.gravity-icon-button div span{opacity:0;padding:0 2px;visibility:hidden;border-radius:1.105px;background-color:var(--bg-label-icon-button-hover);transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.gravity-icon-button gravity-icon{--icon-color: var(--text-primary)}.gravity-icon-button:not(.disabled):hover div span{opacity:1;visibility:visible}.gravity-icon-button.sm{--icon-container-size: 29px}.gravity-icon-button.md{--icon-container-size: 36.514px}.gravity-icon-button.disabled gravity-icon{--icon-color: var(--on-bg-disabled)}.gravity-icon-button.primary.active:hover{cursor:pointer;background-color:var(--bg-icon-button-hover)}.gravity-icon-button.primary.pressed{cursor:pointer;background-color:var(--bg-icon-button-pressed)}.gravity-icon-button.secondary:not(.disabled){cursor:pointer;background-color:var(--bg-button-active-tertiary)}.gravity-icon-button.secondary:not(.disabled) gravity-icon{--icon-color: var(--on-bg-button-active-tertiary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
5376
5385
|
}
|
|
5377
5386
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityIconButtonComponent, decorators: [{
|
|
5378
5387
|
type: Component,
|
|
5379
|
-
args: [{ selector: 'gravity-icon-button', template: "<div class=\"gravity-icon-button {{type}} {{state}} {{size}}\"
|
|
5388
|
+
args: [{ selector: 'gravity-icon-button', template: "<div class=\"gravity-icon-button {{type}} {{isPressed ? 'pressed' : state}} {{size}}\" (click)=\"onClick()\" (mousedown)=\"onPress()\" (mouseup)=\"onRelease()\" (mouseleave)=\"onRelease()\" [attr.data-cy]=\"cypressTag\">\n <gravity-icon [iconName]=\"icon\" [iconSize]=\"size === 'sm' ? 'md-16' : 'lg-24'\"></gravity-icon>\n <div *ngIf=\"supportText\">\n <span class=\"hr-body sm-regular\">{{ supportText }}</span>\n </div>\n</div>\n\n", styles: [".border-radius-none{border-radius:0}.border-radius-xs{border-radius:.0625rem}.border-radius-sm{border-radius:.3125rem}.border-radius-md{border-radius:.625rem}.border-radius-lg{border-radius:.9375rem}.border-radius-xl{border-radius:1.25rem}.border-radius-xxl{border-radius:2rem}.border-radius-rounded{border-radius:6.25rem}.gravity-icon-button{display:flex;padding:6.5px;flex-wrap:wrap;position:relative;align-items:center;justify-content:center;width:var(--icon-container-size);height:var(--icon-container-size);border-radius:6.25rem}.gravity-icon-button div{white-space:nowrap;color:var(--surface-secondary);margin-top:var(--gravity-spacing-xxs)}.gravity-icon-button div span{opacity:0;padding:0 2px;visibility:hidden;border-radius:1.105px;background-color:var(--bg-label-icon-button-hover);transition:opacity .2s ease-in-out,visibility .2s ease-in-out}.gravity-icon-button gravity-icon{--icon-color: var(--text-primary)}.gravity-icon-button:not(.disabled):hover div span{opacity:1;visibility:visible}.gravity-icon-button.sm{--icon-container-size: 29px}.gravity-icon-button.md{--icon-container-size: 36.514px}.gravity-icon-button.disabled gravity-icon{--icon-color: var(--on-bg-disabled)}.gravity-icon-button.primary.active:hover{cursor:pointer;background-color:var(--bg-icon-button-hover)}.gravity-icon-button.primary.pressed{cursor:pointer;background-color:var(--bg-icon-button-pressed)}.gravity-icon-button.secondary:not(.disabled){cursor:pointer;background-color:var(--bg-button-active-tertiary)}.gravity-icon-button.secondary:not(.disabled) gravity-icon{--icon-color: var(--on-bg-button-active-tertiary)}\n"] }]
|
|
5380
5389
|
}], propDecorators: { cypressTag: [{
|
|
5381
5390
|
type: Input
|
|
5382
5391
|
}], icon: [{
|
|
@@ -5401,18 +5410,12 @@ class GravityStatusIndicatorComponent {
|
|
|
5401
5410
|
this.type = 'primary';
|
|
5402
5411
|
this.status = 'neutro';
|
|
5403
5412
|
}
|
|
5404
|
-
getIconSizeClass(size) {
|
|
5405
|
-
switch (size) {
|
|
5406
|
-
case 'sm': return 'sm-12';
|
|
5407
|
-
case 'md': return 'md-16';
|
|
5408
|
-
}
|
|
5409
|
-
}
|
|
5410
5413
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityStatusIndicatorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5411
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityStatusIndicatorComponent, selector: "gravity-status-indicator", inputs: { icon: "icon", text: "text", size: "size", type: "type", status: "status" }, ngImport: i0, template: "<div class=\"gravity-status-indicator hr-body {{size}}-regular {{status}} {{size}}\" *ngIf=\"type === 'primary'\">\n <span>{{text}}</span> <gravity-icon [iconName]=\"icon\" [iconSize]=\"
|
|
5414
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityStatusIndicatorComponent, selector: "gravity-status-indicator", inputs: { icon: "icon", text: "text", size: "size", type: "type", status: "status" }, ngImport: i0, template: "<div class=\"gravity-status-indicator hr-body {{size}}-regular {{status}} {{size}}\" *ngIf=\"type === 'primary'\">\n <span>{{text}}</span> <gravity-icon [iconName]=\"icon\" [iconSize]=\"'sm-12'\" *ngIf=\"icon\"></gravity-icon>\n</div>\n\n<div class=\"gravity-status-indicator-dot hr-body sm-regular {{status}}\" *ngIf=\"type === 'secondary'\">\n <div></div> <span>{{text}}</span>\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}:host{display:block}.gravity-status-indicator,.gravity-status-indicator-dot{gap:4px;display:flex;line-height:1;padding:2.5px 6px;width:-moz-fit-content;width:fit-content;align-items:center;white-space:nowrap;border:1px solid transparent;border-radius:6.25rem;color:var(--gravity-status-indicator-text-color);background-color:var(--gravity-status-indicator-background-color)}.gravity-status-indicator gravity-icon,.gravity-status-indicator-dot gravity-icon{--icon-color: var(--gravity-status-indicator-text-color)}.gravity-status-indicator-dot{padding:0}.gravity-status-indicator.sm{height:17px}.gravity-status-indicator.md{height:24px}.gravity-status-indicator.positive{--gravity-status-indicator-text-color: var(--on-bg-button-active-positive);--gravity-status-indicator-background-color: var(--bg-button-active-positive)}.gravity-status-indicator.negative{--gravity-status-indicator-text-color: var(--on-bg-button-active-negative);--gravity-status-indicator-background-color: var(--bg-button-active-negative)}.gravity-status-indicator.attention{--gravity-status-indicator-text-color: var(--on-bg-button-active-tertiary);--gravity-status-indicator-background-color: var(--bg-button-active-tertiary)}.gravity-status-indicator.neutro{--gravity-status-indicator-text-color: var(--text-primary);--gravity-status-indicator-background-color: var(--bg-disabled)}.gravity-status-indicator.disabled{border:1px solid var(--outline-disabled);--gravity-status-indicator-text-color: var(--on-bg-disabled);--gravity-status-indicator-background-color: var(--bg-disabled)}.gravity-status-indicator-dot div{width:12px;height:12px;border-radius:6.25rem;background-color:var(--gravity-status-indicator-dot-color)}.gravity-status-indicator-dot.positive{--gravity-status-indicator-dot-color: var(--bg-button-pressed-positive)}.gravity-status-indicator-dot.negative{--gravity-status-indicator-dot-color: var(--bg-button-pressed-negative)}.gravity-status-indicator-dot.attention{--gravity-status-indicator-dot-color: var(--bg-button-hover-tertiary)}.gravity-status-indicator-dot.neutro{--gravity-status-indicator-dot-color: var(--bg-neutro-dot-primary)}\n"], dependencies: [{ kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: GravityIconComponent, selector: "gravity-icon", inputs: ["customIconColorVariable", "iconName", "iconSize", "hoverIcon", "size", "isCoin"] }] }); }
|
|
5412
5415
|
}
|
|
5413
5416
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityStatusIndicatorComponent, decorators: [{
|
|
5414
5417
|
type: Component,
|
|
5415
|
-
args: [{ selector: 'gravity-status-indicator', template: "<div class=\"gravity-status-indicator hr-body {{size}}-regular {{status}} {{size}}\" *ngIf=\"type === 'primary'\">\n <span>{{text}}</span> <gravity-icon [iconName]=\"icon\" [iconSize]=\"
|
|
5418
|
+
args: [{ selector: 'gravity-status-indicator', template: "<div class=\"gravity-status-indicator hr-body {{size}}-regular {{status}} {{size}}\" *ngIf=\"type === 'primary'\">\n <span>{{text}}</span> <gravity-icon [iconName]=\"icon\" [iconSize]=\"'sm-12'\" *ngIf=\"icon\"></gravity-icon>\n</div>\n\n<div class=\"gravity-status-indicator-dot hr-body sm-regular {{status}}\" *ngIf=\"type === 'secondary'\">\n <div></div> <span>{{text}}</span>\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}:host{display:block}.gravity-status-indicator,.gravity-status-indicator-dot{gap:4px;display:flex;line-height:1;padding:2.5px 6px;width:-moz-fit-content;width:fit-content;align-items:center;white-space:nowrap;border:1px solid transparent;border-radius:6.25rem;color:var(--gravity-status-indicator-text-color);background-color:var(--gravity-status-indicator-background-color)}.gravity-status-indicator gravity-icon,.gravity-status-indicator-dot gravity-icon{--icon-color: var(--gravity-status-indicator-text-color)}.gravity-status-indicator-dot{padding:0}.gravity-status-indicator.sm{height:17px}.gravity-status-indicator.md{height:24px}.gravity-status-indicator.positive{--gravity-status-indicator-text-color: var(--on-bg-button-active-positive);--gravity-status-indicator-background-color: var(--bg-button-active-positive)}.gravity-status-indicator.negative{--gravity-status-indicator-text-color: var(--on-bg-button-active-negative);--gravity-status-indicator-background-color: var(--bg-button-active-negative)}.gravity-status-indicator.attention{--gravity-status-indicator-text-color: var(--on-bg-button-active-tertiary);--gravity-status-indicator-background-color: var(--bg-button-active-tertiary)}.gravity-status-indicator.neutro{--gravity-status-indicator-text-color: var(--text-primary);--gravity-status-indicator-background-color: var(--bg-disabled)}.gravity-status-indicator.disabled{border:1px solid var(--outline-disabled);--gravity-status-indicator-text-color: var(--on-bg-disabled);--gravity-status-indicator-background-color: var(--bg-disabled)}.gravity-status-indicator-dot div{width:12px;height:12px;border-radius:6.25rem;background-color:var(--gravity-status-indicator-dot-color)}.gravity-status-indicator-dot.positive{--gravity-status-indicator-dot-color: var(--bg-button-pressed-positive)}.gravity-status-indicator-dot.negative{--gravity-status-indicator-dot-color: var(--bg-button-pressed-negative)}.gravity-status-indicator-dot.attention{--gravity-status-indicator-dot-color: var(--bg-button-hover-tertiary)}.gravity-status-indicator-dot.neutro{--gravity-status-indicator-dot-color: var(--bg-neutro-dot-primary)}\n"] }]
|
|
5416
5419
|
}], propDecorators: { icon: [{
|
|
5417
5420
|
type: Input
|
|
5418
5421
|
}], text: [{
|