npm - @rivet-health/design-system - Versions diffs - 40.44.2 → 40.44.3 - Mend

@rivet-health/design-system 40.44.2 → 40.44.3

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 (121) hide show

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { ChangeDetectionStrategy, Component, Inject, Injectable, Pipe, Input, Directive, EventEmitter, Output, ViewChild, ViewContainerRef, HostListener, Self, HostBinding, Optional, ContentChild, ElementRef, ViewEncapsulation, ContentChildren, TemplateRef, NgModule } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Injectable, Inject, Pipe, Directive, Input, EventEmitter, Output, ViewChild, ViewContainerRef, HostListener, Self, HostBinding, Optional, ContentChild, ElementRef, ViewEncapsulation, ContentChildren, TemplateRef, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DOCUMENT, DatePipe as DatePipe$1, DecimalPipe, CurrencyPipe, PercentPipe, CommonModule } from '@angular/common';
 import { BehaviorSubject, Subject, merge, scan, startWith, connectable, map, ReplaySubject, distinctUntilChanged, skip, filter, combineLatest, shareReplay, skipUntil, mergeScan, from, take, share, fromEvent, tap, switchMap, takeUntil, concatWith, of } from 'rxjs';
@@ -7,7 +7,7 @@ import { timeYears, timeYear, timeMonths, timeMonth, timeDays, timeDay, timeSund
 import { timeFormat, utcFormat } from 'd3-time-format';
 import { defaultsDeep, sortBy, isNumber, flattenDeep, debounce, isEqual, uniqueId, cloneDeep, difference, partition, toInteger, sumBy, orderBy, range, union, sum, uniq } from 'lodash';
 import Fuse from 'fuse.js';
-import { query, animate, style, trigger, transition, group } from '@angular/animations';
+import { query, style, animate, trigger, transition, group } from '@angular/animations';
 import { map as map$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
@@ -24,10 +24,10 @@ import { index, union as union$1 } from 'd3-array';
  * readers, but that remove it from the visual flow.
  */
 class SrOnlyComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SrOnlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SrOnlyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: SrOnlyComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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"] }]
         }] });
@@ -65,10 +65,10 @@ class DownloadService {
             resolve();
         }, 0));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DownloadService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DownloadService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DownloadService, deps: [{ token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DownloadService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DownloadService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DownloadService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: Document, decorators: [{
@@ -108,10 +108,10 @@ class DatePipe {
         return (this.inner.transform(value, format ?? 'shortDate', timezone) ??
             NO_DATA_FALLBACK);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DatePipe, name: "rivDate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: DatePipe, name: "rivDate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DatePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rivDate' }]
         }] });
@@ -124,10 +124,10 @@ class DaysPipe {
         const ret = this.inner.transform(value, digitsInfo ?? '1.0-2');
         return ret ? ret + (value === 1 ? ' day' : ' days') : NO_DATA_FALLBACK;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DaysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DaysPipe, name: "rivDays" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DaysPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: DaysPipe, name: "rivDays" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DaysPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DaysPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rivDays' }]
         }] });
@@ -139,10 +139,10 @@ class DollarsPipe {
     transform(value, digitsInfo) {
         return (this.inner.transform(value, undefined, undefined, digitsInfo ?? '1.2-2') ?? NO_DATA_FALLBACK);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DollarsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: DollarsPipe, name: "rivDollars" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DollarsPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: DollarsPipe, name: "rivDollars" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DollarsPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DollarsPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rivDollars' }]
         }] });
@@ -154,10 +154,10 @@ class NumberPipe {
     transform(value, digitsInfo) {
         return (this.inner.transform(value, digitsInfo ?? '1.0-0') ?? NO_DATA_FALLBACK);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: NumberPipe, name: "rivNumber" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: NumberPipe, name: "rivNumber" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumberPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rivNumber' }]
         }] });
@@ -169,10 +169,10 @@ class PercentagePipe {
     transform(value, digitsInfo) {
         return (this.inner.transform(value, digitsInfo ?? '1.1-1') ?? NO_DATA_FALLBACK);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PercentagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: PercentagePipe, name: "rivPercentage" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PercentagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: PercentagePipe, name: "rivPercentage" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PercentagePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PercentagePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rivPercentage' }]
         }] });
@@ -228,10 +228,10 @@ class SentenceCasePipe {
     transform(value) {
         return toSentenceCase(value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SentenceCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SentenceCasePipe, name: "rivSentenceCase" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SentenceCasePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SentenceCasePipe, name: "rivSentenceCase" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SentenceCasePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SentenceCasePipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rivSentenceCase' }]
         }] });
@@ -248,10 +248,10 @@ class SmallCurrencyPipe {
         const magTransformInfo = getMagnitudeTransformInfo(num);
         return ((this.inner.transform(num / magTransformInfo.divisor, undefined, undefined, digitsInfo ?? magTransformInfo.digitInfoDefault) ?? NO_DATA_FALLBACK) + magTransformInfo.suffix);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SmallCurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SmallCurrencyPipe, name: "rivSmallCurrency" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SmallCurrencyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SmallCurrencyPipe, name: "rivSmallCurrency" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SmallCurrencyPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SmallCurrencyPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rivSmallCurrency' }]
         }] });
@@ -273,10 +273,10 @@ class SmallNumberPipe {
                 ? '1.0-0'
                 : magTransformInfo.digitInfoDefault)) ?? NO_DATA_FALLBACK) + magTransformInfo.suffix);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SmallNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: SmallNumberPipe, name: "rivSmallNumber" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SmallNumberPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: SmallNumberPipe, name: "rivSmallNumber" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SmallNumberPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SmallNumberPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rivSmallNumber' }]
         }] });
