@ironsource/shared-ui 2.1.12-rc.14 → 2.1.12-rc.16

package/Chart.vue_vue_type_style_index_0_scoped_4e9ce62f_lang.css

@@ -0,0 +1 @@
+.chart-container[data-v-4e9ce62f]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;border-radius:0 0 6px 6px;width:100%}.chart-planes[data-v-4e9ce62f]{width:100%;height:100%;overflow-y:auto}.chart-planes.with-legend[data-v-4e9ce62f]{width:calc(100% - 221px)}.chart-planes .extra-chart-plane[data-v-4e9ce62f]{border-top:1px solid var(--common-divider)}.chart-sidebar[data-v-4e9ce62f]{border-left:1px solid var(--common-divider)}

package/ChartLegend.vue_vue_type_style_index_0_scoped_fd9e4ea2_lang.css

@@ -0,0 +1 @@
+.disabled-tooltip[data-v-fd9e4ea2],.disabled-tooltip[data-v-fd9e4ea2] .container{width:100%}.chart-legend[data-v-fd9e4ea2]{display:flex;flex-direction:column;width:240px;height:100%;padding:0 8px 8px 12px}.search-box[data-v-fd9e4ea2]{padding:12px 0 4px;display:flex;align-items:center;gap:4px}.legend[data-v-fd9e4ea2]{overflow-y:auto;color:var(--text-primary);height:100%;overflow-x:hidden}.legend__list[data-v-fd9e4ea2]{list-style:none;padding:0}.legend__list>li[data-v-fd9e4ea2]{display:flex;align-items:center;gap:8px;padding:6px 8px}.legend__list>li[data-v-fd9e4ea2]:hover{background-color:var(--action-hover);border-radius:8px;cursor:pointer}.legend__list>li.disabled-item[data-v-fd9e4ea2]{cursor:not-allowed!important;opacity:.5;background:var(--background-paper)}.legend__list>li.empty-list[data-v-fd9e4ea2]{display:flex;align-items:center;justify-content:flex-start;height:32px;color:var(--text-disabled)}.legend__list>li.empty-list[data-v-fd9e4ea2]:hover{background-color:transparent;cursor:default}.legend__list>li .item-wrapper[data-v-fd9e4ea2]{display:flex;align-items:center;gap:8px;width:100%}.legend__list>li .item-wrapper .legend-label[data-v-fd9e4ea2]{width:80%}.legend__list>li .item-wrapper .icon-color[data-v-fd9e4ea2]{color:var(--action-active)}.legend__list>li .item-wrapper .label-container[data-v-fd9e4ea2]{display:flex;flex-direction:column;width:100%}.legend__list>li .item-wrapper .label-container .legend-caption[data-v-fd9e4ea2]{display:flex;color:var(--text-secondary)}

package/ChartPlane.vue_vue_type_style_index_0_scoped_64dcfb5d_lang.css

@@ -0,0 +1 @@
+.chart-plane[data-v-64dcfb5d]{--headerHeight: var(--2e8f327a);width:100%}.chart-plane[data-v-64dcfb5d],.chart-loading[data-v-64dcfb5d],.chart-empty[data-v-64dcfb5d]{height:var(--f7b2eb36)}.header-wrapper[data-v-64dcfb5d]{height:var(--headerHeight)}.chart[data-v-64dcfb5d]{width:100%;height:calc(100% - var(--headerHeight));position:relative}.chart__canvas[data-v-64dcfb5d]{width:100%;height:100%}.chart__tooltip[data-v-64dcfb5d]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px;z-index:1}

package/ChartTooltip.vue_vue_type_style_index_0_scoped_81cdfd5e_lang.css

