@ironsource/shared-ui 1.4.2-test.19 → 1.4.2-test.2

package/components/includeExclude/IncludeExclude.vue2.js

@@ -0,0 +1,414 @@
+import { defineComponent as Oe, computed as p, ref as u, watch as M, provide as Te, openBlock as s, createBlock as S, unref as t, withCtx as m, createElementVNode as o, renderSlot as x, createTextVNode as C, toDisplayString as j, createCommentVNode as h, createVNode as f, Transition as Be, createElementBlock as d, normalizeClass as J, mergeProps as T, Fragment as B, renderList as R, toRaw as O, nextTick as Re } from "vue";
+import Ve from "../popover/Popover.vue.js";
+/* empty css                       */import z from "../button/Button.vue.js";
+/* empty css                 *//* empty css                          */import Q from "../typography/Text.vue.js";
+/* empty css                        *//* empty css                         */import "floating-vue";
+/* empty css                                   *//* empty css                       *//* empty css                           */import Ie from "../search/Search.vue.js";
+import Pe from "../checkbox/Checkbox.vue.js";
+import b from "../skeleton/Skeleton.vue.js";
+import Ae from "../emptyState/EmptyState.vue.js";
+import { useToggle as Ee } from "../../composables/useToggle.js";
+import { IncludeExcludeContext as Fe } from "./IncludeExcludeContext.js";
+import { onClickOutside as ze, useClamp as He, useVirtualList as X } from "@vueuse/core";
+const _e = { class: "include-exclude-header" }, $e = { class: "include-exclude-header-left-section" }, De = { class: "include-exclude-header-right-section" }, Ne = { class: "include-exclude-container-wrapper" }, Le = {
+  key: 0,
+  class: "include-exclude-container"
+}, Ue = {
+  key: 1,
+  class: "include-exclude-container"
+}, We = { class: "include-exclude-list-wrapper" }, qe = {
+  key: 1,
+  class: "loader-wrapper"
+}, Ge = ["aria-selected", "aria-disabled", "onClick"], Ke = { key: 1 }, Me = { class: "loader-wrapper" }, je = { class: "include-exclude-selected-wrapper" }, Je = {
+  key: 0,
+  class: "loader-wrapper"
+}, Qe = { class: "include-exclude-selected-header-left" }, Xe = { class: "include-exclude-selected-header-right" }, Ye = { key: 1 }, Ze = { class: "loader-wrapper" }, et = { class: "include-exclude-footer" }, tt = { class: "include-exclude-footer-buttons" }, wt = /* @__PURE__ */ Oe({
+  __name: "IncludeExclude",
+  props: {
+    titleText: { default: "" },
+    loading: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    modelValue: null,
+    clearable: { type: Boolean },
+    placement: { default: "bottom-start" },
+    options: null,
+    autoFocus: { type: Boolean, default: !0 },
+    onSearch: { type: Function, default: () => !0 },
+    searchPlaceholder: { default: "Search" },
+    isOnTop: { type: Boolean, default: !1 },
+    alwayesOpen: { type: Boolean, default: !1 },
+    defaultOpen: { type: Boolean, default: !1 },
+    showClearAll: { type: Boolean, default: !0 },
+    distance: { default: 0 },
+    distanceOffset: { default: 0 },
+    skiddingOffset: { default: 0 },
+    hasSubtitle: { type: Boolean, default: !1 },
+    keyField: null
+  },
+  emits: ["update:modelValue"],
+  setup(l, { emit: Y }) {
+    const n = l, H = 10, _ = 3, Z = 6, ee = 32, te = 48, le = p(() => {
+      const e = n.placement?.includes("bottom") ? Z : 0;
+      return n.isOnTop ? -I.value?.getBoundingClientRect().height : e;
+    }), $ = u(null), v = u(""), V = u(!1), I = u(null), ne = u(null), oe = u(null), P = u(null), A = u(null), ie = u(null), c = u(n.modelValue), D = (e) => new Promise((i) => setTimeout(i, e)), r = p({
+      get() {
+        return c.value;
+      },
+      set(e) {
+        Y("update:modelValue", e);
+      }
+    }), N = () => {
+      r.value?.length !== n.options?.length && (V.value = !0), g(!1);
+    };
+    M(
+      () => n.modelValue,
+      () => {
+        c.value = n.modelValue;
+      }
+    );
+    const se = p(() => c.value.filter(
+      (e) => n.onSearch(e, v.value)
+    )), ae = () => {
+      r.value?.length !== n.options?.length && (r.value = c.value), g(!1);
+    }, de = () => {
+      g();
+    }, ce = () => {
+      c.value = [];
+    }, L = p(() => () => n.hasSubtitle ? te : ee), U = p(
+      () => (e, i) => e.every(
+        (a) => i.some((k) => k[n.keyField] === a[n.keyField])
+      )
+    ), W = p(() => {
+      if (!w.value)
+        return !1;
+      const e = c.value, i = y.value;
+      return e === i ? !0 : e?.length !== i?.length ? !1 : U.value(e, i) && U.value(i, e);
+    }), q = u(null), [w, re] = Ee({
+      disabled: n.disabled,
+      initialValue: n.defaultOpen
+    }), ue = (e = 300) => {
+      const i = r.value?.length === n.options?.length;
+      Re(async () => {
+        i && (r.value = []), await D(e), K.resetInput();
+      });
+    };
+    M(
+      () => [w.value, A?.value?.inputRef],
+      ([e, i]) => {
+        e && i && he();
+      }
+    );
+    const fe = () => {
+      n.autoFocus && A.value?.inputRef.focus();
+    }, he = async (e = 300) => {
+      await D(e), fe();
+    }, g = (e) => {
+      n.disabled || (e || ue(), re(e));
+    };
+    ze(q, () => {
+      w.value && N();
+    });
+    const pe = u([]), me = p(() => y.value?.length - 1), G = (e) => {
+      v.value = e;
+    }, E = He(0, 0, me), F = (e) => {
+      P.value?.focus();
+      const i = c.value;
+      i.includes(e) ? c.value = i.filter(
+        (a) => a !== e
+      ) : c.value = [.../* @__PURE__ */ new Set([...i, e])];
+    }, ve = (e) => {
+      F(e);
+    }, K = {
+      toggle: g,
+      disabled: n.disabled,
+      options: pe,
+      clearable: n.clearable,
+      resetInput: () => {
+        G(""), P.value && (P.value.value = ""), V.value && (c.value = n.modelValue, V.value = !1);
+      },
+      search: G,
+      select: F,
+      activeIndex: E,
+      selectedOption: r,
+      activeOption: ie,
+      listRef: $,
+      query: v,
+      open: w,
+      removeSelection: ve
+    }, ge = () => {
+      c.value?.length !== y.value?.length ? c.value = y.value : c.value = [];
+    };
+    Te(Fe, K);
+    const y = p(() => v.value?.length ? n.options?.filter((e) => n.onSearch(e, v.value)) : n.options), {
+      list: ye,
+      containerProps: ke,
+      wrapperProps: xe
+    } = X(y, {
+      itemHeight: L.value,
+      overscan: H
+    }), {
+      list: be,
+      containerProps: we,
+      wrapperProps: Se
+    } = X(se, {
+      itemHeight: L.value,
+      overscan: H
+    }), Ce = (e) => {
+      if (["Enter", " ", "Space"].includes(e.key)) {
+        g();
+        return;
+      }
+      if (e.key === "ArrowUp") {
+        g(!1);
+        return;
+      }
+      e.key === "ArrowDown" && (g(!0), e.preventDefault());
+    };
+    return (e, i) => (s(), S(t(Ve), {
+      distance: t(le) + l.distanceOffset,
+      skidding: l.skiddingOffset,
+      trigger: "managed",
+      open: t(w) || l.alwayesOpen,
+      placement: l.placement
+    }, {
+      trigger: m(() => [
+        o("div", {
+          ref_key: "buttonRef",
+          ref: I,
+          class: "include-exclude-trigger",
+          tabindex: "0",
+          onClick: de,
+          onKeydown: Ce
+        }, [
+          x(e.$slots, "trigger", {}, () => [
+            o("button", {
+              ref_key: "buttonRef",
+              ref: I
+            }, "Default trigger", 512)
+          ], !0)
+        ], 544)
+      ]),
+      content: m(() => [
+        o("div", {
+          ref_key: "popoverWrapperRef",
+          ref: q,
+          class: "include-exclude-content"
+        }, [
+          o("div", _e, [
+            o("div", $e, [
+              x(e.$slots, "header-left-section", {}, () => [
+                l.titleText ? (s(), S(t(Q), {
+                  key: 0,
+                  class: "include-exclude-header-left-section-title",
+                  size: "md",
+                  strong: ""
+                }, {
+                  default: m(() => [
+                    C(j(l.titleText), 1)
+                  ]),
+                  _: 1
+                })) : h("", !0)
+              ], !0)
+            ]),
+            o("div", De, [
+              x(e.$slots, "header-right-section", {}, () => [
+                f(t(Ie), {
+                  ref_key: "searchRef",
+                  ref: A,
+                  modelValue: v.value,
+                  "onUpdate:modelValue": i[0] || (i[0] = (a) => v.value = a),
+                  class: "include-exclude-header-right-section-search-input",
+                  variant: "transparent",
+                  placeholder: l.searchPlaceholder,
+                  disabled: l.loading
+                }, null, 8, ["modelValue", "placeholder", "disabled"])
+              ], !0)
+            ])
+          ]),
+          o("div", Ne, [
+            f(Be, {
+              name: "switch",
+              mode: "out-in"
+            }, {
+              default: m(() => [
+                !t(y)?.length && !l.loading ? (s(), d("div", Le, [
+                  x(e.$slots, "no-result", {}, () => [
+                    f(t(Ae), {
+                      size: "lg",
+                      title: "No results found",
+                      subtitle: "Try diffrent keyword",
+                      "icon-width": 72,
+                      "icon-height": 72
+                    })
+                  ], !0)
+                ])) : (s(), d("div", Ue, [
+                  o("div", We, [
+                    o("div", {
+                      class: J(["include-exclude-list-header", {
+                        "include-exclude-list-header-loading": l.loading,
+                        "include-exclude-list-header-loaded": !l.loading
+                      }])
+                    }, [
+                      l.loading ? h("", !0) : (s(), S(t(Pe), {
+                        key: 0,
+                        size: "sm",
+                        "is-checked": t(W),
+                        "is-indeterminate": t(r)?.length > 0 && !t(W),
+                        disabled: !t(y)?.length,
+                        label: "Select all",
+                        onClick: ge
+                      }, null, 8, ["is-checked", "is-indeterminate", "disabled"])),
+                      l.loading ? (s(), d("div", qe, [
+                        f(t(b), {
+                          class: "dot-skeleton",
+                          round: ""
+                        }),
+                        f(t(b), { round: "" })
+                      ])) : h("", !0)
+                    ], 2),
+                    o("div", T({ class: "include-exclude-list" }, t(ke)), [
+                      l.loading ? h("", !0) : (s(), d("ul", T({ key: 0 }, t(xe), {
+                        ref_key: "listRef",
+                        ref: $,
+                        tabindex: "1"
+                      }), [
+                        (s(!0), d(B, null, R(t(ye), ({ data: a, index: k }) => (s(), d("li", {
+                          key: k,
+                          "aria-selected": O(t(r)) === a,
+                          "aria-disabled": !!l.disabled,
+                          onClick: () => F(a)
+                        }, [
+                          x(e.$slots, "option", {
+                            showCheckbox: !0,
+                            option: a,
+                            selected: O(t(r)) === a,
+                            active: O(t(E)) === k
+                          }, void 0, !0)
+                        ], 8, Ge))), 128))
+                      ], 16)),
+                      l.loading ? (s(), d("ul", Ke, [
+                        (s(), d(B, null, R(_, (a) => o("li", {
+                          key: a,
+                          class: "include-exclude-list-item-skeleton"
+                        }, [
+                          o("div", Me, [
+                            f(t(b), {
+                              class: "dot-skeleton",
+                              round: ""
+                            }),
+                            f(t(b), { round: "" })
+                          ])
+                        ])), 64))
+                      ])) : h("", !0)
+                    ], 16)
+                  ]),
+                  o("div", je, [
+                    o("div", {
+                      class: J(["include-exclude-selected-header", {
+                        "include-exclude-list-selected-header-loading": l.loading,
+                        "include-exclude-list-header-loaded": !l.loading
+                      }])
+                    }, [
+                      l.loading ? (s(), d("div", Je, [
+                        f(t(b), { round: "" })
+                      ])) : h("", !0),
+                      o("div", Qe, [
+                        l.loading ? h("", !0) : (s(), S(t(Q), {
+                          key: 0,
+                          class: "include-exclude-selected-header-left-selected",
+                          size: "sm"
+                        }, {
+                          default: m(() => [
+                            C(j(t(r)?.length) + " Selected", 1)
+                          ]),
+                          _: 1
+                        }))
+                      ]),
+                      o("div", Xe, [
+                        t(r)?.length && !l.loading && l.showClearAll ? (s(), S(t(z), {
+                          key: 0,
+                          variant: "link",
+                          theme: "third",
+                          size: "md",
+                          strong: !1,
+                          onClick: ce
+                        }, {
+                          default: m(() => [
+                            C("Clear all")
+                          ]),
+                          _: 1
+                        })) : h("", !0)
+                      ])
+                    ], 2),
+                    o("div", T({ class: "include-exclude-selected-list" }, t(we)), [
+                      t(r)?.length && !l.loading ? (s(), d("ul", T({ key: 0 }, t(Se), {
+                        ref: "SelectedlistRef",
+                        tabindex: "2"
+                      }), [
+                        (s(!0), d(B, null, R(t(be), ({ data: a, index: k }) => (s(), d("li", { key: k }, [
+                          x(e.$slots, "selected_option", {
+                            option: a,
+                            selected: O(t(r)) === a,
+                            active: O(t(E)) === k
+                          }, void 0, !0)
+                        ]))), 128))
+                      ], 16)) : h("", !0),
+                      l.loading ? (s(), d("ul", Ye, [
+                        (s(), d(B, null, R(_, (a) => o("li", {
+                          key: a,
+                          class: "include-exclude-list-item-skeleton"
+                        }, [
+                          o("div", Ze, [
+                            f(t(b), { round: "" })
+                          ])
+                        ])), 64))
+                      ])) : h("", !0)
+                    ], 16)
+                  ])
+                ]))
+              ]),
+              _: 3
+            })
+          ]),
+          x(e.$slots, "footer", {}, () => [
+            o("div", et, [
+              o("div", tt, [
+                f(t(z), {
+                  ref_key: "cancel",
+                  ref: oe,
+                  size: "sm",
+                  variant: "border",
+                  theme: "third",
+                  text: "Cancel",
+                  onClick: N
+                }, {
+                  default: m(() => [
+                    C("Cancel")
+                  ]),
+                  _: 1
+                }, 512),
+                f(t(z), {
+                  ref_key: "apply",
+                  ref: ne,
+                  size: "sm",
+                  theme: "primary",
+                  text: "Apply",
+                  onClick: ae
+                }, {
+                  default: m(() => [
+                    C("Apply")
+                  ]),
+                  _: 1
+                }, 512)
+              ])
+            ])
+          ], !0)
+        ], 512)
+      ]),
+      _: 3
+    }, 8, ["distance", "skidding", "open", "placement"]));
+  }
+});
+export {
+  wt as default
+};

