@rivet-health/design-system 40.44.2 → 40.44.3

package/esm2022/lib/table/table/table-column-settings/table-column-settings.component.mjs

@@ -119,10 +119,10 @@ export 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: i2.AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: i3.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i4.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i5.CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: i6.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i7.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: i8.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: i2.AutoFocusDirective, selector: "[riv-auto-focus]", inputs: ["riv-auto-focus"] }, { kind: "component", type: i3.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: i4.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i5.CheckboxComponent, selector: "riv-checkbox", inputs: ["name", "identifier", "value", "checkedColorToken", "indeterminateColorToken", "checkboxTooltip", "indeterminate", "disabled", "required", "state", "errorMessage", "ariaLabel"], outputs: ["valueChange"] }, { kind: "component", type: i6.HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: i7.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: i8.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: [{

package/esm2022/lib/table/table/table-csv-export/table-csv-export.component.mjs

@@ -23,10 +23,10 @@ export class TableCsvExportComponent {
             this.cdr.markForCheck();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: TableCsvExportComponent, deps: [{ token: i1.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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "directive", type: i4.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i2.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: i1.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: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "directive", type: i4.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "pipe", type: i2.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: i1.DownloadService }, { type: i0.ChangeDetectorRef }], propDecorators: { manager: [{

package/esm2022/lib/table/table/table-header-resize-handle/table-header-resize-handle.component.mjs

@@ -13,10 +13,10 @@ export 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: [{

package/esm2022/lib/table/table/table-search/table-search.component.mjs

@@ -53,10 +53,10 @@ export 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: i1.SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: i2.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: i1.SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "component", type: i2.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: [{

package/esm2022/lib/table/table/table-search-columns/table-search-columns.component.mjs

@@ -43,10 +43,10 @@ export 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: i2.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i3.HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: i4.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: i5.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i6.SwitchCheckboxComponent, selector: "riv-switch-checkbox", inputs: ["size"] }, { kind: "directive", type: i7.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: i2.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i3.HelpComponent, selector: "riv-help", inputs: ["help", "size"] }, { kind: "component", type: i4.IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: i5.OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: i6.SwitchCheckboxComponent, selector: "riv-switch-checkbox", inputs: ["size"] }, { kind: "directive", type: i7.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: [{

package/esm2022/lib/visibility/visibility.directive.mjs

@@ -20,10 +20,10 @@ export 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]',

package/esm2022/lib/visualization/chart/chart.component.mjs

@@ -591,10 +591,10 @@ export 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: i2.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i3.IssueComponent, selector: "riv-issue", inputs: ["label", "colorToken", "textColorOverride"] }, { kind: "component", type: i4.LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "component", type: i5.LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme", "variant"] }, { kind: "directive", type: i6.OverlayDirective, selector: "[riv-overlay]" }, { kind: "directive", type: i7.SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "directive", type: i8.SVGTextTruncateDirective, selector: "svg text[rivSVGTextTruncate]", inputs: ["text", "width"] }, { kind: "component", type: i9.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: i2.CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: i3.IssueComponent, selector: "riv-issue", inputs: ["label", "colorToken", "textColorOverride"] }, { kind: "component", type: i4.LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "component", type: i5.LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme", "variant"] }, { kind: "directive", type: i6.OverlayDirective, selector: "[riv-overlay]" }, { kind: "directive", type: i7.SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "directive", type: i8.SVGTextTruncateDirective, selector: "svg text[rivSVGTextTruncate]", inputs: ["text", "width"] }, { kind: "component", type: i9.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: [{

package/esm2022/lib/visualization/data-table/data-table-cell.component.mjs

@@ -9,10 +9,10 @@ export 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: i1.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: i1.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: i1.DataTableRowComponent }], propDecorators: { subCell: [{

package/esm2022/lib/visualization/data-table/data-table-header-cell.component.mjs

@@ -1,10 +1,10 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i0 from "@angular/core";
 export 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"] }]
         }] });

package/esm2022/lib/visualization/data-table/data-table-row.component.mjs

@@ -4,10 +4,10 @@ export 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: [{

package/esm2022/lib/visualization/data-table/data-table.component.mjs

@@ -4,10 +4,10 @@ export 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: [{

package/esm2022/lib/visualization/donut/donut.component.mjs

@@ -31,10 +31,10 @@ export 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: i2.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "component", type: i3.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: i2.TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipAnchor", "rivTooltipCloseDelay", "rivTooltipOpenDelay", "rivTooltipGracePeriod"] }, { kind: "component", type: i3.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: [{