@rivet-health/design-system 2.7.0 → 2.8.0

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

@@ -1,7 +1,7 @@
 import * as i0 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 { DecimalPipe, CurrencyPipe, PercentPipe, CommonModule } from '@angular/common';
 import { BehaviorSubject, combineLatest, map, shareReplay } from 'rxjs';
 import { pie, arc, stack, line } from 'd3-shape';
 import { index } from 'd3-array';
@@ -362,13 +362,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
+const NO_DATA_FALLBACK = '-';
+
 class DaysPipe {
     constructor() {
         this.inner = new DecimalPipe('en-us');
     }
     transform(value, digitsInfo) {
         const ret = this.inner.transform(value, digitsInfo ?? '1.0-2');
-        return ret ? ret + (value === 1 ? ' day' : ' days') : '-';
+        return ret ? ret + (value === 1 ? ' day' : ' days') : NO_DATA_FALLBACK;
     }
 }
 DaysPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DaysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -378,12 +380,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
             args: [{ name: 'rivDays' }]
         }] });
 
+class DollarsPipe {
+    constructor() {
+        this.inner = new CurrencyPipe('en-us');
+    }
+    transform(value, digitsInfo) {
+        return (this.inner.transform(value, undefined, undefined, digitsInfo ?? '1.2-2') ?? NO_DATA_FALLBACK);
+    }
+}
+DollarsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DollarsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DollarsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: DollarsPipe, name: "rivDollars" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DollarsPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'rivDollars' }]
+        }] });
+
 class NumberPipe {
     constructor() {
         this.inner = new DecimalPipe('en-us');
     }
     transform(value, digitsInfo) {
-        return this.inner.transform(value, digitsInfo ?? '1.0-0') ?? '-';
+        return (this.inner.transform(value, digitsInfo ?? '1.0-0') ?? NO_DATA_FALLBACK);
     }
 }
 NumberPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -398,7 +415,7 @@ class PercentagePipe {
         this.inner = new PercentPipe('en-us');
     }
     transform(value, digitsInfo) {
-        return this.inner.transform(value, digitsInfo ?? '1.1-1') ?? '-';
+        return (this.inner.transform(value, digitsInfo ?? '1.1-1') ?? NO_DATA_FALLBACK);
     }
 }
 PercentagePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PercentagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -413,24 +430,24 @@ class SmallCurrencyPipe {
         this.inner = new CurrencyPipe('en-us');
     }
     transform(value, digitsInfo) {
-        if (value === null) {
-            return '-';
+        if (value === null || value === undefined) {
+            return NO_DATA_FALLBACK;
         }
         const num = typeof value == 'string' ? Number.parseFloat(value) : value;
         const magnitude = Math.log10(Math.abs(num));
         if (num === 0) {
-            return (this.inner.transform(num, undefined, undefined, digitsInfo ?? '1.0-0') ?? '-');
+            return (this.inner.transform(num, undefined, undefined, digitsInfo ?? '1.0-0') ?? NO_DATA_FALLBACK);
         }
         if (magnitude >= 9) {
-            return ((this.inner.transform(num / 1000000000, undefined, undefined, digitsInfo ?? num / 1000000000 >= 100 ? '1.0-0' : '1.0-2') ?? '-') + 'B');
+            return ((this.inner.transform(num / 1000000000, undefined, undefined, digitsInfo ?? num / 1000000000 >= 100 ? '1.0-0' : '1.0-2') ?? NO_DATA_FALLBACK) + 'B');
         }
         if (magnitude >= 6) {
-            return ((this.inner.transform(num / 1000000, undefined, undefined, digitsInfo ?? num / 1000000 >= 100 ? '1.0-0' : '1.0-2') ?? '-') + 'M');
+            return ((this.inner.transform(num / 1000000, undefined, undefined, digitsInfo ?? num / 1000000 >= 100 ? '1.0-0' : '1.0-2') ?? NO_DATA_FALLBACK) + 'M');
         }
         if (magnitude >= 3) {
-            return ((this.inner.transform(num / 1000, undefined, undefined, digitsInfo ?? num / 1000 >= 100 ? '1.0-0' : '1.0-2') ?? '-') + 'K');
+            return ((this.inner.transform(num / 1000, undefined, undefined, digitsInfo ?? num / 1000 >= 100 ? '1.0-0' : '1.0-2') ?? NO_DATA_FALLBACK) + 'K');
         }
-        return (this.inner.transform(num, undefined, undefined, digitsInfo ?? num >= 100 ? '1.0-0' : '1.0-2') ?? '-');
+        return (this.inner.transform(num, undefined, undefined, digitsInfo ?? num >= 100 ? '1.0-0' : '1.0-2') ?? NO_DATA_FALLBACK);
     }
 }
 SmallCurrencyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmallCurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
