@progressio_resources/gravity-design-system 3.0.29 → 3.0.30
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-card-button/gravity-card-button.component.mjs +14 -6
- package/fesm2022/progressio_resources-gravity-design-system.mjs +12 -4
- package/fesm2022/progressio_resources-gravity-design-system.mjs.map +1 -1
- package/lib/components/gravity-card-button/gravity-card-button.component.d.ts +5 -2
- package/package.json +1 -1
|
@@ -1,25 +1,31 @@
|
|
|
1
|
-
import { Component, Input } from '@angular/core';
|
|
1
|
+
import { Component, Input, Output, EventEmitter } from '@angular/core';
|
|
2
2
|
import * as i0 from "@angular/core";
|
|
3
3
|
import * as i1 from "@angular/common";
|
|
4
4
|
import * as i2 from "../gravity-icon/gravity-icon.component";
|
|
5
5
|
export class GravityCardButtonComponent {
|
|
6
6
|
constructor() {
|
|
7
|
-
this.
|
|
7
|
+
this.fullWidth = false;
|
|
8
8
|
this.type = 'primary';
|
|
9
9
|
this.state = 'active';
|
|
10
10
|
this.orientation = 'vrt-center';
|
|
11
|
+
this.clicked = new EventEmitter();
|
|
12
|
+
}
|
|
13
|
+
onCardButtonClick() {
|
|
14
|
+
if (this.state !== 'disabled') {
|
|
15
|
+
this.clicked.emit();
|
|
16
|
+
}
|
|
11
17
|
}
|
|
12
18
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCardButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
13
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCardButtonComponent, selector: "gravity-card-button", inputs: { label: "label", iconName: "iconName",
|
|
19
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCardButtonComponent, selector: "gravity-card-button", inputs: { label: "label", iconName: "iconName", fullWidth: "fullWidth", type: "type", state: "state", orientation: "orientation" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"gravity-card-button\" (click)=\"onCardButtonClick()\">\n <div class=\"card-button-container {{type}} {{orientation}}\" [class.pressed]=\"state === 'pressed'\"\n [class.disabled]=\"state === 'disabled'\" [class.full-width]=\"fullWidth\">\n <gravity-icon *ngIf=\"iconName\" [style.--icon-color]=\"'var(--card-button-color)'\" [iconName]=\"iconName\"\n [iconSize]=\"orientation === 'vrt-center' ? 'md-16' : (orientation === 'vrt-left' || orientation === 'vrt-right' || orientation === 'hrt-center') ? 'lg-24' : 'xl-32'\">\n </gravity-icon>\n <label *ngIf=\"label\" [className]=\"(orientation === 'vrt-center' || orientation === 'vrt-left' || orientation === 'vrt-right') ? 'hr-label sm-bold' : 'hr-label md-bold'\">{{ label }}</label>\n </div>\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}.gravity-card-button{--card-button-color: var(--on-bg-button-active-primary);--card-button-background-color: var(--bg-button-active-primary)}.gravity-card-button .card-button-container{display:flex;flex-shrink:0;cursor:pointer;width:-moz-fit-content;width:fit-content;align-items:center;flex-direction:column;justify-content:center;color:var(--card-button-color);border-radius:.625rem;background-color:var(--card-button-background-color);border:1px solid var(--on-bg-button-active-secondary)}.gravity-card-button .card-button-container.primary{--card-button-color: var(--on-bg-button-active-primary);--card-button-background-color: var(--bg-button-active-primary)}.gravity-card-button .card-button-container.secondary{--card-button-color: var(--on-bg-button-active-secondary);--card-button-background-color: var(--bg-button-active-secondary)}.gravity-card-button .card-button-container.primary.pressed{--card-button-background-color: var(--bg-button-pressed-primary)}.gravity-card-button .card-button-container.secondary.pressed{border:2px solid var(--outline-button-pressed-secondary);--card-button-color: var(--on-bg-button-pressed-secondary)}.gravity-card-button .card-button-container.disabled{cursor:default;pointer-events:none;border:1px solid var(--bg-disabled);--card-button-color: var(--on-bg-disabled);--card-button-background-color: var(--bg-disabled) !important}.gravity-card-button .card-button-container.secondary.disabled{border:1px solid var(--outline-disabled)}.gravity-card-button .card-button-container.vrt-center{min-width:126px;min-height:69px;flex-direction:column;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.vrt-left{flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-sm)}.gravity-card-button .card-button-container.vrt-right{align-items:flex-end;gap:var(--gravity-spacing-sm);flex-direction:column-reverse;padding:var(--gravity-spacing-sm)}.gravity-card-button .card-button-container.hrt-center{min-width:126px;min-height:69px;flex-direction:row;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.hrt-auto{min-width:162px;min-height:69px;flex-direction:row-reverse;justify-content:space-between;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.pressed.vrt-center label,.gravity-card-button .card-button-container.disabled.vrt-center label{padding-bottom:1px;border-bottom:1px solid}.gravity-card-button .card-button-container.full-width{width:100%}\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"] }] }); }
|
|
14
20
|
}
|
|
15
21
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCardButtonComponent, decorators: [{
|
|
16
22
|
type: Component,
|
|
17
|
-
args: [{ selector: 'gravity-card-button', template: "<div class=\"gravity-card-button\">\n <div class=\"card-button-container {{type}} {{orientation}}\" [class.pressed]=\"state === 'pressed'\"
|
|
23
|
+
args: [{ selector: 'gravity-card-button', template: "<div class=\"gravity-card-button\" (click)=\"onCardButtonClick()\">\n <div class=\"card-button-container {{type}} {{orientation}}\" [class.pressed]=\"state === 'pressed'\"\n [class.disabled]=\"state === 'disabled'\" [class.full-width]=\"fullWidth\">\n <gravity-icon *ngIf=\"iconName\" [style.--icon-color]=\"'var(--card-button-color)'\" [iconName]=\"iconName\"\n [iconSize]=\"orientation === 'vrt-center' ? 'md-16' : (orientation === 'vrt-left' || orientation === 'vrt-right' || orientation === 'hrt-center') ? 'lg-24' : 'xl-32'\">\n </gravity-icon>\n <label *ngIf=\"label\" [className]=\"(orientation === 'vrt-center' || orientation === 'vrt-left' || orientation === 'vrt-right') ? 'hr-label sm-bold' : 'hr-label md-bold'\">{{ label }}</label>\n </div>\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}.gravity-card-button{--card-button-color: var(--on-bg-button-active-primary);--card-button-background-color: var(--bg-button-active-primary)}.gravity-card-button .card-button-container{display:flex;flex-shrink:0;cursor:pointer;width:-moz-fit-content;width:fit-content;align-items:center;flex-direction:column;justify-content:center;color:var(--card-button-color);border-radius:.625rem;background-color:var(--card-button-background-color);border:1px solid var(--on-bg-button-active-secondary)}.gravity-card-button .card-button-container.primary{--card-button-color: var(--on-bg-button-active-primary);--card-button-background-color: var(--bg-button-active-primary)}.gravity-card-button .card-button-container.secondary{--card-button-color: var(--on-bg-button-active-secondary);--card-button-background-color: var(--bg-button-active-secondary)}.gravity-card-button .card-button-container.primary.pressed{--card-button-background-color: var(--bg-button-pressed-primary)}.gravity-card-button .card-button-container.secondary.pressed{border:2px solid var(--outline-button-pressed-secondary);--card-button-color: var(--on-bg-button-pressed-secondary)}.gravity-card-button .card-button-container.disabled{cursor:default;pointer-events:none;border:1px solid var(--bg-disabled);--card-button-color: var(--on-bg-disabled);--card-button-background-color: var(--bg-disabled) !important}.gravity-card-button .card-button-container.secondary.disabled{border:1px solid var(--outline-disabled)}.gravity-card-button .card-button-container.vrt-center{min-width:126px;min-height:69px;flex-direction:column;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.vrt-left{flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-sm)}.gravity-card-button .card-button-container.vrt-right{align-items:flex-end;gap:var(--gravity-spacing-sm);flex-direction:column-reverse;padding:var(--gravity-spacing-sm)}.gravity-card-button .card-button-container.hrt-center{min-width:126px;min-height:69px;flex-direction:row;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.hrt-auto{min-width:162px;min-height:69px;flex-direction:row-reverse;justify-content:space-between;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.pressed.vrt-center label,.gravity-card-button .card-button-container.disabled.vrt-center label{padding-bottom:1px;border-bottom:1px solid}.gravity-card-button .card-button-container.full-width{width:100%}\n"] }]
|
|
18
24
|
}], propDecorators: { label: [{
|
|
19
25
|
type: Input
|
|
20
26
|
}], iconName: [{
|
|
21
27
|
type: Input
|
|
22
|
-
}],
|
|
28
|
+
}], fullWidth: [{
|
|
23
29
|
type: Input
|
|
24
30
|
}], type: [{
|
|
25
31
|
type: Input
|
|
@@ -27,5 +33,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
27
33
|
type: Input
|
|
28
34
|
}], orientation: [{
|
|
29
35
|
type: Input
|
|
36
|
+
}], clicked: [{
|
|
37
|
+
type: Output
|
|
30
38
|
}] } });
|
|
31
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
39
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ3Jhdml0eS1jYXJkLWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ncmF2aXR5LWRlc2lnbi1zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2dyYXZpdHktY2FyZC1idXR0b24vZ3Jhdml0eS1jYXJkLWJ1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ncmF2aXR5LWRlc2lnbi1zeXN0ZW0vc3JjL2xpYi9jb21wb25lbnRzL2dyYXZpdHktY2FyZC1idXR0b24vZ3Jhdml0eS1jYXJkLWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7O0FBT3ZFLE1BQU0sT0FBTywwQkFBMEI7SUFMdkM7UUFRa0IsY0FBUyxHQUFZLEtBQUssQ0FBQztRQUMzQixTQUFJLEdBQTRCLFNBQVMsQ0FBQztRQUMxQyxVQUFLLEdBQXNDLFFBQVEsQ0FBQztRQUNwRCxnQkFBVyxHQUF3RSxZQUFZLENBQUM7UUFFL0YsWUFBTyxHQUFHLElBQUksWUFBWSxFQUFRLENBQUM7S0FPckQ7SUFMUSxpQkFBaUI7UUFDdEIsSUFBSSxJQUFJLENBQUMsS0FBSyxLQUFLLFVBQVUsRUFBRTtZQUM3QixJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksRUFBRSxDQUFDO1NBQ3JCO0lBQ0gsQ0FBQzsrR0FkVSwwQkFBMEI7bUdBQTFCLDBCQUEwQixnT0NQdkMsc3pCQVNBOzs0RkRGYSwwQkFBMEI7a0JBTHRDLFNBQVM7K0JBQ0UscUJBQXFCOzhCQUtmLEtBQUs7c0JBQXBCLEtBQUs7Z0JBQ1UsUUFBUTtzQkFBdkIsS0FBSztnQkFDVSxTQUFTO3NCQUF4QixLQUFLO2dCQUNVLElBQUk7c0JBQW5CLEtBQUs7Z0JBQ1UsS0FBSztzQkFBcEIsS0FBSztnQkFDVSxXQUFXO3NCQUExQixLQUFLO2dCQUVXLE9BQU87c0JBQXZCLE1BQU0iLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIElucHV0LCBPdXRwdXQsIEV2ZW50RW1pdHRlciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdncmF2aXR5LWNhcmQtYnV0dG9uJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2dyYXZpdHktY2FyZC1idXR0b24uY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9ncmF2aXR5LWNhcmQtYnV0dG9uLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgR3Jhdml0eUNhcmRCdXR0b25Db21wb25lbnQge1xuICBASW5wdXQoKSBwdWJsaWMgbGFiZWw6IHN0cmluZztcbiAgQElucHV0KCkgcHVibGljIGljb25OYW1lOiBzdHJpbmc7XG4gIEBJbnB1dCgpIHB1YmxpYyBmdWxsV2lkdGg6IGJvb2xlYW4gPSBmYWxzZTtcbiAgQElucHV0KCkgcHVibGljIHR5cGU6ICdwcmltYXJ5JyB8ICdzZWNvbmRhcnknID0gJ3ByaW1hcnknO1xuICBASW5wdXQoKSBwdWJsaWMgc3RhdGU6ICdhY3RpdmUnIHwgJ3ByZXNzZWQnIHwgJ2Rpc2FibGVkJyA9ICdhY3RpdmUnO1xuICBASW5wdXQoKSBwdWJsaWMgb3JpZW50YXRpb246ICd2cnQtY2VudGVyJyB8ICd2cnQtbGVmdCcgfCAndnJ0LXJpZ2h0JyB8ICdocnQtY2VudGVyJyB8ICdocnQtYXV0bycgPSAndnJ0LWNlbnRlcic7XG5cbiAgQE91dHB1dCgpIHB1YmxpYyBjbGlja2VkID0gbmV3IEV2ZW50RW1pdHRlcjx2b2lkPigpO1xuXG4gIHB1YmxpYyBvbkNhcmRCdXR0b25DbGljaygpOiB2b2lkIHtcbiAgICBpZiAodGhpcy5zdGF0ZSAhPT0gJ2Rpc2FibGVkJykge1xuICAgICAgdGhpcy5jbGlja2VkLmVtaXQoKTtcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJncmF2aXR5LWNhcmQtYnV0dG9uXCIgKGNsaWNrKT1cIm9uQ2FyZEJ1dHRvbkNsaWNrKClcIj5cbiAgICA8ZGl2IGNsYXNzPVwiY2FyZC1idXR0b24tY29udGFpbmVyIHt7dHlwZX19IHt7b3JpZW50YXRpb259fVwiIFtjbGFzcy5wcmVzc2VkXT1cInN0YXRlID09PSAncHJlc3NlZCdcIlxuICAgICAgICAgW2NsYXNzLmRpc2FibGVkXT1cInN0YXRlID09PSAnZGlzYWJsZWQnXCIgW2NsYXNzLmZ1bGwtd2lkdGhdPVwiZnVsbFdpZHRoXCI+XG4gICAgICAgIDxncmF2aXR5LWljb24gKm5nSWY9XCJpY29uTmFtZVwiIFtzdHlsZS4tLWljb24tY29sb3JdPVwiJ3ZhcigtLWNhcmQtYnV0dG9uLWNvbG9yKSdcIiBbaWNvbk5hbWVdPVwiaWNvbk5hbWVcIlxuICAgICAgICAgICAgICAgICAgICAgIFtpY29uU2l6ZV09XCJvcmllbnRhdGlvbiA9PT0gJ3ZydC1jZW50ZXInID8gJ21kLTE2JyA6IChvcmllbnRhdGlvbiA9PT0gJ3ZydC1sZWZ0JyB8fCBvcmllbnRhdGlvbiA9PT0gJ3ZydC1yaWdodCcgfHwgb3JpZW50YXRpb24gPT09ICdocnQtY2VudGVyJykgPyAgJ2xnLTI0JyA6ICd4bC0zMidcIj5cbiAgICAgICAgPC9ncmF2aXR5LWljb24+XG4gICAgICAgIDxsYWJlbCAqbmdJZj1cImxhYmVsXCIgW2NsYXNzTmFtZV09XCIob3JpZW50YXRpb24gPT09ICd2cnQtY2VudGVyJyB8fCBvcmllbnRhdGlvbiA9PT0gJ3ZydC1sZWZ0JyB8fCBvcmllbnRhdGlvbiA9PT0gJ3ZydC1yaWdodCcpID8gJ2hyLWxhYmVsIHNtLWJvbGQnIDogJ2hyLWxhYmVsIG1kLWJvbGQnXCI+e3sgbGFiZWwgfX08L2xhYmVsPlxuICAgIDwvZGl2PlxuPC9kaXY+XG4iXX0=
|
|
@@ -5785,22 +5785,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
5785
5785
|
|
|
5786
5786
|
class GravityCardButtonComponent {
|
|
5787
5787
|
constructor() {
|
|
5788
|
-
this.
|
|
5788
|
+
this.fullWidth = false;
|
|
5789
5789
|
this.type = 'primary';
|
|
5790
5790
|
this.state = 'active';
|
|
5791
5791
|
this.orientation = 'vrt-center';
|
|
5792
|
+
this.clicked = new EventEmitter();
|
|
5793
|
+
}
|
|
5794
|
+
onCardButtonClick() {
|
|
5795
|
+
if (this.state !== 'disabled') {
|
|
5796
|
+
this.clicked.emit();
|
|
5797
|
+
}
|
|
5792
5798
|
}
|
|
5793
5799
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCardButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5794
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCardButtonComponent, selector: "gravity-card-button", inputs: { label: "label", iconName: "iconName",
|
|
5800
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GravityCardButtonComponent, selector: "gravity-card-button", inputs: { label: "label", iconName: "iconName", fullWidth: "fullWidth", type: "type", state: "state", orientation: "orientation" }, outputs: { clicked: "clicked" }, ngImport: i0, template: "<div class=\"gravity-card-button\" (click)=\"onCardButtonClick()\">\n <div class=\"card-button-container {{type}} {{orientation}}\" [class.pressed]=\"state === 'pressed'\"\n [class.disabled]=\"state === 'disabled'\" [class.full-width]=\"fullWidth\">\n <gravity-icon *ngIf=\"iconName\" [style.--icon-color]=\"'var(--card-button-color)'\" [iconName]=\"iconName\"\n [iconSize]=\"orientation === 'vrt-center' ? 'md-16' : (orientation === 'vrt-left' || orientation === 'vrt-right' || orientation === 'hrt-center') ? 'lg-24' : 'xl-32'\">\n </gravity-icon>\n <label *ngIf=\"label\" [className]=\"(orientation === 'vrt-center' || orientation === 'vrt-left' || orientation === 'vrt-right') ? 'hr-label sm-bold' : 'hr-label md-bold'\">{{ label }}</label>\n </div>\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}.gravity-card-button{--card-button-color: var(--on-bg-button-active-primary);--card-button-background-color: var(--bg-button-active-primary)}.gravity-card-button .card-button-container{display:flex;flex-shrink:0;cursor:pointer;width:-moz-fit-content;width:fit-content;align-items:center;flex-direction:column;justify-content:center;color:var(--card-button-color);border-radius:.625rem;background-color:var(--card-button-background-color);border:1px solid var(--on-bg-button-active-secondary)}.gravity-card-button .card-button-container.primary{--card-button-color: var(--on-bg-button-active-primary);--card-button-background-color: var(--bg-button-active-primary)}.gravity-card-button .card-button-container.secondary{--card-button-color: var(--on-bg-button-active-secondary);--card-button-background-color: var(--bg-button-active-secondary)}.gravity-card-button .card-button-container.primary.pressed{--card-button-background-color: var(--bg-button-pressed-primary)}.gravity-card-button .card-button-container.secondary.pressed{border:2px solid var(--outline-button-pressed-secondary);--card-button-color: var(--on-bg-button-pressed-secondary)}.gravity-card-button .card-button-container.disabled{cursor:default;pointer-events:none;border:1px solid var(--bg-disabled);--card-button-color: var(--on-bg-disabled);--card-button-background-color: var(--bg-disabled) !important}.gravity-card-button .card-button-container.secondary.disabled{border:1px solid var(--outline-disabled)}.gravity-card-button .card-button-container.vrt-center{min-width:126px;min-height:69px;flex-direction:column;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.vrt-left{flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-sm)}.gravity-card-button .card-button-container.vrt-right{align-items:flex-end;gap:var(--gravity-spacing-sm);flex-direction:column-reverse;padding:var(--gravity-spacing-sm)}.gravity-card-button .card-button-container.hrt-center{min-width:126px;min-height:69px;flex-direction:row;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.hrt-auto{min-width:162px;min-height:69px;flex-direction:row-reverse;justify-content:space-between;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.pressed.vrt-center label,.gravity-card-button .card-button-container.disabled.vrt-center label{padding-bottom:1px;border-bottom:1px solid}.gravity-card-button .card-button-container.full-width{width:100%}\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"] }] }); }
|
|
5795
5801
|
}
|
|
5796
5802
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GravityCardButtonComponent, decorators: [{
|
|
5797
5803
|
type: Component,
|
|
5798
|
-
args: [{ selector: 'gravity-card-button', template: "<div class=\"gravity-card-button\">\n <div class=\"card-button-container {{type}} {{orientation}}\" [class.pressed]=\"state === 'pressed'\"
|
|
5804
|
+
args: [{ selector: 'gravity-card-button', template: "<div class=\"gravity-card-button\" (click)=\"onCardButtonClick()\">\n <div class=\"card-button-container {{type}} {{orientation}}\" [class.pressed]=\"state === 'pressed'\"\n [class.disabled]=\"state === 'disabled'\" [class.full-width]=\"fullWidth\">\n <gravity-icon *ngIf=\"iconName\" [style.--icon-color]=\"'var(--card-button-color)'\" [iconName]=\"iconName\"\n [iconSize]=\"orientation === 'vrt-center' ? 'md-16' : (orientation === 'vrt-left' || orientation === 'vrt-right' || orientation === 'hrt-center') ? 'lg-24' : 'xl-32'\">\n </gravity-icon>\n <label *ngIf=\"label\" [className]=\"(orientation === 'vrt-center' || orientation === 'vrt-left' || orientation === 'vrt-right') ? 'hr-label sm-bold' : 'hr-label md-bold'\">{{ label }}</label>\n </div>\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}.gravity-card-button{--card-button-color: var(--on-bg-button-active-primary);--card-button-background-color: var(--bg-button-active-primary)}.gravity-card-button .card-button-container{display:flex;flex-shrink:0;cursor:pointer;width:-moz-fit-content;width:fit-content;align-items:center;flex-direction:column;justify-content:center;color:var(--card-button-color);border-radius:.625rem;background-color:var(--card-button-background-color);border:1px solid var(--on-bg-button-active-secondary)}.gravity-card-button .card-button-container.primary{--card-button-color: var(--on-bg-button-active-primary);--card-button-background-color: var(--bg-button-active-primary)}.gravity-card-button .card-button-container.secondary{--card-button-color: var(--on-bg-button-active-secondary);--card-button-background-color: var(--bg-button-active-secondary)}.gravity-card-button .card-button-container.primary.pressed{--card-button-background-color: var(--bg-button-pressed-primary)}.gravity-card-button .card-button-container.secondary.pressed{border:2px solid var(--outline-button-pressed-secondary);--card-button-color: var(--on-bg-button-pressed-secondary)}.gravity-card-button .card-button-container.disabled{cursor:default;pointer-events:none;border:1px solid var(--bg-disabled);--card-button-color: var(--on-bg-disabled);--card-button-background-color: var(--bg-disabled) !important}.gravity-card-button .card-button-container.secondary.disabled{border:1px solid var(--outline-disabled)}.gravity-card-button .card-button-container.vrt-center{min-width:126px;min-height:69px;flex-direction:column;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.vrt-left{flex-direction:column;align-items:flex-start;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-sm)}.gravity-card-button .card-button-container.vrt-right{align-items:flex-end;gap:var(--gravity-spacing-sm);flex-direction:column-reverse;padding:var(--gravity-spacing-sm)}.gravity-card-button .card-button-container.hrt-center{min-width:126px;min-height:69px;flex-direction:row;gap:var(--gravity-spacing-xs);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.hrt-auto{min-width:162px;min-height:69px;flex-direction:row-reverse;justify-content:space-between;gap:var(--gravity-spacing-sm);padding:var(--gravity-spacing-sm) var(--gravity-spacing-md)}.gravity-card-button .card-button-container.pressed.vrt-center label,.gravity-card-button .card-button-container.disabled.vrt-center label{padding-bottom:1px;border-bottom:1px solid}.gravity-card-button .card-button-container.full-width{width:100%}\n"] }]
|
|
5799
5805
|
}], propDecorators: { label: [{
|
|
5800
5806
|
type: Input
|
|
5801
5807
|
}], iconName: [{
|
|
5802
5808
|
type: Input
|
|
5803
|
-
}],
|
|
5809
|
+
}], fullWidth: [{
|
|
5804
5810
|
type: Input
|
|
5805
5811
|
}], type: [{
|
|
5806
5812
|
type: Input
|
|
@@ -5808,6 +5814,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
|
|
|
5808
5814
|
type: Input
|
|
5809
5815
|
}], orientation: [{
|
|
5810
5816
|
type: Input
|
|
5817
|
+
}], clicked: [{
|
|
5818
|
+
type: Output
|
|
5811
5819
|
}] } });
|
|
5812
5820
|
|
|
5813
5821
|
class GravityNavigationCardComponent {
|