@rivet-health/design-system 41.0.1 → 41.0.2

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

@@ -20363,7 +20363,7 @@ var ChartComponent = class ChartComponent {
 			}],
 			ngImport: i0,
 			template: "<div\n  class=\"container\"\n  (rivClientSize)=\"width = $event.width\"\n  *ngIf=\"{ d: drawData$ | async } as vm\"\n  [style.--override-font-size]=\"getFontSize(vm.d)\"\n>\n  <ng-container\n    *ngIf=\"\n      !checkForNonDisplayState(vm.d) && (drawData$ | async);\n      let d;\n      else: nonDisplayState\n    \"\n  >\n    <div\n      (mousemove)=\"mousemove($event, d.hover)\"\n      (mouseleave)=\"mouseleave($event)\"\n      (click)=\"click()\"\n      #container\n      class=\"sub-container\"\n      [class.clickable]=\"isHoverClickable\"\n      tabIndex=\"0\"\n      [ngClass]=\"{ 'donut-container': config.type === 'donut' }\"\n      [ngStyle]=\"{\n        height: getSubcontainerHeight(d),\n        width: getSubcontainerWidth(d)\n      }\"\n    >\n      <svg:svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [attr.viewBox]=\"d.viewBox\"\n        [attr.height]=\"d.chartHeight\"\n        [attr.width]=\"d.chartWidth\"\n      >\n        <defs>\n          <!-- Stripe pattern -->\n          <pattern\n            id=\"stripes\"\n            x=\"0\"\n            y=\"0\"\n            [attr.width]=\"10\"\n            [attr.height]=\"10\"\n            patternUnits=\"userSpaceOnUse\"\n          >\n            <line\n              [attr.x1]=\"0\"\n              [attr.y1]=\"10\"\n              [attr.x2]=\"10\"\n              [attr.y2]=\"0\"\n              stroke=\"var(--white-100)\"\n              stroke-width=\"1\"\n            ></line>\n          </pattern>\n        </defs>\n        <ng-container *ngIf=\"!(config.type === 'horizontal-bar')\">\n          <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n            <text\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"getBottomLabelY(d)\"\n            >\n              {{ tick.label }}\n            </text>\n          </g>\n        </ng-container>\n        <ng-container *ngIf=\"config.type === 'horizontal-bar'\">\n          <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"left\">\n            <text\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"d.chartSizingValues.fontSize\"\n            >\n              {{ tick.label }}\n            </text>\n            <line\n              class=\"tick-line\"\n              [attr.x1]=\"tick.x\"\n              [attr.x2]=\"tick.x\"\n              y1=\"0\"\n              [attr.y2]=\"d.chartHeight\"\n            ></line>\n            <text\n              *ngIf=\"tick.secondaryLabel\"\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"getBottomLabelY(d)\"\n            >\n              {{ tick.secondaryLabel }}\n            </text>\n          </g>\n        </ng-container>\n        <g *ngFor=\"let tick of d.yTicks\">\n          <line\n            *ngIf=\"!(config.type === 'horizontal-bar')\"\n            class=\"tick-line\"\n            [attr.y1]=\"tick.y\"\n            [attr.y2]=\"tick.y\"\n            x1=\"0\"\n            [attr.x2]=\"d.chartWidth\"\n          ></line>\n          <text\n            rivSVGTextTruncate\n            [text]=\"tick.label\"\n            [width]=\"\n              config.type === 'horizontal-bar'\n                ? d.chartSizingValues.leftBucketLabel\n                : d.chartSizingValues.leftPadding\n            \"\n            class=\"tick-label\"\n            [attr.y]=\"tick.y\"\n            [attr.x]=\"0\"\n          >\n            {{ tick.label }}\n          </text>\n          <text\n            *ngIf=\"tick.secondaryLabel\"\n            rivSVGTextTruncate\n            [text]=\"tick.secondaryLabel\"\n            [width]=\"d.chartSizingValues.rightPadding\"\n            class=\"tick-label\"\n            [attr.y]=\"tick.y\"\n            [attr.x]=\"d.chartWidth\"\n            text-anchor=\"end\"\n          >\n            {{ tick.secondaryLabel }}\n          </text>\n        </g>\n        <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n          <g\n            *ngIf=\"config.type !== 'horizontal-bar' && config.type !== 'donut'\"\n          >\n            <line\n              class=\"tick-line\"\n              [attr.x1]=\"hoverData?.x\"\n              [attr.x2]=\"hoverData?.x\"\n              y1=\"0\"\n              [attr.y2]=\"d.chartHeight\"\n              stroke-width=\"2\"\n              stroke-dasharray=\"4\"\n            />\n          </g>\n        </ng-container>\n        <g *ngFor=\"let bar of d.bars; let i = index\">\n          <ng-container *ngFor=\"let rect of bar; let j = index\">\n            <defs *ngIf=\"rect.pattern === 'dots'\">\n              <pattern\n                [attr.id]=\"'dots-' + i + '-' + j\"\n                patternUnits=\"userSpaceOnUse\"\n                [attr.x]=\"rect.x\"\n                [attr.y]=\"rect.y\"\n                width=\"4\"\n                height=\"4\"\n              >\n                <circle\n                  cx=\"2\"\n                  cy=\"2\"\n                  r=\"1.5\"\n                  [attr.fill]=\"varColor(d.colors, i)\"\n                ></circle>\n              </pattern>\n            </defs>\n\n            <rect\n              *ngIf=\"rect.nonDisplay !== true\"\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              [attr.fill]=\"\n                rect.pattern === 'dots'\n                  ? 'url(#dots-' + i + '-' + j + ')'\n                  : getBarColor(rect, d.colors, i, hover)\n              \"\n              [attr.stroke]=\"\n                showBarBorders(rect, hover) ? varWrap('--black-100') : undefined\n              \"\n              [attr.stroke-width]=\"showBarBorders(rect, hover) ? 1 : undefined\"\n            ></rect>\n            <rect\n              *ngIf=\"showNonDisplayRect(rect, hover)\"\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              fill=\"transparent\"\n              [attr.stroke]=\"varWrap('--black-100')\"\n              [attr.stroke-width]=\"1\"\n            ></rect>\n            <rect\n              *ngIf=\"rect.pattern === 'striped'\"\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              fill=\"url(#stripes)\"\n            ></rect>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let bar of d.horizontalBars; let i = index\">\n          <ng-container *ngFor=\"let indBar of bar; let j = index\">\n            <defs *ngIf=\"indBar.pattern === 'dots'\">\n              <pattern\n                [attr.id]=\"'dots-' + i + '-' + j\"\n                patternUnits=\"userSpaceOnUse\"\n                [attr.x]=\"indBar.x\"\n                [attr.y]=\"indBar.y\"\n                width=\"4\"\n                height=\"4\"\n              >\n                <circle\n                  cx=\"2\"\n                  cy=\"2\"\n                  r=\"1.5\"\n                  [attr.fill]=\"varColor(d.colors, i)\"\n                ></circle>\n              </pattern>\n            </defs>\n            <path\n              [attr.d]=\"indBar.horizontalBar\"\n              [attr.fill]=\"\n                indBar.pattern === 'dots'\n                  ? 'url(#dots-' + i + '-' + j + ')'\n                  : varColor(d.colors, i)\n              \"\n              [attr.stroke]=\"\n                indBar.pattern === 'dots' ? 'none' : varColor(d.colors, i)\n              \"\n              [attr.stroke-width]=\"indBar.pattern === 'dots' ? 0 : 2\"\n            />\n            <path\n              *ngIf=\"indBar.pattern === 'striped'\"\n              [attr.d]=\"indBar.horizontalBar\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n              fill=\"url(#stripes)\"\n              stroke-width=\"0\"\n            />\n          </ng-container>\n        </g>\n        <g *ngFor=\"let gradient of d.gradients; let i = index\">\n          <ng-container *ngFor=\"let rect of gradient; let j = index\">\n            <defs>\n              <linearGradient\n                [attr.id]=\"'grad-' + i + '-' + j\"\n                x1=\"0\"\n                y1=\"0\"\n                x2=\"0\"\n                y2=\"1\"\n              >\n                <stop offset=\"0%\" [attr.stop-color]=\"varColor(d.colors, i)\" />\n                <stop offset=\"100%\" stop-color=\"white\" />\n              </linearGradient>\n            </defs>\n            <rect\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              [attr.fill]=\"'url(#grad-' + i + '-' + j + ')'\"\n              opacity=\"0.4\"\n            ></rect>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let line of d.lines; let i = index\">\n          <path\n            [attr.d]=\"line.line\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n            fill=\"none\"\n            stroke-width=\"2\"\n            [attr.stroke-linecap]=\"\n              line.pattern === 'dots' ? 'round' : undefined\n            \"\n            [attr.stroke-linejoin]=\"\n              line.pattern === 'dots' ? 'round' : undefined\n            \"\n            [attr.stroke-dasharray]=\"\n              line.pattern === 'striped'\n                ? '10 10'\n                : line.pattern === 'dots'\n                ? '0.25 7'\n                : undefined\n            \"\n          ></path>\n        </g>\n        <g *ngFor=\"let lineSinglePointFallback of d.circles; let i = index\">\n          <circle\n            class=\"marker\"\n            [attr.cx]=\"lineSinglePointFallback.cx\"\n            [attr.cy]=\"lineSinglePointFallback.cy\"\n            r=\"3.5\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></circle>\n        </g>\n        <g *ngFor=\"let line of d.lines; let i = index\">\n          <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n            <circle\n              class=\"marker\"\n              *ngIf=\"config.groupedTooltip || i === hoverData?.visibleYIndex\"\n              [attr.cx]=\"hoverData?.x\"\n              [attr.cy]=\"hoverData?.ys?.[i]\"\n              r=\"3.5\"\n              stroke-width=\"2\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n            ></circle>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <path [attr.d]=\"area.area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n          <path\n            *ngIf=\"area.pattern === 'striped'\"\n            [attr.d]=\"area.area\"\n            fill=\"url(#stripes)\"\n          ></path>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n            <circle\n              class=\"marker\"\n              *ngIf=\"config.groupedTooltip || i === hoverData?.visibleYIndex\"\n              [attr.cx]=\"hoverData?.x\"\n              [attr.cy]=\"hoverData?.ys?.[i]\"\n              r=\"3.5\"\n              stroke-width=\"2\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n            ></circle>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let wLine of d.waterfallLines\">\n          <line\n            class=\"waterfall-line\"\n            [attr.x1]=\"wLine.x1\"\n            [attr.x2]=\"wLine.x2\"\n            [attr.y1]=\"wLine.y1\"\n            [attr.y2]=\"wLine.y2\"\n            stroke-width=\"1\"\n            stroke-dasharray=\"6\"\n          />\n        </g>\n        <path\n          *ngFor=\"let path of d.arcs; let i = index\"\n          [attr.d]=\"path\"\n          [attr.fill]=\"varColor(d.colors, i)\"\n        ></path>\n        <g *ngFor=\"let dataLabel of d.dataLabels; let i = index\">\n          <text\n            *ngIf=\"config.showDataLabels && dataLabel.label\"\n            [ngClass]=\"getDataLabelClass(dataLabel, config, hover)\"\n            [attr.y]=\"dataLabel.yPos\"\n            [attr.x]=\"dataLabel.xPos\"\n            [attr.text-anchor]=\"dataLabel.anchor\"\n            [attr.font-weight]=\"\n              dataLabel.bold\n                ? 'var(--font-weight-heavy)'\n                : 'var(--font-weight-normal)'\n            \"\n            [attr.opacity]=\"getDataLabelOpacity(dataLabel, config, hover)\"\n          >\n            {{ dataLabel.label }}\n          </text>\n          <line\n            *ngIf=\"dataLabel.line && config.showDataLabels\"\n            [attr.y1]=\"dataLabel.line.y1\"\n            [attr.y2]=\"dataLabel.line.y2\"\n            [attr.x1]=\"dataLabel.line.x1\"\n            [attr.x2]=\"dataLabel.line.x2\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></line>\n        </g>\n        <g *ngFor=\"let connection of d.flowConnections\">\n          <path\n            [attr.d]=\"connection.path\"\n            [attr.fill]=\"getConnectionColor()\"\n            [attr.opacity]=\"getConnectionOpacity(connection, hover)\"\n          />\n        </g>\n      </svg:svg>\n      <div *ngIf=\"config.type === 'donut'\" class=\"donut-display\">\n        <div class=\"donut-value\" [ngClass]=\"config.donutDisplayInfo.size\">\n          {{ config.donutDisplayInfo.displayValue }}\n        </div>\n        <div class=\"donut-label\">\n          {{ config.donutDisplayInfo.displayLabel }}\n        </div>\n      </div>\n      <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n        <riv-callout\n          *riv-overlay\n          [anchor]=\"\n            hoverData?.tooltip?.anchor ? hoverData.tooltip.anchor : null\n          \"\n          [isModal]=\"false\"\n          [preferredPosition]=\"\n            hoverData?.tooltip?.preferredPosition ?? 'center-right'\n          \"\n          [theme]=\"'light'\"\n        >\n          <ng-container *ngIf=\"tooltipTemplate; else defaultTooltip\">\n            <ng-container\n              [ngTemplateOutlet]=\"tooltipTemplate\"\n              [ngTemplateOutletContext]=\"{\n                xIndex: hoverData.xIndex,\n                yIndex: hoverData.yIndex,\n                isSuppValue: hoverData.isSuppValue,\n                suppYIndex: hoverData.suppYIndex,\n                isDropOff: hoverData.isDropOff\n              }\"\n            ></ng-container>\n          </ng-container>\n          <ng-template #defaultTooltip>\n            <div class=\"callout-content\">\n              <div *ngIf=\"hoverData?.tooltip?.date\" class=\"callout-row\">\n                {{ hoverData?.tooltip?.date }}\n              </div>\n              <div\n                class=\"callout-row\"\n                *ngFor=\"let metric of hoverData?.tooltip?.metrics\"\n              >\n                <span class=\"series-label\">\n                  <riv-legend-item\n                    [colorToken]=\"metric.color\"\n                    [style]=\"metric.pattern || 'solid'\"\n                  ></riv-legend-item>\n                  <span>{{ metric.label }}</span>\n                </span>\n                <span>{{ metric.value }}</span>\n              </div>\n            </div>\n          </ng-template>\n        </riv-callout>\n      </ng-container>\n      <ng-container *ngIf=\"flowHoverDataGuard(hover) as hoverData\">\n        <riv-callout\n          *riv-overlay\n          [anchor]=\"\n            hoverData?.tooltip?.anchor ? hoverData.tooltip.anchor : null\n          \"\n          [isModal]=\"false\"\n          [preferredPosition]=\"'top-center'\"\n          [theme]=\"'light'\"\n        >\n          <div class=\"callout-content\">\n            <div class=\"callout-row\">\n              <ng-container *ngIf=\"hoverData?.hoverTarget === 'connection'\">\n                <ng-container\n                  *ngIf=\"\n                    getBucketConfigInfo(hoverData, 'startId') as startConfig\n                  \"\n                >\n                  <riv-issue\n                    [label]=\"startConfig.title\"\n                    [colorToken]=\"startConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n                ->\n                <ng-container\n                  *ngIf=\"getBucketConfigInfo(hoverData, 'endId') as endConfig\"\n                >\n                  <riv-issue\n                    [label]=\"endConfig.title\"\n                    [colorToken]=\"endConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"hoverData?.hoverTarget !== 'connection'\">\n                <ng-container\n                  *ngIf=\"getBucketConfigInfo(hoverData, 'barId') as barConfig\"\n                >\n                  <riv-issue\n                    [label]=\"barConfig.title\"\n                    [colorToken]=\"barConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n              </ng-container>\n            </div>\n            <div\n              *ngIf=\"hoverData?.tooltip?.subtitle\"\n              class=\"callout-row flow-subtitle\"\n            >\n              {{ hoverData?.tooltip?.subtitle }}\n            </div>\n          </div>\n        </riv-callout>\n      </ng-container>\n    </div>\n    <legend *ngIf=\"d.data.type !== 'flow'\">\n      <ng-container *ngIf=\"firstHiddenLegendItemIndex$ | async; let fi\">\n        <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n          <riv-legend-item\n            *ngIf=\"i < fi.dataIndex && item.showLegendItem !== false\"\n            [label]=\"item.label\"\n            [style]=\"item.pattern || 'solid'\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n            [colorToken]=\"getItemColor(item, i)\"\n            (itemClick)=\"toggleLegend(item, i)\"\n          ></riv-legend-item>\n        </ng-container>\n        <ng-container\n          *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n        >\n          <riv-legend-item\n            *ngIf=\"i < fi.suppIndex && item.showLegendItem !== false\"\n            [label]=\"item.label\"\n            [style]=\"item.pattern || 'solid'\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n            [colorToken]=\"getItemColor(item, i)\"\n            (itemClick)=\"toggleLegend(item, i)\"\n          ></riv-legend-item>\n        </ng-container>\n        <div\n          #moreTextContainer\n          class=\"more-text-container\"\n          (mouseover)=\"mouseoverLegend()\"\n          (mouseleave)=\"mouseleaveLegend()\"\n          (click)=\"moreClick()\"\n          *ngIf=\"fi.hiddenCount\"\n        >\n          <span rivLink class=\"more-text\">\n            +\n            {{ fi.hiddenCount }} more\n          </span>\n        </div>\n        <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n          <riv-callout\n            *riv-overlay\n            [anchor]=\"\n              $safeNavigationMigration(moreTextContainer?.nativeElement)\n            \"\n            [isModal]=\"lockShowMoreTooltip\"\n            (close)=\"closeHandler()\"\n            [preferredPosition]=\"'bottom-right'\"\n            [theme]=\"'light'\"\n            [showCaret]=\"false\"\n          >\n            <div class=\"legend-tooltip\">\n              <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n                <riv-legend-item\n                  *ngIf=\"i >= fi.dataIndex && item.showLegendItem !== false\"\n                  [label]=\"item.label\"\n                  [style]=\"item.pattern || 'solid'\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n                  [colorToken]=\"getItemColor(item, i)\"\n                  (itemClick)=\"toggleLegend(item, i)\"\n                ></riv-legend-item>\n              </ng-container>\n              <ng-container\n                *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n              >\n                <riv-legend-item\n                  *ngIf=\"i >= fi.suppIndex && item.showLegendItem !== false\"\n                  [label]=\"item.label\"\n                  [style]=\"item.pattern || 'solid'\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [colorToken]=\"getItemColor(item, i)\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n                  (itemClick)=\"toggleLegend(item, i)\"\n                ></riv-legend-item>\n              </ng-container>\n            </div>\n          </riv-callout>\n        </ng-container>\n      </ng-container>\n    </legend>\n  </ng-container>\n</div>\n\n<ng-template #nonDisplayState>\n  <ng-container *ngIf=\"checkForNonDisplayState(drawData$ | async); let type\">\n    <riv-zero-state\n      *ngIf=\"type === 'zeroState'\"\n      [message]=\"config.zeroStateMessage\"\n    ></riv-zero-state>\n    <riv-zero-state\n      *ngIf=\"type === 'sizingErrorState'\"\n      [message]=\"config.sizingErrorStateMessage\"\n    ></riv-zero-state>\n  </ng-container>\n</ng-template>\n",
