@ironsource/shared-ui 2.1.7-rc.3 → 2.1.7-rc.5

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

@@ -0,0 +1,91 @@
+ import "../../../ButtonV4.vue_vue_type_style_index_0_scoped_8c3b0c3f_lang.css"; import { defineComponent as N, computed as h, openBlock as a, createElementBlock as s, normalizeClass as i, createElementVNode as r, createBlock as f, unref as t, createCommentVNode as n, createVNode as c, withCtx as m, renderSlot as u, createTextVNode as z, toDisplayString as g } from "vue";
+import I from "../../typography/v4/Typography.vue.js";
+import y from "../../icon/v4/IconV4.vue.js";
+import "../../icon/v4/IconFlag.vue.js";
+import b from "../../loader/v4/Loader.vue.js";
+const k = ["data-testid", "disabled"], v = { key: 0 }, $ = /* @__PURE__ */ N({
+  __name: "ButtonV4",
+  props: {
+    variant: { default: "contained" },
+    color: { default: "primary" },
+    size: { default: "medium" },
+    loading: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    testId: { default: "" },
+    content: { default: "" },
+    startIconName: { default: null },
+    endIconName: { default: null },
+    startIconType: { default: "regular" },
+    endIconType: { default: "regular" }
+  },
+  setup(e) {
+    const o = e, d = h(
+      () => o.size === "small" || o.size === "medium" ? 16 : 20
+    );
+    return (l, w) => (a(), s("button", {
+      class: i([[
+        e.size,
+        e.color,
+        e.variant,
+        { loading: e.loading },
+        {
+          "with-start-icon": !!e.startIconName,
+          "with-end-icon": !!e.endIconName
+        }
+      ], "button-wrap"]),
+      "data-testid": o.testId,
+      disabled: e.disabled
+    }, [
+      e.loading ? n("", !0) : (a(), s("span", v, [
+        r("div", {
+          class: i({
+            flex: e.startIconName || e.endIconName
+          })
+        }, [
+          e.startIconName ? (a(), f(t(y), {
+            key: 0,
+            name: e.startIconName,
+            size: `${t(d)}px`,
+            type: e.startIconType,
+            class: "start-icon"
+          }, null, 8, ["name", "size", "type"])) : n("", !0),
+          c(t(I), { variant: "button" }, {
+            default: m(() => [
+              u(l.$slots, "default", {}, () => [
+                z(g(e.content), 1)
+              ], !0)
+            ]),
+            _: 3
+          }),
+          e.endIconName ? (a(), f(t(y), {
+            key: 1,
+            name: e.endIconName,
+            size: `${t(d)}px`,
+            type: e.endIconType,
+            class: "end-icon"
+          }, null, 8, ["name", "size", "type"])) : n("", !0)
+        ], 2)
+      ])),
+      e.loading ? u(l.$slots, "loader", { key: 1 }, () => [
+        c(t(b), { "max-width": t(d) }, {
+          default: m(() => [
+            r("div", {
+              class: i({ "content-with-icon": e.startIconName || e.endIconName })
+            }, [
+              c(t(I), { variant: "button" }, {
+                default: m(() => [
+                  u(l.$slots, "default", {}, void 0, !0)
+                ]),
+                _: 3
+              })
+            ], 2)
+          ]),
+          _: 3
+        }, 8, ["max-width"])
+      ], !0) : n("", !0)
+    ], 10, k));
+  }
+});
+export {
+  $ as default
+};

package/components/button/v4/IconButtonV4.vue.js

@@ -0,0 +1,7 @@
+import o from "./IconButtonV4.vue2.js";
+/* empty css                   */import e from "../../../_virtual/_plugin-vue_export-helper.js";
+// import "../../../IconButtonV4.vue_vue_type_style_index_0_scoped_4eefa06b_lang.css"; //*');
+const c = /* @__PURE__ */ e(o, [["__scopeId", "data-v-4eefa06b"]]);
+export {
+  c as default
+};

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

