@ironsource/shared-ui 1.4.2-test.7 → 1.4.2-vite.1

package/components/dropdown/Dropdown.vue2.js

@@ -0,0 +1,588 @@
+import { defineComponent as De, ref as f, computed as h, watch as B, useSlots as Ie, nextTick as M, toRaw as T, provide as Ve, onMounted as $e, openBlock as s, createElementBlock as p, normalizeClass as G, renderSlot as $, createVNode as b, unref as i, withCtx as v, Transition as Re, createElementVNode as A, createTextVNode as S, toDisplayString as R, createCommentVNode as d, createBlock as j, mergeProps as se, withModifiers as ue, Fragment as Ee, renderList as Me, pushScopeId as Ne, popScopeId as Ke } from "vue";
+import re from "../button/Button.vue.js";
+import de from "../icon/Icon.vue.js";
+/* empty css                          */import P from "../typography/Text.vue.js";
+/* empty css                        *//* empty css                         *//* empty css                                   */import { Dropdown as Le } from "floating-vue";
+/* empty css                       *//* empty css                           */import Fe from "./Option.vue.js";
+import He from "../search/Search.vue.js";
+import { useToggle as Ue } from "../../composables/useToggle.js";
+import { isObjectInArray as ce } from "../../utils/array.js";
+import { objectsEqual as qe } from "../../utils/object.js";
+import { useClamp as Ge, useVirtualList as je, onClickOutside as Je } from "@vueuse/core";
+import { Mode as x, Type as J, DropdownContext as Qe } from "./DropdownContext.js";
+const We = (t) => (Ne("data-v-0c581bae"), t = t(), Ke(), t), Xe = ["tabindex"], Ye = ["disabled", "aria-expanded", "aria-labelledby", "aria-disabled"], Ze = {
+  key: 0,
+  class: "image-slot"
+}, _e = { class: "angle-down" }, et = {
+  key: 0,
+  class: "dropdown-title"
+}, tt = {
+  key: 0,
+  class: "dropdown-title__text"
+}, lt = {
+  key: 0,
+  class: "no-result-container"
+}, at = {
+  key: 1,
+  class: "loader"
+}, it = /* @__PURE__ */ We(() => /* @__PURE__ */ A("svg", {
+  width: "100",
+  height: "100",
+  viewBox: "0 0 100 100"
+}, [
+  /* @__PURE__ */ A("circle", {
+    cx: "50",
+    cy: "50",
+    fill: "none",
+    stroke: "currentColor",
+    "stroke-width": "6",
+    r: "35",
+    "stroke-dasharray": "164.93361431346415 56.97787143782138"
+  }, [
+    /* @__PURE__ */ A("animateTransform", {
+      attributeName: "transform",
+      type: "rotate",
+      repeatCount: "indefinite",
+      dur: "1s",
+      values: "0 50 50;360 50 50",
+      keyTimes: "0;1"
+    })
+  ])
+], -1)), ot = { key: 2 }, nt = ["aria-selected", "aria-disabled", "onClick"], st = {
+  key: 0,
+  class: "actions"
+}, Bt = /* @__PURE__ */ De({
+  __name: "Dropdown",
+  props: {
+    modelValue: { default: null },
+    placeholder: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    mandatory: { type: Boolean, default: !1 },
+    helperText: { default: "" },
+    searchPlaceholder: { default: "" },
+    isOnTop: { type: Boolean, default: !1 },
+    multi: { type: Boolean, default: !1 },
+    title: { default: "" },
+    inlineSearch: { type: Boolean, default: !1 },
+    popperClass: { default: "" },
+    noResultsText: { default: "No results found" },
+    loading: { type: Boolean },
+    selected: { default: null },
+    showSelectAll: { type: Boolean },
+    defaultOpen: { type: Boolean, default: !1 },
+    showButtonOnOpen: { type: Boolean, default: !0 },
+    autoFocus: { type: Boolean, default: !1 },
+    distance: { default: 0 },
+    isOpen: { type: Boolean },
+    skidding: { default: 0 },
+    placement: { default: "bottom-start" },
+    clearable: { type: Boolean, default: !1 },
+    error: { default: "" },
+    size: { default: "lg" },
+    displayValue: null,
+    options: null,
+    onSearch: { type: Function, default: () => !0 },
+    theme: { default: "is-dropdown" },
+    container: { default: "body" },
+    flip: { type: Boolean, default: !0 },
+    keepOpen: { type: Boolean, default: !1 },
+    autoSize: { type: Boolean, default: !1 },
+    disableKeyboardEvents: { type: Boolean, default: !1 },
+    multiOptionsPlaceholderPrefix: { default: "" },
+    multiOptionsPlaceholderSuffix: { default: "" }
+  },
+  emits: ["update:selected", "update:isOpen", "closed", "opened", "apply"],
+  setup(t, { expose: fe, emit: C }) {
+    const l = t, Q = (e, a) => l.multi ? ce(e, a) : T(e) === a, pe = 48, ve = 34, o = f(l.selected), u = h({
+      get() {
+        return o.value;
+      },
+      set(e) {
+        C("update:selected", e);
+      }
+    });
+    B(
+      () => l.selected,
+      () => {
+        o.value = l.selected;
+      }
+    );
+    const me = Ie(), z = f(null), O = f(null), W = f(null), N = f(null), X = f(null), D = f(null), Y = f(null), Z = f(null), ye = 8, he = h(() => D.value?.getBoundingClientRect().height + ye + l.distance), g = f([]), I = f(-1), V = f(""), K = f([]), _ = () => D.value?.focus(), [n, be, ge] = Ue({
+      disabled: l.disabled,
+      initialValue: l.defaultOpen
+    });
+    B(
+      () => l.disabled,
+      (e) => {
+        e !== void 0 && ge(e);
+      }
+    );
+    const ee = (e) => {
+      ke.value = be(e);
+    }, ke = h({
+      get() {
+        return l.isOpen;
+      },
+      set(e) {
+        C("update:isOpen", e);
+      }
+    }), we = h(() => y.value.length - 1), m = Ge(0, 0, we), Oe = h(() => u.value ? l.displayValue(u.value) : ""), Se = (e) => {
+      if (!e.value.length && !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix)
+        return l.placeholder;
+      const a = !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix ? `${e.value.length} selected` : `${l.multiOptionsPlaceholderPrefix ?? ""}${e.value.length ?? "0"}${l.multiOptionsPlaceholderSuffix ?? ""}`;
+      return e.value.length == 1 && l.displayValue ? l.displayValue(e.value[0]) : a;
+    }, te = h(() => {
+      if (!l.multi)
+        return u.value ? l.displayValue(u.value) : l.placeholder;
+      if (Array.isArray(o.value))
+        return Se(o);
+    }), L = h(() => {
+      if (Array.isArray(o.value))
+        return o.value.length === y.value.length;
+    }), Te = h(() => !l.multi || !Array.isArray(o.value) ? !1 : o.value.length > 0 && o.value.length < y.value.length), F = (e) => {
+      V.value = e;
+    }, y = h(
+      () => l.options.filter((e) => l.onSearch(e, V.value))
+    ), Ae = h(() => g.value[0]?.hasSubtitle), le = h(() => c.mode === x.Multi), {
+      list: ae,
+      containerProps: ie,
+      wrapperProps: Be,
+      scrollTo: H
+    } = je(y, {
+      itemHeight: () => Ae.value ? pe : ve
+    });
+    B(
+      () => l.isOpen,
+      (e) => {
+        ee(e);
+      }
+    ), B([I], async () => {
+      await M();
+    }), B(
+      [n, m, I],
+      async ([e], [a]) => {
+        n.value && (await M(), I.value !== -1 && e !== a && setTimeout(() => {
+          H(I.value);
+        }), m.value && setTimeout(() => {
+          H(m.value);
+        }));
+      }
+    );
+    const k = (e, a = !1) => {
+      l.disabled || (ee(e), M(() => {
+        n.value && C("opened"), n.value || C("closed"), z.value && a && z.value.focus();
+      }));
+    };
+    B(n, (e) => {
+      if (e) {
+        le.value && Array.isArray(u.value) && (K.value = T(u.value).slice());
+        return;
+      }
+      _();
+    });
+    const Pe = () => {
+      if (L.value) {
+        o.value = [];
+        return;
+      }
+      if (Array.isArray(o.value)) {
+        if (o.value.length === y.value.length) {
+          o.value = [];
+          return;
+        }
+        o.value = y.value;
+      }
+    }, E = (e, a) => {
+      if (e = T(e), g.value[a]?.disabled)
+        return;
+      if (I.value = a, c.mode !== x.Multi) {
+        l.keepOpen || k(!1), c.goToOption(
+          0
+          /* None */
+        ), u.value = e, F(""), _(), c.type === J.Search && O.value && (O.value.value = l.displayValue(e));
+        return;
+      }
+      if (!Array.isArray(o.value))
+        return;
+      O.value?.focus();
+      const w = T(o.value);
+      if (ce(w, e)) {
+        o.value = w.filter(
+          (q) => !qe(q, e)
+        );
+        return;
+      } else {
+        o.value = [...w, e];
+        return;
+      }
+    }, xe = (e) => g.value[e]?.disabled, c = {
+      activeIndex: m,
+      options: g,
+      selectedOption: u,
+      labelRef: X,
+      activeOption: N,
+      listRef: z,
+      clearable: l.clearable,
+      type: me.input ? J.Search : J.Dropdown,
+      mode: l.multi ? x.Multi : x.Single,
+      query: V,
+      selectedValue: Oe,
+      toggle: k,
+      disabled: l.disabled,
+      open: n,
+      mandatory: l.mandatory,
+      size: l.size,
+      placeholder: l.placeholder,
+      select: E,
+      clearSelection: () => {
+        F(""), u.value = c.mode === x.Single ? null : [], O.value && (O.value.value = "");
+      },
+      search: F,
+      goToOption: async (e) => {
+        if (!n.value)
+          return;
+        let a = m.value + e;
+        const r = g.value.filter(
+          (q) => q.disabled
+        ).length, w = y.value.length - r;
+        for (a > w && (a = w + 1); ; ) {
+          if (!g.value[a]?.disabled) {
+            N.value = y.value[a], m.value = a;
+            return;
+          }
+          if ((e === 1 || e === 10) && (a = a + 1), (e === -1 || e === -10) && (a = a + -1), !!xe(m.value)) {
+            N.value = y.value[a], m.value = a;
+            return;
+          }
+        }
+      },
+      registerInput: (e) => {
+        O.value = e.value;
+      },
+      registerOption: (e, a, r) => {
+        g.value = [...g.value, { id: e, disabled: a, hasSubtitle: r }];
+      },
+      unRegisterOption(e) {
+        g.value = g.value.filter((a) => a.id !== e);
+      }
+    };
+    Ve(Qe, c), Je(
+      z,
+      () => {
+        n.value && oe();
+      },
+      {
+        ignore: [D, Y, Z, O, ie.ref]
+      }
+    );
+    const Ce = () => {
+      O.value && (O.value.value = c.query.value = "");
+    };
+    $e(async () => {
+      l.autoFocus && (await M(), setTimeout(() => {
+        W.value.focus();
+      })), c.goToOption(0);
+    });
+    const ze = () => {
+      u.value = o.value, C("apply", u.value), k(!1), Ce();
+    }, oe = () => {
+      le.value && Array.isArray(K.value) && (u.value = T(K.value).slice()), k(!1);
+    }, ne = (e) => {
+      if (!l.disableKeyboardEvents)
+        switch (e.key) {
+          case "Space":
+          case "Enter":
+          case "ArrowUp":
+          case "ArrowDown":
+            k(!0), e.preventDefault();
+        }
+    }, U = (e) => {
+      if (!l.disableKeyboardEvents)
+        switch (e.key) {
+          case "ArrowUp": {
+            c.goToOption(
+              -1
+              /* Previous */
+            ), e.preventDefault(), e.stopPropagation();
+            break;
+          }
+          case "ArrowDown": {
+            c.goToOption(
+              1
+              /* Next */
+            ), e.preventDefault(), e.stopPropagation();
+            break;
+          }
+          case "Escape": {
+            k(!1), e.preventDefault();
+            break;
+          }
+          case "PageUp": {
+            c.goToOption(
+              10
+              /* NextPage */
+            ), e.preventDefault();
+            break;
+          }
+          case "PageDown": {
+            c.goToOption(
+              -10
+              /* PrevPage */
+            ), e.preventDefault();
+            break;
+          }
+          case "Enter": {
+            if (!n.value) {
+              k(!0);
+              return;
+            }
+            E(y.value[m.value], m.value), c.mode === x.Single && !l.keepOpen && k(!1), e.preventDefault();
+            break;
+          }
+        }
+    };
+    return fe({
+      selectItem: E,
+      scrollTo: H
+    }), (e, a) => (s(), p("div", {
+      ref_key: "el",
+      ref: W,
+      class: G(["dropdown", { "dropdown--disabled": t.disabled }]),
+      tabindex: t.disabled ? -1 : 0,
+      onKeydown: U
+    }, [
+      $(e.$slots, "label", {}, void 0, !0),
+      b(i(Le), {
+        theme: t.theme,
+        "popper-class": [
+          t.popperClass,
+          t.autoSize ? "v-popper--theme-is-dropdown--auto-size" : null
+        ],
+        placement: t.placement,
+        skidding: t.isOnTop ? 0 : t.skidding,
+        distance: t.isOnTop ? -i(he) : t.distance,
+        flip: t.flip,
+        triggers: [],
+        shown: !!i(n),
+        "auto-hide": !1,
+        container: t.container,
+        "auto-size": t.autoSize
+      }, {
+        popper: v(() => [
+          b(Re, null, {
+            default: v(() => [
+              A("div", {
+                ref_key: "listRef",
+                ref: z
+              }, [
+                t.inlineSearch || t.title ? (s(), p("div", et, [
+                  t.title ? (s(), p("div", tt, [
+                    b(i(P), { strong: "" }, {
+                      default: v(() => [
+                        S(R(t.title), 1)
+                      ]),
+                      _: 1
+                    })
+                  ])) : d("", !0),
+                  t.inlineSearch ? (s(), j(i(He), {
+                    key: 1,
+                    modelValue: V.value,
+                    "onUpdate:modelValue": a[2] || (a[2] = (r) => V.value = r),
+                    placeholder: t.searchPlaceholder,
+                    class: "dropdown-title__search",
+                    variant: "transparent",
+                    size: "md",
+                    onKeydown: U
+                  }, null, 8, ["modelValue", "placeholder"])) : d("", !0)
+                ])) : d("", !0),
+                i(n) ? (s(), p("div", {
+                  key: 1,
+                  class: "dropdown",
+                  onKeydown: U
+                }, [
+                  $(e.$slots, "input-list", { open: i(n) }, void 0, !0),
+                  A("div", se(i(ie), {
+                    class: ["list-container", { "list-container--multi": t.multi }]
+                  }), [
+                    A("ul", se(i(Be), {
+                      role: "listbox",
+                      class: ["list", { "list--multi": t.multi }]
+                    }), [
+                      !i(y).length && !t.loading ? (s(), p("li", lt, [
+                        b(i(P), {
+                          size: "sm",
+                          class: "no-result"
+                        }, {
+                          default: v(() => [
+                            S(R(t.noResultsText), 1)
+                          ]),
+                          _: 1
+                        })
+                      ])) : d("", !0),
+                      t.loading ? (s(), p("li", at, [
+                        b(i(de), {
+                          "font-size": "md",
+                          class: "loader-icon"
+                        }, {
+                          default: v(() => [
+                            it
+                          ]),
+                          _: 1
+                        }),
+                        b(i(P), null, {
+                          default: v(() => [
+                            S("Loading...")
+                          ]),
+                          _: 1
+                        })
+                      ])) : d("", !0),
+                      t.showSelectAll ? (s(), p("li", ot, [
+                        b(Fe, {
+                          "aria-selected": i(L),
+                          "aria-disabled": !!t.disabled,
+                          "selected-prop": i(L),
+                          "is-indeterminate": i(Te),
+                          "select-all-option": "",
+                          onClick: a[3] || (a[3] = ue((r) => Pe(), ["stop"]))
+                        }, {
+                          default: v(() => [
+                            S("Select all ")
+                          ]),
+                          _: 1
+                        }, 8, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate"])
+                      ])) : d("", !0),
+                      i(ae).length && !t.loading ? (s(!0), p(Ee, { key: 3 }, Me(i(ae), ({ data: r, index: w }) => (s(), p("li", {
+                        key: w,
+                        "aria-selected": Q(T(i(u)), r),
+                        "aria-disabled": !!t.disabled,
+                        onClick: ue(() => E(r, w), ["stop"])
+                      }, [
+                        $(e.$slots, "default", {
+                          option: r,
+                          selected: Q(T(i(u)), r),
+                          active: T(i(m)) === w
+                        }, void 0, !0)
+                      ], 8, nt))), 128)) : d("", !0)
+                    ], 16)
+                  ], 16),
+                  t.multi ? (s(), p("div", st, [
+                    b(i(re), {
+                      ref_key: "cancel",
+                      ref: Z,
+                      size: "sm",
+                      variant: "border",
+                      theme: "third",
+                      onClick: oe
+                    }, {
+                      default: v(() => [
+                        S(" Cancel ")
+                      ]),
+                      _: 1
+                    }, 512),
+                    b(i(re), {
+                      ref_key: "apply",
+                      ref: Y,
+                      "data-testid": "mutli-apply",
+                      size: "sm",
+                      class: "apply-button",
+                      onClick: ze
+                    }, {
+                      default: v(() => [
+                        S("Apply ")
+                      ]),
+                      _: 1
+                    }, 512)
+                  ])) : d("", !0)
+                ], 32)) : d("", !0)
+              ], 512)
+            ]),
+            _: 3
+          })
+        ]),
+        default: v(() => [
+          A("div", {
+            class: G(["button__container", {
+              "button__container--open": !!i(n),
+              [`button__container--${t.size}`]: !0,
+              "button__container--disabled": t.disabled
+            }])
+          }, [
+            e.$slots.input ? (s(), p("div", {
+              key: 0,
+              ref_key: "buttonRef",
+              ref: D,
+              onClick: a[0] || (a[0] = (r) => k()),
+              onKeydown: ne
+            }, [
+              $(e.$slots, "input", {
+                open: i(n),
+                value: i(te),
+                disabled: t.disabled
+              }, void 0, !0)
+            ], 544)) : d("", !0),
+            e.$slots.input ? d("", !0) : (s(), p("button", {
+              key: 1,
+              ref_key: "buttonRef",
+              ref: D,
+              disabled: t.disabled,
+              "aria-haspopup": !0,
+              "aria-expanded": !!i(n),
+              "aria-labelledby": X.value?.id,
+              "aria-disabled": t.disabled,
+              class: G([{
+                "button--open": !!i(n),
+                [`button--${t.size}`]: !0,
+                "button--disabled": t.disabled
+              }, "button"]),
+              onKeydown: ne,
+              onClick: a[1] || (a[1] = (r) => k())
+            }, [
+              e.$slots.image ? (s(), p("div", Ze, [
+                $(e.$slots, "image", {}, void 0, !0)
+              ])) : d("", !0),
+              b(i(P), {
+                size: "sm",
+                "is-truncated": ""
+              }, {
+                default: v(() => [
+                  S(R(i(te)), 1)
+                ]),
+                _: 1
+              }),
+              A("div", _e, [
+                b(i(de), {
+                  name: "angle-down",
+                  "font-size": "sm"
+                })
+              ])
+            ], 42, Ye))
+          ], 2)
+        ]),
+        _: 3
+      }, 8, ["theme", "popper-class", "placement", "skidding", "distance", "flip", "shown", "container", "auto-size"]),
+      !t.error && t.helperText ? (s(), j(i(P), {
+        key: 0,
+        size: "caption",
+        class: "helper-text"
+      }, {
+        default: v(() => [
+          S(R(t.helperText), 1)
+        ]),
+        _: 1
+      })) : d("", !0),
+      t.error ? (s(), j(i(P), {
+        key: 1,
+        size: "caption",
+        class: "helper-text helper-text--error"
+      }, {
+        default: v(() => [
+          S(R(t.error), 1)
+        ]),
+        _: 1
+      })) : d("", !0)
+    ], 42, Xe));
+  }
+});
+export {
+  Bt as default
+};

package/components/dropdown/DropdownContext.js

@@ -0,0 +1,21 @@
+import { inject as t } from "vue";
+var e = /* @__PURE__ */ ((r) => (r[r.Multi = 0] = "Multi", r[r.Single = 1] = "Single", r))(e || {}), c = /* @__PURE__ */ ((r) => (r[r.Search = 0] = "Search", r[r.Dropdown = 1] = "Dropdown", r))(c || {});
+const a = Symbol(
+  "DropdownContext"
+);
+function i(r) {
+  const n = t(a, null);
+  if (n === null) {
+    const o = new Error(
+      `<${r} /> is missing a parent <Dropdown /> component.`
+    );
+    throw Error.captureStackTrace && Error.captureStackTrace(o, i), o;
+  }
+  return n;
+}
+export {
+  a as DropdownContext,
+  e as Mode,
+  c as Type,
+  i as useDropdownContext
+};

package/components/dropdown/Label.vue.d.ts

@@ -1,2 +1,9 @@
-declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}>, {
+    default?(_: {}): any;
+}>;
 export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/dropdown/Label.vue.js

