@rivet-health/design-system 2.5.0 → 2.7.0

package/fesm2020/rivet-health-design-system.mjs

@@ -671,13 +671,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: CalloutService }]; } });
 
+const TooltipAnchoredPositions = [
+    'top-center',
+    'center-right',
+    'bottom-center',
+    'center-left',
+];
 class TooltipComponent {
     constructor() {
         this.anchor = null;
         this.theme = 'dark';
+        this.maxWidth = 'calc(var(--base-grid-size) * 50)';
+        this.preferredPosition = 'top-center';
         this.onMouseEnter = new EventEmitter();
         this.onMouseLeave = new EventEmitter();
         this.isTemplate = isTemplate;
+        this.allowedPositions = [...TooltipAnchoredPositions];
     }
     _onMouseLeave(evt) {
         this.onMouseLeave.emit(evt);
@@ -687,16 +696,20 @@ class TooltipComponent {
     }
 }
 TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TooltipComponent, selector: "riv-tooltip", inputs: { anchor: "anchor", content: "content", theme: "theme" }, outputs: { onMouseEnter: "onMouseEnter", onMouseLeave: "onMouseLeave" }, host: { listeners: { "mouseleave": "_onMouseLeave()", "mouseenter": "_onMouseEnter()" } }, ngImport: i0, template: "<riv-callout\n  [anchor]=\"anchor\"\n  [preferredPosition]=\"'top-center'\"\n  [allowedPositions]=\"[\n    'top-center',\n    'center-right',\n    'bottom-center',\n    'center-left'\n  ]\"\n  [isModal]=\"false\"\n  [theme]=\"theme\"\n>\n  <div class=\"content\">\n    <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n    <ng-template #stringContent>\n      {{ content }}\n    </ng-template>\n  </div>\n</riv-callout>\n", styles: [".content{padding:var(--size-xsmall) var(--size-small)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TooltipComponent, selector: "riv-tooltip", inputs: { anchor: "anchor", content: "content", theme: "theme", maxWidth: "maxWidth", preferredPosition: "preferredPosition" }, outputs: { onMouseEnter: "onMouseEnter", onMouseLeave: "onMouseLeave" }, host: { listeners: { "mouseleave": "_onMouseLeave()", "mouseenter": "_onMouseEnter()" } }, ngImport: i0, template: "<riv-callout\n  [anchor]=\"anchor\"\n  [preferredPosition]=\"preferredPosition\"\n  [allowedPositions]=\"allowedPositions\"\n  [isModal]=\"false\"\n  [theme]=\"theme\"\n>\n  <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </ng-container>\n  <ng-template #stringContent>\n    <div class=\"string-content\" [style.max-width]=\"maxWidth\">\n      {{ content }}\n    </div>\n  </ng-template>\n</riv-callout>\n", styles: [".string-content{padding:var(--size-xsmall) var(--size-small)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-callout\n  [anchor]=\"anchor\"\n  [preferredPosition]=\"'top-center'\"\n  [allowedPositions]=\"[\n    'top-center',\n    'center-right',\n    'bottom-center',\n    'center-left'\n  ]\"\n  [isModal]=\"false\"\n  [theme]=\"theme\"\n>\n  <div class=\"content\">\n    <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n      <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n    </ng-container>\n    <ng-template #stringContent>\n      {{ content }}\n    </ng-template>\n  </div>\n</riv-callout>\n", styles: [".content{padding:var(--size-xsmall) var(--size-small)}\n"] }]
+            args: [{ selector: 'riv-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-callout\n  [anchor]=\"anchor\"\n  [preferredPosition]=\"preferredPosition\"\n  [allowedPositions]=\"allowedPositions\"\n  [isModal]=\"false\"\n  [theme]=\"theme\"\n>\n  <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </ng-container>\n  <ng-template #stringContent>\n    <div class=\"string-content\" [style.max-width]=\"maxWidth\">\n      {{ content }}\n    </div>\n  </ng-template>\n</riv-callout>\n", styles: [".string-content{padding:var(--size-xsmall) var(--size-small)}\n"] }]
         }], propDecorators: { anchor: [{
                 type: Input
             }], content: [{
                 type: Input
             }], theme: [{
                 type: Input
+            }], maxWidth: [{
+                type: Input
+            }], preferredPosition: [{
+                type: Input
             }], onMouseEnter: [{
                 type: Output
             }], onMouseLeave: [{
@@ -717,7 +730,9 @@ class TooltipDirective {
         this.el = el;
         this.applicationRef = applicationRef;
         this.rivTooltipTheme = 'dark';
-        this.closeDelay = 100;
+        this.rivTooltipMaxWidth = 'calc(var(--base-grid-size) * 50)';
+        this.rivTooltipPreferredPosition = 'top-center';
+        this.rivTooltipCloseDelay = 100;
     }
     onMouseEnter() {
         if (!this.rivTooltip)
@@ -732,6 +747,8 @@ class TooltipDirective {
             tooltip.instance.anchor = this.el.nativeElement;
             tooltip.instance.content = this.rivTooltip;
             tooltip.instance.theme = this.rivTooltipTheme;
+            tooltip.instance.maxWidth = this.rivTooltipMaxWidth;
+            tooltip.instance.preferredPosition = this.rivTooltipPreferredPosition;
             tooltip.instance.onMouseEnter.subscribe(this.cancelClose.bind(this));
             tooltip.instance.onMouseLeave.subscribe(this.initiateClose.bind(this));
             this.tooltipRef = tooltip;
@@ -744,14 +761,14 @@ class TooltipDirective {
         this.closeTimeout = window.setTimeout(() => {
             this.tooltipRef?.destroy();
             this.tooltipRef = undefined;
-        }, this.closeDelay);
+        }, this.rivTooltipCloseDelay);
     }
     cancelClose() {
         window.clearTimeout(this.closeTimeout);
     }
 }
 TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Directive });
-TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TooltipDirective, selector: "[rivTooltip]", inputs: { rivTooltip: "rivTooltip", rivTooltipTheme: "rivTooltipTheme", closeDelay: "closeDelay" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TooltipDirective, selector: "[rivTooltip]", inputs: { rivTooltip: "rivTooltip", rivTooltipTheme: "rivTooltipTheme", rivTooltipMaxWidth: "rivTooltipMaxWidth", rivTooltipPreferredPosition: "rivTooltipPreferredPosition", rivTooltipCloseDelay: "rivTooltipCloseDelay" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
             args: [{
@@ -761,7 +778,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], rivTooltipTheme: [{
                 type: Input
-            }], closeDelay: [{
+            }], rivTooltipMaxWidth: [{
+                type: Input
+            }], rivTooltipPreferredPosition: [{
+                type: Input
+            }], rivTooltipCloseDelay: [{
                 type: Input
             }], onMouseEnter: [{
                 type: HostListener,
@@ -867,7 +888,7 @@ class DonutComponent {
     }
 }
 DonutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DonutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DonutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DonutComponent, selector: "riv-donut", inputs: { displayLabel: "displayLabel", displayValue: "displayValue", data: "data", displayTooltip: "displayTooltip" }, ngImport: i0, template: "<div *ngIf=\"!empty; else zeroState\" class=\"container\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"100%\"\n    [attr.height]=\"HEIGHT\"\n    viewBox=\"-128 -128 256 256\"\n  >\n    <path\n      *ngFor=\"let path of arcPaths; let i = index\"\n      [attr.d]=\"path\"\n      [attr.fill]=\"getFillStyle(i)\"\n    ></path>\n  </svg>\n  <div class=\"display\">\n    <div class=\"value\" [rivTooltip]=\"displayTooltip\">{{ displayValue }}</div>\n    <div class=\"label\">{{ displayLabel }}</div>\n  </div>\n</div>\n\n<ng-template #zeroState>\n  <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value,.label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "closeDelay"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DonutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DonutComponent, selector: "riv-donut", inputs: { displayLabel: "displayLabel", displayValue: "displayValue", data: "data", displayTooltip: "displayTooltip" }, ngImport: i0, template: "<div *ngIf=\"!empty; else zeroState\" class=\"container\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"100%\"\n    [attr.height]=\"HEIGHT\"\n    viewBox=\"-128 -128 256 256\"\n  >\n    <path\n      *ngFor=\"let path of arcPaths; let i = index\"\n      [attr.d]=\"path\"\n      [attr.fill]=\"getFillStyle(i)\"\n    ></path>\n  </svg>\n  <div class=\"display\">\n    <div class=\"value\" [rivTooltip]=\"displayTooltip\">{{ displayValue }}</div>\n    <div class=\"label\">{{ displayLabel }}</div>\n  </div>\n</div>\n\n<ng-template #zeroState>\n  <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value,.label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DonutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-donut', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!empty; else zeroState\" class=\"container\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"100%\"\n    [attr.height]=\"HEIGHT\"\n    viewBox=\"-128 -128 256 256\"\n  >\n    <path\n      *ngFor=\"let path of arcPaths; let i = index\"\n      [attr.d]=\"path\"\n      [attr.fill]=\"getFillStyle(i)\"\n    ></path>\n  </svg>\n  <div class=\"display\">\n    <div class=\"value\" [rivTooltip]=\"displayTooltip\">{{ displayValue }}</div>\n    <div class=\"label\">{{ displayLabel }}</div>\n  </div>\n</div>\n\n<ng-template #zeroState>\n  <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value,.label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}\n"] }]
@@ -894,7 +915,7 @@ class LegendItemComponent {
     }
 }
 LegendItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegendItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LegendItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LegendItemComponent, selector: "riv-legend-item", inputs: { label: "label", colorToken: "colorToken", style: "style", visibility: "visibility", iconTooltip: "iconTooltip" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button (click)=\"itemClick.emit()\" [rivTooltip]=\"iconTooltip\">\n  <i\n    *ngIf=\"visibility === 'visible'\"\n    [class.striped]=\"style === 'striped'\"\n    [style.background-color]=\"backgroundColor\"\n  ></i>\n  <riv-icon\n    *ngIf=\"visibility === 'hidden'\"\n    name=\"EyeOff\"\n    [size]=\"16\"\n  ></riv-icon>\n  <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n</button>\n<span [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\">\n  {{ label }}\n</span>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--size-small)}i{width:var(--size-large);height:var(--size-large)}i.striped{background-image:repeating-linear-gradient(315deg,transparent 0px,transparent 2.5px,var(--white-100) 2.5px,var(--white-100) 3.5px,transparent 3.5px,transparent 6px)}span{color:var(--type-light-low-contrast);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}button{display:inline-flex}riv-icon,span.low-contrast{color:var(--type-light-disabled)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "closeDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+LegendItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LegendItemComponent, selector: "riv-legend-item", inputs: { label: "label", colorToken: "colorToken", style: "style", visibility: "visibility", iconTooltip: "iconTooltip" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button (click)=\"itemClick.emit()\" [rivTooltip]=\"iconTooltip\">\n  <i\n    *ngIf=\"visibility === 'visible'\"\n    [class.striped]=\"style === 'striped'\"\n    [style.background-color]=\"backgroundColor\"\n  ></i>\n  <riv-icon\n    *ngIf=\"visibility === 'hidden'\"\n    name=\"EyeOff\"\n    [size]=\"16\"\n  ></riv-icon>\n  <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n</button>\n<span [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\">\n  {{ label }}\n</span>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--size-small)}i{width:var(--size-large);height:var(--size-large)}i.striped{background-image:repeating-linear-gradient(315deg,transparent 0px,transparent 2.5px,var(--white-100) 2.5px,var(--white-100) 3.5px,transparent 3.5px,transparent 6px)}span{color:var(--type-light-low-contrast);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}button{display:inline-flex}riv-icon,span.low-contrast{color:var(--type-light-disabled)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegendItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button (click)=\"itemClick.emit()\" [rivTooltip]=\"iconTooltip\">\n  <i\n    *ngIf=\"visibility === 'visible'\"\n    [class.striped]=\"style === 'striped'\"\n    [style.background-color]=\"backgroundColor\"\n  ></i>\n  <riv-icon\n    *ngIf=\"visibility === 'hidden'\"\n    name=\"EyeOff\"\n    [size]=\"16\"\n  ></riv-icon>\n  <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n</button>\n<span [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\">\n  {{ label }}\n</span>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--size-small)}i{width:var(--size-large);height:var(--size-large)}i.striped{background-image:repeating-linear-gradient(315deg,transparent 0px,transparent 2.5px,var(--white-100) 2.5px,var(--white-100) 3.5px,transparent 3.5px,transparent 6px)}span{color:var(--type-light-low-contrast);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}button{display:inline-flex}riv-icon,span.low-contrast{color:var(--type-light-disabled)}\n"] }]
