@rivet-health/design-system 40.10.1 → 40.12.0
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/esm2020/lib/visualization/metric/metric.component.mjs +16 -4
- package/fesm2015/rivet-health-design-system.mjs +15 -3
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +15 -3
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/visualization/metric/metric.component.d.ts +2 -1
- package/package.json +1 -1
|
@@ -13,21 +13,27 @@ export class MetricComponent {
|
|
|
13
13
|
this.align = 'left';
|
|
14
14
|
this.valueColorToken = '--type-light-high-contrast';
|
|
15
15
|
}
|
|
16
|
+
get isXxsmall() {
|
|
17
|
+
return this.size === 'xxsmall';
|
|
18
|
+
}
|
|
16
19
|
get valueColor() {
|
|
17
20
|
return `var(${this.valueColorToken})`;
|
|
18
21
|
}
|
|
19
22
|
}
|
|
20
23
|
MetricComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetricComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
21
|
-
MetricComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MetricComponent, selector: "riv-metric", inputs: { label: "label", value: "value", size: "size", compact: "compact", card: "card", help: "help", align: "align", valueColorToken: "valueColorToken" }, host: { properties: { "class.compact": "this.compact", "class.card": "this.card" } }, ngImport: i0, template: "<div class=\"label\" [ngClass]=\"align\">\n {{ label }}\n <span *ngIf=\"help\"\n ><riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"12\"></riv-icon>\n </span>\n</div>\n<div class=\"content\" [ngClass]=\"align\">\n <div class=\"value\" [ngClass]=\"size\" [style.color]=\"valueColor\">\n {{ value }}\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [":host.card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-0);padding:var(--size-xlarge);display:block}:host.compact{padding:var(--size-large)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast);margin-bottom:var(--size-xsmall)}.label.left{text-align:left}.label.center{text-align:center}.label.right{text-align:right}.value.xsmall{font:var(--stat-xsmall)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}.content.left{justify-content:flex-start}.content.center{justify-content:center}.content.right{justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: i3.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
24
|
+
MetricComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MetricComponent, selector: "riv-metric", inputs: { label: "label", value: "value", size: "size", compact: "compact", card: "card", help: "help", align: "align", valueColorToken: "valueColorToken" }, host: { properties: { "class.xxsmall": "this.isXxsmall", "class.compact": "this.compact", "class.card": "this.card" } }, ngImport: i0, template: "<div class=\"label\" [ngClass]=\"align\">\n {{ label }}\n <span *ngIf=\"help\"\n ><riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"12\"></riv-icon>\n </span>\n</div>\n<div class=\"content\" [ngClass]=\"align\">\n <div class=\"value\" [ngClass]=\"size\" [style.color]=\"valueColor\">\n {{ value }}\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [":host.card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-0);padding:var(--size-xlarge);display:block}:host.compact{padding:var(--size-large)}:host.xxsmall{padding-left:var(--size-large);padding-right:var(--size-large)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast);margin-bottom:var(--size-xsmall)}.label.left{text-align:left}.label.center{text-align:center}.label.right{text-align:right}.value.xxsmall,.value.xsmall{font:var(--stat-xsmall)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}.content.left{justify-content:flex-start}.content.center{justify-content:center}.content.right{justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: i3.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
22
25
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetricComponent, decorators: [{
|
|
23
26
|
type: Component,
|
|
24
|
-
args: [{ selector: 'riv-metric', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"label\" [ngClass]=\"align\">\n {{ label }}\n <span *ngIf=\"help\"\n ><riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"12\"></riv-icon>\n </span>\n</div>\n<div class=\"content\" [ngClass]=\"align\">\n <div class=\"value\" [ngClass]=\"size\" [style.color]=\"valueColor\">\n {{ value }}\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [":host.card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-0);padding:var(--size-xlarge);display:block}:host.compact{padding:var(--size-large)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast);margin-bottom:var(--size-xsmall)}.label.left{text-align:left}.label.center{text-align:center}.label.right{text-align:right}.value.xsmall{font:var(--stat-xsmall)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}.content.left{justify-content:flex-start}.content.center{justify-content:center}.content.right{justify-content:flex-end}\n"] }]
|
|
27
|
+
args: [{ selector: 'riv-metric', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"label\" [ngClass]=\"align\">\n {{ label }}\n <span *ngIf=\"help\"\n ><riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"12\"></riv-icon>\n </span>\n</div>\n<div class=\"content\" [ngClass]=\"align\">\n <div class=\"value\" [ngClass]=\"size\" [style.color]=\"valueColor\">\n {{ value }}\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [":host.card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-0);padding:var(--size-xlarge);display:block}:host.compact{padding:var(--size-large)}:host.xxsmall{padding-left:var(--size-large);padding-right:var(--size-large)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast);margin-bottom:var(--size-xsmall)}.label.left{text-align:left}.label.center{text-align:center}.label.right{text-align:right}.value.xxsmall,.value.xsmall{font:var(--stat-xsmall)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}.content.left{justify-content:flex-start}.content.center{justify-content:center}.content.right{justify-content:flex-end}\n"] }]
|
|
25
28
|
}], propDecorators: { label: [{
|
|
26
29
|
type: Input
|
|
27
30
|
}], value: [{
|
|
28
31
|
type: Input
|
|
29
32
|
}], size: [{
|
|
30
33
|
type: Input
|
|
34
|
+
}], isXxsmall: [{
|
|
35
|
+
type: HostBinding,
|
|
36
|
+
args: ['class.xxsmall']
|
|
31
37
|
}], compact: [{
|
|
32
38
|
type: Input
|
|
33
39
|
}, {
|
|
@@ -46,7 +52,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
46
52
|
type: Input
|
|
47
53
|
}] } });
|
|
48
54
|
(function (MetricComponent) {
|
|
49
|
-
MetricComponent.Sizes = [
|
|
55
|
+
MetricComponent.Sizes = [
|
|
56
|
+
'xxsmall',
|
|
57
|
+
'xsmall',
|
|
58
|
+
'small',
|
|
59
|
+
'medium',
|
|
60
|
+
'large',
|
|
61
|
+
];
|
|
50
62
|
MetricComponent.Alignments = ['left', 'center', 'right'];
|
|
51
63
|
})(MetricComponent || (MetricComponent = {}));
|
|
52
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
64
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWV0cmljLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL3Zpc3VhbGl6YXRpb24vbWV0cmljL21ldHJpYy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi92aXN1YWxpemF0aW9uL21ldHJpYy9tZXRyaWMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsV0FBVyxFQUNYLEtBQUssR0FDTixNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFRdkIsTUFBTSxPQUFPLGVBQWU7SUFONUI7UUFRRSxVQUFLLEdBQVcsRUFBRSxDQUFDO1FBR25CLFVBQUssR0FBVyxFQUFFLENBQUM7UUFHbkIsU0FBSSxHQUF5QixRQUFRLENBQUM7UUFTdEMsWUFBTyxHQUFZLEtBQUssQ0FBQztRQUl6QixTQUFJLEdBQVksS0FBSyxDQUFDO1FBTXRCLFVBQUssR0FBK0IsTUFBTSxDQUFDO1FBRzNDLG9CQUFlLEdBQVksNEJBQTRCLENBQUM7S0FLekQ7SUF6QkMsSUFDSSxTQUFTO1FBQ1gsT0FBTyxJQUFJLENBQUMsSUFBSSxLQUFLLFNBQVMsQ0FBQztJQUNqQyxDQUFDO0lBbUJELElBQUksVUFBVTtRQUNaLE9BQU8sT0FBTyxJQUFJLENBQUMsZUFBZSxHQUFHLENBQUM7SUFDeEMsQ0FBQzs7NkdBbENVLGVBQWU7aUdBQWYsZUFBZSx5VUNiNUIsK1dBWUE7NEZEQ2EsZUFBZTtrQkFOM0IsU0FBUzsrQkFDRSxZQUFZLG1CQUdMLHVCQUF1QixDQUFDLE1BQU07OEJBSS9DLEtBQUs7c0JBREosS0FBSztnQkFJTixLQUFLO3NCQURKLEtBQUs7Z0JBSU4sSUFBSTtzQkFESCxLQUFLO2dCQUlGLFNBQVM7c0JBRFosV0FBVzt1QkFBQyxlQUFlO2dCQU81QixPQUFPO3NCQUZOLEtBQUs7O3NCQUNMLFdBQVc7dUJBQUMsZUFBZTtnQkFLNUIsSUFBSTtzQkFGSCxLQUFLOztzQkFDTCxXQUFXO3VCQUFDLFlBQVk7Z0JBSXpCLElBQUk7c0JBREgsS0FBSztnQkFJTixLQUFLO3NCQURKLEtBQUs7Z0JBSU4sZUFBZTtzQkFEZCxLQUFLOztBQVFSLFdBQWlCLGVBQWU7SUFDakIscUJBQUssR0FBRztRQUNuQixTQUFTO1FBQ1QsUUFBUTtRQUNSLE9BQU87UUFDUCxRQUFRO1FBQ1IsT0FBTztLQUNDLENBQUM7SUFHRSwwQkFBVSxHQUFHLENBQUMsTUFBTSxFQUFFLFFBQVEsRUFBRSxPQUFPLENBQVUsQ0FBQztBQUVqRSxDQUFDLEVBWmdCLGVBQWUsS0FBZixlQUFlLFFBWS9CIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgSG9zdEJpbmRpbmcsXG4gIElucHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncml2LW1ldHJpYycsXG4gIHRlbXBsYXRlVXJsOiAnLi9tZXRyaWMuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9tZXRyaWMuY29tcG9uZW50LmNzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTWV0cmljQ29tcG9uZW50IHtcbiAgQElucHV0KClcbiAgbGFiZWw6IHN0cmluZyA9ICcnO1xuXG4gIEBJbnB1dCgpXG4gIHZhbHVlOiBzdHJpbmcgPSAnJztcblxuICBASW5wdXQoKVxuICBzaXplOiBNZXRyaWNDb21wb25lbnQuU2l6ZSA9ICdtZWRpdW0nO1xuXG4gIEBIb3N0QmluZGluZygnY2xhc3MueHhzbWFsbCcpXG4gIGdldCBpc1h4c21hbGwoKTogYm9vbGVhbiB7XG4gICAgcmV0dXJuIHRoaXMuc2l6ZSA9PT0gJ3h4c21hbGwnO1xuICB9XG5cbiAgQElucHV0KClcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5jb21wYWN0JylcbiAgY29tcGFjdDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIEBIb3N0QmluZGluZygnY2xhc3MuY2FyZCcpXG4gIGNhcmQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBoZWxwPzogc3RyaW5nO1xuXG4gIEBJbnB1dCgpXG4gIGFsaWduPzogTWV0cmljQ29tcG9uZW50LkFsaWdubWVudCA9ICdsZWZ0JztcblxuICBASW5wdXQoKVxuICB2YWx1ZUNvbG9yVG9rZW4/OiBzdHJpbmcgPSAnLS10eXBlLWxpZ2h0LWhpZ2gtY29udHJhc3QnO1xuXG4gIGdldCB2YWx1ZUNvbG9yKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGB2YXIoJHt0aGlzLnZhbHVlQ29sb3JUb2tlbn0pYDtcbiAgfVxufVxuXG5leHBvcnQgbmFtZXNwYWNlIE1ldHJpY0NvbXBvbmVudCB7XG4gIGV4cG9ydCBjb25zdCBTaXplcyA9IFtcbiAgICAneHhzbWFsbCcsXG4gICAgJ3hzbWFsbCcsXG4gICAgJ3NtYWxsJyxcbiAgICAnbWVkaXVtJyxcbiAgICAnbGFyZ2UnLFxuICBdIGFzIGNvbnN0O1xuICBleHBvcnQgdHlwZSBTaXplID0gKHR5cGVvZiBTaXplcylbbnVtYmVyXTtcblxuICBleHBvcnQgY29uc3QgQWxpZ25tZW50cyA9IFsnbGVmdCcsICdjZW50ZXInLCAncmlnaHQnXSBhcyBjb25zdDtcbiAgZXhwb3J0IHR5cGUgQWxpZ25tZW50ID0gKHR5cGVvZiBBbGlnbm1lbnRzKVtudW1iZXJdO1xufVxuIiwiPGRpdiBjbGFzcz1cImxhYmVsXCIgW25nQ2xhc3NdPVwiYWxpZ25cIj5cbiAge3sgbGFiZWwgfX1cbiAgPHNwYW4gKm5nSWY9XCJoZWxwXCJcbiAgICA+PHJpdi1pY29uIFtyaXZUb29sdGlwXT1cImhlbHBcIiBbbmFtZV09XCInSW5mbydcIiBbc2l6ZV09XCIxMlwiPjwvcml2LWljb24+XG4gIDwvc3Bhbj5cbjwvZGl2PlxuPGRpdiBjbGFzcz1cImNvbnRlbnRcIiBbbmdDbGFzc109XCJhbGlnblwiPlxuICA8ZGl2IGNsYXNzPVwidmFsdWVcIiBbbmdDbGFzc109XCJzaXplXCIgW3N0eWxlLmNvbG9yXT1cInZhbHVlQ29sb3JcIj5cbiAgICB7eyB2YWx1ZSB9fVxuICA8L2Rpdj5cbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPC9kaXY+XG4iXX0=
|
|
@@ -14592,21 +14592,27 @@ class MetricComponent {
|
|
|
14592
14592
|
this.align = 'left';
|
|
14593
14593
|
this.valueColorToken = '--type-light-high-contrast';
|
|
14594
14594
|
}
|
|
14595
|
+
get isXxsmall() {
|
|
14596
|
+
return this.size === 'xxsmall';
|
|
14597
|
+
}
|
|
14595
14598
|
get valueColor() {
|
|
14596
14599
|
return `var(${this.valueColorToken})`;
|
|
14597
14600
|
}
|
|
14598
14601
|
}
|
|
14599
14602
|
MetricComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetricComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
14600
|
-
MetricComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MetricComponent, selector: "riv-metric", inputs: { label: "label", value: "value", size: "size", compact: "compact", card: "card", help: "help", align: "align", valueColorToken: "valueColorToken" }, host: { properties: { "class.compact": "this.compact", "class.card": "this.card" } }, ngImport: i0, template: "<div class=\"label\" [ngClass]=\"align\">\n {{ label }}\n <span *ngIf=\"help\"\n ><riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"12\"></riv-icon>\n </span>\n</div>\n<div class=\"content\" [ngClass]=\"align\">\n <div class=\"value\" [ngClass]=\"size\" [style.color]=\"valueColor\">\n {{ value }}\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [":host.card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-0);padding:var(--size-xlarge);display:block}:host.compact{padding:var(--size-large)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast);margin-bottom:var(--size-xsmall)}.label.left{text-align:left}.label.center{text-align:center}.label.right{text-align:right}.value.xsmall{font:var(--stat-xsmall)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}.content.left{justify-content:flex-start}.content.center{justify-content:center}.content.right{justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14603
|
+
MetricComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MetricComponent, selector: "riv-metric", inputs: { label: "label", value: "value", size: "size", compact: "compact", card: "card", help: "help", align: "align", valueColorToken: "valueColorToken" }, host: { properties: { "class.xxsmall": "this.isXxsmall", "class.compact": "this.compact", "class.card": "this.card" } }, ngImport: i0, template: "<div class=\"label\" [ngClass]=\"align\">\n {{ label }}\n <span *ngIf=\"help\"\n ><riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"12\"></riv-icon>\n </span>\n</div>\n<div class=\"content\" [ngClass]=\"align\">\n <div class=\"value\" [ngClass]=\"size\" [style.color]=\"valueColor\">\n {{ value }}\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [":host.card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-0);padding:var(--size-xlarge);display:block}:host.compact{padding:var(--size-large)}:host.xxsmall{padding-left:var(--size-large);padding-right:var(--size-large)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast);margin-bottom:var(--size-xsmall)}.label.left{text-align:left}.label.center{text-align:center}.label.right{text-align:right}.value.xxsmall,.value.xsmall{font:var(--stat-xsmall)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}.content.left{justify-content:flex-start}.content.center{justify-content:center}.content.right{justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
14601
14604
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetricComponent, decorators: [{
|
|
14602
14605
|
type: Component,
|
|
14603
|
-
args: [{ selector: 'riv-metric', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"label\" [ngClass]=\"align\">\n {{ label }}\n <span *ngIf=\"help\"\n ><riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"12\"></riv-icon>\n </span>\n</div>\n<div class=\"content\" [ngClass]=\"align\">\n <div class=\"value\" [ngClass]=\"size\" [style.color]=\"valueColor\">\n {{ value }}\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [":host.card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-0);padding:var(--size-xlarge);display:block}:host.compact{padding:var(--size-large)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast);margin-bottom:var(--size-xsmall)}.label.left{text-align:left}.label.center{text-align:center}.label.right{text-align:right}.value.xsmall{font:var(--stat-xsmall)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}.content.left{justify-content:flex-start}.content.center{justify-content:center}.content.right{justify-content:flex-end}\n"] }]
|
|
14606
|
+
args: [{ selector: 'riv-metric', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"label\" [ngClass]=\"align\">\n {{ label }}\n <span *ngIf=\"help\"\n ><riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"12\"></riv-icon>\n </span>\n</div>\n<div class=\"content\" [ngClass]=\"align\">\n <div class=\"value\" [ngClass]=\"size\" [style.color]=\"valueColor\">\n {{ value }}\n </div>\n <ng-content></ng-content>\n</div>\n", styles: [":host.card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-0);padding:var(--size-xlarge);display:block}:host.compact{padding:var(--size-large)}:host.xxsmall{padding-left:var(--size-large);padding-right:var(--size-large)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast);margin-bottom:var(--size-xsmall)}.label.left{text-align:left}.label.center{text-align:center}.label.right{text-align:right}.value.xxsmall,.value.xsmall{font:var(--stat-xsmall)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}.content.left{justify-content:flex-start}.content.center{justify-content:center}.content.right{justify-content:flex-end}\n"] }]
|
|
14604
14607
|
}], propDecorators: { label: [{
|
|
14605
14608
|
type: Input
|
|
14606
14609
|
}], value: [{
|
|
14607
14610
|
type: Input
|
|
14608
14611
|
}], size: [{
|
|
14609
14612
|
type: Input
|
|
14613
|
+
}], isXxsmall: [{
|
|
14614
|
+
type: HostBinding,
|
|
14615
|
+
args: ['class.xxsmall']
|
|
14610
14616
|
}], compact: [{
|
|
14611
14617
|
type: Input
|
|
14612
14618
|
}, {
|
|
@@ -14625,7 +14631,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
14625
14631
|
type: Input
|
|
14626
14632
|
}] } });
|
|
14627
14633
|
(function (MetricComponent) {
|
|
14628
|
-
MetricComponent.Sizes = [
|
|
14634
|
+
MetricComponent.Sizes = [
|
|
14635
|
+
'xxsmall',
|
|
14636
|
+
'xsmall',
|
|
14637
|
+
'small',
|
|
14638
|
+
'medium',
|
|
14639
|
+
'large',
|
|
14640
|
+
];
|
|
14629
14641
|
MetricComponent.Alignments = ['left', 'center', 'right'];
|
|
14630
14642
|
})(MetricComponent || (MetricComponent = {}));
|
|
14631
14643
|
|