@rivet-health/design-system 5.2.2 → 5.4.0

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

@@ -3,7 +3,7 @@ import { Component, ChangeDetectionStrategy, Input, HostBinding, Pipe, Injectabl
 import * as i1 from '@angular/common';
 import { DatePipe as DatePipe$1, DecimalPipe, CurrencyPipe, PercentPipe, CommonModule } from '@angular/common';
 import { timeYears, timeYear, timeMonths, timeMonth, timeDays, timeDay, timeSunday, timeWeek, utcYear, utcMonth, utcWeek, utcDay } from 'd3-time';
-import { BehaviorSubject, debounceTime, switchMap, from, map, startWith, pairwise, combineLatest, shareReplay, Subject, merge, scan, filter, distinctUntilChanged } from 'rxjs';
+import { BehaviorSubject, combineLatest, map, shareReplay, Subject, merge, scan, startWith, filter, distinctUntilChanged, take, skip, debounceTime } from 'rxjs';
 import { timeFormat, utcFormat } from 'd3-time-format';
 import Fuse from 'fuse.js';
 import { pie, arc, area, stack, line } from 'd3-shape';
@@ -1181,15 +1181,23 @@ class LocalStorage extends BehaviorSubject {
 }
 
 class HelpComponent {
+    constructor() {
+        this.size = 16;
+    }
 }
 HelpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HelpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HelpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: HelpComponent, selector: "riv-help", inputs: { help: "help" }, ngImport: i0, template: "<riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"16\"></riv-icon>\n", styles: ["riv-icon{line-height:0}\n"], dependencies: [{ 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 });
+HelpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: HelpComponent, selector: "riv-help", inputs: { help: "help", size: "size" }, ngImport: i0, template: "<riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"size\"></riv-icon>\n", styles: ["riv-icon{line-height:0}\n"], dependencies: [{ 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: HelpComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-help', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"16\"></riv-icon>\n", styles: ["riv-icon{line-height:0}\n"] }]
+            args: [{ selector: 'riv-help', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"size\"></riv-icon>\n", styles: ["riv-icon{line-height:0}\n"] }]
         }], propDecorators: { help: [{
                 type: Input
+            }], size: [{
+                type: Input
             }] } });
+(function (HelpComponent) {
+    HelpComponent.Sizes = [12, 16];
+})(HelpComponent || (HelpComponent = {}));
 
 class LinkComponent {
     constructor() {
@@ -1221,7 +1229,7 @@ class InputLabelComponent {
     }
 }
 InputLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-InputLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: InputLabelComponent, selector: "riv-input-label", inputs: { label: "label", help: "help", required: "required", labelActionText: "labelActionText" }, outputs: { labelAction: "labelAction" }, ngImport: i0, template: "<label *ngIf=\"label\">\n  <span class=\"title\">\n    {{ label }}\n    <span *ngIf=\"required\" class=\"required\">*</span>\n  </span>\n  <button\n    *ngIf=\"labelActionText\"\n    rivLink\n    type=\"button\"\n    (click)=\"labelAction.emit()\"\n    type=\"button\"\n  >\n    {{ labelActionText }}\n  </button>\n  <riv-help *ngIf=\"help\" [help]=\"help\"></riv-help>\n</label>\n<div class=\"content\"><ng-content></ng-content></div>\n", styles: [":host{max-width:100%;display:flex;flex-direction:column}label{display:flex;justify-content:space-between;align-items:center;gap:var(--size-small);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-heavy);color:var(--type-light-high-contrast);margin-bottom:var(--base-grid-size)}label .title{flex-grow:1}label .required{color:var(--type-light-danger)}label .action{margin:0 var(--size-xxsmall)}label riv-icon{color:var(--type-light-low-contrast)}riv-help{margin-left:var(--size-xsmall)}.content{display:flex;flex-direction:column;flex:1;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HelpComponent, selector: "riv-help", inputs: ["help"] }, { kind: "component", type: LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+InputLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: InputLabelComponent, selector: "riv-input-label", inputs: { label: "label", help: "help", required: "required", labelActionText: "labelActionText" }, outputs: { labelAction: "labelAction" }, ngImport: i0, template: "<label *ngIf=\"label\">\n  <span class=\"title\">\n    {{ label }}\n    <span *ngIf=\"required\" class=\"required\">*</span>\n  </span>\n  <button\n    *ngIf=\"labelActionText\"\n    rivLink\n    type=\"button\"\n    (click)=\"labelAction.emit()\"\n    type=\"button\"\n  >\n    {{ labelActionText }}\n  </button>\n  <riv-help *ngIf=\"help\" [help]=\"help\"></riv-help>\n</label>\n<div class=\"content\"><ng-content></ng-content></div>\n", styles: [":host{max-width:100%;display:flex;flex-direction:column}label{display:flex;justify-content:space-between;align-items:center;gap:var(--size-small);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-heavy);color:var(--type-light-high-contrast);margin-bottom:var(--base-grid-size)}label .title{flex-grow:1}label .required{color:var(--type-light-danger)}label .action{margin:0 var(--size-xxsmall)}label riv-icon{color:var(--type-light-low-contrast)}riv-help{margin-left:var(--size-xsmall)}.content{display:flex;flex-direction:column;flex:1;justify-content:center}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputLabelComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-input-label', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label *ngIf=\"label\">\n  <span class=\"title\">\n    {{ label }}\n    <span *ngIf=\"required\" class=\"required\">*</span>\n  </span>\n  <button\n    *ngIf=\"labelActionText\"\n    rivLink\n    type=\"button\"\n    (click)=\"labelAction.emit()\"\n    type=\"button\"\n  >\n    {{ labelActionText }}\n  </button>\n  <riv-help *ngIf=\"help\" [help]=\"help\"></riv-help>\n</label>\n<div class=\"content\"><ng-content></ng-content></div>\n", styles: [":host{max-width:100%;display:flex;flex-direction:column}label{display:flex;justify-content:space-between;align-items:center;gap:var(--size-small);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-heavy);color:var(--type-light-high-contrast);margin-bottom:var(--base-grid-size)}label .title{flex-grow:1}label .required{color:var(--type-light-danger)}label .action{margin:0 var(--size-xxsmall)}label riv-icon{color:var(--type-light-low-contrast)}riv-help{margin-left:var(--size-xsmall)}.content{display:flex;flex-direction:column;flex:1;justify-content:center}\n"] }]
@@ -1237,6 +1245,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Output
             }] } });
 