@@ -0,0 +1,46 @@
+ import "../../../IconButtonV4.vue_vue_type_style_index_0_scoped_4eefa06b_lang.css"; import { defineComponent as o, computed as l, openBlock as r, createElementBlock as i, normalizeClass as c, unref as a, renderSlot as u, createVNode as m } from "vue";
+import f from "../../icon/v4/IconV4.vue.js";
+import "../../icon/v4/IconFlag.vue.js";
+const p = ["data-testid", "disabled"], I = /* @__PURE__ */ o({
+  __name: "IconButtonV4",
+  props: {
+    variant: { default: "default" },
+    color: { default: "default" },
+    size: { default: "medium" },
+    type: { default: "regular" },
+    iconName: { default: "pencil-simple" },
+    disabled: { type: Boolean, default: !1 },
+    testId: { default: "" }
+  },
+  setup(e) {
+    const t = e, n = l(() => {
+      switch (t.size) {
+        case "extraSmall":
+          return "16px";
+        case "small":
+        case "medium":
+          return "20px";
+        case "large":
+        case "extraLarge":
+        default:
+          return "24px";
+      }
+    }), s = l(() => `variant-${t.variant}`);
+    return (d, b) => (r(), i("button", {
+      class: c([[e.size, e.color, a(s)], "button-wrap"]),
+      "data-testid": t.testId,
+      disabled: e.disabled
+    }, [
+      u(d.$slots, "default", {}, () => [
+        m(a(f), {
+          type: e.type,
+          name: e.iconName || "pencil-simple",
+          size: a(n)
+        }, null, 8, ["type", "name", "size"])
+      ], !0)
+    ], 10, p));
+  }
+});
+export {
+  I as default
+};

package/components/chart/Chart.vue.js

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

package/components/chart/Chart.vue2.js

