@ironsource/shared-ui 2.1.11-rc.22 → 2.1.11-rc.23

package/Chart.vue_vue_type_style_index_0_scoped_8f471697_lang.css

@@ -0,0 +1 @@
+.chart-container[data-v-8f471697]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;height:388px;border-radius:0 0 6px 6px;width:100%}.header-wrapper[data-v-8f471697]{height:76px}.chart-content[data-v-8f471697]{width:100%}.chart-content.with-legend[data-v-8f471697]{width:calc(100% - 222px)}.chart-sidebar[data-v-8f471697]{border-left:1px solid var(--common-divider)}.chart[data-v-8f471697]{width:100%;height:312px;position:relative}.chart__canvas[data-v-8f471697]{width:100%;height:100%}.chart__tooltip[data-v-8f471697]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px}

package/FiltersPanelV4.vue_vue_type_style_index_0_scoped_111b200a_lang.css

@@ -0,0 +1 @@
+.filters-panel[data-v-111b200a]{display:flex;flex-wrap:wrap;gap:var(--spacing-50)}.filters-panel[data-v-111b200a] .dropdown{padding:0}

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 _ from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../Chart.vue_vue_type_style_index_0_scoped_8f471697_lang.css"; //*');
+const p = /* @__PURE__ */ _(o, [["__scopeId", "data-v-8f471697"]]);
 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_8f471697_lang.css"; import { defineComponent as j, ref as g, computed as i, onMounted as q, watch as C, nextTick as J, 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, normalizeClass as Q, createVNode as F, normalizeStyle as Y } from "vue";
