npm - @rivet-health/design-system - Versions diffs - 40.6.0 → 40.6.2 - Mend

@rivet-health/design-system 40.6.0 → 40.6.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (207) hide show

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

@@ -25,9 +25,9 @@ import { index, union as union$1 } from 'd3-array';
  */
 class SrOnlyComponent {
 }
-SrOnlyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SrOnlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SrOnlyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SrOnlyComponent, selector: "riv-sr-only", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SrOnlyComponent, decorators: [{
+SrOnlyComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SrOnlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SrOnlyComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SrOnlyComponent, selector: "riv-sr-only", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SrOnlyComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-sr-only', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}\n"] }]
         }] });
@@ -66,9 +66,9 @@ class DownloadService {
         }, 0));
     }
 }
-DownloadService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DownloadService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
-DownloadService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DownloadService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DownloadService, decorators: [{
+DownloadService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DownloadService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable });
+DownloadService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DownloadService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DownloadService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: Document, decorators: [{
@@ -87,9 +87,9 @@ class DatePipe {
             NO_DATA_FALLBACK);
     }
 }
-DatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-DatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: DatePipe, name: "rivDate" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DatePipe, decorators: [{
+DatePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DatePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DatePipe, name: "rivDate" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DatePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rivDate' }]
         }] });
@@ -103,9 +103,9 @@ class DaysPipe {
         return ret ? ret + (value === 1 ? ' day' : ' days') : NO_DATA_FALLBACK;
     }
 }
-DaysPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DaysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-DaysPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: DaysPipe, name: "rivDays" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DaysPipe, decorators: [{
+DaysPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DaysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DaysPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DaysPipe, name: "rivDays" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DaysPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rivDays' }]
         }] });
@@ -118,9 +118,9 @@ class DollarsPipe {
         return (this.inner.transform(value, undefined, undefined, digitsInfo ?? '1.2-2') ?? NO_DATA_FALLBACK);
     }
 }
-DollarsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DollarsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-DollarsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: DollarsPipe, name: "rivDollars" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DollarsPipe, decorators: [{
+DollarsPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DollarsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+DollarsPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: DollarsPipe, name: "rivDollars" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DollarsPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rivDollars' }]
         }] });
@@ -133,9 +133,9 @@ class NumberPipe {
         return (this.inner.transform(value, digitsInfo ?? '1.0-0') ?? NO_DATA_FALLBACK);
     }
 }
-NumberPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-NumberPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: NumberPipe, name: "rivNumber" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberPipe, decorators: [{
+NumberPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+NumberPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: NumberPipe, name: "rivNumber" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NumberPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rivNumber' }]
         }] });
@@ -148,9 +148,9 @@ class PercentagePipe {
         return (this.inner.transform(value, digitsInfo ?? '1.1-1') ?? NO_DATA_FALLBACK);
     }
 }
-PercentagePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PercentagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-PercentagePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: PercentagePipe, name: "rivPercentage" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PercentagePipe, decorators: [{
+PercentagePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PercentagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+PercentagePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: PercentagePipe, name: "rivPercentage" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PercentagePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rivPercentage' }]
         }] });
@@ -207,9 +207,9 @@ class SentenceCasePipe {
         return toSentenceCase(value);
     }
 }
-SentenceCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SentenceCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-SentenceCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SentenceCasePipe, name: "rivSentenceCase" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SentenceCasePipe, decorators: [{
+SentenceCasePipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SentenceCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SentenceCasePipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SentenceCasePipe, name: "rivSentenceCase" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SentenceCasePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rivSentenceCase' }]
         }] });
@@ -239,9 +239,9 @@ class SmallCurrencyPipe {
         return (this.inner.transform(num, undefined, undefined, digitsInfo ?? num >= 100 ? '1.0-0' : '1.0-2') ?? NO_DATA_FALLBACK);
     }
 }
-SmallCurrencyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmallCurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-SmallCurrencyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: SmallCurrencyPipe, name: "rivSmallCurrency" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SmallCurrencyPipe, decorators: [{
+SmallCurrencyPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SmallCurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+SmallCurrencyPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: SmallCurrencyPipe, name: "rivSmallCurrency" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SmallCurrencyPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rivSmallCurrency' }]
         }] });
@@ -373,9 +373,9 @@ class LockScrollContextService {
         return --this.stack;
     }
 }
-LockScrollContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LockScrollContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-LockScrollContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LockScrollContextService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LockScrollContextService, decorators: [{
+LockScrollContextService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LockScrollContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+LockScrollContextService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LockScrollContextService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LockScrollContextService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -415,9 +415,9 @@ class LockScrollDirective {
         document.documentElement.scrollTop = this.context.scrollPosition;
     }
 }
-LockScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LockScrollDirective, deps: [{ token: LockScrollContextService }], target: i0.ɵɵFactoryTarget.Directive });
-LockScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: LockScrollDirective, selector: "[rivLockScroll]", inputs: { lock: ["rivLockScroll", "lock"] }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LockScrollDirective, decorators: [{
+LockScrollDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LockScrollDirective, deps: [{ token: LockScrollContextService }], target: i0.ɵɵFactoryTarget.Directive });
+LockScrollDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LockScrollDirective, selector: "[rivLockScroll]", inputs: { lock: ["rivLockScroll", "lock"] }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LockScrollDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[rivLockScroll]' }]
         }], ctorParameters: function () { return [{ type: LockScrollContextService }]; }, propDecorators: { lock: [{
@@ -445,9 +445,9 @@ class SizeDirective {
         this.resizeObserver.unobserve(this.elementRef.nativeElement);
     }
 }
-SizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SizeDirective, deps: [{ token: i0.ElementRef }, { 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: [{
+SizeDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SizeDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+SizeDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SizeDirective, selector: "[rivClientSize]", outputs: { rivClientSize: "rivClientSize" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rivClientSize]',
@@ -533,9 +533,9 @@ class CalloutComponent {
         this.cdr.detectChanges();
     }
 }
-CalloutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalloutComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-CalloutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CalloutComponent, selector: "riv-callout", inputs: { anchor: "anchor", isModal: "isModal", preferredPosition: "preferredPosition", allowedPositions: "allowedPositions", fallbackDirection: "fallbackDirection", showCaret: "showCaret", theme: "theme" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "scrim", first: true, predicate: ["scrim"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #scrim\n  class=\"scrim\"\n  [class.full]=\"isModal\"\n  (click)=\"scrimClick($event)\"\n  (mousedown)=\"scrimMouseDown($event)\"\n>\n  <div\n    class=\"callout\"\n    (rivClientSize)=\"onContentSizeChanges()\"\n    [ngClass]=\"[theme, resolvedPosition]\"\n    [class.caret]=\"showCaret\"\n    [style.left.px]=\"left\"\n    [style.top.px]=\"top\"\n    [rivLockScroll]=\"isModal\"\n    #content\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".scrim{position:fixed;z-index:var(--callout-z-index);cursor:default;top:0;right:0;left:0}.scrim.full{bottom:0}.callout{position:absolute;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius-medium);color:var(--text-color);box-shadow:var(--depth-2)}.callout.dark{--background-color: var(--surface-dark-0);--border-color: var(--border-dark);--text-color: var(--type-dark-high-contrast)}.callout.light{--background-color: var(--surface-light-0);--border-color: var(--border-light);--text-color: var(--type-light-high-contrast)}.callout.caret:after{--size: 11px;content:\"\";width:var(--size);height:var(--size);position:absolute;background-color:var(--background-color);border-left:var(--border-width) solid var(--border-color);border-bottom:var(--border-width) solid var(--border-color)}.callout.caret.top-left:after{right:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-center:after{left:50%;bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-right:after{left:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.right-top:after{top:var(--size-large);left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.center-right:after{top:50%;left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.right-bottom:after{left:0;bottom:var(--size-large);transform:translate(-50%,50%) rotate(45deg)}.callout.caret.bottom-right:after{top:0;left:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-center:after{top:0;left:50%;transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-left:after{top:0;right:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.left-bottom:after{right:0;bottom:var(--size-large);transform:translate(50%,50%) rotate(225deg)}.callout.caret.center-left:after{top:50%;right:0;transform:translate(50%,-50%) rotate(225deg)}.callout.caret.left-top:after{top:var(--size-large);right:0;transform:translate(50%,-50%) rotate(225deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: LockScrollDirective, selector: "[rivLockScroll]", inputs: ["rivLockScroll"] }, { kind: "directive", type: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CalloutComponent, decorators: [{
+CalloutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalloutComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+CalloutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CalloutComponent, selector: "riv-callout", inputs: { anchor: "anchor", isModal: "isModal", preferredPosition: "preferredPosition", allowedPositions: "allowedPositions", fallbackDirection: "fallbackDirection", showCaret: "showCaret", theme: "theme" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "scrim", first: true, predicate: ["scrim"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #scrim\n  class=\"scrim\"\n  [class.full]=\"isModal\"\n  (click)=\"scrimClick($event)\"\n  (mousedown)=\"scrimMouseDown($event)\"\n>\n  <div\n    class=\"callout\"\n    (rivClientSize)=\"onContentSizeChanges()\"\n    [ngClass]=\"[theme, resolvedPosition]\"\n    [class.caret]=\"showCaret\"\n    [style.left.px]=\"left\"\n    [style.top.px]=\"top\"\n    [rivLockScroll]=\"isModal\"\n    #content\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".scrim{position:fixed;z-index:var(--callout-z-index);cursor:default;top:0;right:0;left:0}.scrim.full{bottom:0}.callout{position:absolute;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius-medium);color:var(--text-color);box-shadow:var(--depth-2)}.callout.dark{--background-color: var(--surface-dark-0);--border-color: var(--border-dark);--text-color: var(--type-dark-high-contrast)}.callout.light{--background-color: var(--surface-light-0);--border-color: var(--border-light);--text-color: var(--type-light-high-contrast)}.callout.caret:after{--size: 11px;content:\"\";width:var(--size);height:var(--size);position:absolute;background-color:var(--background-color);border-left:var(--border-width) solid var(--border-color);border-bottom:var(--border-width) solid var(--border-color)}.callout.caret.top-left:after{right:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-center:after{left:50%;bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-right:after{left:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.right-top:after{top:var(--size-large);left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.center-right:after{top:50%;left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.right-bottom:after{left:0;bottom:var(--size-large);transform:translate(-50%,50%) rotate(45deg)}.callout.caret.bottom-right:after{top:0;left:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-center:after{top:0;left:50%;transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-left:after{top:0;right:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.left-bottom:after{right:0;bottom:var(--size-large);transform:translate(50%,50%) rotate(225deg)}.callout.caret.center-left:after{top:50%;right:0;transform:translate(50%,-50%) rotate(225deg)}.callout.caret.left-top:after{top:var(--size-large);right:0;transform:translate(50%,-50%) rotate(225deg)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: LockScrollDirective, selector: "[rivLockScroll]", inputs: ["rivLockScroll"] }, { kind: "directive", type: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalloutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-callout', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #scrim\n  class=\"scrim\"\n  [class.full]=\"isModal\"\n  (click)=\"scrimClick($event)\"\n  (mousedown)=\"scrimMouseDown($event)\"\n>\n  <div\n    class=\"callout\"\n    (rivClientSize)=\"onContentSizeChanges()\"\n    [ngClass]=\"[theme, resolvedPosition]\"\n    [class.caret]=\"showCaret\"\n    [style.left.px]=\"left\"\n    [style.top.px]=\"top\"\n    [rivLockScroll]=\"isModal\"\n    #content\n  >\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".scrim{position:fixed;z-index:var(--callout-z-index);cursor:default;top:0;right:0;left:0}.scrim.full{bottom:0}.callout{position:absolute;background-color:var(--background-color);border:var(--border-width) solid var(--border-color);border-radius:var(--border-radius-medium);color:var(--text-color);box-shadow:var(--depth-2)}.callout.dark{--background-color: var(--surface-dark-0);--border-color: var(--border-dark);--text-color: var(--type-dark-high-contrast)}.callout.light{--background-color: var(--surface-light-0);--border-color: var(--border-light);--text-color: var(--type-light-high-contrast)}.callout.caret:after{--size: 11px;content:\"\";width:var(--size);height:var(--size);position:absolute;background-color:var(--background-color);border-left:var(--border-width) solid var(--border-color);border-bottom:var(--border-width) solid var(--border-color)}.callout.caret.top-left:after{right:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-center:after{left:50%;bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.top-right:after{left:var(--size-large);bottom:0;transform:translate(-50%,50%) rotate(315deg)}.callout.caret.right-top:after{top:var(--size-large);left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.center-right:after{top:50%;left:0;transform:translate(-50%,-50%) rotate(45deg)}.callout.caret.right-bottom:after{left:0;bottom:var(--size-large);transform:translate(-50%,50%) rotate(45deg)}.callout.caret.bottom-right:after{top:0;left:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-center:after{top:0;left:50%;transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.bottom-left:after{top:0;right:var(--size-large);transform:translate(-50%,-50%) rotate(135deg)}.callout.caret.left-bottom:after{right:0;bottom:var(--size-large);transform:translate(50%,50%) rotate(225deg)}.callout.caret.center-left:after{top:50%;right:0;transform:translate(50%,-50%) rotate(225deg)}.callout.caret.left-top:after{top:var(--size-large);right:0;transform:translate(50%,-50%) rotate(225deg)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { anchor: [{
@@ -608,9 +608,9 @@ class OverlayService {
         this.overlays.next(overlays);
     }
 }
-OverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-OverlayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OverlayService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OverlayService, decorators: [{
+OverlayService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OverlayService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+OverlayService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OverlayService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OverlayService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -628,9 +628,9 @@ class OverlayDirective {
             this.key.then(k => this.overlayService.remove(k));
     }
 }
-OverlayDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OverlayDirective, deps: [{ token: i0.TemplateRef }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Directive });
-OverlayDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: OverlayDirective, selector: "[riv-overlay]", ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OverlayDirective, decorators: [{
+OverlayDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OverlayDirective, deps: [{ token: i0.TemplateRef }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Directive });
+OverlayDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: OverlayDirective, selector: "[riv-overlay]", ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OverlayDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[riv-overlay]',
@@ -658,9 +658,9 @@ class TooltipComponent {
         this.onMouseEnter.emit(evt);
     }
 }
-TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TooltipComponent, selector: "riv-tooltip", inputs: { anchor: "anchor", content: "content", theme: "theme", maxWidth: "maxWidth", preferredPosition: "preferredPosition" }, outputs: { onMouseEnter: "onMouseEnter", onMouseLeave: "onMouseLeave" }, ngImport: i0, template: "<riv-callout\n  *riv-overlay\n  [anchor]=\"anchor\"\n  [preferredPosition]=\"preferredPosition\"\n  [allowedPositions]=\"allowedPositions\"\n  [isModal]=\"false\"\n  [theme]=\"theme\"\n  (mouseenter)=\"_onMouseEnter($event)\"\n  (mouseleave)=\"_onMouseLeave($event)\"\n>\n  <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </ng-container>\n  <ng-template #stringContent>\n    <div class=\"string-content\" [style.max-width]=\"maxWidth\">\n      {{ content }}\n    </div>\n  </ng-template>\n</riv-callout>\n", styles: [".string-content{padding:var(--size-xsmall) var(--size-small);overflow-wrap:break-word}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipComponent, decorators: [{
+TooltipComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TooltipComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TooltipComponent, selector: "riv-tooltip", inputs: { anchor: "anchor", content: "content", theme: "theme", maxWidth: "maxWidth", preferredPosition: "preferredPosition" }, outputs: { onMouseEnter: "onMouseEnter", onMouseLeave: "onMouseLeave" }, ngImport: i0, template: "<riv-callout\n  *riv-overlay\n  [anchor]=\"anchor\"\n  [preferredPosition]=\"preferredPosition\"\n  [allowedPositions]=\"allowedPositions\"\n  [isModal]=\"false\"\n  [theme]=\"theme\"\n  (mouseenter)=\"_onMouseEnter($event)\"\n  (mouseleave)=\"_onMouseLeave($event)\"\n>\n  <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </ng-container>\n  <ng-template #stringContent>\n    <div class=\"string-content\" [style.max-width]=\"maxWidth\">\n      {{ content }}\n    </div>\n  </ng-template>\n</riv-callout>\n", styles: [".string-content{padding:var(--size-xsmall) var(--size-small);overflow-wrap:break-word}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-tooltip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-callout\n  *riv-overlay\n  [anchor]=\"anchor\"\n  [preferredPosition]=\"preferredPosition\"\n  [allowedPositions]=\"allowedPositions\"\n  [isModal]=\"false\"\n  [theme]=\"theme\"\n  (mouseenter)=\"_onMouseEnter($event)\"\n  (mouseleave)=\"_onMouseLeave($event)\"\n>\n  <ng-container *ngIf=\"content && isTemplate(content); else stringContent\">\n    <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n  </ng-container>\n  <ng-template #stringContent>\n    <div class=\"string-content\" [style.max-width]=\"maxWidth\">\n      {{ content }}\n    </div>\n  </ng-template>\n</riv-callout>\n", styles: [".string-content{padding:var(--size-xsmall) var(--size-small);overflow-wrap:break-word}\n"] }]
         }], propDecorators: { anchor: [{
@@ -759,9 +759,9 @@ class TooltipDirective {
         this.tooltipRef = undefined;
     }
 }
-TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Directive });
-TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: TooltipDirective, selector: "[rivTooltip]", inputs: { rivTooltip: "rivTooltip", rivTooltipTheme: "rivTooltipTheme", rivTooltipMaxWidth: "rivTooltipMaxWidth", rivTooltipPreferredPosition: "rivTooltipPreferredPosition", rivTooltipCloseDelay: "rivTooltipCloseDelay", rivTooltipOpenDelay: "rivTooltipOpenDelay" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TooltipDirective, decorators: [{
+TooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Directive });
+TooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: TooltipDirective, selector: "[rivTooltip]", inputs: { rivTooltip: "rivTooltip", rivTooltipTheme: "rivTooltipTheme", rivTooltipMaxWidth: "rivTooltipMaxWidth", rivTooltipPreferredPosition: "rivTooltipPreferredPosition", rivTooltipCloseDelay: "rivTooltipCloseDelay", rivTooltipOpenDelay: "rivTooltipOpenDelay" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rivTooltip]',
@@ -832,9 +832,9 @@ class SVGTextTruncateDirective extends TooltipDirective {
         }
     }
 }
-SVGTextTruncateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SVGTextTruncateDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Directive });
-SVGTextTruncateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: SVGTextTruncateDirective, selector: "svg text[rivSVGTextTruncate]", inputs: { text: "text", width: "width" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SVGTextTruncateDirective, decorators: [{
+SVGTextTruncateDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SVGTextTruncateDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Directive });
+SVGTextTruncateDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: SVGTextTruncateDirective, selector: "svg text[rivSVGTextTruncate]", inputs: { text: "text", width: "width" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SVGTextTruncateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'svg text[rivSVGTextTruncate]',
@@ -874,9 +874,9 @@ class TruncateComponent {
         this.element.nativeElement.scrollIntoView(false);
     }
 }
-TruncateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TruncateComponent, deps: [{ token: i0.ElementRef }, { token: TooltipDirective, self: true }], target: i0.ɵɵFactoryTarget.Component });
-TruncateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TruncateComponent, selector: "[rivTruncate]", inputs: { maxTooltipWidth: "maxTooltipWidth" }, host: { listeners: { "mouseenter": "enter()", "mouseleave": "leave()" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}a:host{display:block;max-width:100%}\n"], viewProviders: [TooltipDirective], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TruncateComponent, decorators: [{
+TruncateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TruncateComponent, deps: [{ token: i0.ElementRef }, { token: TooltipDirective, self: true }], target: i0.ɵɵFactoryTarget.Component });
+TruncateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TruncateComponent, selector: "[rivTruncate]", inputs: { maxTooltipWidth: "maxTooltipWidth" }, host: { listeners: { "mouseenter": "enter()", "mouseleave": "leave()" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}a:host{display:block;max-width:100%}\n"], viewProviders: [TooltipDirective], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TruncateComponent, decorators: [{
             type: Component,
             args: [{ selector: '[rivTruncate]', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [TooltipDirective], template: "<ng-content></ng-content>\n", styles: [":host{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}a:host{display:block;max-width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: TooltipDirective, decorators: [{
@@ -1245,9 +1245,9 @@ class IconComponent {
         this.element.nativeElement.append(this.cached.value);
     }
 }
-IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: IconComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: IconComponent, selector: "riv-icon", inputs: { name: "name", fillColor: "fillColor", size: "size", customSize: "customSize", strokeWidth: "strokeWidth" }, host: { properties: { "style.width.px": "this.iconSize", "style.height.px": "this.iconSize", "style.stroke-width": "this.calculateStrokeWidth" } }, ngImport: i0, template: "", styles: [":host{display:inline-flex;justify-content:stretch;align-items:stretch}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: IconComponent, decorators: [{
+IconComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+IconComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IconComponent, selector: "riv-icon", inputs: { name: "name", fillColor: "fillColor", size: "size", customSize: "customSize", strokeWidth: "strokeWidth" }, host: { properties: { "style.width.px": "this.iconSize", "style.height.px": "this.iconSize", "style.stroke-width": "this.calculateStrokeWidth" } }, ngImport: i0, template: "", styles: [":host{display:inline-flex;justify-content:stretch;align-items:stretch}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-icon', changeDetection: ChangeDetectionStrategy.OnPush, template: "", styles: [":host{display:inline-flex;justify-content:stretch;align-items:stretch}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { name: [{
@@ -1279,9 +1279,9 @@ class HelpComponent {
         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", size: "size" }, ngImport: i0, template: "<riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"size\"></riv-icon>\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HelpComponent, decorators: [{
+HelpComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HelpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+HelpComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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: [":host{display:inline-flex;justify-content:center;align-items:center}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HelpComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-help', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"size\"></riv-icon>\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center}\n"] }]
         }], propDecorators: { help: [{
@@ -1312,9 +1312,9 @@ class LinkComponent {
             .join(' ');
     }
 }
-LinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LinkComponent, deps: [{ token: CalloutComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-LinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LinkComponent, selector: "[rivLink]", inputs: { disabled: "disabled", locked: "locked", theme: "theme", variant: "variant" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n<riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n", styles: [":host{text-decoration:none;font:inherit;cursor:pointer;transition:color var(--short-transition)}:host:hover:not(.disabled){color:var(--type-light-link-hover);text-decoration:underline}:host:active:not(.disabled){color:var(--type-light-link-active);text-decoration:underline}:host.basic{color:var(--type-light-link)}:host.ghost{color:var(--type-light-low-contrast)}:host.basic.disabled,:host.ghost.disabled{color:var(--type-light-disabled);cursor:default}:host.dark{color:var(--type-dark-link)}:host.dark:hover:not(.disabled){color:var(--type-dark-link-hover)}:host.dark:active:not(.disabled){color:var(--type-dark-link-active)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LinkComponent, decorators: [{
+LinkComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LinkComponent, deps: [{ token: CalloutComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+LinkComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LinkComponent, selector: "[rivLink]", inputs: { disabled: "disabled", locked: "locked", theme: "theme", variant: "variant" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n<riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n", styles: [":host{text-decoration:none;font:inherit;cursor:pointer;transition:color var(--short-transition)}:host:hover:not(.disabled){color:var(--type-light-link-hover);text-decoration:underline}:host:active:not(.disabled){color:var(--type-light-link-active);text-decoration:underline}:host.basic{color:var(--type-light-link)}:host.ghost{color:var(--type-light-low-contrast)}:host.basic.disabled,:host.ghost.disabled{color:var(--type-light-disabled);cursor:default}:host.dark{color:var(--type-dark-link)}:host.dark:hover:not(.disabled){color:var(--type-dark-link-hover)}:host.dark:active:not(.disabled){color:var(--type-dark-link-active)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LinkComponent, decorators: [{
             type: Component,
             args: [{ selector: '[rivLink]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n", styles: [":host{text-decoration:none;font:inherit;cursor:pointer;transition:color var(--short-transition)}:host:hover:not(.disabled){color:var(--type-light-link-hover);text-decoration:underline}:host:active:not(.disabled){color:var(--type-light-link-active);text-decoration:underline}:host.basic{color:var(--type-light-link)}:host.ghost{color:var(--type-light-low-contrast)}:host.basic.disabled,:host.ghost.disabled{color:var(--type-light-disabled);cursor:default}:host.dark{color:var(--type-dark-link)}:host.dark:hover:not(.disabled){color:var(--type-dark-link-hover)}:host.dark:active:not(.disabled){color:var(--type-dark-link-active)}\n"] }]
         }], ctorParameters: function () { return [{ type: CalloutComponent, decorators: [{
@@ -1341,9 +1341,9 @@ class ValidationMessageComponent {
         this.message = '';
     }
 }
-ValidationMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValidationMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ValidationMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ValidationMessageComponent, selector: "riv-validation-message", inputs: { message: "message" }, ngImport: i0, template: "<span class=\"validation-message\">\n  <riv-icon [name]=\"'AlertCircle'\" [size]=\"16\"></riv-icon>\n  {{ message }}\n</span>\n", styles: [".validation-message{font:var(--input-small);color:var(--fyre-50);display:flex;align-items:center;gap:var(--size-xsmall);margin-top:var(--size-xsmall)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValidationMessageComponent, decorators: [{
+ValidationMessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidationMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ValidationMessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ValidationMessageComponent, selector: "riv-validation-message", inputs: { message: "message" }, ngImport: i0, template: "<span class=\"validation-message\">\n  <riv-icon [name]=\"'AlertCircle'\" [size]=\"16\"></riv-icon>\n  {{ message }}\n</span>\n", styles: [".validation-message{font:var(--input-small);color:var(--fyre-50);display:flex;align-items:center;gap:var(--size-xsmall);margin-top:var(--size-xsmall)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ValidationMessageComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-validation-message', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"validation-message\">\n  <riv-icon [name]=\"'AlertCircle'\" [size]=\"16\"></riv-icon>\n  {{ message }}\n</span>\n", styles: [".validation-message{font:var(--input-small);color:var(--fyre-50);display:flex;align-items:center;gap:var(--size-xsmall);margin-top:var(--size-xsmall)}\n"] }]
         }], propDecorators: { message: [{
@@ -1358,9 +1358,9 @@ class InputLabelComponent {
         this.labelAction = new EventEmitter();
     }
 }
-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", errorMessage: "errorMessage", state: "state" }, outputs: { labelAction: "labelAction" }, ngImport: i0, template: "<label *ngIf=\"label\">\n  <span class=\"title\">\n    {{ label }}\n    <span *ngIf=\"required\">*</span>\n  </span>\n  <button\n    *ngIf=\"labelActionText\"\n    rivLink\n    type=\"button\"\n    (click)=\"labelAction.emit($event)\"\n    type=\"button\"\n  >\n    {{ labelActionText }}\n  </button>\n  <riv-help *ngIf=\"help\" [help]=\"help\" [size]=\"12\"></riv-help>\n</label>\n<div class=\"content\"><ng-content></ng-content></div>\n<riv-validation-message\n  *ngIf=\"errorMessage\"\n  [message]=\"errorMessage\"\n></riv-validation-message>\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 .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", "theme", "variant"] }, { kind: "component", type: ValidationMessageComponent, selector: "riv-validation-message", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputLabelComponent, decorators: [{
+InputLabelComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: InputLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+InputLabelComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: InputLabelComponent, selector: "riv-input-label", inputs: { label: "label", help: "help", required: "required", labelActionText: "labelActionText", errorMessage: "errorMessage", state: "state" }, outputs: { labelAction: "labelAction" }, ngImport: i0, template: "<label *ngIf=\"label\">\n  <span class=\"title\">\n    {{ label }}\n    <span *ngIf=\"required\">*</span>\n  </span>\n  <button\n    *ngIf=\"labelActionText\"\n    rivLink\n    type=\"button\"\n    (click)=\"labelAction.emit($event)\"\n    type=\"button\"\n  >\n    {{ labelActionText }}\n  </button>\n  <riv-help *ngIf=\"help\" [help]=\"help\" [size]=\"12\"></riv-help>\n</label>\n<div class=\"content\"><ng-content></ng-content></div>\n<riv-validation-message\n  *ngIf=\"errorMessage\"\n  [message]=\"errorMessage\"\n></riv-validation-message>\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 .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", "theme", "variant"] }, { kind: "component", type: ValidationMessageComponent, selector: "riv-validation-message", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", 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\">*</span>\n  </span>\n  <button\n    *ngIf=\"labelActionText\"\n    rivLink\n    type=\"button\"\n    (click)=\"labelAction.emit($event)\"\n    type=\"button\"\n  >\n    {{ labelActionText }}\n  </button>\n  <riv-help *ngIf=\"help\" [help]=\"help\" [size]=\"12\"></riv-help>\n</label>\n<div class=\"content\"><ng-content></ng-content></div>\n<riv-validation-message\n  *ngIf=\"errorMessage\"\n  [message]=\"errorMessage\"\n></riv-validation-message>\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 .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"] }]
         }], propDecorators: { label: [{
@@ -1416,9 +1416,9 @@ class AutoFocusDirective {
         }
     }
 }
-AutoFocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-AutoFocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: { autoActionActive: ["riv-auto-focus", "autoActionActive"] }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AutoFocusDirective, decorators: [{
+AutoFocusDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+AutoFocusDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: { autoActionActive: ["riv-auto-focus", "autoActionActive"] }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AutoFocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[riv-auto-focus]',
@@ -1476,9 +1476,9 @@ class TextFieldComponent extends InputLabelComponent {
         this.blur.emit(TextFieldComponent.clean(this._text, this.casing));
     }
 }
-TextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextFieldComponent, selector: "riv-text-field", inputs: { disabled: "disabled", readonly: "readonly", placeholder: "placeholder", casing: "casing", type: "type", size: "size", autoFocus: "autoFocus", name: "name", minLength: "minLength", maxLength: "maxLength", value: "value" }, outputs: { valueChange: "valueChange", blur: "blur" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [type]=\"type\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextFieldComponent, decorators: [{
+TextFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TextFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TextFieldComponent, selector: "riv-text-field", inputs: { disabled: "disabled", readonly: "readonly", placeholder: "placeholder", casing: "casing", type: "type", size: "size", autoFocus: "autoFocus", name: "name", minLength: "minLength", maxLength: "maxLength", value: "value" }, outputs: { valueChange: "valueChange", blur: "blur" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [type]=\"type\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TextFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-text-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [type]=\"type\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"] }]
         }], propDecorators: { disabled: [{
@@ -1557,9 +1557,9 @@ class AlphabeticFieldComponent extends TextFieldComponent {
         this.blur.emit(AlphabeticFieldComponent.clean(this._text, this.casing));
     }
 }
-AlphabeticFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AlphabeticFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-AlphabeticFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AlphabeticFieldComponent, selector: "riv-alphabetic-field", usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [type]=\"type\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AlphabeticFieldComponent, decorators: [{
+AlphabeticFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AlphabeticFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+AlphabeticFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AlphabeticFieldComponent, selector: "riv-alphabetic-field", usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [type]=\"type\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AlphabeticFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-alphabetic-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [type]=\"type\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"] }]
         }] });
@@ -1605,9 +1605,9 @@ class ButtonGroupComponent {
         return possibleChild;
     }
 }
-ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ButtonGroupComponent, selector: "riv-button-group", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+ButtonGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ButtonGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonGroupComponent, selector: "riv-button-group", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-button-group', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:flex}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
@@ -1637,9 +1637,9 @@ class LoadingComponent {
 }
 LoadingComponent.STROKE_WIDTH = 1.5;
 LoadingComponent.ARC_START_RADIANS = (Math.PI * 22.5) / 180;
-LoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LoadingComponent, selector: "riv-loading", inputs: { size: "size", variant: "variant" }, ngImport: i0, template: "<svg\n  [ngClass]=\"{\n    dark: variant === 'dark',\n    light: variant === 'light',\n    small: size === 16,\n    medium: size === 40,\n    large: size === 80\n  }\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  [attr.width]=\"size\"\n  [attr.height]=\"size\"\n  [attr.viewBox]=\"'0 0 ' + size + ' ' + size\"\n  fill=\"none\"\n>\n  <path [attr.stroke-width]=\"strokeWidth\" [attr.d]=\"getPathData()\"></path>\n</svg>\n", styles: [":host{display:inline-block;font-size:0;line-height:0}.dark path{stroke:var(--brand)}.light path{stroke:var(--white-90)}@keyframes stroke-small{0%{stroke-dasharray:1 43;stroke-dashoffset:0}50%{stroke-dasharray:43 1}to{stroke-dasharray:1 43;stroke-dashoffset:-44}}.small{animation:1.5s linear stroke-small infinite}@keyframes stroke-medium{0%{stroke-dasharray:1 121;stroke-dashoffset:0}50%{stroke-dasharray:121 1}to{stroke-dasharray:1 121;stroke-dashoffset:-122}}.medium{animation:1.67s linear stroke-medium infinite}@keyframes stroke-large{0%{stroke-dasharray:1 259;stroke-dashoffset:0}50%{stroke-dasharray:259 1}to{stroke-dasharray:1 259;stroke-dashoffset:-260}}.large{animation:2s linear stroke-large infinite}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoadingComponent, decorators: [{
+LoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LoadingComponent, selector: "riv-loading", inputs: { size: "size", variant: "variant" }, ngImport: i0, template: "<svg\n  [ngClass]=\"{\n    dark: variant === 'dark',\n    light: variant === 'light',\n    small: size === 16,\n    medium: size === 40,\n    large: size === 80\n  }\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  [attr.width]=\"size\"\n  [attr.height]=\"size\"\n  [attr.viewBox]=\"'0 0 ' + size + ' ' + size\"\n  fill=\"none\"\n>\n  <path [attr.stroke-width]=\"strokeWidth\" [attr.d]=\"getPathData()\"></path>\n</svg>\n", styles: [":host{display:inline-block;font-size:0;line-height:0}.dark path{stroke:var(--brand)}.light path{stroke:var(--white-90)}@keyframes stroke-small{0%{stroke-dasharray:1 43;stroke-dashoffset:0}50%{stroke-dasharray:43 1}to{stroke-dasharray:1 43;stroke-dashoffset:-44}}.small{animation:1.5s linear stroke-small infinite}@keyframes stroke-medium{0%{stroke-dasharray:1 121;stroke-dashoffset:0}50%{stroke-dasharray:121 1}to{stroke-dasharray:1 121;stroke-dashoffset:-122}}.medium{animation:1.67s linear stroke-medium infinite}@keyframes stroke-large{0%{stroke-dasharray:1 259;stroke-dashoffset:0}50%{stroke-dasharray:259 1}to{stroke-dasharray:1 259;stroke-dashoffset:-260}}.large{animation:2s linear stroke-large infinite}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoadingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-loading', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg\n  [ngClass]=\"{\n    dark: variant === 'dark',\n    light: variant === 'light',\n    small: size === 16,\n    medium: size === 40,\n    large: size === 80\n  }\"\n  xmlns=\"http://www.w3.org/2000/svg\"\n  [attr.width]=\"size\"\n  [attr.height]=\"size\"\n  [attr.viewBox]=\"'0 0 ' + size + ' ' + size\"\n  fill=\"none\"\n>\n  <path [attr.stroke-width]=\"strokeWidth\" [attr.d]=\"getPathData()\"></path>\n</svg>\n", styles: [":host{display:inline-block;font-size:0;line-height:0}.dark path{stroke:var(--brand)}.light path{stroke:var(--white-90)}@keyframes stroke-small{0%{stroke-dasharray:1 43;stroke-dashoffset:0}50%{stroke-dasharray:43 1}to{stroke-dasharray:1 43;stroke-dashoffset:-44}}.small{animation:1.5s linear stroke-small infinite}@keyframes stroke-medium{0%{stroke-dasharray:1 121;stroke-dashoffset:0}50%{stroke-dasharray:121 1}to{stroke-dasharray:1 121;stroke-dashoffset:-122}}.medium{animation:1.67s linear stroke-medium infinite}@keyframes stroke-large{0%{stroke-dasharray:1 259;stroke-dashoffset:0}50%{stroke-dasharray:259 1}to{stroke-dasharray:1 259;stroke-dashoffset:-260}}.large{animation:2s linear stroke-large infinite}\n"] }]
         }], propDecorators: { size: [{
@@ -1731,9 +1731,9 @@ class ButtonComponent {
         }
     }
 }
-ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ButtonGroupComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ButtonComponent, selector: "[rivButton]", inputs: { locked: "locked", disabled: "disabled", loading: "loading", full: "full", size: "size", variant: "variant", icon: "icon", iconPosition: "iconPosition", current: "current" }, host: { properties: { "class": "this.classes" } }, usesOnChanges: true, ngImport: i0, template: "<riv-icon\n  *ngIf=\"icon && (iconPosition === 'first' || iconPosition === 'stacked')\"\n  [name]=\"locked ? 'Lock' : icon\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<span><ng-content></ng-content></span>\n<riv-icon\n  *ngIf=\"locked && !icon\"\n  [name]=\"'Lock'\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<riv-icon\n  *ngIf=\"icon && iconPosition === 'last'\"\n  [name]=\"locked ? 'Lock' : icon\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<riv-loading\n  *ngIf=\"loading\"\n  [size]=\"16\"\n  [variant]=\"getLoadingVariant()\"\n></riv-loading>\n", styles: [":host{border-radius:var(--border-radius-small);transition:background-color var(--short-transition);display:inline-flex;align-items:center;cursor:pointer;text-decoration:none}:host:disabled,:host.disabled{cursor:default}:host.grouped:not(.first){border-bottom-left-radius:0;border-top-left-radius:0;border-left-width:calc(var(--border-width) / 2)}:host.grouped:not(.last){border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:calc(var(--border-width) / 2)}:host.basic{color:var(--purp-80);background-color:var(--black-10);border:var(--border-width) solid var(--border-light-blend)}:host.basic:hover{background-color:var(--black-20)}:host.basic:active{background-color:var(--black-30)}:host.basic:disabled,:host.basic.disabled{border-color:transparent;background-color:var(--black-10);color:var(--type-light-disabled)}:host.primary{color:var(--white-90);background-color:var(--purp-60);border:var(--border-width) solid var(--border-dark-blend)}:host.primary:hover{background-color:var(--purp-70)}:host.primary:active{background-color:var(--purp-80)}:host.primary:disabled,:host.primary.disabled{border-color:transparent;background-color:var(--purp-10);color:var(--type-light-disabled)}:host.ghost{color:var(--purp-80);background-color:transparent;border:var(--border-width) solid transparent}:host.ghost:hover{background-color:var(--black-20)}:host.ghost:active{background-color:var(--black-40)}:host.ghost:disabled,:host.ghost.disabled{color:var(--type-light-disabled);background-color:transparent}:host.caution{color:var(--type-light-caution);background-color:var(--surface-light-caution);border:var(--border-width) solid transparent}:host.caution:hover{background-color:var(--black-20)}:host.caution:active{background-color:var(--black-40)}:host.caution:disabled,:host.caution.disabled{border-color:transparent;background-color:var(--arnge-10);color:var(--type-light-disabled)}:host.danger{color:var(--white-90);background-color:var(--fyre-50);border:var(--border-width) solid var(--border-dark-blend)}:host.danger:hover{background-color:var(--fyre-70)}:host.danger:active{background-color:var(--fyre-90)}:host.danger:disabled,:host.danger.disabled{border-color:transparent;background-color:var(--fyre-10);color:var(--type-light-disabled)}:host.stateful{color:var(--type-light-low-contrast);background-color:var(--black-10);border:var(--border-width) solid var(--border-light-blend)}:host.stateful.current{color:var(--type-light-link);background-color:var(--white-100)}:host.stateful:hover{background-color:var(--black-20)}:host.stateful.current:hover{color:var(--type-light-link-hover);background-color:var(--white-100)}:host.stateful:active{background-color:var(--black-30)}:host.stateful.current:active{color:var(--type-light-link-active);background-color:var(--white-100)}:host.stateful:disabled,:host.stateful.disabled{border-color:transparent;background-color:var(--black-10);color:var(--type-light-disabled)}:host.stateful.current:disabled,:host.stateful.current.disabled{border-color:transparent;background-color:var(--white-90);color:var(--type-light-disabled)}:host.xsmall{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);padding:calc(var(--base-grid-size) * 1.5) calc(var(--base-grid-size) * 2)}:host.xsmall:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) / -2) calc(var(--base-grid-size) * -1)}:host.xsmall:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:var(--base-grid-size)}:host.xsmall:not(.stacked) span:not(:empty)+riv-icon{margin-left:var(--base-grid-size)}:host.small{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 1.5) calc(var(--base-grid-size) * 3)}:host.small:not(.stacked) riv-icon{margin:0 calc(var(--base-grid-size) * -1.5)}:host.small:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 1.5)}:host.small:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 1.5)}:host.medium{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 2) calc(var(--base-grid-size) * 3)}:host.medium:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -.5) calc(var(--base-grid-size) * -1.5)}:host.medium:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size))}:host.medium:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 2)}:host.large{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 3) calc(var(--base-grid-size) * 5)}:host.large:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -1) calc(var(--base-grid-size) * -3)}:host.large:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 3)}:host.large:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 3)}:host.xlarge{font-size:var(--type-3-font-size);line-height:var(--type-3-line-height-0);padding:calc(var(--base-grid-size) * 4) calc(var(--base-grid-size) * 6)}:host.xlarge:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -1) calc(var(--base-grid-size) * -3)}:host.xlarge:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 3)}:host.xlarge:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 3)}:host.full{width:100%;justify-content:center}:host.loading{position:relative}:host.loading span{opacity:0}:host.loading riv-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host.stacked{display:flex;flex-direction:column}:host.stacked.xsmall riv-icon,:host.stacked.small riv-icon{margin-bottom:calc(var(--base-grid-size) * 1)}:host.stacked.medium riv-icon,:host.stacked.large riv-icon,:host.stacked.xlarge riv-icon{margin-bottom:calc(var(--base-grid-size) * 2)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: LoadingComponent, selector: "riv-loading", inputs: ["size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ButtonComponent, decorators: [{
+ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ButtonGroupComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ButtonComponent, selector: "[rivButton]", inputs: { locked: "locked", disabled: "disabled", loading: "loading", full: "full", size: "size", variant: "variant", icon: "icon", iconPosition: "iconPosition", current: "current" }, host: { properties: { "class": "this.classes" } }, usesOnChanges: true, ngImport: i0, template: "<riv-icon\n  *ngIf=\"icon && (iconPosition === 'first' || iconPosition === 'stacked')\"\n  [name]=\"locked ? 'Lock' : icon\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<span><ng-content></ng-content></span>\n<riv-icon\n  *ngIf=\"locked && !icon\"\n  [name]=\"'Lock'\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<riv-icon\n  *ngIf=\"icon && iconPosition === 'last'\"\n  [name]=\"locked ? 'Lock' : icon\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<riv-loading\n  *ngIf=\"loading\"\n  [size]=\"16\"\n  [variant]=\"getLoadingVariant()\"\n></riv-loading>\n", styles: [":host{border-radius:var(--border-radius-small);transition:background-color var(--short-transition);display:inline-flex;align-items:center;cursor:pointer;text-decoration:none}:host:disabled,:host.disabled{cursor:default}:host.grouped:not(.first){border-bottom-left-radius:0;border-top-left-radius:0;border-left-width:calc(var(--border-width) / 2)}:host.grouped:not(.last){border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:calc(var(--border-width) / 2)}:host.basic{color:var(--purp-80);background-color:var(--black-10);border:var(--border-width) solid var(--border-light-blend)}:host.basic:hover{background-color:var(--black-20)}:host.basic:active{background-color:var(--black-30)}:host.basic:disabled,:host.basic.disabled{border-color:transparent;background-color:var(--black-10);color:var(--type-light-disabled)}:host.primary{color:var(--white-90);background-color:var(--purp-60);border:var(--border-width) solid var(--border-dark-blend)}:host.primary:hover{background-color:var(--purp-70)}:host.primary:active{background-color:var(--purp-80)}:host.primary:disabled,:host.primary.disabled{border-color:transparent;background-color:var(--purp-10);color:var(--type-light-disabled)}:host.ghost{color:var(--purp-80);background-color:transparent;border:var(--border-width) solid transparent}:host.ghost:hover{background-color:var(--black-20)}:host.ghost:active{background-color:var(--black-40)}:host.ghost:disabled,:host.ghost.disabled{color:var(--type-light-disabled);background-color:transparent}:host.caution{color:var(--type-light-caution);background-color:var(--surface-light-caution);border:var(--border-width) solid transparent}:host.caution:hover{background-color:var(--black-20)}:host.caution:active{background-color:var(--black-40)}:host.caution:disabled,:host.caution.disabled{border-color:transparent;background-color:var(--arnge-10);color:var(--type-light-disabled)}:host.danger{color:var(--white-90);background-color:var(--fyre-50);border:var(--border-width) solid var(--border-dark-blend)}:host.danger:hover{background-color:var(--fyre-70)}:host.danger:active{background-color:var(--fyre-90)}:host.danger:disabled,:host.danger.disabled{border-color:transparent;background-color:var(--fyre-10);color:var(--type-light-disabled)}:host.stateful{color:var(--type-light-low-contrast);background-color:var(--black-10);border:var(--border-width) solid var(--border-light-blend)}:host.stateful.current{color:var(--type-light-link);background-color:var(--white-100)}:host.stateful:hover{background-color:var(--black-20)}:host.stateful.current:hover{color:var(--type-light-link-hover);background-color:var(--white-100)}:host.stateful:active{background-color:var(--black-30)}:host.stateful.current:active{color:var(--type-light-link-active);background-color:var(--white-100)}:host.stateful:disabled,:host.stateful.disabled{border-color:transparent;background-color:var(--black-10);color:var(--type-light-disabled)}:host.stateful.current:disabled,:host.stateful.current.disabled{border-color:transparent;background-color:var(--white-90);color:var(--type-light-disabled)}:host.xsmall{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);padding:calc(var(--base-grid-size) * 1.5) calc(var(--base-grid-size) * 2)}:host.xsmall:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) / -2) calc(var(--base-grid-size) * -1)}:host.xsmall:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:var(--base-grid-size)}:host.xsmall:not(.stacked) span:not(:empty)+riv-icon{margin-left:var(--base-grid-size)}:host.small{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 1.5) calc(var(--base-grid-size) * 3)}:host.small:not(.stacked) riv-icon{margin:0 calc(var(--base-grid-size) * -1.5)}:host.small:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 1.5)}:host.small:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 1.5)}:host.medium{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 2) calc(var(--base-grid-size) * 3)}:host.medium:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -.5) calc(var(--base-grid-size) * -1.5)}:host.medium:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size))}:host.medium:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 2)}:host.large{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 3) calc(var(--base-grid-size) * 5)}:host.large:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -1) calc(var(--base-grid-size) * -3)}:host.large:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 3)}:host.large:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 3)}:host.xlarge{font-size:var(--type-3-font-size);line-height:var(--type-3-line-height-0);padding:calc(var(--base-grid-size) * 4) calc(var(--base-grid-size) * 6)}:host.xlarge:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -1) calc(var(--base-grid-size) * -3)}:host.xlarge:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 3)}:host.xlarge:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 3)}:host.full{width:100%;justify-content:center}:host.loading{position:relative}:host.loading span{opacity:0}:host.loading riv-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host.stacked{display:flex;flex-direction:column}:host.stacked.xsmall riv-icon,:host.stacked.small riv-icon{margin-bottom:calc(var(--base-grid-size) * 1)}:host.stacked.medium riv-icon,:host.stacked.large riv-icon,:host.stacked.xlarge riv-icon{margin-bottom:calc(var(--base-grid-size) * 2)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: LoadingComponent, selector: "riv-loading", inputs: ["size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: '[rivButton]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-icon\n  *ngIf=\"icon && (iconPosition === 'first' || iconPosition === 'stacked')\"\n  [name]=\"locked ? 'Lock' : icon\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<span><ng-content></ng-content></span>\n<riv-icon\n  *ngIf=\"locked && !icon\"\n  [name]=\"'Lock'\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<riv-icon\n  *ngIf=\"icon && iconPosition === 'last'\"\n  [name]=\"locked ? 'Lock' : icon\"\n  [size]=\"getIconSize()\"\n></riv-icon>\n<riv-loading\n  *ngIf=\"loading\"\n  [size]=\"16\"\n  [variant]=\"getLoadingVariant()\"\n></riv-loading>\n", styles: [":host{border-radius:var(--border-radius-small);transition:background-color var(--short-transition);display:inline-flex;align-items:center;cursor:pointer;text-decoration:none}:host:disabled,:host.disabled{cursor:default}:host.grouped:not(.first){border-bottom-left-radius:0;border-top-left-radius:0;border-left-width:calc(var(--border-width) / 2)}:host.grouped:not(.last){border-top-right-radius:0;border-bottom-right-radius:0;border-right-width:calc(var(--border-width) / 2)}:host.basic{color:var(--purp-80);background-color:var(--black-10);border:var(--border-width) solid var(--border-light-blend)}:host.basic:hover{background-color:var(--black-20)}:host.basic:active{background-color:var(--black-30)}:host.basic:disabled,:host.basic.disabled{border-color:transparent;background-color:var(--black-10);color:var(--type-light-disabled)}:host.primary{color:var(--white-90);background-color:var(--purp-60);border:var(--border-width) solid var(--border-dark-blend)}:host.primary:hover{background-color:var(--purp-70)}:host.primary:active{background-color:var(--purp-80)}:host.primary:disabled,:host.primary.disabled{border-color:transparent;background-color:var(--purp-10);color:var(--type-light-disabled)}:host.ghost{color:var(--purp-80);background-color:transparent;border:var(--border-width) solid transparent}:host.ghost:hover{background-color:var(--black-20)}:host.ghost:active{background-color:var(--black-40)}:host.ghost:disabled,:host.ghost.disabled{color:var(--type-light-disabled);background-color:transparent}:host.caution{color:var(--type-light-caution);background-color:var(--surface-light-caution);border:var(--border-width) solid transparent}:host.caution:hover{background-color:var(--black-20)}:host.caution:active{background-color:var(--black-40)}:host.caution:disabled,:host.caution.disabled{border-color:transparent;background-color:var(--arnge-10);color:var(--type-light-disabled)}:host.danger{color:var(--white-90);background-color:var(--fyre-50);border:var(--border-width) solid var(--border-dark-blend)}:host.danger:hover{background-color:var(--fyre-70)}:host.danger:active{background-color:var(--fyre-90)}:host.danger:disabled,:host.danger.disabled{border-color:transparent;background-color:var(--fyre-10);color:var(--type-light-disabled)}:host.stateful{color:var(--type-light-low-contrast);background-color:var(--black-10);border:var(--border-width) solid var(--border-light-blend)}:host.stateful.current{color:var(--type-light-link);background-color:var(--white-100)}:host.stateful:hover{background-color:var(--black-20)}:host.stateful.current:hover{color:var(--type-light-link-hover);background-color:var(--white-100)}:host.stateful:active{background-color:var(--black-30)}:host.stateful.current:active{color:var(--type-light-link-active);background-color:var(--white-100)}:host.stateful:disabled,:host.stateful.disabled{border-color:transparent;background-color:var(--black-10);color:var(--type-light-disabled)}:host.stateful.current:disabled,:host.stateful.current.disabled{border-color:transparent;background-color:var(--white-90);color:var(--type-light-disabled)}:host.xsmall{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);padding:calc(var(--base-grid-size) * 1.5) calc(var(--base-grid-size) * 2)}:host.xsmall:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) / -2) calc(var(--base-grid-size) * -1)}:host.xsmall:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:var(--base-grid-size)}:host.xsmall:not(.stacked) span:not(:empty)+riv-icon{margin-left:var(--base-grid-size)}:host.small{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 1.5) calc(var(--base-grid-size) * 3)}:host.small:not(.stacked) riv-icon{margin:0 calc(var(--base-grid-size) * -1.5)}:host.small:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 1.5)}:host.small:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 1.5)}:host.medium{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 2) calc(var(--base-grid-size) * 3)}:host.medium:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -.5) calc(var(--base-grid-size) * -1.5)}:host.medium:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size))}:host.medium:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 2)}:host.large{font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 3) calc(var(--base-grid-size) * 5)}:host.large:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -1) calc(var(--base-grid-size) * -3)}:host.large:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 3)}:host.large:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 3)}:host.xlarge{font-size:var(--type-3-font-size);line-height:var(--type-3-line-height-0);padding:calc(var(--base-grid-size) * 4) calc(var(--base-grid-size) * 6)}:host.xlarge:not(.stacked) riv-icon{margin:calc(var(--base-grid-size) * -1) calc(var(--base-grid-size) * -3)}:host.xlarge:not(.stacked) riv-icon:has(+ span:not(:empty)){margin-right:calc(var(--base-grid-size) * 3)}:host.xlarge:not(.stacked) span:not(:empty)+riv-icon{margin-left:calc(var(--base-grid-size) * 3)}:host.full{width:100%;justify-content:center}:host.loading{position:relative}:host.loading span{opacity:0}:host.loading riv-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host.stacked{display:flex;flex-direction:column}:host.stacked.xsmall riv-icon,:host.stacked.small riv-icon{margin-bottom:calc(var(--base-grid-size) * 1)}:host.stacked.medium riv-icon,:host.stacked.large riv-icon,:host.stacked.xlarge riv-icon{margin-bottom:calc(var(--base-grid-size) * 2)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ButtonGroupComponent, decorators: [{
@@ -1819,9 +1819,9 @@ class CheckboxComponent {
         return `var(${this.indeterminateColorToken})`;
     }
 }
-CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CheckboxComponent, selector: "riv-checkbox", inputs: { name: "name", identifier: "identifier", value: "value", checkedColorToken: "checkedColorToken", indeterminateColorToken: "indeterminateColorToken", checkboxTooltip: "checkboxTooltip", indeterminate: "indeterminate", disabled: "disabled", required: "required", state: "state", errorMessage: "errorMessage", ariaLabel: "ariaLabel" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<label\n  #label\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isCheckboxOnly()\"\n>\n  <input\n    #input\n    type=\"checkbox\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [checked]=\"value\"\n    [indeterminate]=\"indeterminate\"\n    [class.error]=\"state === 'error'\"\n    (change)=\"emit(!!input.checked)\"\n    [style.--checked-background-color]=\"getCheckedBackgroundColor()\"\n    [style.--indeterminate-background-color]=\"getIndeterminateBackgroundColor()\"\n    [rivTooltip]=\"checkboxTooltip\"\n    [attr.aria-label]=\"isCheckboxOnly() ? ariaLabel : null\"\n  />\n  <ng-content></ng-content>\n</label>\n<riv-validation-message\n  *ngIf=\"errorMessage\"\n  class=\"error-message\"\n  [message]=\"errorMessage\"\n></riv-validation-message>\n", styles: [":host{display:inline-flex;flex-direction:column}label{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}label.has-content{padding:var(--size-xsmall) var(--size-small);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}label.has-content input{margin:var(--size-xsmall) 0 0 0}label.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}label.has-content:active:not(.disabled){background-color:var(--surface-light-3)}input{--size: calc(var(--base-grid-size) * 4);margin:0;width:var(--size);height:var(--size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:var(--border-radius-xsmall);background-color:var(--surface-light-0)}input:after{content:\"\";position:absolute;inset:0;border-radius:var(--border-radius-xsmall);border:var(--border-width) solid var(--border-light-blend);background-repeat:no-repeat;background-position:center center;background-color:var(--surface-light-0)}input:checked:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgZD0iTTMuNSw3LjUgbDMsMyBsNiwtNiIgZmlsbD0ibm9uZSIgLz48L3N2Zz4=);background-color:var(--checked-background-color)}input:indeterminate:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iMyIgeT0iNyIgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPg==);background-color:var(--indeterminate-background-color)}input.error:after{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.error-message{margin-left:calc(var(--base-grid-size) * 8)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "component", type: ValidationMessageComponent, selector: "riv-validation-message", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CheckboxComponent, decorators: [{
+CheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CheckboxComponent, selector: "riv-checkbox", inputs: { name: "name", identifier: "identifier", value: "value", checkedColorToken: "checkedColorToken", indeterminateColorToken: "indeterminateColorToken", checkboxTooltip: "checkboxTooltip", indeterminate: "indeterminate", disabled: "disabled", required: "required", state: "state", errorMessage: "errorMessage", ariaLabel: "ariaLabel" }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true, static: true }, { propertyName: "input", first: true, predicate: ["input"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0, template: "<label\n  #label\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isCheckboxOnly()\"\n>\n  <input\n    #input\n    type=\"checkbox\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [checked]=\"value\"\n    [indeterminate]=\"indeterminate\"\n    [class.error]=\"state === 'error'\"\n    (change)=\"emit(!!input.checked)\"\n    [style.--checked-background-color]=\"getCheckedBackgroundColor()\"\n    [style.--indeterminate-background-color]=\"getIndeterminateBackgroundColor()\"\n    [rivTooltip]=\"checkboxTooltip\"\n    [attr.aria-label]=\"isCheckboxOnly() ? ariaLabel : null\"\n  />\n  <ng-content></ng-content>\n</label>\n<riv-validation-message\n  *ngIf=\"errorMessage\"\n  class=\"error-message\"\n  [message]=\"errorMessage\"\n></riv-validation-message>\n", styles: [":host{display:inline-flex;flex-direction:column}label{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}label.has-content{padding:var(--size-xsmall) var(--size-small);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}label.has-content input{margin:var(--size-xsmall) 0 0 0}label.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}label.has-content:active:not(.disabled){background-color:var(--surface-light-3)}input{--size: calc(var(--base-grid-size) * 4);margin:0;width:var(--size);height:var(--size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:var(--border-radius-xsmall);background-color:var(--surface-light-0)}input:after{content:\"\";position:absolute;inset:0;border-radius:var(--border-radius-xsmall);border:var(--border-width) solid var(--border-light-blend);background-repeat:no-repeat;background-position:center center;background-color:var(--surface-light-0)}input:checked:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgZD0iTTMuNSw3LjUgbDMsMyBsNiwtNiIgZmlsbD0ibm9uZSIgLz48L3N2Zz4=);background-color:var(--checked-background-color)}input:indeterminate:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iMyIgeT0iNyIgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPg==);background-color:var(--indeterminate-background-color)}input.error:after{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.error-message{margin-left:calc(var(--base-grid-size) * 8)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "component", type: ValidationMessageComponent, selector: "riv-validation-message", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  #label\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isCheckboxOnly()\"\n>\n  <input\n    #input\n    type=\"checkbox\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [checked]=\"value\"\n    [indeterminate]=\"indeterminate\"\n    [class.error]=\"state === 'error'\"\n    (change)=\"emit(!!input.checked)\"\n    [style.--checked-background-color]=\"getCheckedBackgroundColor()\"\n    [style.--indeterminate-background-color]=\"getIndeterminateBackgroundColor()\"\n    [rivTooltip]=\"checkboxTooltip\"\n    [attr.aria-label]=\"isCheckboxOnly() ? ariaLabel : null\"\n  />\n  <ng-content></ng-content>\n</label>\n<riv-validation-message\n  *ngIf=\"errorMessage\"\n  class=\"error-message\"\n  [message]=\"errorMessage\"\n></riv-validation-message>\n", styles: [":host{display:inline-flex;flex-direction:column}label{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}label.has-content{padding:var(--size-xsmall) var(--size-small);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}label.has-content input{margin:var(--size-xsmall) 0 0 0}label.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}label.has-content:active:not(.disabled){background-color:var(--surface-light-3)}input{--size: calc(var(--base-grid-size) * 4);margin:0;width:var(--size);height:var(--size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:var(--border-radius-xsmall);background-color:var(--surface-light-0)}input:after{content:\"\";position:absolute;inset:0;border-radius:var(--border-radius-xsmall);border:var(--border-width) solid var(--border-light-blend);background-repeat:no-repeat;background-position:center center;background-color:var(--surface-light-0)}input:checked:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0iYnV0dCIgZD0iTTMuNSw3LjUgbDMsMyBsNiwtNiIgZmlsbD0ibm9uZSIgLz48L3N2Zz4=);background-color:var(--checked-background-color)}input:indeterminate:after{background-image:url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgeD0iMyIgeT0iNyIgd2lkdGg9IjEwIiBoZWlnaHQ9IjIiIGZpbGw9IndoaXRlIiAvPjwvc3ZnPg==);background-color:var(--indeterminate-background-color)}input.error:after{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.error-message{margin-left:calc(var(--base-grid-size) * 8)}\n"] }]
         }], propDecorators: { name: [{
@@ -1860,9 +1860,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class CardCheckboxComponent extends CheckboxComponent {
 }
-CardCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CardCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CardCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CardCheckboxComponent, selector: "riv-card-checkbox", usesInheritance: true, ngImport: i0, template: "<label [class.disabled]=\"disabled\">\n  <div\n    class=\"checkbox\"\n    [class.checked]=\"value\"\n    [class.indeterminate]=\"indeterminate\"\n  >\n    <riv-checkbox\n      [name]=\"name\"\n      [identifier]=\"identifier\"\n      [value]=\"value\"\n      [checkboxTooltip]=\"checkboxTooltip\"\n      [indeterminate]=\"indeterminate\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      [ariaLabel]=\"ariaLabel\"\n      (valueChange)=\"valueChange.emit($event)\"\n    ></riv-checkbox>\n  </div>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</label>\n", styles: [":host{display:inline-flex}label{flex-grow:1;display:inline-flex;align-items:center;border:var(--border-width) solid var(--border-light-blend);transition:background-color var(--short-transition)}label:not(.disabled){cursor:pointer}label.disabled{background-color:var(--surface-light-1)}label:hover:not(.disabled){background-color:var(--surface-light-2)}label:active:not(.disabled){background-color:var(--surface-light-3)}.checkbox{align-self:stretch;padding:var(--size-large) var(--size-small);background-color:var(--surface-light-2);display:flex;justify-content:center;align-items:center;border-right:var(--border-width) solid var(--border-light-blend)}.checkbox.checked,.checkbox.indeterminate{background-color:var(--purp-60)}label.disabled .checkbox{background-color:var(--black-20)}label.disabled .checkbox.checked,label.disabled .checkbox.indeterminate{background-color:var(--black-40)}.content{flex-grow:1}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CardCheckboxComponent, decorators: [{
+CardCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CardCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CardCheckboxComponent, selector: "riv-card-checkbox", usesInheritance: true, ngImport: i0, template: "<label [class.disabled]=\"disabled\">\n  <div\n    class=\"checkbox\"\n    [class.checked]=\"value\"\n    [class.indeterminate]=\"indeterminate\"\n  >\n    <riv-checkbox\n      [name]=\"name\"\n      [identifier]=\"identifier\"\n      [value]=\"value\"\n      [checkboxTooltip]=\"checkboxTooltip\"\n      [indeterminate]=\"indeterminate\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      [ariaLabel]=\"ariaLabel\"\n      (valueChange)=\"valueChange.emit($event)\"\n    ></riv-checkbox>\n  </div>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</label>\n", styles: [":host{display:inline-flex}label{flex-grow:1;display:inline-flex;align-items:center;border:var(--border-width) solid var(--border-light-blend);transition:background-color var(--short-transition)}label:not(.disabled){cursor:pointer}label.disabled{background-color:var(--surface-light-1)}label:hover:not(.disabled){background-color:var(--surface-light-2)}label:active:not(.disabled){background-color:var(--surface-light-3)}.checkbox{align-self:stretch;padding:var(--size-large) var(--size-small);background-color:var(--surface-light-2);display:flex;justify-content:center;align-items:center;border-right:var(--border-width) solid var(--border-light-blend)}.checkbox.checked,.checkbox.indeterminate{background-color:var(--purp-60)}label.disabled .checkbox{background-color:var(--black-20)}label.disabled .checkbox.checked,label.disabled .checkbox.indeterminate{background-color:var(--black-40)}.content{flex-grow:1}\n"], dependencies: [{ kind: "component", type: CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CardCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-card-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label [class.disabled]=\"disabled\">\n  <div\n    class=\"checkbox\"\n    [class.checked]=\"value\"\n    [class.indeterminate]=\"indeterminate\"\n  >\n    <riv-checkbox\n      [name]=\"name\"\n      [identifier]=\"identifier\"\n      [value]=\"value\"\n      [checkboxTooltip]=\"checkboxTooltip\"\n      [indeterminate]=\"indeterminate\"\n      [disabled]=\"disabled\"\n      [required]=\"required\"\n      [ariaLabel]=\"ariaLabel\"\n      (valueChange)=\"valueChange.emit($event)\"\n    ></riv-checkbox>\n  </div>\n  <div class=\"content\">\n    <ng-content></ng-content>\n  </div>\n</label>\n", styles: [":host{display:inline-flex}label{flex-grow:1;display:inline-flex;align-items:center;border:var(--border-width) solid var(--border-light-blend);transition:background-color var(--short-transition)}label:not(.disabled){cursor:pointer}label.disabled{background-color:var(--surface-light-1)}label:hover:not(.disabled){background-color:var(--surface-light-2)}label:active:not(.disabled){background-color:var(--surface-light-3)}.checkbox{align-self:stretch;padding:var(--size-large) var(--size-small);background-color:var(--surface-light-2);display:flex;justify-content:center;align-items:center;border-right:var(--border-width) solid var(--border-light-blend)}.checkbox.checked,.checkbox.indeterminate{background-color:var(--purp-60)}label.disabled .checkbox{background-color:var(--black-20)}label.disabled .checkbox.checked,label.disabled .checkbox.indeterminate{background-color:var(--black-40)}.content{flex-grow:1}\n"] }]
         }] });
@@ -1916,9 +1916,9 @@ class NumberFieldComponent extends InputLabelComponent {
         this.blur.emit(NumberFieldComponent.clean(this._text, this.maximumFractionDigits, this.min, this.max));
     }
 }
-NumberFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-NumberFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NumberFieldComponent, selector: "riv-number-field", inputs: { disabled: "disabled", readonly: "readonly", placeholder: "placeholder", maximumFractionDigits: "maximumFractionDigits", minimumFractionDigits: "minimumFractionDigits", min: "min", max: "max", align: "align", size: "size", autoFocus: "autoFocus", name: "name", value: "value" }, outputs: { valueChange: "valueChange", blur: "blur" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [style.textAlign]=\"align\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NumberFieldComponent, decorators: [{
+NumberFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NumberFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+NumberFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NumberFieldComponent, selector: "riv-number-field", inputs: { disabled: "disabled", readonly: "readonly", placeholder: "placeholder", maximumFractionDigits: "maximumFractionDigits", minimumFractionDigits: "minimumFractionDigits", min: "min", max: "max", align: "align", size: "size", autoFocus: "autoFocus", name: "name", value: "value" }, outputs: { valueChange: "valueChange", blur: "blur" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [style.textAlign]=\"align\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NumberFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-number-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [style.textAlign]=\"align\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"] }]
         }], propDecorators: { disabled: [{
@@ -1995,9 +1995,9 @@ class CurrencyFieldComponent extends NumberFieldComponent {
         this.maximumFractionDigits = 2;
     }
 }
-CurrencyFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CurrencyFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-CurrencyFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: CurrencyFieldComponent, selector: "riv-currency-field", inputs: { placeholder: "placeholder", minimumFractionDigits: "minimumFractionDigits", maximumFractionDigits: "maximumFractionDigits" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <span\n    class=\"prefix\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    >$</span\n  >\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [style.textAlign]=\"align\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: [":host{display:block;position:relative}.prefix{position:absolute;font:var(--input-medium);padding:var(--size-small)}.prefix.small{font:var(--input-small)}.prefix.large{font:var(--input-large);padding:var(--size-medium) var(--size-small)}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium) var(--size-small) var(--size-xlarge);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium) var(--size-small) var(--size-xlarge);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium) var(--size-medium) var(--size-medium) var(--size-xlarge);height:var(--input-field-height-large)}\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CurrencyFieldComponent, decorators: [{
+CurrencyFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CurrencyFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+CurrencyFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: CurrencyFieldComponent, selector: "riv-currency-field", inputs: { placeholder: "placeholder", minimumFractionDigits: "minimumFractionDigits", maximumFractionDigits: "maximumFractionDigits" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <span\n    class=\"prefix\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    >$</span\n  >\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [style.textAlign]=\"align\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: [":host{display:block;position:relative}.prefix{position:absolute;font:var(--input-medium);padding:var(--size-small)}.prefix.small{font:var(--input-small)}.prefix.large{font:var(--input-large);padding:var(--size-medium) var(--size-small)}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium) var(--size-small) var(--size-xlarge);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium) var(--size-small) var(--size-xlarge);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium) var(--size-medium) var(--size-medium) var(--size-xlarge);height:var(--input-field-height-large)}\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CurrencyFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-currency-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <span\n    class=\"prefix\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    >$</span\n  >\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [style.textAlign]=\"align\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: [":host{display:block;position:relative}.prefix{position:absolute;font:var(--input-medium);padding:var(--size-small)}.prefix.small{font:var(--input-small)}.prefix.large{font:var(--input-large);padding:var(--size-medium) var(--size-small)}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium) var(--size-small) var(--size-xlarge);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium) var(--size-small) var(--size-xlarge);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium) var(--size-medium) var(--size-medium) var(--size-xlarge);height:var(--input-field-height-large)}\n"] }]
         }], propDecorators: { placeholder: [{
@@ -2047,28 +2047,45 @@ var RivSelect;
      * determined by the option's ID rather than the object reference.
      */
     class OptionSet extends Set {
+        constructor(values) {
+            super();
+            // Parallel id → option map so has()/add()/delete() are O(1) instead of
+            // spreading the Set and linear-scanning it. Rebuilding an O(N²) lookup
+            // for a 16k-option selection was the primary cause of the multi-minute
+            // freeze that surfaced RVT-25383's tree-select scale problem.
+            this.byId = new Map();
+            if (values) {
+                for (const value of values) {
+                    this.add(value);
+                }
+            }
+        }
         has(option) {
-            return !![...this].find(o => o.id === option.id);
+            return this.byId.has(option.id);
         }
         add(option) {
-            if (this.has(option)) {
-                // The Set already has some version of this option, but we'll make sure
-                // it has the most recent object reference (while keeping insertion
-                // order consistent).
-                const newOptions = [...this].map(o => o.id === option.id ? option : o);
-                this.clear();
-                newOptions.forEach(o => {
-                    super.add(o);
-                });
+            if (this.byId.has(option.id)) {
+                // Preserve insertion order while swapping to the newer object
+                // reference. Rebuilding the full Set matches the previous
+                // implementation's semantics; the cost of that rebuild only hits
+                // the rare "re-add existing" path — the common O(N²) case (fresh
+                // adds during construction) no longer pays it.
+                const items = [...this].map(o => (o.id === option.id ? option : o));
+                this.byId.set(option.id, option);
+                super.clear();
+                for (const item of items)
+                    super.add(item);
             }
             else {
+                this.byId.set(option.id, option);
                 super.add(option);
             }
             return this;
         }
         delete(option) {
-            const existing = [...this].find(o => o.id === option.id);
+            const existing = this.byId.get(option.id);
             if (existing) {
+                this.byId.delete(option.id);
                 super.delete(existing);
                 return true;
             }
@@ -2076,6 +2093,10 @@ var RivSelect;
                 return false;
             }
         }
+        clear() {
+            this.byId.clear();
+            super.clear();
+        }
     }
     RivSelect.OptionSet = OptionSet;
     const MIN_OPTIONS_FOR_CONTROLS = 5;
@@ -2747,7 +2768,7 @@ var RivSelect;
     }
     function toggleVisibleSelected(state) {
         const leaves = flattenOptions(getTopLevelOptions(state.sourceOptionGroups), true);
-        const isAllSelected = leaves.every(leaf => [...state.selection.selected].map(({ id }) => id).includes(leaf.id));
+        const isAllSelected = leaves.every(leaf => state.selection.selected.has(leaf));
         const newSelection = new OptionSet(state.selection.selected);
         for (const leaf of leaves) {
             if (isAllSelected)
@@ -2879,9 +2900,9 @@ class LoadingCoverComponent {
         this.loadingSize = 40;
     }
 }
-LoadingCoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoadingCoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LoadingCoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: { loading: "loading", loadingSize: "loadingSize", zIndexOverride: "zIndexOverride", errorMessage: "errorMessage" }, ngImport: i0, template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\" [style.z-index]=\"zIndexOverride ?? null\">\n  <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div\n  *ngIf=\"errorMessage\"\n  class=\"cover\"\n  [style.z-index]=\"zIndexOverride ?? null\"\n>\n  <span class=\"error-icon\">\uD83D\uDE41</span>\n  <span>{{ errorMessage }}</span>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index);font:var(--body-medium)}.error-icon{font-size:var(--type-5-font-size)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "riv-loading", inputs: ["size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LoadingCoverComponent, decorators: [{
+LoadingCoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoadingCoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LoadingCoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: { loading: "loading", loadingSize: "loadingSize", zIndexOverride: "zIndexOverride", errorMessage: "errorMessage" }, ngImport: i0, template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\" [style.z-index]=\"zIndexOverride ?? null\">\n  <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div\n  *ngIf=\"errorMessage\"\n  class=\"cover\"\n  [style.z-index]=\"zIndexOverride ?? null\"\n>\n  <span class=\"error-icon\">\uD83D\uDE41</span>\n  <span>{{ errorMessage }}</span>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index);font:var(--body-medium)}.error-icon{font-size:var(--type-5-font-size)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LoadingComponent, selector: "riv-loading", inputs: ["size", "variant"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LoadingCoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-loading-cover', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<div *ngIf=\"loading\" class=\"cover\" [style.z-index]=\"zIndexOverride ?? null\">\n  <riv-loading [size]=\"loadingSize\"></riv-loading>\n</div>\n<div\n  *ngIf=\"errorMessage\"\n  class=\"cover\"\n  [style.z-index]=\"zIndexOverride ?? null\"\n>\n  <span class=\"error-icon\">\uD83D\uDE41</span>\n  <span>{{ errorMessage }}</span>\n</div>\n", styles: [":host{display:block;max-width:100%;position:relative}.cover{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-xsmall);background-color:var(--white-90);border-radius:var(--border-radius-medium);text-align:center;color:var(--type-light-low-contrast);z-index:var(--loadable-z-index);font:var(--body-medium)}.error-icon{font-size:var(--type-5-font-size)}\n"] }]
         }], propDecorators: { loading: [{
@@ -2901,9 +2922,9 @@ class SearchComponent extends TextFieldComponent {
         this.name = 'search';
     }
 }
-SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SearchComponent, selector: "riv-search", inputs: { placeholder: "placeholder", name: "name", labelTemplate: "labelTemplate" }, usesInheritance: true, ngImport: i0, template: "<input\n  #input\n  [id]=\"name\"\n  [name]=\"name\"\n  [placeholder]=\"placeholder\"\n  [type]=\"type\"\n  [required]=\"required\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  [value]=\"text\"\n  (input)=\"text = input.value\"\n  [class.large]=\"size === 'large'\"\n  [attr.maxlength]=\"maxLength\"\n  [attr.minlength]=\"minLength\"\n  [class.warning]=\"state === 'warning'\"\n  [class.error]=\"state === 'error'\"\n  [riv-auto-focus]=\"autoFocus\"\n  autocomplete=\"off\"\n  autocorrect=\"off\"\n  autocapitalize=\"off\"\n  spellcheck=\"false\"\n  (blur)=\"inputBlur()\"\n/>\n<div class=\"label\">\n  <label [for]=\"name\" [class.close]=\"!!text\" (click)=\"text = ''\">\n    <riv-icon\n      *ngIf=\"!labelTemplate\"\n      [class.clickable]=\"!!text\"\n      [name]=\"!!text ? 'X' : 'Search'\"\n      [size]=\"20\"\n    ></riv-icon>\n    <riv-icon\n      *ngIf=\"labelTemplate && !!text\"\n      class=\"clickable\"\n      [name]=\"'X'\"\n      [size]=\"20\"\n    ></riv-icon>\n  </label>\n  <ng-container *ngIf=\"labelTemplate\" class=\"search-columns\"\n    ><ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template\n  ></ng-container>\n</div>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n", ":host{position:relative}input{padding-right:calc(var(--size-xlarge) + var(--size-xsmall))}.label{position:absolute;top:0;right:0;bottom:0;color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center;padding-right:var(--size-medium)}.label label{color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center}label.close{color:var(--type-light-high-contrast)}.clickable:hover{background-color:var(--black-20);cursor:pointer;transition:background-color var(--short-transition)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchComponent, decorators: [{
+SearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SearchComponent, selector: "riv-search", inputs: { placeholder: "placeholder", name: "name", labelTemplate: "labelTemplate" }, usesInheritance: true, ngImport: i0, template: "<input\n  #input\n  [id]=\"name\"\n  [name]=\"name\"\n  [placeholder]=\"placeholder\"\n  [type]=\"type\"\n  [required]=\"required\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  [value]=\"text\"\n  (input)=\"text = input.value\"\n  [class.large]=\"size === 'large'\"\n  [attr.maxlength]=\"maxLength\"\n  [attr.minlength]=\"minLength\"\n  [class.warning]=\"state === 'warning'\"\n  [class.error]=\"state === 'error'\"\n  [riv-auto-focus]=\"autoFocus\"\n  autocomplete=\"off\"\n  autocorrect=\"off\"\n  autocapitalize=\"off\"\n  spellcheck=\"false\"\n  (blur)=\"inputBlur()\"\n/>\n<div class=\"label\">\n  <label [for]=\"name\" [class.close]=\"!!text\" (click)=\"text = ''\">\n    <riv-icon\n      *ngIf=\"!labelTemplate\"\n      [class.clickable]=\"!!text\"\n      [name]=\"!!text ? 'X' : 'Search'\"\n      [size]=\"20\"\n    ></riv-icon>\n    <riv-icon\n      *ngIf=\"labelTemplate && !!text\"\n      class=\"clickable\"\n      [name]=\"'X'\"\n      [size]=\"20\"\n    ></riv-icon>\n  </label>\n  <ng-container *ngIf=\"labelTemplate\" class=\"search-columns\"\n    ><ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template\n  ></ng-container>\n</div>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n", ":host{position:relative}input{padding-right:calc(var(--size-xlarge) + var(--size-xsmall))}.label{position:absolute;top:0;right:0;bottom:0;color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center;padding-right:var(--size-medium)}.label label{color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center}label.close{color:var(--type-light-high-contrast)}.clickable:hover{background-color:var(--black-20);cursor:pointer;transition:background-color var(--short-transition)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-search', changeDetection: ChangeDetectionStrategy.OnPush, template: "<input\n  #input\n  [id]=\"name\"\n  [name]=\"name\"\n  [placeholder]=\"placeholder\"\n  [type]=\"type\"\n  [required]=\"required\"\n  [disabled]=\"disabled\"\n  [readonly]=\"readonly\"\n  [value]=\"text\"\n  (input)=\"text = input.value\"\n  [class.large]=\"size === 'large'\"\n  [attr.maxlength]=\"maxLength\"\n  [attr.minlength]=\"minLength\"\n  [class.warning]=\"state === 'warning'\"\n  [class.error]=\"state === 'error'\"\n  [riv-auto-focus]=\"autoFocus\"\n  autocomplete=\"off\"\n  autocorrect=\"off\"\n  autocapitalize=\"off\"\n  spellcheck=\"false\"\n  (blur)=\"inputBlur()\"\n/>\n<div class=\"label\">\n  <label [for]=\"name\" [class.close]=\"!!text\" (click)=\"text = ''\">\n    <riv-icon\n      *ngIf=\"!labelTemplate\"\n      [class.clickable]=\"!!text\"\n      [name]=\"!!text ? 'X' : 'Search'\"\n      [size]=\"20\"\n    ></riv-icon>\n    <riv-icon\n      *ngIf=\"labelTemplate && !!text\"\n      class=\"clickable\"\n      [name]=\"'X'\"\n      [size]=\"20\"\n    ></riv-icon>\n  </label>\n  <ng-container *ngIf=\"labelTemplate\" class=\"search-columns\"\n    ><ng-template [ngTemplateOutlet]=\"labelTemplate\"></ng-template\n  ></ng-container>\n</div>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n", ":host{position:relative}input{padding-right:calc(var(--size-xlarge) + var(--size-xsmall))}.label{position:absolute;top:0;right:0;bottom:0;color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center;padding-right:var(--size-medium)}.label label{color:var(--type-light-low-contrast);display:flex;align-items:center;justify-content:center}label.close{color:var(--type-light-high-contrast)}.clickable:hover{background-color:var(--black-20);cursor:pointer;transition:background-color var(--short-transition)}\n"] }]
         }], propDecorators: { placeholder: [{
@@ -2943,9 +2964,9 @@ class HighlightComponent {
         return chunks(this.text, this.indices);
     }
 }
-HighlightComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-HighlightComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: HighlightComponent, selector: "riv-highlight", inputs: { text: "text", indices: "indices" }, ngImport: i0, template: "<span *ngFor=\"let chunk of getChunks()\" [class.highlight]=\"chunk.highlight\">{{\n  chunk.text\n}}</span>\n", styles: [".highlight{background-color:var(--baloo-10);border-radius:var(--border-radius-medium)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: HighlightComponent, decorators: [{
+HighlightComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+HighlightComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: HighlightComponent, selector: "riv-highlight", inputs: { text: "text", indices: "indices" }, ngImport: i0, template: "<span *ngFor=\"let chunk of getChunks()\" [class.highlight]=\"chunk.highlight\">{{\n  chunk.text\n}}</span>\n", styles: [".highlight{background-color:var(--baloo-10);border-radius:var(--border-radius-medium)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: HighlightComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-highlight', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span *ngFor=\"let chunk of getChunks()\" [class.highlight]=\"chunk.highlight\">{{\n  chunk.text\n}}</span>\n", styles: [".highlight{background-color:var(--baloo-10);border-radius:var(--border-radius-medium)}\n"] }]
         }], propDecorators: { text: [{
@@ -2979,9 +3000,9 @@ class SelectNodeComponent {
         return node.count;
     }
 }
-SelectNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SelectNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectNodeComponent, selector: "riv-select-node", inputs: { mode: "mode", node: "node", showSingleSelected: "showSingleSelected" }, outputs: { selectChange: "selectChange", expandChange: "expandChange" }, ngImport: i0, template: "<ng-template #title let-n=\"node\">\n  <riv-highlight\n    class=\"title\"\n    [text]=\"n.title\"\n    [indices]=\"n.titleHighlightIndices ?? []\"\n  ></riv-highlight>\n  <span *ngIf=\"n.subtitle\">&nbsp;</span>\n  <riv-highlight\n    *ngIf=\"n.subtitle\"\n    class=\"subtitle\"\n    [text]=\"n.subtitle\"\n    [indices]=\"n.subtitleHighlightIndices ?? []\"\n  ></riv-highlight>\n</ng-template>\n\n<ng-container *ngIf=\"node; let n\">\n  <ng-container *ngIf=\"mode === 'multi'\">\n    <div class=\"row\">\n      <label rivTruncate [class.disabled]=\"getDisabled(n)\">\n        <riv-checkbox\n          *ngIf=\"n.selectable\"\n          [value]=\"n.selected === true\"\n          [indeterminate]=\"n.selected === 'indeterminate'\"\n          [disabled]=\"getDisabled(n)\"\n          (valueChange)=\"selectChange.emit(getId(n))\"\n        >\n        </riv-checkbox>\n        <span rivTruncate class=\"name\">\n          <ng-container\n            *ngTemplateOutlet=\"title; context: { node: n }\"\n          ></ng-container>\n        </span>\n        <span class=\"help\">\n          <riv-help\n            *ngIf=\"getHelp(n); let help\"\n            [help]=\"help\"\n            [size]=\"12\"\n          ></riv-help>\n        </span>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </label>\n      <button\n        *ngIf=\"n.children?.length\"\n        class=\"expand\"\n        [disabled]=\"!n.expandable\"\n        (click)=\"expandChange.emit(getId(n))\"\n      >\n        <riv-icon\n          [size]=\"20\"\n          [name]=\"n.expanded ? 'ChevronUp' : 'ChevronDown'\"\n        ></riv-icon>\n      </button>\n    </div>\n    <div *ngIf=\"n.expanded\" class=\"children\">\n      <riv-select-node\n        *ngFor=\"let child of n.children\"\n        [mode]=\"mode\"\n        [node]=\"child\"\n        [showSingleSelected]=\"showSingleSelected\"\n        (selectChange)=\"selectChange.emit($event)\"\n        (expandChange)=\"expandChange.emit($event)\"\n      ></riv-select-node>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"mode === 'single'\">\n    <div class=\"row\">\n      <button\n        class=\"single\"\n        [disabled]=\"getDisabled(n)\"\n        (click)=\"selectChange.emit(getId(n))\"\n      >\n        <span class=\"label\" rivTruncate>\n          <ng-container\n            *ngTemplateOutlet=\"title; context: { node: n }\"\n          ></ng-container>\n        </span>\n        <span class=\"help\">\n          <riv-help\n            *ngIf=\"getHelp(n); let help\"\n            [help]=\"help\"\n            [size]=\"12\"\n          ></riv-help>\n        </span>\n        <riv-icon\n          *ngIf=\"showSingleSelected && n.selected\"\n          [name]=\"'Check'\"\n          [size]=\"16\"\n        ></riv-icon>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </button>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".row{display:flex;align-items:center}.row label{flex-grow:1;border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:center;gap:var(--size-small)}.row label:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.help{flex-grow:1}.subtitle,.count{color:var(--type-light-low-contrast)}.expand{cursor:pointer;color:var(--purp-80);display:inline-flex;transition:background-color var(--medium-transition);border-radius:var(--border-radius-small);padding:var(--size-xsmall)}.expand:hover{background-color:var(--black-20)}.expand:active{background-color:var(--black-40)}.expand:disabled{color:var(--type-light-disabled)}.expand:disabled:hover{background-color:transparent}.children{padding-left:var(--size-large)}.single{border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:baseline;gap:var(--size-small);text-align:left;width:100%}.single:hover:not(:disabled){cursor:pointer;background-color:var(--surface-light-2)}.single:active:not(:disabled){cursor:pointer;background-color:var(--surface-light-3)}.single .help{flex-grow:1}.disabled .title,:disabled .title,.disabled .subtitle,:disabled .subtitle,.disabled .count,:disabled .count{color:var(--type-light-disabled)}riv-help{align-self:center;color:var(--type-light-low-contrast)}\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: CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected"], outputs: ["selectChange", "expandChange"] }, { kind: "component", type: TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectNodeComponent, decorators: [{
+SelectNodeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SelectNodeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SelectNodeComponent, selector: "riv-select-node", inputs: { mode: "mode", node: "node", showSingleSelected: "showSingleSelected" }, outputs: { selectChange: "selectChange", expandChange: "expandChange" }, ngImport: i0, template: "<ng-template #title let-n=\"node\">\n  <riv-highlight\n    class=\"title\"\n    [text]=\"n.title\"\n    [indices]=\"n.titleHighlightIndices ?? []\"\n  ></riv-highlight>\n  <span *ngIf=\"n.subtitle\">&nbsp;</span>\n  <riv-highlight\n    *ngIf=\"n.subtitle\"\n    class=\"subtitle\"\n    [text]=\"n.subtitle\"\n    [indices]=\"n.subtitleHighlightIndices ?? []\"\n  ></riv-highlight>\n</ng-template>\n\n<ng-container *ngIf=\"node; let n\">\n  <ng-container *ngIf=\"mode === 'multi'\">\n    <div class=\"row\">\n      <label rivTruncate [class.disabled]=\"getDisabled(n)\">\n        <riv-checkbox\n          *ngIf=\"n.selectable\"\n          [value]=\"n.selected === true\"\n          [indeterminate]=\"n.selected === 'indeterminate'\"\n          [disabled]=\"getDisabled(n)\"\n          (valueChange)=\"selectChange.emit(getId(n))\"\n        >\n        </riv-checkbox>\n        <span rivTruncate class=\"name\">\n          <ng-container\n            *ngTemplateOutlet=\"title; context: { node: n }\"\n          ></ng-container>\n        </span>\n        <span class=\"help\">\n          <riv-help\n            *ngIf=\"getHelp(n); let help\"\n            [help]=\"help\"\n            [size]=\"12\"\n          ></riv-help>\n        </span>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </label>\n      <button\n        *ngIf=\"n.children?.length\"\n        class=\"expand\"\n        [disabled]=\"!n.expandable\"\n        (click)=\"expandChange.emit(getId(n))\"\n      >\n        <riv-icon\n          [size]=\"20\"\n          [name]=\"n.expanded ? 'ChevronUp' : 'ChevronDown'\"\n        ></riv-icon>\n      </button>\n    </div>\n    <div *ngIf=\"n.expanded\" class=\"children\">\n      <riv-select-node\n        *ngFor=\"let child of n.children\"\n        [mode]=\"mode\"\n        [node]=\"child\"\n        [showSingleSelected]=\"showSingleSelected\"\n        (selectChange)=\"selectChange.emit($event)\"\n        (expandChange)=\"expandChange.emit($event)\"\n      ></riv-select-node>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"mode === 'single'\">\n    <div class=\"row\">\n      <button\n        class=\"single\"\n        [disabled]=\"getDisabled(n)\"\n        (click)=\"selectChange.emit(getId(n))\"\n      >\n        <span class=\"label\" rivTruncate>\n          <ng-container\n            *ngTemplateOutlet=\"title; context: { node: n }\"\n          ></ng-container>\n        </span>\n        <span class=\"help\">\n          <riv-help\n            *ngIf=\"getHelp(n); let help\"\n            [help]=\"help\"\n            [size]=\"12\"\n          ></riv-help>\n        </span>\n        <riv-icon\n          *ngIf=\"showSingleSelected && n.selected\"\n          [name]=\"'Check'\"\n          [size]=\"16\"\n        ></riv-icon>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </button>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".row{display:flex;align-items:center}.row label{flex-grow:1;border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:center;gap:var(--size-small)}.row label:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.help{flex-grow:1}.subtitle,.count{color:var(--type-light-low-contrast)}.expand{cursor:pointer;color:var(--purp-80);display:inline-flex;transition:background-color var(--medium-transition);border-radius:var(--border-radius-small);padding:var(--size-xsmall)}.expand:hover{background-color:var(--black-20)}.expand:active{background-color:var(--black-40)}.expand:disabled{color:var(--type-light-disabled)}.expand:disabled:hover{background-color:transparent}.children{padding-left:var(--size-large)}.single{border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:baseline;gap:var(--size-small);text-align:left;width:100%}.single:hover:not(:disabled){cursor:pointer;background-color:var(--surface-light-2)}.single:active:not(:disabled){cursor:pointer;background-color:var(--surface-light-3)}.single .help{flex-grow:1}.disabled .title,:disabled .title,.disabled .subtitle,:disabled .subtitle,.disabled .count,:disabled .count{color:var(--type-light-disabled)}riv-help{align-self:center;color:var(--type-light-low-contrast)}\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: CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected"], outputs: ["selectChange", "expandChange"] }, { kind: "component", type: TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectNodeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-select-node', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #title let-n=\"node\">\n  <riv-highlight\n    class=\"title\"\n    [text]=\"n.title\"\n    [indices]=\"n.titleHighlightIndices ?? []\"\n  ></riv-highlight>\n  <span *ngIf=\"n.subtitle\">&nbsp;</span>\n  <riv-highlight\n    *ngIf=\"n.subtitle\"\n    class=\"subtitle\"\n    [text]=\"n.subtitle\"\n    [indices]=\"n.subtitleHighlightIndices ?? []\"\n  ></riv-highlight>\n</ng-template>\n\n<ng-container *ngIf=\"node; let n\">\n  <ng-container *ngIf=\"mode === 'multi'\">\n    <div class=\"row\">\n      <label rivTruncate [class.disabled]=\"getDisabled(n)\">\n        <riv-checkbox\n          *ngIf=\"n.selectable\"\n          [value]=\"n.selected === true\"\n          [indeterminate]=\"n.selected === 'indeterminate'\"\n          [disabled]=\"getDisabled(n)\"\n          (valueChange)=\"selectChange.emit(getId(n))\"\n        >\n        </riv-checkbox>\n        <span rivTruncate class=\"name\">\n          <ng-container\n            *ngTemplateOutlet=\"title; context: { node: n }\"\n          ></ng-container>\n        </span>\n        <span class=\"help\">\n          <riv-help\n            *ngIf=\"getHelp(n); let help\"\n            [help]=\"help\"\n            [size]=\"12\"\n          ></riv-help>\n        </span>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </label>\n      <button\n        *ngIf=\"n.children?.length\"\n        class=\"expand\"\n        [disabled]=\"!n.expandable\"\n        (click)=\"expandChange.emit(getId(n))\"\n      >\n        <riv-icon\n          [size]=\"20\"\n          [name]=\"n.expanded ? 'ChevronUp' : 'ChevronDown'\"\n        ></riv-icon>\n      </button>\n    </div>\n    <div *ngIf=\"n.expanded\" class=\"children\">\n      <riv-select-node\n        *ngFor=\"let child of n.children\"\n        [mode]=\"mode\"\n        [node]=\"child\"\n        [showSingleSelected]=\"showSingleSelected\"\n        (selectChange)=\"selectChange.emit($event)\"\n        (expandChange)=\"expandChange.emit($event)\"\n      ></riv-select-node>\n    </div>\n  </ng-container>\n  <ng-container *ngIf=\"mode === 'single'\">\n    <div class=\"row\">\n      <button\n        class=\"single\"\n        [disabled]=\"getDisabled(n)\"\n        (click)=\"selectChange.emit(getId(n))\"\n      >\n        <span class=\"label\" rivTruncate>\n          <ng-container\n            *ngTemplateOutlet=\"title; context: { node: n }\"\n          ></ng-container>\n        </span>\n        <span class=\"help\">\n          <riv-help\n            *ngIf=\"getHelp(n); let help\"\n            [help]=\"help\"\n            [size]=\"12\"\n          ></riv-help>\n        </span>\n        <riv-icon\n          *ngIf=\"showSingleSelected && n.selected\"\n          [name]=\"'Check'\"\n          [size]=\"16\"\n        ></riv-icon>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </button>\n    </div>\n  </ng-container>\n</ng-container>\n", styles: [".row{display:flex;align-items:center}.row label{flex-grow:1;border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:center;gap:var(--size-small)}.row label:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.help{flex-grow:1}.subtitle,.count{color:var(--type-light-low-contrast)}.expand{cursor:pointer;color:var(--purp-80);display:inline-flex;transition:background-color var(--medium-transition);border-radius:var(--border-radius-small);padding:var(--size-xsmall)}.expand:hover{background-color:var(--black-20)}.expand:active{background-color:var(--black-40)}.expand:disabled{color:var(--type-light-disabled)}.expand:disabled:hover{background-color:transparent}.children{padding-left:var(--size-large)}.single{border-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-xsmall);font:var(--input-medium);display:flex;align-items:baseline;gap:var(--size-small);text-align:left;width:100%}.single:hover:not(:disabled){cursor:pointer;background-color:var(--surface-light-2)}.single:active:not(:disabled){cursor:pointer;background-color:var(--surface-light-3)}.single .help{flex-grow:1}.disabled .title,:disabled .title,.disabled .subtitle,:disabled .subtitle,.disabled .count,:disabled .count{color:var(--type-light-disabled)}riv-help{align-self:center;color:var(--type-light-low-contrast)}\n"] }]
         }], propDecorators: { mode: [{
@@ -3004,9 +3025,9 @@ class ZeroStateComponent {
         this.message = 'No data to display.';
     }
 }
-ZeroStateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ZeroStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ZeroStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ZeroStateComponent, selector: "riv-zero-state", inputs: { message: "message", title: "title", icon: "icon" }, ngImport: i0, template: "<riv-icon *ngIf=\"icon; let i\" [name]=\"i\" [customSize]=\"40\"></riv-icon>\n<span *ngIf=\"title; let t\" class=\"title\">{{ t }}</span>\n<span class=\"message\">{{ message }}</span>\n", styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--size-medium);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-large);min-height:100%}.title{font:var(--title-02)}.message{color:var(--type-light-low-contrast)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ZeroStateComponent, decorators: [{
+ZeroStateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ZeroStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ZeroStateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ZeroStateComponent, selector: "riv-zero-state", inputs: { message: "message", title: "title", icon: "icon" }, ngImport: i0, template: "<riv-icon *ngIf=\"icon; let i\" [name]=\"i\" [customSize]=\"40\"></riv-icon>\n<span *ngIf=\"title; let t\" class=\"title\">{{ t }}</span>\n<span class=\"message\">{{ message }}</span>\n", styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--size-medium);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-large);min-height:100%}.title{font:var(--title-02)}.message{color:var(--type-light-low-contrast)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ZeroStateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-zero-state', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-icon *ngIf=\"icon; let i\" [name]=\"i\" [customSize]=\"40\"></riv-icon>\n<span *ngIf=\"title; let t\" class=\"title\">{{ t }}</span>\n<span class=\"message\">{{ message }}</span>\n", styles: [":host{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--size-medium);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-high-contrast);padding:var(--size-large);min-height:100%}.title{font:var(--title-02)}.message{color:var(--type-light-low-contrast)}\n"] }]
         }], propDecorators: { message: [{
@@ -3119,9 +3140,9 @@ class SelectComponent extends InputLabelComponent {
         return option.id;
     }
 }
-SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SelectComponent, selector: "riv-select", inputs: { manager: "manager", size: "size", disabled: "disabled", locked: "locked", allowedCalloutPositions: "allowedCalloutPositions", preferredCalloutPosition: "preferredCalloutPosition" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "customSelectedOptionsTemplate", first: true, predicate: ["customSelectedOptions"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }], 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=\"manager?.state | async; let s\">\n  <ng-template #content>\n    <riv-loading-cover [loading]=\"s.load.loading\">\n      <div\n        class=\"content-body\"\n        [class.inline]=\"s.display.inline\"\n        [ngStyle]=\"{\n          'max-height': s.display.maxHeight,\n          'max-width': s.display.maxWidth,\n          'min-height': s.display.minHeight,\n          'min-width': s.display.minWidth\n        }\"\n      >\n        <header *ngIf=\"headerTemplate\">\n          <ng-container\n            *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n          ></ng-container>\n        </header>\n        <riv-search\n          *ngIf=\"s.query.showSearch\"\n          [value]=\"s.query.search\"\n          [placeholder]=\"s.query.searchPlaceholder\"\n          [autoFocus]=\"true\"\n          (valueChange)=\"searchChange($event)\"\n        ></riv-search>\n        <div *ngIf=\"s.query.showOrder\">\n          <span class=\"order-by\">Sort by:</span>\n          <riv-select [manager]=\"orderByManager\">\n            <ng-template #trigger let-state=\"state\">\n              <button\n                rivButton\n                [variant]=\"'ghost'\"\n                [size]=\"'small'\"\n                [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n                [iconPosition]=\"'last'\"\n              >\n                {{ getSelectedOrderByOption(s)?.title }}\n              </button>\n            </ng-template>\n          </riv-select>\n        </div>\n        <div class=\"options\">\n          <riv-select-node\n            *ngIf=\"\n              s.selection.allowMultiSelect &&\n              s.selection.allowSelectAll &&\n              !s.display.zeroStateMessage\n            \"\n            [mode]=\"'multi'\"\n            [node]=\"{\n              id: '__NOOP__',\n              title: s.query.search ? 'Select all matching' : 'Select all',\n              selected: s.selection.visibleSelectionState,\n              selectable: true,\n              expandable: false,\n              expanded: false\n            }\"\n            (selectChange)=\"\n              manager?.actions?.next({ type: 'visibleSelectedChange' })\n            \"\n          ></riv-select-node>\n          <div\n            *ngFor=\"let group of s.fullOptionGroups; trackBy: trackBySymbol\"\n            class=\"group\"\n            [class.divider]=\"s.display.dividers\"\n          >\n            <span *ngIf=\"group.header; let header\" class=\"header\">\n              {{ header }}\n            </span>\n            <ng-container\n              *ngFor=\"let option of group.options; trackBy: trackByOption\"\n            >\n              <ng-container *ngIf=\"optionTemplate; else standardTemplate\">\n                <ng-container\n                  [ngTemplateOutlet]=\"optionTemplate\"\n                  [ngTemplateOutletContext]=\"{ node: option }\"\n                ></ng-container>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <riv-select-node\n                  [mode]=\"s.selection.allowMultiSelect ? 'multi' : 'single'\"\n                  [node]=\"option\"\n                  [showSingleSelected]=\"s.display.showSingleSelected\"\n                  (selectChange)=\"\n                    selectChange(s.selection.allowMultiSelect, $event)\n                  \"\n                  (expandChange)=\"\n                    manager?.actions?.next({\n                      type: 'toggleOptionExpanded',\n                      id: $event\n                    })\n                  \"\n                ></riv-select-node>\n              </ng-template>\n            </ng-container>\n          </div>\n          <span\n            *ngIf=\"s.display.displayLimitMessage; let message\"\n            class=\"display-limit\"\n          >\n            {{ message }}\n          </span>\n          <riv-zero-state\n            *ngIf=\"s.display.zeroStateMessage; let message\"\n            [message]=\"message\"\n          ></riv-zero-state>\n        </div>\n        <footer *ngIf=\"footerTemplate\" class=\"custom-footer\">\n          <ng-container\n            *ngTemplateOutlet=\"footerTemplate; context: { state: s }\"\n          ></ng-container>\n        </footer>\n      </div>\n    </riv-loading-cover>\n  </ng-template>\n\n  <ng-container *ngIf=\"!s.display.inline; else content\">\n    <ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n      <button\n        #customTriggerButton\n        (click)=\"allowedOpen()\"\n        [disabled]=\"disabled || locked\"\n        type=\"button\"\n        class=\"custom-trigger-button\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"triggerTemplate\"\n          [ngTemplateOutletContext]=\"{ state: s }\"\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        [state]=\"state\"\n        [errorMessage]=\"errorMessage\"\n        [labelActionText]=\"labelActionText\"\n        (labelAction)=\"labelAction.emit($event)\"\n      >\n        <button\n          #standardTriggerButton\n          class=\"trigger\"\n          [class.small]=\"size === 'small'\"\n          [class.large]=\"size === 'large'\"\n          [class.warning]=\"state === 'warning'\"\n          [class.error]=\"state === 'error'\"\n          (click)=\"allowedOpen()\"\n          [disabled]=\"disabled || locked\"\n          type=\"button\"\n        >\n          <ng-container\n            *ngIf=\"s.selection.selected.size; else placeholderValue\"\n          >\n            <ng-container\n              *ngIf=\"\n                customSelectedOptionsTemplate;\n                else standardSelectedOptionsTemplate\n              \"\n            >\n              <span class=\"value\">\n                <ng-container\n                  [ngTemplateOutlet]=\"customSelectedOptionsTemplate\"\n                  [ngTemplateOutletContext]=\"{ selected: s.selection.selected }\"\n                ></ng-container>\n              </span>\n            </ng-container>\n            <ng-template #standardSelectedOptionsTemplate>\n              <span class=\"value\">{{\n                s.display.formattedSelectedOptions\n              }}</span>\n              <span *ngIf=\"s.display.pillCount > 1\" class=\"selected-count\">\n                {{ s.display.pillCount | rivNumber }}\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-template #placeholderValue>\n            <span class=\"value placeholder\">{{ s.display.placeholder }}</span>\n          </ng-template>\n          <span class=\"chevron\">\n            <riv-icon\n              *ngIf=\"!locked\"\n              [name]=\"s.display.open ? 'ChevronUp' : 'ChevronDown'\"\n              [size]=\"20\"\n            ></riv-icon>\n            <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n          </span>\n        </button>\n      </riv-input-label>\n    </ng-template>\n\n    <ng-container *ngIf=\"s.display.open\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"getTrigger()\"\n        [theme]=\"'light'\"\n        [showCaret]=\"false\"\n        [allowedPositions]=\"allowedCalloutPositions\"\n        [preferredPosition]=\"preferredCalloutPosition\"\n        (close)=\"manager?.actions?.next({ type: 'openChange', open: false })\"\n      >\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      </riv-callout>\n    </ng-container>\n  </ng-container>\n</ng-container>\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);cursor:pointer;padding-left: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);cursor:default}.selected-count{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-normal);color:var(--type-dark-body);border-radius:calc(var(--base-grid-size) * 3);background-color:var(--brand);padding:calc(var(--base-grid-size) / 4) calc(var(--base-grid-size) * 2);align-self:center}.value{font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.custom-trigger-button{max-width:100%}.order-by{font:var(--input-medium);color:var(--type-light-low-contrast)}.content-body{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large)}.content-body:not(.inline){max-height:50vh;min-width:calc(var(--base-grid-size) * 75);max-width:50vw}.options{flex-grow:1;overflow-y:auto;gap:var(--size-medium)}.options,.group{display:flex;flex-direction:column}.group{gap:var(--size-xsmall)}.group.divider:not(:last-child){padding-bottom:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light)}.display-limit{font:var(--body-small);color:var(--type-light-disabled);padding:var(--size-small);text-align:center}.header{font:var(--input-medium);color:var(--type-light-low-contrast);padding:var(--size-xsmall) 0}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "component", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "zIndexOverride", "errorMessage"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "allowedCalloutPositions", "preferredCalloutPosition"] }, { kind: "component", type: SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected"], outputs: ["selectChange", "expandChange"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SelectComponent, decorators: [{
+SelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SelectComponent, selector: "riv-select", inputs: { manager: "manager", size: "size", disabled: "disabled", locked: "locked", allowedCalloutPositions: "allowedCalloutPositions", preferredCalloutPosition: "preferredCalloutPosition" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "customSelectedOptionsTemplate", first: true, predicate: ["customSelectedOptions"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }], 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=\"manager?.state | async; let s\">\n  <ng-template #content>\n    <riv-loading-cover [loading]=\"s.load.loading\">\n      <div\n        class=\"content-body\"\n        [class.inline]=\"s.display.inline\"\n        [ngStyle]=\"{\n          'max-height': s.display.maxHeight,\n          'max-width': s.display.maxWidth,\n          'min-height': s.display.minHeight,\n          'min-width': s.display.minWidth\n        }\"\n      >\n        <header *ngIf=\"headerTemplate\">\n          <ng-container\n            *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n          ></ng-container>\n        </header>\n        <riv-search\n          *ngIf=\"s.query.showSearch\"\n          [value]=\"s.query.search\"\n          [placeholder]=\"s.query.searchPlaceholder\"\n          [autoFocus]=\"true\"\n          (valueChange)=\"searchChange($event)\"\n        ></riv-search>\n        <div *ngIf=\"s.query.showOrder\">\n          <span class=\"order-by\">Sort by:</span>\n          <riv-select [manager]=\"orderByManager\">\n            <ng-template #trigger let-state=\"state\">\n              <button\n                rivButton\n                [variant]=\"'ghost'\"\n                [size]=\"'small'\"\n                [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n                [iconPosition]=\"'last'\"\n              >\n                {{ getSelectedOrderByOption(s)?.title }}\n              </button>\n            </ng-template>\n          </riv-select>\n        </div>\n        <div class=\"options\">\n          <riv-select-node\n            *ngIf=\"\n              s.selection.allowMultiSelect &&\n              s.selection.allowSelectAll &&\n              !s.display.zeroStateMessage\n            \"\n            [mode]=\"'multi'\"\n            [node]=\"{\n              id: '__NOOP__',\n              title: s.query.search ? 'Select all matching' : 'Select all',\n              selected: s.selection.visibleSelectionState,\n              selectable: true,\n              expandable: false,\n              expanded: false\n            }\"\n            (selectChange)=\"\n              manager?.actions?.next({ type: 'visibleSelectedChange' })\n            \"\n          ></riv-select-node>\n          <div\n            *ngFor=\"let group of s.fullOptionGroups; trackBy: trackBySymbol\"\n            class=\"group\"\n            [class.divider]=\"s.display.dividers\"\n          >\n            <span *ngIf=\"group.header; let header\" class=\"header\">\n              {{ header }}\n            </span>\n            <ng-container\n              *ngFor=\"let option of group.options; trackBy: trackByOption\"\n            >\n              <ng-container *ngIf=\"optionTemplate; else standardTemplate\">\n                <ng-container\n                  [ngTemplateOutlet]=\"optionTemplate\"\n                  [ngTemplateOutletContext]=\"{ node: option }\"\n                ></ng-container>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <riv-select-node\n                  [mode]=\"s.selection.allowMultiSelect ? 'multi' : 'single'\"\n                  [node]=\"option\"\n                  [showSingleSelected]=\"s.display.showSingleSelected\"\n                  (selectChange)=\"\n                    selectChange(s.selection.allowMultiSelect, $event)\n                  \"\n                  (expandChange)=\"\n                    manager?.actions?.next({\n                      type: 'toggleOptionExpanded',\n                      id: $event\n                    })\n                  \"\n                ></riv-select-node>\n              </ng-template>\n            </ng-container>\n          </div>\n          <span\n            *ngIf=\"s.display.displayLimitMessage; let message\"\n            class=\"display-limit\"\n          >\n            {{ message }}\n          </span>\n          <riv-zero-state\n            *ngIf=\"s.display.zeroStateMessage; let message\"\n            [message]=\"message\"\n          ></riv-zero-state>\n        </div>\n        <footer *ngIf=\"footerTemplate\" class=\"custom-footer\">\n          <ng-container\n            *ngTemplateOutlet=\"footerTemplate; context: { state: s }\"\n          ></ng-container>\n        </footer>\n      </div>\n    </riv-loading-cover>\n  </ng-template>\n\n  <ng-container *ngIf=\"!s.display.inline; else content\">\n    <ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n      <button\n        #customTriggerButton\n        (click)=\"allowedOpen()\"\n        [disabled]=\"disabled || locked\"\n        type=\"button\"\n        class=\"custom-trigger-button\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"triggerTemplate\"\n          [ngTemplateOutletContext]=\"{ state: s }\"\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        [state]=\"state\"\n        [errorMessage]=\"errorMessage\"\n        [labelActionText]=\"labelActionText\"\n        (labelAction)=\"labelAction.emit($event)\"\n      >\n        <button\n          #standardTriggerButton\n          class=\"trigger\"\n          [class.small]=\"size === 'small'\"\n          [class.large]=\"size === 'large'\"\n          [class.warning]=\"state === 'warning'\"\n          [class.error]=\"state === 'error'\"\n          (click)=\"allowedOpen()\"\n          [disabled]=\"disabled || locked\"\n          type=\"button\"\n        >\n          <ng-container\n            *ngIf=\"s.selection.selected.size; else placeholderValue\"\n          >\n            <ng-container\n              *ngIf=\"\n                customSelectedOptionsTemplate;\n                else standardSelectedOptionsTemplate\n              \"\n            >\n              <span class=\"value\">\n                <ng-container\n                  [ngTemplateOutlet]=\"customSelectedOptionsTemplate\"\n                  [ngTemplateOutletContext]=\"{ selected: s.selection.selected }\"\n                ></ng-container>\n              </span>\n            </ng-container>\n            <ng-template #standardSelectedOptionsTemplate>\n              <span class=\"value\">{{\n                s.display.formattedSelectedOptions\n              }}</span>\n              <span *ngIf=\"s.display.pillCount > 1\" class=\"selected-count\">\n                {{ s.display.pillCount | rivNumber }}\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-template #placeholderValue>\n            <span class=\"value placeholder\">{{ s.display.placeholder }}</span>\n          </ng-template>\n          <span class=\"chevron\">\n            <riv-icon\n              *ngIf=\"!locked\"\n              [name]=\"s.display.open ? 'ChevronUp' : 'ChevronDown'\"\n              [size]=\"20\"\n            ></riv-icon>\n            <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n          </span>\n        </button>\n      </riv-input-label>\n    </ng-template>\n\n    <ng-container *ngIf=\"s.display.open\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"getTrigger()\"\n        [theme]=\"'light'\"\n        [showCaret]=\"false\"\n        [allowedPositions]=\"allowedCalloutPositions\"\n        [preferredPosition]=\"preferredCalloutPosition\"\n        (close)=\"manager?.actions?.next({ type: 'openChange', open: false })\"\n      >\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      </riv-callout>\n    </ng-container>\n  </ng-container>\n</ng-container>\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);cursor:pointer;padding-left: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);cursor:default}.selected-count{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-normal);color:var(--type-dark-body);border-radius:calc(var(--base-grid-size) * 3);background-color:var(--brand);padding:calc(var(--base-grid-size) / 4) calc(var(--base-grid-size) * 2);align-self:center}.value{font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.custom-trigger-button{max-width:100%}.order-by{font:var(--input-medium);color:var(--type-light-low-contrast)}.content-body{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large)}.content-body:not(.inline){max-height:50vh;min-width:calc(var(--base-grid-size) * 75);max-width:50vw}.options{flex-grow:1;overflow-y:auto;gap:var(--size-medium)}.options,.group{display:flex;flex-direction:column}.group{gap:var(--size-xsmall)}.group.divider:not(:last-child){padding-bottom:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light)}.display-limit{font:var(--body-small);color:var(--type-light-disabled);padding:var(--size-small);text-align:center}.header{font:var(--input-medium);color:var(--type-light-low-contrast);padding:var(--size-xsmall) 0}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "component", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "zIndexOverride", "errorMessage"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "allowedCalloutPositions", "preferredCalloutPosition"] }, { kind: "component", type: SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected"], outputs: ["selectChange", "expandChange"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <ng-template #content>\n    <riv-loading-cover [loading]=\"s.load.loading\">\n      <div\n        class=\"content-body\"\n        [class.inline]=\"s.display.inline\"\n        [ngStyle]=\"{\n          'max-height': s.display.maxHeight,\n          'max-width': s.display.maxWidth,\n          'min-height': s.display.minHeight,\n          'min-width': s.display.minWidth\n        }\"\n      >\n        <header *ngIf=\"headerTemplate\">\n          <ng-container\n            *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n          ></ng-container>\n        </header>\n        <riv-search\n          *ngIf=\"s.query.showSearch\"\n          [value]=\"s.query.search\"\n          [placeholder]=\"s.query.searchPlaceholder\"\n          [autoFocus]=\"true\"\n          (valueChange)=\"searchChange($event)\"\n        ></riv-search>\n        <div *ngIf=\"s.query.showOrder\">\n          <span class=\"order-by\">Sort by:</span>\n          <riv-select [manager]=\"orderByManager\">\n            <ng-template #trigger let-state=\"state\">\n              <button\n                rivButton\n                [variant]=\"'ghost'\"\n                [size]=\"'small'\"\n                [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n                [iconPosition]=\"'last'\"\n              >\n                {{ getSelectedOrderByOption(s)?.title }}\n              </button>\n            </ng-template>\n          </riv-select>\n        </div>\n        <div class=\"options\">\n          <riv-select-node\n            *ngIf=\"\n              s.selection.allowMultiSelect &&\n              s.selection.allowSelectAll &&\n              !s.display.zeroStateMessage\n            \"\n            [mode]=\"'multi'\"\n            [node]=\"{\n              id: '__NOOP__',\n              title: s.query.search ? 'Select all matching' : 'Select all',\n              selected: s.selection.visibleSelectionState,\n              selectable: true,\n              expandable: false,\n              expanded: false\n            }\"\n            (selectChange)=\"\n              manager?.actions?.next({ type: 'visibleSelectedChange' })\n            \"\n          ></riv-select-node>\n          <div\n            *ngFor=\"let group of s.fullOptionGroups; trackBy: trackBySymbol\"\n            class=\"group\"\n            [class.divider]=\"s.display.dividers\"\n          >\n            <span *ngIf=\"group.header; let header\" class=\"header\">\n              {{ header }}\n            </span>\n            <ng-container\n              *ngFor=\"let option of group.options; trackBy: trackByOption\"\n            >\n              <ng-container *ngIf=\"optionTemplate; else standardTemplate\">\n                <ng-container\n                  [ngTemplateOutlet]=\"optionTemplate\"\n                  [ngTemplateOutletContext]=\"{ node: option }\"\n                ></ng-container>\n              </ng-container>\n              <ng-template #standardTemplate>\n                <riv-select-node\n                  [mode]=\"s.selection.allowMultiSelect ? 'multi' : 'single'\"\n                  [node]=\"option\"\n                  [showSingleSelected]=\"s.display.showSingleSelected\"\n                  (selectChange)=\"\n                    selectChange(s.selection.allowMultiSelect, $event)\n                  \"\n                  (expandChange)=\"\n                    manager?.actions?.next({\n                      type: 'toggleOptionExpanded',\n                      id: $event\n                    })\n                  \"\n                ></riv-select-node>\n              </ng-template>\n            </ng-container>\n          </div>\n          <span\n            *ngIf=\"s.display.displayLimitMessage; let message\"\n            class=\"display-limit\"\n          >\n            {{ message }}\n          </span>\n          <riv-zero-state\n            *ngIf=\"s.display.zeroStateMessage; let message\"\n            [message]=\"message\"\n          ></riv-zero-state>\n        </div>\n        <footer *ngIf=\"footerTemplate\" class=\"custom-footer\">\n          <ng-container\n            *ngTemplateOutlet=\"footerTemplate; context: { state: s }\"\n          ></ng-container>\n        </footer>\n      </div>\n    </riv-loading-cover>\n  </ng-template>\n\n  <ng-container *ngIf=\"!s.display.inline; else content\">\n    <ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n      <button\n        #customTriggerButton\n        (click)=\"allowedOpen()\"\n        [disabled]=\"disabled || locked\"\n        type=\"button\"\n        class=\"custom-trigger-button\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"triggerTemplate\"\n          [ngTemplateOutletContext]=\"{ state: s }\"\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        [state]=\"state\"\n        [errorMessage]=\"errorMessage\"\n        [labelActionText]=\"labelActionText\"\n        (labelAction)=\"labelAction.emit($event)\"\n      >\n        <button\n          #standardTriggerButton\n          class=\"trigger\"\n          [class.small]=\"size === 'small'\"\n          [class.large]=\"size === 'large'\"\n          [class.warning]=\"state === 'warning'\"\n          [class.error]=\"state === 'error'\"\n          (click)=\"allowedOpen()\"\n          [disabled]=\"disabled || locked\"\n          type=\"button\"\n        >\n          <ng-container\n            *ngIf=\"s.selection.selected.size; else placeholderValue\"\n          >\n            <ng-container\n              *ngIf=\"\n                customSelectedOptionsTemplate;\n                else standardSelectedOptionsTemplate\n              \"\n            >\n              <span class=\"value\">\n                <ng-container\n                  [ngTemplateOutlet]=\"customSelectedOptionsTemplate\"\n                  [ngTemplateOutletContext]=\"{ selected: s.selection.selected }\"\n                ></ng-container>\n              </span>\n            </ng-container>\n            <ng-template #standardSelectedOptionsTemplate>\n              <span class=\"value\">{{\n                s.display.formattedSelectedOptions\n              }}</span>\n              <span *ngIf=\"s.display.pillCount > 1\" class=\"selected-count\">\n                {{ s.display.pillCount | rivNumber }}\n              </span>\n            </ng-template>\n          </ng-container>\n          <ng-template #placeholderValue>\n            <span class=\"value placeholder\">{{ s.display.placeholder }}</span>\n          </ng-template>\n          <span class=\"chevron\">\n            <riv-icon\n              *ngIf=\"!locked\"\n              [name]=\"s.display.open ? 'ChevronUp' : 'ChevronDown'\"\n              [size]=\"20\"\n            ></riv-icon>\n            <riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n          </span>\n        </button>\n      </riv-input-label>\n    </ng-template>\n\n    <ng-container *ngIf=\"s.display.open\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"getTrigger()\"\n        [theme]=\"'light'\"\n        [showCaret]=\"false\"\n        [allowedPositions]=\"allowedCalloutPositions\"\n        [preferredPosition]=\"preferredCalloutPosition\"\n        (close)=\"manager?.actions?.next({ type: 'openChange', open: false })\"\n      >\n        <ng-container [ngTemplateOutlet]=\"content\"></ng-container>\n      </riv-callout>\n    </ng-container>\n  </ng-container>\n</ng-container>\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);cursor:pointer;padding-left: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);cursor:default}.selected-count{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);font-weight:var(--font-weight-normal);color:var(--type-dark-body);border-radius:calc(var(--base-grid-size) * 3);background-color:var(--brand);padding:calc(var(--base-grid-size) / 4) calc(var(--base-grid-size) * 2);align-self:center}.value{font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre}.value.placeholder{color:var(--type-light-disabled)}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.custom-trigger-button{max-width:100%}.order-by{font:var(--input-medium);color:var(--type-light-low-contrast)}.content-body{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large)}.content-body:not(.inline){max-height:50vh;min-width:calc(var(--base-grid-size) * 75);max-width:50vw}.options{flex-grow:1;overflow-y:auto;gap:var(--size-medium)}.options,.group{display:flex;flex-direction:column}.group{gap:var(--size-xsmall)}.group.divider:not(:last-child){padding-bottom:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light)}.display-limit{font:var(--body-small);color:var(--type-light-disabled);padding:var(--size-small);text-align:center}.header{font:var(--input-medium);color:var(--type-light-low-contrast);padding:var(--size-xsmall) 0}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\n"] }]
         }], propDecorators: { manager: [{
@@ -3262,9 +3283,9 @@ class SimpleSelectComponent extends InputLabelComponent {
         this.manager?.actions.next(action);
     }
 }
-SimpleSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SimpleSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SimpleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SimpleSelectComponent, selector: "riv-simple-select", inputs: { optionGroups: "optionGroups", selectedOption: "selectedOption", size: "size", disabled: "disabled", locked: "locked", filterabilityOptions: "filterabilityOptions", orderBy: "orderBy", placeholder: "placeholder", maxHeight: "maxHeight", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", dividers: "dividers", preferredCalloutPosition: "preferredCalloutPosition", allowedCalloutPositions: "allowedCalloutPositions" }, outputs: { selectedOptionChange: "selectedOptionChange" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<riv-select\n  [manager]=\"manager\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  [locked]=\"locked\"\n  [preferredCalloutPosition]=\"preferredCalloutPosition\"\n  [allowedCalloutPositions]=\"allowedCalloutPositions\"\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <ng-container *ngIf=\"triggerTemplate; let triggerTpl\">\n    <ng-template #trigger let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"triggerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"optionTemplate; let optionTpl\">\n    <ng-template #option let-node=\"node\">\n      <button\n        class=\"custom-node\"\n        [disabled]=\"node.disabled\"\n        (click)=\"\n          manager?.actions?.next({\n            type: 'setSelectedOption',\n            id: node.id\n          });\n          manager?.actions?.next({\n            type: 'openChange',\n            open: false\n          })\n        \"\n        type=\"button\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"optionTpl\"\n          [ngTemplateOutletContext]=\"{ node }\"\n        ></ng-container>\n      </button>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"headerTemplate; let headerTpl\">\n    <ng-template #header let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"headerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"footerTemplate; let footerTpl\">\n    <ng-template #footer let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"footerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n</riv-select>\n", styles: [".custom-node{display:block;width:100%;text-align:left}.custom-node:not(:disabled){cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "allowedCalloutPositions", "preferredCalloutPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SimpleSelectComponent, decorators: [{
+SimpleSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SimpleSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SimpleSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SimpleSelectComponent, selector: "riv-simple-select", inputs: { optionGroups: "optionGroups", selectedOption: "selectedOption", size: "size", disabled: "disabled", locked: "locked", filterabilityOptions: "filterabilityOptions", orderBy: "orderBy", placeholder: "placeholder", maxHeight: "maxHeight", maxWidth: "maxWidth", minHeight: "minHeight", minWidth: "minWidth", dividers: "dividers", preferredCalloutPosition: "preferredCalloutPosition", allowedCalloutPositions: "allowedCalloutPositions" }, outputs: { selectedOptionChange: "selectedOptionChange" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "optionTemplate", first: true, predicate: ["option"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "footerTemplate", first: true, predicate: ["footer"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<riv-select\n  [manager]=\"manager\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  [locked]=\"locked\"\n  [preferredCalloutPosition]=\"preferredCalloutPosition\"\n  [allowedCalloutPositions]=\"allowedCalloutPositions\"\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <ng-container *ngIf=\"triggerTemplate; let triggerTpl\">\n    <ng-template #trigger let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"triggerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"optionTemplate; let optionTpl\">\n    <ng-template #option let-node=\"node\">\n      <button\n        class=\"custom-node\"\n        [disabled]=\"node.disabled\"\n        (click)=\"\n          manager?.actions?.next({\n            type: 'setSelectedOption',\n            id: node.id\n          });\n          manager?.actions?.next({\n            type: 'openChange',\n            open: false\n          })\n        \"\n        type=\"button\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"optionTpl\"\n          [ngTemplateOutletContext]=\"{ node }\"\n        ></ng-container>\n      </button>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"headerTemplate; let headerTpl\">\n    <ng-template #header let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"headerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"footerTemplate; let footerTpl\">\n    <ng-template #footer let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"footerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n</riv-select>\n", styles: [".custom-node{display:block;width:100%;text-align:left}.custom-node:not(:disabled){cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "allowedCalloutPositions", "preferredCalloutPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SimpleSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-simple-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-select\n  [manager]=\"manager\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  [locked]=\"locked\"\n  [preferredCalloutPosition]=\"preferredCalloutPosition\"\n  [allowedCalloutPositions]=\"allowedCalloutPositions\"\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <ng-container *ngIf=\"triggerTemplate; let triggerTpl\">\n    <ng-template #trigger let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"triggerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"optionTemplate; let optionTpl\">\n    <ng-template #option let-node=\"node\">\n      <button\n        class=\"custom-node\"\n        [disabled]=\"node.disabled\"\n        (click)=\"\n          manager?.actions?.next({\n            type: 'setSelectedOption',\n            id: node.id\n          });\n          manager?.actions?.next({\n            type: 'openChange',\n            open: false\n          })\n        \"\n        type=\"button\"\n      >\n        <ng-container\n          [ngTemplateOutlet]=\"optionTpl\"\n          [ngTemplateOutletContext]=\"{ node }\"\n        ></ng-container>\n      </button>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"headerTemplate; let headerTpl\">\n    <ng-template #header let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"headerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n\n  <ng-container *ngIf=\"footerTemplate; let footerTpl\">\n    <ng-template #footer let-state=\"state\">\n      <ng-container\n        [ngTemplateOutlet]=\"footerTpl\"\n        [ngTemplateOutletContext]=\"{ state }\"\n      ></ng-container>\n    </ng-template>\n  </ng-container>\n</riv-select>\n", styles: [".custom-node{display:block;width:100%;text-align:left}.custom-node:not(:disabled){cursor:pointer}\n"] }]
         }], propDecorators: { optionGroups: [{
@@ -3323,9 +3344,9 @@ class OptionGroupPipe {
         ];
     }
 }
-OptionGroupPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OptionGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-OptionGroupPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: OptionGroupPipe, name: "rivOptionGroup" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OptionGroupPipe, decorators: [{
+OptionGroupPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OptionGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+OptionGroupPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: OptionGroupPipe, name: "rivOptionGroup" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OptionGroupPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rivOptionGroup' }]
         }] });
@@ -3610,9 +3631,9 @@ class CalendarComponent {
             this.activeYearMonthChange.emit(yearMonth);
     }
 }
-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    <riv-simple-select\n      [filterabilityOptions]=\"{ enabled: true, placeholder: 'Month' }\"\n      [orderBy]=\"'source'\"\n      [optionGroups]=\"monthOptions$ | async | rivOptionGroup\"\n      [selectedOption]=\"selectedMonthOption$ | async\"\n      (selectedOptionChange)=\"emitActiveYearMonth($event?.date ?? null)\"\n    >\n      <ng-template #trigger let-state=\"state\">\n        <button\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n          [iconPosition]=\"'last'\"\n          type=\"button\"\n        >\n          {{ state.display.formattedSelectedOptions || '...' }}\n        </button>\n      </ng-template>\n    </riv-simple-select>\n    <riv-simple-select\n      [filterabilityOptions]=\"{ enabled: true, placeholder: 'Year' }\"\n      [orderBy]=\"'source'\"\n      [optionGroups]=\"yearOptions$ | async | rivOptionGroup\"\n      [selectedOption]=\"selectedYearOption$ | async\"\n      (selectedOptionChange)=\"emitActiveYearMonth($event?.date ?? null)\"\n    >\n      <ng-template #trigger let-state=\"state\">\n        <button\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n          [iconPosition]=\"'last'\"\n          type=\"button\"\n        >\n          {{ state.display.formattedSelectedOptions || '...' }}\n        </button>\n      </ng-template>\n    </riv-simple-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; trackBy: trackByDate\"\n    class=\"day\"\n    [disabled]=\"day.hidden\"\n    [class.hidden]=\"day.hidden\"\n    [class.bleed]=\"!day.inCurrentMonth && !day.hidden\"\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    >\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;cursor:pointer}.day.hidden{cursor:default}.day:hover:not(.hidden){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-low-contrast)}.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)}\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", "current"] }, { kind: "component", type: SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["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: [{
+CalendarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+CalendarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", 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    <riv-simple-select\n      [filterabilityOptions]=\"{ enabled: true, placeholder: 'Month' }\"\n      [orderBy]=\"'source'\"\n      [optionGroups]=\"monthOptions$ | async | rivOptionGroup\"\n      [selectedOption]=\"selectedMonthOption$ | async\"\n      (selectedOptionChange)=\"emitActiveYearMonth($event?.date ?? null)\"\n    >\n      <ng-template #trigger let-state=\"state\">\n        <button\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n          [iconPosition]=\"'last'\"\n          type=\"button\"\n        >\n          {{ state.display.formattedSelectedOptions || '...' }}\n        </button>\n      </ng-template>\n    </riv-simple-select>\n    <riv-simple-select\n      [filterabilityOptions]=\"{ enabled: true, placeholder: 'Year' }\"\n      [orderBy]=\"'source'\"\n      [optionGroups]=\"yearOptions$ | async | rivOptionGroup\"\n      [selectedOption]=\"selectedYearOption$ | async\"\n      (selectedOptionChange)=\"emitActiveYearMonth($event?.date ?? null)\"\n    >\n      <ng-template #trigger let-state=\"state\">\n        <button\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n          [iconPosition]=\"'last'\"\n          type=\"button\"\n        >\n          {{ state.display.formattedSelectedOptions || '...' }}\n        </button>\n      </ng-template>\n    </riv-simple-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; trackBy: trackByDate\"\n    class=\"day\"\n    [disabled]=\"day.hidden\"\n    [class.hidden]=\"day.hidden\"\n    [class.bleed]=\"!day.inCurrentMonth && !day.hidden\"\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    >\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;cursor:pointer}.day.hidden{cursor:default}.day:hover:not(.hidden){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-low-contrast)}.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)}\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", "current"] }, { kind: "component", type: SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["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: "15.2.10", ngImport: i0, type: CalendarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-calendar', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"controls\">\n  <div>\n    <riv-simple-select\n      [filterabilityOptions]=\"{ enabled: true, placeholder: 'Month' }\"\n      [orderBy]=\"'source'\"\n      [optionGroups]=\"monthOptions$ | async | rivOptionGroup\"\n      [selectedOption]=\"selectedMonthOption$ | async\"\n      (selectedOptionChange)=\"emitActiveYearMonth($event?.date ?? null)\"\n    >\n      <ng-template #trigger let-state=\"state\">\n        <button\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n          [iconPosition]=\"'last'\"\n          type=\"button\"\n        >\n          {{ state.display.formattedSelectedOptions || '...' }}\n        </button>\n      </ng-template>\n    </riv-simple-select>\n    <riv-simple-select\n      [filterabilityOptions]=\"{ enabled: true, placeholder: 'Year' }\"\n      [orderBy]=\"'source'\"\n      [optionGroups]=\"yearOptions$ | async | rivOptionGroup\"\n      [selectedOption]=\"selectedYearOption$ | async\"\n      (selectedOptionChange)=\"emitActiveYearMonth($event?.date ?? null)\"\n    >\n      <ng-template #trigger let-state=\"state\">\n        <button\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n          [iconPosition]=\"'last'\"\n          type=\"button\"\n        >\n          {{ state.display.formattedSelectedOptions || '...' }}\n        </button>\n      </ng-template>\n    </riv-simple-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; trackBy: trackByDate\"\n    class=\"day\"\n    [disabled]=\"day.hidden\"\n    [class.hidden]=\"day.hidden\"\n    [class.bleed]=\"!day.inCurrentMonth && !day.hidden\"\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    >\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;cursor:pointer}.day.hidden{cursor:default}.day:hover:not(.hidden){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-low-contrast)}.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)}\n"] }]
         }], propDecorators: { activeYearMonth: [{
@@ -3821,9 +3842,9 @@ class DateRangeComponent extends InputLabelComponent {
         this.favoritePresetIds$.next([...ids]);
     }
 }
-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", alternativePresetList: "alternativePresetList" }, outputs: { valueChange: "valueChange" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }], viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true, read: ElementRef }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"open$.next(true)\"\n    [disabled]=\"disabled$ | async\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ open: open$ | async }\"\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    [state]=\"state\"\n    [errorMessage]=\"errorMessage\"\n    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      [class.warning]=\"state === 'warning'\"\n      [class.error]=\"state === 'error'\"\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</ng-template>\n\n<ng-template\n  #self\n  [ngTemplateOutlet]=\"self\"\n  let-inputValue\n  [ngTemplateOutletContext]=\"{ $implicit: (distinctValue$ | async) }\"\n>\n  <ng-container *ngIf=\"open$ | async\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"getTrigger()\"\n      [showCaret]=\"false\"\n      [theme]=\"'light'\"\n      [allowedPositions]=\"[\n        'top-left',\n        'top-right',\n        'bottom-right',\n        'bottom-left'\n      ]\"\n      [preferredPosition]=\"'bottom-right'\"\n      (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n    >\n      <div class=\"content\" [class.include-preset]=\"showPresets\">\n        <div *ngIf=\"showPresets\" class=\"presets\">\n          <riv-simple-select\n            [label]=\"'Date presets'\"\n            [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search' }\"\n            [orderBy]=\"'source'\"\n            [optionGroups]=\"\n              (filteredPresetOptions$ | async) ?? [] | rivOptionGroup\n            \"\n            [selectedOption]=\"selectedPreset$ | async\"\n            (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n          >\n            <ng-template #option 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-simple-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-container>\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);background-color:var(--surface-light-0);cursor:pointer}.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-xsmall) calc(var(--base-grid-size) * 1.5)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{display:inline-grid;grid-template-rows:1fr auto}.content.include-preset{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);cursor:pointer}.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);cursor:pointer}.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);cursor:pointer}.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", "current"] }, { 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", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { 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: DateRangeComponent, decorators: [{
+DateRangeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+DateRangeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateRangeComponent, selector: "riv-date-range", inputs: { showPresets: "showPresets", min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", alternativePresetList: "alternativePresetList" }, outputs: { valueChange: "valueChange" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }], viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true, read: ElementRef }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true, read: ElementRef }], usesInheritance: true, ngImport: i0, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"open$.next(true)\"\n    [disabled]=\"disabled$ | async\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ open: open$ | async }\"\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    [state]=\"state\"\n    [errorMessage]=\"errorMessage\"\n    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      [class.warning]=\"state === 'warning'\"\n      [class.error]=\"state === 'error'\"\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</ng-template>\n\n<ng-template\n  #self\n  [ngTemplateOutlet]=\"self\"\n  let-inputValue\n  [ngTemplateOutletContext]=\"{ $implicit: (distinctValue$ | async) }\"\n>\n  <ng-container *ngIf=\"open$ | async\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"getTrigger()\"\n      [showCaret]=\"false\"\n      [theme]=\"'light'\"\n      [allowedPositions]=\"[\n        'top-left',\n        'top-right',\n        'bottom-right',\n        'bottom-left'\n      ]\"\n      [preferredPosition]=\"'bottom-right'\"\n      (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n    >\n      <div class=\"content\" [class.include-preset]=\"showPresets\">\n        <div *ngIf=\"showPresets\" class=\"presets\">\n          <riv-simple-select\n            [label]=\"'Date presets'\"\n            [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search' }\"\n            [orderBy]=\"'source'\"\n            [optionGroups]=\"\n              (filteredPresetOptions$ | async) ?? [] | rivOptionGroup\n            \"\n            [selectedOption]=\"selectedPreset$ | async\"\n            (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n          >\n            <ng-template #option 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-simple-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-container>\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);background-color:var(--surface-light-0);cursor:pointer}.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-xsmall) calc(var(--base-grid-size) * 1.5)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{display:inline-grid;grid-template-rows:1fr auto}.content.include-preset{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);cursor:pointer}.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);cursor:pointer}.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);cursor:pointer}.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", "current"] }, { 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", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateRangeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-date-range', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button\n    #customTriggerButton\n    (click)=\"open$.next(true)\"\n    [disabled]=\"disabled$ | async\"\n    type=\"button\"\n  >\n    <ng-container\n      [ngTemplateOutlet]=\"triggerTemplate\"\n      [ngTemplateOutletContext]=\"{ open: open$ | async }\"\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    [state]=\"state\"\n    [errorMessage]=\"errorMessage\"\n    [labelActionText]=\"labelActionText\"\n    (labelAction)=\"labelAction.emit($event)\"\n  >\n    <button\n      #standardTriggerButton\n      class=\"trigger\"\n      [class.warning]=\"state === 'warning'\"\n      [class.error]=\"state === 'error'\"\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</ng-template>\n\n<ng-template\n  #self\n  [ngTemplateOutlet]=\"self\"\n  let-inputValue\n  [ngTemplateOutletContext]=\"{ $implicit: (distinctValue$ | async) }\"\n>\n  <ng-container *ngIf=\"open$ | async\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"getTrigger()\"\n      [showCaret]=\"false\"\n      [theme]=\"'light'\"\n      [allowedPositions]=\"[\n        'top-left',\n        'top-right',\n        'bottom-right',\n        'bottom-left'\n      ]\"\n      [preferredPosition]=\"'bottom-right'\"\n      (close)=\"open$.next(false); userSelectedDate$.next(inputValue)\"\n    >\n      <div class=\"content\" [class.include-preset]=\"showPresets\">\n        <div *ngIf=\"showPresets\" class=\"presets\">\n          <riv-simple-select\n            [label]=\"'Date presets'\"\n            [filterabilityOptions]=\"{ enabled: true, placeholder: 'Search' }\"\n            [orderBy]=\"'source'\"\n            [optionGroups]=\"\n              (filteredPresetOptions$ | async) ?? [] | rivOptionGroup\n            \"\n            [selectedOption]=\"selectedPreset$ | async\"\n            (selectedOptionChange)=\"userSelectedPreset$.next($event)\"\n          >\n            <ng-template #option 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-simple-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-container>\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);background-color:var(--surface-light-0);cursor:pointer}.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-xsmall) calc(var(--base-grid-size) * 1.5)}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{display:inline-grid;grid-template-rows:1fr auto}.content.include-preset{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);cursor:pointer}.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);cursor:pointer}.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);cursor:pointer}.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"] }]
         }], propDecorators: { showPresets: [{
@@ -4098,24 +4119,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 })(DateRangeComponent || (DateRangeComponent = {}));
 class DateComponent extends InputLabelComponent {
-    constructor(cdr, host) {
-        super();
-        this.cdr = cdr;
-        this.host = host;
-        this.min = CalendarComponent.defaultMin;
-        this.max = CalendarComponent.defaultMax;
-        this.placeholder = 'Select date';
-        this.disabled = false;
-        this.size = 'medium';
-        this.showClearButton = true;
-        this.showTodayButton = true;
-        this.activeYearMonth = timeMonth.floor(new Date());
-        this.open$ = new BehaviorSubject(false);
-        this.valueChange = new EventEmitter();
-        this.inputText = '';
-        this.hasFocus = false;
-        this.datePipe = new DatePipe();
-    }
     set value(v) {
         if (this._value?.getTime() === v?.getTime())
             return;
@@ -4136,6 +4139,24 @@ class DateComponent extends InputLabelComponent {
     get open() {
         return this.open$.getValue();
     }
+    constructor(cdr, host) {
+        super();
+        this.cdr = cdr;
+        this.host = host;
+        this.min = CalendarComponent.defaultMin;
+        this.max = CalendarComponent.defaultMax;
+        this.placeholder = 'Select date';
+        this.disabled = false;
+        this.size = 'medium';
+        this.showClearButton = true;
+        this.showTodayButton = true;
+        this.activeYearMonth = timeMonth.floor(new Date());
+        this.open$ = new BehaviorSubject(false);
+        this.valueChange = new EventEmitter();
+        this.inputText = '';
+        this.hasFocus = false;
+        this.datePipe = new DatePipe();
+    }
     // The callout renders with isModal=false (no full-viewport scrim) and can't
     // self-close on outside clicks. Any overlay layer — including sibling
     // overlays like the month/year selects — counts as "inside" the picker.
@@ -4235,9 +4256,9 @@ class DateComponent extends InputLabelComponent {
         this.cdr.markForCheck();
     }
 }
-DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DateComponent, selector: "riv-date", inputs: { min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", size: "size", showClearButton: "showClearButton", showTodayButton: "showTodayButton", open: "open" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event.target)" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <div\n    #trigger\n    class=\"trigger\"\n    [class.xsmall]=\"size === 'xsmall'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [class.xlarge]=\"size === 'xlarge'\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.disabled]=\"disabled\"\n  >\n    <input\n      #input\n      class=\"value\"\n      [placeholder]=\"placeholder\"\n      [value]=\"inputText\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"label || null\"\n      [attr.aria-expanded]=\"open$ | async\"\n      role=\"combobox\"\n      aria-haspopup=\"dialog\"\n      aria-autocomplete=\"none\"\n      (input)=\"onInputChange(input.value)\"\n      (blur)=\"onInputBlur($event)\"\n      (focus)=\"onInputFocus()\"\n      (keydown.enter)=\"input.blur(); open$.next(false); $event.preventDefault()\"\n      type=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n    />\n    <button\n      class=\"chevron\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"toggleCalendar()\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"(open$ | async) ? 'Close calendar' : 'Open calendar'\"\n      type=\"button\"\n      tabindex=\"-1\"\n    >\n      <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n    </button>\n  </div>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"trigger\"\n    [isModal]=\"false\"\n    [showCaret]=\"false\"\n    [theme]=\"'light'\"\n    [allowedPositions]=\"[\n      'top-left',\n      'top-right',\n      'bottom-right',\n      'bottom-left'\n    ]\"\n    [preferredPosition]=\"'bottom-right'\"\n    (close)=\"open$.next(false)\"\n  >\n    <div (mousedown)=\"$event.preventDefault()\">\n      <header *ngIf=\"headerTemplate\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n      </header>\n      <div class=\"content\">\n        <riv-calendar\n          [activeYearMonth]=\"activeYearMonth\"\n          (activeYearMonthChange)=\"activeYearMonth = $event\"\n          [displayMin]=\"min\"\n          [displayMax]=\"max\"\n          [selectableMin]=\"min\"\n          [selectableMax]=\"max\"\n          [selectedValue]=\"previewValue ?? value\"\n          (dateSelect)=\"onDateSelect($event); input.blur()\"\n        ></riv-calendar>\n      </div>\n      <footer *ngIf=\"showClearButton || showTodayButton\" class=\"buttons\">\n        <button\n          *ngIf=\"showClearButton\"\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          (click)=\"clearValue(); input.blur()\"\n          type=\"button\"\n        >\n          Clear\n        </button>\n        <button\n          *ngIf=\"showTodayButton\"\n          class=\"today\"\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'basic'\"\n          [disabled]=\"!isTodaySelectable\"\n          (click)=\"selectToday(); input.blur()\"\n          type=\"button\"\n        >\n          Today\n        </button>\n      </footer>\n    </div>\n  </riv-callout>\n</ng-container>\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);padding-left:var(--size-small);position:relative}.trigger:focus-within{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:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre;border:none;background:transparent;outline:none;width:100%}.value::placeholder{color:var(--type-light-disabled)}.value:disabled{color:var(--type-light-disabled)}.trigger.xsmall .value{font:var(--input-small);padding:var(--size-xsmall) 0}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.trigger.xlarge .value{font:var(--input-large);padding:var(--size-large) var(--size-small)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5);border:none;background:transparent;cursor:pointer;color:var(--type-light-high-contrast)}.chevron:disabled{color:var(--type-light-disabled);cursor:not-allowed}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{padding:var(--size-xlarge)}.buttons{padding:0 var(--size-xlarge) var(--size-xlarge);display:flex;justify-content:space-between}.buttons .today{margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { 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: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DateComponent, decorators: [{
+DateComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+DateComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DateComponent, selector: "riv-date", inputs: { min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", size: "size", showClearButton: "showClearButton", showTodayButton: "showTodayButton", open: "open" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event.target)" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <div\n    #trigger\n    class=\"trigger\"\n    [class.xsmall]=\"size === 'xsmall'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [class.xlarge]=\"size === 'xlarge'\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.disabled]=\"disabled\"\n  >\n    <input\n      #input\n      class=\"value\"\n      [placeholder]=\"placeholder\"\n      [value]=\"inputText\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"label || null\"\n      [attr.aria-expanded]=\"open$ | async\"\n      role=\"combobox\"\n      aria-haspopup=\"dialog\"\n      aria-autocomplete=\"none\"\n      (input)=\"onInputChange(input.value)\"\n      (blur)=\"onInputBlur($event)\"\n      (focus)=\"onInputFocus()\"\n      (keydown.enter)=\"input.blur(); open$.next(false); $event.preventDefault()\"\n      type=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n    />\n    <button\n      class=\"chevron\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"toggleCalendar()\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"(open$ | async) ? 'Close calendar' : 'Open calendar'\"\n      type=\"button\"\n      tabindex=\"-1\"\n    >\n      <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n    </button>\n  </div>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"trigger\"\n    [isModal]=\"false\"\n    [showCaret]=\"false\"\n    [theme]=\"'light'\"\n    [allowedPositions]=\"[\n      'top-left',\n      'top-right',\n      'bottom-right',\n      'bottom-left'\n    ]\"\n    [preferredPosition]=\"'bottom-right'\"\n    (close)=\"open$.next(false)\"\n  >\n    <div (mousedown)=\"$event.preventDefault()\">\n      <header *ngIf=\"headerTemplate\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n      </header>\n      <div class=\"content\">\n        <riv-calendar\n          [activeYearMonth]=\"activeYearMonth\"\n          (activeYearMonthChange)=\"activeYearMonth = $event\"\n          [displayMin]=\"min\"\n          [displayMax]=\"max\"\n          [selectableMin]=\"min\"\n          [selectableMax]=\"max\"\n          [selectedValue]=\"previewValue ?? value\"\n          (dateSelect)=\"onDateSelect($event); input.blur()\"\n        ></riv-calendar>\n      </div>\n      <footer *ngIf=\"showClearButton || showTodayButton\" class=\"buttons\">\n        <button\n          *ngIf=\"showClearButton\"\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          (click)=\"clearValue(); input.blur()\"\n          type=\"button\"\n        >\n          Clear\n        </button>\n        <button\n          *ngIf=\"showTodayButton\"\n          class=\"today\"\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'basic'\"\n          [disabled]=\"!isTodaySelectable\"\n          (click)=\"selectToday(); input.blur()\"\n          type=\"button\"\n        >\n          Today\n        </button>\n      </footer>\n    </div>\n  </riv-callout>\n</ng-container>\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);padding-left:var(--size-small);position:relative}.trigger:focus-within{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:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre;border:none;background:transparent;outline:none;width:100%}.value::placeholder{color:var(--type-light-disabled)}.value:disabled{color:var(--type-light-disabled)}.trigger.xsmall .value{font:var(--input-small);padding:var(--size-xsmall) 0}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.trigger.xlarge .value{font:var(--input-large);padding:var(--size-large) var(--size-small)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5);border:none;background:transparent;cursor:pointer;color:var(--type-light-high-contrast)}.chevron:disabled{color:var(--type-light-disabled);cursor:not-allowed}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{padding:var(--size-xlarge)}.buttons{padding:0 var(--size-xlarge) var(--size-xlarge);display:flex;justify-content:space-between}.buttons .today{margin-left:auto}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { 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: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-date', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <div\n    #trigger\n    class=\"trigger\"\n    [class.xsmall]=\"size === 'xsmall'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [class.xlarge]=\"size === 'xlarge'\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.disabled]=\"disabled\"\n  >\n    <input\n      #input\n      class=\"value\"\n      [placeholder]=\"placeholder\"\n      [value]=\"inputText\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"label || null\"\n      [attr.aria-expanded]=\"open$ | async\"\n      role=\"combobox\"\n      aria-haspopup=\"dialog\"\n      aria-autocomplete=\"none\"\n      (input)=\"onInputChange(input.value)\"\n      (blur)=\"onInputBlur($event)\"\n      (focus)=\"onInputFocus()\"\n      (keydown.enter)=\"input.blur(); open$.next(false); $event.preventDefault()\"\n      type=\"text\"\n      autocomplete=\"off\"\n      spellcheck=\"false\"\n    />\n    <button\n      class=\"chevron\"\n      (mousedown)=\"$event.preventDefault()\"\n      (click)=\"toggleCalendar()\"\n      [disabled]=\"disabled\"\n      [attr.aria-label]=\"(open$ | async) ? 'Close calendar' : 'Open calendar'\"\n      type=\"button\"\n      tabindex=\"-1\"\n    >\n      <riv-icon [name]=\"'Calendar'\" [size]=\"16\"></riv-icon>\n    </button>\n  </div>\n</riv-input-label>\n<ng-container *ngIf=\"open$ | async\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"trigger\"\n    [isModal]=\"false\"\n    [showCaret]=\"false\"\n    [theme]=\"'light'\"\n    [allowedPositions]=\"[\n      'top-left',\n      'top-right',\n      'bottom-right',\n      'bottom-left'\n    ]\"\n    [preferredPosition]=\"'bottom-right'\"\n    (close)=\"open$.next(false)\"\n  >\n    <div (mousedown)=\"$event.preventDefault()\">\n      <header *ngIf=\"headerTemplate\">\n        <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n      </header>\n      <div class=\"content\">\n        <riv-calendar\n          [activeYearMonth]=\"activeYearMonth\"\n          (activeYearMonthChange)=\"activeYearMonth = $event\"\n          [displayMin]=\"min\"\n          [displayMax]=\"max\"\n          [selectableMin]=\"min\"\n          [selectableMax]=\"max\"\n          [selectedValue]=\"previewValue ?? value\"\n          (dateSelect)=\"onDateSelect($event); input.blur()\"\n        ></riv-calendar>\n      </div>\n      <footer *ngIf=\"showClearButton || showTodayButton\" class=\"buttons\">\n        <button\n          *ngIf=\"showClearButton\"\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          (click)=\"clearValue(); input.blur()\"\n          type=\"button\"\n        >\n          Clear\n        </button>\n        <button\n          *ngIf=\"showTodayButton\"\n          class=\"today\"\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'basic'\"\n          [disabled]=\"!isTodaySelectable\"\n          (click)=\"selectToday(); input.blur()\"\n          type=\"button\"\n        >\n          Today\n        </button>\n      </footer>\n    </div>\n  </riv-callout>\n</ng-container>\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);padding-left:var(--size-small);position:relative}.trigger:focus-within{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:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) 0;flex-grow:1;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:pre;border:none;background:transparent;outline:none;width:100%}.value::placeholder{color:var(--type-light-disabled)}.value:disabled{color:var(--type-light-disabled)}.trigger.xsmall .value{font:var(--input-small);padding:var(--size-xsmall) 0}.trigger.small .value{font:var(--input-small)}.trigger.large .value{font:var(--input-large);padding:var(--size-medium) var(--size-xsmall)}.trigger.xlarge .value{font:var(--input-large);padding:var(--size-large) var(--size-small)}.chevron{display:flex;justify-content:center;align-items:center;padding:var(--size-xsmall) calc(var(--base-grid-size) * 1.5);border:none;background:transparent;cursor:pointer;color:var(--type-light-high-contrast)}.chevron:disabled{color:var(--type-light-disabled);cursor:not-allowed}.trigger.warning{border-color:var(--surface-dark-caution)}.trigger.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.content{padding:var(--size-xlarge)}.buttons{padding:0 var(--size-xlarge) var(--size-xlarge);display:flex;justify-content:space-between}.buttons .today{margin-left:auto}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { min: [{
@@ -5005,9 +5026,9 @@ class MentionsInputComponent {
         this.closeMentions();
     }
 }
-MentionsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MentionsInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-MentionsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MentionsInputComponent, selector: "riv-mentions-input", inputs: { content: "content", users: "users", readonly: "readonly", placeholder: "placeholder" }, outputs: { contentChange: "contentChange" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"mentions-container\" #container>\n  <div\n    *ngIf=\"!readonly\"\n    #input\n    class=\"text-content editable\"\n    contenteditable=\"true\"\n    [attr.data-placeholder]=\"placeholder\"\n    (input)=\"onInput()\"\n    (keydown)=\"onKeyDown($event)\"\n    (paste)=\"onPaste($event)\"\n    (copy)=\"onCopy($event)\"\n    (cut)=\"onCut($event)\"\n  ></div>\n\n  <div *ngIf=\"readonly\" #input class=\"text-content\"></div>\n\n  <riv-callout\n    *ngIf=\"!readonly && mentionsVisible && mentionAnchor\"\n    [anchor]=\"mentionAnchor\"\n    [isModal]=\"true\"\n    [showCaret]=\"false\"\n    [allowedPositions]=\"['bottom-right', 'top-right']\"\n    [theme]=\"'light'\"\n    (close)=\"onCalloutClose()\"\n  >\n    <div class=\"mentions-content\">\n      <div class=\"mentions-header\">Mention someone</div>\n      <div class=\"mentions-list\">\n        <button\n          *ngFor=\"let user of getFilteredUsers(); let i = index\"\n          [class.selected]=\"i === selectedUserIndex\"\n          (mouseenter)=\"onUserHover(i)\"\n          (click)=\"selectUser(user)\"\n        >\n          {{ user.name }}\n        </button>\n      </div>\n    </div>\n  </riv-callout>\n</div>\n", styles: [".mentions-container{position:relative;width:100%}.mentions-input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast);overflow-y:auto;white-space:pre-wrap;word-wrap:break-word}.mentions-input:empty:before{content:attr(data-placeholder);color:var(--type-light-disabled);pointer-events:none}.mentions-input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.mentions-input[contenteditable=false]{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:not-allowed}span.mention{color:var(--type-light-link);font-weight:var(--font-weight-heavy);white-space:nowrap;display:inline}span.readonly-mention{font-weight:var(--font-weight-heavy);white-space:nowrap;display:inline}.mentions-input.warning{border-color:var(--surface-dark-caution)}.mentions-input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.mentions-input.large{font:var(--input-large);padding:var(--size-medium)}.mentions-list{margin:0;padding:0;max-height:calc(var(--base-grid-size) * 50);overflow-y:auto;display:flex;flex-direction:column;gap:var(--size-xxsmall)}.mentions-list button{padding:var(--size-small) var(--size-small);border-radius:var(--border-radius-medium);cursor:pointer;transition:background-color .2s;font:var(--input-medium);text-align:left}.mentions-list button:hover,.mentions-list button.selected{background-color:var(--surface-light-2)}.mentions-content{max-height:50vh;min-width:calc(var(--base-grid-size) * 62);max-width:50vw;padding:var(--size-large);display:flex;flex-direction:column}.mentions-header{padding:var(--size-small) var(--size-small);font:var(--input-medium);color:var(--type-light-low-contrast)}.text-content{width:100%;min-height:9em;border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-large);resize:vertical}.editable{border:var(--border-width) solid var(--border-light);background-color:var(--surface-light-0)}.text-content::placeholder{color:var(--type-light-disabled)}.text-content.editable[data-placeholder]:empty:before{content:attr(data-placeholder);color:var(--type-light-disabled)}.text-content:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.text-content:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.text-content.warning{border-color:var(--surface-dark-caution)}.text-content.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.text-content.large{font:var(--input-large);padding:var(--size-medium)}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MentionsInputComponent, decorators: [{
+MentionsInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MentionsInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+MentionsInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MentionsInputComponent, selector: "riv-mentions-input", inputs: { content: "content", users: "users", readonly: "readonly", placeholder: "placeholder" }, outputs: { contentChange: "contentChange" }, viewQueries: [{ propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"mentions-container\" #container>\n  <div\n    *ngIf=\"!readonly\"\n    #input\n    class=\"text-content editable\"\n    contenteditable=\"true\"\n    [attr.data-placeholder]=\"placeholder\"\n    (input)=\"onInput()\"\n    (keydown)=\"onKeyDown($event)\"\n    (paste)=\"onPaste($event)\"\n    (copy)=\"onCopy($event)\"\n    (cut)=\"onCut($event)\"\n  ></div>\n\n  <div *ngIf=\"readonly\" #input class=\"text-content\"></div>\n\n  <riv-callout\n    *ngIf=\"!readonly && mentionsVisible && mentionAnchor\"\n    [anchor]=\"mentionAnchor\"\n    [isModal]=\"true\"\n    [showCaret]=\"false\"\n    [allowedPositions]=\"['bottom-right', 'top-right']\"\n    [theme]=\"'light'\"\n    (close)=\"onCalloutClose()\"\n  >\n    <div class=\"mentions-content\">\n      <div class=\"mentions-header\">Mention someone</div>\n      <div class=\"mentions-list\">\n        <button\n          *ngFor=\"let user of getFilteredUsers(); let i = index\"\n          [class.selected]=\"i === selectedUserIndex\"\n          (mouseenter)=\"onUserHover(i)\"\n          (click)=\"selectUser(user)\"\n        >\n          {{ user.name }}\n        </button>\n      </div>\n    </div>\n  </riv-callout>\n</div>\n", styles: [".mentions-container{position:relative;width:100%}.mentions-input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast);overflow-y:auto;white-space:pre-wrap;word-wrap:break-word}.mentions-input:empty:before{content:attr(data-placeholder);color:var(--type-light-disabled);pointer-events:none}.mentions-input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.mentions-input[contenteditable=false]{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:not-allowed}span.mention{color:var(--type-light-link);font-weight:var(--font-weight-heavy);white-space:nowrap;display:inline}span.readonly-mention{font-weight:var(--font-weight-heavy);white-space:nowrap;display:inline}.mentions-input.warning{border-color:var(--surface-dark-caution)}.mentions-input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.mentions-input.large{font:var(--input-large);padding:var(--size-medium)}.mentions-list{margin:0;padding:0;max-height:calc(var(--base-grid-size) * 50);overflow-y:auto;display:flex;flex-direction:column;gap:var(--size-xxsmall)}.mentions-list button{padding:var(--size-small) var(--size-small);border-radius:var(--border-radius-medium);cursor:pointer;transition:background-color .2s;font:var(--input-medium);text-align:left}.mentions-list button:hover,.mentions-list button.selected{background-color:var(--surface-light-2)}.mentions-content{max-height:50vh;min-width:calc(var(--base-grid-size) * 62);max-width:50vw;padding:var(--size-large);display:flex;flex-direction:column}.mentions-header{padding:var(--size-small) var(--size-small);font:var(--input-medium);color:var(--type-light-low-contrast)}.text-content{width:100%;min-height:9em;border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-large);resize:vertical}.editable{border:var(--border-width) solid var(--border-light);background-color:var(--surface-light-0)}.text-content::placeholder{color:var(--type-light-disabled)}.text-content.editable[data-placeholder]:empty:before{content:attr(data-placeholder);color:var(--type-light-disabled)}.text-content:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.text-content:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.text-content.warning{border-color:var(--surface-dark-caution)}.text-content.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.text-content.large{font:var(--input-large);padding:var(--size-medium)}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MentionsInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-mentions-input', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"mentions-container\" #container>\n  <div\n    *ngIf=\"!readonly\"\n    #input\n    class=\"text-content editable\"\n    contenteditable=\"true\"\n    [attr.data-placeholder]=\"placeholder\"\n    (input)=\"onInput()\"\n    (keydown)=\"onKeyDown($event)\"\n    (paste)=\"onPaste($event)\"\n    (copy)=\"onCopy($event)\"\n    (cut)=\"onCut($event)\"\n  ></div>\n\n  <div *ngIf=\"readonly\" #input class=\"text-content\"></div>\n\n  <riv-callout\n    *ngIf=\"!readonly && mentionsVisible && mentionAnchor\"\n    [anchor]=\"mentionAnchor\"\n    [isModal]=\"true\"\n    [showCaret]=\"false\"\n    [allowedPositions]=\"['bottom-right', 'top-right']\"\n    [theme]=\"'light'\"\n    (close)=\"onCalloutClose()\"\n  >\n    <div class=\"mentions-content\">\n      <div class=\"mentions-header\">Mention someone</div>\n      <div class=\"mentions-list\">\n        <button\n          *ngFor=\"let user of getFilteredUsers(); let i = index\"\n          [class.selected]=\"i === selectedUserIndex\"\n          (mouseenter)=\"onUserHover(i)\"\n          (click)=\"selectUser(user)\"\n        >\n          {{ user.name }}\n        </button>\n      </div>\n    </div>\n  </riv-callout>\n</div>\n", styles: [".mentions-container{position:relative;width:100%}.mentions-input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast);overflow-y:auto;white-space:pre-wrap;word-wrap:break-word}.mentions-input:empty:before{content:attr(data-placeholder);color:var(--type-light-disabled);pointer-events:none}.mentions-input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.mentions-input[contenteditable=false]{color:var(--type-light-disabled);background-color:var(--surface-light-1);cursor:not-allowed}span.mention{color:var(--type-light-link);font-weight:var(--font-weight-heavy);white-space:nowrap;display:inline}span.readonly-mention{font-weight:var(--font-weight-heavy);white-space:nowrap;display:inline}.mentions-input.warning{border-color:var(--surface-dark-caution)}.mentions-input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.mentions-input.large{font:var(--input-large);padding:var(--size-medium)}.mentions-list{margin:0;padding:0;max-height:calc(var(--base-grid-size) * 50);overflow-y:auto;display:flex;flex-direction:column;gap:var(--size-xxsmall)}.mentions-list button{padding:var(--size-small) var(--size-small);border-radius:var(--border-radius-medium);cursor:pointer;transition:background-color .2s;font:var(--input-medium);text-align:left}.mentions-list button:hover,.mentions-list button.selected{background-color:var(--surface-light-2)}.mentions-content{max-height:50vh;min-width:calc(var(--base-grid-size) * 62);max-width:50vw;padding:var(--size-large);display:flex;flex-direction:column}.mentions-header{padding:var(--size-small) var(--size-small);font:var(--input-medium);color:var(--type-light-low-contrast)}.text-content{width:100%;min-height:9em;border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-large);resize:vertical}.editable{border:var(--border-width) solid var(--border-light);background-color:var(--surface-light-0)}.text-content::placeholder{color:var(--type-light-disabled)}.text-content.editable[data-placeholder]:empty:before{content:attr(data-placeholder);color:var(--type-light-disabled)}.text-content:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}.text-content:focus{outline:none;border:var(--border-width) solid var(--purp-60)}.text-content.warning{border-color:var(--surface-dark-caution)}.text-content.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}.text-content.large{font:var(--input-large);padding:var(--size-medium)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { content: [{
@@ -5049,9 +5070,9 @@ class PercentageFieldComponent extends NumberFieldComponent {
         this.align = 'right';
     }
 }
-PercentageFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PercentageFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PercentageFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PercentageFieldComponent, selector: "riv-percentage-field", inputs: { align: "align" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [style.textAlign]=\"align\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n  <span\n    class=\"suffix\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    >%</span\n  >\n</riv-input-label>\n", styles: [":host{display:block;position:relative}.suffix{position:absolute;right:0;font:var(--input-medium);padding:var(--size-small)}.suffix.small{font:var(--input-small)}.suffix.large{font:var(--input-large);padding:var(--size-medium) var(--size-small)}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-xlarge) var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-xlarge) var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium) var(--size-xlarge) var(--size-medium) var(--size-medium);height:var(--input-field-height-large)}\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PercentageFieldComponent, decorators: [{
+PercentageFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PercentageFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PercentageFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PercentageFieldComponent, selector: "riv-percentage-field", inputs: { align: "align" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [style.textAlign]=\"align\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n  <span\n    class=\"suffix\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    >%</span\n  >\n</riv-input-label>\n", styles: [":host{display:block;position:relative}.suffix{position:absolute;right:0;font:var(--input-medium);padding:var(--size-small)}.suffix.small{font:var(--input-small)}.suffix.large{font:var(--input-large);padding:var(--size-medium) var(--size-small)}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-xlarge) var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-xlarge) var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium) var(--size-xlarge) var(--size-medium) var(--size-medium);height:var(--input-field-height-large)}\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PercentageFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-percentage-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    type=\"text\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [style.textAlign]=\"align\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n  <span\n    class=\"suffix\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    >%</span\n  >\n</riv-input-label>\n", styles: [":host{display:block;position:relative}.suffix{position:absolute;right:0;font:var(--input-medium);padding:var(--size-small)}.suffix.small{font:var(--input-small)}.suffix.large{font:var(--input-large);padding:var(--size-medium) var(--size-small)}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-xlarge) var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-xlarge) var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium) var(--size-xlarge) var(--size-medium) var(--size-medium);height:var(--input-field-height-large)}\n"] }]
         }], propDecorators: { align: [{
@@ -5083,9 +5104,9 @@ class PhoneFieldComponent extends TextFieldComponent {
         this.blur.emit(PhoneFieldComponent.clean(this._text));
     }
 }
-PhoneFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-PhoneFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PhoneFieldComponent, selector: "riv-phone-field", inputs: { placeholder: "placeholder", type: "type", maxLength: "maxLength" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [type]=\"type\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PhoneFieldComponent, decorators: [{
+PhoneFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+PhoneFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PhoneFieldComponent, selector: "riv-phone-field", inputs: { placeholder: "placeholder", type: "type", maxLength: "maxLength" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [type]=\"type\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PhoneFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-phone-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [labelActionText]=\"labelActionText\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <input\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [type]=\"type\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.small]=\"size === 'small'\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    autocomplete=\"off\"\n    autocorrect=\"off\"\n    autocapitalize=\"off\"\n    spellcheck=\"false\"\n    (blur)=\"inputBlur()\"\n  />\n</riv-input-label>\n", styles: ["input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:read-only{background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}\n"] }]
         }], propDecorators: { placeholder: [{
@@ -5141,9 +5162,9 @@ class RadioComponent {
         return !this.title && !this.labelTemplate;
     }
 }
-RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: RadioComponent, selector: "riv-radio", inputs: { name: "name", identifier: "identifier", value: "value", checked: "checked", size: "size", title: "title", subtitle: "subtitle", disabled: "disabled", required: "required", state: "state", errorMessage: "errorMessage" }, outputs: { checkedChange: "checkedChange" }, queries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true }], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true, static: true }], ngImport: i0, template: "<label\n  #label\n  class=\"wrapper\"\n  [ngClass]=\"size\"\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isRadioOnly()\"\n>\n  <input\n    #input\n    type=\"radio\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [checked]=\"checked\"\n    [class.error]=\"state === 'error'\"\n    (change)=\"checkedChange.emit(!!input.checked)\"\n  />\n  <ng-container *ngIf=\"labelTemplate; else defaultLabel\">\n    <ng-container\n      *ngTemplateOutlet=\"labelTemplate; context: { checked }\"\n    ></ng-container>\n  </ng-container>\n  <ng-template #defaultLabel>\n    <div *ngIf=\"title\" class=\"label\">\n      <span class=\"title\">{{ title }}</span>\n      <span *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</span>\n    </div>\n  </ng-template>\n</label>\n<riv-validation-message\n  *ngIf=\"errorMessage\"\n  class=\"error-message\"\n  [message]=\"errorMessage\"\n></riv-validation-message>\n", styles: [":host{display:inline-flex;flex-direction:column}.wrapper{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}.wrapper.has-content{padding:var(--size-xsmall);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}.wrapper.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.wrapper.has-content:active:not(.disabled){background-color:var(--surface-light-3)}.wrapper.medium{--outer-size: calc(var(--base-grid-size) * 4);--inner-size: calc(var(--base-grid-size) * 2.5)}.wrapper.large{--outer-size: calc(var(--base-grid-size) * 5);--inner-size: calc(var(--base-grid-size) * 3)}input{margin:0;width:var(--outer-size);height:var(--outer-size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:100%;background-color:var(--surface-light-0);border:var(--border-width) solid var(--border-light)}input:disabled:before{background-color:var(--black-10)}input.error:before{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input:checked:after{content:\"\";width:var(--inner-size);height:var(--inner-size);border-radius:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--brand)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.label{display:flex;flex-direction:column;gap:var(--size-xsmall)}.title{color:var(--type-light-high-contrast)}.wrapper.medium .title{font:var(--input-medium)}.wrapper.large .title{font:var(--input-large);line-height:var(--type-3-line-height-1)}.wrapper.disabled .title{color:var(--type-light-disabled)}.subtitle{color:var(--type-light-low-contrast);font:var(--input-small)}.wrapper.disabled .subtitle{color:var(--type-light-disabled)}.error-message{margin-left:calc(var(--base-grid-size) * 7)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ValidationMessageComponent, selector: "riv-validation-message", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RadioComponent, decorators: [{
+RadioComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+RadioComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: RadioComponent, selector: "riv-radio", inputs: { name: "name", identifier: "identifier", value: "value", checked: "checked", size: "size", title: "title", subtitle: "subtitle", disabled: "disabled", required: "required", state: "state", errorMessage: "errorMessage" }, outputs: { checkedChange: "checkedChange" }, queries: [{ propertyName: "labelTemplate", first: true, predicate: ["label"], descendants: true }], viewQueries: [{ propertyName: "label", first: true, predicate: ["label"], descendants: true, static: true }], ngImport: i0, template: "<label\n  #label\n  class=\"wrapper\"\n  [ngClass]=\"size\"\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isRadioOnly()\"\n>\n  <input\n    #input\n    type=\"radio\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [checked]=\"checked\"\n    [class.error]=\"state === 'error'\"\n    (change)=\"checkedChange.emit(!!input.checked)\"\n  />\n  <ng-container *ngIf=\"labelTemplate; else defaultLabel\">\n    <ng-container\n      *ngTemplateOutlet=\"labelTemplate; context: { checked }\"\n    ></ng-container>\n  </ng-container>\n  <ng-template #defaultLabel>\n    <div *ngIf=\"title\" class=\"label\">\n      <span class=\"title\">{{ title }}</span>\n      <span *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</span>\n    </div>\n  </ng-template>\n</label>\n<riv-validation-message\n  *ngIf=\"errorMessage\"\n  class=\"error-message\"\n  [message]=\"errorMessage\"\n></riv-validation-message>\n", styles: [":host{display:inline-flex;flex-direction:column}.wrapper{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}.wrapper.has-content{padding:var(--size-xsmall);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}.wrapper.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.wrapper.has-content:active:not(.disabled){background-color:var(--surface-light-3)}.wrapper.medium{--outer-size: calc(var(--base-grid-size) * 4);--inner-size: calc(var(--base-grid-size) * 2.5)}.wrapper.large{--outer-size: calc(var(--base-grid-size) * 5);--inner-size: calc(var(--base-grid-size) * 3)}input{margin:0;width:var(--outer-size);height:var(--outer-size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:100%;background-color:var(--surface-light-0);border:var(--border-width) solid var(--border-light)}input:disabled:before{background-color:var(--black-10)}input.error:before{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input:checked:after{content:\"\";width:var(--inner-size);height:var(--inner-size);border-radius:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--brand)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.label{display:flex;flex-direction:column;gap:var(--size-xsmall)}.title{color:var(--type-light-high-contrast)}.wrapper.medium .title{font:var(--input-medium)}.wrapper.large .title{font:var(--input-large);line-height:var(--type-3-line-height-1)}.wrapper.disabled .title{color:var(--type-light-disabled)}.subtitle{color:var(--type-light-low-contrast);font:var(--input-small)}.wrapper.disabled .subtitle{color:var(--type-light-disabled)}.error-message{margin-left:calc(var(--base-grid-size) * 7)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: ValidationMessageComponent, selector: "riv-validation-message", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RadioComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-radio', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  #label\n  class=\"wrapper\"\n  [ngClass]=\"size\"\n  [class.disabled]=\"disabled\"\n  [class.has-content]=\"!isRadioOnly()\"\n>\n  <input\n    #input\n    type=\"radio\"\n    [id]=\"identifier\"\n    [name]=\"name\"\n    [value]=\"value\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [checked]=\"checked\"\n    [class.error]=\"state === 'error'\"\n    (change)=\"checkedChange.emit(!!input.checked)\"\n  />\n  <ng-container *ngIf=\"labelTemplate; else defaultLabel\">\n    <ng-container\n      *ngTemplateOutlet=\"labelTemplate; context: { checked }\"\n    ></ng-container>\n  </ng-container>\n  <ng-template #defaultLabel>\n    <div *ngIf=\"title\" class=\"label\">\n      <span class=\"title\">{{ title }}</span>\n      <span *ngIf=\"subtitle\" class=\"subtitle\">{{ subtitle }}</span>\n    </div>\n  </ng-template>\n</label>\n<riv-validation-message\n  *ngIf=\"errorMessage\"\n  class=\"error-message\"\n  [message]=\"errorMessage\"\n></riv-validation-message>\n", styles: [":host{display:inline-flex;flex-direction:column}.wrapper{flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:flex-start;max-width:100%}.wrapper.has-content{padding:var(--size-xsmall);border-radius:var(--border-radius-xsmall);transition:background-color var(--short-transition)}.wrapper.has-content:hover:not(.disabled){cursor:pointer;background-color:var(--surface-light-2)}.wrapper.has-content:active:not(.disabled){background-color:var(--surface-light-3)}.wrapper.medium{--outer-size: calc(var(--base-grid-size) * 4);--inner-size: calc(var(--base-grid-size) * 2.5)}.wrapper.large{--outer-size: calc(var(--base-grid-size) * 5);--inner-size: calc(var(--base-grid-size) * 3)}input{margin:0;width:var(--outer-size);height:var(--outer-size);position:relative;cursor:pointer;flex-shrink:0;appearance:none}input:before{content:\"\";position:absolute;inset:0;border-radius:100%;background-color:var(--surface-light-0);border:var(--border-width) solid var(--border-light)}input:disabled:before{background-color:var(--black-10)}input.error:before{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input:checked:after{content:\"\";width:var(--inner-size);height:var(--inner-size);border-radius:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background-color:var(--brand)}input:disabled{cursor:default}input:disabled:after{background-color:var(--black-20)}input:disabled:checked:after,input:disabled:indeterminate:after{background-color:var(--black-40)}.label{display:flex;flex-direction:column;gap:var(--size-xsmall)}.title{color:var(--type-light-high-contrast)}.wrapper.medium .title{font:var(--input-medium)}.wrapper.large .title{font:var(--input-large);line-height:var(--type-3-line-height-1)}.wrapper.disabled .title{color:var(--type-light-disabled)}.subtitle{color:var(--type-light-low-contrast);font:var(--input-small)}.wrapper.disabled .subtitle{color:var(--type-light-disabled)}.error-message{margin-left:calc(var(--base-grid-size) * 7)}\n"] }]
         }], propDecorators: { name: [{
@@ -5309,9 +5330,9 @@ class SearchSelectComponent {
         return !!this.searchText.trim();
     }
 }
-SearchSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-SearchSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SearchSelectComponent, selector: "riv-search-select", inputs: { options: "options", selected: "selected", placeholder: "placeholder", addNewLabel: "addNewLabel", newTooltip: "newTooltip", size: "size", disabled: "disabled", label: "label", help: "help", required: "required", state: "state", errorMessage: "errorMessage", optionTemplate: "optionTemplate", chipTemplate: "chipTemplate" }, outputs: { selectedChange: "selectedChange", addNew: "addNew" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage ?? ''\"\n>\n  <div class=\"search-select\" [class.disabled]=\"disabled\">\n    <div #trigger class=\"input-wrapper\">\n      <input\n        #searchInput\n        type=\"text\"\n        [placeholder]=\"placeholder\"\n        [value]=\"searchText\"\n        [disabled]=\"disabled\"\n        [class.small]=\"size === 'small'\"\n        [class.large]=\"size === 'large'\"\n        [class.warning]=\"state === 'warning'\"\n        [class.error]=\"state === 'error'\"\n        (input)=\"onSearchInput(searchInput.value)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeydown($event)\"\n        autocomplete=\"off\"\n      />\n    </div>\n\n    <div *ngIf=\"selected.length > 0\" class=\"chips\">\n      <div\n        *ngFor=\"let option of selected; trackBy: trackByOption\"\n        class=\"chip\"\n        [class.new]=\"option.new\"\n        [class.existing]=\"!option.new\"\n        [class.small]=\"size === 'small'\"\n        [class.large]=\"size === 'large'\"\n        [rivTooltip]=\"option.new && newTooltip ? newTooltip : undefined\"\n      >\n        <button\n          rivButton\n          [variant]=\"'ghost'\"\n          [icon]=\"'X'\"\n          [size]=\"'xsmall'\"\n          [disabled]=\"disabled\"\n          (click)=\"removeOption(option)\"\n        ></button>\n        <ng-container *ngIf=\"chipTemplate; else defaultChip\">\n          <ng-container\n            *ngTemplateOutlet=\"chipTemplate; context: { option: option }\"\n          ></ng-container>\n        </ng-container>\n        <ng-template #defaultChip>\n          <span class=\"chip-text\">{{ option.title }}</span>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"isOpen\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"trigger\"\n      [theme]=\"'light'\"\n      [showCaret]=\"false\"\n      [preferredPosition]=\"'bottom-right'\"\n      [allowedPositions]=\"['bottom-right']\"\n      (close)=\"close()\"\n    >\n      <div class=\"dropdown\">\n        <button\n          *ngIf=\"showAddNew\"\n          type=\"button\"\n          class=\"dropdown-option add-new\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onAddNew()\"\n        >\n          <riv-icon [name]=\"'Plus'\" [size]=\"16\"></riv-icon>\n          <span>{{ addNewLabel }} \"{{ searchText }}\"</span>\n        </button>\n\n        <div *ngIf=\"filteredOptions.length > 0\" class=\"options-list\">\n          <button\n            *ngFor=\"let option of filteredOptions; trackBy: trackByOption\"\n            type=\"button\"\n            class=\"dropdown-option\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"selectOption(option)\"\n          >\n            <ng-container *ngIf=\"optionTemplate; else defaultOption\">\n              <ng-container\n                *ngTemplateOutlet=\"optionTemplate; context: { option: option }\"\n              ></ng-container>\n            </ng-container>\n            <ng-template #defaultOption>\n              <span class=\"option-title\">{{ option.title }}</span>\n              <span *ngIf=\"option.subtitle\" class=\"option-subtitle\">{{\n                option.subtitle\n              }}</span>\n            </ng-template>\n          </button>\n        </div>\n\n        <div\n          *ngIf=\"filteredOptions.length === 0 && !showAddNew\"\n          class=\"no-results\"\n        >\n          No results found\n        </div>\n      </div>\n    </riv-callout>\n  </ng-container>\n</riv-input-label>\n", styles: [":host{display:block}.search-select{display:flex;flex-direction:column;gap:var(--size-small)}.search-select.disabled{opacity:.6;pointer-events:none}.input-wrapper{position:relative}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);padding-right:calc(var(--size-xlarge) + var(--size-xsmall));height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}.chips{display:flex;flex-wrap:wrap;gap:var(--size-small)}.chip{display:inline-flex;align-items:center;gap:var(--size-xsmall);border-radius:var(--border-radius-medium);padding:var(--size-xsmall) var(--size-medium) var(--size-xsmall) var(--size-small);font:var(--title-02);color:var(--type-light-high-contrast);max-width:100%}.chip.existing{background-color:var(--purp-10);border:var(--border-width) solid var(--border-light)}.chip.new{border:var(--border-width) dashed var(--border-light)}.chip.small{font:var(--input-small);padding:calc(var(--size-xsmall) / 2) var(--size-small)}.chip.large{font:var(--input-large);padding:var(--size-small) var(--size-medium)}.chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown{min-width:200px;max-width:400px;max-height:300px;overflow-y:auto;padding:var(--size-large)}.dropdown-option{display:flex;align-items:center;gap:var(--size-small);width:100%;padding:var(--size-small) var(--size-xsmall);border-radius:var(--border-radius-medium);font:var(--input-medium);text-align:left;cursor:pointer;transition:background-color var(--short-transition)}.dropdown-option:hover{background-color:var(--surface-light-2)}.dropdown-option:active{background-color:var(--surface-light-3)}.dropdown-option.add-new{color:var(--purp-80);font-weight:var(--font-weight-heavy)}.dropdown-option.add-new riv-icon{color:var(--purp-80)}.options-list{display:flex;flex-direction:column;gap:var(--size-xsmall)}.option-title{color:var(--type-light-high-contrast);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-subtitle{color:var(--type-light-low-contrast);margin-left:var(--size-xsmall);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.no-results{padding:var(--size-medium);text-align:center;color:var(--type-light-low-contrast);font:var(--input-medium)}\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", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchSelectComponent, decorators: [{
+SearchSelectComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+SearchSelectComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SearchSelectComponent, selector: "riv-search-select", inputs: { options: "options", selected: "selected", placeholder: "placeholder", addNewLabel: "addNewLabel", newTooltip: "newTooltip", size: "size", disabled: "disabled", label: "label", help: "help", required: "required", state: "state", errorMessage: "errorMessage", optionTemplate: "optionTemplate", chipTemplate: "chipTemplate" }, outputs: { selectedChange: "selectedChange", addNew: "addNew" }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage ?? ''\"\n>\n  <div class=\"search-select\" [class.disabled]=\"disabled\">\n    <div #trigger class=\"input-wrapper\">\n      <input\n        #searchInput\n        type=\"text\"\n        [placeholder]=\"placeholder\"\n        [value]=\"searchText\"\n        [disabled]=\"disabled\"\n        [class.small]=\"size === 'small'\"\n        [class.large]=\"size === 'large'\"\n        [class.warning]=\"state === 'warning'\"\n        [class.error]=\"state === 'error'\"\n        (input)=\"onSearchInput(searchInput.value)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeydown($event)\"\n        autocomplete=\"off\"\n      />\n    </div>\n\n    <div *ngIf=\"selected.length > 0\" class=\"chips\">\n      <div\n        *ngFor=\"let option of selected; trackBy: trackByOption\"\n        class=\"chip\"\n        [class.new]=\"option.new\"\n        [class.existing]=\"!option.new\"\n        [class.small]=\"size === 'small'\"\n        [class.large]=\"size === 'large'\"\n        [rivTooltip]=\"option.new && newTooltip ? newTooltip : undefined\"\n      >\n        <button\n          rivButton\n          [variant]=\"'ghost'\"\n          [icon]=\"'X'\"\n          [size]=\"'xsmall'\"\n          [disabled]=\"disabled\"\n          (click)=\"removeOption(option)\"\n        ></button>\n        <ng-container *ngIf=\"chipTemplate; else defaultChip\">\n          <ng-container\n            *ngTemplateOutlet=\"chipTemplate; context: { option: option }\"\n          ></ng-container>\n        </ng-container>\n        <ng-template #defaultChip>\n          <span class=\"chip-text\">{{ option.title }}</span>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"isOpen\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"trigger\"\n      [theme]=\"'light'\"\n      [showCaret]=\"false\"\n      [preferredPosition]=\"'bottom-right'\"\n      [allowedPositions]=\"['bottom-right']\"\n      (close)=\"close()\"\n    >\n      <div class=\"dropdown\">\n        <button\n          *ngIf=\"showAddNew\"\n          type=\"button\"\n          class=\"dropdown-option add-new\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onAddNew()\"\n        >\n          <riv-icon [name]=\"'Plus'\" [size]=\"16\"></riv-icon>\n          <span>{{ addNewLabel }} \"{{ searchText }}\"</span>\n        </button>\n\n        <div *ngIf=\"filteredOptions.length > 0\" class=\"options-list\">\n          <button\n            *ngFor=\"let option of filteredOptions; trackBy: trackByOption\"\n            type=\"button\"\n            class=\"dropdown-option\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"selectOption(option)\"\n          >\n            <ng-container *ngIf=\"optionTemplate; else defaultOption\">\n              <ng-container\n                *ngTemplateOutlet=\"optionTemplate; context: { option: option }\"\n              ></ng-container>\n            </ng-container>\n            <ng-template #defaultOption>\n              <span class=\"option-title\">{{ option.title }}</span>\n              <span *ngIf=\"option.subtitle\" class=\"option-subtitle\">{{\n                option.subtitle\n              }}</span>\n            </ng-template>\n          </button>\n        </div>\n\n        <div\n          *ngIf=\"filteredOptions.length === 0 && !showAddNew\"\n          class=\"no-results\"\n        >\n          No results found\n        </div>\n      </div>\n    </riv-callout>\n  </ng-container>\n</riv-input-label>\n", styles: [":host{display:block}.search-select{display:flex;flex-direction:column;gap:var(--size-small)}.search-select.disabled{opacity:.6;pointer-events:none}.input-wrapper{position:relative}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);padding-right:calc(var(--size-xlarge) + var(--size-xsmall));height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}.chips{display:flex;flex-wrap:wrap;gap:var(--size-small)}.chip{display:inline-flex;align-items:center;gap:var(--size-xsmall);border-radius:var(--border-radius-medium);padding:var(--size-xsmall) var(--size-medium) var(--size-xsmall) var(--size-small);font:var(--title-02);color:var(--type-light-high-contrast);max-width:100%}.chip.existing{background-color:var(--purp-10);border:var(--border-width) solid var(--border-light)}.chip.new{border:var(--border-width) dashed var(--border-light)}.chip.small{font:var(--input-small);padding:calc(var(--size-xsmall) / 2) var(--size-small)}.chip.large{font:var(--input-large);padding:var(--size-small) var(--size-medium)}.chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown{min-width:200px;max-width:400px;max-height:300px;overflow-y:auto;padding:var(--size-large)}.dropdown-option{display:flex;align-items:center;gap:var(--size-small);width:100%;padding:var(--size-small) var(--size-xsmall);border-radius:var(--border-radius-medium);font:var(--input-medium);text-align:left;cursor:pointer;transition:background-color var(--short-transition)}.dropdown-option:hover{background-color:var(--surface-light-2)}.dropdown-option:active{background-color:var(--surface-light-3)}.dropdown-option.add-new{color:var(--purp-80);font-weight:var(--font-weight-heavy)}.dropdown-option.add-new riv-icon{color:var(--purp-80)}.options-list{display:flex;flex-direction:column;gap:var(--size-xsmall)}.option-title{color:var(--type-light-high-contrast);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-subtitle{color:var(--type-light-low-contrast);margin-left:var(--size-xsmall);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.no-results{padding:var(--size-medium);text-align:center;color:var(--type-light-low-contrast);font:var(--input-medium)}\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", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SearchSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-search-select', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage ?? ''\"\n>\n  <div class=\"search-select\" [class.disabled]=\"disabled\">\n    <div #trigger class=\"input-wrapper\">\n      <input\n        #searchInput\n        type=\"text\"\n        [placeholder]=\"placeholder\"\n        [value]=\"searchText\"\n        [disabled]=\"disabled\"\n        [class.small]=\"size === 'small'\"\n        [class.large]=\"size === 'large'\"\n        [class.warning]=\"state === 'warning'\"\n        [class.error]=\"state === 'error'\"\n        (input)=\"onSearchInput(searchInput.value)\"\n        (focus)=\"onInputFocus()\"\n        (blur)=\"onInputBlur($event)\"\n        (keydown)=\"onKeydown($event)\"\n        autocomplete=\"off\"\n      />\n    </div>\n\n    <div *ngIf=\"selected.length > 0\" class=\"chips\">\n      <div\n        *ngFor=\"let option of selected; trackBy: trackByOption\"\n        class=\"chip\"\n        [class.new]=\"option.new\"\n        [class.existing]=\"!option.new\"\n        [class.small]=\"size === 'small'\"\n        [class.large]=\"size === 'large'\"\n        [rivTooltip]=\"option.new && newTooltip ? newTooltip : undefined\"\n      >\n        <button\n          rivButton\n          [variant]=\"'ghost'\"\n          [icon]=\"'X'\"\n          [size]=\"'xsmall'\"\n          [disabled]=\"disabled\"\n          (click)=\"removeOption(option)\"\n        ></button>\n        <ng-container *ngIf=\"chipTemplate; else defaultChip\">\n          <ng-container\n            *ngTemplateOutlet=\"chipTemplate; context: { option: option }\"\n          ></ng-container>\n        </ng-container>\n        <ng-template #defaultChip>\n          <span class=\"chip-text\">{{ option.title }}</span>\n        </ng-template>\n      </div>\n    </div>\n  </div>\n\n  <ng-container *ngIf=\"isOpen\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"trigger\"\n      [theme]=\"'light'\"\n      [showCaret]=\"false\"\n      [preferredPosition]=\"'bottom-right'\"\n      [allowedPositions]=\"['bottom-right']\"\n      (close)=\"close()\"\n    >\n      <div class=\"dropdown\">\n        <button\n          *ngIf=\"showAddNew\"\n          type=\"button\"\n          class=\"dropdown-option add-new\"\n          (mousedown)=\"$event.preventDefault()\"\n          (click)=\"onAddNew()\"\n        >\n          <riv-icon [name]=\"'Plus'\" [size]=\"16\"></riv-icon>\n          <span>{{ addNewLabel }} \"{{ searchText }}\"</span>\n        </button>\n\n        <div *ngIf=\"filteredOptions.length > 0\" class=\"options-list\">\n          <button\n            *ngFor=\"let option of filteredOptions; trackBy: trackByOption\"\n            type=\"button\"\n            class=\"dropdown-option\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"selectOption(option)\"\n          >\n            <ng-container *ngIf=\"optionTemplate; else defaultOption\">\n              <ng-container\n                *ngTemplateOutlet=\"optionTemplate; context: { option: option }\"\n              ></ng-container>\n            </ng-container>\n            <ng-template #defaultOption>\n              <span class=\"option-title\">{{ option.title }}</span>\n              <span *ngIf=\"option.subtitle\" class=\"option-subtitle\">{{\n                option.subtitle\n              }}</span>\n            </ng-template>\n          </button>\n        </div>\n\n        <div\n          *ngIf=\"filteredOptions.length === 0 && !showAddNew\"\n          class=\"no-results\"\n        >\n          No results found\n        </div>\n      </div>\n    </riv-callout>\n  </ng-container>\n</riv-input-label>\n", styles: [":host{display:block}.search-select{display:flex;flex-direction:column;gap:var(--size-small)}.search-select.disabled{opacity:.6;pointer-events:none}.input-wrapper{position:relative}input{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-small) var(--size-medium);padding-right:calc(var(--size-xlarge) + var(--size-xsmall));height:var(--input-field-height-medium)}input::placeholder{color:var(--type-light-disabled)}input:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}input:focus{outline:none;border:var(--border-width) solid var(--purp-60)}input.warning{border-color:var(--surface-dark-caution)}input.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}input.small{font:var(--input-small);padding:var(--size-small) var(--size-medium);height:var(--input-field-height-small)}input.large{font:var(--input-large);padding:var(--size-medium);height:var(--input-field-height-large)}.chips{display:flex;flex-wrap:wrap;gap:var(--size-small)}.chip{display:inline-flex;align-items:center;gap:var(--size-xsmall);border-radius:var(--border-radius-medium);padding:var(--size-xsmall) var(--size-medium) var(--size-xsmall) var(--size-small);font:var(--title-02);color:var(--type-light-high-contrast);max-width:100%}.chip.existing{background-color:var(--purp-10);border:var(--border-width) solid var(--border-light)}.chip.new{border:var(--border-width) dashed var(--border-light)}.chip.small{font:var(--input-small);padding:calc(var(--size-xsmall) / 2) var(--size-small)}.chip.large{font:var(--input-large);padding:var(--size-small) var(--size-medium)}.chip-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dropdown{min-width:200px;max-width:400px;max-height:300px;overflow-y:auto;padding:var(--size-large)}.dropdown-option{display:flex;align-items:center;gap:var(--size-small);width:100%;padding:var(--size-small) var(--size-xsmall);border-radius:var(--border-radius-medium);font:var(--input-medium);text-align:left;cursor:pointer;transition:background-color var(--short-transition)}.dropdown-option:hover{background-color:var(--surface-light-2)}.dropdown-option:active{background-color:var(--surface-light-3)}.dropdown-option.add-new{color:var(--purp-80);font-weight:var(--font-weight-heavy)}.dropdown-option.add-new riv-icon{color:var(--purp-80)}.options-list{display:flex;flex-direction:column;gap:var(--size-xsmall)}.option-title{color:var(--type-light-high-contrast);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.option-subtitle{color:var(--type-light-low-contrast);margin-left:var(--size-xsmall);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.no-results{padding:var(--size-medium);text-align:center;color:var(--type-light-low-contrast);font:var(--input-medium)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { options: [{
@@ -5364,9 +5385,9 @@ class SwitchCheckboxComponent extends CheckboxComponent {
         this.size = 'medium';
     }
 }
-SwitchCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SwitchCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-SwitchCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SwitchCheckboxComponent, selector: "riv-switch-checkbox", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: "<label\n  #label\n  [ngClass]=\"size\"\n  [class.checked]=\"value\"\n  [class.disabled]=\"disabled\"\n>\n  <input\n    #input\n    type=\"checkbox\"\n    [name]=\"name\"\n    [id]=\"identifier\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    [attr.aria-label]=\"isCheckboxOnly() ? ariaLabel : null\"\n    (change)=\"valueChange.emit(!!input.checked)\"\n  />\n  <ng-content></ng-content>\n</label>\n", styles: [":host{display:inline-flex}label{position:relative;flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:center;--transition-params: .15s cubic-bezier(.52, .19, .98, .43)}label.medium{--slide-width: calc(var(--base-grid-size) * 12);--switch-size: calc(var(--base-grid-size) * 6)}label.small{--slide-width: calc(var(--base-grid-size) * 8);--switch-size: calc(var(--base-grid-size) * 4)}label:not(.disabled){cursor:pointer}label:before{content:\"\";display:inline-block;box-sizing:border-box;width:var(--slide-width);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light-blend);border-radius:var(--switch-size);transition:background-color var(--transition-params)}label.disabled:before{background-color:var(--black-20)}label.checked:before{background-color:var(--purp-60)}label.disabled.checked:before{background-color:var(--black-60)}label:after{content:\"\";position:absolute;width:var(--switch-size);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light-blend);border-radius:100%;box-shadow:var(--depth-1);transition:transform var(--transition-params)}label.checked:after{transform:translate(calc(var(--slide-width) - var(--switch-size)))}input{position:absolute;opacity:0;z-index:-1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SwitchCheckboxComponent, decorators: [{
+SwitchCheckboxComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SwitchCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+SwitchCheckboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SwitchCheckboxComponent, selector: "riv-switch-checkbox", inputs: { size: "size" }, usesInheritance: true, ngImport: i0, template: "<label\n  #label\n  [ngClass]=\"size\"\n  [class.checked]=\"value\"\n  [class.disabled]=\"disabled\"\n>\n  <input\n    #input\n    type=\"checkbox\"\n    [name]=\"name\"\n    [id]=\"identifier\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    [attr.aria-label]=\"isCheckboxOnly() ? ariaLabel : null\"\n    (change)=\"valueChange.emit(!!input.checked)\"\n  />\n  <ng-content></ng-content>\n</label>\n", styles: [":host{display:inline-flex}label{position:relative;flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:center;--transition-params: .15s cubic-bezier(.52, .19, .98, .43)}label.medium{--slide-width: calc(var(--base-grid-size) * 12);--switch-size: calc(var(--base-grid-size) * 6)}label.small{--slide-width: calc(var(--base-grid-size) * 8);--switch-size: calc(var(--base-grid-size) * 4)}label:not(.disabled){cursor:pointer}label:before{content:\"\";display:inline-block;box-sizing:border-box;width:var(--slide-width);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light-blend);border-radius:var(--switch-size);transition:background-color var(--transition-params)}label.disabled:before{background-color:var(--black-20)}label.checked:before{background-color:var(--purp-60)}label.disabled.checked:before{background-color:var(--black-60)}label:after{content:\"\";position:absolute;width:var(--switch-size);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light-blend);border-radius:100%;box-shadow:var(--depth-1);transition:transform var(--transition-params)}label.checked:after{transform:translate(calc(var(--slide-width) - var(--switch-size)))}input{position:absolute;opacity:0;z-index:-1}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SwitchCheckboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-switch-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, template: "<label\n  #label\n  [ngClass]=\"size\"\n  [class.checked]=\"value\"\n  [class.disabled]=\"disabled\"\n>\n  <input\n    #input\n    type=\"checkbox\"\n    [name]=\"name\"\n    [id]=\"identifier\"\n    [checked]=\"value\"\n    [disabled]=\"disabled\"\n    [required]=\"required\"\n    [attr.aria-label]=\"isCheckboxOnly() ? ariaLabel : null\"\n    (change)=\"valueChange.emit(!!input.checked)\"\n  />\n  <ng-content></ng-content>\n</label>\n", styles: [":host{display:inline-flex}label{position:relative;flex-grow:1;display:inline-flex;gap:var(--size-small);align-items:center;--transition-params: .15s cubic-bezier(.52, .19, .98, .43)}label.medium{--slide-width: calc(var(--base-grid-size) * 12);--switch-size: calc(var(--base-grid-size) * 6)}label.small{--slide-width: calc(var(--base-grid-size) * 8);--switch-size: calc(var(--base-grid-size) * 4)}label:not(.disabled){cursor:pointer}label:before{content:\"\";display:inline-block;box-sizing:border-box;width:var(--slide-width);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light-blend);border-radius:var(--switch-size);transition:background-color var(--transition-params)}label.disabled:before{background-color:var(--black-20)}label.checked:before{background-color:var(--purp-60)}label.disabled.checked:before{background-color:var(--black-60)}label:after{content:\"\";position:absolute;width:var(--switch-size);height:var(--switch-size);background-color:var(--white-100);border:var(--border-width) solid var(--border-light-blend);border-radius:100%;box-shadow:var(--depth-1);transition:transform var(--transition-params)}label.checked:after{transform:translate(calc(var(--slide-width) - var(--switch-size)))}input{position:absolute;opacity:0;z-index:-1}\n"] }]
         }], propDecorators: { size: [{
@@ -5383,9 +5404,9 @@ class TextareaFieldComponent extends TextFieldComponent {
         this.type = 'text';
     }
 }
-TextareaFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextareaFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
-TextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TextareaFieldComponent, selector: "riv-textarea-field", inputs: { rows: "rows" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <textarea\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [rows]=\"rows\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    (blur)=\"inputBlur()\"\n  ></textarea>\n</riv-input-label>\n", styles: ["textarea{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-large);resize:vertical}textarea::placeholder{color:var(--type-light-disabled)}textarea:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}textarea:read-only{background-color:var(--surface-light-1)}textarea:focus{outline:none;border:var(--border-width) solid var(--purp-60)}textarea.warning{border-color:var(--surface-dark-caution)}textarea.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}textarea.large{font:var(--input-large);padding:var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TextareaFieldComponent, decorators: [{
+TextareaFieldComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TextareaFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
+TextareaFieldComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TextareaFieldComponent, selector: "riv-textarea-field", inputs: { rows: "rows" }, usesInheritance: true, ngImport: i0, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <textarea\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [rows]=\"rows\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    (blur)=\"inputBlur()\"\n  ></textarea>\n</riv-input-label>\n", styles: ["textarea{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-large);resize:vertical}textarea::placeholder{color:var(--type-light-disabled)}textarea:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}textarea:read-only{background-color:var(--surface-light-1)}textarea:focus{outline:none;border:var(--border-width) solid var(--purp-60)}textarea.warning{border-color:var(--surface-dark-caution)}textarea.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}textarea.large{font:var(--input-large);padding:var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: InputLabelComponent, selector: "riv-input-label", inputs: ["label", "help", "required", "labelActionText", "errorMessage", "state"], outputs: ["labelAction"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TextareaFieldComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-textarea-field', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-input-label\n  [label]=\"label\"\n  [help]=\"help\"\n  [required]=\"required\"\n  [state]=\"state\"\n  [errorMessage]=\"errorMessage\"\n  [labelActionText]=\"labelActionText\"\n  (labelAction)=\"labelAction.emit($event)\"\n>\n  <textarea\n    #input\n    [name]=\"name\"\n    [placeholder]=\"placeholder\"\n    [required]=\"required\"\n    [disabled]=\"disabled\"\n    [readonly]=\"readonly\"\n    [rows]=\"rows\"\n    [value]=\"text\"\n    [attr.aria-label]=\"label || null\"\n    (input)=\"text = input.value\"\n    [class.large]=\"size === 'large'\"\n    [attr.maxlength]=\"maxLength\"\n    [attr.minlength]=\"minLength\"\n    [class.warning]=\"state === 'warning'\"\n    [class.error]=\"state === 'error'\"\n    [riv-auto-focus]=\"autoFocus\"\n    (blur)=\"inputBlur()\"\n  ></textarea>\n</riv-input-label>\n", styles: ["textarea{width:100%;border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-small);font:var(--input-medium);color:var(--type-light-high-contrast);padding:var(--size-large);resize:vertical}textarea::placeholder{color:var(--type-light-disabled)}textarea:disabled{color:var(--type-light-disabled);background-color:var(--surface-light-1)}textarea:read-only{background-color:var(--surface-light-1)}textarea:focus{outline:none;border:var(--border-width) solid var(--purp-60)}textarea.warning{border-color:var(--surface-dark-caution)}textarea.error{border-color:var(--surface-dark-danger);box-shadow:inset 0 0 0 var(--border-width-large) var(--surface-dark-danger)}textarea.large{font:var(--input-large);padding:var(--size-medium)}\n"] }]
         }], propDecorators: { rows: [{
@@ -5431,9 +5452,9 @@ class PageHeaderComponent {
         return this.backTo != null;
     }
 }
-PageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-PageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PageHeaderComponent, selector: "riv-page-header", inputs: { title: "title", backTo: "backTo" }, outputs: { back: "back" }, host: { properties: { "class.back": "this.isBack" } }, ngImport: i0, template: "<div class=\"leading\">\n  <ng-container *ngIf=\"isBack; else titleTemplate\">\n    <button class=\"back-button\" type=\"button\" (click)=\"back.emit()\">\n      <riv-icon name=\"ArrowLeftCircle\" [size]=\"16\"></riv-icon>\n      <span>Back to {{ backTo }}</span>\n    </button>\n  </ng-container>\n  <ng-template #titleTemplate>\n    <h1 class=\"title\">{{ title }}</h1>\n  </ng-template>\n</div>\n\n<div class=\"actions\">\n  <ng-content select=\"[actions]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--size-large);min-height:calc(var(--base-grid-size) * 11);padding:var(--size-medium) var(--size-large);font:var(--body-medium)}:host.back{border-bottom:var(--border-width) solid var(--border-light)}.leading{min-width:0}.title{margin:0;font:var(--title-03);color:var(--type-light-high-contrast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.back-button{display:inline-flex;align-items:center;gap:var(--size-xsmall);padding:0;border:none;background:none;font:var(--body-medium);color:var(--type-light-high-contrast);cursor:pointer}.actions{display:flex;align-items:center;gap:var(--size-large);flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PageHeaderComponent, decorators: [{
+PageHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+PageHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PageHeaderComponent, selector: "riv-page-header", inputs: { title: "title", backTo: "backTo" }, outputs: { back: "back" }, host: { properties: { "class.back": "this.isBack" } }, ngImport: i0, template: "<div class=\"leading\">\n  <ng-container *ngIf=\"isBack; else titleTemplate\">\n    <button class=\"back-button\" type=\"button\" (click)=\"back.emit()\">\n      <riv-icon name=\"ArrowLeftCircle\" [size]=\"16\"></riv-icon>\n      <span>Back to {{ backTo }}</span>\n    </button>\n  </ng-container>\n  <ng-template #titleTemplate>\n    <h1 class=\"title\">{{ title }}</h1>\n  </ng-template>\n</div>\n\n<div class=\"actions\">\n  <ng-content select=\"[actions]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--size-large);min-height:calc(var(--base-grid-size) * 11);padding:var(--size-medium) var(--size-large);font:var(--body-medium)}:host.back{border-bottom:var(--border-width) solid var(--border-light)}.leading{min-width:0}.title{margin:0;font:var(--title-03);color:var(--type-light-high-contrast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.back-button{display:inline-flex;align-items:center;gap:var(--size-xsmall);padding:0;border:none;background:none;font:var(--body-medium);color:var(--type-light-high-contrast);cursor:pointer}.actions{display:flex;align-items:center;gap:var(--size-large);flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-page-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"leading\">\n  <ng-container *ngIf=\"isBack; else titleTemplate\">\n    <button class=\"back-button\" type=\"button\" (click)=\"back.emit()\">\n      <riv-icon name=\"ArrowLeftCircle\" [size]=\"16\"></riv-icon>\n      <span>Back to {{ backTo }}</span>\n    </button>\n  </ng-container>\n  <ng-template #titleTemplate>\n    <h1 class=\"title\">{{ title }}</h1>\n  </ng-template>\n</div>\n\n<div class=\"actions\">\n  <ng-content select=\"[actions]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:center;justify-content:space-between;gap:var(--size-large);min-height:calc(var(--base-grid-size) * 11);padding:var(--size-medium) var(--size-large);font:var(--body-medium)}:host.back{border-bottom:var(--border-width) solid var(--border-light)}.leading{min-width:0}.title{margin:0;font:var(--title-03);color:var(--type-light-high-contrast);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.back-button{display:inline-flex;align-items:center;gap:var(--size-xsmall);padding:0;border:none;background:none;font:var(--body-medium);color:var(--type-light-high-contrast);cursor:pointer}.actions{display:flex;align-items:center;gap:var(--size-large);flex-shrink:0}\n"] }]
         }], propDecorators: { title: [{
@@ -5449,9 +5470,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class TabComponent {
 }
-TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TabComponent, selector: "[riv-tab]", inputs: { current: "current" }, host: { properties: { "class.current": "this.current" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{font:var(--input-medium);color:var(--type-light-low-contrast);background-color:var(--surface-light-1);border:var(--border-width) solid var(--border-light);border-bottom:none;border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-large) var(--size-small) 0;cursor:pointer;transition:background-color var(--medium-transition);display:flex;justify-content:center;align-items:center;position:relative}:host:hover{background-color:var(--surface-light-2)}:host:active{background-color:var(--surface-light-3)}:host:not(:first-child){margin-left:calc(var(--border-width) * -1)}:host.current{color:var(--type-light-link-hover);background-color:var(--surface-light-0);border-bottom:var(--border-width) solid var(--surface-light-0);margin-bottom:calc(var(--border-width) * -1);z-index:1}:host.current:active{border:var(--border-width) solid var(--purp-80)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TabComponent, decorators: [{
+TabComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TabComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabComponent, selector: "[riv-tab]", inputs: { current: "current" }, host: { properties: { "class.current": "this.current" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{font:var(--input-medium);color:var(--type-light-low-contrast);background-color:var(--surface-light-1);border:var(--border-width) solid var(--border-light);border-bottom:none;border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-large) var(--size-small) 0;cursor:pointer;transition:background-color var(--medium-transition);display:flex;justify-content:center;align-items:center;position:relative}:host:hover{background-color:var(--surface-light-2)}:host:active{background-color:var(--surface-light-3)}:host:not(:first-child){margin-left:calc(var(--border-width) * -1)}:host.current{color:var(--type-light-link-hover);background-color:var(--surface-light-0);border-bottom:var(--border-width) solid var(--surface-light-0);margin-bottom:calc(var(--border-width) * -1);z-index:1}:host.current:active{border:var(--border-width) solid var(--purp-80)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabComponent, decorators: [{
             type: Component,
             args: [{ selector: '[riv-tab]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{font:var(--input-medium);color:var(--type-light-low-contrast);background-color:var(--surface-light-1);border:var(--border-width) solid var(--border-light);border-bottom:none;border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-large) var(--size-small) 0;cursor:pointer;transition:background-color var(--medium-transition);display:flex;justify-content:center;align-items:center;position:relative}:host:hover{background-color:var(--surface-light-2)}:host:active{background-color:var(--surface-light-3)}:host:not(:first-child){margin-left:calc(var(--border-width) * -1)}:host.current{color:var(--type-light-link-hover);background-color:var(--surface-light-0);border-bottom:var(--border-width) solid var(--surface-light-0);margin-bottom:calc(var(--border-width) * -1);z-index:1}:host.current:active{border:var(--border-width) solid var(--purp-80)}\n"] }]
         }], propDecorators: { current: [{
@@ -5463,9 +5484,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class TabsComponent {
 }
-TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TabsComponent, selector: "riv-tabs", ngImport: i0, template: "<div class=\"container\">\n  <ng-content></ng-content>\n</div>\n", styles: [".container{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,calc(var(--base-grid-size) * 81));justify-content:start;border-bottom:var(--border-width) solid var(--border-light)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TabsComponent, decorators: [{
+TabsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TabsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TabsComponent, selector: "riv-tabs", ngImport: i0, template: "<div class=\"container\">\n  <ng-content></ng-content>\n</div>\n", styles: [".container{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,calc(var(--base-grid-size) * 81));justify-content:start;border-bottom:var(--border-width) solid var(--border-light)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"container\">\n  <ng-content></ng-content>\n</div>\n", styles: [".container{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,calc(var(--base-grid-size) * 81));justify-content:start;border-bottom:var(--border-width) solid var(--border-light)}\n"] }]
         }] });
@@ -5971,8 +5992,8 @@ class OverlayOutletComponent {
         this.trackOverlay = (_, { key }) => key;
     }
 }
-OverlayOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OverlayOutletComponent, deps: [{ token: OverlayService }], target: i0.ɵɵFactoryTarget.Component });
-OverlayOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: OverlayOutletComponent, selector: "riv-overlay-outlet", ngImport: i0, template: "<ng-container\n  *ngFor=\"\n    let overlay of overlayService.overlays | async | keyvalue;\n    trackBy: trackOverlay\n  \"\n>\n  <div class=\"overlay-container\" @animate>\n    <ng-container *ngTemplateOutlet=\"overlay.value\"></ng-container>\n  </div>\n</ng-container>\n", styles: [".overlay-container{display:contents;position:relative;z-index:var(--modal-z-index)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], animations: [
+OverlayOutletComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OverlayOutletComponent, deps: [{ token: OverlayService }], target: i0.ɵɵFactoryTarget.Component });
+OverlayOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: OverlayOutletComponent, selector: "riv-overlay-outlet", ngImport: i0, template: "<ng-container\n  *ngFor=\"\n    let overlay of overlayService.overlays | async | keyvalue;\n    trackBy: trackOverlay\n  \"\n>\n  <div class=\"overlay-container\" @animate>\n    <ng-container *ngTemplateOutlet=\"overlay.value\"></ng-container>\n  </div>\n</ng-container>\n", styles: [".overlay-container{display:contents;position:relative;z-index:var(--modal-z-index)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }], animations: [
         trigger('animate', [
             transition(':enter', [
                 group([
@@ -5992,7 +6013,7 @@ OverlayOutletComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0",
             ]),
         ]),
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: OverlayOutletComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: OverlayOutletComponent, decorators: [{
             type: Component,
             args: [{ animations: [
                         trigger('animate', [
@@ -6029,9 +6050,9 @@ class ModalComponent {
         }
     }
 }
-ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ModalComponent, selector: "riv-modal", inputs: { obscure: "obscure", topOffset: "topOffset" }, outputs: { close: "close" }, ngImport: i0, template: "<div\n  #scrim\n  *riv-overlay\n  [attr.data-animation-hook]=\"hook\"\n  [rivLockScroll]=\"true\"\n  class=\"scrim\"\n  [class.obscure]=\"obscure\"\n  [style.top.px]=\"topOffset\"\n  (click)=\"scrimClick($event)\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".scrim{position:fixed;z-index:var(--callout-z-index);cursor:default;inset:0}.scrim.obscure{background-color:var(--modal-scrim)}\n"], dependencies: [{ kind: "directive", type: LockScrollDirective, selector: "[rivLockScroll]", inputs: ["rivLockScroll"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ModalComponent, decorators: [{
+ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ModalComponent, selector: "riv-modal", inputs: { obscure: "obscure", topOffset: "topOffset" }, outputs: { close: "close" }, ngImport: i0, template: "<div\n  #scrim\n  *riv-overlay\n  [attr.data-animation-hook]=\"hook\"\n  [rivLockScroll]=\"true\"\n  class=\"scrim\"\n  [class.obscure]=\"obscure\"\n  [style.top.px]=\"topOffset\"\n  (click)=\"scrimClick($event)\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".scrim{position:fixed;z-index:var(--callout-z-index);cursor:default;inset:0}.scrim.obscure{background-color:var(--modal-scrim)}\n"], dependencies: [{ kind: "directive", type: LockScrollDirective, selector: "[rivLockScroll]", inputs: ["rivLockScroll"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  #scrim\n  *riv-overlay\n  [attr.data-animation-hook]=\"hook\"\n  [rivLockScroll]=\"true\"\n  class=\"scrim\"\n  [class.obscure]=\"obscure\"\n  [style.top.px]=\"topOffset\"\n  (click)=\"scrimClick($event)\"\n>\n  <ng-content></ng-content>\n</div>\n", styles: [".scrim{position:fixed;z-index:var(--callout-z-index);cursor:default;inset:0}.scrim.obscure{background-color:var(--modal-scrim)}\n"] }]
         }], propDecorators: { obscure: [{
@@ -6051,9 +6072,9 @@ class SideSheetComponent {
         this.hook = ANIMATION_CONSTANTS.SIDE_SHEET.HOOK;
     }
 }
-SideSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SideSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SideSheetComponent, selector: "riv-side-sheet", inputs: { topOffset: "topOffset", width: "width", obscure: "obscure" }, outputs: { close: "close" }, ngImport: i0, template: "<riv-modal (close)=\"close.emit()\" [obscure]=\"obscure\" [topOffset]=\"topOffset\">\n  <div\n    [attr.data-animation-hook]=\"hook\"\n    class=\"side-sheet\"\n    [style.width]=\"width\"\n  >\n    <ng-content></ng-content>\n  </div>\n</riv-modal>\n", styles: [".side-sheet{position:absolute;top:0;right:0;bottom:0;background-color:var(--surface-light-0);max-width:100vw;box-shadow:var(--depth-2)}\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "riv-modal", inputs: ["obscure", "topOffset"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SideSheetComponent, decorators: [{
+SideSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SideSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SideSheetComponent, selector: "riv-side-sheet", inputs: { topOffset: "topOffset", width: "width", obscure: "obscure" }, outputs: { close: "close" }, ngImport: i0, template: "<riv-modal (close)=\"close.emit()\" [obscure]=\"obscure\" [topOffset]=\"topOffset\">\n  <div\n    [attr.data-animation-hook]=\"hook\"\n    class=\"side-sheet\"\n    [style.width]=\"width\"\n  >\n    <ng-content></ng-content>\n  </div>\n</riv-modal>\n", styles: [".side-sheet{position:absolute;top:0;right:0;bottom:0;background-color:var(--surface-light-0);max-width:100vw;box-shadow:var(--depth-2)}\n"], dependencies: [{ kind: "component", type: ModalComponent, selector: "riv-modal", inputs: ["obscure", "topOffset"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SideSheetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-side-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-modal (close)=\"close.emit()\" [obscure]=\"obscure\" [topOffset]=\"topOffset\">\n  <div\n    [attr.data-animation-hook]=\"hook\"\n    class=\"side-sheet\"\n    [style.width]=\"width\"\n  >\n    <ng-content></ng-content>\n  </div>\n</riv-modal>\n", styles: [".side-sheet{position:absolute;top:0;right:0;bottom:0;background-color:var(--surface-light-0);max-width:100vw;box-shadow:var(--depth-2)}\n"] }]
         }], propDecorators: { topOffset: [{
@@ -6080,9 +6101,9 @@ class DialogComponent {
         }
     }
 }
-DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DialogComponent, selector: "riv-dialog", inputs: { title: "title", minWidth: "minWidth", customBody: "customBody", customFooter: "customFooter" }, outputs: { close: "close" }, host: { listeners: { "document:keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<riv-modal (close)=\"close.emit()\" [obscure]=\"true\">\n  <div [attr.data-animation-hook]=\"hook\" class=\"wrapper\">\n    <div class=\"dialog\" [style.min-width]=\"minWidth\">\n      <header>\n        <span class=\"title\">\n          {{ title }}\n        </span>\n        <button\n          rivButton\n          [variant]=\"'ghost'\"\n          [icon]=\"'X'\"\n          (click)=\"close.emit()\"\n        ></button>\n      </header>\n      <div class=\"body\" [class.custom]=\"customBody\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"footer riv-dialog-footer\" [class.custom]=\"customFooter\">\n        <ng-content select=\"footer\"></ng-content>\n      </div>\n    </div>\n  </div>\n</riv-modal>\n", styles: [".wrapper{position:absolute;top:50%;left:50%}.dialog{transform:translate(-50%,-50%);border-radius:var(--border-radius-medium);border:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;max-width:calc(100vw - var(--size-xlarge) * 2);max-height:calc(100vh - var(--size-xlarge) * 2);overflow:hidden}header{display:flex;justify-content:space-between;align-items:center;padding:0 var(--size-medium);gap:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);flex-shrink:0}.title{font:var(--title-04);padding:var(--size-large) 0}.body{background-color:var(--surface-light-0);overflow-y:auto;min-height:0}.body:not(.custom){padding:var(--size-large)}.footer{border-top:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);flex-shrink:0}.footer:not(:has(> footer)){display:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: ModalComponent, selector: "riv-modal", inputs: ["obscure", "topOffset"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DialogComponent, decorators: [{
+DialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DialogComponent, selector: "riv-dialog", inputs: { title: "title", minWidth: "minWidth", customBody: "customBody", customFooter: "customFooter" }, outputs: { close: "close" }, host: { listeners: { "document:keydown": "handleKeydown($event)" } }, ngImport: i0, template: "<riv-modal (close)=\"close.emit()\" [obscure]=\"true\">\n  <div [attr.data-animation-hook]=\"hook\" class=\"wrapper\">\n    <div class=\"dialog\" [style.min-width]=\"minWidth\">\n      <header>\n        <span class=\"title\">\n          {{ title }}\n        </span>\n        <button\n          rivButton\n          [variant]=\"'ghost'\"\n          [icon]=\"'X'\"\n          (click)=\"close.emit()\"\n        ></button>\n      </header>\n      <div class=\"body\" [class.custom]=\"customBody\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"footer riv-dialog-footer\" [class.custom]=\"customFooter\">\n        <ng-content select=\"footer\"></ng-content>\n      </div>\n    </div>\n  </div>\n</riv-modal>\n", styles: [".wrapper{position:absolute;top:50%;left:50%}.dialog{transform:translate(-50%,-50%);border-radius:var(--border-radius-medium);border:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;max-width:calc(100vw - var(--size-xlarge) * 2);max-height:calc(100vh - var(--size-xlarge) * 2);overflow:hidden}header{display:flex;justify-content:space-between;align-items:center;padding:0 var(--size-medium);gap:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);flex-shrink:0}.title{font:var(--title-04);padding:var(--size-large) 0}.body{background-color:var(--surface-light-0);overflow-y:auto;min-height:0}.body:not(.custom){padding:var(--size-large)}.footer{border-top:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);flex-shrink:0}.footer:not(:has(> footer)){display:none}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: ModalComponent, selector: "riv-modal", inputs: ["obscure", "topOffset"], outputs: ["close"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-modal (close)=\"close.emit()\" [obscure]=\"true\">\n  <div [attr.data-animation-hook]=\"hook\" class=\"wrapper\">\n    <div class=\"dialog\" [style.min-width]=\"minWidth\">\n      <header>\n        <span class=\"title\">\n          {{ title }}\n        </span>\n        <button\n          rivButton\n          [variant]=\"'ghost'\"\n          [icon]=\"'X'\"\n          (click)=\"close.emit()\"\n        ></button>\n      </header>\n      <div class=\"body\" [class.custom]=\"customBody\">\n        <ng-content></ng-content>\n      </div>\n      <div class=\"footer riv-dialog-footer\" [class.custom]=\"customFooter\">\n        <ng-content select=\"footer\"></ng-content>\n      </div>\n    </div>\n  </div>\n</riv-modal>\n", styles: [".wrapper{position:absolute;top:50%;left:50%}.dialog{transform:translate(-50%,-50%);border-radius:var(--border-radius-medium);border:var(--border-width) solid var(--border-light);display:flex;flex-direction:column;max-width:calc(100vw - var(--size-xlarge) * 2);max-height:calc(100vh - var(--size-xlarge) * 2);overflow:hidden}header{display:flex;justify-content:space-between;align-items:center;padding:0 var(--size-medium);gap:var(--size-medium);border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);flex-shrink:0}.title{font:var(--title-04);padding:var(--size-large) 0}.body{background-color:var(--surface-light-0);overflow-y:auto;min-height:0}.body:not(.custom){padding:var(--size-large)}.footer{border-top:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);flex-shrink:0}.footer:not(:has(> footer)){display:none}\n"] }]
         }], propDecorators: { title: [{
@@ -6216,9 +6237,9 @@ class PermissionPickerComponent {
         this.cdr.markForCheck();
     }
 }
-PermissionPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PermissionPickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PermissionPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PermissionPickerComponent, selector: "riv-permission-picker", inputs: { permission: "permission", sharedUsers: "sharedUsers", userSelectMode: "userSelectMode", userSource: "userSource", onAddUser: "onAddUser", newTooltip: "newTooltip", disabledPermissions: "disabledPermissions" }, outputs: { permissionChange: "permissionChange", sharedUsersChange: "sharedUsersChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"permission-picker\">\n  <div class=\"permission-label\">View permissions</div>\n\n  <div class=\"permission-options\">\n    <button\n      *ngFor=\"let option of permissionOptions\"\n      class=\"permission-option\"\n      [class.current]=\"permission === option.value\"\n      [class.disabled]=\"isDisabled(option.value)\"\n      type=\"button\"\n      [attr.aria-checked]=\"permission === option.value\"\n      [attr.aria-label]=\"option.title + ' permission'\"\n      [attr.aria-disabled]=\"isDisabled(option.value)\"\n      (click)=\"onPermissionClick(option.value)\"\n    >\n      <div class=\"option-content\">\n        <div class=\"option-title\">\n          <span>{{ option.title }}</span>\n          <span class=\"option-description\">{{ option.subtitle }}</span>\n        </div>\n        <riv-icon\n          *ngIf=\"permission === option.value\"\n          class=\"permission-indicator\"\n          [name]=\"'Check'\"\n          [size]=\"16\"\n        ></riv-icon>\n      </div>\n      <riv-select\n        *ngIf=\"\n          permission === 'shared' &&\n          option.value === 'shared' &&\n          userSelectMode === 'select' &&\n          userSelectManager\n        \"\n        [label]=\"'Users with access'\"\n        [manager]=\"userSelectManager\"\n      ></riv-select>\n      <riv-search-select\n        *ngIf=\"\n          permission === 'shared' &&\n          option.value === 'shared' &&\n          userSelectMode === 'search-select'\n        \"\n        (click)=\"$event.stopPropagation()\"\n        [label]=\"'Users with access'\"\n        [options]=\"userOptions\"\n        [selected]=\"selectedUsers\"\n        [placeholder]=\"'Search users'\"\n        [addNewLabel]=\"'Add'\"\n        [newTooltip]=\"newTooltip\"\n        (selectedChange)=\"onSelectedUsersChange($event)\"\n        (addNew)=\"handleAddUser($event)\"\n      ></riv-search-select>\n    </button>\n  </div>\n</div>\n", styles: [".permission-picker{display:flex;flex-direction:column;gap:var(--size-medium)}.permission-options{display:flex;flex-direction:column}.permission-label{font:var(--title-02)}.permission-option{display:flex;flex-direction:column;gap:var(--size-small);padding:var(--size-small) var(--size-medium);border-radius:var(--border-radius-large);cursor:pointer;text-align:left}.permission-option:hover:not(.disabled){background-color:var(--surface-light-1)}.permission-option:active:not(.disabled),.permission-option.current{background-color:var(--surface-light-2)}.permission-option.disabled{cursor:not-allowed;opacity:.5}.option-content{display:flex;justify-content:space-between;align-items:center}.option-title{font:var(--body-medium);display:flex;flex-direction:column;align-items:flex-start}.option-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-indicator{color:var(--type-light-link)}\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: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: SearchSelectComponent, selector: "riv-search-select", inputs: ["options", "selected", "placeholder", "addNewLabel", "newTooltip", "size", "disabled", "label", "help", "required", "state", "errorMessage", "optionTemplate", "chipTemplate"], outputs: ["selectedChange", "addNew"] }, { kind: "component", type: SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "allowedCalloutPositions", "preferredCalloutPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PermissionPickerComponent, decorators: [{
+PermissionPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PermissionPickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PermissionPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: PermissionPickerComponent, selector: "riv-permission-picker", inputs: { permission: "permission", sharedUsers: "sharedUsers", userSelectMode: "userSelectMode", userSource: "userSource", onAddUser: "onAddUser", newTooltip: "newTooltip", disabledPermissions: "disabledPermissions" }, outputs: { permissionChange: "permissionChange", sharedUsersChange: "sharedUsersChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"permission-picker\">\n  <div class=\"permission-label\">View permissions</div>\n\n  <div class=\"permission-options\">\n    <button\n      *ngFor=\"let option of permissionOptions\"\n      class=\"permission-option\"\n      [class.current]=\"permission === option.value\"\n      [class.disabled]=\"isDisabled(option.value)\"\n      type=\"button\"\n      [attr.aria-checked]=\"permission === option.value\"\n      [attr.aria-label]=\"option.title + ' permission'\"\n      [attr.aria-disabled]=\"isDisabled(option.value)\"\n      (click)=\"onPermissionClick(option.value)\"\n    >\n      <div class=\"option-content\">\n        <div class=\"option-title\">\n          <span>{{ option.title }}</span>\n          <span class=\"option-description\">{{ option.subtitle }}</span>\n        </div>\n        <riv-icon\n          *ngIf=\"permission === option.value\"\n          class=\"permission-indicator\"\n          [name]=\"'Check'\"\n          [size]=\"16\"\n        ></riv-icon>\n      </div>\n      <riv-select\n        *ngIf=\"\n          permission === 'shared' &&\n          option.value === 'shared' &&\n          userSelectMode === 'select' &&\n          userSelectManager\n        \"\n        [label]=\"'Users with access'\"\n        [manager]=\"userSelectManager\"\n      ></riv-select>\n      <riv-search-select\n        *ngIf=\"\n          permission === 'shared' &&\n          option.value === 'shared' &&\n          userSelectMode === 'search-select'\n        \"\n        (click)=\"$event.stopPropagation()\"\n        [label]=\"'Users with access'\"\n        [options]=\"userOptions\"\n        [selected]=\"selectedUsers\"\n        [placeholder]=\"'Search users'\"\n        [addNewLabel]=\"'Add'\"\n        [newTooltip]=\"newTooltip\"\n        (selectedChange)=\"onSelectedUsersChange($event)\"\n        (addNew)=\"handleAddUser($event)\"\n      ></riv-search-select>\n    </button>\n  </div>\n</div>\n", styles: [".permission-picker{display:flex;flex-direction:column;gap:var(--size-medium)}.permission-options{display:flex;flex-direction:column}.permission-label{font:var(--title-02)}.permission-option{display:flex;flex-direction:column;gap:var(--size-small);padding:var(--size-small) var(--size-medium);border-radius:var(--border-radius-large);cursor:pointer;text-align:left}.permission-option:hover:not(.disabled){background-color:var(--surface-light-1)}.permission-option:active:not(.disabled),.permission-option.current{background-color:var(--surface-light-2)}.permission-option.disabled{cursor:not-allowed;opacity:.5}.option-content{display:flex;justify-content:space-between;align-items:center}.option-title{font:var(--body-medium);display:flex;flex-direction:column;align-items:flex-start}.option-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-indicator{color:var(--type-light-link)}\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: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: SearchSelectComponent, selector: "riv-search-select", inputs: ["options", "selected", "placeholder", "addNewLabel", "newTooltip", "size", "disabled", "label", "help", "required", "state", "errorMessage", "optionTemplate", "chipTemplate"], outputs: ["selectedChange", "addNew"] }, { kind: "component", type: SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "allowedCalloutPositions", "preferredCalloutPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: PermissionPickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-permission-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"permission-picker\">\n  <div class=\"permission-label\">View permissions</div>\n\n  <div class=\"permission-options\">\n    <button\n      *ngFor=\"let option of permissionOptions\"\n      class=\"permission-option\"\n      [class.current]=\"permission === option.value\"\n      [class.disabled]=\"isDisabled(option.value)\"\n      type=\"button\"\n      [attr.aria-checked]=\"permission === option.value\"\n      [attr.aria-label]=\"option.title + ' permission'\"\n      [attr.aria-disabled]=\"isDisabled(option.value)\"\n      (click)=\"onPermissionClick(option.value)\"\n    >\n      <div class=\"option-content\">\n        <div class=\"option-title\">\n          <span>{{ option.title }}</span>\n          <span class=\"option-description\">{{ option.subtitle }}</span>\n        </div>\n        <riv-icon\n          *ngIf=\"permission === option.value\"\n          class=\"permission-indicator\"\n          [name]=\"'Check'\"\n          [size]=\"16\"\n        ></riv-icon>\n      </div>\n      <riv-select\n        *ngIf=\"\n          permission === 'shared' &&\n          option.value === 'shared' &&\n          userSelectMode === 'select' &&\n          userSelectManager\n        \"\n        [label]=\"'Users with access'\"\n        [manager]=\"userSelectManager\"\n      ></riv-select>\n      <riv-search-select\n        *ngIf=\"\n          permission === 'shared' &&\n          option.value === 'shared' &&\n          userSelectMode === 'search-select'\n        \"\n        (click)=\"$event.stopPropagation()\"\n        [label]=\"'Users with access'\"\n        [options]=\"userOptions\"\n        [selected]=\"selectedUsers\"\n        [placeholder]=\"'Search users'\"\n        [addNewLabel]=\"'Add'\"\n        [newTooltip]=\"newTooltip\"\n        (selectedChange)=\"onSelectedUsersChange($event)\"\n        (addNew)=\"handleAddUser($event)\"\n      ></riv-search-select>\n    </button>\n  </div>\n</div>\n", styles: [".permission-picker{display:flex;flex-direction:column;gap:var(--size-medium)}.permission-options{display:flex;flex-direction:column}.permission-label{font:var(--title-02)}.permission-option{display:flex;flex-direction:column;gap:var(--size-small);padding:var(--size-small) var(--size-medium);border-radius:var(--border-radius-large);cursor:pointer;text-align:left}.permission-option:hover:not(.disabled){background-color:var(--surface-light-1)}.permission-option:active:not(.disabled),.permission-option.current{background-color:var(--surface-light-2)}.permission-option.disabled{cursor:not-allowed;opacity:.5}.option-content{display:flex;justify-content:space-between;align-items:center}.option-title{font:var(--body-medium);display:flex;flex-direction:column;align-items:flex-start}.option-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-indicator{color:var(--type-light-link)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { permission: [{
@@ -6320,9 +6341,9 @@ class EditViewComponent {
 // doesn't hand the permission picker a fresh [] on every change-detection
 // cycle (which would churn its @Input and trigger needless work).
 EditViewComponent.NO_SHARED_USERS = [];
-EditViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EditViewComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-EditViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: EditViewComponent, selector: "riv-edit-view", inputs: { anchor: "anchor", autoSelectName: "autoSelectName", view: "view", userSource: "userSource", userSelectMode: "userSelectMode", onAddUser: "onAddUser", newTooltip: "newTooltip", mode: "mode" }, outputs: { save: "save", delete: "delete", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"editedView; let ev\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"anchor ?? null\"\n    [isModal]=\"true\"\n    [showCaret]=\"false\"\n    [theme]=\"'light'\"\n    [preferredPosition]=\"'bottom-right'\"\n    [fallbackDirection]=\"'clockwise'\"\n    (close)=\"close.emit()\"\n  >\n    <div class=\"edit-view\">\n      <div class=\"name-input\">\n        <span class=\"name-label\">Name * </span>\n        <riv-text-field\n          [autoFocus]=\"autoSelectName ? 'select' : false\"\n          [value]=\"ev.title ?? ''\"\n          (valueChange)=\"titleChange($event)\"\n        ></riv-text-field>\n      </div>\n\n      <hr class=\"divider\" />\n\n      <riv-permission-picker\n        [permission]=\"ev.permission\"\n        [sharedUsers]=\"getSharedUsers(ev)\"\n        [userSelectMode]=\"userSelectMode\"\n        [userSource]=\"userSource\"\n        [onAddUser]=\"onAddUser\"\n        [newTooltip]=\"newTooltip\"\n        (permissionChange)=\"onPermissionChange($event)\"\n        (sharedUsersChange)=\"onSharedUsersChange($event)\"\n      ></riv-permission-picker>\n\n      <hr class=\"divider\" />\n\n      <div class=\"actions\">\n        <button\n          rivButton\n          [variant]=\"'ghost'\"\n          [icon]=\"'Trash2'\"\n          (click)=\"delete.emit(ev); close.emit()\"\n          *ngIf=\"canEdit()\"\n        >\n          Delete\n        </button>\n\n        <div class=\"actions-spacer\"></div>\n\n        <div class=\"primary-actions\">\n          <button rivButton [variant]=\"'ghost'\" (click)=\"close.emit()\">\n            Cancel\n          </button>\n          <button\n            rivButton\n            [variant]=\"'primary'\"\n            [disabled]=\"canEdit() && isClean()\"\n            (click)=\"save.emit(ev); close.emit()\"\n          >\n            Save\n          </button>\n        </div>\n      </div>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [".edit-view{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 104);max-width:50vw;max-height:80vh;overflow-y:auto}.divider{height:var(--border-width);background-color:var(--border-light);border:0;width:100%}.name-label{font:var(--title-02)}.name-input{display:flex;flex-direction:column;gap:var(--size-small)}.actions{display:flex;justify-content:space-between;align-items:center}.actions-spacer{flex-grow:1}.primary-actions{display:flex;align-items:center;gap:var(--size-small)}\n"], dependencies: [{ 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", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: PermissionPickerComponent, selector: "riv-permission-picker", inputs: ["permission", "sharedUsers", "userSelectMode", "userSource", "onAddUser", "newTooltip", "disabledPermissions"], outputs: ["permissionChange", "sharedUsersChange"] }, { kind: "component", type: TextFieldComponent, selector: "riv-text-field", inputs: ["disabled", "readonly", "placeholder", "casing", "type", "size", "autoFocus", "name", "minLength", "maxLength", "value"], outputs: ["valueChange", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EditViewComponent, decorators: [{
+EditViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditViewComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+EditViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: EditViewComponent, selector: "riv-edit-view", inputs: { anchor: "anchor", autoSelectName: "autoSelectName", view: "view", userSource: "userSource", userSelectMode: "userSelectMode", onAddUser: "onAddUser", newTooltip: "newTooltip", mode: "mode" }, outputs: { save: "save", delete: "delete", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"editedView; let ev\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"anchor ?? null\"\n    [isModal]=\"true\"\n    [showCaret]=\"false\"\n    [theme]=\"'light'\"\n    [preferredPosition]=\"'bottom-right'\"\n    [fallbackDirection]=\"'clockwise'\"\n    (close)=\"close.emit()\"\n  >\n    <div class=\"edit-view\">\n      <div class=\"name-input\">\n        <span class=\"name-label\">Name * </span>\n        <riv-text-field\n          [autoFocus]=\"autoSelectName ? 'select' : false\"\n          [value]=\"ev.title ?? ''\"\n          (valueChange)=\"titleChange($event)\"\n        ></riv-text-field>\n      </div>\n\n      <hr class=\"divider\" />\n\n      <riv-permission-picker\n        [permission]=\"ev.permission\"\n        [sharedUsers]=\"getSharedUsers(ev)\"\n        [userSelectMode]=\"userSelectMode\"\n        [userSource]=\"userSource\"\n        [onAddUser]=\"onAddUser\"\n        [newTooltip]=\"newTooltip\"\n        (permissionChange)=\"onPermissionChange($event)\"\n        (sharedUsersChange)=\"onSharedUsersChange($event)\"\n      ></riv-permission-picker>\n\n      <hr class=\"divider\" />\n\n      <div class=\"actions\">\n        <button\n          rivButton\n          [variant]=\"'ghost'\"\n          [icon]=\"'Trash2'\"\n          (click)=\"delete.emit(ev); close.emit()\"\n          *ngIf=\"canEdit()\"\n        >\n          Delete\n        </button>\n\n        <div class=\"actions-spacer\"></div>\n\n        <div class=\"primary-actions\">\n          <button rivButton [variant]=\"'ghost'\" (click)=\"close.emit()\">\n            Cancel\n          </button>\n          <button\n            rivButton\n            [variant]=\"'primary'\"\n            [disabled]=\"canEdit() && isClean()\"\n            (click)=\"save.emit(ev); close.emit()\"\n          >\n            Save\n          </button>\n        </div>\n      </div>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [".edit-view{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 104);max-width:50vw;max-height:80vh;overflow-y:auto}.divider{height:var(--border-width);background-color:var(--border-light);border:0;width:100%}.name-label{font:var(--title-02)}.name-input{display:flex;flex-direction:column;gap:var(--size-small)}.actions{display:flex;justify-content:space-between;align-items:center}.actions-spacer{flex-grow:1}.primary-actions{display:flex;align-items:center;gap:var(--size-small)}\n"], dependencies: [{ 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", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: PermissionPickerComponent, selector: "riv-permission-picker", inputs: ["permission", "sharedUsers", "userSelectMode", "userSource", "onAddUser", "newTooltip", "disabledPermissions"], outputs: ["permissionChange", "sharedUsersChange"] }, { kind: "component", type: TextFieldComponent, selector: "riv-text-field", inputs: ["disabled", "readonly", "placeholder", "casing", "type", "size", "autoFocus", "name", "minLength", "maxLength", "value"], outputs: ["valueChange", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: EditViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-edit-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"editedView; let ev\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"anchor ?? null\"\n    [isModal]=\"true\"\n    [showCaret]=\"false\"\n    [theme]=\"'light'\"\n    [preferredPosition]=\"'bottom-right'\"\n    [fallbackDirection]=\"'clockwise'\"\n    (close)=\"close.emit()\"\n  >\n    <div class=\"edit-view\">\n      <div class=\"name-input\">\n        <span class=\"name-label\">Name * </span>\n        <riv-text-field\n          [autoFocus]=\"autoSelectName ? 'select' : false\"\n          [value]=\"ev.title ?? ''\"\n          (valueChange)=\"titleChange($event)\"\n        ></riv-text-field>\n      </div>\n\n      <hr class=\"divider\" />\n\n      <riv-permission-picker\n        [permission]=\"ev.permission\"\n        [sharedUsers]=\"getSharedUsers(ev)\"\n        [userSelectMode]=\"userSelectMode\"\n        [userSource]=\"userSource\"\n        [onAddUser]=\"onAddUser\"\n        [newTooltip]=\"newTooltip\"\n        (permissionChange)=\"onPermissionChange($event)\"\n        (sharedUsersChange)=\"onSharedUsersChange($event)\"\n      ></riv-permission-picker>\n\n      <hr class=\"divider\" />\n\n      <div class=\"actions\">\n        <button\n          rivButton\n          [variant]=\"'ghost'\"\n          [icon]=\"'Trash2'\"\n          (click)=\"delete.emit(ev); close.emit()\"\n          *ngIf=\"canEdit()\"\n        >\n          Delete\n        </button>\n\n        <div class=\"actions-spacer\"></div>\n\n        <div class=\"primary-actions\">\n          <button rivButton [variant]=\"'ghost'\" (click)=\"close.emit()\">\n            Cancel\n          </button>\n          <button\n            rivButton\n            [variant]=\"'primary'\"\n            [disabled]=\"canEdit() && isClean()\"\n            (click)=\"save.emit(ev); close.emit()\"\n          >\n            Save\n          </button>\n        </div>\n      </div>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [".edit-view{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 104);max-width:50vw;max-height:80vh;overflow-y:auto}.divider{height:var(--border-width);background-color:var(--border-light);border:0;width:100%}.name-label{font:var(--title-02)}.name-input{display:flex;flex-direction:column;gap:var(--size-small)}.actions{display:flex;justify-content:space-between;align-items:center}.actions-spacer{flex-grow:1}.primary-actions{display:flex;align-items:center;gap:var(--size-small)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { anchor: [{
@@ -6359,9 +6380,9 @@ class MenuComponent {
             this.standardTriggerButton?.nativeElement);
     }
 }
-MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MenuComponent, selector: "riv-menu", inputs: { preferredPosition: "preferredPosition" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }], viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true, read: ElementRef }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button #customTriggerButton class=\"custom-trigger\" (click)=\"open.next(true)\">\n    <ng-container\n      *ngTemplateOutlet=\"triggerTemplate; context: { open: open | async }\"\n    ></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #standardTrigger>\n  <button\n    #standardTriggerButton\n    rivButton\n    [variant]=\"'ghost'\"\n    [size]=\"'xsmall'\"\n    [icon]=\"'MoreVertical'\"\n    (click)=\"open.next(true)\"\n  ></button>\n</ng-template>\n\n<ng-container *ngIf=\"open | async\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"getTrigger()\"\n    [showCaret]=\"false\"\n    [preferredPosition]=\"preferredPosition\"\n    [theme]=\"'light'\"\n    (close)=\"open.next(false)\"\n  >\n    <div class=\"options\">\n      <ng-content></ng-content>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center;cursor:pointer}.custom-trigger{width:100%;max-width:100%;height:100%;max-height:100%;display:inline-flex}.options{display:flex;flex-direction:column;align-items:stretch;gap:var(--size-small);padding:var(--size-large);min-width:calc(var(--base-grid-size) * 58)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuComponent, decorators: [{
+MenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MenuComponent, selector: "riv-menu", inputs: { preferredPosition: "preferredPosition" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }], viewQueries: [{ propertyName: "customTriggerButton", first: true, predicate: ["customTriggerButton"], descendants: true, read: ElementRef }, { propertyName: "standardTriggerButton", first: true, predicate: ["standardTriggerButton"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button #customTriggerButton class=\"custom-trigger\" (click)=\"open.next(true)\">\n    <ng-container\n      *ngTemplateOutlet=\"triggerTemplate; context: { open: open | async }\"\n    ></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #standardTrigger>\n  <button\n    #standardTriggerButton\n    rivButton\n    [variant]=\"'ghost'\"\n    [size]=\"'xsmall'\"\n    [icon]=\"'MoreVertical'\"\n    (click)=\"open.next(true)\"\n  ></button>\n</ng-template>\n\n<ng-container *ngIf=\"open | async\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"getTrigger()\"\n    [showCaret]=\"false\"\n    [preferredPosition]=\"preferredPosition\"\n    [theme]=\"'light'\"\n    (close)=\"open.next(false)\"\n  >\n    <div class=\"options\">\n      <ng-content></ng-content>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center;cursor:pointer}.custom-trigger{width:100%;max-width:100%;height:100%;max-height:100%;display:inline-flex}.options{display:flex;flex-direction:column;align-items:stretch;gap:var(--size-small);padding:var(--size-large);min-width:calc(var(--base-grid-size) * 58)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button #customTriggerButton class=\"custom-trigger\" (click)=\"open.next(true)\">\n    <ng-container\n      *ngTemplateOutlet=\"triggerTemplate; context: { open: open | async }\"\n    ></ng-container>\n  </button>\n</ng-container>\n\n<ng-template #standardTrigger>\n  <button\n    #standardTriggerButton\n    rivButton\n    [variant]=\"'ghost'\"\n    [size]=\"'xsmall'\"\n    [icon]=\"'MoreVertical'\"\n    (click)=\"open.next(true)\"\n  ></button>\n</ng-template>\n\n<ng-container *ngIf=\"open | async\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"getTrigger()\"\n    [showCaret]=\"false\"\n    [preferredPosition]=\"preferredPosition\"\n    [theme]=\"'light'\"\n    (close)=\"open.next(false)\"\n  >\n    <div class=\"options\">\n      <ng-content></ng-content>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [":host{display:inline-flex;justify-content:center;align-items:center;cursor:pointer}.custom-trigger{width:100%;max-width:100%;height:100%;max-height:100%;display:inline-flex}.options{display:flex;flex-direction:column;align-items:stretch;gap:var(--size-small);padding:var(--size-large);min-width:calc(var(--base-grid-size) * 58)}\n"] }]
         }], propDecorators: { preferredPosition: [{
@@ -6421,9 +6442,9 @@ class MenuItemComponent {
         }
     }
 }
-MenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuItemComponent, deps: [{ token: MenuComponent }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MenuItemComponent, selector: "[riv-menu-item]", inputs: { locked: "locked", disabled: "disabled", variant: "variant" }, host: { listeners: { "click": "click($event)" }, properties: { "class": "this.classes" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n<riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n", styles: [":host{color:var(--type-light-high-contrast);padding:var(--size-small);font:var(--input-medium);white-space:nowrap;transition:background-color var(--short-transition);text-decoration:none;border-radius:var(--border-radius-medium);text-align:left}:host:hover{background-color:var(--surface-light-2);cursor:pointer}:host:active{background-color:var(--surface-light-3);cursor:pointer}:host:disabled,:host.disabled,:host.locked{cursor:default;color:var(--type-light-disabled)}:host:disabled:hover,:host.disabled:hover,:host.locked:hover{background-color:transparent}:host.danger:not(:disabled){color:var(--danger-main)}:host.danger:hover:not(:disabled){background-color:var(--surface-light-danger)}riv-icon{vertical-align:top}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MenuItemComponent, decorators: [{
+MenuItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenuItemComponent, deps: [{ token: MenuComponent }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+MenuItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MenuItemComponent, selector: "[riv-menu-item]", inputs: { locked: "locked", disabled: "disabled", variant: "variant" }, host: { listeners: { "click": "click($event)" }, properties: { "class": "this.classes" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n<riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n", styles: [":host{color:var(--type-light-high-contrast);padding:var(--size-small);font:var(--input-medium);white-space:nowrap;transition:background-color var(--short-transition);text-decoration:none;border-radius:var(--border-radius-medium);text-align:left}:host:hover{background-color:var(--surface-light-2);cursor:pointer}:host:active{background-color:var(--surface-light-3);cursor:pointer}:host:disabled,:host.disabled,:host.locked{cursor:default;color:var(--type-light-disabled)}:host:disabled:hover,:host.disabled:hover,:host.locked:hover{background-color:transparent}:host.danger:not(:disabled){color:var(--danger-main)}:host.danger:hover:not(:disabled){background-color:var(--surface-light-danger)}riv-icon{vertical-align:top}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MenuItemComponent, decorators: [{
             type: Component,
             args: [{ selector: '[riv-menu-item]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n", styles: [":host{color:var(--type-light-high-contrast);padding:var(--size-small);font:var(--input-medium);white-space:nowrap;transition:background-color var(--short-transition);text-decoration:none;border-radius:var(--border-radius-medium);text-align:left}:host:hover{background-color:var(--surface-light-2);cursor:pointer}:host:active{background-color:var(--surface-light-3);cursor:pointer}:host:disabled,:host.disabled,:host.locked{cursor:default;color:var(--type-light-disabled)}:host:disabled:hover,:host.disabled:hover,:host.locked:hover{background-color:transparent}:host.danger:not(:disabled){color:var(--danger-main)}:host.danger:hover:not(:disabled){background-color:var(--surface-light-danger)}riv-icon{vertical-align:top}\n"] }]
         }], ctorParameters: function () { return [{ type: MenuComponent }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { locked: [{
@@ -6449,9 +6470,9 @@ class ViewMenuComponent {
         this.menuContext = 'tab';
     }
 }
-ViewMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-ViewMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ViewMenuComponent, selector: "riv-view-menu", inputs: { manager: "manager", view: "view", menuContext: "menuContext" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["menuTrigger"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"view\">\n  <riv-menu\n    #menu\n    [preferredPosition]=\"'bottom-right'\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <ng-container *ngIf=\"triggerTemplate\">\n      <ng-template #trigger>\n        <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n      </ng-template>\n    </ng-container>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setEnabled',\n          id: view.id,\n          enabled: !view.enabled,\n          source: 'menu'\n        })\n      \"\n      [disabled]=\"view.system || view.temporary\"\n    >\n      {{ view.enabled ? 'Hide tab' : 'Show tab' }}\n    </button>\n    <div class=\"riv-divider\"></div>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setEditingView',\n          context: { id: view.id, autoRename: false, menuContext }\n        })\n      \"\n      [disabled]=\"view.system\"\n    >\n      Edit view\n    </button>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setEditingView',\n          context: { id: view.id, autoRename: true, menuContext }\n        })\n      \"\n      [disabled]=\"view.system\"\n    >\n      Rename view\n    </button>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({ type: 'duplicateView', view, menuContext })\n      \"\n      [disabled]=\"view.temporary\"\n    >\n      Duplicate view\n    </button>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setDeletingView',\n          context: { id: view.id, menuContext }\n        })\n      \"\n      [disabled]=\"view.system\"\n    >\n      Delete view\n    </button>\n    <div class=\"riv-divider\"></div>\n    <button\n      riv-menu-item\n      (click)=\"manager?.actions?.next({ type: 'copyLinkToView', view })\"\n      [disabled]=\"view.temporary\"\n    >\n      Copy link to view\n    </button>\n  </riv-menu>\n\n  <ng-container *ngIf=\"manager?.state | async; let state\">\n    <ng-container *ngIf=\"state.editingViewContext; let editingViewContext\">\n      <riv-edit-view\n        *ngIf=\"\n          editingViewContext.id === view.id &&\n          editingViewContext.menuContext === menuContext\n        \"\n        [view]=\"view\"\n        [userSource]=\"state.userSource\"\n        [userSelectMode]=\"state.userSelectMode\"\n        [onAddUser]=\"state.onAddUser\"\n        [newTooltip]=\"state.newTooltip\"\n        [autoSelectName]=\"editingViewContext.autoRename\"\n        [anchor]=\"el.nativeElement\"\n        (save)=\"manager?.actions?.next({ type: 'updateView', view: $event })\"\n        (delete)=\"manager?.actions?.next({ type: 'deleteView', view: $event })\"\n        (close)=\"\n          manager?.actions?.next({ type: 'setEditingView', context: null })\n        \"\n      ></riv-edit-view>\n    </ng-container>\n\n    <ng-container *ngIf=\"state.deletingViewContext; let deletingViewContext\">\n      <riv-dialog\n        *ngIf=\"\n          deletingViewContext.id === view.id &&\n          deletingViewContext.menuContext === menuContext\n        \"\n        [title]=\"'Delete view'\"\n        (close)=\"\n          manager?.actions?.next({ type: 'setDeletingView', context: null })\n        \"\n      >\n        <div class=\"delete-dialog\">\n          <div class=\"delete-title\">\n            Are you sure you want to delete the following view?\n          </div>\n          <p>{{ view.title }}</p>\n        </div>\n        <footer class=\"delete-footer\">\n          <button\n            rivButton\n            (click)=\"\n              manager?.actions?.next({ type: 'setDeletingView', context: null })\n            \"\n          >\n            Cancel\n          </button>\n          <button\n            rivButton\n            [variant]=\"'danger'\"\n            (click)=\"\n              manager?.actions?.next({\n                type: 'deleteView',\n                view\n              })\n            \"\n          >\n            Delete view\n          </button>\n        </footer>\n      </riv-dialog>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:stretch}riv-menu{width:100%;max-width:100%;height:100%;max-height:100%}.delete-dialog{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 120);max-width:100%}.delete-title{font:var(--title-02)}.delete-footer{padding:var(--size-medium);display:flex;justify-content:space-between;gap:var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: DialogComponent, selector: "riv-dialog", inputs: ["title", "minWidth", "customBody", "customFooter"], outputs: ["close"] }, { kind: "component", type: EditViewComponent, selector: "riv-edit-view", inputs: ["anchor", "autoSelectName", "view", "userSource", "userSelectMode", "onAddUser", "newTooltip", "mode"], outputs: ["save", "delete", "close"] }, { kind: "component", type: MenuComponent, selector: "riv-menu", inputs: ["preferredPosition"] }, { kind: "component", type: MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewMenuComponent, decorators: [{
+ViewMenuComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+ViewMenuComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ViewMenuComponent, selector: "riv-view-menu", inputs: { manager: "manager", view: "view", menuContext: "menuContext" }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["menuTrigger"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"view\">\n  <riv-menu\n    #menu\n    [preferredPosition]=\"'bottom-right'\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <ng-container *ngIf=\"triggerTemplate\">\n      <ng-template #trigger>\n        <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n      </ng-template>\n    </ng-container>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setEnabled',\n          id: view.id,\n          enabled: !view.enabled,\n          source: 'menu'\n        })\n      \"\n      [disabled]=\"view.system || view.temporary\"\n    >\n      {{ view.enabled ? 'Hide tab' : 'Show tab' }}\n    </button>\n    <div class=\"riv-divider\"></div>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setEditingView',\n          context: { id: view.id, autoRename: false, menuContext }\n        })\n      \"\n      [disabled]=\"view.system\"\n    >\n      Edit view\n    </button>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setEditingView',\n          context: { id: view.id, autoRename: true, menuContext }\n        })\n      \"\n      [disabled]=\"view.system\"\n    >\n      Rename view\n    </button>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({ type: 'duplicateView', view, menuContext })\n      \"\n      [disabled]=\"view.temporary\"\n    >\n      Duplicate view\n    </button>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setDeletingView',\n          context: { id: view.id, menuContext }\n        })\n      \"\n      [disabled]=\"view.system\"\n    >\n      Delete view\n    </button>\n    <div class=\"riv-divider\"></div>\n    <button\n      riv-menu-item\n      (click)=\"manager?.actions?.next({ type: 'copyLinkToView', view })\"\n      [disabled]=\"view.temporary\"\n    >\n      Copy link to view\n    </button>\n  </riv-menu>\n\n  <ng-container *ngIf=\"manager?.state | async; let state\">\n    <ng-container *ngIf=\"state.editingViewContext; let editingViewContext\">\n      <riv-edit-view\n        *ngIf=\"\n          editingViewContext.id === view.id &&\n          editingViewContext.menuContext === menuContext\n        \"\n        [view]=\"view\"\n        [userSource]=\"state.userSource\"\n        [userSelectMode]=\"state.userSelectMode\"\n        [onAddUser]=\"state.onAddUser\"\n        [newTooltip]=\"state.newTooltip\"\n        [autoSelectName]=\"editingViewContext.autoRename\"\n        [anchor]=\"el.nativeElement\"\n        (save)=\"manager?.actions?.next({ type: 'updateView', view: $event })\"\n        (delete)=\"manager?.actions?.next({ type: 'deleteView', view: $event })\"\n        (close)=\"\n          manager?.actions?.next({ type: 'setEditingView', context: null })\n        \"\n      ></riv-edit-view>\n    </ng-container>\n\n    <ng-container *ngIf=\"state.deletingViewContext; let deletingViewContext\">\n      <riv-dialog\n        *ngIf=\"\n          deletingViewContext.id === view.id &&\n          deletingViewContext.menuContext === menuContext\n        \"\n        [title]=\"'Delete view'\"\n        (close)=\"\n          manager?.actions?.next({ type: 'setDeletingView', context: null })\n        \"\n      >\n        <div class=\"delete-dialog\">\n          <div class=\"delete-title\">\n            Are you sure you want to delete the following view?\n          </div>\n          <p>{{ view.title }}</p>\n        </div>\n        <footer class=\"delete-footer\">\n          <button\n            rivButton\n            (click)=\"\n              manager?.actions?.next({ type: 'setDeletingView', context: null })\n            \"\n          >\n            Cancel\n          </button>\n          <button\n            rivButton\n            [variant]=\"'danger'\"\n            (click)=\"\n              manager?.actions?.next({\n                type: 'deleteView',\n                view\n              })\n            \"\n          >\n            Delete view\n          </button>\n        </footer>\n      </riv-dialog>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:stretch}riv-menu{width:100%;max-width:100%;height:100%;max-height:100%}.delete-dialog{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 120);max-width:100%}.delete-title{font:var(--title-02)}.delete-footer{padding:var(--size-medium);display:flex;justify-content:space-between;gap:var(--size-medium)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: DialogComponent, selector: "riv-dialog", inputs: ["title", "minWidth", "customBody", "customFooter"], outputs: ["close"] }, { kind: "component", type: EditViewComponent, selector: "riv-edit-view", inputs: ["anchor", "autoSelectName", "view", "userSource", "userSelectMode", "onAddUser", "newTooltip", "mode"], outputs: ["save", "delete", "close"] }, { kind: "component", type: MenuComponent, selector: "riv-menu", inputs: ["preferredPosition"] }, { kind: "component", type: MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-view-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"view\">\n  <riv-menu\n    #menu\n    [preferredPosition]=\"'bottom-right'\"\n    (click)=\"$event.stopPropagation()\"\n  >\n    <ng-container *ngIf=\"triggerTemplate\">\n      <ng-template #trigger>\n        <ng-container [ngTemplateOutlet]=\"triggerTemplate\"></ng-container>\n      </ng-template>\n    </ng-container>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setEnabled',\n          id: view.id,\n          enabled: !view.enabled,\n          source: 'menu'\n        })\n      \"\n      [disabled]=\"view.system || view.temporary\"\n    >\n      {{ view.enabled ? 'Hide tab' : 'Show tab' }}\n    </button>\n    <div class=\"riv-divider\"></div>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setEditingView',\n          context: { id: view.id, autoRename: false, menuContext }\n        })\n      \"\n      [disabled]=\"view.system\"\n    >\n      Edit view\n    </button>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setEditingView',\n          context: { id: view.id, autoRename: true, menuContext }\n        })\n      \"\n      [disabled]=\"view.system\"\n    >\n      Rename view\n    </button>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({ type: 'duplicateView', view, menuContext })\n      \"\n      [disabled]=\"view.temporary\"\n    >\n      Duplicate view\n    </button>\n    <button\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({\n          type: 'setDeletingView',\n          context: { id: view.id, menuContext }\n        })\n      \"\n      [disabled]=\"view.system\"\n    >\n      Delete view\n    </button>\n    <div class=\"riv-divider\"></div>\n    <button\n      riv-menu-item\n      (click)=\"manager?.actions?.next({ type: 'copyLinkToView', view })\"\n      [disabled]=\"view.temporary\"\n    >\n      Copy link to view\n    </button>\n  </riv-menu>\n\n  <ng-container *ngIf=\"manager?.state | async; let state\">\n    <ng-container *ngIf=\"state.editingViewContext; let editingViewContext\">\n      <riv-edit-view\n        *ngIf=\"\n          editingViewContext.id === view.id &&\n          editingViewContext.menuContext === menuContext\n        \"\n        [view]=\"view\"\n        [userSource]=\"state.userSource\"\n        [userSelectMode]=\"state.userSelectMode\"\n        [onAddUser]=\"state.onAddUser\"\n        [newTooltip]=\"state.newTooltip\"\n        [autoSelectName]=\"editingViewContext.autoRename\"\n        [anchor]=\"el.nativeElement\"\n        (save)=\"manager?.actions?.next({ type: 'updateView', view: $event })\"\n        (delete)=\"manager?.actions?.next({ type: 'deleteView', view: $event })\"\n        (close)=\"\n          manager?.actions?.next({ type: 'setEditingView', context: null })\n        \"\n      ></riv-edit-view>\n    </ng-container>\n\n    <ng-container *ngIf=\"state.deletingViewContext; let deletingViewContext\">\n      <riv-dialog\n        *ngIf=\"\n          deletingViewContext.id === view.id &&\n          deletingViewContext.menuContext === menuContext\n        \"\n        [title]=\"'Delete view'\"\n        (close)=\"\n          manager?.actions?.next({ type: 'setDeletingView', context: null })\n        \"\n      >\n        <div class=\"delete-dialog\">\n          <div class=\"delete-title\">\n            Are you sure you want to delete the following view?\n          </div>\n          <p>{{ view.title }}</p>\n        </div>\n        <footer class=\"delete-footer\">\n          <button\n            rivButton\n            (click)=\"\n              manager?.actions?.next({ type: 'setDeletingView', context: null })\n            \"\n          >\n            Cancel\n          </button>\n          <button\n            rivButton\n            [variant]=\"'danger'\"\n            (click)=\"\n              manager?.actions?.next({\n                type: 'deleteView',\n                view\n              })\n            \"\n          >\n            Delete view\n          </button>\n        </footer>\n      </riv-dialog>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", styles: [":host{display:inline-flex;align-items:stretch}riv-menu{width:100%;max-width:100%;height:100%;max-height:100%}.delete-dialog{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 120);max-width:100%}.delete-title{font:var(--title-02)}.delete-footer{padding:var(--size-medium);display:flex;justify-content:space-between;gap:var(--size-medium)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { manager: [{
@@ -6483,9 +6504,9 @@ class AllViewsModalComponent {
         return view.id;
     }
 }
-AllViewsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AllViewsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-AllViewsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: AllViewsModalComponent, selector: "riv-all-views-modal", inputs: { manager: "manager", topOffset: "topOffset" }, outputs: { close: "close" }, ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <riv-side-sheet [topOffset]=\"topOffset\" (close)=\"close.emit()\">\n    <div class=\"content\">\n      <header>\n        <span class=\"title\">All views</span>\n        <button\n          rivButton\n          [variant]=\"'ghost'\"\n          [icon]=\"'X'\"\n          (click)=\"close.emit()\"\n        ></button>\n      </header>\n\n      <riv-search\n        (valueChange)=\"\n          manager?.actions?.next({\n            type: 'setAllViewsSearchQuery',\n            query: $event\n          })\n        \"\n        [value]=\"s.all.search\"\n        placeholder=\"Search\"\n      ></riv-search>\n\n      <div class=\"views\">\n        <!-- View sections by permission type -->\n        <ng-container\n          *ngIf=\"s.all.privateViews.length > 0\"\n          [ngTemplateOutlet]=\"permissionSection\"\n          [ngTemplateOutletContext]=\"{\n            permission: 'private',\n            open: s.all.privateOpen,\n            openChange: getOpenChange('private'),\n            views: s.all.privateViews,\n            title: getPermissionTitle('private'),\n            description: getPermissionDescription('private')\n          }\"\n        ></ng-container>\n        <ng-container\n          *ngIf=\"s.all.sharedViews.length > 0\"\n          [ngTemplateOutlet]=\"permissionSection\"\n          [ngTemplateOutletContext]=\"{\n            permission: 'shared',\n            open: s.all.sharedOpen,\n            openChange: getOpenChange('shared'),\n            views: s.all.sharedViews,\n            title: getPermissionTitle('shared'),\n            description: getPermissionDescription('shared')\n          }\"\n        ></ng-container>\n        <ng-container\n          *ngIf=\"s.all.publicViews.length > 0\"\n          [ngTemplateOutlet]=\"permissionSection\"\n          [ngTemplateOutletContext]=\"{\n            permission: 'public',\n            open: s.all.publicOpen,\n            openChange: getOpenChange('public'),\n            views: s.all.publicViews,\n            title: getPermissionTitle('public'),\n            description: getPermissionDescription('public')\n          }\"\n        ></ng-container>\n\n        <!-- Permission section -->\n        <ng-template\n          #permissionSection\n          let-permission=\"permission\"\n          let-open=\"open\"\n          let-openChange=\"openChange\"\n          let-views=\"views\"\n          let-title=\"title\"\n          let-description=\"description\"\n        >\n          <div class=\"permission-section\">\n            <button\n              class=\"permission-header\"\n              (click)=\"openChange(!open)\"\n              [disabled]=\"!!s.all.search\"\n            >\n              <div class=\"permission-header-content\">\n                <h3 class=\"permission-title\">{{ title }}</h3>\n                <span class=\"permission-description\">{{ description }}</span>\n              </div>\n              <riv-icon\n                [name]=\"open ? 'ChevronUp' : 'ChevronDown'\"\n                [size]=\"20\"\n              ></riv-icon>\n            </button>\n\n            <div class=\"permission-content\" *ngIf=\"open\">\n              <div class=\"views-list\" *ngIf=\"views.length > 0\">\n                <button\n                  *ngFor=\"let view of views; trackBy: trackById\"\n                  class=\"view-item\"\n                  (click)=\"\n                    manager?.actions?.next({\n                      type: 'setActiveView',\n                      id: view.id,\n                      source: 'menu'\n                    });\n                    close.emit()\n                  \"\n                >\n                  <div class=\"view-title\" rivTruncate>\n                    <riv-highlight\n                      [text]=\"view.title\"\n                      [indices]=\"view.titleHighlightIndices ?? []\"\n                    >\n                    </riv-highlight>\n                  </div>\n                  <riv-view-menu\n                    [manager]=\"manager\"\n                    [view]=\"view\"\n                    [menuContext]=\"'all-views'\"\n                  ></riv-view-menu>\n                  <button\n                    class=\"enable-view\"\n                    [class.enabled]=\"view.enabled && !view.system\"\n                    (click)=\"\n                      $event.stopPropagation();\n                      manager?.actions?.next({\n                        type: 'setEnabled',\n                        id: view.id,\n                        enabled: !view.enabled,\n                        source: 'eyeIcon'\n                      })\n                    \"\n                    [disabled]=\"view.system\"\n                  >\n                    <riv-icon\n                      *ngIf=\"view.enabled\"\n                      [name]=\"view.system ? 'Lock' : 'Eye'\"\n                      [rivTooltip]=\"view.system ? '' : 'Hide tab'\"\n                      [size]=\"20\"\n                    ></riv-icon>\n                    <riv-icon\n                      *ngIf=\"!view.enabled\"\n                      [name]=\"'EyeOff'\"\n                      [rivTooltip]=\"'Show tab'\"\n                      [size]=\"20\"\n                    ></riv-icon>\n                  </button>\n                </button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </div>\n    </div>\n  </riv-side-sheet>\n</ng-container>\n", styles: [".content{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}header{display:flex;justify-content:space-between;align-items:center}.title{font:var(--title-02)}.views{flex-grow:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--size-xlarge);scrollbar-gutter:stable;margin-right:calc(var(--size-medium) * -1)}.permission-section{display:flex;flex-direction:column}.permission-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--size-xsmall);border:none;background:none;cursor:pointer;gap:var(--size-small);border-radius:var(--border-radius-medium);transition:background-color var(--short-transition)}.permission-header:disabled{cursor:default;color:var(--type-light-disabled)}.permission-header:hover:not(:disabled){background-color:var(--surface-light-1)}.permission-header:active:not(:disabled){background-color:var(--surface-light-2)}.permission-header-content{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.permission-title{font:var(--title-02)}.permission-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-content{padding-top:var(--size-small)}.views-list{display:flex;flex-direction:column;gap:var(--size-small)}.view-item{display:flex;align-items:center;padding:var(--size-xsmall);border-radius:var(--border-radius-small);cursor:pointer;background-color:var(--surface-light-0);transition:background-color var(--short-transition)}.view-item:hover{background-color:var(--surface-light-1)}.view-item:active{background-color:var(--surface-light-2)}.view-title{text-align:left;flex-grow:1;font:var(--input-medium)}.view-item riv-view-menu{align-self:flex-end;opacity:0;transition:opacity var(--short-transition)}.view-item:hover riv-view-menu{opacity:1}.enable-view{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;padding-left:var(--size-xsmall);transition:color var(--medium-transition);color:var(--type-light-low-contrast)}.enable-view.enabled{color:var(--type-light-link)}.enable-view.enabled:hover{color:var(--type-light-link-hover)}.enable-view.enabled:active{color:var(--type-light-link-active)}\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", "current"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset", "width", "obscure"], outputs: ["close"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "component", type: TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "component", type: ViewMenuComponent, selector: "riv-view-menu", inputs: ["manager", "view", "menuContext"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AllViewsModalComponent, decorators: [{
+AllViewsModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AllViewsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+AllViewsModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: AllViewsModalComponent, selector: "riv-all-views-modal", inputs: { manager: "manager", topOffset: "topOffset" }, outputs: { close: "close" }, ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <riv-side-sheet [topOffset]=\"topOffset\" (close)=\"close.emit()\">\n    <div class=\"content\">\n      <header>\n        <span class=\"title\">All views</span>\n        <button\n          rivButton\n          [variant]=\"'ghost'\"\n          [icon]=\"'X'\"\n          (click)=\"close.emit()\"\n        ></button>\n      </header>\n\n      <riv-search\n        (valueChange)=\"\n          manager?.actions?.next({\n            type: 'setAllViewsSearchQuery',\n            query: $event\n          })\n        \"\n        [value]=\"s.all.search\"\n        placeholder=\"Search\"\n      ></riv-search>\n\n      <div class=\"views\">\n        <!-- View sections by permission type -->\n        <ng-container\n          *ngIf=\"s.all.privateViews.length > 0\"\n          [ngTemplateOutlet]=\"permissionSection\"\n          [ngTemplateOutletContext]=\"{\n            permission: 'private',\n            open: s.all.privateOpen,\n            openChange: getOpenChange('private'),\n            views: s.all.privateViews,\n            title: getPermissionTitle('private'),\n            description: getPermissionDescription('private')\n          }\"\n        ></ng-container>\n        <ng-container\n          *ngIf=\"s.all.sharedViews.length > 0\"\n          [ngTemplateOutlet]=\"permissionSection\"\n          [ngTemplateOutletContext]=\"{\n            permission: 'shared',\n            open: s.all.sharedOpen,\n            openChange: getOpenChange('shared'),\n            views: s.all.sharedViews,\n            title: getPermissionTitle('shared'),\n            description: getPermissionDescription('shared')\n          }\"\n        ></ng-container>\n        <ng-container\n          *ngIf=\"s.all.publicViews.length > 0\"\n          [ngTemplateOutlet]=\"permissionSection\"\n          [ngTemplateOutletContext]=\"{\n            permission: 'public',\n            open: s.all.publicOpen,\n            openChange: getOpenChange('public'),\n            views: s.all.publicViews,\n            title: getPermissionTitle('public'),\n            description: getPermissionDescription('public')\n          }\"\n        ></ng-container>\n\n        <!-- Permission section -->\n        <ng-template\n          #permissionSection\n          let-permission=\"permission\"\n          let-open=\"open\"\n          let-openChange=\"openChange\"\n          let-views=\"views\"\n          let-title=\"title\"\n          let-description=\"description\"\n        >\n          <div class=\"permission-section\">\n            <button\n              class=\"permission-header\"\n              (click)=\"openChange(!open)\"\n              [disabled]=\"!!s.all.search\"\n            >\n              <div class=\"permission-header-content\">\n                <h3 class=\"permission-title\">{{ title }}</h3>\n                <span class=\"permission-description\">{{ description }}</span>\n              </div>\n              <riv-icon\n                [name]=\"open ? 'ChevronUp' : 'ChevronDown'\"\n                [size]=\"20\"\n              ></riv-icon>\n            </button>\n\n            <div class=\"permission-content\" *ngIf=\"open\">\n              <div class=\"views-list\" *ngIf=\"views.length > 0\">\n                <button\n                  *ngFor=\"let view of views; trackBy: trackById\"\n                  class=\"view-item\"\n                  (click)=\"\n                    manager?.actions?.next({\n                      type: 'setActiveView',\n                      id: view.id,\n                      source: 'menu'\n                    });\n                    close.emit()\n                  \"\n                >\n                  <div class=\"view-title\" rivTruncate>\n                    <riv-highlight\n                      [text]=\"view.title\"\n                      [indices]=\"view.titleHighlightIndices ?? []\"\n                    >\n                    </riv-highlight>\n                  </div>\n                  <riv-view-menu\n                    [manager]=\"manager\"\n                    [view]=\"view\"\n                    [menuContext]=\"'all-views'\"\n                  ></riv-view-menu>\n                  <button\n                    class=\"enable-view\"\n                    [class.enabled]=\"view.enabled && !view.system\"\n                    (click)=\"\n                      $event.stopPropagation();\n                      manager?.actions?.next({\n                        type: 'setEnabled',\n                        id: view.id,\n                        enabled: !view.enabled,\n                        source: 'eyeIcon'\n                      })\n                    \"\n                    [disabled]=\"view.system\"\n                  >\n                    <riv-icon\n                      *ngIf=\"view.enabled\"\n                      [name]=\"view.system ? 'Lock' : 'Eye'\"\n                      [rivTooltip]=\"view.system ? '' : 'Hide tab'\"\n                      [size]=\"20\"\n                    ></riv-icon>\n                    <riv-icon\n                      *ngIf=\"!view.enabled\"\n                      [name]=\"'EyeOff'\"\n                      [rivTooltip]=\"'Show tab'\"\n                      [size]=\"20\"\n                    ></riv-icon>\n                  </button>\n                </button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </div>\n    </div>\n  </riv-side-sheet>\n</ng-container>\n", styles: [".content{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}header{display:flex;justify-content:space-between;align-items:center}.title{font:var(--title-02)}.views{flex-grow:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--size-xlarge);scrollbar-gutter:stable;margin-right:calc(var(--size-medium) * -1)}.permission-section{display:flex;flex-direction:column}.permission-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--size-xsmall);border:none;background:none;cursor:pointer;gap:var(--size-small);border-radius:var(--border-radius-medium);transition:background-color var(--short-transition)}.permission-header:disabled{cursor:default;color:var(--type-light-disabled)}.permission-header:hover:not(:disabled){background-color:var(--surface-light-1)}.permission-header:active:not(:disabled){background-color:var(--surface-light-2)}.permission-header-content{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.permission-title{font:var(--title-02)}.permission-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-content{padding-top:var(--size-small)}.views-list{display:flex;flex-direction:column;gap:var(--size-small)}.view-item{display:flex;align-items:center;padding:var(--size-xsmall);border-radius:var(--border-radius-small);cursor:pointer;background-color:var(--surface-light-0);transition:background-color var(--short-transition)}.view-item:hover{background-color:var(--surface-light-1)}.view-item:active{background-color:var(--surface-light-2)}.view-title{text-align:left;flex-grow:1;font:var(--input-medium)}.view-item riv-view-menu{align-self:flex-end;opacity:0;transition:opacity var(--short-transition)}.view-item:hover riv-view-menu{opacity:1}.enable-view{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;padding-left:var(--size-xsmall);transition:color var(--medium-transition);color:var(--type-light-low-contrast)}.enable-view.enabled{color:var(--type-light-link)}.enable-view.enabled:hover{color:var(--type-light-link-hover)}.enable-view.enabled:active{color:var(--type-light-link-active)}\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", "current"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset", "width", "obscure"], outputs: ["close"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "component", type: TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "component", type: ViewMenuComponent, selector: "riv-view-menu", inputs: ["manager", "view", "menuContext"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: AllViewsModalComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-all-views-modal', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <riv-side-sheet [topOffset]=\"topOffset\" (close)=\"close.emit()\">\n    <div class=\"content\">\n      <header>\n        <span class=\"title\">All views</span>\n        <button\n          rivButton\n          [variant]=\"'ghost'\"\n          [icon]=\"'X'\"\n          (click)=\"close.emit()\"\n        ></button>\n      </header>\n\n      <riv-search\n        (valueChange)=\"\n          manager?.actions?.next({\n            type: 'setAllViewsSearchQuery',\n            query: $event\n          })\n        \"\n        [value]=\"s.all.search\"\n        placeholder=\"Search\"\n      ></riv-search>\n\n      <div class=\"views\">\n        <!-- View sections by permission type -->\n        <ng-container\n          *ngIf=\"s.all.privateViews.length > 0\"\n          [ngTemplateOutlet]=\"permissionSection\"\n          [ngTemplateOutletContext]=\"{\n            permission: 'private',\n            open: s.all.privateOpen,\n            openChange: getOpenChange('private'),\n            views: s.all.privateViews,\n            title: getPermissionTitle('private'),\n            description: getPermissionDescription('private')\n          }\"\n        ></ng-container>\n        <ng-container\n          *ngIf=\"s.all.sharedViews.length > 0\"\n          [ngTemplateOutlet]=\"permissionSection\"\n          [ngTemplateOutletContext]=\"{\n            permission: 'shared',\n            open: s.all.sharedOpen,\n            openChange: getOpenChange('shared'),\n            views: s.all.sharedViews,\n            title: getPermissionTitle('shared'),\n            description: getPermissionDescription('shared')\n          }\"\n        ></ng-container>\n        <ng-container\n          *ngIf=\"s.all.publicViews.length > 0\"\n          [ngTemplateOutlet]=\"permissionSection\"\n          [ngTemplateOutletContext]=\"{\n            permission: 'public',\n            open: s.all.publicOpen,\n            openChange: getOpenChange('public'),\n            views: s.all.publicViews,\n            title: getPermissionTitle('public'),\n            description: getPermissionDescription('public')\n          }\"\n        ></ng-container>\n\n        <!-- Permission section -->\n        <ng-template\n          #permissionSection\n          let-permission=\"permission\"\n          let-open=\"open\"\n          let-openChange=\"openChange\"\n          let-views=\"views\"\n          let-title=\"title\"\n          let-description=\"description\"\n        >\n          <div class=\"permission-section\">\n            <button\n              class=\"permission-header\"\n              (click)=\"openChange(!open)\"\n              [disabled]=\"!!s.all.search\"\n            >\n              <div class=\"permission-header-content\">\n                <h3 class=\"permission-title\">{{ title }}</h3>\n                <span class=\"permission-description\">{{ description }}</span>\n              </div>\n              <riv-icon\n                [name]=\"open ? 'ChevronUp' : 'ChevronDown'\"\n                [size]=\"20\"\n              ></riv-icon>\n            </button>\n\n            <div class=\"permission-content\" *ngIf=\"open\">\n              <div class=\"views-list\" *ngIf=\"views.length > 0\">\n                <button\n                  *ngFor=\"let view of views; trackBy: trackById\"\n                  class=\"view-item\"\n                  (click)=\"\n                    manager?.actions?.next({\n                      type: 'setActiveView',\n                      id: view.id,\n                      source: 'menu'\n                    });\n                    close.emit()\n                  \"\n                >\n                  <div class=\"view-title\" rivTruncate>\n                    <riv-highlight\n                      [text]=\"view.title\"\n                      [indices]=\"view.titleHighlightIndices ?? []\"\n                    >\n                    </riv-highlight>\n                  </div>\n                  <riv-view-menu\n                    [manager]=\"manager\"\n                    [view]=\"view\"\n                    [menuContext]=\"'all-views'\"\n                  ></riv-view-menu>\n                  <button\n                    class=\"enable-view\"\n                    [class.enabled]=\"view.enabled && !view.system\"\n                    (click)=\"\n                      $event.stopPropagation();\n                      manager?.actions?.next({\n                        type: 'setEnabled',\n                        id: view.id,\n                        enabled: !view.enabled,\n                        source: 'eyeIcon'\n                      })\n                    \"\n                    [disabled]=\"view.system\"\n                  >\n                    <riv-icon\n                      *ngIf=\"view.enabled\"\n                      [name]=\"view.system ? 'Lock' : 'Eye'\"\n                      [rivTooltip]=\"view.system ? '' : 'Hide tab'\"\n                      [size]=\"20\"\n                    ></riv-icon>\n                    <riv-icon\n                      *ngIf=\"!view.enabled\"\n                      [name]=\"'EyeOff'\"\n                      [rivTooltip]=\"'Show tab'\"\n                      [size]=\"20\"\n                    ></riv-icon>\n                  </button>\n                </button>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </div>\n    </div>\n  </riv-side-sheet>\n</ng-container>\n", styles: [".content{padding:var(--size-xlarge);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}header{display:flex;justify-content:space-between;align-items:center}.title{font:var(--title-02)}.views{flex-grow:1;overflow-y:auto;display:flex;flex-direction:column;gap:var(--size-xlarge);scrollbar-gutter:stable;margin-right:calc(var(--size-medium) * -1)}.permission-section{display:flex;flex-direction:column}.permission-header{display:flex;justify-content:space-between;align-items:center;width:100%;padding:var(--size-xsmall);border:none;background:none;cursor:pointer;gap:var(--size-small);border-radius:var(--border-radius-medium);transition:background-color var(--short-transition)}.permission-header:disabled{cursor:default;color:var(--type-light-disabled)}.permission-header:hover:not(:disabled){background-color:var(--surface-light-1)}.permission-header:active:not(:disabled){background-color:var(--surface-light-2)}.permission-header-content{display:flex;flex-direction:column;align-items:flex-start;text-align:left}.permission-title{font:var(--title-02)}.permission-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-content{padding-top:var(--size-small)}.views-list{display:flex;flex-direction:column;gap:var(--size-small)}.view-item{display:flex;align-items:center;padding:var(--size-xsmall);border-radius:var(--border-radius-small);cursor:pointer;background-color:var(--surface-light-0);transition:background-color var(--short-transition)}.view-item:hover{background-color:var(--surface-light-1)}.view-item:active{background-color:var(--surface-light-2)}.view-title{text-align:left;flex-grow:1;font:var(--input-medium)}.view-item riv-view-menu{align-self:flex-end;opacity:0;transition:opacity var(--short-transition)}.view-item:hover riv-view-menu{opacity:1}.enable-view{cursor:pointer;display:inline-flex;justify-content:center;align-items:center;padding-left:var(--size-xsmall);transition:color var(--medium-transition);color:var(--type-light-low-contrast)}.enable-view.enabled{color:var(--type-light-link)}.enable-view.enabled:hover{color:var(--type-light-link-hover)}.enable-view.enabled:active{color:var(--type-light-link-active)}\n"] }]
         }], propDecorators: { manager: [{
@@ -6509,9 +6530,9 @@ class ToastComponent {
     }
 }
 ToastComponent.DURATION = 5000;
-ToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ToastComponent, selector: "riv-toast", inputs: { variant: "variant", icon: "icon" }, outputs: { close: "close" }, ngImport: i0, template: "<div *riv-overlay class=\"wrapper\" [attr.data-animation-hook]=\"hook\">\n  <div class=\"toast\" [ngClass]=\"variant\">\n    <riv-icon *ngIf=\"icon\" [name]=\"icon\" [size]=\"16\"></riv-icon>\n    <div class=\"content\"><ng-content></ng-content></div>\n  </div>\n</div>\n", styles: [".wrapper{position:fixed;top:calc(var(--base-grid-size) * 20);left:50%;z-index:var(--toast-z-index)}.toast{transform:translate(-50%);display:inline-flex;align-items:center;justify-content:center;gap:var(--size-small);padding:var(--size-xsmall) var(--size-large);border-radius:calc(var(--base-grid-size) * 8);box-shadow:var(--depth-1);font:var(--body-medium)}.toast.basic{background-color:var(--surface-dark-0);color:var(--type-dark-high-contrast);border:var(--border-width) solid var(--surface-dark-0)}.toast.danger{background-color:var(--danger-main);color:var(--type-dark-high-contrast);border:var(--border-width) solid var(--danger-main)}.toast.safety{background-color:var(--safety-main);color:var(--type-dark-high-contrast);border:var(--border-width) solid var(--safety-main)}.toast.safety-dark{background-color:var(--baja-blast-90);color:var(--type-dark-high-contrast);border:var(--border-width) solid var(--baja-blast-90)}.toast.safety-inverse{background-color:var(--surface-light-safety);color:var(--type-light-safety);border:var(--border-width) solid currentColor}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastComponent, decorators: [{
+ToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToastComponent, selector: "riv-toast", inputs: { variant: "variant", icon: "icon" }, outputs: { close: "close" }, ngImport: i0, template: "<div *riv-overlay class=\"wrapper\" [attr.data-animation-hook]=\"hook\">\n  <div class=\"toast\" [ngClass]=\"variant\">\n    <riv-icon *ngIf=\"icon\" [name]=\"icon\" [size]=\"16\"></riv-icon>\n    <div class=\"content\"><ng-content></ng-content></div>\n  </div>\n</div>\n", styles: [".wrapper{position:fixed;top:calc(var(--base-grid-size) * 20);left:50%;z-index:var(--toast-z-index)}.toast{transform:translate(-50%);display:inline-flex;align-items:center;justify-content:center;gap:var(--size-small);padding:var(--size-xsmall) var(--size-large);border-radius:calc(var(--base-grid-size) * 8);box-shadow:var(--depth-1);font:var(--body-medium)}.toast.basic{background-color:var(--surface-dark-0);color:var(--type-dark-high-contrast);border:var(--border-width) solid var(--surface-dark-0)}.toast.danger{background-color:var(--danger-main);color:var(--type-dark-high-contrast);border:var(--border-width) solid var(--danger-main)}.toast.safety{background-color:var(--safety-main);color:var(--type-dark-high-contrast);border:var(--border-width) solid var(--safety-main)}.toast.safety-dark{background-color:var(--baja-blast-90);color:var(--type-dark-high-contrast);border:var(--border-width) solid var(--baja-blast-90)}.toast.safety-inverse{background-color:var(--surface-light-safety);color:var(--type-light-safety);border:var(--border-width) solid currentColor}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-toast', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *riv-overlay class=\"wrapper\" [attr.data-animation-hook]=\"hook\">\n  <div class=\"toast\" [ngClass]=\"variant\">\n    <riv-icon *ngIf=\"icon\" [name]=\"icon\" [size]=\"16\"></riv-icon>\n    <div class=\"content\"><ng-content></ng-content></div>\n  </div>\n</div>\n", styles: [".wrapper{position:fixed;top:calc(var(--base-grid-size) * 20);left:50%;z-index:var(--toast-z-index)}.toast{transform:translate(-50%);display:inline-flex;align-items:center;justify-content:center;gap:var(--size-small);padding:var(--size-xsmall) var(--size-large);border-radius:calc(var(--base-grid-size) * 8);box-shadow:var(--depth-1);font:var(--body-medium)}.toast.basic{background-color:var(--surface-dark-0);color:var(--type-dark-high-contrast);border:var(--border-width) solid var(--surface-dark-0)}.toast.danger{background-color:var(--danger-main);color:var(--type-dark-high-contrast);border:var(--border-width) solid var(--danger-main)}.toast.safety{background-color:var(--safety-main);color:var(--type-dark-high-contrast);border:var(--border-width) solid var(--safety-main)}.toast.safety-dark{background-color:var(--baja-blast-90);color:var(--type-dark-high-contrast);border:var(--border-width) solid var(--baja-blast-90)}.toast.safety-inverse{background-color:var(--surface-light-safety);color:var(--type-light-safety);border:var(--border-width) solid currentColor}\n"] }]
         }], propDecorators: { variant: [{
@@ -6588,9 +6609,9 @@ class ViewsComponent {
         return RivViews.getPermissionDescription(permission);
     }
 }
-ViewsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ViewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ViewsComponent, selector: "riv-views", inputs: { manager: "manager", sideSheetTopOffset: "sideSheetTopOffset" }, viewQueries: [{ propertyName: "overflowTrigger", first: true, predicate: ["overflowTrigger"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  (rivClientSize)=\"\n    manager?.actions?.next({ type: 'setContainerWidth', width: $event.width })\n  \"\n  class=\"container\"\n>\n  <ng-container *ngIf=\"manager?.state | async; let s\">\n    <ng-container\n      *ngFor=\"let view of s.displayedViews; let i = index; trackBy: trackById\"\n    >\n      <ng-container *ngIf=\"view.active; else inactiveTab\">\n        <riv-view-menu\n          [manager]=\"manager\"\n          [view]=\"view\"\n          [menuContext]=\"'tab'\"\n          class=\"active-menu\"\n        >\n          <ng-template #menuTrigger>\n            <div\n              class=\"tab active\"\n              [class.dragging]=\"draggedTabIndex === i\"\n              [class.dragged-over-left]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex > i\n              \"\n              [class.dragged-over-right]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex < i\n              \"\n              [attr.draggable]=\"!view.system\"\n              [attr.droppable]=\"!view.system\"\n              (dragstart)=\"dragStart(i, view.title, view.system)\"\n              (dragenter)=\"$event.preventDefault()\"\n              (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n              (drop)=\"drop(i, false)\"\n            >\n              <riv-icon\n                class=\"tab-reorder\"\n                [class.hidden-class]=\"view.system\"\n                [name]=\"'Reorder'\"\n                [size]=\"16\"\n              ></riv-icon>\n              <div rivTruncate>\n                {{ view.title }}\n              </div>\n              <riv-icon\n                class=\"permission-icon\"\n                [name]=\"getPermissionIcon(view.permission)\"\n                [size]=\"12\"\n                [rivTooltip]=\"getPermissionDescription(view.permission)\"\n              ></riv-icon>\n            </div>\n          </ng-template>\n        </riv-view-menu>\n      </ng-container>\n      <ng-template #inactiveTab>\n        <button\n          class=\"tab\"\n          [class.dragging]=\"draggedTabIndex === i\"\n          [class.dragged-over-left]=\"\n            draggedOverTabIndex === i &&\n            draggedTabIndex !== null &&\n            draggedTabIndex > i\n          \"\n          [class.dragged-over-right]=\"\n            draggedOverTabIndex === i &&\n            draggedTabIndex !== null &&\n            draggedTabIndex < i\n          \"\n          [attr.draggable]=\"!view.system\"\n          [attr.droppable]=\"!view.system\"\n          (dragstart)=\"dragStart(i, view.title, view.system)\"\n          (dragenter)=\"$event.preventDefault()\"\n          (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n          (drop)=\"drop(i, false)\"\n          (click)=\"\n            manager?.actions?.next({\n              type: 'setActiveView',\n              id: view.id,\n              source: 'tab'\n            })\n          \"\n        >\n          <riv-icon\n            class=\"tab-reorder\"\n            [class.hidden-class]=\"view.system\"\n            [name]=\"'Reorder'\"\n            [size]=\"16\"\n          ></riv-icon>\n          <span rivTruncate>\n            {{ view.title }}\n          </span>\n        </button>\n      </ng-template>\n    </ng-container>\n    <button\n      *ngIf=\"s.allEnabledViews.length - s.displayedViews.length; let count\"\n      class=\"tab overflow\"\n      rivTruncate\n      #overflowTrigger\n      (click)=\"\n        manager?.actions?.next({ type: 'setOverflowPickerOpen', open: true })\n      \"\n    >\n      {{ count | rivNumber }} more\n    </button>\n    <ng-container *ngIf=\"s.overflow.pickerOpen\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"overflowTrigger?.nativeElement\"\n        [isModal]=\"true\"\n        [showCaret]=\"false\"\n        [theme]=\"'light'\"\n        [preferredPosition]=\"'bottom-left'\"\n        (close)=\"\n          manager?.actions?.next({ type: 'setOverflowPickerOpen', open: false })\n        \"\n      >\n        <div class=\"overflow-callout\">\n          <riv-search\n            [value]=\"s.overflow.search\"\n            (valueChange)=\"\n              manager?.actions?.next({\n                type: 'setOverflowSearchQuery',\n                query: $event\n              })\n            \"\n          ></riv-search>\n          <div class=\"overflow-view-list\">\n            <button\n              *ngFor=\"let view of s.enabledViews; let i = index\"\n              class=\"overflow-view\"\n              [class.system]=\"view.system\"\n              [class.dragging]=\"draggedTabIndex === i\"\n              [class.dragged-over-top]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex > i\n              \"\n              [class.dragged-over-bottom]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex < i\n              \"\n              [attr.draggable]=\"!view.system\"\n              [attr.droppable]=\"!view.system\"\n              (dragstart)=\"dragStart(i, view.title, view.system)\"\n              (dragenter)=\"$event.preventDefault()\"\n              (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n              (drop)=\"drop(i, true)\"\n              (click)=\"\n                manager?.actions?.next({\n                  type: 'setActiveView',\n                  id: view.id,\n                  source: 'overflow'\n                });\n                manager?.actions?.next({\n                  type: 'setOverflowPickerOpen',\n                  open: false\n                })\n              \"\n            >\n              <riv-icon\n                *ngIf=\"!view.system\"\n                class=\"overflow-reorder\"\n                [name]=\"'Reorder'\"\n                [size]=\"16\"\n              ></riv-icon>\n              <div class=\"overflow-title\" rivTruncate>\n                <riv-highlight\n                  [indices]=\"view.titleHighlightIndices ?? []\"\n                  [text]=\"view.title\"\n                ></riv-highlight>\n              </div>\n              <riv-view-menu\n                [manager]=\"manager\"\n                [view]=\"view\"\n                [menuContext]=\"'overflow'\"\n              ></riv-view-menu>\n            </button>\n            <riv-zero-state\n              *ngIf=\"!s.enabledViews.length\"\n              [message]=\"'No matching views.'\"\n            ></riv-zero-state>\n          </div>\n        </div>\n      </riv-callout>\n    </ng-container>\n    <div class=\"all-views-button-container\">\n      <button\n        rivButton\n        [variant]=\"'ghost'\"\n        [size]=\"'medium'\"\n        (click)=\"showAllViews = true\"\n      >\n        All views\n      </button>\n    </div>\n  </ng-container>\n</div>\n\n<riv-all-views-modal\n  *ngIf=\"showAllViews\"\n  [manager]=\"manager\"\n  [topOffset]=\"sideSheetTopOffset\"\n  (close)=\"showAllViews = false\"\n></riv-all-views-modal>\n\n<riv-toast *ngIf=\"showLinkCopiedToast | async\" (close)=\"toastClosed.next()\">\n  Link to view copied to clipboard\n</riv-toast>\n", styles: [".container{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,calc(var(--base-grid-size) * 81));justify-content:start;border-bottom:var(--border-width) solid var(--border-light)}.tab{font:var(--input-medium);color:var(--type-light-low-contrast);background-color:var(--surface-light-1);border:var(--border-width) solid var(--border-light);border-bottom:none;border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-large) var(--size-small) 0;cursor:pointer;transition:background-color var(--medium-transition);display:flex;justify-content:flex-start;align-items:center;position:relative}.tab:hover{background-color:var(--surface-light-2)}.tab:active{background-color:var(--surface-light-3)}.tab:not(:first-child),.active-menu{margin-left:calc(var(--border-width) * -1)}.tab.active{color:var(--purp-80);background-color:var(--surface-light-0);border-bottom:var(--border-width) solid var(--surface-light-0);margin-bottom:calc(var(--border-width) * -1);z-index:1;width:100%;max-width:100%;height:100%;max-height:100%}.tab.active:active{border:var(--border-width) solid var(--purp-80)}.tab.dragging{cursor:grabbing}.tab.dragged-over-left:before,.tab.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.tab.dragged-over-left:before{left:0}.tab.dragged-over-right:before{right:0}.tab-reorder{color:var(--type-light-low-contrast);opacity:0;transition:opacity var(--short-transition);cursor:grab;margin:0 var(--size-xsmall)}.tab:hover .tab-reorder{opacity:1}.hidden-class{visibility:hidden}.active-menu{display:inline-flex;color:var(--type-light-link-hover);--size: calc(100% + calc(var(--border-width)));width:var(--size);max-width:var(--size);height:var(--size);max-height:var(--size);cursor:pointer;font:var(--input-medium)}.tab.overflow{padding-left:var(--size-large)}.all-views-button-container{padding:var(--size-xxsmall)}.overflow-callout{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:calc(var(--base-grid-size) * 120);max-height:50vh;width:calc(var(--base-grid-size) * 75);max-width:50vw}.overflow-view-list{display:flex;flex-direction:column;gap:var(--size-small);flex-grow:1;overflow-y:auto}.overflow-view{display:flex;align-items:center;gap:var(--size-small);cursor:pointer;border-radius:var(--border-radius-medium);transition:background-color var(--short-transition);position:relative}.overflow-view.system{padding-left:var(--size-small)}.overflow-view:hover{background-color:var(--surface-light-2)}.overflow-view.dragged-over-top:before,.overflow-view.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.overflow-view.dragged-over-top:before{top:0}.overflow-view.dragged-over-bottom:before{bottom:0}.overflow-reorder{color:var(--type-light-low-contrast);cursor:grab}.overflow-title{flex-grow:1;text-align:left}.permission-icon{color:var(--type-light-low-contrast);margin-left:var(--size-xsmall);flex-shrink:0}.tab.active .permission-icon{color:var(--purp-80)}\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: AllViewsModalComponent, selector: "riv-all-views-modal", inputs: ["manager", "topOffset"], outputs: ["close"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { 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", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "directive", type: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: ToastComponent, selector: "riv-toast", inputs: ["variant", "icon"], outputs: ["close"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "component", type: TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "component", type: ViewMenuComponent, selector: "riv-view-menu", inputs: ["manager", "view", "menuContext"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewsComponent, decorators: [{
+ViewsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ViewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ViewsComponent, selector: "riv-views", inputs: { manager: "manager", sideSheetTopOffset: "sideSheetTopOffset" }, viewQueries: [{ propertyName: "overflowTrigger", first: true, predicate: ["overflowTrigger"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  (rivClientSize)=\"\n    manager?.actions?.next({ type: 'setContainerWidth', width: $event.width })\n  \"\n  class=\"container\"\n>\n  <ng-container *ngIf=\"manager?.state | async; let s\">\n    <ng-container\n      *ngFor=\"let view of s.displayedViews; let i = index; trackBy: trackById\"\n    >\n      <ng-container *ngIf=\"view.active; else inactiveTab\">\n        <riv-view-menu\n          [manager]=\"manager\"\n          [view]=\"view\"\n          [menuContext]=\"'tab'\"\n          class=\"active-menu\"\n        >\n          <ng-template #menuTrigger>\n            <div\n              class=\"tab active\"\n              [class.dragging]=\"draggedTabIndex === i\"\n              [class.dragged-over-left]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex > i\n              \"\n              [class.dragged-over-right]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex < i\n              \"\n              [attr.draggable]=\"!view.system\"\n              [attr.droppable]=\"!view.system\"\n              (dragstart)=\"dragStart(i, view.title, view.system)\"\n              (dragenter)=\"$event.preventDefault()\"\n              (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n              (drop)=\"drop(i, false)\"\n            >\n              <riv-icon\n                class=\"tab-reorder\"\n                [class.hidden-class]=\"view.system\"\n                [name]=\"'Reorder'\"\n                [size]=\"16\"\n              ></riv-icon>\n              <div rivTruncate>\n                {{ view.title }}\n              </div>\n              <riv-icon\n                class=\"permission-icon\"\n                [name]=\"getPermissionIcon(view.permission)\"\n                [size]=\"12\"\n                [rivTooltip]=\"getPermissionDescription(view.permission)\"\n              ></riv-icon>\n            </div>\n          </ng-template>\n        </riv-view-menu>\n      </ng-container>\n      <ng-template #inactiveTab>\n        <button\n          class=\"tab\"\n          [class.dragging]=\"draggedTabIndex === i\"\n          [class.dragged-over-left]=\"\n            draggedOverTabIndex === i &&\n            draggedTabIndex !== null &&\n            draggedTabIndex > i\n          \"\n          [class.dragged-over-right]=\"\n            draggedOverTabIndex === i &&\n            draggedTabIndex !== null &&\n            draggedTabIndex < i\n          \"\n          [attr.draggable]=\"!view.system\"\n          [attr.droppable]=\"!view.system\"\n          (dragstart)=\"dragStart(i, view.title, view.system)\"\n          (dragenter)=\"$event.preventDefault()\"\n          (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n          (drop)=\"drop(i, false)\"\n          (click)=\"\n            manager?.actions?.next({\n              type: 'setActiveView',\n              id: view.id,\n              source: 'tab'\n            })\n          \"\n        >\n          <riv-icon\n            class=\"tab-reorder\"\n            [class.hidden-class]=\"view.system\"\n            [name]=\"'Reorder'\"\n            [size]=\"16\"\n          ></riv-icon>\n          <span rivTruncate>\n            {{ view.title }}\n          </span>\n        </button>\n      </ng-template>\n    </ng-container>\n    <button\n      *ngIf=\"s.allEnabledViews.length - s.displayedViews.length; let count\"\n      class=\"tab overflow\"\n      rivTruncate\n      #overflowTrigger\n      (click)=\"\n        manager?.actions?.next({ type: 'setOverflowPickerOpen', open: true })\n      \"\n    >\n      {{ count | rivNumber }} more\n    </button>\n    <ng-container *ngIf=\"s.overflow.pickerOpen\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"overflowTrigger?.nativeElement\"\n        [isModal]=\"true\"\n        [showCaret]=\"false\"\n        [theme]=\"'light'\"\n        [preferredPosition]=\"'bottom-left'\"\n        (close)=\"\n          manager?.actions?.next({ type: 'setOverflowPickerOpen', open: false })\n        \"\n      >\n        <div class=\"overflow-callout\">\n          <riv-search\n            [value]=\"s.overflow.search\"\n            (valueChange)=\"\n              manager?.actions?.next({\n                type: 'setOverflowSearchQuery',\n                query: $event\n              })\n            \"\n          ></riv-search>\n          <div class=\"overflow-view-list\">\n            <button\n              *ngFor=\"let view of s.enabledViews; let i = index\"\n              class=\"overflow-view\"\n              [class.system]=\"view.system\"\n              [class.dragging]=\"draggedTabIndex === i\"\n              [class.dragged-over-top]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex > i\n              \"\n              [class.dragged-over-bottom]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex < i\n              \"\n              [attr.draggable]=\"!view.system\"\n              [attr.droppable]=\"!view.system\"\n              (dragstart)=\"dragStart(i, view.title, view.system)\"\n              (dragenter)=\"$event.preventDefault()\"\n              (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n              (drop)=\"drop(i, true)\"\n              (click)=\"\n                manager?.actions?.next({\n                  type: 'setActiveView',\n                  id: view.id,\n                  source: 'overflow'\n                });\n                manager?.actions?.next({\n                  type: 'setOverflowPickerOpen',\n                  open: false\n                })\n              \"\n            >\n              <riv-icon\n                *ngIf=\"!view.system\"\n                class=\"overflow-reorder\"\n                [name]=\"'Reorder'\"\n                [size]=\"16\"\n              ></riv-icon>\n              <div class=\"overflow-title\" rivTruncate>\n                <riv-highlight\n                  [indices]=\"view.titleHighlightIndices ?? []\"\n                  [text]=\"view.title\"\n                ></riv-highlight>\n              </div>\n              <riv-view-menu\n                [manager]=\"manager\"\n                [view]=\"view\"\n                [menuContext]=\"'overflow'\"\n              ></riv-view-menu>\n            </button>\n            <riv-zero-state\n              *ngIf=\"!s.enabledViews.length\"\n              [message]=\"'No matching views.'\"\n            ></riv-zero-state>\n          </div>\n        </div>\n      </riv-callout>\n    </ng-container>\n    <div class=\"all-views-button-container\">\n      <button\n        rivButton\n        [variant]=\"'ghost'\"\n        [size]=\"'medium'\"\n        (click)=\"showAllViews = true\"\n      >\n        All views\n      </button>\n    </div>\n  </ng-container>\n</div>\n\n<riv-all-views-modal\n  *ngIf=\"showAllViews\"\n  [manager]=\"manager\"\n  [topOffset]=\"sideSheetTopOffset\"\n  (close)=\"showAllViews = false\"\n></riv-all-views-modal>\n\n<riv-toast *ngIf=\"showLinkCopiedToast | async\" (close)=\"toastClosed.next()\">\n  Link to view copied to clipboard\n</riv-toast>\n", styles: [".container{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,calc(var(--base-grid-size) * 81));justify-content:start;border-bottom:var(--border-width) solid var(--border-light)}.tab{font:var(--input-medium);color:var(--type-light-low-contrast);background-color:var(--surface-light-1);border:var(--border-width) solid var(--border-light);border-bottom:none;border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-large) var(--size-small) 0;cursor:pointer;transition:background-color var(--medium-transition);display:flex;justify-content:flex-start;align-items:center;position:relative}.tab:hover{background-color:var(--surface-light-2)}.tab:active{background-color:var(--surface-light-3)}.tab:not(:first-child),.active-menu{margin-left:calc(var(--border-width) * -1)}.tab.active{color:var(--purp-80);background-color:var(--surface-light-0);border-bottom:var(--border-width) solid var(--surface-light-0);margin-bottom:calc(var(--border-width) * -1);z-index:1;width:100%;max-width:100%;height:100%;max-height:100%}.tab.active:active{border:var(--border-width) solid var(--purp-80)}.tab.dragging{cursor:grabbing}.tab.dragged-over-left:before,.tab.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.tab.dragged-over-left:before{left:0}.tab.dragged-over-right:before{right:0}.tab-reorder{color:var(--type-light-low-contrast);opacity:0;transition:opacity var(--short-transition);cursor:grab;margin:0 var(--size-xsmall)}.tab:hover .tab-reorder{opacity:1}.hidden-class{visibility:hidden}.active-menu{display:inline-flex;color:var(--type-light-link-hover);--size: calc(100% + calc(var(--border-width)));width:var(--size);max-width:var(--size);height:var(--size);max-height:var(--size);cursor:pointer;font:var(--input-medium)}.tab.overflow{padding-left:var(--size-large)}.all-views-button-container{padding:var(--size-xxsmall)}.overflow-callout{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:calc(var(--base-grid-size) * 120);max-height:50vh;width:calc(var(--base-grid-size) * 75);max-width:50vw}.overflow-view-list{display:flex;flex-direction:column;gap:var(--size-small);flex-grow:1;overflow-y:auto}.overflow-view{display:flex;align-items:center;gap:var(--size-small);cursor:pointer;border-radius:var(--border-radius-medium);transition:background-color var(--short-transition);position:relative}.overflow-view.system{padding-left:var(--size-small)}.overflow-view:hover{background-color:var(--surface-light-2)}.overflow-view.dragged-over-top:before,.overflow-view.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.overflow-view.dragged-over-top:before{top:0}.overflow-view.dragged-over-bottom:before{bottom:0}.overflow-reorder{color:var(--type-light-low-contrast);cursor:grab}.overflow-title{flex-grow:1;text-align:left}.permission-icon{color:var(--type-light-low-contrast);margin-left:var(--size-xsmall);flex-shrink:0}.tab.active .permission-icon{color:var(--purp-80)}\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: AllViewsModalComponent, selector: "riv-all-views-modal", inputs: ["manager", "topOffset"], outputs: ["close"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { 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", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "directive", type: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: ToastComponent, selector: "riv-toast", inputs: ["variant", "icon"], outputs: ["close"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "component", type: TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "component", type: ViewMenuComponent, selector: "riv-view-menu", inputs: ["manager", "view", "menuContext"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ViewsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-views', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  (rivClientSize)=\"\n    manager?.actions?.next({ type: 'setContainerWidth', width: $event.width })\n  \"\n  class=\"container\"\n>\n  <ng-container *ngIf=\"manager?.state | async; let s\">\n    <ng-container\n      *ngFor=\"let view of s.displayedViews; let i = index; trackBy: trackById\"\n    >\n      <ng-container *ngIf=\"view.active; else inactiveTab\">\n        <riv-view-menu\n          [manager]=\"manager\"\n          [view]=\"view\"\n          [menuContext]=\"'tab'\"\n          class=\"active-menu\"\n        >\n          <ng-template #menuTrigger>\n            <div\n              class=\"tab active\"\n              [class.dragging]=\"draggedTabIndex === i\"\n              [class.dragged-over-left]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex > i\n              \"\n              [class.dragged-over-right]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex < i\n              \"\n              [attr.draggable]=\"!view.system\"\n              [attr.droppable]=\"!view.system\"\n              (dragstart)=\"dragStart(i, view.title, view.system)\"\n              (dragenter)=\"$event.preventDefault()\"\n              (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n              (drop)=\"drop(i, false)\"\n            >\n              <riv-icon\n                class=\"tab-reorder\"\n                [class.hidden-class]=\"view.system\"\n                [name]=\"'Reorder'\"\n                [size]=\"16\"\n              ></riv-icon>\n              <div rivTruncate>\n                {{ view.title }}\n              </div>\n              <riv-icon\n                class=\"permission-icon\"\n                [name]=\"getPermissionIcon(view.permission)\"\n                [size]=\"12\"\n                [rivTooltip]=\"getPermissionDescription(view.permission)\"\n              ></riv-icon>\n            </div>\n          </ng-template>\n        </riv-view-menu>\n      </ng-container>\n      <ng-template #inactiveTab>\n        <button\n          class=\"tab\"\n          [class.dragging]=\"draggedTabIndex === i\"\n          [class.dragged-over-left]=\"\n            draggedOverTabIndex === i &&\n            draggedTabIndex !== null &&\n            draggedTabIndex > i\n          \"\n          [class.dragged-over-right]=\"\n            draggedOverTabIndex === i &&\n            draggedTabIndex !== null &&\n            draggedTabIndex < i\n          \"\n          [attr.draggable]=\"!view.system\"\n          [attr.droppable]=\"!view.system\"\n          (dragstart)=\"dragStart(i, view.title, view.system)\"\n          (dragenter)=\"$event.preventDefault()\"\n          (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n          (drop)=\"drop(i, false)\"\n          (click)=\"\n            manager?.actions?.next({\n              type: 'setActiveView',\n              id: view.id,\n              source: 'tab'\n            })\n          \"\n        >\n          <riv-icon\n            class=\"tab-reorder\"\n            [class.hidden-class]=\"view.system\"\n            [name]=\"'Reorder'\"\n            [size]=\"16\"\n          ></riv-icon>\n          <span rivTruncate>\n            {{ view.title }}\n          </span>\n        </button>\n      </ng-template>\n    </ng-container>\n    <button\n      *ngIf=\"s.allEnabledViews.length - s.displayedViews.length; let count\"\n      class=\"tab overflow\"\n      rivTruncate\n      #overflowTrigger\n      (click)=\"\n        manager?.actions?.next({ type: 'setOverflowPickerOpen', open: true })\n      \"\n    >\n      {{ count | rivNumber }} more\n    </button>\n    <ng-container *ngIf=\"s.overflow.pickerOpen\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"overflowTrigger?.nativeElement\"\n        [isModal]=\"true\"\n        [showCaret]=\"false\"\n        [theme]=\"'light'\"\n        [preferredPosition]=\"'bottom-left'\"\n        (close)=\"\n          manager?.actions?.next({ type: 'setOverflowPickerOpen', open: false })\n        \"\n      >\n        <div class=\"overflow-callout\">\n          <riv-search\n            [value]=\"s.overflow.search\"\n            (valueChange)=\"\n              manager?.actions?.next({\n                type: 'setOverflowSearchQuery',\n                query: $event\n              })\n            \"\n          ></riv-search>\n          <div class=\"overflow-view-list\">\n            <button\n              *ngFor=\"let view of s.enabledViews; let i = index\"\n              class=\"overflow-view\"\n              [class.system]=\"view.system\"\n              [class.dragging]=\"draggedTabIndex === i\"\n              [class.dragged-over-top]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex > i\n              \"\n              [class.dragged-over-bottom]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex < i\n              \"\n              [attr.draggable]=\"!view.system\"\n              [attr.droppable]=\"!view.system\"\n              (dragstart)=\"dragStart(i, view.title, view.system)\"\n              (dragenter)=\"$event.preventDefault()\"\n              (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n              (drop)=\"drop(i, true)\"\n              (click)=\"\n                manager?.actions?.next({\n                  type: 'setActiveView',\n                  id: view.id,\n                  source: 'overflow'\n                });\n                manager?.actions?.next({\n                  type: 'setOverflowPickerOpen',\n                  open: false\n                })\n              \"\n            >\n              <riv-icon\n                *ngIf=\"!view.system\"\n                class=\"overflow-reorder\"\n                [name]=\"'Reorder'\"\n                [size]=\"16\"\n              ></riv-icon>\n              <div class=\"overflow-title\" rivTruncate>\n                <riv-highlight\n                  [indices]=\"view.titleHighlightIndices ?? []\"\n                  [text]=\"view.title\"\n                ></riv-highlight>\n              </div>\n              <riv-view-menu\n                [manager]=\"manager\"\n                [view]=\"view\"\n                [menuContext]=\"'overflow'\"\n              ></riv-view-menu>\n            </button>\n            <riv-zero-state\n              *ngIf=\"!s.enabledViews.length\"\n              [message]=\"'No matching views.'\"\n            ></riv-zero-state>\n          </div>\n        </div>\n      </riv-callout>\n    </ng-container>\n    <div class=\"all-views-button-container\">\n      <button\n        rivButton\n        [variant]=\"'ghost'\"\n        [size]=\"'medium'\"\n        (click)=\"showAllViews = true\"\n      >\n        All views\n      </button>\n    </div>\n  </ng-container>\n</div>\n\n<riv-all-views-modal\n  *ngIf=\"showAllViews\"\n  [manager]=\"manager\"\n  [topOffset]=\"sideSheetTopOffset\"\n  (close)=\"showAllViews = false\"\n></riv-all-views-modal>\n\n<riv-toast *ngIf=\"showLinkCopiedToast | async\" (close)=\"toastClosed.next()\">\n  Link to view copied to clipboard\n</riv-toast>\n", styles: [".container{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,calc(var(--base-grid-size) * 81));justify-content:start;border-bottom:var(--border-width) solid var(--border-light)}.tab{font:var(--input-medium);color:var(--type-light-low-contrast);background-color:var(--surface-light-1);border:var(--border-width) solid var(--border-light);border-bottom:none;border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-large) var(--size-small) 0;cursor:pointer;transition:background-color var(--medium-transition);display:flex;justify-content:flex-start;align-items:center;position:relative}.tab:hover{background-color:var(--surface-light-2)}.tab:active{background-color:var(--surface-light-3)}.tab:not(:first-child),.active-menu{margin-left:calc(var(--border-width) * -1)}.tab.active{color:var(--purp-80);background-color:var(--surface-light-0);border-bottom:var(--border-width) solid var(--surface-light-0);margin-bottom:calc(var(--border-width) * -1);z-index:1;width:100%;max-width:100%;height:100%;max-height:100%}.tab.active:active{border:var(--border-width) solid var(--purp-80)}.tab.dragging{cursor:grabbing}.tab.dragged-over-left:before,.tab.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.tab.dragged-over-left:before{left:0}.tab.dragged-over-right:before{right:0}.tab-reorder{color:var(--type-light-low-contrast);opacity:0;transition:opacity var(--short-transition);cursor:grab;margin:0 var(--size-xsmall)}.tab:hover .tab-reorder{opacity:1}.hidden-class{visibility:hidden}.active-menu{display:inline-flex;color:var(--type-light-link-hover);--size: calc(100% + calc(var(--border-width)));width:var(--size);max-width:var(--size);height:var(--size);max-height:var(--size);cursor:pointer;font:var(--input-medium)}.tab.overflow{padding-left:var(--size-large)}.all-views-button-container{padding:var(--size-xxsmall)}.overflow-callout{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:calc(var(--base-grid-size) * 120);max-height:50vh;width:calc(var(--base-grid-size) * 75);max-width:50vw}.overflow-view-list{display:flex;flex-direction:column;gap:var(--size-small);flex-grow:1;overflow-y:auto}.overflow-view{display:flex;align-items:center;gap:var(--size-small);cursor:pointer;border-radius:var(--border-radius-medium);transition:background-color var(--short-transition);position:relative}.overflow-view.system{padding-left:var(--size-small)}.overflow-view:hover{background-color:var(--surface-light-2)}.overflow-view.dragged-over-top:before,.overflow-view.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.overflow-view.dragged-over-top:before{top:0}.overflow-view.dragged-over-bottom:before{bottom:0}.overflow-reorder{color:var(--type-light-low-contrast);cursor:grab}.overflow-title{flex-grow:1;text-align:left}.permission-icon{color:var(--type-light-low-contrast);margin-left:var(--size-xsmall);flex-shrink:0}.tab.active .permission-icon{color:var(--purp-80)}\n"] }]
         }], propDecorators: { manager: [{
@@ -6611,9 +6632,9 @@ class BadgeComponent {
         return `${this.size} ${this.variant}`;
     }
 }
-BadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BadgeComponent, selector: "riv-badge", inputs: { variant: "variant", size: "size" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-flex;align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-heavy);white-space:nowrap;border-radius:calc(var(--base-grid-size) * var(--badge-multiplier));min-width:calc(var(--base-grid-size) * var(--badge-multiplier));min-height:calc(var(--base-grid-size) * var(--badge-multiplier));max-width:100%;background-color:var(--badge-background-color)}:host.xsmall{box-shadow:0 0 0 var(--border-width) var(--badge-background-color);padding:0 calc(var(--base-grid-size) * 1.5);--badge-multiplier: 4}:host.small{box-shadow:none;padding:calc(var(--base-grid-size) / 2) calc(var(--base-grid-size) * 2);--badge-multiplier: 5}:host.medium{box-shadow:none;padding:var(--base-grid-size) calc(var(--base-grid-size) * 3);--badge-multiplier: 6}:host.large{box-shadow:none;padding:calc(var(--base-grid-size) * 1.5) calc(var(--base-grid-size) * 3);--badge-multiplier: 6}:host.brand{--badge-background-color: var(--brand);color:var(--white-100)}:host.disabled{--badge-background-color: var(--gray-20);color:var(--gray-60)}:host.qualitative-safety{--badge-background-color: var(--surface-light-safety);color:var(--type-light-safety)}:host.qualitative-caution{--badge-background-color: var(--surface-light-caution);color:var(--type-light-caution)}:host.qualitative-warning{--badge-background-color: var(--surface-light-warning);color:var(--type-light-warning)}:host.qualitative-danger{--badge-background-color: var(--surface-light-danger);color:var(--type-light-danger)}:host.qualitative-danger-inverse{--badge-background-color: var(--surface-dark-danger);color:var(--white-100)}:host.categorical-2{--badge-background-color: var(--baloo-10);color:var(--baloo-90)}:host.categorical-3{--badge-background-color: var(--yella-10);color:var(--yella-90)}:host.categorical-4{--badge-background-color: var(--tang-10);color:var(--tang-90)}:host.categorical-6{--badge-background-color: var(--rosi-10);color:var(--rosi-90)}:host.categorical-7{--badge-background-color: var(--serena-10);color:var(--serena-90)}:host.categorical-8{--badge-background-color: var(--teal-diamond-10);color:var(--teal-diamond-90)}:host.categorical-9{--badge-background-color: var(--purp-10);color:var(--purp-90)}:host.categorical-10{--badge-background-color: var(--arnge-10);color:var(--arnge-90)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BadgeComponent, decorators: [{
+BadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BadgeComponent, selector: "riv-badge", inputs: { variant: "variant", size: "size" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-flex;align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-heavy);white-space:nowrap;border-radius:calc(var(--base-grid-size) * var(--badge-multiplier));min-width:calc(var(--base-grid-size) * var(--badge-multiplier));min-height:calc(var(--base-grid-size) * var(--badge-multiplier));max-width:100%;background-color:var(--badge-background-color)}:host.xsmall{box-shadow:0 0 0 var(--border-width) var(--badge-background-color);padding:0 calc(var(--base-grid-size) * 1.5);--badge-multiplier: 4}:host.small{box-shadow:none;padding:calc(var(--base-grid-size) / 2) calc(var(--base-grid-size) * 2);--badge-multiplier: 5}:host.medium{box-shadow:none;padding:var(--base-grid-size) calc(var(--base-grid-size) * 3);--badge-multiplier: 6}:host.large{box-shadow:none;padding:calc(var(--base-grid-size) * 1.5) calc(var(--base-grid-size) * 3);--badge-multiplier: 6}:host.brand{--badge-background-color: var(--brand);color:var(--white-100)}:host.disabled{--badge-background-color: var(--gray-20);color:var(--gray-60)}:host.qualitative-safety{--badge-background-color: var(--surface-light-safety);color:var(--type-light-safety)}:host.qualitative-caution{--badge-background-color: var(--surface-light-caution);color:var(--type-light-caution)}:host.qualitative-warning{--badge-background-color: var(--surface-light-warning);color:var(--type-light-warning)}:host.qualitative-danger{--badge-background-color: var(--surface-light-danger);color:var(--type-light-danger)}:host.qualitative-danger-inverse{--badge-background-color: var(--surface-dark-danger);color:var(--white-100)}:host.categorical-2{--badge-background-color: var(--baloo-10);color:var(--baloo-90)}:host.categorical-3{--badge-background-color: var(--yella-10);color:var(--yella-90)}:host.categorical-4{--badge-background-color: var(--tang-10);color:var(--tang-90)}:host.categorical-6{--badge-background-color: var(--rosi-10);color:var(--rosi-90)}:host.categorical-7{--badge-background-color: var(--serena-10);color:var(--serena-90)}:host.categorical-8{--badge-background-color: var(--teal-diamond-10);color:var(--teal-diamond-90)}:host.categorical-9{--badge-background-color: var(--purp-10);color:var(--purp-90)}:host.categorical-10{--badge-background-color: var(--arnge-10);color:var(--arnge-90)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-badge', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-flex;align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-heavy);white-space:nowrap;border-radius:calc(var(--base-grid-size) * var(--badge-multiplier));min-width:calc(var(--base-grid-size) * var(--badge-multiplier));min-height:calc(var(--base-grid-size) * var(--badge-multiplier));max-width:100%;background-color:var(--badge-background-color)}:host.xsmall{box-shadow:0 0 0 var(--border-width) var(--badge-background-color);padding:0 calc(var(--base-grid-size) * 1.5);--badge-multiplier: 4}:host.small{box-shadow:none;padding:calc(var(--base-grid-size) / 2) calc(var(--base-grid-size) * 2);--badge-multiplier: 5}:host.medium{box-shadow:none;padding:var(--base-grid-size) calc(var(--base-grid-size) * 3);--badge-multiplier: 6}:host.large{box-shadow:none;padding:calc(var(--base-grid-size) * 1.5) calc(var(--base-grid-size) * 3);--badge-multiplier: 6}:host.brand{--badge-background-color: var(--brand);color:var(--white-100)}:host.disabled{--badge-background-color: var(--gray-20);color:var(--gray-60)}:host.qualitative-safety{--badge-background-color: var(--surface-light-safety);color:var(--type-light-safety)}:host.qualitative-caution{--badge-background-color: var(--surface-light-caution);color:var(--type-light-caution)}:host.qualitative-warning{--badge-background-color: var(--surface-light-warning);color:var(--type-light-warning)}:host.qualitative-danger{--badge-background-color: var(--surface-light-danger);color:var(--type-light-danger)}:host.qualitative-danger-inverse{--badge-background-color: var(--surface-dark-danger);color:var(--white-100)}:host.categorical-2{--badge-background-color: var(--baloo-10);color:var(--baloo-90)}:host.categorical-3{--badge-background-color: var(--yella-10);color:var(--yella-90)}:host.categorical-4{--badge-background-color: var(--tang-10);color:var(--tang-90)}:host.categorical-6{--badge-background-color: var(--rosi-10);color:var(--rosi-90)}:host.categorical-7{--badge-background-color: var(--serena-10);color:var(--serena-90)}:host.categorical-8{--badge-background-color: var(--teal-diamond-10);color:var(--teal-diamond-90)}:host.categorical-9{--badge-background-color: var(--purp-10);color:var(--purp-90)}:host.categorical-10{--badge-background-color: var(--arnge-10);color:var(--arnge-90)}\n"] }]
         }], propDecorators: { variant: [{
@@ -6675,9 +6696,9 @@ class BannerActionComponent {
         }
     }
 }
-BannerActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BannerActionComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-BannerActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BannerActionComponent, selector: "[riv-banner-action]", inputs: { locked: "locked", disabled: "disabled" }, host: { properties: { "class.disabled": "this.isDisabled" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n<riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n", styles: [":host{display:inline-block;color:var(--type-light-link);text-decoration:underline;cursor:pointer;font:var(--body-medium)}:host:disabled,:host.disabled{color:var(--type-light-disabled);cursor:default}riv-icon{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BannerActionComponent, decorators: [{
+BannerActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BannerActionComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+BannerActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BannerActionComponent, selector: "[riv-banner-action]", inputs: { locked: "locked", disabled: "disabled" }, host: { properties: { "class.disabled": "this.isDisabled" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n<riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n", styles: [":host{display:inline-block;color:var(--type-light-link);text-decoration:underline;cursor:pointer;font:var(--body-medium)}:host:disabled,:host.disabled{color:var(--type-light-disabled);cursor:default}riv-icon{vertical-align:middle}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BannerActionComponent, decorators: [{
             type: Component,
             args: [{ selector: '[riv-banner-action]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n", styles: [":host{display:inline-block;color:var(--type-light-link);text-decoration:underline;cursor:pointer;font:var(--body-medium)}:host:disabled,:host.disabled{color:var(--type-light-disabled);cursor:default}riv-icon{vertical-align:middle}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { locked: [{
@@ -6717,9 +6738,9 @@ class BannerComponent {
         return this.icon;
     }
 }
-BannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: BannerComponent, selector: "riv-banner", inputs: { variant: "variant", icon: "icon", iconTooltip: "iconTooltip", heading: "heading", dismissable: "dismissable" }, outputs: { dismiss: "dismiss" }, host: { properties: { "class": "this.variant", "class.has-heading": "this.hasHeading" } }, ngImport: i0, template: "<riv-icon\n  *ngIf=\"getResolvedIcon(); let icon\"\n  [name]=\"icon\"\n  [rivTooltip]=\"iconTooltip\"\n  [size]=\"20\"\n  class=\"icon\"\n></riv-icon>\n<div *ngIf=\"hasHeading\" class=\"heading\">{{ heading }}</div>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<button *ngIf=\"dismissable\" class=\"dismiss\" (click)=\"dismiss.emit()\">\n  <riv-icon [name]=\"'X'\" [size]=\"20\"></riv-icon>\n</button>\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--size-large);padding:var(--size-large);border-radius:var(--border-radius-medium);box-shadow:var(--depth-1);color:var(--type-light-high-contrast);border-left-style:solid;border-left-width:var(--size-small);border-left-color:var(--banner-accent)}:host .icon{color:var(--banner-accent)}:host.has-heading{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:\"icon heading close\" \".    content .\";column-gap:var(--size-large);row-gap:0;align-items:start}:host.has-heading .icon{grid-area:icon}:host.has-heading .heading{grid-area:heading}:host.has-heading .content{grid-area:content}:host.has-heading .dismiss{grid-area:close}.heading{font:var(--body-medium);font-weight:var(--font-weight-heavy);line-height:var(--type-2-line-height-2)}:host.info{background-color:var(--purp-10);--banner-accent: var(--purp-80)}:host.safety{background-color:var(--safety-light);--banner-accent: var(--safety-dark)}:host.warning{background-color:var(--caution-light);--banner-accent: var(--tang-70)}:host.danger{background-color:var(--danger-light);--banner-accent: var(--danger-main)}.icon{margin:var(--size-xxsmall);flex-shrink:0}.content{flex-grow:1;font:var(--body-medium)}.dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--size-xxsmall);cursor:pointer;transition:background-color var(--short-transition);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast)}.dismiss:hover{background-color:var(--black-20)}.dismiss:active{background-color:var(--black-30)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: BannerComponent, decorators: [{
+BannerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BannerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: BannerComponent, selector: "riv-banner", inputs: { variant: "variant", icon: "icon", iconTooltip: "iconTooltip", heading: "heading", dismissable: "dismissable" }, outputs: { dismiss: "dismiss" }, host: { properties: { "class": "this.variant", "class.has-heading": "this.hasHeading" } }, ngImport: i0, template: "<riv-icon\n  *ngIf=\"getResolvedIcon(); let icon\"\n  [name]=\"icon\"\n  [rivTooltip]=\"iconTooltip\"\n  [size]=\"20\"\n  class=\"icon\"\n></riv-icon>\n<div *ngIf=\"hasHeading\" class=\"heading\">{{ heading }}</div>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<button *ngIf=\"dismissable\" class=\"dismiss\" (click)=\"dismiss.emit()\">\n  <riv-icon [name]=\"'X'\" [size]=\"20\"></riv-icon>\n</button>\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--size-large);padding:var(--size-large);border-radius:var(--border-radius-medium);box-shadow:var(--depth-1);color:var(--type-light-high-contrast);border-left-style:solid;border-left-width:var(--size-small);border-left-color:var(--banner-accent)}:host .icon{color:var(--banner-accent)}:host.has-heading{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:\"icon heading close\" \".    content .\";column-gap:var(--size-large);row-gap:0;align-items:start}:host.has-heading .icon{grid-area:icon}:host.has-heading .heading{grid-area:heading}:host.has-heading .content{grid-area:content}:host.has-heading .dismiss{grid-area:close}.heading{font:var(--body-medium);font-weight:var(--font-weight-heavy);line-height:var(--type-2-line-height-2)}:host.info{background-color:var(--purp-10);--banner-accent: var(--purp-80)}:host.safety{background-color:var(--safety-light);--banner-accent: var(--safety-dark)}:host.warning{background-color:var(--caution-light);--banner-accent: var(--tang-70)}:host.danger{background-color:var(--danger-light);--banner-accent: var(--danger-main)}.icon{margin:var(--size-xxsmall);flex-shrink:0}.content{flex-grow:1;font:var(--body-medium)}.dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--size-xxsmall);cursor:pointer;transition:background-color var(--short-transition);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast)}.dismiss:hover{background-color:var(--black-20)}.dismiss:active{background-color:var(--black-30)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: BannerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-banner', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-icon\n  *ngIf=\"getResolvedIcon(); let icon\"\n  [name]=\"icon\"\n  [rivTooltip]=\"iconTooltip\"\n  [size]=\"20\"\n  class=\"icon\"\n></riv-icon>\n<div *ngIf=\"hasHeading\" class=\"heading\">{{ heading }}</div>\n<div class=\"content\">\n  <ng-content></ng-content>\n</div>\n<button *ngIf=\"dismissable\" class=\"dismiss\" (click)=\"dismiss.emit()\">\n  <riv-icon [name]=\"'X'\" [size]=\"20\"></riv-icon>\n</button>\n", styles: [":host{display:flex;align-items:flex-start;gap:var(--size-large);padding:var(--size-large);border-radius:var(--border-radius-medium);box-shadow:var(--depth-1);color:var(--type-light-high-contrast);border-left-style:solid;border-left-width:var(--size-small);border-left-color:var(--banner-accent)}:host .icon{color:var(--banner-accent)}:host.has-heading{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:\"icon heading close\" \".    content .\";column-gap:var(--size-large);row-gap:0;align-items:start}:host.has-heading .icon{grid-area:icon}:host.has-heading .heading{grid-area:heading}:host.has-heading .content{grid-area:content}:host.has-heading .dismiss{grid-area:close}.heading{font:var(--body-medium);font-weight:var(--font-weight-heavy);line-height:var(--type-2-line-height-2)}:host.info{background-color:var(--purp-10);--banner-accent: var(--purp-80)}:host.safety{background-color:var(--safety-light);--banner-accent: var(--safety-dark)}:host.warning{background-color:var(--caution-light);--banner-accent: var(--tang-70)}:host.danger{background-color:var(--danger-light);--banner-accent: var(--danger-main)}.icon{margin:var(--size-xxsmall);flex-shrink:0}.content{flex-grow:1;font:var(--body-medium)}.dismiss{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;padding:var(--size-xxsmall);cursor:pointer;transition:background-color var(--short-transition);border-radius:var(--border-radius-small);color:var(--type-light-high-contrast)}.dismiss:hover{background-color:var(--black-20)}.dismiss:active{background-color:var(--black-30)}\n"] }]
         }], propDecorators: { variant: [{
@@ -6793,9 +6814,9 @@ class MapIndicatorComponent {
         }
     }
 }
-MapIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MapIndicatorComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-MapIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MapIndicatorComponent, selector: "riv-map-indicator", inputs: { name: "name", icons: "icons" }, ngImport: i0, template: "<ng-container\n  *ngIf=\"nameValue === 'SingleSmall' || nameValue === 'SingleRegular'\"\n>\n  <riv-icon\n    *ngIf=\"icons.length >= 1\"\n    class=\"single-icon\"\n    [style.color]=\"icons[0].color\"\n    [style.rotate]=\"icons[0].rotation\"\n    [fillColor]=\"icons[0].color ? 'currentColor' : undefined\"\n    [name]=\"icons[0].iconName\"\n    [customSize]=\"nameValue === 'SingleSmall' ? 10 : 14\"\n  ></riv-icon>\n</ng-container>\n\n<ng-container\n  *ngIf=\"nameValue === 'DoubleSmall' || nameValue === 'DoubleRegular'\"\n>\n  <riv-icon\n    *ngIf=\"icons.length >= 1\"\n    class=\"double-icon-left\"\n    [style.color]=\"icons[0].color\"\n    [style.rotate]=\"icons[0].rotation\"\n    [name]=\"icons[0].iconName\"\n    [customSize]=\"nameValue === 'DoubleSmall' ? 10 : 14\"\n    [fillColor]=\"icons[0].color ? 'currentColor' : undefined\"\n  ></riv-icon>\n\n  <riv-icon\n    *ngIf=\"icons.length >= 2\"\n    class=\"double-icon-right\"\n    [style.color]=\"icons[1].color\"\n    [style.rotate]=\"icons[1].rotation\"\n    [name]=\"icons[1].iconName\"\n    [customSize]=\"nameValue === 'DoubleSmall' ? 10 : 14\"\n    [fillColor]=\"icons[1].color ? 'currentColor' : undefined\"\n  ></riv-icon>\n</ng-container>\n", styles: [":host{position:relative;display:inline-flex}.single-icon{position:absolute;top:10%;left:10%}.double-icon-left{position:absolute;top:20%;left:10%}.double-icon-right{position:absolute;top:20%;left:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MapIndicatorComponent, decorators: [{
+MapIndicatorComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapIndicatorComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+MapIndicatorComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MapIndicatorComponent, selector: "riv-map-indicator", inputs: { name: "name", icons: "icons" }, ngImport: i0, template: "<ng-container\n  *ngIf=\"nameValue === 'SingleSmall' || nameValue === 'SingleRegular'\"\n>\n  <riv-icon\n    *ngIf=\"icons.length >= 1\"\n    class=\"single-icon\"\n    [style.color]=\"icons[0].color\"\n    [style.rotate]=\"icons[0].rotation\"\n    [fillColor]=\"icons[0].color ? 'currentColor' : undefined\"\n    [name]=\"icons[0].iconName\"\n    [customSize]=\"nameValue === 'SingleSmall' ? 10 : 14\"\n  ></riv-icon>\n</ng-container>\n\n<ng-container\n  *ngIf=\"nameValue === 'DoubleSmall' || nameValue === 'DoubleRegular'\"\n>\n  <riv-icon\n    *ngIf=\"icons.length >= 1\"\n    class=\"double-icon-left\"\n    [style.color]=\"icons[0].color\"\n    [style.rotate]=\"icons[0].rotation\"\n    [name]=\"icons[0].iconName\"\n    [customSize]=\"nameValue === 'DoubleSmall' ? 10 : 14\"\n    [fillColor]=\"icons[0].color ? 'currentColor' : undefined\"\n  ></riv-icon>\n\n  <riv-icon\n    *ngIf=\"icons.length >= 2\"\n    class=\"double-icon-right\"\n    [style.color]=\"icons[1].color\"\n    [style.rotate]=\"icons[1].rotation\"\n    [name]=\"icons[1].iconName\"\n    [customSize]=\"nameValue === 'DoubleSmall' ? 10 : 14\"\n    [fillColor]=\"icons[1].color ? 'currentColor' : undefined\"\n  ></riv-icon>\n</ng-container>\n", styles: [":host{position:relative;display:inline-flex}.single-icon{position:absolute;top:10%;left:10%}.double-icon-left{position:absolute;top:20%;left:10%}.double-icon-right{position:absolute;top:20%;left:50%}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MapIndicatorComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-map-indicator', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container\n  *ngIf=\"nameValue === 'SingleSmall' || nameValue === 'SingleRegular'\"\n>\n  <riv-icon\n    *ngIf=\"icons.length >= 1\"\n    class=\"single-icon\"\n    [style.color]=\"icons[0].color\"\n    [style.rotate]=\"icons[0].rotation\"\n    [fillColor]=\"icons[0].color ? 'currentColor' : undefined\"\n    [name]=\"icons[0].iconName\"\n    [customSize]=\"nameValue === 'SingleSmall' ? 10 : 14\"\n  ></riv-icon>\n</ng-container>\n\n<ng-container\n  *ngIf=\"nameValue === 'DoubleSmall' || nameValue === 'DoubleRegular'\"\n>\n  <riv-icon\n    *ngIf=\"icons.length >= 1\"\n    class=\"double-icon-left\"\n    [style.color]=\"icons[0].color\"\n    [style.rotate]=\"icons[0].rotation\"\n    [name]=\"icons[0].iconName\"\n    [customSize]=\"nameValue === 'DoubleSmall' ? 10 : 14\"\n    [fillColor]=\"icons[0].color ? 'currentColor' : undefined\"\n  ></riv-icon>\n\n  <riv-icon\n    *ngIf=\"icons.length >= 2\"\n    class=\"double-icon-right\"\n    [style.color]=\"icons[1].color\"\n    [style.rotate]=\"icons[1].rotation\"\n    [name]=\"icons[1].iconName\"\n    [customSize]=\"nameValue === 'DoubleSmall' ? 10 : 14\"\n    [fillColor]=\"icons[1].color ? 'currentColor' : undefined\"\n  ></riv-icon>\n</ng-container>\n", styles: [":host{position:relative;display:inline-flex}.single-icon{position:absolute;top:10%;left:10%}.double-icon-left{position:absolute;top:20%;left:10%}.double-icon-right{position:absolute;top:20%;left:50%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { name: [{
@@ -6810,9 +6831,9 @@ class NotificationBadgeComponent {
         this.variant = 'basic';
     }
 }
-NotificationBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-NotificationBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: NotificationBadgeComponent, selector: "riv-notification-badge", inputs: { count: "count", variant: "variant" }, host: { properties: { "class": "this.variant" } }, ngImport: i0, template: '{{ count === null ? null : (count | rivNumber) }}', isInline: true, styles: [":host{display:inline-flex}:host:not(:empty){font-size:calc(var(--base-grid-size) * 2);line-height:calc(var(--base-grid-size) * 2);font-weight:var(--font-weight-heavy);padding:var(--size-xxsmall) var(--size-xsmall);color:var(--gray-20);border-radius:calc(var(--base-grid-size) * 4)}:host:empty{width:calc(var(--base-grid-size) * 2);height:calc(var(--base-grid-size) * 2);border-radius:calc(var(--base-grid-size) * 2)}:host(.basic){background-color:var(--fyre-70)}:host(.brand){background-color:var(--brand)}\n"], dependencies: [{ kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: NotificationBadgeComponent, decorators: [{
+NotificationBadgeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+NotificationBadgeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: NotificationBadgeComponent, selector: "riv-notification-badge", inputs: { count: "count", variant: "variant" }, host: { properties: { "class": "this.variant" } }, ngImport: i0, template: '{{ count === null ? null : (count | rivNumber) }}', isInline: true, styles: [":host{display:inline-flex}:host:not(:empty){font-size:calc(var(--base-grid-size) * 2);line-height:calc(var(--base-grid-size) * 2);font-weight:var(--font-weight-heavy);padding:var(--size-xxsmall) var(--size-xsmall);color:var(--gray-20);border-radius:calc(var(--base-grid-size) * 4)}:host:empty{width:calc(var(--base-grid-size) * 2);height:calc(var(--base-grid-size) * 2);border-radius:calc(var(--base-grid-size) * 2)}:host(.basic){background-color:var(--fyre-70)}:host(.brand){background-color:var(--brand)}\n"], dependencies: [{ kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: NotificationBadgeComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-notification-badge', template: '{{ count === null ? null : (count | rivNumber) }}', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-flex}:host:not(:empty){font-size:calc(var(--base-grid-size) * 2);line-height:calc(var(--base-grid-size) * 2);font-weight:var(--font-weight-heavy);padding:var(--size-xxsmall) var(--size-xsmall);color:var(--gray-20);border-radius:calc(var(--base-grid-size) * 4)}:host:empty{width:calc(var(--base-grid-size) * 2);height:calc(var(--base-grid-size) * 2);border-radius:calc(var(--base-grid-size) * 2)}:host(.basic){background-color:var(--fyre-70)}:host(.brand){background-color:var(--brand)}\n"] }]
         }], propDecorators: { count: [{
@@ -6841,9 +6862,9 @@ class LockedTooltipDirective extends TooltipDirective {
         }
     }
 }
-LockedTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LockedTooltipDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
-LockedTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: LockedTooltipDirective, selector: "[rivLockedTooltip]", inputs: { rivLockedTooltip: "rivLockedTooltip", locked: "locked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LockedTooltipDirective, decorators: [{
+LockedTooltipDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LockedTooltipDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive });
+LockedTooltipDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: LockedTooltipDirective, selector: "[rivLockedTooltip]", inputs: { rivLockedTooltip: "rivLockedTooltip", locked: "locked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LockedTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rivLockedTooltip]',
@@ -6856,9 +6877,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class ToastActionComponent {
 }
-ToastActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToastActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ToastActionComponent, selector: "[riv-toast-action]", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline;color:currentColor;text-decoration:underline;cursor:pointer;font:var(--body-medium)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ToastActionComponent, decorators: [{
+ToastActionComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToastActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToastActionComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ToastActionComponent, selector: "[riv-toast-action]", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline;color:currentColor;text-decoration:underline;cursor:pointer;font:var(--body-medium)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ToastActionComponent, decorators: [{
             type: Component,
             args: [{ selector: '[riv-toast-action]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:inline;color:currentColor;text-decoration:underline;cursor:pointer;font:var(--body-medium)}\n"] }]
         }] });
@@ -6884,9 +6905,9 @@ class SimpleTableCellComponent {
         return null;
     }
 }
-SimpleTableCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SimpleTableCellComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SimpleTableCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SimpleTableCellComponent, selector: "[riv-simple-table-cell]", host: { properties: { "class": "this.classes", "style.left.px": "this.leftPx" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{height:calc(var(--base-grid-size) * 8);padding:var(--size-xxsmall) var(--size-small);font:var(--body-small);vertical-align:middle;background-color:inherit}:host:not(.last-row){border-bottom:var(--border-width) solid var(--border-light)}:host.pinned{position:sticky;z-index:var(--above-scroll-z-index)}\n", ":host.left{text-align:left}:host.center{text-align:center}:host.right{text-align:right}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SimpleTableCellComponent, decorators: [{
+SimpleTableCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SimpleTableCellComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SimpleTableCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SimpleTableCellComponent, selector: "[riv-simple-table-cell]", host: { properties: { "class": "this.classes", "style.left.px": "this.leftPx" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{height:calc(var(--base-grid-size) * 8);padding:var(--size-xxsmall) var(--size-small);font:var(--body-small);vertical-align:middle;background-color:inherit}:host:not(.last-row){border-bottom:var(--border-width) solid var(--border-light)}:host.pinned{position:sticky;z-index:var(--above-scroll-z-index)}\n", ":host.left{text-align:left}:host.center{text-align:center}:host.right{text-align:right}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SimpleTableCellComponent, decorators: [{
             type: Component,
             args: [{ selector: '[riv-simple-table-cell]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{height:calc(var(--base-grid-size) * 8);padding:var(--size-xxsmall) var(--size-small);font:var(--body-small);vertical-align:middle;background-color:inherit}:host:not(.last-row){border-bottom:var(--border-width) solid var(--border-light)}:host.pinned{position:sticky;z-index:var(--above-scroll-z-index)}\n", ":host.left{text-align:left}:host.center{text-align:center}:host.right{text-align:right}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { classes: [{
@@ -6915,9 +6936,9 @@ class SimpleTableHeaderCellComponent {
         return this.elementRef.nativeElement.offsetWidth;
     }
 }
-SimpleTableHeaderCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SimpleTableHeaderCellComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-SimpleTableHeaderCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SimpleTableHeaderCellComponent, selector: "[riv-simple-table-header-cell]", inputs: { dataType: "dataType", pinned: "pinned" }, host: { properties: { "class": "this.classes", "style.left.px": "this.leftPx" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);padding:var(--size-xxsmall) var(--size-small);position:sticky;top:0;font-size:var(--size-medium);font-weight:var(--font-weight-heavy);line-height:1;padding:var(--size-xsmall) var(--size-small);vertical-align:middle;height:calc(var(--base-grid-size) * 8);white-space:nowrap}:host.pinned{z-index:var(--above-scroll-z-index)}:host:not(:last-child){border-right:var(--border-width) solid var(--border-light)}\n", ":host.left{text-align:left}:host.center{text-align:center}:host.right{text-align:right}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SimpleTableHeaderCellComponent, decorators: [{
+SimpleTableHeaderCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SimpleTableHeaderCellComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+SimpleTableHeaderCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SimpleTableHeaderCellComponent, selector: "[riv-simple-table-header-cell]", inputs: { dataType: "dataType", pinned: "pinned" }, host: { properties: { "class": "this.classes", "style.left.px": "this.leftPx" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);padding:var(--size-xxsmall) var(--size-small);position:sticky;top:0;font-size:var(--size-medium);font-weight:var(--font-weight-heavy);line-height:1;padding:var(--size-xsmall) var(--size-small);vertical-align:middle;height:calc(var(--base-grid-size) * 8);white-space:nowrap}:host.pinned{z-index:var(--above-scroll-z-index)}:host:not(:last-child){border-right:var(--border-width) solid var(--border-light)}\n", ":host.left{text-align:left}:host.center{text-align:center}:host.right{text-align:right}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SimpleTableHeaderCellComponent, decorators: [{
             type: Component,
             args: [{ selector: '[riv-simple-table-header-cell]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);padding:var(--size-xxsmall) var(--size-small);position:sticky;top:0;font-size:var(--size-medium);font-weight:var(--font-weight-heavy);line-height:1;padding:var(--size-xsmall) var(--size-small);vertical-align:middle;height:calc(var(--base-grid-size) * 8);white-space:nowrap}:host.pinned{z-index:var(--above-scroll-z-index)}:host:not(:last-child){border-right:var(--border-width) solid var(--border-light)}\n", ":host.left{text-align:left}:host.center{text-align:center}:host.right{text-align:right}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { dataType: [{
@@ -6937,9 +6958,9 @@ class SimpleTableRowComponent {
         this.selected = false;
     }
 }
-SimpleTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SimpleTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SimpleTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SimpleTableRowComponent, selector: "[riv-simple-table-row]", inputs: { selected: "selected" }, host: { properties: { "class.selected": "this.selected" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:table-row;text-decoration:none;color:inherit;background-color:var(--surface-light-0);transition:background-color var(--short-transition)}:host(a),:host(button){cursor:pointer}:host(a):hover,:host(button):hover{background-color:var(--surface-light-2)}:host(a):active,:host(button):active{background-color:var(--surface-light-3)}:host.selected{background-color:var(--surface-light-selected)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SimpleTableRowComponent, decorators: [{
+SimpleTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SimpleTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SimpleTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SimpleTableRowComponent, selector: "[riv-simple-table-row]", inputs: { selected: "selected" }, host: { properties: { "class.selected": "this.selected" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:table-row;text-decoration:none;color:inherit;background-color:var(--surface-light-0);transition:background-color var(--short-transition)}:host(a),:host(button){cursor:pointer}:host(a):hover,:host(button):hover{background-color:var(--surface-light-2)}:host(a):active,:host(button):active{background-color:var(--surface-light-3)}:host.selected{background-color:var(--surface-light-selected)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SimpleTableRowComponent, decorators: [{
             type: Component,
             args: [{ selector: '[riv-simple-table-row]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:table-row;text-decoration:none;color:inherit;background-color:var(--surface-light-0);transition:background-color var(--short-transition)}:host(a),:host(button){cursor:pointer}:host(a):hover,:host(button):hover{background-color:var(--surface-light-2)}:host(a):active,:host(button):active{background-color:var(--surface-light-3)}:host.selected{background-color:var(--surface-light-selected)}\n"] }]
         }], propDecorators: { selected: [{
@@ -8448,9 +8469,9 @@ class SimpleTableComponent {
         });
     }
 }
-SimpleTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SimpleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-SimpleTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SimpleTableComponent, selector: "riv-simple-table", queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "headerCells", predicate: SimpleTableHeaderCellComponent, descendants: true }, { propertyName: "dataCells", predicate: SimpleTableCellComponent, descendants: true }], ngImport: i0, template: "<header *ngIf=\"headerTemplate\">\n  <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n</header>\n<div class=\"container\">\n  <table>\n    <ng-content></ng-content>\n  </table>\n</div>\n", styles: [":host{display:grid;width:100%;min-height:0}header{border-width:var(--border-width) var(--border-width) 0 var(--border-width);border-style:solid;border-color:var(--border-light);border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium)}header+.container{border-top-left-radius:0;border-top-right-radius:0}.container{border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-medium);overflow:auto}table{border-collapse:separate;width:100%;table-layout:fixed}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SimpleTableComponent, decorators: [{
+SimpleTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SimpleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+SimpleTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: SimpleTableComponent, selector: "riv-simple-table", queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "headerCells", predicate: SimpleTableHeaderCellComponent, descendants: true }, { propertyName: "dataCells", predicate: SimpleTableCellComponent, descendants: true }], ngImport: i0, template: "<header *ngIf=\"headerTemplate\">\n  <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n</header>\n<div class=\"container\">\n  <table>\n    <ng-content></ng-content>\n  </table>\n</div>\n", styles: [":host{display:grid;width:100%;min-height:0}header{border-width:var(--border-width) var(--border-width) 0 var(--border-width);border-style:solid;border-color:var(--border-light);border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium)}header+.container{border-top-left-radius:0;border-top-right-radius:0}.container{border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-medium);overflow:auto}table{border-collapse:separate;width:100%;table-layout:fixed}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: SimpleTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-simple-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<header *ngIf=\"headerTemplate\">\n  <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n</header>\n<div class=\"container\">\n  <table>\n    <ng-content></ng-content>\n  </table>\n</div>\n", styles: [":host{display:grid;width:100%;min-height:0}header{border-width:var(--border-width) var(--border-width) 0 var(--border-width);border-style:solid;border-color:var(--border-light);border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium)}header+.container{border-top-left-radius:0;border-top-right-radius:0}.container{border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-medium);overflow:auto}table{border-collapse:separate;width:100%;table-layout:fixed}\n"] }]
         }], propDecorators: { headerTemplate: [{
@@ -8649,9 +8670,9 @@ class TableColumnSettingsSideSheetComponent {
         return index;
     }
 }
-TableColumnSettingsSideSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableColumnSettingsSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableColumnSettingsSideSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableColumnSettingsSideSheetComponent, selector: "riv-table-column-settings-side-sheet", inputs: { manager: "manager" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }], ngImport: i0, template: "<button #trigger rivButton (click)=\"open.next(true)\">Columns</button>\n\n<ng-container *ngIf=\"columnList | async; let columns\">\n  <ng-container *ngIf=\"open | async\">\n    <riv-side-sheet (close)=\"open.next(false); filterQuery.next('')\">\n      <div class=\"content\">\n        <div class=\"title\">\n          <span>Columns</span>\n          <button\n            rivButton\n            [variant]=\"'ghost'\"\n            [icon]=\"'X'\"\n            (click)=\"open.next(false); filterQuery.next('')\"\n          ></button>\n        </div>\n        <riv-search\n          [name]=\"'column-search'\"\n          [value]=\"(filterQuery | async) || ''\"\n          (valueChange)=\"filterQuery.next($event)\"\n        ></riv-search>\n        <riv-banner\n          *ngIf=\"\n            columns.disabledColumns.length > 0 &&\n            disableEnablingColumns(columns)\n          \"\n          [iconTooltip]=\"iconLimitTooltip()\"\n        >\n          Column limit reached\n        </riv-banner>\n        <div class=\"columns\">\n          <div *ngIf=\"columns.enabledColumns.length > 0\">\n            <div\n              class=\"column-header drop-zone\"\n              (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n              (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n            >\n              <span class=\"column-header-label\">Shown in table</span>\n              <button\n                *ngIf=\"(searching | async) === false\"\n                rivButton\n                [variant]=\"'ghost'\"\n                [disabled]=\"allColumnsEnabled(columns)\"\n                (click)=\"enableAllColumns(false)\"\n              >\n                Hide all\n              </button>\n            </div>\n\n            <div class=\"options\">\n              <ng-container\n                *ngFor=\"let column of columns.enabledColumns; let i = index\"\n              >\n                <div\n                  class=\"option drop-zone\"\n                  [attr.draggable]=\"(searching | async) === false\"\n                  [attr.droppable]=\"(searching | async) === false\"\n                  (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n                  (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n                  (drop)=\"\n                    drop(\n                      i,\n                      column.stateIndex,\n                      true,\n                      columns.enabledColumns.length\n                    )\n                  \"\n                  [class.dragged-over-top]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx > i\n                  \"\n                  [class.dragged-over-bottom]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx < i\n                  \"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      columnTemplate;\n                      context: { column, columns }\n                    \"\n                  ></ng-container>\n                </div>\n                <div\n                  *ngIf=\"\n                    column.isLastPinnedColumn && (searching | async) === false\n                  \"\n                  class=\"column scroll-padding\"\n                >\n                  <div class=\"frozen\">\n                    <span class=\"pinned\">\n                      <riv-icon [name]=\"'PinInactive'\" [size]=\"20\"></riv-icon>\n                    </span>\n                    <span>Frozen through here</span>\n                  </div>\n\n                  <button\n                    class=\"hidden\"\n                    rivButton\n                    [rivTooltip]=\"'Un-freeze columns'\"\n                    class=\"disable-override\"\n                    [class.disabled]=\"!column.enabled\"\n                    [variant]=\"'ghost'\"\n                    [size]=\"'small'\"\n                    [icon]=\"'X'\"\n                    (click)=\"\n                      columnFreezeUpTo(\n                        false,\n                        column.stateIndex,\n                        'freezeDivider'\n                      )\n                    \"\n                  ></button>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <div\n            *ngIf=\"\n              columns.enabledColumns.length === 0 &&\n              (searching | async) === false\n            \"\n            class=\"column-header drop-zone\"\n            (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n            (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n          >\n            <span>No columns shown</span>\n            <button rivButton [variant]=\"'ghost'\" (click)=\"resetToDefault()\">\n              Reset to default\n            </button>\n          </div>\n          <div\n            class=\"divider\"\n            *ngIf=\"\n              columns.disabledColumns.length > 0 &&\n              ((searching | async) === false ||\n                ((searching | async) && columns.enabledColumns.length > 0))\n            \"\n          ></div>\n          <div\n            *ngIf=\"columns.disabledColumns.length > 0\"\n            (drop)=\"dropEnabledState(false, columns.enabledColumns.length)\"\n            (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n          >\n            <div class=\"column-header\">\n              <span class=\"column-header-label\">Hidden from table</span>\n\n              <button\n                *ngIf=\"\n                  (searching | async) === false &&\n                  showAllColumnsVisible(columns)\n                \"\n                rivButton\n                [variant]=\"'ghost'\"\n                [disabled]=\"allColumnsDisabled(columns)\"\n                (click)=\"enableAllColumns(true)\"\n              >\n                Show all\n              </button>\n            </div>\n\n            <div class=\"options\">\n              <div\n                *ngFor=\"let column of columns.disabledColumns; let i = index\"\n                [attr.draggable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns)\n                \"\n                [attr.droppable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns)\n                \"\n                [class.drop-zone]=\"!disableEnablingColumns(columns)\"\n                (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n                (dragenter)=\"\n                  $event.preventDefault();\n                  dragOver(i + columns.enabledColumns.length)\n                \"\n                (drop)=\"\n                  drop(\n                    i + columns.enabledColumns.length,\n                    column.stateIndex,\n                    false,\n                    columns.enabledColumns.length\n                  )\n                \"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    columnTemplate;\n                    context: { column, columns }\n                  \"\n                ></ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </riv-side-sheet>\n  </ng-container>\n</ng-container>\n\n<ng-template #columnTemplate let-column=\"column\" let-columns=\"columns\">\n  <div\n    class=\"column scroll-padding\"\n    [class.disabled]=\"disableEnablingColumn(column, columns)\"\n  >\n    <div class=\"column\">\n      <span\n        class=\"reorder\"\n        *ngIf=\"(searching | async) === false\"\n        [class.disabled]=\"disableEnablingColumn(column, columns)\"\n      >\n        <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n      </span>\n      <riv-highlight\n        [text]=\"column.resolvedName\"\n        [indices]=\"column.highlightIndices\"\n      ></riv-highlight>\n    </div>\n    <div>\n      <riv-menu\n        class=\"hidden\"\n        *ngIf=\"column.enabled || !disableEnablingColumns(columns)\"\n      >\n        <button\n          *ngIf=\"column.enabled && !column.pinned\"\n          riv-menu-item\n          (click)=\"\n            columnFreezeUpTo(true, column.stateIndex, 'optionsMenu', column.key)\n          \"\n        >\n          Freeze up to column\n        </button>\n        <button\n          *ngIf=\"column.enabled && column.pinned\"\n          riv-menu-item\n          (click)=\"columnFreezeUpTo(false, 0, 'optionsMenu', column.key)\"\n        >\n          Un-freeze columns\n        </button>\n        <button riv-menu-item (click)=\"columnMoveTo(column, 'start')\">\n          Move to start\n        </button>\n        <button riv-menu-item (click)=\"columnMoveTo(column, 'end')\">\n          Move to end\n        </button>\n        <button\n          riv-menu-item\n          (click)=\"columnEnabledChange(column, !column.enabled, 'optionsMenu')\"\n        >\n          {{ column.enabled ? 'Hide column' : 'Show column' }}\n        </button>\n      </riv-menu>\n      <button\n        rivButton\n        [rivTooltip]=\"\n          column.enabled\n            ? 'Hide column'\n            : disableEnablingColumns(columns)\n            ? limitTooltip()\n            : 'Show column'\n        \"\n        class=\"disable-override\"\n        [class.disabled]=\"!column.enabled\"\n        [disabled]=\"disableEnablingColumn(column, columns)\"\n        [variant]=\"'ghost'\"\n        [size]=\"'small'\"\n        [icon]=\"column.enabled ? 'Eye' : 'EyeOff'\"\n        (click)=\"columnEnabledChange(column, !column.enabled, 'eyeIcon')\"\n      ></button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".content{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}.title{font:var(--title-02);display:flex;justify-content:space-between;align-items:center}.column-header{color:var(--type-light-low-contrast);display:flex;justify-content:space-between;align-items:center;font:var(--input-medium)}.column-header-label{padding:var(--size-small) 0}.column{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium)}.column:hover{background-color:var(--surface-light-1)}.column:hover .hidden{opacity:1}.column.disabled{color:var(--type-light-low-contrast)}.reorder{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);cursor:grab}.reorder.disabled{cursor:not-allowed}.pinned{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch}.frozen{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium);color:var(--type-light-low-contrast)}.disable-override.disabled:hover{cursor:pointer}.hidden{opacity:0}.columns{flex-grow:1;overflow-y:auto}.options{display:flex;flex-direction:column}.option{position:relative}.option.dragged-over-top:before,.option.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.option.dragged-over-top:before{top:0}.option.dragged-over-bottom:before{bottom:0}.scroll-padding{padding-right:var(--base-grid-size)}.divider{border-top:var(--border-width) solid var(--border-light);margin-top:var(--size-medium);margin-bottom:var(--size-medium)}\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: BannerComponent, selector: "riv-banner", inputs: ["variant", "icon", "iconTooltip", "heading", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: MenuComponent, selector: "riv-menu", inputs: ["preferredPosition"] }, { kind: "component", type: MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset", "width", "obscure"], outputs: ["close"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableColumnSettingsSideSheetComponent, decorators: [{
+TableColumnSettingsSideSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableColumnSettingsSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TableColumnSettingsSideSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableColumnSettingsSideSheetComponent, selector: "riv-table-column-settings-side-sheet", inputs: { manager: "manager" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }], ngImport: i0, template: "<button #trigger rivButton (click)=\"open.next(true)\">Columns</button>\n\n<ng-container *ngIf=\"columnList | async; let columns\">\n  <ng-container *ngIf=\"open | async\">\n    <riv-side-sheet (close)=\"open.next(false); filterQuery.next('')\">\n      <div class=\"content\">\n        <div class=\"title\">\n          <span>Columns</span>\n          <button\n            rivButton\n            [variant]=\"'ghost'\"\n            [icon]=\"'X'\"\n            (click)=\"open.next(false); filterQuery.next('')\"\n          ></button>\n        </div>\n        <riv-search\n          [name]=\"'column-search'\"\n          [value]=\"(filterQuery | async) || ''\"\n          (valueChange)=\"filterQuery.next($event)\"\n        ></riv-search>\n        <riv-banner\n          *ngIf=\"\n            columns.disabledColumns.length > 0 &&\n            disableEnablingColumns(columns)\n          \"\n          [iconTooltip]=\"iconLimitTooltip()\"\n        >\n          Column limit reached\n        </riv-banner>\n        <div class=\"columns\">\n          <div *ngIf=\"columns.enabledColumns.length > 0\">\n            <div\n              class=\"column-header drop-zone\"\n              (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n              (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n            >\n              <span class=\"column-header-label\">Shown in table</span>\n              <button\n                *ngIf=\"(searching | async) === false\"\n                rivButton\n                [variant]=\"'ghost'\"\n                [disabled]=\"allColumnsEnabled(columns)\"\n                (click)=\"enableAllColumns(false)\"\n              >\n                Hide all\n              </button>\n            </div>\n\n            <div class=\"options\">\n              <ng-container\n                *ngFor=\"let column of columns.enabledColumns; let i = index\"\n              >\n                <div\n                  class=\"option drop-zone\"\n                  [attr.draggable]=\"(searching | async) === false\"\n                  [attr.droppable]=\"(searching | async) === false\"\n                  (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n                  (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n                  (drop)=\"\n                    drop(\n                      i,\n                      column.stateIndex,\n                      true,\n                      columns.enabledColumns.length\n                    )\n                  \"\n                  [class.dragged-over-top]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx > i\n                  \"\n                  [class.dragged-over-bottom]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx < i\n                  \"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      columnTemplate;\n                      context: { column, columns }\n                    \"\n                  ></ng-container>\n                </div>\n                <div\n                  *ngIf=\"\n                    column.isLastPinnedColumn && (searching | async) === false\n                  \"\n                  class=\"column scroll-padding\"\n                >\n                  <div class=\"frozen\">\n                    <span class=\"pinned\">\n                      <riv-icon [name]=\"'PinInactive'\" [size]=\"20\"></riv-icon>\n                    </span>\n                    <span>Frozen through here</span>\n                  </div>\n\n                  <button\n                    class=\"hidden\"\n                    rivButton\n                    [rivTooltip]=\"'Un-freeze columns'\"\n                    class=\"disable-override\"\n                    [class.disabled]=\"!column.enabled\"\n                    [variant]=\"'ghost'\"\n                    [size]=\"'small'\"\n                    [icon]=\"'X'\"\n                    (click)=\"\n                      columnFreezeUpTo(\n                        false,\n                        column.stateIndex,\n                        'freezeDivider'\n                      )\n                    \"\n                  ></button>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <div\n            *ngIf=\"\n              columns.enabledColumns.length === 0 &&\n              (searching | async) === false\n            \"\n            class=\"column-header drop-zone\"\n            (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n            (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n          >\n            <span>No columns shown</span>\n            <button rivButton [variant]=\"'ghost'\" (click)=\"resetToDefault()\">\n              Reset to default\n            </button>\n          </div>\n          <div\n            class=\"divider\"\n            *ngIf=\"\n              columns.disabledColumns.length > 0 &&\n              ((searching | async) === false ||\n                ((searching | async) && columns.enabledColumns.length > 0))\n            \"\n          ></div>\n          <div\n            *ngIf=\"columns.disabledColumns.length > 0\"\n            (drop)=\"dropEnabledState(false, columns.enabledColumns.length)\"\n            (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n          >\n            <div class=\"column-header\">\n              <span class=\"column-header-label\">Hidden from table</span>\n\n              <button\n                *ngIf=\"\n                  (searching | async) === false &&\n                  showAllColumnsVisible(columns)\n                \"\n                rivButton\n                [variant]=\"'ghost'\"\n                [disabled]=\"allColumnsDisabled(columns)\"\n                (click)=\"enableAllColumns(true)\"\n              >\n                Show all\n              </button>\n            </div>\n\n            <div class=\"options\">\n              <div\n                *ngFor=\"let column of columns.disabledColumns; let i = index\"\n                [attr.draggable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns)\n                \"\n                [attr.droppable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns)\n                \"\n                [class.drop-zone]=\"!disableEnablingColumns(columns)\"\n                (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n                (dragenter)=\"\n                  $event.preventDefault();\n                  dragOver(i + columns.enabledColumns.length)\n                \"\n                (drop)=\"\n                  drop(\n                    i + columns.enabledColumns.length,\n                    column.stateIndex,\n                    false,\n                    columns.enabledColumns.length\n                  )\n                \"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    columnTemplate;\n                    context: { column, columns }\n                  \"\n                ></ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </riv-side-sheet>\n  </ng-container>\n</ng-container>\n\n<ng-template #columnTemplate let-column=\"column\" let-columns=\"columns\">\n  <div\n    class=\"column scroll-padding\"\n    [class.disabled]=\"disableEnablingColumn(column, columns)\"\n  >\n    <div class=\"column\">\n      <span\n        class=\"reorder\"\n        *ngIf=\"(searching | async) === false\"\n        [class.disabled]=\"disableEnablingColumn(column, columns)\"\n      >\n        <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n      </span>\n      <riv-highlight\n        [text]=\"column.resolvedName\"\n        [indices]=\"column.highlightIndices\"\n      ></riv-highlight>\n    </div>\n    <div>\n      <riv-menu\n        class=\"hidden\"\n        *ngIf=\"column.enabled || !disableEnablingColumns(columns)\"\n      >\n        <button\n          *ngIf=\"column.enabled && !column.pinned\"\n          riv-menu-item\n          (click)=\"\n            columnFreezeUpTo(true, column.stateIndex, 'optionsMenu', column.key)\n          \"\n        >\n          Freeze up to column\n        </button>\n        <button\n          *ngIf=\"column.enabled && column.pinned\"\n          riv-menu-item\n          (click)=\"columnFreezeUpTo(false, 0, 'optionsMenu', column.key)\"\n        >\n          Un-freeze columns\n        </button>\n        <button riv-menu-item (click)=\"columnMoveTo(column, 'start')\">\n          Move to start\n        </button>\n        <button riv-menu-item (click)=\"columnMoveTo(column, 'end')\">\n          Move to end\n        </button>\n        <button\n          riv-menu-item\n          (click)=\"columnEnabledChange(column, !column.enabled, 'optionsMenu')\"\n        >\n          {{ column.enabled ? 'Hide column' : 'Show column' }}\n        </button>\n      </riv-menu>\n      <button\n        rivButton\n        [rivTooltip]=\"\n          column.enabled\n            ? 'Hide column'\n            : disableEnablingColumns(columns)\n            ? limitTooltip()\n            : 'Show column'\n        \"\n        class=\"disable-override\"\n        [class.disabled]=\"!column.enabled\"\n        [disabled]=\"disableEnablingColumn(column, columns)\"\n        [variant]=\"'ghost'\"\n        [size]=\"'small'\"\n        [icon]=\"column.enabled ? 'Eye' : 'EyeOff'\"\n        (click)=\"columnEnabledChange(column, !column.enabled, 'eyeIcon')\"\n      ></button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".content{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}.title{font:var(--title-02);display:flex;justify-content:space-between;align-items:center}.column-header{color:var(--type-light-low-contrast);display:flex;justify-content:space-between;align-items:center;font:var(--input-medium)}.column-header-label{padding:var(--size-small) 0}.column{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium)}.column:hover{background-color:var(--surface-light-1)}.column:hover .hidden{opacity:1}.column.disabled{color:var(--type-light-low-contrast)}.reorder{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);cursor:grab}.reorder.disabled{cursor:not-allowed}.pinned{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch}.frozen{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium);color:var(--type-light-low-contrast)}.disable-override.disabled:hover{cursor:pointer}.hidden{opacity:0}.columns{flex-grow:1;overflow-y:auto}.options{display:flex;flex-direction:column}.option{position:relative}.option.dragged-over-top:before,.option.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.option.dragged-over-top:before{top:0}.option.dragged-over-bottom:before{bottom:0}.scroll-padding{padding-right:var(--base-grid-size)}.divider{border-top:var(--border-width) solid var(--border-light);margin-top:var(--size-medium);margin-bottom:var(--size-medium)}\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: BannerComponent, selector: "riv-banner", inputs: ["variant", "icon", "iconTooltip", "heading", "dismissable"], outputs: ["dismiss"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: MenuComponent, selector: "riv-menu", inputs: ["preferredPosition"] }, { kind: "component", type: MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: SideSheetComponent, selector: "riv-side-sheet", inputs: ["topOffset", "width", "obscure"], outputs: ["close"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableColumnSettingsSideSheetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-table-column-settings-side-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button #trigger rivButton (click)=\"open.next(true)\">Columns</button>\n\n<ng-container *ngIf=\"columnList | async; let columns\">\n  <ng-container *ngIf=\"open | async\">\n    <riv-side-sheet (close)=\"open.next(false); filterQuery.next('')\">\n      <div class=\"content\">\n        <div class=\"title\">\n          <span>Columns</span>\n          <button\n            rivButton\n            [variant]=\"'ghost'\"\n            [icon]=\"'X'\"\n            (click)=\"open.next(false); filterQuery.next('')\"\n          ></button>\n        </div>\n        <riv-search\n          [name]=\"'column-search'\"\n          [value]=\"(filterQuery | async) || ''\"\n          (valueChange)=\"filterQuery.next($event)\"\n        ></riv-search>\n        <riv-banner\n          *ngIf=\"\n            columns.disabledColumns.length > 0 &&\n            disableEnablingColumns(columns)\n          \"\n          [iconTooltip]=\"iconLimitTooltip()\"\n        >\n          Column limit reached\n        </riv-banner>\n        <div class=\"columns\">\n          <div *ngIf=\"columns.enabledColumns.length > 0\">\n            <div\n              class=\"column-header drop-zone\"\n              (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n              (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n            >\n              <span class=\"column-header-label\">Shown in table</span>\n              <button\n                *ngIf=\"(searching | async) === false\"\n                rivButton\n                [variant]=\"'ghost'\"\n                [disabled]=\"allColumnsEnabled(columns)\"\n                (click)=\"enableAllColumns(false)\"\n              >\n                Hide all\n              </button>\n            </div>\n\n            <div class=\"options\">\n              <ng-container\n                *ngFor=\"let column of columns.enabledColumns; let i = index\"\n              >\n                <div\n                  class=\"option drop-zone\"\n                  [attr.draggable]=\"(searching | async) === false\"\n                  [attr.droppable]=\"(searching | async) === false\"\n                  (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n                  (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n                  (drop)=\"\n                    drop(\n                      i,\n                      column.stateIndex,\n                      true,\n                      columns.enabledColumns.length\n                    )\n                  \"\n                  [class.dragged-over-top]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx > i\n                  \"\n                  [class.dragged-over-bottom]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx < i\n                  \"\n                >\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      columnTemplate;\n                      context: { column, columns }\n                    \"\n                  ></ng-container>\n                </div>\n                <div\n                  *ngIf=\"\n                    column.isLastPinnedColumn && (searching | async) === false\n                  \"\n                  class=\"column scroll-padding\"\n                >\n                  <div class=\"frozen\">\n                    <span class=\"pinned\">\n                      <riv-icon [name]=\"'PinInactive'\" [size]=\"20\"></riv-icon>\n                    </span>\n                    <span>Frozen through here</span>\n                  </div>\n\n                  <button\n                    class=\"hidden\"\n                    rivButton\n                    [rivTooltip]=\"'Un-freeze columns'\"\n                    class=\"disable-override\"\n                    [class.disabled]=\"!column.enabled\"\n                    [variant]=\"'ghost'\"\n                    [size]=\"'small'\"\n                    [icon]=\"'X'\"\n                    (click)=\"\n                      columnFreezeUpTo(\n                        false,\n                        column.stateIndex,\n                        'freezeDivider'\n                      )\n                    \"\n                  ></button>\n                </div>\n              </ng-container>\n            </div>\n          </div>\n          <div\n            *ngIf=\"\n              columns.enabledColumns.length === 0 &&\n              (searching | async) === false\n            \"\n            class=\"column-header drop-zone\"\n            (drop)=\"dropEnabledState(true, columns.enabledColumns.length)\"\n            (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n          >\n            <span>No columns shown</span>\n            <button rivButton [variant]=\"'ghost'\" (click)=\"resetToDefault()\">\n              Reset to default\n            </button>\n          </div>\n          <div\n            class=\"divider\"\n            *ngIf=\"\n              columns.disabledColumns.length > 0 &&\n              ((searching | async) === false ||\n                ((searching | async) && columns.enabledColumns.length > 0))\n            \"\n          ></div>\n          <div\n            *ngIf=\"columns.disabledColumns.length > 0\"\n            (drop)=\"dropEnabledState(false, columns.enabledColumns.length)\"\n            (dragenter)=\"$event.preventDefault(); dragOver(-1)\"\n          >\n            <div class=\"column-header\">\n              <span class=\"column-header-label\">Hidden from table</span>\n\n              <button\n                *ngIf=\"\n                  (searching | async) === false &&\n                  showAllColumnsVisible(columns)\n                \"\n                rivButton\n                [variant]=\"'ghost'\"\n                [disabled]=\"allColumnsDisabled(columns)\"\n                (click)=\"enableAllColumns(true)\"\n              >\n                Show all\n              </button>\n            </div>\n\n            <div class=\"options\">\n              <div\n                *ngFor=\"let column of columns.disabledColumns; let i = index\"\n                [attr.draggable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns)\n                \"\n                [attr.droppable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns)\n                \"\n                [class.drop-zone]=\"!disableEnablingColumns(columns)\"\n                (dragstart)=\"dragStart(column.stateIndex, column.key)\"\n                (dragenter)=\"\n                  $event.preventDefault();\n                  dragOver(i + columns.enabledColumns.length)\n                \"\n                (drop)=\"\n                  drop(\n                    i + columns.enabledColumns.length,\n                    column.stateIndex,\n                    false,\n                    columns.enabledColumns.length\n                  )\n                \"\n              >\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    columnTemplate;\n                    context: { column, columns }\n                  \"\n                ></ng-container>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </riv-side-sheet>\n  </ng-container>\n</ng-container>\n\n<ng-template #columnTemplate let-column=\"column\" let-columns=\"columns\">\n  <div\n    class=\"column scroll-padding\"\n    [class.disabled]=\"disableEnablingColumn(column, columns)\"\n  >\n    <div class=\"column\">\n      <span\n        class=\"reorder\"\n        *ngIf=\"(searching | async) === false\"\n        [class.disabled]=\"disableEnablingColumn(column, columns)\"\n      >\n        <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n      </span>\n      <riv-highlight\n        [text]=\"column.resolvedName\"\n        [indices]=\"column.highlightIndices\"\n      ></riv-highlight>\n    </div>\n    <div>\n      <riv-menu\n        class=\"hidden\"\n        *ngIf=\"column.enabled || !disableEnablingColumns(columns)\"\n      >\n        <button\n          *ngIf=\"column.enabled && !column.pinned\"\n          riv-menu-item\n          (click)=\"\n            columnFreezeUpTo(true, column.stateIndex, 'optionsMenu', column.key)\n          \"\n        >\n          Freeze up to column\n        </button>\n        <button\n          *ngIf=\"column.enabled && column.pinned\"\n          riv-menu-item\n          (click)=\"columnFreezeUpTo(false, 0, 'optionsMenu', column.key)\"\n        >\n          Un-freeze columns\n        </button>\n        <button riv-menu-item (click)=\"columnMoveTo(column, 'start')\">\n          Move to start\n        </button>\n        <button riv-menu-item (click)=\"columnMoveTo(column, 'end')\">\n          Move to end\n        </button>\n        <button\n          riv-menu-item\n          (click)=\"columnEnabledChange(column, !column.enabled, 'optionsMenu')\"\n        >\n          {{ column.enabled ? 'Hide column' : 'Show column' }}\n        </button>\n      </riv-menu>\n      <button\n        rivButton\n        [rivTooltip]=\"\n          column.enabled\n            ? 'Hide column'\n            : disableEnablingColumns(columns)\n            ? limitTooltip()\n            : 'Show column'\n        \"\n        class=\"disable-override\"\n        [class.disabled]=\"!column.enabled\"\n        [disabled]=\"disableEnablingColumn(column, columns)\"\n        [variant]=\"'ghost'\"\n        [size]=\"'small'\"\n        [icon]=\"column.enabled ? 'Eye' : 'EyeOff'\"\n        (click)=\"columnEnabledChange(column, !column.enabled, 'eyeIcon')\"\n      ></button>\n    </div>\n  </div>\n</ng-template>\n", styles: [".content{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:100%}.title{font:var(--title-02);display:flex;justify-content:space-between;align-items:center}.column-header{color:var(--type-light-low-contrast);display:flex;justify-content:space-between;align-items:center;font:var(--input-medium)}.column-header-label{padding:var(--size-small) 0}.column{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium)}.column:hover{background-color:var(--surface-light-1)}.column:hover .hidden{opacity:1}.column.disabled{color:var(--type-light-low-contrast)}.reorder{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);cursor:grab}.reorder.disabled{cursor:not-allowed}.pinned{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch}.frozen{display:flex;align-items:center;justify-content:space-between;position:relative;font:var(--input-medium);color:var(--type-light-low-contrast)}.disable-override.disabled:hover{cursor:pointer}.hidden{opacity:0}.columns{flex-grow:1;overflow-y:auto}.options{display:flex;flex-direction:column}.option{position:relative}.option.dragged-over-top:before,.option.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.option.dragged-over-top:before{top:0}.option.dragged-over-bottom:before{bottom:0}.scroll-padding{padding-right:var(--base-grid-size)}.divider{border-top:var(--border-width) solid var(--border-light);margin-top:var(--size-medium);margin-bottom:var(--size-medium)}\n"] }]
         }], propDecorators: { manager: [{
@@ -8770,9 +8791,9 @@ class TableColumnSettingsComponent {
         }
     }
 }
-TableColumnSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableColumnSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableColumnSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableColumnSettingsComponent, selector: "riv-table-column-settings", inputs: { manager: "manager" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n  #trigger\n  rivButton\n  [icon]=\"(open | async) ? 'ChevronUp' : 'ChevronDown'\"\n  [iconPosition]=\"'last'\"\n  (click)=\"open.next(true)\"\n>\n  Columns\n</button>\n\n<ng-container *ngIf=\"columnList | async; let columns\">\n  <ng-container *ngIf=\"open | async\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"anchor?.nativeElement\"\n      [isModal]=\"true\"\n      [showCaret]=\"false\"\n      [theme]=\"'light'\"\n      [preferredPosition]=\"'bottom-right'\"\n      [allowedPositions]=\"[\n        'bottom-right',\n        'bottom-left',\n        'top-left',\n        'top-right'\n      ]\"\n      (close)=\"open.next(false)\"\n    >\n      <input\n        #filter\n        class=\"filter\"\n        [placeholder]=\"'Search columns'\"\n        [value]=\"filterQuery | async\"\n        (input)=\"filterQuery.next(filter.value)\"\n        [riv-auto-focus]=\"true\"\n      />\n      <div class=\"column-list\">\n        <div\n          class=\"column\"\n          *ngFor=\"let column of columns; let i = index\"\n          [attr.draggable]=\"\n            (searching | async) === false &&\n            !disableEnablingColumn(column, columns)\n          \"\n          [attr.droppable]=\"\n            (searching | async) === false &&\n            !disableEnablingColumn(column, columns)\n          \"\n          (dragstart)=\"dragStart(i)\"\n          (dragenter)=\"$event.preventDefault()\"\n          (dragover)=\"$event.preventDefault(); dragOver(i)\"\n          (drop)=\"drop(i)\"\n          [class.dragged-over-top]=\"\n            draggedOverColumnIdx === i &&\n            draggedColumnIdx !== null &&\n            draggedColumnIdx > i\n          \"\n          [class.dragged-over-bottom]=\"\n            draggedOverColumnIdx === i &&\n            draggedColumnIdx !== null &&\n            draggedColumnIdx < i\n          \"\n        >\n          <riv-checkbox\n            [value]=\"column.enabled\"\n            (valueChange)=\"columnEnabledChange(column, $event)\"\n            [disabled]=\"disableEnablingColumn(column, columns)\"\n            [checkboxTooltip]=\"\n              disableEnablingColumn(column, columns)\n                ? limitTooltip()\n                : undefined\n            \"\n          >\n            <riv-highlight\n              [text]=\"column.resolvedName\"\n              [indices]=\"column.highlightIndices\"\n            ></riv-highlight>\n          </riv-checkbox>\n          <span\n            class=\"reorder\"\n            *ngIf=\"(searching | async) === false\"\n            [class.disabled]=\"disableEnablingColumn(column, columns)\"\n          >\n            <riv-icon [name]=\"'Reorder'\" [size]=\"12\"></riv-icon>\n          </span>\n          <button\n            rivButton\n            [variant]=\"'ghost'\"\n            [size]=\"'xsmall'\"\n            [icon]=\"column.pinned ? 'PinActive' : 'PinInactive'\"\n            [disabled]=\"disableEnablingColumn(column, columns)\"\n            (click)=\"columnPinChange(column, !column.pinned)\"\n          ></button>\n        </div>\n      </div>\n      <footer *ngIf=\"(searching | async) === false\">\n        <button\n          rivButton\n          [size]=\"'xsmall'\"\n          [variant]=\"'ghost'\"\n          [disabled]=\"allColumnsDisabled(columns)\"\n          (click)=\"disableAllColumns(columns)\"\n        >\n          Clear\n        </button>\n        <button\n          rivButton\n          *ngIf=\"showSelectAllColumns(columns)\"\n          [size]=\"'xsmall'\"\n          [variant]=\"'ghost'\"\n          [disabled]=\"allColumnsEnabled(columns)\"\n          (click)=\"enableAllColumns(columns)\"\n        >\n          Select all\n        </button>\n      </footer>\n    </riv-callout>\n  </ng-container>\n</ng-container>\n", styles: [".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)}.column-list{display:flex;flex-direction:column;align-items:stretch;max-height:50vh;overflow-y:auto}.column{display:flex;align-items:center;position:relative}.column riv-checkbox{flex-grow:1}.column.dragged-over-top:before,.column.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.column.dragged-over-top:before{top:0}.column.dragged-over-bottom:before{bottom:0}.reorder{padding:0 var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);cursor:grab}.reorder.disabled{cursor:not-allowed}footer{background-color:var(--surface-light-1);border-top:var(--border-width) solid var(--border-light);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: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableColumnSettingsComponent, decorators: [{
+TableColumnSettingsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableColumnSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TableColumnSettingsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableColumnSettingsComponent, selector: "riv-table-column-settings", inputs: { manager: "manager" }, viewQueries: [{ propertyName: "anchor", first: true, predicate: ["trigger"], descendants: true, read: ElementRef }], ngImport: i0, template: "<button\n  #trigger\n  rivButton\n  [icon]=\"(open | async) ? 'ChevronUp' : 'ChevronDown'\"\n  [iconPosition]=\"'last'\"\n  (click)=\"open.next(true)\"\n>\n  Columns\n</button>\n\n<ng-container *ngIf=\"columnList | async; let columns\">\n  <ng-container *ngIf=\"open | async\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"anchor?.nativeElement\"\n      [isModal]=\"true\"\n      [showCaret]=\"false\"\n      [theme]=\"'light'\"\n      [preferredPosition]=\"'bottom-right'\"\n      [allowedPositions]=\"[\n        'bottom-right',\n        'bottom-left',\n        'top-left',\n        'top-right'\n      ]\"\n      (close)=\"open.next(false)\"\n    >\n      <input\n        #filter\n        class=\"filter\"\n        [placeholder]=\"'Search columns'\"\n        [value]=\"filterQuery | async\"\n        (input)=\"filterQuery.next(filter.value)\"\n        [riv-auto-focus]=\"true\"\n      />\n      <div class=\"column-list\">\n        <div\n          class=\"column\"\n          *ngFor=\"let column of columns; let i = index\"\n          [attr.draggable]=\"\n            (searching | async) === false &&\n            !disableEnablingColumn(column, columns)\n          \"\n          [attr.droppable]=\"\n            (searching | async) === false &&\n            !disableEnablingColumn(column, columns)\n          \"\n          (dragstart)=\"dragStart(i)\"\n          (dragenter)=\"$event.preventDefault()\"\n          (dragover)=\"$event.preventDefault(); dragOver(i)\"\n          (drop)=\"drop(i)\"\n          [class.dragged-over-top]=\"\n            draggedOverColumnIdx === i &&\n            draggedColumnIdx !== null &&\n            draggedColumnIdx > i\n          \"\n          [class.dragged-over-bottom]=\"\n            draggedOverColumnIdx === i &&\n            draggedColumnIdx !== null &&\n            draggedColumnIdx < i\n          \"\n        >\n          <riv-checkbox\n            [value]=\"column.enabled\"\n            (valueChange)=\"columnEnabledChange(column, $event)\"\n            [disabled]=\"disableEnablingColumn(column, columns)\"\n            [checkboxTooltip]=\"\n              disableEnablingColumn(column, columns)\n                ? limitTooltip()\n                : undefined\n            \"\n          >\n            <riv-highlight\n              [text]=\"column.resolvedName\"\n              [indices]=\"column.highlightIndices\"\n            ></riv-highlight>\n          </riv-checkbox>\n          <span\n            class=\"reorder\"\n            *ngIf=\"(searching | async) === false\"\n            [class.disabled]=\"disableEnablingColumn(column, columns)\"\n          >\n            <riv-icon [name]=\"'Reorder'\" [size]=\"12\"></riv-icon>\n          </span>\n          <button\n            rivButton\n            [variant]=\"'ghost'\"\n            [size]=\"'xsmall'\"\n            [icon]=\"column.pinned ? 'PinActive' : 'PinInactive'\"\n            [disabled]=\"disableEnablingColumn(column, columns)\"\n            (click)=\"columnPinChange(column, !column.pinned)\"\n          ></button>\n        </div>\n      </div>\n      <footer *ngIf=\"(searching | async) === false\">\n        <button\n          rivButton\n          [size]=\"'xsmall'\"\n          [variant]=\"'ghost'\"\n          [disabled]=\"allColumnsDisabled(columns)\"\n          (click)=\"disableAllColumns(columns)\"\n        >\n          Clear\n        </button>\n        <button\n          rivButton\n          *ngIf=\"showSelectAllColumns(columns)\"\n          [size]=\"'xsmall'\"\n          [variant]=\"'ghost'\"\n          [disabled]=\"allColumnsEnabled(columns)\"\n          (click)=\"enableAllColumns(columns)\"\n        >\n          Select all\n        </button>\n      </footer>\n    </riv-callout>\n  </ng-container>\n</ng-container>\n", styles: [".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)}.column-list{display:flex;flex-direction:column;align-items:stretch;max-height:50vh;overflow-y:auto}.column{display:flex;align-items:center;position:relative}.column riv-checkbox{flex-grow:1}.column.dragged-over-top:before,.column.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.column.dragged-over-top:before{top:0}.column.dragged-over-bottom:before{bottom:0}.reorder{padding:0 var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);cursor:grab}.reorder.disabled{cursor:not-allowed}footer{background-color:var(--surface-light-1);border-top:var(--border-width) solid var(--border-light);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: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableColumnSettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-table-column-settings', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  #trigger\n  rivButton\n  [icon]=\"(open | async) ? 'ChevronUp' : 'ChevronDown'\"\n  [iconPosition]=\"'last'\"\n  (click)=\"open.next(true)\"\n>\n  Columns\n</button>\n\n<ng-container *ngIf=\"columnList | async; let columns\">\n  <ng-container *ngIf=\"open | async\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"anchor?.nativeElement\"\n      [isModal]=\"true\"\n      [showCaret]=\"false\"\n      [theme]=\"'light'\"\n      [preferredPosition]=\"'bottom-right'\"\n      [allowedPositions]=\"[\n        'bottom-right',\n        'bottom-left',\n        'top-left',\n        'top-right'\n      ]\"\n      (close)=\"open.next(false)\"\n    >\n      <input\n        #filter\n        class=\"filter\"\n        [placeholder]=\"'Search columns'\"\n        [value]=\"filterQuery | async\"\n        (input)=\"filterQuery.next(filter.value)\"\n        [riv-auto-focus]=\"true\"\n      />\n      <div class=\"column-list\">\n        <div\n          class=\"column\"\n          *ngFor=\"let column of columns; let i = index\"\n          [attr.draggable]=\"\n            (searching | async) === false &&\n            !disableEnablingColumn(column, columns)\n          \"\n          [attr.droppable]=\"\n            (searching | async) === false &&\n            !disableEnablingColumn(column, columns)\n          \"\n          (dragstart)=\"dragStart(i)\"\n          (dragenter)=\"$event.preventDefault()\"\n          (dragover)=\"$event.preventDefault(); dragOver(i)\"\n          (drop)=\"drop(i)\"\n          [class.dragged-over-top]=\"\n            draggedOverColumnIdx === i &&\n            draggedColumnIdx !== null &&\n            draggedColumnIdx > i\n          \"\n          [class.dragged-over-bottom]=\"\n            draggedOverColumnIdx === i &&\n            draggedColumnIdx !== null &&\n            draggedColumnIdx < i\n          \"\n        >\n          <riv-checkbox\n            [value]=\"column.enabled\"\n            (valueChange)=\"columnEnabledChange(column, $event)\"\n            [disabled]=\"disableEnablingColumn(column, columns)\"\n            [checkboxTooltip]=\"\n              disableEnablingColumn(column, columns)\n                ? limitTooltip()\n                : undefined\n            \"\n          >\n            <riv-highlight\n              [text]=\"column.resolvedName\"\n              [indices]=\"column.highlightIndices\"\n            ></riv-highlight>\n          </riv-checkbox>\n          <span\n            class=\"reorder\"\n            *ngIf=\"(searching | async) === false\"\n            [class.disabled]=\"disableEnablingColumn(column, columns)\"\n          >\n            <riv-icon [name]=\"'Reorder'\" [size]=\"12\"></riv-icon>\n          </span>\n          <button\n            rivButton\n            [variant]=\"'ghost'\"\n            [size]=\"'xsmall'\"\n            [icon]=\"column.pinned ? 'PinActive' : 'PinInactive'\"\n            [disabled]=\"disableEnablingColumn(column, columns)\"\n            (click)=\"columnPinChange(column, !column.pinned)\"\n          ></button>\n        </div>\n      </div>\n      <footer *ngIf=\"(searching | async) === false\">\n        <button\n          rivButton\n          [size]=\"'xsmall'\"\n          [variant]=\"'ghost'\"\n          [disabled]=\"allColumnsDisabled(columns)\"\n          (click)=\"disableAllColumns(columns)\"\n        >\n          Clear\n        </button>\n        <button\n          rivButton\n          *ngIf=\"showSelectAllColumns(columns)\"\n          [size]=\"'xsmall'\"\n          [variant]=\"'ghost'\"\n          [disabled]=\"allColumnsEnabled(columns)\"\n          (click)=\"enableAllColumns(columns)\"\n        >\n          Select all\n        </button>\n      </footer>\n    </riv-callout>\n  </ng-container>\n</ng-container>\n", styles: [".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)}.column-list{display:flex;flex-direction:column;align-items:stretch;max-height:50vh;overflow-y:auto}.column{display:flex;align-items:center;position:relative}.column riv-checkbox{flex-grow:1}.column.dragged-over-top:before,.column.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.column.dragged-over-top:before{top:0}.column.dragged-over-bottom:before{bottom:0}.reorder{padding:0 var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);cursor:grab}.reorder.disabled{cursor:not-allowed}footer{background-color:var(--surface-light-1);border-top:var(--border-width) solid var(--border-light);display:flex;justify-content:space-between}\n"] }]
         }], propDecorators: { manager: [{
@@ -8801,9 +8822,9 @@ class TableCsvExportComponent {
         }
     }
 }
-TableCsvExportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableCsvExportComponent, deps: [{ token: DownloadService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-TableCsvExportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableCsvExportComponent, selector: "riv-table-csv-export", inputs: { manager: "manager" }, ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <button\n    type=\"button\"\n    rivButton\n    [rivTooltip]=\"'Export CSV'\"\n    [loading]=\"loading\"\n    (click)=\"downloadCsv(s)\"\n  >\n    Export\n  </button>\n</ng-container>\n", dependencies: [{ 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", "current"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableCsvExportComponent, decorators: [{
+TableCsvExportComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableCsvExportComponent, deps: [{ token: DownloadService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+TableCsvExportComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableCsvExportComponent, selector: "riv-table-csv-export", inputs: { manager: "manager" }, ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <button\n    type=\"button\"\n    rivButton\n    [rivTooltip]=\"'Export CSV'\"\n    [loading]=\"loading\"\n    (click)=\"downloadCsv(s)\"\n  >\n    Export\n  </button>\n</ng-container>\n", dependencies: [{ 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", "current"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableCsvExportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-table-csv-export', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <button\n    type=\"button\"\n    rivButton\n    [rivTooltip]=\"'Export CSV'\"\n    [loading]=\"loading\"\n    (click)=\"downloadCsv(s)\"\n  >\n    Export\n  </button>\n</ng-container>\n" }]
         }], ctorParameters: function () { return [{ type: DownloadService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { manager: [{
@@ -8822,9 +8843,9 @@ class TableHeaderResizeHandleComponent {
         }));
     }
 }
-TableHeaderResizeHandleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableHeaderResizeHandleComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
-TableHeaderResizeHandleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableHeaderResizeHandleComponent, selector: "riv-table-header-resize-handle", outputs: { dragResize: "dragResize" }, ngImport: i0, template: "", styles: [":host{position:absolute;top:0;right:calc(var(--border-width) * -1);bottom:0;padding-left:var(--size-small);background-color:var(--brand);background-clip:content-box;box-sizing:content-box;width:var(--border-width);opacity:0;transition:opacity var(--medium-transition);cursor:ew-resize}:host:hover{opacity:1}\n"] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableHeaderResizeHandleComponent, decorators: [{
+TableHeaderResizeHandleComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableHeaderResizeHandleComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component });
+TableHeaderResizeHandleComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableHeaderResizeHandleComponent, selector: "riv-table-header-resize-handle", outputs: { dragResize: "dragResize" }, ngImport: i0, template: "", styles: [":host{position:absolute;top:0;right:calc(var(--border-width) * -1);bottom:0;padding-left:var(--size-small);background-color:var(--brand);background-clip:content-box;box-sizing:content-box;width:var(--border-width);opacity:0;transition:opacity var(--medium-transition);cursor:ew-resize}:host:hover{opacity:1}\n"] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableHeaderResizeHandleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-table-header-resize-handle', template: "", styles: [":host{position:absolute;top:0;right:calc(var(--border-width) * -1);bottom:0;padding-left:var(--size-small);background-color:var(--brand);background-clip:content-box;box-sizing:content-box;width:var(--border-width);opacity:0;transition:opacity var(--medium-transition);cursor:ew-resize}:host:hover{opacity:1}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: Document, decorators: [{
@@ -8870,9 +8891,9 @@ class TableSearchColumnsComponent {
         });
     }
 }
-TableSearchColumnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableSearchColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableSearchColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableSearchColumnsComponent, selector: "riv-table-search-columns", inputs: { manager: "manager", disabled: "disabled" }, ngImport: i0, template: "<ng-container *ngIf=\"columnList | async; let s\">\n  <button #trigger class=\"trigger-button\" (click)=\"open.next(true)\">\n    <riv-icon [name]=\"'MoreVertical'\" [size]=\"16\"></riv-icon>\n  </button>\n  <ng-container *ngIf=\"open | async\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"trigger\"\n      [showCaret]=\"false\"\n      [preferredPosition]=\"'bottom-left'\"\n      [theme]=\"'light'\"\n      (close)=\"open.next(false)\"\n    >\n      <div class=\"content-body\">\n        <div class=\"header-container\">\n          <riv-help\n            [size]=\"12\"\n            [help]=\"'Toggle which columns are included in table search results'\"\n          ></riv-help\n          ><span class=\"header-text\">Search in</span>\n        </div>\n\n        <ng-container\n          [ngTemplateOutlet]=\"optionList\"\n          [ngTemplateOutletContext]=\"{ columns: s.activeSearchColumns }\"\n        ></ng-container>\n\n        <div *ngIf=\"s.hiddenSearchColumns.length > 0\" class=\"column-header\">\n          Hidden columns\n        </div>\n\n        <ng-container\n          *ngIf=\"s.hiddenSearchColumns.length > 0\"\n          [ngTemplateOutlet]=\"optionList\"\n          [ngTemplateOutletContext]=\"{ columns: s.hiddenSearchColumns }\"\n        ></ng-container>\n\n        <ng-template #optionList let-columns=\"columns\">\n          <ng-container *ngFor=\"let column of columns\">\n            <ng-container\n              [ngTemplateOutlet]=\"option\"\n              [ngTemplateOutletContext]=\"{ node: column }\"\n            ></ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-template #option let-node=\"node\">\n          <div class=\"node-container\">\n            <span class=\"node-text\">{{ node.title }}</span>\n            <riv-switch-checkbox\n              [size]=\"'small'\"\n              [value]=\"node.searchEnabled\"\n              [disabled]=\"s.searchEnabledCount === 1 && node.searchEnabled\"\n              [rivTooltip]=\"\n                s.searchEnabledCount === 1 && node.searchEnabled\n                  ? 'At least one search field is required'\n                  : undefined\n              \"\n              (valueChange)=\"updateColumns(node.id, $event)\"\n            ></riv-switch-checkbox>\n          </div>\n        </ng-template>\n      </div>\n    </riv-callout>\n  </ng-container>\n</ng-container>\n", styles: [".node-container{display:flex;justify-content:space-between;margin:var(--size-small) var(--size-medium)}.node-text{font:var(--input-medium)}.header-container{margin:calc(var(--base-grid-size) * .75) var(--size-medium);padding-bottom:var(--size-small)}.header-text{font:var(--input-medium);margin-left:var(--size-small)}.footer-container{display:flex;justify-content:flex-end}.trigger-button{margin-top:var(--size-small);border-radius:var(--border-radius-small)}.trigger-button:hover{background-color:var(--black-20);cursor:pointer;transition:background-color var(--short-transition)}.column-header{margin:var(--size-small) var(--size-medium);font:var(--input-medium);color:var(--type-light-low-contrast)}.content-body{display:flex;max-height:50vh;overflow-y:auto;flex-direction:column;align-items:stretch;gap:var(--size-small);padding:var(--size-large);min-width:calc(var(--base-grid-size) * 75)}\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: HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SwitchCheckboxComponent, selector: "riv-switch-checkbox", inputs: ["size"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableSearchColumnsComponent, decorators: [{
+TableSearchColumnsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableSearchColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TableSearchColumnsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableSearchColumnsComponent, selector: "riv-table-search-columns", inputs: { manager: "manager", disabled: "disabled" }, ngImport: i0, template: "<ng-container *ngIf=\"columnList | async; let s\">\n  <button #trigger class=\"trigger-button\" (click)=\"open.next(true)\">\n    <riv-icon [name]=\"'MoreVertical'\" [size]=\"16\"></riv-icon>\n  </button>\n  <ng-container *ngIf=\"open | async\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"trigger\"\n      [showCaret]=\"false\"\n      [preferredPosition]=\"'bottom-left'\"\n      [theme]=\"'light'\"\n      (close)=\"open.next(false)\"\n    >\n      <div class=\"content-body\">\n        <div class=\"header-container\">\n          <riv-help\n            [size]=\"12\"\n            [help]=\"'Toggle which columns are included in table search results'\"\n          ></riv-help\n          ><span class=\"header-text\">Search in</span>\n        </div>\n\n        <ng-container\n          [ngTemplateOutlet]=\"optionList\"\n          [ngTemplateOutletContext]=\"{ columns: s.activeSearchColumns }\"\n        ></ng-container>\n\n        <div *ngIf=\"s.hiddenSearchColumns.length > 0\" class=\"column-header\">\n          Hidden columns\n        </div>\n\n        <ng-container\n          *ngIf=\"s.hiddenSearchColumns.length > 0\"\n          [ngTemplateOutlet]=\"optionList\"\n          [ngTemplateOutletContext]=\"{ columns: s.hiddenSearchColumns }\"\n        ></ng-container>\n\n        <ng-template #optionList let-columns=\"columns\">\n          <ng-container *ngFor=\"let column of columns\">\n            <ng-container\n              [ngTemplateOutlet]=\"option\"\n              [ngTemplateOutletContext]=\"{ node: column }\"\n            ></ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-template #option let-node=\"node\">\n          <div class=\"node-container\">\n            <span class=\"node-text\">{{ node.title }}</span>\n            <riv-switch-checkbox\n              [size]=\"'small'\"\n              [value]=\"node.searchEnabled\"\n              [disabled]=\"s.searchEnabledCount === 1 && node.searchEnabled\"\n              [rivTooltip]=\"\n                s.searchEnabledCount === 1 && node.searchEnabled\n                  ? 'At least one search field is required'\n                  : undefined\n              \"\n              (valueChange)=\"updateColumns(node.id, $event)\"\n            ></riv-switch-checkbox>\n          </div>\n        </ng-template>\n      </div>\n    </riv-callout>\n  </ng-container>\n</ng-container>\n", styles: [".node-container{display:flex;justify-content:space-between;margin:var(--size-small) var(--size-medium)}.node-text{font:var(--input-medium)}.header-container{margin:calc(var(--base-grid-size) * .75) var(--size-medium);padding-bottom:var(--size-small)}.header-text{font:var(--input-medium);margin-left:var(--size-small)}.footer-container{display:flex;justify-content:flex-end}.trigger-button{margin-top:var(--size-small);border-radius:var(--border-radius-small)}.trigger-button:hover{background-color:var(--black-20);cursor:pointer;transition:background-color var(--short-transition)}.column-header{margin:var(--size-small) var(--size-medium);font:var(--input-medium);color:var(--type-light-low-contrast)}.content-body{display:flex;max-height:50vh;overflow-y:auto;flex-direction:column;align-items:stretch;gap:var(--size-small);padding:var(--size-large);min-width:calc(var(--base-grid-size) * 75)}\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: HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SwitchCheckboxComponent, selector: "riv-switch-checkbox", inputs: ["size"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableSearchColumnsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-table-search-columns', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"columnList | async; let s\">\n  <button #trigger class=\"trigger-button\" (click)=\"open.next(true)\">\n    <riv-icon [name]=\"'MoreVertical'\" [size]=\"16\"></riv-icon>\n  </button>\n  <ng-container *ngIf=\"open | async\">\n    <riv-callout\n      *riv-overlay\n      [anchor]=\"trigger\"\n      [showCaret]=\"false\"\n      [preferredPosition]=\"'bottom-left'\"\n      [theme]=\"'light'\"\n      (close)=\"open.next(false)\"\n    >\n      <div class=\"content-body\">\n        <div class=\"header-container\">\n          <riv-help\n            [size]=\"12\"\n            [help]=\"'Toggle which columns are included in table search results'\"\n          ></riv-help\n          ><span class=\"header-text\">Search in</span>\n        </div>\n\n        <ng-container\n          [ngTemplateOutlet]=\"optionList\"\n          [ngTemplateOutletContext]=\"{ columns: s.activeSearchColumns }\"\n        ></ng-container>\n\n        <div *ngIf=\"s.hiddenSearchColumns.length > 0\" class=\"column-header\">\n          Hidden columns\n        </div>\n\n        <ng-container\n          *ngIf=\"s.hiddenSearchColumns.length > 0\"\n          [ngTemplateOutlet]=\"optionList\"\n          [ngTemplateOutletContext]=\"{ columns: s.hiddenSearchColumns }\"\n        ></ng-container>\n\n        <ng-template #optionList let-columns=\"columns\">\n          <ng-container *ngFor=\"let column of columns\">\n            <ng-container\n              [ngTemplateOutlet]=\"option\"\n              [ngTemplateOutletContext]=\"{ node: column }\"\n            ></ng-container>\n          </ng-container>\n        </ng-template>\n\n        <ng-template #option let-node=\"node\">\n          <div class=\"node-container\">\n            <span class=\"node-text\">{{ node.title }}</span>\n            <riv-switch-checkbox\n              [size]=\"'small'\"\n              [value]=\"node.searchEnabled\"\n              [disabled]=\"s.searchEnabledCount === 1 && node.searchEnabled\"\n              [rivTooltip]=\"\n                s.searchEnabledCount === 1 && node.searchEnabled\n                  ? 'At least one search field is required'\n                  : undefined\n              \"\n              (valueChange)=\"updateColumns(node.id, $event)\"\n            ></riv-switch-checkbox>\n          </div>\n        </ng-template>\n      </div>\n    </riv-callout>\n  </ng-container>\n</ng-container>\n", styles: [".node-container{display:flex;justify-content:space-between;margin:var(--size-small) var(--size-medium)}.node-text{font:var(--input-medium)}.header-container{margin:calc(var(--base-grid-size) * .75) var(--size-medium);padding-bottom:var(--size-small)}.header-text{font:var(--input-medium);margin-left:var(--size-small)}.footer-container{display:flex;justify-content:flex-end}.trigger-button{margin-top:var(--size-small);border-radius:var(--border-radius-small)}.trigger-button:hover{background-color:var(--black-20);cursor:pointer;transition:background-color var(--short-transition)}.column-header{margin:var(--size-small) var(--size-medium);font:var(--input-medium);color:var(--type-light-low-contrast)}.content-body{display:flex;max-height:50vh;overflow-y:auto;flex-direction:column;align-items:stretch;gap:var(--size-small);padding:var(--size-large);min-width:calc(var(--base-grid-size) * 75)}\n"] }]
         }], propDecorators: { manager: [{
@@ -8931,9 +8952,9 @@ class TableSearchComponent {
         this.destroy.complete();
     }
 }
-TableSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TableSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableSearchComponent, selector: "riv-table-search", inputs: { manager: "manager", name: "name", disabled: "disabled", searchColumns: "searchColumns" }, ngImport: i0, template: "<riv-search\n  [name]=\"name\"\n  [disabled]=\"disabled\"\n  [value]=\"searchTerm\"\n  (valueChange)=\"searchTerm = $event\"\n  [labelTemplate]=\"searchColumns ? labelTemplate : undefined\"\n></riv-search>\n<ng-template #labelTemplate\n  ><riv-table-search-columns [manager]=\"manager\"></riv-table-search-columns\n></ng-template>\n", dependencies: [{ kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: TableSearchColumnsComponent, selector: "riv-table-search-columns", inputs: ["manager", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableSearchComponent, decorators: [{
+TableSearchComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TableSearchComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableSearchComponent, selector: "riv-table-search", inputs: { manager: "manager", name: "name", disabled: "disabled", searchColumns: "searchColumns" }, ngImport: i0, template: "<riv-search\n  [name]=\"name\"\n  [disabled]=\"disabled\"\n  [value]=\"searchTerm\"\n  (valueChange)=\"searchTerm = $event\"\n  [labelTemplate]=\"searchColumns ? labelTemplate : undefined\"\n></riv-search>\n<ng-template #labelTemplate\n  ><riv-table-search-columns [manager]=\"manager\"></riv-table-search-columns\n></ng-template>\n", dependencies: [{ kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: TableSearchColumnsComponent, selector: "riv-table-search-columns", inputs: ["manager", "disabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableSearchComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-table-search', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-search\n  [name]=\"name\"\n  [disabled]=\"disabled\"\n  [value]=\"searchTerm\"\n  (valueChange)=\"searchTerm = $event\"\n  [labelTemplate]=\"searchColumns ? labelTemplate : undefined\"\n></riv-search>\n<ng-template #labelTemplate\n  ><riv-table-search-columns [manager]=\"manager\"></riv-table-search-columns\n></ng-template>\n" }]
         }], propDecorators: { manager: [{
@@ -9168,9 +9189,9 @@ class TableComponent {
         }
     }
 }
-TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TableComponent, selector: "riv-table", inputs: { manager: "manager" }, host: { listeners: { "document:keydown": "keyDown($event)", "document:keyup": "keyUp($event)" } }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary"], descendants: true }, { propertyName: "menuTemplate", first: true, predicate: ["menu"], descendants: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selection"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "subheaderTemplate", first: true, predicate: ["subheader"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <ng-container *ngIf=\"selectionCalloutPosition | async; let position\">\n    <ng-container *ngIf=\"s.selection.selectedCount > 0 && selectionTemplate\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"position\"\n        [isModal]=\"false\"\n        [theme]=\"'light'\"\n        [showCaret]=\"false\"\n        [preferredPosition]=\"'top-right'\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"selectionTemplate; context: { state: s }\"\n        ></ng-container>\n      </riv-callout>\n    </ng-container>\n  </ng-container>\n  <div class=\"loading-container\">\n    <header *ngIf=\"headerTemplate\">\n      <ng-container\n        *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n      ></ng-container>\n    </header>\n    <riv-loading-cover\n      class=\"container-loader-wrapper\"\n      [loading]=\"s.load.loading\"\n      [errorMessage]=\"s.load.error ? getErrorMessage(s.load.error) : undefined\"\n    >\n      <div\n        class=\"container\"\n        [ngClass]=\"{\n          'container-ungrouped': !s.result.isGrouped,\n          'has-header': !s.result.isGrouped && headerTemplate,\n          'without-columns': s.display.columns.length === 0\n        }\"\n        (rivClientSize)=\"containerSize.next($event)\"\n      >\n        <riv-zero-state\n          *ngIf=\"s.display.columns.length === 0\"\n          class=\"no-columns-message\"\n          [message]=\"\n            'All columns disabled. Enable at least one column to view table data.'\n          \"\n        ></riv-zero-state>\n        <ng-container\n          *ngFor=\"\n            let group of s.result.isGrouped\n              ? s.result.rowGroups\n              : [s.result.rowsAsGroup];\n            trackBy: trackByGroup;\n            let last = last\n          \"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              subheaderTemplate || null;\n              context: { state: s, group }\n            \"\n          ></ng-container>\n          <div [ngClass]=\"{ 'subcontainer-grouped': s.result.isGrouped }\">\n            <table>\n              <thead>\n                <tr>\n                  <th\n                    *ngIf=\"!!s.selection.allowSelection\"\n                    class=\"selection-head\"\n                  >\n                    <riv-sr-only>Select rows</riv-sr-only>\n                    <div\n                      *ngIf=\"\n                        s.selection.allowSelection !== 'individual' &&\n                        s.selection.allowSelection === true\n                      \"\n                      class=\"checkbox-wrapper\"\n                    >\n                      <riv-checkbox\n                        *ngIf=\"!s.result.isGrouped\"\n                        [value]=\"s.selection.isAllSelected === true\"\n                        [indeterminate]=\"\n                          s.selection.isAllSelected === 'indeterminate'\n                        \"\n                        (valueChange)=\"\n                          manager?.actions?.next({ type: 'allSelectedChange' })\n                        \"\n                        ariaLabel=\"Select all rows\"\n                      ></riv-checkbox>\n                      <riv-checkbox\n                        *ngIf=\"s.result.isGrouped\"\n                        [value]=\"group.selected === true\"\n                        [indeterminate]=\"group.selected === 'indeterminate'\"\n                        (valueChange)=\"\n                          manager?.actions?.next({\n                            type: 'groupSelectionChange',\n                            payload: group\n                          })\n                        \"\n                        ariaLabel=\"Select group rows\"\n                      ></riv-checkbox>\n                    </div>\n                  </th>\n                  <th\n                    *ngFor=\"let column of s.display.columns; let i = index\"\n                    [class.pinned]=\"column.pinned\"\n                    [style.left.px]=\"column.left\"\n                    [style.width.px]=\"getWidth(column)\"\n                    [attr.draggable]=\"s.display.columnsAreReorderable\"\n                    droppable=\"true\"\n                    class=\"drop-zone\"\n                    (dragstart)=\"dragStart(i, column.key)\"\n                    (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n                    (drop)=\"drop(i, s.display.enabledCount)\"\n                    [class.dragged-over-left]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx > i\n                    \"\n                    [class.dragged-over-right]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx < i\n                    \"\n                  >\n                    <div\n                      *ngIf=\"\n                        !column.orderable &&\n                        !column.filterable &&\n                        !s.display.columnsAreFreezable &&\n                        !s.display.columnsAreHideable\n                      \"\n                      class=\"header-wrapper\"\n                      [class.left]=\"column.alignment === 'left'\"\n                      [class.right]=\"column.alignment === 'right'\"\n                    >\n                      {{ s.display.columnNameMap.get(column.key) }}\n                    </div>\n                    <riv-menu\n                      *ngIf=\"\n                        column.orderable ||\n                        column.filterable ||\n                        s.display.columnsAreFreezable ||\n                        s.display.columnsAreHideable\n                      \"\n                    >\n                      <ng-template #trigger>\n                        <button\n                          type=\"button\"\n                          class=\"header-wrapper\"\n                          [class.left]=\"column.alignment === 'left'\"\n                          [class.right]=\"column.alignment === 'right'\"\n                          [class.active]=\"s.query.order?.column === column.key\"\n                        >\n                          {{ s.display.columnNameMap.get(column.key) }}\n                          <span class=\"icon-container\">\n                            <riv-icon\n                              [size]=\"12\"\n                              [name]=\"\n                                s.query.order?.direction === 'desc'\n                                  ? 'ArrowDown'\n                                  : 'ArrowUp'\n                              \"\n                            ></riv-icon>\n                          </span>\n                        </button>\n                        <riv-table-header-resize-handle\n                          (dragResize)=\"setWidth(column.key, $event)\"\n                        ></riv-table-header-resize-handle>\n                      </ng-template>\n                      <ng-container *ngIf=\"column.orderable\">\n                        <button\n                          *ngIf=\"\n                            !(\n                              s.query.order?.column === column.key &&\n                              s.query.order?.direction === 'asc'\n                            )\n                          \"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: {\n                                direction: 'asc',\n                                column: column.key\n                              }\n                            })\n                          \"\n                        >\n                          Sort ascending\n                        </button>\n                        <button\n                          *ngIf=\"s.query.order?.column === column.key\"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: null\n                            })\n                          \"\n                        >\n                          Remove sort\n                        </button>\n                        <button\n                          *ngIf=\"\n                            !(\n                              s.query.order?.column === column.key &&\n                              s.query.order?.direction === 'desc'\n                            )\n                          \"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: {\n                                direction: 'desc',\n                                column: column.key\n                              }\n                            })\n                          \"\n                        >\n                          Sort descending\n                        </button>\n                      </ng-container>\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"column.orderable && column.filterable\"\n                      ></div>\n                      <button\n                        *ngIf=\"column.filterable\"\n                        riv-menu-item\n                        (click)=\"\n                          this.manager?.actions?.next({\n                            type: 'filterAdd',\n                            columnKey: column.key\n                          })\n                        \"\n                      >\n                        Add a filter\n                      </button>\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"\n                          (column.orderable || column.filterable) &&\n                          (s.display.columnsAreFreezable ||\n                            s.display.columnsAreHideable)\n                        \"\n                      ></div>\n                      <ng-container *ngIf=\"s.display.columnsAreFreezable\">\n                        <button\n                          *ngIf=\"!column.pinned\"\n                          riv-menu-item\n                          (click)=\"\n                            this.manager?.actions?.next({\n                              type: 'columnsFreezeUpToChange',\n                              freeze: true,\n                              index: i,\n                              source: 'headerMenu',\n                              column: column.key\n                            })\n                          \"\n                        >\n                          Freeze up to column\n                        </button>\n                        <button\n                          *ngIf=\"column.pinned\"\n                          riv-menu-item\n                          (click)=\"\n                            this.manager?.actions?.next({\n                              type: 'columnsFreezeUpToChange',\n                              freeze: false,\n                              index: 0,\n                              source: 'headerMenu',\n                              column: column.key\n                            })\n                          \"\n                        >\n                          Un-freeze columns\n                        </button>\n                      </ng-container>\n                      <button\n                        *ngIf=\"s.display.columnsAreHideable\"\n                        riv-menu-item\n                        (click)=\"\n                          this.manager?.actions?.next({\n                            type: 'columnEnabledChange',\n                            column: column.key,\n                            enabled: false,\n                            source: 'headerMenu'\n                          })\n                        \"\n                      >\n                        Hide column\n                      </button>\n                    </riv-menu>\n                  </th>\n                  <th *ngIf=\"menuTemplate\" class=\"menu-head\">\n                    <riv-sr-only>Menu</riv-sr-only>\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                <ng-container\n                  *ngIf=\"s.result.totalMatchingRowCount > 0; else empty\"\n                >\n                  <ng-container\n                    *ngFor=\"\n                      let row of group.rows;\n                      let rowIndex = index;\n                      trackBy: trackByRow\n                    \"\n                  >\n                    <ng-template #rowBody>\n                      <td\n                        *ngIf=\"\n                          s.selection.allowSelection === true ||\n                          s.selection.allowSelection === 'individual'\n                        \"\n                        class=\"selection-body\"\n                        (click)=\"$event.preventDefault()\"\n                      >\n                        <label\n                          class=\"checkbox-wrapper\"\n                          (click)=\"$event.stopPropagation()\"\n                        >\n                          <riv-checkbox\n                            [identifier]=\"'riv-table-selection-' + row.id\"\n                            [value]=\"row.selected\"\n                            (valueChange)=\"selectionChange(row.id, $event)\"\n                            ariaLabel=\"Select row\"\n                          ></riv-checkbox>\n                        </label>\n                      </td>\n                      <ng-container\n                        *ngFor=\"\n                          let column of s.display.columns;\n                          trackBy: trackByColumn\n                        \"\n                      >\n                        <ng-container\n                          *ngIf=\"\n                            s.display.cellRowSpan(rowIndex, column.key) as span\n                          \"\n                        >\n                          <td\n                            *ngIf=\"span > 0\"\n                            [attr.rowspan]=\"span\"\n                            [class.rs-right-border]=\"\n                              s.display.needsRightBorder(rowIndex, column.key)\n                            \"\n                            [class.pinned]=\"column.pinned\"\n                            [class.advanced]=\"column.dataType === 'advanced'\"\n                            [style.left.px]=\"column.left\"\n                            [style.text-align]=\"column.alignment\"\n                            (click)=\"handleClick($event, column)\"\n                          >\n                            <ng-container\n                              *ngTemplateOutlet=\"\n                                cellTemplate || null;\n                                context: { row: row, column: column }\n                              \"\n                            ></ng-container>\n                          </td>\n                        </ng-container>\n                      </ng-container>\n                      <td\n                        *ngIf=\"menuTemplate\"\n                        class=\"menu-body\"\n                        (click)=\"\n                          $event.stopPropagation(); $event.preventDefault()\n                        \"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            menuTemplate || null;\n                            context: { row: row }\n                          \"\n                        ></ng-container>\n                      </td>\n                    </ng-template>\n                    <ng-container *ngIf=\"row.rowLink; let rl\">\n                      <a\n                        *ngIf=\"isExternalRowLink(rl)\"\n                        [href]=\"rl.href\"\n                        draggable=\"false\"\n                        class=\"row-link\"\n                        [class.grayed]=\"s.display.rowsAreGrayed\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"rowBody\"\n                        ></ng-container>\n                      </a>\n                      <a\n                        *ngIf=\"isInternalRowLink(rl)\"\n                        draggable=\"false\"\n                        [routerLink]=\"rl.routerLink\"\n                        [queryParams]=\"rl.queryParams\"\n                        [queryParamsHandling]=\"rl.queryParamsHandling\"\n                        class=\"row-link\"\n                        [class.grayed]=\"s.display.rowsAreGrayed\"\n                        [class.active]=\"rl.active\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"rowBody\"\n                        ></ng-container>\n                      </a>\n                    </ng-container>\n                    <tr\n                      *ngIf=\"!row.rowLink\"\n                      [class.grayed]=\"s.display.rowsAreGrayed\"\n                    >\n                      <ng-container *ngTemplateOutlet=\"rowBody\"></ng-container>\n                    </tr>\n                  </ng-container>\n                  <tr *ngIf=\"s.display.customSummaryRow\">\n                    <td\n                      *ngFor=\"\n                        let column of s.display.columns;\n                        trackBy: trackByColumn\n                      \"\n                      [class.pinned]=\"column.pinned\"\n                      [class.advanced]=\"column.dataType === 'advanced'\"\n                      [style.left.px]=\"column.left\"\n                      [style.text-align]=\"column.alignment\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          summaryTemplate || null;\n                          context: { column: column }\n                        \"\n                      ></ng-container>\n                    </td>\n                  </tr>\n                </ng-container>\n                <ng-template #empty>\n                  <tr>\n                    <td [attr.colspan]=\"s.display.columns.length\">\n                      <riv-zero-state\n                        *ngIf=\"s.display.zeroStateMessage; let message\"\n                        [message]=\"message\"\n                      ></riv-zero-state>\n                    </td>\n                  </tr>\n                </ng-template>\n              </tbody>\n            </table>\n          </div>\n          <div\n            class=\"footer\"\n            *ngIf=\"\n              s.result.isGrouped &&\n              group.totalMatchingRowCount > s.query.grouping.countPerGroup &&\n              group.rows.length === s.query.grouping.countPerGroup\n            \"\n          >\n            <span\n              rivLink\n              class=\"footer-link\"\n              (click)=\"\n                manager?.actions?.next({\n                  type: 'viewMoreKeyChange',\n                  viewMoreKey: group.groupData.key.toString()\n                })\n              \"\n              >View all {{ group.totalMatchingRowCount }}</span\n            >\n          </div>\n          <br *ngIf=\"!last\" />\n        </ng-container>\n      </div>\n      <div *ngIf=\"s.query.pagination.showControls\" class=\"pagination\">\n        <div class=\"page-size-controls\">\n          <ng-container\n            *ngIf=\"!s.result.isGrouped && !s.display.hidePageSizeSelector\"\n          >\n            <span> Results per page: </span>\n            <riv-simple-select\n              [selectedOption]=\"{\n                id: s.query.pagination.pageSize.toString(),\n                title: s.query.pagination.pageSize.toString(),\n                value: s.query.pagination.pageSize\n              }\"\n              (selectedOptionChange)=\"\n                manager?.actions?.next({\n                  type: 'pageSizeChange',\n                  size: $event?.value || 25\n                })\n              \"\n              [optionGroups]=\"pageSizeOptions\"\n              [size]=\"'small'\"\n              [orderBy]=\"'source'\"\n            ></riv-simple-select>\n          </ng-container>\n        </div>\n        <span\n          *ngIf=\"s.result.totalMatchingRowCount > 0 && !s.result.isGrouped\"\n          class=\"page-data-indicator\"\n        >\n          {{ s.query.pagination.pageRowStart | rivNumber }}-{{\n            s.query.pagination.pageRowEnd | rivNumber\n          }}\n          of\n          {{ s.result.totalMatchingRowCount | rivNumber }}\n        </span>\n        <div\n          *ngIf=\"s.query.pagination.showControls\"\n          class=\"pagination-controls\"\n        >\n          <button\n            rivButton\n            [variant]=\"'basic'\"\n            [size]=\"'small'\"\n            [icon]=\"'ArrowLeft'\"\n            type=\"button\"\n            [disabled]=\"s.query.pagination.previous === null\"\n            (click)=\"manager?.actions?.next({ type: 'previousPageNavigate' })\"\n          ></button>\n          <span\n            *ngIf=\"s.query.pagination.pages[0] > 0\"\n            class=\"truncated-pages left\"\n          >\n            &hellip;\n          </span>\n          <button\n            *ngFor=\"let page of s.query.pagination.pages\"\n            class=\"page\"\n            type=\"button\"\n            [disabled]=\"page === s.query.pagination.page\"\n            (click)=\"manager?.actions?.next({ type: 'pageChange', page })\"\n          >\n            {{ page + 1 }}\n          </button>\n          <span\n            *ngIf=\"\n              s.query.pagination.pages[s.query.pagination.pages.length - 1] <\n              s.query.pagination.pageCount - 1\n            \"\n            class=\"truncated-pages right\"\n          >\n            &hellip;\n          </span>\n          <button\n            rivButton\n            [variant]=\"'basic'\"\n            [size]=\"'small'\"\n            [icon]=\"'ArrowRight'\"\n            type=\"button\"\n            [disabled]=\"s.query.pagination.next === null\"\n            (click)=\"manager?.actions?.next({ type: 'nextPageNavigate' })\"\n          ></button>\n        </div>\n      </div>\n    </riv-loading-cover>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;min-height:0}.no-columns-message{position:sticky;inset:0;z-index:var(--loadable-z-index);background-color:var(--surface-light-0)}riv-loading-cover,.loading-container{width:100%;display:grid;grid-template-rows:1fr auto;gap:0}header{border-width:var(--border-width) var(--border-width) 0 var(--border-width);border-style:solid;border-color:var(--border-light);border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium)}header:has(+ div > .subheader){border-bottom-width:var(--border-width);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);margin-bottom:var(--size-large)}header+.container>.subcontainer{border-top-left-radius:0;border-top-right-radius:0}.container-loader-wrapper{min-height:0}.container{overflow:auto}.container.without-columns{overflow:hidden;position:relative}.container-ungrouped{border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-medium)}.container-ungrouped.has-header{border-top-left-radius:0;border-top-right-radius:0}.subcontainer-grouped{overflow:auto;border:var(--border-width) solid var(--border-light);border-top-right-radius:var(--border-radius-medium);border-top-left-radius:var(--border-radius-medium)}.subcontainer-grouped:not(:has(+ .footer)){border-bottom-right-radius:var(--border-radius-medium);border-bottom-left-radius:var(--border-radius-medium)}table{border-collapse:separate;width:100%;table-layout:fixed}thead{position:sticky;top:0;z-index:var(--above-scroll-z-index)}th{border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);position:relative}th:not(:last-child){border-right:var(--border-width) solid var(--border-light)}th.pinned{position:sticky;top:0;z-index:1}th.dragged-over-left:before,th.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}th.dragged-over-left:before{left:0}th.dragged-over-right:before{right:0}th.selection-head{width:var(--size-xxlarge);position:sticky;z-index:1;left:0;vertical-align:middle;height:calc(var(--base-grid-size) * 8 + var(--border-width))}.checkbox-wrapper{display:flex;justify-content:center;align-items:center}label.checkbox-wrapper{cursor:pointer;width:100%;height:100%}th.menu-head{width:var(--size-xxlarge);position:sticky;z-index:1;right:0}th>riv-menu{width:100%}.header-wrapper{font-size:var(--size-medium);font-weight:var(--font-weight-heavy);line-height:1;padding:var(--size-xsmall) var(--size-small);display:inline-flex;align-items:center;justify-content:center;width:100%;height:calc(var(--base-grid-size) * 8);white-space:nowrap}.header-wrapper.left{justify-content:flex-start}.header-wrapper.right{justify-content:flex-end}button.header-wrapper{transition:background-color var(--short-transition);cursor:pointer}button.header-wrapper:hover{background-color:var(--black-20)}button.header-wrapper .icon-container{overflow:hidden;display:inline-block;width:0;height:1em;opacity:0;padding-left:0;transition:width var(--medium-transition),opacity var(--medium-transition),color var(--medium-transition),padding-left var(--medium-transition)}button.header-wrapper.active .icon-container{width:calc(var(--base-grid-size) * 3.5);padding-left:var(--size-xsmall);opacity:1}button.header-wrapper:hover .icon-container{color:var(--type-light-low-contrast)}button.header-wrapper.active .icon-container{color:var(--brand)}a.row-link{display:table-row;text-decoration:none;color:inherit;-webkit-user-select:text;user-select:text}a.row-link td{transition:background-color var(--short-transition);-webkit-user-select:text;user-select:text}a.row-link:hover td{background-color:var(--surface-light-2)}a.row-link:active td{background-color:var(--surface-light-3)}td.rs-hover{background-color:var(--surface-light-2)}td{border-bottom:var(--border-width) solid var(--border-light);height:calc(var(--base-grid-size) * 8);padding:var(--size-xxsmall) var(--size-small);font:var(--body-small);vertical-align:middle;text-align:center;background-color:var(--surface-light-0)}tr.grayed td,a.row-link.grayed td{background-color:var(--gray-30)}tbody>*:last-child>td{border-bottom:none}td.pinned{position:sticky;z-index:1}td.pinned:not(:has(+ td.pinned)){border-right:var(--border-width) solid var(--border-light)}td.advanced,td.selection-body,td.menu-body{padding:0;vertical-align:middle}td.selection-body{position:sticky;z-index:1;left:0}td.menu-body{position:sticky;z-index:1;right:0}.pagination{margin-top:var(--size-small);display:flex;justify-content:space-between;gap:var(--size-large)}.page-size-controls,.pagination-controls{display:flex;align-items:center;gap:var(--size-xsmall)}.page-data-indicator{display:flex;align-items:center;flex-grow:1;justify-content:flex-end;font:var(--body-medium);color:var(--type-light-low-contrast)}.page-size-controls span{font:var(--body-medium)}.page{display:flex;align-items:center;justify-content:center;min-width:calc(var(--base-grid-size) * 7.5);height:calc(var(--base-grid-size) * 7.5);padding:var(--size-xxsmall);font:var(--input-medium);color:var(--purp-80);border-radius:var(--border-radius-small);transition:background-color var(--short-transition)}.page:hover,.page:disabled{background-color:var(--black-20)}.page:active:not(:disabled){background-color:var(--black-40)}.page:not(:disabled){cursor:pointer}.truncated-pages{color:var(--type-light-disabled)}.truncated-pages.left{padding-left:var(--size-small)}.truncated-pages.right{padding-right:var(--size-small)}.footer{background-color:var(--surface-light-1);border-bottom:var(--border-width) solid var(--border-light);border-left:var(--border-width) solid var(--border-light);border-right:var(--border-width) solid var(--border-light);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);text-align:right;padding:calc(var(--base-grid-size) / 2);font:var(--body-medium)}.footer-link{margin-right:var(--size-medium)}td[rowspan]:not([rowspan=\"1\"]){border-right:var(--border-width) solid var(--border-light)}td.rs-right-border{border-right:var(--border-width) solid var(--border-light)}a.row-link.active>td{background-color:var(--surface-light-selected)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i2.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme", "variant"] }, { kind: "component", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "zIndexOverride", "errorMessage"] }, { kind: "component", type: MenuComponent, selector: "riv-menu", inputs: ["preferredPosition"] }, { kind: "component", type: MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: SrOnlyComponent, selector: "riv-sr-only" }, { kind: "component", type: TableHeaderResizeHandleComponent, selector: "riv-table-header-resize-handle", outputs: ["dragResize"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TableComponent, decorators: [{
+TableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+TableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TableComponent, selector: "riv-table", inputs: { manager: "manager" }, host: { listeners: { "document:keydown": "keyDown($event)", "document:keyup": "keyUp($event)" } }, queries: [{ propertyName: "cellTemplate", first: true, predicate: ["cell"], descendants: true }, { propertyName: "summaryTemplate", first: true, predicate: ["summary"], descendants: true }, { propertyName: "menuTemplate", first: true, predicate: ["menu"], descendants: true }, { propertyName: "selectionTemplate", first: true, predicate: ["selection"], descendants: true }, { propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }, { propertyName: "subheaderTemplate", first: true, predicate: ["subheader"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <ng-container *ngIf=\"selectionCalloutPosition | async; let position\">\n    <ng-container *ngIf=\"s.selection.selectedCount > 0 && selectionTemplate\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"position\"\n        [isModal]=\"false\"\n        [theme]=\"'light'\"\n        [showCaret]=\"false\"\n        [preferredPosition]=\"'top-right'\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"selectionTemplate; context: { state: s }\"\n        ></ng-container>\n      </riv-callout>\n    </ng-container>\n  </ng-container>\n  <div class=\"loading-container\">\n    <header *ngIf=\"headerTemplate\">\n      <ng-container\n        *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n      ></ng-container>\n    </header>\n    <riv-loading-cover\n      class=\"container-loader-wrapper\"\n      [loading]=\"s.load.loading\"\n      [errorMessage]=\"s.load.error ? getErrorMessage(s.load.error) : undefined\"\n    >\n      <div\n        class=\"container\"\n        [ngClass]=\"{\n          'container-ungrouped': !s.result.isGrouped,\n          'has-header': !s.result.isGrouped && headerTemplate,\n          'without-columns': s.display.columns.length === 0\n        }\"\n        (rivClientSize)=\"containerSize.next($event)\"\n      >\n        <riv-zero-state\n          *ngIf=\"s.display.columns.length === 0\"\n          class=\"no-columns-message\"\n          [message]=\"\n            'All columns disabled. Enable at least one column to view table data.'\n          \"\n        ></riv-zero-state>\n        <ng-container\n          *ngFor=\"\n            let group of s.result.isGrouped\n              ? s.result.rowGroups\n              : [s.result.rowsAsGroup];\n            trackBy: trackByGroup;\n            let last = last\n          \"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              subheaderTemplate || null;\n              context: { state: s, group }\n            \"\n          ></ng-container>\n          <div [ngClass]=\"{ 'subcontainer-grouped': s.result.isGrouped }\">\n            <table>\n              <thead>\n                <tr>\n                  <th\n                    *ngIf=\"!!s.selection.allowSelection\"\n                    class=\"selection-head\"\n                  >\n                    <riv-sr-only>Select rows</riv-sr-only>\n                    <div\n                      *ngIf=\"\n                        s.selection.allowSelection !== 'individual' &&\n                        s.selection.allowSelection === true\n                      \"\n                      class=\"checkbox-wrapper\"\n                    >\n                      <riv-checkbox\n                        *ngIf=\"!s.result.isGrouped\"\n                        [value]=\"s.selection.isAllSelected === true\"\n                        [indeterminate]=\"\n                          s.selection.isAllSelected === 'indeterminate'\n                        \"\n                        (valueChange)=\"\n                          manager?.actions?.next({ type: 'allSelectedChange' })\n                        \"\n                        ariaLabel=\"Select all rows\"\n                      ></riv-checkbox>\n                      <riv-checkbox\n                        *ngIf=\"s.result.isGrouped\"\n                        [value]=\"group.selected === true\"\n                        [indeterminate]=\"group.selected === 'indeterminate'\"\n                        (valueChange)=\"\n                          manager?.actions?.next({\n                            type: 'groupSelectionChange',\n                            payload: group\n                          })\n                        \"\n                        ariaLabel=\"Select group rows\"\n                      ></riv-checkbox>\n                    </div>\n                  </th>\n                  <th\n                    *ngFor=\"let column of s.display.columns; let i = index\"\n                    [class.pinned]=\"column.pinned\"\n                    [style.left.px]=\"column.left\"\n                    [style.width.px]=\"getWidth(column)\"\n                    [attr.draggable]=\"s.display.columnsAreReorderable\"\n                    droppable=\"true\"\n                    class=\"drop-zone\"\n                    (dragstart)=\"dragStart(i, column.key)\"\n                    (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n                    (drop)=\"drop(i, s.display.enabledCount)\"\n                    [class.dragged-over-left]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx > i\n                    \"\n                    [class.dragged-over-right]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx < i\n                    \"\n                  >\n                    <div\n                      *ngIf=\"\n                        !column.orderable &&\n                        !column.filterable &&\n                        !s.display.columnsAreFreezable &&\n                        !s.display.columnsAreHideable\n                      \"\n                      class=\"header-wrapper\"\n                      [class.left]=\"column.alignment === 'left'\"\n                      [class.right]=\"column.alignment === 'right'\"\n                    >\n                      {{ s.display.columnNameMap.get(column.key) }}\n                    </div>\n                    <riv-menu\n                      *ngIf=\"\n                        column.orderable ||\n                        column.filterable ||\n                        s.display.columnsAreFreezable ||\n                        s.display.columnsAreHideable\n                      \"\n                    >\n                      <ng-template #trigger>\n                        <button\n                          type=\"button\"\n                          class=\"header-wrapper\"\n                          [class.left]=\"column.alignment === 'left'\"\n                          [class.right]=\"column.alignment === 'right'\"\n                          [class.active]=\"s.query.order?.column === column.key\"\n                        >\n                          {{ s.display.columnNameMap.get(column.key) }}\n                          <span class=\"icon-container\">\n                            <riv-icon\n                              [size]=\"12\"\n                              [name]=\"\n                                s.query.order?.direction === 'desc'\n                                  ? 'ArrowDown'\n                                  : 'ArrowUp'\n                              \"\n                            ></riv-icon>\n                          </span>\n                        </button>\n                        <riv-table-header-resize-handle\n                          (dragResize)=\"setWidth(column.key, $event)\"\n                        ></riv-table-header-resize-handle>\n                      </ng-template>\n                      <ng-container *ngIf=\"column.orderable\">\n                        <button\n                          *ngIf=\"\n                            !(\n                              s.query.order?.column === column.key &&\n                              s.query.order?.direction === 'asc'\n                            )\n                          \"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: {\n                                direction: 'asc',\n                                column: column.key\n                              }\n                            })\n                          \"\n                        >\n                          Sort ascending\n                        </button>\n                        <button\n                          *ngIf=\"s.query.order?.column === column.key\"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: null\n                            })\n                          \"\n                        >\n                          Remove sort\n                        </button>\n                        <button\n                          *ngIf=\"\n                            !(\n                              s.query.order?.column === column.key &&\n                              s.query.order?.direction === 'desc'\n                            )\n                          \"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: {\n                                direction: 'desc',\n                                column: column.key\n                              }\n                            })\n                          \"\n                        >\n                          Sort descending\n                        </button>\n                      </ng-container>\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"column.orderable && column.filterable\"\n                      ></div>\n                      <button\n                        *ngIf=\"column.filterable\"\n                        riv-menu-item\n                        (click)=\"\n                          this.manager?.actions?.next({\n                            type: 'filterAdd',\n                            columnKey: column.key\n                          })\n                        \"\n                      >\n                        Add a filter\n                      </button>\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"\n                          (column.orderable || column.filterable) &&\n                          (s.display.columnsAreFreezable ||\n                            s.display.columnsAreHideable)\n                        \"\n                      ></div>\n                      <ng-container *ngIf=\"s.display.columnsAreFreezable\">\n                        <button\n                          *ngIf=\"!column.pinned\"\n                          riv-menu-item\n                          (click)=\"\n                            this.manager?.actions?.next({\n                              type: 'columnsFreezeUpToChange',\n                              freeze: true,\n                              index: i,\n                              source: 'headerMenu',\n                              column: column.key\n                            })\n                          \"\n                        >\n                          Freeze up to column\n                        </button>\n                        <button\n                          *ngIf=\"column.pinned\"\n                          riv-menu-item\n                          (click)=\"\n                            this.manager?.actions?.next({\n                              type: 'columnsFreezeUpToChange',\n                              freeze: false,\n                              index: 0,\n                              source: 'headerMenu',\n                              column: column.key\n                            })\n                          \"\n                        >\n                          Un-freeze columns\n                        </button>\n                      </ng-container>\n                      <button\n                        *ngIf=\"s.display.columnsAreHideable\"\n                        riv-menu-item\n                        (click)=\"\n                          this.manager?.actions?.next({\n                            type: 'columnEnabledChange',\n                            column: column.key,\n                            enabled: false,\n                            source: 'headerMenu'\n                          })\n                        \"\n                      >\n                        Hide column\n                      </button>\n                    </riv-menu>\n                  </th>\n                  <th *ngIf=\"menuTemplate\" class=\"menu-head\">\n                    <riv-sr-only>Menu</riv-sr-only>\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                <ng-container\n                  *ngIf=\"s.result.totalMatchingRowCount > 0; else empty\"\n                >\n                  <ng-container\n                    *ngFor=\"\n                      let row of group.rows;\n                      let rowIndex = index;\n                      trackBy: trackByRow\n                    \"\n                  >\n                    <ng-template #rowBody>\n                      <td\n                        *ngIf=\"\n                          s.selection.allowSelection === true ||\n                          s.selection.allowSelection === 'individual'\n                        \"\n                        class=\"selection-body\"\n                        (click)=\"$event.preventDefault()\"\n                      >\n                        <label\n                          class=\"checkbox-wrapper\"\n                          (click)=\"$event.stopPropagation()\"\n                        >\n                          <riv-checkbox\n                            [identifier]=\"'riv-table-selection-' + row.id\"\n                            [value]=\"row.selected\"\n                            (valueChange)=\"selectionChange(row.id, $event)\"\n                            ariaLabel=\"Select row\"\n                          ></riv-checkbox>\n                        </label>\n                      </td>\n                      <ng-container\n                        *ngFor=\"\n                          let column of s.display.columns;\n                          trackBy: trackByColumn\n                        \"\n                      >\n                        <ng-container\n                          *ngIf=\"\n                            s.display.cellRowSpan(rowIndex, column.key) as span\n                          \"\n                        >\n                          <td\n                            *ngIf=\"span > 0\"\n                            [attr.rowspan]=\"span\"\n                            [class.rs-right-border]=\"\n                              s.display.needsRightBorder(rowIndex, column.key)\n                            \"\n                            [class.pinned]=\"column.pinned\"\n                            [class.advanced]=\"column.dataType === 'advanced'\"\n                            [style.left.px]=\"column.left\"\n                            [style.text-align]=\"column.alignment\"\n                            (click)=\"handleClick($event, column)\"\n                          >\n                            <ng-container\n                              *ngTemplateOutlet=\"\n                                cellTemplate || null;\n                                context: { row: row, column: column }\n                              \"\n                            ></ng-container>\n                          </td>\n                        </ng-container>\n                      </ng-container>\n                      <td\n                        *ngIf=\"menuTemplate\"\n                        class=\"menu-body\"\n                        (click)=\"\n                          $event.stopPropagation(); $event.preventDefault()\n                        \"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            menuTemplate || null;\n                            context: { row: row }\n                          \"\n                        ></ng-container>\n                      </td>\n                    </ng-template>\n                    <ng-container *ngIf=\"row.rowLink; let rl\">\n                      <a\n                        *ngIf=\"isExternalRowLink(rl)\"\n                        [href]=\"rl.href\"\n                        draggable=\"false\"\n                        class=\"row-link\"\n                        [class.grayed]=\"s.display.rowsAreGrayed\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"rowBody\"\n                        ></ng-container>\n                      </a>\n                      <a\n                        *ngIf=\"isInternalRowLink(rl)\"\n                        draggable=\"false\"\n                        [routerLink]=\"rl.routerLink\"\n                        [queryParams]=\"rl.queryParams\"\n                        [queryParamsHandling]=\"rl.queryParamsHandling\"\n                        class=\"row-link\"\n                        [class.grayed]=\"s.display.rowsAreGrayed\"\n                        [class.active]=\"rl.active\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"rowBody\"\n                        ></ng-container>\n                      </a>\n                    </ng-container>\n                    <tr\n                      *ngIf=\"!row.rowLink\"\n                      [class.grayed]=\"s.display.rowsAreGrayed\"\n                    >\n                      <ng-container *ngTemplateOutlet=\"rowBody\"></ng-container>\n                    </tr>\n                  </ng-container>\n                  <tr *ngIf=\"s.display.customSummaryRow\">\n                    <td\n                      *ngFor=\"\n                        let column of s.display.columns;\n                        trackBy: trackByColumn\n                      \"\n                      [class.pinned]=\"column.pinned\"\n                      [class.advanced]=\"column.dataType === 'advanced'\"\n                      [style.left.px]=\"column.left\"\n                      [style.text-align]=\"column.alignment\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          summaryTemplate || null;\n                          context: { column: column }\n                        \"\n                      ></ng-container>\n                    </td>\n                  </tr>\n                </ng-container>\n                <ng-template #empty>\n                  <tr>\n                    <td [attr.colspan]=\"s.display.columns.length\">\n                      <riv-zero-state\n                        *ngIf=\"s.display.zeroStateMessage; let message\"\n                        [message]=\"message\"\n                      ></riv-zero-state>\n                    </td>\n                  </tr>\n                </ng-template>\n              </tbody>\n            </table>\n          </div>\n          <div\n            class=\"footer\"\n            *ngIf=\"\n              s.result.isGrouped &&\n              group.totalMatchingRowCount > s.query.grouping.countPerGroup &&\n              group.rows.length === s.query.grouping.countPerGroup\n            \"\n          >\n            <span\n              rivLink\n              class=\"footer-link\"\n              (click)=\"\n                manager?.actions?.next({\n                  type: 'viewMoreKeyChange',\n                  viewMoreKey: group.groupData.key.toString()\n                })\n              \"\n              >View all {{ group.totalMatchingRowCount }}</span\n            >\n          </div>\n          <br *ngIf=\"!last\" />\n        </ng-container>\n      </div>\n      <div *ngIf=\"s.query.pagination.showControls\" class=\"pagination\">\n        <div class=\"page-size-controls\">\n          <ng-container\n            *ngIf=\"!s.result.isGrouped && !s.display.hidePageSizeSelector\"\n          >\n            <span> Results per page: </span>\n            <riv-simple-select\n              [selectedOption]=\"{\n                id: s.query.pagination.pageSize.toString(),\n                title: s.query.pagination.pageSize.toString(),\n                value: s.query.pagination.pageSize\n              }\"\n              (selectedOptionChange)=\"\n                manager?.actions?.next({\n                  type: 'pageSizeChange',\n                  size: $event?.value || 25\n                })\n              \"\n              [optionGroups]=\"pageSizeOptions\"\n              [size]=\"'small'\"\n              [orderBy]=\"'source'\"\n            ></riv-simple-select>\n          </ng-container>\n        </div>\n        <span\n          *ngIf=\"s.result.totalMatchingRowCount > 0 && !s.result.isGrouped\"\n          class=\"page-data-indicator\"\n        >\n          {{ s.query.pagination.pageRowStart | rivNumber }}-{{\n            s.query.pagination.pageRowEnd | rivNumber\n          }}\n          of\n          {{ s.result.totalMatchingRowCount | rivNumber }}\n        </span>\n        <div\n          *ngIf=\"s.query.pagination.showControls\"\n          class=\"pagination-controls\"\n        >\n          <button\n            rivButton\n            [variant]=\"'basic'\"\n            [size]=\"'small'\"\n            [icon]=\"'ArrowLeft'\"\n            type=\"button\"\n            [disabled]=\"s.query.pagination.previous === null\"\n            (click)=\"manager?.actions?.next({ type: 'previousPageNavigate' })\"\n          ></button>\n          <span\n            *ngIf=\"s.query.pagination.pages[0] > 0\"\n            class=\"truncated-pages left\"\n          >\n            &hellip;\n          </span>\n          <button\n            *ngFor=\"let page of s.query.pagination.pages\"\n            class=\"page\"\n            type=\"button\"\n            [disabled]=\"page === s.query.pagination.page\"\n            (click)=\"manager?.actions?.next({ type: 'pageChange', page })\"\n          >\n            {{ page + 1 }}\n          </button>\n          <span\n            *ngIf=\"\n              s.query.pagination.pages[s.query.pagination.pages.length - 1] <\n              s.query.pagination.pageCount - 1\n            \"\n            class=\"truncated-pages right\"\n          >\n            &hellip;\n          </span>\n          <button\n            rivButton\n            [variant]=\"'basic'\"\n            [size]=\"'small'\"\n            [icon]=\"'ArrowRight'\"\n            type=\"button\"\n            [disabled]=\"s.query.pagination.next === null\"\n            (click)=\"manager?.actions?.next({ type: 'nextPageNavigate' })\"\n          ></button>\n        </div>\n      </div>\n    </riv-loading-cover>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;min-height:0}.no-columns-message{position:sticky;inset:0;z-index:var(--loadable-z-index);background-color:var(--surface-light-0)}riv-loading-cover,.loading-container{width:100%;display:grid;grid-template-rows:1fr auto;gap:0}header{border-width:var(--border-width) var(--border-width) 0 var(--border-width);border-style:solid;border-color:var(--border-light);border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium)}header:has(+ div > .subheader){border-bottom-width:var(--border-width);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);margin-bottom:var(--size-large)}header+.container>.subcontainer{border-top-left-radius:0;border-top-right-radius:0}.container-loader-wrapper{min-height:0}.container{overflow:auto}.container.without-columns{overflow:hidden;position:relative}.container-ungrouped{border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-medium)}.container-ungrouped.has-header{border-top-left-radius:0;border-top-right-radius:0}.subcontainer-grouped{overflow:auto;border:var(--border-width) solid var(--border-light);border-top-right-radius:var(--border-radius-medium);border-top-left-radius:var(--border-radius-medium)}.subcontainer-grouped:not(:has(+ .footer)){border-bottom-right-radius:var(--border-radius-medium);border-bottom-left-radius:var(--border-radius-medium)}table{border-collapse:separate;width:100%;table-layout:fixed}thead{position:sticky;top:0;z-index:var(--above-scroll-z-index)}th{border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);position:relative}th:not(:last-child){border-right:var(--border-width) solid var(--border-light)}th.pinned{position:sticky;top:0;z-index:1}th.dragged-over-left:before,th.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}th.dragged-over-left:before{left:0}th.dragged-over-right:before{right:0}th.selection-head{width:var(--size-xxlarge);position:sticky;z-index:1;left:0;vertical-align:middle;height:calc(var(--base-grid-size) * 8 + var(--border-width))}.checkbox-wrapper{display:flex;justify-content:center;align-items:center}label.checkbox-wrapper{cursor:pointer;width:100%;height:100%}th.menu-head{width:var(--size-xxlarge);position:sticky;z-index:1;right:0}th>riv-menu{width:100%}.header-wrapper{font-size:var(--size-medium);font-weight:var(--font-weight-heavy);line-height:1;padding:var(--size-xsmall) var(--size-small);display:inline-flex;align-items:center;justify-content:center;width:100%;height:calc(var(--base-grid-size) * 8);white-space:nowrap}.header-wrapper.left{justify-content:flex-start}.header-wrapper.right{justify-content:flex-end}button.header-wrapper{transition:background-color var(--short-transition);cursor:pointer}button.header-wrapper:hover{background-color:var(--black-20)}button.header-wrapper .icon-container{overflow:hidden;display:inline-block;width:0;height:1em;opacity:0;padding-left:0;transition:width var(--medium-transition),opacity var(--medium-transition),color var(--medium-transition),padding-left var(--medium-transition)}button.header-wrapper.active .icon-container{width:calc(var(--base-grid-size) * 3.5);padding-left:var(--size-xsmall);opacity:1}button.header-wrapper:hover .icon-container{color:var(--type-light-low-contrast)}button.header-wrapper.active .icon-container{color:var(--brand)}a.row-link{display:table-row;text-decoration:none;color:inherit;-webkit-user-select:text;user-select:text}a.row-link td{transition:background-color var(--short-transition);-webkit-user-select:text;user-select:text}a.row-link:hover td{background-color:var(--surface-light-2)}a.row-link:active td{background-color:var(--surface-light-3)}td.rs-hover{background-color:var(--surface-light-2)}td{border-bottom:var(--border-width) solid var(--border-light);height:calc(var(--base-grid-size) * 8);padding:var(--size-xxsmall) var(--size-small);font:var(--body-small);vertical-align:middle;text-align:center;background-color:var(--surface-light-0)}tr.grayed td,a.row-link.grayed td{background-color:var(--gray-30)}tbody>*:last-child>td{border-bottom:none}td.pinned{position:sticky;z-index:1}td.pinned:not(:has(+ td.pinned)){border-right:var(--border-width) solid var(--border-light)}td.advanced,td.selection-body,td.menu-body{padding:0;vertical-align:middle}td.selection-body{position:sticky;z-index:1;left:0}td.menu-body{position:sticky;z-index:1;right:0}.pagination{margin-top:var(--size-small);display:flex;justify-content:space-between;gap:var(--size-large)}.page-size-controls,.pagination-controls{display:flex;align-items:center;gap:var(--size-xsmall)}.page-data-indicator{display:flex;align-items:center;flex-grow:1;justify-content:flex-end;font:var(--body-medium);color:var(--type-light-low-contrast)}.page-size-controls span{font:var(--body-medium)}.page{display:flex;align-items:center;justify-content:center;min-width:calc(var(--base-grid-size) * 7.5);height:calc(var(--base-grid-size) * 7.5);padding:var(--size-xxsmall);font:var(--input-medium);color:var(--purp-80);border-radius:var(--border-radius-small);transition:background-color var(--short-transition)}.page:hover,.page:disabled{background-color:var(--black-20)}.page:active:not(:disabled){background-color:var(--black-40)}.page:not(:disabled){cursor:pointer}.truncated-pages{color:var(--type-light-disabled)}.truncated-pages.left{padding-left:var(--size-small)}.truncated-pages.right{padding-right:var(--size-small)}.footer{background-color:var(--surface-light-1);border-bottom:var(--border-width) solid var(--border-light);border-left:var(--border-width) solid var(--border-light);border-right:var(--border-width) solid var(--border-light);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);text-align:right;padding:calc(var(--base-grid-size) / 2);font:var(--body-medium)}.footer-link{margin-right:var(--size-medium)}td[rowspan]:not([rowspan=\"1\"]){border-right:var(--border-width) solid var(--border-light)}td.rs-right-border{border-right:var(--border-width) solid var(--border-light)}a.row-link.active>td{background-color:var(--surface-light-selected)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme", "variant"] }, { kind: "component", type: LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "zIndexOverride", "errorMessage"] }, { kind: "component", type: MenuComponent, selector: "riv-menu", inputs: ["preferredPosition"] }, { kind: "component", type: MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: SrOnlyComponent, selector: "riv-sr-only" }, { kind: "component", type: TableHeaderResizeHandleComponent, selector: "riv-table-header-resize-handle", outputs: ["dragResize"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <ng-container *ngIf=\"selectionCalloutPosition | async; let position\">\n    <ng-container *ngIf=\"s.selection.selectedCount > 0 && selectionTemplate\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"position\"\n        [isModal]=\"false\"\n        [theme]=\"'light'\"\n        [showCaret]=\"false\"\n        [preferredPosition]=\"'top-right'\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"selectionTemplate; context: { state: s }\"\n        ></ng-container>\n      </riv-callout>\n    </ng-container>\n  </ng-container>\n  <div class=\"loading-container\">\n    <header *ngIf=\"headerTemplate\">\n      <ng-container\n        *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n      ></ng-container>\n    </header>\n    <riv-loading-cover\n      class=\"container-loader-wrapper\"\n      [loading]=\"s.load.loading\"\n      [errorMessage]=\"s.load.error ? getErrorMessage(s.load.error) : undefined\"\n    >\n      <div\n        class=\"container\"\n        [ngClass]=\"{\n          'container-ungrouped': !s.result.isGrouped,\n          'has-header': !s.result.isGrouped && headerTemplate,\n          'without-columns': s.display.columns.length === 0\n        }\"\n        (rivClientSize)=\"containerSize.next($event)\"\n      >\n        <riv-zero-state\n          *ngIf=\"s.display.columns.length === 0\"\n          class=\"no-columns-message\"\n          [message]=\"\n            'All columns disabled. Enable at least one column to view table data.'\n          \"\n        ></riv-zero-state>\n        <ng-container\n          *ngFor=\"\n            let group of s.result.isGrouped\n              ? s.result.rowGroups\n              : [s.result.rowsAsGroup];\n            trackBy: trackByGroup;\n            let last = last\n          \"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              subheaderTemplate || null;\n              context: { state: s, group }\n            \"\n          ></ng-container>\n          <div [ngClass]=\"{ 'subcontainer-grouped': s.result.isGrouped }\">\n            <table>\n              <thead>\n                <tr>\n                  <th\n                    *ngIf=\"!!s.selection.allowSelection\"\n                    class=\"selection-head\"\n                  >\n                    <riv-sr-only>Select rows</riv-sr-only>\n                    <div\n                      *ngIf=\"\n                        s.selection.allowSelection !== 'individual' &&\n                        s.selection.allowSelection === true\n                      \"\n                      class=\"checkbox-wrapper\"\n                    >\n                      <riv-checkbox\n                        *ngIf=\"!s.result.isGrouped\"\n                        [value]=\"s.selection.isAllSelected === true\"\n                        [indeterminate]=\"\n                          s.selection.isAllSelected === 'indeterminate'\n                        \"\n                        (valueChange)=\"\n                          manager?.actions?.next({ type: 'allSelectedChange' })\n                        \"\n                        ariaLabel=\"Select all rows\"\n                      ></riv-checkbox>\n                      <riv-checkbox\n                        *ngIf=\"s.result.isGrouped\"\n                        [value]=\"group.selected === true\"\n                        [indeterminate]=\"group.selected === 'indeterminate'\"\n                        (valueChange)=\"\n                          manager?.actions?.next({\n                            type: 'groupSelectionChange',\n                            payload: group\n                          })\n                        \"\n                        ariaLabel=\"Select group rows\"\n                      ></riv-checkbox>\n                    </div>\n                  </th>\n                  <th\n                    *ngFor=\"let column of s.display.columns; let i = index\"\n                    [class.pinned]=\"column.pinned\"\n                    [style.left.px]=\"column.left\"\n                    [style.width.px]=\"getWidth(column)\"\n                    [attr.draggable]=\"s.display.columnsAreReorderable\"\n                    droppable=\"true\"\n                    class=\"drop-zone\"\n                    (dragstart)=\"dragStart(i, column.key)\"\n                    (dragenter)=\"$event.preventDefault(); dragOver(i)\"\n                    (drop)=\"drop(i, s.display.enabledCount)\"\n                    [class.dragged-over-left]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx > i\n                    \"\n                    [class.dragged-over-right]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx < i\n                    \"\n                  >\n                    <div\n                      *ngIf=\"\n                        !column.orderable &&\n                        !column.filterable &&\n                        !s.display.columnsAreFreezable &&\n                        !s.display.columnsAreHideable\n                      \"\n                      class=\"header-wrapper\"\n                      [class.left]=\"column.alignment === 'left'\"\n                      [class.right]=\"column.alignment === 'right'\"\n                    >\n                      {{ s.display.columnNameMap.get(column.key) }}\n                    </div>\n                    <riv-menu\n                      *ngIf=\"\n                        column.orderable ||\n                        column.filterable ||\n                        s.display.columnsAreFreezable ||\n                        s.display.columnsAreHideable\n                      \"\n                    >\n                      <ng-template #trigger>\n                        <button\n                          type=\"button\"\n                          class=\"header-wrapper\"\n                          [class.left]=\"column.alignment === 'left'\"\n                          [class.right]=\"column.alignment === 'right'\"\n                          [class.active]=\"s.query.order?.column === column.key\"\n                        >\n                          {{ s.display.columnNameMap.get(column.key) }}\n                          <span class=\"icon-container\">\n                            <riv-icon\n                              [size]=\"12\"\n                              [name]=\"\n                                s.query.order?.direction === 'desc'\n                                  ? 'ArrowDown'\n                                  : 'ArrowUp'\n                              \"\n                            ></riv-icon>\n                          </span>\n                        </button>\n                        <riv-table-header-resize-handle\n                          (dragResize)=\"setWidth(column.key, $event)\"\n                        ></riv-table-header-resize-handle>\n                      </ng-template>\n                      <ng-container *ngIf=\"column.orderable\">\n                        <button\n                          *ngIf=\"\n                            !(\n                              s.query.order?.column === column.key &&\n                              s.query.order?.direction === 'asc'\n                            )\n                          \"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: {\n                                direction: 'asc',\n                                column: column.key\n                              }\n                            })\n                          \"\n                        >\n                          Sort ascending\n                        </button>\n                        <button\n                          *ngIf=\"s.query.order?.column === column.key\"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: null\n                            })\n                          \"\n                        >\n                          Remove sort\n                        </button>\n                        <button\n                          *ngIf=\"\n                            !(\n                              s.query.order?.column === column.key &&\n                              s.query.order?.direction === 'desc'\n                            )\n                          \"\n                          riv-menu-item\n                          (click)=\"\n                            manager?.actions?.next({\n                              type: 'orderChange',\n                              source: 'headerMenu',\n                              payload: {\n                                direction: 'desc',\n                                column: column.key\n                              }\n                            })\n                          \"\n                        >\n                          Sort descending\n                        </button>\n                      </ng-container>\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"column.orderable && column.filterable\"\n                      ></div>\n                      <button\n                        *ngIf=\"column.filterable\"\n                        riv-menu-item\n                        (click)=\"\n                          this.manager?.actions?.next({\n                            type: 'filterAdd',\n                            columnKey: column.key\n                          })\n                        \"\n                      >\n                        Add a filter\n                      </button>\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"\n                          (column.orderable || column.filterable) &&\n                          (s.display.columnsAreFreezable ||\n                            s.display.columnsAreHideable)\n                        \"\n                      ></div>\n                      <ng-container *ngIf=\"s.display.columnsAreFreezable\">\n                        <button\n                          *ngIf=\"!column.pinned\"\n                          riv-menu-item\n                          (click)=\"\n                            this.manager?.actions?.next({\n                              type: 'columnsFreezeUpToChange',\n                              freeze: true,\n                              index: i,\n                              source: 'headerMenu',\n                              column: column.key\n                            })\n                          \"\n                        >\n                          Freeze up to column\n                        </button>\n                        <button\n                          *ngIf=\"column.pinned\"\n                          riv-menu-item\n                          (click)=\"\n                            this.manager?.actions?.next({\n                              type: 'columnsFreezeUpToChange',\n                              freeze: false,\n                              index: 0,\n                              source: 'headerMenu',\n                              column: column.key\n                            })\n                          \"\n                        >\n                          Un-freeze columns\n                        </button>\n                      </ng-container>\n                      <button\n                        *ngIf=\"s.display.columnsAreHideable\"\n                        riv-menu-item\n                        (click)=\"\n                          this.manager?.actions?.next({\n                            type: 'columnEnabledChange',\n                            column: column.key,\n                            enabled: false,\n                            source: 'headerMenu'\n                          })\n                        \"\n                      >\n                        Hide column\n                      </button>\n                    </riv-menu>\n                  </th>\n                  <th *ngIf=\"menuTemplate\" class=\"menu-head\">\n                    <riv-sr-only>Menu</riv-sr-only>\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                <ng-container\n                  *ngIf=\"s.result.totalMatchingRowCount > 0; else empty\"\n                >\n                  <ng-container\n                    *ngFor=\"\n                      let row of group.rows;\n                      let rowIndex = index;\n                      trackBy: trackByRow\n                    \"\n                  >\n                    <ng-template #rowBody>\n                      <td\n                        *ngIf=\"\n                          s.selection.allowSelection === true ||\n                          s.selection.allowSelection === 'individual'\n                        \"\n                        class=\"selection-body\"\n                        (click)=\"$event.preventDefault()\"\n                      >\n                        <label\n                          class=\"checkbox-wrapper\"\n                          (click)=\"$event.stopPropagation()\"\n                        >\n                          <riv-checkbox\n                            [identifier]=\"'riv-table-selection-' + row.id\"\n                            [value]=\"row.selected\"\n                            (valueChange)=\"selectionChange(row.id, $event)\"\n                            ariaLabel=\"Select row\"\n                          ></riv-checkbox>\n                        </label>\n                      </td>\n                      <ng-container\n                        *ngFor=\"\n                          let column of s.display.columns;\n                          trackBy: trackByColumn\n                        \"\n                      >\n                        <ng-container\n                          *ngIf=\"\n                            s.display.cellRowSpan(rowIndex, column.key) as span\n                          \"\n                        >\n                          <td\n                            *ngIf=\"span > 0\"\n                            [attr.rowspan]=\"span\"\n                            [class.rs-right-border]=\"\n                              s.display.needsRightBorder(rowIndex, column.key)\n                            \"\n                            [class.pinned]=\"column.pinned\"\n                            [class.advanced]=\"column.dataType === 'advanced'\"\n                            [style.left.px]=\"column.left\"\n                            [style.text-align]=\"column.alignment\"\n                            (click)=\"handleClick($event, column)\"\n                          >\n                            <ng-container\n                              *ngTemplateOutlet=\"\n                                cellTemplate || null;\n                                context: { row: row, column: column }\n                              \"\n                            ></ng-container>\n                          </td>\n                        </ng-container>\n                      </ng-container>\n                      <td\n                        *ngIf=\"menuTemplate\"\n                        class=\"menu-body\"\n                        (click)=\"\n                          $event.stopPropagation(); $event.preventDefault()\n                        \"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            menuTemplate || null;\n                            context: { row: row }\n                          \"\n                        ></ng-container>\n                      </td>\n                    </ng-template>\n                    <ng-container *ngIf=\"row.rowLink; let rl\">\n                      <a\n                        *ngIf=\"isExternalRowLink(rl)\"\n                        [href]=\"rl.href\"\n                        draggable=\"false\"\n                        class=\"row-link\"\n                        [class.grayed]=\"s.display.rowsAreGrayed\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"rowBody\"\n                        ></ng-container>\n                      </a>\n                      <a\n                        *ngIf=\"isInternalRowLink(rl)\"\n                        draggable=\"false\"\n                        [routerLink]=\"rl.routerLink\"\n                        [queryParams]=\"rl.queryParams\"\n                        [queryParamsHandling]=\"rl.queryParamsHandling\"\n                        class=\"row-link\"\n                        [class.grayed]=\"s.display.rowsAreGrayed\"\n                        [class.active]=\"rl.active\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"rowBody\"\n                        ></ng-container>\n                      </a>\n                    </ng-container>\n                    <tr\n                      *ngIf=\"!row.rowLink\"\n                      [class.grayed]=\"s.display.rowsAreGrayed\"\n                    >\n                      <ng-container *ngTemplateOutlet=\"rowBody\"></ng-container>\n                    </tr>\n                  </ng-container>\n                  <tr *ngIf=\"s.display.customSummaryRow\">\n                    <td\n                      *ngFor=\"\n                        let column of s.display.columns;\n                        trackBy: trackByColumn\n                      \"\n                      [class.pinned]=\"column.pinned\"\n                      [class.advanced]=\"column.dataType === 'advanced'\"\n                      [style.left.px]=\"column.left\"\n                      [style.text-align]=\"column.alignment\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          summaryTemplate || null;\n                          context: { column: column }\n                        \"\n                      ></ng-container>\n                    </td>\n                  </tr>\n                </ng-container>\n                <ng-template #empty>\n                  <tr>\n                    <td [attr.colspan]=\"s.display.columns.length\">\n                      <riv-zero-state\n                        *ngIf=\"s.display.zeroStateMessage; let message\"\n                        [message]=\"message\"\n                      ></riv-zero-state>\n                    </td>\n                  </tr>\n                </ng-template>\n              </tbody>\n            </table>\n          </div>\n          <div\n            class=\"footer\"\n            *ngIf=\"\n              s.result.isGrouped &&\n              group.totalMatchingRowCount > s.query.grouping.countPerGroup &&\n              group.rows.length === s.query.grouping.countPerGroup\n            \"\n          >\n            <span\n              rivLink\n              class=\"footer-link\"\n              (click)=\"\n                manager?.actions?.next({\n                  type: 'viewMoreKeyChange',\n                  viewMoreKey: group.groupData.key.toString()\n                })\n              \"\n              >View all {{ group.totalMatchingRowCount }}</span\n            >\n          </div>\n          <br *ngIf=\"!last\" />\n        </ng-container>\n      </div>\n      <div *ngIf=\"s.query.pagination.showControls\" class=\"pagination\">\n        <div class=\"page-size-controls\">\n          <ng-container\n            *ngIf=\"!s.result.isGrouped && !s.display.hidePageSizeSelector\"\n          >\n            <span> Results per page: </span>\n            <riv-simple-select\n              [selectedOption]=\"{\n                id: s.query.pagination.pageSize.toString(),\n                title: s.query.pagination.pageSize.toString(),\n                value: s.query.pagination.pageSize\n              }\"\n              (selectedOptionChange)=\"\n                manager?.actions?.next({\n                  type: 'pageSizeChange',\n                  size: $event?.value || 25\n                })\n              \"\n              [optionGroups]=\"pageSizeOptions\"\n              [size]=\"'small'\"\n              [orderBy]=\"'source'\"\n            ></riv-simple-select>\n          </ng-container>\n        </div>\n        <span\n          *ngIf=\"s.result.totalMatchingRowCount > 0 && !s.result.isGrouped\"\n          class=\"page-data-indicator\"\n        >\n          {{ s.query.pagination.pageRowStart | rivNumber }}-{{\n            s.query.pagination.pageRowEnd | rivNumber\n          }}\n          of\n          {{ s.result.totalMatchingRowCount | rivNumber }}\n        </span>\n        <div\n          *ngIf=\"s.query.pagination.showControls\"\n          class=\"pagination-controls\"\n        >\n          <button\n            rivButton\n            [variant]=\"'basic'\"\n            [size]=\"'small'\"\n            [icon]=\"'ArrowLeft'\"\n            type=\"button\"\n            [disabled]=\"s.query.pagination.previous === null\"\n            (click)=\"manager?.actions?.next({ type: 'previousPageNavigate' })\"\n          ></button>\n          <span\n            *ngIf=\"s.query.pagination.pages[0] > 0\"\n            class=\"truncated-pages left\"\n          >\n            &hellip;\n          </span>\n          <button\n            *ngFor=\"let page of s.query.pagination.pages\"\n            class=\"page\"\n            type=\"button\"\n            [disabled]=\"page === s.query.pagination.page\"\n            (click)=\"manager?.actions?.next({ type: 'pageChange', page })\"\n          >\n            {{ page + 1 }}\n          </button>\n          <span\n            *ngIf=\"\n              s.query.pagination.pages[s.query.pagination.pages.length - 1] <\n              s.query.pagination.pageCount - 1\n            \"\n            class=\"truncated-pages right\"\n          >\n            &hellip;\n          </span>\n          <button\n            rivButton\n            [variant]=\"'basic'\"\n            [size]=\"'small'\"\n            [icon]=\"'ArrowRight'\"\n            type=\"button\"\n            [disabled]=\"s.query.pagination.next === null\"\n            (click)=\"manager?.actions?.next({ type: 'nextPageNavigate' })\"\n          ></button>\n        </div>\n      </div>\n    </riv-loading-cover>\n  </div>\n</ng-container>\n", styles: [":host{display:flex;min-height:0}.no-columns-message{position:sticky;inset:0;z-index:var(--loadable-z-index);background-color:var(--surface-light-0)}riv-loading-cover,.loading-container{width:100%;display:grid;grid-template-rows:1fr auto;gap:0}header{border-width:var(--border-width) var(--border-width) 0 var(--border-width);border-style:solid;border-color:var(--border-light);border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium)}header:has(+ div > .subheader){border-bottom-width:var(--border-width);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);margin-bottom:var(--size-large)}header+.container>.subcontainer{border-top-left-radius:0;border-top-right-radius:0}.container-loader-wrapper{min-height:0}.container{overflow:auto}.container.without-columns{overflow:hidden;position:relative}.container-ungrouped{border:var(--border-width) solid var(--border-light);border-radius:var(--border-radius-medium)}.container-ungrouped.has-header{border-top-left-radius:0;border-top-right-radius:0}.subcontainer-grouped{overflow:auto;border:var(--border-width) solid var(--border-light);border-top-right-radius:var(--border-radius-medium);border-top-left-radius:var(--border-radius-medium)}.subcontainer-grouped:not(:has(+ .footer)){border-bottom-right-radius:var(--border-radius-medium);border-bottom-left-radius:var(--border-radius-medium)}table{border-collapse:separate;width:100%;table-layout:fixed}thead{position:sticky;top:0;z-index:var(--above-scroll-z-index)}th{border-bottom:var(--border-width) solid var(--border-light);background-color:var(--surface-light-1);position:relative}th:not(:last-child){border-right:var(--border-width) solid var(--border-light)}th.pinned{position:sticky;top:0;z-index:1}th.dragged-over-left:before,th.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}th.dragged-over-left:before{left:0}th.dragged-over-right:before{right:0}th.selection-head{width:var(--size-xxlarge);position:sticky;z-index:1;left:0;vertical-align:middle;height:calc(var(--base-grid-size) * 8 + var(--border-width))}.checkbox-wrapper{display:flex;justify-content:center;align-items:center}label.checkbox-wrapper{cursor:pointer;width:100%;height:100%}th.menu-head{width:var(--size-xxlarge);position:sticky;z-index:1;right:0}th>riv-menu{width:100%}.header-wrapper{font-size:var(--size-medium);font-weight:var(--font-weight-heavy);line-height:1;padding:var(--size-xsmall) var(--size-small);display:inline-flex;align-items:center;justify-content:center;width:100%;height:calc(var(--base-grid-size) * 8);white-space:nowrap}.header-wrapper.left{justify-content:flex-start}.header-wrapper.right{justify-content:flex-end}button.header-wrapper{transition:background-color var(--short-transition);cursor:pointer}button.header-wrapper:hover{background-color:var(--black-20)}button.header-wrapper .icon-container{overflow:hidden;display:inline-block;width:0;height:1em;opacity:0;padding-left:0;transition:width var(--medium-transition),opacity var(--medium-transition),color var(--medium-transition),padding-left var(--medium-transition)}button.header-wrapper.active .icon-container{width:calc(var(--base-grid-size) * 3.5);padding-left:var(--size-xsmall);opacity:1}button.header-wrapper:hover .icon-container{color:var(--type-light-low-contrast)}button.header-wrapper.active .icon-container{color:var(--brand)}a.row-link{display:table-row;text-decoration:none;color:inherit;-webkit-user-select:text;user-select:text}a.row-link td{transition:background-color var(--short-transition);-webkit-user-select:text;user-select:text}a.row-link:hover td{background-color:var(--surface-light-2)}a.row-link:active td{background-color:var(--surface-light-3)}td.rs-hover{background-color:var(--surface-light-2)}td{border-bottom:var(--border-width) solid var(--border-light);height:calc(var(--base-grid-size) * 8);padding:var(--size-xxsmall) var(--size-small);font:var(--body-small);vertical-align:middle;text-align:center;background-color:var(--surface-light-0)}tr.grayed td,a.row-link.grayed td{background-color:var(--gray-30)}tbody>*:last-child>td{border-bottom:none}td.pinned{position:sticky;z-index:1}td.pinned:not(:has(+ td.pinned)){border-right:var(--border-width) solid var(--border-light)}td.advanced,td.selection-body,td.menu-body{padding:0;vertical-align:middle}td.selection-body{position:sticky;z-index:1;left:0}td.menu-body{position:sticky;z-index:1;right:0}.pagination{margin-top:var(--size-small);display:flex;justify-content:space-between;gap:var(--size-large)}.page-size-controls,.pagination-controls{display:flex;align-items:center;gap:var(--size-xsmall)}.page-data-indicator{display:flex;align-items:center;flex-grow:1;justify-content:flex-end;font:var(--body-medium);color:var(--type-light-low-contrast)}.page-size-controls span{font:var(--body-medium)}.page{display:flex;align-items:center;justify-content:center;min-width:calc(var(--base-grid-size) * 7.5);height:calc(var(--base-grid-size) * 7.5);padding:var(--size-xxsmall);font:var(--input-medium);color:var(--purp-80);border-radius:var(--border-radius-small);transition:background-color var(--short-transition)}.page:hover,.page:disabled{background-color:var(--black-20)}.page:active:not(:disabled){background-color:var(--black-40)}.page:not(:disabled){cursor:pointer}.truncated-pages{color:var(--type-light-disabled)}.truncated-pages.left{padding-left:var(--size-small)}.truncated-pages.right{padding-right:var(--size-small)}.footer{background-color:var(--surface-light-1);border-bottom:var(--border-width) solid var(--border-light);border-left:var(--border-width) solid var(--border-light);border-right:var(--border-width) solid var(--border-light);border-bottom-left-radius:var(--border-radius-medium);border-bottom-right-radius:var(--border-radius-medium);text-align:right;padding:calc(var(--base-grid-size) / 2);font:var(--body-medium)}.footer-link{margin-right:var(--size-medium)}td[rowspan]:not([rowspan=\"1\"]){border-right:var(--border-width) solid var(--border-light)}td.rs-right-border{border-right:var(--border-width) solid var(--border-light)}a.row-link.active>td{background-color:var(--surface-light-selected)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.NgZone }]; }, propDecorators: { manager: [{
@@ -9222,9 +9243,9 @@ class VisibilityDirective {
         this.intersectionObserver.unobserve(this.elementRef.nativeElement);
     }
 }
-VisibilityDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VisibilityDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
-VisibilityDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: VisibilityDirective, selector: "[rivVisibility]", outputs: { rivVisibility: "rivVisibility" }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: VisibilityDirective, decorators: [{
+VisibilityDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VisibilityDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive });
+VisibilityDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.2.10", type: VisibilityDirective, selector: "[rivVisibility]", outputs: { rivVisibility: "rivVisibility" }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: VisibilityDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rivVisibility]',
@@ -13160,9 +13181,9 @@ class IssueComponent {
             : '--type-light-high-contrast'})`;
     }
 }
-IssueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: IssueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-IssueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: IssueComponent, selector: "riv-issue", inputs: { label: "label", colorToken: "colorToken", textColorOverride: "textColorOverride" }, ngImport: i0, template: "<i [style.background-color]=\"backgroundColor\"></i>\n<span *ngIf=\"label\" [style.color]=\"textColor\" rivTruncate>{{ label }}</span>\n", styles: [":host{display:flex;align-items:center;gap:var(--size-xsmall)}i{width:var(--size-small);min-width:var(--size-small);height:var(--size-small);min-height:var(--size-small);border-radius:var(--border-radius-small)}span{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: IssueComponent, decorators: [{
+IssueComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IssueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+IssueComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: IssueComponent, selector: "riv-issue", inputs: { label: "label", colorToken: "colorToken", textColorOverride: "textColorOverride" }, ngImport: i0, template: "<i [style.background-color]=\"backgroundColor\"></i>\n<span *ngIf=\"label\" [style.color]=\"textColor\" rivTruncate>{{ label }}</span>\n", styles: [":host{display:flex;align-items:center;gap:var(--size-xsmall)}i{width:var(--size-small);min-width:var(--size-small);height:var(--size-small);min-height:var(--size-small);border-radius:var(--border-radius-small)}span{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: IssueComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-issue', changeDetection: ChangeDetectionStrategy.OnPush, template: "<i [style.background-color]=\"backgroundColor\"></i>\n<span *ngIf=\"label\" [style.color]=\"textColor\" rivTruncate>{{ label }}</span>\n", styles: [":host{display:flex;align-items:center;gap:var(--size-xsmall)}i{width:var(--size-small);min-width:var(--size-small);height:var(--size-small);min-height:var(--size-small);border-radius:var(--border-radius-small)}span{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}\n"] }]
         }], propDecorators: { label: [{
@@ -13190,9 +13211,9 @@ class LegendItemComponent {
         return this.clickable && this.visibility !== 'locked';
     }
 }
-LegendItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegendItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-LegendItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: LegendItemComponent, selector: "riv-legend-item", inputs: { label: "label", colorToken: "colorToken", style: "style", visibility: "visibility", iconTooltip: "iconTooltip", clickable: "clickable", showCheckWhenClickable: "showCheckWhenClickable" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button\n  (click)=\"isLegendItemClickable() ? itemClick.emit($event) : null\"\n  [rivTooltip]=\"iconTooltip\"\n  type=\"button\"\n  [disabled]=\"visibility === 'locked'\"\n  [class.clickable]=\"clickable\"\n>\n  <i\n    *ngIf=\"visibility === 'visible'\"\n    [class.striped]=\"style === 'striped'\"\n    [class.dots]=\"style === 'dots'\"\n    [style.background-color]=\"style === 'dots' ? null : backgroundColor\"\n    [style.--dot-color]=\"backgroundColor\"\n    class=\"opacity-hover\"\n  >\n    <riv-icon\n      *ngIf=\"clickable && showCheckWhenClickable\"\n      name=\"Check\"\n      [size]=\"16\"\n      [strokeWidth]=\"3\"\n      style=\"color: var(--white-100)\"\n    ></riv-icon>\n  </i>\n  <i\n    *ngIf=\"visibility === 'hidden'\"\n    class=\"hidden-legend-item opacity-hover\"\n    [class.striped]=\"style === 'striped'\"\n    [class.dots]=\"style === 'dots'\"\n    [style.border-color]=\"backgroundColor\"\n    [style.--background-color-hover]=\"backgroundColor\"\n    [style.--dot-color]=\"backgroundColor\"\n  ></i>\n  <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n\n  <span\n    *ngIf=\"label\"\n    [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\"\n  >\n    {{ label }}\n  </span>\n</button>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--size-small)}i{width:var(--size-large);height:var(--size-large)}i.striped{background-image:repeating-linear-gradient(315deg,transparent 0px,transparent 2.5px,var(--white-100) 2.5px,var(--white-100) 3.5px,transparent 3.5px,transparent 6px)}i.dots{background-color:var(--white-100);background-image:radial-gradient(circle,var(--dot-color) 1.5px,transparent 1.5px);background-size:4px 4px}span{color:var(--type-light-low-contrast);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}button{display:inline-flex;gap:var(--size-small);align-items:center;cursor:default}.hidden-legend-item{border-width:var(--border-width);border-style:solid;background-color:transparent}.hidden-legend-item.dots{background-image:none}button:hover.clickable .hidden-legend-item{background-color:var(--background-color-hover)}button:hover.clickable .hidden-legend-item.dots{border:none;background-color:var(--white-100);background-image:radial-gradient(circle,var(--dot-color) 1.5px,transparent 1.5px);background-size:4px 4px}button:not([disabled]).clickable:hover{cursor:pointer}button:not([disabled]).clickable:hover .opacity-hover{opacity:.6}button[disabled]{cursor:not-allowed}button[disabled] .low-contrast{color:var(--type-light-disabled)}button:not(:hover) .low-contrast{color:var(--type-light-disabled)}button:not(.clickable):hover .low-contrast{color:var(--type-light-disabled)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: LegendItemComponent, decorators: [{
+LegendItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LegendItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LegendItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: LegendItemComponent, selector: "riv-legend-item", inputs: { label: "label", colorToken: "colorToken", style: "style", visibility: "visibility", iconTooltip: "iconTooltip", clickable: "clickable", showCheckWhenClickable: "showCheckWhenClickable" }, outputs: { itemClick: "itemClick" }, ngImport: i0, template: "<button\n  (click)=\"isLegendItemClickable() ? itemClick.emit($event) : null\"\n  [rivTooltip]=\"iconTooltip\"\n  type=\"button\"\n  [disabled]=\"visibility === 'locked'\"\n  [class.clickable]=\"clickable\"\n>\n  <i\n    *ngIf=\"visibility === 'visible'\"\n    [class.striped]=\"style === 'striped'\"\n    [class.dots]=\"style === 'dots'\"\n    [style.background-color]=\"style === 'dots' ? null : backgroundColor\"\n    [style.--dot-color]=\"backgroundColor\"\n    class=\"opacity-hover\"\n  >\n    <riv-icon\n      *ngIf=\"clickable && showCheckWhenClickable\"\n      name=\"Check\"\n      [size]=\"16\"\n      [strokeWidth]=\"3\"\n      style=\"color: var(--white-100)\"\n    ></riv-icon>\n  </i>\n  <i\n    *ngIf=\"visibility === 'hidden'\"\n    class=\"hidden-legend-item opacity-hover\"\n    [class.striped]=\"style === 'striped'\"\n    [class.dots]=\"style === 'dots'\"\n    [style.border-color]=\"backgroundColor\"\n    [style.--background-color-hover]=\"backgroundColor\"\n    [style.--dot-color]=\"backgroundColor\"\n  ></i>\n  <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n\n  <span\n    *ngIf=\"label\"\n    [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\"\n  >\n    {{ label }}\n  </span>\n</button>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--size-small)}i{width:var(--size-large);height:var(--size-large)}i.striped{background-image:repeating-linear-gradient(315deg,transparent 0px,transparent 2.5px,var(--white-100) 2.5px,var(--white-100) 3.5px,transparent 3.5px,transparent 6px)}i.dots{background-color:var(--white-100);background-image:radial-gradient(circle,var(--dot-color) 1.5px,transparent 1.5px);background-size:4px 4px}span{color:var(--type-light-low-contrast);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}button{display:inline-flex;gap:var(--size-small);align-items:center;cursor:default}.hidden-legend-item{border-width:var(--border-width);border-style:solid;background-color:transparent}.hidden-legend-item.dots{background-image:none}button:hover.clickable .hidden-legend-item{background-color:var(--background-color-hover)}button:hover.clickable .hidden-legend-item.dots{border:none;background-color:var(--white-100);background-image:radial-gradient(circle,var(--dot-color) 1.5px,transparent 1.5px);background-size:4px 4px}button:not([disabled]).clickable:hover{cursor:pointer}button:not([disabled]).clickable:hover .opacity-hover{opacity:.6}button[disabled]{cursor:not-allowed}button[disabled] .low-contrast{color:var(--type-light-disabled)}button:not(:hover) .low-contrast{color:var(--type-light-disabled)}button:not(.clickable):hover .low-contrast{color:var(--type-light-disabled)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: LegendItemComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-legend-item', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  (click)=\"isLegendItemClickable() ? itemClick.emit($event) : null\"\n  [rivTooltip]=\"iconTooltip\"\n  type=\"button\"\n  [disabled]=\"visibility === 'locked'\"\n  [class.clickable]=\"clickable\"\n>\n  <i\n    *ngIf=\"visibility === 'visible'\"\n    [class.striped]=\"style === 'striped'\"\n    [class.dots]=\"style === 'dots'\"\n    [style.background-color]=\"style === 'dots' ? null : backgroundColor\"\n    [style.--dot-color]=\"backgroundColor\"\n    class=\"opacity-hover\"\n  >\n    <riv-icon\n      *ngIf=\"clickable && showCheckWhenClickable\"\n      name=\"Check\"\n      [size]=\"16\"\n      [strokeWidth]=\"3\"\n      style=\"color: var(--white-100)\"\n    ></riv-icon>\n  </i>\n  <i\n    *ngIf=\"visibility === 'hidden'\"\n    class=\"hidden-legend-item opacity-hover\"\n    [class.striped]=\"style === 'striped'\"\n    [class.dots]=\"style === 'dots'\"\n    [style.border-color]=\"backgroundColor\"\n    [style.--background-color-hover]=\"backgroundColor\"\n    [style.--dot-color]=\"backgroundColor\"\n  ></i>\n  <riv-icon *ngIf=\"visibility === 'locked'\" name=\"Lock\" [size]=\"16\"></riv-icon>\n\n  <span\n    *ngIf=\"label\"\n    [class.low-contrast]=\"visibility === 'hidden' || visibility === 'locked'\"\n  >\n    {{ label }}\n  </span>\n</button>\n", styles: [":host{display:inline-flex;align-items:center;gap:var(--size-small)}i{width:var(--size-large);height:var(--size-large)}i.striped{background-image:repeating-linear-gradient(315deg,transparent 0px,transparent 2.5px,var(--white-100) 2.5px,var(--white-100) 3.5px,transparent 3.5px,transparent 6px)}i.dots{background-color:var(--white-100);background-image:radial-gradient(circle,var(--dot-color) 1.5px,transparent 1.5px);background-size:4px 4px}span{color:var(--type-light-low-contrast);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}button{display:inline-flex;gap:var(--size-small);align-items:center;cursor:default}.hidden-legend-item{border-width:var(--border-width);border-style:solid;background-color:transparent}.hidden-legend-item.dots{background-image:none}button:hover.clickable .hidden-legend-item{background-color:var(--background-color-hover)}button:hover.clickable .hidden-legend-item.dots{border:none;background-color:var(--white-100);background-image:radial-gradient(circle,var(--dot-color) 1.5px,transparent 1.5px);background-size:4px 4px}button:not([disabled]).clickable:hover{cursor:pointer}button:not([disabled]).clickable:hover .opacity-hover{opacity:.6}button[disabled]{cursor:not-allowed}button[disabled] .low-contrast{color:var(--type-light-disabled)}button:not(:hover) .low-contrast{color:var(--type-light-disabled)}button:not(.clickable):hover .low-contrast{color:var(--type-light-disabled)}\n"] }]
         }], propDecorators: { label: [{
@@ -13779,9 +13800,9 @@ class ChartComponent {
         return hoverData;
     }
 }
-ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChartComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChartComponent, selector: "riv-chart", inputs: { height: "height", width: "width", overrideHeight: "overrideHeight", overrideWidth: "overrideWidth", config: "config", data: "data" }, outputs: { chartClicked: "chartClicked" }, queries: [{ propertyName: "tooltipTemplate", first: true, predicate: ["tooltip"], descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "moreTextContainer", first: true, predicate: ["moreTextContainer"], descendants: true }], ngImport: i0, template: "<div\n  class=\"container\"\n  (rivClientSize)=\"width = $event.width\"\n  *ngIf=\"{ d: drawData$ | async } as vm\"\n  [style.--override-font-size]=\"getFontSize(vm.d)\"\n>\n  <ng-container\n    *ngIf=\"\n      !checkForNonDisplayState(vm.d) && (drawData$ | async);\n      let d;\n      else: nonDisplayState\n    \"\n  >\n    <div\n      (mousemove)=\"mousemove($event, d.hover)\"\n      (mouseleave)=\"mouseleave($event)\"\n      (click)=\"click()\"\n      #container\n      class=\"sub-container\"\n      [class.clickable]=\"isHoverClickable\"\n      tabIndex=\"0\"\n      [ngClass]=\"{ 'donut-container': config.type === 'donut' }\"\n      [ngStyle]=\"{\n        height: getSubcontainerHeight(d),\n        width: getSubcontainerWidth(d)\n      }\"\n    >\n      <svg:svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [attr.viewBox]=\"d.viewBox\"\n        [attr.height]=\"d.chartHeight\"\n        [attr.width]=\"d.chartWidth\"\n      >\n        <defs>\n          <!-- Stripe pattern -->\n          <pattern\n            id=\"stripes\"\n            x=\"0\"\n            y=\"0\"\n            [attr.width]=\"10\"\n            [attr.height]=\"10\"\n            patternUnits=\"userSpaceOnUse\"\n          >\n            <line\n              [attr.x1]=\"0\"\n              [attr.y1]=\"10\"\n              [attr.x2]=\"10\"\n              [attr.y2]=\"0\"\n              stroke=\"var(--white-100)\"\n              stroke-width=\"1\"\n            ></line>\n          </pattern>\n        </defs>\n        <ng-container *ngIf=\"!(config.type === 'horizontal-bar')\">\n          <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n            <text\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"getBottomLabelY(d)\"\n            >\n              {{ tick.label }}\n            </text>\n          </g>\n        </ng-container>\n        <ng-container *ngIf=\"config.type === 'horizontal-bar'\">\n          <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"left\">\n            <text\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"d.chartSizingValues.fontSize\"\n            >\n              {{ tick.label }}\n            </text>\n            <line\n              class=\"tick-line\"\n              [attr.x1]=\"tick.x\"\n              [attr.x2]=\"tick.x\"\n              y1=\"0\"\n              [attr.y2]=\"d.chartHeight\"\n            ></line>\n            <text\n              *ngIf=\"tick.secondaryLabel\"\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"getBottomLabelY(d)\"\n            >\n              {{ tick.secondaryLabel }}\n            </text>\n          </g>\n        </ng-container>\n        <g *ngFor=\"let tick of d.yTicks\">\n          <line\n            *ngIf=\"!(config.type === 'horizontal-bar')\"\n            class=\"tick-line\"\n            [attr.y1]=\"tick.y\"\n            [attr.y2]=\"tick.y\"\n            x1=\"0\"\n            [attr.x2]=\"d.chartWidth\"\n          ></line>\n          <text\n            rivSVGTextTruncate\n            [text]=\"tick.label\"\n            [width]=\"\n              config.type === 'horizontal-bar'\n                ? d.chartSizingValues.leftBucketLabel\n                : d.chartSizingValues.leftPadding\n            \"\n            class=\"tick-label\"\n            [attr.y]=\"tick.y\"\n            [attr.x]=\"0\"\n          >\n            {{ tick.label }}\n          </text>\n          <text\n            *ngIf=\"tick.secondaryLabel\"\n            rivSVGTextTruncate\n            [text]=\"tick.secondaryLabel\"\n            [width]=\"d.chartSizingValues.rightPadding\"\n            class=\"tick-label\"\n            [attr.y]=\"tick.y\"\n            [attr.x]=\"d.chartWidth\"\n            text-anchor=\"end\"\n          >\n            {{ tick.secondaryLabel }}\n          </text>\n        </g>\n        <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n          <g\n            *ngIf=\"config.type !== 'horizontal-bar' && config.type !== 'donut'\"\n          >\n            <line\n              class=\"tick-line\"\n              [attr.x1]=\"hoverData?.x\"\n              [attr.x2]=\"hoverData?.x\"\n              y1=\"0\"\n              [attr.y2]=\"d.chartHeight\"\n              stroke-width=\"2\"\n              stroke-dasharray=\"4\"\n            />\n          </g>\n        </ng-container>\n        <g *ngFor=\"let bar of d.bars; let i = index\">\n          <ng-container *ngFor=\"let rect of bar; let j = index\">\n            <defs *ngIf=\"rect.pattern === 'dots'\">\n              <pattern\n                [attr.id]=\"'dots-' + i + '-' + j\"\n                patternUnits=\"userSpaceOnUse\"\n                [attr.x]=\"rect.x\"\n                [attr.y]=\"rect.y\"\n                width=\"4\"\n                height=\"4\"\n              >\n                <circle\n                  cx=\"2\"\n                  cy=\"2\"\n                  r=\"1.5\"\n                  [attr.fill]=\"varColor(d.colors, i)\"\n                ></circle>\n              </pattern>\n            </defs>\n\n            <rect\n              *ngIf=\"rect.nonDisplay !== true\"\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              [attr.fill]=\"\n                rect.pattern === 'dots'\n                  ? 'url(#dots-' + i + '-' + j + ')'\n                  : getBarColor(rect, d.colors, i, hover)\n              \"\n              [attr.stroke]=\"\n                showBarBorders(rect, hover) ? varWrap('--black-100') : undefined\n              \"\n              [attr.stroke-width]=\"showBarBorders(rect, hover) ? 1 : undefined\"\n            ></rect>\n            <rect\n              *ngIf=\"showNonDisplayRect(rect, hover)\"\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              fill=\"transparent\"\n              [attr.stroke]=\"varWrap('--black-100')\"\n              [attr.stroke-width]=\"1\"\n            ></rect>\n            <rect\n              *ngIf=\"rect.pattern === '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          </ng-container>\n        </g>\n        <g *ngFor=\"let bar of d.horizontalBars; let i = index\">\n          <ng-container *ngFor=\"let indBar of bar; let j = index\">\n            <defs *ngIf=\"indBar.pattern === 'dots'\">\n              <pattern\n                [attr.id]=\"'dots-' + i + '-' + j\"\n                patternUnits=\"userSpaceOnUse\"\n                [attr.x]=\"indBar.x\"\n                [attr.y]=\"indBar.y\"\n                width=\"4\"\n                height=\"4\"\n              >\n                <circle\n                  cx=\"2\"\n                  cy=\"2\"\n                  r=\"1.5\"\n                  [attr.fill]=\"varColor(d.colors, i)\"\n                ></circle>\n              </pattern>\n            </defs>\n            <path\n              [attr.d]=\"indBar.horizontalBar\"\n              [attr.fill]=\"\n                indBar.pattern === 'dots'\n                  ? 'url(#dots-' + i + '-' + j + ')'\n                  : varColor(d.colors, i)\n              \"\n              [attr.stroke]=\"\n                indBar.pattern === 'dots' ? 'none' : varColor(d.colors, i)\n              \"\n              [attr.stroke-width]=\"indBar.pattern === 'dots' ? 0 : 2\"\n            />\n            <path\n              *ngIf=\"indBar.pattern === 'striped'\"\n              [attr.d]=\"indBar.horizontalBar\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n              fill=\"url(#stripes)\"\n              stroke-width=\"0\"\n            />\n          </ng-container>\n        </g>\n        <g *ngFor=\"let gradient of d.gradients; let i = index\">\n          <ng-container *ngFor=\"let rect of gradient; let j = index\">\n            <defs>\n              <linearGradient\n                [attr.id]=\"'grad-' + i + '-' + j\"\n                x1=\"0\"\n                y1=\"0\"\n                x2=\"0\"\n                y2=\"1\"\n              >\n                <stop offset=\"0%\" [attr.stop-color]=\"varColor(d.colors, i)\" />\n                <stop offset=\"100%\" stop-color=\"white\" />\n              </linearGradient>\n            </defs>\n            <rect\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              [attr.fill]=\"'url(#grad-' + i + '-' + j + ')'\"\n              opacity=\"0.4\"\n            ></rect>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let line of d.lines; let i = index\">\n          <path\n            [attr.d]=\"line.line\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n            fill=\"none\"\n            stroke-width=\"2\"\n            [attr.stroke-linecap]=\"\n              line.pattern === 'dots' ? 'round' : undefined\n            \"\n            [attr.stroke-linejoin]=\"\n              line.pattern === 'dots' ? 'round' : undefined\n            \"\n            [attr.stroke-dasharray]=\"\n              line.pattern === 'striped'\n                ? '10 10'\n                : line.pattern === 'dots'\n                ? '0.25 7'\n                : undefined\n            \"\n          ></path>\n        </g>\n        <g *ngFor=\"let lineSinglePointFallback of d.circles; let i = index\">\n          <circle\n            class=\"marker\"\n            [attr.cx]=\"lineSinglePointFallback.cx\"\n            [attr.cy]=\"lineSinglePointFallback.cy\"\n            r=\"3.5\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></circle>\n        </g>\n        <g *ngFor=\"let line of d.lines; let i = index\">\n          <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n            <circle\n              class=\"marker\"\n              *ngIf=\"config.groupedTooltip || i === hoverData?.visibleYIndex\"\n              [attr.cx]=\"hoverData?.x\"\n              [attr.cy]=\"hoverData?.ys?.[i]\"\n              r=\"3.5\"\n              stroke-width=\"2\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n            ></circle>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <path [attr.d]=\"area.area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n          <path\n            *ngIf=\"area.pattern === 'striped'\"\n            [attr.d]=\"area.area\"\n            fill=\"url(#stripes)\"\n          ></path>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n            <circle\n              class=\"marker\"\n              *ngIf=\"config.groupedTooltip || i === hoverData?.visibleYIndex\"\n              [attr.cx]=\"hoverData?.x\"\n              [attr.cy]=\"hoverData?.ys?.[i]\"\n              r=\"3.5\"\n              stroke-width=\"2\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n            ></circle>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let wLine of d.waterfallLines\">\n          <line\n            class=\"waterfall-line\"\n            [attr.x1]=\"wLine.x1\"\n            [attr.x2]=\"wLine.x2\"\n            [attr.y1]=\"wLine.y1\"\n            [attr.y2]=\"wLine.y2\"\n            stroke-width=\"1\"\n            stroke-dasharray=\"6\"\n          />\n        </g>\n        <path\n          *ngFor=\"let path of d.arcs; let i = index\"\n          [attr.d]=\"path\"\n          [attr.fill]=\"varColor(d.colors, i)\"\n        ></path>\n        <g *ngFor=\"let dataLabel of d.dataLabels; let i = index\">\n          <text\n            *ngIf=\"config.showDataLabels && dataLabel.label\"\n            [ngClass]=\"getDataLabelClass(dataLabel, config, hover)\"\n            [attr.y]=\"dataLabel.yPos\"\n            [attr.x]=\"dataLabel.xPos\"\n            [attr.text-anchor]=\"dataLabel.anchor\"\n            [attr.font-weight]=\"\n              dataLabel.bold\n                ? 'var(--font-weight-heavy)'\n                : 'var(--font-weight-normal)'\n            \"\n            [attr.opacity]=\"getDataLabelOpacity(dataLabel, config, hover)\"\n          >\n            {{ dataLabel.label }}\n          </text>\n          <line\n            *ngIf=\"dataLabel.line && config.showDataLabels\"\n            [attr.y1]=\"dataLabel.line.y1\"\n            [attr.y2]=\"dataLabel.line.y2\"\n            [attr.x1]=\"dataLabel.line.x1\"\n            [attr.x2]=\"dataLabel.line.x2\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></line>\n        </g>\n        <g *ngFor=\"let connection of d.flowConnections\">\n          <path\n            [attr.d]=\"connection.path\"\n            [attr.fill]=\"getConnectionColor()\"\n            [attr.opacity]=\"getConnectionOpacity(connection, hover)\"\n          />\n        </g>\n      </svg:svg>\n      <div *ngIf=\"config.type === 'donut'\" class=\"donut-display\">\n        <div class=\"donut-value\" [ngClass]=\"config.donutDisplayInfo.size\">\n          {{ config.donutDisplayInfo.displayValue }}\n        </div>\n        <div class=\"donut-label\">\n          {{ config.donutDisplayInfo.displayLabel }}\n        </div>\n      </div>\n      <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n        <riv-callout\n          *riv-overlay\n          [anchor]=\"\n            hoverData?.tooltip?.anchor ? hoverData.tooltip.anchor : null\n          \"\n          [isModal]=\"false\"\n          [preferredPosition]=\"\n            hoverData?.tooltip?.preferredPosition ?? 'center-right'\n          \"\n          [theme]=\"'light'\"\n        >\n          <ng-container *ngIf=\"tooltipTemplate; else defaultTooltip\">\n            <ng-container\n              [ngTemplateOutlet]=\"tooltipTemplate\"\n              [ngTemplateOutletContext]=\"{\n                xIndex: hoverData?.xIndex,\n                yIndex: hoverData?.yIndex,\n                isSuppValue: hoverData?.isSuppValue,\n                suppYIndex: hoverData?.suppYIndex\n              }\"\n            ></ng-container>\n          </ng-container>\n          <ng-template #defaultTooltip>\n            <div class=\"callout-content\">\n              <div *ngIf=\"hoverData?.tooltip?.date\" class=\"callout-row\">\n                {{ hoverData?.tooltip?.date }}\n              </div>\n              <div\n                class=\"callout-row\"\n                *ngFor=\"let metric of hoverData?.tooltip?.metrics\"\n              >\n                <span class=\"series-label\">\n                  <riv-legend-item\n                    [colorToken]=\"metric.color\"\n                    [style]=\"metric.pattern || 'solid'\"\n                  ></riv-legend-item>\n                  <span>{{ metric.label }}</span>\n                </span>\n                <span>{{ metric.value }}</span>\n              </div>\n            </div>\n          </ng-template>\n        </riv-callout>\n      </ng-container>\n      <ng-container *ngIf=\"flowHoverDataGuard(hover) as hoverData\">\n        <riv-callout\n          *riv-overlay\n          [anchor]=\"\n            hoverData?.tooltip?.anchor ? hoverData.tooltip.anchor : null\n          \"\n          [isModal]=\"false\"\n          [preferredPosition]=\"'top-center'\"\n          [theme]=\"'light'\"\n        >\n          <div class=\"callout-content\">\n            <div class=\"callout-row\">\n              <ng-container *ngIf=\"hoverData?.hoverTarget === 'connection'\">\n                <ng-container\n                  *ngIf=\"\n                    getBucketConfigInfo(hoverData, 'startId') as startConfig\n                  \"\n                >\n                  <riv-issue\n                    [label]=\"startConfig.title\"\n                    [colorToken]=\"startConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n                ->\n                <ng-container\n                  *ngIf=\"getBucketConfigInfo(hoverData, 'endId') as endConfig\"\n                >\n                  <riv-issue\n                    [label]=\"endConfig.title\"\n                    [colorToken]=\"endConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"hoverData?.hoverTarget !== 'connection'\">\n                <ng-container\n                  *ngIf=\"getBucketConfigInfo(hoverData, 'barId') as barConfig\"\n                >\n                  <riv-issue\n                    [label]=\"barConfig.title\"\n                    [colorToken]=\"barConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n              </ng-container>\n            </div>\n            <div\n              *ngIf=\"hoverData?.tooltip?.subtitle\"\n              class=\"callout-row flow-subtitle\"\n            >\n              {{ hoverData?.tooltip?.subtitle }}\n            </div>\n          </div>\n        </riv-callout>\n      </ng-container>\n    </div>\n    <legend *ngIf=\"d.data.type !== 'flow'\">\n      <ng-container *ngIf=\"firstHiddenLegendItemIndex$ | async; let fi\">\n        <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n          <riv-legend-item\n            *ngIf=\"i < fi.dataIndex && item.showLegendItem !== false\"\n            [label]=\"item.label\"\n            [style]=\"item.pattern || 'solid'\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n            [colorToken]=\"getItemColor(item, i)\"\n            (itemClick)=\"toggleLegend(item, i)\"\n          ></riv-legend-item>\n        </ng-container>\n        <ng-container\n          *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n        >\n          <riv-legend-item\n            *ngIf=\"i < fi.suppIndex && item.showLegendItem !== false\"\n            [label]=\"item.label\"\n            [style]=\"item.pattern || 'solid'\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n            [colorToken]=\"getItemColor(item, i)\"\n            (itemClick)=\"toggleLegend(item, i)\"\n          ></riv-legend-item>\n        </ng-container>\n        <div\n          #moreTextContainer\n          class=\"more-text-container\"\n          (mouseover)=\"mouseoverLegend()\"\n          (mouseleave)=\"mouseleaveLegend()\"\n          (click)=\"moreClick()\"\n          *ngIf=\"fi.hiddenCount\"\n        >\n          <span rivLink class=\"more-text\">\n            +\n            {{ fi.hiddenCount }} more\n          </span>\n        </div>\n        <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n          <riv-callout\n            *riv-overlay\n            [anchor]=\"moreTextContainer?.nativeElement\"\n            [isModal]=\"lockShowMoreTooltip\"\n            (close)=\"closeHandler()\"\n            [preferredPosition]=\"'bottom-right'\"\n            [theme]=\"'light'\"\n            [showCaret]=\"false\"\n          >\n            <div class=\"legend-tooltip\">\n              <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n                <riv-legend-item\n                  *ngIf=\"i >= fi.dataIndex && item.showLegendItem !== false\"\n                  [label]=\"item.label\"\n                  [style]=\"item.pattern || 'solid'\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n                  [colorToken]=\"getItemColor(item, i)\"\n                  (itemClick)=\"toggleLegend(item, i)\"\n                ></riv-legend-item>\n              </ng-container>\n              <ng-container\n                *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n              >\n                <riv-legend-item\n                  *ngIf=\"i >= fi.suppIndex && item.showLegendItem !== false\"\n                  [label]=\"item.label\"\n                  [style]=\"item.pattern || 'solid'\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [colorToken]=\"getItemColor(item, i)\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n                  (itemClick)=\"toggleLegend(item, i)\"\n                ></riv-legend-item>\n              </ng-container>\n            </div>\n          </riv-callout>\n        </ng-container>\n      </ng-container>\n    </legend>\n  </ng-container>\n</div>\n\n<ng-template #nonDisplayState>\n  <ng-container *ngIf=\"checkForNonDisplayState(drawData$ | async); let type\">\n    <riv-zero-state\n      *ngIf=\"type === 'zeroState'\"\n      [message]=\"config.zeroStateMessage\"\n    ></riv-zero-state>\n    <riv-zero-state\n      *ngIf=\"type === 'sizingErrorState'\"\n      [message]=\"config.sizingErrorStateMessage\"\n    ></riv-zero-state>\n  </ng-container>\n</ng-template>\n", styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-small)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--override-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-row:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline;width:100%}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);top:calc(var(--base-grid-size) * -1);position:relative}.legend-tooltip{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column;overflow-y:scroll;max-height:clamp(0px,60vh,600px)}.legend-tooltip>riv-legend-item{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;line-height:var(--type-1-line-height-0)}.sub-container.clickable{cursor:pointer}.sub-container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;overflow:auto}.sub-container:not(.donut-container){justify-items:start;align-items:start}.sub-container.donut-container{justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.donut-display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.donut-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.donut-value,.donut-label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}.donut-value.xsmall{font:var(--stat-xsmall)}.donut-value.small{font:var(--stat-small)}.donut-value.medium{font:var(--stat-medium)}.donut-value.large{font:var(--stat-large)}.data-label{fill:var(--type-light-high-contrast);font-size:var(--override-font-size)}.flow-data-label{text-decoration:underline;font-size:var(--override-font-size);cursor:pointer;fill:var(--type-light-link-hover)}.waterfall-line{stroke:var(--gray-60)}.flow-subtitle{font-weight:var(--font-weight-heavy)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: IssueComponent, selector: "riv-issue", inputs: ["label", "colorToken", "textColorOverride"] }, { kind: "component", type: LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "component", type: LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme", "variant"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { 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", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChartComponent, decorators: [{
+ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ChartComponent, selector: "riv-chart", inputs: { height: "height", width: "width", overrideHeight: "overrideHeight", overrideWidth: "overrideWidth", config: "config", data: "data" }, outputs: { chartClicked: "chartClicked" }, queries: [{ propertyName: "tooltipTemplate", first: true, predicate: ["tooltip"], descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "moreTextContainer", first: true, predicate: ["moreTextContainer"], descendants: true }], ngImport: i0, template: "<div\n  class=\"container\"\n  (rivClientSize)=\"width = $event.width\"\n  *ngIf=\"{ d: drawData$ | async } as vm\"\n  [style.--override-font-size]=\"getFontSize(vm.d)\"\n>\n  <ng-container\n    *ngIf=\"\n      !checkForNonDisplayState(vm.d) && (drawData$ | async);\n      let d;\n      else: nonDisplayState\n    \"\n  >\n    <div\n      (mousemove)=\"mousemove($event, d.hover)\"\n      (mouseleave)=\"mouseleave($event)\"\n      (click)=\"click()\"\n      #container\n      class=\"sub-container\"\n      [class.clickable]=\"isHoverClickable\"\n      tabIndex=\"0\"\n      [ngClass]=\"{ 'donut-container': config.type === 'donut' }\"\n      [ngStyle]=\"{\n        height: getSubcontainerHeight(d),\n        width: getSubcontainerWidth(d)\n      }\"\n    >\n      <svg:svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [attr.viewBox]=\"d.viewBox\"\n        [attr.height]=\"d.chartHeight\"\n        [attr.width]=\"d.chartWidth\"\n      >\n        <defs>\n          <!-- Stripe pattern -->\n          <pattern\n            id=\"stripes\"\n            x=\"0\"\n            y=\"0\"\n            [attr.width]=\"10\"\n            [attr.height]=\"10\"\n            patternUnits=\"userSpaceOnUse\"\n          >\n            <line\n              [attr.x1]=\"0\"\n              [attr.y1]=\"10\"\n              [attr.x2]=\"10\"\n              [attr.y2]=\"0\"\n              stroke=\"var(--white-100)\"\n              stroke-width=\"1\"\n            ></line>\n          </pattern>\n        </defs>\n        <ng-container *ngIf=\"!(config.type === 'horizontal-bar')\">\n          <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n            <text\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"getBottomLabelY(d)\"\n            >\n              {{ tick.label }}\n            </text>\n          </g>\n        </ng-container>\n        <ng-container *ngIf=\"config.type === 'horizontal-bar'\">\n          <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"left\">\n            <text\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"d.chartSizingValues.fontSize\"\n            >\n              {{ tick.label }}\n            </text>\n            <line\n              class=\"tick-line\"\n              [attr.x1]=\"tick.x\"\n              [attr.x2]=\"tick.x\"\n              y1=\"0\"\n              [attr.y2]=\"d.chartHeight\"\n            ></line>\n            <text\n              *ngIf=\"tick.secondaryLabel\"\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"getBottomLabelY(d)\"\n            >\n              {{ tick.secondaryLabel }}\n            </text>\n          </g>\n        </ng-container>\n        <g *ngFor=\"let tick of d.yTicks\">\n          <line\n            *ngIf=\"!(config.type === 'horizontal-bar')\"\n            class=\"tick-line\"\n            [attr.y1]=\"tick.y\"\n            [attr.y2]=\"tick.y\"\n            x1=\"0\"\n            [attr.x2]=\"d.chartWidth\"\n          ></line>\n          <text\n            rivSVGTextTruncate\n            [text]=\"tick.label\"\n            [width]=\"\n              config.type === 'horizontal-bar'\n                ? d.chartSizingValues.leftBucketLabel\n                : d.chartSizingValues.leftPadding\n            \"\n            class=\"tick-label\"\n            [attr.y]=\"tick.y\"\n            [attr.x]=\"0\"\n          >\n            {{ tick.label }}\n          </text>\n          <text\n            *ngIf=\"tick.secondaryLabel\"\n            rivSVGTextTruncate\n            [text]=\"tick.secondaryLabel\"\n            [width]=\"d.chartSizingValues.rightPadding\"\n            class=\"tick-label\"\n            [attr.y]=\"tick.y\"\n            [attr.x]=\"d.chartWidth\"\n            text-anchor=\"end\"\n          >\n            {{ tick.secondaryLabel }}\n          </text>\n        </g>\n        <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n          <g\n            *ngIf=\"config.type !== 'horizontal-bar' && config.type !== 'donut'\"\n          >\n            <line\n              class=\"tick-line\"\n              [attr.x1]=\"hoverData?.x\"\n              [attr.x2]=\"hoverData?.x\"\n              y1=\"0\"\n              [attr.y2]=\"d.chartHeight\"\n              stroke-width=\"2\"\n              stroke-dasharray=\"4\"\n            />\n          </g>\n        </ng-container>\n        <g *ngFor=\"let bar of d.bars; let i = index\">\n          <ng-container *ngFor=\"let rect of bar; let j = index\">\n            <defs *ngIf=\"rect.pattern === 'dots'\">\n              <pattern\n                [attr.id]=\"'dots-' + i + '-' + j\"\n                patternUnits=\"userSpaceOnUse\"\n                [attr.x]=\"rect.x\"\n                [attr.y]=\"rect.y\"\n                width=\"4\"\n                height=\"4\"\n              >\n                <circle\n                  cx=\"2\"\n                  cy=\"2\"\n                  r=\"1.5\"\n                  [attr.fill]=\"varColor(d.colors, i)\"\n                ></circle>\n              </pattern>\n            </defs>\n\n            <rect\n              *ngIf=\"rect.nonDisplay !== true\"\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              [attr.fill]=\"\n                rect.pattern === 'dots'\n                  ? 'url(#dots-' + i + '-' + j + ')'\n                  : getBarColor(rect, d.colors, i, hover)\n              \"\n              [attr.stroke]=\"\n                showBarBorders(rect, hover) ? varWrap('--black-100') : undefined\n              \"\n              [attr.stroke-width]=\"showBarBorders(rect, hover) ? 1 : undefined\"\n            ></rect>\n            <rect\n              *ngIf=\"showNonDisplayRect(rect, hover)\"\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              fill=\"transparent\"\n              [attr.stroke]=\"varWrap('--black-100')\"\n              [attr.stroke-width]=\"1\"\n            ></rect>\n            <rect\n              *ngIf=\"rect.pattern === '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          </ng-container>\n        </g>\n        <g *ngFor=\"let bar of d.horizontalBars; let i = index\">\n          <ng-container *ngFor=\"let indBar of bar; let j = index\">\n            <defs *ngIf=\"indBar.pattern === 'dots'\">\n              <pattern\n                [attr.id]=\"'dots-' + i + '-' + j\"\n                patternUnits=\"userSpaceOnUse\"\n                [attr.x]=\"indBar.x\"\n                [attr.y]=\"indBar.y\"\n                width=\"4\"\n                height=\"4\"\n              >\n                <circle\n                  cx=\"2\"\n                  cy=\"2\"\n                  r=\"1.5\"\n                  [attr.fill]=\"varColor(d.colors, i)\"\n                ></circle>\n              </pattern>\n            </defs>\n            <path\n              [attr.d]=\"indBar.horizontalBar\"\n              [attr.fill]=\"\n                indBar.pattern === 'dots'\n                  ? 'url(#dots-' + i + '-' + j + ')'\n                  : varColor(d.colors, i)\n              \"\n              [attr.stroke]=\"\n                indBar.pattern === 'dots' ? 'none' : varColor(d.colors, i)\n              \"\n              [attr.stroke-width]=\"indBar.pattern === 'dots' ? 0 : 2\"\n            />\n            <path\n              *ngIf=\"indBar.pattern === 'striped'\"\n              [attr.d]=\"indBar.horizontalBar\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n              fill=\"url(#stripes)\"\n              stroke-width=\"0\"\n            />\n          </ng-container>\n        </g>\n        <g *ngFor=\"let gradient of d.gradients; let i = index\">\n          <ng-container *ngFor=\"let rect of gradient; let j = index\">\n            <defs>\n              <linearGradient\n                [attr.id]=\"'grad-' + i + '-' + j\"\n                x1=\"0\"\n                y1=\"0\"\n                x2=\"0\"\n                y2=\"1\"\n              >\n                <stop offset=\"0%\" [attr.stop-color]=\"varColor(d.colors, i)\" />\n                <stop offset=\"100%\" stop-color=\"white\" />\n              </linearGradient>\n            </defs>\n            <rect\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              [attr.fill]=\"'url(#grad-' + i + '-' + j + ')'\"\n              opacity=\"0.4\"\n            ></rect>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let line of d.lines; let i = index\">\n          <path\n            [attr.d]=\"line.line\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n            fill=\"none\"\n            stroke-width=\"2\"\n            [attr.stroke-linecap]=\"\n              line.pattern === 'dots' ? 'round' : undefined\n            \"\n            [attr.stroke-linejoin]=\"\n              line.pattern === 'dots' ? 'round' : undefined\n            \"\n            [attr.stroke-dasharray]=\"\n              line.pattern === 'striped'\n                ? '10 10'\n                : line.pattern === 'dots'\n                ? '0.25 7'\n                : undefined\n            \"\n          ></path>\n        </g>\n        <g *ngFor=\"let lineSinglePointFallback of d.circles; let i = index\">\n          <circle\n            class=\"marker\"\n            [attr.cx]=\"lineSinglePointFallback.cx\"\n            [attr.cy]=\"lineSinglePointFallback.cy\"\n            r=\"3.5\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></circle>\n        </g>\n        <g *ngFor=\"let line of d.lines; let i = index\">\n          <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n            <circle\n              class=\"marker\"\n              *ngIf=\"config.groupedTooltip || i === hoverData?.visibleYIndex\"\n              [attr.cx]=\"hoverData?.x\"\n              [attr.cy]=\"hoverData?.ys?.[i]\"\n              r=\"3.5\"\n              stroke-width=\"2\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n            ></circle>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <path [attr.d]=\"area.area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n          <path\n            *ngIf=\"area.pattern === 'striped'\"\n            [attr.d]=\"area.area\"\n            fill=\"url(#stripes)\"\n          ></path>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n            <circle\n              class=\"marker\"\n              *ngIf=\"config.groupedTooltip || i === hoverData?.visibleYIndex\"\n              [attr.cx]=\"hoverData?.x\"\n              [attr.cy]=\"hoverData?.ys?.[i]\"\n              r=\"3.5\"\n              stroke-width=\"2\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n            ></circle>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let wLine of d.waterfallLines\">\n          <line\n            class=\"waterfall-line\"\n            [attr.x1]=\"wLine.x1\"\n            [attr.x2]=\"wLine.x2\"\n            [attr.y1]=\"wLine.y1\"\n            [attr.y2]=\"wLine.y2\"\n            stroke-width=\"1\"\n            stroke-dasharray=\"6\"\n          />\n        </g>\n        <path\n          *ngFor=\"let path of d.arcs; let i = index\"\n          [attr.d]=\"path\"\n          [attr.fill]=\"varColor(d.colors, i)\"\n        ></path>\n        <g *ngFor=\"let dataLabel of d.dataLabels; let i = index\">\n          <text\n            *ngIf=\"config.showDataLabels && dataLabel.label\"\n            [ngClass]=\"getDataLabelClass(dataLabel, config, hover)\"\n            [attr.y]=\"dataLabel.yPos\"\n            [attr.x]=\"dataLabel.xPos\"\n            [attr.text-anchor]=\"dataLabel.anchor\"\n            [attr.font-weight]=\"\n              dataLabel.bold\n                ? 'var(--font-weight-heavy)'\n                : 'var(--font-weight-normal)'\n            \"\n            [attr.opacity]=\"getDataLabelOpacity(dataLabel, config, hover)\"\n          >\n            {{ dataLabel.label }}\n          </text>\n          <line\n            *ngIf=\"dataLabel.line && config.showDataLabels\"\n            [attr.y1]=\"dataLabel.line.y1\"\n            [attr.y2]=\"dataLabel.line.y2\"\n            [attr.x1]=\"dataLabel.line.x1\"\n            [attr.x2]=\"dataLabel.line.x2\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></line>\n        </g>\n        <g *ngFor=\"let connection of d.flowConnections\">\n          <path\n            [attr.d]=\"connection.path\"\n            [attr.fill]=\"getConnectionColor()\"\n            [attr.opacity]=\"getConnectionOpacity(connection, hover)\"\n          />\n        </g>\n      </svg:svg>\n      <div *ngIf=\"config.type === 'donut'\" class=\"donut-display\">\n        <div class=\"donut-value\" [ngClass]=\"config.donutDisplayInfo.size\">\n          {{ config.donutDisplayInfo.displayValue }}\n        </div>\n        <div class=\"donut-label\">\n          {{ config.donutDisplayInfo.displayLabel }}\n        </div>\n      </div>\n      <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n        <riv-callout\n          *riv-overlay\n          [anchor]=\"\n            hoverData?.tooltip?.anchor ? hoverData.tooltip.anchor : null\n          \"\n          [isModal]=\"false\"\n          [preferredPosition]=\"\n            hoverData?.tooltip?.preferredPosition ?? 'center-right'\n          \"\n          [theme]=\"'light'\"\n        >\n          <ng-container *ngIf=\"tooltipTemplate; else defaultTooltip\">\n            <ng-container\n              [ngTemplateOutlet]=\"tooltipTemplate\"\n              [ngTemplateOutletContext]=\"{\n                xIndex: hoverData?.xIndex,\n                yIndex: hoverData?.yIndex,\n                isSuppValue: hoverData?.isSuppValue,\n                suppYIndex: hoverData?.suppYIndex\n              }\"\n            ></ng-container>\n          </ng-container>\n          <ng-template #defaultTooltip>\n            <div class=\"callout-content\">\n              <div *ngIf=\"hoverData?.tooltip?.date\" class=\"callout-row\">\n                {{ hoverData?.tooltip?.date }}\n              </div>\n              <div\n                class=\"callout-row\"\n                *ngFor=\"let metric of hoverData?.tooltip?.metrics\"\n              >\n                <span class=\"series-label\">\n                  <riv-legend-item\n                    [colorToken]=\"metric.color\"\n                    [style]=\"metric.pattern || 'solid'\"\n                  ></riv-legend-item>\n                  <span>{{ metric.label }}</span>\n                </span>\n                <span>{{ metric.value }}</span>\n              </div>\n            </div>\n          </ng-template>\n        </riv-callout>\n      </ng-container>\n      <ng-container *ngIf=\"flowHoverDataGuard(hover) as hoverData\">\n        <riv-callout\n          *riv-overlay\n          [anchor]=\"\n            hoverData?.tooltip?.anchor ? hoverData.tooltip.anchor : null\n          \"\n          [isModal]=\"false\"\n          [preferredPosition]=\"'top-center'\"\n          [theme]=\"'light'\"\n        >\n          <div class=\"callout-content\">\n            <div class=\"callout-row\">\n              <ng-container *ngIf=\"hoverData?.hoverTarget === 'connection'\">\n                <ng-container\n                  *ngIf=\"\n                    getBucketConfigInfo(hoverData, 'startId') as startConfig\n                  \"\n                >\n                  <riv-issue\n                    [label]=\"startConfig.title\"\n                    [colorToken]=\"startConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n                ->\n                <ng-container\n                  *ngIf=\"getBucketConfigInfo(hoverData, 'endId') as endConfig\"\n                >\n                  <riv-issue\n                    [label]=\"endConfig.title\"\n                    [colorToken]=\"endConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"hoverData?.hoverTarget !== 'connection'\">\n                <ng-container\n                  *ngIf=\"getBucketConfigInfo(hoverData, 'barId') as barConfig\"\n                >\n                  <riv-issue\n                    [label]=\"barConfig.title\"\n                    [colorToken]=\"barConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n              </ng-container>\n            </div>\n            <div\n              *ngIf=\"hoverData?.tooltip?.subtitle\"\n              class=\"callout-row flow-subtitle\"\n            >\n              {{ hoverData?.tooltip?.subtitle }}\n            </div>\n          </div>\n        </riv-callout>\n      </ng-container>\n    </div>\n    <legend *ngIf=\"d.data.type !== 'flow'\">\n      <ng-container *ngIf=\"firstHiddenLegendItemIndex$ | async; let fi\">\n        <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n          <riv-legend-item\n            *ngIf=\"i < fi.dataIndex && item.showLegendItem !== false\"\n            [label]=\"item.label\"\n            [style]=\"item.pattern || 'solid'\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n            [colorToken]=\"getItemColor(item, i)\"\n            (itemClick)=\"toggleLegend(item, i)\"\n          ></riv-legend-item>\n        </ng-container>\n        <ng-container\n          *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n        >\n          <riv-legend-item\n            *ngIf=\"i < fi.suppIndex && item.showLegendItem !== false\"\n            [label]=\"item.label\"\n            [style]=\"item.pattern || 'solid'\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n            [colorToken]=\"getItemColor(item, i)\"\n            (itemClick)=\"toggleLegend(item, i)\"\n          ></riv-legend-item>\n        </ng-container>\n        <div\n          #moreTextContainer\n          class=\"more-text-container\"\n          (mouseover)=\"mouseoverLegend()\"\n          (mouseleave)=\"mouseleaveLegend()\"\n          (click)=\"moreClick()\"\n          *ngIf=\"fi.hiddenCount\"\n        >\n          <span rivLink class=\"more-text\">\n            +\n            {{ fi.hiddenCount }} more\n          </span>\n        </div>\n        <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n          <riv-callout\n            *riv-overlay\n            [anchor]=\"moreTextContainer?.nativeElement\"\n            [isModal]=\"lockShowMoreTooltip\"\n            (close)=\"closeHandler()\"\n            [preferredPosition]=\"'bottom-right'\"\n            [theme]=\"'light'\"\n            [showCaret]=\"false\"\n          >\n            <div class=\"legend-tooltip\">\n              <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n                <riv-legend-item\n                  *ngIf=\"i >= fi.dataIndex && item.showLegendItem !== false\"\n                  [label]=\"item.label\"\n                  [style]=\"item.pattern || 'solid'\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n                  [colorToken]=\"getItemColor(item, i)\"\n                  (itemClick)=\"toggleLegend(item, i)\"\n                ></riv-legend-item>\n              </ng-container>\n              <ng-container\n                *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n              >\n                <riv-legend-item\n                  *ngIf=\"i >= fi.suppIndex && item.showLegendItem !== false\"\n                  [label]=\"item.label\"\n                  [style]=\"item.pattern || 'solid'\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [colorToken]=\"getItemColor(item, i)\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n                  (itemClick)=\"toggleLegend(item, i)\"\n                ></riv-legend-item>\n              </ng-container>\n            </div>\n          </riv-callout>\n        </ng-container>\n      </ng-container>\n    </legend>\n  </ng-container>\n</div>\n\n<ng-template #nonDisplayState>\n  <ng-container *ngIf=\"checkForNonDisplayState(drawData$ | async); let type\">\n    <riv-zero-state\n      *ngIf=\"type === 'zeroState'\"\n      [message]=\"config.zeroStateMessage\"\n    ></riv-zero-state>\n    <riv-zero-state\n      *ngIf=\"type === 'sizingErrorState'\"\n      [message]=\"config.sizingErrorStateMessage\"\n    ></riv-zero-state>\n  </ng-container>\n</ng-template>\n", styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-small)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--override-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-row:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline;width:100%}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);top:calc(var(--base-grid-size) * -1);position:relative}.legend-tooltip{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column;overflow-y:scroll;max-height:clamp(0px,60vh,600px)}.legend-tooltip>riv-legend-item{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;line-height:var(--type-1-line-height-0)}.sub-container.clickable{cursor:pointer}.sub-container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;overflow:auto}.sub-container:not(.donut-container){justify-items:start;align-items:start}.sub-container.donut-container{justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.donut-display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.donut-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.donut-value,.donut-label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}.donut-value.xsmall{font:var(--stat-xsmall)}.donut-value.small{font:var(--stat-small)}.donut-value.medium{font:var(--stat-medium)}.donut-value.large{font:var(--stat-large)}.data-label{fill:var(--type-light-high-contrast);font-size:var(--override-font-size)}.flow-data-label{text-decoration:underline;font-size:var(--override-font-size);cursor:pointer;fill:var(--type-light-link-hover)}.waterfall-line{stroke:var(--gray-60)}.flow-subtitle{font-weight:var(--font-weight-heavy)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: IssueComponent, selector: "riv-issue", inputs: ["label", "colorToken", "textColorOverride"] }, { kind: "component", type: LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "component", type: LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme", "variant"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { 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", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"container\"\n  (rivClientSize)=\"width = $event.width\"\n  *ngIf=\"{ d: drawData$ | async } as vm\"\n  [style.--override-font-size]=\"getFontSize(vm.d)\"\n>\n  <ng-container\n    *ngIf=\"\n      !checkForNonDisplayState(vm.d) && (drawData$ | async);\n      let d;\n      else: nonDisplayState\n    \"\n  >\n    <div\n      (mousemove)=\"mousemove($event, d.hover)\"\n      (mouseleave)=\"mouseleave($event)\"\n      (click)=\"click()\"\n      #container\n      class=\"sub-container\"\n      [class.clickable]=\"isHoverClickable\"\n      tabIndex=\"0\"\n      [ngClass]=\"{ 'donut-container': config.type === 'donut' }\"\n      [ngStyle]=\"{\n        height: getSubcontainerHeight(d),\n        width: getSubcontainerWidth(d)\n      }\"\n    >\n      <svg:svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [attr.viewBox]=\"d.viewBox\"\n        [attr.height]=\"d.chartHeight\"\n        [attr.width]=\"d.chartWidth\"\n      >\n        <defs>\n          <!-- Stripe pattern -->\n          <pattern\n            id=\"stripes\"\n            x=\"0\"\n            y=\"0\"\n            [attr.width]=\"10\"\n            [attr.height]=\"10\"\n            patternUnits=\"userSpaceOnUse\"\n          >\n            <line\n              [attr.x1]=\"0\"\n              [attr.y1]=\"10\"\n              [attr.x2]=\"10\"\n              [attr.y2]=\"0\"\n              stroke=\"var(--white-100)\"\n              stroke-width=\"1\"\n            ></line>\n          </pattern>\n        </defs>\n        <ng-container *ngIf=\"!(config.type === 'horizontal-bar')\">\n          <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n            <text\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"getBottomLabelY(d)\"\n            >\n              {{ tick.label }}\n            </text>\n          </g>\n        </ng-container>\n        <ng-container *ngIf=\"config.type === 'horizontal-bar'\">\n          <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"left\">\n            <text\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"d.chartSizingValues.fontSize\"\n            >\n              {{ tick.label }}\n            </text>\n            <line\n              class=\"tick-line\"\n              [attr.x1]=\"tick.x\"\n              [attr.x2]=\"tick.x\"\n              y1=\"0\"\n              [attr.y2]=\"d.chartHeight\"\n            ></line>\n            <text\n              *ngIf=\"tick.secondaryLabel\"\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"getBottomLabelY(d)\"\n            >\n              {{ tick.secondaryLabel }}\n            </text>\n          </g>\n        </ng-container>\n        <g *ngFor=\"let tick of d.yTicks\">\n          <line\n            *ngIf=\"!(config.type === 'horizontal-bar')\"\n            class=\"tick-line\"\n            [attr.y1]=\"tick.y\"\n            [attr.y2]=\"tick.y\"\n            x1=\"0\"\n            [attr.x2]=\"d.chartWidth\"\n          ></line>\n          <text\n            rivSVGTextTruncate\n            [text]=\"tick.label\"\n            [width]=\"\n              config.type === 'horizontal-bar'\n                ? d.chartSizingValues.leftBucketLabel\n                : d.chartSizingValues.leftPadding\n            \"\n            class=\"tick-label\"\n            [attr.y]=\"tick.y\"\n            [attr.x]=\"0\"\n          >\n            {{ tick.label }}\n          </text>\n          <text\n            *ngIf=\"tick.secondaryLabel\"\n            rivSVGTextTruncate\n            [text]=\"tick.secondaryLabel\"\n            [width]=\"d.chartSizingValues.rightPadding\"\n            class=\"tick-label\"\n            [attr.y]=\"tick.y\"\n            [attr.x]=\"d.chartWidth\"\n            text-anchor=\"end\"\n          >\n            {{ tick.secondaryLabel }}\n          </text>\n        </g>\n        <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n          <g\n            *ngIf=\"config.type !== 'horizontal-bar' && config.type !== 'donut'\"\n          >\n            <line\n              class=\"tick-line\"\n              [attr.x1]=\"hoverData?.x\"\n              [attr.x2]=\"hoverData?.x\"\n              y1=\"0\"\n              [attr.y2]=\"d.chartHeight\"\n              stroke-width=\"2\"\n              stroke-dasharray=\"4\"\n            />\n          </g>\n        </ng-container>\n        <g *ngFor=\"let bar of d.bars; let i = index\">\n          <ng-container *ngFor=\"let rect of bar; let j = index\">\n            <defs *ngIf=\"rect.pattern === 'dots'\">\n              <pattern\n                [attr.id]=\"'dots-' + i + '-' + j\"\n                patternUnits=\"userSpaceOnUse\"\n                [attr.x]=\"rect.x\"\n                [attr.y]=\"rect.y\"\n                width=\"4\"\n                height=\"4\"\n              >\n                <circle\n                  cx=\"2\"\n                  cy=\"2\"\n                  r=\"1.5\"\n                  [attr.fill]=\"varColor(d.colors, i)\"\n                ></circle>\n              </pattern>\n            </defs>\n\n            <rect\n              *ngIf=\"rect.nonDisplay !== true\"\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              [attr.fill]=\"\n                rect.pattern === 'dots'\n                  ? 'url(#dots-' + i + '-' + j + ')'\n                  : getBarColor(rect, d.colors, i, hover)\n              \"\n              [attr.stroke]=\"\n                showBarBorders(rect, hover) ? varWrap('--black-100') : undefined\n              \"\n              [attr.stroke-width]=\"showBarBorders(rect, hover) ? 1 : undefined\"\n            ></rect>\n            <rect\n              *ngIf=\"showNonDisplayRect(rect, hover)\"\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              fill=\"transparent\"\n              [attr.stroke]=\"varWrap('--black-100')\"\n              [attr.stroke-width]=\"1\"\n            ></rect>\n            <rect\n              *ngIf=\"rect.pattern === '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          </ng-container>\n        </g>\n        <g *ngFor=\"let bar of d.horizontalBars; let i = index\">\n          <ng-container *ngFor=\"let indBar of bar; let j = index\">\n            <defs *ngIf=\"indBar.pattern === 'dots'\">\n              <pattern\n                [attr.id]=\"'dots-' + i + '-' + j\"\n                patternUnits=\"userSpaceOnUse\"\n                [attr.x]=\"indBar.x\"\n                [attr.y]=\"indBar.y\"\n                width=\"4\"\n                height=\"4\"\n              >\n                <circle\n                  cx=\"2\"\n                  cy=\"2\"\n                  r=\"1.5\"\n                  [attr.fill]=\"varColor(d.colors, i)\"\n                ></circle>\n              </pattern>\n            </defs>\n            <path\n              [attr.d]=\"indBar.horizontalBar\"\n              [attr.fill]=\"\n                indBar.pattern === 'dots'\n                  ? 'url(#dots-' + i + '-' + j + ')'\n                  : varColor(d.colors, i)\n              \"\n              [attr.stroke]=\"\n                indBar.pattern === 'dots' ? 'none' : varColor(d.colors, i)\n              \"\n              [attr.stroke-width]=\"indBar.pattern === 'dots' ? 0 : 2\"\n            />\n            <path\n              *ngIf=\"indBar.pattern === 'striped'\"\n              [attr.d]=\"indBar.horizontalBar\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n              fill=\"url(#stripes)\"\n              stroke-width=\"0\"\n            />\n          </ng-container>\n        </g>\n        <g *ngFor=\"let gradient of d.gradients; let i = index\">\n          <ng-container *ngFor=\"let rect of gradient; let j = index\">\n            <defs>\n              <linearGradient\n                [attr.id]=\"'grad-' + i + '-' + j\"\n                x1=\"0\"\n                y1=\"0\"\n                x2=\"0\"\n                y2=\"1\"\n              >\n                <stop offset=\"0%\" [attr.stop-color]=\"varColor(d.colors, i)\" />\n                <stop offset=\"100%\" stop-color=\"white\" />\n              </linearGradient>\n            </defs>\n            <rect\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              [attr.fill]=\"'url(#grad-' + i + '-' + j + ')'\"\n              opacity=\"0.4\"\n            ></rect>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let line of d.lines; let i = index\">\n          <path\n            [attr.d]=\"line.line\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n            fill=\"none\"\n            stroke-width=\"2\"\n            [attr.stroke-linecap]=\"\n              line.pattern === 'dots' ? 'round' : undefined\n            \"\n            [attr.stroke-linejoin]=\"\n              line.pattern === 'dots' ? 'round' : undefined\n            \"\n            [attr.stroke-dasharray]=\"\n              line.pattern === 'striped'\n                ? '10 10'\n                : line.pattern === 'dots'\n                ? '0.25 7'\n                : undefined\n            \"\n          ></path>\n        </g>\n        <g *ngFor=\"let lineSinglePointFallback of d.circles; let i = index\">\n          <circle\n            class=\"marker\"\n            [attr.cx]=\"lineSinglePointFallback.cx\"\n            [attr.cy]=\"lineSinglePointFallback.cy\"\n            r=\"3.5\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></circle>\n        </g>\n        <g *ngFor=\"let line of d.lines; let i = index\">\n          <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n            <circle\n              class=\"marker\"\n              *ngIf=\"config.groupedTooltip || i === hoverData?.visibleYIndex\"\n              [attr.cx]=\"hoverData?.x\"\n              [attr.cy]=\"hoverData?.ys?.[i]\"\n              r=\"3.5\"\n              stroke-width=\"2\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n            ></circle>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <path [attr.d]=\"area.area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n          <path\n            *ngIf=\"area.pattern === 'striped'\"\n            [attr.d]=\"area.area\"\n            fill=\"url(#stripes)\"\n          ></path>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n            <circle\n              class=\"marker\"\n              *ngIf=\"config.groupedTooltip || i === hoverData?.visibleYIndex\"\n              [attr.cx]=\"hoverData?.x\"\n              [attr.cy]=\"hoverData?.ys?.[i]\"\n              r=\"3.5\"\n              stroke-width=\"2\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n            ></circle>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let wLine of d.waterfallLines\">\n          <line\n            class=\"waterfall-line\"\n            [attr.x1]=\"wLine.x1\"\n            [attr.x2]=\"wLine.x2\"\n            [attr.y1]=\"wLine.y1\"\n            [attr.y2]=\"wLine.y2\"\n            stroke-width=\"1\"\n            stroke-dasharray=\"6\"\n          />\n        </g>\n        <path\n          *ngFor=\"let path of d.arcs; let i = index\"\n          [attr.d]=\"path\"\n          [attr.fill]=\"varColor(d.colors, i)\"\n        ></path>\n        <g *ngFor=\"let dataLabel of d.dataLabels; let i = index\">\n          <text\n            *ngIf=\"config.showDataLabels && dataLabel.label\"\n            [ngClass]=\"getDataLabelClass(dataLabel, config, hover)\"\n            [attr.y]=\"dataLabel.yPos\"\n            [attr.x]=\"dataLabel.xPos\"\n            [attr.text-anchor]=\"dataLabel.anchor\"\n            [attr.font-weight]=\"\n              dataLabel.bold\n                ? 'var(--font-weight-heavy)'\n                : 'var(--font-weight-normal)'\n            \"\n            [attr.opacity]=\"getDataLabelOpacity(dataLabel, config, hover)\"\n          >\n            {{ dataLabel.label }}\n          </text>\n          <line\n            *ngIf=\"dataLabel.line && config.showDataLabels\"\n            [attr.y1]=\"dataLabel.line.y1\"\n            [attr.y2]=\"dataLabel.line.y2\"\n            [attr.x1]=\"dataLabel.line.x1\"\n            [attr.x2]=\"dataLabel.line.x2\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></line>\n        </g>\n        <g *ngFor=\"let connection of d.flowConnections\">\n          <path\n            [attr.d]=\"connection.path\"\n            [attr.fill]=\"getConnectionColor()\"\n            [attr.opacity]=\"getConnectionOpacity(connection, hover)\"\n          />\n        </g>\n      </svg:svg>\n      <div *ngIf=\"config.type === 'donut'\" class=\"donut-display\">\n        <div class=\"donut-value\" [ngClass]=\"config.donutDisplayInfo.size\">\n          {{ config.donutDisplayInfo.displayValue }}\n        </div>\n        <div class=\"donut-label\">\n          {{ config.donutDisplayInfo.displayLabel }}\n        </div>\n      </div>\n      <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n        <riv-callout\n          *riv-overlay\n          [anchor]=\"\n            hoverData?.tooltip?.anchor ? hoverData.tooltip.anchor : null\n          \"\n          [isModal]=\"false\"\n          [preferredPosition]=\"\n            hoverData?.tooltip?.preferredPosition ?? 'center-right'\n          \"\n          [theme]=\"'light'\"\n        >\n          <ng-container *ngIf=\"tooltipTemplate; else defaultTooltip\">\n            <ng-container\n              [ngTemplateOutlet]=\"tooltipTemplate\"\n              [ngTemplateOutletContext]=\"{\n                xIndex: hoverData?.xIndex,\n                yIndex: hoverData?.yIndex,\n                isSuppValue: hoverData?.isSuppValue,\n                suppYIndex: hoverData?.suppYIndex\n              }\"\n            ></ng-container>\n          </ng-container>\n          <ng-template #defaultTooltip>\n            <div class=\"callout-content\">\n              <div *ngIf=\"hoverData?.tooltip?.date\" class=\"callout-row\">\n                {{ hoverData?.tooltip?.date }}\n              </div>\n              <div\n                class=\"callout-row\"\n                *ngFor=\"let metric of hoverData?.tooltip?.metrics\"\n              >\n                <span class=\"series-label\">\n                  <riv-legend-item\n                    [colorToken]=\"metric.color\"\n                    [style]=\"metric.pattern || 'solid'\"\n                  ></riv-legend-item>\n                  <span>{{ metric.label }}</span>\n                </span>\n                <span>{{ metric.value }}</span>\n              </div>\n            </div>\n          </ng-template>\n        </riv-callout>\n      </ng-container>\n      <ng-container *ngIf=\"flowHoverDataGuard(hover) as hoverData\">\n        <riv-callout\n          *riv-overlay\n          [anchor]=\"\n            hoverData?.tooltip?.anchor ? hoverData.tooltip.anchor : null\n          \"\n          [isModal]=\"false\"\n          [preferredPosition]=\"'top-center'\"\n          [theme]=\"'light'\"\n        >\n          <div class=\"callout-content\">\n            <div class=\"callout-row\">\n              <ng-container *ngIf=\"hoverData?.hoverTarget === 'connection'\">\n                <ng-container\n                  *ngIf=\"\n                    getBucketConfigInfo(hoverData, 'startId') as startConfig\n                  \"\n                >\n                  <riv-issue\n                    [label]=\"startConfig.title\"\n                    [colorToken]=\"startConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n                ->\n                <ng-container\n                  *ngIf=\"getBucketConfigInfo(hoverData, 'endId') as endConfig\"\n                >\n                  <riv-issue\n                    [label]=\"endConfig.title\"\n                    [colorToken]=\"endConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"hoverData?.hoverTarget !== 'connection'\">\n                <ng-container\n                  *ngIf=\"getBucketConfigInfo(hoverData, 'barId') as barConfig\"\n                >\n                  <riv-issue\n                    [label]=\"barConfig.title\"\n                    [colorToken]=\"barConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n              </ng-container>\n            </div>\n            <div\n              *ngIf=\"hoverData?.tooltip?.subtitle\"\n              class=\"callout-row flow-subtitle\"\n            >\n              {{ hoverData?.tooltip?.subtitle }}\n            </div>\n          </div>\n        </riv-callout>\n      </ng-container>\n    </div>\n    <legend *ngIf=\"d.data.type !== 'flow'\">\n      <ng-container *ngIf=\"firstHiddenLegendItemIndex$ | async; let fi\">\n        <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n          <riv-legend-item\n            *ngIf=\"i < fi.dataIndex && item.showLegendItem !== false\"\n            [label]=\"item.label\"\n            [style]=\"item.pattern || 'solid'\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n            [colorToken]=\"getItemColor(item, i)\"\n            (itemClick)=\"toggleLegend(item, i)\"\n          ></riv-legend-item>\n        </ng-container>\n        <ng-container\n          *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n        >\n          <riv-legend-item\n            *ngIf=\"i < fi.suppIndex && item.showLegendItem !== false\"\n            [label]=\"item.label\"\n            [style]=\"item.pattern || 'solid'\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n            [colorToken]=\"getItemColor(item, i)\"\n            (itemClick)=\"toggleLegend(item, i)\"\n          ></riv-legend-item>\n        </ng-container>\n        <div\n          #moreTextContainer\n          class=\"more-text-container\"\n          (mouseover)=\"mouseoverLegend()\"\n          (mouseleave)=\"mouseleaveLegend()\"\n          (click)=\"moreClick()\"\n          *ngIf=\"fi.hiddenCount\"\n        >\n          <span rivLink class=\"more-text\">\n            +\n            {{ fi.hiddenCount }} more\n          </span>\n        </div>\n        <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n          <riv-callout\n            *riv-overlay\n            [anchor]=\"moreTextContainer?.nativeElement\"\n            [isModal]=\"lockShowMoreTooltip\"\n            (close)=\"closeHandler()\"\n            [preferredPosition]=\"'bottom-right'\"\n            [theme]=\"'light'\"\n            [showCaret]=\"false\"\n          >\n            <div class=\"legend-tooltip\">\n              <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n                <riv-legend-item\n                  *ngIf=\"i >= fi.dataIndex && item.showLegendItem !== false\"\n                  [label]=\"item.label\"\n                  [style]=\"item.pattern || 'solid'\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n                  [colorToken]=\"getItemColor(item, i)\"\n                  (itemClick)=\"toggleLegend(item, i)\"\n                ></riv-legend-item>\n              </ng-container>\n              <ng-container\n                *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n              >\n                <riv-legend-item\n                  *ngIf=\"i >= fi.suppIndex && item.showLegendItem !== false\"\n                  [label]=\"item.label\"\n                  [style]=\"item.pattern || 'solid'\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [colorToken]=\"getItemColor(item, i)\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n                  (itemClick)=\"toggleLegend(item, i)\"\n                ></riv-legend-item>\n              </ng-container>\n            </div>\n          </riv-callout>\n        </ng-container>\n      </ng-container>\n    </legend>\n  </ng-container>\n</div>\n\n<ng-template #nonDisplayState>\n  <ng-container *ngIf=\"checkForNonDisplayState(drawData$ | async); let type\">\n    <riv-zero-state\n      *ngIf=\"type === 'zeroState'\"\n      [message]=\"config.zeroStateMessage\"\n    ></riv-zero-state>\n    <riv-zero-state\n      *ngIf=\"type === 'sizingErrorState'\"\n      [message]=\"config.sizingErrorStateMessage\"\n    ></riv-zero-state>\n  </ng-container>\n</ng-template>\n", styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-small)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--override-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-row:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline;width:100%}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);top:calc(var(--base-grid-size) * -1);position:relative}.legend-tooltip{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column;overflow-y:scroll;max-height:clamp(0px,60vh,600px)}.legend-tooltip>riv-legend-item{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;line-height:var(--type-1-line-height-0)}.sub-container.clickable{cursor:pointer}.sub-container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;overflow:auto}.sub-container:not(.donut-container){justify-items:start;align-items:start}.sub-container.donut-container{justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.donut-display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.donut-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.donut-value,.donut-label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}.donut-value.xsmall{font:var(--stat-xsmall)}.donut-value.small{font:var(--stat-small)}.donut-value.medium{font:var(--stat-medium)}.donut-value.large{font:var(--stat-large)}.data-label{fill:var(--type-light-high-contrast);font-size:var(--override-font-size)}.flow-data-label{text-decoration:underline;font-size:var(--override-font-size);cursor:pointer;fill:var(--type-light-link-hover)}.waterfall-line{stroke:var(--gray-60)}.flow-subtitle{font-weight:var(--font-weight-heavy)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { container: [{
@@ -13814,9 +13835,9 @@ class DataTableRowComponent {
         this.subRow = false;
     }
 }
-DataTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableRowComponent, selector: "[riv-data-table-row]", inputs: { subRow: "subRow" }, host: { properties: { "class.sub-row": "this.subRow" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host:not(.sub-row){border-top:var(--border-width) solid var(--border-light)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableRowComponent, decorators: [{
+DataTableRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DataTableRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DataTableRowComponent, selector: "[riv-data-table-row]", inputs: { subRow: "subRow" }, host: { properties: { "class.sub-row": "this.subRow" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host:not(.sub-row){border-top:var(--border-width) solid var(--border-light)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataTableRowComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-row]', template: '<ng-content></ng-content>', styles: [":host:not(.sub-row){border-top:var(--border-width) solid var(--border-light)}\n"] }]
         }], propDecorators: { subRow: [{
@@ -13835,9 +13856,9 @@ class DataTableCellComponent {
         this.subCell = this.row.subRow;
     }
 }
-DataTableCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableCellComponent, deps: [{ token: DataTableRowComponent }], target: i0.ɵɵFactoryTarget.Component });
-DataTableCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableCellComponent, selector: "[riv-data-table-cell]", host: { properties: { "class.sub-cell": "this.subCell" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:var(--size-large) 0;text-align:right}:host.sub-cell{padding-top:0;padding-left:var(--size-xlarge)}:host:first-child{text-align:left}@media screen{:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableCellComponent, decorators: [{
+DataTableCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataTableCellComponent, deps: [{ token: DataTableRowComponent }], target: i0.ɵɵFactoryTarget.Component });
+DataTableCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DataTableCellComponent, selector: "[riv-data-table-cell]", host: { properties: { "class.sub-cell": "this.subCell" } }, ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:var(--size-large) 0;text-align:right}:host.sub-cell{padding-top:0;padding-left:var(--size-xlarge)}:host:first-child{text-align:left}@media screen{:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataTableCellComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-cell]', template: '<ng-content></ng-content>', styles: [":host{padding:var(--size-large) 0;text-align:right}:host.sub-cell{padding-top:0;padding-left:var(--size-xlarge)}:host:first-child{text-align:left}@media screen{:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0)}}\n"] }]
         }], ctorParameters: function () { return [{ type: DataTableRowComponent }]; }, propDecorators: { subCell: [{
@@ -13847,18 +13868,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class DataTableHeaderCellComponent {
 }
-DataTableHeaderCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataTableHeaderCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableHeaderCellComponent, selector: "[riv-data-table-header-cell]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:var(--size-large) 0;font-weight:var(--font-weight-heavy);text-align:right}:host:first-child{text-align:left}@media screen{:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableHeaderCellComponent, decorators: [{
+DataTableHeaderCellComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DataTableHeaderCellComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DataTableHeaderCellComponent, selector: "[riv-data-table-header-cell]", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, styles: [":host{padding:var(--size-large) 0;font-weight:var(--font-weight-heavy);text-align:right}:host:first-child{text-align:left}@media screen{:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0)}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataTableHeaderCellComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: '[riv-data-table-header-cell]', template: '<ng-content></ng-content>', styles: [":host{padding:var(--size-large) 0;font-weight:var(--font-weight-heavy);text-align:right}:host:first-child{text-align:left}@media screen{:host:first-child{position:sticky;left:0;z-index:1;background-color:var(--surface-light-0)}}\n"] }]
         }] });
 class DataTableComponent {
 }
-DataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DataTableComponent, selector: "riv-data-table", ngImport: i0, template: '<table><ng-content></ng-content></table>', isInline: true, styles: [":host{display:block;overflow-x:auto}table{table-layout:fixed;min-width:100%;border-collapse:collapse}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DataTableComponent, decorators: [{
+DataTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DataTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DataTableComponent, selector: "riv-data-table", ngImport: i0, template: '<table><ng-content></ng-content></table>', isInline: true, styles: [":host{display:block;overflow-x:auto}table{table-layout:fixed;min-width:100%;border-collapse:collapse}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DataTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-data-table', template: '<table><ng-content></ng-content></table>', changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:block;overflow-x:auto}table{table-layout:fixed;min-width:100%;border-collapse:collapse}\n"] }]
         }] });
@@ -13891,9 +13912,9 @@ class DonutComponent {
         return (this.data.length === 0 || this.data.every(point => point.value === 0));
     }
 }
-DonutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DonutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-DonutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: DonutComponent, selector: "riv-donut", inputs: { displayLabel: "displayLabel", displayValue: "displayValue", data: "data", displayTooltip: "displayTooltip", size: "size" }, ngImport: i0, template: "<div *ngIf=\"!empty; else zeroState\" class=\"container\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"100%\"\n    [attr.height]=\"HEIGHT\"\n    viewBox=\"-128 -128 256 256\"\n  >\n    <path\n      *ngFor=\"let path of arcPaths; let i = index\"\n      [attr.d]=\"path\"\n      [attr.fill]=\"getFillStyle(i)\"\n    ></path>\n  </svg>\n  <div class=\"display\">\n    <div class=\"value\" [ngClass]=\"size\" [rivTooltip]=\"displayTooltip\">\n      {{ displayValue }}\n    </div>\n    <div class=\"label\">{{ displayLabel }}</div>\n  </div>\n</div>\n\n<ng-template #zeroState>\n  <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value,.label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}.value.xsmall{font:var(--stat-xsmall)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DonutComponent, decorators: [{
+DonutComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DonutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+DonutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: DonutComponent, selector: "riv-donut", inputs: { displayLabel: "displayLabel", displayValue: "displayValue", data: "data", displayTooltip: "displayTooltip", size: "size" }, ngImport: i0, template: "<div *ngIf=\"!empty; else zeroState\" class=\"container\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"100%\"\n    [attr.height]=\"HEIGHT\"\n    viewBox=\"-128 -128 256 256\"\n  >\n    <path\n      *ngFor=\"let path of arcPaths; let i = index\"\n      [attr.d]=\"path\"\n      [attr.fill]=\"getFillStyle(i)\"\n    ></path>\n  </svg>\n  <div class=\"display\">\n    <div class=\"value\" [ngClass]=\"size\" [rivTooltip]=\"displayTooltip\">\n      {{ displayValue }}\n    </div>\n    <div class=\"label\">{{ displayLabel }}</div>\n  </div>\n</div>\n\n<ng-template #zeroState>\n  <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value,.label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}.value.xsmall{font:var(--stat-xsmall)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: DonutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-donut', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"!empty; else zeroState\" class=\"container\">\n  <svg\n    xmlns=\"http://www.w3.org/2000/svg\"\n    width=\"100%\"\n    [attr.height]=\"HEIGHT\"\n    viewBox=\"-128 -128 256 256\"\n  >\n    <path\n      *ngFor=\"let path of arcPaths; let i = index\"\n      [attr.d]=\"path\"\n      [attr.fill]=\"getFillStyle(i)\"\n    ></path>\n  </svg>\n  <div class=\"display\">\n    <div class=\"value\" [ngClass]=\"size\" [rivTooltip]=\"displayTooltip\">\n      {{ displayValue }}\n    </div>\n    <div class=\"label\">{{ displayLabel }}</div>\n  </div>\n</div>\n\n<ng-template #zeroState>\n  <riv-zero-state></riv-zero-state>\n</ng-template>\n", styles: [".container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.value,.label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}.value.xsmall{font:var(--stat-xsmall)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}\n"] }]
         }], propDecorators: { displayLabel: [{
@@ -13940,9 +13961,9 @@ class MiniPieComponent {
         return `M 0 0 L 0 -8 A 8 8 0 ${largeArc} 1 ${x} ${y} Z`;
     }
 }
-MiniPieComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MiniPieComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MiniPieComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MiniPieComponent, selector: "riv-mini-pie", inputs: { value: "value", size: "size", colorToken: "colorToken" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-10 -10 20 20\">\n  <circle cx=\"0\" cy=\"0\" r=\"8\" class=\"track\" />\n  <circle *ngIf=\"isFull\" cx=\"0\" cy=\"0\" r=\"8\" [attr.fill]=\"fillColor\" />\n  <path\n    *ngIf=\"clampedValue > 0 && !isFull\"\n    [attr.d]=\"wedgePath\"\n    [attr.fill]=\"fillColor\"\n  />\n</svg>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}:host.small{width:20px;height:20px}:host.medium{width:24px;height:24px}:host.large{width:32px;height:32px}svg{width:100%;height:100%}.track{fill:var(--border-light)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MiniPieComponent, decorators: [{
+MiniPieComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MiniPieComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MiniPieComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MiniPieComponent, selector: "riv-mini-pie", inputs: { value: "value", size: "size", colorToken: "colorToken" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-10 -10 20 20\">\n  <circle cx=\"0\" cy=\"0\" r=\"8\" class=\"track\" />\n  <circle *ngIf=\"isFull\" cx=\"0\" cy=\"0\" r=\"8\" [attr.fill]=\"fillColor\" />\n  <path\n    *ngIf=\"clampedValue > 0 && !isFull\"\n    [attr.d]=\"wedgePath\"\n    [attr.fill]=\"fillColor\"\n  />\n</svg>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}:host.small{width:20px;height:20px}:host.medium{width:24px;height:24px}:host.large{width:32px;height:32px}svg{width:100%;height:100%}.track{fill:var(--border-light)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MiniPieComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-mini-pie', changeDetection: ChangeDetectionStrategy.OnPush, template: "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"-10 -10 20 20\">\n  <circle cx=\"0\" cy=\"0\" r=\"8\" class=\"track\" />\n  <circle *ngIf=\"isFull\" cx=\"0\" cy=\"0\" r=\"8\" [attr.fill]=\"fillColor\" />\n  <path\n    *ngIf=\"clampedValue > 0 && !isFull\"\n    [attr.d]=\"wedgePath\"\n    [attr.fill]=\"fillColor\"\n  />\n</svg>\n", styles: [":host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}:host.small{width:20px;height:20px}:host.medium{width:24px;height:24px}:host.large{width:32px;height:32px}svg{width:100%;height:100%}.track{fill:var(--border-light)}\n"] }]
         }], propDecorators: { value: [{
@@ -14006,9 +14027,9 @@ class MetricComponent {
         return `var(${this.valueColorToken})`;
     }
 }
-MetricComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MetricComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-MetricComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: MetricComponent, selector: "riv-metric", inputs: { label: "label", value: "value", size: "size", compact: "compact", card: "card", help: "help", align: "align", valueColorToken: "valueColorToken" }, host: { properties: { "class.compact": "this.compact", "class.card": "this.card" } }, ngImport: i0, template: "<div class=\"label\" [ngClass]=\"align\">\n  {{ label }}\n  <span *ngIf=\"help\"\n    ><riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"12\"></riv-icon>\n  </span>\n</div>\n<div class=\"content\" [ngClass]=\"align\">\n  <div class=\"value\" [ngClass]=\"size\" [style.color]=\"valueColor\">\n    {{ value }}\n  </div>\n  <ng-content></ng-content>\n</div>\n", styles: [":host.card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-0);padding:var(--size-xlarge);display:block}:host.compact{padding:var(--size-large)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast);margin-bottom:var(--size-xsmall)}.label.left{text-align:left}.label.center{text-align:center}.label.right{text-align:right}.value.xsmall{font:var(--stat-xsmall)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}.content.left{justify-content:flex-start}.content.center{justify-content:center}.content.right{justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: MetricComponent, decorators: [{
+MetricComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetricComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+MetricComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: MetricComponent, selector: "riv-metric", inputs: { label: "label", value: "value", size: "size", compact: "compact", card: "card", help: "help", align: "align", valueColorToken: "valueColorToken" }, host: { properties: { "class.compact": "this.compact", "class.card": "this.card" } }, ngImport: i0, template: "<div class=\"label\" [ngClass]=\"align\">\n  {{ label }}\n  <span *ngIf=\"help\"\n    ><riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"12\"></riv-icon>\n  </span>\n</div>\n<div class=\"content\" [ngClass]=\"align\">\n  <div class=\"value\" [ngClass]=\"size\" [style.color]=\"valueColor\">\n    {{ value }}\n  </div>\n  <ng-content></ng-content>\n</div>\n", styles: [":host.card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-0);padding:var(--size-xlarge);display:block}:host.compact{padding:var(--size-large)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast);margin-bottom:var(--size-xsmall)}.label.left{text-align:left}.label.center{text-align:center}.label.right{text-align:right}.value.xsmall{font:var(--stat-xsmall)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}.content.left{justify-content:flex-start}.content.center{justify-content:center}.content.right{justify-content:flex-end}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: MetricComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-metric', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"label\" [ngClass]=\"align\">\n  {{ label }}\n  <span *ngIf=\"help\"\n    ><riv-icon [rivTooltip]=\"help\" [name]=\"'Info'\" [size]=\"12\"></riv-icon>\n  </span>\n</div>\n<div class=\"content\" [ngClass]=\"align\">\n  <div class=\"value\" [ngClass]=\"size\" [style.color]=\"valueColor\">\n    {{ value }}\n  </div>\n  <ng-content></ng-content>\n</div>\n", styles: [":host.card{border-radius:var(--size-xsmall);border:var(--border-width) solid var(--border-light-blend);background-color:var(--surface-light-0);padding:var(--size-xlarge);display:block}:host.compact{padding:var(--size-large)}.label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast);margin-bottom:var(--size-xsmall)}.label.left{text-align:left}.label.center{text-align:center}.label.right{text-align:right}.value.xsmall{font:var(--stat-xsmall)}.value.small{font:var(--stat-small)}.value.medium{font:var(--stat-medium)}.value.large{font:var(--stat-large)}.content{display:flex;align-items:flex-end;gap:var(--size-small)}.content.left{justify-content:flex-start}.content.center{justify-content:center}.content.right{justify-content:flex-end}\n"] }]
         }], propDecorators: { label: [{
@@ -14058,9 +14079,9 @@ class TrendComponent {
         return 'trend ' + conditionalClass;
     }
 }
-TrendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TrendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-TrendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: TrendComponent, selector: "riv-trend", inputs: { label: "label", value: "value", successCondition: "successCondition" }, ngImport: i0, template: "<span [class]=\"getClasses()\">\n  <riv-icon\n    class=\"icon\"\n    [name]=\"\n      value === 0 ? 'ArrowRight' : value > 0 ? 'TrendingUp' : 'TrendingDown'\n    \"\n    [size]=\"16\"\n  ></riv-icon>\n  <span>{{ label }}</span>\n</span>\n", styles: [".success{color:var(--baja-blast-90)}.danger{color:var(--fyre-50)}.trend{display:flex;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-normal)}.icon{margin-right:var(--size-small)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: TrendComponent, decorators: [{
+TrendComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TrendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TrendComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TrendComponent, selector: "riv-trend", inputs: { label: "label", value: "value", successCondition: "successCondition" }, ngImport: i0, template: "<span [class]=\"getClasses()\">\n  <riv-icon\n    class=\"icon\"\n    [name]=\"\n      value === 0 ? 'ArrowRight' : value > 0 ? 'TrendingUp' : 'TrendingDown'\n    \"\n    [size]=\"16\"\n  ></riv-icon>\n  <span>{{ label }}</span>\n</span>\n", styles: [".success{color:var(--baja-blast-90)}.danger{color:var(--fyre-50)}.trend{display:flex;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-normal)}.icon{margin-right:var(--size-small)}\n"], dependencies: [{ kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TrendComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-trend', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span [class]=\"getClasses()\">\n  <riv-icon\n    class=\"icon\"\n    [name]=\"\n      value === 0 ? 'ArrowRight' : value > 0 ? 'TrendingUp' : 'TrendingDown'\n    \"\n    [size]=\"16\"\n  ></riv-icon>\n  <span>{{ label }}</span>\n</span>\n", styles: [".success{color:var(--baja-blast-90)}.danger{color:var(--fyre-50)}.trend{display:flex;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-1);font-weight:var(--font-weight-normal)}.icon{margin-right:var(--size-small)}\n"] }]
         }], propDecorators: { label: [{
@@ -14136,9 +14157,9 @@ class FunnelChartComponent {
             .y0(this.graphHeight)(points);
     }
 }
-FunnelChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FunnelChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FunnelChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: FunnelChartComponent, selector: "riv-funnel", inputs: { data: "data", isPreAggregated: "isPreAggregated", graphHeight: "graphHeight", graphWidth: "graphWidth", showConverted: "showConverted" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"funnel-chart\">\n  <div class=\"header\">\n    <!-- allocate space for the header -->\n    <riv-metric\n      class=\"metric-placeholder\"\n      label=\"placeholder\"\n      value=\"0\"\n    ></riv-metric>\n    <!-- center each metric over vertical lines -->\n    <riv-metric\n      *ngFor=\"let value of aggregatedValues; let ix = index\"\n      class=\"metric\"\n      [label]=\"data[ix]?.label ?? ''\"\n      [value]=\"value.toString()\"\n      [style.left.px]=\"ix * sectionWidth + ix * gapWidth\"\n    ></riv-metric>\n  </div>\n\n  <div class=\"chart\">\n    <ng-container *ngFor=\"let step of percentageSteps; let ix = index\">\n      <div class=\"vertical-line\"></div>\n\n      <div>\n        <div *ngIf=\"showConverted && !allZeroes\" class=\"step-info\">\n          {{ step }}% converted\n          <riv-trend\n            *ngIf=\"trends[ix] !== null\"\n            [label]=\"trends[ix]! + '%'\"\n            [value]=\"trends[ix]!\"\n          ></riv-trend>\n        </div>\n\n        <!-- allocate space for the graph -->\n        <div\n          class=\"graph-placeholder\"\n          [style.width.px]=\"sectionWidth\"\n          [style.height.px]=\"graphHeight\"\n        ></div>\n      </div>\n    </ng-container>\n\n    <div class=\"vertical-line\"></div>\n\n    <svg\n      *ngIf=\"path\"\n      class=\"graph\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      [attr.width]=\"graphWidth\"\n      [attr.height]=\"graphHeight\"\n    >\n      <linearGradient id=\"gradient\">\n        <stop stop-color=\"var(--purp-30)\" offset=\"0%\" />\n        <stop stop-color=\"var(--brand)\" offset=\"100%\" />\n      </linearGradient>\n      <path [attr.d]=\"path\" fill=\"url(#gradient)\"></path>\n    </svg>\n  </div>\n</div>\n", styles: [".funnel-chart{width:-moz-fit-content;width:fit-content}.header{position:relative;margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.metric-placeholder{visibility:hidden}.metric{position:absolute;transform:translate(-50%);top:0;display:flex;flex-direction:column;align-items:center;gap:var(--size-xsmall);white-space:nowrap}.chart{position:relative;display:flex;justify-content:space-between;margin-top:var(--size-medium);margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.step-info{display:flex;gap:var(--size-large);border:var(--border-width) solid var(--border-light-blend);border-radius:var(--size-xsmall);padding:var(--size-medium);width:-moz-fit-content;width:fit-content;align-items:center;color:var(--type-light-low-contrast);margin:var(--size-xsmall)}.vertical-line{width:var(--size-xxsmall);background:var(--surface-light-4);z-index:1}.graph-placeholder{margin-bottom:var(--size-xlarge)}.graph{position:absolute;bottom:var(--size-xlarge)}\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: MetricComponent, selector: "riv-metric", inputs: ["label", "value", "size", "compact", "card", "help", "align", "valueColorToken"] }, { kind: "component", type: TrendComponent, selector: "riv-trend", inputs: ["label", "value", "successCondition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FunnelChartComponent, decorators: [{
+FunnelChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FunnelChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+FunnelChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: FunnelChartComponent, selector: "riv-funnel", inputs: { data: "data", isPreAggregated: "isPreAggregated", graphHeight: "graphHeight", graphWidth: "graphWidth", showConverted: "showConverted" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"funnel-chart\">\n  <div class=\"header\">\n    <!-- allocate space for the header -->\n    <riv-metric\n      class=\"metric-placeholder\"\n      label=\"placeholder\"\n      value=\"0\"\n    ></riv-metric>\n    <!-- center each metric over vertical lines -->\n    <riv-metric\n      *ngFor=\"let value of aggregatedValues; let ix = index\"\n      class=\"metric\"\n      [label]=\"data[ix]?.label ?? ''\"\n      [value]=\"value.toString()\"\n      [style.left.px]=\"ix * sectionWidth + ix * gapWidth\"\n    ></riv-metric>\n  </div>\n\n  <div class=\"chart\">\n    <ng-container *ngFor=\"let step of percentageSteps; let ix = index\">\n      <div class=\"vertical-line\"></div>\n\n      <div>\n        <div *ngIf=\"showConverted && !allZeroes\" class=\"step-info\">\n          {{ step }}% converted\n          <riv-trend\n            *ngIf=\"trends[ix] !== null\"\n            [label]=\"trends[ix]! + '%'\"\n            [value]=\"trends[ix]!\"\n          ></riv-trend>\n        </div>\n\n        <!-- allocate space for the graph -->\n        <div\n          class=\"graph-placeholder\"\n          [style.width.px]=\"sectionWidth\"\n          [style.height.px]=\"graphHeight\"\n        ></div>\n      </div>\n    </ng-container>\n\n    <div class=\"vertical-line\"></div>\n\n    <svg\n      *ngIf=\"path\"\n      class=\"graph\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      [attr.width]=\"graphWidth\"\n      [attr.height]=\"graphHeight\"\n    >\n      <linearGradient id=\"gradient\">\n        <stop stop-color=\"var(--purp-30)\" offset=\"0%\" />\n        <stop stop-color=\"var(--brand)\" offset=\"100%\" />\n      </linearGradient>\n      <path [attr.d]=\"path\" fill=\"url(#gradient)\"></path>\n    </svg>\n  </div>\n</div>\n", styles: [".funnel-chart{width:-moz-fit-content;width:fit-content}.header{position:relative;margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.metric-placeholder{visibility:hidden}.metric{position:absolute;transform:translate(-50%);top:0;display:flex;flex-direction:column;align-items:center;gap:var(--size-xsmall);white-space:nowrap}.chart{position:relative;display:flex;justify-content:space-between;margin-top:var(--size-medium);margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.step-info{display:flex;gap:var(--size-large);border:var(--border-width) solid var(--border-light-blend);border-radius:var(--size-xsmall);padding:var(--size-medium);width:-moz-fit-content;width:fit-content;align-items:center;color:var(--type-light-low-contrast);margin:var(--size-xsmall)}.vertical-line{width:var(--size-xxsmall);background:var(--surface-light-4);z-index:1}.graph-placeholder{margin-bottom:var(--size-xlarge)}.graph{position:absolute;bottom:var(--size-xlarge)}\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: MetricComponent, selector: "riv-metric", inputs: ["label", "value", "size", "compact", "card", "help", "align", "valueColorToken"] }, { kind: "component", type: TrendComponent, selector: "riv-trend", inputs: ["label", "value", "successCondition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: FunnelChartComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-funnel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"funnel-chart\">\n  <div class=\"header\">\n    <!-- allocate space for the header -->\n    <riv-metric\n      class=\"metric-placeholder\"\n      label=\"placeholder\"\n      value=\"0\"\n    ></riv-metric>\n    <!-- center each metric over vertical lines -->\n    <riv-metric\n      *ngFor=\"let value of aggregatedValues; let ix = index\"\n      class=\"metric\"\n      [label]=\"data[ix]?.label ?? ''\"\n      [value]=\"value.toString()\"\n      [style.left.px]=\"ix * sectionWidth + ix * gapWidth\"\n    ></riv-metric>\n  </div>\n\n  <div class=\"chart\">\n    <ng-container *ngFor=\"let step of percentageSteps; let ix = index\">\n      <div class=\"vertical-line\"></div>\n\n      <div>\n        <div *ngIf=\"showConverted && !allZeroes\" class=\"step-info\">\n          {{ step }}% converted\n          <riv-trend\n            *ngIf=\"trends[ix] !== null\"\n            [label]=\"trends[ix]! + '%'\"\n            [value]=\"trends[ix]!\"\n          ></riv-trend>\n        </div>\n\n        <!-- allocate space for the graph -->\n        <div\n          class=\"graph-placeholder\"\n          [style.width.px]=\"sectionWidth\"\n          [style.height.px]=\"graphHeight\"\n        ></div>\n      </div>\n    </ng-container>\n\n    <div class=\"vertical-line\"></div>\n\n    <svg\n      *ngIf=\"path\"\n      class=\"graph\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n      [attr.width]=\"graphWidth\"\n      [attr.height]=\"graphHeight\"\n    >\n      <linearGradient id=\"gradient\">\n        <stop stop-color=\"var(--purp-30)\" offset=\"0%\" />\n        <stop stop-color=\"var(--brand)\" offset=\"100%\" />\n      </linearGradient>\n      <path [attr.d]=\"path\" fill=\"url(#gradient)\"></path>\n    </svg>\n  </div>\n</div>\n", styles: [".funnel-chart{width:-moz-fit-content;width:fit-content}.header{position:relative;margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.metric-placeholder{visibility:hidden}.metric{position:absolute;transform:translate(-50%);top:0;display:flex;flex-direction:column;align-items:center;gap:var(--size-xsmall);white-space:nowrap}.chart{position:relative;display:flex;justify-content:space-between;margin-top:var(--size-medium);margin-left:var(--size-xlarge);margin-right:var(--size-xlarge)}.step-info{display:flex;gap:var(--size-large);border:var(--border-width) solid var(--border-light-blend);border-radius:var(--size-xsmall);padding:var(--size-medium);width:-moz-fit-content;width:fit-content;align-items:center;color:var(--type-light-low-contrast);margin:var(--size-xsmall)}.vertical-line{width:var(--size-xxsmall);background:var(--surface-light-4);z-index:1}.graph-placeholder{margin-bottom:var(--size-xlarge)}.graph{position:absolute;bottom:var(--size-xlarge)}\n"] }]
         }], propDecorators: { data: [{
@@ -14164,9 +14185,9 @@ class ProgressComponent {
         return 100 * Math.min(this.value / this.max, 1) + '%';
     }
 }
-ProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ProgressComponent, selector: "riv-progress", inputs: { value: "value", max: "max" }, ngImport: i0, template: "<div class=\"track\">\n  <span class=\"value\" [style.width]=\"getWidth()\"></span>\n</div>\n", styles: [":host{--host-height: calc(var(--base-grid-size) * 4);--host-padding: var(--size-xxsmall);display:flex;border:var(--border-width) solid var(--border-light);padding:var(--host-padding);height:var(--host-height);border-radius:var(--host-height)}.track{--track-height: calc(var(--host-height) - var(--host-padding) * 2);border-radius:var(--track-height);align-self:stretch;flex-grow:1;background-color:var(--gray-30);display:flex}.value{border-radius:var(--track-height);align-self:stretch;justify-self:flex-start;background:linear-gradient(270deg,#5f10dd 0%,rgba(95,16,221,.53) 100%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ProgressComponent, decorators: [{
+ProgressComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ProgressComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ProgressComponent, selector: "riv-progress", inputs: { value: "value", max: "max" }, ngImport: i0, template: "<div class=\"track\">\n  <span class=\"value\" [style.width]=\"getWidth()\"></span>\n</div>\n", styles: [":host{--host-height: calc(var(--base-grid-size) * 4);--host-padding: var(--size-xxsmall);display:flex;border:var(--border-width) solid var(--border-light);padding:var(--host-padding);height:var(--host-height);border-radius:var(--host-height)}.track{--track-height: calc(var(--host-height) - var(--host-padding) * 2);border-radius:var(--track-height);align-self:stretch;flex-grow:1;background-color:var(--gray-30);display:flex}.value{border-radius:var(--track-height);align-self:stretch;justify-self:flex-start;background:linear-gradient(270deg,#5f10dd 0%,rgba(95,16,221,.53) 100%)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ProgressComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-progress', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"track\">\n  <span class=\"value\" [style.width]=\"getWidth()\"></span>\n</div>\n", styles: [":host{--host-height: calc(var(--base-grid-size) * 4);--host-padding: var(--size-xxsmall);display:flex;border:var(--border-width) solid var(--border-light);padding:var(--host-padding);height:var(--host-height);border-radius:var(--host-height)}.track{--track-height: calc(var(--host-height) - var(--host-padding) * 2);border-radius:var(--track-height);align-self:stretch;flex-grow:1;background-color:var(--gray-30);display:flex}.value{border-radius:var(--track-height);align-self:stretch;justify-self:flex-start;background:linear-gradient(270deg,#5f10dd 0%,rgba(95,16,221,.53) 100%)}\n"] }]
         }], propDecorators: { value: [{
@@ -14592,9 +14613,9 @@ class StackedColumnComponent {
             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", valueFormatter: "valueFormatter", interval: "interval" }, outputs: { intervalChanged: "intervalChanged", stackClicked: "stackClicked" }, queries: [{ propertyName: "calloutHeaderTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "controls", first: true, predicate: ["controls"], descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"(empty$ | async) === false; 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    <ng-container *ngIf=\"getRange$ | async; let getRange\">\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        (click)=\"\n          stackClicked.emit(getRange(rect.dateValue)); hoveredBand$.next(null)\n        \"\n      ></rect>\n    </ng-container>\n  </svg>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"callout.anchor\"\n    [theme]=\"'light'\"\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      <ng-container\n        [ngTemplateOutlet]=\"calloutHeaderTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: callout }\"\n      ></ng-container>\n      <div class=\"callout-stack\" *ngFor=\"let stack of callout.content\">\n        <div *ngIf=\"stack.title; let title\" class=\"callout-row\">\n          <span class=\"series-label\">{{ title }}</span>\n          <span>{{ stack.total }}</span>\n        </div>\n        <div *ngFor=\"let series of stack.series\" class=\"callout-row\">\n          <span class=\"series-label\">\n            <riv-legend-item\n              [colorToken]=\"series.colorToken\"\n              [style]=\"series.style\"\n            ></riv-legend-item>\n            <span>{{ series.label }}</span>\n          </span>\n          <span>{{ series.formattedValue }}</span>\n        </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-simple-select\n    [optionGroups]=\"intervalOptions$ | async | rivOptionGroup\"\n    [orderBy]=\"'source'\"\n    [selectedOption]=\"selectedIntervalOption$ | async\"\n    (selectedOptionChange)=\"setIntervalOption($event)\"\n  ></riv-simple-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-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-stack{display:flex;flex-direction:column;padding:var(--size-medium) 0;gap:var(--size-medium)}.callout-stack:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.callout-row{display:flex;gap:var(--size-large);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}\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: LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { 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: [{
+StackedColumnComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StackedColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StackedColumnComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StackedColumnComponent, selector: "riv-stacked-column", inputs: { input: "input", valueFormatter: "valueFormatter", interval: "interval" }, outputs: { intervalChanged: "intervalChanged", stackClicked: "stackClicked" }, queries: [{ propertyName: "calloutHeaderTemplate", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "controls", first: true, predicate: ["controls"], descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"(empty$ | async) === false; 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    <ng-container *ngIf=\"getRange$ | async; let getRange\">\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        (click)=\"\n          stackClicked.emit(getRange(rect.dateValue)); hoveredBand$.next(null)\n        \"\n      ></rect>\n    </ng-container>\n  </svg>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"callout.anchor\"\n    [theme]=\"'light'\"\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      <ng-container\n        [ngTemplateOutlet]=\"calloutHeaderTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: callout }\"\n      ></ng-container>\n      <div class=\"callout-stack\" *ngFor=\"let stack of callout.content\">\n        <div *ngIf=\"stack.title; let title\" class=\"callout-row\">\n          <span class=\"series-label\">{{ title }}</span>\n          <span>{{ stack.total }}</span>\n        </div>\n        <div *ngFor=\"let series of stack.series\" class=\"callout-row\">\n          <span class=\"series-label\">\n            <riv-legend-item\n              [colorToken]=\"series.colorToken\"\n              [style]=\"series.style\"\n            ></riv-legend-item>\n            <span>{{ series.label }}</span>\n          </span>\n          <span>{{ series.formattedValue }}</span>\n        </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-simple-select\n    [optionGroups]=\"intervalOptions$ | async | rivOptionGroup\"\n    [orderBy]=\"'source'\"\n    [selectedOption]=\"selectedIntervalOption$ | async\"\n    (selectedOptionChange)=\"setIntervalOption($event)\"\n  ></riv-simple-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-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-stack{display:flex;flex-direction:column;padding:var(--size-medium) 0;gap:var(--size-medium)}.callout-stack:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.callout-row{display:flex;gap:var(--size-large);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}\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: LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StackedColumnComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-stacked-column', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"(empty$ | async) === false; 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    <ng-container *ngIf=\"getRange$ | async; let getRange\">\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        (click)=\"\n          stackClicked.emit(getRange(rect.dateValue)); hoveredBand$.next(null)\n        \"\n      ></rect>\n    </ng-container>\n  </svg>\n</div>\n\n<ng-container *ngIf=\"callout$ | async; let callout\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"callout.anchor\"\n    [theme]=\"'light'\"\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      <ng-container\n        [ngTemplateOutlet]=\"calloutHeaderTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: callout }\"\n      ></ng-container>\n      <div class=\"callout-stack\" *ngFor=\"let stack of callout.content\">\n        <div *ngIf=\"stack.title; let title\" class=\"callout-row\">\n          <span class=\"series-label\">{{ title }}</span>\n          <span>{{ stack.total }}</span>\n        </div>\n        <div *ngFor=\"let series of stack.series\" class=\"callout-row\">\n          <span class=\"series-label\">\n            <riv-legend-item\n              [colorToken]=\"series.colorToken\"\n              [style]=\"series.style\"\n            ></riv-legend-item>\n            <span>{{ series.label }}</span>\n          </span>\n          <span>{{ series.formattedValue }}</span>\n        </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-simple-select\n    [optionGroups]=\"intervalOptions$ | async | rivOptionGroup\"\n    [orderBy]=\"'source'\"\n    [selectedOption]=\"selectedIntervalOption$ | async\"\n    (selectedOptionChange)=\"setIntervalOption($event)\"\n  ></riv-simple-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-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-stack{display:flex;flex-direction:column;padding:var(--size-medium) 0;gap:var(--size-medium)}.callout-stack:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.callout-row{display:flex;gap:var(--size-large);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}\n"] }]
         }], propDecorators: { input: [{
@@ -14928,9 +14949,9 @@ 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", valueFormatter: "valueFormatter", zeroStateMessage: "zeroStateMessage" }, outputs: { stackClicked: "stackClicked" }, queries: [{ propertyName: "calloutHeaderTemplate", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"(empty$ | async) === false; 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      (click)=\"\n        stackClicked.emit({ stackIndex: rect.stackIndex });\n        hoveredBand$.next(null)\n      \"\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-overlay\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    [theme]=\"'light'\"\n  >\n    <div class=\"callout-content\">\n      <ng-container\n        [ngTemplateOutlet]=\"calloutHeaderTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: callout }\"\n      ></ng-container>\n      <div *ngFor=\"let metric of callout.metrics\" class=\"callout-row\">\n        <span class=\"series-label\">\n          <riv-legend-item [colorToken]=\"metric.colorToken\"></riv-legend-item>\n          <span>{{ metric.label }}</span>\n        </span>\n        <span>{{ metric.value }}</span>\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-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{padding:var(--size-medium) 0;display:flex;gap:var(--size-large);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}\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: LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { 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", "title", "icon"] }, { 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: [{
+StackedRowComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StackedRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+StackedRowComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: StackedRowComponent, selector: "riv-stacked-row", inputs: { input: "input", valueFormatter: "valueFormatter", zeroStateMessage: "zeroStateMessage" }, outputs: { stackClicked: "stackClicked" }, queries: [{ propertyName: "calloutHeaderTemplate", first: true, predicate: TemplateRef, descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"(empty$ | async) === false; 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      (click)=\"\n        stackClicked.emit({ stackIndex: rect.stackIndex });\n        hoveredBand$.next(null)\n      \"\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-overlay\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    [theme]=\"'light'\"\n  >\n    <div class=\"callout-content\">\n      <ng-container\n        [ngTemplateOutlet]=\"calloutHeaderTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: callout }\"\n      ></ng-container>\n      <div *ngFor=\"let metric of callout.metrics\" class=\"callout-row\">\n        <span class=\"series-label\">\n          <riv-legend-item [colorToken]=\"metric.colorToken\"></riv-legend-item>\n          <span>{{ metric.label }}</span>\n        </span>\n        <span>{{ metric.value }}</span>\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-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{padding:var(--size-medium) 0;display:flex;gap:var(--size-large);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}\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: LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { 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", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: StackedRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-stacked-row', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"(empty$ | async) === false; 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      (click)=\"\n        stackClicked.emit({ stackIndex: rect.stackIndex });\n        hoveredBand$.next(null)\n      \"\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-overlay\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    [theme]=\"'light'\"\n  >\n    <div class=\"callout-content\">\n      <ng-container\n        [ngTemplateOutlet]=\"calloutHeaderTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: callout }\"\n      ></ng-container>\n      <div *ngFor=\"let metric of callout.metrics\" class=\"callout-row\">\n        <span class=\"series-label\">\n          <riv-legend-item [colorToken]=\"metric.colorToken\"></riv-legend-item>\n          <span>{{ metric.label }}</span>\n        </span>\n        <span>{{ metric.value }}</span>\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-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{padding:var(--size-medium) 0;display:flex;gap:var(--size-large);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}\n"] }]
         }], propDecorators: { input: [{
@@ -15293,9 +15314,9 @@ 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", zeroStateMessage: "zeroStateMessage", interval: "interval", allowLegendToggle: "allowLegendToggle", groupedTooltips: "groupedTooltips" }, outputs: { intervalChanged: "intervalChanged", markerClicked: "markerClicked" }, viewQueries: [{ propertyName: "controls", first: true, predicate: ["controls"], descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"(empty$ | async) === false; 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      <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]=\"HEIGHT - BOTTOM_OFFSET\"\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]=\"HEIGHT - BOTTOM_OFFSET\"\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]=\"width\"\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\" let-index=\"index\" let-y=\"y\">\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 *ngIf=\"getRange$ | async; let getRange\">\n        <ng-container *ngFor=\"let marker of series.markers\">\n          <circle\n            *ngIf=\"series.visibility !== 'hidden'\"\n            class=\"data marker\"\n            [class.focused]=\"\n              (hoveredMarker$ | async)?.marker?.x === marker.x &&\n              (groupedTooltips ||\n                ((hoveredMarker$ | async)?.seriesIndex === index &&\n                  (hoveredMarker$ | async)?.y === y))\n            \"\n            [class.blurred]=\"\n              (hoveredMarker$ | async) !== null &&\n              ((hoveredMarker$ | async)?.marker?.x !== marker.x ||\n                ((hoveredMarker$ | async)?.marker?.x === marker.x &&\n                  !groupedTooltips &&\n                  ((hoveredMarker$ | async)?.seriesIndex !== index ||\n                    (hoveredMarker$ | async)?.y !== y)))\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)=\"\n              hoveredMarker$.next({\n                event: $event,\n                marker: marker,\n                seriesIndex: index,\n                y: y\n              })\n            \"\n            (mouseleave)=\"hoveredMarker$.next(null)\"\n            (click)=\"\n              markerClicked.emit(\n                getMarkerClicked(getRange(marker.date), index, y)\n              );\n              hoveredMarker$.next(null)\n            \"\n          ></circle>\n        </ng-container>\n      </ng-container>\n    </ng-template>\n    <g *ngFor=\"let series of d.y1.series; let i = index\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          seriesTpl;\n          context: { series: series, index: i, y: 'y1' }\n        \"\n      ></ng-container>\n    </g>\n    <g *ngFor=\"let series of d.y2?.series; let i = index\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          seriesTpl;\n          context: { series: series, index: i, y: 'y2' }\n        \"\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-overlay\n    [anchor]=\"callout.anchor\"\n    [isModal]=\"false\"\n    [preferredPosition]=\"'center-right'\"\n    [theme]=\"'light'\"\n  >\n    <div class=\"callout-content\">\n      <div class=\"callout-row\" *ngFor=\"let metric of callout.metrics\">\n        <span class=\"series-label\">\n          <riv-legend-item [colorToken]=\"metric.colorToken\"></riv-legend-item>\n          <span>{{ metric.label }}</span>\n        </span>\n        <span>{{ metric.value }}</span>\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-simple-select\n    [optionGroups]=\"intervalOptions$ | async | rivOptionGroup\"\n    [orderBy]=\"'source'\"\n    [selectedOption]=\"selectedIntervalOption$ | async\"\n    (selectedOptionChange)=\"setIntervalOption($event)\"\n  ></riv-simple-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-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-row:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}\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: LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { 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: [{
+TimeSeriesComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: TimeSeriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+TimeSeriesComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: TimeSeriesComponent, selector: "riv-time-series", inputs: { input: "input", zeroStateMessage: "zeroStateMessage", interval: "interval", allowLegendToggle: "allowLegendToggle", groupedTooltips: "groupedTooltips" }, outputs: { intervalChanged: "intervalChanged", markerClicked: "markerClicked" }, viewQueries: [{ propertyName: "controls", first: true, predicate: ["controls"], descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"(empty$ | async) === false; 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      <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]=\"HEIGHT - BOTTOM_OFFSET\"\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]=\"HEIGHT - BOTTOM_OFFSET\"\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]=\"width\"\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\" let-index=\"index\" let-y=\"y\">\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 *ngIf=\"getRange$ | async; let getRange\">\n        <ng-container *ngFor=\"let marker of series.markers\">\n          <circle\n            *ngIf=\"series.visibility !== 'hidden'\"\n            class=\"data marker\"\n            [class.focused]=\"\n              (hoveredMarker$ | async)?.marker?.x === marker.x &&\n              (groupedTooltips ||\n                ((hoveredMarker$ | async)?.seriesIndex === index &&\n                  (hoveredMarker$ | async)?.y === y))\n            \"\n            [class.blurred]=\"\n              (hoveredMarker$ | async) !== null &&\n              ((hoveredMarker$ | async)?.marker?.x !== marker.x ||\n                ((hoveredMarker$ | async)?.marker?.x === marker.x &&\n                  !groupedTooltips &&\n                  ((hoveredMarker$ | async)?.seriesIndex !== index ||\n                    (hoveredMarker$ | async)?.y !== y)))\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)=\"\n              hoveredMarker$.next({\n                event: $event,\n                marker: marker,\n                seriesIndex: index,\n                y: y\n              })\n            \"\n            (mouseleave)=\"hoveredMarker$.next(null)\"\n            (click)=\"\n              markerClicked.emit(\n                getMarkerClicked(getRange(marker.date), index, y)\n              );\n              hoveredMarker$.next(null)\n            \"\n          ></circle>\n        </ng-container>\n      </ng-container>\n    </ng-template>\n    <g *ngFor=\"let series of d.y1.series; let i = index\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          seriesTpl;\n          context: { series: series, index: i, y: 'y1' }\n        \"\n      ></ng-container>\n    </g>\n    <g *ngFor=\"let series of d.y2?.series; let i = index\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          seriesTpl;\n          context: { series: series, index: i, y: 'y2' }\n        \"\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-overlay\n    [anchor]=\"callout.anchor\"\n    [isModal]=\"false\"\n    [preferredPosition]=\"'center-right'\"\n    [theme]=\"'light'\"\n  >\n    <div class=\"callout-content\">\n      <div class=\"callout-row\" *ngFor=\"let metric of callout.metrics\">\n        <span class=\"series-label\">\n          <riv-legend-item [colorToken]=\"metric.colorToken\"></riv-legend-item>\n          <span>{{ metric.label }}</span>\n        </span>\n        <span>{{ metric.value }}</span>\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-simple-select\n    [optionGroups]=\"intervalOptions$ | async | rivOptionGroup\"\n    [orderBy]=\"'source'\"\n    [selectedOption]=\"selectedIntervalOption$ | async\"\n    (selectedOptionChange)=\"setIntervalOption($event)\"\n  ></riv-simple-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-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-row:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}\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: LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SimpleSelectComponent, selector: "riv-simple-select", inputs: ["optionGroups", "selectedOption", "size", "disabled", "locked", "filterabilityOptions", "orderBy", "placeholder", "maxHeight", "maxWidth", "minHeight", "minWidth", "dividers", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { 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: "15.2.10", ngImport: i0, type: TimeSeriesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-time-series', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  *ngIf=\"(empty$ | async) === false; 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      <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]=\"HEIGHT - BOTTOM_OFFSET\"\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]=\"HEIGHT - BOTTOM_OFFSET\"\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]=\"width\"\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\" let-index=\"index\" let-y=\"y\">\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 *ngIf=\"getRange$ | async; let getRange\">\n        <ng-container *ngFor=\"let marker of series.markers\">\n          <circle\n            *ngIf=\"series.visibility !== 'hidden'\"\n            class=\"data marker\"\n            [class.focused]=\"\n              (hoveredMarker$ | async)?.marker?.x === marker.x &&\n              (groupedTooltips ||\n                ((hoveredMarker$ | async)?.seriesIndex === index &&\n                  (hoveredMarker$ | async)?.y === y))\n            \"\n            [class.blurred]=\"\n              (hoveredMarker$ | async) !== null &&\n              ((hoveredMarker$ | async)?.marker?.x !== marker.x ||\n                ((hoveredMarker$ | async)?.marker?.x === marker.x &&\n                  !groupedTooltips &&\n                  ((hoveredMarker$ | async)?.seriesIndex !== index ||\n                    (hoveredMarker$ | async)?.y !== y)))\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)=\"\n              hoveredMarker$.next({\n                event: $event,\n                marker: marker,\n                seriesIndex: index,\n                y: y\n              })\n            \"\n            (mouseleave)=\"hoveredMarker$.next(null)\"\n            (click)=\"\n              markerClicked.emit(\n                getMarkerClicked(getRange(marker.date), index, y)\n              );\n              hoveredMarker$.next(null)\n            \"\n          ></circle>\n        </ng-container>\n      </ng-container>\n    </ng-template>\n    <g *ngFor=\"let series of d.y1.series; let i = index\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          seriesTpl;\n          context: { series: series, index: i, y: 'y1' }\n        \"\n      ></ng-container>\n    </g>\n    <g *ngFor=\"let series of d.y2?.series; let i = index\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          seriesTpl;\n          context: { series: series, index: i, y: 'y2' }\n        \"\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-overlay\n    [anchor]=\"callout.anchor\"\n    [isModal]=\"false\"\n    [preferredPosition]=\"'center-right'\"\n    [theme]=\"'light'\"\n  >\n    <div class=\"callout-content\">\n      <div class=\"callout-row\" *ngFor=\"let metric of callout.metrics\">\n        <span class=\"series-label\">\n          <riv-legend-item [colorToken]=\"metric.colorToken\"></riv-legend-item>\n          <span>{{ metric.label }}</span>\n        </span>\n        <span>{{ metric.value }}</span>\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-simple-select\n    [optionGroups]=\"intervalOptions$ | async | rivOptionGroup\"\n    [orderBy]=\"'source'\"\n    [selectedOption]=\"selectedIntervalOption$ | async\"\n    (selectedOptionChange)=\"setIntervalOption($event)\"\n  ></riv-simple-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-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-row:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}\n"] }]
         }], propDecorators: { input: [{
@@ -15319,8 +15340,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 class RivModule {
 }
-RivModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RivModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: RivModule, declarations: [AllViewsModalComponent,
+RivModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RivModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RivModule, declarations: [AllViewsModalComponent,
         AlphabeticFieldComponent,
         AutoFocusDirective,
         BadgeComponent,
@@ -15513,8 +15534,8 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         ViewsComponent,
         VisibilityDirective,
         ZeroStateComponent] });
-RivModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RivModule, imports: [CommonModule, RouterModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: RivModule, decorators: [{
+RivModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RivModule, imports: [CommonModule, RouterModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RivModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [