@rivet-health/design-system 2.4.0 → 2.6.0

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, HostBinding, Pipe, Injectable, EventEmitter, ViewChild, Output, Directive, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, HostBinding, Pipe, Injectable, EventEmitter, ViewChild, Output, Directive, HostListener, ViewContainerRef, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DecimalPipe, PercentPipe, CurrencyPipe, CommonModule } from '@angular/common';
 import { BehaviorSubject, combineLatest, map, shareReplay } from 'rxjs';
@@ -675,6 +675,128 @@ 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);
+    }
+    _onMouseEnter(evt) {
+        this.onMouseEnter.emit(evt);
+    }
+}
+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", 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]=\"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: [{
+                type: Output
+            }], _onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }], _onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }] } });
+function isTemplate(v) {
+    return typeof v !== 'string';
+}
+
+class TooltipDirective {
+    constructor(el, applicationRef) {
+        this.el = el;
+        this.applicationRef = applicationRef;
+        this.rivTooltipTheme = 'dark';
+        this.rivTooltipMaxWidth = 'calc(var(--base-grid-size) * 50)';
+        this.rivTooltipPreferredPosition = 'top-center';
+        this.closeDelay = 100;
+    }
+    onMouseEnter() {
+        if (!this.rivTooltip)
+            return;
+        if (this.tooltipRef) {
+            this.cancelClose();
+        }
+        else {
+            const tooltip = this.applicationRef.components[0].injector
+                .get(ViewContainerRef)
+                .createComponent(TooltipComponent);
+            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;
+        }
+    }
+    onMouseLeave() {
+        this.initiateClose();
+    }
+    initiateClose() {
+        this.closeTimeout = window.setTimeout(() => {
+            var _a;
+            (_a = this.tooltipRef) === null || _a === void 0 ? void 0 : _a.destroy();
+            this.tooltipRef = undefined;
+        }, this.closeDelay);
+    }
+    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", rivTooltipMaxWidth: "rivTooltipMaxWidth", rivTooltipPreferredPosition: "rivTooltipPreferredPosition", closeDelay: "closeDelay" }, 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: [{
+                    selector: '[rivTooltip]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ApplicationRef }]; }, propDecorators: { rivTooltip: [{
+                type: Input
+            }], rivTooltipTheme: [{
+                type: Input
+            }], rivTooltipMaxWidth: [{
+                type: Input
+            }], rivTooltipPreferredPosition: [{
+                type: Input
+            }], closeDelay: [{
+                type: Input
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
 class DataTableRowComponent {
     constructor() {
         this.subRow = false;
@@ -771,16 +893,18 @@ 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" }, 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\">{{ 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: "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", "closeDelay"] }, { 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\">{{ 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"] }]
+            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"] }]
         }], propDecorators: { displayLabel: [{
                 type: Input
             }], displayValue: [{
                 type: Input
             }], data: [{
                 type: Input
+            }], displayTooltip: [{
+                type: Input
             }] } });
 
 class LegendItemComponent {
@@ -796,10 +920,10 @@ 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" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button (click)=\"itemClick.emit()\">\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"] }], 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", "closeDelay"] }], 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()\">\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"] }]
+            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"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], colorToken: [{
@@ -808,6 +932,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], visibility: [{
                 type: Input
+            }], iconTooltip: [{
+                type: Input
             }], itemClick: [{
                 type: Output
             }] } });
