@rivet-health/design-system 32.5.0 → 33.1.0

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

@@ -4909,11 +4909,11 @@ var RivViews;
     function getPermissionDescription(permission) {
         switch (permission) {
             case 'private':
-                return 'Only visible to you';
+                return 'Private - Only available to you';
             case 'shared':
-                return 'Only visible to those with access';
+                return 'Shared - Only visible to those with access';
             case 'public':
-                return 'Visible to everyone';
+                return 'Public - Visible to everyone';
         }
     }
     RivViews.getPermissionDescription = getPermissionDescription;
@@ -5424,12 +5424,25 @@ class ViewsComponent {
     ngOnInit() {
         this.showLinkCopiedToast = merge(this.manager.actions.pipe(filter(({ type }) => type === 'copyLinkToView'), map(() => true)), this.toastClosed.pipe(map(() => false)));
     }
+    getPermissionIcon(permission) {
+        switch (permission) {
+            case 'private':
+                return 'Lock';
+            case 'shared':
+                return 'UserCheck';
+            case 'public':
+                return 'Users';
+        }
+    }
+    getPermissionDescription(permission) {
+        return RivViews.getPermissionDescription(permission);
+    }
 }
 ViewsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ViewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ViewsComponent, selector: "riv-views", inputs: { manager: "manager", sideSheetTopOffset: "sideSheetTopOffset" }, viewQueries: [{ propertyName: "overflowTrigger", first: true, predicate: ["overflowTrigger"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  (rivClientSize)=\"\n    manager?.actions?.next({ type: 'setContainerWidth', width: $event.width })\n  \"\n  class=\"container\"\n>\n  <ng-container *ngIf=\"manager?.state | async; let s\">\n    <ng-container\n      *ngFor=\"let view of s.displayedViews; let i = index; trackBy: trackById\"\n    >\n      <ng-container *ngIf=\"view.active; else inactiveTab\">\n        <riv-view-menu\n          [manager]=\"manager\"\n          [view]=\"view\"\n          [menuContext]=\"'tab'\"\n          class=\"active-menu\"\n        >\n          <ng-template #menuTrigger>\n            <div\n              class=\"tab active\"\n              [class.dragging]=\"draggedTabIndex === i\"\n              [class.dragged-over-left]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex > i\n              \"\n              [class.dragged-over-right]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex < i\n              \"\n              [attr.draggable]=\"!view.system\"\n              [attr.droppable]=\"!view.system\"\n              (dragstart)=\"dragStart(i, view.title, view.system)\"\n              (dragenter)=\"$event.preventDefault()\"\n              (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n              (drop)=\"drop(i, false)\"\n            >\n              <riv-icon\n                class=\"tab-reorder\"\n                [class.hidden-class]=\"view.system\"\n                [name]=\"'Reorder'\"\n                [size]=\"16\"\n              ></riv-icon>\n              <div rivTruncate>\n                {{ view.title }}\n              </div>\n            </div>\n          </ng-template>\n        </riv-view-menu>\n      </ng-container>\n      <ng-template #inactiveTab>\n        <button\n          class=\"tab\"\n          [class.dragging]=\"draggedTabIndex === i\"\n          [class.dragged-over-left]=\"\n            draggedOverTabIndex === i &&\n            draggedTabIndex !== null &&\n            draggedTabIndex > i\n          \"\n          [class.dragged-over-right]=\"\n            draggedOverTabIndex === i &&\n            draggedTabIndex !== null &&\n            draggedTabIndex < i\n          \"\n          [attr.draggable]=\"!view.system\"\n          [attr.droppable]=\"!view.system\"\n          (dragstart)=\"dragStart(i, view.title, view.system)\"\n          (dragenter)=\"$event.preventDefault()\"\n          (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n          (drop)=\"drop(i, false)\"\n          (click)=\"\n            manager?.actions?.next({\n              type: 'setActiveView',\n              id: view.id,\n              source: 'tab'\n            })\n          \"\n        >\n          <riv-icon\n            class=\"tab-reorder\"\n            [class.hidden-class]=\"view.system\"\n            [name]=\"'Reorder'\"\n            [size]=\"16\"\n          ></riv-icon>\n          <span rivTruncate>\n            {{ view.title }}\n          </span>\n        </button>\n      </ng-template>\n    </ng-container>\n    <button\n      *ngIf=\"s.allEnabledViews.length - s.displayedViews.length; let count\"\n      class=\"tab overflow\"\n      rivTruncate\n      #overflowTrigger\n      (click)=\"\n        manager?.actions?.next({ type: 'setOverflowPickerOpen', open: true })\n      \"\n    >\n      {{ count | rivNumber }} more\n    </button>\n    <ng-container *ngIf=\"s.overflow.pickerOpen\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"overflowTrigger?.nativeElement\"\n        [isModal]=\"true\"\n        [showCaret]=\"false\"\n        [theme]=\"'light'\"\n        [preferredPosition]=\"'bottom-left'\"\n        (close)=\"\n          manager?.actions?.next({ type: 'setOverflowPickerOpen', open: false })\n        \"\n      >\n        <div class=\"overflow-callout\">\n          <riv-search\n            [value]=\"s.overflow.search\"\n            (valueChange)=\"\n              manager?.actions?.next({\n                type: 'setOverflowSearchQuery',\n                query: $event\n              })\n            \"\n          ></riv-search>\n          <div class=\"overflow-view-list\">\n            <button\n              *ngFor=\"let view of s.enabledViews; let i = index\"\n              class=\"overflow-view\"\n              [class.system]=\"view.system\"\n              [class.dragging]=\"draggedTabIndex === i\"\n              [class.dragged-over-top]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex > i\n              \"\n              [class.dragged-over-bottom]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex < i\n              \"\n              [attr.draggable]=\"!view.system\"\n              [attr.droppable]=\"!view.system\"\n              (dragstart)=\"dragStart(i, view.title, view.system)\"\n              (dragenter)=\"$event.preventDefault()\"\n              (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n              (drop)=\"drop(i, true)\"\n              (click)=\"\n                manager?.actions?.next({\n                  type: 'setActiveView',\n                  id: view.id,\n                  source: 'overflow'\n                });\n                manager?.actions?.next({\n                  type: 'setOverflowPickerOpen',\n                  open: false\n                })\n              \"\n            >\n              <riv-icon\n                *ngIf=\"!view.system\"\n                class=\"overflow-reorder\"\n                [name]=\"'Reorder'\"\n                [size]=\"16\"\n              ></riv-icon>\n              <div class=\"overflow-title\" rivTruncate>\n                <riv-highlight\n                  [indices]=\"view.titleHighlightIndices ?? []\"\n                  [text]=\"view.title\"\n                ></riv-highlight>\n              </div>\n              <riv-view-menu\n                [manager]=\"manager\"\n                [view]=\"view\"\n                [menuContext]=\"'overflow'\"\n              ></riv-view-menu>\n            </button>\n            <riv-zero-state\n              *ngIf=\"!s.enabledViews.length\"\n              [message]=\"'No matching views.'\"\n            ></riv-zero-state>\n          </div>\n        </div>\n      </riv-callout>\n    </ng-container>\n    <div class=\"all-views-button-container\">\n      <button\n        rivButton\n        [variant]=\"'ghost'\"\n        [size]=\"'medium'\"\n        (click)=\"showAllViews = true\"\n      >\n        All views\n      </button>\n    </div>\n  </ng-container>\n</div>\n\n<riv-all-views-modal\n  *ngIf=\"showAllViews\"\n  [manager]=\"manager\"\n  [topOffset]=\"sideSheetTopOffset\"\n  (close)=\"showAllViews = false\"\n></riv-all-views-modal>\n\n<riv-toast *ngIf=\"showLinkCopiedToast | async\" (close)=\"toastClosed.next()\">\n  Link to view copied to clipboard\n</riv-toast>\n", styles: [".container{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,calc(var(--base-grid-size) * 81));justify-content:start;border-bottom:var(--border-width) solid var(--border-light)}.tab{font:var(--input-medium);color:var(--type-light-low-contrast);background-color:var(--surface-light-1);border:var(--border-width) solid var(--border-light);border-bottom:none;border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-large) var(--size-small) 0;cursor:pointer;transition:background-color var(--medium-transition);display:flex;justify-content:flex-start;align-items:center;position:relative}.tab:hover{background-color:var(--surface-light-2)}.tab:active{background-color:var(--surface-light-3)}.tab:not(:first-child),.active-menu{margin-left:calc(var(--border-width) * -1)}.tab.active{color:var(--purp-80);background-color:var(--surface-light-0);border-bottom:var(--border-width) solid var(--surface-light-0);margin-bottom:calc(var(--border-width) * -1);z-index:1;width:100%;max-width:100%;height:100%;max-height:100%}.tab.active:active{border:var(--border-width) solid var(--purp-80)}.tab.dragging{cursor:grabbing}.tab.dragged-over-left:before,.tab.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.tab.dragged-over-left:before{left:0}.tab.dragged-over-right:before{right:0}.tab-reorder{color:var(--type-light-low-contrast);opacity:0;transition:opacity var(--short-transition);cursor:grab;margin:0 var(--size-xsmall)}.tab:hover .tab-reorder{opacity:1}.hidden-class{visibility:hidden}.active-menu{display:inline-flex;color:var(--type-light-link-hover);--size: calc(100% + calc(var(--border-width)));width:var(--size);max-width:var(--size);height:var(--size);max-height:var(--size);cursor:pointer;font:var(--input-medium)}.tab.overflow{padding-left:var(--size-large)}.all-views-button-container{padding:var(--size-xxsmall)}.overflow-callout{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:calc(var(--base-grid-size) * 120);max-height:50vh;width:calc(var(--base-grid-size) * 75);max-width:50vw}.overflow-view-list{display:flex;flex-direction:column;gap:var(--size-small);flex-grow:1;overflow-y:auto}.overflow-view{display:flex;align-items:center;gap:var(--size-small);cursor:pointer;border-radius:var(--border-radius-medium);transition:background-color var(--short-transition);position:relative}.overflow-view.system{padding-left:var(--size-small)}.overflow-view:hover{background-color:var(--surface-light-2)}.overflow-view.dragged-over-top:before,.overflow-view.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.overflow-view.dragged-over-top:before{top:0}.overflow-view.dragged-over-bottom:before{bottom:0}.overflow-reorder{color:var(--type-light-low-contrast);cursor:grab}.overflow-title{flex-grow:1;text-align:left}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AllViewsModalComponent, selector: "riv-all-views-modal", inputs: ["manager", "topOffset"], outputs: ["close"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "directive", type: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: ToastComponent, selector: "riv-toast", inputs: ["variant", "icon"], outputs: ["close"] }, { kind: "component", type: TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "component", type: ViewMenuComponent, selector: "riv-view-menu", inputs: ["manager", "view", "menuContext"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+ViewsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ViewsComponent, selector: "riv-views", inputs: { manager: "manager", sideSheetTopOffset: "sideSheetTopOffset" }, viewQueries: [{ propertyName: "overflowTrigger", first: true, predicate: ["overflowTrigger"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div\n  (rivClientSize)=\"\n    manager?.actions?.next({ type: 'setContainerWidth', width: $event.width })\n  \"\n  class=\"container\"\n>\n  <ng-container *ngIf=\"manager?.state | async; let s\">\n    <ng-container\n      *ngFor=\"let view of s.displayedViews; let i = index; trackBy: trackById\"\n    >\n      <ng-container *ngIf=\"view.active; else inactiveTab\">\n        <riv-view-menu\n          [manager]=\"manager\"\n          [view]=\"view\"\n          [menuContext]=\"'tab'\"\n          class=\"active-menu\"\n        >\n          <ng-template #menuTrigger>\n            <div\n              class=\"tab active\"\n              [class.dragging]=\"draggedTabIndex === i\"\n              [class.dragged-over-left]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex > i\n              \"\n              [class.dragged-over-right]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex < i\n              \"\n              [attr.draggable]=\"!view.system\"\n              [attr.droppable]=\"!view.system\"\n              (dragstart)=\"dragStart(i, view.title, view.system)\"\n              (dragenter)=\"$event.preventDefault()\"\n              (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n              (drop)=\"drop(i, false)\"\n            >\n              <riv-icon\n                class=\"tab-reorder\"\n                [class.hidden-class]=\"view.system\"\n                [name]=\"'Reorder'\"\n                [size]=\"16\"\n              ></riv-icon>\n              <div rivTruncate>\n                {{ view.title }}\n              </div>\n              <riv-icon\n                class=\"permission-icon\"\n                [name]=\"getPermissionIcon(view.permission)\"\n                [size]=\"12\"\n                [rivTooltip]=\"getPermissionDescription(view.permission)\"\n              ></riv-icon>\n            </div>\n          </ng-template>\n        </riv-view-menu>\n      </ng-container>\n      <ng-template #inactiveTab>\n        <button\n          class=\"tab\"\n          [class.dragging]=\"draggedTabIndex === i\"\n          [class.dragged-over-left]=\"\n            draggedOverTabIndex === i &&\n            draggedTabIndex !== null &&\n            draggedTabIndex > i\n          \"\n          [class.dragged-over-right]=\"\n            draggedOverTabIndex === i &&\n            draggedTabIndex !== null &&\n            draggedTabIndex < i\n          \"\n          [attr.draggable]=\"!view.system\"\n          [attr.droppable]=\"!view.system\"\n          (dragstart)=\"dragStart(i, view.title, view.system)\"\n          (dragenter)=\"$event.preventDefault()\"\n          (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n          (drop)=\"drop(i, false)\"\n          (click)=\"\n            manager?.actions?.next({\n              type: 'setActiveView',\n              id: view.id,\n              source: 'tab'\n            })\n          \"\n        >\n          <riv-icon\n            class=\"tab-reorder\"\n            [class.hidden-class]=\"view.system\"\n            [name]=\"'Reorder'\"\n            [size]=\"16\"\n          ></riv-icon>\n          <span rivTruncate>\n            {{ view.title }}\n          </span>\n        </button>\n      </ng-template>\n    </ng-container>\n    <button\n      *ngIf=\"s.allEnabledViews.length - s.displayedViews.length; let count\"\n      class=\"tab overflow\"\n      rivTruncate\n      #overflowTrigger\n      (click)=\"\n        manager?.actions?.next({ type: 'setOverflowPickerOpen', open: true })\n      \"\n    >\n      {{ count | rivNumber }} more\n    </button>\n    <ng-container *ngIf=\"s.overflow.pickerOpen\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"overflowTrigger?.nativeElement\"\n        [isModal]=\"true\"\n        [showCaret]=\"false\"\n        [theme]=\"'light'\"\n        [preferredPosition]=\"'bottom-left'\"\n        (close)=\"\n          manager?.actions?.next({ type: 'setOverflowPickerOpen', open: false })\n        \"\n      >\n        <div class=\"overflow-callout\">\n          <riv-search\n            [value]=\"s.overflow.search\"\n            (valueChange)=\"\n              manager?.actions?.next({\n                type: 'setOverflowSearchQuery',\n                query: $event\n              })\n            \"\n          ></riv-search>\n          <div class=\"overflow-view-list\">\n            <button\n              *ngFor=\"let view of s.enabledViews; let i = index\"\n              class=\"overflow-view\"\n              [class.system]=\"view.system\"\n              [class.dragging]=\"draggedTabIndex === i\"\n              [class.dragged-over-top]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex > i\n              \"\n              [class.dragged-over-bottom]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex < i\n              \"\n              [attr.draggable]=\"!view.system\"\n              [attr.droppable]=\"!view.system\"\n              (dragstart)=\"dragStart(i, view.title, view.system)\"\n              (dragenter)=\"$event.preventDefault()\"\n              (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n              (drop)=\"drop(i, true)\"\n              (click)=\"\n                manager?.actions?.next({\n                  type: 'setActiveView',\n                  id: view.id,\n                  source: 'overflow'\n                });\n                manager?.actions?.next({\n                  type: 'setOverflowPickerOpen',\n                  open: false\n                })\n              \"\n            >\n              <riv-icon\n                *ngIf=\"!view.system\"\n                class=\"overflow-reorder\"\n                [name]=\"'Reorder'\"\n                [size]=\"16\"\n              ></riv-icon>\n              <div class=\"overflow-title\" rivTruncate>\n                <riv-highlight\n                  [indices]=\"view.titleHighlightIndices ?? []\"\n                  [text]=\"view.title\"\n                ></riv-highlight>\n              </div>\n              <riv-view-menu\n                [manager]=\"manager\"\n                [view]=\"view\"\n                [menuContext]=\"'overflow'\"\n              ></riv-view-menu>\n            </button>\n            <riv-zero-state\n              *ngIf=\"!s.enabledViews.length\"\n              [message]=\"'No matching views.'\"\n            ></riv-zero-state>\n          </div>\n        </div>\n      </riv-callout>\n    </ng-container>\n    <div class=\"all-views-button-container\">\n      <button\n        rivButton\n        [variant]=\"'ghost'\"\n        [size]=\"'medium'\"\n        (click)=\"showAllViews = true\"\n      >\n        All views\n      </button>\n    </div>\n  </ng-container>\n</div>\n\n<riv-all-views-modal\n  *ngIf=\"showAllViews\"\n  [manager]=\"manager\"\n  [topOffset]=\"sideSheetTopOffset\"\n  (close)=\"showAllViews = false\"\n></riv-all-views-modal>\n\n<riv-toast *ngIf=\"showLinkCopiedToast | async\" (close)=\"toastClosed.next()\">\n  Link to view copied to clipboard\n</riv-toast>\n", styles: [".container{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,calc(var(--base-grid-size) * 81));justify-content:start;border-bottom:var(--border-width) solid var(--border-light)}.tab{font:var(--input-medium);color:var(--type-light-low-contrast);background-color:var(--surface-light-1);border:var(--border-width) solid var(--border-light);border-bottom:none;border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-large) var(--size-small) 0;cursor:pointer;transition:background-color var(--medium-transition);display:flex;justify-content:flex-start;align-items:center;position:relative}.tab:hover{background-color:var(--surface-light-2)}.tab:active{background-color:var(--surface-light-3)}.tab:not(:first-child),.active-menu{margin-left:calc(var(--border-width) * -1)}.tab.active{color:var(--purp-80);background-color:var(--surface-light-0);border-bottom:var(--border-width) solid var(--surface-light-0);margin-bottom:calc(var(--border-width) * -1);z-index:1;width:100%;max-width:100%;height:100%;max-height:100%}.tab.active:active{border:var(--border-width) solid var(--purp-80)}.tab.dragging{cursor:grabbing}.tab.dragged-over-left:before,.tab.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.tab.dragged-over-left:before{left:0}.tab.dragged-over-right:before{right:0}.tab-reorder{color:var(--type-light-low-contrast);opacity:0;transition:opacity var(--short-transition);cursor:grab;margin:0 var(--size-xsmall)}.tab:hover .tab-reorder{opacity:1}.hidden-class{visibility:hidden}.active-menu{display:inline-flex;color:var(--type-light-link-hover);--size: calc(100% + calc(var(--border-width)));width:var(--size);max-width:var(--size);height:var(--size);max-height:var(--size);cursor:pointer;font:var(--input-medium)}.tab.overflow{padding-left:var(--size-large)}.all-views-button-container{padding:var(--size-xxsmall)}.overflow-callout{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:calc(var(--base-grid-size) * 120);max-height:50vh;width:calc(var(--base-grid-size) * 75);max-width:50vw}.overflow-view-list{display:flex;flex-direction:column;gap:var(--size-small);flex-grow:1;overflow-y:auto}.overflow-view{display:flex;align-items:center;gap:var(--size-small);cursor:pointer;border-radius:var(--border-radius-medium);transition:background-color var(--short-transition);position:relative}.overflow-view.system{padding-left:var(--size-small)}.overflow-view:hover{background-color:var(--surface-light-2)}.overflow-view.dragged-over-top:before,.overflow-view.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.overflow-view.dragged-over-top:before{top:0}.overflow-view.dragged-over-bottom:before{bottom:0}.overflow-reorder{color:var(--type-light-low-contrast);cursor:grab}.overflow-title{flex-grow:1;text-align:left}.permission-icon{color:var(--type-light-low-contrast);margin-left:var(--size-xsmall);flex-shrink:0}.tab.active .permission-icon{color:var(--purp-80)}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AllViewsModalComponent, selector: "riv-all-views-modal", inputs: ["manager", "topOffset"], outputs: ["close"] }, { kind: "component", type: ButtonComponent, selector: "[rivButton]", inputs: ["locked", "disabled", "loading", "full", "size", "variant", "icon", "iconPosition", "current"] }, { kind: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: HighlightComponent, selector: "riv-highlight", inputs: ["text", "indices"] }, { kind: "component", type: IconComponent, selector: "riv-icon", inputs: ["name", "size", "customSize", "strokeWidth"] }, { kind: "directive", type: OverlayDirective, selector: "[riv-overlay]" }, { kind: "component", type: SearchComponent, selector: "riv-search", inputs: ["placeholder", "name", "labelTemplate"] }, { kind: "directive", type: SizeDirective, selector: "[rivClientSize]", outputs: ["rivClientSize"] }, { kind: "component", type: ToastComponent, selector: "riv-toast", inputs: ["variant", "icon"], outputs: ["close"] }, { kind: "directive", type: TooltipDirective, selector: "[rivTooltip]", inputs: ["rivTooltip", "rivTooltipTheme", "rivTooltipMaxWidth", "rivTooltipPreferredPosition", "rivTooltipCloseDelay", "rivTooltipOpenDelay"] }, { kind: "component", type: TruncateComponent, selector: "[rivTruncate]", inputs: ["maxTooltipWidth"] }, { kind: "component", type: ViewMenuComponent, selector: "riv-view-menu", inputs: ["manager", "view", "menuContext"] }, { kind: "component", type: ZeroStateComponent, selector: "riv-zero-state", inputs: ["message", "title", "icon"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: NumberPipe, name: "rivNumber" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ViewsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'riv-views', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  (rivClientSize)=\"\n    manager?.actions?.next({ type: 'setContainerWidth', width: $event.width })\n  \"\n  class=\"container\"\n>\n  <ng-container *ngIf=\"manager?.state | async; let s\">\n    <ng-container\n      *ngFor=\"let view of s.displayedViews; let i = index; trackBy: trackById\"\n    >\n      <ng-container *ngIf=\"view.active; else inactiveTab\">\n        <riv-view-menu\n          [manager]=\"manager\"\n          [view]=\"view\"\n          [menuContext]=\"'tab'\"\n          class=\"active-menu\"\n        >\n          <ng-template #menuTrigger>\n            <div\n              class=\"tab active\"\n              [class.dragging]=\"draggedTabIndex === i\"\n              [class.dragged-over-left]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex > i\n              \"\n              [class.dragged-over-right]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex < i\n              \"\n              [attr.draggable]=\"!view.system\"\n              [attr.droppable]=\"!view.system\"\n              (dragstart)=\"dragStart(i, view.title, view.system)\"\n              (dragenter)=\"$event.preventDefault()\"\n              (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n              (drop)=\"drop(i, false)\"\n            >\n              <riv-icon\n                class=\"tab-reorder\"\n                [class.hidden-class]=\"view.system\"\n                [name]=\"'Reorder'\"\n                [size]=\"16\"\n              ></riv-icon>\n              <div rivTruncate>\n                {{ view.title }}\n              </div>\n            </div>\n          </ng-template>\n        </riv-view-menu>\n      </ng-container>\n      <ng-template #inactiveTab>\n        <button\n          class=\"tab\"\n          [class.dragging]=\"draggedTabIndex === i\"\n          [class.dragged-over-left]=\"\n            draggedOverTabIndex === i &&\n            draggedTabIndex !== null &&\n            draggedTabIndex > i\n          \"\n          [class.dragged-over-right]=\"\n            draggedOverTabIndex === i &&\n            draggedTabIndex !== null &&\n            draggedTabIndex < i\n          \"\n          [attr.draggable]=\"!view.system\"\n          [attr.droppable]=\"!view.system\"\n          (dragstart)=\"dragStart(i, view.title, view.system)\"\n          (dragenter)=\"$event.preventDefault()\"\n          (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n          (drop)=\"drop(i, false)\"\n          (click)=\"\n            manager?.actions?.next({\n              type: 'setActiveView',\n              id: view.id,\n              source: 'tab'\n            })\n          \"\n        >\n          <riv-icon\n            class=\"tab-reorder\"\n            [class.hidden-class]=\"view.system\"\n            [name]=\"'Reorder'\"\n            [size]=\"16\"\n          ></riv-icon>\n          <span rivTruncate>\n            {{ view.title }}\n          </span>\n        </button>\n      </ng-template>\n    </ng-container>\n    <button\n      *ngIf=\"s.allEnabledViews.length - s.displayedViews.length; let count\"\n      class=\"tab overflow\"\n      rivTruncate\n      #overflowTrigger\n      (click)=\"\n        manager?.actions?.next({ type: 'setOverflowPickerOpen', open: true })\n      \"\n    >\n      {{ count | rivNumber }} more\n    </button>\n    <ng-container *ngIf=\"s.overflow.pickerOpen\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"overflowTrigger?.nativeElement\"\n        [isModal]=\"true\"\n        [showCaret]=\"false\"\n        [theme]=\"'light'\"\n        [preferredPosition]=\"'bottom-left'\"\n        (close)=\"\n          manager?.actions?.next({ type: 'setOverflowPickerOpen', open: false })\n        \"\n      >\n        <div class=\"overflow-callout\">\n          <riv-search\n            [value]=\"s.overflow.search\"\n            (valueChange)=\"\n              manager?.actions?.next({\n                type: 'setOverflowSearchQuery',\n                query: $event\n              })\n            \"\n          ></riv-search>\n          <div class=\"overflow-view-list\">\n            <button\n              *ngFor=\"let view of s.enabledViews; let i = index\"\n              class=\"overflow-view\"\n              [class.system]=\"view.system\"\n              [class.dragging]=\"draggedTabIndex === i\"\n              [class.dragged-over-top]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex > i\n              \"\n              [class.dragged-over-bottom]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex < i\n              \"\n              [attr.draggable]=\"!view.system\"\n              [attr.droppable]=\"!view.system\"\n              (dragstart)=\"dragStart(i, view.title, view.system)\"\n              (dragenter)=\"$event.preventDefault()\"\n              (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n              (drop)=\"drop(i, true)\"\n              (click)=\"\n                manager?.actions?.next({\n                  type: 'setActiveView',\n                  id: view.id,\n                  source: 'overflow'\n                });\n                manager?.actions?.next({\n                  type: 'setOverflowPickerOpen',\n                  open: false\n                })\n              \"\n            >\n              <riv-icon\n                *ngIf=\"!view.system\"\n                class=\"overflow-reorder\"\n                [name]=\"'Reorder'\"\n                [size]=\"16\"\n              ></riv-icon>\n              <div class=\"overflow-title\" rivTruncate>\n                <riv-highlight\n                  [indices]=\"view.titleHighlightIndices ?? []\"\n                  [text]=\"view.title\"\n                ></riv-highlight>\n              </div>\n              <riv-view-menu\n                [manager]=\"manager\"\n                [view]=\"view\"\n                [menuContext]=\"'overflow'\"\n              ></riv-view-menu>\n            </button>\n            <riv-zero-state\n              *ngIf=\"!s.enabledViews.length\"\n              [message]=\"'No matching views.'\"\n            ></riv-zero-state>\n          </div>\n        </div>\n      </riv-callout>\n    </ng-container>\n    <div class=\"all-views-button-container\">\n      <button\n        rivButton\n        [variant]=\"'ghost'\"\n        [size]=\"'medium'\"\n        (click)=\"showAllViews = true\"\n      >\n        All views\n      </button>\n    </div>\n  </ng-container>\n</div>\n\n<riv-all-views-modal\n  *ngIf=\"showAllViews\"\n  [manager]=\"manager\"\n  [topOffset]=\"sideSheetTopOffset\"\n  (close)=\"showAllViews = false\"\n></riv-all-views-modal>\n\n<riv-toast *ngIf=\"showLinkCopiedToast | async\" (close)=\"toastClosed.next()\">\n  Link to view copied to clipboard\n</riv-toast>\n", styles: [".container{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,calc(var(--base-grid-size) * 81));justify-content:start;border-bottom:var(--border-width) solid var(--border-light)}.tab{font:var(--input-medium);color:var(--type-light-low-contrast);background-color:var(--surface-light-1);border:var(--border-width) solid var(--border-light);border-bottom:none;border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-large) var(--size-small) 0;cursor:pointer;transition:background-color var(--medium-transition);display:flex;justify-content:flex-start;align-items:center;position:relative}.tab:hover{background-color:var(--surface-light-2)}.tab:active{background-color:var(--surface-light-3)}.tab:not(:first-child),.active-menu{margin-left:calc(var(--border-width) * -1)}.tab.active{color:var(--purp-80);background-color:var(--surface-light-0);border-bottom:var(--border-width) solid var(--surface-light-0);margin-bottom:calc(var(--border-width) * -1);z-index:1;width:100%;max-width:100%;height:100%;max-height:100%}.tab.active:active{border:var(--border-width) solid var(--purp-80)}.tab.dragging{cursor:grabbing}.tab.dragged-over-left:before,.tab.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.tab.dragged-over-left:before{left:0}.tab.dragged-over-right:before{right:0}.tab-reorder{color:var(--type-light-low-contrast);opacity:0;transition:opacity var(--short-transition);cursor:grab;margin:0 var(--size-xsmall)}.tab:hover .tab-reorder{opacity:1}.hidden-class{visibility:hidden}.active-menu{display:inline-flex;color:var(--type-light-link-hover);--size: calc(100% + calc(var(--border-width)));width:var(--size);max-width:var(--size);height:var(--size);max-height:var(--size);cursor:pointer;font:var(--input-medium)}.tab.overflow{padding-left:var(--size-large)}.all-views-button-container{padding:var(--size-xxsmall)}.overflow-callout{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:calc(var(--base-grid-size) * 120);max-height:50vh;width:calc(var(--base-grid-size) * 75);max-width:50vw}.overflow-view-list{display:flex;flex-direction:column;gap:var(--size-small);flex-grow:1;overflow-y:auto}.overflow-view{display:flex;align-items:center;gap:var(--size-small);cursor:pointer;border-radius:var(--border-radius-medium);transition:background-color var(--short-transition);position:relative}.overflow-view.system{padding-left:var(--size-small)}.overflow-view:hover{background-color:var(--surface-light-2)}.overflow-view.dragged-over-top:before,.overflow-view.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.overflow-view.dragged-over-top:before{top:0}.overflow-view.dragged-over-bottom:before{bottom:0}.overflow-reorder{color:var(--type-light-low-contrast);cursor:grab}.overflow-title{flex-grow:1;text-align:left}\n"] }]
+            args: [{ selector: 'riv-views', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  (rivClientSize)=\"\n    manager?.actions?.next({ type: 'setContainerWidth', width: $event.width })\n  \"\n  class=\"container\"\n>\n  <ng-container *ngIf=\"manager?.state | async; let s\">\n    <ng-container\n      *ngFor=\"let view of s.displayedViews; let i = index; trackBy: trackById\"\n    >\n      <ng-container *ngIf=\"view.active; else inactiveTab\">\n        <riv-view-menu\n          [manager]=\"manager\"\n          [view]=\"view\"\n          [menuContext]=\"'tab'\"\n          class=\"active-menu\"\n        >\n          <ng-template #menuTrigger>\n            <div\n              class=\"tab active\"\n              [class.dragging]=\"draggedTabIndex === i\"\n              [class.dragged-over-left]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex > i\n              \"\n              [class.dragged-over-right]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex < i\n              \"\n              [attr.draggable]=\"!view.system\"\n              [attr.droppable]=\"!view.system\"\n              (dragstart)=\"dragStart(i, view.title, view.system)\"\n              (dragenter)=\"$event.preventDefault()\"\n              (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n              (drop)=\"drop(i, false)\"\n            >\n              <riv-icon\n                class=\"tab-reorder\"\n                [class.hidden-class]=\"view.system\"\n                [name]=\"'Reorder'\"\n                [size]=\"16\"\n              ></riv-icon>\n              <div rivTruncate>\n                {{ view.title }}\n              </div>\n              <riv-icon\n                class=\"permission-icon\"\n                [name]=\"getPermissionIcon(view.permission)\"\n                [size]=\"12\"\n                [rivTooltip]=\"getPermissionDescription(view.permission)\"\n              ></riv-icon>\n            </div>\n          </ng-template>\n        </riv-view-menu>\n      </ng-container>\n      <ng-template #inactiveTab>\n        <button\n          class=\"tab\"\n          [class.dragging]=\"draggedTabIndex === i\"\n          [class.dragged-over-left]=\"\n            draggedOverTabIndex === i &&\n            draggedTabIndex !== null &&\n            draggedTabIndex > i\n          \"\n          [class.dragged-over-right]=\"\n            draggedOverTabIndex === i &&\n            draggedTabIndex !== null &&\n            draggedTabIndex < i\n          \"\n          [attr.draggable]=\"!view.system\"\n          [attr.droppable]=\"!view.system\"\n          (dragstart)=\"dragStart(i, view.title, view.system)\"\n          (dragenter)=\"$event.preventDefault()\"\n          (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n          (drop)=\"drop(i, false)\"\n          (click)=\"\n            manager?.actions?.next({\n              type: 'setActiveView',\n              id: view.id,\n              source: 'tab'\n            })\n          \"\n        >\n          <riv-icon\n            class=\"tab-reorder\"\n            [class.hidden-class]=\"view.system\"\n            [name]=\"'Reorder'\"\n            [size]=\"16\"\n          ></riv-icon>\n          <span rivTruncate>\n            {{ view.title }}\n          </span>\n        </button>\n      </ng-template>\n    </ng-container>\n    <button\n      *ngIf=\"s.allEnabledViews.length - s.displayedViews.length; let count\"\n      class=\"tab overflow\"\n      rivTruncate\n      #overflowTrigger\n      (click)=\"\n        manager?.actions?.next({ type: 'setOverflowPickerOpen', open: true })\n      \"\n    >\n      {{ count | rivNumber }} more\n    </button>\n    <ng-container *ngIf=\"s.overflow.pickerOpen\">\n      <riv-callout\n        *riv-overlay\n        [anchor]=\"overflowTrigger?.nativeElement\"\n        [isModal]=\"true\"\n        [showCaret]=\"false\"\n        [theme]=\"'light'\"\n        [preferredPosition]=\"'bottom-left'\"\n        (close)=\"\n          manager?.actions?.next({ type: 'setOverflowPickerOpen', open: false })\n        \"\n      >\n        <div class=\"overflow-callout\">\n          <riv-search\n            [value]=\"s.overflow.search\"\n            (valueChange)=\"\n              manager?.actions?.next({\n                type: 'setOverflowSearchQuery',\n                query: $event\n              })\n            \"\n          ></riv-search>\n          <div class=\"overflow-view-list\">\n            <button\n              *ngFor=\"let view of s.enabledViews; let i = index\"\n              class=\"overflow-view\"\n              [class.system]=\"view.system\"\n              [class.dragging]=\"draggedTabIndex === i\"\n              [class.dragged-over-top]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex > i\n              \"\n              [class.dragged-over-bottom]=\"\n                draggedOverTabIndex === i &&\n                draggedTabIndex !== null &&\n                draggedTabIndex < i\n              \"\n              [attr.draggable]=\"!view.system\"\n              [attr.droppable]=\"!view.system\"\n              (dragstart)=\"dragStart(i, view.title, view.system)\"\n              (dragenter)=\"$event.preventDefault()\"\n              (dragover)=\"$event.preventDefault(); dragOver(i, view.system)\"\n              (drop)=\"drop(i, true)\"\n              (click)=\"\n                manager?.actions?.next({\n                  type: 'setActiveView',\n                  id: view.id,\n                  source: 'overflow'\n                });\n                manager?.actions?.next({\n                  type: 'setOverflowPickerOpen',\n                  open: false\n                })\n              \"\n            >\n              <riv-icon\n                *ngIf=\"!view.system\"\n                class=\"overflow-reorder\"\n                [name]=\"'Reorder'\"\n                [size]=\"16\"\n              ></riv-icon>\n              <div class=\"overflow-title\" rivTruncate>\n                <riv-highlight\n                  [indices]=\"view.titleHighlightIndices ?? []\"\n                  [text]=\"view.title\"\n                ></riv-highlight>\n              </div>\n              <riv-view-menu\n                [manager]=\"manager\"\n                [view]=\"view\"\n                [menuContext]=\"'overflow'\"\n              ></riv-view-menu>\n            </button>\n            <riv-zero-state\n              *ngIf=\"!s.enabledViews.length\"\n              [message]=\"'No matching views.'\"\n            ></riv-zero-state>\n          </div>\n        </div>\n      </riv-callout>\n    </ng-container>\n    <div class=\"all-views-button-container\">\n      <button\n        rivButton\n        [variant]=\"'ghost'\"\n        [size]=\"'medium'\"\n        (click)=\"showAllViews = true\"\n      >\n        All views\n      </button>\n    </div>\n  </ng-container>\n</div>\n\n<riv-all-views-modal\n  *ngIf=\"showAllViews\"\n  [manager]=\"manager\"\n  [topOffset]=\"sideSheetTopOffset\"\n  (close)=\"showAllViews = false\"\n></riv-all-views-modal>\n\n<riv-toast *ngIf=\"showLinkCopiedToast | async\" (close)=\"toastClosed.next()\">\n  Link to view copied to clipboard\n</riv-toast>\n", styles: [".container{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,calc(var(--base-grid-size) * 81));justify-content:start;border-bottom:var(--border-width) solid var(--border-light)}.tab{font:var(--input-medium);color:var(--type-light-low-contrast);background-color:var(--surface-light-1);border:var(--border-width) solid var(--border-light);border-bottom:none;border-top-left-radius:var(--border-radius-medium);border-top-right-radius:var(--border-radius-medium);padding:var(--size-small) var(--size-large) var(--size-small) 0;cursor:pointer;transition:background-color var(--medium-transition);display:flex;justify-content:flex-start;align-items:center;position:relative}.tab:hover{background-color:var(--surface-light-2)}.tab:active{background-color:var(--surface-light-3)}.tab:not(:first-child),.active-menu{margin-left:calc(var(--border-width) * -1)}.tab.active{color:var(--purp-80);background-color:var(--surface-light-0);border-bottom:var(--border-width) solid var(--surface-light-0);margin-bottom:calc(var(--border-width) * -1);z-index:1;width:100%;max-width:100%;height:100%;max-height:100%}.tab.active:active{border:var(--border-width) solid var(--purp-80)}.tab.dragging{cursor:grabbing}.tab.dragged-over-left:before,.tab.dragged-over-right:before{content:\"\";position:absolute;top:0;bottom:0;width:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.tab.dragged-over-left:before{left:0}.tab.dragged-over-right:before{right:0}.tab-reorder{color:var(--type-light-low-contrast);opacity:0;transition:opacity var(--short-transition);cursor:grab;margin:0 var(--size-xsmall)}.tab:hover .tab-reorder{opacity:1}.hidden-class{visibility:hidden}.active-menu{display:inline-flex;color:var(--type-light-link-hover);--size: calc(100% + calc(var(--border-width)));width:var(--size);max-width:var(--size);height:var(--size);max-height:var(--size);cursor:pointer;font:var(--input-medium)}.tab.overflow{padding-left:var(--size-large)}.all-views-button-container{padding:var(--size-xxsmall)}.overflow-callout{padding:var(--size-large);display:flex;flex-direction:column;gap:var(--size-medium);height:calc(var(--base-grid-size) * 120);max-height:50vh;width:calc(var(--base-grid-size) * 75);max-width:50vw}.overflow-view-list{display:flex;flex-direction:column;gap:var(--size-small);flex-grow:1;overflow-y:auto}.overflow-view{display:flex;align-items:center;gap:var(--size-small);cursor:pointer;border-radius:var(--border-radius-medium);transition:background-color var(--short-transition);position:relative}.overflow-view.system{padding-left:var(--size-small)}.overflow-view:hover{background-color:var(--surface-light-2)}.overflow-view.dragged-over-top:before,.overflow-view.dragged-over-bottom:before{content:\"\";position:absolute;left:0;right:0;height:var(--size-xxsmall);background-color:var(--brand);box-shadow:0 0 var(--size-xxsmall) var(--brand)}.overflow-view.dragged-over-top:before{top:0}.overflow-view.dragged-over-bottom:before{bottom:0}.overflow-reorder{color:var(--type-light-low-contrast);cursor:grab}.overflow-title{flex-grow:1;text-align:left}.permission-icon{color:var(--type-light-low-contrast);margin-left:var(--size-xsmall);flex-shrink:0}.tab.active .permission-icon{color:var(--purp-80)}\n"] }]
         }], propDecorators: { manager: [{
                 type: Input
             }], sideSheetTopOffset: [{
@@ -7609,11 +7622,22 @@ var Chart;
                 ? areas(config, data, dimensions)
                 : config.type == 'donut'
                     ? arcs(config, data, dimensions)
-                    : bars(config, data, dimensions);
+                    : config.type == 'horizontal-bar'
+                        ? horizontalBars(config, data, dimensions)
+                        : config.type == 'bar'
+                            ? bars(config, data, dimensions)
+                            : emptyChart;
     }
     Chart.chart = chart;
     function lines(config, allData, dimensions) {
-        const { data, visibleIndices } = hide(allData);
+        const { data: hiddenData, visibleIndices } = hide(allData);
+        if (hiddenData.type == 'labeled') {
+            // eslint-disable-next-line no-console
+            console.warn("Heads up! Labeled series aren't currently supported for line charts");
+            return emptyChart;
+        }
+        //This assignment makes typescript recognize the actual type (TimeseriesData)
+        const data = hiddenData;
         const xScale = scaleUtc(timeseriesDomain(data), xRange(dimensions));
         const format = (date) => formatedDate(config.dateFormat || 'day', date);
         //Dont use auto magic when dealing with 1,2,3,4 data points
@@ -7681,12 +7705,20 @@ var Chart;
             bars: [],
             areas: [],
             arcs: [],
+            horizontalBars: [],
         };
     }
     Chart.lines = lines;
     function areas(config, allData, dimensions) {
         const { data: unstackedData, visibleIndices } = hide(allData);
-        const data = stack(unstackedData);
+        const stackedData = stack(unstackedData);
+        if (stackedData.type == 'labeled') {
+            // eslint-disable-next-line no-console
+            console.warn("Heads up! Labeled series aren't currently supported for area charts");
+            return emptyChart;
+        }
+        //This assignment makes typescript recognize the actual type (TimeseriesData)
+        const data = stackedData;
         const xScale = scaleUtc(timeseriesDomain(data), xRange(dimensions));
         const format = (date) => formatedDate(config.dateFormat || 'day', date);
         const xTicks = xScale.ticks(Math.min(5, data.x.length)).map(tick => ({
@@ -7714,8 +7746,7 @@ var Chart;
             }
             const yIndex = visibleIndices[visibleYIndex];
             const ys = data.ys.map(y => yScale(y.values[xIndex]));
-            const padding = 8;
-            const anchor = new DOMRect(pos.rect.x + x, pos.rect.y + ys[visibleYIndex], padding, 0);
+            const anchor = new DOMRect(pos.rect.x + x, pos.rect.y + ys[visibleYIndex], SMALL_PADDING, 0);
             return {
                 x,
                 xIndex,
@@ -7748,12 +7779,20 @@ var Chart;
             hover,
             bars: [],
             arcs: [],
+            horizontalBars: [],
         };
     }
     Chart.areas = areas;
     function bars(config, allData, dimensions) {
         const { data: unstackedData, visibleIndices } = hide(allData);
-        const data = stack(unstackedData);
+        const possiblyStackedData = config.groupingType == 'clustered' ? unstackedData : stack(unstackedData);
+        if (possiblyStackedData.type == 'labeled') {
+            // eslint-disable-next-line no-console
+            console.warn("Heads up! Labeled series aren't currently supported for vertical bar charts");
+            return emptyChart;
+        }
+        //This assignment makes typescript recognize the actual type (TimeseriesData)
+        const data = possiblyStackedData;
         const { range: xRange, binSize } = barXRange(dimensions, data);
         const halfBinSize = binSize / 2;
         const xScale = scaleUtc(timeseriesDomain(data), xRange);
@@ -7763,7 +7802,8 @@ var Chart;
             label: format(tick),
         }));
         const { pipe, fullPipe } = getPipes(config.valueType);
-        const yScale = scaleLinear(yDomain(data), yRange(dimensions));
+        const yRangeVal = yRange(dimensions);
+        const yScale = scaleLinear(yDomain(data), yRangeVal);
         const yTicks = yScale.ticks(5).map(tick => ({
             y: yScale(tick),
             label: pipe.transform(tick),
@@ -7771,13 +7811,23 @@ var Chart;
         const colors = visibleIndices.map(i => config.colors[i % config.colors.length]);
         const bars = data.ys.map((y, yIndex) => y.values.map((value, index) => {
             const yValue = yScale(value);
+            let xValue = xScale(data.x[index]) - halfBinSize;
+            let width = binSize;
+            let height = (yIndex == 0
+                ? yScale(0)
+                : yScale(data.ys[yIndex - 1].values[index])) - yValue;
+            if (config.groupingType == 'clustered') {
+                width =
+                    (binSize - (data.ys.length - 1) * SMALL_PADDING) / data.ys.length;
+                height = Math.max(...yRangeVal) - yValue;
+                const offset = yIndex * (width + SMALL_PADDING);
+                xValue = xValue + offset;
+            }
             return {
-                x: xScale(data.x[index]) - halfBinSize,
+                x: xValue,
                 y: yValue,
-                width: binSize,
-                height: (yIndex == 0
-                    ? yScale(0)
-                    : yScale(data.ys[yIndex - 1].values[index])) - yValue,
+                width,
+                height,
             };
         }));
         function hover(pos) {
@@ -7787,14 +7837,20 @@ var Chart;
             let visibleYIndex = data.ys
                 .map(y => y.values[xIndex])
                 .findIndex(y => y > yValue);
+            if (config.groupingType == 'clustered') {
+                visibleYIndex = findSubIndex(x, pos.x, binSize, data.ys.length);
+            }
             if (visibleYIndex == -1) {
                 visibleYIndex = data.ys.length - 1;
             }
             const yIndex = visibleIndices[visibleYIndex];
             const ys = data.ys.map(y => yScale(y.values[xIndex]));
-            const padding = 8;
-            const anchor = new DOMRect(pos.rect.x + bars[visibleYIndex][xIndex].x - padding, pos.rect.y + ys[visibleYIndex], bars[visibleYIndex][xIndex].width + padding * 2, (visibleYIndex == 0 ? yScale(0) : ys[visibleYIndex - 1]) -
-                ys[visibleYIndex]);
+            let anchorHeight = (visibleYIndex == 0 ? yScale(0) : ys[visibleYIndex - 1]) -
+                ys[visibleYIndex];
+            if (config.groupingType == 'clustered') {
+                anchorHeight = Math.max(...yRangeVal) - ys[visibleYIndex];
+            }
+            const anchor = new DOMRect(pos.rect.x + bars[visibleYIndex][xIndex].x - SMALL_PADDING, pos.rect.y + ys[visibleYIndex], bars[visibleYIndex][xIndex].width + SMALL_PADDING * 2, anchorHeight);
             return {
                 x,
                 xIndex,
@@ -7827,9 +7883,185 @@ var Chart;
             areas: [],
             hover,
             arcs: [],
+            horizontalBars: [],
         };
     }
     Chart.bars = bars;
+    function horizontalBars(config, allData, dimensions) {
+        //Some of this stuff gets confusing, because x and y are essentially inverted here
+        //  So, if you see a situation where a variable is named 'y', but referencing
+        //  'x' (or vice versa), that's why
+        const { data: unstackedData, visibleIndices } = hide(allData);
+        const data = config.groupingType == 'clustered' ? unstackedData : stack(unstackedData);
+        const { range: yRange } = barYRange(dimensions, data);
+        let yScale = data.type == 'labeled'
+            ? scaleLinear(indexDomain(data), yRange)
+            : scaleUtc(timeseriesDomain(data), yRange);
+        const dateFormat = (date) => formatedDate(config.dateFormat || 'day', date);
+        const { pipe, fullPipe } = getPipes(config.valueType);
+        const yTicks = yScale.ticks(data.x.length - 1).map(tick => ({
+            y: yScale(tick),
+            label: isNumber(tick)
+                ? data.type == 'labeled'
+                    ? data.x[tick]
+                    : '-'
+                : dateFormat(tick),
+        }));
+        const xScale = scaleLinear(yDomain(data), xRangeHorizontal(dimensions, data));
+        const xTicks = xScale.ticks(5).map(tick => ({
+            x: xScale(tick),
+            label: pipe.transform(tick),
+        }));
+        const colors = visibleIndices.map(i => config.colors[i % config.colors.length]);
+        const simplifiedHorizontalBars = [];
+        const horizontalBars = data.ys.map((y, yIndex) => {
+            const subSimpHorBars = [];
+            const retVal = y.values.map((value, index) => {
+                let xValue = yIndex == 0 ? xScale(0) : xScale(data.ys[yIndex - 1].values[index]);
+                let width = xScale(value) - xValue;
+                let yValue = yScale(data.type == 'labeled' ? index : data.x[index]) -
+                    HORIZONTAL_BAR_HEIGHT * 1.5;
+                if (config.groupingType == 'clustered') {
+                    xValue = xScale(0);
+                    width = xScale(value) - xValue;
+                    const centerIndex = data.ys.length / 2 - 0.5;
+                    const offset = (yIndex - centerIndex) * (HORIZONTAL_BAR_HEIGHT + SMALL_PADDING);
+                    yValue = yValue + offset;
+                }
+                const r = 4;
+                subSimpHorBars.push({
+                    xPos: xValue,
+                    yPos: yValue,
+                    width,
+                });
+                if (data.ys.length == 1 || config.groupingType == 'clustered') {
+                    //Both-sides rounding variation
+                    const pathD = `
+            M ${xValue + r},${yValue}
+            h ${width - r * 2}
+            q${r},0 ${r},${r}
+            v ${HORIZONTAL_BAR_HEIGHT - r * 2}
+            q0,${r} -${r},${r}
+            h ${-(width - r * 2)}
+            q-${r},0 -${r},-${r}
+            v -${HORIZONTAL_BAR_HEIGHT - r * 2}
+            q0,-${r} ${r},-${r}
+            Z
+          `;
+                    return pathD;
+                }
+                if (yIndex == 0) {
+                    //Left-side rounding variation
+                    const pathD = `
+            M ${xValue + r},${yValue}
+            h ${width - r}
+            v ${HORIZONTAL_BAR_HEIGHT}
+            h ${-(width - r)}
+            q-${r},0 -${r},-${r}
+            v -${HORIZONTAL_BAR_HEIGHT - r * 2}
+            q0,-${r} ${r},-${r}
+            Z
+          `;
+                    return pathD;
+                }
+                if (yIndex == data.ys.length - 1) {
+                    //Right-side rounding variation
+                    const pathD = `
+            M ${xValue},${yValue}
+            h ${width - r}
+            q${r},0 ${r},${r}
+            v ${HORIZONTAL_BAR_HEIGHT - r * 2}
+            q0,${r} -${r},${r}
+            h ${-(width - r)}
+            Z
+          `;
+                    return pathD;
+                }
+                //No-rounding variation
+                const pathD = `
+          M ${xValue},${yValue}
+          h ${width}
+          v ${HORIZONTAL_BAR_HEIGHT}
+          h ${-width}
+          v -${HORIZONTAL_BAR_HEIGHT}
+          Z
+        `;
+                return pathD;
+            });
+            simplifiedHorizontalBars.push(subSimpHorBars);
+            return retVal;
+        });
+        function hover(pos) {
+            let xIndex = 0;
+            let x = 0;
+            let visibleYIndex = 0;
+            if (checkYScaleType(yScale, data.type) && data.type != 'labeled') {
+                xIndex = findNearestIndex(data.x, yScale.invert(pos.y).getTime());
+                x = yScale(data.x[xIndex]) - SMALL_PADDING;
+                const yValue = xScale.invert(pos.x);
+                visibleYIndex = data.ys
+                    .map(y => y.values[xIndex])
+                    .findIndex(y => y > yValue);
+            }
+            else if (!checkYScaleType(yScale, data.type) &&
+                data.type == 'labeled') {
+                xIndex = findNearestIndexString(data.x, yScale.invert(pos.y));
+                x = yScale(xIndex) - SMALL_PADDING;
+                const yValue = xScale.invert(pos.x);
+                visibleYIndex = data.ys
+                    .map(y => y.values[xIndex])
+                    .findIndex(y => y > yValue);
+            }
+            const ys = data.ys.map(y => xScale(y.values[xIndex]));
+            if (config.groupingType == 'clustered') {
+                visibleYIndex = findSubIndexHorizontal(x, pos.y, data.ys.length);
+            }
+            if (visibleYIndex == -1) {
+                visibleYIndex = data.ys.length - 1;
+            }
+            const yIndex = visibleIndices[visibleYIndex];
+            const anchor = new DOMRect(pos.rect.x +
+                simplifiedHorizontalBars[visibleYIndex][xIndex].xPos -
+                SMALL_PADDING, pos.rect.y + simplifiedHorizontalBars[visibleYIndex][xIndex].yPos, simplifiedHorizontalBars[visibleYIndex][xIndex].width +
+                SMALL_PADDING * 2, HORIZONTAL_BAR_HEIGHT);
+            return {
+                x,
+                xIndex,
+                ys,
+                yIndex,
+                visibleYIndex,
+                tooltip: {
+                    anchor,
+                    date: data.type == 'labeled'
+                        ? unstackedData.x[xIndex].toString()
+                        : utcFormat('%B %d, %Y')(new Date(unstackedData.x[xIndex])),
+                    metrics: unstackedData.ys
+                        .map((y, index) => {
+                        var _a;
+                        return ({
+                            color: colors[index % colors.length],
+                            label: y.label,
+                            value: (_a = fullPipe.transform(y.values[xIndex])) !== null && _a !== void 0 ? _a : '-',
+                        });
+                    })
+                        .filter((_, i) => config.groupedTooltip || i == visibleYIndex),
+                },
+            };
+        }
+        return {
+            xTicks: xTicks,
+            yTicks: yTicks,
+            hover,
+            colors,
+            bars: [],
+            lines: [],
+            circles: [],
+            areas: [],
+            arcs: [],
+            horizontalBars,
+        };
+    }
+    Chart.horizontalBars = horizontalBars;
     function arcs(config, allData, dimensions) {
         const { data: unstackedData, visibleIndices } = hide(allData);
         const colors = visibleIndices.map(i => config.colors[i % config.colors.length]);
@@ -7854,13 +8086,19 @@ var Chart;
             bars: [],
             colors,
             arcs,
+            horizontalBars: [],
         };
     }
     Chart.arcs = arcs;
     const LEFT_PADDING = 48;
+    const LEFT_PADDING_DATE = 64;
+    Chart.LEFT_PADDING_LABEL_MAX = 192;
     const RIGHT_PADDING = 24;
     const TOP_PADDING = 16;
     const BOTTOM_PADDING = 24;
+    const SMALL_PADDING = 8;
+    const HORIZONTAL_BAR_HEIGHT = 8;
+    const WIDTH_PER_LETTER = 6.5;
     Chart.defaultConfig = {
         type: 'line',
         groupedTooltip: true,
@@ -7885,9 +8123,23 @@ var Chart;
             displayValue: '',
         },
     };
+    const emptyChart = {
+        xTicks: [],
+        yTicks: [],
+        colors: [],
+        lines: [],
+        circles: [],
+        areas: [],
+        bars: [],
+        arcs: [],
+        horizontalBars: [],
+    };
     function timeseriesDomain(data) {
         return [Math.min(...data.x), Math.max(...data.x)];
     }
+    function indexDomain(data) {
+        return [0, data.x.length - 1];
+    }
     function yDomain(data) {
         const max = Math.max(...data.ys.map(y => Math.max(...y.values)));
         return [0, max == 0 ? 1 : max];
@@ -7895,6 +8147,20 @@ var Chart;
     function xRange(dimensions) {
         return [LEFT_PADDING, dimensions.width - RIGHT_PADDING];
     }
+    function xRangeHorizontal(dimensions, data) {
+        let leftPaddingMax = data.type == 'labeled' ? Chart.LEFT_PADDING_LABEL_MAX : LEFT_PADDING_DATE;
+        let leftPaddingCalculated = leftPaddingMax;
+        if (data.type == 'labeled') {
+            const maxLabelSize = Math.max(...data.x.map(x => x.length));
+            leftPaddingCalculated = Math.min(leftPaddingMax, maxLabelSize * WIDTH_PER_LETTER);
+        }
+        //Space between label and chart
+        leftPaddingCalculated = leftPaddingCalculated + SMALL_PADDING;
+        return [
+            Math.max(leftPaddingCalculated, LEFT_PADDING),
+            dimensions.width - RIGHT_PADDING,
+        ];
+    }
     function barXRange(dimensions, data) {
         const left = LEFT_PADDING;
         const right = dimensions.width - RIGHT_PADDING;
@@ -7904,6 +8170,15 @@ var Chart;
         const range = [left + halfBinSize, right - halfBinSize];
         return { binSize: Math.min(binSize * 0.7, 80), range };
     }
+    function barYRange(dimensions, data) {
+        const top = dimensions.height - TOP_PADDING;
+        const bottom = BOTTOM_PADDING;
+        const height = top - bottom;
+        const binSize = height / (data.x.length || 1);
+        const halfBinSize = binSize / 2;
+        const range = [bottom + halfBinSize, top - halfBinSize];
+        return { range };
+    }
     function yRange(dimensions) {
         return [dimensions.height - BOTTOM_PADDING, TOP_PADDING];
     }
@@ -7914,6 +8189,45 @@ var Chart;
                 : nearestIndex;
         }, 0);
     }
+    function findNearestIndexString(values, input) {
+        const numValues = values.map((_, i) => i);
+        return numValues.reduce((nearestIndex, value, index) => {
+            return Math.abs(value - input) < Math.abs(numValues[nearestIndex] - input)
+                ? index
+                : nearestIndex;
+        }, 0);
+    }
+    function findSubIndex(value, input, binSize, subBinCount) {
+        const subBinSize = (binSize - (subBinCount - 1 * SMALL_PADDING)) / subBinCount;
+        const centerIndex = subBinCount / 2 - 0.5;
+        let closestIndex = 0;
+        let closenessVal = -1;
+        for (let i = 0; i < subBinCount; i++) {
+            const offset = (i - centerIndex) * (subBinSize + SMALL_PADDING);
+            const subBinPos = value + offset;
+            const distance = Math.abs(input - subBinPos);
+            if (closenessVal < 0 || closenessVal > distance) {
+                closestIndex = i;
+                closenessVal = distance;
+            }
+        }
+        return closestIndex;
+    }
+    function findSubIndexHorizontal(value, input, subBinCount) {
+        const centerIndex = subBinCount / 2 - 0.5;
+        let closestIndex = 0;
+        let closenessVal = -1;
+        for (let i = 0; i < subBinCount; i++) {
+            const offset = (i - centerIndex) * (HORIZONTAL_BAR_HEIGHT + SMALL_PADDING);
+            const subBinPos = value + offset;
+            const distance = Math.abs(input - subBinPos);
+            if (closenessVal < 0 || closenessVal > distance) {
+                closestIndex = i;
+                closenessVal = distance;
+            }
+        }
+        return closestIndex;
+    }
     // stack returns a new data where each set of yValues is stacked
     // on top of the previous.
     function stack(data) {
@@ -7999,6 +8313,12 @@ var Chart;
         return donutData;
     }
     Chart.convertChartDataToDonutData = convertChartDataToDonutData;
+    function checkYScaleType(input, dataType) {
+        if (dataType == 'labeled') {
+            return false;
+        }
+        return true;
+    }
 })(Chart || (Chart = {}));
 
 class LegendItemComponent {
@@ -8047,10 +8367,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImpor
 
 class ChartComponent {
     constructor() {
-        this.HEIGHT = 300;
+        this.height$ = new BehaviorSubject(300);
         this.width$ = new BehaviorSubject(0);
         this.config$ = new BehaviorSubject(Chart.defaultConfig);
         this.data$ = new BehaviorSubject({
+            type: 'timeseries',
             x: [],
             ys: [],
         });
@@ -8074,12 +8395,12 @@ class ChartComponent {
                     // if toggled, flip the hidden boolean
                     hidden: toggledLegends[y.label] ? !y.hidden : y.hidden }))) });
             const viewBox = config.type == 'donut'
