@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
|
@@ -15127,27 +15127,21 @@ class MetricComponent {
|
|
|
15127
15127
|
this.align = 'left';
|
|
15128
15128
|
this.valueColorToken = '--type-light-high-contrast';
|
|
15129
15129
|
}
|
|
15130
|
-
get isXxsmall() {
|
|
15131
|
-
return this.size === 'xxsmall';
|
|
15132
|
-
}
|
|
15133
15130
|
get valueColor() {
|
|
15134
15131
|
return `var(${this.valueColorToken})`;
|
|
15135
15132
|
}
|
|
15136
15133
|
}
|
|
15137
15134
|
MetricComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetricComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
15138
|
-
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.
|
|
15135
|
+
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 });
|
|
15139
15136
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetricComponent, decorators: [{
|
|
15140
15137
|
type: Component,
|
|
15141
|
-
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)}
|
|
15138
|
+
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"] }]
|
|
15142
15139
|
}], propDecorators: { label: [{
|
|
15143
15140
|
type: Input
|
|
15144
15141
|
}], value: [{
|
|
15145
15142
|
type: Input
|
|
15146
15143
|
}], size: [{
|
|
15147
15144
|
type: Input
|
|
15148
|
-
}], isXxsmall: [{
|
|
15149
|
-
type: HostBinding,
|
|
15150
|
-
args: ['class.xxsmall']
|
|
15151
15145
|
}], compact: [{
|
|
15152
15146
|
type: Input
|
|
15153
15147
|
}, {
|
|
@@ -15166,13 +15160,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImpo
|
|
|
15166
15160
|
type: Input
|
|
15167
15161
|
}] } });
|
|
15168
15162
|
(function (MetricComponent) {
|
|
15169
|
-
MetricComponent.Sizes = [
|
|
15170
|
-
'xxsmall',
|
|
15171
|
-
'xsmall',
|
|
15172
|
-
'small',
|
|
15173
|
-
'medium',
|
|
15174
|
-
'large',
|
|
15175
|
-
];
|
|
15163
|
+
MetricComponent.Sizes = ['xsmall', 'small', 'medium', 'large'];
|
|
15176
15164
|
MetricComponent.Alignments = ['left', 'center', 'right'];
|
|
15177
15165
|
})(MetricComponent || (MetricComponent = {}));
|
|
15178
15166
|
|