@@ -920,10 +941,10 @@ class MetricComponent {
     }
 }
 MetricComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MetricComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MetricComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MetricComponent, selector: "riv-metric", inputs: { label: "label", value: "value", card: "card" }, ngImport: i0, template: "<div *ngIf=\"card; else content\" class=\"card\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<ng-template #content>\n  <div class=\"label\">{{ label }}</div>\n  <div class=\"value\">{{ value }}</div>\n</ng-template>\n", styles: [".card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);padding:var(--size-xlarge)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+MetricComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MetricComponent, selector: "riv-metric", inputs: { label: "label", value: "value", card: "card" }, ngImport: i0, template: "<div *ngIf=\"card; else content\" class=\"card\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<ng-template #content>\n  <div class=\"label\">{{ label }}</div>\n  <div class=\"content\">\n    <div class=\"value\">{{ value }}</div>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);padding:var(--size-xlarge)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MetricComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-metric', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"card; else content\" class=\"card\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<ng-template #content>\n  <div class=\"label\">{{ label }}</div>\n  <div class=\"value\">{{ value }}</div>\n</ng-template>\n", styles: [".card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);padding:var(--size-xlarge)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}\n"] }]
+            args: [{ selector: 'riv-metric', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"card; else content\" class=\"card\">\n  <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n</div>\n<ng-template #content>\n  <div class=\"label\">{{ label }}</div>\n  <div class=\"content\">\n    <div class=\"value\">{{ value }}</div>\n    <ng-content></ng-content>\n  </div>\n</ng-template>\n", styles: [".card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);padding:var(--size-xlarge)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value{font-size:var(--type-6-font-size);line-height:var(--type-6-line-height-0);font-weight:var(--font-weight-heavy)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], value: [{
@@ -932,6 +953,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
+class TrendComponent {
+    constructor() {
+        this.label = '';
+        this.value = 0;
+        this.successCondition = 'positive';
+    }
+    getClasses() {
+        const conditionalClass = this.value === 0
+            ? ''
+            : this.successCondition === 'positive'
+                ? this.value > 0
+                    ? 'success'
+                    : 'danger'
+                : this.value < 0
+                    ? 'success'
+                    : 'danger';
+        return 'trend ' + conditionalClass;
+    }
+}
+TrendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TrendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TrendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TrendComponent, selector: "riv-trend", inputs: { label: "label", value: "value", successCondition: "successCondition" }, ngImport: i0, template: "<span [class]=\"getClasses()\">\n  <riv-icon\n    class=\"icon\"\n    [name]=\"\n      value === 0 ? 'ArrowRight' : value > 0 ? 'TrendingUp' : 'TrendingDown'\n    \"\n    [size]=\"16\"\n  ></riv-icon>\n  <span>{{ label }}</span>\n</span>\n", styles: [".success{color:var(--baja-blast-90)}.danger{color:var(--fyre-50)}.trend{display:flex;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-normal)}.icon{margin-right:var(--size-small)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TrendComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'riv-trend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"getClasses()\">\n  <riv-icon\n    class=\"icon\"\n    [name]=\"\n      value === 0 ? 'ArrowRight' : value > 0 ? 'TrendingUp' : 'TrendingDown'\n    \"\n    [size]=\"16\"\n  ></riv-icon>\n  <span>{{ label }}</span>\n</span>\n", styles: [".success{color:var(--baja-blast-90)}.danger{color:var(--fyre-50)}.trend{display:flex;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-normal)}.icon{margin-right:var(--size-small)}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], successCondition: [{
+                type: Input
+            }] } });
+
 function getDateRange$1(stacks) {
     let min = Infinity;
     let max = -Infinity;
@@ -1403,6 +1456,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         MetricComponent,
         NumberPipe,
         PercentagePipe,
+        TrendComponent,
         SmallCurrencyPipe,
         StackedColumnComponent,
         TextToggleComponent,
@@ -1423,6 +1477,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         MetricComponent,
         NumberPipe,
         PercentagePipe,
+        TrendComponent,
         SmallCurrencyPipe,
         StackedColumnComponent,
         TextToggleComponent,
@@ -1449,6 +1504,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         MetricComponent,
                         NumberPipe,
                         PercentagePipe,
+                        TrendComponent,
                         SmallCurrencyPipe,
                         StackedColumnComponent,
                         TextToggleComponent,
@@ -1472,6 +1528,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         MetricComponent,
                         NumberPipe,
                         PercentagePipe,
+                        TrendComponent,
                         SmallCurrencyPipe,
                         StackedColumnComponent,
                         TextToggleComponent,
@@ -1488,5 +1545,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CalloutComponent, CalloutDirective, CalloutOutletComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DaysPipe, DonutComponent, IconComponent, LegendItemComponent, MetricComponent, NumberPipe, PercentagePipe, RivModule, SmallCurrencyPipe, StackedColumnComponent, TextToggleComponent, TimeSeriesComponent, TooltipComponent, TooltipDirective, ZeroStateComponent };
+export { CalloutComponent, CalloutDirective, CalloutOutletComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DaysPipe, DonutComponent, IconComponent, LegendItemComponent, MetricComponent, NumberPipe, PercentagePipe, RivModule, SmallCurrencyPipe, StackedColumnComponent, TextToggleComponent, TimeSeriesComponent, TooltipAnchoredPositions, TooltipComponent, TooltipDirective, TrendComponent, ZeroStateComponent };
 //# sourceMappingURL=rivet-health-design-system.mjs.map