+class FocusOnInitDirective {
+    constructor(el) {
+        this.el = el;
+        this.shouldFocus = true;
+        this.focusOnChange = false;
+    }
+    ngAfterViewInit() {
+        if (this.shouldFocus) {
+            this.focus();
+        }
+        else {
+            this.focusOnChange = true;
+        }
+    }
+    ngOnChanges() {
+        if (this.focusOnChange && this.shouldFocus) {
+            this.focusOnChange = false;
+            this.focus();
+        }
+    }
+    focus() {
+        if (this.el && this.el.nativeElement) {
+            if (!this.el.nativeElement.hasAttribute('tabindex')) {
+                this.el.nativeElement.tabIndex = 0;
+            }
+            this.el.nativeElement.focus();
+        }
+    }
+}
+FocusOnInitDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FocusOnInitDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+FocusOnInitDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: FocusOnInitDirective, selector: "[rivFocusOnInit]", inputs: { shouldFocus: ["rivFocusOnInit", "shouldFocus"] }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FocusOnInitDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rivFocusOnInit]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { shouldFocus: [{
+                type: Input,
+                args: ['rivFocusOnInit']
+            }] } });
+
 function chunks(text, indices) {
     let lastEnd = 0;
     const chunks = [];
@@ -1306,6 +1355,7 @@ class SingleSelectComponent extends InputLabelComponent {
         };
         this.loading = false;
         this.locked = false;
+        this.maxCalloutHeight = '50vh';
         this.noOptionsMessage = 'No available options';
         this.placeholder = 'Select...';
         this.disabled = false;
@@ -1333,6 +1383,15 @@ class SingleSelectComponent extends InputLabelComponent {
     close() {
         this.open = false;
     }
+    selectOption(newlySelectedOption) {
+        this.selectedOptionChange.emit(newlySelectedOption);
+        this.open = false;
+        // Clear filter after an option is selected.
+        if (this.filterabilityOptions.enabled) {
+            this.filterQuery = '';
+            this.filterQueryChange.emit(this.filterQuery);
+        }
+    }
     trackByHeader(i, group) {
         return `${i}${group.header}`;
     }
@@ -1341,10 +1400,10 @@ class SingleSelectComponent extends InputLabelComponent {
     }
 }
 SingleSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SingleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SingleSelectComponent, selector: "riv-single-select", inputs: { groups: "groups", selectedOption: "selectedOption", filterabilityOptions: "filterabilityOptions", loading: "loading", locked: "locked", noOptionsMessage: "noOptionsMessage", nodeTemplate: "nodeTemplate", triggerTemplate: "triggerTemplate", placeholder: "placeholder", disabled: "disabled" }, outputs: { filterQueryChange: "filterQueryChange", selectedOptionChange: "selectedOptionChange" }, viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"allowedOpen()\"\n    [disabled]=\"disabled || locked\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ selectedOption }\"\n    ></ng-container>\n  </button>\n</ng-container>\n<ng-template #standardTrigger>\n  <riv-input-label\n    [label]=\"label\"\n    [help]=\"help\"\n    [required]=\"required\"\n    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      (click)=\"allowedOpen()\"\n      [disabled]=\"disabled || locked\"\n      type=\"button\"\n    >\n      <ng-container *ngIf=\"selectedOption; else placeholderValue\">\n        <span class=\"value\">{{ selectedOption.title }}</span>\n      </ng-container>\n      <ng-template #placeholderValue>\n        <span class=\"value placeholder\">{{ placeholder }}</span>\n      </ng-template>\n      <span class=\"chevron\">\n        <riv-icon *ngIf=\"!locked\" [name]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n        <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n      </span>\n    </button>\n  </riv-input-label>\n</ng-template>\n\n<riv-callout\n  *ngIf=\"open\"\n  [anchor]=\"getTrigger()\"\n  [theme]=\"'light'\"\n  [showCaret]=\"false\"\n  [allowedPositions]=\"[\n    'top-left',\n    'top-center',\n    'top-right',\n    'bottom-right',\n    'bottom-center',\n    'bottom-left'\n  ]\"\n  (close)=\"open = false\"\n>\n  <input\n    *ngIf=\"filterabilityOptions.enabled\"\n    #filter\n    class=\"filter\"\n    [placeholder]=\"getFilterPlaceholder()\"\n    [value]=\"filterQuery\"\n    (input)=\"filterQuery = filter.value; filterQueryChange.emit(filterQuery)\"\n  />\n  <div class=\"options\">\n    <riv-loading-cover [loading]=\"loading\">\n      <ng-container *ngFor=\"let group of groups; trackBy: trackByHeader\">\n        <ng-container *ngIf=\"group.header\">\n          <span class=\"group-header\">\n            {{ group.header }}\n          </span>\n        </ng-container>\n        <ng-container *ngIf=\"group.options; let nodes\">\n          <ng-container *ngIf=\"nodes.length > 0; else empty\">\n            <ng-container *ngFor=\"let node of nodes; trackBy: trackByOption\">\n              <ng-container *ngIf=\"nodeTemplate; else standardTemplate\">\n                <button\n                  class=\"custom-single-select-node\"\n                  [disabled]=\"node.disabled\"\n                  (click)=\"selectedOptionChange.emit(node); open = false\"\n                  type=\"button\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"nodeTemplate\"\n                    [ngTemplateOutletContext]=\"{ node }\"\n                  ></ng-container>\n                </button>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <button\n                  class=\"single-select-node\"\n                  [class.selected]=\"node?.id === selectedOption?.id\"\n                  [class.disabled]=\"node?.disabled\"\n                  [disabled]=\"node?.disabled\"\n                  (click)=\"selectedOptionChange.emit(node); open = false\"\n                  type=\"button\"\n                >\n                  <riv-icon\n                    [name]=\"'Check'\"\n                    *ngIf=\"node?.id === selectedOption?.id\"\n                    [size]=\"16\"\n                  ></riv-icon>\n                  <span class=\"label\">\n                    <span class=\"label-title\">\n                      <riv-highlight\n                        [text]=\"node?.title || ''\"\n                        [indices]=\"node?.titleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                    <span *ngIf=\"node?.subtitle\" class=\"label-subtitle\">\n                      <riv-highlight\n                        [text]=\"node?.subtitle || ''\"\n                        [indices]=\"node?.subtitleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                  </span>\n                </button>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n          <ng-template #empty>\n            <div class=\"empty\">\n              {{ noOptionsMessage }}\n            </div>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </riv-loading-cover>\n  </div>\n  <div class=\"footer\">\n    <ng-content select=\"[footer]\"> </ng-content>\n  </div>\n</riv-callout>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small);background-color:var(--surface-light-0)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.filter{width:100%;outline:none;border:none;border-bottom:var(--border-width) solid var(--border-light);font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small)}.filter::placeholder{color:var(--type-light-disabled)}.options{max-height:50vh;max-width:calc(var(--base-grid-size) * 150);overflow-y:auto}.single-select-node{display:flex;align-items:center;overflow:hidden;flex-grow:1;text-align:left;padding:var(--size-xsmall) var(--size-xsmall) var(--size-xsmall) calc(var(--base-grid-size) * 6);width:100%}.single-select-node.selected{padding-left:var(--size-small)}.single-select-node:hover{background-color:var(--surface-light-2)}.single-select-node.disabled{cursor:default;background-color:var(--surface-light-0)}.single-select-node.disabled .label,.single-select-node.disabled .label-subtitle{color:var(--type-light-disabled)}.single-select-node riv-icon{flex-shrink:0}.single-select-node .label{font-size:calc(var(--base-grid-size) * 4);line-height:calc(var(--base-grid-size) * 6);overflow:hidden;text-overflow:ellipsis;white-space:pre;flex-grow:1;padding:0 calc(var(--base-grid-size) * 2);min-width:calc(var(--base-grid-size) * 16)}.single-select-node .label-subtitle{padding-left:var(--base-grid-size);color:var(--type-light-low-contrast)}.custom-single-select-node{display:block;width:100%;text-align:left}.empty{padding:var(--size-medium);text-align:center;color:var(--type-light-disabled)}.footer{border-top:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-1);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium)}.group-header{display:flex;padding:8px 8px 4px;align-items:flex-start;gap:10px;align-self:stretch;font:var(--title-01)}\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: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "component", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+SingleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SingleSelectComponent, selector: "riv-single-select", inputs: { groups: "groups", selectedOption: "selectedOption", filterabilityOptions: "filterabilityOptions", loading: "loading", locked: "locked", maxCalloutHeight: "maxCalloutHeight", noOptionsMessage: "noOptionsMessage", nodeTemplate: "nodeTemplate", triggerTemplate: "triggerTemplate", placeholder: "placeholder", disabled: "disabled" }, outputs: { filterQueryChange: "filterQueryChange", selectedOptionChange: "selectedOptionChange" }, viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"allowedOpen()\"\n    [disabled]=\"disabled || locked\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ selectedOption }\"\n    ></ng-container>\n  </button>\n</ng-container>\n<ng-template #standardTrigger>\n  <riv-input-label\n    [label]=\"label\"\n    [help]=\"help\"\n    [required]=\"required\"\n    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      (click)=\"allowedOpen()\"\n      [disabled]=\"disabled || locked\"\n      type=\"button\"\n    >\n      <ng-container *ngIf=\"selectedOption; else placeholderValue\">\n        <span class=\"value\">{{ selectedOption.title }}</span>\n      </ng-container>\n      <ng-template #placeholderValue>\n        <span class=\"value placeholder\">{{ placeholder }}</span>\n      </ng-template>\n      <span class=\"chevron\">\n        <riv-icon *ngIf=\"!locked\" [name]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n        <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n      </span>\n    </button>\n  </riv-input-label>\n</ng-template>\n\n<riv-callout\n  *ngIf=\"open\"\n  [anchor]=\"getTrigger()\"\n  [theme]=\"'light'\"\n  [showCaret]=\"false\"\n  [allowedPositions]=\"[\n    'top-left',\n    'top-center',\n    'top-right',\n    'bottom-right',\n    'bottom-center',\n    'bottom-left'\n  ]\"\n  (close)=\"open = false\"\n>\n  <input\n    *ngIf=\"filterabilityOptions.enabled\"\n    #filter\n    class=\"filter\"\n    [placeholder]=\"getFilterPlaceholder()\"\n    [value]=\"filterQuery\"\n    (input)=\"filterQuery = filter.value; filterQueryChange.emit(filterQuery)\"\n    [rivFocusOnInit]=\"true\"\n  />\n  <div class=\"options\" [style.max-height]=\"maxCalloutHeight\">\n    <riv-loading-cover [loading]=\"loading\">\n      <ng-container *ngFor=\"let group of groups; trackBy: trackByHeader\">\n        <ng-container *ngIf=\"group.header\">\n          <span class=\"group-header\">\n            {{ group.header }}\n          </span>\n        </ng-container>\n        <ng-container *ngIf=\"group.options; let nodes\">\n          <ng-container *ngIf=\"nodes.length > 0; else empty\">\n            <ng-container *ngFor=\"let node of nodes; trackBy: trackByOption\">\n              <ng-container *ngIf=\"nodeTemplate; else standardTemplate\">\n                <button\n                  class=\"custom-single-select-node\"\n                  [disabled]=\"node.disabled\"\n                  (click)=\"selectOption(node)\"\n                  type=\"button\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"nodeTemplate\"\n                    [ngTemplateOutletContext]=\"{ node }\"\n                  ></ng-container>\n                </button>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <button\n                  class=\"single-select-node\"\n                  [class.selected]=\"node?.id === selectedOption?.id\"\n                  [class.disabled]=\"node?.disabled\"\n                  [disabled]=\"node?.disabled\"\n                  (click)=\"selectOption(node)\"\n                  type=\"button\"\n                >\n                  <riv-icon\n                    [name]=\"'Check'\"\n                    *ngIf=\"node?.id === selectedOption?.id\"\n                    [size]=\"16\"\n                  ></riv-icon>\n                  <span class=\"label\">\n                    <span class=\"label-title\">\n                      <riv-highlight\n                        [text]=\"node?.title || ''\"\n                        [indices]=\"node?.titleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                    <span *ngIf=\"node?.subtitle\" class=\"label-subtitle\">\n                      <riv-highlight\n                        [text]=\"node?.subtitle || ''\"\n                        [indices]=\"node?.subtitleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                  </span>\n                </button>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n          <ng-template #empty>\n            <div class=\"empty\">\n              {{ noOptionsMessage }}\n            </div>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </riv-loading-cover>\n  </div>\n  <div class=\"footer\">\n    <ng-content select=\"[footer]\"> </ng-content>\n  </div>\n</riv-callout>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small);background-color:var(--surface-light-0)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.filter{width:100%;outline:none;border:none;border-bottom:var(--border-width) solid var(--border-light);font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small)}.filter::placeholder{color:var(--type-light-disabled)}.options{max-width:calc(var(--base-grid-size) * 150);overflow-y:auto}.single-select-node{display:flex;align-items:center;overflow:hidden;flex-grow:1;text-align:left;padding:var(--size-xsmall) var(--size-xsmall) var(--size-xsmall) calc(var(--base-grid-size) * 6);width:100%}.single-select-node.selected{padding-left:var(--size-small)}.single-select-node:hover{background-color:var(--surface-light-2)}.single-select-node.disabled{cursor:default;background-color:var(--surface-light-0)}.single-select-node.disabled .label,.single-select-node.disabled .label-subtitle{color:var(--type-light-disabled)}.single-select-node riv-icon{flex-shrink:0}.single-select-node .label{font-size:calc(var(--base-grid-size) * 4);line-height:calc(var(--base-grid-size) * 6);overflow:hidden;text-overflow:ellipsis;white-space:pre;flex-grow:1;padding:0 calc(var(--base-grid-size) * 2);min-width:calc(var(--base-grid-size) * 16)}.single-select-node .label-subtitle{padding-left:var(--base-grid-size);color:var(--type-light-low-contrast)}.custom-single-select-node{display:block;width:100%;text-align:left}.empty{padding:var(--size-medium);text-align:center;color:var(--type-light-disabled)}.footer{border-top:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-1);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium)}.group-header{display:flex;padding:8px 8px 4px;align-items:flex-start;gap:10px;align-self:stretch;font:var(--title-01)}\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: FocusOnInitDirective, selector: "[rivFocusOnInit]", inputs: ["rivFocusOnInit"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "component", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "errorMessage"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SingleSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-single-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"allowedOpen()\"\n    [disabled]=\"disabled || locked\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ selectedOption }\"\n    ></ng-container>\n  </button>\n</ng-container>\n<ng-template #standardTrigger>\n  <riv-input-label\n    [label]=\"label\"\n    [help]=\"help\"\n    [required]=\"required\"\n    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      (click)=\"allowedOpen()\"\n      [disabled]=\"disabled || locked\"\n      type=\"button\"\n    >\n      <ng-container *ngIf=\"selectedOption; else placeholderValue\">\n        <span class=\"value\">{{ selectedOption.title }}</span>\n      </ng-container>\n      <ng-template #placeholderValue>\n        <span class=\"value placeholder\">{{ placeholder }}</span>\n      </ng-template>\n      <span class=\"chevron\">\n        <riv-icon *ngIf=\"!locked\" [name]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n        <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n      </span>\n    </button>\n  </riv-input-label>\n</ng-template>\n\n<riv-callout\n  *ngIf=\"open\"\n  [anchor]=\"getTrigger()\"\n  [theme]=\"'light'\"\n  [showCaret]=\"false\"\n  [allowedPositions]=\"[\n    'top-left',\n    'top-center',\n    'top-right',\n    'bottom-right',\n    'bottom-center',\n    'bottom-left'\n  ]\"\n  (close)=\"open = false\"\n>\n  <input\n    *ngIf=\"filterabilityOptions.enabled\"\n    #filter\n    class=\"filter\"\n    [placeholder]=\"getFilterPlaceholder()\"\n    [value]=\"filterQuery\"\n    (input)=\"filterQuery = filter.value; filterQueryChange.emit(filterQuery)\"\n  />\n  <div class=\"options\">\n    <riv-loading-cover [loading]=\"loading\">\n      <ng-container *ngFor=\"let group of groups; trackBy: trackByHeader\">\n        <ng-container *ngIf=\"group.header\">\n          <span class=\"group-header\">\n            {{ group.header }}\n          </span>\n        </ng-container>\n        <ng-container *ngIf=\"group.options; let nodes\">\n          <ng-container *ngIf=\"nodes.length > 0; else empty\">\n            <ng-container *ngFor=\"let node of nodes; trackBy: trackByOption\">\n              <ng-container *ngIf=\"nodeTemplate; else standardTemplate\">\n                <button\n                  class=\"custom-single-select-node\"\n                  [disabled]=\"node.disabled\"\n                  (click)=\"selectedOptionChange.emit(node); open = false\"\n                  type=\"button\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"nodeTemplate\"\n                    [ngTemplateOutletContext]=\"{ node }\"\n                  ></ng-container>\n                </button>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <button\n                  class=\"single-select-node\"\n                  [class.selected]=\"node?.id === selectedOption?.id\"\n                  [class.disabled]=\"node?.disabled\"\n                  [disabled]=\"node?.disabled\"\n                  (click)=\"selectedOptionChange.emit(node); open = false\"\n                  type=\"button\"\n                >\n                  <riv-icon\n                    [name]=\"'Check'\"\n                    *ngIf=\"node?.id === selectedOption?.id\"\n                    [size]=\"16\"\n                  ></riv-icon>\n                  <span class=\"label\">\n                    <span class=\"label-title\">\n                      <riv-highlight\n                        [text]=\"node?.title || ''\"\n                        [indices]=\"node?.titleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                    <span *ngIf=\"node?.subtitle\" class=\"label-subtitle\">\n                      <riv-highlight\n                        [text]=\"node?.subtitle || ''\"\n                        [indices]=\"node?.subtitleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                  </span>\n                </button>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n          <ng-template #empty>\n            <div class=\"empty\">\n              {{ noOptionsMessage }}\n            </div>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </riv-loading-cover>\n  </div>\n  <div class=\"footer\">\n    <ng-content select=\"[footer]\"> </ng-content>\n  </div>\n</riv-callout>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small);background-color:var(--surface-light-0)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.filter{width:100%;outline:none;border:none;border-bottom:var(--border-width) solid var(--border-light);font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small)}.filter::placeholder{color:var(--type-light-disabled)}.options{max-height:50vh;max-width:calc(var(--base-grid-size) * 150);overflow-y:auto}.single-select-node{display:flex;align-items:center;overflow:hidden;flex-grow:1;text-align:left;padding:var(--size-xsmall) var(--size-xsmall) var(--size-xsmall) calc(var(--base-grid-size) * 6);width:100%}.single-select-node.selected{padding-left:var(--size-small)}.single-select-node:hover{background-color:var(--surface-light-2)}.single-select-node.disabled{cursor:default;background-color:var(--surface-light-0)}.single-select-node.disabled .label,.single-select-node.disabled .label-subtitle{color:var(--type-light-disabled)}.single-select-node riv-icon{flex-shrink:0}.single-select-node .label{font-size:calc(var(--base-grid-size) * 4);line-height:calc(var(--base-grid-size) * 6);overflow:hidden;text-overflow:ellipsis;white-space:pre;flex-grow:1;padding:0 calc(var(--base-grid-size) * 2);min-width:calc(var(--base-grid-size) * 16)}.single-select-node .label-subtitle{padding-left:var(--base-grid-size);color:var(--type-light-low-contrast)}.custom-single-select-node{display:block;width:100%;text-align:left}.empty{padding:var(--size-medium);text-align:center;color:var(--type-light-disabled)}.footer{border-top:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-1);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium)}.group-header{display:flex;padding:8px 8px 4px;align-items:flex-start;gap:10px;align-self:stretch;font:var(--title-01)}\n"] }]
+            args: [{ selector: 'riv-single-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"allowedOpen()\"\n    [disabled]=\"disabled || locked\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ selectedOption }\"\n    ></ng-container>\n  </button>\n</ng-container>\n<ng-template #standardTrigger>\n  <riv-input-label\n    [label]=\"label\"\n    [help]=\"help\"\n    [required]=\"required\"\n    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      (click)=\"allowedOpen()\"\n      [disabled]=\"disabled || locked\"\n      type=\"button\"\n    >\n      <ng-container *ngIf=\"selectedOption; else placeholderValue\">\n        <span class=\"value\">{{ selectedOption.title }}</span>\n      </ng-container>\n      <ng-template #placeholderValue>\n        <span class=\"value placeholder\">{{ placeholder }}</span>\n      </ng-template>\n      <span class=\"chevron\">\n        <riv-icon *ngIf=\"!locked\" [name]=\"'ChevronDown'\" [size]=\"16\"></riv-icon>\n        <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n      </span>\n    </button>\n  </riv-input-label>\n</ng-template>\n\n<riv-callout\n  *ngIf=\"open\"\n  [anchor]=\"getTrigger()\"\n  [theme]=\"'light'\"\n  [showCaret]=\"false\"\n  [allowedPositions]=\"[\n    'top-left',\n    'top-center',\n    'top-right',\n    'bottom-right',\n    'bottom-center',\n    'bottom-left'\n  ]\"\n  (close)=\"open = false\"\n>\n  <input\n    *ngIf=\"filterabilityOptions.enabled\"\n    #filter\n    class=\"filter\"\n    [placeholder]=\"getFilterPlaceholder()\"\n    [value]=\"filterQuery\"\n    (input)=\"filterQuery = filter.value; filterQueryChange.emit(filterQuery)\"\n    [rivFocusOnInit]=\"true\"\n  />\n  <div class=\"options\" [style.max-height]=\"maxCalloutHeight\">\n    <riv-loading-cover [loading]=\"loading\">\n      <ng-container *ngFor=\"let group of groups; trackBy: trackByHeader\">\n        <ng-container *ngIf=\"group.header\">\n          <span class=\"group-header\">\n            {{ group.header }}\n          </span>\n        </ng-container>\n        <ng-container *ngIf=\"group.options; let nodes\">\n          <ng-container *ngIf=\"nodes.length > 0; else empty\">\n            <ng-container *ngFor=\"let node of nodes; trackBy: trackByOption\">\n              <ng-container *ngIf=\"nodeTemplate; else standardTemplate\">\n                <button\n                  class=\"custom-single-select-node\"\n                  [disabled]=\"node.disabled\"\n                  (click)=\"selectOption(node)\"\n                  type=\"button\"\n                >\n                  <ng-container\n                    [ngTemplateOutlet]=\"nodeTemplate\"\n                    [ngTemplateOutletContext]=\"{ node }\"\n                  ></ng-container>\n                </button>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <button\n                  class=\"single-select-node\"\n                  [class.selected]=\"node?.id === selectedOption?.id\"\n                  [class.disabled]=\"node?.disabled\"\n                  [disabled]=\"node?.disabled\"\n                  (click)=\"selectOption(node)\"\n                  type=\"button\"\n                >\n                  <riv-icon\n                    [name]=\"'Check'\"\n                    *ngIf=\"node?.id === selectedOption?.id\"\n                    [size]=\"16\"\n                  ></riv-icon>\n                  <span class=\"label\">\n                    <span class=\"label-title\">\n                      <riv-highlight\n                        [text]=\"node?.title || ''\"\n                        [indices]=\"node?.titleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                    <span *ngIf=\"node?.subtitle\" class=\"label-subtitle\">\n                      <riv-highlight\n                        [text]=\"node?.subtitle || ''\"\n                        [indices]=\"node?.subtitleHighlightIndices || []\"\n                      ></riv-highlight>\n                    </span>\n                  </span>\n                </button>\n              </ng-template>\n            </ng-container>\n          </ng-container>\n          <ng-template #empty>\n            <div class=\"empty\">\n              {{ noOptionsMessage }}\n            </div>\n          </ng-template>\n        </ng-container>\n      </ng-container>\n    </riv-loading-cover>\n  </div>\n  <div class=\"footer\">\n    <ng-content select=\"[footer]\"> </ng-content>\n  </div>\n</riv-callout>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small);background-color:var(--surface-light-0)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.filter{width:100%;outline:none;border:none;border-bottom:var(--border-width) solid var(--border-light);font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small)}.filter::placeholder{color:var(--type-light-disabled)}.options{max-width:calc(var(--base-grid-size) * 150);overflow-y:auto}.single-select-node{display:flex;align-items:center;overflow:hidden;flex-grow:1;text-align:left;padding:var(--size-xsmall) var(--size-xsmall) var(--size-xsmall) calc(var(--base-grid-size) * 6);width:100%}.single-select-node.selected{padding-left:var(--size-small)}.single-select-node:hover{background-color:var(--surface-light-2)}.single-select-node.disabled{cursor:default;background-color:var(--surface-light-0)}.single-select-node.disabled .label,.single-select-node.disabled .label-subtitle{color:var(--type-light-disabled)}.single-select-node riv-icon{flex-shrink:0}.single-select-node .label{font-size:calc(var(--base-grid-size) * 4);line-height:calc(var(--base-grid-size) * 6);overflow:hidden;text-overflow:ellipsis;white-space:pre;flex-grow:1;padding:0 calc(var(--base-grid-size) * 2);min-width:calc(var(--base-grid-size) * 16)}.single-select-node .label-subtitle{padding-left:var(--base-grid-size);color:var(--type-light-low-contrast)}.custom-single-select-node{display:block;width:100%;text-align:left}.empty{padding:var(--size-medium);text-align:center;color:var(--type-light-disabled)}.footer{border-top:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-1);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium)}.group-header{display:flex;padding:8px 8px 4px;align-items:flex-start;gap:10px;align-self:stretch;font:var(--title-01)}\n"] }]
         }], propDecorators: { groups: [{
                 type: Input
             }], selectedOption: [{
@@ -1355,6 +1414,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 type: Input
             }], locked: [{
                 type: Input
+            }], maxCalloutHeight: [{
+                type: Input
             }], noOptionsMessage: [{
                 type: Input
             }], nodeTemplate: [{
@@ -1404,37 +1465,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
         };
     }
     SingleSelectComponent.getFilterSync = getFilterSync;
-    function getFilterAsync(query$, fetcher, debounceInput = 300) {
-        return query$.pipe(debounceTime(debounceInput), switchMap(query => from(fetcher(query)).pipe(map(groups => {
-            if (!query)
-                return { loading: false, groups };
-            const fuseOptions = {
-                keys: ['title', 'subtitle'],
-                includeMatches: true,
-                shouldSort: true,
-                threshold: 0.6,
-            };
-            const filteredGroups = groups
-                .map(group => {
-                const fuse = new Fuse(group.options, fuseOptions);
-                const matches = fuse.search(query);
-                return Object.assign(Object.assign({}, group), { options: matches.map(match => {
-                        var _a, _b, _c, _d;
-                        return (Object.assign(Object.assign({}, match.item), { titleHighlightIndices: [
-                                ...(((_b = (_a = match.matches) === null || _a === void 0 ? void 0 : _a.find(result => result.key === 'title')) === null || _b === void 0 ? void 0 : _b.indices) || []),
-                            ], subtitleHighlightIndices: [
-                                ...(((_d = (_c = match.matches) === null || _c === void 0 ? void 0 : _c.find(result => result.key === 'subtitle')) === null || _d === void 0 ? void 0 : _d.indices) || []),
-                            ] }));
-                    }) });
-            })
-                .filter(group => group.options.length > 0); // Remove empty groups
-            return { loading: false, groups: filteredGroups };
-        }), startWith({ loading: true, groups: [] }))), pairwise(), map(([previous, next]) => ({
-            loading: next.loading,
-            groups: next.loading ? previous.groups : next.groups,
-        })), startWith({ loading: false, groups: [] }));
-    }
-    SingleSelectComponent.getFilterAsync = getFilterAsync;
 })(SingleSelectComponent || (SingleSelectComponent = {}));
 
 const monthFormatter = timeFormat('%B');