+import { useVModel as _ } from "@vueuse/core";
+import { Chart as N, ArcElement as ee, LineElement as te, BarElement as ae, PointElement as oe, LineController as re, BarController as ie, PieController as le, ScatterController as ne, CategoryScale as se, LinearScale as de, Filler as ue, Tooltip as ce } from "chart.js";
+import { HoverVerticalLine as fe } from "./plugins/HoverVerticalLine.js";
+import { formatValue as H, calcStepSize as pe } from "./utils/utils.js";
+import { DEFAULT_TICK_COUNT as he, DEFAULT_MIN_VISIBLE as me, DEFAULT_MAX_VISIBLE as ve, COLOR_PALETTE as be, POINT_BORDER_COLOR as ye, TICK_LABEL_COLOR as P, TICK_LABEL_FONT as U, 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 { 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 { useTooltipPosition as ge } from "./composables/useTooltipPosition.js";
+import Ce from "./ChartTooltip.vue.js";
+import ke from "./ChartLegend.vue.js";
+import Te from "./ChartHeader.vue.js";
+import { hexColorToRgba as Se } from "../../utils/color.js";
+import { useChartValues as Le } from "./composables/useChartValues.js";
+import xe from "./ChartLoader.vue.js";
+import Be from "../emptyState/v4/EmptyStateV4.vue.js";
+import Ie from "./SettingsHeader.vue.js";
+const we = { class: "chart-container" }, Ae = { class: "header-wrapper" }, Ee = { class: "chart" }, Re = {
   key: 0,
   class: "chart-sidebar"
-}, Xe = /* @__PURE__ */ X({
+}, je = /* @__PURE__ */ j({
   __name: "Chart",
   props: {
     dataSets: { default: () => [] },
@@ -26,13 +26,13 @@ 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: he },
     header: { default: "" },
     subheader: { default: "" },
     subheaderTooltip: { default: "" },
     hideLegend: { type: Boolean, default: !1 },
-    minVisible: { default: he },
-    maxVisible: { default: me },
+    minVisible: { default: me },
+    maxVisible: { default: ve },
     loading: { type: Boolean, default: !1 },
     noDataIcon: { default: "file-x" },
     noDataTitle: { default: "No data to display" },
@@ -43,7 +43,6 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
   setup(a, { emit: T }) {
     const t = a;
     N.register(
-      Y,
       ee,
       te,
       ae,
@@ -55,18 +54,19 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
       se,
       de,
       ue,
-      ce
+      ce,
+      fe
     );
-    const c = Q(t, "chartType", T), p = g(null);
+    const c = _(t, "chartType", T), p = 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 = () => {
+    }, M = () => {
       s && (s.data.datasets = y.value, s.options = B.value.options, s.update());
     };
-    j(b), C(() => t.chartType, b), C(L, async (e) => {
-      e && (await q(), b());
-    }), C([() => t.visibleIds, () => t.dataSets], z);
+    q(b), C(() => t.chartType, b), C(L, async (e) => {
+      e && (await J(), b());
+    }), C([() => t.visibleIds, () => t.dataSets], M);
     const h = i(
       () => t.chartType === n.StackedLine || t.chartType === n.StackedBar
     ), $ = i(
@@ -74,11 +74,11 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
     ), x = i(
       () => t.dataSets.filter((e) => t.visibleIds.includes(e.id))
     ), y = i(() => x.value.map((e, o) => {
-      const r = e.color || ve[o] || "#000000";
+      const r = e.color || be[o] || "#000000";
       return {
         ...e,
         fill: h.value ? "start" : void 0,
-        backgroundColor: Te(
+        backgroundColor: Se(
           r,
           t.chartType === n.StackedLine ? 10 : 70
         ),
@@ -118,7 +118,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
               },
               callbacks: {
                 footer: (e) => {
-                  const o = e.reduce((r, G) => r + (G.parsed.y || 0), 0);
+                  const o = e.reduce((r, X) => r + (X.parsed.y || 0), 0);
                   return ["Total", String(o)];
                 }
               }
@@ -146,7 +146,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
               borderWidth: 0,
               hoverRadius: 4,
               hoverBorderWidth: 2,
-              pointHoverBackgroundColor: be
+              pointHoverBackgroundColor: ye
             },
             bar: {
               borderRadius: 4
@@ -173,7 +173,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
               },
               // grid lines
               grid: {
-                color: M,
+                color: z,
                 drawOnChartArea: !1,
                 drawTicks: !0,
                 drawBorder: !1,
@@ -199,7 +199,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
               },
               // grid lines
               grid: {
-                color: M,
+                color: z,
                 drawOnChartArea: !0,
                 drawTicks: !1
               }
@@ -213,7 +213,7 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
       id: e.id,
       label: e.label,
       color: K.value[e.id] || null
-    }))), I = g(null), l = g(null), { position: w } = ye(
+    }))), I = g(null), l = g(null), { position: w } = ge(
       p,
       I,
       l
@@ -221,15 +221,15 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
       left: `${w.value.left}px`,
       top: `${w.value.top}px`,
       opacity: l.value?.opacity || 0
-    })), { minValue: A, maxValue: _ } = Se({
+    })), { minValue: A, maxValue: G } = Le({
       parsingConfig: t.parsing,
       dataSets: x,
       isStacked: h
     }), E = i(
-      () => fe(A.value, _.value, t.tickCount)
+      () => pe(A.value, G.value, t.tickCount)
     );
     return (e, o) => (d(), k(R, null, [
-      a.withSettingsHeader ? (d(), m(Be, {
+      a.withSettingsHeader ? (d(), m(Ie, {
         key: 0,
         "chart-type": u(c),
         "onUpdate:chart-type": o[0] || (o[0] = (r) => V(c) ? c.value = r : null),
@@ -243,11 +243,13 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
         ]),
         _: 3
       }, 8, ["chart-type", "hide-legend"])) : v("", !0),
-      f("div", Ie, [
+      f("div", we, [
         u(L) ? (d(), k(R, { key: 0 }, [
-          f("section", we, [
+          f("section", {
+            class: Q(["chart-content", [{ "with-legend": !a.hideLegend }]])
+          }, [
             f("div", Ae, [
-              F(ke, {
+              F(Te, {
                 "chart-type": u(c),
                 "onUpdate:chart-type": o[1] || (o[1] = (r) => V(c) ? c.value = r : null),
                 "with-settings-header": a.withSettingsHeader,
@@ -266,9 +268,9 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
                 ref_key: "tooltipRef",
                 ref: I,
                 class: "chart__tooltip",
-                style: J(u(Z))
+                style: Y(u(Z))
               }, [
-                l.value ? (d(), m(ge, {
+                l.value ? (d(), m(Ce, {
                   key: 0,
                   title: String(l.value.title),
                   "data-points": l.value.dataPoints,
@@ -279,15 +281,15 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
                 }, null, 8, ["title", "data-points", "x-axis-format", "y-axis-format", "total-label", "total-value"])) : v("", !0)
               ], 4)
             ])
-          ]),
+          ], 2),
           a.hideLegend ? v("", !0) : (d(), k("section", Re, [
-            F(Ce, {
+            F(ke, {
               items: u(W),
               "visible-ids": a.visibleIds,
               "onUpdate:visibleIds": o[2] || (o[2] = (r) => T("update:visibleIds", r))
             }, null, 8, ["items", "visible-ids"])
           ]))
-        ], 64)) : a.loading ? (d(), m(Le, { key: 1 })) : u(S) ? (d(), m(u(xe), {
+        ], 64)) : a.loading ? (d(), m(xe, { key: 1 })) : u(S) ? (d(), m(u(Be), {
           key: 2,
           title: a.noDataTitle,
           subtitle: a.noDataSubtitle,
@@ -298,5 +300,5 @@ const Ie = { class: "chart-container" }, we = { class: "chart-content" }, Ae = {
   }
 });
 export {
-  Xe as default
+  je as default
 };

package/components/filtersPanel/v4/FiltersPanelV4.vue.js

@@ -1,7 +1,7 @@
 import e from "./FiltersPanelV4.vue2.js";
 /* empty css                     */import o from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../FiltersPanelV4.vue_vue_type_style_index_0_scoped_39061862_lang.css"; //*');
-const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-39061862"]]);
+// import "../../../FiltersPanelV4.vue_vue_type_style_index_0_scoped_111b200a_lang.css"; //*');
+const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-111b200a"]]);
 export {
-  p as default
+  a as default
 };

package/components/filtersPanel/v4/FiltersPanelV4.vue2.js

@@ -1,23 +1,22 @@
- import "../../../FiltersPanelV4.vue_vue_type_style_index_0_scoped_39061862_lang.css"; import { defineComponent as a, openBlock as t, createElementBlock as r, Fragment as d, renderList as i, renderSlot as l, normalizeProps as c, guardReactiveProps as p } from "vue";
-const u = { class: "filters-panel" }, m = ["data-testid"], h = /* @__PURE__ */ a({
+ import "../../../FiltersPanelV4.vue_vue_type_style_index_0_scoped_111b200a_lang.css"; import { defineComponent as d, openBlock as t, createElementBlock as s, Fragment as a, renderList as i, renderSlot as l, normalizeProps as c, guardReactiveProps as u } from "vue";
+const p = { class: "filters-panel" }, m = ["data-testid"], v = /* @__PURE__ */ d({
   __name: "FiltersPanelV4",
   props: {
     filters: null,
     testId: { default: "" }
   },
-  setup(s) {
-    const n = s;
-    return (o, f) => (t(), r("div", u, [
-      (t(!0), r(d, null, i(s.filters, (e) => (t(), r("div", {
+  setup(r) {
+    const n = r;
+    return (o, _) => (t(), s("div", p, [
+      (t(!0), s(a, null, i(r.filters, (e) => (t(), s("div", {
         key: e.id,
-        class: "filter-chip-wrapper",
         "data-testid": `${n.testId}-filter-${e.id}`
       }, [
-        l(o.$slots, e.id, c(p({ filter: e })), void 0, !0)
+        l(o.$slots, e.id, c(u({ filter: e })), void 0, !0)
       ], 8, m))), 128))
     ]));
   }
 });
 export {
-  h as default
+  v as default
 };

package/index.js

@@ -1,4 +1,4 @@
-import './AppTrigger.vue_vue_type_style_index_0_scoped_121aac8b_lang.css';
+import './MenuItem.vue_vue_type_style_index_0_scoped_67e53b85_lang.css';
 import { AppTriggerTypes as ro } from "./components/appTrigger/index.js";
 import { AutocompleteDropdownTypes as mo } from "./components/autocompleteDropdown/index.js";
 import { MenuItemTypes as po } from "./components/menuItem/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ironsource/shared-ui",
-  "version": "2.1.11-rc.22",
+  "version": "2.1.11-rc.23",
   "engines": {
     "npm": ">=7.0.0",
     "node": ">=16.0.0"

package/Chart.vue_vue_type_style_index_0_scoped_ea1e5c3e_lang.css

@@ -1 +0,0 @@
-.chart-container[data-v-ea1e5c3e]{border:1px solid var(--common-divider);background:var(--background-paper);display:flex;height:388px;border-radius:0 0 6px 6px}.header-wrapper[data-v-ea1e5c3e]{height:76px}.chart-content[data-v-ea1e5c3e]{flex:1}.chart-sidebar[data-v-ea1e5c3e]{border-left:1px solid var(--common-divider)}.chart[data-v-ea1e5c3e]{width:100%;height:312px;position:relative}.chart__canvas[data-v-ea1e5c3e]{width:100%;height:100%}.chart__tooltip[data-v-ea1e5c3e]{position:absolute;pointer-events:none;transition:all .1s ease;min-width:214px;max-width:270px}

package/FiltersPanelV4.vue_vue_type_style_index_0_scoped_39061862_lang.css

@@ -1 +0,0 @@
-.filters-panel[data-v-39061862]{display:flex}.filters-panel[data-v-39061862] .dropdown{padding:0}.filter-chip-wrapper[data-v-39061862]{margin-right:var(--spacing-50)}