@rivet-health/design-system 40.4.0 → 40.6.0

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

@@ -9,6 +9,7 @@ import { timeFormat, utcFormat } from 'd3-time-format';
 import { defaultsDeep, sortBy, isNumber, flattenDeep, debounce, isEqual, cloneDeep, orderBy, range, toInteger, difference, union, sum, uniq } from 'lodash';
 import Fuse from 'fuse.js';
 import { query, style, animate, trigger, transition, group } from '@angular/animations';
+import { map as map$1, distinctUntilChanged as distinctUntilChanged$1 } from 'rxjs/operators';
 import * as i2 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import * as p from 'papaparse';
@@ -5392,7 +5393,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 var RivViews;
 (function (RivViews) {
-    RivViews.ViewPermissions = ['private', 'public', 'shared'];
+    RivViews.ViewPermissions = ['private', 'shared', 'public'];
     RivViews.MenuContexts = ['tab', 'all-views', 'overflow'];
     RivViews.UserSelectModes = ['select', 'search-select'];
     function createManager({ source, save, duplicate, userSource, userSelectMode, onAddUser, newTooltip, copyLink, options, setActiveViewId, }) {
@@ -5927,15 +5928,15 @@ const subtitles = {
     public: 'Visible to everyone',
     shared: 'Only visible to those with access',
 };
-class EditViewComponent {
+class PermissionPickerComponent {
     constructor(cdr) {
         this.cdr = cdr;
-        this.autoSelectName = false;
+        this.permission = 'private';
+        this.sharedUsers = [];
         this.userSelectMode = 'select';
-        this.mode = 'edit';
-        this.save = new EventEmitter();
-        this.delete = new EventEmitter();
-        this.close = new EventEmitter();
+        this.disabledPermissions = [];
+        this.permissionChange = new EventEmitter();
+        this.sharedUsersChange = new EventEmitter();
         this.permissionOptions = RivViews.ViewPermissions.map(permission => ({
             value: permission,
             title: titles[permission],
@@ -5944,41 +5945,28 @@ class EditViewComponent {
         this.userOptions = [];
         this.selectedUsers = [];
     }
-    resetView() {
-        this.editedView = cloneDeep(this.view);
-        this.setUpUserSelectManager();
-    }
     ngOnInit() {
-        this.resetView();
+        this.setUpUserSelectManager();
     }
     ngOnChanges(changes) {
-        if (changes['view']) {
-            this.resetView();
+        // ngOnInit performs the initial setup, so ignore first-change events here.
+        // Rebuild only on a genuine change: a new data source, a mode switch, or a
+        // value-level change to the seeded selection. Comparing sharedUsers by value
+        // (rather than reference) is essential — the parent binds a fresh array each
+        // change-detection cycle, and reacting to that reference churn would rebuild
+        // the manager on every cycle.
+        const userSourceChanged = changes['userSource'] && !changes['userSource'].firstChange;
+        const userSelectModeChanged = changes['userSelectMode'] && !changes['userSelectMode'].firstChange;
+        const sharedUsersChanged = changes['sharedUsers'] &&
+            !changes['sharedUsers'].firstChange &&
+            !isEqual(changes['sharedUsers'].previousValue, changes['sharedUsers'].currentValue);
+        if (userSourceChanged || userSelectModeChanged || sharedUsersChanged) {
+            this.setUpUserSelectManager();
         }
     }
     ngOnDestroy() {
         this.tearDownUserSelectManager();
     }
-    canEdit() {
-        return this.mode === 'edit';
-    }
-    isClean() {
-        return isEqual(this.editedView, this.view);
-    }
-    titleChange(value) {
-        if (this.editedView)
-            this.editedView.title = value;
-    }
-    permissionChange(value) {
-        if (this.editedView)
-            this.editedView.permission = value;
-    }
-    getSharedUsers(view) {
-        if (RivViews.isSharedView(view)) {
-            return view.sharedUsers;
-        }
-        return [];
-    }
     tearDownUserSelectManager() {
         var _a;
         (_a = this.userSelectSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
@@ -5992,7 +5980,7 @@ class EditViewComponent {
                     var _a;
                     return (Object.assign(Object.assign({}, u), { new: (_a = u.new) !== null && _a !== void 0 ? _a : false }));
                 });
-                this.selectedUsers = this.getSharedUsers(this.editedView).map(u => {
+                this.selectedUsers = this.sharedUsers.map(u => {
                     var _a;
                     return (Object.assign(Object.assign({}, u), { new: (_a = u.new) !== null && _a !== void 0 ? _a : false }));
                 });
@@ -6006,24 +5994,39 @@ class EditViewComponent {
                     displayLimit: 500,
                     initialState: {
                         selection: {
-                            selected: new RivSelect.OptionSet(this.getSharedUsers(this.editedView)),
+                            selected: new RivSelect.OptionSet(this.sharedUsers),
                         },
                     },
                 });
-                this.userSelectSubscription = this.userSelectManager.state.subscribe(state => {
-                    if (RivViews.isSharedView(this.editedView)) {
-                        this.editedView.sharedUsers = [...state.selection.selected];
+                this.userSelectSubscription = this.userSelectManager.state
+                    .pipe(map$1(state => [...state.selection.selected]), distinctUntilChanged$1(isEqual))
+                    .subscribe(users => {
+                    // The manager replays its initial (seeded) selection synchronously on
+                    // subscribe. Emitting that back would echo the sharedUsers input to
+                    // the parent, which mutates its view and feeds a new array reference
+                    // straight back into this component — an infinite change-detection
+                    // loop. Only propagate genuine, user-driven selection changes.
+                    if (!isEqual(users, this.sharedUsers)) {
+                        this.sharedUsersChange.emit(users);
                     }
                 });
                 this.userSelectManager.actions.next({ type: 'load' });
             }
         });
     }
+    onPermissionClick(value) {
+        if (this.isDisabled(value)) {
+            return;
+        }
+        this.permissionChange.emit(value);
+    }
+    isDisabled(permission) {
+        var _a, _b;
+        return (_b = (_a = this.disabledPermissions) === null || _a === void 0 ? void 0 : _a.includes(permission)) !== null && _b !== void 0 ? _b : false;
+    }
     onSelectedUsersChange(users) {
         this.selectedUsers = users;
-        if (RivViews.isSharedView(this.editedView)) {
-            this.editedView.sharedUsers = RivViews.toSharedUsers(users);
-        }
+        this.sharedUsersChange.emit(RivViews.toSharedUsers(users));
     }
     handleAddUser(searchText) {
         if (!this.onAddUser)
@@ -6031,17 +6034,112 @@ class EditViewComponent {
         const newUser = this.onAddUser(searchText);
         this.userOptions = [...this.userOptions, newUser];
         this.selectedUsers = [...this.selectedUsers, newUser];
+        this.sharedUsersChange.emit(RivViews.toSharedUsers(this.selectedUsers));
+        this.cdr.markForCheck();
+    }
+}
+PermissionPickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PermissionPickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PermissionPickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: PermissionPickerComponent, selector: "riv-permission-picker", inputs: { permission: "permission", sharedUsers: "sharedUsers", userSelectMode: "userSelectMode", userSource: "userSource", onAddUser: "onAddUser", newTooltip: "newTooltip", disabledPermissions: "disabledPermissions" }, outputs: { permissionChange: "permissionChange", sharedUsersChange: "sharedUsersChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"permission-picker\">\n  <div class=\"permission-label\">View permissions</div>\n\n  <div class=\"permission-options\">\n    <button\n      *ngFor=\"let option of permissionOptions\"\n      class=\"permission-option\"\n      [class.current]=\"permission === option.value\"\n      [class.disabled]=\"isDisabled(option.value)\"\n      type=\"button\"\n      [attr.aria-checked]=\"permission === option.value\"\n      [attr.aria-label]=\"option.title + ' permission'\"\n      [attr.aria-disabled]=\"isDisabled(option.value)\"\n      (click)=\"onPermissionClick(option.value)\"\n    >\n      <div class=\"option-content\">\n        <div class=\"option-title\">\n          <span>{{ option.title }}</span>\n          <span class=\"option-description\">{{ option.subtitle }}</span>\n        </div>\n        <riv-icon\n          *ngIf=\"permission === option.value\"\n          class=\"permission-indicator\"\n          [name]=\"'Check'\"\n          [size]=\"16\"\n        ></riv-icon>\n      </div>\n      <riv-select\n        *ngIf=\"\n          permission === 'shared' &&\n          option.value === 'shared' &&\n          userSelectMode === 'select' &&\n          userSelectManager\n        \"\n        [label]=\"'Users with access'\"\n        [manager]=\"userSelectManager\"\n      ></riv-select>\n      <riv-search-select\n        *ngIf=\"\n          permission === 'shared' &&\n          option.value === 'shared' &&\n          userSelectMode === 'search-select'\n        \"\n        (click)=\"$event.stopPropagation()\"\n        [label]=\"'Users with access'\"\n        [options]=\"userOptions\"\n        [selected]=\"selectedUsers\"\n        [placeholder]=\"'Search users'\"\n        [addNewLabel]=\"'Add'\"\n        [newTooltip]=\"newTooltip\"\n        (selectedChange)=\"onSelectedUsersChange($event)\"\n        (addNew)=\"handleAddUser($event)\"\n      ></riv-search-select>\n    </button>\n  </div>\n</div>\n", styles: [".permission-picker{display:flex;flex-direction:column;gap:var(--size-medium)}.permission-options{display:flex;flex-direction:column}.permission-label{font:var(--title-02)}.permission-option{display:flex;flex-direction:column;gap:var(--size-small);padding:var(--size-small) var(--size-medium);border-radius:var(--border-radius-large);cursor:pointer;text-align:left}.permission-option:hover:not(.disabled){background-color:var(--surface-light-1)}.permission-option:active:not(.disabled),.permission-option.current{background-color:var(--surface-light-2)}.permission-option.disabled{cursor:not-allowed;opacity:.5}.option-content{display:flex;justify-content:space-between;align-items:center}.option-title{font:var(--body-medium);display:flex;flex-direction:column;align-items:flex-start}.option-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-indicator{color:var(--type-light-link)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "component", type: SearchSelectComponent, selector: "riv-search-select", inputs: ["options", "selected", "placeholder", "addNewLabel", "newTooltip", "size", "disabled", "label", "help", "required", "state", "errorMessage", "optionTemplate", "chipTemplate"], outputs: ["selectedChange", "addNew"] }, { kind: "component", type: SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "allowedCalloutPositions", "preferredCalloutPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: PermissionPickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'riv-permission-picker', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"permission-picker\">\n  <div class=\"permission-label\">View permissions</div>\n\n  <div class=\"permission-options\">\n    <button\n      *ngFor=\"let option of permissionOptions\"\n      class=\"permission-option\"\n      [class.current]=\"permission === option.value\"\n      [class.disabled]=\"isDisabled(option.value)\"\n      type=\"button\"\n      [attr.aria-checked]=\"permission === option.value\"\n      [attr.aria-label]=\"option.title + ' permission'\"\n      [attr.aria-disabled]=\"isDisabled(option.value)\"\n      (click)=\"onPermissionClick(option.value)\"\n    >\n      <div class=\"option-content\">\n        <div class=\"option-title\">\n          <span>{{ option.title }}</span>\n          <span class=\"option-description\">{{ option.subtitle }}</span>\n        </div>\n        <riv-icon\n          *ngIf=\"permission === option.value\"\n          class=\"permission-indicator\"\n          [name]=\"'Check'\"\n          [size]=\"16\"\n        ></riv-icon>\n      </div>\n      <riv-select\n        *ngIf=\"\n          permission === 'shared' &&\n          option.value === 'shared' &&\n          userSelectMode === 'select' &&\n          userSelectManager\n        \"\n        [label]=\"'Users with access'\"\n        [manager]=\"userSelectManager\"\n      ></riv-select>\n      <riv-search-select\n        *ngIf=\"\n          permission === 'shared' &&\n          option.value === 'shared' &&\n          userSelectMode === 'search-select'\n        \"\n        (click)=\"$event.stopPropagation()\"\n        [label]=\"'Users with access'\"\n        [options]=\"userOptions\"\n        [selected]=\"selectedUsers\"\n        [placeholder]=\"'Search users'\"\n        [addNewLabel]=\"'Add'\"\n        [newTooltip]=\"newTooltip\"\n        (selectedChange)=\"onSelectedUsersChange($event)\"\n        (addNew)=\"handleAddUser($event)\"\n      ></riv-search-select>\n    </button>\n  </div>\n</div>\n", styles: [".permission-picker{display:flex;flex-direction:column;gap:var(--size-medium)}.permission-options{display:flex;flex-direction:column}.permission-label{font:var(--title-02)}.permission-option{display:flex;flex-direction:column;gap:var(--size-small);padding:var(--size-small) var(--size-medium);border-radius:var(--border-radius-large);cursor:pointer;text-align:left}.permission-option:hover:not(.disabled){background-color:var(--surface-light-1)}.permission-option:active:not(.disabled),.permission-option.current{background-color:var(--surface-light-2)}.permission-option.disabled{cursor:not-allowed;opacity:.5}.option-content{display:flex;justify-content:space-between;align-items:center}.option-title{font:var(--body-medium);display:flex;flex-direction:column;align-items:flex-start}.option-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-indicator{color:var(--type-light-link)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { permission: [{
+                type: Input
+            }], sharedUsers: [{
+                type: Input
+            }], userSelectMode: [{
+                type: Input
+            }], userSource: [{
+                type: Input
+            }], onAddUser: [{
+                type: Input
+            }], newTooltip: [{
+                type: Input
+            }], disabledPermissions: [{
+                type: Input
+            }], permissionChange: [{
+                type: Output
+            }], sharedUsersChange: [{
+                type: Output
+            }] } });
+
+class EditViewComponent {
+    constructor(cdr) {
+        this.cdr = cdr;
+        this.autoSelectName = false;
+        this.userSelectMode = 'select';
+        this.mode = 'edit';
+        this.save = new EventEmitter();
+        this.delete = new EventEmitter();
+        this.close = new EventEmitter();
+    }
+    resetView() {
+        this.editedView = cloneDeep(this.view);
+    }
+    ngOnInit() {
+        this.resetView();
+    }
+    ngOnChanges(changes) {
+        if (changes['view']) {
+            this.resetView();
+        }
+    }
+    canEdit() {
+        return this.mode === 'edit';
+    }
+    isClean() {
+        return isEqual(this.editedView, this.view);
+    }
+    titleChange(value) {
+        if (this.editedView)
+            this.editedView.title = value;
+        // These handlers fire from the permission picker / text field, which render
+        // in the overlay outlet's change-detection subtree — a different branch than
+        // this OnPush component. Without markForCheck the updated editedView never
+        // flows back into the child input bindings (e.g. the highlighted option).
+        this.cdr.markForCheck();
+    }
+    onPermissionChange(value) {
+        if (!this.editedView)
+            return;
+        if (value === 'shared') {
+            if (!RivViews.isSharedView(this.editedView)) {
+                this.editedView = Object.assign(Object.assign({}, this.editedView), { permission: 'shared', sharedUsers: [] });
+            }
+        }
+        else {
+            if (RivViews.isSharedView(this.editedView)) {
+                const _a = this.editedView, { sharedUsers } = _a, rest = __rest(_a, ["sharedUsers"]);
+                this.editedView = Object.assign(Object.assign({}, rest), { permission: value });
+            }
+            else {
+                this.editedView.permission = value;
+            }
+        }
+        this.cdr.markForCheck();
+    }
+    onSharedUsersChange(users) {
         if (RivViews.isSharedView(this.editedView)) {
-            this.editedView.sharedUsers = RivViews.toSharedUsers(this.selectedUsers);
+            this.editedView.sharedUsers = users;
         }
         this.cdr.markForCheck();
     }
+    getSharedUsers(view) {
+        if (RivViews.isSharedView(view)) {
+            return view.sharedUsers;
+        }
+        return EditViewComponent.NO_SHARED_USERS;
+    }
 }
+// Stable empty-array reference for the non-shared branch, so this getter
+// doesn't hand the permission picker a fresh [] on every change-detection
+// cycle (which would churn its @Input and trigger needless work).
+EditViewComponent.NO_SHARED_USERS = [];
 EditViewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EditViewComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-EditViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: EditViewComponent, selector: "riv-edit-view", inputs: { anchor: "anchor", autoSelectName: "autoSelectName", view: "view", userSource: "userSource", userSelectMode: "userSelectMode", onAddUser: "onAddUser", newTooltip: "newTooltip", mode: "mode" }, outputs: { save: "save", delete: "delete", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"editedView; let ev\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"anchor ?? null\"\n    [isModal]=\"true\"\n    [showCaret]=\"false\"\n    [theme]=\"'light'\"\n    [preferredPosition]=\"'bottom-right'\"\n    [fallbackDirection]=\"'clockwise'\"\n    (close)=\"close.emit()\"\n  >\n    <div class=\"edit-view\">\n      <div class=\"name-input\">\n        <span class=\"name-label\">Name * </span>\n        <riv-text-field\n          [autoFocus]=\"autoSelectName ? 'select' : false\"\n          [value]=\"ev.title ?? ''\"\n          (valueChange)=\"titleChange($event)\"\n        ></riv-text-field>\n      </div>\n\n      <hr class=\"divider\" />\n\n      <div class=\"permissions\">\n        <div class=\"permission-label\">View permissions</div>\n\n        <div class=\"permission-options\">\n          <button\n            *ngFor=\"let option of permissionOptions\"\n            class=\"permission-option\"\n            [class.current]=\"ev.permission === option.value\"\n            type=\"button\"\n            [attr.aria-checked]=\"ev.permission === option.value\"\n            [attr.aria-label]=\"option.title + ' permission'\"\n            (click)=\"permissionChange(option.value)\"\n          >\n            <div class=\"option-content\">\n              <div class=\"option-title\">\n                <span>{{ option.title }}</span>\n                <span class=\"option-description\">{{ option.subtitle }}</span>\n              </div>\n              <riv-icon\n                *ngIf=\"ev.permission === option.value\"\n                class=\"permission-indicator\"\n                [name]=\"'Check'\"\n                [size]=\"16\"\n              ></riv-icon>\n            </div>\n            <riv-select\n              *ngIf=\"\n                ev.permission === 'shared' &&\n                option.value === 'shared' &&\n                userSelectMode === 'select' &&\n                userSelectManager\n              \"\n              [label]=\"'Users with access'\"\n              [manager]=\"userSelectManager\"\n            ></riv-select>\n            <riv-search-select\n              *ngIf=\"\n                ev.permission === 'shared' &&\n                option.value === 'shared' &&\n                userSelectMode === 'search-select'\n              \"\n              (click)=\"$event.stopPropagation()\"\n              [label]=\"'Users with access'\"\n              [options]=\"userOptions\"\n              [selected]=\"selectedUsers\"\n              [placeholder]=\"'Search users'\"\n              [addNewLabel]=\"'Add'\"\n              [newTooltip]=\"newTooltip\"\n              (selectedChange)=\"onSelectedUsersChange($event)\"\n              (addNew)=\"handleAddUser($event)\"\n            ></riv-search-select>\n          </button>\n        </div>\n      </div>\n\n      <hr class=\"divider\" />\n\n      <div class=\"actions\">\n        <button\n          rivButton\n          [variant]=\"'ghost'\"\n          [icon]=\"'Trash2'\"\n          (click)=\"delete.emit(ev); close.emit()\"\n          *ngIf=\"canEdit()\"\n        >\n          Delete\n        </button>\n\n        <div class=\"actions-spacer\"></div>\n\n        <div class=\"primary-actions\">\n          <button rivButton [variant]=\"'ghost'\" (click)=\"close.emit()\">\n            Cancel\n          </button>\n          <button\n            rivButton\n            [variant]=\"'primary'\"\n            [disabled]=\"canEdit() && isClean()\"\n            (click)=\"save.emit(ev); close.emit()\"\n          >\n            Save\n          </button>\n        </div>\n      </div>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [".edit-view{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 104);max-width:50vw;max-height:80vh;overflow-y:auto}.divider{height:var(--border-width);background-color:var(--border-light);border:0;width:100%}.permissions{display:flex;flex-direction:column;gap:var(--size-medium)}.permission-options{display:flex;flex-direction:column}.permission-label,.name-label{font:var(--title-02)}.name-input{display:flex;flex-direction:column;gap:var(--size-small)}.permission-option{display:flex;flex-direction:column;gap:var(--size-small);padding:var(--size-small) var(--size-medium);border-radius:var(--border-radius-large);cursor:pointer;text-align:left}.permission-option:hover{background-color:var(--surface-light-1)}.permission-option:active,.permission-option.current{background-color:var(--surface-light-2)}.option-content{display:flex;justify-content:space-between;align-items:center}.option-title{font:var(--body-medium);display:flex;flex-direction:column;align-items:flex-start}.option-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-indicator{color:var(--type-light-link)}.actions{display:flex;justify-content:space-between;align-items:center}.actions-spacer{flex-grow:1}.primary-actions{display:flex;align-items:center;gap:var(--size-small)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "fillColor", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SearchSelectComponent, selector: "riv-search-select", inputs: ["options", "selected", "placeholder", "addNewLabel", "newTooltip", "size", "disabled", "label", "help", "required", "state", "errorMessage", "optionTemplate", "chipTemplate"], outputs: ["selectedChange", "addNew"] }, { kind: "component", type: SelectComponent, selector: "riv-select", inputs: ["manager", "size", "disabled", "locked", "allowedCalloutPositions", "preferredCalloutPosition"] }, { kind: "component", type: TextFieldComponent, selector: "riv-text-field", inputs: ["disabled", "readonly", "placeholder", "casing", "type", "size", "autoFocus", "name", "minLength", "maxLength", "value"], outputs: ["valueChange", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+EditViewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: EditViewComponent, selector: "riv-edit-view", inputs: { anchor: "anchor", autoSelectName: "autoSelectName", view: "view", userSource: "userSource", userSelectMode: "userSelectMode", onAddUser: "onAddUser", newTooltip: "newTooltip", mode: "mode" }, outputs: { save: "save", delete: "delete", close: "close" }, usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"editedView; let ev\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"anchor ?? null\"\n    [isModal]=\"true\"\n    [showCaret]=\"false\"\n    [theme]=\"'light'\"\n    [preferredPosition]=\"'bottom-right'\"\n    [fallbackDirection]=\"'clockwise'\"\n    (close)=\"close.emit()\"\n  >\n    <div class=\"edit-view\">\n      <div class=\"name-input\">\n        <span class=\"name-label\">Name * </span>\n        <riv-text-field\n          [autoFocus]=\"autoSelectName ? 'select' : false\"\n          [value]=\"ev.title ?? ''\"\n          (valueChange)=\"titleChange($event)\"\n        ></riv-text-field>\n      </div>\n\n      <hr class=\"divider\" />\n\n      <riv-permission-picker\n        [permission]=\"ev.permission\"\n        [sharedUsers]=\"getSharedUsers(ev)\"\n        [userSelectMode]=\"userSelectMode\"\n        [userSource]=\"userSource\"\n        [onAddUser]=\"onAddUser\"\n        [newTooltip]=\"newTooltip\"\n        (permissionChange)=\"onPermissionChange($event)\"\n        (sharedUsersChange)=\"onSharedUsersChange($event)\"\n      ></riv-permission-picker>\n\n      <hr class=\"divider\" />\n\n      <div class=\"actions\">\n        <button\n          rivButton\n          [variant]=\"'ghost'\"\n          [icon]=\"'Trash2'\"\n          (click)=\"delete.emit(ev); close.emit()\"\n          *ngIf=\"canEdit()\"\n        >\n          Delete\n        </button>\n\n        <div class=\"actions-spacer\"></div>\n\n        <div class=\"primary-actions\">\n          <button rivButton [variant]=\"'ghost'\" (click)=\"close.emit()\">\n            Cancel\n          </button>\n          <button\n            rivButton\n            [variant]=\"'primary'\"\n            [disabled]=\"canEdit() && isClean()\"\n            (click)=\"save.emit(ev); close.emit()\"\n          >\n            Save\n          </button>\n        </div>\n      </div>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [".edit-view{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 104);max-width:50vw;max-height:80vh;overflow-y:auto}.divider{height:var(--border-width);background-color:var(--border-light);border:0;width:100%}.name-label{font:var(--title-02)}.name-input{display:flex;flex-direction:column;gap:var(--size-small)}.actions{display:flex;justify-content:space-between;align-items:center}.actions-spacer{flex-grow:1}.primary-actions{display:flex;align-items:center;gap:var(--size-small)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: PermissionPickerComponent, selector: "riv-permission-picker", inputs: ["permission", "sharedUsers", "userSelectMode", "userSource", "onAddUser", "newTooltip", "disabledPermissions"], outputs: ["permissionChange", "sharedUsersChange"] }, { kind: "component", type: TextFieldComponent, selector: "riv-text-field", inputs: ["disabled", "readonly", "placeholder", "casing", "type", "size", "autoFocus", "name", "minLength", "maxLength", "value"], outputs: ["valueChange", "blur"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EditViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-edit-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"editedView; let ev\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"anchor ?? null\"\n    [isModal]=\"true\"\n    [showCaret]=\"false\"\n    [theme]=\"'light'\"\n    [preferredPosition]=\"'bottom-right'\"\n    [fallbackDirection]=\"'clockwise'\"\n    (close)=\"close.emit()\"\n  >\n    <div class=\"edit-view\">\n      <div class=\"name-input\">\n        <span class=\"name-label\">Name * </span>\n        <riv-text-field\n          [autoFocus]=\"autoSelectName ? 'select' : false\"\n          [value]=\"ev.title ?? ''\"\n          (valueChange)=\"titleChange($event)\"\n        ></riv-text-field>\n      </div>\n\n      <hr class=\"divider\" />\n\n      <div class=\"permissions\">\n        <div class=\"permission-label\">View permissions</div>\n\n        <div class=\"permission-options\">\n          <button\n            *ngFor=\"let option of permissionOptions\"\n            class=\"permission-option\"\n            [class.current]=\"ev.permission === option.value\"\n            type=\"button\"\n            [attr.aria-checked]=\"ev.permission === option.value\"\n            [attr.aria-label]=\"option.title + ' permission'\"\n            (click)=\"permissionChange(option.value)\"\n          >\n            <div class=\"option-content\">\n              <div class=\"option-title\">\n                <span>{{ option.title }}</span>\n                <span class=\"option-description\">{{ option.subtitle }}</span>\n              </div>\n              <riv-icon\n                *ngIf=\"ev.permission === option.value\"\n                class=\"permission-indicator\"\n                [name]=\"'Check'\"\n                [size]=\"16\"\n              ></riv-icon>\n            </div>\n            <riv-select\n              *ngIf=\"\n                ev.permission === 'shared' &&\n                option.value === 'shared' &&\n                userSelectMode === 'select' &&\n                userSelectManager\n              \"\n              [label]=\"'Users with access'\"\n              [manager]=\"userSelectManager\"\n            ></riv-select>\n            <riv-search-select\n              *ngIf=\"\n                ev.permission === 'shared' &&\n                option.value === 'shared' &&\n                userSelectMode === 'search-select'\n              \"\n              (click)=\"$event.stopPropagation()\"\n              [label]=\"'Users with access'\"\n              [options]=\"userOptions\"\n              [selected]=\"selectedUsers\"\n              [placeholder]=\"'Search users'\"\n              [addNewLabel]=\"'Add'\"\n              [newTooltip]=\"newTooltip\"\n              (selectedChange)=\"onSelectedUsersChange($event)\"\n              (addNew)=\"handleAddUser($event)\"\n            ></riv-search-select>\n          </button>\n        </div>\n      </div>\n\n      <hr class=\"divider\" />\n\n      <div class=\"actions\">\n        <button\n          rivButton\n          [variant]=\"'ghost'\"\n          [icon]=\"'Trash2'\"\n          (click)=\"delete.emit(ev); close.emit()\"\n          *ngIf=\"canEdit()\"\n        >\n          Delete\n        </button>\n\n        <div class=\"actions-spacer\"></div>\n\n        <div class=\"primary-actions\">\n          <button rivButton [variant]=\"'ghost'\" (click)=\"close.emit()\">\n            Cancel\n          </button>\n          <button\n            rivButton\n            [variant]=\"'primary'\"\n            [disabled]=\"canEdit() && isClean()\"\n            (click)=\"save.emit(ev); close.emit()\"\n          >\n            Save\n          </button>\n        </div>\n      </div>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [".edit-view{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 104);max-width:50vw;max-height:80vh;overflow-y:auto}.divider{height:var(--border-width);background-color:var(--border-light);border:0;width:100%}.permissions{display:flex;flex-direction:column;gap:var(--size-medium)}.permission-options{display:flex;flex-direction:column}.permission-label,.name-label{font:var(--title-02)}.name-input{display:flex;flex-direction:column;gap:var(--size-small)}.permission-option{display:flex;flex-direction:column;gap:var(--size-small);padding:var(--size-small) var(--size-medium);border-radius:var(--border-radius-large);cursor:pointer;text-align:left}.permission-option:hover{background-color:var(--surface-light-1)}.permission-option:active,.permission-option.current{background-color:var(--surface-light-2)}.option-content{display:flex;justify-content:space-between;align-items:center}.option-title{font:var(--body-medium);display:flex;flex-direction:column;align-items:flex-start}.option-description{font:var(--body-medium);color:var(--type-light-low-contrast)}.permission-indicator{color:var(--type-light-link)}.actions{display:flex;justify-content:space-between;align-items:center}.actions-spacer{flex-grow:1}.primary-actions{display:flex;align-items:center;gap:var(--size-small)}\n"] }]
+            args: [{ selector: 'riv-edit-view', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"editedView; let ev\">\n  <riv-callout\n    *riv-overlay\n    [anchor]=\"anchor ?? null\"\n    [isModal]=\"true\"\n    [showCaret]=\"false\"\n    [theme]=\"'light'\"\n    [preferredPosition]=\"'bottom-right'\"\n    [fallbackDirection]=\"'clockwise'\"\n    (close)=\"close.emit()\"\n  >\n    <div class=\"edit-view\">\n      <div class=\"name-input\">\n        <span class=\"name-label\">Name * </span>\n        <riv-text-field\n          [autoFocus]=\"autoSelectName ? 'select' : false\"\n          [value]=\"ev.title ?? ''\"\n          (valueChange)=\"titleChange($event)\"\n        ></riv-text-field>\n      </div>\n\n      <hr class=\"divider\" />\n\n      <riv-permission-picker\n        [permission]=\"ev.permission\"\n        [sharedUsers]=\"getSharedUsers(ev)\"\n        [userSelectMode]=\"userSelectMode\"\n        [userSource]=\"userSource\"\n        [onAddUser]=\"onAddUser\"\n        [newTooltip]=\"newTooltip\"\n        (permissionChange)=\"onPermissionChange($event)\"\n        (sharedUsersChange)=\"onSharedUsersChange($event)\"\n      ></riv-permission-picker>\n\n      <hr class=\"divider\" />\n\n      <div class=\"actions\">\n        <button\n          rivButton\n          [variant]=\"'ghost'\"\n          [icon]=\"'Trash2'\"\n          (click)=\"delete.emit(ev); close.emit()\"\n          *ngIf=\"canEdit()\"\n        >\n          Delete\n        </button>\n\n        <div class=\"actions-spacer\"></div>\n\n        <div class=\"primary-actions\">\n          <button rivButton [variant]=\"'ghost'\" (click)=\"close.emit()\">\n            Cancel\n          </button>\n          <button\n            rivButton\n            [variant]=\"'primary'\"\n            [disabled]=\"canEdit() && isClean()\"\n            (click)=\"save.emit(ev); close.emit()\"\n          >\n            Save\n          </button>\n        </div>\n      </div>\n    </div>\n  </riv-callout>\n</ng-container>\n", styles: [".edit-view{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-large);width:calc(var(--base-grid-size) * 104);max-width:50vw;max-height:80vh;overflow-y:auto}.divider{height:var(--border-width);background-color:var(--border-light);border:0;width:100%}.name-label{font:var(--title-02)}.name-input{display:flex;flex-direction:column;gap:var(--size-small)}.actions{display:flex;justify-content:space-between;align-items:center}.actions-spacer{flex-grow:1}.primary-actions{display:flex;align-items:center;gap:var(--size-small)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { anchor: [{
                 type: Input
             }], autoSelectName: [{
@@ -10190,6 +10288,100 @@ var Chart;
                 ? dataLabelPaddingConfig.target + dataLabelTextSizing.vertical
                 : 0)) *
             2;
+        function hover(pos) {
+            const realPosX = pos.x + pos.containerScrollX;
+            const realPosY = pos.y + pos.containerScrollY;
+            if (getIfHoverOutOfBounds(pos.x, pos.y, realPosX, realPosY, null, dimensions)) {
+                return null;
+            }
+            const centerPointX = dimensions.width / 2;
+            const centerPointY = dimensions.height / 2;
+            const donutPositionX = realPosX - centerPointX;
+            const donutPositionY = realPosY - centerPointY;
+            const hoverPosArcInfo = pointToArc(donutPositionX, donutPositionY);
+            const arcCenterLine = (outer + inner) / 2;
+            //Detect donut slice
+            let foundYIndex = -1;
+            let preferredPosition = undefined;
+            let donutXPosition = 0;
+            let donutYPosition = 0;
+            for (let i = 0; i < pieArcs.length; i++) {
+                const arc = pieArcs[i];
+                if (hoverPosArcInfo.angle > arc.startAngle &&
+                    hoverPosArcInfo.angle < arc.endAngle &&
+                    hoverPosArcInfo.radius > arcCenterLine - drawRadius &&
+                    hoverPosArcInfo.radius < arcCenterLine + drawRadius) {
+                    foundYIndex = i;
+                    const arcCenterPoint = arcToPoint((arc.startAngle + arc.endAngle) / 2, arcCenterLine);
+                    //Need to un-offset the positions
+                    donutXPosition = arcCenterPoint.x + centerPointX;
+                    donutYPosition = arcCenterPoint.y + centerPointY;
+                    const verticalArea = arcCenterPoint.y < (dimensions.height * -1) / 4
+                        ? 'top'
+                        : arcCenterPoint.y > dimensions.height / 4
+                            ? 'bottom'
+                            : 'center';
+                    //Determine the best position for the tooltip
+                    if (arcCenterPoint.x > 0) {
+                        //Right path
+                        if (!config.groupedTooltip || verticalArea === 'center') {
+                            preferredPosition = 'center-right';
+                        }
+                        else if (verticalArea === 'top') {
+                            preferredPosition = 'right-top';
+                        }
+                        else if (verticalArea === 'bottom') {
+                            preferredPosition = 'right-bottom';
+                        }
+                    }
+                    else {
+                        //Left path
+                        if (!config.groupedTooltip || verticalArea === 'center') {
+                            preferredPosition = 'center-left';
+                        }
+                        else if (verticalArea === 'top') {
+                            preferredPosition = 'left-top';
+                        }
+                        else if (verticalArea === 'bottom') {
+                            preferredPosition = 'left-bottom';
+                        }
+                    }
+                    break;
+                }
+            }
+            if (foundYIndex === -1) {
+                return null;
+            }
+            if (!hasNonZeroValue) {
+                donutXPosition = centerPointX + arcCenterLine;
+                donutYPosition = centerPointY;
+            }
+            const localAnchorX = donutXPosition - pos.containerScrollX;
+            const localAnchorY = donutYPosition - pos.containerScrollY;
+            const { anchorX, anchorY } = checkAnchorsAgainstBound(localAnchorX, localAnchorY, dimensions);
+            const anchor = new DOMRect(anchorX + pos.rect.x, anchorY + pos.rect.y, SMALL_PADDING, 0);
+            return {
+                hoverType: 'standard',
+                tooltip: {
+                    anchor,
+                    preferredPosition,
+                    date: null,
+                    metrics: donutData
+                        .map((y, index) => ({
+                        color: colors[index % colors.length],
+                        label: y.label,
+                        value: pipeTransform(y.value, y.isSecondary, true),
+                    }))
+                        .filter((_, i) => config.groupedTooltip || i === foundYIndex),
+                },
+                //Not used by donut charts
+                x: 0,
+                xIndex: 0,
+                ys: [],
+                yIndex: 0,
+                visibleYIndex: 0,
+            };
+        }
         return {
             chartWidth: drawWidth,
             chartHeight: drawHeight,
@@ -10210,6 +10402,7 @@ var Chart;
             horizontalContainerScale,
             verticalContainerScale,
             chartError: null,
+            hover,
         };
     }
     function flows(config, allData, dimensions) {
@@ -11611,6 +11804,16 @@ var Chart;
             y: radius * Math.sin(angle - Math.PI / 2),
         };
     }
+    function pointToArc(x, y) {
+        const radius = Math.hypot(x, y);
+        let angle = Math.atan2(y, x) + Math.PI / 2;
+        //Normalize to be within range [0, 2π]
+        angle = (angle + 2 * Math.PI) % (2 * Math.PI);
+        return {
+            angle,
+            radius,
+        };
+    }
     function getFullChartScaleValues(config, data, dimensions, pipeTransform, dateFormat) {
         var _a, _b;
         const chartDataDirection = getChartDataDirection(config);
@@ -12206,6 +12409,10 @@ var Chart;
         if (relPosX > dimensions.width || relPosY > dimensions.height) {
             return true;
         }
+        if (chartSizingValues === null) {
+            //If chartSizingValues aren't provided, no more checks
+            return false;
+        }
         //Check if we're in one of the padding areas
         if (realPosX < chartSizingValues.leftPadding ||
             realPosX >
@@ -13022,10 +13229,10 @@ class ChartComponent {
     }
 }
 ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChartComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChartComponent, selector: "riv-chart", inputs: { height: "height", width: "width", overrideHeight: "overrideHeight", overrideWidth: "overrideWidth", config: "config", data: "data" }, outputs: { chartClicked: "chartClicked" }, queries: [{ propertyName: "tooltipTemplate", first: true, predicate: ["tooltip"], descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "moreTextContainer", first: true, predicate: ["moreTextContainer"], descendants: true }], ngImport: i0, template: "<div\n  class=\"container\"\n  (rivClientSize)=\"width = $event.width\"\n  *ngIf=\"{ d: drawData$ | async } as vm\"\n  [style.--override-font-size]=\"getFontSize(vm.d)\"\n>\n  <ng-container\n    *ngIf=\"\n      !checkForNonDisplayState(vm.d) && (drawData$ | async);\n      let d;\n      else: nonDisplayState\n    \"\n  >\n    <div\n      (mousemove)=\"mousemove($event, d.hover)\"\n      (mouseleave)=\"mouseleave($event)\"\n      (click)=\"click()\"\n      #container\n      class=\"sub-container\"\n      [class.clickable]=\"isHoverClickable\"\n      tabIndex=\"0\"\n      [ngClass]=\"{ 'donut-container': config.type === 'donut' }\"\n      [ngStyle]=\"{\n        height: getSubcontainerHeight(d),\n        width: getSubcontainerWidth(d)\n      }\"\n    >\n      <svg:svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [attr.viewBox]=\"d.viewBox\"\n        [attr.height]=\"d.chartHeight\"\n        [attr.width]=\"d.chartWidth\"\n      >\n        <defs>\n          <!-- Stripe pattern -->\n          <pattern\n            id=\"stripes\"\n            x=\"0\"\n            y=\"0\"\n            [attr.width]=\"10\"\n            [attr.height]=\"10\"\n            patternUnits=\"userSpaceOnUse\"\n          >\n            <line\n              [attr.x1]=\"0\"\n              [attr.y1]=\"10\"\n              [attr.x2]=\"10\"\n              [attr.y2]=\"0\"\n              stroke=\"var(--white-100)\"\n              stroke-width=\"1\"\n            ></line>\n          </pattern>\n        </defs>\n        <ng-container *ngIf=\"!(config.type === 'horizontal-bar')\">\n          <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n            <text\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"getBottomLabelY(d)\"\n            >\n              {{ tick.label }}\n            </text>\n          </g>\n        </ng-container>\n        <ng-container *ngIf=\"config.type === 'horizontal-bar'\">\n          <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"left\">\n            <text\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"d.chartSizingValues.fontSize\"\n            >\n              {{ tick.label }}\n            </text>\n            <line\n              class=\"tick-line\"\n              [attr.x1]=\"tick.x\"\n              [attr.x2]=\"tick.x\"\n              y1=\"0\"\n              [attr.y2]=\"d.chartHeight\"\n            ></line>\n            <text\n              *ngIf=\"tick.secondaryLabel\"\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"getBottomLabelY(d)\"\n            >\n              {{ tick.secondaryLabel }}\n            </text>\n          </g>\n        </ng-container>\n        <g *ngFor=\"let tick of d.yTicks\">\n          <line\n            *ngIf=\"!(config.type === 'horizontal-bar')\"\n            class=\"tick-line\"\n            [attr.y1]=\"tick.y\"\n            [attr.y2]=\"tick.y\"\n            x1=\"0\"\n            [attr.x2]=\"d.chartWidth\"\n          ></line>\n          <text\n            rivSVGTextTruncate\n            [text]=\"tick.label\"\n            [width]=\"\n              config.type === 'horizontal-bar'\n                ? d.chartSizingValues.leftBucketLabel\n                : d.chartSizingValues.leftPadding\n            \"\n            class=\"tick-label\"\n            [attr.y]=\"tick.y\"\n            [attr.x]=\"0\"\n          >\n            {{ tick.label }}\n          </text>\n          <text\n            *ngIf=\"tick.secondaryLabel\"\n            rivSVGTextTruncate\n            [text]=\"tick.secondaryLabel\"\n            [width]=\"d.chartSizingValues.rightPadding\"\n            class=\"tick-label\"\n            [attr.y]=\"tick.y\"\n            [attr.x]=\"d.chartWidth\"\n            text-anchor=\"end\"\n          >\n            {{ tick.secondaryLabel }}\n          </text>\n        </g>\n        <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n          <g *ngIf=\"config.type !== 'horizontal-bar'\">\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]=\"'center-right'\"\n          [theme]=\"'light'\"\n        >\n          <ng-container *ngIf=\"tooltipTemplate; else defaultTooltip\">\n            <ng-container\n              [ngTemplateOutlet]=\"tooltipTemplate\"\n              [ngTemplateOutletContext]=\"{\n                xIndex: hoverData?.xIndex,\n                yIndex: hoverData?.yIndex,\n                isSuppValue: hoverData?.isSuppValue,\n                suppYIndex: hoverData?.suppYIndex\n              }\"\n            ></ng-container>\n          </ng-container>\n          <ng-template #defaultTooltip>\n            <div class=\"callout-content\">\n              <div *ngIf=\"hoverData?.tooltip?.date\" class=\"callout-row\">\n                {{ hoverData?.tooltip?.date }}\n              </div>\n              <div\n                class=\"callout-row\"\n                *ngFor=\"let metric of hoverData?.tooltip?.metrics\"\n              >\n                <span class=\"series-label\">\n                  <riv-legend-item\n                    [colorToken]=\"metric.color\"\n                    [style]=\"metric.pattern || 'solid'\"\n                  ></riv-legend-item>\n                  <span>{{ metric.label }}</span>\n                </span>\n                <span>{{ metric.value }}</span>\n              </div>\n            </div>\n          </ng-template>\n        </riv-callout>\n      </ng-container>\n      <ng-container *ngIf=\"flowHoverDataGuard(hover) as hoverData\">\n        <riv-callout\n          *riv-overlay\n          [anchor]=\"\n            hoverData?.tooltip?.anchor ? hoverData.tooltip.anchor : null\n          \"\n          [isModal]=\"false\"\n          [preferredPosition]=\"'top-center'\"\n          [theme]=\"'light'\"\n        >\n          <div class=\"callout-content\">\n            <div class=\"callout-row\">\n              <ng-container *ngIf=\"hoverData?.hoverTarget === 'connection'\">\n                <ng-container\n                  *ngIf=\"\n                    getBucketConfigInfo(hoverData, 'startId') as startConfig\n                  \"\n                >\n                  <riv-issue\n                    [label]=\"startConfig.title\"\n                    [colorToken]=\"startConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n                ->\n                <ng-container\n                  *ngIf=\"getBucketConfigInfo(hoverData, 'endId') as endConfig\"\n                >\n                  <riv-issue\n                    [label]=\"endConfig.title\"\n                    [colorToken]=\"endConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"hoverData?.hoverTarget !== 'connection'\">\n                <ng-container\n                  *ngIf=\"getBucketConfigInfo(hoverData, 'barId') as barConfig\"\n                >\n                  <riv-issue\n                    [label]=\"barConfig.title\"\n                    [colorToken]=\"barConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n              </ng-container>\n            </div>\n            <div\n              *ngIf=\"hoverData?.tooltip?.subtitle\"\n              class=\"callout-row flow-subtitle\"\n            >\n              {{ hoverData?.tooltip?.subtitle }}\n            </div>\n          </div>\n        </riv-callout>\n      </ng-container>\n    </div>\n    <legend *ngIf=\"d.data.type !== 'flow'\">\n      <ng-container *ngIf=\"firstHiddenLegendItemIndex$ | async; let fi\">\n        <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n          <riv-legend-item\n            *ngIf=\"i < fi.dataIndex && item.showLegendItem !== false\"\n            [label]=\"item.label\"\n            [style]=\"item.pattern || 'solid'\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n            [colorToken]=\"getItemColor(item, i)\"\n            (itemClick)=\"toggleLegend(item, i)\"\n          ></riv-legend-item>\n        </ng-container>\n        <ng-container\n          *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n        >\n          <riv-legend-item\n            *ngIf=\"i < fi.suppIndex && item.showLegendItem !== false\"\n            [label]=\"item.label\"\n            [style]=\"item.pattern || 'solid'\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n            [colorToken]=\"getItemColor(item, i)\"\n            (itemClick)=\"toggleLegend(item, i)\"\n          ></riv-legend-item>\n        </ng-container>\n        <div\n          #moreTextContainer\n          class=\"more-text-container\"\n          (mouseover)=\"mouseoverLegend()\"\n          (mouseleave)=\"mouseleaveLegend()\"\n          (click)=\"moreClick()\"\n          *ngIf=\"fi.hiddenCount\"\n        >\n          <span rivLink class=\"more-text\">\n            +\n            {{ fi.hiddenCount }} more\n          </span>\n        </div>\n        <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n          <riv-callout\n            *riv-overlay\n            [anchor]=\"moreTextContainer?.nativeElement\"\n            [isModal]=\"lockShowMoreTooltip\"\n            (close)=\"closeHandler()\"\n            [preferredPosition]=\"'bottom-right'\"\n            [theme]=\"'light'\"\n            [showCaret]=\"false\"\n          >\n            <div class=\"legend-tooltip\">\n              <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n                <riv-legend-item\n                  *ngIf=\"i >= fi.dataIndex && item.showLegendItem !== false\"\n                  [label]=\"item.label\"\n                  [style]=\"item.pattern || 'solid'\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n                  [colorToken]=\"getItemColor(item, i)\"\n                  (itemClick)=\"toggleLegend(item, i)\"\n                ></riv-legend-item>\n              </ng-container>\n              <ng-container\n                *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n              >\n                <riv-legend-item\n                  *ngIf=\"i >= fi.suppIndex && item.showLegendItem !== false\"\n                  [label]=\"item.label\"\n                  [style]=\"item.pattern || 'solid'\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [colorToken]=\"getItemColor(item, i)\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n                  (itemClick)=\"toggleLegend(item, i)\"\n                ></riv-legend-item>\n              </ng-container>\n            </div>\n          </riv-callout>\n        </ng-container>\n      </ng-container>\n    </legend>\n  </ng-container>\n</div>\n\n<ng-template #nonDisplayState>\n  <ng-container *ngIf=\"checkForNonDisplayState(drawData$ | async); let type\">\n    <riv-zero-state\n      *ngIf=\"type === 'zeroState'\"\n      [message]=\"config.zeroStateMessage\"\n    ></riv-zero-state>\n    <riv-zero-state\n      *ngIf=\"type === 'sizingErrorState'\"\n      [message]=\"config.sizingErrorStateMessage\"\n    ></riv-zero-state>\n  </ng-container>\n</ng-template>\n", styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-small)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--override-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-row:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline;width:100%}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);top:calc(var(--base-grid-size) * -1);position:relative}.legend-tooltip{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column;overflow-y:scroll;max-height:clamp(0px,60vh,600px)}.legend-tooltip>riv-legend-item{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;line-height:var(--type-1-line-height-0)}.sub-container.clickable{cursor:pointer}.sub-container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;overflow:auto}.sub-container:not(.donut-container){justify-items:start;align-items:start}.sub-container.donut-container{justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.donut-display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.donut-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.donut-value,.donut-label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}.donut-value.xsmall{font:var(--stat-xsmall)}.donut-value.small{font:var(--stat-small)}.donut-value.medium{font:var(--stat-medium)}.donut-value.large{font:var(--stat-large)}.data-label{fill:var(--type-light-high-contrast);font-size:var(--override-font-size)}.flow-data-label{text-decoration:underline;font-size:var(--override-font-size);cursor:pointer;fill:var(--type-light-link-hover)}.waterfall-line{stroke:var(--gray-60)}.flow-subtitle{font-weight:var(--font-weight-heavy)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: IssueComponent, selector: "riv-issue", inputs: ["label", "colorToken", "textColorOverride"] }, { kind: "component", type: LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "component", type: LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme", "variant"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "directive", type: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "directive", type: SVGTextTruncateDirective, selector: "svg text[rivSVGTextTruncate]", inputs: ["text", "width"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChartComponent, selector: "riv-chart", inputs: { height: "height", width: "width", overrideHeight: "overrideHeight", overrideWidth: "overrideWidth", config: "config", data: "data" }, outputs: { chartClicked: "chartClicked" }, queries: [{ propertyName: "tooltipTemplate", first: true, predicate: ["tooltip"], descendants: true }], viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }, { propertyName: "moreTextContainer", first: true, predicate: ["moreTextContainer"], descendants: true }], ngImport: i0, template: "<div\n  class=\"container\"\n  (rivClientSize)=\"width = $event.width\"\n  *ngIf=\"{ d: drawData$ | async } as vm\"\n  [style.--override-font-size]=\"getFontSize(vm.d)\"\n>\n  <ng-container\n    *ngIf=\"\n      !checkForNonDisplayState(vm.d) && (drawData$ | async);\n      let d;\n      else: nonDisplayState\n    \"\n  >\n    <div\n      (mousemove)=\"mousemove($event, d.hover)\"\n      (mouseleave)=\"mouseleave($event)\"\n      (click)=\"click()\"\n      #container\n      class=\"sub-container\"\n      [class.clickable]=\"isHoverClickable\"\n      tabIndex=\"0\"\n      [ngClass]=\"{ 'donut-container': config.type === 'donut' }\"\n      [ngStyle]=\"{\n        height: getSubcontainerHeight(d),\n        width: getSubcontainerWidth(d)\n      }\"\n    >\n      <svg:svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [attr.viewBox]=\"d.viewBox\"\n        [attr.height]=\"d.chartHeight\"\n        [attr.width]=\"d.chartWidth\"\n      >\n        <defs>\n          <!-- Stripe pattern -->\n          <pattern\n            id=\"stripes\"\n            x=\"0\"\n            y=\"0\"\n            [attr.width]=\"10\"\n            [attr.height]=\"10\"\n            patternUnits=\"userSpaceOnUse\"\n          >\n            <line\n              [attr.x1]=\"0\"\n              [attr.y1]=\"10\"\n              [attr.x2]=\"10\"\n              [attr.y2]=\"0\"\n              stroke=\"var(--white-100)\"\n              stroke-width=\"1\"\n            ></line>\n          </pattern>\n        </defs>\n        <ng-container *ngIf=\"!(config.type === 'horizontal-bar')\">\n          <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n            <text\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"getBottomLabelY(d)\"\n            >\n              {{ tick.label }}\n            </text>\n          </g>\n        </ng-container>\n        <ng-container *ngIf=\"config.type === 'horizontal-bar'\">\n          <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"left\">\n            <text\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"d.chartSizingValues.fontSize\"\n            >\n              {{ tick.label }}\n            </text>\n            <line\n              class=\"tick-line\"\n              [attr.x1]=\"tick.x\"\n              [attr.x2]=\"tick.x\"\n              y1=\"0\"\n              [attr.y2]=\"d.chartHeight\"\n            ></line>\n            <text\n              *ngIf=\"tick.secondaryLabel\"\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"getBottomLabelY(d)\"\n            >\n              {{ tick.secondaryLabel }}\n            </text>\n          </g>\n        </ng-container>\n        <g *ngFor=\"let tick of d.yTicks\">\n          <line\n            *ngIf=\"!(config.type === 'horizontal-bar')\"\n            class=\"tick-line\"\n            [attr.y1]=\"tick.y\"\n            [attr.y2]=\"tick.y\"\n            x1=\"0\"\n            [attr.x2]=\"d.chartWidth\"\n          ></line>\n          <text\n            rivSVGTextTruncate\n            [text]=\"tick.label\"\n            [width]=\"\n              config.type === 'horizontal-bar'\n                ? d.chartSizingValues.leftBucketLabel\n                : d.chartSizingValues.leftPadding\n            \"\n            class=\"tick-label\"\n            [attr.y]=\"tick.y\"\n            [attr.x]=\"0\"\n          >\n            {{ tick.label }}\n          </text>\n          <text\n            *ngIf=\"tick.secondaryLabel\"\n            rivSVGTextTruncate\n            [text]=\"tick.secondaryLabel\"\n            [width]=\"d.chartSizingValues.rightPadding\"\n            class=\"tick-label\"\n            [attr.y]=\"tick.y\"\n            [attr.x]=\"d.chartWidth\"\n            text-anchor=\"end\"\n          >\n            {{ tick.secondaryLabel }}\n          </text>\n        </g>\n        <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n          <g\n            *ngIf=\"config.type !== 'horizontal-bar' && config.type !== 'donut'\"\n          >\n            <line\n              class=\"tick-line\"\n              [attr.x1]=\"hoverData?.x\"\n              [attr.x2]=\"hoverData?.x\"\n              y1=\"0\"\n              [attr.y2]=\"d.chartHeight\"\n              stroke-width=\"2\"\n              stroke-dasharray=\"4\"\n            />\n          </g>\n        </ng-container>\n        <g *ngFor=\"let bar of d.bars; let i = index\">\n          <ng-container *ngFor=\"let rect of bar; let j = index\">\n            <defs *ngIf=\"rect.pattern === 'dots'\">\n              <pattern\n                [attr.id]=\"'dots-' + i + '-' + j\"\n                patternUnits=\"userSpaceOnUse\"\n                [attr.x]=\"rect.x\"\n                [attr.y]=\"rect.y\"\n                width=\"4\"\n                height=\"4\"\n              >\n                <circle\n                  cx=\"2\"\n                  cy=\"2\"\n                  r=\"1.5\"\n                  [attr.fill]=\"varColor(d.colors, i)\"\n                ></circle>\n              </pattern>\n            </defs>\n\n            <rect\n              *ngIf=\"rect.nonDisplay !== true\"\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              [attr.fill]=\"\n                rect.pattern === 'dots'\n                  ? 'url(#dots-' + i + '-' + j + ')'\n                  : getBarColor(rect, d.colors, i, hover)\n              \"\n              [attr.stroke]=\"\n                showBarBorders(rect, hover) ? varWrap('--black-100') : undefined\n              \"\n              [attr.stroke-width]=\"showBarBorders(rect, hover) ? 1 : undefined\"\n            ></rect>\n            <rect\n              *ngIf=\"showNonDisplayRect(rect, hover)\"\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              fill=\"transparent\"\n              [attr.stroke]=\"varWrap('--black-100')\"\n              [attr.stroke-width]=\"1\"\n            ></rect>\n            <rect\n              *ngIf=\"rect.pattern === 'striped'\"\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              fill=\"url(#stripes)\"\n            ></rect>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let bar of d.horizontalBars; let i = index\">\n          <ng-container *ngFor=\"let indBar of bar; let j = index\">\n            <defs *ngIf=\"indBar.pattern === 'dots'\">\n              <pattern\n                [attr.id]=\"'dots-' + i + '-' + j\"\n                patternUnits=\"userSpaceOnUse\"\n                [attr.x]=\"indBar.x\"\n                [attr.y]=\"indBar.y\"\n                width=\"4\"\n                height=\"4\"\n              >\n                <circle\n                  cx=\"2\"\n                  cy=\"2\"\n                  r=\"1.5\"\n                  [attr.fill]=\"varColor(d.colors, i)\"\n                ></circle>\n              </pattern>\n            </defs>\n            <path\n              [attr.d]=\"indBar.horizontalBar\"\n              [attr.fill]=\"\n                indBar.pattern === 'dots'\n                  ? 'url(#dots-' + i + '-' + j + ')'\n                  : varColor(d.colors, i)\n              \"\n              [attr.stroke]=\"\n                indBar.pattern === 'dots' ? 'none' : varColor(d.colors, i)\n              \"\n              [attr.stroke-width]=\"indBar.pattern === 'dots' ? 0 : 2\"\n            />\n            <path\n              *ngIf=\"indBar.pattern === 'striped'\"\n              [attr.d]=\"indBar.horizontalBar\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n              fill=\"url(#stripes)\"\n              stroke-width=\"0\"\n            />\n          </ng-container>\n        </g>\n        <g *ngFor=\"let gradient of d.gradients; let i = index\">\n          <ng-container *ngFor=\"let rect of gradient; let j = index\">\n            <defs>\n              <linearGradient\n                [attr.id]=\"'grad-' + i + '-' + j\"\n                x1=\"0\"\n                y1=\"0\"\n                x2=\"0\"\n                y2=\"1\"\n              >\n                <stop offset=\"0%\" [attr.stop-color]=\"varColor(d.colors, i)\" />\n                <stop offset=\"100%\" stop-color=\"white\" />\n              </linearGradient>\n            </defs>\n            <rect\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              [attr.fill]=\"'url(#grad-' + i + '-' + j + ')'\"\n              opacity=\"0.4\"\n            ></rect>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let line of d.lines; let i = index\">\n          <path\n            [attr.d]=\"line.line\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n            fill=\"none\"\n            stroke-width=\"2\"\n            [attr.stroke-linecap]=\"\n              line.pattern === 'dots' ? 'round' : undefined\n            \"\n            [attr.stroke-linejoin]=\"\n              line.pattern === 'dots' ? 'round' : undefined\n            \"\n            [attr.stroke-dasharray]=\"\n              line.pattern === 'striped'\n                ? '10 10'\n                : line.pattern === 'dots'\n                ? '0.25 7'\n                : undefined\n            \"\n          ></path>\n        </g>\n        <g *ngFor=\"let lineSinglePointFallback of d.circles; let i = index\">\n          <circle\n            class=\"marker\"\n            [attr.cx]=\"lineSinglePointFallback.cx\"\n            [attr.cy]=\"lineSinglePointFallback.cy\"\n            r=\"3.5\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></circle>\n        </g>\n        <g *ngFor=\"let line of d.lines; let i = index\">\n          <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n            <circle\n              class=\"marker\"\n              *ngIf=\"config.groupedTooltip || i === hoverData?.visibleYIndex\"\n              [attr.cx]=\"hoverData?.x\"\n              [attr.cy]=\"hoverData?.ys?.[i]\"\n              r=\"3.5\"\n              stroke-width=\"2\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n            ></circle>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <path [attr.d]=\"area.area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n          <path\n            *ngIf=\"area.pattern === 'striped'\"\n            [attr.d]=\"area.area\"\n            fill=\"url(#stripes)\"\n          ></path>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n            <circle\n              class=\"marker\"\n              *ngIf=\"config.groupedTooltip || i === hoverData?.visibleYIndex\"\n              [attr.cx]=\"hoverData?.x\"\n              [attr.cy]=\"hoverData?.ys?.[i]\"\n              r=\"3.5\"\n              stroke-width=\"2\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n            ></circle>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let wLine of d.waterfallLines\">\n          <line\n            class=\"waterfall-line\"\n            [attr.x1]=\"wLine.x1\"\n            [attr.x2]=\"wLine.x2\"\n            [attr.y1]=\"wLine.y1\"\n            [attr.y2]=\"wLine.y2\"\n            stroke-width=\"1\"\n            stroke-dasharray=\"6\"\n          />\n        </g>\n        <path\n          *ngFor=\"let path of d.arcs; let i = index\"\n          [attr.d]=\"path\"\n          [attr.fill]=\"varColor(d.colors, i)\"\n        ></path>\n        <g *ngFor=\"let dataLabel of d.dataLabels; let i = index\">\n          <text\n            *ngIf=\"config.showDataLabels && dataLabel.label\"\n            [ngClass]=\"getDataLabelClass(dataLabel, config, hover)\"\n            [attr.y]=\"dataLabel.yPos\"\n            [attr.x]=\"dataLabel.xPos\"\n            [attr.text-anchor]=\"dataLabel.anchor\"\n            [attr.font-weight]=\"\n              dataLabel.bold\n                ? 'var(--font-weight-heavy)'\n                : 'var(--font-weight-normal)'\n            \"\n            [attr.opacity]=\"getDataLabelOpacity(dataLabel, config, hover)\"\n          >\n            {{ dataLabel.label }}\n          </text>\n          <line\n            *ngIf=\"dataLabel.line && config.showDataLabels\"\n            [attr.y1]=\"dataLabel.line.y1\"\n            [attr.y2]=\"dataLabel.line.y2\"\n            [attr.x1]=\"dataLabel.line.x1\"\n            [attr.x2]=\"dataLabel.line.x2\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></line>\n        </g>\n        <g *ngFor=\"let connection of d.flowConnections\">\n          <path\n            [attr.d]=\"connection.path\"\n            [attr.fill]=\"getConnectionColor()\"\n            [attr.opacity]=\"getConnectionOpacity(connection, hover)\"\n          />\n        </g>\n      </svg:svg>\n      <div *ngIf=\"config.type === 'donut'\" class=\"donut-display\">\n        <div class=\"donut-value\" [ngClass]=\"config.donutDisplayInfo.size\">\n          {{ config.donutDisplayInfo.displayValue }}\n        </div>\n        <div class=\"donut-label\">\n          {{ config.donutDisplayInfo.displayLabel }}\n        </div>\n      </div>\n      <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n        <riv-callout\n          *riv-overlay\n          [anchor]=\"\n            hoverData?.tooltip?.anchor ? hoverData.tooltip.anchor : null\n          \"\n          [isModal]=\"false\"\n          [preferredPosition]=\"\n            hoverData?.tooltip?.preferredPosition ?? 'center-right'\n          \"\n          [theme]=\"'light'\"\n        >\n          <ng-container *ngIf=\"tooltipTemplate; else defaultTooltip\">\n            <ng-container\n              [ngTemplateOutlet]=\"tooltipTemplate\"\n              [ngTemplateOutletContext]=\"{\n                xIndex: hoverData?.xIndex,\n                yIndex: hoverData?.yIndex,\n                isSuppValue: hoverData?.isSuppValue,\n                suppYIndex: hoverData?.suppYIndex\n              }\"\n            ></ng-container>\n          </ng-container>\n          <ng-template #defaultTooltip>\n            <div class=\"callout-content\">\n              <div *ngIf=\"hoverData?.tooltip?.date\" class=\"callout-row\">\n                {{ hoverData?.tooltip?.date }}\n              </div>\n              <div\n                class=\"callout-row\"\n                *ngFor=\"let metric of hoverData?.tooltip?.metrics\"\n              >\n                <span class=\"series-label\">\n                  <riv-legend-item\n                    [colorToken]=\"metric.color\"\n                    [style]=\"metric.pattern || 'solid'\"\n                  ></riv-legend-item>\n                  <span>{{ metric.label }}</span>\n                </span>\n                <span>{{ metric.value }}</span>\n              </div>\n            </div>\n          </ng-template>\n        </riv-callout>\n      </ng-container>\n      <ng-container *ngIf=\"flowHoverDataGuard(hover) as hoverData\">\n        <riv-callout\n          *riv-overlay\n          [anchor]=\"\n            hoverData?.tooltip?.anchor ? hoverData.tooltip.anchor : null\n          \"\n          [isModal]=\"false\"\n          [preferredPosition]=\"'top-center'\"\n          [theme]=\"'light'\"\n        >\n          <div class=\"callout-content\">\n            <div class=\"callout-row\">\n              <ng-container *ngIf=\"hoverData?.hoverTarget === 'connection'\">\n                <ng-container\n                  *ngIf=\"\n                    getBucketConfigInfo(hoverData, 'startId') as startConfig\n                  \"\n                >\n                  <riv-issue\n                    [label]=\"startConfig.title\"\n                    [colorToken]=\"startConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n                ->\n                <ng-container\n                  *ngIf=\"getBucketConfigInfo(hoverData, 'endId') as endConfig\"\n                >\n                  <riv-issue\n                    [label]=\"endConfig.title\"\n                    [colorToken]=\"endConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"hoverData?.hoverTarget !== 'connection'\">\n                <ng-container\n                  *ngIf=\"getBucketConfigInfo(hoverData, 'barId') as barConfig\"\n                >\n                  <riv-issue\n                    [label]=\"barConfig.title\"\n                    [colorToken]=\"barConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n              </ng-container>\n            </div>\n            <div\n              *ngIf=\"hoverData?.tooltip?.subtitle\"\n              class=\"callout-row flow-subtitle\"\n            >\n              {{ hoverData?.tooltip?.subtitle }}\n            </div>\n          </div>\n        </riv-callout>\n      </ng-container>\n    </div>\n    <legend *ngIf=\"d.data.type !== 'flow'\">\n      <ng-container *ngIf=\"firstHiddenLegendItemIndex$ | async; let fi\">\n        <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n          <riv-legend-item\n            *ngIf=\"i < fi.dataIndex && item.showLegendItem !== false\"\n            [label]=\"item.label\"\n            [style]=\"item.pattern || 'solid'\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n            [colorToken]=\"getItemColor(item, i)\"\n            (itemClick)=\"toggleLegend(item, i)\"\n          ></riv-legend-item>\n        </ng-container>\n        <ng-container\n          *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n        >\n          <riv-legend-item\n            *ngIf=\"i < fi.suppIndex && item.showLegendItem !== false\"\n            [label]=\"item.label\"\n            [style]=\"item.pattern || 'solid'\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n            [colorToken]=\"getItemColor(item, i)\"\n            (itemClick)=\"toggleLegend(item, i)\"\n          ></riv-legend-item>\n        </ng-container>\n        <div\n          #moreTextContainer\n          class=\"more-text-container\"\n          (mouseover)=\"mouseoverLegend()\"\n          (mouseleave)=\"mouseleaveLegend()\"\n          (click)=\"moreClick()\"\n          *ngIf=\"fi.hiddenCount\"\n        >\n          <span rivLink class=\"more-text\">\n            +\n            {{ fi.hiddenCount }} more\n          </span>\n        </div>\n        <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n          <riv-callout\n            *riv-overlay\n            [anchor]=\"moreTextContainer?.nativeElement\"\n            [isModal]=\"lockShowMoreTooltip\"\n            (close)=\"closeHandler()\"\n            [preferredPosition]=\"'bottom-right'\"\n            [theme]=\"'light'\"\n            [showCaret]=\"false\"\n          >\n            <div class=\"legend-tooltip\">\n              <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n                <riv-legend-item\n                  *ngIf=\"i >= fi.dataIndex && item.showLegendItem !== false\"\n                  [label]=\"item.label\"\n                  [style]=\"item.pattern || 'solid'\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n                  [colorToken]=\"getItemColor(item, i)\"\n                  (itemClick)=\"toggleLegend(item, i)\"\n                ></riv-legend-item>\n              </ng-container>\n              <ng-container\n                *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n              >\n                <riv-legend-item\n                  *ngIf=\"i >= fi.suppIndex && item.showLegendItem !== false\"\n                  [label]=\"item.label\"\n                  [style]=\"item.pattern || 'solid'\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [colorToken]=\"getItemColor(item, i)\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n                  (itemClick)=\"toggleLegend(item, i)\"\n                ></riv-legend-item>\n              </ng-container>\n            </div>\n          </riv-callout>\n        </ng-container>\n      </ng-container>\n    </legend>\n  </ng-container>\n</div>\n\n<ng-template #nonDisplayState>\n  <ng-container *ngIf=\"checkForNonDisplayState(drawData$ | async); let type\">\n    <riv-zero-state\n      *ngIf=\"type === 'zeroState'\"\n      [message]=\"config.zeroStateMessage\"\n    ></riv-zero-state>\n    <riv-zero-state\n      *ngIf=\"type === 'sizingErrorState'\"\n      [message]=\"config.sizingErrorStateMessage\"\n    ></riv-zero-state>\n  </ng-container>\n</ng-template>\n", styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-small)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--override-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-row:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline;width:100%}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);top:calc(var(--base-grid-size) * -1);position:relative}.legend-tooltip{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column;overflow-y:scroll;max-height:clamp(0px,60vh,600px)}.legend-tooltip>riv-legend-item{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;line-height:var(--type-1-line-height-0)}.sub-container.clickable{cursor:pointer}.sub-container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;overflow:auto}.sub-container:not(.donut-container){justify-items:start;align-items:start}.sub-container.donut-container{justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.donut-display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.donut-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.donut-value,.donut-label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}.donut-value.xsmall{font:var(--stat-xsmall)}.donut-value.small{font:var(--stat-small)}.donut-value.medium{font:var(--stat-medium)}.donut-value.large{font:var(--stat-large)}.data-label{fill:var(--type-light-high-contrast);font-size:var(--override-font-size)}.flow-data-label{text-decoration:underline;font-size:var(--override-font-size);cursor:pointer;fill:var(--type-light-link-hover)}.waterfall-line{stroke:var(--gray-60)}.flow-subtitle{font-weight:var(--font-weight-heavy)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: IssueComponent, selector: "riv-issue", inputs: ["label", "colorToken", "textColorOverride"] }, { kind: "component", type: LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "component", type: LinkComponent, selector: "[rivLink]", inputs: ["disabled", "locked", "theme", "variant"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "directive", type: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "directive", type: SVGTextTruncateDirective, selector: "svg text[rivSVGTextTruncate]", inputs: ["text", "width"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChartComponent, decorators: [{
             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 *ngIf=\"config.type !== 'horizontal-bar'\">\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]=\"'center-right'\"\n          [theme]=\"'light'\"\n        >\n          <ng-container *ngIf=\"tooltipTemplate; else defaultTooltip\">\n            <ng-container\n              [ngTemplateOutlet]=\"tooltipTemplate\"\n              [ngTemplateOutletContext]=\"{\n                xIndex: hoverData?.xIndex,\n                yIndex: hoverData?.yIndex,\n                isSuppValue: hoverData?.isSuppValue,\n                suppYIndex: hoverData?.suppYIndex\n              }\"\n            ></ng-container>\n          </ng-container>\n          <ng-template #defaultTooltip>\n            <div class=\"callout-content\">\n              <div *ngIf=\"hoverData?.tooltip?.date\" class=\"callout-row\">\n                {{ hoverData?.tooltip?.date }}\n              </div>\n              <div\n                class=\"callout-row\"\n                *ngFor=\"let metric of hoverData?.tooltip?.metrics\"\n              >\n                <span class=\"series-label\">\n                  <riv-legend-item\n                    [colorToken]=\"metric.color\"\n                    [style]=\"metric.pattern || 'solid'\"\n                  ></riv-legend-item>\n                  <span>{{ metric.label }}</span>\n                </span>\n                <span>{{ metric.value }}</span>\n              </div>\n            </div>\n          </ng-template>\n        </riv-callout>\n      </ng-container>\n      <ng-container *ngIf=\"flowHoverDataGuard(hover) as hoverData\">\n        <riv-callout\n          *riv-overlay\n          [anchor]=\"\n            hoverData?.tooltip?.anchor ? hoverData.tooltip.anchor : null\n          \"\n          [isModal]=\"false\"\n          [preferredPosition]=\"'top-center'\"\n          [theme]=\"'light'\"\n        >\n          <div class=\"callout-content\">\n            <div class=\"callout-row\">\n              <ng-container *ngIf=\"hoverData?.hoverTarget === 'connection'\">\n                <ng-container\n                  *ngIf=\"\n                    getBucketConfigInfo(hoverData, 'startId') as startConfig\n                  \"\n                >\n                  <riv-issue\n                    [label]=\"startConfig.title\"\n                    [colorToken]=\"startConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n                ->\n                <ng-container\n                  *ngIf=\"getBucketConfigInfo(hoverData, 'endId') as endConfig\"\n                >\n                  <riv-issue\n                    [label]=\"endConfig.title\"\n                    [colorToken]=\"endConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"hoverData?.hoverTarget !== 'connection'\">\n                <ng-container\n                  *ngIf=\"getBucketConfigInfo(hoverData, 'barId') as barConfig\"\n                >\n                  <riv-issue\n                    [label]=\"barConfig.title\"\n                    [colorToken]=\"barConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n              </ng-container>\n            </div>\n            <div\n              *ngIf=\"hoverData?.tooltip?.subtitle\"\n              class=\"callout-row flow-subtitle\"\n            >\n              {{ hoverData?.tooltip?.subtitle }}\n            </div>\n          </div>\n        </riv-callout>\n      </ng-container>\n    </div>\n    <legend *ngIf=\"d.data.type !== 'flow'\">\n      <ng-container *ngIf=\"firstHiddenLegendItemIndex$ | async; let fi\">\n        <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n          <riv-legend-item\n            *ngIf=\"i < fi.dataIndex && item.showLegendItem !== false\"\n            [label]=\"item.label\"\n            [style]=\"item.pattern || 'solid'\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n            [colorToken]=\"getItemColor(item, i)\"\n            (itemClick)=\"toggleLegend(item, i)\"\n          ></riv-legend-item>\n        </ng-container>\n        <ng-container\n          *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n        >\n          <riv-legend-item\n            *ngIf=\"i < fi.suppIndex && item.showLegendItem !== false\"\n            [label]=\"item.label\"\n            [style]=\"item.pattern || 'solid'\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n            [colorToken]=\"getItemColor(item, i)\"\n            (itemClick)=\"toggleLegend(item, i)\"\n          ></riv-legend-item>\n        </ng-container>\n        <div\n          #moreTextContainer\n          class=\"more-text-container\"\n          (mouseover)=\"mouseoverLegend()\"\n          (mouseleave)=\"mouseleaveLegend()\"\n          (click)=\"moreClick()\"\n          *ngIf=\"fi.hiddenCount\"\n        >\n          <span rivLink class=\"more-text\">\n            +\n            {{ fi.hiddenCount }} more\n          </span>\n        </div>\n        <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n          <riv-callout\n            *riv-overlay\n            [anchor]=\"moreTextContainer?.nativeElement\"\n            [isModal]=\"lockShowMoreTooltip\"\n            (close)=\"closeHandler()\"\n            [preferredPosition]=\"'bottom-right'\"\n            [theme]=\"'light'\"\n            [showCaret]=\"false\"\n          >\n            <div class=\"legend-tooltip\">\n              <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n                <riv-legend-item\n                  *ngIf=\"i >= fi.dataIndex && item.showLegendItem !== false\"\n                  [label]=\"item.label\"\n                  [style]=\"item.pattern || 'solid'\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n                  [colorToken]=\"getItemColor(item, i)\"\n                  (itemClick)=\"toggleLegend(item, i)\"\n                ></riv-legend-item>\n              </ng-container>\n              <ng-container\n                *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n              >\n                <riv-legend-item\n                  *ngIf=\"i >= fi.suppIndex && item.showLegendItem !== false\"\n                  [label]=\"item.label\"\n                  [style]=\"item.pattern || 'solid'\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [colorToken]=\"getItemColor(item, i)\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n                  (itemClick)=\"toggleLegend(item, i)\"\n                ></riv-legend-item>\n              </ng-container>\n            </div>\n          </riv-callout>\n        </ng-container>\n      </ng-container>\n    </legend>\n  </ng-container>\n</div>\n\n<ng-template #nonDisplayState>\n  <ng-container *ngIf=\"checkForNonDisplayState(drawData$ | async); let type\">\n    <riv-zero-state\n      *ngIf=\"type === 'zeroState'\"\n      [message]=\"config.zeroStateMessage\"\n    ></riv-zero-state>\n    <riv-zero-state\n      *ngIf=\"type === 'sizingErrorState'\"\n      [message]=\"config.sizingErrorStateMessage\"\n    ></riv-zero-state>\n  </ng-container>\n</ng-template>\n", styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-small)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--override-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-row:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline;width:100%}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);top:calc(var(--base-grid-size) * -1);position:relative}.legend-tooltip{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column;overflow-y:scroll;max-height:clamp(0px,60vh,600px)}.legend-tooltip>riv-legend-item{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;line-height:var(--type-1-line-height-0)}.sub-container.clickable{cursor:pointer}.sub-container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;overflow:auto}.sub-container:not(.donut-container){justify-items:start;align-items:start}.sub-container.donut-container{justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.donut-display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.donut-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.donut-value,.donut-label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}.donut-value.xsmall{font:var(--stat-xsmall)}.donut-value.small{font:var(--stat-small)}.donut-value.medium{font:var(--stat-medium)}.donut-value.large{font:var(--stat-large)}.data-label{fill:var(--type-light-high-contrast);font-size:var(--override-font-size)}.flow-data-label{text-decoration:underline;font-size:var(--override-font-size);cursor:pointer;fill:var(--type-light-link-hover)}.waterfall-line{stroke:var(--gray-60)}.flow-subtitle{font-weight:var(--font-weight-heavy)}\n"] }]
+            args: [{ selector: 'riv-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"container\"\n  (rivClientSize)=\"width = $event.width\"\n  *ngIf=\"{ d: drawData$ | async } as vm\"\n  [style.--override-font-size]=\"getFontSize(vm.d)\"\n>\n  <ng-container\n    *ngIf=\"\n      !checkForNonDisplayState(vm.d) && (drawData$ | async);\n      let d;\n      else: nonDisplayState\n    \"\n  >\n    <div\n      (mousemove)=\"mousemove($event, d.hover)\"\n      (mouseleave)=\"mouseleave($event)\"\n      (click)=\"click()\"\n      #container\n      class=\"sub-container\"\n      [class.clickable]=\"isHoverClickable\"\n      tabIndex=\"0\"\n      [ngClass]=\"{ 'donut-container': config.type === 'donut' }\"\n      [ngStyle]=\"{\n        height: getSubcontainerHeight(d),\n        width: getSubcontainerWidth(d)\n      }\"\n    >\n      <svg:svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [attr.viewBox]=\"d.viewBox\"\n        [attr.height]=\"d.chartHeight\"\n        [attr.width]=\"d.chartWidth\"\n      >\n        <defs>\n          <!-- Stripe pattern -->\n          <pattern\n            id=\"stripes\"\n            x=\"0\"\n            y=\"0\"\n            [attr.width]=\"10\"\n            [attr.height]=\"10\"\n            patternUnits=\"userSpaceOnUse\"\n          >\n            <line\n              [attr.x1]=\"0\"\n              [attr.y1]=\"10\"\n              [attr.x2]=\"10\"\n              [attr.y2]=\"0\"\n              stroke=\"var(--white-100)\"\n              stroke-width=\"1\"\n            ></line>\n          </pattern>\n        </defs>\n        <ng-container *ngIf=\"!(config.type === 'horizontal-bar')\">\n          <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n            <text\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"getBottomLabelY(d)\"\n            >\n              {{ tick.label }}\n            </text>\n          </g>\n        </ng-container>\n        <ng-container *ngIf=\"config.type === 'horizontal-bar'\">\n          <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"left\">\n            <text\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"d.chartSizingValues.fontSize\"\n            >\n              {{ tick.label }}\n            </text>\n            <line\n              class=\"tick-line\"\n              [attr.x1]=\"tick.x\"\n              [attr.x2]=\"tick.x\"\n              y1=\"0\"\n              [attr.y2]=\"d.chartHeight\"\n            ></line>\n            <text\n              *ngIf=\"tick.secondaryLabel\"\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"getBottomLabelY(d)\"\n            >\n              {{ tick.secondaryLabel }}\n            </text>\n          </g>\n        </ng-container>\n        <g *ngFor=\"let tick of d.yTicks\">\n          <line\n            *ngIf=\"!(config.type === 'horizontal-bar')\"\n            class=\"tick-line\"\n            [attr.y1]=\"tick.y\"\n            [attr.y2]=\"tick.y\"\n            x1=\"0\"\n            [attr.x2]=\"d.chartWidth\"\n          ></line>\n          <text\n            rivSVGTextTruncate\n            [text]=\"tick.label\"\n            [width]=\"\n              config.type === 'horizontal-bar'\n                ? d.chartSizingValues.leftBucketLabel\n                : d.chartSizingValues.leftPadding\n            \"\n            class=\"tick-label\"\n            [attr.y]=\"tick.y\"\n            [attr.x]=\"0\"\n          >\n            {{ tick.label }}\n          </text>\n          <text\n            *ngIf=\"tick.secondaryLabel\"\n            rivSVGTextTruncate\n            [text]=\"tick.secondaryLabel\"\n            [width]=\"d.chartSizingValues.rightPadding\"\n            class=\"tick-label\"\n            [attr.y]=\"tick.y\"\n            [attr.x]=\"d.chartWidth\"\n            text-anchor=\"end\"\n          >\n            {{ tick.secondaryLabel }}\n          </text>\n        </g>\n        <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n          <g\n            *ngIf=\"config.type !== 'horizontal-bar' && config.type !== 'donut'\"\n          >\n            <line\n              class=\"tick-line\"\n              [attr.x1]=\"hoverData?.x\"\n              [attr.x2]=\"hoverData?.x\"\n              y1=\"0\"\n              [attr.y2]=\"d.chartHeight\"\n              stroke-width=\"2\"\n              stroke-dasharray=\"4\"\n            />\n          </g>\n        </ng-container>\n        <g *ngFor=\"let bar of d.bars; let i = index\">\n          <ng-container *ngFor=\"let rect of bar; let j = index\">\n            <defs *ngIf=\"rect.pattern === 'dots'\">\n              <pattern\n                [attr.id]=\"'dots-' + i + '-' + j\"\n                patternUnits=\"userSpaceOnUse\"\n                [attr.x]=\"rect.x\"\n                [attr.y]=\"rect.y\"\n                width=\"4\"\n                height=\"4\"\n              >\n                <circle\n                  cx=\"2\"\n                  cy=\"2\"\n                  r=\"1.5\"\n                  [attr.fill]=\"varColor(d.colors, i)\"\n                ></circle>\n              </pattern>\n            </defs>\n\n            <rect\n              *ngIf=\"rect.nonDisplay !== true\"\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              [attr.fill]=\"\n                rect.pattern === 'dots'\n                  ? 'url(#dots-' + i + '-' + j + ')'\n                  : getBarColor(rect, d.colors, i, hover)\n              \"\n              [attr.stroke]=\"\n                showBarBorders(rect, hover) ? varWrap('--black-100') : undefined\n              \"\n              [attr.stroke-width]=\"showBarBorders(rect, hover) ? 1 : undefined\"\n            ></rect>\n            <rect\n              *ngIf=\"showNonDisplayRect(rect, hover)\"\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              fill=\"transparent\"\n              [attr.stroke]=\"varWrap('--black-100')\"\n              [attr.stroke-width]=\"1\"\n            ></rect>\n            <rect\n              *ngIf=\"rect.pattern === 'striped'\"\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              fill=\"url(#stripes)\"\n            ></rect>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let bar of d.horizontalBars; let i = index\">\n          <ng-container *ngFor=\"let indBar of bar; let j = index\">\n            <defs *ngIf=\"indBar.pattern === 'dots'\">\n              <pattern\n                [attr.id]=\"'dots-' + i + '-' + j\"\n                patternUnits=\"userSpaceOnUse\"\n                [attr.x]=\"indBar.x\"\n                [attr.y]=\"indBar.y\"\n                width=\"4\"\n                height=\"4\"\n              >\n                <circle\n                  cx=\"2\"\n                  cy=\"2\"\n                  r=\"1.5\"\n                  [attr.fill]=\"varColor(d.colors, i)\"\n                ></circle>\n              </pattern>\n            </defs>\n            <path\n              [attr.d]=\"indBar.horizontalBar\"\n              [attr.fill]=\"\n                indBar.pattern === 'dots'\n                  ? 'url(#dots-' + i + '-' + j + ')'\n                  : varColor(d.colors, i)\n              \"\n              [attr.stroke]=\"\n                indBar.pattern === 'dots' ? 'none' : varColor(d.colors, i)\n              \"\n              [attr.stroke-width]=\"indBar.pattern === 'dots' ? 0 : 2\"\n            />\n            <path\n              *ngIf=\"indBar.pattern === 'striped'\"\n              [attr.d]=\"indBar.horizontalBar\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n              fill=\"url(#stripes)\"\n              stroke-width=\"0\"\n            />\n          </ng-container>\n        </g>\n        <g *ngFor=\"let gradient of d.gradients; let i = index\">\n          <ng-container *ngFor=\"let rect of gradient; let j = index\">\n            <defs>\n              <linearGradient\n                [attr.id]=\"'grad-' + i + '-' + j\"\n                x1=\"0\"\n                y1=\"0\"\n                x2=\"0\"\n                y2=\"1\"\n              >\n                <stop offset=\"0%\" [attr.stop-color]=\"varColor(d.colors, i)\" />\n                <stop offset=\"100%\" stop-color=\"white\" />\n              </linearGradient>\n            </defs>\n            <rect\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              [attr.fill]=\"'url(#grad-' + i + '-' + j + ')'\"\n              opacity=\"0.4\"\n            ></rect>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let line of d.lines; let i = index\">\n          <path\n            [attr.d]=\"line.line\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n            fill=\"none\"\n            stroke-width=\"2\"\n            [attr.stroke-linecap]=\"\n              line.pattern === 'dots' ? 'round' : undefined\n            \"\n            [attr.stroke-linejoin]=\"\n              line.pattern === 'dots' ? 'round' : undefined\n            \"\n            [attr.stroke-dasharray]=\"\n              line.pattern === 'striped'\n                ? '10 10'\n                : line.pattern === 'dots'\n                ? '0.25 7'\n                : undefined\n            \"\n          ></path>\n        </g>\n        <g *ngFor=\"let lineSinglePointFallback of d.circles; let i = index\">\n          <circle\n            class=\"marker\"\n            [attr.cx]=\"lineSinglePointFallback.cx\"\n            [attr.cy]=\"lineSinglePointFallback.cy\"\n            r=\"3.5\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></circle>\n        </g>\n        <g *ngFor=\"let line of d.lines; let i = index\">\n          <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n            <circle\n              class=\"marker\"\n              *ngIf=\"config.groupedTooltip || i === hoverData?.visibleYIndex\"\n              [attr.cx]=\"hoverData?.x\"\n              [attr.cy]=\"hoverData?.ys?.[i]\"\n              r=\"3.5\"\n              stroke-width=\"2\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n            ></circle>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <path [attr.d]=\"area.area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n          <path\n            *ngIf=\"area.pattern === 'striped'\"\n            [attr.d]=\"area.area\"\n            fill=\"url(#stripes)\"\n          ></path>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n            <circle\n              class=\"marker\"\n              *ngIf=\"config.groupedTooltip || i === hoverData?.visibleYIndex\"\n              [attr.cx]=\"hoverData?.x\"\n              [attr.cy]=\"hoverData?.ys?.[i]\"\n              r=\"3.5\"\n              stroke-width=\"2\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n            ></circle>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let wLine of d.waterfallLines\">\n          <line\n            class=\"waterfall-line\"\n            [attr.x1]=\"wLine.x1\"\n            [attr.x2]=\"wLine.x2\"\n            [attr.y1]=\"wLine.y1\"\n            [attr.y2]=\"wLine.y2\"\n            stroke-width=\"1\"\n            stroke-dasharray=\"6\"\n          />\n        </g>\n        <path\n          *ngFor=\"let path of d.arcs; let i = index\"\n          [attr.d]=\"path\"\n          [attr.fill]=\"varColor(d.colors, i)\"\n        ></path>\n        <g *ngFor=\"let dataLabel of d.dataLabels; let i = index\">\n          <text\n            *ngIf=\"config.showDataLabels && dataLabel.label\"\n            [ngClass]=\"getDataLabelClass(dataLabel, config, hover)\"\n            [attr.y]=\"dataLabel.yPos\"\n            [attr.x]=\"dataLabel.xPos\"\n            [attr.text-anchor]=\"dataLabel.anchor\"\n            [attr.font-weight]=\"\n              dataLabel.bold\n                ? 'var(--font-weight-heavy)'\n                : 'var(--font-weight-normal)'\n            \"\n            [attr.opacity]=\"getDataLabelOpacity(dataLabel, config, hover)\"\n          >\n            {{ dataLabel.label }}\n          </text>\n          <line\n            *ngIf=\"dataLabel.line && config.showDataLabels\"\n            [attr.y1]=\"dataLabel.line.y1\"\n            [attr.y2]=\"dataLabel.line.y2\"\n            [attr.x1]=\"dataLabel.line.x1\"\n            [attr.x2]=\"dataLabel.line.x2\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></line>\n        </g>\n        <g *ngFor=\"let connection of d.flowConnections\">\n          <path\n            [attr.d]=\"connection.path\"\n            [attr.fill]=\"getConnectionColor()\"\n            [attr.opacity]=\"getConnectionOpacity(connection, hover)\"\n          />\n        </g>\n      </svg:svg>\n      <div *ngIf=\"config.type === 'donut'\" class=\"donut-display\">\n        <div class=\"donut-value\" [ngClass]=\"config.donutDisplayInfo.size\">\n          {{ config.donutDisplayInfo.displayValue }}\n        </div>\n        <div class=\"donut-label\">\n          {{ config.donutDisplayInfo.displayLabel }}\n        </div>\n      </div>\n      <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n        <riv-callout\n          *riv-overlay\n          [anchor]=\"\n            hoverData?.tooltip?.anchor ? hoverData.tooltip.anchor : null\n          \"\n          [isModal]=\"false\"\n          [preferredPosition]=\"\n            hoverData?.tooltip?.preferredPosition ?? 'center-right'\n          \"\n          [theme]=\"'light'\"\n        >\n          <ng-container *ngIf=\"tooltipTemplate; else defaultTooltip\">\n            <ng-container\n              [ngTemplateOutlet]=\"tooltipTemplate\"\n              [ngTemplateOutletContext]=\"{\n                xIndex: hoverData?.xIndex,\n                yIndex: hoverData?.yIndex,\n                isSuppValue: hoverData?.isSuppValue,\n                suppYIndex: hoverData?.suppYIndex\n              }\"\n            ></ng-container>\n          </ng-container>\n          <ng-template #defaultTooltip>\n            <div class=\"callout-content\">\n              <div *ngIf=\"hoverData?.tooltip?.date\" class=\"callout-row\">\n                {{ hoverData?.tooltip?.date }}\n              </div>\n              <div\n                class=\"callout-row\"\n                *ngFor=\"let metric of hoverData?.tooltip?.metrics\"\n              >\n                <span class=\"series-label\">\n                  <riv-legend-item\n                    [colorToken]=\"metric.color\"\n                    [style]=\"metric.pattern || 'solid'\"\n                  ></riv-legend-item>\n                  <span>{{ metric.label }}</span>\n                </span>\n                <span>{{ metric.value }}</span>\n              </div>\n            </div>\n          </ng-template>\n        </riv-callout>\n      </ng-container>\n      <ng-container *ngIf=\"flowHoverDataGuard(hover) as hoverData\">\n        <riv-callout\n          *riv-overlay\n          [anchor]=\"\n            hoverData?.tooltip?.anchor ? hoverData.tooltip.anchor : null\n          \"\n          [isModal]=\"false\"\n          [preferredPosition]=\"'top-center'\"\n          [theme]=\"'light'\"\n        >\n          <div class=\"callout-content\">\n            <div class=\"callout-row\">\n              <ng-container *ngIf=\"hoverData?.hoverTarget === 'connection'\">\n                <ng-container\n                  *ngIf=\"\n                    getBucketConfigInfo(hoverData, 'startId') as startConfig\n                  \"\n                >\n                  <riv-issue\n                    [label]=\"startConfig.title\"\n                    [colorToken]=\"startConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n                ->\n                <ng-container\n                  *ngIf=\"getBucketConfigInfo(hoverData, 'endId') as endConfig\"\n                >\n                  <riv-issue\n                    [label]=\"endConfig.title\"\n                    [colorToken]=\"endConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"hoverData?.hoverTarget !== 'connection'\">\n                <ng-container\n                  *ngIf=\"getBucketConfigInfo(hoverData, 'barId') as barConfig\"\n                >\n                  <riv-issue\n                    [label]=\"barConfig.title\"\n                    [colorToken]=\"barConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n              </ng-container>\n            </div>\n            <div\n              *ngIf=\"hoverData?.tooltip?.subtitle\"\n              class=\"callout-row flow-subtitle\"\n            >\n              {{ hoverData?.tooltip?.subtitle }}\n            </div>\n          </div>\n        </riv-callout>\n      </ng-container>\n    </div>\n    <legend *ngIf=\"d.data.type !== 'flow'\">\n      <ng-container *ngIf=\"firstHiddenLegendItemIndex$ | async; let fi\">\n        <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n          <riv-legend-item\n            *ngIf=\"i < fi.dataIndex && item.showLegendItem !== false\"\n            [label]=\"item.label\"\n            [style]=\"item.pattern || 'solid'\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n            [colorToken]=\"getItemColor(item, i)\"\n            (itemClick)=\"toggleLegend(item, i)\"\n          ></riv-legend-item>\n        </ng-container>\n        <ng-container\n          *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n        >\n          <riv-legend-item\n            *ngIf=\"i < fi.suppIndex && item.showLegendItem !== false\"\n            [label]=\"item.label\"\n            [style]=\"item.pattern || 'solid'\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n            [colorToken]=\"getItemColor(item, i)\"\n            (itemClick)=\"toggleLegend(item, i)\"\n          ></riv-legend-item>\n        </ng-container>\n        <div\n          #moreTextContainer\n          class=\"more-text-container\"\n          (mouseover)=\"mouseoverLegend()\"\n          (mouseleave)=\"mouseleaveLegend()\"\n          (click)=\"moreClick()\"\n          *ngIf=\"fi.hiddenCount\"\n        >\n          <span rivLink class=\"more-text\">\n            +\n            {{ fi.hiddenCount }} more\n          </span>\n        </div>\n        <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n          <riv-callout\n            *riv-overlay\n            [anchor]=\"moreTextContainer?.nativeElement\"\n            [isModal]=\"lockShowMoreTooltip\"\n            (close)=\"closeHandler()\"\n            [preferredPosition]=\"'bottom-right'\"\n            [theme]=\"'light'\"\n            [showCaret]=\"false\"\n          >\n            <div class=\"legend-tooltip\">\n              <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n                <riv-legend-item\n                  *ngIf=\"i >= fi.dataIndex && item.showLegendItem !== false\"\n                  [label]=\"item.label\"\n                  [style]=\"item.pattern || 'solid'\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n                  [colorToken]=\"getItemColor(item, i)\"\n                  (itemClick)=\"toggleLegend(item, i)\"\n                ></riv-legend-item>\n              </ng-container>\n              <ng-container\n                *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n              >\n                <riv-legend-item\n                  *ngIf=\"i >= fi.suppIndex && item.showLegendItem !== false\"\n                  [label]=\"item.label\"\n                  [style]=\"item.pattern || 'solid'\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [colorToken]=\"getItemColor(item, i)\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n                  (itemClick)=\"toggleLegend(item, i)\"\n                ></riv-legend-item>\n              </ng-container>\n            </div>\n          </riv-callout>\n        </ng-container>\n      </ng-container>\n    </legend>\n  </ng-container>\n</div>\n\n<ng-template #nonDisplayState>\n  <ng-container *ngIf=\"checkForNonDisplayState(drawData$ | async); let type\">\n    <riv-zero-state\n      *ngIf=\"type === 'zeroState'\"\n      [message]=\"config.zeroStateMessage\"\n    ></riv-zero-state>\n    <riv-zero-state\n      *ngIf=\"type === 'sizingErrorState'\"\n      [message]=\"config.sizingErrorStateMessage\"\n    ></riv-zero-state>\n  </ng-container>\n</ng-template>\n", styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-small)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--override-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-row:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline;width:100%}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);top:calc(var(--base-grid-size) * -1);position:relative}.legend-tooltip{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column;overflow-y:scroll;max-height:clamp(0px,60vh,600px)}.legend-tooltip>riv-legend-item{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;line-height:var(--type-1-line-height-0)}.sub-container.clickable{cursor:pointer}.sub-container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;overflow:auto}.sub-container:not(.donut-container){justify-items:start;align-items:start}.sub-container.donut-container{justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.donut-display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.donut-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.donut-value,.donut-label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}.donut-value.xsmall{font:var(--stat-xsmall)}.donut-value.small{font:var(--stat-small)}.donut-value.medium{font:var(--stat-medium)}.donut-value.large{font:var(--stat-large)}.data-label{fill:var(--type-light-high-contrast);font-size:var(--override-font-size)}.flow-data-label{text-decoration:underline;font-size:var(--override-font-size);cursor:pointer;fill:var(--type-light-link-hover)}.waterfall-line{stroke:var(--gray-60)}.flow-subtitle{font-weight:var(--font-weight-heavy)}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container']
@@ -14597,6 +14804,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         PageHeaderComponent,
         PercentageFieldComponent,
         PercentagePipe,
+        PermissionPickerComponent,
         PhoneFieldComponent,
         ProgressComponent,
         RadioComponent,
@@ -14692,6 +14900,7 @@ RivModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.
         PageHeaderComponent,
         PercentageFieldComponent,
         PercentagePipe,
+        PermissionPickerComponent,
         PhoneFieldComponent,
         ProgressComponent,
         RadioComponent,
@@ -14793,6 +15002,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         PageHeaderComponent,
                         PercentageFieldComponent,
                         PercentagePipe,
+                        PermissionPickerComponent,
                         PhoneFieldComponent,
                         ProgressComponent,
                         RadioComponent,
@@ -14891,6 +15101,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
                         PageHeaderComponent,
                         PercentageFieldComponent,
                         PercentagePipe,
+                        PermissionPickerComponent,
                         PhoneFieldComponent,
                         ProgressComponent,
                         RadioComponent,
@@ -14942,5 +15153,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ANIMATION_CONSTANTS, AllViewsModalComponent, AlphabeticFieldComponent, AutoFocusDirective, BadgeComponent, BannerActionComponent, BannerComponent, ButtonComponent, ButtonGroupComponent, CalloutComponent, CardCheckboxComponent, Chart, ChartComponent, CheckboxComponent, CurrencyFieldComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DateComponent, DatePipe, DateRangeComponent, DaysPipe, DialogComponent, DollarsPipe, DonutComponent, DownloadService, EditViewComponent, FunnelChartComponent, HelpComponent, HighlightComponent, IconComponent, InputLabelComponent, IssueComponent, LegendItemComponent, LinkComponent, LoadingComponent, LoadingCoverComponent, LockedTooltipDirective, MapIndicatorComponent, MentionsInputComponent, MenuComponent, MenuItemComponent, MetricComponent, MiniPieComponent, ModalComponent, NotificationBadgeComponent, NumberFieldComponent, NumberPipe, OptionGroupPipe, OverlayDirective, OverlayOutletComponent, PageHeaderComponent, PercentageFieldComponent, PercentagePipe, PhoneFieldComponent, ProgressComponent, RadioComponent, RivModule, RivSelect, RivTable, RivViews, SVGTextTruncateDirective, SearchComponent, SearchSelectComponent, SelectComponent, SelectNodeComponent, SentenceCasePipe, SideSheetComponent, SimpleSelectComponent, SimpleTableCellComponent, SimpleTableComponent, SimpleTableHeaderCellComponent, SimpleTableRowComponent, SizeDirective, SmallCurrencyPipe, SrOnlyComponent, StackedColumnComponent, StackedRowComponent, SwitchCheckboxComponent, TabComponent, TableColumnSettingsComponent, TableColumnSettingsSideSheetComponent, TableComponent, TableCsvExportComponent, TableSearchColumnsComponent, TableSearchComponent, TabsComponent, TextFieldComponent, TextareaFieldComponent, TimeSeriesComponent, ToastActionComponent, ToastComponent, TooltipComponent, TooltipDirective, TrendComponent, TruncateComponent, ValidationMessageComponent, ViewMenuComponent, ViewsComponent, VisibilityDirective, ZeroStateComponent, toSentenceCase };
+export { ANIMATION_CONSTANTS, AllViewsModalComponent, AlphabeticFieldComponent, AutoFocusDirective, BadgeComponent, BannerActionComponent, BannerComponent, ButtonComponent, ButtonGroupComponent, CalloutComponent, CardCheckboxComponent, Chart, ChartComponent, CheckboxComponent, CurrencyFieldComponent, DataTableCellComponent, DataTableComponent, DataTableHeaderCellComponent, DataTableRowComponent, DateComponent, DatePipe, DateRangeComponent, DaysPipe, DialogComponent, DollarsPipe, DonutComponent, DownloadService, EditViewComponent, FunnelChartComponent, HelpComponent, HighlightComponent, IconComponent, InputLabelComponent, IssueComponent, LegendItemComponent, LinkComponent, LoadingComponent, LoadingCoverComponent, LockedTooltipDirective, MapIndicatorComponent, MentionsInputComponent, MenuComponent, MenuItemComponent, MetricComponent, MiniPieComponent, ModalComponent, NotificationBadgeComponent, NumberFieldComponent, NumberPipe, OptionGroupPipe, OverlayDirective, OverlayOutletComponent, PageHeaderComponent, PercentageFieldComponent, PercentagePipe, PermissionPickerComponent, PhoneFieldComponent, ProgressComponent, RadioComponent, RivModule, RivSelect, RivTable, RivViews, SVGTextTruncateDirective, SearchComponent, SearchSelectComponent, SelectComponent, SelectNodeComponent, SentenceCasePipe, SideSheetComponent, SimpleSelectComponent, SimpleTableCellComponent, SimpleTableComponent, SimpleTableHeaderCellComponent, SimpleTableRowComponent, SizeDirective, SmallCurrencyPipe, SrOnlyComponent, StackedColumnComponent, StackedRowComponent, SwitchCheckboxComponent, TabComponent, TableColumnSettingsComponent, TableColumnSettingsSideSheetComponent, TableComponent, TableCsvExportComponent, TableSearchColumnsComponent, TableSearchComponent, TabsComponent, TextFieldComponent, TextareaFieldComponent, TimeSeriesComponent, ToastActionComponent, ToastComponent, TooltipComponent, TooltipDirective, TrendComponent, TruncateComponent, ValidationMessageComponent, ViewMenuComponent, ViewsComponent, VisibilityDirective, ZeroStateComponent, toSentenceCase };
 //# sourceMappingURL=rivet-health-design-system.mjs.map