@@ -1682,7 +1712,7 @@ class CalendarComponent {
     }
 }
 CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalendarComponent, selector: "riv-calendar", inputs: { activeYearMonth: "activeYearMonth", displayMin: "displayMin", displayMax: "displayMax", selectableMin: "selectableMin", selectableMax: "selectableMax", omitRange: "omitRange", selectedValue: "selectedValue" }, outputs: { activeYearMonthChange: "activeYearMonthChange", dateSelect: "dateSelect" }, ngImport: i0, template: "<div class=\"controls\">\n  <div>\n    <ng-template #selectTrigger let-selectedOption=\"selectedOption\">\n      <button\n        rivButton\n        [size]=\"'small'\"\n        [variant]=\"'ghost'\"\n        [icon]=\"'ChevronDown'\"\n        [iconPosition]=\"'last'\"\n        type=\"button\"\n      >\n        {{ selectedOption.title || '...' }}\n      </button>\n    </ng-template>\n    <riv-single-select\n      placeholder=\"Month...\"\n      [groups]=\"monthOptions$ | async | rivOptionGroup\"\n      [selectedOption]=\"selectedMonthOption$ | async\"\n      (selectedOptionChange)=\"activeYearMonthChange.emit($event.date)\"\n      [triggerTemplate]=\"selectTrigger\"\n    ></riv-single-select>\n    <riv-single-select\n      placeholder=\"Year...\"\n      [groups]=\"yearOptions$ | async | rivOptionGroup\"\n      [selectedOption]=\"selectedYearOption$ | async\"\n      (selectedOptionChange)=\"activeYearMonthChange.emit($event.date)\"\n      [triggerTemplate]=\"selectTrigger\"\n    ></riv-single-select>\n  </div>\n  <div\n    *ngIf=\"{ prev: previousMonth$ | async, next: nextMonth$ | async }; let vm\"\n  >\n    <button\n      rivButton\n      [size]=\"'small'\"\n      [variant]=\"'ghost'\"\n      [icon]=\"'ArrowLeft'\"\n      [disabled]=\"!vm.prev\"\n      (click)=\"vm.prev ? activeYearMonthChange.emit(vm.prev) : null\"\n      type=\"button\"\n    ></button>\n    <button\n      rivButton\n      [size]=\"'small'\"\n      [variant]=\"'ghost'\"\n      [icon]=\"'ArrowRight'\"\n      [disabled]=\"!vm.next\"\n      (click)=\"vm.next ? activeYearMonthChange.emit(vm.next) : null\"\n      type=\"button\"\n    ></button>\n  </div>\n</div>\n<div class=\"calendar\">\n  <span class=\"label\">Su</span>\n  <span class=\"label\">Mo</span>\n  <span class=\"label\">Tu</span>\n  <span class=\"label\">We</span>\n  <span class=\"label\">Th</span>\n  <span class=\"label\">Fr</span>\n  <span class=\"label\">Sa</span>\n  <button\n    *ngFor=\"let day of dates$ | async\"\n    class=\"day\"\n    [disabled]=\"day.hidden\"\n    [class.bleed]=\"!day.inCurrentMonth\"\n    [class.fade-in]=\"day.fadeIn\"\n    [class.fade-out]=\"day.fadeOut\"\n    [class.in-range]=\"day.inRange\"\n    [class.rounded-ne]=\"day.roundedNe\"\n    [class.rounded-nw]=\"day.roundedNw\"\n    [class.rounded-se]=\"day.roundedSe\"\n    [class.rounded-sw]=\"day.roundedSw\"\n    (click)=\"selectDay(day)\"\n    type=\"button\"\n  >\n    <span\n      class=\"day-wrapper\"\n      [class.selected]=\"day.selected\"\n      [class.today]=\"day.today\"\n      [class.hidden]=\"day.hidden\"\n    >\n      {{ day.display }}\n    </span>\n  </button>\n</div>\n", styles: [".controls{display:flex;align-items:center;justify-content:space-between}.calendar{display:grid;grid-template-columns:repeat(7,calc(var(--base-grid-size) * 10));grid-auto-rows:calc(var(--base-grid-size) * 6)}.label{display:flex;justify-content:center;align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-heavy)}.day{display:flex;align-items:stretch}.day:hover{background-color:var(--surface-light-1)}.day.in-range{background-color:var(--purp-10)}.day.fade-out{background-image:linear-gradient(to right,var(--purp-10),var(--white-100))}.day.fade-in{background-image:linear-gradient(to right,var(--white-100),var(--purp-10))}.day.bleed{color:var(--type-light-disabled)}.day.rounded-ne{border-top-right-radius:var(--border-radius-medium)}.day.rounded-nw{border-top-left-radius:var(--border-radius-medium)}.day.rounded-sw{border-bottom-left-radius:var(--border-radius-medium)}.day.rounded-se{border-bottom-right-radius:var(--border-radius-medium)}.day-wrapper{flex-grow:1;display:flex;justify-content:center;align-items:center;border-radius:var(--border-radius-medium)}.day-wrapper.selected{background-color:var(--purp-60);color:var(--type-dark-high-contrast)}.day-wrapper.today{border-radius:calc(var(--base-grid-size) * 8);border:var(--border-width) solid var(--border-light);font-weight:var(--font-weight-heavy)}.day-wrapper.hidden{display:none}\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: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition"] }, { kind: "component", type: SingleSelectComponent, selector: "riv-single-select", inputs: ["groups", "selectedOption", "filterabilityOptions", "loading", "locked", "noOptionsMessage", "nodeTemplate", "triggerTemplate", "placeholder", "disabled"], outputs: ["filterQueryChange", "selectedOptionChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalendarComponent, selector: "riv-calendar", inputs: { activeYearMonth: "activeYearMonth", displayMin: "displayMin", displayMax: "displayMax", selectableMin: "selectableMin", selectableMax: "selectableMax", omitRange: "omitRange", selectedValue: "selectedValue" }, outputs: { activeYearMonthChange: "activeYearMonthChange", dateSelect: "dateSelect" }, ngImport: i0, template: "<div class=\"controls\">\n  <div>\n    <ng-template #selectTrigger let-selectedOption=\"selectedOption\">\n      <button\n        rivButton\n        [size]=\"'small'\"\n        [variant]=\"'ghost'\"\n        [icon]=\"'ChevronDown'\"\n        [iconPosition]=\"'last'\"\n        type=\"button\"\n      >\n        {{ selectedOption.title || '...' }}\n      </button>\n    </ng-template>\n    <riv-single-select\n      placeholder=\"Month...\"\n      [groups]=\"monthOptions$ | async | rivOptionGroup\"\n      [selectedOption]=\"selectedMonthOption$ | async\"\n      (selectedOptionChange)=\"activeYearMonthChange.emit($event.date)\"\n      [triggerTemplate]=\"selectTrigger\"\n    ></riv-single-select>\n    <riv-single-select\n      placeholder=\"Year...\"\n      [groups]=\"yearOptions$ | async | rivOptionGroup\"\n      [selectedOption]=\"selectedYearOption$ | async\"\n      (selectedOptionChange)=\"activeYearMonthChange.emit($event.date)\"\n      [triggerTemplate]=\"selectTrigger\"\n    ></riv-single-select>\n  </div>\n  <div\n    *ngIf=\"{ prev: previousMonth$ | async, next: nextMonth$ | async }; let vm\"\n  >\n    <button\n      rivButton\n      [size]=\"'small'\"\n      [variant]=\"'ghost'\"\n      [icon]=\"'ArrowLeft'\"\n      [disabled]=\"!vm.prev\"\n      (click)=\"vm.prev ? activeYearMonthChange.emit(vm.prev) : null\"\n      type=\"button\"\n    ></button>\n    <button\n      rivButton\n      [size]=\"'small'\"\n      [variant]=\"'ghost'\"\n      [icon]=\"'ArrowRight'\"\n      [disabled]=\"!vm.next\"\n      (click)=\"vm.next ? activeYearMonthChange.emit(vm.next) : null\"\n      type=\"button\"\n    ></button>\n  </div>\n</div>\n<div class=\"calendar\">\n  <span class=\"label\">Su</span>\n  <span class=\"label\">Mo</span>\n  <span class=\"label\">Tu</span>\n  <span class=\"label\">We</span>\n  <span class=\"label\">Th</span>\n  <span class=\"label\">Fr</span>\n  <span class=\"label\">Sa</span>\n  <button\n    *ngFor=\"let day of dates$ | async\"\n    class=\"day\"\n    [disabled]=\"day.hidden\"\n    [class.bleed]=\"!day.inCurrentMonth\"\n    [class.fade-in]=\"day.fadeIn\"\n    [class.fade-out]=\"day.fadeOut\"\n    [class.in-range]=\"day.inRange\"\n    [class.rounded-ne]=\"day.roundedNe\"\n    [class.rounded-nw]=\"day.roundedNw\"\n    [class.rounded-se]=\"day.roundedSe\"\n    [class.rounded-sw]=\"day.roundedSw\"\n    (click)=\"selectDay(day)\"\n    type=\"button\"\n  >\n    <span\n      class=\"day-wrapper\"\n      [class.selected]=\"day.selected\"\n      [class.today]=\"day.today\"\n      [class.hidden]=\"day.hidden\"\n    >\n      {{ day.display }}\n    </span>\n  </button>\n</div>\n", styles: [".controls{display:flex;align-items:center;justify-content:space-between}.calendar{display:grid;grid-template-columns:repeat(7,calc(var(--base-grid-size) * 10));grid-auto-rows:calc(var(--base-grid-size) * 6)}.label{display:flex;justify-content:center;align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-heavy)}.day{display:flex;align-items:stretch}.day:hover{background-color:var(--surface-light-1)}.day.in-range{background-color:var(--purp-10)}.day.fade-out{background-image:linear-gradient(to right,var(--purp-10),var(--white-100))}.day.fade-in{background-image:linear-gradient(to right,var(--white-100),var(--purp-10))}.day.bleed{color:var(--type-light-disabled)}.day.rounded-ne{border-top-right-radius:var(--border-radius-medium)}.day.rounded-nw{border-top-left-radius:var(--border-radius-medium)}.day.rounded-sw{border-bottom-left-radius:var(--border-radius-medium)}.day.rounded-se{border-bottom-right-radius:var(--border-radius-medium)}.day-wrapper{flex-grow:1;display:flex;justify-content:center;align-items:center;border-radius:var(--border-radius-medium)}.day-wrapper.selected{background-color:var(--purp-60);color:var(--type-dark-high-contrast)}.day-wrapper.today{border-radius:calc(var(--base-grid-size) * 8);border:var(--border-width) solid var(--border-light);font-weight:var(--font-weight-heavy)}.day-wrapper.hidden{display:none}\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: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition"] }, { kind: "component", type: SingleSelectComponent, selector: "riv-single-select", inputs: ["groups", "selectedOption", "filterabilityOptions", "loading", "locked", "maxCalloutHeight", "noOptionsMessage", "nodeTemplate", "triggerTemplate", "placeholder", "disabled"], outputs: ["filterQueryChange", "selectedOptionChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"controls\">\n  <div>\n    <ng-template #selectTrigger let-selectedOption=\"selectedOption\">\n      <button\n        rivButton\n        [size]=\"'small'\"\n        [variant]=\"'ghost'\"\n        [icon]=\"'ChevronDown'\"\n        [iconPosition]=\"'last'\"\n        type=\"button\"\n      >\n        {{ selectedOption.title || '...' }}\n      </button>\n    </ng-template>\n    <riv-single-select\n      placeholder=\"Month...\"\n      [groups]=\"monthOptions$ | async | rivOptionGroup\"\n      [selectedOption]=\"selectedMonthOption$ | async\"\n      (selectedOptionChange)=\"activeYearMonthChange.emit($event.date)\"\n      [triggerTemplate]=\"selectTrigger\"\n    ></riv-single-select>\n    <riv-single-select\n      placeholder=\"Year...\"\n      [groups]=\"yearOptions$ | async | rivOptionGroup\"\n      [selectedOption]=\"selectedYearOption$ | async\"\n      (selectedOptionChange)=\"activeYearMonthChange.emit($event.date)\"\n      [triggerTemplate]=\"selectTrigger\"\n    ></riv-single-select>\n  </div>\n  <div\n    *ngIf=\"{ prev: previousMonth$ | async, next: nextMonth$ | async }; let vm\"\n  >\n    <button\n      rivButton\n      [size]=\"'small'\"\n      [variant]=\"'ghost'\"\n      [icon]=\"'ArrowLeft'\"\n      [disabled]=\"!vm.prev\"\n      (click)=\"vm.prev ? activeYearMonthChange.emit(vm.prev) : null\"\n      type=\"button\"\n    ></button>\n    <button\n      rivButton\n      [size]=\"'small'\"\n      [variant]=\"'ghost'\"\n      [icon]=\"'ArrowRight'\"\n      [disabled]=\"!vm.next\"\n      (click)=\"vm.next ? activeYearMonthChange.emit(vm.next) : null\"\n      type=\"button\"\n    ></button>\n  </div>\n</div>\n<div class=\"calendar\">\n  <span class=\"label\">Su</span>\n  <span class=\"label\">Mo</span>\n  <span class=\"label\">Tu</span>\n  <span class=\"label\">We</span>\n  <span class=\"label\">Th</span>\n  <span class=\"label\">Fr</span>\n  <span class=\"label\">Sa</span>\n  <button\n    *ngFor=\"let day of dates$ | async\"\n    class=\"day\"\n    [disabled]=\"day.hidden\"\n    [class.bleed]=\"!day.inCurrentMonth\"\n    [class.fade-in]=\"day.fadeIn\"\n    [class.fade-out]=\"day.fadeOut\"\n    [class.in-range]=\"day.inRange\"\n    [class.rounded-ne]=\"day.roundedNe\"\n    [class.rounded-nw]=\"day.roundedNw\"\n    [class.rounded-se]=\"day.roundedSe\"\n    [class.rounded-sw]=\"day.roundedSw\"\n    (click)=\"selectDay(day)\"\n    type=\"button\"\n  >\n    <span\n      class=\"day-wrapper\"\n      [class.selected]=\"day.selected\"\n      [class.today]=\"day.today\"\n      [class.hidden]=\"day.hidden\"\n    >\n      {{ day.display }}\n    </span>\n  </button>\n</div>\n", styles: [".controls{display:flex;align-items:center;justify-content:space-between}.calendar{display:grid;grid-template-columns:repeat(7,calc(var(--base-grid-size) * 10));grid-auto-rows:calc(var(--base-grid-size) * 6)}.label{display:flex;justify-content:center;align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-heavy)}.day{display:flex;align-items:stretch}.day:hover{background-color:var(--surface-light-1)}.day.in-range{background-color:var(--purp-10)}.day.fade-out{background-image:linear-gradient(to right,var(--purp-10),var(--white-100))}.day.fade-in{background-image:linear-gradient(to right,var(--white-100),var(--purp-10))}.day.bleed{color:var(--type-light-disabled)}.day.rounded-ne{border-top-right-radius:var(--border-radius-medium)}.day.rounded-nw{border-top-left-radius:var(--border-radius-medium)}.day.rounded-sw{border-bottom-left-radius:var(--border-radius-medium)}.day.rounded-se{border-bottom-right-radius:var(--border-radius-medium)}.day-wrapper{flex-grow:1;display:flex;justify-content:center;align-items:center;border-radius:var(--border-radius-medium)}.day-wrapper.selected{background-color:var(--purp-60);color:var(--type-dark-high-contrast)}.day-wrapper.today{border-radius:calc(var(--base-grid-size) * 8);border:var(--border-width) solid var(--border-light);font-weight:var(--font-weight-heavy)}.day-wrapper.hidden{display:none}\n"] }]
@@ -1841,7 +1871,7 @@ class DateRangeComponent extends InputLabelComponent {
     }
 }
 DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateRangeComponent, selector: "riv-date-range", inputs: { showPresets: "showPresets", min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <button\n    #trigger\n    class=\"trigger\"\n    (click)=\"open$.next(true)\"\n    [disabled]=\"disabled$ | async\"\n    type=\"button\"\n  >\n    <ng-container\n      *ngIf=\"displayValue$ | async; else placeholderValue; let display\"\n    >\n      <span class=\"value\">{{ display }}</span>\n    </ng-container>\n    <ng-template #placeholderValue>\n      <span class=\"value placeholder\">{{ placeholder$ | async }}</span>\n    </ng-template>\n    <span class=\"chevron\">\n      <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n    </span>\n  </button>\n</riv-input-label>\n\n<ng-template\n  #self\n  [ngTemplateOutlet]=\"self\"\n  let-inputValue\n  [ngTemplateOutletContext]=\"{ $implicit: (value$ | async) }\"\n>\n  <riv-callout\n    *ngIf=\"open$ | async\"\n    [anchor]=\"trigger\"\n    [showCaret]=\"false\"\n    [theme]=\"'light'\"\n    [allowedPositions]=\"[\n      'top-left',\n      'top-center',\n      'top-right',\n      'bottom-right',\n      'bottom-center',\n      'bottom-left'\n    ]\"\n    [preferredPosition]=\"'bottom-right'\"\n    (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n  >\n    <div class=\"content\">\n      <div *ngIf=\"showPresets\" class=\"presets\">\n        <ng-template #presetTpl let-node=\"node\">\n          <ng-template\n            #self\n            [ngTemplateOutlet]=\"self\"\n            let-isFavorite\n            [ngTemplateOutletContext]=\"{\n              $implicit: (favoritePresetIds$ | async)?.includes(node.id)\n            }\"\n          >\n            <div class=\"preset\" [class.favorite]=\"isFavorite\">\n              <div class=\"description\">\n                <riv-highlight\n                  class=\"title\"\n                  [text]=\"node.title\"\n                  [indices]=\"node.titleHighlightIndices || []\"\n                ></riv-highlight>\n                <riv-highlight\n                  class=\"subtitle\"\n                  [text]=\"node.subtitle\"\n                  [indices]=\"node.subtitleHighlightIndices || []\"\n                ></riv-highlight>\n              </div>\n              <button\n                (click)=\"\n                  setFavorite(node, !isFavorite); $event.stopPropagation()\n                \"\n                type=\"button\"\n              >\n                <riv-icon\n                  [name]=\"isFavorite ? 'HeartActive' : 'Heart'\"\n                  [size]=\"16\"\n                  [rivTooltip]=\"'Mark as favorite'\"\n                ></riv-icon>\n              </button>\n            </div>\n          </ng-template>\n        </ng-template>\n        <riv-single-select\n          [label]=\"'Date presets'\"\n          [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search...' }\"\n          (filterQueryChange)=\"presetFilterQuery$.next($event)\"\n          [groups]=\"(filteredPresetOptions$ | async) ?? []\"\n          [selectedOption]=\"selectedPreset$ | async\"\n          (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n          [nodeTemplate]=\"presetTpl\"\n        ></riv-single-select>\n        <ng-template\n          #self\n          [ngTemplateOutlet]=\"self\"\n          let-favorites\n          [ngTemplateOutletContext]=\"{ $implicit: favoritePresets$ | async }\"\n        >\n          <riv-input-label *ngIf=\"favorites.length\" [label]=\"'Favorites'\">\n            <div class=\"shortcuts\">\n              <button\n                *ngFor=\"let favorite of favorites\"\n                class=\"shortcut\"\n                [class.active]=\"(selectedPreset$ | async)?.id === favorite.id\"\n                (click)=\"userSelectedPreset$.next(favorite)\"\n                type=\"button\"\n              >\n                <span class=\"title\">{{ favorite.title }}</span>\n                <button\n                  (click)=\"setFavorite(favorite, false)\"\n                  [rivTooltip]=\"'Remove favorite'\"\n                  type=\"button\"\n                >\n                  <riv-icon [name]=\"'HeartActive'\" [size]=\"16\"></riv-icon>\n                </button>\n              </button>\n            </div>\n          </riv-input-label>\n        </ng-template>\n      </div>\n\n      <div class=\"calendars\">\n        <riv-calendar\n          class=\"left\"\n          [activeYearMonth]=\"(leftActiveYearMonth$ | async) || TODAY\"\n          (activeYearMonthChange)=\"userLeftActiveYearMonth$.next($event)\"\n          [displayMin]=\"(min$ | async) || TODAY\"\n          [displayMax]=\"(max$ | async) || TODAY\"\n          [selectableMin]=\"(leftMin$ | async) || TODAY\"\n          [selectableMax]=\"(leftMax$ | async) || TODAY\"\n          [omitRange]=\"(leftOmitRange$ | async) || [TODAY, TODAY]\"\n          [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n          (dateSelect)=\"userSelectedDate$.next($event)\"\n        ></riv-calendar>\n        <riv-calendar\n          class=\"right\"\n          [activeYearMonth]=\"(rightActiveYearMonth$ | async) || TODAY\"\n          (activeYearMonthChange)=\"userRightActiveYearMonth$.next($event)\"\n          [displayMin]=\"(min$ | async) || TODAY\"\n          [displayMax]=\"(max$ | async) || TODAY\"\n          [selectableMin]=\"(rightMin$ | async) || TODAY\"\n          [selectableMax]=\"(rightMax$ | async) || TODAY\"\n          [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n          (dateSelect)=\"userSelectedDate$.next($event)\"\n        ></riv-calendar>\n      </div>\n\n      <footer class=\"buttons\">\n        <button\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          (click)=\"userSelectedDate$.next(undefined)\"\n          type=\"button\"\n        >\n          Clear\n        </button>\n        <button\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'primary'\"\n          (click)=\"open$.next(false)\"\n          type=\"button\"\n        >\n          Done\n        </button>\n      </footer>\n    </div>\n  </riv-callout>\n</ng-template>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content{display:inline-grid;grid-template-rows:1fr auto;grid-template-columns:calc(var(--base-grid-size) * 50) 1fr 1fr}.presets{grid-area:1 / 1 / 3 / 2;background-color:var(--surface-light-1);padding:var(--size-xlarge) var(--size-large);border-right:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;gap:var(--size-medium)}.preset{display:flex;transition:background-color var(--short-transition)}.preset:hover{background-color:var(--surface-light-2)}.preset button{color:transparent;transition:color var(--short-transition);padding:var(--size-medium) var(--size-large) var(--size-medium) var(--size-small)}.preset:hover button{color:var(--type-light-low-contrast)}.preset button:hover{color:var(--type-light-high-contrast)}.preset.favorite button{color:var(--type-light-link)}.preset .description{flex-grow:1;padding:var(--size-medium) var(--size-small) var(--size-medium) var(--size-medium)}.preset .title{display:block;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-1)}.preset .subtitle{display:block;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);color:var(--type-light-low-contrast)}.shortcuts{display:flex;flex-direction:column;gap:var(--size-xsmall);overflow-y:auto}.shortcut{display:flex;align-items:center;padding:var(--size-small) var(--size-small) var(--size-small) var(--size-medium);gap:var(--size-small);border-radius:var(--border-radius-small);transition:background-color var(--short-transition)}.shortcut:hover{background-color:var(--black-20)}.shortcut.active{background-color:var(--baloo-05)}.shortcut .title{flex-grow:1;text-align:left;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.shortcut button{color:transparent;transition:color var(--short-transition)}.shortcut:hover button{color:var(--type-light-link)}.calendars{grid-column:2 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;padding:var(--size-large)}.left{grid-area:1 / 1 / 2 / 2;padding-right:var(--size-large);border-right:var(--border-width) solid var(--border-light)}.right{padding-left:var(--size-large);grid-area:1 / 2 / 2 / 3}.buttons{grid-area:2 / 2 / 3 / 4;padding:var(--size-small);display:flex;justify-content:space-between}\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: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition"] }, { kind: "component", type: CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "component", type: SingleSelectComponent, selector: "riv-single-select", inputs: ["groups", "selectedOption", "filterabilityOptions", "loading", "locked", "noOptionsMessage", "nodeTemplate", "triggerTemplate", "placeholder", "disabled"], outputs: ["filterQueryChange", "selectedOptionChange"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateRangeComponent, selector: "riv-date-range", inputs: { showPresets: "showPresets", min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled" }, outputs: { valueChange: "valueChange" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <button\n    #trigger\n    class=\"trigger\"\n    (click)=\"open$.next(true)\"\n    [disabled]=\"disabled$ | async\"\n    type=\"button\"\n  >\n    <ng-container\n      *ngIf=\"displayValue$ | async; else placeholderValue; let display\"\n    >\n      <span class=\"value\">{{ display }}</span>\n    </ng-container>\n    <ng-template #placeholderValue>\n      <span class=\"value placeholder\">{{ placeholder$ | async }}</span>\n    </ng-template>\n    <span class=\"chevron\">\n      <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n    </span>\n  </button>\n</riv-input-label>\n\n<ng-template\n  #self\n  [ngTemplateOutlet]=\"self\"\n  let-inputValue\n  [ngTemplateOutletContext]=\"{ $implicit: (value$ | async) }\"\n>\n  <riv-callout\n    *ngIf=\"open$ | async\"\n    [anchor]=\"trigger\"\n    [showCaret]=\"false\"\n    [theme]=\"'light'\"\n    [allowedPositions]=\"[\n      'top-left',\n      'top-center',\n      'top-right',\n      'bottom-right',\n      'bottom-center',\n      'bottom-left'\n    ]\"\n    [preferredPosition]=\"'bottom-right'\"\n    (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n  >\n    <div class=\"content\">\n      <div *ngIf=\"showPresets\" class=\"presets\">\n        <ng-template #presetTpl let-node=\"node\">\n          <ng-template\n            #self\n            [ngTemplateOutlet]=\"self\"\n            let-isFavorite\n            [ngTemplateOutletContext]=\"{\n              $implicit: (favoritePresetIds$ | async)?.includes(node.id)\n            }\"\n          >\n            <div class=\"preset\" [class.favorite]=\"isFavorite\">\n              <div class=\"description\">\n                <riv-highlight\n                  class=\"title\"\n                  [text]=\"node.title\"\n                  [indices]=\"node.titleHighlightIndices || []\"\n                ></riv-highlight>\n                <riv-highlight\n                  class=\"subtitle\"\n                  [text]=\"node.subtitle\"\n                  [indices]=\"node.subtitleHighlightIndices || []\"\n                ></riv-highlight>\n              </div>\n              <button\n                (click)=\"\n                  setFavorite(node, !isFavorite); $event.stopPropagation()\n                \"\n                type=\"button\"\n              >\n                <riv-icon\n                  [name]=\"isFavorite ? 'HeartActive' : 'Heart'\"\n                  [size]=\"16\"\n                  [rivTooltip]=\"'Mark as favorite'\"\n                ></riv-icon>\n              </button>\n            </div>\n          </ng-template>\n        </ng-template>\n        <riv-single-select\n          [label]=\"'Date presets'\"\n          [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search...' }\"\n          (filterQueryChange)=\"presetFilterQuery$.next($event)\"\n          [groups]=\"(filteredPresetOptions$ | async) ?? []\"\n          [selectedOption]=\"selectedPreset$ | async\"\n          (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n          [nodeTemplate]=\"presetTpl\"\n        ></riv-single-select>\n        <ng-template\n          #self\n          [ngTemplateOutlet]=\"self\"\n          let-favorites\n          [ngTemplateOutletContext]=\"{ $implicit: favoritePresets$ | async }\"\n        >\n          <riv-input-label *ngIf=\"favorites.length\" [label]=\"'Favorites'\">\n            <div class=\"shortcuts\">\n              <button\n                *ngFor=\"let favorite of favorites\"\n                class=\"shortcut\"\n                [class.active]=\"(selectedPreset$ | async)?.id === favorite.id\"\n                (click)=\"userSelectedPreset$.next(favorite)\"\n                type=\"button\"\n              >\n                <span class=\"title\">{{ favorite.title }}</span>\n                <button\n                  (click)=\"setFavorite(favorite, false)\"\n                  [rivTooltip]=\"'Remove favorite'\"\n                  type=\"button\"\n                >\n                  <riv-icon [name]=\"'HeartActive'\" [size]=\"16\"></riv-icon>\n                </button>\n              </button>\n            </div>\n          </riv-input-label>\n        </ng-template>\n      </div>\n\n      <div class=\"calendars\">\n        <riv-calendar\n          class=\"left\"\n          [activeYearMonth]=\"(leftActiveYearMonth$ | async) || TODAY\"\n          (activeYearMonthChange)=\"userLeftActiveYearMonth$.next($event)\"\n          [displayMin]=\"(min$ | async) || TODAY\"\n          [displayMax]=\"(max$ | async) || TODAY\"\n          [selectableMin]=\"(leftMin$ | async) || TODAY\"\n          [selectableMax]=\"(leftMax$ | async) || TODAY\"\n          [omitRange]=\"(leftOmitRange$ | async) || [TODAY, TODAY]\"\n          [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n          (dateSelect)=\"userSelectedDate$.next($event)\"\n        ></riv-calendar>\n        <riv-calendar\n          class=\"right\"\n          [activeYearMonth]=\"(rightActiveYearMonth$ | async) || TODAY\"\n          (activeYearMonthChange)=\"userRightActiveYearMonth$.next($event)\"\n          [displayMin]=\"(min$ | async) || TODAY\"\n          [displayMax]=\"(max$ | async) || TODAY\"\n          [selectableMin]=\"(rightMin$ | async) || TODAY\"\n          [selectableMax]=\"(rightMax$ | async) || TODAY\"\n          [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n          (dateSelect)=\"userSelectedDate$.next($event)\"\n        ></riv-calendar>\n      </div>\n\n      <footer class=\"buttons\">\n        <button\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          (click)=\"userSelectedDate$.next(undefined)\"\n          type=\"button\"\n        >\n          Clear\n        </button>\n        <button\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'primary'\"\n          (click)=\"open$.next(false)\"\n          type=\"button\"\n        >\n          Done\n        </button>\n      </footer>\n    </div>\n  </riv-callout>\n</ng-template>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content{display:inline-grid;grid-template-rows:1fr auto;grid-template-columns:calc(var(--base-grid-size) * 50) 1fr 1fr}.presets{grid-area:1 / 1 / 3 / 2;background-color:var(--surface-light-1);padding:var(--size-xlarge) var(--size-large);border-right:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;gap:var(--size-medium)}.preset{display:flex;transition:background-color var(--short-transition)}.preset:hover{background-color:var(--surface-light-2)}.preset button{color:transparent;transition:color var(--short-transition);padding:var(--size-medium) var(--size-large) var(--size-medium) var(--size-small)}.preset:hover button{color:var(--type-light-low-contrast)}.preset button:hover{color:var(--type-light-high-contrast)}.preset.favorite button{color:var(--type-light-link)}.preset .description{flex-grow:1;padding:var(--size-medium) var(--size-small) var(--size-medium) var(--size-medium)}.preset .title{display:block;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-1)}.preset .subtitle{display:block;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);color:var(--type-light-low-contrast)}.shortcuts{display:flex;flex-direction:column;gap:var(--size-xsmall);overflow-y:auto}.shortcut{display:flex;align-items:center;padding:var(--size-small) var(--size-small) var(--size-small) var(--size-medium);gap:var(--size-small);border-radius:var(--border-radius-small);transition:background-color var(--short-transition)}.shortcut:hover{background-color:var(--black-20)}.shortcut.active{background-color:var(--baloo-05)}.shortcut .title{flex-grow:1;text-align:left;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.shortcut button{color:transparent;transition:color var(--short-transition)}.shortcut:hover button{color:var(--type-light-link)}.calendars{grid-column:2 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;padding:var(--size-large)}.left{grid-area:1 / 1 / 2 / 2;padding-right:var(--size-large);border-right:var(--border-width) solid var(--border-light)}.right{padding-left:var(--size-large);grid-area:1 / 2 / 2 / 3}.buttons{grid-area:2 / 2 / 3 / 4;padding:var(--size-small);display:flex;justify-content:space-between}\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: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition"] }, { kind: "component", type: CalendarComponent, selector: "riv-calendar", inputs: ["activeYearMonth", "displayMin", "displayMax", "selectableMin", "selectableMax", "omitRange", "selectedValue"], outputs: ["activeYearMonthChange", "dateSelect"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText"], outputs: ["labelAction"] }, { kind: "component", type: SingleSelectComponent, selector: "riv-single-select", inputs: ["groups", "selectedOption", "filterabilityOptions", "loading", "locked", "maxCalloutHeight", "noOptionsMessage", "nodeTemplate", "triggerTemplate", "placeholder", "disabled"], outputs: ["filterQueryChange", "selectedOptionChange"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-date-range', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <button\n    #trigger\n    class=\"trigger\"\n    (click)=\"open$.next(true)\"\n    [disabled]=\"disabled$ | async\"\n    type=\"button\"\n  >\n    <ng-container\n      *ngIf=\"displayValue$ | async; else placeholderValue; let display\"\n    >\n      <span class=\"value\">{{ display }}</span>\n    </ng-container>\n    <ng-template #placeholderValue>\n      <span class=\"value placeholder\">{{ placeholder$ | async }}</span>\n    </ng-template>\n    <span class=\"chevron\">\n      <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n    </span>\n  </button>\n</riv-input-label>\n\n<ng-template\n  #self\n  [ngTemplateOutlet]=\"self\"\n  let-inputValue\n  [ngTemplateOutletContext]=\"{ $implicit: (value$ | async) }\"\n>\n  <riv-callout\n    *ngIf=\"open$ | async\"\n    [anchor]=\"trigger\"\n    [showCaret]=\"false\"\n    [theme]=\"'light'\"\n    [allowedPositions]=\"[\n      'top-left',\n      'top-center',\n      'top-right',\n      'bottom-right',\n      'bottom-center',\n      'bottom-left'\n    ]\"\n    [preferredPosition]=\"'bottom-right'\"\n    (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n  >\n    <div class=\"content\">\n      <div *ngIf=\"showPresets\" class=\"presets\">\n        <ng-template #presetTpl let-node=\"node\">\n          <ng-template\n            #self\n            [ngTemplateOutlet]=\"self\"\n            let-isFavorite\n            [ngTemplateOutletContext]=\"{\n              $implicit: (favoritePresetIds$ | async)?.includes(node.id)\n            }\"\n          >\n            <div class=\"preset\" [class.favorite]=\"isFavorite\">\n              <div class=\"description\">\n                <riv-highlight\n                  class=\"title\"\n                  [text]=\"node.title\"\n                  [indices]=\"node.titleHighlightIndices || []\"\n                ></riv-highlight>\n                <riv-highlight\n                  class=\"subtitle\"\n                  [text]=\"node.subtitle\"\n                  [indices]=\"node.subtitleHighlightIndices || []\"\n                ></riv-highlight>\n              </div>\n              <button\n                (click)=\"\n                  setFavorite(node, !isFavorite); $event.stopPropagation()\n                \"\n                type=\"button\"\n              >\n                <riv-icon\n                  [name]=\"isFavorite ? 'HeartActive' : 'Heart'\"\n                  [size]=\"16\"\n                  [rivTooltip]=\"'Mark as favorite'\"\n                ></riv-icon>\n              </button>\n            </div>\n          </ng-template>\n        </ng-template>\n        <riv-single-select\n          [label]=\"'Date presets'\"\n          [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search...' }\"\n          (filterQueryChange)=\"presetFilterQuery$.next($event)\"\n          [groups]=\"(filteredPresetOptions$ | async) ?? []\"\n          [selectedOption]=\"selectedPreset$ | async\"\n          (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n          [nodeTemplate]=\"presetTpl\"\n        ></riv-single-select>\n        <ng-template\n          #self\n          [ngTemplateOutlet]=\"self\"\n          let-favorites\n          [ngTemplateOutletContext]=\"{ $implicit: favoritePresets$ | async }\"\n        >\n          <riv-input-label *ngIf=\"favorites.length\" [label]=\"'Favorites'\">\n            <div class=\"shortcuts\">\n              <button\n                *ngFor=\"let favorite of favorites\"\n                class=\"shortcut\"\n                [class.active]=\"(selectedPreset$ | async)?.id === favorite.id\"\n                (click)=\"userSelectedPreset$.next(favorite)\"\n                type=\"button\"\n              >\n                <span class=\"title\">{{ favorite.title }}</span>\n                <button\n                  (click)=\"setFavorite(favorite, false)\"\n                  [rivTooltip]=\"'Remove favorite'\"\n                  type=\"button\"\n                >\n                  <riv-icon [name]=\"'HeartActive'\" [size]=\"16\"></riv-icon>\n                </button>\n              </button>\n            </div>\n          </riv-input-label>\n        </ng-template>\n      </div>\n\n      <div class=\"calendars\">\n        <riv-calendar\n          class=\"left\"\n          [activeYearMonth]=\"(leftActiveYearMonth$ | async) || TODAY\"\n          (activeYearMonthChange)=\"userLeftActiveYearMonth$.next($event)\"\n          [displayMin]=\"(min$ | async) || TODAY\"\n          [displayMax]=\"(max$ | async) || TODAY\"\n          [selectableMin]=\"(leftMin$ | async) || TODAY\"\n          [selectableMax]=\"(leftMax$ | async) || TODAY\"\n          [omitRange]=\"(leftOmitRange$ | async) || [TODAY, TODAY]\"\n          [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n          (dateSelect)=\"userSelectedDate$.next($event)\"\n        ></riv-calendar>\n        <riv-calendar\n          class=\"right\"\n          [activeYearMonth]=\"(rightActiveYearMonth$ | async) || TODAY\"\n          (activeYearMonthChange)=\"userRightActiveYearMonth$.next($event)\"\n          [displayMin]=\"(min$ | async) || TODAY\"\n          [displayMax]=\"(max$ | async) || TODAY\"\n          [selectableMin]=\"(rightMin$ | async) || TODAY\"\n          [selectableMax]=\"(rightMax$ | async) || TODAY\"\n          [selectedValue]=\"(selectedValue$ | async) || TODAY\"\n          (dateSelect)=\"userSelectedDate$.next($event)\"\n        ></riv-calendar>\n      </div>\n\n      <footer class=\"buttons\">\n        <button\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          (click)=\"userSelectedDate$.next(undefined)\"\n          type=\"button\"\n        >\n          Clear\n        </button>\n        <button\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'primary'\"\n          (click)=\"open$.next(false)\"\n          type=\"button\"\n        >\n          Done\n        </button>\n      </footer>\n    </div>\n  </riv-callout>\n</ng-template>\n", styles: [".trigger{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);display:flex;gap:var(--size-small)}.trigger:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.trigger:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.value{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-small);flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-small);background-color:var(--surface-light-2);border-left:var(--border-width) solid var(--border-light)}.content{display:inline-grid;grid-template-rows:1fr auto;grid-template-columns:calc(var(--base-grid-size) * 50) 1fr 1fr}.presets{grid-area:1 / 1 / 3 / 2;background-color:var(--surface-light-1);padding:var(--size-xlarge) var(--size-large);border-right:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;gap:var(--size-medium)}.preset{display:flex;transition:background-color var(--short-transition)}.preset:hover{background-color:var(--surface-light-2)}.preset button{color:transparent;transition:color var(--short-transition);padding:var(--size-medium) var(--size-large) var(--size-medium) var(--size-small)}.preset:hover button{color:var(--type-light-low-contrast)}.preset button:hover{color:var(--type-light-high-contrast)}.preset.favorite button{color:var(--type-light-link)}.preset .description{flex-grow:1;padding:var(--size-medium) var(--size-small) var(--size-medium) var(--size-medium)}.preset .title{display:block;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-1)}.preset .subtitle{display:block;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);color:var(--type-light-low-contrast)}.shortcuts{display:flex;flex-direction:column;gap:var(--size-xsmall);overflow-y:auto}.shortcut{display:flex;align-items:center;padding:var(--size-small) var(--size-small) var(--size-small) var(--size-medium);gap:var(--size-small);border-radius:var(--border-radius-small);transition:background-color var(--short-transition)}.shortcut:hover{background-color:var(--black-20)}.shortcut.active{background-color:var(--baloo-05)}.shortcut .title{flex-grow:1;text-align:left;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2)}.shortcut button{color:transparent;transition:color var(--short-transition)}.shortcut:hover button{color:var(--type-light-link)}.calendars{grid-column:2 / 4;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;padding:var(--size-large)}.left{grid-area:1 / 1 / 2 / 2;padding-right:var(--size-large);border-right:var(--border-width) solid var(--border-light)}.right{padding-left:var(--size-large);grid-area:1 / 2 / 2 / 3}.buttons{grid-area:2 / 2 / 3 / 4;padding:var(--size-small);display:flex;justify-content:space-between}\n"] }]
@@ -2164,6 +2194,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                 }]
         }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: CalloutService }, { type: i0.ChangeDetectorRef }]; } });
 
