@ironsource/shared-ui 2.1.7-test.1 → 2.1.7-test.3

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
+};

package/components/chart/ChartTooltip.vue2.js

@@ -0,0 +1,81 @@
+ import "../../ChartTooltip.vue_vue_type_style_index_0_scoped_ec636f18_lang.css"; import { defineComponent as y, computed as b, openBlock as a, createElementBlock as s, createElementVNode as u, createBlock as g, unref as e, withCtx as l, createTextVNode as o, toDisplayString as r, createCommentVNode as f, Fragment as h, renderList as k, normalizeStyle as v, createVNode as d } from "vue";
+import i from "../typography/v4/Typography.vue.js";
+import { formatValue as c } from "./utils/utils.js";
+const F = { class: "chart-tooltip" }, V = { class: "tooltip-title" }, p = { class: "list" }, A = {
+  key: 0,
+  class: "tooltip-footer"
+}, T = /* @__PURE__ */ y({
+  __name: "ChartTooltip",
+  props: {
+    title: { default: "" },
+    dataPoints: { default: () => [] },
+    xAxisFormat: { default: null },
+    yAxisFormat: { default: null },
+    totalLabel: { default: "Total" },
+    totalValue: { default: null }
+  },
+  setup(t) {
+    const m = t, x = b(() => m.xAxisFormat === "date" ? "dateLong" : m.xAxisFormat);
+    return (C, _) => (a(), s("div", F, [
+      u("div", V, [
+        t.title ? (a(), g(e(i), {
+          key: 0,
+          variant: "subtitle2"
+        }, {
+          default: l(() => [
+            o(r(e(c)(t.title, e(x))), 1)
+          ]),
+          _: 1
+        })) : f("", !0)
+      ]),
+      u("ul", p, [
+        (a(!0), s(h, null, k(t.dataPoints, (n) => (a(), s("li", {
+          key: n.datasetIndex,
+          class: "list__item"
+        }, [
+          u("span", {
+            class: "color-box",
+            style: v({
+              backgroundColor: String(n.dataset.pointBackgroundColor)
+            })
+          }, null, 4),
+          d(e(i), {
+            variant: "body2",
+            class: "flex-grow"
+          }, {
+            default: l(() => [
+              o(r(n.dataset.label), 1)
+            ]),
+            _: 2
+          }, 1024),
+          d(e(i), { variant: "body2" }, {
+            default: l(() => [
+              o(r(e(c)(n.parsed.y, t.yAxisFormat)), 1)
+            ]),
+            _: 2
+          }, 1024)
+        ]))), 128))
+      ]),
+      t.totalValue !== null ? (a(), s("div", A, [
+        d(e(i), {
+          variant: "body2",
+          class: "flex-grow"
+        }, {
+          default: l(() => [
+            o(r(t.totalLabel), 1)
+          ]),
+          _: 1
+        }),
+        d(e(i), { variant: "body2" }, {
+          default: l(() => [
+            o(r(e(c)(t.totalValue, t.yAxisFormat)), 1)
+          ]),
+          _: 1
+        })
+      ])) : f("", !0)
+    ]));
+  }
+});
+export {
+  T as default
+};

package/components/chart/composables/useChartValues.js

@@ -0,0 +1,32 @@
+import { computed as t } from "vue";
+const V = ({
+  parsingConfig: s,
+  dataSets: m,
+  isStacked: v
+}) => {
+  const l = (e) => e ? e[s?.yAxisKey] : null, r = (e) => e ? e[s?.xAxisKey] : null, o = t(
+    () => m.value.flatMap(
+      (e) => e.data.map(l)
+    )
+  ), p = t(() => m.value.reduce((e, n) => (n.data.forEach((a) => {
+    const u = String(r(a));
+    e[u] || (e[u] = []), e[u].push(l(a));
+  }), e), {})), x = t(() => Math.min(0, ...o.value.map(Number))), h = t(() => {
+    if (v.value) {
+      const e = Object.values(p.value).map(
+        (n) => n.reduce((a, u) => a + u, 0)
+      );
+      return Math.max(...e);
+    }
+    return Math.max(...o.value.map(Number));
+  });
+  return {
+    getXValue: r,
+    getYValue: l,
+    minValue: x,
+    maxValue: h
+  };
+};
+export {
+  V as useChartValues
+};

package/components/chart/composables/useTooltipPosition.js

@@ -0,0 +1,22 @@
+import { computed as c } from "vue";
+import { useElementSize as u } from "@vueuse/core";
+const a = (o, s, n) => {
+  const t = u(s);
+  return {
+    position: c(() => {
+      if (!o.value || !n.value)
+        return { top: 0, left: 0 };
+      const i = o.value.getBoundingClientRect(), { caretX: F, caretY: e } = n.value, E = F + t.width.value + 20 >= i.width, _ = e + t.height.value + -20 >= i.height;
+      return {
+        left: F + (E ? -(t.width.value + 20) : 20),
+        top: e + (_ ? -1 * Math.min(
+          e - 8,
+          t.height.value + 8
+        ) : -20)
+      };
+    })
+  };
+};
+export {
+  a as useTooltipPosition
+};

package/components/chart/consts.js

