@rivet-health/design-system 5.2.1 → 5.2.2

package/esm2020/lib/visualization/legend-item/legend-item.component.mjs

@@ -10,6 +10,7 @@ export class LegendItemComponent {
         this.style = 'solid';
         this.visibility = 'visible';
         this.clickable = false;
+        this.showCheckWhenClickable = true;
         this.itemClick = new EventEmitter();
     }
     get backgroundColor() {
@@ -20,10 +21,10 @@ export class LegendItemComponent {
     }
 }
 LegendItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegendItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LegendItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LegendItemComponent, selector: "riv-legend-item", inputs: { label: "label", colorToken: "colorToken", style: "style", visibility: "visibility", iconTooltip: "iconTooltip", clickable: "clickable" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button\n  (click)=\"isLegendItemClickable() ? itemClick.emit() : null\"\n  [rivTooltip]=\"iconTooltip\"\n  type=\"button\"\n  [disabled]=\"visibility === 'locked'\"\n  [class.clickable]=\"clickable\"\n>\n  <i\n    *ngIf=\"visibility === 'visible'\"\n    [class.striped]=\"style === 'striped'\"\n    [style.background-color]=\"backgroundColor\"\n    class=\"opacity-hover\"\n  ></i>\n  <i\n    *ngIf=\"visibility === 'hidden'\"\n    class=\"hidden-legend-item opacity-hover\"\n    [class.striped]=\"style === 'striped'\"\n    [style.border-color]=\"backgroundColor\"\n    [style.--background-color-hover]=\"backgroundColor\"\n  ></i>\n  <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n\n  <span\n    [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\"\n  >\n    {{ label }}\n  </span>\n</button>\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;gap:var(--size-small);align-items:center;cursor:default}.hidden-legend-item{border-width:var(--border-width);border-style:solid;background-color:transparent}button:hover.clickable .hidden-legend-item{background-color:var(--background-color-hover)}button:not([disabled]).clickable:hover{cursor:pointer}button:not([disabled]).clickable:hover .opacity-hover{opacity:.6}button[disabled]{cursor:not-allowed}button[disabled] .low-contrast{color:var(--type-light-disabled)}button:not(:hover) .low-contrast{color:var(--type-light-disabled)}button:not(.clickable):hover .low-contrast{color:var(--type-light-disabled)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: i3.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }], 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", clickable: "clickable", showCheckWhenClickable: "showCheckWhenClickable" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button\n  (click)=\"isLegendItemClickable() ? itemClick.emit() : null\"\n  [rivTooltip]=\"iconTooltip\"\n  type=\"button\"\n  [disabled]=\"visibility === 'locked'\"\n  [class.clickable]=\"clickable\"\n>\n  <i\n    *ngIf=\"visibility === 'visible'\"\n    [class.striped]=\"style === 'striped'\"\n    [style.background-color]=\"backgroundColor\"\n    class=\"opacity-hover\"\n  >\n    <riv-icon\n      *ngIf=\"clickable && showCheckWhenClickable\"\n      name=\"Check\"\n      [size]=\"16\"\n      [strokeWidth]=\"3\"\n      style=\"color: var(--white-100)\"\n    ></riv-icon>\n  </i>\n  <i\n    *ngIf=\"visibility === 'hidden'\"\n    class=\"hidden-legend-item opacity-hover\"\n    [class.striped]=\"style === 'striped'\"\n    [style.border-color]=\"backgroundColor\"\n    [style.--background-color-hover]=\"backgroundColor\"\n  ></i>\n  <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n\n  <span\n    [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\"\n  >\n    {{ label }}\n  </span>\n</button>\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;gap:var(--size-small);align-items:center;cursor:default}.hidden-legend-item{border-width:var(--border-width);border-style:solid;background-color:transparent}button:hover.clickable .hidden-legend-item{background-color:var(--background-color-hover)}button:not([disabled]).clickable:hover{cursor:pointer}button:not([disabled]).clickable:hover .opacity-hover{opacity:.6}button[disabled]{cursor:not-allowed}button[disabled] .low-contrast{color:var(--type-light-disabled)}button:not(:hover) .low-contrast{color:var(--type-light-disabled)}button:not(.clickable):hover .low-contrast{color:var(--type-light-disabled)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: i3.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegendItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  (click)=\"isLegendItemClickable() ? itemClick.emit() : null\"\n  [rivTooltip]=\"iconTooltip\"\n  type=\"button\"\n  [disabled]=\"visibility === 'locked'\"\n  [class.clickable]=\"clickable\"\n>\n  <i\n    *ngIf=\"visibility === 'visible'\"\n    [class.striped]=\"style === 'striped'\"\n    [style.background-color]=\"backgroundColor\"\n    class=\"opacity-hover\"\n  ></i>\n  <i\n    *ngIf=\"visibility === 'hidden'\"\n    class=\"hidden-legend-item opacity-hover\"\n    [class.striped]=\"style === 'striped'\"\n    [style.border-color]=\"backgroundColor\"\n    [style.--background-color-hover]=\"backgroundColor\"\n  ></i>\n  <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n\n  <span\n    [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\"\n  >\n    {{ label }}\n  </span>\n</button>\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;gap:var(--size-small);align-items:center;cursor:default}.hidden-legend-item{border-width:var(--border-width);border-style:solid;background-color:transparent}button:hover.clickable .hidden-legend-item{background-color:var(--background-color-hover)}button:not([disabled]).clickable:hover{cursor:pointer}button:not([disabled]).clickable:hover .opacity-hover{opacity:.6}button[disabled]{cursor:not-allowed}button[disabled] .low-contrast{color:var(--type-light-disabled)}button:not(:hover) .low-contrast{color:var(--type-light-disabled)}button:not(.clickable):hover .low-contrast{color:var(--type-light-disabled)}\n"] }]
+            args: [{ selector: 'riv-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  (click)=\"isLegendItemClickable() ? itemClick.emit() : null\"\n  [rivTooltip]=\"iconTooltip\"\n  type=\"button\"\n  [disabled]=\"visibility === 'locked'\"\n  [class.clickable]=\"clickable\"\n>\n  <i\n    *ngIf=\"visibility === 'visible'\"\n    [class.striped]=\"style === 'striped'\"\n    [style.background-color]=\"backgroundColor\"\n    class=\"opacity-hover\"\n  >\n    <riv-icon\n      *ngIf=\"clickable && showCheckWhenClickable\"\n      name=\"Check\"\n      [size]=\"16\"\n      [strokeWidth]=\"3\"\n      style=\"color: var(--white-100)\"\n    ></riv-icon>\n  </i>\n  <i\n    *ngIf=\"visibility === 'hidden'\"\n    class=\"hidden-legend-item opacity-hover\"\n    [class.striped]=\"style === 'striped'\"\n    [style.border-color]=\"backgroundColor\"\n    [style.--background-color-hover]=\"backgroundColor\"\n  ></i>\n  <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n\n  <span\n    [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\"\n  >\n    {{ label }}\n  </span>\n</button>\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;gap:var(--size-small);align-items:center;cursor:default}.hidden-legend-item{border-width:var(--border-width);border-style:solid;background-color:transparent}button:hover.clickable .hidden-legend-item{background-color:var(--background-color-hover)}button:not([disabled]).clickable:hover{cursor:pointer}button:not([disabled]).clickable:hover .opacity-hover{opacity:.6}button[disabled]{cursor:not-allowed}button[disabled] .low-contrast{color:var(--type-light-disabled)}button:not(:hover) .low-contrast{color:var(--type-light-disabled)}button:not(.clickable):hover .low-contrast{color:var(--type-light-disabled)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], colorToken: [{
@@ -36,6 +37,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], clickable: [{
                 type: Input
+            }], showCheckWhenClickable: [{
+                type: Input
             }], itemClick: [{
                 type: Output
             }] } });