-			styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-small)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--override-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-row:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline;width:100%}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);top:calc(var(--base-grid-size) * -1);position:relative}.legend-tooltip{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column;overflow-y:scroll;max-height:clamp(0px,60vh,600px)}.legend-tooltip>riv-legend-item{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;line-height:var(--type-1-line-height-0)}.sub-container.clickable{cursor:pointer}.sub-container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;overflow:auto}.sub-container:not(.donut-container){justify-items:start;align-items:start}.sub-container.donut-container{justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.donut-display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.donut-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.donut-value,.donut-label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}.donut-value.xsmall{font:var(--stat-xsmall)}.donut-value.small{font:var(--stat-small)}.donut-value.medium{font:var(--stat-medium)}.donut-value.large{font:var(--stat-large)}.data-label{fill:var(--type-light-high-contrast);font-size:var(--override-font-size)}.flow-data-label{text-decoration:underline;font-size:var(--override-font-size);cursor:pointer;fill:var(--type-light-link-hover)}.waterfall-line{stroke:var(--gray-60)}.flow-subtitle{font-weight:var(--font-weight-heavy)}\n"],
+			styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-xlarge)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--override-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-row:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline;width:100%}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);top:calc(var(--base-grid-size) * -1);position:relative}.legend-tooltip{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column;overflow-y:scroll;max-height:clamp(0px,60vh,600px)}.legend-tooltip>riv-legend-item{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;line-height:var(--type-1-line-height-0)}.sub-container.clickable{cursor:pointer}.sub-container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;overflow:auto}.sub-container:not(.donut-container){justify-items:start;align-items:start}.sub-container.donut-container{justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.donut-display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.donut-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.donut-value,.donut-label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}.donut-value.xsmall{font:var(--stat-xsmall)}.donut-value.small{font:var(--stat-small)}.donut-value.medium{font:var(--stat-medium)}.donut-value.large{font:var(--stat-large)}.data-label{fill:var(--type-light-high-contrast);font-size:var(--override-font-size)}.flow-data-label{text-decoration:underline;font-size:var(--override-font-size);cursor:pointer;fill:var(--type-light-link-hover)}.waterfall-line{stroke:var(--gray-60)}.flow-subtitle{font-weight:var(--font-weight-heavy)}\n"],
 			dependencies: [
 				{
 					kind: "directive",
@@ -20507,7 +20507,7 @@ i0.ɵɵngDeclareClassMetadata({
 			changeDetection: ChangeDetectionStrategy.OnPush,
 			standalone: false,
 			template: "<div\n  class=\"container\"\n  (rivClientSize)=\"width = $event.width\"\n  *ngIf=\"{ d: drawData$ | async } as vm\"\n  [style.--override-font-size]=\"getFontSize(vm.d)\"\n>\n  <ng-container\n    *ngIf=\"\n      !checkForNonDisplayState(vm.d) && (drawData$ | async);\n      let d;\n      else: nonDisplayState\n    \"\n  >\n    <div\n      (mousemove)=\"mousemove($event, d.hover)\"\n      (mouseleave)=\"mouseleave($event)\"\n      (click)=\"click()\"\n      #container\n      class=\"sub-container\"\n      [class.clickable]=\"isHoverClickable\"\n      tabIndex=\"0\"\n      [ngClass]=\"{ 'donut-container': config.type === 'donut' }\"\n      [ngStyle]=\"{\n        height: getSubcontainerHeight(d),\n        width: getSubcontainerWidth(d)\n      }\"\n    >\n      <svg:svg\n        xmlns=\"http://www.w3.org/2000/svg\"\n        [attr.viewBox]=\"d.viewBox\"\n        [attr.height]=\"d.chartHeight\"\n        [attr.width]=\"d.chartWidth\"\n      >\n        <defs>\n          <!-- Stripe pattern -->\n          <pattern\n            id=\"stripes\"\n            x=\"0\"\n            y=\"0\"\n            [attr.width]=\"10\"\n            [attr.height]=\"10\"\n            patternUnits=\"userSpaceOnUse\"\n          >\n            <line\n              [attr.x1]=\"0\"\n              [attr.y1]=\"10\"\n              [attr.x2]=\"10\"\n              [attr.y2]=\"0\"\n              stroke=\"var(--white-100)\"\n              stroke-width=\"1\"\n            ></line>\n          </pattern>\n        </defs>\n        <ng-container *ngIf=\"!(config.type === 'horizontal-bar')\">\n          <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"middle\">\n            <text\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"getBottomLabelY(d)\"\n            >\n              {{ tick.label }}\n            </text>\n          </g>\n        </ng-container>\n        <ng-container *ngIf=\"config.type === 'horizontal-bar'\">\n          <g *ngFor=\"let tick of d.xTicks\" text-anchor=\"left\">\n            <text\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"d.chartSizingValues.fontSize\"\n            >\n              {{ tick.label }}\n            </text>\n            <line\n              class=\"tick-line\"\n              [attr.x1]=\"tick.x\"\n              [attr.x2]=\"tick.x\"\n              y1=\"0\"\n              [attr.y2]=\"d.chartHeight\"\n            ></line>\n            <text\n              *ngIf=\"tick.secondaryLabel\"\n              class=\"tick-label\"\n              [attr.x]=\"tick.x\"\n              [attr.y]=\"getBottomLabelY(d)\"\n            >\n              {{ tick.secondaryLabel }}\n            </text>\n          </g>\n        </ng-container>\n        <g *ngFor=\"let tick of d.yTicks\">\n          <line\n            *ngIf=\"!(config.type === 'horizontal-bar')\"\n            class=\"tick-line\"\n            [attr.y1]=\"tick.y\"\n            [attr.y2]=\"tick.y\"\n            x1=\"0\"\n            [attr.x2]=\"d.chartWidth\"\n          ></line>\n          <text\n            rivSVGTextTruncate\n            [text]=\"tick.label\"\n            [width]=\"\n              config.type === 'horizontal-bar'\n                ? d.chartSizingValues.leftBucketLabel\n                : d.chartSizingValues.leftPadding\n            \"\n            class=\"tick-label\"\n            [attr.y]=\"tick.y\"\n            [attr.x]=\"0\"\n          >\n            {{ tick.label }}\n          </text>\n          <text\n            *ngIf=\"tick.secondaryLabel\"\n            rivSVGTextTruncate\n            [text]=\"tick.secondaryLabel\"\n            [width]=\"d.chartSizingValues.rightPadding\"\n            class=\"tick-label\"\n            [attr.y]=\"tick.y\"\n            [attr.x]=\"d.chartWidth\"\n            text-anchor=\"end\"\n          >\n            {{ tick.secondaryLabel }}\n          </text>\n        </g>\n        <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n          <g\n            *ngIf=\"config.type !== 'horizontal-bar' && config.type !== 'donut'\"\n          >\n            <line\n              class=\"tick-line\"\n              [attr.x1]=\"hoverData?.x\"\n              [attr.x2]=\"hoverData?.x\"\n              y1=\"0\"\n              [attr.y2]=\"d.chartHeight\"\n              stroke-width=\"2\"\n              stroke-dasharray=\"4\"\n            />\n          </g>\n        </ng-container>\n        <g *ngFor=\"let bar of d.bars; let i = index\">\n          <ng-container *ngFor=\"let rect of bar; let j = index\">\n            <defs *ngIf=\"rect.pattern === 'dots'\">\n              <pattern\n                [attr.id]=\"'dots-' + i + '-' + j\"\n                patternUnits=\"userSpaceOnUse\"\n                [attr.x]=\"rect.x\"\n                [attr.y]=\"rect.y\"\n                width=\"4\"\n                height=\"4\"\n              >\n                <circle\n                  cx=\"2\"\n                  cy=\"2\"\n                  r=\"1.5\"\n                  [attr.fill]=\"varColor(d.colors, i)\"\n                ></circle>\n              </pattern>\n            </defs>\n\n            <rect\n              *ngIf=\"rect.nonDisplay !== true\"\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              [attr.fill]=\"\n                rect.pattern === 'dots'\n                  ? 'url(#dots-' + i + '-' + j + ')'\n                  : getBarColor(rect, d.colors, i, hover)\n              \"\n              [attr.stroke]=\"\n                showBarBorders(rect, hover) ? varWrap('--black-100') : undefined\n              \"\n              [attr.stroke-width]=\"showBarBorders(rect, hover) ? 1 : undefined\"\n            ></rect>\n            <rect\n              *ngIf=\"showNonDisplayRect(rect, hover)\"\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              fill=\"transparent\"\n              [attr.stroke]=\"varWrap('--black-100')\"\n              [attr.stroke-width]=\"1\"\n            ></rect>\n            <rect\n              *ngIf=\"rect.pattern === 'striped'\"\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              fill=\"url(#stripes)\"\n            ></rect>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let bar of d.horizontalBars; let i = index\">\n          <ng-container *ngFor=\"let indBar of bar; let j = index\">\n            <defs *ngIf=\"indBar.pattern === 'dots'\">\n              <pattern\n                [attr.id]=\"'dots-' + i + '-' + j\"\n                patternUnits=\"userSpaceOnUse\"\n                [attr.x]=\"indBar.x\"\n                [attr.y]=\"indBar.y\"\n                width=\"4\"\n                height=\"4\"\n              >\n                <circle\n                  cx=\"2\"\n                  cy=\"2\"\n                  r=\"1.5\"\n                  [attr.fill]=\"varColor(d.colors, i)\"\n                ></circle>\n              </pattern>\n            </defs>\n            <path\n              [attr.d]=\"indBar.horizontalBar\"\n              [attr.fill]=\"\n                indBar.pattern === 'dots'\n                  ? 'url(#dots-' + i + '-' + j + ')'\n                  : varColor(d.colors, i)\n              \"\n              [attr.stroke]=\"\n                indBar.pattern === 'dots' ? 'none' : varColor(d.colors, i)\n              \"\n              [attr.stroke-width]=\"indBar.pattern === 'dots' ? 0 : 2\"\n            />\n            <path\n              *ngIf=\"indBar.pattern === 'striped'\"\n              [attr.d]=\"indBar.horizontalBar\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n              fill=\"url(#stripes)\"\n              stroke-width=\"0\"\n            />\n          </ng-container>\n        </g>\n        <g *ngFor=\"let gradient of d.gradients; let i = index\">\n          <ng-container *ngFor=\"let rect of gradient; let j = index\">\n            <defs>\n              <linearGradient\n                [attr.id]=\"'grad-' + i + '-' + j\"\n                x1=\"0\"\n                y1=\"0\"\n                x2=\"0\"\n                y2=\"1\"\n              >\n                <stop offset=\"0%\" [attr.stop-color]=\"varColor(d.colors, i)\" />\n                <stop offset=\"100%\" stop-color=\"white\" />\n              </linearGradient>\n            </defs>\n            <rect\n              [attr.x]=\"rect.x\"\n              [attr.y]=\"rect.y\"\n              [attr.width]=\"rect.width\"\n              [attr.height]=\"rect.height\"\n              [attr.fill]=\"'url(#grad-' + i + '-' + j + ')'\"\n              opacity=\"0.4\"\n            ></rect>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let line of d.lines; let i = index\">\n          <path\n            [attr.d]=\"line.line\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n            fill=\"none\"\n            stroke-width=\"2\"\n            [attr.stroke-linecap]=\"\n              line.pattern === 'dots' ? 'round' : undefined\n            \"\n            [attr.stroke-linejoin]=\"\n              line.pattern === 'dots' ? 'round' : undefined\n            \"\n            [attr.stroke-dasharray]=\"\n              line.pattern === 'striped'\n                ? '10 10'\n                : line.pattern === 'dots'\n                ? '0.25 7'\n                : undefined\n            \"\n          ></path>\n        </g>\n        <g *ngFor=\"let lineSinglePointFallback of d.circles; let i = index\">\n          <circle\n            class=\"marker\"\n            [attr.cx]=\"lineSinglePointFallback.cx\"\n            [attr.cy]=\"lineSinglePointFallback.cy\"\n            r=\"3.5\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></circle>\n        </g>\n        <g *ngFor=\"let line of d.lines; let i = index\">\n          <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n            <circle\n              class=\"marker\"\n              *ngIf=\"config.groupedTooltip || i === hoverData?.visibleYIndex\"\n              [attr.cx]=\"hoverData?.x\"\n              [attr.cy]=\"hoverData?.ys?.[i]\"\n              r=\"3.5\"\n              stroke-width=\"2\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n            ></circle>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <path [attr.d]=\"area.area\" [attr.fill]=\"varColor(d.colors, i)\"></path>\n          <path\n            *ngIf=\"area.pattern === 'striped'\"\n            [attr.d]=\"area.area\"\n            fill=\"url(#stripes)\"\n          ></path>\n        </g>\n        <g *ngFor=\"let area of d.areas; let i = index\">\n          <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n            <circle\n              class=\"marker\"\n              *ngIf=\"config.groupedTooltip || i === hoverData?.visibleYIndex\"\n              [attr.cx]=\"hoverData?.x\"\n              [attr.cy]=\"hoverData?.ys?.[i]\"\n              r=\"3.5\"\n              stroke-width=\"2\"\n              [attr.stroke]=\"varColor(d.colors, i)\"\n            ></circle>\n          </ng-container>\n        </g>\n        <g *ngFor=\"let wLine of d.waterfallLines\">\n          <line\n            class=\"waterfall-line\"\n            [attr.x1]=\"wLine.x1\"\n            [attr.x2]=\"wLine.x2\"\n            [attr.y1]=\"wLine.y1\"\n            [attr.y2]=\"wLine.y2\"\n            stroke-width=\"1\"\n            stroke-dasharray=\"6\"\n          />\n        </g>\n        <path\n          *ngFor=\"let path of d.arcs; let i = index\"\n          [attr.d]=\"path\"\n          [attr.fill]=\"varColor(d.colors, i)\"\n        ></path>\n        <g *ngFor=\"let dataLabel of d.dataLabels; let i = index\">\n          <text\n            *ngIf=\"config.showDataLabels && dataLabel.label\"\n            [ngClass]=\"getDataLabelClass(dataLabel, config, hover)\"\n            [attr.y]=\"dataLabel.yPos\"\n            [attr.x]=\"dataLabel.xPos\"\n            [attr.text-anchor]=\"dataLabel.anchor\"\n            [attr.font-weight]=\"\n              dataLabel.bold\n                ? 'var(--font-weight-heavy)'\n                : 'var(--font-weight-normal)'\n            \"\n            [attr.opacity]=\"getDataLabelOpacity(dataLabel, config, hover)\"\n          >\n            {{ dataLabel.label }}\n          </text>\n          <line\n            *ngIf=\"dataLabel.line && config.showDataLabels\"\n            [attr.y1]=\"dataLabel.line.y1\"\n            [attr.y2]=\"dataLabel.line.y2\"\n            [attr.x1]=\"dataLabel.line.x1\"\n            [attr.x2]=\"dataLabel.line.x2\"\n            stroke-width=\"2\"\n            [attr.stroke]=\"varColor(d.colors, i)\"\n          ></line>\n        </g>\n        <g *ngFor=\"let connection of d.flowConnections\">\n          <path\n            [attr.d]=\"connection.path\"\n            [attr.fill]=\"getConnectionColor()\"\n            [attr.opacity]=\"getConnectionOpacity(connection, hover)\"\n          />\n        </g>\n      </svg:svg>\n      <div *ngIf=\"config.type === 'donut'\" class=\"donut-display\">\n        <div class=\"donut-value\" [ngClass]=\"config.donutDisplayInfo.size\">\n          {{ config.donutDisplayInfo.displayValue }}\n        </div>\n        <div class=\"donut-label\">\n          {{ config.donutDisplayInfo.displayLabel }}\n        </div>\n      </div>\n      <ng-container *ngIf=\"standardHoverDataGuard(hover) as hoverData\">\n        <riv-callout\n          *riv-overlay\n          [anchor]=\"\n            hoverData?.tooltip?.anchor ? hoverData.tooltip.anchor : null\n          \"\n          [isModal]=\"false\"\n          [preferredPosition]=\"\n            hoverData?.tooltip?.preferredPosition ?? 'center-right'\n          \"\n          [theme]=\"'light'\"\n        >\n          <ng-container *ngIf=\"tooltipTemplate; else defaultTooltip\">\n            <ng-container\n              [ngTemplateOutlet]=\"tooltipTemplate\"\n              [ngTemplateOutletContext]=\"{\n                xIndex: hoverData.xIndex,\n                yIndex: hoverData.yIndex,\n                isSuppValue: hoverData.isSuppValue,\n                suppYIndex: hoverData.suppYIndex,\n                isDropOff: hoverData.isDropOff\n              }\"\n            ></ng-container>\n          </ng-container>\n          <ng-template #defaultTooltip>\n            <div class=\"callout-content\">\n              <div *ngIf=\"hoverData?.tooltip?.date\" class=\"callout-row\">\n                {{ hoverData?.tooltip?.date }}\n              </div>\n              <div\n                class=\"callout-row\"\n                *ngFor=\"let metric of hoverData?.tooltip?.metrics\"\n              >\n                <span class=\"series-label\">\n                  <riv-legend-item\n                    [colorToken]=\"metric.color\"\n                    [style]=\"metric.pattern || 'solid'\"\n                  ></riv-legend-item>\n                  <span>{{ metric.label }}</span>\n                </span>\n                <span>{{ metric.value }}</span>\n              </div>\n            </div>\n          </ng-template>\n        </riv-callout>\n      </ng-container>\n      <ng-container *ngIf=\"flowHoverDataGuard(hover) as hoverData\">\n        <riv-callout\n          *riv-overlay\n          [anchor]=\"\n            hoverData?.tooltip?.anchor ? hoverData.tooltip.anchor : null\n          \"\n          [isModal]=\"false\"\n          [preferredPosition]=\"'top-center'\"\n          [theme]=\"'light'\"\n        >\n          <div class=\"callout-content\">\n            <div class=\"callout-row\">\n              <ng-container *ngIf=\"hoverData?.hoverTarget === 'connection'\">\n                <ng-container\n                  *ngIf=\"\n                    getBucketConfigInfo(hoverData, 'startId') as startConfig\n                  \"\n                >\n                  <riv-issue\n                    [label]=\"startConfig.title\"\n                    [colorToken]=\"startConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n                ->\n                <ng-container\n                  *ngIf=\"getBucketConfigInfo(hoverData, 'endId') as endConfig\"\n                >\n                  <riv-issue\n                    [label]=\"endConfig.title\"\n                    [colorToken]=\"endConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n              </ng-container>\n              <ng-container *ngIf=\"hoverData?.hoverTarget !== 'connection'\">\n                <ng-container\n                  *ngIf=\"getBucketConfigInfo(hoverData, 'barId') as barConfig\"\n                >\n                  <riv-issue\n                    [label]=\"barConfig.title\"\n                    [colorToken]=\"barConfig.color\"\n                  ></riv-issue>\n                </ng-container>\n              </ng-container>\n            </div>\n            <div\n              *ngIf=\"hoverData?.tooltip?.subtitle\"\n              class=\"callout-row flow-subtitle\"\n            >\n              {{ hoverData?.tooltip?.subtitle }}\n            </div>\n          </div>\n        </riv-callout>\n      </ng-container>\n    </div>\n    <legend *ngIf=\"d.data.type !== 'flow'\">\n      <ng-container *ngIf=\"firstHiddenLegendItemIndex$ | async; let fi\">\n        <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n          <riv-legend-item\n            *ngIf=\"i < fi.dataIndex && item.showLegendItem !== false\"\n            [label]=\"item.label\"\n            [style]=\"item.pattern || 'solid'\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n            [colorToken]=\"getItemColor(item, i)\"\n            (itemClick)=\"toggleLegend(item, i)\"\n          ></riv-legend-item>\n        </ng-container>\n        <ng-container\n          *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n        >\n          <riv-legend-item\n            *ngIf=\"i < fi.suppIndex && item.showLegendItem !== false\"\n            [label]=\"item.label\"\n            [style]=\"item.pattern || 'solid'\"\n            [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n            [clickable]=\"config.allowLegendToggle\"\n            [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n            [colorToken]=\"getItemColor(item, i)\"\n            (itemClick)=\"toggleLegend(item, i)\"\n          ></riv-legend-item>\n        </ng-container>\n        <div\n          #moreTextContainer\n          class=\"more-text-container\"\n          (mouseover)=\"mouseoverLegend()\"\n          (mouseleave)=\"mouseleaveLegend()\"\n          (click)=\"moreClick()\"\n          *ngIf=\"fi.hiddenCount\"\n        >\n          <span rivLink class=\"more-text\">\n            +\n            {{ fi.hiddenCount }} more\n          </span>\n        </div>\n        <ng-container *ngIf=\"showMoreTooltip || lockShowMoreTooltip\">\n          <riv-callout\n            *riv-overlay\n            [anchor]=\"\n              $safeNavigationMigration(moreTextContainer?.nativeElement)\n            \"\n            [isModal]=\"lockShowMoreTooltip\"\n            (close)=\"closeHandler()\"\n            [preferredPosition]=\"'bottom-right'\"\n            [theme]=\"'light'\"\n            [showCaret]=\"false\"\n          >\n            <div class=\"legend-tooltip\">\n              <ng-container *ngFor=\"let item of d.data.ys; let i = index\">\n                <riv-legend-item\n                  *ngIf=\"i >= fi.dataIndex && item.showLegendItem !== false\"\n                  [label]=\"item.label\"\n                  [style]=\"item.pattern || 'solid'\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n                  [colorToken]=\"getItemColor(item, i)\"\n                  (itemClick)=\"toggleLegend(item, i)\"\n                ></riv-legend-item>\n              </ng-container>\n              <ng-container\n                *ngFor=\"let item of d.data.supplementaryYs; let i = index\"\n              >\n                <riv-legend-item\n                  *ngIf=\"i >= fi.suppIndex && item.showLegendItem !== false\"\n                  [label]=\"item.label\"\n                  [style]=\"item.pattern || 'solid'\"\n                  [visibility]=\"item.hidden ? 'hidden' : 'visible'\"\n                  [colorToken]=\"getItemColor(item, i)\"\n                  [clickable]=\"config.allowLegendToggle\"\n                  [showCheckWhenClickable]=\"item.pattern !== 'dots'\"\n                  (itemClick)=\"toggleLegend(item, i)\"\n                ></riv-legend-item>\n              </ng-container>\n            </div>\n          </riv-callout>\n        </ng-container>\n      </ng-container>\n    </legend>\n  </ng-container>\n</div>\n\n<ng-template #nonDisplayState>\n  <ng-container *ngIf=\"checkForNonDisplayState(drawData$ | async); let type\">\n    <riv-zero-state\n      *ngIf=\"type === 'zeroState'\"\n      [message]=\"config.zeroStateMessage\"\n    ></riv-zero-state>\n    <riv-zero-state\n      *ngIf=\"type === 'sizingErrorState'\"\n      [message]=\"config.sizingErrorStateMessage\"\n    ></riv-zero-state>\n  </ng-container>\n</ng-template>\n",
-			styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-small)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--override-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-row:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline;width:100%}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);top:calc(var(--base-grid-size) * -1);position:relative}.legend-tooltip{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column;overflow-y:scroll;max-height:clamp(0px,60vh,600px)}.legend-tooltip>riv-legend-item{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;line-height:var(--type-1-line-height-0)}.sub-container.clickable{cursor:pointer}.sub-container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;overflow:auto}.sub-container:not(.donut-container){justify-items:start;align-items:start}.sub-container.donut-container{justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.donut-display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.donut-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.donut-value,.donut-label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}.donut-value.xsmall{font:var(--stat-xsmall)}.donut-value.small{font:var(--stat-small)}.donut-value.medium{font:var(--stat-medium)}.donut-value.large{font:var(--stat-large)}.data-label{fill:var(--type-light-high-contrast);font-size:var(--override-font-size)}.flow-data-label{text-decoration:underline;font-size:var(--override-font-size);cursor:pointer;fill:var(--type-light-link-hover)}.waterfall-line{stroke:var(--gray-60)}.flow-subtitle{font-weight:var(--font-weight-heavy)}\n"]
+			styles: [".container{-webkit-user-select:none;user-select:none;position:relative;display:flex;flex-direction:column;gap:var(--size-xlarge)}.tick-line{stroke:var(--gray-20)}.tick-label{font-size:var(--override-font-size);line-height:var(--type-1-line-height-0);fill:var(--type-light-low-contrast)}.marker{fill:var(--surface-light-0)}.callout-content{pointer-events:none;padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column}.callout-row{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0)}.callout-row:not(:last-child){border-bottom:var(--border-width) solid var(--border-light)}.series-label{flex-grow:1;font-weight:var(--font-weight-heavy);display:flex;align-items:center;gap:var(--size-small)}legend{display:flex;flex-wrap:wrap;gap:var(--size-large);justify-content:flex-start;align-items:baseline;width:100%}.more-text-container{width:calc(var(--base-grid-size) * 15);height:var(--size-large)}.more-text{font-size:var(--type-1-font-size);top:calc(var(--base-grid-size) * -1);position:relative}.legend-tooltip{padding:var(--size-medium) var(--size-xlarge);display:flex;flex-direction:column;overflow-y:scroll;max-height:clamp(0px,60vh,600px)}.legend-tooltip>riv-legend-item{white-space:nowrap;display:flex;padding:var(--size-medium) 0;gap:var(--size-medium);align-items:center;line-height:var(--type-1-line-height-0)}.sub-container.clickable{cursor:pointer}.sub-container{display:grid;grid-template-rows:1fr;grid-template-columns:1fr;overflow:auto}.sub-container:not(.donut-container){justify-items:start;align-items:start}.sub-container.donut-container{justify-items:center;align-items:center}svg{grid-row:1 / 1;grid-column:1 / 1}.donut-display{grid-row:1 / 1;grid-column:1 / 1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--size-small)}.donut-label{font-size:var(--type-1-font-size);line-height:var(--type-1-line-height-0);color:var(--type-light-low-contrast)}.donut-value,.donut-label{text-shadow:0 0 var(--size-small) var(--surface-light-0),0 0 var(--size-xsmall) var(--surface-light-0)}.donut-value.xsmall{font:var(--stat-xsmall)}.donut-value.small{font:var(--stat-small)}.donut-value.medium{font:var(--stat-medium)}.donut-value.large{font:var(--stat-large)}.data-label{fill:var(--type-light-high-contrast);font-size:var(--override-font-size)}.flow-data-label{text-decoration:underline;font-size:var(--override-font-size);cursor:pointer;fill:var(--type-light-link-hover)}.waterfall-line{stroke:var(--gray-60)}.flow-subtitle{font-weight:var(--font-weight-heavy)}\n"]
 		}]
 	}],
 	ctorParameters: () => [{ type: i0.ChangeDetectorRef }],