package/components/includeExclude/IncludeExcludeAppHeader.vue.d.ts

@@ -1,88 +1,138 @@
 import { Application } from './includeExcludeMocks.js';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    imgProps?: unknown;
-    optionProps?: unknown;
-    showSubTitle?: boolean;
-    clearable?: boolean;
-    searchPlaceholder?: string;
-    showIcon?: boolean;
-    keyField?: string;
-    subTitleKey?: string;
-    searchAttribute?: string;
-    applications: Application[];
-    titleText: string;
-    modelValue: Application[];
-    distanceOffset?: number;
-    skiddingOffset?: number;
-    isLoading?: boolean;
-}>, {
-    showSubTitle: boolean;
+declare const _default: import("vue").DefineComponent<{
+    searchAttribute: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    modelValue: {
+        type: import("vue").PropType<Application[]>;
+        required: true;
+    };
+    searchPlaceholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    clearable: {
+        type: import("vue").PropType<boolean>;
+    };
+    titleText: {
+        type: import("vue").PropType<string>;
+        required: true;
+        default: string;
+    };
+    distanceOffset: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    skiddingOffset: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    keyField: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    imgProps: {
+        type: import("vue").PropType<unknown>;
+        default: any;
+    };
+    optionProps: {
+        type: import("vue").PropType<unknown>;
+        default: any;
+    };
+    showSubTitle: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    showIcon: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    subTitleKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    applications: {
+        type: import("vue").PropType<Application[]>;
+        required: true;
+    };
+    isLoading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    searchAttribute: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    modelValue: {
+        type: import("vue").PropType<Application[]>;
+        required: true;
+    };
+    searchPlaceholder: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    clearable: {
+        type: import("vue").PropType<boolean>;
+    };
+    titleText: {
+        type: import("vue").PropType<string>;
+        required: true;
+        default: string;
+    };
+    distanceOffset: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    skiddingOffset: {
+        type: import("vue").PropType<number>;
+        default: number;
+    };
+    keyField: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    imgProps: {
+        type: import("vue").PropType<unknown>;
+        default: any;
+    };
+    optionProps: {
+        type: import("vue").PropType<unknown>;
+        default: any;
+    };
+    showSubTitle: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    showIcon: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+    subTitleKey: {
+        type: import("vue").PropType<string>;
+        default: string;
+    };
+    applications: {
+        type: import("vue").PropType<Application[]>;
+        required: true;
+    };
+    isLoading: {
+        type: import("vue").PropType<boolean>;
+        default: boolean;
+    };
+}>>, {
+    searchAttribute: string;
     searchPlaceholder: string;
-    showIcon: boolean;
     titleText: string;
-    keyField: string;
-    subTitleKey: string;
-    searchAttribute: string;
-    imgProps: any;
-    optionProps: any;
     distanceOffset: number;
     skiddingOffset: number;
-    isLoading: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    imgProps?: unknown;
-    optionProps?: unknown;
-    showSubTitle?: boolean;
-    clearable?: boolean;
-    searchPlaceholder?: string;
-    showIcon?: boolean;
-    keyField?: string;
-    subTitleKey?: string;
-    searchAttribute?: string;
-    applications: Application[];
-    titleText: string;
-    modelValue: Application[];
-    distanceOffset?: number;
-    skiddingOffset?: number;
-    isLoading?: boolean;
-}>, {
-    showSubTitle: boolean;
-    searchPlaceholder: string;
-    showIcon: boolean;
-    titleText: string;
     keyField: string;
-    subTitleKey: string;
-    searchAttribute: string;
     imgProps: any;
     optionProps: any;
-    distanceOffset: number;
-    skiddingOffset: number;
-    isLoading: boolean;
-}>>>, {
-    searchAttribute: string;
-    searchPlaceholder: string;
-    titleText: string;
-    distanceOffset: number;
-    skiddingOffset: number;
-    keyField: string;
     showSubTitle: boolean;
     showIcon: boolean;
     subTitleKey: string;
-    imgProps: any;
-    optionProps: any;
     isLoading: boolean;
 }>;
 export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? P[K] & {
-        default: D[K];
-    } : P[K];
-};