@@ -1261,7 +1387,7 @@ class TimeSeriesComponent {
     }
 }
 TimeSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimeSeriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TimeSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TimeSeriesComponent, selector: "riv-time-series", inputs: { input: "input", width: "width", height: "height" }, ngImport: i0, template: "<div *ngIf=\"!(empty$ | async); else zeroState\" class=\"container\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    *ngIf=\"drawData$ | async; let d\"\n    [attr.viewBox]=\"d.viewBox\"\n  >\n    <g *ngFor=\"let tick of d.x.xMajorTicks\">\n      <rect\n        class=\"tick\"\n        [attr.x]=\"d.x.xScale(tick.value)\"\n        y=\"0\"\n        width=\"1\"\n        [attr.height]=\"d.y1.yScale(d.y1.yMin)\"\n      ></rect>\n      <text\n        class=\"x-major-tick-label\"\n        [attr.x]=\"d.x.xScale(tick.value)\"\n        [attr.y]=\"d.y1.yScale(d.y1.yMin)\"\n        dx=\"4\"\n        dy=\"-4\"\n      >\n        {{ tick.label }}\n      </text>\n    </g>\n    <g *ngFor=\"let tick of d.x.xMinorTicks\">\n      <text\n        class=\"x-minor-tick-label\"\n        [attr.x]=\"d.x.xScale(tick.value)\"\n        [attr.y]=\"d.y1.yScale(d.y1.yMin)\"\n        text-anchor=\"middle\"\n        dominant-baseline=\"hanging\"\n        dy=\"8\"\n      >\n        {{ tick.label }}\n        <title>{{ tick.value | date }}</title>\n      </text>\n    </g>\n    <g *ngFor=\"let tick of d.y1.yTicks\">\n      <rect\n        class=\"tick\"\n        x=\"0\"\n        [attr.y]=\"d.y1.yScale(tick)\"\n        width=\"100%\"\n        height=\"1\"\n      ></rect>\n      <text class=\"y-tick-label\" x=\"0\" [attr.y]=\"d.y1.yScale(tick)\" dy=\"-4\">\n        {{ d.y1.valueFormatter(tick) }}\n      </text>\n    </g>\n\n    <g *ngFor=\"let tick of d.y2?.yTicks\">\n      <text\n        class=\"y-tick-label\"\n        [attr.x]=\"d.x.xScale(d.x.xMax)\"\n        [attr.y]=\"d.y2?.yScale(tick)\"\n        text-anchor=\"end\"\n        dy=\"-4\"\n      >\n        {{ d.y2?.valueFormatter(tick) }}\n      </text>\n    </g>\n\n    <g *ngIf=\"hoveredMarker$ | async; let hoveredMarker\">\n      <line\n        class=\"hover-rule\"\n        [attr.x1]=\"hoveredMarker.marker.x\"\n        [attr.y1]=\"d.y1.yScale(d.y1.yMin)\"\n        [attr.x2]=\"hoveredMarker.marker.x\"\n        [attr.y2]=\"d.y1.yScale(d.y1.yMax)\"\n        stroke-width=\"2\"\n        stroke-dasharray=\"4\"\n      />\n    </g>\n\n    <ng-template #seriesTpl let-series=\"series\">\n      <path\n        class=\"data path\"\n        [class.marker-hovered]=\"!!(hoveredMarker$ | async)\"\n        [attr.d]=\"series.path\"\n        fill=\"none\"\n        stroke-width=\"2\"\n        [attr.stroke]=\"series.stroke\"\n        [attr.stroke-dasharray]=\"series.style === 'dashed' ? '4' : null\"\n      ></path>\n      <circle\n        *ngFor=\"let marker of series.markers\"\n        class=\"data marker\"\n        [class.focused]=\"(hoveredMarker$ | async)?.marker?.x === marker.x\"\n        [class.blurred]=\"\n          (hoveredMarker$ | async) !== null &&\n          (hoveredMarker$ | async)?.marker?.x !== marker.x\n        \"\n        [attr.cx]=\"marker.x\"\n        [attr.cy]=\"marker.y\"\n        r=\"3.5\"\n        stroke-width=\"2\"\n        [attr.stroke]=\"series.stroke\"\n        (mouseover)=\"hoveredMarker$.next({ event: $event, marker: marker })\"\n        (mouseleave)=\"hoveredMarker$.next(null)\"\n      ></circle>\n    </ng-template>\n    <g *ngFor=\"let series of d.y1.series\">\n      <ng-container\n        *ngTemplateOutlet=\"seriesTpl; context: { series: series }\"\n      ></ng-container>\n    </g>\n    <g *ngFor=\"let series of d.y2?.series\">\n      <ng-container\n        *ngTemplateOutlet=\"seriesTpl; context: { series: series }\"\n      ></ng-container>\n    </g>\n  </svg>\n  <legend>\n    <riv-legend-item\n      *ngFor=\"let item of legend$ | async\"\n      [label]=\"item.label\"\n      [colorToken]=\"item.colorToken\"\n    ></riv-legend-item>\n  </legend>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n  <riv-callout\n    *riv-callout\n    [anchor]=\"callout.anchor\"\n    [isModal]=\"false\"\n    [preferredPosition]=\"'top-center'\"\n  >\n    <div class=\"callout-content\">\n      <div class=\"callout-metric\" *ngFor=\"let metric of callout.metrics\">\n        <div>{{ metric.label }}</div>\n        <div class=\"callout-metric-value\">{{ metric.value }}</div>\n      </div>\n    </div>\n  </riv-callout>\n</ng-container>\n\n<ng-template #zeroState>\n  <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:flex;flex-direction:column;gap:var(--size-xlarge)}.y-tick-label,.x-major-tick-label{font-size:var(--type-0-font-size);line-height:var(--type-0-line-height-0);fill:var(--type-light-low-contrast)}.x-minor-tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast);text-anchor:middle}.tick{fill:var(--gray-20)}.data.path{transition:stroke-opacity var(--short-transition)}.data.path.marker-hovered{stroke-opacity:.4}.data.marker{fill:var(--surface-light-0);transition:stroke-opacity var(--short-transition)}.data.marker.focused{stroke-opacity:1;filter:drop-shadow(0 1px 1px rgba(10,2,22,.15))}.data.marker.blurred{stroke-opacity:.4}.hover-rule{stroke:var(--gray-20)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.callout-content{padding:var(--size-large);display:flex;gap:var(--size-medium)}.callout-metric{display:flex;flex-direction:column;gap:var(--size-xsmall);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-metric-value{font-weight:var(--font-weight-heavy)}\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: 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"] }, { kind: "directive", type: CalloutDirective, selector: "[riv-callout]" }, { kind: "component", type: LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility"], outputs: ["itemClick"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+TimeSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TimeSeriesComponent, selector: "riv-time-series", inputs: { input: "input", width: "width", height: "height" }, ngImport: i0, template: "<div *ngIf=\"!(empty$ | async); else zeroState\" class=\"container\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    *ngIf=\"drawData$ | async; let d\"\n    [attr.viewBox]=\"d.viewBox\"\n  >\n    <g *ngFor=\"let tick of d.x.xMajorTicks\">\n      <rect\n        class=\"tick\"\n        [attr.x]=\"d.x.xScale(tick.value)\"\n        y=\"0\"\n        width=\"1\"\n        [attr.height]=\"d.y1.yScale(d.y1.yMin)\"\n      ></rect>\n      <text\n        class=\"x-major-tick-label\"\n        [attr.x]=\"d.x.xScale(tick.value)\"\n        [attr.y]=\"d.y1.yScale(d.y1.yMin)\"\n        dx=\"4\"\n        dy=\"-4\"\n      >\n        {{ tick.label }}\n      </text>\n    </g>\n    <g *ngFor=\"let tick of d.x.xMinorTicks\">\n      <text\n        class=\"x-minor-tick-label\"\n        [attr.x]=\"d.x.xScale(tick.value)\"\n        [attr.y]=\"d.y1.yScale(d.y1.yMin)\"\n        text-anchor=\"middle\"\n        dominant-baseline=\"hanging\"\n        dy=\"8\"\n      >\n        {{ tick.label }}\n        <title>{{ tick.value | date }}</title>\n      </text>\n    </g>\n    <g *ngFor=\"let tick of d.y1.yTicks\">\n      <rect\n        class=\"tick\"\n        x=\"0\"\n        [attr.y]=\"d.y1.yScale(tick)\"\n        width=\"100%\"\n        height=\"1\"\n      ></rect>\n      <text class=\"y-tick-label\" x=\"0\" [attr.y]=\"d.y1.yScale(tick)\" dy=\"-4\">\n        {{ d.y1.valueFormatter(tick) }}\n      </text>\n    </g>\n\n    <g *ngFor=\"let tick of d.y2?.yTicks\">\n      <text\n        class=\"y-tick-label\"\n        [attr.x]=\"d.x.xScale(d.x.xMax)\"\n        [attr.y]=\"d.y2?.yScale(tick)\"\n        text-anchor=\"end\"\n        dy=\"-4\"\n      >\n        {{ d.y2?.valueFormatter(tick) }}\n      </text>\n    </g>\n\n    <g *ngIf=\"hoveredMarker$ | async; let hoveredMarker\">\n      <line\n        class=\"hover-rule\"\n        [attr.x1]=\"hoveredMarker.marker.x\"\n        [attr.y1]=\"d.y1.yScale(d.y1.yMin)\"\n        [attr.x2]=\"hoveredMarker.marker.x\"\n        [attr.y2]=\"d.y1.yScale(d.y1.yMax)\"\n        stroke-width=\"2\"\n        stroke-dasharray=\"4\"\n      />\n    </g>\n\n    <ng-template #seriesTpl let-series=\"series\">\n      <path\n        class=\"data path\"\n        [class.marker-hovered]=\"!!(hoveredMarker$ | async)\"\n        [attr.d]=\"series.path\"\n        fill=\"none\"\n        stroke-width=\"2\"\n        [attr.stroke]=\"series.stroke\"\n        [attr.stroke-dasharray]=\"series.style === 'dashed' ? '4' : null\"\n      ></path>\n      <circle\n        *ngFor=\"let marker of series.markers\"\n        class=\"data marker\"\n        [class.focused]=\"(hoveredMarker$ | async)?.marker?.x === marker.x\"\n        [class.blurred]=\"\n          (hoveredMarker$ | async) !== null &&\n          (hoveredMarker$ | async)?.marker?.x !== marker.x\n        \"\n        [attr.cx]=\"marker.x\"\n        [attr.cy]=\"marker.y\"\n        r=\"3.5\"\n        stroke-width=\"2\"\n        [attr.stroke]=\"series.stroke\"\n        (mouseover)=\"hoveredMarker$.next({ event: $event, marker: marker })\"\n        (mouseleave)=\"hoveredMarker$.next(null)\"\n      ></circle>\n    </ng-template>\n    <g *ngFor=\"let series of d.y1.series\">\n      <ng-container\n        *ngTemplateOutlet=\"seriesTpl; context: { series: series }\"\n      ></ng-container>\n    </g>\n    <g *ngFor=\"let series of d.y2?.series\">\n      <ng-container\n        *ngTemplateOutlet=\"seriesTpl; context: { series: series }\"\n      ></ng-container>\n    </g>\n  </svg>\n  <legend>\n    <riv-legend-item\n      *ngFor=\"let item of legend$ | async\"\n      [label]=\"item.label\"\n      [colorToken]=\"item.colorToken\"\n    ></riv-legend-item>\n  </legend>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n  <riv-callout\n    *riv-callout\n    [anchor]=\"callout.anchor\"\n    [isModal]=\"false\"\n    [preferredPosition]=\"'top-center'\"\n  >\n    <div class=\"callout-content\">\n      <div class=\"callout-metric\" *ngFor=\"let metric of callout.metrics\">\n        <div>{{ metric.label }}</div>\n        <div class=\"callout-metric-value\">{{ metric.value }}</div>\n      </div>\n    </div>\n  </riv-callout>\n</ng-container>\n\n<ng-template #zeroState>\n  <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:flex;flex-direction:column;gap:var(--size-xlarge)}.y-tick-label,.x-major-tick-label{font-size:var(--type-0-font-size);line-height:var(--type-0-line-height-0);fill:var(--type-light-low-contrast)}.x-minor-tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast);text-anchor:middle}.tick{fill:var(--gray-20)}.data.path{transition:stroke-opacity var(--short-transition)}.data.path.marker-hovered{stroke-opacity:.4}.data.marker{fill:var(--surface-light-0);transition:stroke-opacity var(--short-transition)}.data.marker.focused{stroke-opacity:1;filter:drop-shadow(0 1px 1px rgba(10,2,22,.15))}.data.marker.blurred{stroke-opacity:.4}.hover-rule{stroke:var(--gray-20)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.callout-content{padding:var(--size-large);display:flex;gap:var(--size-medium)}.callout-metric{display:flex;flex-direction:column;gap:var(--size-xsmall);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-metric-value{font-weight:var(--font-weight-heavy)}\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: 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"] }, { kind: "directive", type: CalloutDirective, selector: "[riv-callout]" }, { kind: "component", type: LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip"], outputs: ["itemClick"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TimeSeriesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-time-series', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!(empty$ | async); else zeroState\" class=\"container\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    *ngIf=\"drawData$ | async; let d\"\n    [attr.viewBox]=\"d.viewBox\"\n  >\n    <g *ngFor=\"let tick of d.x.xMajorTicks\">\n      <rect\n        class=\"tick\"\n        [attr.x]=\"d.x.xScale(tick.value)\"\n        y=\"0\"\n        width=\"1\"\n        [attr.height]=\"d.y1.yScale(d.y1.yMin)\"\n      ></rect>\n      <text\n        class=\"x-major-tick-label\"\n        [attr.x]=\"d.x.xScale(tick.value)\"\n        [attr.y]=\"d.y1.yScale(d.y1.yMin)\"\n        dx=\"4\"\n        dy=\"-4\"\n      >\n        {{ tick.label }}\n      </text>\n    </g>\n    <g *ngFor=\"let tick of d.x.xMinorTicks\">\n      <text\n        class=\"x-minor-tick-label\"\n        [attr.x]=\"d.x.xScale(tick.value)\"\n        [attr.y]=\"d.y1.yScale(d.y1.yMin)\"\n        text-anchor=\"middle\"\n        dominant-baseline=\"hanging\"\n        dy=\"8\"\n      >\n        {{ tick.label }}\n        <title>{{ tick.value | date }}</title>\n      </text>\n    </g>\n    <g *ngFor=\"let tick of d.y1.yTicks\">\n      <rect\n        class=\"tick\"\n        x=\"0\"\n        [attr.y]=\"d.y1.yScale(tick)\"\n        width=\"100%\"\n        height=\"1\"\n      ></rect>\n      <text class=\"y-tick-label\" x=\"0\" [attr.y]=\"d.y1.yScale(tick)\" dy=\"-4\">\n        {{ d.y1.valueFormatter(tick) }}\n      </text>\n    </g>\n\n    <g *ngFor=\"let tick of d.y2?.yTicks\">\n      <text\n        class=\"y-tick-label\"\n        [attr.x]=\"d.x.xScale(d.x.xMax)\"\n        [attr.y]=\"d.y2?.yScale(tick)\"\n        text-anchor=\"end\"\n        dy=\"-4\"\n      >\n        {{ d.y2?.valueFormatter(tick) }}\n      </text>\n    </g>\n\n    <g *ngIf=\"hoveredMarker$ | async; let hoveredMarker\">\n      <line\n        class=\"hover-rule\"\n        [attr.x1]=\"hoveredMarker.marker.x\"\n        [attr.y1]=\"d.y1.yScale(d.y1.yMin)\"\n        [attr.x2]=\"hoveredMarker.marker.x\"\n        [attr.y2]=\"d.y1.yScale(d.y1.yMax)\"\n        stroke-width=\"2\"\n        stroke-dasharray=\"4\"\n      />\n    </g>\n\n    <ng-template #seriesTpl let-series=\"series\">\n      <path\n        class=\"data path\"\n        [class.marker-hovered]=\"!!(hoveredMarker$ | async)\"\n        [attr.d]=\"series.path\"\n        fill=\"none\"\n        stroke-width=\"2\"\n        [attr.stroke]=\"series.stroke\"\n        [attr.stroke-dasharray]=\"series.style === 'dashed' ? '4' : null\"\n      ></path>\n      <circle\n        *ngFor=\"let marker of series.markers\"\n        class=\"data marker\"\n        [class.focused]=\"(hoveredMarker$ | async)?.marker?.x === marker.x\"\n        [class.blurred]=\"\n          (hoveredMarker$ | async) !== null &&\n          (hoveredMarker$ | async)?.marker?.x !== marker.x\n        \"\n        [attr.cx]=\"marker.x\"\n        [attr.cy]=\"marker.y\"\n        r=\"3.5\"\n        stroke-width=\"2\"\n        [attr.stroke]=\"series.stroke\"\n        (mouseover)=\"hoveredMarker$.next({ event: $event, marker: marker })\"\n        (mouseleave)=\"hoveredMarker$.next(null)\"\n      ></circle>\n    </ng-template>\n    <g *ngFor=\"let series of d.y1.series\">\n      <ng-container\n        *ngTemplateOutlet=\"seriesTpl; context: { series: series }\"\n      ></ng-container>\n    </g>\n    <g *ngFor=\"let series of d.y2?.series\">\n      <ng-container\n        *ngTemplateOutlet=\"seriesTpl; context: { series: series }\"\n      ></ng-container>\n    </g>\n  </svg>\n  <legend>\n    <riv-legend-item\n      *ngFor=\"let item of legend$ | async\"\n      [label]=\"item.label\"\n      [colorToken]=\"item.colorToken\"\n    ></riv-legend-item>\n  </legend>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n  <riv-callout\n    *riv-callout\n    [anchor]=\"callout.anchor\"\n    [isModal]=\"false\"\n    [preferredPosition]=\"'top-center'\"\n  >\n    <div class=\"callout-content\">\n      <div class=\"callout-metric\" *ngFor=\"let metric of callout.metrics\">\n        <div>{{ metric.label }}</div>\n        <div class=\"callout-metric-value\">{{ metric.value }}</div>\n      </div>\n    </div>\n  </riv-callout>\n</ng-container>\n\n<ng-template #zeroState>\n  <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:flex;flex-direction:column;gap:var(--size-xlarge)}.y-tick-label,.x-major-tick-label{font-size:var(--type-0-font-size);line-height:var(--type-0-line-height-0);fill:var(--type-light-low-contrast)}.x-minor-tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast);text-anchor:middle}.tick{fill:var(--gray-20)}.data.path{transition:stroke-opacity var(--short-transition)}.data.path.marker-hovered{stroke-opacity:.4}.data.marker{fill:var(--surface-light-0);transition:stroke-opacity var(--short-transition)}.data.marker.focused{stroke-opacity:1;filter:drop-shadow(0 1px 1px rgba(10,2,22,.15))}.data.marker.blurred{stroke-opacity:.4}.hover-rule{stroke:var(--gray-20)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.callout-content{padding:var(--size-large);display:flex;gap:var(--size-medium)}.callout-metric{display:flex;flex-direction:column;gap:var(--size-xsmall);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-metric-value{font-weight:var(--font-weight-heavy)}\n"] }]