@@ -0,0 +1,281 @@
+ import "../../Chart.vue_vue_type_style_index_0_scoped_f06a4764_lang.css"; import { defineComponent as W, ref as y, computed as r, onMounted as Z, watch as b, nextTick as $, openBlock as d, createElementBlock as C, unref as c, Fragment as G, createElementVNode as u, createVNode as V, isRef as X, normalizeStyle as j, createBlock as g, createCommentVNode as T } from "vue";
+import { useVModel as q } from "@vueuse/core";
+import { Chart as O, ArcElement as J, LineElement as Q, BarElement as Y, PointElement as ee, LineController as te, BarController as ae, PieController as oe, ScatterController as re, CategoryScale as ie, LinearScale as le, Filler as ne, Tooltip as se } from "chart.js";
+import { HoverVerticalLine as de } from "./plugins/HoverVerticalLine.js";
+import { formatValue as D, calcStepSize as ce } from "./utils/utils.js";
+import { DEFAULT_TICK_COUNT as ue, DEFAULT_MIN_VISIBLE as pe, DEFAULT_MAX_VISIBLE as fe, COLOR_PALETTE as me, POINT_BORDER_COLOR as he, TICK_LABEL_COLOR as F, TICK_LABEL_FONT as _, GRID_LINE_COLOR as w } from "./consts.js";
+import { ChartType as n } from "./types.js";
+import { useTooltipPosition as ve } from "./composables/useTooltipPosition.js";
+import ye from "./ChartTooltip.vue.js";
+import be from "./ChartLegend.vue.js";
+import Ce from "./ChartHeader.vue.js";
+import { hexColorToRgba as ge } from "../../utils/color.js";
+import { useChartValues as Te } from "./composables/useChartValues.js";
+import ke from "./ChartLoader.vue.js";
+import Le from "../emptyState/v4/EmptyStateV4.vue.js";
+const xe = { class: "chart-container" }, Se = { class: "chart-content" }, Ie = { class: "header-wrapper" }, Be = { class: "chart" }, Ae = {
+  key: 0,
+  class: "chart-sidebar"
+}, We = /* @__PURE__ */ W({
+  __name: "Chart",
+  props: {
+    dataSets: { default: () => [] },
+    visibleIds: { default: () => [] },
+    chartType: { default: n.Line },
+    parsing: { default: void 0 },
+    xAxisFormat: { default: "string" },
+    yAxisFormat: { default: "number" },
+    tickCount: { default: ue },
+    header: { default: "" },
+    subheader: { default: "" },
+    hideLegend: { type: Boolean, default: !1 },
+    minVisible: { default: pe },
+    maxVisible: { default: fe },
+    loading: { type: Boolean, default: !1 },
+    noDataIcon: { default: "file-x" },
+    noDataTitle: { default: "No data to display" },
+    noDataSubtitle: { default: "Search again with different filters" }
+  },
+  emits: ["update:chartType", "update:visibleIds"],
+  setup(a, { emit: k }) {
+    const e = a;
+    O.register(
+      J,
+      Q,
+      Y,
+      ee,
+      te,
+      ae,
+      oe,
+      re,
+      ie,
+      le,
+      ne,
+      se,
+      de
+    );
+    const m = q(e, "chartType", k), p = y(null);
+    let s = null;
+    const L = r(() => e.dataSets.length === 0), x = r(() => !e.loading && !L.value), h = () => {
+      p.value && (s && s.destroy(), s = new O(p.value, I.value));
+    }, N = () => {
+      s && (s.data.datasets = v.value, s.options = I.value.options, s.update());
+    };
+    Z(h), b(() => e.chartType, h), b(x, async (t) => {
+      t && (await $(), h());
+    }), b([() => e.visibleIds, () => e.dataSets], N);
+    const f = r(
+      () => e.chartType === n.StackedLine || e.chartType === n.StackedBar
+    ), P = r(
+      () => e.chartType === n.Line || e.chartType === n.StackedLine
+    ), S = r(
+      () => e.dataSets.filter((t) => e.visibleIds.includes(t.id))
+    ), v = r(() => S.value.map((t, o) => {
+      const i = t.color || me[o] || "#000000";
+      return {
+        ...t,
+        fill: f.value ? "start" : void 0,
+        backgroundColor: ge(
+          i,
+          e.chartType === n.StackedLine ? 10 : 70
+        ),
+        borderColor: i,
+        pointBackgroundColor: i,
+        pointHoverBorderColor: i,
+        maxBarThickness: 50,
+        clip: 5
+        // draw a bit outside the chart area
+      };
+    })), I = r(
+      () => ({
+        type: e.chartType == n.Bar || e.chartType === n.StackedBar ? "bar" : "line",
+        // Chart Data
+        data: {
+          datasets: v.value
+        },
+        // Chart Options
+        options: {
+          parsing: e.parsing,
+          interaction: {
+            intersect: !1,
+            mode: "index",
+            axis: "x"
+          },
+          // plugins
+          plugins: {
+            legend: { display: !1 },
+            title: { display: !1 },
+            hoverVerticalLine: P.value,
+            // tooltip
+            tooltip: {
+              enabled: !1,
+              position: "average",
+              external: ({ tooltip: t }) => {
+                l.value = { ...t };
+              },
+              callbacks: {
+                footer: (t) => {
+                  const o = t.reduce((i, K) => i + (K.parsed.y || 0), 0);
+                  return ["Total", String(o)];
+                }
+              }
+            }
+          },
+          // chart layout
+          responsive: !0,
+          maintainAspectRatio: !1,
+          layout: {
+            padding: {
+              left: 18,
+              top: 18,
+              bottom: 13
+            }
+          },
+          // basic styles
+          elements: {
+            line: {
+              borderWidth: 2,
+              tension: 0.3
+            },
+            point: {
+              radius: 1,
+              hitRadius: 8,
+              borderWidth: 0,
+              hoverRadius: 4,
+              hoverBorderWidth: 2,
+              pointHoverBackgroundColor: he
+            },
+            bar: {
+              borderRadius: 4
+            }
+          },
+          scales: {
+            // Horizontal Axis (X)
+            x: {
+              beginAtZero: !0,
+              border: { display: !1 },
+              stacked: f.value,
+              // stack on top of each other
+              // ticks
+              ticks: {
+                color: F,
+                font: _,
+                padding: 4,
+                callback: function(t) {
+                  return D(
+                    this.getLabelForValue(t),
+                    e.xAxisFormat
+                  );
+                }
+              },
+              // grid lines
+              grid: {
+                color: w,
+                drawOnChartArea: !1,
+                drawTicks: !0,
+                drawBorder: !1,
+                tickLength: 7
+              }
+            },
+            // Vertical Axis (Y)
+            y: {
+              beginAtZero: !0,
+              border: { display: !1 },
+              // hide left borderline
+              stacked: f.value,
+              // stack on top of each other
+              // ticks
+              ticks: {
+                color: F,
+                font: _,
+                padding: 8,
+                stepSize: R.value,
+                min: E.value,
+                max: R.value * e.tickCount,
+                callback: (t) => D(t, e.yAxisFormat)
+              },
+              // grid lines
+              grid: {
+                color: w,
+                drawOnChartArea: !0,
+                drawTicks: !1
+              }
+            }
+          }
+        }
+      })
+    ), M = r(
+      () => v.value.reduce((t, o) => (t[o.id] = o.borderColor, t), {})
+    ), U = r(() => e.dataSets.map((t) => ({
+      id: t.id,
+      label: t.label,
+      color: M.value[t.id] || null
+    }))), B = y(null), l = y(null), { position: A } = ve(
+      p,
+      B,
+      l
+    ), z = r(() => ({
+      left: `${A.value.left}px`,
+      top: `${A.value.top}px`,
+      opacity: l.value?.opacity || 0
+    })), { minValue: E, maxValue: H } = Te({
+      parsingConfig: e.parsing,
+      dataSets: S,
+      isStacked: f
+    }), R = r(
+      () => ce(E.value, H.value, e.tickCount)
+    );
+    return (t, o) => (d(), C("div", xe, [
+      c(x) ? (d(), C(G, { key: 0 }, [
+        u("section", Se, [
+          u("div", Ie, [
+            V(Ce, {
+              "chart-type": c(m),
+              "onUpdate:chart-type": o[0] || (o[0] = (i) => X(m) ? m.value = i : null),
+              header: a.header,
+              subheader: a.subheader
+            }, null, 8, ["chart-type", "header", "subheader"])
+          ]),
+          u("div", Be, [
+            u("canvas", {
+              ref_key: "chartRef",
+              ref: p,
+              class: "chart__canvas"
+            }, null, 512),
+            u("div", {
+              ref_key: "tooltipRef",
+              ref: B,
+              class: "chart__tooltip",
+              style: j(c(z))
+            }, [
+              l.value ? (d(), g(ye, {
+                key: 0,
+                title: String(l.value.title),
+                "data-points": l.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])
+              }, null, 8, ["title", "data-points", "x-axis-format", "y-axis-format", "total-label", "total-value"])) : T("", !0)
+            ], 4)
+          ])
+        ]),
+        a.hideLegend ? T("", !0) : (d(), C("section", Ae, [
+          V(be, {
+            items: c(U),
+            "visible-ids": a.visibleIds,
+            "onUpdate:visibleIds": o[1] || (o[1] = (i) => k("update:visibleIds", i))
+          }, null, 8, ["items", "visible-ids"])
+        ]))
+      ], 64)) : a.loading ? (d(), g(ke, { key: 1 })) : c(L) ? (d(), g(c(Le), {
+        key: 2,
+        title: a.noDataTitle,
+        subtitle: a.noDataSubtitle,
+        "icon-name": a.noDataIcon
+      }, null, 8, ["title", "subtitle", "icon-name"])) : T("", !0)
+    ]));
+  }
+});
+export {
+  We as default
+};