@@ -1,42 +1,6 @@
-import { defineComponent, openBlock, createElementBlock, unref, normalizeClass, createVNode, withCtx, renderSlot, createBlock, createTextVNode, createCommentVNode } from 'vue';
-import '../typography/Heading.vue.js';
-import Text from '../typography/Text.vue.js';
-import { useDropdownContext } from './DropdownContext.vue.js';
-import { useId } from '../../composables/useId.vue.js';
-/* empty css                                                       */import _export_sfc from '../../_virtual/plugin-vue_export-helper.vue.js';
-
-import "../../Label.vue_vue_type_style_index_0_scoped_true_lang.css";
-const _sfc_main = defineComponent({
-  __name: "Label",
-  setup(__props) {
-    const id = `is-system-label-${useId().value}`;
-    const api = useDropdownContext("label");
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("label", {
-        id,
-        ref: unref(api).labelRef,
-        class: normalizeClass(["label", { "label--disabled": unref(api).disabled }])
-      }, [
-        createVNode(unref(Text), null, {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "default", {}, void 0, true)
-          ]),
-          _: 3
-        }),
-        unref(api).mandatory ? (openBlock(), createBlock(unref(Text), {
-          key: 0,
-          size: "lg",
-          class: "mandatory"
-        }, {
-          default: withCtx(() => [
-            createTextVNode("*")
-          ]),
-          _: 1
-        })) : createCommentVNode("", true)
-      ], 2);
-    };
-  }
-});
-var Label = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-4bba4499"]]);
-
-export { Label as default };
+import o from "./Label.vue2.js";
+/* empty css            */import t from "../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ t(o, [["__scopeId", "data-v-04058f87"]]);
+export {
+  m as default
+};