-                ? `${-this.HEIGHT / 2} ${-this.HEIGHT / 2}
-              ${this.HEIGHT} ${this.HEIGHT}`
-                : `0 0 ${width} ${this.HEIGHT}`;
+                ? `${-this.height / 2} ${-this.height / 2}
+              ${this.height} ${this.height}`
+                : `0 0 ${width} ${this.height}`;
             return Object.assign({ viewBox, data: hiddenData }, Chart.chart(config, hiddenData, {
                 width: width,
-                height: this.HEIGHT,
+                height: this.height,
             }));
         }));
         this.empty$ = this.data$.pipe(map(d => (d.x.length == 0 && this.config.type != 'donut') || d.ys.length == 0));
@@ -8090,6 +8411,7 @@ class ChartComponent {
         this.moreTextWidth = 50;
         this.baseLegendItemWidth = 40;
         this.widthPerLetter = 6.5;
+        this.leftLabelMaxSize = Chart.LEFT_PADDING_LABEL_MAX;
         this.firstHiddenLegendItemIndex$ = combineLatest([
             this.width$,
             this.config$,
@@ -8110,6 +8432,12 @@ class ChartComponent {
             return data.ys.length;
         }));
     }
+    set height(w) {
+        this.height$.next(w);
+    }
+    get height() {
+        return this.height$.value;
+    }
     set width(w) {
         this.width$.next(w);
     }