@@ -757,6 +774,9 @@ class TooltipDirective {
     onMouseLeave() {
         this.initiateClose();
     }
+    ngOnDestroy() {
+        this.initiateClose();
+    }
     initiateClose() {
         this.closeTimeout = window.setTimeout(() => {
             this.tooltipRef?.destroy();
@@ -953,38 +973,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
-class TrendComponent {
-    constructor() {
-        this.label = '';
-        this.value = 0;
-        this.successCondition = 'positive';
-    }
-    getClasses() {
-        const conditionalClass = this.value === 0
-            ? ''
-            : this.successCondition === 'positive'
-                ? this.value > 0
-                    ? 'success'
-                    : 'danger'
-                : this.value < 0
-                    ? 'success'
-                    : 'danger';
-        return 'trend ' + conditionalClass;
-    }
-}
-TrendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TrendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TrendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TrendComponent, selector: "riv-trend", inputs: { label: "label", value: "value", successCondition: "successCondition" }, ngImport: i0, template: "<span [class]=\"getClasses()\">\n  <riv-icon\n    class=\"icon\"\n    [name]=\"\n      value === 0 ? 'ArrowRight' : value > 0 ? 'TrendingUp' : 'TrendingDown'\n    \"\n    [size]=\"16\"\n  ></riv-icon>\n  <span>{{ label }}</span>\n</span>\n", styles: [".success{color:var(--baja-blast-90)}.danger{color:var(--fyre-50)}.trend{display:flex;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-normal)}.icon{margin-right:var(--size-small)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TrendComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'riv-trend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"getClasses()\">\n  <riv-icon\n    class=\"icon\"\n    [name]=\"\n      value === 0 ? 'ArrowRight' : value > 0 ? 'TrendingUp' : 'TrendingDown'\n    \"\n    [size]=\"16\"\n  ></riv-icon>\n  <span>{{ label }}</span>\n</span>\n", styles: [".success{color:var(--baja-blast-90)}.danger{color:var(--fyre-50)}.trend{display:flex;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-normal)}.icon{margin-right:var(--size-small)}\n"] }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }], successCondition: [{
-                type: Input
-            }] } });
-
 function getDateRange$1(stacks) {
     let min = Infinity;
     let max = -Infinity;
@@ -1439,6 +1427,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }] } });
 
+class TrendComponent {
+    constructor() {
+        this.label = '';
+        this.value = 0;
+        this.successCondition = 'positive';
+    }
+    getClasses() {
+        const conditionalClass = this.value === 0
+            ? ''
+            : this.successCondition === 'positive'
+                ? this.value > 0
+                    ? 'success'
+                    : 'danger'
+                : this.value < 0
+                    ? 'success'
+                    : 'danger';
+        return 'trend ' + conditionalClass;
+    }
+}
+TrendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TrendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TrendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TrendComponent, selector: "riv-trend", inputs: { label: "label", value: "value", successCondition: "successCondition" }, ngImport: i0, template: "<span [class]=\"getClasses()\">\n  <riv-icon\n    class=\"icon\"\n    [name]=\"\n      value === 0 ? 'ArrowRight' : value > 0 ? 'TrendingUp' : 'TrendingDown'\n    \"\n    [size]=\"16\"\n  ></riv-icon>\n  <span>{{ label }}</span>\n</span>\n", styles: [".success{color:var(--baja-blast-90)}.danger{color:var(--fyre-50)}.trend{display:flex;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-normal)}.icon{margin-right:var(--size-small)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TrendComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'riv-trend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"getClasses()\">\n  <riv-icon\n    class=\"icon\"\n    [name]=\"\n      value === 0 ? 'ArrowRight' : value > 0 ? 'TrendingUp' : 'TrendingDown'\n    \"\n    [size]=\"16\"\n  ></riv-icon>\n  <span>{{ label }}</span>\n</span>\n", styles: [".success{color:var(--baja-blast-90)}.danger{color:var(--fyre-50)}.trend{display:flex;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-normal)}.icon{margin-right:var(--size-small)}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }], successCondition: [{
+                type: Input
+            }] } });
+
 class RivModule {
 }
 RivModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RivModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1450,6 +1470,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         DataTableHeaderCellComponent,
         DataTableRowComponent,
         DaysPipe,
+        DollarsPipe,
         DonutComponent,
         IconComponent,
         LegendItemComponent,
@@ -1471,6 +1492,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         DataTableHeaderCellComponent,
         DataTableRowComponent,
         DaysPipe,
+        DollarsPipe,
         DonutComponent,
         IconComponent,
         LegendItemComponent,
@@ -1498,6 +1520,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         DataTableHeaderCellComponent,
                         DataTableRowComponent,
                         DaysPipe,
+                        DollarsPipe,
                         DonutComponent,
                         IconComponent,
                         LegendItemComponent,
@@ -1522,6 +1545,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         DataTableHeaderCellComponent,
                         DataTableRowComponent,
                         DaysPipe,
+                        DollarsPipe,
                         DonutComponent,
                         IconComponent,
                         LegendItemComponent,
@@ -1545,5 +1569,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, TooltipAnchoredPositions, TooltipComponent, TooltipDirective, TrendComponent, ZeroStateComponent };
+export { CalloutComponent, CalloutDirective, CalloutOutletComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DaysPipe, DollarsPipe, DonutComponent, IconComponent, LegendItemComponent, MetricComponent, NumberPipe, PercentagePipe, RivModule, SmallCurrencyPipe, StackedColumnComponent, TextToggleComponent, TimeSeriesComponent, TooltipAnchoredPositions, TooltipComponent, TooltipDirective, TrendComponent, ZeroStateComponent };
 //# sourceMappingURL=rivet-health-design-system.mjs.map