@ironsource/shared-ui 2.1.11-test.7 → 2.1.11-test.8

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

@@ -0,0 +1,91 @@
+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/src/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";
+console.log('scoped// import "../../../IconButtonV4.vue_vue_type_style_index_0_scoped_06e26be2_lang.css"; //*');
+const c = /* @__PURE__ */ e(o, [["__scopeId", "data-v-06e26be2"]]);
+export {
+  c as default
+};

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

@@ -0,0 +1,46 @@
+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/src/components/button/v4/ToggleButtonGroupAB.vue.js

@@ -0,0 +1,7 @@
+import o from "./ToggleButtonGroupAB.vue2.js";
+/* empty css                          */import e from "../../../../_virtual/_plugin-vue_export-helper.js";
+console.log('scoped// import "../../../ToggleButtonGroupAB.vue_vue_type_style_index_0_scoped_c81a7d3e_lang.css"; //*');
+const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-c81a7d3e"]]);
+export {
+  s as default
+};

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

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

package/src/components/chart/Chart.vue.js

@@ -0,0 +1,7 @@
+import e from "./Chart.vue2.js";
+/* empty css            */import o from "../../../_virtual/_plugin-vue_export-helper.js";
+console.log('scoped// 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/src/components/chart/Chart.vue2.js

@@ -0,0 +1,302 @@
+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 { 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 = {
+  key: 0,
+  class: "chart-sidebar"
+}, Xe = /* @__PURE__ */ X({
+  __name: "Chart",
+  props: {
+    dataSets: { default: () => [] },
+    visibleIds: { default: () => [] },
+    chartType: { default: n.Line },
+    parsing: { default: void 0 },
+    xAxisFormat: { default: "string" },
+    yAxisFormat: { default: "number" },
+    tickCount: { default: pe },
+    header: { default: "" },
+    subheader: { default: "" },
+    subheaderTooltip: { default: "" },
+    hideLegend: { type: Boolean, default: !1 },
+    minVisible: { default: he },
+    maxVisible: { default: me },
+    loading: { type: Boolean, default: !1 },
+    noDataIcon: { default: "file-x" },
+    noDataTitle: { default: "No data to display" },
+    noDataSubtitle: { default: "Search again with different filters" },
+    withSettingsHeader: { type: Boolean, default: !0 }
+  },
+  emits: ["update:chartType", "update:visibleIds"],
+  setup(a, { emit: T }) {
+    const t = a;
+    N.register(
+      Y,
+      ee,
+      te,
+      ae,
+      oe,
+      re,
+      ie,
+      le,
+      ne,
+      se,
+      de,
+      ue,
+      ce
+    );
+    const c = Q(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 = () => {
+      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);
+    const h = i(
+      () => t.chartType === n.StackedLine || t.chartType === n.StackedBar
+    ), $ = i(
+      () => t.chartType === n.Line || t.chartType === n.StackedLine
+    ), 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";
+      return {
+        ...e,
+        fill: h.value ? "start" : void 0,
+        backgroundColor: Te(
+          r,
+          t.chartType === n.StackedLine ? 10 : 70
+        ),
+        borderColor: r,
+        pointBackgroundColor: r,
+        pointHoverBorderColor: r,
+        maxBarThickness: 50,
+        clip: 5
+        // draw a bit outside the chart area
+      };
+    })), B = i(
+      () => ({
+        type: t.chartType == n.Bar || t.chartType === n.StackedBar ? "bar" : "line",
+        // Chart Data
+        data: {
+          datasets: y.value
+        },
+        // Chart Options
+        options: {
+          parsing: t.parsing,
+          interaction: {
+            intersect: !1,
+            mode: "index",
+            axis: "x"
+          },
+          // plugins
+          plugins: {
+            legend: { display: !1 },
+            title: { display: !1 },
+            hoverVerticalLine: $.value,
+            // tooltip
+            tooltip: {
+              enabled: !1,
+              position: "average",
+              external: ({ tooltip: e }) => {
+                l.value = { ...e };
+              },
+              callbacks: {
+                footer: (e) => {
+                  const o = e.reduce((r, G) => r + (G.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: be
+            },
+            bar: {
+              borderRadius: 4
+            }
+          },
+          scales: {
+            // Horizontal Axis (X)
+            x: {
+              beginAtZero: !0,
+              border: { display: !1 },
+              stacked: h.value,
+              // stack on top of each other
+              // ticks
+              ticks: {
+                color: P,
+                font: U,
+                padding: 4,
+                callback: function(e) {
+                  return H(
+                    this.getLabelForValue(e),
+                    t.xAxisFormat
+                  );
+                }
+              },
+              // grid lines
+              grid: {
+                color: M,
+                drawOnChartArea: !1,
+                drawTicks: !0,
+                drawBorder: !1,
+                tickLength: 7
+              }
+            },
+            // Vertical Axis (Y)
+            y: {
+              beginAtZero: !0,
+              border: { display: !1 },
+              // hide left borderline
+              stacked: h.value,
+              // stack on top of each other
+              // ticks
+              ticks: {
+                color: P,
+                font: U,
+                padding: 8,
+                stepSize: E.value,
+                min: A.value,
+                max: E.value * t.tickCount,
+                callback: (e) => H(e, t.yAxisFormat)
+              },
+              // grid lines
+              grid: {
+                color: M,
+                drawOnChartArea: !0,
+                drawTicks: !1
+              }
+            }
+          }
+        }
+      })
+    ), 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: K.value[e.id] || null
+    }))), I = g(null), l = g(null), { position: w } = ye(
+      p,
+      I,
+      l
+    ), Z = i(() => ({
+      left: `${w.value.left}px`,
+      top: `${w.value.top}px`,
+      opacity: l.value?.opacity || 0
+    })), { minValue: A, maxValue: _ } = Se({
+      parsingConfig: t.parsing,
+      dataSets: x,
+      isStacked: h
+    }), E = i(
+      () => fe(A.value, _.value, t.tickCount)
+    );
+    return (e, o) => (d(), k(R, null, [
+      a.withSettingsHeader ? (d(), m(Be, {
+        key: 0,
+        "chart-type": u(c),
+        "onUpdate:chart-type": o[0] || (o[0] = (r) => V(c) ? c.value = r : null),
+        "hide-legend": a.hideLegend
+      }, {
+        metric: O(() => [
+          D(e.$slots, "metric", {}, void 0, !0)
+        ]),
+        breakdowns: O(() => [
+          D(e.$slots, "breakdowns", {}, void 0, !0)
+        ]),
+        _: 3
+      }, 8, ["chart-type", "hide-legend"])) : v("", !0),
+      f("div", Ie, [
+        u(L) ? (d(), k(R, { key: 0 }, [
+          f("section", we, [
+            f("div", Ae, [
+              F(ke, {
+                "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,
+                "subheader-tooltip": a.subheaderTooltip
+              }, null, 8, ["chart-type", "with-settings-header", "header", "subheader", "subheader-tooltip"])
+            ]),
+            f("div", Ee, [
+              f("canvas", {
+                ref_key: "chartRef",
+                ref: p,
+                class: "chart__canvas"
+              }, null, 512),
+              f("div", {
+                ref_key: "tooltipRef",
+                ref: I,
+                class: "chart__tooltip",
+                style: J(u(Z))
+              }, [
+                l.value ? (d(), m(ge, {
+                  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"])) : v("", !0)
+              ], 4)
+            ])
+          ]),
+          a.hideLegend ? v("", !0) : (d(), k("section", Re, [
+            F(Ce, {
+              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), {
+          key: 2,
+          title: a.noDataTitle,
+          subtitle: a.noDataSubtitle,
+          "icon-name": a.noDataIcon
+        }, null, 8, ["title", "subtitle", "icon-name"])) : v("", !0)
+      ])
+    ], 64));
+  }
+});
+export {
+  Xe as default
+};

package/src/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";
+console.log('scoped// 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/src/components/chart/ChartHeader.vue2.js

@@ -0,0 +1,66 @@
+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";
+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: "" },
+    subheaderTooltip: { default: "" }
+  },
+  emits: ["update:chartType"],
+  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: a }) => a === m.chartType);
+      },
+      set(a) {
+        p("update:chartType", a.id);
+      }
+    });
+    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
+        }, 8, ["text"]),
+        d(t(h), { variant: "chart2" }, {
+          default: i(() => [
+            u(s(e.header), 1)
+          ]),
+          _: 1
+        })
+      ]),
+      e.withSettingsHeader ? k("", !0) : (c(), b(t(v), {
+        key: 0,
+        modelValue: t(o),
+        "onUpdate:modelValue": l[0] || (l[0] = (f) => g(o) ? o.value = f : null),
+        options: n
+      }, null, 8, ["modelValue"]))
+    ]));
+  }
+});
+export {
+  E as default
+};

package/src/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";
+console.log('scoped// import "../../ChartLegend.vue_vue_type_style_index_0_scoped_c0f71a49_lang.css"; //*');
+const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-c0f71a49"]]);
+export {
+  a as default
+};