@@ -8173,10 +8501,10 @@ class ChartComponent {
     }
 }
 ChartComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChartComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChartComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChartComponent, selector: "riv-chart", inputs: { config: "config", data: "data" }, outputs: { chartClicked: "chartClicked" }, 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=\"(empty$ | async) === false; else zeroState\"\n>\n  <ng-container *ngIf=\"drawData$ | async; let d\">\n    <div\n      (mousemove)=\"mousemove($event, d.hover)\"\n      (mouseleave)=\"mouseleave($event)\"\n      (click)=\"click()\"\n      #container\n      class=\"sub-container\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [attr.viewBox]=\"d.viewBox\"\n        width=\"100%\"\n        [attr.height]=\"HEIGHT\"\n      >\n        <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n          <line\n            class=\"tick-line\"\n            [attr.x1]=\"tick.x\"\n            [attr.x2]=\"tick.x\"\n            y1=\"0\"\n            [attr.y2]=\"HEIGHT - 16\"\n          ></line>\n          <text class=\"tick-label\" [attr.x]=\"tick.x\" [attr.y]=\"HEIGHT - 4\">\n            {{ tick.label }}\n          </text>\n        </g>\n        <g *ngFor=\"let tick of d.yTicks\">\n          <line\n            class=\"tick-line\"\n            [attr.y1]=\"tick.y\"\n            [attr.y2]=\"tick.y\"\n            x1=\"0\"\n            [attr.x2]=\"width\"\n          ></line>\n          <text class=\"tick-label\" [attr.y]=\"tick.y - 4\" [attr.x]=\"0\">\n            {{ tick.label }}\n          </text>\n        </g>\n        <g *ngIf=\"!!hover\">\n          <line\n            class=\"tick-line\"\n            [attr.x1]=\"hover.x\"\n            [attr.x2]=\"hover.x\"\n            y1=\"0\"\n            [attr.y2]=\"HEIGHT - 16\"\n            stroke-width=\"2\"\n            stroke-dasharray=\"4\"\n          />\n        </g>\n        <g *ngFor=\"let bar of d.bars; let i = index\">\n          <rect\n            *ngFor=\"let rect of bar\"\n            [attr.x]=\"rect.x\"\n            [attr.y]=\"rect.y\"\n            [attr.width]=\"rect.width\"\n            [attr.height]=\"rect.height\"\n            [attr.fill]=\"varColor(d.colors, i)\"\n          ></rect>\n        </g>\n        <g *ngFor=\"let line of d.lines; let i = index\">\n          <path\n            [attr.d]=\"line\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n            fill=\"none\"\n            stroke-width=\"2\"\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          <circle\n            class=\"marker\"\n            *ngIf=\"\n              !!hover && (config.groupedTooltip || i === hover.visibleYIndex)\n            \"\n            [attr.cx]=\"hover.x\"\n            [attr.cy]=\"hover.ys[i]\"\n            r=\"3.5\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></circle>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <path [attr.d]=\"area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <circle\n            class=\"marker\"\n            *ngIf=\"\n              !!hover && (config.groupedTooltip || i === hover.visibleYIndex)\n            \"\n            [attr.cx]=\"hover.x\"\n            [attr.cy]=\"hover.ys[i]\"\n            r=\"3.5\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></circle>\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      </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=\"!!hover && hover.tooltip\">\n        <riv-callout\n          *riv-overlay\n          [anchor]=\"hover.tooltip.anchor\"\n          [isModal]=\"false\"\n          [preferredPosition]=\"'center-right'\"\n          [theme]=\"'light'\"\n        >\n          <div class=\"callout-content\">\n            <div *ngIf=\"hover.tooltip.date\" class=\"callout-row\">\n              {{ hover.tooltip.date }}\n            </div>\n            <div\n              class=\"callout-row\"\n              *ngFor=\"let metric of hover.tooltip.metrics\"\n            >\n              <span class=\"series-label\">\n                <riv-legend-item [colorToken]=\"metric.color\"></riv-legend-item>\n                <span>{{ metric.label }}</span>\n              </span>\n              <span>{{ metric.value }}</span>\n            </div>\n          </div>\n        </riv-callout>\n      </ng-container>\n    </div>\n    <legend>\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\"\n            [label]=\"item.label\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [colorToken]=\"config.colors[i % config.colors.length]\"\n            (itemClick)=\"toggleLegend(item.label)\"\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 < d.data.ys.length\"\n        >\n          <span rivLink class=\"more-text\">\n            +\n            {{ d.data.ys.length - fi }} 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)=\"lockShowMoreTooltip = false\"\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\"\n                  [label]=\"item.label\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [colorToken]=\"config.colors[i % config.colors.length]\"\n                  (itemClick)=\"toggleLegend(item.label)\"\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 #zeroState>\n  <riv-zero-state [message]=\"config.zeroStateMessage\"></riv-zero-state>\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(--type-1-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{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.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)}\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: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "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: "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: { config: "config", data: "data" }, outputs: { chartClicked: "chartClicked" }, 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=\"(empty$ | async) === false; else zeroState\"\n>\n  <ng-container *ngIf=\"drawData$ | async; let d\">\n    <div\n      (mousemove)=\"mousemove($event, d.hover)\"\n      (mouseleave)=\"mouseleave($event)\"\n      (click)=\"click()\"\n      #container\n      class=\"sub-container\"\n    >\n      <svg:svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [attr.viewBox]=\"d.viewBox\"\n        width=\"100%\"\n        [attr.height]=\"height\"\n      >\n        <ng-container *ngIf=\"!(config.type === 'horizontal-bar')\">\n          <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n            <line\n              class=\"tick-line\"\n              [attr.x1]=\"tick.x\"\n              [attr.x2]=\"tick.x\"\n              y1=\"0\"\n              [attr.y2]=\"height - 16\"\n            ></line>\n            <text class=\"tick-label\" [attr.x]=\"tick.x\" [attr.y]=\"height - 4\">\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 class=\"tick-label\" [attr.x]=\"tick.x\" [attr.y]=\"12\">\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]=\"height - 16\"\n            ></line>\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]=\"width\"\n          ></line>\n          <text\n            rivSVGTextTruncate\n            [text]=\"tick.label\"\n            [width]=\"leftLabelMaxSize\"\n            class=\"tick-label\"\n            [attr.y]=\"tick.y - 4\"\n            [attr.x]=\"0\"\n          >\n            {{ tick.label }}\n          </text>\n        </g>\n        <g *ngIf=\"!!hover && !(config.type === 'horizontal-bar')\">\n          <line\n            class=\"tick-line\"\n            [attr.x1]=\"hover.x\"\n            [attr.x2]=\"hover.x\"\n            y1=\"0\"\n            [attr.y2]=\"height - 16\"\n            stroke-width=\"2\"\n            stroke-dasharray=\"4\"\n          />\n        </g>\n        <g *ngFor=\"let bar of d.bars; let i = index\">\n          <rect\n            *ngFor=\"let rect of bar\"\n            [attr.x]=\"rect.x\"\n            [attr.y]=\"rect.y\"\n            [attr.width]=\"rect.width\"\n            [attr.height]=\"rect.height\"\n            [attr.fill]=\"varColor(d.colors, i)\"\n          ></rect>\n        </g>\n        <g *ngFor=\"let bar of d.horizontalBars; let i = index\">\n          <path\n            *ngFor=\"let indBar of bar\"\n            [attr.d]=\"indBar\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n            [attr.fill]=\"varColor(d.colors, i)\"\n            stroke-width=\"2\"\n          />\n        </g>\n        <g *ngFor=\"let line of d.lines; let i = index\">\n          <path\n            [attr.d]=\"line\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n            fill=\"none\"\n            stroke-width=\"2\"\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          <circle\n            class=\"marker\"\n            *ngIf=\"\n              !!hover && (config.groupedTooltip || i === hover.visibleYIndex)\n            \"\n            [attr.cx]=\"hover.x\"\n            [attr.cy]=\"hover.ys[i]\"\n            r=\"3.5\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></circle>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <path [attr.d]=\"area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <circle\n            class=\"marker\"\n            *ngIf=\"\n              !!hover && (config.groupedTooltip || i === hover.visibleYIndex)\n            \"\n            [attr.cx]=\"hover.x\"\n            [attr.cy]=\"hover.ys[i]\"\n            r=\"3.5\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></circle>\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      </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=\"!!hover && hover.tooltip\">\n        <riv-callout\n          *riv-overlay\n          [anchor]=\"hover.tooltip.anchor\"\n          [isModal]=\"false\"\n          [preferredPosition]=\"'center-right'\"\n          [theme]=\"'light'\"\n        >\n          <div class=\"callout-content\">\n            <div *ngIf=\"hover.tooltip.date\" class=\"callout-row\">\n              {{ hover.tooltip.date }}\n            </div>\n            <div\n              class=\"callout-row\"\n              *ngFor=\"let metric of hover.tooltip.metrics\"\n            >\n              <span class=\"series-label\">\n                <riv-legend-item [colorToken]=\"metric.color\"></riv-legend-item>\n                <span>{{ metric.label }}</span>\n              </span>\n              <span>{{ metric.value }}</span>\n            </div>\n          </div>\n        </riv-callout>\n      </ng-container>\n    </div>\n    <legend>\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\"\n            [label]=\"item.label\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [colorToken]=\"config.colors[i % config.colors.length]\"\n            (itemClick)=\"toggleLegend(item.label)\"\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 < d.data.ys.length\"\n        >\n          <span rivLink class=\"more-text\">\n            +\n            {{ d.data.ys.length - fi }} 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)=\"lockShowMoreTooltip = false\"\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\"\n                  [label]=\"item.label\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [colorToken]=\"config.colors[i % config.colors.length]\"\n                  (itemClick)=\"toggleLegend(item.label)\"\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 #zeroState>\n  <riv-zero-state [message]=\"config.zeroStateMessage\"></riv-zero-state>\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(--type-1-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{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.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)}\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: "component", type: CalloutComponent, selector: "riv-callout", inputs: ["anchor", "isModal", "preferredPosition", "allowedPositions", "fallbackDirection", "showCaret", "theme"], outputs: ["close"] }, { kind: "component", type: LegendItemComponent, selector: "riv-legend-item", inputs: ["label", "colorToken", "style", "visibility", "iconTooltip", "clickable", "showCheckWhenClickable"], outputs: ["itemClick"] }, { kind: "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=\"(empty$ | async) === false; else zeroState\"\n>\n  <ng-container *ngIf=\"drawData$ | async; let d\">\n    <div\n      (mousemove)=\"mousemove($event, d.hover)\"\n      (mouseleave)=\"mouseleave($event)\"\n      (click)=\"click()\"\n      #container\n      class=\"sub-container\"\n    >\n      <svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [attr.viewBox]=\"d.viewBox\"\n        width=\"100%\"\n        [attr.height]=\"HEIGHT\"\n      >\n        <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n          <line\n            class=\"tick-line\"\n            [attr.x1]=\"tick.x\"\n            [attr.x2]=\"tick.x\"\n            y1=\"0\"\n            [attr.y2]=\"HEIGHT - 16\"\n          ></line>\n          <text class=\"tick-label\" [attr.x]=\"tick.x\" [attr.y]=\"HEIGHT - 4\">\n            {{ tick.label }}\n          </text>\n        </g>\n        <g *ngFor=\"let tick of d.yTicks\">\n          <line\n            class=\"tick-line\"\n            [attr.y1]=\"tick.y\"\n            [attr.y2]=\"tick.y\"\n            x1=\"0\"\n            [attr.x2]=\"width\"\n          ></line>\n          <text class=\"tick-label\" [attr.y]=\"tick.y - 4\" [attr.x]=\"0\">\n            {{ tick.label }}\n          </text>\n        </g>\n        <g *ngIf=\"!!hover\">\n          <line\n            class=\"tick-line\"\n            [attr.x1]=\"hover.x\"\n            [attr.x2]=\"hover.x\"\n            y1=\"0\"\n            [attr.y2]=\"HEIGHT - 16\"\n            stroke-width=\"2\"\n            stroke-dasharray=\"4\"\n          />\n        </g>\n        <g *ngFor=\"let bar of d.bars; let i = index\">\n          <rect\n            *ngFor=\"let rect of bar\"\n            [attr.x]=\"rect.x\"\n            [attr.y]=\"rect.y\"\n            [attr.width]=\"rect.width\"\n            [attr.height]=\"rect.height\"\n            [attr.fill]=\"varColor(d.colors, i)\"\n          ></rect>\n        </g>\n        <g *ngFor=\"let line of d.lines; let i = index\">\n          <path\n            [attr.d]=\"line\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n            fill=\"none\"\n            stroke-width=\"2\"\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          <circle\n            class=\"marker\"\n            *ngIf=\"\n              !!hover && (config.groupedTooltip || i === hover.visibleYIndex)\n            \"\n            [attr.cx]=\"hover.x\"\n            [attr.cy]=\"hover.ys[i]\"\n            r=\"3.5\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></circle>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <path [attr.d]=\"area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <circle\n            class=\"marker\"\n            *ngIf=\"\n              !!hover && (config.groupedTooltip || i === hover.visibleYIndex)\n            \"\n            [attr.cx]=\"hover.x\"\n            [attr.cy]=\"hover.ys[i]\"\n            r=\"3.5\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></circle>\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      </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=\"!!hover && hover.tooltip\">\n        <riv-callout\n          *riv-overlay\n          [anchor]=\"hover.tooltip.anchor\"\n          [isModal]=\"false\"\n          [preferredPosition]=\"'center-right'\"\n          [theme]=\"'light'\"\n        >\n          <div class=\"callout-content\">\n            <div *ngIf=\"hover.tooltip.date\" class=\"callout-row\">\n              {{ hover.tooltip.date }}\n            </div>\n            <div\n              class=\"callout-row\"\n              *ngFor=\"let metric of hover.tooltip.metrics\"\n            >\n              <span class=\"series-label\">\n                <riv-legend-item [colorToken]=\"metric.color\"></riv-legend-item>\n                <span>{{ metric.label }}</span>\n              </span>\n              <span>{{ metric.value }}</span>\n            </div>\n          </div>\n        </riv-callout>\n      </ng-container>\n    </div>\n    <legend>\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\"\n            [label]=\"item.label\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [colorToken]=\"config.colors[i % config.colors.length]\"\n            (itemClick)=\"toggleLegend(item.label)\"\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 < d.data.ys.length\"\n        >\n          <span rivLink class=\"more-text\">\n            +\n            {{ d.data.ys.length - fi }} 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)=\"lockShowMoreTooltip = false\"\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\"\n                  [label]=\"item.label\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [colorToken]=\"config.colors[i % config.colors.length]\"\n                  (itemClick)=\"toggleLegend(item.label)\"\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 #zeroState>\n  <riv-zero-state [message]=\"config.zeroStateMessage\"></riv-zero-state>\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(--type-1-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{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.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)}\n"] }]