@@ -43,4 +46,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
     LegendItemComponent.Styles = ['solid', 'striped'];
     LegendItemComponent.Visibilities = ['visible', 'hidden', 'locked'];
 })(LegendItemComponent || (LegendItemComponent = {}));
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGVnZW5kLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcml2L3NyYy9saWIvdmlzdWFsaXphdGlvbi9sZWdlbmQtaXRlbS9sZWdlbmQtaXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi92aXN1YWxpemF0aW9uL2xlZ2VuZC1pdGVtL2xlZ2VuZC1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDOzs7OztBQVF2QixNQUFNLE9BQU8sbUJBQW1CO0lBTmhDO1FBUUUsVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUduQixlQUFVLEdBQVcsRUFBRSxDQUFDO1FBR3hCLFVBQUssR0FBOEIsT0FBTyxDQUFDO1FBRzNDLGVBQVUsR0FBbUMsU0FBUyxDQUFDO1FBVXZELGNBQVMsR0FBWSxLQUFLLENBQUM7UUFHM0IsY0FBUyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7S0FLaEM7SUFiQyxJQUFJLGVBQWU7UUFDakIsT0FBTyxPQUFPLElBQUksQ0FBQyxVQUFVLEdBQUcsQ0FBQztJQUNuQyxDQUFDO0lBUUQscUJBQXFCO1FBQ25CLE9BQU8sSUFBSSxDQUFDLFNBQVMsSUFBSSxJQUFJLENBQUMsVUFBVSxLQUFLLFFBQVEsQ0FBQztJQUN4RCxDQUFDOztnSEE1QlUsbUJBQW1CO29HQUFuQixtQkFBbUIsZ1BDZGhDLDQxQkE0QkE7MkZEZGEsbUJBQW1CO2tCQU4vQixTQUFTOytCQUNFLGlCQUFpQixtQkFHVix1QkFBdUIsQ0FBQyxNQUFNOzhCQUkvQyxLQUFLO3NCQURKLEtBQUs7Z0JBSU4sVUFBVTtzQkFEVCxLQUFLO2dCQUlOLEtBQUs7c0JBREosS0FBSztnQkFJTixVQUFVO3NCQURULEtBQUs7Z0JBSU4sV0FBVztzQkFEVixLQUFLO2dCQVFOLFNBQVM7c0JBRFIsS0FBSztnQkFJTixTQUFTO3NCQURSLE1BQU07O0FBUVQsV0FBaUIsbUJBQW1CO0lBQ3JCLDBCQUFNLEdBQUcsQ0FBQyxPQUFPLEVBQUUsU0FBUyxDQUFVLENBQUM7SUFHdkMsZ0NBQVksR0FBRyxDQUFDLFNBQVMsRUFBRSxRQUFRLEVBQUUsUUFBUSxDQUFVLENBQUM7QUFFdkUsQ0FBQyxFQU5nQixtQkFBbUIsS0FBbkIsbUJBQW1CLFFBTW5DIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gIENvbXBvbmVudCxcbiAgRXZlbnRFbWl0dGVyLFxuICBJbnB1dCxcbiAgT3V0cHV0LFxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAncml2LWxlZ2VuZC1pdGVtJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2xlZ2VuZC1pdGVtLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbGVnZW5kLWl0ZW0uY29tcG9uZW50LmNzcyddLFxuICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbn0pXG5leHBvcnQgY2xhc3MgTGVnZW5kSXRlbUNvbXBvbmVudCB7XG4gIEBJbnB1dCgpXG4gIGxhYmVsOiBzdHJpbmcgPSAnJztcblxuICBASW5wdXQoKVxuICBjb2xvclRva2VuOiBzdHJpbmcgPSAnJztcblxuICBASW5wdXQoKVxuICBzdHlsZTogTGVnZW5kSXRlbUNvbXBvbmVudC5TdHlsZSA9ICdzb2xpZCc7XG5cbiAgQElucHV0KClcbiAgdmlzaWJpbGl0eTogTGVnZW5kSXRlbUNvbXBvbmVudC5WaXNpYmlsaXR5ID0gJ3Zpc2libGUnO1xuXG4gIEBJbnB1dCgpXG4gIGljb25Ub29sdGlwPzogc3RyaW5nO1xuXG4gIGdldCBiYWNrZ3JvdW5kQ29sb3IoKTogc3RyaW5nIHtcbiAgICByZXR1cm4gYHZhcigke3RoaXMuY29sb3JUb2tlbn0pYDtcbiAgfVxuXG4gIEBJbnB1dCgpXG4gIGNsaWNrYWJsZTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIEBPdXRwdXQoKVxuICBpdGVtQ2xpY2sgPSBuZXcgRXZlbnRFbWl0dGVyKCk7XG5cbiAgaXNMZWdlbmRJdGVtQ2xpY2thYmxlKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLmNsaWNrYWJsZSAmJiB0aGlzLnZpc2liaWxpdHkgIT09ICdsb2NrZWQnO1xuICB9XG59XG5cbmV4cG9ydCBuYW1lc3BhY2UgTGVnZW5kSXRlbUNvbXBvbmVudCB7XG4gIGV4cG9ydCBjb25zdCBTdHlsZXMgPSBbJ3NvbGlkJywgJ3N0cmlwZWQnXSBhcyBjb25zdDtcbiAgZXhwb3J0IHR5cGUgU3R5bGUgPSAodHlwZW9mIFN0eWxlcylbbnVtYmVyXTtcblxuICBleHBvcnQgY29uc3QgVmlzaWJpbGl0aWVzID0gWyd2aXNpYmxlJywgJ2hpZGRlbicsICdsb2NrZWQnXSBhcyBjb25zdDtcbiAgZXhwb3J0IHR5cGUgVmlzaWJpbGl0eSA9ICh0eXBlb2YgVmlzaWJpbGl0aWVzKVtudW1iZXJdO1xufVxuIiwiPGJ1dHRvblxuICAoY2xpY2spPVwiaXNMZWdlbmRJdGVtQ2xpY2thYmxlKCkgPyBpdGVtQ2xpY2suZW1pdCgpIDogbnVsbFwiXG4gIFtyaXZUb29sdGlwXT1cImljb25Ub29sdGlwXCJcbiAgdHlwZT1cImJ1dHRvblwiXG4gIFtkaXNhYmxlZF09XCJ2aXNpYmlsaXR5ID09PSAnbG9ja2VkJ1wiXG4gIFtjbGFzcy5jbGlja2FibGVdPVwiY2xpY2thYmxlXCJcbj5cbiAgPGlcbiAgICAqbmdJZj1cInZpc2liaWxpdHkgPT09ICd2aXNpYmxlJ1wiXG4gICAgW2NsYXNzLnN0cmlwZWRdPVwic3R5bGUgPT09ICdzdHJpcGVkJ1wiXG4gICAgW3N0eWxlLmJhY2tncm91bmQtY29sb3JdPVwiYmFja2dyb3VuZENvbG9yXCJcbiAgICBjbGFzcz1cIm9wYWNpdHktaG92ZXJcIlxuICA+PC9pPlxuICA8aVxuICAgICpuZ0lmPVwidmlzaWJpbGl0eSA9PT0gJ2hpZGRlbidcIlxuICAgIGNsYXNzPVwiaGlkZGVuLWxlZ2VuZC1pdGVtIG9wYWNpdHktaG92ZXJcIlxuICAgIFtjbGFzcy5zdHJpcGVkXT1cInN0eWxlID09PSAnc3RyaXBlZCdcIlxuICAgIFtzdHlsZS5ib3JkZXItY29sb3JdPVwiYmFja2dyb3VuZENvbG9yXCJcbiAgICBbc3R5bGUuLS1iYWNrZ3JvdW5kLWNvbG9yLWhvdmVyXT1cImJhY2tncm91bmRDb2xvclwiXG4gID48L2k+XG4gIDxyaXYtaWNvbiAqbmdJZj1cInZpc2liaWxpdHkgPT09ICdsb2NrZWQnXCIgbmFtZT1cIkxvY2tcIiBbc2l6ZV09XCIxNlwiPjwvcml2LWljb24+XG5cbiAgPHNwYW5cbiAgICBbY2xhc3MubG93LWNvbnRyYXN0XT1cInZpc2liaWxpdHkgPT09ICdoaWRkZW4nIHx8IHZpc2liaWxpdHkgPT09ICdsb2NrZWQnXCJcbiAgPlxuICAgIHt7IGxhYmVsIH19XG4gIDwvc3Bhbj5cbjwvYnV0dG9uPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGVnZW5kLWl0ZW0uY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvcml2L3NyYy9saWIvdmlzdWFsaXphdGlvbi9sZWdlbmQtaXRlbS9sZWdlbmQtaXRlbS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9yaXYvc3JjL2xpYi92aXN1YWxpemF0aW9uL2xlZ2VuZC1pdGVtL2xlZ2VuZC1pdGVtLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFlBQVksRUFDWixLQUFLLEVBQ0wsTUFBTSxHQUNQLE1BQU0sZUFBZSxDQUFDOzs7OztBQVF2QixNQUFNLE9BQU8sbUJBQW1CO0lBTmhDO1FBUUUsVUFBSyxHQUFXLEVBQUUsQ0FBQztRQUduQixlQUFVLEdBQVcsRUFBRSxDQUFDO1FBR3hCLFVBQUssR0FBOEIsT0FBTyxDQUFDO1FBRzNDLGVBQVUsR0FBbUMsU0FBUyxDQUFDO1FBVXZELGNBQVMsR0FBWSxLQUFLLENBQUM7UUFHM0IsMkJBQXNCLEdBQVksSUFBSSxDQUFDO1FBR3ZDLGNBQVMsR0FBRyxJQUFJLFlBQVksRUFBRSxDQUFDO0tBS2hDO0lBaEJDLElBQUksZUFBZTtRQUNqQixPQUFPLE9BQU8sSUFBSSxDQUFDLFVBQVUsR0FBRyxDQUFDO0lBQ25DLENBQUM7SUFXRCxxQkFBcUI7UUFDbkIsT0FBTyxJQUFJLENBQUMsU0FBUyxJQUFJLElBQUksQ0FBQyxVQUFVLEtBQUssUUFBUSxDQUFDO0lBQ3hELENBQUM7O2dIQS9CVSxtQkFBbUI7b0dBQW5CLG1CQUFtQixrU0NkaEMscWlDQW9DQTsyRkR0QmEsbUJBQW1CO2tCQU4vQixTQUFTOytCQUNFLGlCQUFpQixtQkFHVix1QkFBdUIsQ0FBQyxNQUFNOzhCQUkvQyxLQUFLO3NCQURKLEtBQUs7Z0JBSU4sVUFBVTtzQkFEVCxLQUFLO2dCQUlOLEtBQUs7c0JBREosS0FBSztnQkFJTixVQUFVO3NCQURULEtBQUs7Z0JBSU4sV0FBVztzQkFEVixLQUFLO2dCQVFOLFNBQVM7c0JBRFIsS0FBSztnQkFJTixzQkFBc0I7c0JBRHJCLEtBQUs7Z0JBSU4sU0FBUztzQkFEUixNQUFNOztBQVFULFdBQWlCLG1CQUFtQjtJQUNyQiwwQkFBTSxHQUFHLENBQUMsT0FBTyxFQUFFLFNBQVMsQ0FBVSxDQUFDO0lBR3ZDLGdDQUFZLEdBQUcsQ0FBQyxTQUFTLEVBQUUsUUFBUSxFQUFFLFFBQVEsQ0FBVSxDQUFDO0FBRXZFLENBQUMsRUFOZ0IsbUJBQW1CLEtBQW5CLG1CQUFtQixRQU1uQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7XG4gIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICBDb21wb25lbnQsXG4gIEV2ZW50RW1pdHRlcixcbiAgSW5wdXQsXG4gIE91dHB1dCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3Jpdi1sZWdlbmQtaXRlbScsXG4gIHRlbXBsYXRlVXJsOiAnLi9sZWdlbmQtaXRlbS5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2xlZ2VuZC1pdGVtLmNvbXBvbmVudC5jc3MnXSxcbiAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG59KVxuZXhwb3J0IGNsYXNzIExlZ2VuZEl0ZW1Db21wb25lbnQge1xuICBASW5wdXQoKVxuICBsYWJlbDogc3RyaW5nID0gJyc7XG5cbiAgQElucHV0KClcbiAgY29sb3JUb2tlbjogc3RyaW5nID0gJyc7XG5cbiAgQElucHV0KClcbiAgc3R5bGU6IExlZ2VuZEl0ZW1Db21wb25lbnQuU3R5bGUgPSAnc29saWQnO1xuXG4gIEBJbnB1dCgpXG4gIHZpc2liaWxpdHk6IExlZ2VuZEl0ZW1Db21wb25lbnQuVmlzaWJpbGl0eSA9ICd2aXNpYmxlJztcblxuICBASW5wdXQoKVxuICBpY29uVG9vbHRpcD86IHN0cmluZztcblxuICBnZXQgYmFja2dyb3VuZENvbG9yKCk6IHN0cmluZyB7XG4gICAgcmV0dXJuIGB2YXIoJHt0aGlzLmNvbG9yVG9rZW59KWA7XG4gIH1cblxuICBASW5wdXQoKVxuICBjbGlja2FibGU6IGJvb2xlYW4gPSBmYWxzZTtcblxuICBASW5wdXQoKVxuICBzaG93Q2hlY2tXaGVuQ2xpY2thYmxlOiBib29sZWFuID0gdHJ1ZTtcblxuICBAT3V0cHV0KClcbiAgaXRlbUNsaWNrID0gbmV3IEV2ZW50RW1pdHRlcigpO1xuXG4gIGlzTGVnZW5kSXRlbUNsaWNrYWJsZSgpOiBib29sZWFuIHtcbiAgICByZXR1cm4gdGhpcy5jbGlja2FibGUgJiYgdGhpcy52aXNpYmlsaXR5ICE9PSAnbG9ja2VkJztcbiAgfVxufVxuXG5leHBvcnQgbmFtZXNwYWNlIExlZ2VuZEl0ZW1Db21wb25lbnQge1xuICBleHBvcnQgY29uc3QgU3R5bGVzID0gWydzb2xpZCcsICdzdHJpcGVkJ10gYXMgY29uc3Q7XG4gIGV4cG9ydCB0eXBlIFN0eWxlID0gKHR5cGVvZiBTdHlsZXMpW251bWJlcl07XG5cbiAgZXhwb3J0IGNvbnN0IFZpc2liaWxpdGllcyA9IFsndmlzaWJsZScsICdoaWRkZW4nLCAnbG9ja2VkJ10gYXMgY29uc3Q7XG4gIGV4cG9ydCB0eXBlIFZpc2liaWxpdHkgPSAodHlwZW9mIFZpc2liaWxpdGllcylbbnVtYmVyXTtcbn1cbiIsIjxidXR0b25cbiAgKGNsaWNrKT1cImlzTGVnZW5kSXRlbUNsaWNrYWJsZSgpID8gaXRlbUNsaWNrLmVtaXQoKSA6IG51bGxcIlxuICBbcml2VG9vbHRpcF09XCJpY29uVG9vbHRpcFwiXG4gIHR5cGU9XCJidXR0b25cIlxuICBbZGlzYWJsZWRdPVwidmlzaWJpbGl0eSA9PT0gJ2xvY2tlZCdcIlxuICBbY2xhc3MuY2xpY2thYmxlXT1cImNsaWNrYWJsZVwiXG4+XG4gIDxpXG4gICAgKm5nSWY9XCJ2aXNpYmlsaXR5ID09PSAndmlzaWJsZSdcIlxuICAgIFtjbGFzcy5zdHJpcGVkXT1cInN0eWxlID09PSAnc3RyaXBlZCdcIlxuICAgIFtzdHlsZS5iYWNrZ3JvdW5kLWNvbG9yXT1cImJhY2tncm91bmRDb2xvclwiXG4gICAgY2xhc3M9XCJvcGFjaXR5LWhvdmVyXCJcbiAgPlxuICAgIDxyaXYtaWNvblxuICAgICAgKm5nSWY9XCJjbGlja2FibGUgJiYgc2hvd0NoZWNrV2hlbkNsaWNrYWJsZVwiXG4gICAgICBuYW1lPVwiQ2hlY2tcIlxuICAgICAgW3NpemVdPVwiMTZcIlxuICAgICAgW3N0cm9rZVdpZHRoXT1cIjNcIlxuICAgICAgc3R5bGU9XCJjb2xvcjogdmFyKC0td2hpdGUtMTAwKVwiXG4gICAgPjwvcml2LWljb24+XG4gIDwvaT5cbiAgPGlcbiAgICAqbmdJZj1cInZpc2liaWxpdHkgPT09ICdoaWRkZW4nXCJcbiAgICBjbGFzcz1cImhpZGRlbi1sZWdlbmQtaXRlbSBvcGFjaXR5LWhvdmVyXCJcbiAgICBbY2xhc3Muc3RyaXBlZF09XCJzdHlsZSA9PT0gJ3N0cmlwZWQnXCJcbiAgICBbc3R5bGUuYm9yZGVyLWNvbG9yXT1cImJhY2tncm91bmRDb2xvclwiXG4gICAgW3N0eWxlLi0tYmFja2dyb3VuZC1jb2xvci1ob3Zlcl09XCJiYWNrZ3JvdW5kQ29sb3JcIlxuICA+PC9pPlxuICA8cml2LWljb24gKm5nSWY9XCJ2aXNpYmlsaXR5ID09PSAnbG9ja2VkJ1wiIG5hbWU9XCJMb2NrXCIgW3NpemVdPVwiMTZcIj48L3Jpdi1pY29uPlxuXG4gIDxzcGFuXG4gICAgW2NsYXNzLmxvdy1jb250cmFzdF09XCJ2aXNpYmlsaXR5ID09PSAnaGlkZGVuJyB8fCB2aXNpYmlsaXR5ID09PSAnbG9ja2VkJ1wiXG4gID5cbiAgICB7eyBsYWJlbCB9fVxuICA8L3NwYW4+XG48L2J1dHRvbj5cbiJdfQ==