@@ -407,10 +407,10 @@ class LockScrollContextService {
     popContext() {
         return --this.stack;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LockScrollContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LockScrollContextService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LockScrollContextService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LockScrollContextService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LockScrollContextService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LockScrollContextService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -449,10 +449,10 @@ class LockScrollDirective {
         document.body.removeAttribute('style');
         document.documentElement.scrollTop = this.context.scrollPosition;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LockScrollDirective, deps: [{ token: LockScrollContextService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: LockScrollDirective, selector: "[rivLockScroll]", inputs: { lock: ["rivLockScroll", "lock"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LockScrollDirective, deps: [{ token: LockScrollContextService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: LockScrollDirective, selector: "[rivLockScroll]", inputs: { lock: ["rivLockScroll", "lock"] }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LockScrollDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LockScrollDirective, decorators: [{
             type: Directive,
             args: [{ selector: '[rivLockScroll]' }]
         }], ctorParameters: () => [{ type: LockScrollContextService }], propDecorators: { lock: [{
@@ -479,10 +479,10 @@ class SizeDirective {
     ngOnDestroy() {
         this.resizeObserver.unobserve(this.elementRef.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SizeDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SizeDirective, selector: "[rivClientSize]", outputs: { rivClientSize: "rivClientSize" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SizeDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: SizeDirective, selector: "[rivClientSize]", outputs: { rivClientSize: "rivClientSize" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SizeDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SizeDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rivClientSize]',
@@ -567,10 +567,10 @@ class CalloutComponent {
         this.resolvedPosition = calloutOrigin.position;
         this.cdr.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalloutComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CalloutComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: CalloutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { anchor: [{
@@ -639,10 +639,10 @@ class OverlayService {
             this.overlays.next(overlays);
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OverlayService, deps: [{ token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OverlayService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OverlayService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i0.NgZone }] });
@@ -659,10 +659,10 @@ class OverlayDirective {
         if (this.key)
             this.overlayService.remove(this.key);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayDirective, deps: [{ token: i0.TemplateRef }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: OverlayDirective, selector: "[riv-overlay]", ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OverlayDirective, deps: [{ token: i0.TemplateRef }, { token: OverlayService }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: OverlayDirective, selector: "[riv-overlay]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OverlayDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[riv-overlay]',
@@ -689,10 +689,10 @@ class TooltipComponent {
     _onMouseEnter(evt) {
         this.onMouseEnter.emit(evt);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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-large);font:var(--body-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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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-large);font:var(--body-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: "17.3.12", ngImport: i0, type: TooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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-large);font:var(--body-small);overflow-wrap:break-word}\n"] }]
         }], propDecorators: { anchor: [{
@@ -824,10 +824,10 @@ class TooltipDirective {
         this.tooltipRef?.destroy();
         this.tooltipRef = undefined;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: TooltipDirective, selector: "[rivTooltip]", inputs: { rivTooltip: "rivTooltip", rivTooltipTheme: "rivTooltipTheme", rivTooltipMaxWidth: "rivTooltipMaxWidth", rivTooltipPreferredPosition: "rivTooltipPreferredPosition", rivTooltipAnchor: "rivTooltipAnchor", rivTooltipCloseDelay: "rivTooltipCloseDelay", rivTooltipOpenDelay: "rivTooltipOpenDelay", rivTooltipGracePeriod: "rivTooltipGracePeriod" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: TooltipDirective, selector: "[rivTooltip]", inputs: { rivTooltip: "rivTooltip", rivTooltipTheme: "rivTooltipTheme", rivTooltipMaxWidth: "rivTooltipMaxWidth", rivTooltipPreferredPosition: "rivTooltipPreferredPosition", rivTooltipAnchor: "rivTooltipAnchor", rivTooltipCloseDelay: "rivTooltipCloseDelay", rivTooltipOpenDelay: "rivTooltipOpenDelay", rivTooltipGracePeriod: "rivTooltipGracePeriod" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rivTooltip]',
@@ -901,10 +901,10 @@ class SVGTextTruncateDirective extends TooltipDirective {
             this.rivTooltip = this.text;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SVGTextTruncateDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: SVGTextTruncateDirective, selector: "svg text[rivSVGTextTruncate]", inputs: { text: "text", width: "width" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SVGTextTruncateDirective, deps: [{ token: i0.ElementRef }, { token: i0.ApplicationRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: SVGTextTruncateDirective, selector: "svg text[rivSVGTextTruncate]", inputs: { text: "text", width: "width" }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SVGTextTruncateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SVGTextTruncateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: 'svg text[rivSVGTextTruncate]',
@@ -943,10 +943,10 @@ class TruncateComponent {
     scrollIntoView() {
         this.element.nativeElement.scrollIntoView(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TruncateComponent, deps: [{ token: i0.ElementRef }, { token: TooltipDirective, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TruncateComponent, deps: [{ token: i0.ElementRef }, { token: TooltipDirective, self: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: TruncateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: () => [{ type: i0.ElementRef }, { type: TooltipDirective, decorators: [{
@@ -1316,10 +1316,10 @@ class IconComponent {
         this.cached = valueToCache;
         this.element.nativeElement.append(this.cached.value);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IconComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IconComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: IconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: () => [{ type: i0.ElementRef }], propDecorators: { name: [{
@@ -1350,10 +1350,10 @@ class HelpComponent {
     constructor() {
         this.size = 16;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HelpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HelpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HelpComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: [{
@@ -1383,10 +1383,10 @@ class LinkComponent {
             .map(([k]) => k)
             .join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkComponent, deps: [{ token: CalloutComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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.theme{color:var(--type-dark-link)}:host.theme:hover:not(.disabled){color:var(--type-dark-link-hover)}:host.theme:active:not(.disabled){color:var(--type-dark-link-active)}:host.theme.disabled{color:var(--type-dark-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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LinkComponent, deps: [{ token: CalloutComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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.theme{color:var(--type-dark-link)}:host.theme:hover:not(.disabled){color:var(--type-dark-link-hover)}:host.theme:active:not(.disabled){color:var(--type-dark-link-active)}:host.theme.disabled{color:var(--type-dark-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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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.theme{color:var(--type-dark-link)}:host.theme:hover:not(.disabled){color:var(--type-dark-link-hover)}:host.theme:active:not(.disabled){color:var(--type-dark-link-active)}:host.theme.disabled{color:var(--type-dark-disabled)}\n"] }]
         }], ctorParameters: () => [{ type: CalloutComponent, decorators: [{
@@ -1412,10 +1412,10 @@ class ValidationMessageComponent {
     constructor() {
         this.message = '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ValidationMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ValidationMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: ValidationMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: [{
@@ -1429,10 +1429,10 @@ class InputLabelComponent {
         this.state = 'valid';
         this.labelAction = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: InputLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: InputLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: InputLabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: [{
@@ -1487,10 +1487,10 @@ class AutoFocusDirective {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: { autoActionActive: ["riv-auto-focus", "autoActionActive"] }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: AutoFocusDirective, selector: "[riv-auto-focus]", inputs: { autoActionActive: ["riv-auto-focus", "autoActionActive"] }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AutoFocusDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AutoFocusDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[riv-auto-focus]',
@@ -1547,10 +1547,10 @@ class TextFieldComponent extends InputLabelComponent {
         this._text = TextFieldComponent.format(this._text, this.casing);
         this.blur.emit(TextFieldComponent.clean(this._text, this.casing));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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: "17.3.12", ngImport: i0, type: TextFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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: [{
@@ -1628,10 +1628,10 @@ class AlphabeticFieldComponent extends TextFieldComponent {
         this._text = AlphabeticFieldComponent.format(this._text, this.casing);
         this.blur.emit(AlphabeticFieldComponent.clean(this._text, this.casing));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AlphabeticFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AlphabeticFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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: "17.3.12", ngImport: i0, type: AlphabeticFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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"] }]
         }] });
@@ -1676,10 +1676,10 @@ class ButtonGroupComponent {
         }
         return possibleChild;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ButtonGroupComponent, selector: "riv-button-group", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:flex}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonGroupComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: ButtonGroupComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: () => [{ type: i0.ElementRef }] });
@@ -1708,10 +1708,10 @@ class LoadingComponent {
         ];
         return commands.join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: LoadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: [{
@@ -1805,10 +1805,10 @@ class ButtonComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ButtonGroupComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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", "attr.aria-disabled": "this.ariaDisabled" } }, 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(--gray-10);border:var(--border-width) solid var(--border-light)}:host.basic:hover{background-color:var(--gray-20)}:host.basic:active{background-color:var(--gray-30)}:host.basic:disabled,:host.basic.disabled{border-color:transparent;background-color:var(--gray-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(--gray-30)}:host.ghost:active{background-color:var(--gray-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-100);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(--gray-10);border:var(--border-width) solid var(--border-light)}:host.stateful.current{color:var(--type-light-link);background-color:var(--white-100)}:host.stateful:hover{background-color:var(--gray-20)}:host.stateful.current:hover{color:var(--type-light-link-hover);background-color:var(--white-100)}:host.stateful:active{background-color:var(--gray-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(--gray-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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: ButtonGroupComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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", "attr.aria-disabled": "this.ariaDisabled" } }, 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(--gray-10);border:var(--border-width) solid var(--border-light)}:host.basic:hover{background-color:var(--gray-20)}:host.basic:active{background-color:var(--gray-30)}:host.basic:disabled,:host.basic.disabled{border-color:transparent;background-color:var(--gray-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(--gray-30)}:host.ghost:active{background-color:var(--gray-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-100);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(--gray-10);border:var(--border-width) solid var(--border-light)}:host.stateful.current{color:var(--type-light-link);background-color:var(--white-100)}:host.stateful:hover{background-color:var(--gray-20)}:host.stateful.current:hover{color:var(--type-light-link-hover);background-color:var(--white-100)}:host.stateful:active{background-color:var(--gray-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(--gray-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: "17.3.12", ngImport: i0, type: ButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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(--gray-10);border:var(--border-width) solid var(--border-light)}:host.basic:hover{background-color:var(--gray-20)}:host.basic:active{background-color:var(--gray-30)}:host.basic:disabled,:host.basic.disabled{border-color:transparent;background-color:var(--gray-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(--gray-30)}:host.ghost:active{background-color:var(--gray-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-100);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(--gray-10);border:var(--border-width) solid var(--border-light)}:host.stateful.current{color:var(--type-light-link);background-color:var(--white-100)}:host.stateful:hover{background-color:var(--gray-20)}:host.stateful.current:hover{color:var(--type-light-link-hover);background-color:var(--white-100)}:host.stateful:active{background-color:var(--gray-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(--gray-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: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: ButtonGroupComponent, decorators: [{
@@ -1896,10 +1896,10 @@ class CheckboxComponent {
     getIndeterminateBackgroundColor() {
         return `var(${this.indeterminateColorToken})`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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);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", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "component", type: ValidationMessageComponent, selector: "riv-validation-message", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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);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", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "component", type: ValidationMessageComponent, selector: "riv-validation-message", inputs: ["message"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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);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: [{
@@ -1937,10 +1937,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 class CardCheckboxComponent extends CheckboxComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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);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)}.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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);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)}.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: "17.3.12", ngImport: i0, type: CardCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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);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)}.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"] }]
         }] });
@@ -1993,10 +1993,10 @@ class NumberFieldComponent extends InputLabelComponent {
         this._text = NumberFieldComponent.format(this._text, this.minimumFractionDigits, this.maximumFractionDigits, this.min, this.max);
         this.blur.emit(NumberFieldComponent.clean(this._text, this.maximumFractionDigits, this.min, this.max));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NumberFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NumberFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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: "17.3.12", ngImport: i0, type: NumberFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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: [{
@@ -2072,10 +2072,10 @@ class CurrencyFieldComponent extends NumberFieldComponent {
         this.minimumFractionDigits = 2;
         this.maximumFractionDigits = 2;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CurrencyFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CurrencyFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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: "17.3.12", ngImport: i0, type: CurrencyFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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: [{
@@ -2998,10 +2998,10 @@ class LoadingCoverComponent {
         this.loading = false;
         this.loadingSize = 40;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LoadingCoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LoadingCoverComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: LoadingCoverComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: [{
@@ -3020,10 +3020,10 @@ class SearchComponent extends TextFieldComponent {
         this.placeholder = 'Search';
         this.name = 'search';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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  [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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  [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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: "17.3.12", ngImport: i0, type: SearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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  [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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: [{
@@ -3062,10 +3062,10 @@ class HighlightComponent {
     getChunks() {
         return chunks(this.text, this.indices);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: HighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: HighlightComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: HighlightComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: [{
@@ -3101,10 +3101,10 @@ class SelectNodeComponent {
     getCount(node) {
         return node.count;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectNodeComponent, selector: "riv-select-node", inputs: { mode: "mode", node: "node", showSingleSelected: "showSingleSelected", titleTemplate: "titleTemplate" }, 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\n      #row\n      class=\"row\"\n      [rivTooltip]=\"\n        getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n      \"\n    >\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\n          rivTruncate\n          class=\"name\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"titleTemplate ?? 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\n          class=\"spacer\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        ></span>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </label>\n      <button\n        type=\"button\"\n        *ngIf=\"n.children?.length\"\n        class=\"expand\"\n        [disabled]=\"!n.expandable\"\n        [attr.aria-disabled]=\"!n.expandable ? 'true' : null\"\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        [titleTemplate]=\"titleTemplate\"\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\n      #row\n      class=\"row\"\n      [rivTooltip]=\"\n        getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n      \"\n    >\n      <button\n        type=\"button\"\n        class=\"single\"\n        [disabled]=\"getDisabled(n)\"\n        [attr.aria-disabled]=\"getDisabled(n) ? 'true' : null\"\n        (click)=\"selectChange.emit(getId(n))\"\n      >\n        <span\n          class=\"label\"\n          rivTruncate\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"titleTemplate ?? 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\n          class=\"spacer\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\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)}.spacer{flex-grow:1;min-width:1px;align-self:stretch}.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)}.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", "titleTemplate"], outputs: ["selectChange", "expandChange"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "component", type: TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectNodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SelectNodeComponent, selector: "riv-select-node", inputs: { mode: "mode", node: "node", showSingleSelected: "showSingleSelected", titleTemplate: "titleTemplate" }, 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\n      #row\n      class=\"row\"\n      [rivTooltip]=\"\n        getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n      \"\n    >\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\n          rivTruncate\n          class=\"name\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"titleTemplate ?? 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\n          class=\"spacer\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        ></span>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </label>\n      <button\n        type=\"button\"\n        *ngIf=\"n.children?.length\"\n        class=\"expand\"\n        [disabled]=\"!n.expandable\"\n        [attr.aria-disabled]=\"!n.expandable ? 'true' : null\"\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        [titleTemplate]=\"titleTemplate\"\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\n      #row\n      class=\"row\"\n      [rivTooltip]=\"\n        getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n      \"\n    >\n      <button\n        type=\"button\"\n        class=\"single\"\n        [disabled]=\"getDisabled(n)\"\n        [attr.aria-disabled]=\"getDisabled(n) ? 'true' : null\"\n        (click)=\"selectChange.emit(getId(n))\"\n      >\n        <span\n          class=\"label\"\n          rivTruncate\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"titleTemplate ?? 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\n          class=\"spacer\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\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)}.spacer{flex-grow:1;min-width:1px;align-self:stretch}.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)}.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", "titleTemplate"], outputs: ["selectChange", "expandChange"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { 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: "17.3.12", ngImport: i0, type: SelectNodeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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\n      #row\n      class=\"row\"\n      [rivTooltip]=\"\n        getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n      \"\n    >\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\n          rivTruncate\n          class=\"name\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"titleTemplate ?? 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\n          class=\"spacer\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        ></span>\n        <span *ngIf=\"includeCount()\" class=\"count\">\n          {{ getCount(n) | rivNumber }}\n        </span>\n      </label>\n      <button\n        type=\"button\"\n        *ngIf=\"n.children?.length\"\n        class=\"expand\"\n        [disabled]=\"!n.expandable\"\n        [attr.aria-disabled]=\"!n.expandable ? 'true' : null\"\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        [titleTemplate]=\"titleTemplate\"\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\n      #row\n      class=\"row\"\n      [rivTooltip]=\"\n        getDisabled(n) && !getHelp(n) ? getDisabledExplanation(n) : undefined\n      \"\n    >\n      <button\n        type=\"button\"\n        class=\"single\"\n        [disabled]=\"getDisabled(n)\"\n        [attr.aria-disabled]=\"getDisabled(n) ? 'true' : null\"\n        (click)=\"selectChange.emit(getId(n))\"\n      >\n        <span\n          class=\"label\"\n          rivTruncate\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"titleTemplate ?? 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\n          class=\"spacer\"\n          [rivTooltip]=\"\n            getDisabled(n) && getHelp(n) ? getDisabledExplanation(n) : undefined\n          \"\n          [rivTooltipAnchor]=\"row\"\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)}.spacer{flex-grow:1;min-width:1px;align-self:stretch}.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)}.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: [{
@@ -3128,10 +3128,10 @@ class ZeroStateComponent {
     constructor() {
         this.message = 'No data to display.';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ZeroStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ZeroStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: ZeroStateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: [{
@@ -3252,10 +3252,10 @@ class SelectComponent extends InputLabelComponent {
     trackByOption(_, option) {
         return option.id;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectComponent, selector: "riv-select", inputs: { manager: "manager", size: "size", disabled: "disabled", locked: "locked", grow: "grow", 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: "optionTitleTemplate", first: true, predicate: ["optionTitle"], 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        (keydown.escape)=\"escapeClose($event, s.display.open)\"\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              <span\n                rivButton\n                [variant]=\"'ghost'\"\n                [size]=\"'small'\"\n                [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n                [iconPosition]=\"'last'\"\n              >\n                {{ getSelectedOrderByOption(s)?.title }}\n              </span>\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              <riv-help\n                *ngIf=\"group.help; let help\"\n                [help]=\"help\"\n                [size]=\"12\"\n              ></riv-help>\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                  [titleTemplate]=\"optionTitleTemplate\"\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        (keydown.escape)=\"escapeClose($event, s.display.open)\"\n        [disabled]=\"disabled || locked\"\n        [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n        type=\"button\"\n        class=\"custom-trigger-button\"\n        [class.grow]=\"grow\"\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          (keydown.escape)=\"escapeClose($event, s.display.open)\"\n          [disabled]=\"disabled || locked\"\n          [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\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-low-contrast)}.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%}.custom-trigger-button.grow{display:flex;flex-direction:column;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;display:flex;align-items:center;gap:var(--size-small)}.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: HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { 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", "grow", "allowedCalloutPositions", "preferredCalloutPosition"] }, { kind: "component", type: SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected", "titleTemplate"], 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SelectComponent, selector: "riv-select", inputs: { manager: "manager", size: "size", disabled: "disabled", locked: "locked", grow: "grow", 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: "optionTitleTemplate", first: true, predicate: ["optionTitle"], 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        (keydown.escape)=\"escapeClose($event, s.display.open)\"\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              <span\n                rivButton\n                [variant]=\"'ghost'\"\n                [size]=\"'small'\"\n                [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n                [iconPosition]=\"'last'\"\n              >\n                {{ getSelectedOrderByOption(s)?.title }}\n              </span>\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              <riv-help\n                *ngIf=\"group.help; let help\"\n                [help]=\"help\"\n                [size]=\"12\"\n              ></riv-help>\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                  [titleTemplate]=\"optionTitleTemplate\"\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        (keydown.escape)=\"escapeClose($event, s.display.open)\"\n        [disabled]=\"disabled || locked\"\n        [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n        type=\"button\"\n        class=\"custom-trigger-button\"\n        [class.grow]=\"grow\"\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          (keydown.escape)=\"escapeClose($event, s.display.open)\"\n          [disabled]=\"disabled || locked\"\n          [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\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-low-contrast)}.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%}.custom-trigger-button.grow{display:flex;flex-direction:column;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;display:flex;align-items:center;gap:var(--size-small)}.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: HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { 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", "grow", "allowedCalloutPositions", "preferredCalloutPosition"] }, { kind: "component", type: SelectNodeComponent, selector: "riv-select-node", inputs: ["mode", "node", "showSingleSelected", "titleTemplate"], 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: "17.3.12", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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        (keydown.escape)=\"escapeClose($event, s.display.open)\"\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              <span\n                rivButton\n                [variant]=\"'ghost'\"\n                [size]=\"'small'\"\n                [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n                [iconPosition]=\"'last'\"\n              >\n                {{ getSelectedOrderByOption(s)?.title }}\n              </span>\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              <riv-help\n                *ngIf=\"group.help; let help\"\n                [help]=\"help\"\n                [size]=\"12\"\n              ></riv-help>\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                  [titleTemplate]=\"optionTitleTemplate\"\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        (keydown.escape)=\"escapeClose($event, s.display.open)\"\n        [disabled]=\"disabled || locked\"\n        [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\n        type=\"button\"\n        class=\"custom-trigger-button\"\n        [class.grow]=\"grow\"\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          (keydown.escape)=\"escapeClose($event, s.display.open)\"\n          [disabled]=\"disabled || locked\"\n          [attr.aria-disabled]=\"disabled || locked ? 'true' : null\"\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-low-contrast)}.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%}.custom-trigger-button.grow{display:flex;flex-direction:column;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;display:flex;align-items:center;gap:var(--size-small)}.custom-footer{padding-top:var(--size-large);border-top:var(--border-width) solid var(--border-light)}\n"] }]
         }], propDecorators: { manager: [{
@@ -3408,10 +3408,10 @@ class SimpleSelectComponent extends InputLabelComponent {
     issueAction(action) {
         this.manager?.actions.next(action);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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", sortSelectedToTop: "sortSelectedToTop", grow: "grow", preferredCalloutPosition: "preferredCalloutPosition", allowedCalloutPositions: "allowedCalloutPositions" }, outputs: { selectedOptionChange: "selectedOptionChange" }, host: { properties: { "class": "this.classes" } }, 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 }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<riv-select\n  [manager]=\"manager\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  [locked]=\"locked\"\n  [grow]=\"grow\"\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\n    *ngIf=\"customSelectedOptionsTemplate; let customSelectedOptionsTpl\"\n  >\n    <ng-template #customSelectedOptions let-selected=\"selected\">\n      <ng-container\n        [ngTemplateOutlet]=\"customSelectedOptionsTpl\"\n        [ngTemplateOutletContext]=\"{ selected }\"\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        [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\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: [":host(.grow),:host(.grow) riv-select{display:block;width:100%}.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", "grow", "allowedCalloutPositions", "preferredCalloutPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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", sortSelectedToTop: "sortSelectedToTop", grow: "grow", preferredCalloutPosition: "preferredCalloutPosition", allowedCalloutPositions: "allowedCalloutPositions" }, outputs: { selectedOptionChange: "selectedOptionChange" }, host: { properties: { "class": "this.classes" } }, 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 }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<riv-select\n  [manager]=\"manager\"\n  [size]=\"size\"\n  [disabled]=\"disabled\"\n  [locked]=\"locked\"\n  [grow]=\"grow\"\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\n    *ngIf=\"customSelectedOptionsTemplate; let customSelectedOptionsTpl\"\n  >\n    <ng-template #customSelectedOptions let-selected=\"selected\">\n      <ng-container\n        [ngTemplateOutlet]=\"customSelectedOptionsTpl\"\n        [ngTemplateOutletContext]=\"{ selected }\"\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        [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\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: [":host(.grow),:host(.grow) riv-select{display:block;width:100%}.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", "grow", "allowedCalloutPositions", "preferredCalloutPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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  [grow]=\"grow\"\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\n    *ngIf=\"customSelectedOptionsTemplate; let customSelectedOptionsTpl\"\n  >\n    <ng-template #customSelectedOptions let-selected=\"selected\">\n      <ng-container\n        [ngTemplateOutlet]=\"customSelectedOptionsTpl\"\n        [ngTemplateOutletContext]=\"{ selected }\"\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        [attr.aria-disabled]=\"node.disabled ? 'true' : null\"\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: [":host(.grow),:host(.grow) riv-select{display:block;width:100%}.custom-node{display:block;width:100%;text-align:left}.custom-node:not(:disabled){cursor:pointer}\n"] }]
         }], propDecorators: { optionGroups: [{
@@ -3479,10 +3479,10 @@ class OptionGroupPipe {
             },
         ];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OptionGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: OptionGroupPipe, name: "rivOptionGroup" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OptionGroupPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: OptionGroupPipe, name: "rivOptionGroup" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OptionGroupPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OptionGroupPipe, decorators: [{
             type: Pipe,
             args: [{ name: 'rivOptionGroup' }]
         }] });
@@ -3766,10 +3766,10 @@ class CalendarComponent {
         if (yearMonth)
             this.activeYearMonthChange.emit(yearMonth);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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        <span\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n          [iconPosition]=\"'last'\"\n        >\n          {{ state.display.formattedSelectedOptions || '...' }}\n        </span>\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        <span\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n          [iconPosition]=\"'last'\"\n        >\n          {{ state.display.formattedSelectedOptions || '...' }}\n        </span>\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    [attr.aria-disabled]=\"day.hidden ? 'true' : null\"\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", "sortSelectedToTop", "grow", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CalendarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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        <span\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n          [iconPosition]=\"'last'\"\n        >\n          {{ state.display.formattedSelectedOptions || '...' }}\n        </span>\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        <span\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n          [iconPosition]=\"'last'\"\n        >\n          {{ state.display.formattedSelectedOptions || '...' }}\n        </span>\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    [attr.aria-disabled]=\"day.hidden ? 'true' : null\"\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", "sortSelectedToTop", "grow", "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: "17.3.12", ngImport: i0, type: CalendarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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        <span\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n          [iconPosition]=\"'last'\"\n        >\n          {{ state.display.formattedSelectedOptions || '...' }}\n        </span>\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        <span\n          rivButton\n          [size]=\"'small'\"\n          [variant]=\"'ghost'\"\n          [icon]=\"state.display.open ? 'ChevronUp' : 'ChevronDown'\"\n          [iconPosition]=\"'last'\"\n        >\n          {{ state.display.formattedSelectedOptions || '...' }}\n        </span>\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    [attr.aria-disabled]=\"day.hidden ? 'true' : null\"\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: [{
@@ -3977,10 +3977,10 @@ class DateRangeComponent extends InputLabelComponent {
         }
         this.favoritePresetIds$.next([...ids]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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    [attr.aria-disabled]=\"(disabled$ | async) ? 'true' : null\"\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      [attr.aria-disabled]=\"(disabled$ | async) ? 'true' : null\"\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-low-contrast)}.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", "sortSelectedToTop", "grow", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateRangeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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    [attr.aria-disabled]=\"(disabled$ | async) ? 'true' : null\"\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      [attr.aria-disabled]=\"(disabled$ | async) ? 'true' : null\"\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-low-contrast)}.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", "sortSelectedToTop", "grow", "preferredCalloutPosition", "allowedCalloutPositions"], outputs: ["selectedOptionChange"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: OptionGroupPipe, name: "rivOptionGroup" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateRangeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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    [attr.aria-disabled]=\"(disabled$ | async) ? 'true' : null\"\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      [attr.aria-disabled]=\"(disabled$ | async) ? 'true' : null\"\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-low-contrast)}.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: [{
@@ -4417,10 +4417,10 @@ class DateComponent extends InputLabelComponent {
             this.valueChange.emit(next);
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DateComponent, selector: "riv-date", inputs: { min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", size: "size", showClearButton: "showClearButton", showTodayButton: "showTodayButton", rollingTodayLabel: "rollingTodayLabel", open: "open" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event.target)" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }], 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  <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-disabled]=\"disabled ? 'true' : null\"\n      [attr.aria-label]=\"label || null\"\n      [attr.aria-controls]=\"calendarId\"\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-disabled]=\"disabled ? 'true' : null\"\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 [attr.id]=\"calendarId\" (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]=\"selectedCalendarValue\"\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-low-contrast)}.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DateComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DateComponent, selector: "riv-date", inputs: { min: "min", max: "max", value: "value", placeholder: "placeholder", disabled: "disabled", size: "size", showClearButton: "showClearButton", showTodayButton: "showTodayButton", rollingTodayLabel: "rollingTodayLabel", open: "open" }, outputs: { valueChange: "valueChange" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event.target)" } }, queries: [{ propertyName: "headerTemplate", first: true, predicate: ["header"], descendants: true }], 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  <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-disabled]=\"disabled ? 'true' : null\"\n      [attr.aria-label]=\"label || null\"\n      [attr.aria-controls]=\"calendarId\"\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-disabled]=\"disabled ? 'true' : null\"\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 [attr.id]=\"calendarId\" (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]=\"selectedCalendarValue\"\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-low-contrast)}.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: "17.3.12", ngImport: i0, type: DateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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-disabled]=\"disabled ? 'true' : null\"\n      [attr.aria-label]=\"label || null\"\n      [attr.aria-controls]=\"calendarId\"\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-disabled]=\"disabled ? 'true' : null\"\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 [attr.id]=\"calendarId\" (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]=\"selectedCalendarValue\"\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-low-contrast)}.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: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { min: [{
@@ -4542,10 +4542,10 @@ class FilterChipComponent {
     onClick(e) {
         this.chipClicked.emit(!this.selected);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FilterChipComponent, selector: "riv-filter-chip", inputs: { selected: "selected" }, outputs: { chipClicked: "chipClicked" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "this.classes" } }, ngImport: i0, template: "<riv-icon\n  *ngIf=\"selected\"\n  class=\"checkmark\"\n  [name]=\"'Check'\"\n  [size]=\"12\"\n></riv-icon>\n<ng-content></ng-content>\n", styles: [":host{--badge-multiplier: 4;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);border:var(--border-width) solid var(--border-light);padding:var(--size-xsmall) var(--size-medium)}:host:not(.selected){--badge-background-color: var(--surface-light-0)}:host.selected{--badge-background-color: var(--baloo-05)}.checkmark{padding-right:var(--size-xsmall)}\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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FilterChipComponent, selector: "riv-filter-chip", inputs: { selected: "selected" }, outputs: { chipClicked: "chipClicked" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class": "this.classes" } }, ngImport: i0, template: "<riv-icon\n  *ngIf=\"selected\"\n  class=\"checkmark\"\n  [name]=\"'Check'\"\n  [size]=\"12\"\n></riv-icon>\n<ng-content></ng-content>\n", styles: [":host{--badge-multiplier: 4;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);border:var(--border-width) solid var(--border-light);padding:var(--size-xsmall) var(--size-medium)}:host:not(.selected){--badge-background-color: var(--surface-light-0)}:host.selected{--badge-background-color: var(--baloo-05)}.checkmark{padding-right:var(--size-xsmall)}\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: "17.3.12", ngImport: i0, type: FilterChipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterChipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-filter-chip', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-icon\n  *ngIf=\"selected\"\n  class=\"checkmark\"\n  [name]=\"'Check'\"\n  [size]=\"12\"\n></riv-icon>\n<ng-content></ng-content>\n", styles: [":host{--badge-multiplier: 4;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);border:var(--border-width) solid var(--border-light);padding:var(--size-xsmall) var(--size-medium)}:host:not(.selected){--badge-background-color: var(--surface-light-0)}:host.selected{--badge-background-color: var(--baloo-05)}.checkmark{padding-right:var(--size-xsmall)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { selected: [{
@@ -4568,10 +4568,10 @@ class BadgeComponent {
     get classes() {
         return `${this.size} ${this.variant}`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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(--type-light-disabled)}: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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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(--type-light-disabled)}: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: "17.3.12", ngImport: i0, type: BadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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(--type-light-disabled)}: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: [{
@@ -4641,10 +4641,10 @@ class FilterDropdownComponent {
         this.openChange.emit(open);
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FilterDropdownComponent, selector: "riv-filter-dropdown", inputs: { label: "label", value: "value", valueExtraWidth: "valueExtraWidth", count: "count", active: "active", removable: "removable", disabled: "disabled", tooltip: "tooltip", open: "open", preferredPosition: "preferredPosition", allowedPositions: "allowedPositions" }, outputs: { openChange: "openChange", remove: "remove" }, host: { properties: { "class": "this.classes" } }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<span #anchor>\n  <button\n    *ngIf=\"triggerTemplate; else defaultTrigger\"\n    class=\"custom-trigger\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"label || null\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"setOpen(!open)\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"triggerTemplate; context: { open: open }\"\n    ></ng-container>\n  </button>\n  <ng-template #defaultTrigger>\n    <div\n      class=\"trigger\"\n      [rivTooltip]=\"tooltip ?? undefined\"\n      (click)=\"!disabled && setOpen(!open)\"\n    >\n      <button\n        *ngIf=\"removable && !disabled\"\n        rivButton\n        type=\"button\"\n        [variant]=\"'ghost'\"\n        [icon]=\"'X'\"\n        [attr.aria-label]=\"'Remove ' + label\"\n        (click)=\"$event.stopPropagation(); remove.emit()\"\n      ></button>\n      <span class=\"label\">{{ label }}</span>\n      <ng-container *ngIf=\"value !== null\">\n        <div class=\"divider\"></div>\n        <span class=\"value\" [style.max-width.px]=\"120 + valueExtraWidth\">{{\n          value\n        }}</span>\n      </ng-container>\n      <span *ngIf=\"(count ?? 0) > 0\" class=\"count\">\n        <riv-badge\n          [size]=\"'xsmall'\"\n          [variant]=\"disabled ? 'disabled' : 'brand'\"\n          >{{ count }}</riv-badge\n        >\n      </span>\n      <button\n        *ngIf=\"!disabled\"\n        rivButton\n        type=\"button\"\n        [variant]=\"'ghost'\"\n        [icon]=\"open ? 'ChevronUp' : 'ChevronDown'\"\n        [attr.aria-label]=\"label\"\n        [attr.aria-expanded]=\"open\"\n      ></button>\n    </div>\n  </ng-template>\n</span>\n\n<ng-container *ngIf=\"open && !disabled\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"anchor\"\n    [theme]=\"'light'\"\n    [showCaret]=\"false\"\n    [preferredPosition]=\"preferredPosition\"\n    [allowedPositions]=\"allowedPositions\"\n    (close)=\"setOpen(false)\"\n  >\n    <div class=\"content\">\n      <ng-container *ngTemplateOutlet=\"contentTemplate ?? null\"></ng-container>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [":host{flex:0 0 auto}.custom-trigger{display:inline-flex;font:inherit;color:inherit}.trigger{display:inline-flex;align-items:center;box-sizing:content-box;height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 2) 0;border:var(--border-width) solid var(--border-light-blend);border-radius:var(--border-radius-small);background-color:transparent;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);cursor:pointer;transition:background-color var(--medium-transition)}.trigger:hover{background-color:var(--black-20)}.trigger:active{background-color:var(--black-40)}:host(.active) .trigger{background-color:var(--purp-10)}:host(.active) .trigger:hover{background-color:var(--purp-20)}:host(.active) .trigger:active{background-color:var(--purp-30)}:host(.removable:not(.active)) .trigger{border-style:dashed}:host(:not(.removable)) .trigger,:host(.disabled) .trigger{padding-left:var(--size-medium)}:host(.disabled) .trigger{padding-right:var(--size-medium);border-color:var(--surface-light-4);background-color:transparent;color:var(--type-light-disabled);cursor:default}:host(.disabled.active) .trigger{background-color:var(--surface-light-1)}.label{flex:1 0 auto;font-weight:var(--font-weight-heavy)}.divider{width:var(--border-width);height:var(--type-3-font-size);margin:0 var(--size-small);background-color:var(--border-light)}.value{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.count{padding-left:var(--size-small)}.content{min-width:calc(var(--base-grid-size) * 74);padding:var(--size-large)}\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: BadgeComponent, selector: "riv-badge", inputs: ["variant", "size"] }, { 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: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FilterDropdownComponent, selector: "riv-filter-dropdown", inputs: { label: "label", value: "value", valueExtraWidth: "valueExtraWidth", count: "count", active: "active", removable: "removable", disabled: "disabled", tooltip: "tooltip", open: "open", preferredPosition: "preferredPosition", allowedPositions: "allowedPositions" }, outputs: { openChange: "openChange", remove: "remove" }, host: { properties: { "class": "this.classes" } }, queries: [{ propertyName: "triggerTemplate", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "contentTemplate", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "<span #anchor>\n  <button\n    *ngIf=\"triggerTemplate; else defaultTrigger\"\n    class=\"custom-trigger\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"label || null\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"setOpen(!open)\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"triggerTemplate; context: { open: open }\"\n    ></ng-container>\n  </button>\n  <ng-template #defaultTrigger>\n    <div\n      class=\"trigger\"\n      [rivTooltip]=\"tooltip ?? undefined\"\n      (click)=\"!disabled && setOpen(!open)\"\n    >\n      <button\n        *ngIf=\"removable && !disabled\"\n        rivButton\n        type=\"button\"\n        [variant]=\"'ghost'\"\n        [icon]=\"'X'\"\n        [attr.aria-label]=\"'Remove ' + label\"\n        (click)=\"$event.stopPropagation(); remove.emit()\"\n      ></button>\n      <span class=\"label\">{{ label }}</span>\n      <ng-container *ngIf=\"value !== null\">\n        <div class=\"divider\"></div>\n        <span class=\"value\" [style.max-width.px]=\"120 + valueExtraWidth\">{{\n          value\n        }}</span>\n      </ng-container>\n      <span *ngIf=\"(count ?? 0) > 0\" class=\"count\">\n        <riv-badge\n          [size]=\"'xsmall'\"\n          [variant]=\"disabled ? 'disabled' : 'brand'\"\n          >{{ count }}</riv-badge\n        >\n      </span>\n      <button\n        *ngIf=\"!disabled\"\n        rivButton\n        type=\"button\"\n        [variant]=\"'ghost'\"\n        [icon]=\"open ? 'ChevronUp' : 'ChevronDown'\"\n        [attr.aria-label]=\"label\"\n        [attr.aria-expanded]=\"open\"\n      ></button>\n    </div>\n  </ng-template>\n</span>\n\n<ng-container *ngIf=\"open && !disabled\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"anchor\"\n    [theme]=\"'light'\"\n    [showCaret]=\"false\"\n    [preferredPosition]=\"preferredPosition\"\n    [allowedPositions]=\"allowedPositions\"\n    (close)=\"setOpen(false)\"\n  >\n    <div class=\"content\">\n      <ng-container *ngTemplateOutlet=\"contentTemplate ?? null\"></ng-container>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [":host{flex:0 0 auto}.custom-trigger{display:inline-flex;font:inherit;color:inherit}.trigger{display:inline-flex;align-items:center;box-sizing:content-box;height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 2) 0;border:var(--border-width) solid var(--border-light-blend);border-radius:var(--border-radius-small);background-color:transparent;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);cursor:pointer;transition:background-color var(--medium-transition)}.trigger:hover{background-color:var(--black-20)}.trigger:active{background-color:var(--black-40)}:host(.active) .trigger{background-color:var(--purp-10)}:host(.active) .trigger:hover{background-color:var(--purp-20)}:host(.active) .trigger:active{background-color:var(--purp-30)}:host(.removable:not(.active)) .trigger{border-style:dashed}:host(:not(.removable)) .trigger,:host(.disabled) .trigger{padding-left:var(--size-medium)}:host(.disabled) .trigger{padding-right:var(--size-medium);border-color:var(--surface-light-4);background-color:transparent;color:var(--type-light-disabled);cursor:default}:host(.disabled.active) .trigger{background-color:var(--surface-light-1)}.label{flex:1 0 auto;font-weight:var(--font-weight-heavy)}.divider{width:var(--border-width);height:var(--type-3-font-size);margin:0 var(--size-small);background-color:var(--border-light)}.value{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.count{padding-left:var(--size-small)}.content{min-width:calc(var(--base-grid-size) * 74);padding:var(--size-large)}\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: BadgeComponent, selector: "riv-badge", inputs: ["variant", "size"] }, { 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: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FilterDropdownComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FilterDropdownComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-filter-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span #anchor>\n  <button\n    *ngIf=\"triggerTemplate; else defaultTrigger\"\n    class=\"custom-trigger\"\n    type=\"button\"\n    [disabled]=\"disabled\"\n    [attr.aria-label]=\"label || null\"\n    [attr.aria-expanded]=\"open\"\n    (click)=\"setOpen(!open)\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"triggerTemplate; context: { open: open }\"\n    ></ng-container>\n  </button>\n  <ng-template #defaultTrigger>\n    <div\n      class=\"trigger\"\n      [rivTooltip]=\"tooltip ?? undefined\"\n      (click)=\"!disabled && setOpen(!open)\"\n    >\n      <button\n        *ngIf=\"removable && !disabled\"\n        rivButton\n        type=\"button\"\n        [variant]=\"'ghost'\"\n        [icon]=\"'X'\"\n        [attr.aria-label]=\"'Remove ' + label\"\n        (click)=\"$event.stopPropagation(); remove.emit()\"\n      ></button>\n      <span class=\"label\">{{ label }}</span>\n      <ng-container *ngIf=\"value !== null\">\n        <div class=\"divider\"></div>\n        <span class=\"value\" [style.max-width.px]=\"120 + valueExtraWidth\">{{\n          value\n        }}</span>\n      </ng-container>\n      <span *ngIf=\"(count ?? 0) > 0\" class=\"count\">\n        <riv-badge\n          [size]=\"'xsmall'\"\n          [variant]=\"disabled ? 'disabled' : 'brand'\"\n          >{{ count }}</riv-badge\n        >\n      </span>\n      <button\n        *ngIf=\"!disabled\"\n        rivButton\n        type=\"button\"\n        [variant]=\"'ghost'\"\n        [icon]=\"open ? 'ChevronUp' : 'ChevronDown'\"\n        [attr.aria-label]=\"label\"\n        [attr.aria-expanded]=\"open\"\n      ></button>\n    </div>\n  </ng-template>\n</span>\n\n<ng-container *ngIf=\"open && !disabled\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"anchor\"\n    [theme]=\"'light'\"\n    [showCaret]=\"false\"\n    [preferredPosition]=\"preferredPosition\"\n    [allowedPositions]=\"allowedPositions\"\n    (close)=\"setOpen(false)\"\n  >\n    <div class=\"content\">\n      <ng-container *ngTemplateOutlet=\"contentTemplate ?? null\"></ng-container>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [":host{flex:0 0 auto}.custom-trigger{display:inline-flex;font:inherit;color:inherit}.trigger{display:inline-flex;align-items:center;box-sizing:content-box;height:var(--type-2-line-height-0);padding:calc(var(--base-grid-size) * 2) 0;border:var(--border-width) solid var(--border-light-blend);border-radius:var(--border-radius-small);background-color:transparent;font-size:var(--type-2-font-size);line-height:var(--type-2-line-height-0);cursor:pointer;transition:background-color var(--medium-transition)}.trigger:hover{background-color:var(--black-20)}.trigger:active{background-color:var(--black-40)}:host(.active) .trigger{background-color:var(--purp-10)}:host(.active) .trigger:hover{background-color:var(--purp-20)}:host(.active) .trigger:active{background-color:var(--purp-30)}:host(.removable:not(.active)) .trigger{border-style:dashed}:host(:not(.removable)) .trigger,:host(.disabled) .trigger{padding-left:var(--size-medium)}:host(.disabled) .trigger{padding-right:var(--size-medium);border-color:var(--surface-light-4);background-color:transparent;color:var(--type-light-disabled);cursor:default}:host(.disabled.active) .trigger{background-color:var(--surface-light-1)}.label{flex:1 0 auto;font-weight:var(--font-weight-heavy)}.divider{width:var(--border-width);height:var(--type-3-font-size);margin:0 var(--size-small);background-color:var(--border-light)}.value{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.count{padding-left:var(--size-small)}.content{min-width:calc(var(--base-grid-size) * 74);padding:var(--size-large)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { label: [{
@@ -5386,10 +5386,10 @@ class MentionsInputComponent {
     onCalloutClose() {
         this.closeMentions();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MentionsInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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          type=\"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-low-contrast);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-low-contrast)}.text-content.editable[data-placeholder]:empty:before{content:attr(data-placeholder);color:var(--type-light-low-contrast)}.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MentionsInputComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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          type=\"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-low-contrast);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-low-contrast)}.text-content.editable[data-placeholder]:empty:before{content:attr(data-placeholder);color:var(--type-light-low-contrast)}.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: "17.3.12", ngImport: i0, type: MentionsInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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          type=\"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-low-contrast);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-low-contrast)}.text-content.editable[data-placeholder]:empty:before{content:attr(data-placeholder);color:var(--type-light-low-contrast)}.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: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { content: [{
@@ -5430,10 +5430,10 @@ class PercentageFieldComponent extends NumberFieldComponent {
         super(...arguments);
         this.align = 'right';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PercentageFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PercentageFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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: "17.3.12", ngImport: i0, type: PercentageFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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: [{
@@ -5464,10 +5464,10 @@ class PhoneFieldComponent extends TextFieldComponent {
         this._text = PhoneFieldComponent.format(this._text);
         this.blur.emit(PhoneFieldComponent.clean(this._text));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PhoneFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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: "17.3.12", ngImport: i0, type: PhoneFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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: [{
@@ -5522,10 +5522,10 @@ class RadioComponent {
     isRadioOnly() {
         return !this.title && !this.labelTemplate;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RadioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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: "17.3.12", ngImport: i0, type: RadioComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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: [{
@@ -5692,10 +5692,10 @@ class SearchSelectComponent {
     get showAddNew() {
         return !!this.searchText.trim();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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        [attr.aria-disabled]=\"disabled ? 'true' : null\"\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          type=\"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-low-contrast)}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", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SearchSelectComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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        [attr.aria-disabled]=\"disabled ? 'true' : null\"\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          type=\"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-low-contrast)}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", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SearchSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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        [attr.aria-disabled]=\"disabled ? 'true' : null\"\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          type=\"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-low-contrast)}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: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { options: [{
@@ -5758,10 +5758,10 @@ class SwitchCheckboxComponent extends CheckboxComponent {
             this.animated = true;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SwitchCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SwitchCheckboxComponent, selector: "riv-switch-checkbox", inputs: { size: "size" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label\n  #label\n  [ngClass]=\"size\"\n  [class.checked]=\"value\"\n  [class.animated]=\"animated\"\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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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);border-radius:var(--switch-size)}label.animated:before{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);border-radius:100%;box-shadow:var(--depth-1)}label.animated:after{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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SwitchCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SwitchCheckboxComponent, selector: "riv-switch-checkbox", inputs: { size: "size" }, usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<label\n  #label\n  [ngClass]=\"size\"\n  [class.checked]=\"value\"\n  [class.animated]=\"animated\"\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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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);border-radius:var(--switch-size)}label.animated:before{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);border-radius:100%;box-shadow:var(--depth-1)}label.animated:after{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: "17.3.12", ngImport: i0, type: SwitchCheckboxComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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.animated]=\"animated\"\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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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);border-radius:var(--switch-size)}label.animated:before{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);border-radius:100%;box-shadow:var(--depth-1)}label.animated:after{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: [{
@@ -5777,10 +5777,10 @@ class TextareaFieldComponent extends TextFieldComponent {
         this.rows = 4;
         this.type = 'text';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TextareaFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TextareaFieldComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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: "17.3.12", ngImport: i0, type: TextareaFieldComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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    [attr.aria-disabled]=\"disabled ? 'true' : null\"\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-low-contrast)}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: [{
@@ -5825,10 +5825,10 @@ class CardActionsComponent {
             .map(([k]) => k)
             .join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardActionsComponent, selector: "riv-card-actions", inputs: { align: "align", variant: "variant", padding: "padding", orientation: "orientation", divider: "divider" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{position:relative;z-index:var(--card-raised-z-index);display:flex;align-items:center;gap:var(--size-small);min-width:0}:host.horizontal{flex-direction:row}:host.vertical{flex-direction:column;align-items:stretch}:host.align-start{justify-content:flex-start}:host.align-center{justify-content:center}:host.align-end{justify-content:flex-end}:host.align-between{justify-content:space-between}:host.align-stretch{display:grid}:host.align-stretch.horizontal{grid-auto-flow:column;grid-auto-columns:1fr}:host.align-stretch.vertical{grid-auto-flow:row;grid-auto-rows:1fr}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-top:var(--border-width) solid var(--border-light)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardActionsComponent, selector: "riv-card-actions", inputs: { align: "align", variant: "variant", padding: "padding", orientation: "orientation", divider: "divider" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{position:relative;z-index:var(--card-raised-z-index);display:flex;align-items:center;gap:var(--size-small);min-width:0}:host.horizontal{flex-direction:row}:host.vertical{flex-direction:column;align-items:stretch}:host.align-start{justify-content:flex-start}:host.align-center{justify-content:center}:host.align-end{justify-content:flex-end}:host.align-between{justify-content:space-between}:host.align-stretch{display:grid}:host.align-stretch.horizontal{grid-auto-flow:column;grid-auto-columns:1fr}:host.align-stretch.vertical{grid-auto-flow:row;grid-auto-rows:1fr}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-top:var(--border-width) solid var(--border-light)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardActionsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-card-actions', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{position:relative;z-index:var(--card-raised-z-index);display:flex;align-items:center;gap:var(--size-small);min-width:0}:host.horizontal{flex-direction:row}:host.vertical{flex-direction:column;align-items:stretch}:host.align-start{justify-content:flex-start}:host.align-center{justify-content:center}:host.align-end{justify-content:flex-end}:host.align-between{justify-content:space-between}:host.align-stretch{display:grid}:host.align-stretch.horizontal{grid-auto-flow:column;grid-auto-columns:1fr}:host.align-stretch.vertical{grid-auto-flow:row;grid-auto-rows:1fr}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-top:var(--border-width) solid var(--border-light)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}\n"] }]
         }], propDecorators: { align: [{
@@ -6076,10 +6076,10 @@ class CardComponent {
             .map(([k]) => k)
             .join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardComponent, selector: "riv-card", inputs: { variant: "variant", surface: "surface", tone: "tone", orientation: "orientation", padding: "padding", radius: "radius", hoverDepth: "hoverDepth", clickable: "clickable", clickLabel: "clickLabel", selected: "selected", disabled: "disabled" }, outputs: { cardClick: "cardClick" }, host: { properties: { "attr.aria-current": "this.ariaCurrent", "class": "this.classes" } }, ngImport: i0, template: "<button\n  *ngIf=\"clickable\"\n  type=\"button\"\n  class=\"click-target\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled ? 'true' : null\"\n  [attr.aria-label]=\"clickLabel\"\n  [attr.aria-labelledby]=\"labelledBy\"\n  (click)=\"cardClick.emit($event)\"\n></button>\n<ng-content></ng-content>\n", styles: [":host{position:relative;display:flex;min-width:0;overflow:hidden;color:var(--type-light-high-contrast);font:var(--body-medium)}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host.outlined{border:var(--border-width) solid var(--border-light)}:host.dashed{border:var(--border-width) dashed var(--border-light)}:host.elevated{box-shadow:var(--depth-1)}:host.surface-0{background-color:var(--surface-light-0)}:host.surface-1{background-color:var(--surface-light-1)}:host.surface-2{background-color:var(--surface-light-2)}:host.tone-danger{background-color:var(--surface-light-danger)}:host.tone-caution{background-color:var(--surface-light-caution)}:host.tone-warning{background-color:var(--surface-light-warning)}:host.tone-safety{background-color:var(--surface-light-safety)}:host.tone-selected{background-color:var(--surface-light-selected)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xxlarge{padding:var(--size-xxlarge)}:host.radius-small{border-radius:var(--card-border-radius, var(--border-radius-small))}:host.radius-medium{border-radius:var(--card-border-radius, var(--border-radius-medium))}:host.radius-large{border-radius:var(--card-border-radius, var(--border-radius-large))}:host.radius-xlarge{border-radius:var(--card-border-radius, var(--border-radius-xlarge))}:host:not(.hover-depth-none){transition:box-shadow var(--short-transition)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.clickable{transition:box-shadow var(--short-transition)}:host.hover-depth-1:not(.disabled):hover{box-shadow:var(--depth-1)}:host.hover-depth-2:not(.disabled):hover{box-shadow:var(--depth-2)}:host.hover-depth-3:not(.disabled):hover{box-shadow:var(--depth-3)}:host.hover-depth-4:not(.disabled):hover{box-shadow:var(--depth-4)}.click-target{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.click-target:not(:disabled):hover{background-color:var(--black-20)}.click-target:disabled{cursor:default}.click-target:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}:host.selected{border:var(--border-width) solid var(--baloo-50);box-shadow:var(--depth-2)}:host.disabled{background-color:var(--surface-light-1)}:host.outlined.disabled,:host.dashed.disabled{border-color:var(--border-light)}@media print{:host{break-inside:avoid}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardComponent, selector: "riv-card", inputs: { variant: "variant", surface: "surface", tone: "tone", orientation: "orientation", padding: "padding", radius: "radius", hoverDepth: "hoverDepth", clickable: "clickable", clickLabel: "clickLabel", selected: "selected", disabled: "disabled" }, outputs: { cardClick: "cardClick" }, host: { properties: { "attr.aria-current": "this.ariaCurrent", "class": "this.classes" } }, ngImport: i0, template: "<button\n  *ngIf=\"clickable\"\n  type=\"button\"\n  class=\"click-target\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled ? 'true' : null\"\n  [attr.aria-label]=\"clickLabel\"\n  [attr.aria-labelledby]=\"labelledBy\"\n  (click)=\"cardClick.emit($event)\"\n></button>\n<ng-content></ng-content>\n", styles: [":host{position:relative;display:flex;min-width:0;overflow:hidden;color:var(--type-light-high-contrast);font:var(--body-medium)}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host.outlined{border:var(--border-width) solid var(--border-light)}:host.dashed{border:var(--border-width) dashed var(--border-light)}:host.elevated{box-shadow:var(--depth-1)}:host.surface-0{background-color:var(--surface-light-0)}:host.surface-1{background-color:var(--surface-light-1)}:host.surface-2{background-color:var(--surface-light-2)}:host.tone-danger{background-color:var(--surface-light-danger)}:host.tone-caution{background-color:var(--surface-light-caution)}:host.tone-warning{background-color:var(--surface-light-warning)}:host.tone-safety{background-color:var(--surface-light-safety)}:host.tone-selected{background-color:var(--surface-light-selected)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xxlarge{padding:var(--size-xxlarge)}:host.radius-small{border-radius:var(--card-border-radius, var(--border-radius-small))}:host.radius-medium{border-radius:var(--card-border-radius, var(--border-radius-medium))}:host.radius-large{border-radius:var(--card-border-radius, var(--border-radius-large))}:host.radius-xlarge{border-radius:var(--card-border-radius, var(--border-radius-xlarge))}:host:not(.hover-depth-none){transition:box-shadow var(--short-transition)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.clickable{transition:box-shadow var(--short-transition)}:host.hover-depth-1:not(.disabled):hover{box-shadow:var(--depth-1)}:host.hover-depth-2:not(.disabled):hover{box-shadow:var(--depth-2)}:host.hover-depth-3:not(.disabled):hover{box-shadow:var(--depth-3)}:host.hover-depth-4:not(.disabled):hover{box-shadow:var(--depth-4)}.click-target{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.click-target:not(:disabled):hover{background-color:var(--black-20)}.click-target:disabled{cursor:default}.click-target:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}:host.selected{border:var(--border-width) solid var(--baloo-50);box-shadow:var(--depth-2)}:host.disabled{background-color:var(--surface-light-1)}:host.outlined.disabled,:host.dashed.disabled{border-color:var(--border-light)}@media print{:host{break-inside:avoid}}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-card', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"clickable\"\n  type=\"button\"\n  class=\"click-target\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled ? 'true' : null\"\n  [attr.aria-label]=\"clickLabel\"\n  [attr.aria-labelledby]=\"labelledBy\"\n  (click)=\"cardClick.emit($event)\"\n></button>\n<ng-content></ng-content>\n", styles: [":host{position:relative;display:flex;min-width:0;overflow:hidden;color:var(--type-light-high-contrast);font:var(--body-medium)}:host.vertical{flex-direction:column}:host.horizontal{flex-direction:row}:host.outlined{border:var(--border-width) solid var(--border-light)}:host.dashed{border:var(--border-width) dashed var(--border-light)}:host.elevated{box-shadow:var(--depth-1)}:host.surface-0{background-color:var(--surface-light-0)}:host.surface-1{background-color:var(--surface-light-1)}:host.surface-2{background-color:var(--surface-light-2)}:host.tone-danger{background-color:var(--surface-light-danger)}:host.tone-caution{background-color:var(--surface-light-caution)}:host.tone-warning{background-color:var(--surface-light-warning)}:host.tone-safety{background-color:var(--surface-light-safety)}:host.tone-selected{background-color:var(--surface-light-selected)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xxlarge{padding:var(--size-xxlarge)}:host.radius-small{border-radius:var(--card-border-radius, var(--border-radius-small))}:host.radius-medium{border-radius:var(--card-border-radius, var(--border-radius-medium))}:host.radius-large{border-radius:var(--card-border-radius, var(--border-radius-large))}:host.radius-xlarge{border-radius:var(--card-border-radius, var(--border-radius-xlarge))}:host:not(.hover-depth-none){transition:box-shadow var(--short-transition)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.clickable{transition:box-shadow var(--short-transition)}:host.hover-depth-1:not(.disabled):hover{box-shadow:var(--depth-1)}:host.hover-depth-2:not(.disabled):hover{box-shadow:var(--depth-2)}:host.hover-depth-3:not(.disabled):hover{box-shadow:var(--depth-3)}:host.hover-depth-4:not(.disabled):hover{box-shadow:var(--depth-4)}.click-target{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.click-target:not(:disabled):hover{background-color:var(--black-20)}.click-target:disabled{cursor:default}.click-target:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}:host.selected{border:var(--border-width) solid var(--baloo-50);box-shadow:var(--depth-2)}:host.disabled{background-color:var(--surface-light-1)}:host.outlined.disabled,:host.dashed.disabled{border-color:var(--border-light)}@media print{:host{break-inside:avoid}}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: i0.ChangeDetectorRef }], propDecorators: { variant: [{
@@ -6186,10 +6186,10 @@ class CardContentComponent {
             .map(([k]) => k)
             .join(' ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: CardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardContentComponent, selector: "riv-card-content", inputs: { padding: "padding", grow: "grow", divider: "divider" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;min-width:0;font:var(--body-medium)}:host.grow{flex-grow:1}:host.divider{border-bottom:var(--border-width) solid var(--border-light)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardContentComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: CardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardContentComponent, selector: "riv-card-content", inputs: { padding: "padding", grow: "grow", divider: "divider" }, host: { properties: { "class": "this.classes" } }, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:block;min-width:0;font:var(--body-medium)}:host.grow{flex-grow:1}:host.divider{border-bottom:var(--border-width) solid var(--border-light)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-card-content', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:block;min-width:0;font:var(--body-medium)}:host.grow{flex-grow:1}:host.divider{border-bottom:var(--border-width) solid var(--border-light)}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }, { type: CardComponent, decorators: [{
@@ -6355,10 +6355,10 @@ class CardHeaderComponent {
                 overflow: 'hidden',
             };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardHeaderComponent, deps: [{ token: CardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardHeaderComponent, selector: "riv-card-header", inputs: { heading: "heading", subheading: "subheading", headingLevel: "headingLevel", variant: "variant", padding: "padding", divider: "divider", align: "align", clamp: "clamp", expandable: "expandable", expanded: "expanded", togglePosition: "togglePosition", disabled: "disabled" }, outputs: { expandedChange: "expandedChange" }, host: { properties: { "class": "this.classes" } }, usesOnChanges: true, ngImport: i0, template: "<button\n  *ngIf=\"expandable\"\n  type=\"button\"\n  class=\"expand-toggle\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled ? 'true' : null\"\n  [attr.aria-expanded]=\"expanded\"\n  [attr.aria-controls]=\"regionId\"\n  [attr.aria-labelledby]=\"titleId\"\n  (click)=\"toggle()\"\n></button>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'leading'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"leading\"><ng-content select=\"[leading]\"></ng-content></div>\n<div class=\"main\">\n  <div class=\"title-row\" [id]=\"titleId\">\n    <div *ngIf=\"heading?.trim()\" class=\"heading\" [ngStyle]=\"clampStyle\">\n      <ng-container [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\">{{ heading }}</h1>\n        <h2 *ngSwitchCase=\"2\">{{ heading }}</h2>\n        <h3 *ngSwitchCase=\"3\">{{ heading }}</h3>\n        <h4 *ngSwitchCase=\"4\">{{ heading }}</h4>\n        <h5 *ngSwitchCase=\"5\">{{ heading }}</h5>\n        <h6 *ngSwitchCase=\"6\">{{ heading }}</h6>\n      </ng-container>\n    </div>\n    <ng-content></ng-content>\n  </div>\n  <div *ngIf=\"subheading?.trim()\" class=\"subheading\">{{ subheading }}</div>\n</div>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'trailing'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n\n<ng-template #chevron>\n  <riv-icon\n    class=\"expand-chevron\"\n    [class.expanded]=\"expanded\"\n    [name]=\"'ChevronDown'\"\n    [size]=\"20\"\n  ></riv-icon>\n</ng-template>\n", styles: [":host{display:flex;gap:var(--size-medium);min-width:0}:host.expandable{position:relative}:host.align-start{align-items:flex-start}:host.align-center{align-items:center}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-bottom:var(--border-width) solid var(--border-light)}.main{flex-grow:1;min-width:0}.title-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--size-xsmall);min-width:0;font:var(--card-heading-font, var(--title-04));color:var(--card-heading-color, var(--type-light-high-contrast))}:host.filled .title-row{font:var(--card-heading-font, var(--title-02))}.leading{flex-shrink:0}.actions{position:relative;z-index:var(--card-raised-z-index);display:flex;flex-shrink:0;align-items:center;gap:var(--size-small)}.expand-toggle{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.expand-toggle:not(:disabled):hover{background-color:var(--black-20)}.expand-toggle:disabled{cursor:default}.expand-toggle:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}.expand-chevron{flex-shrink:0;transition:transform var(--medium-transition)}.expand-chevron.expanded{transform:rotate(-180deg)}.leading:not(:has(*)),.actions:not(:has(*)){display:none}.heading{min-width:0}.heading>*{display:inline;margin:0;font:inherit;color:inherit}.subheading{font:var(--body-small);color:var(--type-light-low-contrast)}\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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardHeaderComponent, deps: [{ token: CardComponent, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardHeaderComponent, selector: "riv-card-header", inputs: { heading: "heading", subheading: "subheading", headingLevel: "headingLevel", variant: "variant", padding: "padding", divider: "divider", align: "align", clamp: "clamp", expandable: "expandable", expanded: "expanded", togglePosition: "togglePosition", disabled: "disabled" }, outputs: { expandedChange: "expandedChange" }, host: { properties: { "class": "this.classes" } }, usesOnChanges: true, ngImport: i0, template: "<button\n  *ngIf=\"expandable\"\n  type=\"button\"\n  class=\"expand-toggle\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled ? 'true' : null\"\n  [attr.aria-expanded]=\"expanded\"\n  [attr.aria-controls]=\"regionId\"\n  [attr.aria-labelledby]=\"titleId\"\n  (click)=\"toggle()\"\n></button>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'leading'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"leading\"><ng-content select=\"[leading]\"></ng-content></div>\n<div class=\"main\">\n  <div class=\"title-row\" [id]=\"titleId\">\n    <div *ngIf=\"heading?.trim()\" class=\"heading\" [ngStyle]=\"clampStyle\">\n      <ng-container [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\">{{ heading }}</h1>\n        <h2 *ngSwitchCase=\"2\">{{ heading }}</h2>\n        <h3 *ngSwitchCase=\"3\">{{ heading }}</h3>\n        <h4 *ngSwitchCase=\"4\">{{ heading }}</h4>\n        <h5 *ngSwitchCase=\"5\">{{ heading }}</h5>\n        <h6 *ngSwitchCase=\"6\">{{ heading }}</h6>\n      </ng-container>\n    </div>\n    <ng-content></ng-content>\n  </div>\n  <div *ngIf=\"subheading?.trim()\" class=\"subheading\">{{ subheading }}</div>\n</div>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'trailing'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n\n<ng-template #chevron>\n  <riv-icon\n    class=\"expand-chevron\"\n    [class.expanded]=\"expanded\"\n    [name]=\"'ChevronDown'\"\n    [size]=\"20\"\n  ></riv-icon>\n</ng-template>\n", styles: [":host{display:flex;gap:var(--size-medium);min-width:0}:host.expandable{position:relative}:host.align-start{align-items:flex-start}:host.align-center{align-items:center}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-bottom:var(--border-width) solid var(--border-light)}.main{flex-grow:1;min-width:0}.title-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--size-xsmall);min-width:0;font:var(--card-heading-font, var(--title-04));color:var(--card-heading-color, var(--type-light-high-contrast))}:host.filled .title-row{font:var(--card-heading-font, var(--title-02))}.leading{flex-shrink:0}.actions{position:relative;z-index:var(--card-raised-z-index);display:flex;flex-shrink:0;align-items:center;gap:var(--size-small)}.expand-toggle{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.expand-toggle:not(:disabled):hover{background-color:var(--black-20)}.expand-toggle:disabled{cursor:default}.expand-toggle:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}.expand-chevron{flex-shrink:0;transition:transform var(--medium-transition)}.expand-chevron.expanded{transform:rotate(-180deg)}.leading:not(:has(*)),.actions:not(:has(*)){display:none}.heading{min-width:0}.heading>*{display:inline;margin:0;font:inherit;color:inherit}.subheading{font:var(--body-small);color:var(--type-light-low-contrast)}\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: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-card-header', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  *ngIf=\"expandable\"\n  type=\"button\"\n  class=\"expand-toggle\"\n  [disabled]=\"disabled\"\n  [attr.aria-disabled]=\"disabled ? 'true' : null\"\n  [attr.aria-expanded]=\"expanded\"\n  [attr.aria-controls]=\"regionId\"\n  [attr.aria-labelledby]=\"titleId\"\n  (click)=\"toggle()\"\n></button>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'leading'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"leading\"><ng-content select=\"[leading]\"></ng-content></div>\n<div class=\"main\">\n  <div class=\"title-row\" [id]=\"titleId\">\n    <div *ngIf=\"heading?.trim()\" class=\"heading\" [ngStyle]=\"clampStyle\">\n      <ng-container [ngSwitch]=\"headingLevel\">\n        <h1 *ngSwitchCase=\"1\">{{ heading }}</h1>\n        <h2 *ngSwitchCase=\"2\">{{ heading }}</h2>\n        <h3 *ngSwitchCase=\"3\">{{ heading }}</h3>\n        <h4 *ngSwitchCase=\"4\">{{ heading }}</h4>\n        <h5 *ngSwitchCase=\"5\">{{ heading }}</h5>\n        <h6 *ngSwitchCase=\"6\">{{ heading }}</h6>\n      </ng-container>\n    </div>\n    <ng-content></ng-content>\n  </div>\n  <div *ngIf=\"subheading?.trim()\" class=\"subheading\">{{ subheading }}</div>\n</div>\n<ng-container\n  *ngIf=\"expandable && togglePosition === 'trailing'\"\n  [ngTemplateOutlet]=\"chevron\"\n></ng-container>\n<div class=\"actions\"><ng-content select=\"[actions]\"></ng-content></div>\n\n<ng-template #chevron>\n  <riv-icon\n    class=\"expand-chevron\"\n    [class.expanded]=\"expanded\"\n    [name]=\"'ChevronDown'\"\n    [size]=\"20\"\n  ></riv-icon>\n</ng-template>\n", styles: [":host{display:flex;gap:var(--size-medium);min-width:0}:host.expandable{position:relative}:host.align-start{align-items:flex-start}:host.align-center{align-items:center}:host.padding-small{padding:var(--size-small)}:host.padding-medium{padding:var(--size-medium)}:host.padding-large{padding:var(--size-large)}:host.padding-xlarge{padding:var(--size-xlarge)}:host.padding-xxlarge{padding:var(--size-xxlarge)}:host.filled{background-color:var(--surface-light-1)}:host.filled,:host.divider{border-bottom:var(--border-width) solid var(--border-light)}.main{flex-grow:1;min-width:0}.title-row{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--size-xsmall);min-width:0;font:var(--card-heading-font, var(--title-04));color:var(--card-heading-color, var(--type-light-high-contrast))}:host.filled .title-row{font:var(--card-heading-font, var(--title-02))}.leading{flex-shrink:0}.actions{position:relative;z-index:var(--card-raised-z-index);display:flex;flex-shrink:0;align-items:center;gap:var(--size-small)}.expand-toggle{position:absolute;inset:0;z-index:var(--card-click-target-z-index);padding:0;border:none;background:none;cursor:pointer;transition:background-color var(--short-transition)}.expand-toggle:not(:disabled):hover{background-color:var(--black-20)}.expand-toggle:disabled{cursor:default}.expand-toggle:focus-visible{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}.expand-chevron{flex-shrink:0;transition:transform var(--medium-transition)}.expand-chevron.expanded{transform:rotate(-180deg)}.leading:not(:has(*)),.actions:not(:has(*)){display:none}.heading{min-width:0}.heading>*{display:inline;margin:0;font:inherit;color:inherit}.subheading{font:var(--body-small);color:var(--type-light-low-contrast)}\n"] }]
         }], ctorParameters: () => [{ type: CardComponent, decorators: [{
@@ -6468,10 +6468,10 @@ class CardLinkComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardLinkComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardLinkComponent, selector: "[riv-card-link]", inputs: { mode: "mode", disabled: "disabled" }, host: { properties: { "class": "this.classes", "attr.aria-disabled": "this.ariaDisabled", "attr.tabindex": "this.tabIndex" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{padding:0;border:none;background:none;color:inherit;font:inherit;text-align:inherit;text-decoration:none;cursor:pointer}:host.disabled{color:var(--type-light-disabled);cursor:default}:host.region{display:block;min-width:0;transition:background-color var(--short-transition)}:host.region:not(.disabled):hover{background-color:var(--black-20)}:host.stretch:after{content:\"\";position:absolute;inset:0;z-index:var(--card-click-target-z-index);transition:background-color var(--short-transition)}:host.stretch:not(.disabled):hover:after{background-color:var(--black-20)}:host.stretch.disabled:after{pointer-events:none}:host.stretch:focus-visible{outline:none}:host.stretch:focus-visible:after{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardLinkComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardLinkComponent, selector: "[riv-card-link]", inputs: { mode: "mode", disabled: "disabled" }, host: { properties: { "class": "this.classes", "attr.aria-disabled": "this.ariaDisabled", "attr.tabindex": "this.tabIndex" } }, usesOnChanges: true, ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{padding:0;border:none;background:none;color:inherit;font:inherit;text-align:inherit;text-decoration:none;cursor:pointer}:host.disabled{color:var(--type-light-disabled);cursor:default}:host.region{display:block;min-width:0;transition:background-color var(--short-transition)}:host.region:not(.disabled):hover{background-color:var(--black-20)}:host.stretch:after{content:\"\";position:absolute;inset:0;z-index:var(--card-click-target-z-index);transition:background-color var(--short-transition)}:host.stretch:not(.disabled):hover:after{background-color:var(--black-20)}:host.stretch.disabled:after{pointer-events:none}:host.stretch:focus-visible{outline:none}:host.stretch:focus-visible:after{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardLinkComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardLinkComponent, decorators: [{
             type: Component,
             args: [{ selector: '[riv-card-link]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{padding:0;border:none;background:none;color:inherit;font:inherit;text-align:inherit;text-decoration:none;cursor:pointer}:host.disabled{color:var(--type-light-disabled);cursor:default}:host.region{display:block;min-width:0;transition:background-color var(--short-transition)}:host.region:not(.disabled):hover{background-color:var(--black-20)}:host.stretch:after{content:\"\";position:absolute;inset:0;z-index:var(--card-click-target-z-index);transition:background-color var(--short-transition)}:host.stretch:not(.disabled):hover:after{background-color:var(--black-20)}:host.stretch.disabled:after{pointer-events:none}:host.stretch:focus-visible{outline:none}:host.stretch:focus-visible:after{outline:var(--border-width-large) solid var(--type-light-link);outline-offset:calc(-1 * var(--border-width-large))}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { mode: [{
@@ -6529,10 +6529,10 @@ class CardMediaComponent {
     get heightStyle() {
         return this.height ?? null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: CardMediaComponent, selector: "riv-card-media", inputs: { src: "src", alt: "alt", aspectRatio: "aspectRatio", height: "height", fit: "fit" }, host: { properties: { "class": "this.classes", "style.aspect-ratio": "this.aspectRatioStyle", "style.height": "this.heightStyle" } }, ngImport: i0, template: "<img *ngIf=\"src\" class=\"image\" [src]=\"src\" [alt]=\"alt\" />\n<ng-content></ng-content>\n", styles: [":host{display:block;flex-shrink:0;overflow:hidden;min-width:0;background-color:var(--surface-light-1)}.image{display:block;width:100%;height:100%}:host.fit-cover .image{object-fit:cover}:host.fit-contain .image{object-fit:contain}:host.fit-fill .image{object-fit:fill}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardMediaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: CardMediaComponent, selector: "riv-card-media", inputs: { src: "src", alt: "alt", aspectRatio: "aspectRatio", height: "height", fit: "fit" }, host: { properties: { "class": "this.classes", "style.aspect-ratio": "this.aspectRatioStyle", "style.height": "this.heightStyle" } }, ngImport: i0, template: "<img *ngIf=\"src\" class=\"image\" [src]=\"src\" [alt]=\"alt\" />\n<ng-content></ng-content>\n", styles: [":host{display:block;flex-shrink:0;overflow:hidden;min-width:0;background-color:var(--surface-light-1)}.image{display:block;width:100%;height:100%}:host.fit-cover .image{object-fit:cover}:host.fit-contain .image{object-fit:contain}:host.fit-fill .image{object-fit:fill}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: CardMediaComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: CardMediaComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-card-media', changeDetection: ChangeDetectionStrategy.OnPush, template: "<img *ngIf=\"src\" class=\"image\" [src]=\"src\" [alt]=\"alt\" />\n<ng-content></ng-content>\n", styles: [":host{display:block;flex-shrink:0;overflow:hidden;min-width:0;background-color:var(--surface-light-1)}.image{display:block;width:100%;height:100%}:host.fit-cover .image{object-fit:cover}:host.fit-contain .image{object-fit:contain}:host.fit-fill .image{object-fit:fill}\n"] }]
         }], propDecorators: { src: [{
@@ -6629,10 +6629,10 @@ class SettingRowComponent {
     get editingClass() {
         return this.editing;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SettingRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SettingRowComponent, selector: "riv-setting-row", inputs: { label: "label", value: "value", infoTooltip: "infoTooltip", editing: "editing", saveDisabled: "saveDisabled", saving: "saving", tooltipMaxWidth: "tooltipMaxWidth" }, outputs: { edit: "edit", cancel: "cancel", save: "save" }, host: { properties: { "class.editing": "this.editingClass" } }, queries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<span class=\"label\">\n  <riv-icon\n    *ngIf=\"infoTooltip\"\n    [name]=\"'Info'\"\n    [size]=\"16\"\n    [rivTooltip]=\"infoTooltip\"\n    [rivTooltipMaxWidth]=\"tooltipMaxWidth\"\n  ></riv-icon>\n  {{ label }}\n</span>\n\n<ng-container *ngIf=\"!editing; else editMode\">\n  <span class=\"value\">\n    <ng-container *ngIf=\"value; else projectedValue\">{{ value }}</ng-container>\n    <ng-template #projectedValue>\n      <ng-content select=\"[display-value]\"></ng-content>\n    </ng-template>\n  </span>\n  <div class=\"actions\">\n    <button\n      rivButton\n      type=\"button\"\n      [icon]=\"'Edit2'\"\n      [rivTooltip]=\"'Edit'\"\n      [variant]=\"'ghost'\"\n      [attr.aria-label]=\"'Edit ' + label\"\n      (click)=\"edit.emit()\"\n    ></button>\n  </div>\n</ng-container>\n\n<ng-template #editMode>\n  <label class=\"field\">\n    <riv-sr-only>{{ label }}</riv-sr-only>\n    <ng-container *ngTemplateOutlet=\"editor ?? null\"></ng-container>\n  </label>\n\n  <div class=\"actions\">\n    <button\n      rivButton\n      type=\"button\"\n      [variant]=\"'basic'\"\n      [size]=\"'medium'\"\n      [disabled]=\"saving\"\n      (click)=\"cancel.emit()\"\n    >\n      Cancel\n    </button>\n    <button\n      rivButton\n      type=\"button\"\n      [variant]=\"'primary'\"\n      [size]=\"'medium'\"\n      [disabled]=\"saveDisabled || saving\"\n      [loading]=\"saving\"\n      (click)=\"save.emit()\"\n    >\n      Save\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--size-large);align-items:center;padding-block:var(--size-medium);color:var(--type-light-high-contrast)}.label,.value,.actions{display:flex;align-items:center;gap:var(--size-small)}.label{grid-column-end:span 4;font:var(--title-02)}.value{grid-column-end:span 7;font:var(--body-medium)}.field{grid-column-end:span 4}.actions{grid-column-end:span 1;justify-content:flex-end}:host.editing .actions{grid-column-end:span 4}\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: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: SrOnlyComponent, selector: "riv-sr-only" }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SettingRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SettingRowComponent, selector: "riv-setting-row", inputs: { label: "label", value: "value", infoTooltip: "infoTooltip", editing: "editing", saveDisabled: "saveDisabled", saving: "saving", tooltipMaxWidth: "tooltipMaxWidth" }, outputs: { edit: "edit", cancel: "cancel", save: "save" }, host: { properties: { "class.editing": "this.editingClass" } }, queries: [{ propertyName: "editor", first: true, predicate: ["editor"], descendants: true }], ngImport: i0, template: "<span class=\"label\">\n  <riv-icon\n    *ngIf=\"infoTooltip\"\n    [name]=\"'Info'\"\n    [size]=\"16\"\n    [rivTooltip]=\"infoTooltip\"\n    [rivTooltipMaxWidth]=\"tooltipMaxWidth\"\n  ></riv-icon>\n  {{ label }}\n</span>\n\n<ng-container *ngIf=\"!editing; else editMode\">\n  <span class=\"value\">\n    <ng-container *ngIf=\"value; else projectedValue\">{{ value }}</ng-container>\n    <ng-template #projectedValue>\n      <ng-content select=\"[display-value]\"></ng-content>\n    </ng-template>\n  </span>\n  <div class=\"actions\">\n    <button\n      rivButton\n      type=\"button\"\n      [icon]=\"'Edit2'\"\n      [rivTooltip]=\"'Edit'\"\n      [variant]=\"'ghost'\"\n      [attr.aria-label]=\"'Edit ' + label\"\n      (click)=\"edit.emit()\"\n    ></button>\n  </div>\n</ng-container>\n\n<ng-template #editMode>\n  <label class=\"field\">\n    <riv-sr-only>{{ label }}</riv-sr-only>\n    <ng-container *ngTemplateOutlet=\"editor ?? null\"></ng-container>\n  </label>\n\n  <div class=\"actions\">\n    <button\n      rivButton\n      type=\"button\"\n      [variant]=\"'basic'\"\n      [size]=\"'medium'\"\n      [disabled]=\"saving\"\n      (click)=\"cancel.emit()\"\n    >\n      Cancel\n    </button>\n    <button\n      rivButton\n      type=\"button\"\n      [variant]=\"'primary'\"\n      [size]=\"'medium'\"\n      [disabled]=\"saveDisabled || saving\"\n      [loading]=\"saving\"\n      (click)=\"save.emit()\"\n    >\n      Save\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--size-large);align-items:center;padding-block:var(--size-medium);color:var(--type-light-high-contrast)}.label,.value,.actions{display:flex;align-items:center;gap:var(--size-small)}.label{grid-column-end:span 4;font:var(--title-02)}.value{grid-column-end:span 7;font:var(--body-medium)}.field{grid-column-end:span 4}.actions{grid-column-end:span 1;justify-content:flex-end}:host.editing .actions{grid-column-end:span 4}\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: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: SrOnlyComponent, selector: "riv-sr-only" }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SettingRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SettingRowComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-setting-row', changeDetection: ChangeDetectionStrategy.OnPush, template: "<span class=\"label\">\n  <riv-icon\n    *ngIf=\"infoTooltip\"\n    [name]=\"'Info'\"\n    [size]=\"16\"\n    [rivTooltip]=\"infoTooltip\"\n    [rivTooltipMaxWidth]=\"tooltipMaxWidth\"\n  ></riv-icon>\n  {{ label }}\n</span>\n\n<ng-container *ngIf=\"!editing; else editMode\">\n  <span class=\"value\">\n    <ng-container *ngIf=\"value; else projectedValue\">{{ value }}</ng-container>\n    <ng-template #projectedValue>\n      <ng-content select=\"[display-value]\"></ng-content>\n    </ng-template>\n  </span>\n  <div class=\"actions\">\n    <button\n      rivButton\n      type=\"button\"\n      [icon]=\"'Edit2'\"\n      [rivTooltip]=\"'Edit'\"\n      [variant]=\"'ghost'\"\n      [attr.aria-label]=\"'Edit ' + label\"\n      (click)=\"edit.emit()\"\n    ></button>\n  </div>\n</ng-container>\n\n<ng-template #editMode>\n  <label class=\"field\">\n    <riv-sr-only>{{ label }}</riv-sr-only>\n    <ng-container *ngTemplateOutlet=\"editor ?? null\"></ng-container>\n  </label>\n\n  <div class=\"actions\">\n    <button\n      rivButton\n      type=\"button\"\n      [variant]=\"'basic'\"\n      [size]=\"'medium'\"\n      [disabled]=\"saving\"\n      (click)=\"cancel.emit()\"\n    >\n      Cancel\n    </button>\n    <button\n      rivButton\n      type=\"button\"\n      [variant]=\"'primary'\"\n      [size]=\"'medium'\"\n      [disabled]=\"saveDisabled || saving\"\n      [loading]=\"saving\"\n      (click)=\"save.emit()\"\n    >\n      Save\n    </button>\n  </div>\n</ng-template>\n", styles: [":host{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--size-large);align-items:center;padding-block:var(--size-medium);color:var(--type-light-high-contrast)}.label,.value,.actions{display:flex;align-items:center;gap:var(--size-small)}.label{grid-column-end:span 4;font:var(--title-02)}.value{grid-column-end:span 7;font:var(--body-medium)}.field{grid-column-end:span 4}.actions{grid-column-end:span 1;justify-content:flex-end}:host.editing .actions{grid-column-end:span 4}\n"] }]
         }], propDecorators: { label: [{
@@ -6866,10 +6866,10 @@ class EditableHeadingComponent {
         input.setSelectionRange(len, len);
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditableHeadingComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: EditableHeadingComponent, selector: "riv-editable-heading", inputs: { title: "title", description: "description", titleMaxLength: "titleMaxLength", descriptionMaxLength: "descriptionMaxLength", disabled: "disabled" }, outputs: { titleChange: "titleChange", descriptionChange: "descriptionChange" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event.target)" }, properties: { "class.editing": "this.isEditing" } }, viewQueries: [{ propertyName: "titleInputRef", first: true, predicate: ["titleInput"], descendants: true, read: ElementRef }, { propertyName: "descriptionInputRef", first: true, predicate: ["descriptionInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"leading\">\n  <ng-container [ngSwitch]=\"mode\">\n    <!-- View mode -->\n    <ng-container *ngSwitchDefault>\n      <button\n        type=\"button\"\n        class=\"title\"\n        [class.has-description]=\"description\"\n        [disabled]=\"disabled\"\n        [attr.aria-disabled]=\"disabled ? 'true' : null\"\n        rivTruncate\n        [attr.aria-label]=\"(title || 'Untitled') + ', rename'\"\n        (click)=\"startEditingTitle()\"\n      >\n        {{ title || 'Untitled' }}\n      </button>\n\n      <div class=\"divider\"></div>\n\n      <button\n        *ngIf=\"description; else addDescription\"\n        type=\"button\"\n        class=\"description\"\n        [disabled]=\"disabled\"\n        [attr.aria-disabled]=\"disabled ? 'true' : null\"\n        rivTruncate\n        [attr.aria-label]=\"description + ', edit description'\"\n        (click)=\"startEditingDescription()\"\n      >\n        {{ description }}\n      </button>\n\n      <ng-template #addDescription>\n        <div class=\"add-description-wrap\" *ngIf=\"!disabled\">\n          <button\n            rivButton\n            [variant]=\"'ghost'\"\n            [size]=\"'xsmall'\"\n            [icon]=\"'Plus'\"\n            [iconPosition]=\"'first'\"\n            type=\"button\"\n            (click)=\"startEditingDescription()\"\n          >\n            Add description\n          </button>\n        </div>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'editingTitle'\">\n      <riv-text-field\n        #titleInput\n        class=\"title-input\"\n        [value]=\"draftTitle\"\n        [maxLength]=\"titleMaxLength\"\n        [autoFocus]=\"true\"\n        (valueChange)=\"draftTitle = $event\"\n        (keydown.enter)=\"commitTitle()\"\n        (keydown.escape)=\"cancel()\"\n      ></riv-text-field>\n      <button\n        rivButton\n        type=\"button\"\n        class=\"commit\"\n        [variant]=\"'primary'\"\n        [icon]=\"'Check'\"\n        [disabled]=\"!draftTitle\"\n        (click)=\"commitTitle()\"\n        aria-label=\"Save title\"\n      ></button>\n    </ng-container>\n\n    <!-- Editing description -->\n    <ng-container *ngSwitchCase=\"'editingDescription'\">\n      <riv-text-field\n        #descriptionInput\n        class=\"description-input\"\n        placeholder=\"Add a description\"\n        [value]=\"draftDescription\"\n        [maxLength]=\"descriptionMaxLength\"\n        [autoFocus]=\"true\"\n        (valueChange)=\"draftDescription = $event\"\n        (keydown.enter)=\"commitDescription()\"\n        (keydown.escape)=\"cancel()\"\n      ></riv-text-field>\n      <button\n        rivButton\n        type=\"button\"\n        class=\"commit\"\n        [variant]=\"'primary'\"\n        [icon]=\"'Check'\"\n        (click)=\"commitDescription()\"\n        aria-label=\"Save description\"\n      ></button>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div class=\"actions\" *ngIf=\"!isEditing\">\n  <ng-content select=\"[actions]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:stretch;gap:var(--size-large);min-height:calc(var(--base-grid-size) * 8);font:var(--body-medium)}.leading{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--size-small)}.title,.description{padding:0;border:none;background:none;text-align:left;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.title:disabled,.description:disabled{cursor:default}.title{font:var(--stat-xsmall);line-height:calc(var(--base-grid-size) * 4.5);color:var(--type-light-high-contrast);max-width:100%}.title.has-description{width:fit-content;max-width:50%;flex-shrink:0}.description{font:var(--input-small);line-height:calc(var(--base-grid-size) * 3.5);color:var(--type-light-low-contrast);flex:1 1 auto}.divider{align-self:stretch;border-right:var(--border-width) solid var(--border-light);margin:0 var(--base-grid-size) 0 0;flex-shrink:0}.add-description-wrap{flex-shrink:0}.title-input,.description-input{flex:1 1 auto;min-width:0}.commit{flex-shrink:0}.actions{display:flex;align-items:center;gap:var(--size-small);flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: TextFieldComponent, selector: "riv-text-field", inputs: ["disabled", "readonly", "placeholder", "casing", "type", "size", "autoFocus", "name", "minLength", "maxLength", "value"], outputs: ["valueChange", "blur"] }, { kind: "component", type: TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditableHeadingComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: EditableHeadingComponent, selector: "riv-editable-heading", inputs: { title: "title", description: "description", titleMaxLength: "titleMaxLength", descriptionMaxLength: "descriptionMaxLength", disabled: "disabled" }, outputs: { titleChange: "titleChange", descriptionChange: "descriptionChange" }, host: { listeners: { "document:mousedown": "onDocumentMouseDown($event.target)" }, properties: { "class.editing": "this.isEditing" } }, viewQueries: [{ propertyName: "titleInputRef", first: true, predicate: ["titleInput"], descendants: true, read: ElementRef }, { propertyName: "descriptionInputRef", first: true, predicate: ["descriptionInput"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"leading\">\n  <ng-container [ngSwitch]=\"mode\">\n    <!-- View mode -->\n    <ng-container *ngSwitchDefault>\n      <button\n        type=\"button\"\n        class=\"title\"\n        [class.has-description]=\"description\"\n        [disabled]=\"disabled\"\n        [attr.aria-disabled]=\"disabled ? 'true' : null\"\n        rivTruncate\n        [attr.aria-label]=\"(title || 'Untitled') + ', rename'\"\n        (click)=\"startEditingTitle()\"\n      >\n        {{ title || 'Untitled' }}\n      </button>\n\n      <div class=\"divider\"></div>\n\n      <button\n        *ngIf=\"description; else addDescription\"\n        type=\"button\"\n        class=\"description\"\n        [disabled]=\"disabled\"\n        [attr.aria-disabled]=\"disabled ? 'true' : null\"\n        rivTruncate\n        [attr.aria-label]=\"description + ', edit description'\"\n        (click)=\"startEditingDescription()\"\n      >\n        {{ description }}\n      </button>\n\n      <ng-template #addDescription>\n        <div class=\"add-description-wrap\" *ngIf=\"!disabled\">\n          <button\n            rivButton\n            [variant]=\"'ghost'\"\n            [size]=\"'xsmall'\"\n            [icon]=\"'Plus'\"\n            [iconPosition]=\"'first'\"\n            type=\"button\"\n            (click)=\"startEditingDescription()\"\n          >\n            Add description\n          </button>\n        </div>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'editingTitle'\">\n      <riv-text-field\n        #titleInput\n        class=\"title-input\"\n        [value]=\"draftTitle\"\n        [maxLength]=\"titleMaxLength\"\n        [autoFocus]=\"true\"\n        (valueChange)=\"draftTitle = $event\"\n        (keydown.enter)=\"commitTitle()\"\n        (keydown.escape)=\"cancel()\"\n      ></riv-text-field>\n      <button\n        rivButton\n        type=\"button\"\n        class=\"commit\"\n        [variant]=\"'primary'\"\n        [icon]=\"'Check'\"\n        [disabled]=\"!draftTitle\"\n        (click)=\"commitTitle()\"\n        aria-label=\"Save title\"\n      ></button>\n    </ng-container>\n\n    <!-- Editing description -->\n    <ng-container *ngSwitchCase=\"'editingDescription'\">\n      <riv-text-field\n        #descriptionInput\n        class=\"description-input\"\n        placeholder=\"Add a description\"\n        [value]=\"draftDescription\"\n        [maxLength]=\"descriptionMaxLength\"\n        [autoFocus]=\"true\"\n        (valueChange)=\"draftDescription = $event\"\n        (keydown.enter)=\"commitDescription()\"\n        (keydown.escape)=\"cancel()\"\n      ></riv-text-field>\n      <button\n        rivButton\n        type=\"button\"\n        class=\"commit\"\n        [variant]=\"'primary'\"\n        [icon]=\"'Check'\"\n        (click)=\"commitDescription()\"\n        aria-label=\"Save description\"\n      ></button>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div class=\"actions\" *ngIf=\"!isEditing\">\n  <ng-content select=\"[actions]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:stretch;gap:var(--size-large);min-height:calc(var(--base-grid-size) * 8);font:var(--body-medium)}.leading{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--size-small)}.title,.description{padding:0;border:none;background:none;text-align:left;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.title:disabled,.description:disabled{cursor:default}.title{font:var(--stat-xsmall);line-height:calc(var(--base-grid-size) * 4.5);color:var(--type-light-high-contrast);max-width:100%}.title.has-description{width:fit-content;max-width:50%;flex-shrink:0}.description{font:var(--input-small);line-height:calc(var(--base-grid-size) * 3.5);color:var(--type-light-low-contrast);flex:1 1 auto}.divider{align-self:stretch;border-right:var(--border-width) solid var(--border-light);margin:0 var(--base-grid-size) 0 0;flex-shrink:0}.add-description-wrap{flex-shrink:0}.title-input,.description-input{flex:1 1 auto;min-width:0}.commit{flex-shrink:0}.actions{display:flex;align-items:center;gap:var(--size-small);flex-shrink:0}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i1.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: TextFieldComponent, selector: "riv-text-field", inputs: ["disabled", "readonly", "placeholder", "casing", "type", "size", "autoFocus", "name", "minLength", "maxLength", "value"], outputs: ["valueChange", "blur"] }, { kind: "component", type: TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditableHeadingComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditableHeadingComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-editable-heading', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"leading\">\n  <ng-container [ngSwitch]=\"mode\">\n    <!-- View mode -->\n    <ng-container *ngSwitchDefault>\n      <button\n        type=\"button\"\n        class=\"title\"\n        [class.has-description]=\"description\"\n        [disabled]=\"disabled\"\n        [attr.aria-disabled]=\"disabled ? 'true' : null\"\n        rivTruncate\n        [attr.aria-label]=\"(title || 'Untitled') + ', rename'\"\n        (click)=\"startEditingTitle()\"\n      >\n        {{ title || 'Untitled' }}\n      </button>\n\n      <div class=\"divider\"></div>\n\n      <button\n        *ngIf=\"description; else addDescription\"\n        type=\"button\"\n        class=\"description\"\n        [disabled]=\"disabled\"\n        [attr.aria-disabled]=\"disabled ? 'true' : null\"\n        rivTruncate\n        [attr.aria-label]=\"description + ', edit description'\"\n        (click)=\"startEditingDescription()\"\n      >\n        {{ description }}\n      </button>\n\n      <ng-template #addDescription>\n        <div class=\"add-description-wrap\" *ngIf=\"!disabled\">\n          <button\n            rivButton\n            [variant]=\"'ghost'\"\n            [size]=\"'xsmall'\"\n            [icon]=\"'Plus'\"\n            [iconPosition]=\"'first'\"\n            type=\"button\"\n            (click)=\"startEditingDescription()\"\n          >\n            Add description\n          </button>\n        </div>\n      </ng-template>\n    </ng-container>\n\n    <ng-container *ngSwitchCase=\"'editingTitle'\">\n      <riv-text-field\n        #titleInput\n        class=\"title-input\"\n        [value]=\"draftTitle\"\n        [maxLength]=\"titleMaxLength\"\n        [autoFocus]=\"true\"\n        (valueChange)=\"draftTitle = $event\"\n        (keydown.enter)=\"commitTitle()\"\n        (keydown.escape)=\"cancel()\"\n      ></riv-text-field>\n      <button\n        rivButton\n        type=\"button\"\n        class=\"commit\"\n        [variant]=\"'primary'\"\n        [icon]=\"'Check'\"\n        [disabled]=\"!draftTitle\"\n        (click)=\"commitTitle()\"\n        aria-label=\"Save title\"\n      ></button>\n    </ng-container>\n\n    <!-- Editing description -->\n    <ng-container *ngSwitchCase=\"'editingDescription'\">\n      <riv-text-field\n        #descriptionInput\n        class=\"description-input\"\n        placeholder=\"Add a description\"\n        [value]=\"draftDescription\"\n        [maxLength]=\"descriptionMaxLength\"\n        [autoFocus]=\"true\"\n        (valueChange)=\"draftDescription = $event\"\n        (keydown.enter)=\"commitDescription()\"\n        (keydown.escape)=\"cancel()\"\n      ></riv-text-field>\n      <button\n        rivButton\n        type=\"button\"\n        class=\"commit\"\n        [variant]=\"'primary'\"\n        [icon]=\"'Check'\"\n        (click)=\"commitDescription()\"\n        aria-label=\"Save description\"\n      ></button>\n    </ng-container>\n  </ng-container>\n</div>\n\n<div class=\"actions\" *ngIf=\"!isEditing\">\n  <ng-content select=\"[actions]\"></ng-content>\n</div>\n", styles: [":host{display:flex;align-items:stretch;gap:var(--size-large);min-height:calc(var(--base-grid-size) * 8);font:var(--body-medium)}.leading{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--size-small)}.title,.description{padding:0;border:none;background:none;text-align:left;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.title:disabled,.description:disabled{cursor:default}.title{font:var(--stat-xsmall);line-height:calc(var(--base-grid-size) * 4.5);color:var(--type-light-high-contrast);max-width:100%}.title.has-description{width:fit-content;max-width:50%;flex-shrink:0}.description{font:var(--input-small);line-height:calc(var(--base-grid-size) * 3.5);color:var(--type-light-low-contrast);flex:1 1 auto}.divider{align-self:stretch;border-right:var(--border-width) solid var(--border-light);margin:0 var(--base-grid-size) 0 0;flex-shrink:0}.add-description-wrap{flex-shrink:0}.title-input,.description-input{flex:1 1 auto;min-width:0}.commit{flex-shrink:0}.actions{display:flex;align-items:center;gap:var(--size-small);flex-shrink:0}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { title: [{
@@ -6942,10 +6942,10 @@ class PageHeaderComponent {
     get hasDescription() {
         return !this.isBack && !!this.description;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: PageHeaderComponent, selector: "riv-page-header", inputs: { title: "title", description: "description", backTo: "backTo" }, outputs: { back: "back" }, host: { properties: { "class.back": "this.isBack", "class.has-description": "this.hasDescription" } }, 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    <p *ngIf=\"description\" class=\"description\">{{ description }}</p>\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.has-description{align-items:flex-start}: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}.description{margin:var(--size-small) 0 0;max-width:100ch;font:var(--body-small);color:var(--type-light-low-contrast)}.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: PageHeaderComponent, selector: "riv-page-header", inputs: { title: "title", description: "description", backTo: "backTo" }, outputs: { back: "back" }, host: { properties: { "class.back": "this.isBack", "class.has-description": "this.hasDescription" } }, 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    <p *ngIf=\"description\" class=\"description\">{{ description }}</p>\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.has-description{align-items:flex-start}: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}.description{margin:var(--size-small) 0 0;max-width:100ch;font:var(--body-small);color:var(--type-light-low-contrast)}.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: "17.3.12", ngImport: i0, type: PageHeaderComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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    <p *ngIf=\"description\" class=\"description\">{{ description }}</p>\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.has-description{align-items:flex-start}: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}.description{margin:var(--size-small) 0 0;max-width:100ch;font:var(--body-small);color:var(--type-light-low-contrast)}.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: [{
@@ -6982,10 +6982,10 @@ class SimpleTabComponent {
     get ariaDisabled() {
         return this.locked ? 'true' : null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SimpleTabComponent, selector: "[riv-simple-tab]", inputs: { current: "current", locked: "locked" }, host: { properties: { "class": "this.classes", "attr.aria-current": "this.ariaCurrent", "attr.aria-disabled": "this.ariaDisabled" } }, ngImport: i0, template: "<ng-content></ng-content>\n<riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n", styles: [":host{font:inherit;color:var(--type-light-low-contrast);background-color:transparent;border:none;border-bottom:var(--border-width) solid transparent;margin-bottom:calc(var(--border-width) * -1);padding:var(--size-xsmall) var(--size-large);text-decoration:none;cursor:pointer;transition:background-color var(--medium-transition),border-color var(--medium-transition)}:host:hover:not(.locked){background-color:var(--surface-light-1)}:host:hover:not(.locked):not(.current){border-bottom-color:var(--border-light)}:host.current{color:var(--brand);border-bottom-color:var(--brand)}:host.locked{display:inline-flex;align-items:center;color:var(--type-light-disabled);cursor:default}riv-icon{margin-left:var(--size-small)}\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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SimpleTabComponent, selector: "[riv-simple-tab]", inputs: { current: "current", locked: "locked" }, host: { properties: { "class": "this.classes", "attr.aria-current": "this.ariaCurrent", "attr.aria-disabled": "this.ariaDisabled" } }, ngImport: i0, template: "<ng-content></ng-content>\n<riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n", styles: [":host{font:inherit;color:var(--type-light-low-contrast);background-color:transparent;border:none;border-bottom:var(--border-width) solid transparent;margin-bottom:calc(var(--border-width) * -1);padding:var(--size-xsmall) var(--size-large);text-decoration:none;cursor:pointer;transition:background-color var(--medium-transition),border-color var(--medium-transition)}:host:hover:not(.locked){background-color:var(--surface-light-1)}:host:hover:not(.locked):not(.current){border-bottom-color:var(--border-light)}:host.current{color:var(--brand);border-bottom-color:var(--brand)}:host.locked{display:inline-flex;align-items:center;color:var(--type-light-disabled);cursor:default}riv-icon{margin-left:var(--size-small)}\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: "17.3.12", ngImport: i0, type: SimpleTabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleTabComponent, decorators: [{
             type: Component,
             args: [{ selector: '[riv-simple-tab]', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<riv-icon *ngIf=\"locked\" [name]=\"'Lock'\" [size]=\"16\"></riv-icon>\n", styles: [":host{font:inherit;color:var(--type-light-low-contrast);background-color:transparent;border:none;border-bottom:var(--border-width) solid transparent;margin-bottom:calc(var(--border-width) * -1);padding:var(--size-xsmall) var(--size-large);text-decoration:none;cursor:pointer;transition:background-color var(--medium-transition),border-color var(--medium-transition)}:host:hover:not(.locked){background-color:var(--surface-light-1)}:host:hover:not(.locked):not(.current){border-bottom-color:var(--border-light)}:host.current{color:var(--brand);border-bottom-color:var(--brand)}:host.locked{display:inline-flex;align-items:center;color:var(--type-light-disabled);cursor:default}riv-icon{margin-left:var(--size-small)}\n"] }]
         }], propDecorators: { current: [{
@@ -7004,19 +7004,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 class SimpleTabsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SimpleTabsComponent, selector: "riv-simple-tabs", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-flex;border-bottom:var(--border-width) solid var(--border-light);font:var(--body-medium)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SimpleTabsComponent, selector: "riv-simple-tabs", ngImport: i0, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-flex;border-bottom:var(--border-width) solid var(--border-light);font:var(--body-medium)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-simple-tabs', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n", styles: [":host{display:inline-flex;border-bottom:var(--border-width) solid var(--border-light);font:var(--body-medium)}\n"] }]
         }] });
 class TabComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: TabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: [{
@@ -7027,10 +7027,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 class TabsComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: TabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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"] }]
         }] });
@@ -7535,8 +7535,8 @@ class OverlayOutletComponent {
         this.overlayService = overlayService;
         this.trackOverlay = (_, { key }) => key;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayOutletComponent, deps: [{ token: OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OverlayOutletComponent, deps: [{ token: OverlayService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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([
@@ -7557,7 +7557,7 @@ class OverlayOutletComponent {
             ]),
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OverlayOutletComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: OverlayOutletComponent, decorators: [{
             type: Component,
             args: [{ animations: [
                         trigger('animate', [
@@ -7593,10 +7593,10 @@ class ModalComponent {
             this.close.emit();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: ModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: [{
@@ -7615,10 +7615,10 @@ class SideSheetComponent {
         this.close = new EventEmitter();
         this.hook = ANIMATION_CONSTANTS.SIDE_SHEET.HOOK;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SideSheetComponent, selector: "riv-side-sheet", inputs: { topOffset: "topOffset", width: "width", obscure: "obscure", label: "label" }, 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    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"label ?? null\"\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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: SideSheetComponent, selector: "riv-side-sheet", inputs: { topOffset: "topOffset", width: "width", obscure: "obscure", label: "label" }, 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    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"label ?? null\"\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: "17.3.12", ngImport: i0, type: SideSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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    role=\"dialog\"\n    aria-modal=\"true\"\n    [attr.aria-label]=\"label ?? null\"\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: [{
@@ -7664,10 +7664,10 @@ class DialogStackService {
     isTopmostEscape(key, event) {
         return (event.key === 'Escape' && !event.defaultPrevented && this.isTopmost(key));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DialogStackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DialogStackService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialogStackService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialogStackService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DialogStackService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialogStackService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
         }] });
@@ -7691,10 +7691,10 @@ class DialogComponent {
             this.close.emit();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DialogComponent, deps: [{ token: DialogStackService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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\n      class=\"dialog\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-labelledby]=\"title ? titleId : null\"\n      [style.min-width]=\"minWidth\"\n    >\n      <header>\n        <span class=\"title\" [id]=\"titleId\">\n          {{ title }}\n        </span>\n        <button\n          type=\"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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DialogComponent, deps: [{ token: DialogStackService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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\n      class=\"dialog\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-labelledby]=\"title ? titleId : null\"\n      [style.min-width]=\"minWidth\"\n    >\n      <header>\n        <span class=\"title\" [id]=\"titleId\">\n          {{ title }}\n        </span>\n        <button\n          type=\"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: "17.3.12", ngImport: i0, type: DialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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\n      class=\"dialog\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      [attr.aria-labelledby]=\"title ? titleId : null\"\n      [style.min-width]=\"minWidth\"\n    >\n      <header>\n        <span class=\"title\" [id]=\"titleId\">\n          {{ title }}\n        </span>\n        <button\n          type=\"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"] }]
         }], ctorParameters: () => [{ type: DialogStackService }], propDecorators: { title: [{
@@ -7827,10 +7827,10 @@ class PermissionPickerComponent {
         this.sharedUsersChange.emit(RivViews.toSharedUsers(this.selectedUsers));
         this.cdr.markForCheck();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PermissionPickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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", "grow", "allowedCalloutPositions", "preferredCalloutPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: PermissionPickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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", "grow", "allowedCalloutPositions", "preferredCalloutPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: PermissionPickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { permission: [{
@@ -7931,10 +7931,10 @@ class EditViewComponent {
         }
         return EditViewComponent.NO_SHARED_USERS;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: EditViewComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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          type=\"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\n            type=\"button\"\n            rivButton\n            [variant]=\"'ghost'\"\n            (click)=\"close.emit()\"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: EditViewComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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          type=\"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\n            type=\"button\"\n            rivButton\n            [variant]=\"'ghost'\"\n            (click)=\"close.emit()\"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"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: "17.3.12", ngImport: i0, type: EditViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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          type=\"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\n            type=\"button\"\n            rivButton\n            [variant]=\"'ghost'\"\n            (click)=\"close.emit()\"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"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: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { anchor: [{
@@ -7971,10 +7971,10 @@ class MenuComponent {
         return (this.customTriggerButton?.nativeElement ??
             this.standardTriggerButton?.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: MenuComponent, selector: "riv-menu", inputs: { preferredPosition: "preferredPosition", disabled: "disabled" }, 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\n    type=\"button\"\n    #customTriggerButton\n    class=\"custom-trigger\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    (click)=\"open.next(true)\"\n  >\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    type=\"button\"\n    #standardTriggerButton\n    rivButton\n    [variant]=\"'ghost'\"\n    [size]=\"'xsmall'\"\n    [icon]=\"'MoreVertical'\"\n    [disabled]=\"disabled\"\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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: MenuComponent, selector: "riv-menu", inputs: { preferredPosition: "preferredPosition", disabled: "disabled" }, 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\n    type=\"button\"\n    #customTriggerButton\n    class=\"custom-trigger\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    (click)=\"open.next(true)\"\n  >\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    type=\"button\"\n    #standardTriggerButton\n    rivButton\n    [variant]=\"'ghost'\"\n    [size]=\"'xsmall'\"\n    [icon]=\"'MoreVertical'\"\n    [disabled]=\"disabled\"\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: "17.3.12", ngImport: i0, type: MenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-menu', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"triggerTemplate; else standardTrigger\">\n  <button\n    type=\"button\"\n    #customTriggerButton\n    class=\"custom-trigger\"\n    [disabled]=\"disabled\"\n    [attr.aria-disabled]=\"disabled ? 'true' : null\"\n    (click)=\"open.next(true)\"\n  >\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    type=\"button\"\n    #standardTriggerButton\n    rivButton\n    [variant]=\"'ghost'\"\n    [size]=\"'xsmall'\"\n    [icon]=\"'MoreVertical'\"\n    [disabled]=\"disabled\"\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: [{
@@ -8035,10 +8035,10 @@ class MenuItemComponent {
             event.preventDefault();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MenuItemComponent, deps: [{ token: MenuComponent }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MenuItemComponent, deps: [{ token: MenuComponent }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: MenuItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: () => [{ type: MenuComponent }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { locked: [{
@@ -8063,10 +8063,10 @@ class ViewMenuComponent {
         this.el = el;
         this.menuContext = 'tab';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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      type=\"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      [attr.aria-disabled]=\"view.system || view.temporary ? 'true' : null\"\n    >\n      {{ view.enabled ? 'Hide tab' : 'Show tab' }}\n    </button>\n    <div class=\"riv-divider\"></div>\n    <button\n      type=\"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      [attr.aria-disabled]=\"view.system ? 'true' : null\"\n    >\n      Edit view\n    </button>\n    <button\n      type=\"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      [attr.aria-disabled]=\"view.system ? 'true' : null\"\n    >\n      Rename view\n    </button>\n    <button\n      type=\"button\"\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({ type: 'duplicateView', view, menuContext })\n      \"\n      [disabled]=\"view.temporary\"\n      [attr.aria-disabled]=\"view.temporary ? 'true' : null\"\n    >\n      Duplicate view\n    </button>\n    <button\n      type=\"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      [attr.aria-disabled]=\"view.system ? 'true' : null\"\n    >\n      Delete view\n    </button>\n    <div class=\"riv-divider\"></div>\n    <button\n      type=\"button\"\n      riv-menu-item\n      (click)=\"manager?.actions?.next({ type: 'copyLinkToView', view })\"\n      [disabled]=\"view.temporary\"\n      [attr.aria-disabled]=\"view.temporary ? 'true' : null\"\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            type=\"button\"\n            rivButton\n            (click)=\"\n              manager?.actions?.next({ type: 'setDeletingView', context: null })\n            \"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"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", "disabled"] }, { kind: "component", type: MenuItemComponent, selector: "[riv-menu-item]", inputs: ["locked", "disabled", "variant"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ViewMenuComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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      type=\"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      [attr.aria-disabled]=\"view.system || view.temporary ? 'true' : null\"\n    >\n      {{ view.enabled ? 'Hide tab' : 'Show tab' }}\n    </button>\n    <div class=\"riv-divider\"></div>\n    <button\n      type=\"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      [attr.aria-disabled]=\"view.system ? 'true' : null\"\n    >\n      Edit view\n    </button>\n    <button\n      type=\"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      [attr.aria-disabled]=\"view.system ? 'true' : null\"\n    >\n      Rename view\n    </button>\n    <button\n      type=\"button\"\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({ type: 'duplicateView', view, menuContext })\n      \"\n      [disabled]=\"view.temporary\"\n      [attr.aria-disabled]=\"view.temporary ? 'true' : null\"\n    >\n      Duplicate view\n    </button>\n    <button\n      type=\"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      [attr.aria-disabled]=\"view.system ? 'true' : null\"\n    >\n      Delete view\n    </button>\n    <div class=\"riv-divider\"></div>\n    <button\n      type=\"button\"\n      riv-menu-item\n      (click)=\"manager?.actions?.next({ type: 'copyLinkToView', view })\"\n      [disabled]=\"view.temporary\"\n      [attr.aria-disabled]=\"view.temporary ? 'true' : null\"\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            type=\"button\"\n            rivButton\n            (click)=\"\n              manager?.actions?.next({ type: 'setDeletingView', context: null })\n            \"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"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", "disabled"] }, { 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: "17.3.12", ngImport: i0, type: ViewMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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      type=\"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      [attr.aria-disabled]=\"view.system || view.temporary ? 'true' : null\"\n    >\n      {{ view.enabled ? 'Hide tab' : 'Show tab' }}\n    </button>\n    <div class=\"riv-divider\"></div>\n    <button\n      type=\"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      [attr.aria-disabled]=\"view.system ? 'true' : null\"\n    >\n      Edit view\n    </button>\n    <button\n      type=\"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      [attr.aria-disabled]=\"view.system ? 'true' : null\"\n    >\n      Rename view\n    </button>\n    <button\n      type=\"button\"\n      riv-menu-item\n      (click)=\"\n        manager?.actions?.next({ type: 'duplicateView', view, menuContext })\n      \"\n      [disabled]=\"view.temporary\"\n      [attr.aria-disabled]=\"view.temporary ? 'true' : null\"\n    >\n      Duplicate view\n    </button>\n    <button\n      type=\"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      [attr.aria-disabled]=\"view.system ? 'true' : null\"\n    >\n      Delete view\n    </button>\n    <div class=\"riv-divider\"></div>\n    <button\n      type=\"button\"\n      riv-menu-item\n      (click)=\"manager?.actions?.next({ type: 'copyLinkToView', view })\"\n      [disabled]=\"view.temporary\"\n      [attr.aria-disabled]=\"view.temporary ? 'true' : null\"\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            type=\"button\"\n            rivButton\n            (click)=\"\n              manager?.actions?.next({ type: 'setDeletingView', context: null })\n            \"\n          >\n            Cancel\n          </button>\n          <button\n            type=\"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: () => [{ type: i0.ElementRef }], propDecorators: { manager: [{
@@ -8097,10 +8097,10 @@ class AllViewsModalComponent {
     trackById(_, view) {
         return view.id;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AllViewsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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\n    [label]=\"'All views'\"\n    [topOffset]=\"topOffset\"\n    (close)=\"close.emit()\"\n  >\n    <div class=\"content\">\n      <header>\n        <span class=\"title\">All views</span>\n        <button\n          type=\"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              type=\"button\"\n              class=\"permission-header\"\n              (click)=\"openChange(!open)\"\n              [disabled]=\"!!s.all.search\"\n              [attr.aria-disabled]=\"!!s.all.search ? 'true' : null\"\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                  type=\"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                    type=\"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                    [attr.aria-disabled]=\"view.system ? 'true' : null\"\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", "label"], outputs: ["close"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AllViewsModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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\n    [label]=\"'All views'\"\n    [topOffset]=\"topOffset\"\n    (close)=\"close.emit()\"\n  >\n    <div class=\"content\">\n      <header>\n        <span class=\"title\">All views</span>\n        <button\n          type=\"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              type=\"button\"\n              class=\"permission-header\"\n              (click)=\"openChange(!open)\"\n              [disabled]=\"!!s.all.search\"\n              [attr.aria-disabled]=\"!!s.all.search ? 'true' : null\"\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                  type=\"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                    type=\"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                    [attr.aria-disabled]=\"view.system ? 'true' : null\"\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", "label"], outputs: ["close"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { 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: "17.3.12", ngImport: i0, type: AllViewsModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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\n    [label]=\"'All views'\"\n    [topOffset]=\"topOffset\"\n    (close)=\"close.emit()\"\n  >\n    <div class=\"content\">\n      <header>\n        <span class=\"title\">All views</span>\n        <button\n          type=\"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              type=\"button\"\n              class=\"permission-header\"\n              (click)=\"openChange(!open)\"\n              [disabled]=\"!!s.all.search\"\n              [attr.aria-disabled]=\"!!s.all.search ? 'true' : null\"\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                  type=\"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                    type=\"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                    [attr.aria-disabled]=\"view.system ? 'true' : null\"\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: [{
@@ -8123,10 +8123,10 @@ class ToastComponent {
             this.close.emit();
         }, ToastComponent.DURATION);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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\" role=\"status\" [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,.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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\" role=\"status\" [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,.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: "17.3.12", ngImport: i0, type: ToastComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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\" role=\"status\" [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,.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: [{
@@ -8202,10 +8202,10 @@ class ViewsComponent {
     getPermissionDescription(permission) {
         return RivViews.getPermissionDescription(permission);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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          type=\"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      type=\"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              type=\"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        type=\"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", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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          type=\"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      type=\"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              type=\"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        type=\"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", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { 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: "17.3.12", ngImport: i0, type: ViewsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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          type=\"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      type=\"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              type=\"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        type=\"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: [{
@@ -8246,10 +8246,10 @@ class BannerActionComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BannerActionComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BannerActionComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: BannerActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { locked: [{
@@ -8288,10 +8288,10 @@ class BannerComponent {
         }
         return this.icon;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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\n  type=\"button\"\n  *ngIf=\"dismissable\"\n  class=\"dismiss\"\n  (click)=\"dismiss.emit()\"\n>\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", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: BannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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\n  type=\"button\"\n  *ngIf=\"dismissable\"\n  class=\"dismiss\"\n  (click)=\"dismiss.emit()\"\n>\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", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: BannerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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\n  type=\"button\"\n  *ngIf=\"dismissable\"\n  class=\"dismiss\"\n  (click)=\"dismiss.emit()\"\n>\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: [{
@@ -8364,10 +8364,10 @@ class MapIndicatorComponent {
             this.cached = undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MapIndicatorComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MapIndicatorComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: MapIndicatorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: () => [{ type: i0.ElementRef }], propDecorators: { name: [{
@@ -8381,10 +8381,10 @@ class NotificationBadgeComponent {
         this.count = null;
         this.variant = 'basic';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: NotificationBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: NotificationBadgeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: NotificationBadgeComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: [{
@@ -8412,10 +8412,10 @@ class LockedTooltipDirective extends TooltipDirective {
             this.rivTooltip = undefined;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LockedTooltipDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: LockedTooltipDirective, selector: "[rivLockedTooltip]", inputs: { rivLockedTooltip: "rivLockedTooltip", locked: "locked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LockedTooltipDirective, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: LockedTooltipDirective, selector: "[rivLockedTooltip]", inputs: { rivLockedTooltip: "rivLockedTooltip", locked: "locked" }, usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LockedTooltipDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LockedTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rivLockedTooltip]',
@@ -8503,10 +8503,10 @@ class FormDialogComponent {
             this.formSubmit.emit();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormDialogComponent, deps: [{ token: DialogStackService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: FormDialogComponent, selector: "riv-form-dialog", inputs: { title: "title", minWidth: "minWidth", customBody: "customBody", submitText: "submitText", submittingText: "submittingText", cancelText: "cancelText", canSubmit: "canSubmit", submitting: "submitting", loading: "loading", submitTooltip: "submitTooltip", closeText: "closeText", readonly: "readonly" }, outputs: { formSubmit: "formSubmit", close: "close" }, host: { listeners: { "document:keydown": "handleKeydown($event)" } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, static: true }], ngImport: i0, template: "<riv-modal (close)=\"requestClose()\" [obscure]=\"true\">\n  <div [attr.data-animation-hook]=\"hook\" class=\"wrapper\">\n    <div\n      #dialog\n      class=\"dialog\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      tabindex=\"-1\"\n      [attr.aria-labelledby]=\"title ? titleId : null\"\n      [style.min-width]=\"minWidth\"\n    >\n      <header>\n        <span class=\"title\" [id]=\"titleId\">\n          {{ title }}\n        </span>\n        <button\n          rivButton\n          type=\"button\"\n          [variant]=\"'ghost'\"\n          [icon]=\"'X'\"\n          [attr.aria-label]=\"closeText\"\n          [disabled]=\"submitting\"\n          (click)=\"requestClose()\"\n        ></button>\n      </header>\n      <form novalidate (submit)=\"handleSubmit($event)\">\n        <riv-loading-cover [loading]=\"loading\">\n          <div class=\"body\" [class.custom]=\"customBody\">\n            <ng-content></ng-content>\n          </div>\n        </riv-loading-cover>\n        <div class=\"footer riv-dialog-footer\">\n          <footer>\n            <div class=\"footer-start\">\n              <ng-content select=\"[footer-start]\"></ng-content>\n            </div>\n            <button\n              rivButton\n              type=\"button\"\n              [variant]=\"'ghost'\"\n              [disabled]=\"submitting\"\n              (click)=\"requestClose()\"\n            >\n              {{ readonly ? closeText : cancelText }}\n            </button>\n            <span\n              *ngIf=\"!readonly\"\n              class=\"submit-tooltip\"\n              [rivTooltip]=\"submitTooltip\"\n            >\n              <button\n                rivButton\n                type=\"submit\"\n                [variant]=\"'primary'\"\n                [disabled]=\"submitDisabled\"\n              >\n                {{ submitting ? submittingText : submitText }}\n              </button>\n            </span>\n          </footer>\n        </div>\n      </form>\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", "form{display:flex;flex-direction:column;min-height:0}riv-loading-cover{display:flex;flex-direction:column;min-height:0}.footer-start{display:flex;align-items:center;gap:var(--size-small);margin-right:auto}.submit-tooltip{display:inline-flex}.dialog:focus{outline:none}\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: LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "zIndexOverride", "errorMessage"] }, { kind: "component", type: ModalComponent, selector: "riv-modal", inputs: ["obscure", "topOffset"], outputs: ["close"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormDialogComponent, deps: [{ token: DialogStackService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FormDialogComponent, selector: "riv-form-dialog", inputs: { title: "title", minWidth: "minWidth", customBody: "customBody", submitText: "submitText", submittingText: "submittingText", cancelText: "cancelText", canSubmit: "canSubmit", submitting: "submitting", loading: "loading", submitTooltip: "submitTooltip", closeText: "closeText", readonly: "readonly" }, outputs: { formSubmit: "formSubmit", close: "close" }, host: { listeners: { "document:keydown": "handleKeydown($event)" } }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true, static: true }], ngImport: i0, template: "<riv-modal (close)=\"requestClose()\" [obscure]=\"true\">\n  <div [attr.data-animation-hook]=\"hook\" class=\"wrapper\">\n    <div\n      #dialog\n      class=\"dialog\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      tabindex=\"-1\"\n      [attr.aria-labelledby]=\"title ? titleId : null\"\n      [style.min-width]=\"minWidth\"\n    >\n      <header>\n        <span class=\"title\" [id]=\"titleId\">\n          {{ title }}\n        </span>\n        <button\n          rivButton\n          type=\"button\"\n          [variant]=\"'ghost'\"\n          [icon]=\"'X'\"\n          [attr.aria-label]=\"closeText\"\n          [disabled]=\"submitting\"\n          (click)=\"requestClose()\"\n        ></button>\n      </header>\n      <form novalidate (submit)=\"handleSubmit($event)\">\n        <riv-loading-cover [loading]=\"loading\">\n          <div class=\"body\" [class.custom]=\"customBody\">\n            <ng-content></ng-content>\n          </div>\n        </riv-loading-cover>\n        <div class=\"footer riv-dialog-footer\">\n          <footer>\n            <div class=\"footer-start\">\n              <ng-content select=\"[footer-start]\"></ng-content>\n            </div>\n            <button\n              rivButton\n              type=\"button\"\n              [variant]=\"'ghost'\"\n              [disabled]=\"submitting\"\n              (click)=\"requestClose()\"\n            >\n              {{ readonly ? closeText : cancelText }}\n            </button>\n            <span\n              *ngIf=\"!readonly\"\n              class=\"submit-tooltip\"\n              [rivTooltip]=\"submitTooltip\"\n            >\n              <button\n                rivButton\n                type=\"submit\"\n                [variant]=\"'primary'\"\n                [disabled]=\"submitDisabled\"\n              >\n                {{ submitting ? submittingText : submitText }}\n              </button>\n            </span>\n          </footer>\n        </div>\n      </form>\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", "form{display:flex;flex-direction:column;min-height:0}riv-loading-cover{display:flex;flex-direction:column;min-height:0}.footer-start{display:flex;align-items:center;gap:var(--size-small);margin-right:auto}.submit-tooltip{display:inline-flex}.dialog:focus{outline:none}\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: LoadingCoverComponent, selector: "riv-loading-cover", inputs: ["loading", "loadingSize", "zIndexOverride", "errorMessage"] }, { kind: "component", type: ModalComponent, selector: "riv-modal", inputs: ["obscure", "topOffset"], outputs: ["close"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FormDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FormDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-form-dialog', changeDetection: ChangeDetectionStrategy.OnPush, template: "<riv-modal (close)=\"requestClose()\" [obscure]=\"true\">\n  <div [attr.data-animation-hook]=\"hook\" class=\"wrapper\">\n    <div\n      #dialog\n      class=\"dialog\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      tabindex=\"-1\"\n      [attr.aria-labelledby]=\"title ? titleId : null\"\n      [style.min-width]=\"minWidth\"\n    >\n      <header>\n        <span class=\"title\" [id]=\"titleId\">\n          {{ title }}\n        </span>\n        <button\n          rivButton\n          type=\"button\"\n          [variant]=\"'ghost'\"\n          [icon]=\"'X'\"\n          [attr.aria-label]=\"closeText\"\n          [disabled]=\"submitting\"\n          (click)=\"requestClose()\"\n        ></button>\n      </header>\n      <form novalidate (submit)=\"handleSubmit($event)\">\n        <riv-loading-cover [loading]=\"loading\">\n          <div class=\"body\" [class.custom]=\"customBody\">\n            <ng-content></ng-content>\n          </div>\n        </riv-loading-cover>\n        <div class=\"footer riv-dialog-footer\">\n          <footer>\n            <div class=\"footer-start\">\n              <ng-content select=\"[footer-start]\"></ng-content>\n            </div>\n            <button\n              rivButton\n              type=\"button\"\n              [variant]=\"'ghost'\"\n              [disabled]=\"submitting\"\n              (click)=\"requestClose()\"\n            >\n              {{ readonly ? closeText : cancelText }}\n            </button>\n            <span\n              *ngIf=\"!readonly\"\n              class=\"submit-tooltip\"\n              [rivTooltip]=\"submitTooltip\"\n            >\n              <button\n                rivButton\n                type=\"submit\"\n                [variant]=\"'primary'\"\n                [disabled]=\"submitDisabled\"\n              >\n                {{ submitting ? submittingText : submitText }}\n              </button>\n            </span>\n          </footer>\n        </div>\n      </form>\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", "form{display:flex;flex-direction:column;min-height:0}riv-loading-cover{display:flex;flex-direction:column;min-height:0}.footer-start{display:flex;align-items:center;gap:var(--size-small);margin-right:auto}.submit-tooltip{display:inline-flex}.dialog:focus{outline:none}\n"] }]
         }], ctorParameters: () => [{ type: DialogStackService }, { type: i0.NgZone }], propDecorators: { title: [{
@@ -8562,10 +8562,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 })(FormDialogComponent || (FormDialogComponent = {}));
 class ToastActionComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ToastActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ToastActionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: ToastActionComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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"] }]
         }] });
@@ -8590,10 +8590,10 @@ class SimpleTableCellComponent {
         }
         return null;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleTableCellComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleTableCellComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: SimpleTableCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { classes: [{
@@ -8621,10 +8621,10 @@ class SimpleTableHeaderCellComponent {
     get width() {
         return this.elementRef.nativeElement.offsetWidth;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleTableHeaderCellComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleTableHeaderCellComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: SimpleTableHeaderCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { dataType: [{
@@ -8643,10 +8643,10 @@ class SimpleTableRowComponent {
     constructor() {
         this.selected = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: SimpleTableRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: [{
@@ -11102,10 +11102,10 @@ class SimpleTableComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SimpleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: "<div class=\"header\" *ngIf=\"headerTemplate\">\n  <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n</div>\n<div class=\"container\" tabindex=\"0\">\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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "<div class=\"header\" *ngIf=\"headerTemplate\">\n  <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n</div>\n<div class=\"container\" tabindex=\"0\">\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: "17.3.12", ngImport: i0, type: SimpleTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: SimpleTableComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-simple-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"header\" *ngIf=\"headerTemplate\">\n  <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n</div>\n<div class=\"container\" tabindex=\"0\">\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: [{
@@ -11129,10 +11129,10 @@ class TableCollapseAllComponent {
     isAllExpanded(collapseState) {
         return TableCollapseHelpers.isAllExpanded(collapseState);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableCollapseAllComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TableCollapseAllComponent, selector: "riv-table-collapse-all", inputs: { manager: "manager" }, ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <button type=\"button\" rivButton (click)=\"toggleAllCollapsed()\">\n    {{ isAllExpanded(s.collapseState) ? 'Collapse all' : 'Expand all' }}\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: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableCollapseAllComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TableCollapseAllComponent, selector: "riv-table-collapse-all", inputs: { manager: "manager" }, ngImport: i0, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <button type=\"button\" rivButton (click)=\"toggleAllCollapsed()\">\n    {{ isAllExpanded(s.collapseState) ? 'Collapse all' : 'Expand all' }}\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: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableCollapseAllComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableCollapseAllComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-table-collapse-all', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"manager?.state | async; let s\">\n  <button type=\"button\" rivButton (click)=\"toggleAllCollapsed()\">\n    {{ isAllExpanded(s.collapseState) ? 'Collapse all' : 'Expand all' }}\n  </button>\n</ng-container>\n" }]
         }], ctorParameters: () => [], propDecorators: { manager: [{
@@ -11336,10 +11336,10 @@ class TableColumnSettingsSideSheetComponent {
     hasUnavailableColumnsSection(columns, searching) {
         return columns.unavailableColumns.length > 0 && searching === false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableColumnSettingsSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 type=\"button\" #trigger rivButton (click)=\"open.next(true)\">\n  Columns\n</button>\n\n<ng-container *ngIf=\"columnList | async; let columns\">\n  <ng-container *ngIf=\"open | async\">\n    <riv-side-sheet\n      [label]=\"'Columns'\"\n      (close)=\"open.next(false); filterQuery.next('')\"\n    >\n      <div class=\"content\">\n        <div class=\"title\">\n          <span>Columns</span>\n          <button\n            type=\"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=\"hasEnabledColumnsSection(columns)\">\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                type=\"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\"\n                  [attr.draggable]=\"\n                    (searching | async) === false && !column.alwaysPinned\n                  \"\n                  [attr.droppable]=\"\n                    (searching | async) === false && !column.alwaysPinned\n                  \"\n                  [class.drop-zone]=\"!column.alwaysPinned\"\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                    !column.alwaysPinned\n                  \"\n                  [class.dragged-over-bottom]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx < i &&\n                    !column.alwaysPinned\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                    type=\"button\"\n                    class=\"hidden\"\n                    rivButton\n                    [rivTooltip]=\"\n                      !column.alwaysPinned\n                        ? 'Un-freeze columns'\n                        : 'The above columns cannot be unfrozen'\n                    \"\n                    class=\"disable-override\"\n                    [class.disabled]=\"!column.enabled || column.alwaysPinned\"\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              hasNoColumnsShownSection(columns, (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\n              type=\"button\"\n              rivButton\n              [variant]=\"'ghost'\"\n              (click)=\"resetToDefault()\"\n            >\n              Reset to default\n            </button>\n          </div>\n          <div\n            class=\"divider\"\n            *ngIf=\"\n              hasDisabledColumnsSection(columns) &&\n              (hasEnabledColumnsSection(columns) ||\n                hasNoColumnsShownSection(columns, (searching | async) ?? false))\n            \"\n          ></div>\n          <div\n            *ngIf=\"hasDisabledColumnsSection(columns)\"\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                type=\"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                  !column.alwaysPinned\n                \"\n                [attr.droppable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns) &&\n                  !column.alwaysPinned\n                \"\n                [class.drop-zone]=\"\n                  !disableEnablingColumns(columns) && !column.alwaysPinned\n                \"\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            class=\"divider\"\n            *ngIf=\"\n              hasUnavailableColumnsSection(\n                columns,\n                (searching | async) ?? false\n              ) &&\n              (hasDisabledColumnsSection(columns) ||\n                hasEnabledColumnsSection(columns) ||\n                hasNoColumnsShownSection(columns, (searching | async) ?? false))\n            \"\n          ></div>\n          <div\n            *ngIf=\"\n              hasUnavailableColumnsSection(\n                columns,\n                (searching | async) ?? false\n              )\n            \"\n          >\n            <div class=\"column-header\">\n              <span class=\"column-header-label\">\n                {{ columns.unavailableFolderTitle }}\n              </span>\n\n              <button\n                type=\"button\"\n                rivButton\n                class=\"chevron\"\n                [variant]=\"'ghost'\"\n                [size]=\"'small'\"\n                [icon]=\"\n                  unavailableFolderCollapsed ? 'ChevronDown' : 'ChevronUp'\n                \"\n                (click)=\"\n                  unavailableFolderCollapsed = !unavailableFolderCollapsed\n                \"\n              ></button>\n            </div>\n\n            <div *ngIf=\"!unavailableFolderCollapsed\" class=\"options\">\n              <div\n                *ngFor=\"let column of columns.unavailableColumns; let i = index\"\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\" [class.unavailable]=\"column.isUnavailable\">\n      <ng-container\n        *ngTemplateOutlet=\"reorderIcon; context: { column, columns }\"\n      ></ng-container>\n\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=\"\n          (column.enabled || !disableEnablingColumns(columns)) &&\n          !column.alwaysPinned &&\n          !column.isUnavailable\n        \"\n      >\n        <button\n          type=\"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          type=\"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\n          type=\"button\"\n          riv-menu-item\n          (click)=\"columnMoveTo(column, 'start')\"\n        >\n          Move to start\n        </button>\n        <button\n          type=\"button\"\n          riv-menu-item\n          (click)=\"columnMoveTo(column, 'end')\"\n        >\n          Move to end\n        </button>\n        <button\n          *ngIf=\"!column.alwaysVisible\"\n          type=\"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\n      <ng-container\n        *ngTemplateOutlet=\"enableIcon; context: { column, columns }\"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #reorderIcon let-column=\"column\" let-columns=\"columns\">\n  <ng-container *ngIf=\"(searching | async) === false\">\n    <span\n      *ngIf=\"!column.alwaysPinned && !column.isUnavailable\"\n      class=\"reorder\"\n      [class.disabled]=\"disableEnablingColumn(column, columns)\"\n      [rivTooltip]=\"column.tooltipForReorderIcon\"\n    >\n      <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n    </span>\n\n    <span\n      *ngIf=\"column.alwaysPinned || column.isUnavailable\"\n      class=\"reorder-locked\"\n      [class.disabled]=\"true\"\n      [rivTooltip]=\"column.tooltipForReorderIcon\"\n    >\n      <riv-icon [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n    </span>\n  </ng-container>\n</ng-template>\n\n<ng-template #enableIcon let-column=\"column\" let-columns=\"columns\">\n  <button\n    *ngIf=\"\n      !column.alwaysVisible && !column.alwaysPinned && !column.isUnavailable\n    \"\n    type=\"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\n  <button\n    *ngIf=\"column.alwaysVisible || column.alwaysPinned || column.isUnavailable\"\n    type=\"button\"\n    rivButton\n    [rivTooltip]=\"column.tooltipForHideIcon\"\n    [disabled]=\"true\"\n    [class.disabled]=\"true\"\n    [variant]=\"'ghost'\"\n    [size]=\"'small'\"\n    [icon]=\"'Lock'\"\n  ></button>\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,.column.unavailable{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}.reorder-locked{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);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)}.chevron{cursor:pointer}\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", "disabled"] }, { 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", "label"], outputs: ["close"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableColumnSettingsSideSheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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 type=\"button\" #trigger rivButton (click)=\"open.next(true)\">\n  Columns\n</button>\n\n<ng-container *ngIf=\"columnList | async; let columns\">\n  <ng-container *ngIf=\"open | async\">\n    <riv-side-sheet\n      [label]=\"'Columns'\"\n      (close)=\"open.next(false); filterQuery.next('')\"\n    >\n      <div class=\"content\">\n        <div class=\"title\">\n          <span>Columns</span>\n          <button\n            type=\"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=\"hasEnabledColumnsSection(columns)\">\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                type=\"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\"\n                  [attr.draggable]=\"\n                    (searching | async) === false && !column.alwaysPinned\n                  \"\n                  [attr.droppable]=\"\n                    (searching | async) === false && !column.alwaysPinned\n                  \"\n                  [class.drop-zone]=\"!column.alwaysPinned\"\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                    !column.alwaysPinned\n                  \"\n                  [class.dragged-over-bottom]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx < i &&\n                    !column.alwaysPinned\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                    type=\"button\"\n                    class=\"hidden\"\n                    rivButton\n                    [rivTooltip]=\"\n                      !column.alwaysPinned\n                        ? 'Un-freeze columns'\n                        : 'The above columns cannot be unfrozen'\n                    \"\n                    class=\"disable-override\"\n                    [class.disabled]=\"!column.enabled || column.alwaysPinned\"\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              hasNoColumnsShownSection(columns, (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\n              type=\"button\"\n              rivButton\n              [variant]=\"'ghost'\"\n              (click)=\"resetToDefault()\"\n            >\n              Reset to default\n            </button>\n          </div>\n          <div\n            class=\"divider\"\n            *ngIf=\"\n              hasDisabledColumnsSection(columns) &&\n              (hasEnabledColumnsSection(columns) ||\n                hasNoColumnsShownSection(columns, (searching | async) ?? false))\n            \"\n          ></div>\n          <div\n            *ngIf=\"hasDisabledColumnsSection(columns)\"\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                type=\"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                  !column.alwaysPinned\n                \"\n                [attr.droppable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns) &&\n                  !column.alwaysPinned\n                \"\n                [class.drop-zone]=\"\n                  !disableEnablingColumns(columns) && !column.alwaysPinned\n                \"\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            class=\"divider\"\n            *ngIf=\"\n              hasUnavailableColumnsSection(\n                columns,\n                (searching | async) ?? false\n              ) &&\n              (hasDisabledColumnsSection(columns) ||\n                hasEnabledColumnsSection(columns) ||\n                hasNoColumnsShownSection(columns, (searching | async) ?? false))\n            \"\n          ></div>\n          <div\n            *ngIf=\"\n              hasUnavailableColumnsSection(\n                columns,\n                (searching | async) ?? false\n              )\n            \"\n          >\n            <div class=\"column-header\">\n              <span class=\"column-header-label\">\n                {{ columns.unavailableFolderTitle }}\n              </span>\n\n              <button\n                type=\"button\"\n                rivButton\n                class=\"chevron\"\n                [variant]=\"'ghost'\"\n                [size]=\"'small'\"\n                [icon]=\"\n                  unavailableFolderCollapsed ? 'ChevronDown' : 'ChevronUp'\n                \"\n                (click)=\"\n                  unavailableFolderCollapsed = !unavailableFolderCollapsed\n                \"\n              ></button>\n            </div>\n\n            <div *ngIf=\"!unavailableFolderCollapsed\" class=\"options\">\n              <div\n                *ngFor=\"let column of columns.unavailableColumns; let i = index\"\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\" [class.unavailable]=\"column.isUnavailable\">\n      <ng-container\n        *ngTemplateOutlet=\"reorderIcon; context: { column, columns }\"\n      ></ng-container>\n\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=\"\n          (column.enabled || !disableEnablingColumns(columns)) &&\n          !column.alwaysPinned &&\n          !column.isUnavailable\n        \"\n      >\n        <button\n          type=\"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          type=\"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\n          type=\"button\"\n          riv-menu-item\n          (click)=\"columnMoveTo(column, 'start')\"\n        >\n          Move to start\n        </button>\n        <button\n          type=\"button\"\n          riv-menu-item\n          (click)=\"columnMoveTo(column, 'end')\"\n        >\n          Move to end\n        </button>\n        <button\n          *ngIf=\"!column.alwaysVisible\"\n          type=\"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\n      <ng-container\n        *ngTemplateOutlet=\"enableIcon; context: { column, columns }\"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #reorderIcon let-column=\"column\" let-columns=\"columns\">\n  <ng-container *ngIf=\"(searching | async) === false\">\n    <span\n      *ngIf=\"!column.alwaysPinned && !column.isUnavailable\"\n      class=\"reorder\"\n      [class.disabled]=\"disableEnablingColumn(column, columns)\"\n      [rivTooltip]=\"column.tooltipForReorderIcon\"\n    >\n      <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n    </span>\n\n    <span\n      *ngIf=\"column.alwaysPinned || column.isUnavailable\"\n      class=\"reorder-locked\"\n      [class.disabled]=\"true\"\n      [rivTooltip]=\"column.tooltipForReorderIcon\"\n    >\n      <riv-icon [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n    </span>\n  </ng-container>\n</ng-template>\n\n<ng-template #enableIcon let-column=\"column\" let-columns=\"columns\">\n  <button\n    *ngIf=\"\n      !column.alwaysVisible && !column.alwaysPinned && !column.isUnavailable\n    \"\n    type=\"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\n  <button\n    *ngIf=\"column.alwaysVisible || column.alwaysPinned || column.isUnavailable\"\n    type=\"button\"\n    rivButton\n    [rivTooltip]=\"column.tooltipForHideIcon\"\n    [disabled]=\"true\"\n    [class.disabled]=\"true\"\n    [variant]=\"'ghost'\"\n    [size]=\"'small'\"\n    [icon]=\"'Lock'\"\n  ></button>\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,.column.unavailable{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}.reorder-locked{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);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)}.chevron{cursor:pointer}\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", "disabled"] }, { 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", "label"], outputs: ["close"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableColumnSettingsSideSheetComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableColumnSettingsSideSheetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-table-column-settings-side-sheet', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button type=\"button\" #trigger rivButton (click)=\"open.next(true)\">\n  Columns\n</button>\n\n<ng-container *ngIf=\"columnList | async; let columns\">\n  <ng-container *ngIf=\"open | async\">\n    <riv-side-sheet\n      [label]=\"'Columns'\"\n      (close)=\"open.next(false); filterQuery.next('')\"\n    >\n      <div class=\"content\">\n        <div class=\"title\">\n          <span>Columns</span>\n          <button\n            type=\"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=\"hasEnabledColumnsSection(columns)\">\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                type=\"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\"\n                  [attr.draggable]=\"\n                    (searching | async) === false && !column.alwaysPinned\n                  \"\n                  [attr.droppable]=\"\n                    (searching | async) === false && !column.alwaysPinned\n                  \"\n                  [class.drop-zone]=\"!column.alwaysPinned\"\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                    !column.alwaysPinned\n                  \"\n                  [class.dragged-over-bottom]=\"\n                    draggedOverColumnIdx === i &&\n                    draggedColumnIdx !== null &&\n                    draggedColumnIdx < i &&\n                    !column.alwaysPinned\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                    type=\"button\"\n                    class=\"hidden\"\n                    rivButton\n                    [rivTooltip]=\"\n                      !column.alwaysPinned\n                        ? 'Un-freeze columns'\n                        : 'The above columns cannot be unfrozen'\n                    \"\n                    class=\"disable-override\"\n                    [class.disabled]=\"!column.enabled || column.alwaysPinned\"\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              hasNoColumnsShownSection(columns, (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\n              type=\"button\"\n              rivButton\n              [variant]=\"'ghost'\"\n              (click)=\"resetToDefault()\"\n            >\n              Reset to default\n            </button>\n          </div>\n          <div\n            class=\"divider\"\n            *ngIf=\"\n              hasDisabledColumnsSection(columns) &&\n              (hasEnabledColumnsSection(columns) ||\n                hasNoColumnsShownSection(columns, (searching | async) ?? false))\n            \"\n          ></div>\n          <div\n            *ngIf=\"hasDisabledColumnsSection(columns)\"\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                type=\"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                  !column.alwaysPinned\n                \"\n                [attr.droppable]=\"\n                  (searching | async) === false &&\n                  !disableEnablingColumns(columns) &&\n                  !column.alwaysPinned\n                \"\n                [class.drop-zone]=\"\n                  !disableEnablingColumns(columns) && !column.alwaysPinned\n                \"\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            class=\"divider\"\n            *ngIf=\"\n              hasUnavailableColumnsSection(\n                columns,\n                (searching | async) ?? false\n              ) &&\n              (hasDisabledColumnsSection(columns) ||\n                hasEnabledColumnsSection(columns) ||\n                hasNoColumnsShownSection(columns, (searching | async) ?? false))\n            \"\n          ></div>\n          <div\n            *ngIf=\"\n              hasUnavailableColumnsSection(\n                columns,\n                (searching | async) ?? false\n              )\n            \"\n          >\n            <div class=\"column-header\">\n              <span class=\"column-header-label\">\n                {{ columns.unavailableFolderTitle }}\n              </span>\n\n              <button\n                type=\"button\"\n                rivButton\n                class=\"chevron\"\n                [variant]=\"'ghost'\"\n                [size]=\"'small'\"\n                [icon]=\"\n                  unavailableFolderCollapsed ? 'ChevronDown' : 'ChevronUp'\n                \"\n                (click)=\"\n                  unavailableFolderCollapsed = !unavailableFolderCollapsed\n                \"\n              ></button>\n            </div>\n\n            <div *ngIf=\"!unavailableFolderCollapsed\" class=\"options\">\n              <div\n                *ngFor=\"let column of columns.unavailableColumns; let i = index\"\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\" [class.unavailable]=\"column.isUnavailable\">\n      <ng-container\n        *ngTemplateOutlet=\"reorderIcon; context: { column, columns }\"\n      ></ng-container>\n\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=\"\n          (column.enabled || !disableEnablingColumns(columns)) &&\n          !column.alwaysPinned &&\n          !column.isUnavailable\n        \"\n      >\n        <button\n          type=\"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          type=\"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\n          type=\"button\"\n          riv-menu-item\n          (click)=\"columnMoveTo(column, 'start')\"\n        >\n          Move to start\n        </button>\n        <button\n          type=\"button\"\n          riv-menu-item\n          (click)=\"columnMoveTo(column, 'end')\"\n        >\n          Move to end\n        </button>\n        <button\n          *ngIf=\"!column.alwaysVisible\"\n          type=\"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\n      <ng-container\n        *ngTemplateOutlet=\"enableIcon; context: { column, columns }\"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #reorderIcon let-column=\"column\" let-columns=\"columns\">\n  <ng-container *ngIf=\"(searching | async) === false\">\n    <span\n      *ngIf=\"!column.alwaysPinned && !column.isUnavailable\"\n      class=\"reorder\"\n      [class.disabled]=\"disableEnablingColumn(column, columns)\"\n      [rivTooltip]=\"column.tooltipForReorderIcon\"\n    >\n      <riv-icon [name]=\"'Reorder'\" [size]=\"20\"></riv-icon>\n    </span>\n\n    <span\n      *ngIf=\"column.alwaysPinned || column.isUnavailable\"\n      class=\"reorder-locked\"\n      [class.disabled]=\"true\"\n      [rivTooltip]=\"column.tooltipForReorderIcon\"\n    >\n      <riv-icon [name]=\"'Lock'\" [size]=\"20\"></riv-icon>\n    </span>\n  </ng-container>\n</ng-template>\n\n<ng-template #enableIcon let-column=\"column\" let-columns=\"columns\">\n  <button\n    *ngIf=\"\n      !column.alwaysVisible && !column.alwaysPinned && !column.isUnavailable\n    \"\n    type=\"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\n  <button\n    *ngIf=\"column.alwaysVisible || column.alwaysPinned || column.isUnavailable\"\n    type=\"button\"\n    rivButton\n    [rivTooltip]=\"column.tooltipForHideIcon\"\n    [disabled]=\"true\"\n    [class.disabled]=\"true\"\n    [variant]=\"'ghost'\"\n    [size]=\"'small'\"\n    [icon]=\"'Lock'\"\n  ></button>\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,.column.unavailable{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}.reorder-locked{padding-right:var(--size-medium);display:flex;justify-content:center;align-items:center;align-self:stretch;color:var(--type-light-low-contrast);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)}.chevron{cursor:pointer}\n"] }]
         }], propDecorators: { manager: [{
@@ -11457,10 +11457,10 @@ class TableColumnSettingsComponent {
             this.draggedOverColumnIdx = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableColumnSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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  type=\"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            type=\"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          type=\"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          type=\"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-low-contrast)}.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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableColumnSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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  type=\"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            type=\"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          type=\"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          type=\"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-low-contrast)}.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: "17.3.12", ngImport: i0, type: TableColumnSettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableColumnSettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-table-column-settings', changeDetection: ChangeDetectionStrategy.OnPush, template: "<button\n  type=\"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            type=\"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          type=\"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          type=\"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-low-contrast)}.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: [{
@@ -11488,10 +11488,10 @@ class TableCsvExportComponent {
             this.cdr.markForCheck();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableCsvExportComponent, deps: [{ token: DownloadService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableCsvExportComponent, deps: [{ token: DownloadService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableCsvExportComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: () => [{ type: DownloadService }, { type: i0.ChangeDetectorRef }], propDecorators: { manager: [{
@@ -11509,10 +11509,10 @@ class TableHeaderResizeHandleComponent {
             return fromEvent(this.documentRef, 'mousemove').pipe(map(({ clientX }) => width + clientX - right), distinctUntilChanged(), takeUntil(fromEvent(this.documentRef, 'mouseup')), concatWith(of(null)));
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableHeaderResizeHandleComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableHeaderResizeHandleComponent, deps: [{ token: i0.ElementRef }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableHeaderResizeHandleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableHeaderResizeHandleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'riv-table-header-resize-handle', changeDetection: ChangeDetectionStrategy.OnPush, 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: () => [{ type: i0.ElementRef }, { type: Document, decorators: [{
@@ -11557,10 +11557,10 @@ class TableSearchColumnsComponent {
             payload,
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableSearchColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TableSearchColumnsComponent, selector: "riv-table-search-columns", inputs: { manager: "manager", disabled: "disabled" }, ngImport: i0, template: "<ng-container *ngIf=\"columnList | async; let s\">\n  <button\n    type=\"button\"\n    #trigger\n    class=\"trigger-button\"\n    (click)=\"open.next(true)\"\n  >\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", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableSearchColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TableSearchColumnsComponent, selector: "riv-table-search-columns", inputs: { manager: "manager", disabled: "disabled" }, ngImport: i0, template: "<ng-container *ngIf=\"columnList | async; let s\">\n  <button\n    type=\"button\"\n    #trigger\n    class=\"trigger-button\"\n    (click)=\"open.next(true)\"\n  >\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", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableSearchColumnsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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\n    type=\"button\"\n    #trigger\n    class=\"trigger-button\"\n    (click)=\"open.next(true)\"\n  >\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: [{
@@ -11618,10 +11618,10 @@ class TableSearchComponent {
         this.destroy.next();
         this.destroy.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableSearchComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: TableSearchComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: [{
@@ -12121,10 +12121,10 @@ class TableComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: TableComponent, selector: "riv-table", inputs: { manager: "manager" }, host: { listeners: { "document:keydown": "keyDown($event)", "document:keyup": "keyUp($event)", "document:copy": "onCopy($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    <div class=\"header\" *ngIf=\"headerTemplate\">\n      <ng-container\n        *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n      ></ng-container>\n    </div>\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        tabindex=\"0\"\n        [ngClass]=\"{\n          'container-ungrouped': !isGroupResult(s.result),\n          'has-header': !isGroupResult(s.result) && 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\n        <!--\n          An overview of the templates we are using:\n\n          headersAndTableBody - helps us create multiple tables for grouped results\n            headerRowWithSubRows - helps us create header rows for nested with header results\n              nestedRowWithSubRows - helps us create nested rows for the nested result types\n                rowWrappedWithRowLink - helps us add a rowlink to a row\n                  rowBody - displays the row content\n        -->\n\n        <!-- When we are grouped, we show one table per group -->\n        <ng-container\n          *ngIf=\"\n            isGroupResult(s.result) && s.result.resultType === 'table-grouping'\n          \"\n        >\n          <ng-container\n            *ngFor=\"\n              let group of s.result.rowGroups;\n              trackBy: trackByGroup;\n              let last = last\n            \"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                headersAndTableBody;\n                context: { group: group, last: last }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n\n        <!-- When we aren't grouped, we show one table -->\n        <ng-container\n          *ngIf=\"isRegularResult(s.result) || isNestedResult(s.result)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              headersAndTableBody;\n              context: { group: null, last: true }\n            \"\n          ></ng-container>\n        </ng-container>\n\n        <ng-template let-group=\"group\" let-last=\"last\" #headersAndTableBody>\n          <ng-container *ngIf=\"isGroupResult(s.result) && group !== null\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                subheaderTemplate || null;\n                context: { state: s, group }\n              \"\n            ></ng-container>\n          </ng-container>\n          <div [ngClass]=\"{ 'subcontainer-grouped': isGroupResult(s.result) }\">\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=\"!isGroupResult(s.result)\"\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=\"isGroupResult(s.result) && group !== null\"\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                    *ngIf=\"isNestedResult(s.result) && !!s.result.hasHeaders\"\n                    class=\"toggle-head\"\n                  >\n                    <!-- Add a column for the chevrons, if we have togglable headers -->\n                    <riv-sr-only>Toggles</riv-sr-only>\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]=\"\n                      s.display.columnsAreReorderable && !column.alwaysPinned\n                    \"\n                    [attr.droppable]=\"!column.alwaysPinned\"\n                    [class.drop-zone]=\"!column.alwaysPinned\"\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                      !column.alwaysPinned\n                    \"\n                    [class.dragged-over-right]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx < i &&\n                      !column.alwaysPinned\n                    \"\n                  >\n                    <div\n                      *ngIf=\"!showMenuOnColumnName(s, column)\"\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                      <riv-table-header-resize-handle\n                        (dragResize)=\"setWidth(column.key, $event)\"\n                      ></riv-table-header-resize-handle>\n                    </div>\n                    <riv-menu *ngIf=\"showMenuOnColumnName(s, column)\">\n                      <ng-template #trigger>\n                        <span\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                        </span>\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                          type=\"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                          type=\"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                          type=\"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                        type=\"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                      <!-- We only show the divider when we will have an item both above and below the divider. -->\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"\n                          (column.orderable || column.filterable) &&\n                          (columnCanFreeze(s, column) ||\n                            columnCanHide(s, column))\n                        \"\n                      ></div>\n                      <ng-container *ngIf=\"columnCanFreeze(s, column)\">\n                        <button\n                          type=\"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                          type=\"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                        type=\"button\"\n                        *ngIf=\"columnCanHide(s, column)\"\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                  <!-- Grouped results do not have subrows or headers -->\n                  <ng-container\n                    *ngIf=\"isGroupResult(s.result) && group !== null\"\n                  >\n                    <ng-container\n                      *ngFor=\"\n                        let row of group.rows;\n                        let rowIndex = index;\n                        trackBy: trackByRow\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          rowWrappedWithRowLink;\n                          context: {\n                            row: row,\n                            rowIndex: rowIndex,\n                            depth: 0,\n                            hasSubRows: false,\n                            rowIsCollapsed: false\n                          }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                  </ng-container>\n\n                  <!-- Regular results do not have subrows or headers -->\n                  <ng-container\n                    *ngIf=\"\n                      isRegularResult(s.result) &&\n                      s.result.resultType === 'normal-rows'\n                    \"\n                  >\n                    <ng-container\n                      *ngFor=\"\n                        let row of s.result.rowsAsGroup.rows;\n                        let rowIndex = index;\n                        trackBy: trackByRow\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          rowWrappedWithRowLink;\n                          context: {\n                            row: row,\n                            rowIndex: rowIndex,\n                            depth: 0,\n                            hasSubRows: false,\n                            rowIsCollapsed: false\n                          }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                  </ng-container>\n\n                  <!-- Nested with header results have subrows and headers -->\n                  <ng-container\n                    *ngIf=\"\n                      isNestedResult(s.result) &&\n                      s.result.resultType === 'nested-rows'\n                    \"\n                  >\n                    <ng-container\n                      *ngFor=\"\n                        let headerRow of s.result.nestedHeaderRows;\n                        trackBy: trackByNestedHeader\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          headerRowWithSubRows;\n                          context: { headerRow: headerRow }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                  </ng-container>\n\n                  <ng-template let-headerRow=\"headerRow\" #headerRowWithSubRows>\n                    <!-- Display the header -->\n                    <ng-container *ngIf=\"headerRow.headerText !== null\">\n                      <tr\n                        class=\"toggle-header-row\"\n                        (click)=\"toggleHeaderCollapse(headerRow.id)\"\n                      >\n                        <td class=\"toggle-body\">\n                          <!-- Rows with subrows have a chevron indicating you can click the row to see the subrows. -->\n                          <riv-icon\n                            class=\"prevent-shrink chevron\"\n                            [name]=\"\n                              headerRow.isCollapsed\n                                ? 'ChevronDown'\n                                : 'ChevronUp'\n                            \"\n                            [size]=\"16\"\n                          ></riv-icon>\n                        </td>\n                        <td\n                          class=\"toggle-header\"\n                          [attr.colspan]=\"s.display.columns.length\"\n                        >\n                          <span class=\"toggle-header-text\">\n                            {{ headerRow.headerText }}\n                          </span>\n                        </td>\n                        <td *ngIf=\"menuTemplate\"></td>\n                      </tr>\n                    </ng-container>\n\n                    <!-- If a header is not collapsed, also show its subrows -->\n                    <ng-container\n                      *ngIf=\"\n                        !headerRow.isCollapsed && headerRow.subRows.length > 0\n                      \"\n                    >\n                      <ng-container\n                        *ngFor=\"\n                          let nestedRow of headerRow.subRows;\n                          trackBy: trackByNestedRow\n                        \"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            nestedRowWithSubRows;\n                            context: { nestedRow: nestedRow, depth: 0 }\n                          \"\n                        ></ng-container>\n                      </ng-container>\n                    </ng-container>\n                  </ng-template>\n\n                  <ng-template\n                    let-nestedRow=\"nestedRow\"\n                    let-depth=\"depth\"\n                    #nestedRowWithSubRows\n                  >\n                    <!-- Display the current row -->\n                    <ng-container\n                      [ngTemplateOutlet]=\"rowWrappedWithRowLink\"\n                      [ngTemplateOutletContext]=\"{\n                        row: nestedRow.data,\n                        rowIndex: -1,\n                        depth: depth,\n                        hasSubRows: nestedRow.subRows?.length > 0,\n                        rowIsCollapsed: nestedRow.isCollapsed\n                      }\"\n                    >\n                    </ng-container>\n\n                    <!-- If a row is not collapsed, also show its subrows -->\n                    <ng-container\n                      *ngIf=\"\n                        !nestedRow.isCollapsed && nestedRow.subRows?.length > 0\n                      \"\n                    >\n                      <ng-container\n                        *ngFor=\"\n                          let subRow of nestedRow.subRows;\n                          trackBy: trackByNestedRow\n                        \"\n                      >\n                        <ng-container\n                          [ngTemplateOutlet]=\"nestedRowWithSubRows\"\n                          [ngTemplateOutletContext]=\"{\n                            nestedRow: subRow,\n                            depth: depth + 1\n                          }\"\n                        >\n                        </ng-container>\n                      </ng-container>\n                    </ng-container>\n                  </ng-template>\n\n                  <ng-template\n                    let-row=\"row\"\n                    let-rowIndex=\"rowIndex\"\n                    let-depth=\"depth\"\n                    let-hasSubRows=\"hasSubRows\"\n                    let-rowIsCollapsed=\"rowIsCollapsed\"\n                    #rowWrappedWithRowLink\n                  >\n                    <ng-container\n                      *ngIf=\"{\n                        row: row,\n                        rowIndex: rowIndex,\n                        depth: depth,\n                        hasSubRows: hasSubRows,\n                        rowIsCollapsed: rowIsCollapsed\n                      } as rowContext\"\n                    >\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; context: rowContext\"\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; context: rowContext\"\n                          ></ng-container>\n                        </a>\n                      </ng-container>\n                      <tr\n                        *ngIf=\"!row.rowLink\"\n                        [class.grayed]=\"s.display.rowsAreGrayed\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"rowBody; context: rowContext\"\n                        ></ng-container>\n                      </tr>\n                    </ng-container>\n                  </ng-template>\n\n                  <ng-template\n                    let-row=\"row\"\n                    let-rowIndex=\"rowIndex\"\n                    let-depth=\"depth\"\n                    let-hasSubRows=\"hasSubRows\"\n                    let-rowIsCollapsed=\"rowIsCollapsed\"\n                    #rowBody\n                  >\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                    <td\n                      *ngIf=\"isNestedResult(s.result) && !!s.result.hasHeaders\"\n                      class=\"toggle-body\"\n                    >\n                      <!-- This td lines up with the header chevron column -->\n                    </td>\n                    <ng-container\n                      *ngFor=\"\n                        let column of s.display.columns;\n                        index as columnIndex;\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                          [class.toggleable-cell]=\"\n                            showChevronForCell(columnIndex, hasSubRows, depth)\n                          \"\n                          [style.left.px]=\"column.left\"\n                          [style.text-align]=\"column.alignment\"\n                          (click)=\"\n                            showChevronForCell(columnIndex, hasSubRows, depth)\n                              ? toggleRowCollapse(row.id)\n                              : handleClick($event, column)\n                          \"\n                        >\n                          <ng-template #cellContent>\n                            <ng-container\n                              *ngIf=\"!blankCellDueToNesting(columnIndex, depth)\"\n                            >\n                              <ng-container\n                                *ngTemplateOutlet=\"\n                                  cellTemplate || null;\n                                  context: { row: row, column: column }\n                                \"\n                              ></ng-container>\n                            </ng-container>\n                          </ng-template>\n\n                          <!-- Rows with subrows have a chevron indicating you can click the row to see the subrows. -->\n                          <div\n                            *ngIf=\"\n                              showChevronForCell(\n                                columnIndex,\n                                hasSubRows,\n                                depth\n                              );\n                              else cellContent\n                            \"\n                            class=\"toggleable-cell-content\"\n                          >\n                            <riv-icon\n                              class=\"prevent-shrink chevron\"\n                              [name]=\"\n                                rowIsCollapsed ? 'ChevronDown' : 'ChevronUp'\n                              \"\n                              [size]=\"16\"\n                            ></riv-icon>\n                            <div class=\"toggleable-cell-value\">\n                              <ng-container\n                                *ngTemplateOutlet=\"cellContent\"\n                              ></ng-container>\n                            </div>\n                          </div>\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\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              isGroupResult(s.result) &&\n              group !== null &&\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-template>\n      </div>\n      <div *ngIf=\"s.query.pagination.showControls\" class=\"pagination\">\n        <div class=\"page-size-controls\">\n          <ng-container\n            *ngIf=\"!isGroupResult(s.result) && !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 && !isGroupResult(s.result)\"\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            [attr.aria-disabled]=\"\n              page === s.query.pagination.page ? 'true' : null\n            \"\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{width:100%;display:grid;grid-template-rows:1fr auto;gap:0}.loading-container{width:100%;display:flex;flex-direction:column;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: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{flex:1 1 auto;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.toggle-head{width:var(--size-xxlarge);position:sticky;z-index:1;left: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}span.header-wrapper{transition:background-color var(--short-transition);cursor:pointer}span.header-wrapper:hover{background-color:var(--black-20)}span.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)}span.header-wrapper.active .icon-container{width:calc(var(--base-grid-size) * 3.5);padding-left:var(--size-xsmall);opacity:1}span.header-wrapper:hover .icon-container{color:var(--type-light-low-contrast)}span.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,td.toggle-body{padding:0;vertical-align:middle}td.selection-body,td.toggle-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)}.prevent-shrink{flex-shrink:0}td.toggleable-cell{cursor:pointer;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);font-weight:var(--font-weight-heavy)}td riv-icon.chevron{vertical-align:middle;margin-right:var(--size-xsmall)}.toggleable-cell-content{display:flex;align-items:center}.toggleable-cell-value{flex:1 1 auto;min-width:0}td.toggle-header{text-align:left}.toggle-header-text{position:sticky;z-index:1;left:calc(var(--size-xxlarge) + var(--size-small))}tr.toggle-header-row td{cursor:pointer;background-color:var(--surface-light-1);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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", "disabled"] }, { 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", "sortSelectedToTop", "grow", "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TableComponent, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: TableComponent, selector: "riv-table", inputs: { manager: "manager" }, host: { listeners: { "document:keydown": "keyDown($event)", "document:keyup": "keyUp($event)", "document:copy": "onCopy($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    <div class=\"header\" *ngIf=\"headerTemplate\">\n      <ng-container\n        *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n      ></ng-container>\n    </div>\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        tabindex=\"0\"\n        [ngClass]=\"{\n          'container-ungrouped': !isGroupResult(s.result),\n          'has-header': !isGroupResult(s.result) && 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\n        <!--\n          An overview of the templates we are using:\n\n          headersAndTableBody - helps us create multiple tables for grouped results\n            headerRowWithSubRows - helps us create header rows for nested with header results\n              nestedRowWithSubRows - helps us create nested rows for the nested result types\n                rowWrappedWithRowLink - helps us add a rowlink to a row\n                  rowBody - displays the row content\n        -->\n\n        <!-- When we are grouped, we show one table per group -->\n        <ng-container\n          *ngIf=\"\n            isGroupResult(s.result) && s.result.resultType === 'table-grouping'\n          \"\n        >\n          <ng-container\n            *ngFor=\"\n              let group of s.result.rowGroups;\n              trackBy: trackByGroup;\n              let last = last\n            \"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                headersAndTableBody;\n                context: { group: group, last: last }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n\n        <!-- When we aren't grouped, we show one table -->\n        <ng-container\n          *ngIf=\"isRegularResult(s.result) || isNestedResult(s.result)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              headersAndTableBody;\n              context: { group: null, last: true }\n            \"\n          ></ng-container>\n        </ng-container>\n\n        <ng-template let-group=\"group\" let-last=\"last\" #headersAndTableBody>\n          <ng-container *ngIf=\"isGroupResult(s.result) && group !== null\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                subheaderTemplate || null;\n                context: { state: s, group }\n              \"\n            ></ng-container>\n          </ng-container>\n          <div [ngClass]=\"{ 'subcontainer-grouped': isGroupResult(s.result) }\">\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=\"!isGroupResult(s.result)\"\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=\"isGroupResult(s.result) && group !== null\"\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                    *ngIf=\"isNestedResult(s.result) && !!s.result.hasHeaders\"\n                    class=\"toggle-head\"\n                  >\n                    <!-- Add a column for the chevrons, if we have togglable headers -->\n                    <riv-sr-only>Toggles</riv-sr-only>\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]=\"\n                      s.display.columnsAreReorderable && !column.alwaysPinned\n                    \"\n                    [attr.droppable]=\"!column.alwaysPinned\"\n                    [class.drop-zone]=\"!column.alwaysPinned\"\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                      !column.alwaysPinned\n                    \"\n                    [class.dragged-over-right]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx < i &&\n                      !column.alwaysPinned\n                    \"\n                  >\n                    <div\n                      *ngIf=\"!showMenuOnColumnName(s, column)\"\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                      <riv-table-header-resize-handle\n                        (dragResize)=\"setWidth(column.key, $event)\"\n                      ></riv-table-header-resize-handle>\n                    </div>\n                    <riv-menu *ngIf=\"showMenuOnColumnName(s, column)\">\n                      <ng-template #trigger>\n                        <span\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                        </span>\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                          type=\"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                          type=\"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                          type=\"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                        type=\"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                      <!-- We only show the divider when we will have an item both above and below the divider. -->\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"\n                          (column.orderable || column.filterable) &&\n                          (columnCanFreeze(s, column) ||\n                            columnCanHide(s, column))\n                        \"\n                      ></div>\n                      <ng-container *ngIf=\"columnCanFreeze(s, column)\">\n                        <button\n                          type=\"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                          type=\"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                        type=\"button\"\n                        *ngIf=\"columnCanHide(s, column)\"\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                  <!-- Grouped results do not have subrows or headers -->\n                  <ng-container\n                    *ngIf=\"isGroupResult(s.result) && group !== null\"\n                  >\n                    <ng-container\n                      *ngFor=\"\n                        let row of group.rows;\n                        let rowIndex = index;\n                        trackBy: trackByRow\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          rowWrappedWithRowLink;\n                          context: {\n                            row: row,\n                            rowIndex: rowIndex,\n                            depth: 0,\n                            hasSubRows: false,\n                            rowIsCollapsed: false\n                          }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                  </ng-container>\n\n                  <!-- Regular results do not have subrows or headers -->\n                  <ng-container\n                    *ngIf=\"\n                      isRegularResult(s.result) &&\n                      s.result.resultType === 'normal-rows'\n                    \"\n                  >\n                    <ng-container\n                      *ngFor=\"\n                        let row of s.result.rowsAsGroup.rows;\n                        let rowIndex = index;\n                        trackBy: trackByRow\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          rowWrappedWithRowLink;\n                          context: {\n                            row: row,\n                            rowIndex: rowIndex,\n                            depth: 0,\n                            hasSubRows: false,\n                            rowIsCollapsed: false\n                          }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                  </ng-container>\n\n                  <!-- Nested with header results have subrows and headers -->\n                  <ng-container\n                    *ngIf=\"\n                      isNestedResult(s.result) &&\n                      s.result.resultType === 'nested-rows'\n                    \"\n                  >\n                    <ng-container\n                      *ngFor=\"\n                        let headerRow of s.result.nestedHeaderRows;\n                        trackBy: trackByNestedHeader\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          headerRowWithSubRows;\n                          context: { headerRow: headerRow }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                  </ng-container>\n\n                  <ng-template let-headerRow=\"headerRow\" #headerRowWithSubRows>\n                    <!-- Display the header -->\n                    <ng-container *ngIf=\"headerRow.headerText !== null\">\n                      <tr\n                        class=\"toggle-header-row\"\n                        (click)=\"toggleHeaderCollapse(headerRow.id)\"\n                      >\n                        <td class=\"toggle-body\">\n                          <!-- Rows with subrows have a chevron indicating you can click the row to see the subrows. -->\n                          <riv-icon\n                            class=\"prevent-shrink chevron\"\n                            [name]=\"\n                              headerRow.isCollapsed\n                                ? 'ChevronDown'\n                                : 'ChevronUp'\n                            \"\n                            [size]=\"16\"\n                          ></riv-icon>\n                        </td>\n                        <td\n                          class=\"toggle-header\"\n                          [attr.colspan]=\"s.display.columns.length\"\n                        >\n                          <span class=\"toggle-header-text\">\n                            {{ headerRow.headerText }}\n                          </span>\n                        </td>\n                        <td *ngIf=\"menuTemplate\"></td>\n                      </tr>\n                    </ng-container>\n\n                    <!-- If a header is not collapsed, also show its subrows -->\n                    <ng-container\n                      *ngIf=\"\n                        !headerRow.isCollapsed && headerRow.subRows.length > 0\n                      \"\n                    >\n                      <ng-container\n                        *ngFor=\"\n                          let nestedRow of headerRow.subRows;\n                          trackBy: trackByNestedRow\n                        \"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            nestedRowWithSubRows;\n                            context: { nestedRow: nestedRow, depth: 0 }\n                          \"\n                        ></ng-container>\n                      </ng-container>\n                    </ng-container>\n                  </ng-template>\n\n                  <ng-template\n                    let-nestedRow=\"nestedRow\"\n                    let-depth=\"depth\"\n                    #nestedRowWithSubRows\n                  >\n                    <!-- Display the current row -->\n                    <ng-container\n                      [ngTemplateOutlet]=\"rowWrappedWithRowLink\"\n                      [ngTemplateOutletContext]=\"{\n                        row: nestedRow.data,\n                        rowIndex: -1,\n                        depth: depth,\n                        hasSubRows: nestedRow.subRows?.length > 0,\n                        rowIsCollapsed: nestedRow.isCollapsed\n                      }\"\n                    >\n                    </ng-container>\n\n                    <!-- If a row is not collapsed, also show its subrows -->\n                    <ng-container\n                      *ngIf=\"\n                        !nestedRow.isCollapsed && nestedRow.subRows?.length > 0\n                      \"\n                    >\n                      <ng-container\n                        *ngFor=\"\n                          let subRow of nestedRow.subRows;\n                          trackBy: trackByNestedRow\n                        \"\n                      >\n                        <ng-container\n                          [ngTemplateOutlet]=\"nestedRowWithSubRows\"\n                          [ngTemplateOutletContext]=\"{\n                            nestedRow: subRow,\n                            depth: depth + 1\n                          }\"\n                        >\n                        </ng-container>\n                      </ng-container>\n                    </ng-container>\n                  </ng-template>\n\n                  <ng-template\n                    let-row=\"row\"\n                    let-rowIndex=\"rowIndex\"\n                    let-depth=\"depth\"\n                    let-hasSubRows=\"hasSubRows\"\n                    let-rowIsCollapsed=\"rowIsCollapsed\"\n                    #rowWrappedWithRowLink\n                  >\n                    <ng-container\n                      *ngIf=\"{\n                        row: row,\n                        rowIndex: rowIndex,\n                        depth: depth,\n                        hasSubRows: hasSubRows,\n                        rowIsCollapsed: rowIsCollapsed\n                      } as rowContext\"\n                    >\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; context: rowContext\"\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; context: rowContext\"\n                          ></ng-container>\n                        </a>\n                      </ng-container>\n                      <tr\n                        *ngIf=\"!row.rowLink\"\n                        [class.grayed]=\"s.display.rowsAreGrayed\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"rowBody; context: rowContext\"\n                        ></ng-container>\n                      </tr>\n                    </ng-container>\n                  </ng-template>\n\n                  <ng-template\n                    let-row=\"row\"\n                    let-rowIndex=\"rowIndex\"\n                    let-depth=\"depth\"\n                    let-hasSubRows=\"hasSubRows\"\n                    let-rowIsCollapsed=\"rowIsCollapsed\"\n                    #rowBody\n                  >\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                    <td\n                      *ngIf=\"isNestedResult(s.result) && !!s.result.hasHeaders\"\n                      class=\"toggle-body\"\n                    >\n                      <!-- This td lines up with the header chevron column -->\n                    </td>\n                    <ng-container\n                      *ngFor=\"\n                        let column of s.display.columns;\n                        index as columnIndex;\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                          [class.toggleable-cell]=\"\n                            showChevronForCell(columnIndex, hasSubRows, depth)\n                          \"\n                          [style.left.px]=\"column.left\"\n                          [style.text-align]=\"column.alignment\"\n                          (click)=\"\n                            showChevronForCell(columnIndex, hasSubRows, depth)\n                              ? toggleRowCollapse(row.id)\n                              : handleClick($event, column)\n                          \"\n                        >\n                          <ng-template #cellContent>\n                            <ng-container\n                              *ngIf=\"!blankCellDueToNesting(columnIndex, depth)\"\n                            >\n                              <ng-container\n                                *ngTemplateOutlet=\"\n                                  cellTemplate || null;\n                                  context: { row: row, column: column }\n                                \"\n                              ></ng-container>\n                            </ng-container>\n                          </ng-template>\n\n                          <!-- Rows with subrows have a chevron indicating you can click the row to see the subrows. -->\n                          <div\n                            *ngIf=\"\n                              showChevronForCell(\n                                columnIndex,\n                                hasSubRows,\n                                depth\n                              );\n                              else cellContent\n                            \"\n                            class=\"toggleable-cell-content\"\n                          >\n                            <riv-icon\n                              class=\"prevent-shrink chevron\"\n                              [name]=\"\n                                rowIsCollapsed ? 'ChevronDown' : 'ChevronUp'\n                              \"\n                              [size]=\"16\"\n                            ></riv-icon>\n                            <div class=\"toggleable-cell-value\">\n                              <ng-container\n                                *ngTemplateOutlet=\"cellContent\"\n                              ></ng-container>\n                            </div>\n                          </div>\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\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              isGroupResult(s.result) &&\n              group !== null &&\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-template>\n      </div>\n      <div *ngIf=\"s.query.pagination.showControls\" class=\"pagination\">\n        <div class=\"page-size-controls\">\n          <ng-container\n            *ngIf=\"!isGroupResult(s.result) && !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 && !isGroupResult(s.result)\"\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            [attr.aria-disabled]=\"\n              page === s.query.pagination.page ? 'true' : null\n            \"\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{width:100%;display:grid;grid-template-rows:1fr auto;gap:0}.loading-container{width:100%;display:flex;flex-direction:column;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: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{flex:1 1 auto;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.toggle-head{width:var(--size-xxlarge);position:sticky;z-index:1;left: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}span.header-wrapper{transition:background-color var(--short-transition);cursor:pointer}span.header-wrapper:hover{background-color:var(--black-20)}span.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)}span.header-wrapper.active .icon-container{width:calc(var(--base-grid-size) * 3.5);padding-left:var(--size-xsmall);opacity:1}span.header-wrapper:hover .icon-container{color:var(--type-light-low-contrast)}span.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,td.toggle-body{padding:0;vertical-align:middle}td.selection-body,td.toggle-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)}.prevent-shrink{flex-shrink:0}td.toggleable-cell{cursor:pointer;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);font-weight:var(--font-weight-heavy)}td riv-icon.chevron{vertical-align:middle;margin-right:var(--size-xsmall)}.toggleable-cell-content{display:flex;align-items:center}.toggleable-cell-value{flex:1 1 auto;min-width:0}td.toggle-header{text-align:left}.toggle-header-text{position:sticky;z-index:1;left:calc(var(--size-xxlarge) + var(--size-small))}tr.toggle-header-row td{cursor:pointer;background-color:var(--surface-light-1);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);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: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "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", "disabled"] }, { 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", "sortSelectedToTop", "grow", "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: "17.3.12", ngImport: i0, type: TableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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    <div class=\"header\" *ngIf=\"headerTemplate\">\n      <ng-container\n        *ngTemplateOutlet=\"headerTemplate; context: { state: s }\"\n      ></ng-container>\n    </div>\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        tabindex=\"0\"\n        [ngClass]=\"{\n          'container-ungrouped': !isGroupResult(s.result),\n          'has-header': !isGroupResult(s.result) && 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\n        <!--\n          An overview of the templates we are using:\n\n          headersAndTableBody - helps us create multiple tables for grouped results\n            headerRowWithSubRows - helps us create header rows for nested with header results\n              nestedRowWithSubRows - helps us create nested rows for the nested result types\n                rowWrappedWithRowLink - helps us add a rowlink to a row\n                  rowBody - displays the row content\n        -->\n\n        <!-- When we are grouped, we show one table per group -->\n        <ng-container\n          *ngIf=\"\n            isGroupResult(s.result) && s.result.resultType === 'table-grouping'\n          \"\n        >\n          <ng-container\n            *ngFor=\"\n              let group of s.result.rowGroups;\n              trackBy: trackByGroup;\n              let last = last\n            \"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                headersAndTableBody;\n                context: { group: group, last: last }\n              \"\n            ></ng-container>\n          </ng-container>\n        </ng-container>\n\n        <!-- When we aren't grouped, we show one table -->\n        <ng-container\n          *ngIf=\"isRegularResult(s.result) || isNestedResult(s.result)\"\n        >\n          <ng-container\n            *ngTemplateOutlet=\"\n              headersAndTableBody;\n              context: { group: null, last: true }\n            \"\n          ></ng-container>\n        </ng-container>\n\n        <ng-template let-group=\"group\" let-last=\"last\" #headersAndTableBody>\n          <ng-container *ngIf=\"isGroupResult(s.result) && group !== null\">\n            <ng-container\n              *ngTemplateOutlet=\"\n                subheaderTemplate || null;\n                context: { state: s, group }\n              \"\n            ></ng-container>\n          </ng-container>\n          <div [ngClass]=\"{ 'subcontainer-grouped': isGroupResult(s.result) }\">\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=\"!isGroupResult(s.result)\"\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=\"isGroupResult(s.result) && group !== null\"\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                    *ngIf=\"isNestedResult(s.result) && !!s.result.hasHeaders\"\n                    class=\"toggle-head\"\n                  >\n                    <!-- Add a column for the chevrons, if we have togglable headers -->\n                    <riv-sr-only>Toggles</riv-sr-only>\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]=\"\n                      s.display.columnsAreReorderable && !column.alwaysPinned\n                    \"\n                    [attr.droppable]=\"!column.alwaysPinned\"\n                    [class.drop-zone]=\"!column.alwaysPinned\"\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                      !column.alwaysPinned\n                    \"\n                    [class.dragged-over-right]=\"\n                      draggedOverColumnIdx === i &&\n                      draggedColumnIdx !== null &&\n                      draggedColumnIdx < i &&\n                      !column.alwaysPinned\n                    \"\n                  >\n                    <div\n                      *ngIf=\"!showMenuOnColumnName(s, column)\"\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                      <riv-table-header-resize-handle\n                        (dragResize)=\"setWidth(column.key, $event)\"\n                      ></riv-table-header-resize-handle>\n                    </div>\n                    <riv-menu *ngIf=\"showMenuOnColumnName(s, column)\">\n                      <ng-template #trigger>\n                        <span\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                        </span>\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                          type=\"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                          type=\"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                          type=\"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                        type=\"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                      <!-- We only show the divider when we will have an item both above and below the divider. -->\n                      <div\n                        class=\"riv-divider\"\n                        *ngIf=\"\n                          (column.orderable || column.filterable) &&\n                          (columnCanFreeze(s, column) ||\n                            columnCanHide(s, column))\n                        \"\n                      ></div>\n                      <ng-container *ngIf=\"columnCanFreeze(s, column)\">\n                        <button\n                          type=\"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                          type=\"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                        type=\"button\"\n                        *ngIf=\"columnCanHide(s, column)\"\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                  <!-- Grouped results do not have subrows or headers -->\n                  <ng-container\n                    *ngIf=\"isGroupResult(s.result) && group !== null\"\n                  >\n                    <ng-container\n                      *ngFor=\"\n                        let row of group.rows;\n                        let rowIndex = index;\n                        trackBy: trackByRow\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          rowWrappedWithRowLink;\n                          context: {\n                            row: row,\n                            rowIndex: rowIndex,\n                            depth: 0,\n                            hasSubRows: false,\n                            rowIsCollapsed: false\n                          }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                  </ng-container>\n\n                  <!-- Regular results do not have subrows or headers -->\n                  <ng-container\n                    *ngIf=\"\n                      isRegularResult(s.result) &&\n                      s.result.resultType === 'normal-rows'\n                    \"\n                  >\n                    <ng-container\n                      *ngFor=\"\n                        let row of s.result.rowsAsGroup.rows;\n                        let rowIndex = index;\n                        trackBy: trackByRow\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          rowWrappedWithRowLink;\n                          context: {\n                            row: row,\n                            rowIndex: rowIndex,\n                            depth: 0,\n                            hasSubRows: false,\n                            rowIsCollapsed: false\n                          }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                  </ng-container>\n\n                  <!-- Nested with header results have subrows and headers -->\n                  <ng-container\n                    *ngIf=\"\n                      isNestedResult(s.result) &&\n                      s.result.resultType === 'nested-rows'\n                    \"\n                  >\n                    <ng-container\n                      *ngFor=\"\n                        let headerRow of s.result.nestedHeaderRows;\n                        trackBy: trackByNestedHeader\n                      \"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          headerRowWithSubRows;\n                          context: { headerRow: headerRow }\n                        \"\n                      ></ng-container>\n                    </ng-container>\n                  </ng-container>\n\n                  <ng-template let-headerRow=\"headerRow\" #headerRowWithSubRows>\n                    <!-- Display the header -->\n                    <ng-container *ngIf=\"headerRow.headerText !== null\">\n                      <tr\n                        class=\"toggle-header-row\"\n                        (click)=\"toggleHeaderCollapse(headerRow.id)\"\n                      >\n                        <td class=\"toggle-body\">\n                          <!-- Rows with subrows have a chevron indicating you can click the row to see the subrows. -->\n                          <riv-icon\n                            class=\"prevent-shrink chevron\"\n                            [name]=\"\n                              headerRow.isCollapsed\n                                ? 'ChevronDown'\n                                : 'ChevronUp'\n                            \"\n                            [size]=\"16\"\n                          ></riv-icon>\n                        </td>\n                        <td\n                          class=\"toggle-header\"\n                          [attr.colspan]=\"s.display.columns.length\"\n                        >\n                          <span class=\"toggle-header-text\">\n                            {{ headerRow.headerText }}\n                          </span>\n                        </td>\n                        <td *ngIf=\"menuTemplate\"></td>\n                      </tr>\n                    </ng-container>\n\n                    <!-- If a header is not collapsed, also show its subrows -->\n                    <ng-container\n                      *ngIf=\"\n                        !headerRow.isCollapsed && headerRow.subRows.length > 0\n                      \"\n                    >\n                      <ng-container\n                        *ngFor=\"\n                          let nestedRow of headerRow.subRows;\n                          trackBy: trackByNestedRow\n                        \"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"\n                            nestedRowWithSubRows;\n                            context: { nestedRow: nestedRow, depth: 0 }\n                          \"\n                        ></ng-container>\n                      </ng-container>\n                    </ng-container>\n                  </ng-template>\n\n                  <ng-template\n                    let-nestedRow=\"nestedRow\"\n                    let-depth=\"depth\"\n                    #nestedRowWithSubRows\n                  >\n                    <!-- Display the current row -->\n                    <ng-container\n                      [ngTemplateOutlet]=\"rowWrappedWithRowLink\"\n                      [ngTemplateOutletContext]=\"{\n                        row: nestedRow.data,\n                        rowIndex: -1,\n                        depth: depth,\n                        hasSubRows: nestedRow.subRows?.length > 0,\n                        rowIsCollapsed: nestedRow.isCollapsed\n                      }\"\n                    >\n                    </ng-container>\n\n                    <!-- If a row is not collapsed, also show its subrows -->\n                    <ng-container\n                      *ngIf=\"\n                        !nestedRow.isCollapsed && nestedRow.subRows?.length > 0\n                      \"\n                    >\n                      <ng-container\n                        *ngFor=\"\n                          let subRow of nestedRow.subRows;\n                          trackBy: trackByNestedRow\n                        \"\n                      >\n                        <ng-container\n                          [ngTemplateOutlet]=\"nestedRowWithSubRows\"\n                          [ngTemplateOutletContext]=\"{\n                            nestedRow: subRow,\n                            depth: depth + 1\n                          }\"\n                        >\n                        </ng-container>\n                      </ng-container>\n                    </ng-container>\n                  </ng-template>\n\n                  <ng-template\n                    let-row=\"row\"\n                    let-rowIndex=\"rowIndex\"\n                    let-depth=\"depth\"\n                    let-hasSubRows=\"hasSubRows\"\n                    let-rowIsCollapsed=\"rowIsCollapsed\"\n                    #rowWrappedWithRowLink\n                  >\n                    <ng-container\n                      *ngIf=\"{\n                        row: row,\n                        rowIndex: rowIndex,\n                        depth: depth,\n                        hasSubRows: hasSubRows,\n                        rowIsCollapsed: rowIsCollapsed\n                      } as rowContext\"\n                    >\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; context: rowContext\"\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; context: rowContext\"\n                          ></ng-container>\n                        </a>\n                      </ng-container>\n                      <tr\n                        *ngIf=\"!row.rowLink\"\n                        [class.grayed]=\"s.display.rowsAreGrayed\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"rowBody; context: rowContext\"\n                        ></ng-container>\n                      </tr>\n                    </ng-container>\n                  </ng-template>\n\n                  <ng-template\n                    let-row=\"row\"\n                    let-rowIndex=\"rowIndex\"\n                    let-depth=\"depth\"\n                    let-hasSubRows=\"hasSubRows\"\n                    let-rowIsCollapsed=\"rowIsCollapsed\"\n                    #rowBody\n                  >\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                    <td\n                      *ngIf=\"isNestedResult(s.result) && !!s.result.hasHeaders\"\n                      class=\"toggle-body\"\n                    >\n                      <!-- This td lines up with the header chevron column -->\n                    </td>\n                    <ng-container\n                      *ngFor=\"\n                        let column of s.display.columns;\n                        index as columnIndex;\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                          [class.toggleable-cell]=\"\n                            showChevronForCell(columnIndex, hasSubRows, depth)\n                          \"\n                          [style.left.px]=\"column.left\"\n                          [style.text-align]=\"column.alignment\"\n                          (click)=\"\n                            showChevronForCell(columnIndex, hasSubRows, depth)\n                              ? toggleRowCollapse(row.id)\n                              : handleClick($event, column)\n                          \"\n                        >\n                          <ng-template #cellContent>\n                            <ng-container\n                              *ngIf=\"!blankCellDueToNesting(columnIndex, depth)\"\n                            >\n                              <ng-container\n                                *ngTemplateOutlet=\"\n                                  cellTemplate || null;\n                                  context: { row: row, column: column }\n                                \"\n                              ></ng-container>\n                            </ng-container>\n                          </ng-template>\n\n                          <!-- Rows with subrows have a chevron indicating you can click the row to see the subrows. -->\n                          <div\n                            *ngIf=\"\n                              showChevronForCell(\n                                columnIndex,\n                                hasSubRows,\n                                depth\n                              );\n                              else cellContent\n                            \"\n                            class=\"toggleable-cell-content\"\n                          >\n                            <riv-icon\n                              class=\"prevent-shrink chevron\"\n                              [name]=\"\n                                rowIsCollapsed ? 'ChevronDown' : 'ChevronUp'\n                              \"\n                              [size]=\"16\"\n                            ></riv-icon>\n                            <div class=\"toggleable-cell-value\">\n                              <ng-container\n                                *ngTemplateOutlet=\"cellContent\"\n                              ></ng-container>\n                            </div>\n                          </div>\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\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              isGroupResult(s.result) &&\n              group !== null &&\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-template>\n      </div>\n      <div *ngIf=\"s.query.pagination.showControls\" class=\"pagination\">\n        <div class=\"page-size-controls\">\n          <ng-container\n            *ngIf=\"!isGroupResult(s.result) && !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 && !isGroupResult(s.result)\"\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            [attr.aria-disabled]=\"\n              page === s.query.pagination.page ? 'true' : null\n            \"\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{width:100%;display:grid;grid-template-rows:1fr auto;gap:0}.loading-container{width:100%;display:flex;flex-direction:column;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: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{flex:1 1 auto;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.toggle-head{width:var(--size-xxlarge);position:sticky;z-index:1;left: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}span.header-wrapper{transition:background-color var(--short-transition);cursor:pointer}span.header-wrapper:hover{background-color:var(--black-20)}span.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)}span.header-wrapper.active .icon-container{width:calc(var(--base-grid-size) * 3.5);padding-left:var(--size-xsmall);opacity:1}span.header-wrapper:hover .icon-container{color:var(--type-light-low-contrast)}span.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,td.toggle-body{padding:0;vertical-align:middle}td.selection-body,td.toggle-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)}.prevent-shrink{flex-shrink:0}td.toggleable-cell{cursor:pointer;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);font-weight:var(--font-weight-heavy)}td riv-icon.chevron{vertical-align:middle;margin-right:var(--size-xsmall)}.toggleable-cell-content{display:flex;align-items:center}.toggleable-cell-value{flex:1 1 auto;min-width:0}td.toggle-header{text-align:left}.toggle-header-text{position:sticky;z-index:1;left:calc(var(--size-xxlarge) + var(--size-small))}tr.toggle-header-row td{cursor:pointer;background-color:var(--surface-light-1);font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-2);font-weight:var(--font-weight-heavy)}\n"] }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.NgZone }], propDecorators: { manager: [{
@@ -12178,10 +12178,10 @@ class VisibilityDirective {
     ngOnDestroy() {
         this.intersectionObserver.unobserve(this.elementRef.nativeElement);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VisibilityDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: VisibilityDirective, selector: "[rivVisibility]", outputs: { rivVisibility: "rivVisibility" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: VisibilityDirective, deps: [{ token: i0.ElementRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: VisibilityDirective, selector: "[rivVisibility]", outputs: { rivVisibility: "rivVisibility" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: VisibilityDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: VisibilityDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rivVisibility]',
@@ -16338,10 +16338,10 @@ class IssueComponent {
             ? this.textColorOverride
             : '--type-light-high-contrast'})`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: IssueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: IssueComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: IssueComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: [{
@@ -16368,10 +16368,10 @@ class LegendItemComponent {
     isLegendItemClickable() {
         return this.clickable && this.visibility !== 'locked';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LegendItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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  [attr.aria-disabled]=\"visibility === 'locked' ? 'true' : null\"\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", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: LegendItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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  [attr.aria-disabled]=\"visibility === 'locked' ? 'true' : null\"\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", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: LegendItemComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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  [attr.aria-disabled]=\"visibility === 'locked' ? 'true' : null\"\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: [{
@@ -16975,10 +16975,10 @@ class ChartComponent {
         }
         return hoverData;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ChartComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: ChartComponent, selector: "riv-chart", inputs: { height: "height", width: "width", overrideHeight: "overrideHeight", overrideWidth: "overrideWidth", config: "config", data: "data" }, outputs: { chartClicked: "chartClicked", flowClicked: "flowClicked" }, 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                isDropOff: hoverData.isDropOff\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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ChartComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: ChartComponent, selector: "riv-chart", inputs: { height: "height", width: "width", overrideHeight: "overrideHeight", overrideWidth: "overrideWidth", config: "config", data: "data" }, outputs: { chartClicked: "chartClicked", flowClicked: "flowClicked" }, 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                isDropOff: hoverData.isDropOff\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: "17.3.12", ngImport: i0, type: ChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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                isDropOff: hoverData.isDropOff\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: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { container: [{
@@ -17012,10 +17012,10 @@ class DataTableRowComponent {
     constructor() {
         this.subRow = false;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DataTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataTableRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: DataTableRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: [{
@@ -17033,10 +17033,10 @@ class DataTableCellComponent {
     ngOnInit() {
         this.subCell = this.row.subRow;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DataTableCellComponent, deps: [{ token: DataTableRowComponent }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataTableCellComponent, deps: [{ token: DataTableRowComponent }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: DataTableCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: () => [{ type: DataTableRowComponent }], propDecorators: { subCell: [{
@@ -17045,10 +17045,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 class DataTableHeaderCellComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DataTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataTableHeaderCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: DataTableHeaderCellComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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"] }]
         }] });
@@ -17057,10 +17057,10 @@ class DataTableComponent {
     constructor() {
         this.tabIndex = 0;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: DataTableComponent, selector: "riv-data-table", host: { properties: { "attr.tabindex": "this.tabIndex" } }, 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DataTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: DataTableComponent, selector: "riv-data-table", host: { properties: { "attr.tabindex": "this.tabIndex" } }, 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: "17.3.12", ngImport: i0, type: DataTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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"] }]
         }], propDecorators: { tabIndex: [{
@@ -17095,10 +17095,10 @@ class DonutComponent {
     get empty() {
         return (this.data.length === 0 || this.data.every(point => point.value === 0));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DonutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DonutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: DonutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: [{
@@ -17162,10 +17162,10 @@ class MetricComponent {
     get valueColor() {
         return `var(${this.valueColorToken})`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MetricComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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);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", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MetricComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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);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", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MetricComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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);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: [{
@@ -17214,10 +17214,10 @@ class TrendComponent {
                     : 'danger';
         return 'trend ' + conditionalClass;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TrendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TrendComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: TrendComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: [{
@@ -17292,10 +17292,10 @@ class FunnelChartComponent {
             .y1(([_, y]) => y)
             .y0(this.graphHeight)(points);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FunnelChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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: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);border-radius:var(--size-xsmall);padding:var(--size-medium);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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FunnelChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: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);border-radius:var(--size-xsmall);padding:var(--size-medium);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: "17.3.12", ngImport: i0, type: FunnelChartComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: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);border-radius:var(--size-xsmall);padding:var(--size-medium);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: [{
@@ -17338,10 +17338,10 @@ class MiniPieComponent {
         const largeArc = pct > 0.5 ? 1 : 0;
         return `M 0 0 L 0 -8 A 8 8 0 ${largeArc} 1 ${x} ${y} Z`;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: MiniPieComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: MiniPieComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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: "17.3.12", ngImport: i0, type: MiniPieComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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: [{
@@ -17368,10 +17368,10 @@ class ProgressComponent {
             return '0%';
         return 100 * Math.min(this.value / this.max, 1) + '%';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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,#5f10dd87)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: ProgressComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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,#5f10dd87)}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ProgressComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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,#5f10dd87)}\n"] }]
         }], propDecorators: { value: [{
@@ -17796,10 +17796,10 @@ class StackedColumnComponent {
         if (option)
             this.interval = option.id;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StackedColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 ?? null\"\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", "sortSelectedToTop", "grow", "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StackedColumnComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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 ?? null\"\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", "sortSelectedToTop", "grow", "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: "17.3.12", ngImport: i0, type: StackedColumnComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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 ?? null\"\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: [{
@@ -18132,10 +18132,10 @@ class StackedRowComponent {
             };
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: StackedRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 ?? null\"\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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: StackedRowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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 ?? null\"\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: "17.3.12", ngImport: i0, type: StackedRowComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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 ?? null\"\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: [{
@@ -18497,10 +18497,10 @@ class TimeSeriesComponent {
             y,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TimeSeriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", 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 ?? null\"\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", "sortSelectedToTop", "grow", "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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: TimeSeriesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", 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 ?? null\"\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", "sortSelectedToTop", "grow", "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: "17.3.12", ngImport: i0, type: TimeSeriesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", 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 ?? null\"\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: [{
@@ -18523,8 +18523,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 class RivModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RivModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: RivModule, declarations: [AllViewsModalComponent,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RivModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: RivModule, declarations: [AllViewsModalComponent,
             AlphabeticFieldComponent,
             AutoFocusDirective,
             BadgeComponent,
@@ -18747,9 +18747,9 @@ class RivModule {
             ViewsComponent,
             VisibilityDirective,
             ZeroStateComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RivModule, imports: [CommonModule, RouterModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RivModule, imports: [CommonModule, RouterModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RivModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: RivModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [