@ironsource/shared-ui 2.1.11-test.5 → 2.1.11-test.51

package/components/button/v4/ToggleButtonGroupAB.vue2.js

@@ -1,12 +1,12 @@
- import "../../../ToggleButtonGroupAB.vue_vue_type_style_index_0_scoped_9d9e51c0_lang.css"; import { defineComponent as I, ref as i, onMounted as b, openBlock as g, createElementBlock as k, createVNode as n, mergeProps as a, unref as e, withCtx as r, createTextVNode as f, createBlock as A, createElementVNode as C, renderSlot as N, createCommentVNode as w } from "vue";
-import c from "./ButtonV4.vue.js";
-import { useVModel as y } from "@vueuse/core";
-import O from "../../icon/v4/IconV4.vue.js";
+ import "../../../ToggleButtonGroupAB.vue_vue_type_style_index_0_scoped_c81a7d3e_lang.css"; import { defineComponent as A, ref as s, onMounted as C, computed as y, openBlock as f, createElementBlock as N, createVNode as a, mergeProps as p, unref as e, withCtx as r, createTextVNode as B, createBlock as w, createElementVNode as O, renderSlot as R, createCommentVNode as x } from "vue";
+import i from "./ButtonV4.vue.js";
+import { useVModel as E } from "@vueuse/core";
+import G from "../../icon/v4/IconV4.vue.js";
 import "../../icon/v4/IconFlag.vue.js";