+class ContentService {
+    constructor() {
+        this.sizeChangesSource = new Subject();
+        this.sizeChanges$ = this.sizeChangesSource.asObservable();
+        this.resizeObserver = new ResizeObserver(entries => {
+            for (const entry of entries) {
+                this.sizeChangesSource.next({
+                    element: entry.target,
+                    width: entry.contentRect.width,
+                    height: entry.contentRect.height,
+                });
+            }
+        });
+    }
+    observe(element) {
+        this.resizeObserver.observe(element);
+    }
+    unobserve(element) {
+        this.resizeObserver.unobserve(element);
+    }
+}
+ContentService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ContentService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContentService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ContentService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return []; } });
+
+class SizeDirective {
+    constructor(elementRef, contentService, zone) {
+        this.elementRef = elementRef;
+        this.contentService = contentService;
+        this.zone = zone;
+        this.rivClientSize = new EventEmitter();
+    }
+    ngOnInit() {
+        this.contentService.observe(this.elementRef.nativeElement);
+        this.subscription = this.contentService.sizeChanges$
+            .pipe(filter(change => change.element === this.elementRef.nativeElement), debounceTimeAfterFirst(10))
+            .subscribe(change => {
+            this.rivClientSize.emit(change);
+            // TODO: Hopefully we can take this out once we switch to signals and zoneless Angular
+            this.zone.run(() => { });
+        });
+    }
+    ngOnDestroy() {
+        var _a;
+        this.contentService.unobserve(this.elementRef.nativeElement);
+        (_a = this.subscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
+    }
+}
+SizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SizeDirective, deps: [{ token: i0.ElementRef }, { token: ContentService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+SizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: SizeDirective, selector: "[rivClientSize]", outputs: { rivClientSize: "rivClientSize" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SizeDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rivClientSize]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: ContentService }, { type: i0.NgZone }]; }, propDecorators: { rivClientSize: [{
+                type: Output
+            }] } });
+function debounceTimeAfterFirst(delay) {
+    return (source) => merge(source.pipe(take(1)), source.pipe(skip(1), debounceTime(delay)));
+}
+
 class DataTableRowComponent {
     constructor() {
         this.subRow = false;
@@ -2607,17 +2702,7 @@ function getDateRange$1(stacks) {
 function pointReducer(points) {
     return points.reduce((total, { value }) => total + value, 0);
 }
-function getColumnWidth(numColumns) {
-    if (numColumns <= 6)
-        return 72;
-    if (numColumns <= 18)
-        return 40;
-    if (numColumns <= 40)
-        return 16;
-    return 8;
-}
 
-const MAX_COLUMNS = 72;
 const DEFAULT_INTERVAL$1 = 'month';
 // TODO: once we upgrade to Angular 16, this component can be cleaned up with
 // signals instead of RxJS.
@@ -2625,16 +2710,30 @@ class StackedColumnComponent {
     constructor() {
         this.input$ = new BehaviorSubject([]);
         this.width$ = new BehaviorSubject(960);
-        this.height$ = new BehaviorSubject(256);
+        this.HEIGHT = 300;
         this.valueFormatter = v => v.toString();
         this.interval$ = new BehaviorSubject(DEFAULT_INTERVAL$1);
-        this.allowedIntervals$ = this.input$.pipe(map(input => {
-            const numVisibleColumns = input.filter(stack => stack.filter(s => s.style === 'tooltipOnly').length === 0).length;
+        this.COLUMN_WIDTHS = [8, 16, 40, 72];
+        this.MIN_COLUMN_WIDTH = this.COLUMN_WIDTHS[0];
+        this.numInvisibleColumns$ = this.input$.pipe(map(input => input.filter(stack => stack.filter(s => s.style == 'tooltipOnly').length > 0).length));
+        this.numVisibleColumns$ = combineLatest([
+            this.input$,
+            this.numInvisibleColumns$,
+        ]).pipe(map(([input, numInvisibleColumns]) => input.length - numInvisibleColumns));
+        this.maxColumns$ = this.width$.pipe(map(width => {
+            const innerWidth = width - this.LEFT_OFFSET;
+            const columnWidthWithPadding = this.MIN_COLUMN_WIDTH + this.COLUMN_PADDING * 2;
+            return Math.floor(innerWidth / columnWidthWithPadding);
+        }));
+        this.allowedIntervals$ = combineLatest([
+            this.input$,
+            this.maxColumns$,
+            this.numVisibleColumns$,
+        ]).pipe(map(([input, maxColumns, numVisibleColumns]) => {
             const [minDate, maxDate] = getDateRange$1(input);
             return intervals.filter(interval => {
-                const timeInterval = getTimeInterval(interval);
-                const xStepsCount = timeInterval.range(timeInterval.floor(minDate), timeInterval.floor(timeInterval.offset(maxDate, 1))).length;
-                return numVisibleColumns * xStepsCount <= MAX_COLUMNS;
+                const xStepsCount = this.getXStepsInRange(interval, minDate, maxDate);
+                return numVisibleColumns * xStepsCount <= maxColumns;
             });
         }), shareReplay({ refCount: true, bufferSize: 1 }));
         this.intervalOptions$ = this.allowedIntervals$.pipe(map(intervals => intervals.map((interval) => ({
@@ -2660,6 +2759,26 @@ class StackedColumnComponent {
             return (_a = options.find(o => o.id === interval)) !== null && _a !== void 0 ? _a : null;
         }), shareReplay({ refCount: true, bufferSize: 1 }));
         this.selectedInterval$ = this.selectedIntervalOption$.pipe(map(option => (option ? option.id : DEFAULT_INTERVAL$1)));
+        this.columnWidth$ = combineLatest([
+            this.input$,
+            this.selectedInterval$,
+            this.numVisibleColumns$,
+            this.width$,
+        ]).pipe(map(([input, selectedInterval, numVisibleColumns, width]) => {
+            const [minDate, maxDate] = getDateRange$1(input);
+            const xStepCount = this.getXStepsInRange(selectedInterval, minDate, maxDate);
+            const innerWidth = width - this.LEFT_OFFSET;
+            const allowedColumnWidths = this.COLUMN_WIDTHS.filter(columnWidth => {
+                const columnWidthWithPadding = columnWidth + this.COLUMN_PADDING * 2;
+                return (innerWidth -
+                    numVisibleColumns * xStepCount * columnWidthWithPadding >=
+                    0);
+            });
+            const columnWidth = allowedColumnWidths.at(-1);
+            if (!columnWidth)
+                return 0;
+            return columnWidth;
+        }));
         this.binnedData$ = combineLatest([
             this.input$,
             this.selectedInterval$,
@@ -2681,16 +2800,16 @@ class StackedColumnComponent {
             });
         })), shareReplay({ refCount: true, bufferSize: 1 }));
         this.LEFT_OFFSET = 48;
+        this.COLUMN_PADDING = 4;
         this.drawData$ = combineLatest([
             this.binnedData$,
             this.width$,
-            this.height$,
             this.selectedInterval$,
-        ]).pipe(map(([binnedData, width, height, interval]) => {
-            const viewBox = `0 0 ${width} ${height}`;
+            this.numInvisibleColumns$,
+            this.columnWidth$,
+        ]).pipe(map(([binnedData, width, interval, numInvisibleColumns, columnWidth]) => {
+            const viewBox = `0 0 ${width} ${this.HEIGHT}`;
             const padding = 16;
-            const invisColumns = binnedData.filter(stack => stack.filter(s => s.style == 'tooltipOnly').length > 0).length;
-            const visibleColumns = binnedData.length - invisColumns;
             const [minDate, maxDate] = getDateRange$1(binnedData);
             const hasMultipleYears = minDate.getFullYear() < maxDate.getFullYear();
             const xMinorIntervalFormat = getMinorIntervalFormat(interval);
@@ -2704,11 +2823,9 @@ class StackedColumnComponent {
             const xOuterScale = scaleBand()
                 .domain(xSteps.map(date => fullFormatter(date)))
                 .range([this.LEFT_OFFSET, width]);
-            const columnWidth = getColumnWidth(xSteps.length * visibleColumns);
-            const columnPadding = 4;
             const outerPadding = (xOuterScale.bandwidth() -
-                (columnPadding * (binnedData.length - 1 - invisColumns) +
-                    columnWidth * (binnedData.length - invisColumns))) /
+                (this.COLUMN_PADDING * (binnedData.length - 1 - numInvisibleColumns) +
+                    columnWidth * (binnedData.length - numInvisibleColumns))) /
                 2;
             const renderInformation = binnedData.map(stackData => {
                 /*
@@ -2783,7 +2900,7 @@ class StackedColumnComponent {
                 domainMax = 1;
             const yScale = scaleLinear()
                 .domain([0, domainMax])
-                .range([height - padding * 2, padding]);
+                .range([this.HEIGHT - padding * 2, padding]);
             const rects = [];
             let invisColumnsSoFar = 0;
             // For each unique stack,
@@ -2804,7 +2921,7 @@ class StackedColumnComponent {
                         const x = ((_a = xOuterScale(fullFormatter(date))) !== null && _a !== void 0 ? _a : 0) +
                             outerPadding +
                             columnWidth * (index - invisColumnsSoFar) +
-                            columnPadding * (index - invisColumnsSoFar);
+                            this.COLUMN_PADDING * (index - invisColumnsSoFar);
                         const y = yScale(baseline) - height;
                         let fill = '';
                         if (seriesPoint.series.style != 'tooltipOnly') {
@@ -2848,8 +2965,9 @@ class StackedColumnComponent {
                     .filter((tick, i, ticks) => i === 0 || tick.label !== ticks[i - 1].label)
                 : [];
             const yTicks = yScale.ticks(5);
-            const hoverBandWidth = (renderInformation.length - invisColumns) * columnWidth +
-                (renderInformation.length + 1 - invisColumns) * columnPadding;
+            const hoverBandWidth = (renderInformation.length - numInvisibleColumns) * columnWidth +
+                (renderInformation.length + 1 - numInvisibleColumns) *
+                    this.COLUMN_PADDING;
             const hoverBands = xSteps.map(date => {
                 var _a;
                 return ({
@@ -2899,36 +3017,27 @@ class StackedColumnComponent {
     set width(v) {
         this.width$.next(v);
     }
-    get width() {
-        return this.width$.getValue();
-    }
-    set height(v) {
-        this.height$.next(v);
-    }
-    get height() {
-        return this.height$.getValue();
-    }
     set interval(v) {
         this.interval$.next(v);
     }
     get interval() {
         return this.interval$.getValue();
     }
+    getXStepsInRange(interval, minDate, maxDate) {
+        const timeInterval = getTimeInterval(interval);
+        return timeInterval.range(timeInterval.floor(minDate), timeInterval.floor(timeInterval.offset(maxDate, 1))).length;
+    }
     setIntervalOption(option) {
         this.interval = option.id;
     }
 }
 StackedColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StackedColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-StackedColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: StackedColumnComponent, selector: "riv-stacked-column", inputs: { input: "input", width: "width", height: "height", valueFormatter: "valueFormatter", interval: "interval" }, 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    <defs>\n      <pattern\n        id=\"stripes\"\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"d.columnWidth\"\n        [attr.height]=\"d.columnWidth\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <line\n          x1=\"0\"\n          [attr.y1]=\"d.columnWidth\"\n          [attr.x2]=\"d.columnWidth\"\n          y2=\"0\"\n          stroke=\"var(--white-100)\"\n          stroke-width=\"1\"\n        ></line>\n      </pattern>\n    </defs>\n    <g *ngFor=\"let tick of d.xMinorTicks\">\n      <rect\n        class=\"tick-background\"\n        [class.focused]=\"(hoveredBand$ | async)?.dateValue === tick.dateValue\"\n        [attr.x]=\"tick.x - 20\"\n        [attr.y]=\"d.yScale(0) + 3\"\n        width=\"40\"\n        height=\"12\"\n        rx=\"2\"\n      ></rect>\n      <text\n        class=\"tick-label\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"d.yScale(0) + 12\"\n        text-anchor=\"middle\"\n      >\n        {{ tick.label }}\n      </text>\n    </g>\n    <g *ngFor=\"let tick of d.xMajorTicks\">\n      <text\n        class=\"tick-label\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"d.yScale(0) + 24\"\n        text-anchor=\"middle\"\n      >\n        {{ tick.label }}\n      </text>\n    </g>\n    <g *ngFor=\"let tick of d.yTicks\">\n      <rect\n        class=\"tick\"\n        x=\"0\"\n        [attr.y]=\"d.yScale(tick)\"\n        width=\"100%\"\n        height=\"1\"\n      ></rect>\n      <text class=\"tick-label\" x=\"0\" [attr.y]=\"d.yScale(tick)\" dy=\"-4\">\n        {{ valueFormatter(tick) }}\n      </text>\n    </g>\n    <g *ngFor=\"let rect of d.rects\">\n      <rect\n        class=\"column\"\n        [attr.x]=\"rect.x\"\n        [attr.y]=\"rect.y\"\n        [attr.width]=\"rect.width\"\n        [attr.height]=\"rect.height\"\n        [attr.fill]=\"rect.fill\"\n        [class.blurred]=\"\n          (hoveredBand$ | async) !== null &&\n          (hoveredBand$ | async)?.dateValue !== rect.dateValue\n        \"\n      ></rect>\n      <rect\n        *ngIf=\"rect.striped\"\n        [attr.x]=\"rect.x\"\n        [attr.y]=\"rect.y\"\n        [attr.width]=\"rect.width\"\n        [attr.height]=\"rect.height\"\n        fill=\"url(#stripes)\"\n      ></rect>\n    </g>\n    <rect\n      *ngFor=\"let rect of d.hoverBands\"\n      [attr.x]=\"rect.x\"\n      [attr.y]=\"rect.y\"\n      [attr.width]=\"rect.width\"\n      [attr.height]=\"rect.height\"\n      fill=\"transparent\"\n      (mouseenter)=\"\n        hoveredBand$.next({ dateValue: rect.dateValue, event: $event })\n      \"\n      (mouseleave)=\"hoveredBand$.next(null)\"\n    ></rect>\n  </svg>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n  <riv-callout\n    *riv-callout\n    [anchor]=\"callout.anchor\"\n    [isModal]=\"false\"\n    [preferredPosition]=\"'center-right'\"\n    [allowedPositions]=\"[\n      'center-right',\n      'center-left',\n      'top-center',\n      'bottom-center'\n    ]\"\n  >\n    <div class=\"callout-content\">\n      <div class=\"callout-metric\" *ngFor=\"let metric of callout.metrics\">\n        <div>{{ metric.label }}</div>\n        <div class=\"callout-metric-value\">{{ metric.value }}</div>\n      </div>\n    </div>\n  </riv-callout>\n</ng-container>\n\n<ng-template #zeroState>\n  <riv-zero-state></riv-zero-state>\n</ng-template>\n\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: [".tick{fill:var(--gray-20)}.tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.tick-background{transition:fill var(--short-transition);fill:transparent}.tick-background.focused{fill:var(--baloo-10)}.column{transition:opacity var(--short-transition)}.column.blurred{opacity:.4}.callout-content{padding:var(--size-large);display:grid;gap:var(--size-medium);grid-template-columns:1fr 1fr}.callout-metric{display:flex;flex-direction:column;gap:var(--size-xsmall);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-metric-value{font-weight:var(--font-weight-heavy)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: CalloutDirective, selector: "[riv-callout]" }, { kind: "component", type: 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: OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+StackedColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: StackedColumnComponent, selector: "riv-stacked-column", inputs: { input: "input", valueFormatter: "valueFormatter", interval: "interval" }, viewQueries: [{ propertyName: "controls", first: true, predicate: ["controls"], descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"!(empty$ | async); else zeroState\"\n  class=\"container\"\n  (rivClientSize)=\"width = $event.width\"\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    *ngIf=\"drawData$ | async; let d\"\n    [attr.viewBox]=\"d.viewBox\"\n  >\n    <defs>\n      <pattern\n        id=\"stripes\"\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"d.columnWidth\"\n        [attr.height]=\"d.columnWidth\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <line\n          x1=\"0\"\n          [attr.y1]=\"d.columnWidth\"\n          [attr.x2]=\"d.columnWidth\"\n          y2=\"0\"\n          stroke=\"var(--white-100)\"\n          stroke-width=\"1\"\n        ></line>\n      </pattern>\n    </defs>\n    <g *ngFor=\"let tick of d.xMinorTicks\">\n      <rect\n        class=\"tick-background\"\n        [class.focused]=\"(hoveredBand$ | async)?.dateValue === tick.dateValue\"\n        [attr.x]=\"tick.x - 20\"\n        [attr.y]=\"d.yScale(0) + 3\"\n        width=\"40\"\n        height=\"12\"\n        rx=\"2\"\n      ></rect>\n      <text\n        class=\"tick-label\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"d.yScale(0) + 12\"\n        text-anchor=\"middle\"\n      >\n        {{ tick.label }}\n      </text>\n    </g>\n    <g *ngFor=\"let tick of d.xMajorTicks\">\n      <text\n        class=\"tick-label\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"d.yScale(0) + 24\"\n        text-anchor=\"middle\"\n      >\n        {{ tick.label }}\n      </text>\n    </g>\n    <g *ngFor=\"let tick of d.yTicks\">\n      <rect\n        class=\"tick\"\n        x=\"0\"\n        [attr.y]=\"d.yScale(tick)\"\n        width=\"100%\"\n        height=\"1\"\n      ></rect>\n      <text class=\"tick-label\" x=\"0\" [attr.y]=\"d.yScale(tick)\" dy=\"-4\">\n        {{ valueFormatter(tick) }}\n      </text>\n    </g>\n    <g *ngFor=\"let rect of d.rects\">\n      <rect\n        class=\"column\"\n        [attr.x]=\"rect.x\"\n        [attr.y]=\"rect.y\"\n        [attr.width]=\"rect.width\"\n        [attr.height]=\"rect.height\"\n        [attr.fill]=\"rect.fill\"\n        [class.blurred]=\"\n          (hoveredBand$ | async) !== null &&\n          (hoveredBand$ | async)?.dateValue !== rect.dateValue\n        \"\n      ></rect>\n      <rect\n        *ngIf=\"rect.striped\"\n        [attr.x]=\"rect.x\"\n        [attr.y]=\"rect.y\"\n        [attr.width]=\"rect.width\"\n        [attr.height]=\"rect.height\"\n        fill=\"url(#stripes)\"\n      ></rect>\n    </g>\n    <rect\n      *ngFor=\"let rect of d.hoverBands\"\n      [attr.x]=\"rect.x\"\n      [attr.y]=\"rect.y\"\n      [attr.width]=\"rect.width\"\n      [attr.height]=\"rect.height\"\n      fill=\"transparent\"\n      (mouseenter)=\"\n        hoveredBand$.next({ dateValue: rect.dateValue, event: $event })\n      \"\n      (mouseleave)=\"hoveredBand$.next(null)\"\n    ></rect>\n  </svg>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n  <riv-callout\n    *riv-callout\n    [anchor]=\"callout.anchor\"\n    [isModal]=\"false\"\n    [preferredPosition]=\"'center-right'\"\n    [allowedPositions]=\"[\n      'center-right',\n      'center-left',\n      'top-center',\n      'bottom-center'\n    ]\"\n  >\n    <div class=\"callout-content\">\n      <div class=\"callout-metric\" *ngFor=\"let metric of callout.metrics\">\n        <div>{{ metric.label }}</div>\n        <div class=\"callout-metric-value\">{{ metric.value }}</div>\n      </div>\n    </div>\n  </riv-callout>\n</ng-container>\n\n<ng-template #zeroState>\n  <riv-zero-state></riv-zero-state>\n</ng-template>\n\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: [".tick{fill:var(--gray-20)}.tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.tick-background{transition:fill var(--short-transition);fill:transparent}.tick-background.focused{fill:var(--baloo-10)}.column{transition:opacity var(--short-transition)}.column.blurred{opacity:.4}.callout-content{padding:var(--size-large);display:grid;gap:var(--size-medium);grid-template-columns:1fr 1fr}.callout-metric{display:flex;flex-direction:column;gap:var(--size-xsmall);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-metric-value{font-weight:var(--font-weight-heavy)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: CalloutDirective, selector: "[riv-callout]" }, { kind: "component", type: SingleSelectComponent, selector: "riv-single-select", inputs: ["groups", "selectedOption", "filterabilityOptions", "loading", "locked", "maxCalloutHeight", "noOptionsMessage", "nodeTemplate", "triggerTemplate", "placeholder", "disabled"], outputs: ["filterQueryChange", "selectedOptionChange"] }, { kind: "directive", type: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: StackedColumnComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-stacked-column', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!(empty$ | async); else zeroState\" class=\"container\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    *ngIf=\"drawData$ | async; let d\"\n    [attr.viewBox]=\"d.viewBox\"\n  >\n    <defs>\n      <pattern\n        id=\"stripes\"\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"d.columnWidth\"\n        [attr.height]=\"d.columnWidth\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <line\n          x1=\"0\"\n          [attr.y1]=\"d.columnWidth\"\n          [attr.x2]=\"d.columnWidth\"\n          y2=\"0\"\n          stroke=\"var(--white-100)\"\n          stroke-width=\"1\"\n        ></line>\n      </pattern>\n    </defs>\n    <g *ngFor=\"let tick of d.xMinorTicks\">\n      <rect\n        class=\"tick-background\"\n        [class.focused]=\"(hoveredBand$ | async)?.dateValue === tick.dateValue\"\n        [attr.x]=\"tick.x - 20\"\n        [attr.y]=\"d.yScale(0) + 3\"\n        width=\"40\"\n        height=\"12\"\n        rx=\"2\"\n      ></rect>\n      <text\n        class=\"tick-label\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"d.yScale(0) + 12\"\n        text-anchor=\"middle\"\n      >\n        {{ tick.label }}\n      </text>\n    </g>\n    <g *ngFor=\"let tick of d.xMajorTicks\">\n      <text\n        class=\"tick-label\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"d.yScale(0) + 24\"\n        text-anchor=\"middle\"\n      >\n        {{ tick.label }}\n      </text>\n    </g>\n    <g *ngFor=\"let tick of d.yTicks\">\n      <rect\n        class=\"tick\"\n        x=\"0\"\n        [attr.y]=\"d.yScale(tick)\"\n        width=\"100%\"\n        height=\"1\"\n      ></rect>\n      <text class=\"tick-label\" x=\"0\" [attr.y]=\"d.yScale(tick)\" dy=\"-4\">\n        {{ valueFormatter(tick) }}\n      </text>\n    </g>\n    <g *ngFor=\"let rect of d.rects\">\n      <rect\n        class=\"column\"\n        [attr.x]=\"rect.x\"\n        [attr.y]=\"rect.y\"\n        [attr.width]=\"rect.width\"\n        [attr.height]=\"rect.height\"\n        [attr.fill]=\"rect.fill\"\n        [class.blurred]=\"\n          (hoveredBand$ | async) !== null &&\n          (hoveredBand$ | async)?.dateValue !== rect.dateValue\n        \"\n      ></rect>\n      <rect\n        *ngIf=\"rect.striped\"\n        [attr.x]=\"rect.x\"\n        [attr.y]=\"rect.y\"\n        [attr.width]=\"rect.width\"\n        [attr.height]=\"rect.height\"\n        fill=\"url(#stripes)\"\n      ></rect>\n    </g>\n    <rect\n      *ngFor=\"let rect of d.hoverBands\"\n      [attr.x]=\"rect.x\"\n      [attr.y]=\"rect.y\"\n      [attr.width]=\"rect.width\"\n      [attr.height]=\"rect.height\"\n      fill=\"transparent\"\n      (mouseenter)=\"\n        hoveredBand$.next({ dateValue: rect.dateValue, event: $event })\n      \"\n      (mouseleave)=\"hoveredBand$.next(null)\"\n    ></rect>\n  </svg>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n  <riv-callout\n    *riv-callout\n    [anchor]=\"callout.anchor\"\n    [isModal]=\"false\"\n    [preferredPosition]=\"'center-right'\"\n    [allowedPositions]=\"[\n      'center-right',\n      'center-left',\n      'top-center',\n      'bottom-center'\n    ]\"\n  >\n    <div class=\"callout-content\">\n      <div class=\"callout-metric\" *ngFor=\"let metric of callout.metrics\">\n        <div>{{ metric.label }}</div>\n        <div class=\"callout-metric-value\">{{ metric.value }}</div>\n      </div>\n    </div>\n  </riv-callout>\n</ng-container>\n\n<ng-template #zeroState>\n  <riv-zero-state></riv-zero-state>\n</ng-template>\n\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: [".tick{fill:var(--gray-20)}.tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.tick-background{transition:fill var(--short-transition);fill:transparent}.tick-background.focused{fill:var(--baloo-10)}.column{transition:opacity var(--short-transition)}.column.blurred{opacity:.4}.callout-content{padding:var(--size-large);display:grid;gap:var(--size-medium);grid-template-columns:1fr 1fr}.callout-metric{display:flex;flex-direction:column;gap:var(--size-xsmall);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-metric-value{font-weight:var(--font-weight-heavy)}\n"] }]
+            args: [{ selector: 'riv-stacked-column', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"!(empty$ | async); else zeroState\"\n  class=\"container\"\n  (rivClientSize)=\"width = $event.width\"\n>\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    *ngIf=\"drawData$ | async; let d\"\n    [attr.viewBox]=\"d.viewBox\"\n  >\n    <defs>\n      <pattern\n        id=\"stripes\"\n        x=\"0\"\n        y=\"0\"\n        [attr.width]=\"d.columnWidth\"\n        [attr.height]=\"d.columnWidth\"\n        patternUnits=\"userSpaceOnUse\"\n      >\n        <line\n          x1=\"0\"\n          [attr.y1]=\"d.columnWidth\"\n          [attr.x2]=\"d.columnWidth\"\n          y2=\"0\"\n          stroke=\"var(--white-100)\"\n          stroke-width=\"1\"\n        ></line>\n      </pattern>\n    </defs>\n    <g *ngFor=\"let tick of d.xMinorTicks\">\n      <rect\n        class=\"tick-background\"\n        [class.focused]=\"(hoveredBand$ | async)?.dateValue === tick.dateValue\"\n        [attr.x]=\"tick.x - 20\"\n        [attr.y]=\"d.yScale(0) + 3\"\n        width=\"40\"\n        height=\"12\"\n        rx=\"2\"\n      ></rect>\n      <text\n        class=\"tick-label\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"d.yScale(0) + 12\"\n        text-anchor=\"middle\"\n      >\n        {{ tick.label }}\n      </text>\n    </g>\n    <g *ngFor=\"let tick of d.xMajorTicks\">\n      <text\n        class=\"tick-label\"\n        [attr.x]=\"tick.x\"\n        [attr.y]=\"d.yScale(0) + 24\"\n        text-anchor=\"middle\"\n      >\n        {{ tick.label }}\n      </text>\n    </g>\n    <g *ngFor=\"let tick of d.yTicks\">\n      <rect\n        class=\"tick\"\n        x=\"0\"\n        [attr.y]=\"d.yScale(tick)\"\n        width=\"100%\"\n        height=\"1\"\n      ></rect>\n      <text class=\"tick-label\" x=\"0\" [attr.y]=\"d.yScale(tick)\" dy=\"-4\">\n        {{ valueFormatter(tick) }}\n      </text>\n    </g>\n    <g *ngFor=\"let rect of d.rects\">\n      <rect\n        class=\"column\"\n        [attr.x]=\"rect.x\"\n        [attr.y]=\"rect.y\"\n        [attr.width]=\"rect.width\"\n        [attr.height]=\"rect.height\"\n        [attr.fill]=\"rect.fill\"\n        [class.blurred]=\"\n          (hoveredBand$ | async) !== null &&\n          (hoveredBand$ | async)?.dateValue !== rect.dateValue\n        \"\n      ></rect>\n      <rect\n        *ngIf=\"rect.striped\"\n        [attr.x]=\"rect.x\"\n        [attr.y]=\"rect.y\"\n        [attr.width]=\"rect.width\"\n        [attr.height]=\"rect.height\"\n        fill=\"url(#stripes)\"\n      ></rect>\n    </g>\n    <rect\n      *ngFor=\"let rect of d.hoverBands\"\n      [attr.x]=\"rect.x\"\n      [attr.y]=\"rect.y\"\n      [attr.width]=\"rect.width\"\n      [attr.height]=\"rect.height\"\n      fill=\"transparent\"\n      (mouseenter)=\"\n        hoveredBand$.next({ dateValue: rect.dateValue, event: $event })\n      \"\n      (mouseleave)=\"hoveredBand$.next(null)\"\n    ></rect>\n  </svg>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n  <riv-callout\n    *riv-callout\n    [anchor]=\"callout.anchor\"\n    [isModal]=\"false\"\n    [preferredPosition]=\"'center-right'\"\n    [allowedPositions]=\"[\n      'center-right',\n      'center-left',\n      'top-center',\n      'bottom-center'\n    ]\"\n  >\n    <div class=\"callout-content\">\n      <div class=\"callout-metric\" *ngFor=\"let metric of callout.metrics\">\n        <div>{{ metric.label }}</div>\n        <div class=\"callout-metric-value\">{{ metric.value }}</div>\n      </div>\n    </div>\n  </riv-callout>\n</ng-container>\n\n<ng-template #zeroState>\n  <riv-zero-state></riv-zero-state>\n</ng-template>\n\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: [".tick{fill:var(--gray-20)}.tick-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.tick-background{transition:fill var(--short-transition);fill:transparent}.tick-background.focused{fill:var(--baloo-10)}.column{transition:opacity var(--short-transition)}.column.blurred{opacity:.4}.callout-content{padding:var(--size-large);display:grid;gap:var(--size-medium);grid-template-columns:1fr 1fr}.callout-metric{display:flex;flex-direction:column;gap:var(--size-xsmall);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-metric-value{font-weight:var(--font-weight-heavy)}\n"] }]
         }], propDecorators: { input: [{
                 type: Input
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
             }], valueFormatter: [{
                 type: Input
             }], interval: [{
@@ -3011,18 +3120,42 @@ class StackedRowComponent {
         // This is the list of rows we will display, in the order we will display them.
         this.input$ = new BehaviorSubject([]);
         // Width helps determine the size of the viewbox this graph is displaying in.
-        this.width$ = new BehaviorSubject(960);
-        // Height helps determine the size of the viewbox this graph is displaying in.
-        this.height$ = new BehaviorSubject(null);
+        this.width$ = new BehaviorSubject(0);
         // ValueFormatter determines how we style the values in a metric and the x-axis
         this.valueFormatter = v => v.toString();
         this.zeroStateMessage$ = new BehaviorSubject('No data to display.');
+        this.chartAndRowHeights$ = this.input$.pipe(map(input => {
+            const heightWithoutRows = input.length * this.SECTION_PADDING.BETWEEN_ROW +
+                this.SECTION_PADDING.OUTER_TOP_BOTTOM * 2 +
+                this.SECTION_HEIGHTS.X_AXIS_LABEL;
+            // The combined height of all rows at their min/max
+            const minHeight = input.length * this.RECTANGLE_HEIGHTS.MIN_HEIGHT + heightWithoutRows;
+            const maxHeight = input.length * this.RECTANGLE_HEIGHTS.MAX_HEIGHT + heightWithoutRows;
+            // If the max-sized rows don't need the target size, shrink the chart
+            if (maxHeight < this.TARGET_HEIGHT)
+                return {
+                    chartHeight: maxHeight,
+                    rowHeight: this.RECTANGLE_HEIGHTS.MAX_HEIGHT,
+                };
+            // If the min-sized rows need more than the target size, grow the chart
+            if (minHeight > this.TARGET_HEIGHT)
+                return {
+                    chartHeight: minHeight,
+                    rowHeight: this.RECTANGLE_HEIGHTS.MIN_HEIGHT,
+                };
+            // Otherwise shrink the rows to fit the target size
+            return {
+                chartHeight: this.TARGET_HEIGHT,
+                rowHeight: (this.TARGET_HEIGHT - heightWithoutRows) / input.length,
+            };
+        }));
         /*
           The layout we are shooting for is:
       
                     |   X Axis Labels  |
           Row Name  |   Rectangles     |   Totals
         */
+        this.TARGET_HEIGHT = 300;
         this.RECTANGLE_HEIGHTS = {
             MIN_HEIGHT: 12,
             MAX_HEIGHT: 42, // Sets the largest size a row can expand to
@@ -3030,36 +3163,6 @@ class StackedRowComponent {
         this.SECTION_HEIGHTS = {
             // Space reserved for the x-axis labels
             X_AXIS_LABEL: 14,
-            // Height of each row
-            PER_ROW: () => {
-                //Only use height if specified
-                if (this.input.length && this.height) {
-                    let rowHeight = (this.height -
-                        this.SECTION_HEIGHTS.X_AXIS_LABEL -
-                        this.SECTION_PADDING.OUTER_TOP_BOTTOM -
-                        this.SECTION_PADDING.RECTANGLE_TO_ROW) /
-                        this.input.length -
-                        this.SECTION_PADDING.BETWEEN_ROW; // calculate base row height
-                    // Clamping the row height between the min and max heights
-                    return Math.min(Math.max(rowHeight, this.RECTANGLE_HEIGHTS.MIN_HEIGHT), this.RECTANGLE_HEIGHTS.MAX_HEIGHT);
-                }
-                return this.RECTANGLE_HEIGHTS.MIN_HEIGHT; // Default if no input
-            },
-            // Max Height of each rectangle
-            PER_RECTANGLE: () => {
-                //Only use height if specified
-                if (this.input.length && this.height) {
-                    let rectangleHeight = (this.height -
-                        this.SECTION_HEIGHTS.X_AXIS_LABEL -
-                        this.SECTION_PADDING.OUTER_TOP_BOTTOM -
-                        this.SECTION_PADDING.RECTANGLE_TO_ROW) /
-                        this.input.length -
-                        this.SECTION_PADDING.BETWEEN_ROW; // calculate base rectangle height
-                    // Clamping the rectangle height between the min and max heights
-                    return Math.min(Math.max(rectangleHeight, this.RECTANGLE_HEIGHTS.MIN_HEIGHT), this.RECTANGLE_HEIGHTS.MAX_HEIGHT);
-                }
-                return this.RECTANGLE_HEIGHTS.MIN_HEIGHT; // Default if no input
-            },
         };
         this.SECTION_WIDTHS = {
             // Space reserved for the name at the start of the row
@@ -3084,16 +3187,9 @@ class StackedRowComponent {
         this.drawData$ = combineLatest([
             this.input$,
             this.width$,
-            this.height$,
+            this.chartAndRowHeights$,
         ]).pipe(map(([input, width, height]) => {
-            return this.getDrawnData(input, width, height
-                ? height
-                : this.SECTION_HEIGHTS.X_AXIS_LABEL +
-                    this.SECTION_PADDING.OUTER_TOP_BOTTOM +
-                    this.SECTION_PADDING.RECTANGLE_TO_ROW +
-                    (this.SECTION_HEIGHTS.PER_ROW() +
-                        this.SECTION_PADDING.BETWEEN_ROW) *
-                        input.length);
+            return this.getDrawnData(input, width, height.chartHeight, height.rowHeight);
         }), shareReplay({ refCount: true, bufferSize: 1 }));
         // Lets us know whether to display the zero data state
         this.empty$ = this.input$.pipe(map(input => input.every(stack => stack.data.length === 0)), shareReplay({ refCount: true, bufferSize: 1 }));
@@ -3127,15 +3223,6 @@ class StackedRowComponent {
     set width(v) {
         this.width$.next(v);
     }
-    get width() {
-        return this.width$.getValue();
-    }
-    set height(v) {
-        this.height$.next(v);
-    }
-    get height() {
-        return this.height$.getValue();
-    }
     set zeroStateMessage(v) {
         this.zeroStateMessage$.next(v);
     }
@@ -3157,19 +3244,19 @@ class StackedRowComponent {
         return (this.SECTION_PADDING.OUTER_TOP_BOTTOM + this.SECTION_HEIGHTS.X_AXIS_LABEL);
     }
     // The y-index of the top of the current row
-    getTopOfRow(rowIndex) {
+    getTopOfRow(rowIndex, rowHeight) {
         const spaceAboveRows = this.SECTION_PADDING.OUTER_TOP_BOTTOM + this.SECTION_HEIGHTS.X_AXIS_LABEL;
-        const aboveRows = rowIndex * this.SECTION_HEIGHTS.PER_ROW();
+        const aboveRows = rowIndex * rowHeight;
         const aboveRowPaddings = rowIndex * this.SECTION_PADDING.BETWEEN_ROW;
         const allAboveRows = aboveRows + aboveRowPaddings;
         return spaceAboveRows + allAboveRows;
     }
     // Calculate all the values we need for displaying the graph on screen.
-    getDrawnData(rowStacks, width, height) {
+    getDrawnData(rowStacks, width, chartHeight, rowHeight) {
         if (rowStacks.length == 0) {
             return null;
         }
-        const viewBox = `0 0 ${width} ${height}`;
+        const viewBox = `0 0 ${width} ${chartHeight}`;
         const keysInOrder = getKeyOrder(rowStacks);
         const standardizedRows = standardizeRowStacks(rowStacks, keysInOrder);
         const rowsForDisplay = standardizedRows.map(stackData => {
@@ -3187,13 +3274,13 @@ class StackedRowComponent {
             .clamp(true); // Ensures the scale does not go beyond the defined range
         const xtickCountAdjusted = Math.round(tickScale(width));
         const xTicks = xScale.ticks(xtickCountAdjusted);
-        const rects = this.createRectanglesFromRows(rowsForDisplay, xScale);
-        const rowNamesToDraw = this.getRowNamesToDraw(rowsForDisplay);
-        const rowTotalsToDraw = this.getRowTotalsToDraw(rowsForDisplay, width);
+        const rects = this.createRectanglesFromRows(rowsForDisplay, xScale, rowHeight);
+        const rowNamesToDraw = this.getRowNamesToDraw(rowsForDisplay, rowHeight);
+        const rowTotalsToDraw = this.getRowTotalsToDraw(rowsForDisplay, width, rowHeight);
         const legendItems = getLegendItems(rowsForDisplay, keysInOrder);
         return {
             legendItems: legendItems,
-            rowHeight: this.SECTION_HEIGHTS.PER_RECTANGLE(),
+            rowHeight: rowHeight,
             rects: rects,
             rowNames: rowNamesToDraw,
             rowTotals: rowTotalsToDraw,
@@ -3203,20 +3290,20 @@ class StackedRowComponent {
         };
     }
     // Get data for all the rectangles for all the rows
-    createRectanglesFromRows(displayRows, xScale) {
+    createRectanglesFromRows(displayRows, xScale, rowHeight) {
         const rectangles = [];
         displayRows.forEach((currentRow, rowIndex) => {
             currentRow.elementsButStacked.forEach((currentElement, _) => {
-                const topOfRow = this.getTopOfRow(rowIndex);
+                const topOfRow = this.getTopOfRow(rowIndex, rowHeight);
                 const rectangleWidth = xScale(currentElement.topline) - xScale(currentElement.baseline);
-                const rectangleHeight = this.SECTION_HEIGHTS.PER_RECTANGLE();
+                const rectangleHeight = rowHeight;
                 const rectangleX = xScale(currentElement.baseline);
                 const rectangleY = topOfRow + this.SECTION_PADDING.RECTANGLE_TO_ROW;
                 const fill = `var(${currentElement.colorToken})`;
                 rectangles.push({
                     x: rectangleX,
                     y: rectangleY,
-                    width: rectangleWidth,
+                    width: Math.max(rectangleWidth, 0),
                     height: rectangleHeight,
                     fill: fill,
                     striped: currentElement.style === 'striped',
@@ -3228,13 +3315,13 @@ class StackedRowComponent {
         return rectangles;
     }
     // Get data on the row names we are drawing
-    getRowNamesToDraw(displayRows) {
+    getRowNamesToDraw(displayRows, rowHeight) {
         return displayRows.map((row, rowIndex) => {
             const rowLabelX = this.SECTION_PADDING.OUTER_LEFT_RIGHT;
             // The row name looks right if its base is at the base of the associated rectangle
-            const rowLabelY = this.getTopOfRow(rowIndex) +
+            const rowLabelY = this.getTopOfRow(rowIndex, rowHeight) +
                 this.SECTION_PADDING.RECTANGLE_TO_ROW +
-                this.SECTION_HEIGHTS.PER_RECTANGLE() / 2;
+                rowHeight / 2;
             return {
                 label: row.rowName,
                 x: rowLabelX,
@@ -3243,13 +3330,13 @@ class StackedRowComponent {
         });
     }
     // Get data on the row totals we are drawing
-    getRowTotalsToDraw(displayRows, width) {
+    getRowTotalsToDraw(displayRows, width, rowHeight) {
         return displayRows.map((row, rowIndex) => {
             const rowLabelX = width - this.SECTION_PADDING.OUTER_LEFT_RIGHT;
             // The row totals looks right if its base is at the base of the associated rectangle
-            const rowLabelY = this.getTopOfRow(rowIndex) +
+            const rowLabelY = this.getTopOfRow(rowIndex, rowHeight) +
                 this.SECTION_PADDING.RECTANGLE_TO_ROW +
-                this.SECTION_HEIGHTS.PER_RECTANGLE() / 2;
+                rowHeight / 2;
             return {
                 label: this.valueFormatter(row.rowTotal),
                 x: rowLabelX,
@@ -3259,16 +3346,12 @@ 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", "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 });
+StackedRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: StackedRowComponent, selector: "riv-stacked-row", inputs: { input: "input", valueFormatter: "valueFormatter", zeroStateMessage: "zeroStateMessage" }, ngImport: i0, template: "<div\n  *ngIf=\"!(empty$ | async); else zeroState\"\n  class=\"container\"\n  (rivClientSize)=\"width = $event.width\"\n>\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: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { 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"] }]
+            args: [{ selector: 'riv-stacked-row', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"!(empty$ | async); else zeroState\"\n  class=\"container\"\n  (rivClientSize)=\"width = $event.width\"\n>\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"] }]
         }], propDecorators: { input: [{
                 type: Input
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
             }], valueFormatter: [{
                 type: Input
             }], zeroStateMessage: [{
@@ -3290,7 +3373,6 @@ function getDateRange(configs) {
     return [new Date(min), new Date(max)];
 }
 
-const MAX_POINTS = 90;
 const DEFAULT_INTERVAL = 'day';
 // TODO: once we upgrade to Angular 16, this component can be cleaned up with
 // signals instead of RxJS. See commit e238c2d.
@@ -3303,8 +3385,8 @@ class TimeSeriesComponent {
                 series: [],
             },
         ]);
-        this.width$ = new BehaviorSubject(960);
-        this.height$ = new BehaviorSubject(256);
+        this.width$ = new BehaviorSubject(0);
+        this.HEIGHT = 300;
         this.zeroStateMessage$ = new BehaviorSubject('No data to display.');
         this.BOTTOM_OFFSET = 24;
         this.LEFT_OFFSET = 48;
@@ -3313,15 +3395,24 @@ class TimeSeriesComponent {
         this.BOTTOM_PADDING = 8;
         this.Y_TICK_COUNT = 5;
         this.X_MINOR_TICK_LIMIT = 15;
+        this.POINT_RADIUS = 3.5;
         this.dateRange$ = this.input$.pipe(map(getDateRange), shareReplay({ refCount: true, bufferSize: 1 }));
         this.interval$ = new BehaviorSubject(DEFAULT_INTERVAL);
         this.allowLegendToggle$ = new BehaviorSubject(false);
-        this.allowedIntervals$ = this.input$.pipe(map(input => {
+        this.maxPoints$ = this.width$.pipe(map(width => {
+            const innerWidth = width - this.LEFT_OFFSET;
+            const pointWithPadding = (this.POINT_RADIUS + 1) * 2;
+            return Math.floor(innerWidth / pointWithPadding);
+        }));
+        this.allowedIntervals$ = combineLatest([
+            this.input$,
+            this.maxPoints$,
+        ]).pipe(map(([input, maxPoints]) => {
             const [minDateValue, maxDateValue] = getDateRange(input);
             return intervals.filter(interval => {
                 const timeInterval = getTimeInterval(interval);
                 const numSteps = timeInterval.range(timeInterval.floor(minDateValue), timeInterval.ceil(utcDay.offset(maxDateValue, 1))).length;
-                return numSteps <= MAX_POINTS && numSteps > 1;
+                return numSteps <= maxPoints && numSteps > 1;
             });
         }), shareReplay({ refCount: true, bufferSize: 1 }));
         this.intervalOptions$ = this.allowedIntervals$.pipe(map(intervals => intervals.map((interval) => ({
@@ -3379,9 +3470,8 @@ class TimeSeriesComponent {
             this.binnedDateRange$,
             this.selectedInterval$,
             this.width$,
-            this.height$,
-        ]).pipe(map(([binnedData, binnedDateRange, interval, width, height]) => {
-            const viewBox = `0 0 ${width} ${height}`;
+        ]).pipe(map(([binnedData, binnedDateRange, interval, width]) => {
+            const viewBox = `0 0 ${width} ${this.HEIGHT}`;
             const xScale = scaleLinear()
                 .domain(binnedDateRange)
                 .range([
@@ -3430,7 +3520,7 @@ class TimeSeriesComponent {
                 const yScale = scaleLinear()
                     .domain([yMin, yMax])
                     .range([
-                    height -
+                    this.HEIGHT -
                         this.BOTTOM_OFFSET -
                         (this.BOTTOM_PADDING + this.TOP_PADDING),
                     this.TOP_PADDING,
@@ -3513,15 +3603,6 @@ class TimeSeriesComponent {
     set width(v) {
         this.width$.next(v);
     }
-    get width() {
-        return this.width$.getValue();
-    }
-    set height(v) {
-        this.height$.next(v);
-    }
-    get height() {
-        return this.height$.getValue();
-    }
     set zeroStateMessage(v) {
         this.zeroStateMessage$.next(v);
     }
@@ -3545,16 +3626,12 @@ 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", "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 });
+TimeSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TimeSeriesComponent, selector: "riv-time-series", inputs: { input: "input", zeroStateMessage: "zeroStateMessage", interval: "interval", allowLegendToggle: "allowLegendToggle" }, viewQueries: [{ propertyName: "controls", first: true, predicate: ["controls"], descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"!(empty$ | async); else zeroState\"\n  class=\"container\"\n  (rivClientSize)=\"width = $event.width\"\n>\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          [attr.r]=\"POINT_RADIUS\"\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", "maxCalloutHeight", "noOptionsMessage", "nodeTemplate", "triggerTemplate", "placeholder", "disabled"], outputs: ["filterQueryChange", "selectedOptionChange"] }, { kind: "directive", type: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { 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"] }]
+            args: [{ selector: 'riv-time-series', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"!(empty$ | async); else zeroState\"\n  class=\"container\"\n  (rivClientSize)=\"width = $event.width\"\n>\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          [attr.r]=\"POINT_RADIUS\"\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"] }]
         }], propDecorators: { input: [{
                 type: Input
-            }], width: [{
-                type: Input
-            }], height: [{
-                type: Input
             }], zeroStateMessage: [{
                 type: Input
             }], interval: [{
@@ -3584,6 +3661,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         DaysPipe,
         DollarsPipe,
         DonutComponent,
+        FocusOnInitDirective,
         FunnelChartComponent,
         HelpComponent,
         HighlightComponent,
@@ -3600,6 +3678,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         OptionGroupPipe,
         PercentagePipe,
         SingleSelectComponent,
+        SizeDirective,
         SmallCurrencyPipe,
         StackedColumnComponent,
         StackedRowComponent,
@@ -3624,6 +3703,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         DaysPipe,
         DollarsPipe,
         DonutComponent,
+        FocusOnInitDirective,
         FunnelChartComponent,
         HelpComponent,
         HighlightComponent,
@@ -3639,6 +3719,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         OptionGroupPipe,
         PercentagePipe,
         SingleSelectComponent,
+        SizeDirective,
         SmallCurrencyPipe,
         StackedColumnComponent,
         StackedRowComponent,
@@ -3670,6 +3751,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         DaysPipe,
                         DollarsPipe,
                         DonutComponent,
+                        FocusOnInitDirective,
                         FunnelChartComponent,
                         HelpComponent,
                         HighlightComponent,
@@ -3686,6 +3768,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         OptionGroupPipe,
                         PercentagePipe,
                         SingleSelectComponent,
+                        SizeDirective,
                         SmallCurrencyPipe,
                         StackedColumnComponent,
                         StackedRowComponent,
@@ -3713,6 +3796,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         DaysPipe,
                         DollarsPipe,
                         DonutComponent,
+                        FocusOnInitDirective,
                         FunnelChartComponent,
                         HelpComponent,
                         HighlightComponent,
@@ -3728,6 +3812,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         OptionGroupPipe,
                         PercentagePipe,
                         SingleSelectComponent,
+                        SizeDirective,
                         SmallCurrencyPipe,
                         StackedColumnComponent,
                         StackedRowComponent,
@@ -3748,5 +3833,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ButtonComponent, CalloutComponent, CalloutDirective, CalloutOutletComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DateComponent, DatePipe, DateRangeComponent, DaysPipe, DollarsPipe, DonutComponent, FunnelChartComponent, HelpComponent, HighlightComponent, IconComponent, InputLabelComponent, IssueComponent, LegendItemComponent, LinkComponent, LoadingComponent, LoadingCoverComponent, MetricComponent, NumberPipe, OptionGroupPipe, PercentagePipe, RivModule, SVGTextTruncateDirective, SingleSelectComponent, SmallCurrencyPipe, StackedColumnComponent, StackedRowComponent, TextToggleComponent, TimeSeriesComponent, TooltipComponent, TooltipDirective, TrendComponent, TruncateComponent, ZeroStateComponent };
+export { ButtonComponent, CalloutComponent, CalloutDirective, CalloutOutletComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DateComponent, DatePipe, DateRangeComponent, DaysPipe, DollarsPipe, DonutComponent, FocusOnInitDirective, FunnelChartComponent, HelpComponent, HighlightComponent, IconComponent, InputLabelComponent, IssueComponent, LegendItemComponent, LinkComponent, LoadingComponent, LoadingCoverComponent, MetricComponent, NumberPipe, OptionGroupPipe, PercentagePipe, RivModule, SVGTextTruncateDirective, SingleSelectComponent, SizeDirective, SmallCurrencyPipe, StackedColumnComponent, StackedRowComponent, TextToggleComponent, TimeSeriesComponent, TooltipComponent, TooltipDirective, TrendComponent, TruncateComponent, ZeroStateComponent };
 //# sourceMappingURL=rivet-health-design-system.mjs.map