@ironsource/shared-ui 2.1.8 → 2.1.9-test.1

package/components/button/v4/index.js

@@ -1,10 +1,17 @@
 import o from "./ButtonV4.vue.js";
 import t from "./IconButtonV4.vue.js";
 import r from "./ButtonGroup.vue.js";
-const u = () => [o, t, r];
+import m from "./ToggleButtonGroupAB.vue.js";
+const f = () => [
+  o,
+  t,
+  r,
+  m
+];
 export {
   o as Button,
   r as ButtonGroup,
-  u as ButtonTypes,
-  t as IconButton
+  f as ButtonTypes,
+  t as IconButton,
+  m as ToggleButtonGroupAB
 };

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

@@ -9,6 +9,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tickCount?: number;
     header?: string;
     subheader?: string;
+    subheaderTooltip?: string;
     hideLegend?: boolean;
     minVisible?: number;
     maxVisible?: number;
@@ -27,6 +28,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tickCount: number;
     header: string;
     subheader: string;
+    subheaderTooltip: string;
     hideLegend: boolean;
     minVisible: number;
     maxVisible: number;
@@ -48,6 +50,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tickCount?: number;
     header?: string;
     subheader?: string;
+    subheaderTooltip?: string;
     hideLegend?: boolean;
     minVisible?: number;
     maxVisible?: number;
@@ -66,6 +69,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     tickCount: number;
     header: string;
     subheader: string;
+    subheaderTooltip: string;
     hideLegend: boolean;
     minVisible: number;
     maxVisible: number;
@@ -89,6 +93,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     chartType: ChartType;
     withSettingsHeader: boolean;
     subheader: string;
+    subheaderTooltip: string;
     dataSets: ChartDataSet[];
     hideLegend: boolean;
     tickCount: number;

package/components/chart/Chart.vue.js

@@ -1,7 +1,7 @@
-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_df85e0af_lang.css"; //*');
-const a = /* @__PURE__ */ e(o, [["__scopeId", "data-v-df85e0af"]]);
+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"]]);
 export {
   a as default
 };

package/components/chart/Chart.vue2.js

@@ -1,16 +1,16 @@
- import "../../Chart.vue_vue_type_style_index_0_scoped_df85e0af_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 h, unref as c, isRef as V, withCtx as O, renderSlot as D, createCommentVNode as v, createElementVNode as f, createVNode as F, normalizeStyle as J } from "vue";
+ 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 ce } from "chart.js";
-import { HoverVerticalLine as ue } from "./plugins/HoverVerticalLine.js";
+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 me, DEFAULT_MAX_VISIBLE as he, COLOR_PALETTE as ve, POINT_BORDER_COLOR as ye, TICK_LABEL_COLOR as P, TICK_LABEL_FONT as U, GRID_LINE_COLOR as M } from "./consts.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 { ChartType as n } from "./types.js";
-import { useTooltipPosition as be } from "./composables/useTooltipPosition.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 Se } from "../../utils/color.js";
-import { useChartValues as Te } from "./composables/useChartValues.js";
+import { hexColorToRgba as Te } 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";
@@ -29,9 +29,10 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
     tickCount: { default: pe },
     header: { default: "" },
     subheader: { default: "" },
+    subheaderTooltip: { default: "" },
     hideLegend: { type: Boolean, default: !1 },
-    minVisible: { default: me },
-    maxVisible: { default: he },
+    minVisible: { default: he },
+    maxVisible: { default: me },
     loading: { type: Boolean, default: !1 },
     noDataIcon: { default: "file-x" },
     noDataTitle: { default: "No data to display" },
@@ -39,7 +40,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
     withSettingsHeader: { type: Boolean, default: !0 }
   },
   emits: ["update:chartType", "update:visibleIds"],