package/esm2020/lib/visualization/stacked-row/stacked-row.component.mjs

@@ -264,7 +264,7 @@ export class StackedRowComponent {
     }
 }
 StackedRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StackedRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StackedRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: StackedRowComponent, selector: "riv-stacked-row", inputs: { input: "input", width: "width", height: "height", valueFormatter: "valueFormatter", zeroStateMessage: "zeroStateMessage" }, 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 draw\"\n    [attr.viewBox]=\"draw.viewBox\"\n  >\n    <defs>\n      <pattern\n        id=\"stripes\"\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"draw.rowHeight\"\n        [attr.height]=\"draw.rowHeight\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <line\n          [attr.x1]=\"0\"\n          [attr.y1]=\"0\"\n          [attr.x2]=\"draw.rowHeight\"\n          [attr.y2]=\"draw.rowHeight\"\n          stroke=\"var(--white-100)\"\n          stroke-width=\"1\"\n        ></line>\n      </pattern>\n    </defs>\n    <g *ngFor=\"let rowNameToDraw of draw.rowNames\">\n      <text\n        rivSVGTextTruncate\n        [text]=\"rowNameToDraw.label\"\n        [width]=\"SECTION_WIDTHS.ROW_NAME\"\n        class=\"row-title\"\n        [attr.x]=\"rowNameToDraw.x\"\n        [attr.y]=\"rowNameToDraw.y\"\n      ></text>\n    </g>\n    <g *ngFor=\"let tick of draw.xTicks\">\n      <rect\n        class=\"tick\"\n        [attr.x]=\"draw.xScale(tick)\"\n        y=\"0\"\n        width=\"1\"\n        height=\"100%\"\n      ></rect>\n      <text\n        class=\"tick-label\"\n        [attr.x]=\"draw.xScale(tick)\"\n        [attr.y]=\"locationOfXAxisTick()\"\n        dx=\"4\"\n        dy=\"-4\"\n      >\n        {{ valueFormatter(tick) }}\n      </text>\n    </g>\n    <g\n      *ngFor=\"let rect of draw.rects\"\n      (mouseenter)=\"hoveredBand$.next({ rowName: rect.rowName, event: $event })\"\n      (mouseleave)=\"hoveredBand$.next(null)\"\n    >\n      <rect\n        class=\"row\"\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)?.rowName !== rect.rowName\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    <g *ngFor=\"let rowTotalToDraw of draw.rowTotals\">\n      <text\n        class=\"row-total\"\n        [attr.x]=\"rowTotalToDraw.x\"\n        [attr.y]=\"rowTotalToDraw.y\"\n        text-anchor=\"end\"\n      >\n        {{ rowTotalToDraw.label }}\n      </text>\n    </g>\n  </svg>\n  <legend *ngIf=\"drawData$ | async; let draw\">\n    <riv-legend-item\n      *ngFor=\"let item of draw.legendItems\"\n      [label]=\"item.label\"\n      [colorToken]=\"item.colorToken\"\n      [style]=\"item.style ? item.style : 'solid'\"\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]=\"'bottom-center'\"\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 [message]=\"zeroStateMessage\"></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)}.row-title{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.row-total{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);fill:var(--type-light-low-contrast)}.row{transition:opacity var(--short-transition)}.row.blurred{opacity:.4}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.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: i2.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: i3.CalloutDirective, selector: "[riv-callout]" }, { kind: "component", type: i4.LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable"], outputs: ["itemClick"] }, { kind: "directive", type: i5.SVGTextTruncateDirective, selector: "svg text[rivSVGTextTruncate]", inputs: ["text", "width"] }, { kind: "component", type: i6.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+StackedRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: StackedRowComponent, selector: "riv-stacked-row", inputs: { input: "input", width: "width", height: "height", valueFormatter: "valueFormatter", zeroStateMessage: "zeroStateMessage" }, 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 draw\"\n    [attr.viewBox]=\"draw.viewBox\"\n  >\n    <defs>\n      <pattern\n        id=\"stripes\"\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"draw.rowHeight\"\n        [attr.height]=\"draw.rowHeight\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <line\n          [attr.x1]=\"0\"\n          [attr.y1]=\"0\"\n          [attr.x2]=\"draw.rowHeight\"\n          [attr.y2]=\"draw.rowHeight\"\n          stroke=\"var(--white-100)\"\n          stroke-width=\"1\"\n        ></line>\n      </pattern>\n    </defs>\n    <g *ngFor=\"let rowNameToDraw of draw.rowNames\">\n      <text\n        rivSVGTextTruncate\n        [text]=\"rowNameToDraw.label\"\n        [width]=\"SECTION_WIDTHS.ROW_NAME\"\n        class=\"row-title\"\n        [attr.x]=\"rowNameToDraw.x\"\n        [attr.y]=\"rowNameToDraw.y\"\n      ></text>\n    </g>\n    <g *ngFor=\"let tick of draw.xTicks\">\n      <rect\n        class=\"tick\"\n        [attr.x]=\"draw.xScale(tick)\"\n        y=\"0\"\n        width=\"1\"\n        height=\"100%\"\n      ></rect>\n      <text\n        class=\"tick-label\"\n        [attr.x]=\"draw.xScale(tick)\"\n        [attr.y]=\"locationOfXAxisTick()\"\n        dx=\"4\"\n        dy=\"-4\"\n      >\n        {{ valueFormatter(tick) }}\n      </text>\n    </g>\n    <g\n      *ngFor=\"let rect of draw.rects\"\n      (mouseenter)=\"hoveredBand$.next({ rowName: rect.rowName, event: $event })\"\n      (mouseleave)=\"hoveredBand$.next(null)\"\n    >\n      <rect\n        class=\"row\"\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)?.rowName !== rect.rowName\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    <g *ngFor=\"let rowTotalToDraw of draw.rowTotals\">\n      <text\n        class=\"row-total\"\n        [attr.x]=\"rowTotalToDraw.x\"\n        [attr.y]=\"rowTotalToDraw.y\"\n        text-anchor=\"end\"\n      >\n        {{ rowTotalToDraw.label }}\n      </text>\n    </g>\n  </svg>\n  <legend *ngIf=\"drawData$ | async; let draw\">\n    <riv-legend-item\n      *ngFor=\"let item of draw.legendItems\"\n      [label]=\"item.label\"\n      [colorToken]=\"item.colorToken\"\n      [style]=\"item.style ? item.style : 'solid'\"\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]=\"'bottom-center'\"\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 [message]=\"zeroStateMessage\"></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)}.row-title{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.row-total{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);fill:var(--type-light-low-contrast)}.row{transition:opacity var(--short-transition)}.row.blurred{opacity:.4}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.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: i2.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: i3.CalloutDirective, selector: "[riv-callout]" }, { kind: "component", type: i4.LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "directive", type: i5.SVGTextTruncateDirective, selector: "svg text[rivSVGTextTruncate]", inputs: ["text", "width"] }, { kind: "component", type: i6.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: StackedRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-stacked-row', 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 draw\"\n    [attr.viewBox]=\"draw.viewBox\"\n  >\n    <defs>\n      <pattern\n        id=\"stripes\"\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"draw.rowHeight\"\n        [attr.height]=\"draw.rowHeight\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <line\n          [attr.x1]=\"0\"\n          [attr.y1]=\"0\"\n          [attr.x2]=\"draw.rowHeight\"\n          [attr.y2]=\"draw.rowHeight\"\n          stroke=\"var(--white-100)\"\n          stroke-width=\"1\"\n        ></line>\n      </pattern>\n    </defs>\n    <g *ngFor=\"let rowNameToDraw of draw.rowNames\">\n      <text\n        rivSVGTextTruncate\n        [text]=\"rowNameToDraw.label\"\n        [width]=\"SECTION_WIDTHS.ROW_NAME\"\n        class=\"row-title\"\n        [attr.x]=\"rowNameToDraw.x\"\n        [attr.y]=\"rowNameToDraw.y\"\n      ></text>\n    </g>\n    <g *ngFor=\"let tick of draw.xTicks\">\n      <rect\n        class=\"tick\"\n        [attr.x]=\"draw.xScale(tick)\"\n        y=\"0\"\n        width=\"1\"\n        height=\"100%\"\n      ></rect>\n      <text\n        class=\"tick-label\"\n        [attr.x]=\"draw.xScale(tick)\"\n        [attr.y]=\"locationOfXAxisTick()\"\n        dx=\"4\"\n        dy=\"-4\"\n      >\n        {{ valueFormatter(tick) }}\n      </text>\n    </g>\n    <g\n      *ngFor=\"let rect of draw.rects\"\n      (mouseenter)=\"hoveredBand$.next({ rowName: rect.rowName, event: $event })\"\n      (mouseleave)=\"hoveredBand$.next(null)\"\n    >\n      <rect\n        class=\"row\"\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)?.rowName !== rect.rowName\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    <g *ngFor=\"let rowTotalToDraw of draw.rowTotals\">\n      <text\n        class=\"row-total\"\n        [attr.x]=\"rowTotalToDraw.x\"\n        [attr.y]=\"rowTotalToDraw.y\"\n        text-anchor=\"end\"\n      >\n        {{ rowTotalToDraw.label }}\n      </text>\n    </g>\n  </svg>\n  <legend *ngIf=\"drawData$ | async; let draw\">\n    <riv-legend-item\n      *ngFor=\"let item of draw.legendItems\"\n      [label]=\"item.label\"\n      [colorToken]=\"item.colorToken\"\n      [style]=\"item.style ? item.style : 'solid'\"\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]=\"'bottom-center'\"\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 [message]=\"zeroStateMessage\"></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)}.row-title{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.row-total{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);fill:var(--type-light-low-contrast)}.row{transition:opacity var(--short-transition)}.row.blurred{opacity:.4}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.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"] }]