-import x from "../../popover/v4/PopoverV4.vue.js";
-import { useTestIdAttrs as E } from "../../../utils/testIds.js";
-import { ToggleButtonGroupABTestIdModifiers as p } from "../../../testids/index.js";
-const G = { class: "group-button-wrapper" }, M = { class: "popover-trigger" }, D = /* @__PURE__ */ I({
+import M from "../../popover/v4/PopoverV4.vue.js";
+import { useTestIdAttrs as $ } from "../../../utils/testIds.js";
+import { ToggleButtonGroupABTestIdModifiers as u } from "../../../testids/index.js";
+const h = { class: "group-button-wrapper" }, U = { class: "popover-trigger" }, K = /* @__PURE__ */ A({
   __name: "ToggleButtonGroupAB",
   props: {
     modelValue: null,
@@ -15,81 +15,86 @@ const G = { class: "group-button-wrapper" }, M = { class: "popover-trigger" }, D
     popoverProps: null
   },
   emits: ["update:modelValue"],
-  setup(d, { emit: B }) {
-    const t = d, m = i(!1), T = (o) => {
-      m.value = o;
-    }, u = E(
+  setup(d, { expose: T, emit: P }) {
+    const t = d, m = s(null), v = s(!1), _ = (o) => {
+      v.value = o;
+    }, c = $(
       t.testId,
-      p,
+      u,
       !0
-    ), P = i(
+    ), V = s(
       t.popoverProps ? { ...t.popoverProps } : {}
-    ), l = i(), V = y(t, "modelValue", B);
-    b(() => {
+    ), l = s(), k = E(t, "modelValue", P);
+    C(() => {
       l.value = t.modelValue;
     });
-    const v = (o) => {
-      l.value = o, V.value = o;
-    };
-    return (o, s) => (g(), k("div", G, [
-      n(c, a({
+    const g = (o) => {
+      l.value = o, k.value = o;
+    }, I = y(() => m.value?.toggle);
+    return T({
+      toggle: I
+    }), (o, n) => (f(), N("div", h, [
+      a(i, p({
         class: ["toggle-button", { "selected-a": l.value === "a" }],
         color: "primary",
         variant: "outlined"
-      }, e(u)[e(p).BUTTON_A], {
-        onClick: s[0] || (s[0] = (_) => v("a"))
+      }, e(c)[e(u).BUTTON_A], {
+        onClick: n[0] || (n[0] = (b) => g("a"))
       }), {
         default: r(() => [
-          f(" A ")
+          B(" A ")
         ]),
         _: 1
       }, 16, ["class"]),
-      n(c, a({
+      a(i, p({
         class: ["toggle-button", { "selected-b": l.value === "b" }],
         color: "primary",
         variant: "outlined"
-      }, e(u)[e(p).BUTTON_B], {
-        onClick: s[1] || (s[1] = (_) => v("b"))
+      }, e(c)[e(u).BUTTON_B], {
+        onClick: n[1] || (n[1] = (b) => g("b"))
       }), {
         default: r(() => [
-          f(" B ")
+          B(" B ")
         ]),
         _: 1
       }, 16, ["class"]),
-      d.withPopover ? (g(), A(c, a({
+      d.withPopover ? (f(), w(i, p({
         key: 0,
         class: [
           "toggle-button",
           {
-            "trigger-active": m.value
+            "trigger-active": v.value
           }
         ],
         color: "primary",
         variant: "outlined"
-      }, e(u)[e(p).POPOVER_TRIGGER]), {
+      }, e(c)[e(u).POPOVER_TRIGGER]), {
         default: r(() => [
-          n(e(x), a({
-            ...P.value
-          }, { onIsOpen: T }), {
+          a(e(M), p({
+            ref_key: "popoverRef",
+            ref: m
+          }, {
+            ...V.value
+          }, { onIsOpen: _ }), {
             trigger: r(() => [
-              C("div", M, [
-                n(e(O), {
+              O("div", U, [
+                a(e(G), {
                   name: "caret-down",
                   size: "16px"
                 })
               ])
             ]),
             content: r(() => [
-              N(o.$slots, "popover-content", {}, void 0, !0)
+              R(o.$slots, "popover-content", {}, void 0, !0)
             ]),
             _: 3
           }, 16)
         ]),
         _: 3
-      }, 16, ["class"])) : w("", !0)
+      }, 16, ["class"])) : x("", !0)
     ]));
   }
 });
 export {
-  D as default
+  K as default
 };

package/components/button/v4/index.d.ts

@@ -374,7 +374,9 @@ declare const ButtonTypes: () => (({
             };
         }>> & {
             "onUpdate:modelValue"?: (...args: any[]) => any;
-        }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        }, {
+            toggle: import("vue").ComputedRef<(value?: boolean) => boolean>;
+        }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
             "update:modelValue": (...args: any[]) => void;
         }, string, {
             testId: string;
@@ -426,7 +428,9 @@ declare const ButtonTypes: () => (({
         };
     }>> & {
         "onUpdate:modelValue"?: (...args: any[]) => any;
-    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
+    } & import("vue").ShallowUnwrapRef<{
+        toggle: import("vue").ComputedRef<(value?: boolean) => boolean>;
+    }> & {} & import("vue").ComponentCustomProperties & {};
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
@@ -458,7 +462,9 @@ declare const ButtonTypes: () => (({
     };
 }>> & {
     "onUpdate:modelValue"?: (...args: any[]) => any;
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {
+    toggle: import("vue").ComputedRef<(value?: boolean) => boolean>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (...args: any[]) => void;
 }, string, {
     testId: string;

package/components/chart/Chart.vue.d.ts

@@ -9,7 +9,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tickCount?: number;
     header?: string;
     subheader?: string;
-    subheaderTooltip?: string;
+    withSubheaderTooltip?: boolean;
     hideLegend?: boolean;
     minVisible?: number;
     maxVisible?: number;
@@ -18,6 +18,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     noDataTitle?: string;
     noDataSubtitle?: string;
     withSettingsHeader?: boolean;
+    maxLimitTooltipText?: string;
+    withAnimation?: boolean;
 }>, {
     chartType: ChartType;
     dataSets: () => any[];
@@ -37,6 +39,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     noDataTitle: string;
     noDataSubtitle: string;
     withSettingsHeader: boolean;
+    withSubheaderTooltip: boolean;
+    maxLimitTooltipText: string;
+    withAnimation: boolean;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:chartType": (chartType: ChartType) => void;
     "update:visibleIds": (visibleIds: unknown[]) => void;
@@ -50,7 +55,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tickCount?: number;
     header?: string;
     subheader?: string;
-    subheaderTooltip?: string;
+    withSubheaderTooltip?: boolean;
     hideLegend?: boolean;
     minVisible?: number;
     maxVisible?: number;
@@ -59,6 +64,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     noDataTitle?: string;
     noDataSubtitle?: string;
     withSettingsHeader?: boolean;
+    maxLimitTooltipText?: string;
+    withAnimation?: boolean;
 }>, {
     chartType: ChartType;
     dataSets: () => any[];
@@ -78,31 +85,37 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     noDataTitle: string;
     noDataSubtitle: string;
     withSettingsHeader: boolean;
+    withSubheaderTooltip: boolean;
+    maxLimitTooltipText: string;
+    withAnimation: boolean;
 }>>> & {
     "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
     "onUpdate:chartType"?: (chartType: ChartType) => any;
 }, {
     header: string;
     loading: boolean;
+    parsing: ChartParsingConfig;
     xAxisFormat: ValueFormat;
     yAxisFormat: ValueFormat;
-    parsing: ChartParsingConfig;
     visibleIds: unknown[];
     minVisible: number;
     maxVisible: number;
+    maxLimitTooltipText: string;
     chartType: ChartType;
     withSettingsHeader: boolean;
     subheader: string;
-    subheaderTooltip: string;
+    withSubheaderTooltip: boolean;
     dataSets: ChartDataSet[];
     hideLegend: boolean;
     tickCount: number;
     noDataIcon: string;
     noDataTitle: string;
     noDataSubtitle: string;
+    withAnimation: boolean;
 }>, {
     metric?(_: {}): any;
     breakdowns?(_: {}): any;
+    "subheader-tooltip"?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/components/chart/Chart.vue.js

@@ -1,7 +1,7 @@
-import e from "./Chart.vue2.js";
-/* empty css            */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../Chart.vue_vue_type_style_index_0_scoped_ea1e5c3e_lang.css"; //*');
-const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-ea1e5c3e"]]);
+import o from "./Chart.vue2.js";
+/* empty css            */import e from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../Chart.vue_vue_type_style_index_0_scoped_277fde76_lang.css"; //*');
+const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-277fde76"]]);
 export {
-  a as default
+  p as default
 };

package/components/chart/Chart.vue2.js

@@ -1,23 +1,23 @@
- import "../../Chart.vue_vue_type_style_index_0_scoped_ea1e5c3e_lang.css"; import { defineComponent as X, ref as g, computed as i, onMounted as j, watch as C, nextTick as q, openBlock as d, createElementBlock as k, Fragment as R, createBlock as m, unref as u, isRef as V, withCtx as O, renderSlot as D, createCommentVNode as v, createElementVNode as f, createVNode as F, normalizeStyle as J } from "vue";
-import { useVModel as Q } from "@vueuse/core";
-import { Chart as N, ArcElement as Y, LineElement as ee, BarElement as te, PointElement as ae, LineController as oe, BarController as re, PieController as ie, ScatterController as le, CategoryScale as ne, LinearScale as se, Filler as de, Tooltip as ue } from "chart.js";
-import { HoverVerticalLine as ce } from "./plugins/HoverVerticalLine.js";
-import { formatValue as H, calcStepSize as fe } from "./utils/utils.js";
-import { DEFAULT_TICK_COUNT as pe, DEFAULT_MIN_VISIBLE as he, DEFAULT_MAX_VISIBLE as me, COLOR_PALETTE as ve, POINT_BORDER_COLOR as be, TICK_LABEL_COLOR as P, TICK_LABEL_FONT as U, GRID_LINE_COLOR as M } from "./consts.js";
+ import "../../Chart.vue_vue_type_style_index_0_scoped_277fde76_lang.css"; import { defineComponent as q, computed as l, ref as g, onMounted as J, watch as T, nextTick as Q, openBlock as d, createElementBlock as C, Fragment as O, createBlock as f, unref as u, isRef as D, withCtx as k, renderSlot as x, createCommentVNode as v, createElementVNode as p, normalizeClass as Y, createVNode as F, normalizeStyle as _ } from "vue";
+import { useVModel as ee } from "@vueuse/core";
+import { Chart as N, ArcElement as te, LineElement as ae, BarElement as oe, PointElement as ie, LineController as le, BarController as re, PieController as ne, ScatterController as se, CategoryScale as de, LinearScale as ue, Filler as ce, Tooltip as pe } from "chart.js";
+import { HoverVerticalLine as me } from "./plugins/HoverVerticalLine.js";
+import { formatValue as H, calcStepSize as he } from "./utils/utils.js";
+import { DEFAULT_TICK_COUNT as fe, DEFAULT_MIN_VISIBLE as ve, DEFAULT_MAX_VISIBLE as ye, COLOR_PALETTE as be, POINT_BORDER_COLOR as ge, TICK_LABEL_COLOR as U, TICK_LABEL_FONT as P, GRID_LINE_COLOR as z } from "./consts.js";
 import { ChartType as n } from "./types.js";
-import { useTooltipPosition as ye } from "./composables/useTooltipPosition.js";
-import ge from "./ChartTooltip.vue.js";
-import Ce from "./ChartLegend.vue.js";
-import ke from "./ChartHeader.vue.js";
-import { hexColorToRgba as Te } from "../../utils/color.js";
+import { useTooltipPosition as Te } from "./composables/useTooltipPosition.js";
+import Ce from "./ChartTooltip.vue.js";
+import ke from "./ChartLegend.vue.js";
+import xe from "./ChartHeader.vue.js";
+import { hexColorToRgba as Le } from "../../utils/color.js";
 import { useChartValues as Se } from "./composables/useChartValues.js";
-import Le from "./ChartLoader.vue.js";
-import xe from "../emptyState/v4/EmptyStateV4.vue.js";
-import Be from "./SettingsHeader.vue.js";
-const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = { class: "header-wrapper" }, Ee = { class: "chart" }, Re = {
+import we from "./ChartLoader.vue.js";
+import Be from "../emptyState/v4/EmptyStateV4.vue.js";
+import Ie from "./SettingsHeader.vue.js";
+const Ae = { class: "chart-container" }, Ee = { class: "header-wrapper" }, Ve = { class: "chart" }, Re = {
   key: 0,
   class: "chart-sidebar"
-}, Xe = /* @__PURE__ */ X({
+}, qe = /* @__PURE__ */ q({
   __name: "Chart",
   props: {
     dataSets: { default: () => [] },
@@ -26,75 +26,81 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
     parsing: { default: void 0 },
     xAxisFormat: { default: "string" },
     yAxisFormat: { default: "number" },
-    tickCount: { default: pe },
+    tickCount: { default: fe },
     header: { default: "" },
     subheader: { default: "" },
-    subheaderTooltip: { default: "" },
+    withSubheaderTooltip: { type: Boolean, default: !1 },
     hideLegend: { type: Boolean, default: !1 },
-    minVisible: { default: he },
-    maxVisible: { default: me },
+    minVisible: { default: ve },
+    maxVisible: { default: ye },
     loading: { type: Boolean, default: !1 },
     noDataIcon: { default: "file-x" },
     noDataTitle: { default: "No data to display" },
     noDataSubtitle: { default: "Search again with different filters" },
-    withSettingsHeader: { type: Boolean, default: !0 }
+    withSettingsHeader: { type: Boolean, default: !0 },
+    maxLimitTooltipText: { default: "" },
+    withAnimation: { type: Boolean, default: !0 }
   },
   emits: ["update:chartType", "update:visibleIds"],
-  setup(a, { emit: T }) {
+  setup(a, { emit: L }) {
     const t = a;
     N.register(
-      Y,
-      ee,
       te,
       ae,
       oe,
-      re,
       ie,
       le,
+      re,
       ne,
       se,
       de,
       ue,
-      ce
+      ce,
+      pe,
+      me
     );
-    const c = Q(t, "chartType", T), p = g(null);
+    const c = ee(t, "chartType", L), M = l(
+      () => t.withAnimation ? "" : "none"
+    ), m = g(null);
     let s = null;
-    const S = i(() => t.dataSets.length === 0), L = i(() => !t.loading && !S.value), b = () => {
-      p.value && (s && s.destroy(), s = new N(p.value, B.value));
-    }, z = () => {
-      s && (s.data.datasets = y.value, s.options = B.value.options, s.update());
+    const S = l(() => t.dataSets.length === 0), w = l(() => !t.loading && !S.value), y = () => {
+      m.value && (s && s.destroy(), s = new N(m.value, I.value));
+    }, $ = () => {
+      s && (s.data.datasets = b.value, s.options = I.value.options, s.update(M.value));
     };
-    j(b), C(() => t.chartType, b), C(L, async (e) => {
-      e && (await q(), b());
-    }), C([() => t.visibleIds, () => t.dataSets], z);
-    const h = i(
+    J(y), T(() => t.chartType, y), T(w, async (e) => {
+      e && (await Q(), y());
+    }), T([() => t.visibleIds, () => t.dataSets], $);
+    const h = l(
       () => t.chartType === n.StackedLine || t.chartType === n.StackedBar
-    ), $ = i(
+    ), K = l(
       () => t.chartType === n.Line || t.chartType === n.StackedLine
-    ), x = i(
+    ), B = l(
       () => t.dataSets.filter((e) => t.visibleIds.includes(e.id))
-    ), y = i(() => x.value.map((e, o) => {
-      const r = e.color || ve[o] || "#000000";
+    ), b = l(() => B.value.map((e, o) => {
+      const i = e.color || be[o] || "#000000";
       return {
         ...e,
         fill: h.value ? "start" : void 0,
-        backgroundColor: Te(
-          r,
+        backgroundColor: Le(
+          i,
           t.chartType === n.StackedLine ? 10 : 70
         ),
-        borderColor: r,
-        pointBackgroundColor: r,
-        pointHoverBorderColor: r,
+        borderColor: i,
+        pointBackgroundColor: i,
+        pointHoverBorderColor: i,
         maxBarThickness: 50,
-        clip: 5
+        clip: 5,
         // draw a bit outside the chart area
+        icon: e.icon || null,
+        iconType: e.iconType || "branded"
       };
-    })), B = i(
+    })), I = l(
       () => ({
         type: t.chartType == n.Bar || t.chartType === n.StackedBar ? "bar" : "line",
         // Chart Data
         data: {
-          datasets: y.value
+          datasets: b.value
         },
         // Chart Options
         options: {
@@ -108,17 +114,17 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
           plugins: {
             legend: { display: !1 },
             title: { display: !1 },
-            hoverVerticalLine: $.value,
+            hoverVerticalLine: K.value,
             // tooltip
             tooltip: {
               enabled: !1,
               position: "average",
               external: ({ tooltip: e }) => {
-                l.value = { ...e };
+                r.value = { ...e };
               },
               callbacks: {
                 footer: (e) => {
-                  const o = e.reduce((r, G) => r + (G.parsed.y || 0), 0);
+                  const o = e.reduce((i, j) => i + (j.parsed.y || 0), 0);
                   return ["Total", String(o)];
                 }
               }
@@ -146,7 +152,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
               borderWidth: 0,
               hoverRadius: 4,
               hoverBorderWidth: 2,
-              pointHoverBackgroundColor: be
+              pointHoverBackgroundColor: ge
             },
             bar: {
               borderRadius: 4
@@ -161,8 +167,8 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
               // stack on top of each other
               // ticks
               ticks: {
-                color: P,
-                font: U,
+                color: U,
+                font: P,
                 padding: 4,
                 callback: function(e) {
                   return H(
@@ -173,7 +179,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
               },
               // grid lines
               grid: {
-                color: M,
+                color: z,
                 drawOnChartArea: !1,
                 drawTicks: !0,
                 drawBorder: !1,
@@ -189,17 +195,17 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
               // stack on top of each other
               // ticks
               ticks: {
-                color: P,
-                font: U,
+                color: U,
+                font: P,
                 padding: 8,
-                stepSize: E.value,
-                min: A.value,
-                max: E.value * t.tickCount,
+                stepSize: R.value,
+                min: V.value,
+                max: R.value * t.tickCount,
                 callback: (e) => H(e, t.yAxisFormat)
               },
               // grid lines
               grid: {
-                color: M,
+                color: z,
                 drawOnChartArea: !0,
                 drawTicks: !1
               }
@@ -207,87 +213,98 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
           }
         }
       })
-    ), K = i(
-      () => y.value.reduce((e, o) => (e[o.id] = o.borderColor, e), {})
-    ), W = i(() => t.dataSets.map((e) => ({
+    ), W = l(
+      () => b.value.reduce((e, o) => (e[o.id] = o.borderColor, e), {})
+    ), Z = l(() => t.dataSets.map((e) => ({
       id: e.id,
       label: e.label,
-      color: K.value[e.id] || null
-    }))), I = g(null), l = g(null), { position: w } = ye(
-      p,
-      I,
-      l
-    ), Z = i(() => ({
-      left: `${w.value.left}px`,
-      top: `${w.value.top}px`,
-      opacity: l.value?.opacity || 0
-    })), { minValue: A, maxValue: _ } = Se({
+      caption: e.caption || null,
+      color: W.value[e.id] || null,
+      icon: e.icon || null,
+      iconType: e.iconType || "branded"
+    }))), A = g(null), r = g(null), { position: E } = Te(
+      m,
+      A,
+      r
+    ), G = l(() => ({
+      left: `${E.value.left}px`,
+      top: `${E.value.top}px`,
+      opacity: r.value?.opacity || 0
+    })), { minValue: V, maxValue: X } = Se({
       parsingConfig: t.parsing,
-      dataSets: x,
+      dataSets: B,
       isStacked: h
-    }), E = i(
-      () => fe(A.value, _.value, t.tickCount)
+    }), R = l(
+      () => he(V.value, X.value, t.tickCount)
     );
-    return (e, o) => (d(), k(R, null, [
-      a.withSettingsHeader ? (d(), m(Be, {
+    return (e, o) => (d(), C(O, null, [
+      a.withSettingsHeader ? (d(), f(Ie, {
         key: 0,
         "chart-type": u(c),
-        "onUpdate:chart-type": o[0] || (o[0] = (r) => V(c) ? c.value = r : null),
+        "onUpdate:chart-type": o[0] || (o[0] = (i) => D(c) ? c.value = i : null),
         "hide-legend": a.hideLegend
       }, {
-        metric: O(() => [
-          D(e.$slots, "metric", {}, void 0, !0)
+        metric: k(() => [
+          x(e.$slots, "metric", {}, void 0, !0)
         ]),
-        breakdowns: O(() => [
-          D(e.$slots, "breakdowns", {}, void 0, !0)
+        breakdowns: k(() => [
+          x(e.$slots, "breakdowns", {}, void 0, !0)
         ]),
         _: 3
       }, 8, ["chart-type", "hide-legend"])) : v("", !0),
-      f("div", Ie, [
-        u(L) ? (d(), k(R, { key: 0 }, [
-          f("section", we, [
-            f("div", Ae, [
-              F(ke, {
+      p("div", Ae, [
+        u(w) ? (d(), C(O, { key: 0 }, [
+          p("section", {
+            class: Y(["chart-content", [{ "with-legend": !a.hideLegend }]])
+          }, [
+            p("div", Ee, [
+              F(xe, {
                 "chart-type": u(c),
-                "onUpdate:chart-type": o[1] || (o[1] = (r) => V(c) ? c.value = r : null),
+                "onUpdate:chart-type": o[1] || (o[1] = (i) => D(c) ? c.value = i : null),
                 "with-settings-header": a.withSettingsHeader,
                 header: a.header,
                 subheader: a.subheader,
-                "subheader-tooltip": a.subheaderTooltip
-              }, null, 8, ["chart-type", "with-settings-header", "header", "subheader", "subheader-tooltip"])
+                "with-subheader-tooltip": a.withSubheaderTooltip
+              }, {
+                "subheader-tooltip": k(() => [
+                  x(e.$slots, "subheader-tooltip", {}, void 0, !0)
+                ]),
+                _: 3
+              }, 8, ["chart-type", "with-settings-header", "header", "subheader", "with-subheader-tooltip"])
             ]),
-            f("div", Ee, [
-              f("canvas", {
+            p("div", Ve, [
+              p("canvas", {
                 ref_key: "chartRef",
-                ref: p,
+                ref: m,
                 class: "chart__canvas"
               }, null, 512),
-              f("div", {
+              p("div", {
                 ref_key: "tooltipRef",
-                ref: I,
+                ref: A,
                 class: "chart__tooltip",
-                style: J(u(Z))
+                style: _(u(G))
               }, [
-                l.value ? (d(), m(ge, {
+                r.value ? (d(), f(Ce, {
                   key: 0,
-                  title: String(l.value.title),
-                  "data-points": l.value.dataPoints,
+                  title: String(r.value.title),
+                  "data-points": r.value.dataPoints,
                   "x-axis-format": a.xAxisFormat,
                   "y-axis-format": a.yAxisFormat,
-                  "total-label": l.value.footer[0],
-                  "total-value": Number(l.value.footer[1])
+                  "total-label": r.value.footer[0],
+                  "total-value": Number(r.value.footer[1])
                 }, null, 8, ["title", "data-points", "x-axis-format", "y-axis-format", "total-label", "total-value"])) : v("", !0)
               ], 4)
             ])
-          ]),
-          a.hideLegend ? v("", !0) : (d(), k("section", Re, [
-            F(Ce, {
-              items: u(W),
+          ], 2),
+          a.hideLegend ? v("", !0) : (d(), C("section", Re, [
+            F(ke, {
+              items: u(Z),
               "visible-ids": a.visibleIds,
-              "onUpdate:visibleIds": o[2] || (o[2] = (r) => T("update:visibleIds", r))
-            }, null, 8, ["items", "visible-ids"])
+              "max-limit-tooltip-text": a.maxLimitTooltipText,
+              "onUpdate:visibleIds": o[2] || (o[2] = (i) => L("update:visibleIds", i))
+            }, null, 8, ["items", "visible-ids", "max-limit-tooltip-text"])
           ]))
-        ], 64)) : a.loading ? (d(), m(Le, { key: 1 })) : u(S) ? (d(), m(u(xe), {
+        ], 64)) : a.loading ? (d(), f(we, { key: 1 })) : u(S) ? (d(), f(u(Be), {
           key: 2,
           title: a.noDataTitle,
           subtitle: a.noDataSubtitle,
@@ -298,5 +315,5 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
   }
 });
 export {
-  Xe as default
+  qe as default
 };