-  setup(a, { emit: S }) {
+  setup(a, { emit: T }) {
     const t = a;
     N.register(
       Y,
@@ -53,31 +54,31 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
       ne,
       se,
       de,
-      ce,
-      ue
+      ue,
+      ce
     );
-    const u = Q(t, "chartType", S), p = g(null);
+    const c = Q(t, "chartType", T), p = g(null);
     let s = null;
-    const T = i(() => t.dataSets.length === 0), L = i(() => !t.loading && !T.value), y = () => {
+    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 = b.value, s.options = B.value.options, s.update());
+      s && (s.data.datasets = y.value, s.options = B.value.options, s.update());
     };
-    j(y), C(() => t.chartType, y), C(L, async (e) => {
-      e && (await q(), y());
+    j(b), C(() => t.chartType, b), C(L, async (e) => {
+      e && (await q(), b());
     }), C([() => t.visibleIds, () => t.dataSets], z);
-    const m = i(
+    const h = i(
       () => t.chartType === n.StackedLine || t.chartType === n.StackedBar
-    ), _ = i(
+    ), $ = i(
       () => t.chartType === n.Line || t.chartType === n.StackedLine
     ), x = i(
       () => t.dataSets.filter((e) => t.visibleIds.includes(e.id))
-    ), b = i(() => x.value.map((e, o) => {
+    ), y = i(() => x.value.map((e, o) => {
       const r = e.color || ve[o] || "#000000";
       return {
         ...e,
-        fill: m.value ? "start" : void 0,
-        backgroundColor: Se(
+        fill: h.value ? "start" : void 0,
+        backgroundColor: Te(
           r,
           t.chartType === n.StackedLine ? 10 : 70
         ),
@@ -93,7 +94,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
         type: t.chartType == n.Bar || t.chartType === n.StackedBar ? "bar" : "line",
         // Chart Data
         data: {
-          datasets: b.value
+          datasets: y.value
         },
         // Chart Options
         options: {
@@ -107,7 +108,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
           plugins: {
             legend: { display: !1 },
             title: { display: !1 },
-            hoverVerticalLine: _.value,
+            hoverVerticalLine: $.value,
             // tooltip
             tooltip: {
               enabled: !1,
@@ -145,7 +146,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
               borderWidth: 0,
               hoverRadius: 4,
               hoverBorderWidth: 2,
-              pointHoverBackgroundColor: ye
+              pointHoverBackgroundColor: be
             },
             bar: {
               borderRadius: 4
@@ -156,7 +157,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
             x: {
               beginAtZero: !0,
               border: { display: !1 },
-              stacked: m.value,
+              stacked: h.value,
               // stack on top of each other
               // ticks
               ticks: {
@@ -184,7 +185,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
               beginAtZero: !0,
               border: { display: !1 },
               // hide left borderline
-              stacked: m.value,
+              stacked: h.value,
               // stack on top of each other
               // ticks
               ticks: {
@@ -206,32 +207,32 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
           }
         }
       })
-    ), $ = i(
-      () => b.value.reduce((e, o) => (e[o.id] = o.borderColor, e), {})
-    ), K = i(() => t.dataSets.map((e) => ({
+    ), K = i(
+      () => y.value.reduce((e, o) => (e[o.id] = o.borderColor, e), {})
+    ), W = i(() => t.dataSets.map((e) => ({
       id: e.id,
       label: e.label,
-      color: $.value[e.id] || null
-    }))), I = g(null), l = g(null), { position: w } = be(
+      color: K.value[e.id] || null
+    }))), I = g(null), l = g(null), { position: w } = ye(
       p,
       I,
       l
-    ), W = i(() => ({
+    ), Z = i(() => ({
       left: `${w.value.left}px`,
       top: `${w.value.top}px`,
       opacity: l.value?.opacity || 0
-    })), { minValue: A, maxValue: Z } = Te({
+    })), { minValue: A, maxValue: _ } = Se({
       parsingConfig: t.parsing,
       dataSets: x,
-      isStacked: m
+      isStacked: h
     }), E = i(
-      () => fe(A.value, Z.value, t.tickCount)
+      () => fe(A.value, _.value, t.tickCount)
     );
     return (e, o) => (d(), k(R, null, [
-      a.withSettingsHeader ? (d(), h(Be, {
+      a.withSettingsHeader ? (d(), m(Be, {
         key: 0,
-        "chart-type": c(u),
-        "onUpdate:chart-type": o[0] || (o[0] = (r) => V(u) ? u.value = r : null),
+        "chart-type": u(c),
+        "onUpdate:chart-type": o[0] || (o[0] = (r) => V(c) ? c.value = r : null),
         "hide-legend": a.hideLegend
       }, {
         metric: O(() => [
@@ -243,16 +244,17 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
         _: 3
       }, 8, ["chart-type", "hide-legend"])) : v("", !0),
       f("div", Ie, [
-        c(L) ? (d(), k(R, { key: 0 }, [
+        u(L) ? (d(), k(R, { key: 0 }, [
           f("section", we, [
             f("div", Ae, [
               F(ke, {
-                "chart-type": c(u),
-                "onUpdate:chart-type": o[1] || (o[1] = (r) => V(u) ? u.value = r : null),
+                "chart-type": u(c),
+                "onUpdate:chart-type": o[1] || (o[1] = (r) => V(c) ? c.value = r : null),
                 "with-settings-header": a.withSettingsHeader,
                 header: a.header,
-                subheader: a.subheader
-              }, null, 8, ["chart-type", "with-settings-header", "header", "subheader"])
+                subheader: a.subheader,
+                "subheader-tooltip": a.subheaderTooltip
+              }, null, 8, ["chart-type", "with-settings-header", "header", "subheader", "subheader-tooltip"])
             ]),
             f("div", Ee, [
               f("canvas", {
@@ -264,9 +266,9 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
                 ref_key: "tooltipRef",
                 ref: I,
                 class: "chart__tooltip",
-                style: J(c(W))
+                style: J(u(Z))
               }, [
-                l.value ? (d(), h(ge, {
+                l.value ? (d(), m(ge, {
                   key: 0,
                   title: String(l.value.title),
                   "data-points": l.value.dataPoints,
@@ -280,12 +282,12 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
           ]),
           a.hideLegend ? v("", !0) : (d(), k("section", Re, [
             F(Ce, {
-              items: c(K),
+              items: u(W),
               "visible-ids": a.visibleIds,
-              "onUpdate:visibleIds": o[2] || (o[2] = (r) => S("update:visibleIds", r))
+              "onUpdate:visibleIds": o[2] || (o[2] = (r) => T("update:visibleIds", r))
             }, null, 8, ["items", "visible-ids"])
           ]))
-        ], 64)) : a.loading ? (d(), h(Le, { key: 1 })) : c(T) ? (d(), h(c(xe), {
+        ], 64)) : a.loading ? (d(), m(Le, { key: 1 })) : u(S) ? (d(), m(u(xe), {
           key: 2,
           title: a.noDataTitle,
           subtitle: a.noDataSubtitle,

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

@@ -4,11 +4,13 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     withSettingsHeader: boolean;
     header?: string;
     subheader?: string;
+    subheaderTooltip?: string;
 }>, {
     chartType: ChartType;
     withSettingsHeader: boolean;
     header: string;
     subheader: string;
+    subheaderTooltip: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:chartType": (type: ChartType) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
@@ -16,11 +18,13 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     withSettingsHeader: boolean;
     header?: string;
     subheader?: string;
+    subheaderTooltip?: string;
 }>, {
     chartType: ChartType;
     withSettingsHeader: boolean;
     header: string;
     subheader: string;
+    subheaderTooltip: string;
 }>>> & {
     "onUpdate:chartType"?: (type: ChartType) => any;
 }, {
@@ -28,6 +32,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     chartType: ChartType;
     withSettingsHeader: boolean;
     subheader: string;
+    subheaderTooltip: string;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;

package/components/chart/ChartHeader.vue.js

@@ -1,7 +1,7 @@
 import e from "./ChartHeader.vue2.js";
 /* empty css                  */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../ChartHeader.vue_vue_type_style_index_0_scoped_2e3de9c5_lang.css"; //*');
-const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-2e3de9c5"]]);
+// import "../../ChartHeader.vue_vue_type_style_index_0_scoped_4c37736e_lang.css"; //*');
+const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-4c37736e"]]);
 export {
   s as default
 };

package/components/chart/ChartHeader.vue2.js

@@ -1,53 +1,66 @@
- import "../../ChartHeader.vue_vue_type_style_index_0_scoped_2e3de9c5_lang.css"; import { defineComponent as y, computed as T, openBlock as i, createElementBlock as V, createElementVNode as g, createVNode as c, unref as a, withCtx as l, createTextVNode as s, toDisplayString as u, createBlock as k, isRef as v, createCommentVNode as x } from "vue";
-import p from "../typography/v4/Typography.vue.js";
-import B from "../switch/v4/SwitchV4.vue.js";
+ import "../../ChartHeader.vue_vue_type_style_index_0_scoped_4c37736e_lang.css"; import { defineComponent as y, computed as T, openBlock as c, createElementBlock as x, createElementVNode as V, createVNode as d, unref as t, withCtx as i, createTextVNode as u, toDisplayString as s, createBlock as b, isRef as g, createCommentVNode as k } from "vue";
+import h from "../typography/v4/Typography.vue.js";
+import v from "../switch/v4/SwitchV4.vue.js";
 import { ChartType as r } from "./types.js";
-const C = { class: "chart-header" }, S = { class: "header-texts" }, H = /* @__PURE__ */ y({
+import B from "../tooltip/v4/TooltipV4.vue.js";
+const C = { class: "chart-header" }, S = { class: "header-texts" }, E = /* @__PURE__ */ y({
   __name: "ChartHeader",
   props: {
     chartType: { default: r.Line },
     withSettingsHeader: { type: Boolean, default: !0 },
     header: { default: "" },
-    subheader: { default: "" }
+    subheader: { default: "" },
+    subheaderTooltip: { default: "" }
   },
   emits: ["update:chartType"],
-  setup(e, { emit: h }) {
+  setup(e, { emit: p }) {
     const m = e, n = [
       { id: r.Line, icon: "chart-line-up" },
       { id: r.Bar, icon: "chart-bar" },
       { id: r.StackedLine, icon: "chart-line" }
     ], o = T({
       get() {
-        return n.find(({ id: t }) => t === m.chartType);
+        return n.find(({ id: a }) => a === m.chartType);
       },
-      set(t) {
-        h("update:chartType", t.id);
+      set(a) {
+        p("update:chartType", a.id);
       }
     });
-    return (t, d) => (i(), V("div", C, [
-      g("div", S, [
-        c(a(p), { variant: "chart2" }, {
-          default: l(() => [
-            s(u(e.header), 1)
+    return (a, l) => (c(), x("div", C, [
+      V("div", S, [
+        d(t(B), {
+          text: e.subheaderTooltip,
+          placement: "right"
+        }, {
+          default: i(() => [
+            d(t(h), {
+              class: "subheader",
+              variant: "h5"
+            }, {
+              default: i(() => [
+                u(s(e.subheader), 1)
+              ]),
+              _: 1
+            })
           ]),
           _: 1
-        }),
-        c(a(p), { variant: "caption" }, {
-          default: l(() => [
-            s(u(e.subheader), 1)
+        }, 8, ["text"]),
+        d(t(h), { variant: "chart2" }, {
+          default: i(() => [
+            u(s(e.header), 1)
           ]),
           _: 1
         })
       ]),
-      e.withSettingsHeader ? x("", !0) : (i(), k(a(B), {
+      e.withSettingsHeader ? k("", !0) : (c(), b(t(v), {
         key: 0,
-        modelValue: a(o),
-        "onUpdate:modelValue": d[0] || (d[0] = (f) => v(o) ? o.value = f : null),
+        modelValue: t(o),
+        "onUpdate:modelValue": l[0] || (l[0] = (f) => g(o) ? o.value = f : null),
         options: n
       }, null, 8, ["modelValue"]))
     ]));
   }
 });
 export {
-  H as default
+  E as default
 };

package/components/chart/ChartLegend.vue.js

@@ -1,7 +1,7 @@
 import e from "./ChartLegend.vue2.js";
 /* empty css                  */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../ChartLegend.vue_vue_type_style_index_0_scoped_efc608f9_lang.css"; //*');
-const c = /* @__PURE__ */ o(e, [["__scopeId", "data-v-efc608f9"]]);
+// import "../../ChartLegend.vue_vue_type_style_index_0_scoped_c0f71a49_lang.css"; //*');
+const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-c0f71a49"]]);
 export {
-  c as default
+  a as default
 };

package/components/chart/ChartLegend.vue2.js

@@ -1,4 +1,4 @@
- import "../../ChartLegend.vue_vue_type_style_index_0_scoped_efc608f9_lang.css"; import { defineComponent as E, ref as T, computed as a, openBlock as d, createElementBlock as n, createElementVNode as c, createVNode as u, unref as l, mergeProps as m, Fragment as y, renderList as S, withCtx as U, createTextVNode as w, toDisplayString as B } from "vue";
+ import "../../ChartLegend.vue_vue_type_style_index_0_scoped_c0f71a49_lang.css"; import { defineComponent as E, ref as T, computed as r, openBlock as d, createElementBlock as n, createElementVNode as c, createVNode as u, unref as i, mergeProps as p, Fragment as y, renderList as w, withCtx as S, createTextVNode as U, toDisplayString as B } from "vue";
 import { useVirtualList as D } from "@vueuse/core";
 import N from "../typography/v4/Typography.vue.js";
 import A from "../checkbox/v4/CheckboxV4.vue.js";
@@ -13,47 +13,54 @@ const P = { class: "chart-legend" }, R = { class: "search-box" }, K = /* @__PURE
     maxVisible: { default: M }
   },
   emits: ["update:visibleIds"],
-  setup(p, { emit: b }) {
-    const t = p, h = 32, o = T(""), f = a(() => {
-      const e = o.value.toLowerCase();
-      return t.items.filter(
-        (i) => i.label.toLowerCase().includes(e)
+  setup(m, { emit: b }) {
+    const s = m, h = 32, o = T(""), f = r(() => {
+      const t = o.value.toLowerCase();
+      return s.items.filter(
+        (l) => l.label.toLowerCase().includes(t)
       );
-    }), r = (e) => t.visibleIds.includes(e.id), v = a(
-      () => t.visibleIds.length >= t.maxVisible
-    ), I = a(
-      () => t.visibleIds.length <= t.minVisible
-    ), _ = (e) => I.value && r(e) || v.value && !r(e), V = (e, i) => {
+    }), a = (t) => s.visibleIds.includes(t.id), v = r(
+      () => s.visibleIds.length >= s.maxVisible
+    ), I = r(
+      () => s.visibleIds.length <= s.minVisible
+    ), _ = (t) => I.value && a(t) || v.value && !a(t), V = (t, l) => {
       b(
         "update:visibleIds",
-        e ? [...t.visibleIds, i.id] : t.visibleIds.filter((s) => s !== i.id)
+        t ? [...s.visibleIds, l.id] : s.visibleIds.filter((e) => e !== l.id)
       );
-    }, { list: L, containerProps: g, wrapperProps: k } = D(f, {
+    }, { list: g, containerProps: L, wrapperProps: x } = D(f, {
       itemHeight: h,
       overscan: 10
     });
-    return (e, i) => (d(), n("div", P, [
+    return (t, l) => (d(), n("div", P, [
       c("div", R, [
-        u(l(F), {
+        u(i(F), {
           modelValue: o.value,
-          "onUpdate:modelValue": i[0] || (i[0] = (s) => o.value = s)
+          "onUpdate:modelValue": l[0] || (l[0] = (e) => o.value = e)
         }, null, 8, ["modelValue"])
       ]),
-      c("div", m({ class: "legend" }, l(g)), [
-        c("ul", m({ class: "legend__list" }, l(k)), [
-          (d(!0), n(y, null, S(l(L), ({ data: s, index: C }) => (d(), n("li", { key: C }, [
-            u(l(A), {
-              color: s.color,
-              "is-checked": r(s),
-              disabled: _(s),
-              "onUpdate:isChecked": (x) => V(x, s)
+      c("div", p({ class: "legend" }, i(L)), [
+        c("ul", p({ class: "legend__list" }, i(x)), [
+          (d(!0), n(y, null, w(i(g), ({ data: e, index: k }) => (d(), n("li", { key: k }, [
+            u(i(A), {
+              color: e.color,
+              "is-checked": a(e),
+              disabled: _(e),
+              "onUpdate:isChecked": (C) => V(C, e)
             }, null, 8, ["color", "is-checked", "disabled", "onUpdate:isChecked"]),
-            u(l(N), { variant: "body2" }, {
-              default: U(() => [
-                w(B(s.label), 1)
+            u(i(N), {
+              variant: "body2",
+              "is-truncated": "",
+              class: "legend-label",
+              "with-tooltip": "",
+              "tooltip-text": e.label,
+              "tooltip-placement": "top"
+            }, {
+              default: S(() => [
+                U(B(e.label), 1)
               ]),
               _: 2
-            }, 1024)
+            }, 1032, ["tooltip-text"])
           ]))), 128))
         ], 16)
       ], 16)

package/components/chart/SettingsHeader.vue.js

@@ -1,7 +1,7 @@
 import e from "./SettingsHeader.vue2.js";
 /* empty css                     */import o from "../../_virtual/_plugin-vue_export-helper.js";
-// import "../../SettingsHeader.vue_vue_type_style_index_0_scoped_1791e4fe_lang.css"; //*');
-const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-1791e4fe"]]);
+// import "../../SettingsHeader.vue_vue_type_style_index_0_scoped_9b6cd9d9_lang.css"; //*');
+const d = /* @__PURE__ */ o(e, [["__scopeId", "data-v-9b6cd9d9"]]);
 export {
-  p as default
+  d as default
 };

package/components/chart/SettingsHeader.vue2.js

@@ -1,57 +1,64 @@
- import "../../SettingsHeader.vue_vue_type_style_index_0_scoped_1791e4fe_lang.css"; import { defineComponent as u, computed as h, openBlock as y, createElementBlock as f, createElementVNode as t, normalizeClass as i, createVNode as v, unref as r, isRef as g, renderSlot as a } from "vue";
-import T from "../dropdown/v4/DropdownV4.vue.js";
+ import "../../SettingsHeader.vue_vue_type_style_index_0_scoped_9b6cd9d9_lang.css"; import { defineComponent as h, computed as g, openBlock as y, createElementBlock as f, createElementVNode as r, normalizeClass as a, createVNode as l, unref as t, isRef as v, withCtx as T, mergeProps as w, renderSlot as p } from "vue";
+import b from "../dropdown/v4/DropdownV4.vue.js";
 import "../dropdown/v4/DefaultDropdownTrigger.vue.js";
 import "../dropdown/v4/IconButtonDropdownTrigger.vue.js";
 import "../dropdown/v4/ChipDropdownTrigger.vue.js";
 import "../dropdown/v4/AppDropdownTrigger.vue.js";
-import "../dropdown/v4/ButtonDropdownTrigger.vue.js";
+import k from "../dropdown/v4/ButtonDropdownTrigger.vue.js";
 import "../dropdown/v4/ButtonFilterDropdownTrigger.vue.js";
 import "../dropdown/v4/TreeDropdown.vue.js";
 import "../dropdown/v4/OptionV4.vue.js";
-import { DROPDOWN_TYPE_OPTIONS as d } from "./consts.js";
-const k = { class: "settings-header-container" }, b = { class: "chart-type-selection" }, V = /* @__PURE__ */ u({
+import { DROPDOWN_TYPE_OPTIONS as c } from "./consts.js";
+const _ = { class: "settings-header-container" }, B = { class: "chart-type-selection" }, R = /* @__PURE__ */ h({
   __name: "SettingsHeader",
   props: {
     chartType: null,
     hideLegend: { type: Boolean }
   },
   emits: ["update:chartType"],
-  setup(o, { emit: l }) {
-    const p = o, s = h({
+  setup(s, { emit: m }) {
+    const u = s, o = g({
       get() {
-        return d.find(({ id: e }) => e === p.chartType);
+        return c.find(({ id: e }) => e === u.chartType);
       },
       set(e) {
-        l("update:chartType", e.id);
+        m("update:chartType", e.id);
       }
-    }), c = (e) => `Chart: ${e.name}`;
-    return (e, n) => (y(), f("div", k, [
-      t("div", {
-        class: i(["settings", { "settings-spacer": !o.hideLegend }])
+    }), i = (e) => `Chart: ${e.name}`;
+    return (e, d) => (y(), f("div", _, [
+      r("div", {
+        class: a(["settings", { "settings-spacer": !s.hideLegend }])
       }, [
-        t("div", b, [
-          v(r(T), {
-            selected: r(s),
-            "onUpdate:selected": n[0] || (n[0] = (m) => g(s) ? s.value = m : null),
-            options: r(d),
+        r("div", B, [
+          l(t(b), {
+            selected: t(o),
+            "onUpdate:selected": d[0] || (d[0] = (n) => v(o) ? o.value = n : null),
+            options: t(c),
             "option-name-key": "name",
-            "display-value": c,
+            "display-value": i,
             placeholder: "Select chart type",
             size: "small"
-          }, null, 8, ["selected", "options"])
+          }, {
+            "dropdown-trigger": T(({ buttonTriggerProps: n }) => [
+              l(t(k), w(n, {
+                label: i(t(o))
+              }), null, 16, ["label"])
+            ]),
+            _: 1
+          }, 8, ["selected", "options"])
         ]),
-        t("div", null, [
-          a(e.$slots, "metric", {}, void 0, !0)
+        r("div", null, [
+          p(e.$slots, "metric", {}, void 0, !0)
         ])
       ], 2),
-      t("div", {
-        class: i(["breakdowns", { "breakdowns-border": !o.hideLegend }])
+      r("div", {
+        class: a(["breakdowns", { "breakdowns-border": !s.hideLegend }])
       }, [
-        a(e.$slots, "breakdowns", {}, void 0, !0)
+        p(e.$slots, "breakdowns", {}, void 0, !0)
       ], 2)
     ]));
   }
 });
 export {
-  V as default
+  R as default
 };