@rivet-health/design-system 40.12.0 → 40.12.2
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 +4 -16
- package/fesm2015/rivet-health-design-system.mjs +3 -15
- package/fesm2015/rivet-health-design-system.mjs.map +1 -1
- package/fesm2020/rivet-health-design-system.mjs +3 -15
- package/fesm2020/rivet-health-design-system.mjs.map +1 -1
- package/lib/visualization/metric/metric.component.d.ts +1 -2
- package/package.json +1 -1
|
@@ -13,27 +13,21 @@ 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
|
-
}
|
|
19
16
|
get valueColor() {
|
|
20
17
|
return `var(${this.valueColorToken})`;
|
|
21
18
|
}
|
|
22
19
|
}
|
|
23
20
|
MetricComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetricComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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.
|
|
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 });
|
|
25
22
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetricComponent, decorators: [{
|
|
26
23
|
type: Component,
|
|
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)}
|
|
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"] }]
|
|
28
25
|
}], propDecorators: { label: [{
|
|
29
26
|
type: Input
|
|
30
27
|
}], value: [{
|
|
31
28
|
type: Input
|
|
32
29
|
}], size: [{
|
|
33
30
|
type: Input
|
|
34
|
-
}], isXxsmall: [{
|
|
35
|
-
type: HostBinding,
|
|
36
|
-
args: ['class.xxsmall']
|
|
37
31
|
}], compact: [{
|
|
38
32
|
type: Input
|
|
39
33
|
}, {
|
|
@@ -52,13 +46,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
52
46
|
type: Input
|
|
53
47
|
}] } });
|
|
54
48
|
(function (MetricComponent) {
|
|
55
|
-
MetricComponent.Sizes = [
|
|
56
|
-
'xxsmall',
|
|
57
|
-
'xsmall',
|
|
58
|
-
'small',
|
|
59
|
-
'medium',
|
|
60
|
-
'large',
|
|
61
|
-
];
|
|
49
|
+
MetricComponent.Sizes = ['xsmall', 'small', 'medium', 'large'];
|
|
62
50
|
MetricComponent.Alignments = ['left', 'center', 'right'];
|
|
63
51
|
})(MetricComponent || (MetricComponent = {}));
|
|
64
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
52
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWV0cmljLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3Jpdi9zcmMvbGliL3Zpc3VhbGl6YXRpb24vbWV0cmljL21ldHJpYy5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi92aXN1YWxpemF0aW9uL21ldHJpYy9tZXRyaWMuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUNMLHVCQUF1QixFQUN2QixTQUFTLEVBQ1QsV0FBVyxFQUNYLEtBQUssR0FDTixNQUFNLGVBQWUsQ0FBQzs7Ozs7QUFRdkIsTUFBTSxPQUFPLGVBQWU7SUFONUI7UUFRRSxVQUFLLEdBQVcsRUFBRSxDQUFDO1FBR25CLFVBQUssR0FBVyxFQUFFLENBQUM7UUFHbkIsU0FBSSxHQUF5QixRQUFRLENBQUM7UUFJdEMsWUFBTyxHQUFZLEtBQUssQ0FBQztRQUl6QixTQUFJLEdBQVksS0FBSyxDQUFDO1FBTXRCLFVBQUssR0FBK0IsTUFBTSxDQUFDO1FBRzNDLG9CQUFlLEdBQVksNEJBQTRCLENBQUM7S0FLekQ7SUFIQyxJQUFJLFVBQVU7UUFDWixPQUFPLE9BQU8sSUFBSSxDQUFDLGVBQWUsR0FBRyxDQUFDO0lBQ3hDLENBQUM7OzZHQTdCVSxlQUFlO2lHQUFmLGVBQWUsc1NDYjVCLCtXQVlBOzRGRENhLGVBQWU7a0JBTjNCLFNBQVM7K0JBQ0UsWUFBWSxtQkFHTCx1QkFBdUIsQ0FBQyxNQUFNOzhCQUkvQyxLQUFLO3NCQURKLEtBQUs7Z0JBSU4sS0FBSztzQkFESixLQUFLO2dCQUlOLElBQUk7c0JBREgsS0FBSztnQkFLTixPQUFPO3NCQUZOLEtBQUs7O3NCQUNMLFdBQVc7dUJBQUMsZUFBZTtnQkFLNUIsSUFBSTtzQkFGSCxLQUFLOztzQkFDTCxXQUFXO3VCQUFDLFlBQVk7Z0JBSXpCLElBQUk7c0JBREgsS0FBSztnQkFJTixLQUFLO3NCQURKLEtBQUs7Z0JBSU4sZUFBZTtzQkFEZCxLQUFLOztBQVFSLFdBQWlCLGVBQWU7SUFDakIscUJBQUssR0FBRyxDQUFDLFFBQVEsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLE9BQU8sQ0FBVSxDQUFDO0lBR3hELDBCQUFVLEdBQUcsQ0FBQyxNQUFNLEVBQUUsUUFBUSxFQUFFLE9BQU8sQ0FBVSxDQUFDO0FBRWpFLENBQUMsRUFOZ0IsZUFBZSxLQUFmLGVBQWUsUUFNL0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSxcbiAgQ29tcG9uZW50LFxuICBIb3N0QmluZGluZyxcbiAgSW5wdXQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdyaXYtbWV0cmljJyxcbiAgdGVtcGxhdGVVcmw6ICcuL21ldHJpYy5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL21ldHJpYy5jb21wb25lbnQuY3NzJ10sXG4gIGNoYW5nZURldGVjdGlvbjogQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3kuT25QdXNoLFxufSlcbmV4cG9ydCBjbGFzcyBNZXRyaWNDb21wb25lbnQge1xuICBASW5wdXQoKVxuICBsYWJlbDogc3RyaW5nID0gJyc7XG5cbiAgQElucHV0KClcbiAgdmFsdWU6IHN0cmluZyA9ICcnO1xuXG4gIEBJbnB1dCgpXG4gIHNpemU6IE1ldHJpY0NvbXBvbmVudC5TaXplID0gJ21lZGl1bSc7XG5cbiAgQElucHV0KClcbiAgQEhvc3RCaW5kaW5nKCdjbGFzcy5jb21wYWN0JylcbiAgY29tcGFjdDogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBJbnB1dCgpXG4gIEBIb3N0QmluZGluZygnY2xhc3MuY2FyZCcpXG4gIGNhcmQ6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBoZWxwPzogc3RyaW5nO1xuXG4gIEBJbnB1dCgpXG4gIGFsaWduPzogTWV0cmljQ29tcG9uZW50LkFsaWdubWVudCA9ICdsZWZ0JztcblxuICBASW5wdXQoKVxuICB2YWx1ZUNvbG9yVG9rZW4/OiBzdHJpbmcgPSAnLS10eXBlLWxpZ2h0LWhpZ2gtY29udHJhc3QnO1xuXG4gIGdldCB2YWx1ZUNvbG9yKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGB2YXIoJHt0aGlzLnZhbHVlQ29sb3JUb2tlbn0pYDtcbiAgfVxufVxuXG5leHBvcnQgbmFtZXNwYWNlIE1ldHJpY0NvbXBvbmVudCB7XG4gIGV4cG9ydCBjb25zdCBTaXplcyA9IFsneHNtYWxsJywgJ3NtYWxsJywgJ21lZGl1bScsICdsYXJnZSddIGFzIGNvbnN0O1xuICBleHBvcnQgdHlwZSBTaXplID0gKHR5cGVvZiBTaXplcylbbnVtYmVyXTtcblxuICBleHBvcnQgY29uc3QgQWxpZ25tZW50cyA9IFsnbGVmdCcsICdjZW50ZXInLCAncmlnaHQnXSBhcyBjb25zdDtcbiAgZXhwb3J0IHR5cGUgQWxpZ25tZW50ID0gKHR5cGVvZiBBbGlnbm1lbnRzKVtudW1iZXJdO1xufVxuIiwiPGRpdiBjbGFzcz1cImxhYmVsXCIgW25nQ2xhc3NdPVwiYWxpZ25cIj5cbiAge3sgbGFiZWwgfX1cbiAgPHNwYW4gKm5nSWY9XCJoZWxwXCJcbiAgICA+PHJpdi1pY29uIFtyaXZUb29sdGlwXT1cImhlbHBcIiBbbmFtZV09XCInSW5mbydcIiBbc2l6ZV09XCIxMlwiPjwvcml2LWljb24+XG4gIDwvc3Bhbj5cbjwvZGl2PlxuPGRpdiBjbGFzcz1cImNvbnRlbnRcIiBbbmdDbGFzc109XCJhbGlnblwiPlxuICA8ZGl2IGNsYXNzPVwidmFsdWVcIiBbbmdDbGFzc109XCJzaXplXCIgW3N0eWxlLmNvbG9yXT1cInZhbHVlQ29sb3JcIj5cbiAgICB7eyB2YWx1ZSB9fVxuICA8L2Rpdj5cbiAgPG5nLWNvbnRlbnQ+PC9uZy1jb250ZW50PlxuPC9kaXY+XG4iXX0=
|
|
@@ -14592,27 +14592,21 @@ 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
|
-
}
|
|
14598
14595
|
get valueColor() {
|
|
14599
14596
|
return `var(${this.valueColorToken})`;
|
|
14600
14597
|
}
|
|
14601
14598
|
}
|
|
14602
14599
|
MetricComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetricComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
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.
|
|
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 });
|
|
14604
14601
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetricComponent, decorators: [{
|
|
14605
14602
|
type: Component,
|
|
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)}
|
|
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"] }]
|
|
14607
14604
|
}], propDecorators: { label: [{
|
|
14608
14605
|
type: Input
|
|
14609
14606
|
}], value: [{
|
|
14610
14607
|
type: Input
|
|
14611
14608
|
}], size: [{
|
|
14612
14609
|
type: Input
|
|
14613
|
-
}], isXxsmall: [{
|
|
14614
|
-
type: HostBinding,
|
|
14615
|
-
args: ['class.xxsmall']
|
|
14616
14610
|
}], compact: [{
|
|
14617
14611
|
type: Input
|
|
14618
14612
|
}, {
|
|
@@ -14631,13 +14625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
14631
14625
|
type: Input
|
|
14632
14626
|
}] } });
|
|
14633
14627
|
(function (MetricComponent) {
|
|
14634
|
-
MetricComponent.Sizes = [
|
|
14635
|
-
'xxsmall',
|
|
14636
|
-
'xsmall',
|
|
14637
|
-
'small',
|
|
14638
|
-
'medium',
|
|
14639
|
-
'large',
|
|
14640
|
-
];
|
|
14628
|
+
MetricComponent.Sizes = ['xsmall', 'small', 'medium', 'large'];
|
|
14641
14629
|
MetricComponent.Alignments = ['left', 'center', 'right'];
|
|
14642
14630
|
})(MetricComponent || (MetricComponent = {}));
|
|
14643
14631
|
|