package/esm2020/lib/visualization/time-series/time-series.component.mjs

@@ -283,7 +283,7 @@ export 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", zeroStateMessage: "zeroStateMessage", interval: "interval", allowLegendToggle: "allowLegendToggle" }, viewQueries: [{ propertyName: "controls", first: true, predicate: ["controls"], descendants: true }], 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        *ngIf=\"d.x.xScale(tick.value) >= 0\"\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        *ngIf=\"series.visibility != 'hidden'\"\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      <ng-container *ngFor=\"let marker of series.markers\">\n        <circle\n          *ngIf=\"series.visibility != 'hidden'\"\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-container>\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      [visibility]=\"item.visibility\"\n      [clickable]=\"allowLegendToggle\"\n      (itemClick)=\"\n        allowLegendToggle\n          ? toggleVisibility$.next({\n              label: item.label,\n              visibility: item.visibility == 'hidden' ? 'visible' : 'hidden'\n            })\n          : null\n      \"\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 [message]=\"zeroStateMessage\"></riv-zero-state>\n</ng-template>\n\n<ng-template #controls>\n  <riv-single-select\n    [groups]=\"intervalOptions$ | async | rivOptionGroup\"\n    [selectedOption]=\"selectedIntervalOption$ | async\"\n    (selectedOptionChange)=\"setIntervalOption($event)\"\n  ></riv-single-select>\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-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.x-minor-tick-label{font-size:var(--type-2-font-size);line-height:var(--type-2-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: i2.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: i3.CalloutDirective, selector: "[riv-callout]" }, { kind: "component", type: i4.LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable"], outputs: ["itemClick"] }, { kind: "component", type: i5.SingleSelectComponent, selector: "riv-single-select", inputs: ["groups", "selectedOption", "filterabilityOptions", "loading", "locked", "noOptionsMessage", "nodeTemplate", "triggerTemplate", "placeholder", "disabled"], outputs: ["filterQueryChange", "selectedOptionChange"] }, { kind: "component", type: i6.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i7.OptionGroupPipe, name: "rivOptionGroup" }], 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", zeroStateMessage: "zeroStateMessage", interval: "interval", allowLegendToggle: "allowLegendToggle" }, viewQueries: [{ propertyName: "controls", first: true, predicate: ["controls"], descendants: true }], 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        *ngIf=\"d.x.xScale(tick.value) >= 0\"\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        *ngIf=\"series.visibility != 'hidden'\"\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      <ng-container *ngFor=\"let marker of series.markers\">\n        <circle\n          *ngIf=\"series.visibility != 'hidden'\"\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-container>\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      [visibility]=\"item.visibility\"\n      [clickable]=\"allowLegendToggle\"\n      (itemClick)=\"\n        allowLegendToggle\n          ? toggleVisibility$.next({\n              label: item.label,\n              visibility: item.visibility == 'hidden' ? 'visible' : 'hidden'\n            })\n          : null\n      \"\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 [message]=\"zeroStateMessage\"></riv-zero-state>\n</ng-template>\n\n<ng-template #controls>\n  <riv-single-select\n    [groups]=\"intervalOptions$ | async | rivOptionGroup\"\n    [selectedOption]=\"selectedIntervalOption$ | async\"\n    (selectedOptionChange)=\"setIntervalOption($event)\"\n  ></riv-single-select>\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-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.x-minor-tick-label{font-size:var(--type-2-font-size);line-height:var(--type-2-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: i2.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: i3.CalloutDirective, selector: "[riv-callout]" }, { kind: "component", type: i4.LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "component", type: i5.SingleSelectComponent, selector: "riv-single-select", inputs: ["groups", "selectedOption", "filterabilityOptions", "loading", "locked", "noOptionsMessage", "nodeTemplate", "triggerTemplate", "placeholder", "disabled"], outputs: ["filterQueryChange", "selectedOptionChange"] }, { kind: "component", type: i6.ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: i7.OptionGroupPipe, name: "rivOptionGroup" }], 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        *ngIf=\"d.x.xScale(tick.value) >= 0\"\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        *ngIf=\"series.visibility != 'hidden'\"\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      <ng-container *ngFor=\"let marker of series.markers\">\n        <circle\n          *ngIf=\"series.visibility != 'hidden'\"\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-container>\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      [visibility]=\"item.visibility\"\n      [clickable]=\"allowLegendToggle\"\n      (itemClick)=\"\n        allowLegendToggle\n          ? toggleVisibility$.next({\n              label: item.label,\n              visibility: item.visibility == 'hidden' ? 'visible' : 'hidden'\n            })\n          : null\n      \"\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 [message]=\"zeroStateMessage\"></riv-zero-state>\n</ng-template>\n\n<ng-template #controls>\n  <riv-single-select\n    [groups]=\"intervalOptions$ | async | rivOptionGroup\"\n    [selectedOption]=\"selectedIntervalOption$ | async\"\n    (selectedOptionChange)=\"setIntervalOption($event)\"\n  ></riv-single-select>\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-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.x-minor-tick-label{font-size:var(--type-2-font-size);line-height:var(--type-2-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"] }]

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