@@ -0,0 +1,21 @@
+const E = "#fcfcfc", L = "#E4E4E4", _ = "#646464", C = {
+  size: 12,
+  weight: 400,
+  family: "Inter"
+}, I = [
+  "#80BCFE",
+  "#9999FF",
+  "#5883E4",
+  "#80CBC4",
+  "#FFC670"
+], O = 4, c = 1, t = 5;
+export {
+  I as COLOR_PALETTE,
+  t as DEFAULT_MAX_VISIBLE,
+  c as DEFAULT_MIN_VISIBLE,
+  O as DEFAULT_TICK_COUNT,
+  L as GRID_LINE_COLOR,
+  E as POINT_BORDER_COLOR,
+  _ as TICK_LABEL_COLOR,
+  C as TICK_LABEL_FONT
+};

package/components/chart/index.js

@@ -0,0 +1,6 @@
+import r from "./Chart.vue.js";
+const o = () => [r];
+export {
+  r as Chart,
+  o as ChartTypes
+};

package/components/chart/plugins/HoverVerticalLine.js

@@ -0,0 +1,12 @@
+const i = {
+  id: "hoverVerticalLine",
+  beforeDraw: (t) => {
+    if (t.getActiveElements().length) {
+      const o = t.getActiveElements()[0], n = t.chartArea, e = t.ctx;
+      e.save(), e.beginPath(), e.moveTo(o.element.x, n.top), e.lineTo(o.element.x, n.bottom), e.lineWidth = 1, e.strokeStyle = "rgba(0,0,0, 0.1)", e.stroke(), e.restore();
+    }
+  }
+};
+export {
+  i as HoverVerticalLine
+};

package/components/chart/types.js

@@ -0,0 +1,4 @@
+var a = /* @__PURE__ */ ((e) => (e.Line = "line", e.Bar = "bar", e.StackedLine = "stackedLine", e.StackedBar = "stackedBar", e))(a || {});
+export {
+  a as ChartType
+};

package/components/chart/utils/formatNumber.js

@@ -0,0 +1,11 @@
+const s = "N/A", r = (n, e, t) => n.toLocaleString("en", {
+  minimumFractionDigits: e,
+  maximumFractionDigits: t
+}), u = (n, e = s) => {
+  const t = Number(n), a = t % 1 !== 0;
+  return isNaN(t) && e ? e : Math.abs(t) >= 1e12 ? "∞" : Math.abs(t) >= 1e9 ? `${r(t / 1e9, 0, 1)}B` : Math.abs(t) >= 1e6 ? `${r(t / 1e6, 0, 1)}M` : Math.abs(t) >= 1e3 ? `${r(t / 1e3, 0, 1)}K` : a && Math.abs(t) >= 100 ? r(t, 0, 0) : a && Math.abs(t) >= 10 ? r(t, 0, 1) : a ? r(t, 2, 2) : r(t, 0, 0);
+};
+export {
+  s as DEFAULT_FALLBACK,
+  u as formatNumber
+};

package/components/chart/utils/utils.js

@@ -0,0 +1,12 @@
+import { format as f } from "date-fns";
+import { formatNumber as m } from "./formatNumber.js";
+const p = (r, t, e) => {
+  if (e === 0)
+    return 0;
+  const n = t - r, o = n / e * 0.4;
+  return (n + o) / e;
+}, M = (r, t) => t === "number" ? m(r) : t === "date" ? f(new Date(r), "MMM dd") : t === "dateLong" ? f(new Date(r), "dd MMM yyyy") : String(r);
+export {
+  p as calcStepSize,
+  M as formatValue
+};

package/components/input/v4/TextField.vue.d.ts

@@ -1,6 +1,6 @@
 import { TooltipPositions } from '@/components/tooltip/common/Tooltip.types';
 import { LabelDirection, FieldSize, FieldType } from './TextField.types';
-import { FeedbackVariant } from '@/components/shared/commonTypes';
+import { FeedbackVariant, MaxLengthCounterPositions } from '@/components/shared/commonTypes';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue?: string | number;
     placeholder?: string;
@@ -25,6 +25,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     prefix?: string;
     suffix?: string;
     maxLength?: number;
+    maxLengthCounterPosition?: MaxLengthCounterPositions;
     showApply?: boolean;
     inlineError?: boolean;
     inlineErrorText?: string;
@@ -49,6 +50,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     prefix: string;
     suffix: string;
     maxLength: any;
+    maxLengthCounterPosition: string;
     showApply: boolean;
     inlineError: boolean;
     inlineErrorText: string;
@@ -86,6 +88,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     prefix?: string;
     suffix?: string;
     maxLength?: number;
+    maxLengthCounterPosition?: MaxLengthCounterPositions;
     showApply?: boolean;
     inlineError?: boolean;
     inlineErrorText?: string;
@@ -110,6 +113,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     prefix: string;
     suffix: string;
     maxLength: any;
+    maxLengthCounterPosition: string;
     showApply: boolean;
     inlineError: boolean;
     inlineErrorText: string;
@@ -141,6 +145,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     onlyDigits: boolean;
     prefix: string;
     suffix: string;
+    maxLengthCounterPosition: MaxLengthCounterPositions;
     showApply: boolean;
     inlineError: boolean;
     inlineErrorText: string;

package/components/input/v4/TextField.vue.js

@@ -1,7 +1,7 @@
 import e from "./TextField.vue2.js";
 /* empty css                */import o from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../TextField.vue_vue_type_style_index_0_scoped_a6457440_lang.css"; //*');
-const p = /* @__PURE__ */ o(e, [["__scopeId", "data-v-a6457440"]]);
+// import "../../../TextField.vue_vue_type_style_index_0_scoped_eb472aa3_lang.css"; //*');
+const a = /* @__PURE__ */ o(e, [["__scopeId", "data-v-eb472aa3"]]);
 export {
-  p as default
+  a as default
 };