@rivet-health/design-system 2.3.0 → 2.4.0

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

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, HostBinding, Injectable, EventEmitter, ViewChild, Output, Directive, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, HostBinding, Pipe, Injectable, EventEmitter, ViewChild, Output, Directive, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
-import { DecimalPipe, CommonModule } from '@angular/common';
-import { BehaviorSubject, map, shareReplay, combineLatest } from 'rxjs';
-import { pie, arc, line, stack } from 'd3-shape';
-import { scaleLinear, scaleBand } from 'd3-scale';
-import { timeYear, timeMonth, timeWeek, timeDay } from 'd3-time';
-import { timeFormat } from 'd3-time-format';
+import { DecimalPipe, PercentPipe, CurrencyPipe, CommonModule } from '@angular/common';
+import { BehaviorSubject, combineLatest, map, shareReplay } from 'rxjs';
+import { pie, arc, stack, line } from 'd3-shape';
 import { index } from 'd3-array';
+import { scaleBand, scaleLinear } from 'd3-scale';
+import { timeMonth, timeYear, timeWeek, timeDay } from 'd3-time';
+import { timeFormat } from 'd3-time-format';
 
 /**
  * DOM cache that clones existing elements if available.
@@ -362,6 +362,87 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
+class DaysPipe {
+    constructor() {
+        this.inner = new DecimalPipe('en-us');
+    }
+    transform(value, digitsInfo) {
+        const ret = this.inner.transform(value, digitsInfo !== null && digitsInfo !== void 0 ? digitsInfo : '1.0-2');
+        return ret ? ret + (value === 1 ? ' day' : ' days') : '-';
+    }
+}
+DaysPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DaysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DaysPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: DaysPipe, name: "rivDays" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DaysPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'rivDays' }]
+        }] });
+
+class NumberPipe {
+    constructor() {
+        this.inner = new DecimalPipe('en-us');
+    }
+    transform(value, digitsInfo) {
+        var _a;
+        return (_a = this.inner.transform(value, digitsInfo !== null && digitsInfo !== void 0 ? digitsInfo : '1.0-0')) !== null && _a !== void 0 ? _a : '-';
+    }
+}
+NumberPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+NumberPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NumberPipe, name: "rivNumber" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'rivNumber' }]
+        }] });
+
+class PercentagePipe {
+    constructor() {
+        this.inner = new PercentPipe('en-us');
+    }
+    transform(value, digitsInfo) {
+        var _a;
+        return (_a = this.inner.transform(value, digitsInfo !== null && digitsInfo !== void 0 ? digitsInfo : '1.1-1')) !== null && _a !== void 0 ? _a : '-';
+    }
+}
+PercentagePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PercentagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+PercentagePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PercentagePipe, name: "rivPercentage" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PercentagePipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'rivPercentage' }]
+        }] });
+
+class SmallCurrencyPipe {
+    constructor() {
+        this.inner = new CurrencyPipe('en-us');
+    }
+    transform(value, digitsInfo) {
+        var _a, _b, _c, _d, _e;
+        if (value === null) {
+            return '-';
+        }
+        const num = typeof value == 'string' ? Number.parseFloat(value) : value;
+        const magnitude = Math.log10(Math.abs(num));
+        if (num === 0) {
+            return ((_a = this.inner.transform(num, undefined, undefined, digitsInfo !== null && digitsInfo !== void 0 ? digitsInfo : '1.0-0')) !== null && _a !== void 0 ? _a : '-');
+        }
+        if (magnitude >= 9) {
+            return (((_b = this.inner.transform(num / 1000000000, undefined, undefined, (digitsInfo !== null && digitsInfo !== void 0 ? digitsInfo : num / 1000000000 >= 100) ? '1.0-0' : '1.0-2')) !== null && _b !== void 0 ? _b : '-') + 'B');
+        }
+        if (magnitude >= 6) {
+            return (((_c = this.inner.transform(num / 1000000, undefined, undefined, (digitsInfo !== null && digitsInfo !== void 0 ? digitsInfo : num / 1000000 >= 100) ? '1.0-0' : '1.0-2')) !== null && _c !== void 0 ? _c : '-') + 'M');
+        }
+        if (magnitude >= 3) {
+            return (((_d = this.inner.transform(num / 1000, undefined, undefined, (digitsInfo !== null && digitsInfo !== void 0 ? digitsInfo : num / 1000 >= 100) ? '1.0-0' : '1.0-2')) !== null && _d !== void 0 ? _d : '-') + 'K');
+        }
+        return ((_e = this.inner.transform(num, undefined, undefined, (digitsInfo !== null && digitsInfo !== void 0 ? digitsInfo : num >= 100) ? '1.0-0' : '1.0-2')) !== null && _e !== void 0 ? _e : '-');
+    }
+}
+SmallCurrencyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmallCurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SmallCurrencyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SmallCurrencyPipe, name: "rivSmallCurrency" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmallCurrencyPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'rivSmallCurrency' }]
+        }] });
+
 class CalloutService {
     constructor() {
         this.calloutStack$ = new BehaviorSubject([]);
@@ -594,6 +675,60 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: CalloutService }]; } });
 
+class DataTableRowComponent {
+    constructor() {
+        this.subRow = false;
+    }
+}
+DataTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DataTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableRowComponent, selector: "[riv-data-table-row]", inputs: { subRow: "subRow" }, host: { properties: { "class.sub-row": "this.subRow" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host:not(.sub-row){border-top:var(--border-width) solid var(--border-light)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableRowComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-row]', template: '<ng-content></ng-content>', styles: [":host:not(.sub-row){border-top:var(--border-width) solid var(--border-light)}\n"] }]
+        }], propDecorators: { subRow: [{
+                type: Input
+            }, {
+                type: HostBinding,
+                args: ['class.sub-row']
+            }] } });
+
+class DataTableCellComponent {
+    constructor(row) {
+        this.row = row;
+        this.subCell = false;
+    }
+    ngOnInit() {
+        this.subCell = this.row.subRow;
+    }
+}
+DataTableCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableCellComponent, deps: [{ token: DataTableRowComponent }], target: i0.ɵɵFactoryTarget.Component });
+DataTableCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableCellComponent, selector: "[riv-data-table-cell]", host: { properties: { "class.sub-cell": "this.subCell" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:var(--size-large) 0;text-align:right}:host.sub-cell{padding-top:0;padding-left:var(--size-xlarge)}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableCellComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-cell]', template: '<ng-content></ng-content>', styles: [":host{padding:var(--size-large) 0;text-align:right}:host.sub-cell{padding-top:0;padding-left:var(--size-xlarge)}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"] }]
+        }], ctorParameters: function () { return [{ type: DataTableRowComponent }]; }, propDecorators: { subCell: [{
+                type: HostBinding,
+                args: ['class.sub-cell']
+            }] } });
+
+class DataTableComponent {
+}
+DataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableComponent, selector: "riv-data-table", ngImport: i0, template: '<table><ng-content></ng-content></table>', isInline: true, styles: [":host{display:block;overflow-x:auto}table{table-layout:fixed;min-width:100%;border-collapse:collapse}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'riv-data-table', template: '<table><ng-content></ng-content></table>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;overflow-x:auto}table{table-layout:fixed;min-width:100%;border-collapse:collapse}\n"] }]
+        }] });
+
+class DataTableHeaderCellComponent {
+}
+DataTableHeaderCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DataTableHeaderCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableHeaderCellComponent, selector: "[riv-data-table-header-cell]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:var(--size-large) 0;font-weight:var(--font-weight-heavy);text-align:right}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableHeaderCellComponent, decorators: [{
+            type: Component,
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-header-cell]', template: '<ng-content></ng-content>', styles: [":host{padding:var(--size-large) 0;font-weight:var(--font-weight-heavy);text-align:right}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"] }]
+        }] });
+
 class ZeroStateComponent {
     constructor() {
         this.message = 'No data to display.';
@@ -697,6 +832,181 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
+function getDateRange$1(stacks) {
+    let min = Infinity;
+    let max = -Infinity;
+    for (const stack of stacks) {
+        for (const series of stack) {
+            for (const { date } of series.data) {
+                const value = date.valueOf();
+                min = Math.min(min, value);
+                max = Math.max(max, value);
+            }
+        }
+    }
+    return [new Date(min), new Date(max)];
+}
+// TODO: once we upgrade to Angular 16, this component can be cleaned up with
+// signals instead of RxJS.
+class StackedColumnComponent {
+    constructor() {
+        this.input$ = new BehaviorSubject([]);
+        this.width$ = new BehaviorSubject(960);
+        this.height$ = new BehaviorSubject(256);
+        this.valueFormatter = v => v.toString();
+        this.drawData$ = combineLatest([
+            this.input$,
+            this.width$,
+            this.height$,
+        ]).pipe(map(([input, width, height]) => {
+            const viewBox = `0 0 ${width} ${height}`;
+            const padding = 8;
+            const [minDate, maxDate] = getDateRange$1(input);
+            const xSteps = timeMonth.range(timeMonth.floor(minDate), timeMonth.floor(timeMonth.offset(maxDate, 1)));
+            const xFormatter = timeFormat('%b');
+            const xOuterScale = scaleBand()
+                .domain(xSteps.map(date => xFormatter(date)))
+                .range([0, width]);
+            const columnWidth = 6;
+            const columnPadding = 4;
+            const outerPadding = (xOuterScale.bandwidth() -
+                (columnPadding * (input.length - 1) + columnWidth * input.length)) /
+                2;
+            const renderInformation = input.map(stackData => {
+                const stackedTable = stackData.reduce((table, s) => [
+                    ...table,
+                    ...s.data.map(point => (Object.assign(Object.assign({}, point), { series: s }))),
+                ], []);
+                const indexedTable = index(stackedTable, d => d.date, d => d.series.label);
+                const stacked = stack()
+                    .keys(stackData.map(v => v.label))
+                    .value(([_, group], key) => {
+                    return group.get(key).value;
+                })(indexedTable);
+                return { indexedTable, stacked };
+            });
+            let domainMax = 0;
+            renderInformation.forEach(({ stacked, indexedTable }) => {
+                [...indexedTable.values()].forEach((pointMap, i) => {
+                    [...pointMap.values()].forEach((_, j) => {
+                        domainMax = Math.max(domainMax, ...stacked[j][i]);
+                    });
+                });
+            });
+            const yScale = scaleLinear()
+                .domain([0, domainMax])
+                .range([height - padding * 2, padding]);
+            const rects = [];
+            renderInformation.forEach(({ stacked, indexedTable }, index) => {
+                [...indexedTable.entries()].forEach(([date, pointMap], i) => {
+                    [...pointMap.entries()].forEach(([_, seriesPoint], j) => {
+                        var _a;
+                        const [baseline, topline] = stacked[j][i];
+                        const width = columnWidth;
+                        const height = yScale(baseline) - yScale(topline);
+                        const x = ((_a = xOuterScale(xFormatter(date))) !== null && _a !== void 0 ? _a : 0) +
+                            outerPadding +
+                            columnWidth * index +
+                            columnPadding * index;
+                        const y = yScale(baseline) - height;
+                        const fill = `var(${seriesPoint.series.colorToken})`;
+                        rects.push({
+                            dateValue: date.valueOf(),
+                            x,
+                            y,
+                            width,
+                            height,
+                            fill,
+                            striped: seriesPoint.series.style === 'striped',
+                            seriesPoint,
+                        });
+                    });
+                });
+            });
+            const xTicks = xSteps.map(date => {
+                var _a;
+                return ({
+                    dateValue: date.valueOf(),
+                    label: xFormatter(date),
+                    x: ((_a = xOuterScale(xFormatter(date))) !== null && _a !== void 0 ? _a : 0) + xOuterScale.bandwidth() / 2,
+                });
+            });
+            const yTicks = yScale.ticks(5);
+            const hoverBandWidth = renderInformation.length * columnWidth +
+                (renderInformation.length + 1) * columnPadding;
+            const hoverBands = xSteps.map(date => {
+                var _a;
+                return ({
+                    dateValue: date.valueOf(),
+                    x: ((_a = xOuterScale(xFormatter(date))) !== null && _a !== void 0 ? _a : 0) +
+                        (xOuterScale.bandwidth() - hoverBandWidth) / 2,
+                    y: yScale(domainMax),
+                    width: hoverBandWidth,
+                    height: yScale(0) - yScale(domainMax),
+                });
+            });
+            return {
+                columnWidth,
+                hoverBands,
+                rects,
+                viewBox,
+                xTicks,
+                yScale,
+                yTicks,
+            };
+        }), shareReplay({ refCount: true, bufferSize: 1 }));
+        this.empty$ = this.input$.pipe(map(input => input.every(stack => stack.every(series => series.data.length === 0))), shareReplay({ refCount: true, bufferSize: 1 }));
+        this.hoveredBand$ = new BehaviorSubject(null);
+        this.callout$ = combineLatest([this.hoveredBand$, this.drawData$]).pipe(map(([hoveredBand, drawData]) => {
+            if (!hoveredBand)
+                return null;
+            const { target } = hoveredBand.event;
+            if (!target)
+                return null;
+            const anchor = target.getBoundingClientRect();
+            const metrics = drawData.rects
+                .filter(rect => rect.dateValue === hoveredBand.dateValue)
+                .map(rect => ({
+                label: rect.seriesPoint.series.label,
+                value: this.valueFormatter(rect.seriesPoint.value),
+            }));
+            return { anchor, metrics };
+        }), shareReplay({ refCount: true, bufferSize: 1 }));
+    }
+    set input(v) {
+        this.input$.next(v);
+    }
+    get input() {
+        return this.input$.getValue();
+    }
+    set width(v) {
+        this.width$.next(v);
+    }
+    get width() {
+        return this.width$.getValue();
+    }
+    set height(v) {
+        this.height$.next(v);
+    }
+    get height() {
+        return this.height$.getValue();
+    }
+}
+StackedColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StackedColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StackedColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: StackedColumnComponent, selector: "riv-stacked-column", inputs: { input: "input", width: "width", height: "height", valueFormatter: "valueFormatter" }, 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    <defs>\n      <pattern\n        id=\"stripes\"\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"d.columnWidth\"\n        [attr.height]=\"d.columnWidth\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <line\n          x1=\"0\"\n          [attr.y1]=\"d.columnWidth\"\n          [attr.x2]=\"d.columnWidth\"\n          y2=\"0\"\n          stroke=\"var(--white-100)\"\n          stroke-width=\"1\"\n        ></line>\n      </pattern>\n    </defs>\n    <g *ngFor=\"let tick of d.xTicks\">\n      <rect\n        class=\"tick-background\"\n        [class.focused]=\"(hoveredBand$ | async)?.dateValue === tick.dateValue\"\n        [attr.x]=\"tick.x - 20\"\n        [attr.y]=\"d.yScale(0) + 3\"\n        width=\"40\"\n        height=\"12\"\n        rx=\"2\"\n      ></rect>\n      <text\n        class=\"tick-label\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"d.yScale(0) + 12\"\n        text-anchor=\"middle\"\n      >\n        {{ tick.label }}\n      </text>\n    </g>\n    <g *ngFor=\"let tick of d.yTicks\">\n      <rect\n        class=\"tick\"\n        x=\"0\"\n        [attr.y]=\"d.yScale(tick)\"\n        width=\"100%\"\n        height=\"1\"\n      ></rect>\n      <text class=\"tick-label\" x=\"0\" [attr.y]=\"d.yScale(tick)\" dy=\"-4\">\n        {{ valueFormatter(tick) }}\n      </text>\n    </g>\n    <g *ngFor=\"let rect of d.rects\">\n      <rect\n        class=\"column\"\n        [attr.x]=\"rect.x\"\n        [attr.y]=\"rect.y\"\n        [attr.width]=\"rect.width\"\n        [attr.height]=\"rect.height\"\n        [attr.fill]=\"rect.fill\"\n        [class.blurred]=\"\n          (hoveredBand$ | async) !== null &&\n          (hoveredBand$ | async)?.dateValue !== rect.dateValue\n        \"\n      ></rect>\n      <rect\n        *ngIf=\"rect.striped\"\n        [attr.x]=\"rect.x\"\n        [attr.y]=\"rect.y\"\n        [attr.width]=\"rect.width\"\n        [attr.height]=\"rect.height\"\n        fill=\"url(#stripes)\"\n      ></rect>\n    </g>\n    <rect\n      *ngFor=\"let rect of d.hoverBands\"\n      [attr.x]=\"rect.x\"\n      [attr.y]=\"rect.y\"\n      [attr.width]=\"rect.width\"\n      [attr.height]=\"rect.height\"\n      fill=\"transparent\"\n      (mouseenter)=\"\n        hoveredBand$.next({ dateValue: rect.dateValue, event: $event })\n      \"\n      (mouseleave)=\"hoveredBand$.next(null)\"\n    ></rect>\n  </svg>\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]=\"'center-right'\"\n    [allowedPositions]=\"[\n      'center-right',\n      'center-left',\n      'top-center',\n      'bottom-center'\n    ]\"\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: [".tick{fill:var(--gray-20)}.tick-label{font-size:var(--type-0-font-size);line-height:var(--type-0-line-height-0);fill:var(--type-light-low-contrast)}.tick-background{transition:fill var(--short-transition);fill:transparent}.tick-background.focused{fill:var(--baloo-10)}.column{transition:opacity var(--short-transition)}.column.blurred{opacity:.4}.callout-content{padding:var(--size-large);display:grid;gap:var(--size-medium);grid-template-columns:1fr 1fr}.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: "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: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StackedColumnComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'riv-stacked-column', 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    <defs>\n      <pattern\n        id=\"stripes\"\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"d.columnWidth\"\n        [attr.height]=\"d.columnWidth\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <line\n          x1=\"0\"\n          [attr.y1]=\"d.columnWidth\"\n          [attr.x2]=\"d.columnWidth\"\n          y2=\"0\"\n          stroke=\"var(--white-100)\"\n          stroke-width=\"1\"\n        ></line>\n      </pattern>\n    </defs>\n    <g *ngFor=\"let tick of d.xTicks\">\n      <rect\n        class=\"tick-background\"\n        [class.focused]=\"(hoveredBand$ | async)?.dateValue === tick.dateValue\"\n        [attr.x]=\"tick.x - 20\"\n        [attr.y]=\"d.yScale(0) + 3\"\n        width=\"40\"\n        height=\"12\"\n        rx=\"2\"\n      ></rect>\n      <text\n        class=\"tick-label\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"d.yScale(0) + 12\"\n        text-anchor=\"middle\"\n      >\n        {{ tick.label }}\n      </text>\n    </g>\n    <g *ngFor=\"let tick of d.yTicks\">\n      <rect\n        class=\"tick\"\n        x=\"0\"\n        [attr.y]=\"d.yScale(tick)\"\n        width=\"100%\"\n        height=\"1\"\n      ></rect>\n      <text class=\"tick-label\" x=\"0\" [attr.y]=\"d.yScale(tick)\" dy=\"-4\">\n        {{ valueFormatter(tick) }}\n      </text>\n    </g>\n    <g *ngFor=\"let rect of d.rects\">\n      <rect\n        class=\"column\"\n        [attr.x]=\"rect.x\"\n        [attr.y]=\"rect.y\"\n        [attr.width]=\"rect.width\"\n        [attr.height]=\"rect.height\"\n        [attr.fill]=\"rect.fill\"\n        [class.blurred]=\"\n          (hoveredBand$ | async) !== null &&\n          (hoveredBand$ | async)?.dateValue !== rect.dateValue\n        \"\n      ></rect>\n      <rect\n        *ngIf=\"rect.striped\"\n        [attr.x]=\"rect.x\"\n        [attr.y]=\"rect.y\"\n        [attr.width]=\"rect.width\"\n        [attr.height]=\"rect.height\"\n        fill=\"url(#stripes)\"\n      ></rect>\n    </g>\n    <rect\n      *ngFor=\"let rect of d.hoverBands\"\n      [attr.x]=\"rect.x\"\n      [attr.y]=\"rect.y\"\n      [attr.width]=\"rect.width\"\n      [attr.height]=\"rect.height\"\n      fill=\"transparent\"\n      (mouseenter)=\"\n        hoveredBand$.next({ dateValue: rect.dateValue, event: $event })\n      \"\n      (mouseleave)=\"hoveredBand$.next(null)\"\n    ></rect>\n  </svg>\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]=\"'center-right'\"\n    [allowedPositions]=\"[\n      'center-right',\n      'center-left',\n      'top-center',\n      'bottom-center'\n    ]\"\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: [".tick{fill:var(--gray-20)}.tick-label{font-size:var(--type-0-font-size);line-height:var(--type-0-line-height-0);fill:var(--type-light-low-contrast)}.tick-background{transition:fill var(--short-transition);fill:transparent}.tick-background.focused{fill:var(--baloo-10)}.column{transition:opacity var(--short-transition)}.column.blurred{opacity:.4}.callout-content{padding:var(--size-large);display:grid;gap:var(--size-medium);grid-template-columns:1fr 1fr}.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"] }]
+        }], propDecorators: { input: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], height: [{
+                type: Input
+            }], valueFormatter: [{
+                type: Input
+            }] } });
+
 var Interval;
 (function (Interval) {
     Interval["DAY"] = "day";
@@ -716,7 +1026,7 @@ function getTimeInterval(interval) {
             return timeYear;
     }
 }
-function getDateRange$1(configs) {
+function getDateRange(configs) {
     let min = Infinity;
     let max = -Infinity;
     for (const config of configs) {
@@ -780,7 +1090,7 @@ class TimeSeriesComponent {
         this.BOTTOM_PADDING = 8;
         this.Y_TICK_COUNT = 5;
         this.X_MINOR_TICK_LIMIT = 15;
-        this.dateRange$ = this.input$.pipe(map(getDateRange$1), shareReplay({ refCount: true, bufferSize: 1 }));
+        this.dateRange$ = this.input$.pipe(map(getDateRange), shareReplay({ refCount: true, bufferSize: 1 }));
         this.binInterval$ = this.dateRange$.pipe(map(([minDate, maxDate]) => {
             const diff = timeDay.count(new Date(minDate), new Date(maxDate));
             if (diff >= 365 * 3) {
@@ -814,7 +1124,7 @@ class TimeSeriesComponent {
                         })) });
                 }) });
         })), shareReplay({ refCount: true, bufferSize: 1 }));
-        this.binnedDateRange$ = this.binnedData$.pipe(map(getDateRange$1), shareReplay({ refCount: true, bufferSize: 1 }));
+        this.binnedDateRange$ = this.binnedData$.pipe(map(getDateRange), shareReplay({ refCount: true, bufferSize: 1 }));
         this.drawData$ = combineLatest([
             this.binnedData$,
             this.binnedDateRange$,
@@ -963,235 +1273,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-class DataTableComponent {
-}
-DataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableComponent, selector: "riv-data-table", ngImport: i0, template: '<table><ng-content></ng-content></table>', isInline: true, styles: [":host{display:block;overflow-x:scroll}table{table-layout:fixed;min-width:100%;border-collapse:collapse}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'riv-data-table', template: '<table><ng-content></ng-content></table>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;overflow-x:scroll}table{table-layout:fixed;min-width:100%;border-collapse:collapse}\n"] }]
-        }] });
-
-class DataTableRowComponent {
-    constructor() {
-        this.subRow = false;
-    }
-}
-DataTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableRowComponent, selector: "[riv-data-table-row]", inputs: { subRow: "subRow" }, host: { properties: { "class.sub-row": "this.subRow" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host:not(.sub-row){border-top:var(--border-width) solid var(--border-light)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableRowComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-row]', template: '<ng-content></ng-content>', styles: [":host:not(.sub-row){border-top:var(--border-width) solid var(--border-light)}\n"] }]
-        }], propDecorators: { subRow: [{
-                type: Input
-            }, {
-                type: HostBinding,
-                args: ['class.sub-row']
-            }] } });
-
-class DataTableCellComponent {
-    constructor(row) {
-        this.row = row;
-        this.subCell = false;
-    }
-    ngOnInit() {
-        this.subCell = this.row.subRow;
-    }
-}
-DataTableCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableCellComponent, deps: [{ token: DataTableRowComponent }], target: i0.ɵɵFactoryTarget.Component });
-DataTableCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableCellComponent, selector: "[riv-data-table-cell]", host: { properties: { "class.sub-cell": "this.subCell" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:var(--size-large) 0;text-align:right}:host.sub-cell{padding-top:0;padding-left:var(--size-xlarge)}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableCellComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-cell]', template: '<ng-content></ng-content>', styles: [":host{padding:var(--size-large) 0;text-align:right}:host.sub-cell{padding-top:0;padding-left:var(--size-xlarge)}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"] }]
-        }], ctorParameters: function () { return [{ type: DataTableRowComponent }]; }, propDecorators: { subCell: [{
-                type: HostBinding,
-                args: ['class.sub-cell']
-            }] } });
-
-class DataTableHeaderCellComponent {
-}
-DataTableHeaderCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataTableHeaderCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableHeaderCellComponent, selector: "[riv-data-table-header-cell]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:var(--size-large) 0;font-weight:var(--font-weight-heavy);text-align:right}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableHeaderCellComponent, decorators: [{
-            type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-header-cell]', template: '<ng-content></ng-content>', styles: [":host{padding:var(--size-large) 0;font-weight:var(--font-weight-heavy);text-align:right}:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0);text-align:left}\n"] }]
-        }] });
-
-function getDateRange(stacks) {
-    let min = Infinity;
-    let max = -Infinity;
-    for (const stack of stacks) {
-        for (const series of stack) {
-            for (const { date } of series.data) {
-                const value = date.valueOf();
-                min = Math.min(min, value);
-                max = Math.max(max, value);
-            }
-        }
-    }
-    return [new Date(min), new Date(max)];
-}
-// TODO: once we upgrade to Angular 16, this component can be cleaned up with
-// signals instead of RxJS.
-class StackedColumnComponent {
-    constructor() {
-        this.input$ = new BehaviorSubject([]);
-        this.width$ = new BehaviorSubject(960);
-        this.height$ = new BehaviorSubject(256);
-        this.valueFormatter = v => v.toString();
-        this.drawData$ = combineLatest([
-            this.input$,
-            this.width$,
-            this.height$,
-        ]).pipe(map(([input, width, height]) => {
-            const viewBox = `0 0 ${width} ${height}`;
-            const padding = 8;
-            const [minDate, maxDate] = getDateRange(input);
-            const xSteps = timeMonth.range(timeMonth.floor(minDate), timeMonth.floor(timeMonth.offset(maxDate, 1)));
-            const xFormatter = timeFormat('%b');
-            const xOuterScale = scaleBand()
-                .domain(xSteps.map(date => xFormatter(date)))
-                .range([0, width]);
-            const columnWidth = 6;
-            const columnPadding = 4;
-            const outerPadding = (xOuterScale.bandwidth() -
-                (columnPadding * (input.length - 1) + columnWidth * input.length)) /
-                2;
-            const renderInformation = input.map(stackData => {
-                const stackedTable = stackData.reduce((table, s) => [
-                    ...table,
-                    ...s.data.map(point => (Object.assign(Object.assign({}, point), { series: s }))),
-                ], []);
-                const indexedTable = index(stackedTable, d => d.date, d => d.series.label);
-                const stacked = stack()
-                    .keys(stackData.map(v => v.label))
-                    .value(([_, group], key) => {
-                    return group.get(key).value;
-                })(indexedTable);
-                return { indexedTable, stacked };
-            });
-            let domainMax = 0;
-            renderInformation.forEach(({ stacked, indexedTable }) => {
-                [...indexedTable.values()].forEach((pointMap, i) => {
-                    [...pointMap.values()].forEach((_, j) => {
-                        domainMax = Math.max(domainMax, ...stacked[j][i]);
-                    });
-                });
-            });
-            const yScale = scaleLinear()
-                .domain([0, domainMax])
-                .range([height - padding * 2, padding]);
-            const rects = [];
-            renderInformation.forEach(({ stacked, indexedTable }, index) => {
-                [...indexedTable.entries()].forEach(([date, pointMap], i) => {
-                    [...pointMap.entries()].forEach(([_, seriesPoint], j) => {
-                        var _a;
-                        const [baseline, topline] = stacked[j][i];
-                        const width = columnWidth;
-                        const height = yScale(baseline) - yScale(topline);
-                        const x = ((_a = xOuterScale(xFormatter(date))) !== null && _a !== void 0 ? _a : 0) +
-                            outerPadding +
-                            columnWidth * index +
-                            columnPadding * index;
-                        const y = yScale(baseline) - height;
-                        const fill = `var(${seriesPoint.series.colorToken})`;
-                        rects.push({
-                            dateValue: date.valueOf(),
-                            x,
-                            y,
-                            width,
-                            height,
-                            fill,
-                            striped: seriesPoint.series.style === 'striped',
-                            seriesPoint,
-                        });
-                    });
-                });
-            });
-            const xTicks = xSteps.map(date => {
-                var _a;
-                return ({
-                    dateValue: date.valueOf(),
-                    label: xFormatter(date),
-                    x: ((_a = xOuterScale(xFormatter(date))) !== null && _a !== void 0 ? _a : 0) + xOuterScale.bandwidth() / 2,
-                });
-            });
-            const yTicks = yScale.ticks(5);
-            const hoverBandWidth = renderInformation.length * columnWidth +
-                (renderInformation.length + 1) * columnPadding;
-            const hoverBands = xSteps.map(date => {
-                var _a;
-                return ({
-                    dateValue: date.valueOf(),
-                    x: ((_a = xOuterScale(xFormatter(date))) !== null && _a !== void 0 ? _a : 0) +
-                        (xOuterScale.bandwidth() - hoverBandWidth) / 2,
-                    y: yScale(domainMax),
-                    width: hoverBandWidth,
-                    height: yScale(0) - yScale(domainMax),
-                });
-            });
-            return {
-                columnWidth,
-                hoverBands,
-                rects,
-                viewBox,
-                xTicks,
-                yScale,
-                yTicks,
-            };
-        }), shareReplay({ refCount: true, bufferSize: 1 }));
-        this.empty$ = this.input$.pipe(map(input => input.every(stack => stack.every(series => series.data.length === 0))), shareReplay({ refCount: true, bufferSize: 1 }));
-        this.hoveredBand$ = new BehaviorSubject(null);
-        this.callout$ = combineLatest([this.hoveredBand$, this.drawData$]).pipe(map(([hoveredBand, drawData]) => {
-            if (!hoveredBand)
-                return null;
-            const { target } = hoveredBand.event;
-            if (!target)
-                return null;
-            const anchor = target.getBoundingClientRect();
-            const metrics = drawData.rects
-                .filter(rect => rect.dateValue === hoveredBand.dateValue)
-                .map(rect => ({
-                label: rect.seriesPoint.series.label,
-                value: this.valueFormatter(rect.seriesPoint.value),
-            }));
-            return { anchor, metrics };
-        }), shareReplay({ refCount: true, bufferSize: 1 }));
-    }
-    set input(v) {
-        this.input$.next(v);
-    }
-    get input() {
-        return this.input$.getValue();
-    }
-    set width(v) {
-        this.width$.next(v);
-    }
-    get width() {
-        return this.width$.getValue();
-    }
-    set height(v) {
-        this.height$.next(v);
-    }
-    get height() {
-        return this.height$.getValue();
-    }
-}
-StackedColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StackedColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StackedColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: StackedColumnComponent, selector: "riv-stacked-column", inputs: { input: "input", width: "width", height: "height", valueFormatter: "valueFormatter" }, 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    <defs>\n      <pattern\n        id=\"stripes\"\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"d.columnWidth\"\n        [attr.height]=\"d.columnWidth\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <line\n          x1=\"0\"\n          [attr.y1]=\"d.columnWidth\"\n          [attr.x2]=\"d.columnWidth\"\n          y2=\"0\"\n          stroke=\"var(--white-100)\"\n          stroke-width=\"1\"\n        ></line>\n      </pattern>\n    </defs>\n    <g *ngFor=\"let tick of d.xTicks\">\n      <rect\n        class=\"tick-background\"\n        [class.focused]=\"(hoveredBand$ | async)?.dateValue === tick.dateValue\"\n        [attr.x]=\"tick.x - 20\"\n        [attr.y]=\"d.yScale(0) + 3\"\n        width=\"40\"\n        height=\"12\"\n        rx=\"2\"\n      ></rect>\n      <text\n        class=\"tick-label\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"d.yScale(0) + 12\"\n        text-anchor=\"middle\"\n      >\n        {{ tick.label }}\n      </text>\n    </g>\n    <g *ngFor=\"let tick of d.yTicks\">\n      <rect\n        class=\"tick\"\n        x=\"0\"\n        [attr.y]=\"d.yScale(tick)\"\n        width=\"100%\"\n        height=\"1\"\n      ></rect>\n      <text class=\"tick-label\" x=\"0\" [attr.y]=\"d.yScale(tick)\" dy=\"-4\">\n        {{ valueFormatter(tick) }}\n      </text>\n    </g>\n    <g *ngFor=\"let rect of d.rects\">\n      <rect\n        class=\"column\"\n        [attr.x]=\"rect.x\"\n        [attr.y]=\"rect.y\"\n        [attr.width]=\"rect.width\"\n        [attr.height]=\"rect.height\"\n        [attr.fill]=\"rect.fill\"\n        [class.blurred]=\"\n          (hoveredBand$ | async) !== null &&\n          (hoveredBand$ | async)?.dateValue !== rect.dateValue\n        \"\n      ></rect>\n      <rect\n        *ngIf=\"rect.striped\"\n        [attr.x]=\"rect.x\"\n        [attr.y]=\"rect.y\"\n        [attr.width]=\"rect.width\"\n        [attr.height]=\"rect.height\"\n        fill=\"url(#stripes)\"\n      ></rect>\n    </g>\n    <rect\n      *ngFor=\"let rect of d.hoverBands\"\n      [attr.x]=\"rect.x\"\n      [attr.y]=\"rect.y\"\n      [attr.width]=\"rect.width\"\n      [attr.height]=\"rect.height\"\n      fill=\"transparent\"\n      (mouseenter)=\"\n        hoveredBand$.next({ dateValue: rect.dateValue, event: $event })\n      \"\n      (mouseleave)=\"hoveredBand$.next(null)\"\n    ></rect>\n  </svg>\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]=\"'center-right'\"\n    [allowedPositions]=\"[\n      'center-right',\n      'center-left',\n      'top-center',\n      'bottom-center'\n    ]\"\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: [".tick{fill:var(--gray-20)}.tick-label{font-size:var(--type-0-font-size);line-height:var(--type-0-line-height-0);fill:var(--type-light-low-contrast)}.tick-background{transition:fill var(--short-transition);fill:transparent}.tick-background.focused{fill:var(--baloo-10)}.column{transition:opacity var(--short-transition)}.column.blurred{opacity:.4}.callout-content{padding:var(--size-large);display:grid;gap:var(--size-medium);grid-template-columns:1fr 1fr}.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: "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: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StackedColumnComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'riv-stacked-column', 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    <defs>\n      <pattern\n        id=\"stripes\"\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"d.columnWidth\"\n        [attr.height]=\"d.columnWidth\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <line\n          x1=\"0\"\n          [attr.y1]=\"d.columnWidth\"\n          [attr.x2]=\"d.columnWidth\"\n          y2=\"0\"\n          stroke=\"var(--white-100)\"\n          stroke-width=\"1\"\n        ></line>\n      </pattern>\n    </defs>\n    <g *ngFor=\"let tick of d.xTicks\">\n      <rect\n        class=\"tick-background\"\n        [class.focused]=\"(hoveredBand$ | async)?.dateValue === tick.dateValue\"\n        [attr.x]=\"tick.x - 20\"\n        [attr.y]=\"d.yScale(0) + 3\"\n        width=\"40\"\n        height=\"12\"\n        rx=\"2\"\n      ></rect>\n      <text\n        class=\"tick-label\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"d.yScale(0) + 12\"\n        text-anchor=\"middle\"\n      >\n        {{ tick.label }}\n      </text>\n    </g>\n    <g *ngFor=\"let tick of d.yTicks\">\n      <rect\n        class=\"tick\"\n        x=\"0\"\n        [attr.y]=\"d.yScale(tick)\"\n        width=\"100%\"\n        height=\"1\"\n      ></rect>\n      <text class=\"tick-label\" x=\"0\" [attr.y]=\"d.yScale(tick)\" dy=\"-4\">\n        {{ valueFormatter(tick) }}\n      </text>\n    </g>\n    <g *ngFor=\"let rect of d.rects\">\n      <rect\n        class=\"column\"\n        [attr.x]=\"rect.x\"\n        [attr.y]=\"rect.y\"\n        [attr.width]=\"rect.width\"\n        [attr.height]=\"rect.height\"\n        [attr.fill]=\"rect.fill\"\n        [class.blurred]=\"\n          (hoveredBand$ | async) !== null &&\n          (hoveredBand$ | async)?.dateValue !== rect.dateValue\n        \"\n      ></rect>\n      <rect\n        *ngIf=\"rect.striped\"\n        [attr.x]=\"rect.x\"\n        [attr.y]=\"rect.y\"\n        [attr.width]=\"rect.width\"\n        [attr.height]=\"rect.height\"\n        fill=\"url(#stripes)\"\n      ></rect>\n    </g>\n    <rect\n      *ngFor=\"let rect of d.hoverBands\"\n      [attr.x]=\"rect.x\"\n      [attr.y]=\"rect.y\"\n      [attr.width]=\"rect.width\"\n      [attr.height]=\"rect.height\"\n      fill=\"transparent\"\n      (mouseenter)=\"\n        hoveredBand$.next({ dateValue: rect.dateValue, event: $event })\n      \"\n      (mouseleave)=\"hoveredBand$.next(null)\"\n    ></rect>\n  </svg>\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]=\"'center-right'\"\n    [allowedPositions]=\"[\n      'center-right',\n      'center-left',\n      'top-center',\n      'bottom-center'\n    ]\"\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: [".tick{fill:var(--gray-20)}.tick-label{font-size:var(--type-0-font-size);line-height:var(--type-0-line-height-0);fill:var(--type-light-low-contrast)}.tick-background{transition:fill var(--short-transition);fill:transparent}.tick-background.focused{fill:var(--baloo-10)}.column{transition:opacity var(--short-transition)}.column.blurred{opacity:.4}.callout-content{padding:var(--size-large);display:grid;gap:var(--size-medium);grid-template-columns:1fr 1fr}.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"] }]
-        }], propDecorators: { input: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
-            }], valueFormatter: [{
-                type: Input
-            }] } });
-
 class RivModule {
 }
 RivModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RivModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1202,10 +1283,14 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         DataTableComponent,
         DataTableHeaderCellComponent,
         DataTableRowComponent,
+        DaysPipe,
         DonutComponent,
         IconComponent,
         LegendItemComponent,
         MetricComponent,
+        NumberPipe,
+        PercentagePipe,
+        SmallCurrencyPipe,
         StackedColumnComponent,
         TextToggleComponent,
         TimeSeriesComponent,
@@ -1216,10 +1301,14 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         DataTableComponent,
         DataTableHeaderCellComponent,
         DataTableRowComponent,
+        DaysPipe,
         DonutComponent,
         IconComponent,
         LegendItemComponent,
         MetricComponent,
+        NumberPipe,
+        PercentagePipe,
+        SmallCurrencyPipe,
         StackedColumnComponent,
         TextToggleComponent,
         TimeSeriesComponent,
@@ -1236,10 +1325,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         DataTableComponent,
                         DataTableHeaderCellComponent,
                         DataTableRowComponent,
+                        DaysPipe,
                         DonutComponent,
                         IconComponent,
                         LegendItemComponent,
                         MetricComponent,
+                        NumberPipe,
+                        PercentagePipe,
+                        SmallCurrencyPipe,
                         StackedColumnComponent,
                         TextToggleComponent,
                         TimeSeriesComponent,
@@ -1253,10 +1346,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         DataTableComponent,
                         DataTableHeaderCellComponent,
                         DataTableRowComponent,
+                        DaysPipe,
                         DonutComponent,
                         IconComponent,
                         LegendItemComponent,
                         MetricComponent,
+                        NumberPipe,
+                        PercentagePipe,
+                        SmallCurrencyPipe,
                         StackedColumnComponent,
                         TextToggleComponent,
                         TimeSeriesComponent,
@@ -1270,5 +1367,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, DonutComponent, IconComponent, LegendItemComponent, MetricComponent, RivModule, StackedColumnComponent, TextToggleComponent, TimeSeriesComponent, ZeroStateComponent };
+export { CalloutComponent, CalloutDirective, CalloutOutletComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DaysPipe, DonutComponent, IconComponent, LegendItemComponent, MetricComponent, NumberPipe, PercentagePipe, RivModule, SmallCurrencyPipe, StackedColumnComponent, TextToggleComponent, TimeSeriesComponent, ZeroStateComponent };
 //# sourceMappingURL=rivet-health-design-system.mjs.map