package/components/chart/ChartHeader.vue.js

@@ -0,0 +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_88d4532f_lang.css"; //*');
+const s = /* @__PURE__ */ o(e, [["__scopeId", "data-v-88d4532f"]]);
+export {
+  s as default
+};

package/components/chart/ChartHeader.vue2.js

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

package/components/chart/ChartLegend.vue.js

@@ -0,0 +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"]]);
+export {
+  c as default
+};

package/components/chart/ChartLegend.vue2.js

@@ -0,0 +1,65 @@
+ 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 { useVirtualList as D } from "@vueuse/core";
+import N from "../typography/v4/Typography.vue.js";
+import A from "../checkbox/v4/CheckboxV4.vue.js";
+import F from "../search/v4/SearchV4.vue.js";
+import { DEFAULT_MIN_VISIBLE as H, DEFAULT_MAX_VISIBLE as M } from "./consts.js";
+const P = { class: "chart-legend" }, R = { class: "search-box" }, K = /* @__PURE__ */ E({
+  __name: "ChartLegend",
+  props: {
+    items: { default: () => [] },
+    visibleIds: { default: () => [] },
+    minVisible: { default: H },
+    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)
+      );
+    }), 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) => {
+      b(
+        "update:visibleIds",
+        e ? [...t.visibleIds, i.id] : t.visibleIds.filter((s) => s !== i.id)
+      );
+    }, { list: L, containerProps: g, wrapperProps: k } = D(f, {
+      itemHeight: h,
+      overscan: 10
+    });
+    return (e, i) => (d(), n("div", P, [
+      c("div", R, [
+        u(l(F), {
+          modelValue: o.value,
+          "onUpdate:modelValue": i[0] || (i[0] = (s) => o.value = s)
+        }, 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)
+            }, null, 8, ["color", "is-checked", "disabled", "onUpdate:isChecked"]),
+            u(l(N), { variant: "body2" }, {
+              default: U(() => [
+                w(B(s.label), 1)
+              ]),
+              _: 2
+            }, 1024)
+          ]))), 128))
+        ], 16)
+      ], 16)
+    ]));
+  }
+});
+export {
+  K as default
+};