@@ -1294,6 +1420,8 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         StackedColumnComponent,
         TextToggleComponent,
         TimeSeriesComponent,
+        TooltipComponent,
+        TooltipDirective,
         ZeroStateComponent], imports: [CommonModule], exports: [CalloutComponent,
         CalloutDirective,
         CalloutOutletComponent,
@@ -1312,6 +1440,8 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         StackedColumnComponent,
         TextToggleComponent,
         TimeSeriesComponent,
+        TooltipComponent,
+        TooltipDirective,
         ZeroStateComponent] });
 RivModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RivModule, imports: [CommonModule] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RivModule, decorators: [{
@@ -1336,6 +1466,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         StackedColumnComponent,
                         TextToggleComponent,
                         TimeSeriesComponent,
+                        TooltipComponent,
+                        TooltipDirective,
                         ZeroStateComponent,
                     ],
                     exports: [
@@ -1357,6 +1489,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         StackedColumnComponent,
                         TextToggleComponent,
                         TimeSeriesComponent,
+                        TooltipComponent,
+                        TooltipDirective,
                         ZeroStateComponent,
                     ],
                     imports: [CommonModule],
@@ -1367,5 +1501,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, ZeroStateComponent };
+export { CalloutComponent, CalloutDirective, CalloutOutletComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DaysPipe, DonutComponent, IconComponent, LegendItemComponent, MetricComponent, NumberPipe, PercentagePipe, RivModule, SmallCurrencyPipe, StackedColumnComponent, TextToggleComponent, TimeSeriesComponent, TooltipAnchoredPositions, TooltipComponent, TooltipDirective, ZeroStateComponent };
 //# sourceMappingURL=rivet-health-design-system.mjs.map