+            args: [{ selector: 'riv-chart', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n  class=\"container\"\n  (rivClientSize)=\"width = $event.width\"\n  *ngIf=\"(empty$ | async) === false; else zeroState\"\n>\n  <ng-container *ngIf=\"drawData$ | async; let d\">\n    <div\n      (mousemove)=\"mousemove($event, d.hover)\"\n      (mouseleave)=\"mouseleave($event)\"\n      (click)=\"click()\"\n      #container\n      class=\"sub-container\"\n    >\n      <svg:svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [attr.viewBox]=\"d.viewBox\"\n        width=\"100%\"\n        [attr.height]=\"height\"\n      >\n        <ng-container *ngIf=\"!(config.type === 'horizontal-bar')\">\n          <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n            <line\n              class=\"tick-line\"\n              [attr.x1]=\"tick.x\"\n              [attr.x2]=\"tick.x\"\n              y1=\"0\"\n              [attr.y2]=\"height - 16\"\n            ></line>\n            <text class=\"tick-label\" [attr.x]=\"tick.x\" [attr.y]=\"height - 4\">\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 class=\"tick-label\" [attr.x]=\"tick.x\" [attr.y]=\"12\">\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]=\"height - 16\"\n            ></line>\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]=\"width\"\n          ></line>\n          <text\n            rivSVGTextTruncate\n            [text]=\"tick.label\"\n            [width]=\"leftLabelMaxSize\"\n            class=\"tick-label\"\n            [attr.y]=\"tick.y - 4\"\n            [attr.x]=\"0\"\n          >\n            {{ tick.label }}\n          </text>\n        </g>\n        <g *ngIf=\"!!hover && !(config.type === 'horizontal-bar')\">\n          <line\n            class=\"tick-line\"\n            [attr.x1]=\"hover.x\"\n            [attr.x2]=\"hover.x\"\n            y1=\"0\"\n            [attr.y2]=\"height - 16\"\n            stroke-width=\"2\"\n            stroke-dasharray=\"4\"\n          />\n        </g>\n        <g *ngFor=\"let bar of d.bars; let i = index\">\n          <rect\n            *ngFor=\"let rect of bar\"\n            [attr.x]=\"rect.x\"\n            [attr.y]=\"rect.y\"\n            [attr.width]=\"rect.width\"\n            [attr.height]=\"rect.height\"\n            [attr.fill]=\"varColor(d.colors, i)\"\n          ></rect>\n        </g>\n        <g *ngFor=\"let bar of d.horizontalBars; let i = index\">\n          <path\n            *ngFor=\"let indBar of bar\"\n            [attr.d]=\"indBar\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n            [attr.fill]=\"varColor(d.colors, i)\"\n            stroke-width=\"2\"\n          />\n        </g>\n        <g *ngFor=\"let line of d.lines; let i = index\">\n          <path\n            [attr.d]=\"line\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n            fill=\"none\"\n            stroke-width=\"2\"\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          <circle\n            class=\"marker\"\n            *ngIf=\"\n              !!hover && (config.groupedTooltip || i === hover.visibleYIndex)\n            \"\n            [attr.cx]=\"hover.x\"\n            [attr.cy]=\"hover.ys[i]\"\n            r=\"3.5\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></circle>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <path [attr.d]=\"area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <circle\n            class=\"marker\"\n            *ngIf=\"\n              !!hover && (config.groupedTooltip || i === hover.visibleYIndex)\n            \"\n            [attr.cx]=\"hover.x\"\n            [attr.cy]=\"hover.ys[i]\"\n            r=\"3.5\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></circle>\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      </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=\"!!hover && hover.tooltip\">\n        <riv-callout\n          *riv-overlay\n          [anchor]=\"hover.tooltip.anchor\"\n          [isModal]=\"false\"\n          [preferredPosition]=\"'center-right'\"\n          [theme]=\"'light'\"\n        >\n          <div class=\"callout-content\">\n            <div *ngIf=\"hover.tooltip.date\" class=\"callout-row\">\n              {{ hover.tooltip.date }}\n            </div>\n            <div\n              class=\"callout-row\"\n              *ngFor=\"let metric of hover.tooltip.metrics\"\n            >\n              <span class=\"series-label\">\n                <riv-legend-item [colorToken]=\"metric.color\"></riv-legend-item>\n                <span>{{ metric.label }}</span>\n              </span>\n              <span>{{ metric.value }}</span>\n            </div>\n          </div>\n        </riv-callout>\n      </ng-container>\n    </div>\n    <legend>\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\"\n            [label]=\"item.label\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [colorToken]=\"config.colors[i % config.colors.length]\"\n            (itemClick)=\"toggleLegend(item.label)\"\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 < d.data.ys.length\"\n        >\n          <span rivLink class=\"more-text\">\n            +\n            {{ d.data.ys.length - fi }} 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)=\"lockShowMoreTooltip = false\"\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\"\n                  [label]=\"item.label\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [colorToken]=\"config.colors[i % config.colors.length]\"\n                  (itemClick)=\"toggleLegend(item.label)\"\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 #zeroState>\n  <riv-zero-state [message]=\"config.zeroStateMessage\"></riv-zero-state>\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(--type-1-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{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.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)}\n"] }]
         }], propDecorators: { container: [{
                 type: ViewChild,
                 args: ['container']