@@ -2491,6 +2491,7 @@ class LegendItemComponent {
         this.style = 'solid';
         this.visibility = 'visible';
         this.clickable = false;
+        this.showCheckWhenClickable = true;
         this.itemClick = new EventEmitter();
     }
     get backgroundColor() {
@@ -2501,10 +2502,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", iconTooltip: "iconTooltip", clickable: "clickable" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button\n  (click)=\"isLegendItemClickable() ? itemClick.emit() : null\"\n  [rivTooltip]=\"iconTooltip\"\n  type=\"button\"\n  [disabled]=\"visibility === 'locked'\"\n  [class.clickable]=\"clickable\"\n>\n  <i\n    *ngIf=\"visibility === 'visible'\"\n    [class.striped]=\"style === 'striped'\"\n    [style.background-color]=\"backgroundColor\"\n    class=\"opacity-hover\"\n  ></i>\n  <i\n    *ngIf=\"visibility === 'hidden'\"\n    class=\"hidden-legend-item opacity-hover\"\n    [class.striped]=\"style === 'striped'\"\n    [style.border-color]=\"backgroundColor\"\n    [style.--background-color-hover]=\"backgroundColor\"\n  ></i>\n  <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n\n  <span\n    [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\"\n  >\n    {{ label }}\n  </span>\n</button>\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;gap:var(--size-small);align-items:center;cursor:default}.hidden-legend-item{border-width:var(--border-width);border-style:solid;background-color:transparent}button:hover.clickable .hidden-legend-item{background-color:var(--background-color-hover)}button:not([disabled]).clickable:hover{cursor:pointer}button:not([disabled]).clickable:hover .opacity-hover{opacity:.6}button[disabled]{cursor:not-allowed}button[disabled] .low-contrast{color:var(--type-light-disabled)}button:not(:hover) .low-contrast{color:var(--type-light-disabled)}button:not(.clickable):hover .low-contrast{color:var(--type-light-disabled)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+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", clickable: "clickable", showCheckWhenClickable: "showCheckWhenClickable" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button\n  (click)=\"isLegendItemClickable() ? itemClick.emit() : null\"\n  [rivTooltip]=\"iconTooltip\"\n  type=\"button\"\n  [disabled]=\"visibility === 'locked'\"\n  [class.clickable]=\"clickable\"\n>\n  <i\n    *ngIf=\"visibility === 'visible'\"\n    [class.striped]=\"style === 'striped'\"\n    [style.background-color]=\"backgroundColor\"\n    class=\"opacity-hover\"\n  >\n    <riv-icon\n      *ngIf=\"clickable && showCheckWhenClickable\"\n      name=\"Check\"\n      [size]=\"16\"\n      [strokeWidth]=\"3\"\n      style=\"color: var(--white-100)\"\n    ></riv-icon>\n  </i>\n  <i\n    *ngIf=\"visibility === 'hidden'\"\n    class=\"hidden-legend-item opacity-hover\"\n    [class.striped]=\"style === 'striped'\"\n    [style.border-color]=\"backgroundColor\"\n    [style.--background-color-hover]=\"backgroundColor\"\n  ></i>\n  <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n\n  <span\n    [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\"\n  >\n    {{ label }}\n  </span>\n</button>\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;gap:var(--size-small);align-items:center;cursor:default}.hidden-legend-item{border-width:var(--border-width);border-style:solid;background-color:transparent}button:hover.clickable .hidden-legend-item{background-color:var(--background-color-hover)}button:not([disabled]).clickable:hover{cursor:pointer}button:not([disabled]).clickable:hover .opacity-hover{opacity:.6}button[disabled]{cursor:not-allowed}button[disabled] .low-contrast{color:var(--type-light-disabled)}button:not(:hover) .low-contrast{color:var(--type-light-disabled)}button:not(.clickable):hover .low-contrast{color:var(--type-light-disabled)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegendItemComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  (click)=\"isLegendItemClickable() ? itemClick.emit() : null\"\n  [rivTooltip]=\"iconTooltip\"\n  type=\"button\"\n  [disabled]=\"visibility === 'locked'\"\n  [class.clickable]=\"clickable\"\n>\n  <i\n    *ngIf=\"visibility === 'visible'\"\n    [class.striped]=\"style === 'striped'\"\n    [style.background-color]=\"backgroundColor\"\n    class=\"opacity-hover\"\n  ></i>\n  <i\n    *ngIf=\"visibility === 'hidden'\"\n    class=\"hidden-legend-item opacity-hover\"\n    [class.striped]=\"style === 'striped'\"\n    [style.border-color]=\"backgroundColor\"\n    [style.--background-color-hover]=\"backgroundColor\"\n  ></i>\n  <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n\n  <span\n    [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\"\n  >\n    {{ label }}\n  </span>\n</button>\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;gap:var(--size-small);align-items:center;cursor:default}.hidden-legend-item{border-width:var(--border-width);border-style:solid;background-color:transparent}button:hover.clickable .hidden-legend-item{background-color:var(--background-color-hover)}button:not([disabled]).clickable:hover{cursor:pointer}button:not([disabled]).clickable:hover .opacity-hover{opacity:.6}button[disabled]{cursor:not-allowed}button[disabled] .low-contrast{color:var(--type-light-disabled)}button:not(:hover) .low-contrast{color:var(--type-light-disabled)}button:not(.clickable):hover .low-contrast{color:var(--type-light-disabled)}\n"] }]
+            args: [{ selector: 'riv-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  (click)=\"isLegendItemClickable() ? itemClick.emit() : null\"\n  [rivTooltip]=\"iconTooltip\"\n  type=\"button\"\n  [disabled]=\"visibility === 'locked'\"\n  [class.clickable]=\"clickable\"\n>\n  <i\n    *ngIf=\"visibility === 'visible'\"\n    [class.striped]=\"style === 'striped'\"\n    [style.background-color]=\"backgroundColor\"\n    class=\"opacity-hover\"\n  >\n    <riv-icon\n      *ngIf=\"clickable && showCheckWhenClickable\"\n      name=\"Check\"\n      [size]=\"16\"\n      [strokeWidth]=\"3\"\n      style=\"color: var(--white-100)\"\n    ></riv-icon>\n  </i>\n  <i\n    *ngIf=\"visibility === 'hidden'\"\n    class=\"hidden-legend-item opacity-hover\"\n    [class.striped]=\"style === 'striped'\"\n    [style.border-color]=\"backgroundColor\"\n    [style.--background-color-hover]=\"backgroundColor\"\n  ></i>\n  <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n\n  <span\n    [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\"\n  >\n    {{ label }}\n  </span>\n</button>\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;gap:var(--size-small);align-items:center;cursor:default}.hidden-legend-item{border-width:var(--border-width);border-style:solid;background-color:transparent}button:hover.clickable .hidden-legend-item{background-color:var(--background-color-hover)}button:not([disabled]).clickable:hover{cursor:pointer}button:not([disabled]).clickable:hover .opacity-hover{opacity:.6}button[disabled]{cursor:not-allowed}button[disabled] .low-contrast{color:var(--type-light-disabled)}button:not(:hover) .low-contrast{color:var(--type-light-disabled)}button:not(.clickable):hover .low-contrast{color:var(--type-light-disabled)}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], colorToken: [{
@@ -2517,6 +2518,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], clickable: [{
                 type: Input
+            }], showCheckWhenClickable: [{
+                type: Input
             }], itemClick: [{
                 type: Output
             }] } });