@@ -0,0 +1 @@
+.chart-tooltip[data-v-81cdfd5e]{color:var(--text-primary);background:var(--common-white);box-shadow:0 4px 8px -2px #1018281f;border:1px solid var(--common-divider-elevation-0);border-radius:var(--border-radius-md);width:280px;padding:calc(var(--spacing-100) - 1px)}.color-box[data-v-81cdfd5e]{width:12px;height:12px;border-radius:2px;display:inline-block;margin-right:var(--spacing-100)}.color-box+.platform-icon[data-v-81cdfd5e]{margin-left:calc(var(--spacing-50) - var(--spacing-100))}.list[data-v-81cdfd5e]{list-style:none;margin:0;padding:0}.list__item[data-v-81cdfd5e]{display:flex;align-items:center;margin-bottom:var(--spacing-50);color:var(--text-secondary)}.list__item[data-v-81cdfd5e]:last-child{margin-bottom:0}.platform-icon[data-v-81cdfd5e]{color:var(--action-active);margin-right:var(--spacing-50)}.popover-label-wrapper[data-v-81cdfd5e]{display:flex;width:200px;flex-grow:1}.truncated-label[data-v-81cdfd5e]{max-width:90%}.tooltip-footer[data-v-81cdfd5e]{display:flex;align-items:center;margin-top:var(--spacing-100);color:var(--text-primary)}.flex-grow[data-v-81cdfd5e]{flex-grow:1}

package/DropdownV4.vue_vue_type_style_index_0_scoped_08cb822e_lang.css

@@ -0,0 +1 @@
+.v-enter-active[data-v-08cb822e],.v-leave-active[data-v-08cb822e]{transition:opacity .25s ease}ol[data-v-08cb822e],ul[data-v-08cb822e],menu[data-v-08cb822e]{list-style:none;margin:0;padding:0}.dropdown.full-width[data-v-08cb822e],.dropdown.full-width .button__container[data-v-08cb822e]{width:100%}.dropdown-list-wrapper[data-v-08cb822e]{display:flex;flex-direction:column;padding:.5rem .5rem .25rem}.dropdown-list-wrapper--multi[data-v-08cb822e]{padding:.5rem}.list-container--multi[data-v-08cb822e]{margin-bottom:0}.inline-search .inline-search-wrapper[data-v-08cb822e]{display:flex;gap:4px;padding-bottom:.25rem}.inline-search .inline-search-wrapper .search-container[data-v-08cb822e]{width:100%}.inline-search .list-container[data-v-08cb822e]{padding-top:0}.no-result-container[data-v-08cb822e]{height:100%;display:flex;align-items:center;padding:.375rem .5rem;color:var(--text-disabled)}.no-result[data-v-08cb822e]{color:var(--text-disabled);padding-left:.5rem}.list[data-v-08cb822e]{outline:none;display:flex;flex-direction:column;width:100%;min-height:2rem}.list--multi[data-v-08cb822e]{margin-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}.list--with-conditions[data-v-08cb822e]{min-height:0;margin-bottom:0}.image-slot[data-v-08cb822e]{margin-right:.5rem}.actions-wrapper[data-v-08cb822e]{display:flex;width:100%;padding:.5rem .5rem .5rem .125rem;padding-bottom:0;border-top:1px solid var(--common-divider);justify-content:space-between;margin-top:.25rem}.apply-button[data-v-08cb822e]{margin-left:.5rem}

package/OptionV4.vue_vue_type_style_index_0_scoped_9cdf3a94_lang.css

@@ -0,0 +1 @@
+.label[data-v-9cdf3a94]{color:#41454d}.item-container[data-v-9cdf3a94]{width:100%;display:flex;align-items:center;cursor:pointer;border-radius:var(--border-radius-lg);margin-bottom:.25rem;color:var(--text-primary);padding:6px 8px}.item-container--disabled[data-v-9cdf3a94]{cursor:initial;color:var(--text-disabled)}.item-container[data-v-9cdf3a94]:hover:not(.item-container--disabled){background-color:var(--action-hover)}.item-container--active[data-v-9cdf3a94],.item-container[data-v-9cdf3a94]:active{background-color:var(--action-selected)}.item-container:not(.item-container--multi).item-container--selected[data-v-9cdf3a94]{background-color:var(--action-selected)}.subtitle[data-v-9cdf3a94]{color:#7b838c;line-height:1rem}.clear-button[data-v-9cdf3a94]{display:flex;padding:0 4px;color:#7b838c;align-items:center;height:auto;background-image:none;min-width:auto;border:none;background-color:transparent}.clear-button[data-v-9cdf3a94]:hover{color:#3083ff}.item[data-v-9cdf3a94]{width:100%;display:flex;gap:.5rem;align-items:center}.item--with-icon[data-v-9cdf3a94],.item--multi[data-v-9cdf3a94]{display:flex;flex-direction:row;align-items:center;justify-content:start}.item .image[data-v-9cdf3a94]{width:20px;height:20px;flex:none}.item .image img[data-v-9cdf3a94]{width:20px;height:20px;border-radius:4px}.item .flag[data-v-9cdf3a94]{width:16px;height:16px}.item .flag img[data-v-9cdf3a94]{width:16px;height:16px;border-radius:50%}.item .start-icon[data-v-9cdf3a94],.item .end-icon[data-v-9cdf3a94]{display:flex;color:var(--action-active)}.item .end-text-icon[data-v-9cdf3a94]{display:inline-flex}.item .option-text[data-v-9cdf3a94]{line-height:1.1875rem}.text-container[data-v-9cdf3a94]{width:100%;text-overflow:ellipsis;overflow:hidden}.v4-tooltip.tooltip-option[data-v-9cdf3a94]{display:block}.tooltip-option[data-v-9cdf3a94] .container{width:100%}.app-trigger--icon[data-v-9cdf3a94]{color:var(--action-active);transform:rotate(-90deg);transition:transform .2s}.app-trigger--icon.expanded[data-v-9cdf3a94]{transform:rotate(0)}.option-warning[data-v-9cdf3a94]{display:flex}.option-warning__icon[data-v-9cdf3a94]{color:var(--warning-main)}.option-content[data-v-9cdf3a94]{display:flex}.option-content[data-v-9cdf3a94]:not(.option-content-vertical){gap:.5rem;align-items:center}.option-content-horizontal[data-v-9cdf3a94]{justify-content:space-between;gap:.5rem}.option-content-vertical[data-v-9cdf3a94]{flex-direction:column}.option-text .main-text[data-v-9cdf3a94]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.option-text .main-text .conditional-option-label[data-v-9cdf3a94]{color:var(--text-secondary);display:inline-flex}.option-text .main-text .conditional-option-value[data-v-9cdf3a94]{margin-left:4px;display:inline-flex;color:var(--primary-main)}.option-text .caption-text[data-v-9cdf3a94]{color:var(--text-secondary)}.multiline-tooltip[data-v-9cdf3a94]{display:flex;flex-direction:column}

package/TooltipHeader.vue_vue_type_style_index_0_scoped_40d98a66_lang.css

@@ -0,0 +1 @@
+.tooltip-title-wrapper[data-v-40d98a66]{display:flex;flex-direction:column;color:var(--text-primary);margin-bottom:var(--spacing-100)}.tooltip-title-wrapper .main-title[data-v-40d98a66]{display:flex;align-items:center;gap:.25rem}.tooltip-title-wrapper .title-text[data-v-40d98a66]{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.tooltip-title-wrapper .title-image[data-v-40d98a66]{width:20px;height:20px;border-radius:4px}.tooltip-title-wrapper .tooltip-sub-title[data-v-40d98a66]{color:var(--text-secondary)}.tooltip-title-wrapper .platform-icon[data-v-40d98a66]{color:var(--action-active)}

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

@@ -8,6 +8,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     xAxisFormat?: ValueFormat;
     yAxisFormat?: ValueFormat;
     tickCount?: number;
+    truncateTickLabels?: boolean;
     loading?: boolean;
     withAnimation?: boolean;
     totalsChart?: boolean;
@@ -47,6 +48,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     yAxisFormat: string;
     parsing: any;
     tickCount: number;
+    truncateTickLabels: boolean;
     loading: boolean;
     withAnimation: boolean;
     totalsChart: boolean;
@@ -83,6 +85,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     xAxisFormat?: ValueFormat;
     yAxisFormat?: ValueFormat;
     tickCount?: number;
+    truncateTickLabels?: boolean;
     loading?: boolean;
     withAnimation?: boolean;
     totalsChart?: boolean;
@@ -122,6 +125,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     yAxisFormat: string;
     parsing: any;
     tickCount: number;
+    truncateTickLabels: boolean;
     loading: boolean;
     withAnimation: boolean;
     totalsChart: boolean;
@@ -163,8 +167,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     chartType: ChartType;
     hideLegend: boolean;
     xAxisFormat: ValueFormat;
-    yAxisFormat: ValueFormat;
+    totalsChart: boolean;
     parsing: ChartParsingConfig;
+    yAxisFormat: ValueFormat;
     dataSets: ChartDataSet[];
     trendTooltip: any;
     subheader: string;
@@ -172,13 +177,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     trendValue: string | number;
     trendDirection: "up" | "down";
     tickCount: number;
+    truncateTickLabels: boolean;
     noDataIcon: string;
     noDataTitle: string;
     noDataSubtitle: string;
     withAnimation: boolean;
     tooltipTotalType: TotalType;
     tooltipTotalCalcFn: (values: number[], totalType: TotalType) => number;
-    totalsChart: boolean;
     fullHeight: boolean;
     withSettingsHeader: boolean;
     extraCharts: Record<string, unknown>[];

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_de950ffe_lang.css"; //*');
-const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-de950ffe"]]);
+// import "../../Chart.vue_vue_type_style_index_0_scoped_4e9ce62f_lang.css"; //*');
+const c = /* @__PURE__ */ o(e, [["__scopeId", "data-v-4e9ce62f"]]);
 export {
-  p as default
+  c as default
 };

package/components/chart/Chart.vue2.js

@@ -1,31 +1,32 @@
- import "../../Chart.vue_vue_type_style_index_0_scoped_de950ffe_lang.css"; import { defineComponent as E, computed as n, openBlock as s, createElementBlock as m, Fragment as S, createBlock as x, unref as a, isRef as f, withCtx as d, renderSlot as u, createCommentVNode as I, createElementVNode as D, mergeProps as y, normalizeClass as N, createVNode as F, createSlots as U, renderList as M } from "vue";
-import { useVModel as L } from "@vueuse/core";
-import P from "./ChartLegend.vue.js";
-import O from "./SettingsHeader.vue.js";
-import k from "./ChartPlane.vue.js";
-import { useColorsMap as $ } from "./composables/useColorsMap.js";
-import { DEFAULT_TICK_COUNT as K, DEFAULT_MIN_VISIBLE as z, DEFAULT_MAX_VISIBLE as R } from "./consts.js";
-import { ChartType as X } from "./types.js";
-import { useChartHeight as j } from "./composables/useChartHeight.js";
-import { TotalType as q, calculateTotal as G } from "../../utils/totals.js";
-const J = {
+ import "../../Chart.vue_vue_type_style_index_0_scoped_4e9ce62f_lang.css"; import { defineComponent as E, ref as N, computed as n, openBlock as s, createElementBlock as f, Fragment as x, createBlock as I, unref as l, isRef as y, withCtx as d, renderSlot as u, createCommentVNode as L, createElementVNode as k, mergeProps as g, normalizeClass as M, createVNode as D, createSlots as P, renderList as O } from "vue";
+import { useVModel as F } from "@vueuse/core";
+import $ from "./ChartLegend.vue.js";
+import K from "./SettingsHeader.vue.js";
+import w from "./ChartPlane.vue.js";
+import { useColorsMap as z } from "./composables/useColorsMap.js";
+import { DEFAULT_TICK_COUNT as R, DEFAULT_MIN_VISIBLE as X, DEFAULT_MAX_VISIBLE as j } from "./consts.js";
+import { ChartType as q } from "./types.js";
+import { useChartHeight as G } from "./composables/useChartHeight.js";
+import { TotalType as J, calculateTotal as Q } from "../../utils/totals.js";
+const W = {
   key: 0,
   class: "chart-sidebar"
-}, it = /* @__PURE__ */ E({
+}, nt = /* @__PURE__ */ E({
   __name: "Chart",
   props: {
     dataSets: { default: () => [] },
     visibleIds: { default: () => [] },
-    chartType: { default: X.Line },
+    chartType: { default: q.Line },
     parsing: { default: void 0 },
     xAxisFormat: { default: "string" },
     yAxisFormat: { default: "number" },
-    tickCount: { default: K },
+    tickCount: { default: R },
+    truncateTickLabels: { type: Boolean, default: !0 },
     loading: { type: Boolean, default: !1 },
     withAnimation: { type: Boolean, default: !0 },
     totalsChart: { type: Boolean, default: !1 },
-    tooltipTotalType: { default: q.Total },
-    tooltipTotalCalcFn: { type: Function, default: G },
+    tooltipTotalType: { default: J.Total },
+    tooltipTotalCalcFn: { type: Function, default: Q },
     header: { default: "" },
     subheader: { default: "" },
     subheaderTooltip: { default: null },
@@ -36,8 +37,8 @@ const J = {
     noDataTitle: { default: "No data to display" },
     noDataSubtitle: { default: "Search again with different filters" },
     hideLegend: { type: Boolean, default: !1 },
-    minVisible: { default: z },
-    maxVisible: { default: R },
+    minVisible: { default: X },
+    maxVisible: { default: j },
     maxLimitTooltipText: { default: "" },
     sortSelected: { default: null },
     sortOptions: { default: () => [] },
@@ -47,14 +48,15 @@ const J = {
     extraCharts: { default: () => [] }
   },
   emits: ["update:chartType", "update:visibleIds", "update:sortSelected"],
-  setup(o, { emit: p }) {
-    const t = o, r = L(t, "chartType", p), c = L(t, "sortSelected", p), T = n(() => ({
+  setup(i, { emit: p }) {
+    const t = i, r = F(t, "chartType", p), c = F(t, "sortSelected", p), h = N(null), T = n(() => ({
       dataSets: t.dataSets,
       visibleIds: t.visibleIds,
       parsing: t.parsing,
       xAxisFormat: t.xAxisFormat,
       yAxisFormat: t.yAxisFormat,
       tickCount: t.tickCount,
+      truncateTickLabels: t.truncateTickLabels,
       header: t.header,
       subheader: t.subheader,
       loading: t.loading,
@@ -63,36 +65,37 @@ const J = {
       noDataSubtitle: t.noDataSubtitle,
       withAnimation: t.withAnimation,
       typeSwitcher: !t.withSettingsHeader,
-      height: H.value,
+      height: U.value,
       compactHeader: C.value > 1,
       trendValue: t.trendValue,
       trendDirection: t.trendDirection,
       trendTooltip: t.trendTooltip,
       totalsChart: t.totalsChart,
       subheaderTooltip: t.subheaderTooltip,
-      colorsMap: h.value,
+      colorsMap: m.value,
       tooltipTotalType: t.tooltipTotalType,
-      tooltipTotalCalcFn: t.tooltipTotalCalcFn
-    })), w = n(() => t.dataSets), b = n(() => t.visibleIds), g = n(() => t.extraCharts.length), C = n(() => 1 + g.value), A = (e) => e === g.value - 1, { colorsMap: h } = $({
-      dataSets: w,
+      tooltipTotalCalcFn: t.tooltipTotalCalcFn,
+      highlightedId: h.value
+    })), A = n(() => t.dataSets), b = n(() => t.visibleIds), v = n(() => t.extraCharts.length), C = n(() => 1 + v.value), B = (e) => e === v.value - 1, { colorsMap: m } = z({
+      dataSets: A,
       visibleIds: b
-    }), B = n(() => t.dataSets.map((e) => ({
+    }), V = n(() => t.dataSets.map((e) => ({
       id: e.id,
       label: e.label,
       caption: e.caption || null,
-      color: h.value[e.id] || null,
+      color: m.value[e.id] || null,
       icon: e.icon || null,
       iconType: e.iconType || "branded"
-    }))), { containerProps: V, eachPlaneHeight: H } = j({
+    }))), { containerProps: H, eachPlaneHeight: U } = G({
       chartPlanesCount: C,
       useFullHeight: t.fullHeight
     });
-    return (e, i) => (s(), m(S, null, [
-      o.withSettingsHeader ? (s(), x(O, {
+    return (e, o) => (s(), f(x, null, [
+      i.withSettingsHeader ? (s(), I(K, {
         key: 0,
-        "chart-type": a(r),
-        "onUpdate:chart-type": i[0] || (i[0] = (l) => f(r) ? r.value = l : null),
-        "hide-legend": o.hideLegend
+        "chart-type": l(r),
+        "onUpdate:chart-type": o[0] || (o[0] = (a) => y(r) ? r.value = a : null),
+        "hide-legend": i.hideLegend
       }, {
         "before-chart-type": d(() => [
           u(e.$slots, "before-chart-type", {}, void 0, !0)
@@ -104,15 +107,15 @@ const J = {
           u(e.$slots, "breakdowns", {}, void 0, !0)
         ]),
         _: 3
-      }, 8, ["chart-type", "hide-legend"])) : I("", !0),
-      D("div", y({ class: "chart-container" }, a(V)), [
-        D("section", {
-          class: N(["chart-planes", [{ "with-legend": !o.hideLegend }]])
+      }, 8, ["chart-type", "hide-legend"])) : L("", !0),
+      k("div", g({ class: "chart-container" }, l(H)), [
+        k("section", {
+          class: M(["chart-planes", [{ "with-legend": !i.hideLegend }]])
         }, [
-          F(k, y({
-            "chart-type": a(r),
-            "onUpdate:chart-type": i[1] || (i[1] = (l) => f(r) ? r.value = l : null)
-          }, a(T)), U({ _: 2 }, [
+          D(w, g({
+            "chart-type": l(r),
+            "onUpdate:chart-type": o[1] || (o[1] = (a) => y(r) ? r.value = a : null)
+          }, l(T)), P({ _: 2 }, [
             e.$slots["subheader-tooltip"] ? {
               name: "subheader-tooltip",
               fn: d(() => [
@@ -121,32 +124,34 @@ const J = {
               key: "0"
             } : void 0
           ]), 1040, ["chart-type"]),
-          (s(!0), m(S, null, M(o.extraCharts, (l, v) => (s(), x(k, y({
-            key: v,
+          (s(!0), f(x, null, O(i.extraCharts, (a, S) => (s(), I(w, g({
+            key: S,
             class: "extra-chart-plane"
-          }, { ...a(T), ...l }, {
-            "chart-type": a(r),
-            "colors-map": a(h),
+          }, { ...l(T), ...a }, {
+            "chart-type": l(r),
+            "colors-map": l(m),
             "type-switcher": !1,
-            "tooltip-respects-top-edge": !A(v)
+            "tooltip-respects-top-edge": !B(S)
           }), null, 16, ["chart-type", "colors-map", "tooltip-respects-top-edge"]))), 128))
         ], 2),
-        o.hideLegend ? I("", !0) : (s(), m("section", J, [
-          F(P, {
-            "sort-selected": a(c),
-            "onUpdate:sort-selected": i[2] || (i[2] = (l) => f(c) ? c.value = l : null),
-            items: a(B),
-            "visible-ids": a(b),
-            "max-limit-tooltip-text": o.maxLimitTooltipText,
-            "sort-options": o.sortOptions,
-            "sort-option-name-key": o.sortOptionNameKey,
-            "onUpdate:visibleIds": i[3] || (i[3] = (l) => p("update:visibleIds", l))
-          }, null, 8, ["sort-selected", "items", "visible-ids", "max-limit-tooltip-text", "sort-options", "sort-option-name-key"])
+        i.hideLegend ? L("", !0) : (s(), f("section", W, [
+          D($, {
+            "sort-selected": l(c),
+            "onUpdate:sort-selected": o[2] || (o[2] = (a) => y(c) ? c.value = a : null),
+            "highlighted-id": h.value,
+            "onUpdate:highlighted-id": o[3] || (o[3] = (a) => h.value = a),
+            items: l(V),
+            "visible-ids": l(b),
+            "max-limit-tooltip-text": i.maxLimitTooltipText,
+            "sort-options": i.sortOptions,
+            "sort-option-name-key": i.sortOptionNameKey,
+            "onUpdate:visibleIds": o[4] || (o[4] = (a) => p("update:visibleIds", a))
+          }, null, 8, ["sort-selected", "highlighted-id", "items", "visible-ids", "max-limit-tooltip-text", "sort-options", "sort-option-name-key"])
         ]))
       ], 16)
     ], 64));
   }
 });
 export {
-  it as default
+  nt as default
 };

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

@@ -2,6 +2,7 @@ import { LegendItem } from '@/components/chart/types';
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     items: LegendItem[];
     visibleIds: unknown[];
+    highlightedId?: string | number;
     minVisible?: number;
     maxVisible?: number;
     maxLimitTooltipText?: string;
@@ -11,6 +12,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>, {
     items: () => any[];
     visibleIds: () => any[];
+    highlightedId: any;
     minVisible: number;
     maxVisible: number;
     maxLimitTooltipText: string;
@@ -20,9 +22,11 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:visibleIds": (visibleIds: unknown[]) => void;
     "update:sortSelected": (sortOption: unknown) => void;
+    "update:highlightedId": (id: string | number) => void;
 }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     items: LegendItem[];
     visibleIds: unknown[];
+    highlightedId?: string | number;
     minVisible?: number;
     maxVisible?: number;
     maxLimitTooltipText?: string;
@@ -32,6 +36,7 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>, {
     items: () => any[];
     visibleIds: () => any[];
+    highlightedId: any;
     minVisible: number;
     maxVisible: number;
     maxLimitTooltipText: string;
@@ -41,9 +46,11 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
 }>>> & {
     "onUpdate:visibleIds"?: (visibleIds: unknown[]) => any;
     "onUpdate:sortSelected"?: (sortOption: unknown) => any;
+    "onUpdate:highlightedId"?: (id: string | number) => any;
 }, {
     items: LegendItem[];
     visibleIds: unknown[];
+    highlightedId: string | number;
     minVisible: number;
     maxVisible: number;
     maxLimitTooltipText: string;

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_da487aba_lang.css"; //*');
-const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-da487aba"]]);
+// import "../../ChartLegend.vue_vue_type_style_index_0_scoped_fd9e4ea2_lang.css"; //*');
+const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-fd9e4ea2"]]);
 export {
-  s as default
+  a as default
 };

package/components/chart/ChartLegend.vue2.js

@@ -1,144 +1,151 @@
- import "../../ChartLegend.vue_vue_type_style_index_0_scoped_da487aba_lang.css"; import { defineComponent as O, ref as P, computed as b, openBlock as s, createElementBlock as p, createElementVNode as d, createVNode as c, unref as o, createBlock as v, isRef as U, createCommentVNode as h, mergeProps as T, withCtx as u, createTextVNode as x, Fragment as A, renderList as F, normalizeClass as H, withModifiers as R, toDisplayString as _ } from "vue";
-import { useVModel as z, useVirtualList as K } from "@vueuse/core";
+ import "../../ChartLegend.vue_vue_type_style_index_0_scoped_fd9e4ea2_lang.css"; import { defineComponent as F, ref as H, computed as v, openBlock as s, createElementBlock as u, createElementVNode as r, createVNode as c, unref as o, createBlock as g, isRef as R, createCommentVNode as x, mergeProps as T, withCtx as p, createTextVNode as I, Fragment as $, renderList as z, normalizeClass as K, withModifiers as q, toDisplayString as V } from "vue";
+import { useVModel as C, useVirtualList as G } from "@vueuse/core";
 import k from "../typography/v4/Typography.vue.js";
-import $ from "../checkbox/v4/CheckboxV4.vue.js";
-import q from "../search/v4/SearchV4.vue.js";
-import { DEFAULT_MIN_VISIBLE as G, DEFAULT_MAX_VISIBLE as X } from "./consts.js";
-import j from "../icon/v4/IconV4.vue.js";
+import X from "../checkbox/v4/CheckboxV4.vue.js";
+import j from "../search/v4/SearchV4.vue.js";
+import { DEFAULT_MIN_VISIBLE as J, DEFAULT_MAX_VISIBLE as Q } from "./consts.js";
+import W from "../icon/v4/IconV4.vue.js";
 import "../icon/v4/IconFlag.vue.js";
-import J from "../tooltip/v4/TooltipV4.vue.js";
-import Q from "./LegendSorting.vue.js";
-const W = { class: "chart-legend" }, Y = { class: "search-box" }, Z = {
+import Y from "../tooltip/v4/TooltipV4.vue.js";
+import Z from "./LegendSorting.vue.js";
+const ee = { class: "chart-legend" }, te = { class: "search-box" }, oe = {
   key: 0,
   class: "empty-list"
-}, ee = ["onClick"], te = { class: "label-container" }, ue = /* @__PURE__ */ O({
+}, le = ["onMouseenter"], ie = ["onClick"], se = { class: "label-container" }, be = /* @__PURE__ */ F({
   __name: "ChartLegend",
   props: {
     items: { default: () => [] },
     visibleIds: { default: () => [] },
-    minVisible: { default: G },
-    maxVisible: { default: X },
+    highlightedId: { default: null },
+    minVisible: { default: J },
+    maxVisible: { default: Q },
     maxLimitTooltipText: { default: "" },
     sortSelected: { default: null },
     sortOptions: { default: () => [] },
     sortOptionNameKey: { default: "" }
   },
-  emits: ["update:visibleIds", "update:sortSelected"],
-  setup(a, { emit: y }) {
-    const i = a, V = 32, m = z(i, "sortSelected", y), f = P(""), C = b(() => {
+  emits: ["update:visibleIds", "update:sortSelected", "update:highlightedId"],
+  setup(a, { emit: m }) {
+    const l = a, M = 32, h = C(l, "sortSelected", m), y = C(l, "highlightedId", m), w = (t) => {
+      y.value = n(t) ? t.id : null;
+    }, E = () => {
+      y.value = null;
+    }, f = H(""), S = v(() => {
       const t = f.value.toLowerCase();
-      return i.items.filter(
-        (l) => l.label.toLowerCase().includes(t)
+      return l.items.filter(
+        (i) => i.label.toLowerCase().includes(t)
       );
-    }), n = (t) => i.visibleIds.includes(t.id), I = b(
-      () => i.visibleIds.length >= i.maxVisible
-    ), w = b(
-      () => i.visibleIds.length <= i.minVisible
-    ), r = (t) => w.value && n(t) || I.value && !n(t), S = (t) => !i.maxLimitTooltipText || n(t) || !I.value, E = (t, l) => {
-      y(
+    }), n = (t) => l.visibleIds.includes(t.id), L = v(
+      () => l.visibleIds.length >= l.maxVisible
+    ), N = v(
+      () => l.visibleIds.length <= l.minVisible
+    ), d = (t) => N.value && n(t) || L.value && !n(t), B = (t) => !l.maxLimitTooltipText || n(t) || !L.value, D = (t, i) => {
+      m(
         "update:visibleIds",
-        t ? [...i.visibleIds, l.id] : i.visibleIds.filter((e) => e !== l.id)
+        t ? [...l.visibleIds, i.id] : l.visibleIds.filter((e) => e !== i.id)
       );
-    }, { list: g, containerProps: N, wrapperProps: M } = K(C, {
-      itemHeight: V,
+    }, { list: _, containerProps: O, wrapperProps: P } = G(S, {
+      itemHeight: M,
       overscan: 10
-    }), B = (t) => {
-      r(t) || E(!n(t), t);
+    }), U = (t) => {
+      d(t) || D(!n(t), t);
     };
-    return (t, l) => (s(), p("div", W, [
-      d("div", Y, [
-        c(o(q), {
+    return (t, i) => (s(), u("div", ee, [
+      r("div", te, [
+        c(o(j), {
           modelValue: f.value,
-          "onUpdate:modelValue": l[0] || (l[0] = (e) => f.value = e)
+          "onUpdate:modelValue": i[0] || (i[0] = (e) => f.value = e)
         }, null, 8, ["modelValue"]),
-        a.sortOptions?.length > 0 ? (s(), v(Q, {
+        a.sortOptions?.length > 0 ? (s(), g(Z, {
           key: 0,
-          selected: o(m),
-          "onUpdate:selected": l[1] || (l[1] = (e) => U(m) ? m.value = e : null),
+          selected: o(h),
+          "onUpdate:selected": i[1] || (i[1] = (e) => R(h) ? h.value = e : null),
           options: a.sortOptions,
           "option-name-key": a.sortOptionNameKey
-        }, null, 8, ["selected", "options", "option-name-key"])) : h("", !0)
+        }, null, 8, ["selected", "options", "option-name-key"])) : x("", !0)
       ]),
-      d("div", T({ class: "legend" }, o(N)), [
-        d("ul", T({ class: "legend__list" }, o(M)), [
-          o(g).length === 0 ? (s(), p("li", Z, [
+      r("div", T({ class: "legend" }, o(O)), [
+        r("ul", T({ class: "legend__list" }, o(P)), [
+          o(_).length === 0 ? (s(), u("li", oe, [
             c(o(k), { variant: "body2" }, {
-              default: u(() => [
-                x("No results")
+              default: p(() => [
+                I("No results")
               ]),
               _: 1
             })
-          ])) : (s(!0), p(A, { key: 1 }, F(o(g), ({ data: e, index: D }) => (s(), p("li", {
-            key: D,
-            class: H({ "disabled-item": r(e) })
+          ])) : (s(!0), u($, { key: 1 }, z(o(_), ({ data: e, index: A }) => (s(), u("li", {
+            key: A,
+            class: K({ "disabled-item": d(e) }),
+            onMouseenter: (b) => w(e),
+            onMouseleave: E
           }, [
-            c(o(J), {
+            c(o(Y), {
               text: a.maxLimitTooltipText,
-              disabled: S(e),
+              disabled: B(e),
               class: "disabled-tooltip"
             }, {
-              default: u(() => [
-                d("div", {
+              default: p(() => [
+                r("div", {
                   class: "item-wrapper",
-                  onClick: (L) => B(e)
+                  onClick: (b) => U(e)
                 }, [
-                  c(o($), {
+                  c(o(X), {
                     color: e.color,
                     "is-checked": n(e),
-                    disabled: r(e),
-                    onClick: l[2] || (l[2] = R(
-                      (L) => {
-                        L.stopPropagation();
+                    disabled: d(e),
+                    onClick: i[2] || (i[2] = q(
+                      (b) => {
+                        b.stopPropagation();
                       },
                       ["stop"]
                     ))
                   }, null, 8, ["color", "is-checked", "disabled"]),
-                  e.icon ? (s(), v(o(j), {
+                  e.icon ? (s(), g(o(W), {
                     key: 0,
                     class: "icon-color",
                     type: e.iconType,
                     name: e.icon,
                     size: "16px"
-                  }, null, 8, ["type", "name"])) : h("", !0),
-                  d("div", te, [
+                  }, null, 8, ["type", "name"])) : x("", !0),
+                  r("div", se, [
                     c(o(k), {
                       variant: "body2",
                       class: "legend-label",
                       "is-truncated": "",
-                      "with-tooltip": !r(e),
+                      "with-tooltip": !d(e),
                       "tooltip-text": e.label,
                       "tooltip-placement": "left"
                     }, {
-                      default: u(() => [
-                        x(_(e.label), 1)
+                      default: p(() => [
+                        I(V(e.label), 1)
                       ]),
                       _: 2
                     }, 1032, ["with-tooltip", "tooltip-text"]),
-                    e.caption ? (s(), v(o(k), {
+                    e.caption ? (s(), g(o(k), {
                       key: 0,
                       variant: "caption",
                       class: "legend-caption legend-label",
                       "is-truncated": "",
-                      "with-tooltip": !r(e),
+                      "with-tooltip": !d(e),
                       "tooltip-text": e.caption,
                       "tooltip-placement": "left"
                     }, {
-                      default: u(() => [
-                        x(_(e.caption), 1)
+                      default: p(() => [
+                        I(V(e.caption), 1)
                       ]),
                       _: 2
-                    }, 1032, ["with-tooltip", "tooltip-text"])) : h("", !0)
+                    }, 1032, ["with-tooltip", "tooltip-text"])) : x("", !0)
                   ])
-                ], 8, ee)
+                ], 8, ie)
               ]),
               _: 2
             }, 1032, ["text", "disabled"])
-          ], 2))), 128))
+          ], 42, le))), 128))
         ], 16)
       ], 16)
     ]));
   }
 });
 export {
-  ue as default
+  be as default
 };