package/components/chart/ChartLoader.vue.js

@@ -0,0 +1,25 @@
+import { openBlock as o, createElementBlock as c, pushScopeId as r, popScopeId as s, createElementVNode as t } from "vue";
+/* empty css                  */import a from "../../_virtual/_plugin-vue_export-helper.js";
+const d = {}, i = (e) => (r("data-v-142c444a"), e = e(), s(), e), n = { class: "chart-loader" }, p = /* @__PURE__ */ i(() => /* @__PURE__ */ t("svg", {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1072 275",
+  preserveAspectRatio: "none",
+  width: "100%",
+  height: "100%",
+  fill: "none"
+}, [
+  /* @__PURE__ */ t("path", {
+    d: "M499.744 87.7024L499 87.4816C399.137 70.0475 293 138.418 218 173.72C120 219.848 87 235.892 0 275L1072 275C979 -57.3526 836.258 -31.5829 732 59.404C648.885 131.939 570.549 108.704 499.744 87.7024Z",
+    fill: "black",
+    "fill-opacity": "0.05"
+  })
+], -1)), _ = [
+  p
+];
+function l(e, h) {
+  return o(), c("div", n, _);
+}
+const w = /* @__PURE__ */ a(d, [["render", l], ["__scopeId", "data-v-142c444a"]]);
+export {
+  w as default
+};

package/components/chart/ChartTooltip.vue.js

@@ -0,0 +1,7 @@
+import o from "./ChartTooltip.vue2.js";
+/* empty css                   */import t from "../../_virtual/_plugin-vue_export-helper.js";
+// import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_ec636f18_lang.css"; //*');
+const s = /* @__PURE__ */ t(o, [["__scopeId", "data-v-ec636f18"]]);
+export {
+  s as default
+};