@@ -3256,7 +3259,7 @@ class StackedRowComponent {
     }
 }
 StackedRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StackedRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StackedRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: StackedRowComponent, selector: "riv-stacked-row", inputs: { input: "input", width: "width", height: "height", valueFormatter: "valueFormatter", zeroStateMessage: "zeroStateMessage" }, 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 draw\"\n    [attr.viewBox]=\"draw.viewBox\"\n  >\n    <defs>\n      <pattern\n        id=\"stripes\"\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"draw.rowHeight\"\n        [attr.height]=\"draw.rowHeight\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <line\n          [attr.x1]=\"0\"\n          [attr.y1]=\"0\"\n          [attr.x2]=\"draw.rowHeight\"\n          [attr.y2]=\"draw.rowHeight\"\n          stroke=\"var(--white-100)\"\n          stroke-width=\"1\"\n        ></line>\n      </pattern>\n    </defs>\n    <g *ngFor=\"let rowNameToDraw of draw.rowNames\">\n      <text\n        rivSVGTextTruncate\n        [text]=\"rowNameToDraw.label\"\n        [width]=\"SECTION_WIDTHS.ROW_NAME\"\n        class=\"row-title\"\n        [attr.x]=\"rowNameToDraw.x\"\n        [attr.y]=\"rowNameToDraw.y\"\n      ></text>\n    </g>\n    <g *ngFor=\"let tick of draw.xTicks\">\n      <rect\n        class=\"tick\"\n        [attr.x]=\"draw.xScale(tick)\"\n        y=\"0\"\n        width=\"1\"\n        height=\"100%\"\n      ></rect>\n      <text\n        class=\"tick-label\"\n        [attr.x]=\"draw.xScale(tick)\"\n        [attr.y]=\"locationOfXAxisTick()\"\n        dx=\"4\"\n        dy=\"-4\"\n      >\n        {{ valueFormatter(tick) }}\n      </text>\n    </g>\n    <g\n      *ngFor=\"let rect of draw.rects\"\n      (mouseenter)=\"hoveredBand$.next({ rowName: rect.rowName, event: $event })\"\n      (mouseleave)=\"hoveredBand$.next(null)\"\n    >\n      <rect\n        class=\"row\"\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)?.rowName !== rect.rowName\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    <g *ngFor=\"let rowTotalToDraw of draw.rowTotals\">\n      <text\n        class=\"row-total\"\n        [attr.x]=\"rowTotalToDraw.x\"\n        [attr.y]=\"rowTotalToDraw.y\"\n        text-anchor=\"end\"\n      >\n        {{ rowTotalToDraw.label }}\n      </text>\n    </g>\n  </svg>\n  <legend *ngIf=\"drawData$ | async; let draw\">\n    <riv-legend-item\n      *ngFor=\"let item of draw.legendItems\"\n      [label]=\"item.label\"\n      [colorToken]=\"item.colorToken\"\n      [style]=\"item.style ? item.style : 'solid'\"\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]=\"'bottom-center'\"\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 [message]=\"zeroStateMessage\"></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)}.row-title{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.row-total{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);fill:var(--type-light-low-contrast)}.row{transition:opacity var(--short-transition)}.row.blurred{opacity:.4}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.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: LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable"], outputs: ["itemClick"] }, { kind: "directive", type: SVGTextTruncateDirective, selector: "svg text[rivSVGTextTruncate]", inputs: ["text", "width"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+StackedRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: StackedRowComponent, selector: "riv-stacked-row", inputs: { input: "input", width: "width", height: "height", valueFormatter: "valueFormatter", zeroStateMessage: "zeroStateMessage" }, 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 draw\"\n    [attr.viewBox]=\"draw.viewBox\"\n  >\n    <defs>\n      <pattern\n        id=\"stripes\"\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"draw.rowHeight\"\n        [attr.height]=\"draw.rowHeight\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <line\n          [attr.x1]=\"0\"\n          [attr.y1]=\"0\"\n          [attr.x2]=\"draw.rowHeight\"\n          [attr.y2]=\"draw.rowHeight\"\n          stroke=\"var(--white-100)\"\n          stroke-width=\"1\"\n        ></line>\n      </pattern>\n    </defs>\n    <g *ngFor=\"let rowNameToDraw of draw.rowNames\">\n      <text\n        rivSVGTextTruncate\n        [text]=\"rowNameToDraw.label\"\n        [width]=\"SECTION_WIDTHS.ROW_NAME\"\n        class=\"row-title\"\n        [attr.x]=\"rowNameToDraw.x\"\n        [attr.y]=\"rowNameToDraw.y\"\n      ></text>\n    </g>\n    <g *ngFor=\"let tick of draw.xTicks\">\n      <rect\n        class=\"tick\"\n        [attr.x]=\"draw.xScale(tick)\"\n        y=\"0\"\n        width=\"1\"\n        height=\"100%\"\n      ></rect>\n      <text\n        class=\"tick-label\"\n        [attr.x]=\"draw.xScale(tick)\"\n        [attr.y]=\"locationOfXAxisTick()\"\n        dx=\"4\"\n        dy=\"-4\"\n      >\n        {{ valueFormatter(tick) }}\n      </text>\n    </g>\n    <g\n      *ngFor=\"let rect of draw.rects\"\n      (mouseenter)=\"hoveredBand$.next({ rowName: rect.rowName, event: $event })\"\n      (mouseleave)=\"hoveredBand$.next(null)\"\n    >\n      <rect\n        class=\"row\"\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)?.rowName !== rect.rowName\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    <g *ngFor=\"let rowTotalToDraw of draw.rowTotals\">\n      <text\n        class=\"row-total\"\n        [attr.x]=\"rowTotalToDraw.x\"\n        [attr.y]=\"rowTotalToDraw.y\"\n        text-anchor=\"end\"\n      >\n        {{ rowTotalToDraw.label }}\n      </text>\n    </g>\n  </svg>\n  <legend *ngIf=\"drawData$ | async; let draw\">\n    <riv-legend-item\n      *ngFor=\"let item of draw.legendItems\"\n      [label]=\"item.label\"\n      [colorToken]=\"item.colorToken\"\n      [style]=\"item.style ? item.style : 'solid'\"\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]=\"'bottom-center'\"\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 [message]=\"zeroStateMessage\"></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)}.row-title{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.row-total{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);fill:var(--type-light-low-contrast)}.row{transition:opacity var(--short-transition)}.row.blurred{opacity:.4}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.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: LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "directive", type: SVGTextTruncateDirective, selector: "svg text[rivSVGTextTruncate]", inputs: ["text", "width"] }, { 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: StackedRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-stacked-row', 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 draw\"\n    [attr.viewBox]=\"draw.viewBox\"\n  >\n    <defs>\n      <pattern\n        id=\"stripes\"\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"draw.rowHeight\"\n        [attr.height]=\"draw.rowHeight\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <line\n          [attr.x1]=\"0\"\n          [attr.y1]=\"0\"\n          [attr.x2]=\"draw.rowHeight\"\n          [attr.y2]=\"draw.rowHeight\"\n          stroke=\"var(--white-100)\"\n          stroke-width=\"1\"\n        ></line>\n      </pattern>\n    </defs>\n    <g *ngFor=\"let rowNameToDraw of draw.rowNames\">\n      <text\n        rivSVGTextTruncate\n        [text]=\"rowNameToDraw.label\"\n        [width]=\"SECTION_WIDTHS.ROW_NAME\"\n        class=\"row-title\"\n        [attr.x]=\"rowNameToDraw.x\"\n        [attr.y]=\"rowNameToDraw.y\"\n      ></text>\n    </g>\n    <g *ngFor=\"let tick of draw.xTicks\">\n      <rect\n        class=\"tick\"\n        [attr.x]=\"draw.xScale(tick)\"\n        y=\"0\"\n        width=\"1\"\n        height=\"100%\"\n      ></rect>\n      <text\n        class=\"tick-label\"\n        [attr.x]=\"draw.xScale(tick)\"\n        [attr.y]=\"locationOfXAxisTick()\"\n        dx=\"4\"\n        dy=\"-4\"\n      >\n        {{ valueFormatter(tick) }}\n      </text>\n    </g>\n    <g\n      *ngFor=\"let rect of draw.rects\"\n      (mouseenter)=\"hoveredBand$.next({ rowName: rect.rowName, event: $event })\"\n      (mouseleave)=\"hoveredBand$.next(null)\"\n    >\n      <rect\n        class=\"row\"\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)?.rowName !== rect.rowName\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    <g *ngFor=\"let rowTotalToDraw of draw.rowTotals\">\n      <text\n        class=\"row-total\"\n        [attr.x]=\"rowTotalToDraw.x\"\n        [attr.y]=\"rowTotalToDraw.y\"\n        text-anchor=\"end\"\n      >\n        {{ rowTotalToDraw.label }}\n      </text>\n    </g>\n  </svg>\n  <legend *ngIf=\"drawData$ | async; let draw\">\n    <riv-legend-item\n      *ngFor=\"let item of draw.legendItems\"\n      [label]=\"item.label\"\n      [colorToken]=\"item.colorToken\"\n      [style]=\"item.style ? item.style : 'solid'\"\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]=\"'bottom-center'\"\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 [message]=\"zeroStateMessage\"></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)}.row-title{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.row-total{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);fill:var(--type-light-low-contrast)}.row{transition:opacity var(--short-transition)}.row.blurred{opacity:.4}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline}.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"] }]
@@ -3542,7 +3545,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", zeroStateMessage: "zeroStateMessage", interval: "interval", allowLegendToggle: "allowLegendToggle" }, viewQueries: [{ propertyName: "controls", first: true, predicate: ["controls"], descendants: true }], 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        *ngIf=\"d.x.xScale(tick.value) >= 0\"\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        *ngIf=\"series.visibility != 'hidden'\"\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      <ng-container *ngFor=\"let marker of series.markers\">\n        <circle\n          *ngIf=\"series.visibility != 'hidden'\"\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-container>\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      [visibility]=\"item.visibility\"\n      [clickable]=\"allowLegendToggle\"\n      (itemClick)=\"\n        allowLegendToggle\n          ? toggleVisibility$.next({\n              label: item.label,\n              visibility: item.visibility == 'hidden' ? 'visible' : 'hidden'\n            })\n          : null\n      \"\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 [message]=\"zeroStateMessage\"></riv-zero-state>\n</ng-template>\n\n<ng-template #controls>\n  <riv-single-select\n    [groups]=\"intervalOptions$ | async | rivOptionGroup\"\n    [selectedOption]=\"selectedIntervalOption$ | async\"\n    (selectedOptionChange)=\"setIntervalOption($event)\"\n  ></riv-single-select>\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-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.x-minor-tick-label{font-size:var(--type-2-font-size);line-height:var(--type-2-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", "clickable"], outputs: ["itemClick"] }, { kind: "component", type: SingleSelectComponent, selector: "riv-single-select", inputs: ["groups", "selectedOption", "filterabilityOptions", "loading", "locked", "noOptionsMessage", "nodeTemplate", "triggerTemplate", "placeholder", "disabled"], outputs: ["filterQueryChange", "selectedOptionChange"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: OptionGroupPipe, name: "rivOptionGroup" }], 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", zeroStateMessage: "zeroStateMessage", interval: "interval", allowLegendToggle: "allowLegendToggle" }, viewQueries: [{ propertyName: "controls", first: true, predicate: ["controls"], descendants: true }], 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        *ngIf=\"d.x.xScale(tick.value) >= 0\"\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        *ngIf=\"series.visibility != 'hidden'\"\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      <ng-container *ngFor=\"let marker of series.markers\">\n        <circle\n          *ngIf=\"series.visibility != 'hidden'\"\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-container>\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      [visibility]=\"item.visibility\"\n      [clickable]=\"allowLegendToggle\"\n      (itemClick)=\"\n        allowLegendToggle\n          ? toggleVisibility$.next({\n              label: item.label,\n              visibility: item.visibility == 'hidden' ? 'visible' : 'hidden'\n            })\n          : null\n      \"\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 [message]=\"zeroStateMessage\"></riv-zero-state>\n</ng-template>\n\n<ng-template #controls>\n  <riv-single-select\n    [groups]=\"intervalOptions$ | async | rivOptionGroup\"\n    [selectedOption]=\"selectedIntervalOption$ | async\"\n    (selectedOptionChange)=\"setIntervalOption($event)\"\n  ></riv-single-select>\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-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.x-minor-tick-label{font-size:var(--type-2-font-size);line-height:var(--type-2-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", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "component", type: SingleSelectComponent, selector: "riv-single-select", inputs: ["groups", "selectedOption", "filterabilityOptions", "loading", "locked", "noOptionsMessage", "nodeTemplate", "triggerTemplate", "placeholder", "disabled"], outputs: ["filterQueryChange", "selectedOptionChange"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.DatePipe, name: "date" }, { kind: "pipe", type: OptionGroupPipe, name: "rivOptionGroup" }], 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        *ngIf=\"d.x.xScale(tick.value) >= 0\"\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        *ngIf=\"series.visibility != 'hidden'\"\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      <ng-container *ngFor=\"let marker of series.markers\">\n        <circle\n          *ngIf=\"series.visibility != 'hidden'\"\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-container>\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      [visibility]=\"item.visibility\"\n      [clickable]=\"allowLegendToggle\"\n      (itemClick)=\"\n        allowLegendToggle\n          ? toggleVisibility$.next({\n              label: item.label,\n              visibility: item.visibility == 'hidden' ? 'visible' : 'hidden'\n            })\n          : null\n      \"\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 [message]=\"zeroStateMessage\"></riv-zero-state>\n</ng-template>\n\n<ng-template #controls>\n  <riv-single-select\n    [groups]=\"intervalOptions$ | async | rivOptionGroup\"\n    [selectedOption]=\"selectedIntervalOption$ | async\"\n    (selectedOptionChange)=\"setIntervalOption($event)\"\n  ></riv-single-select>\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-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.x-minor-tick-label{font-size:var(--type-2-font-size);line-height:var(--type-2-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"] }]