@ironsource/shared-ui 2.1.7-rc.9 → 2.1.7-test.10

package/components/dropdown/v4/OptionV4.vue2.js

@@ -1,27 +1,28 @@
- import "../../../OptionV4.vue_vue_type_style_index_0_scoped_b6a06f00_lang.css"; import { defineComponent as B, ref as z, computed as V, openBlock as n, createBlock as y, unref as i, withCtx as d, createElementVNode as l, normalizeClass as T, createCommentVNode as o, createElementBlock as a, renderSlot as r, createVNode as s, toDisplayString as v, createTextVNode as h, withModifiers as L } from "vue";
+ import "../../../OptionV4.vue_vue_type_style_index_0_scoped_77509f61_lang.css"; import { defineComponent as V, ref as x, watch as M, openBlock as i, createBlock as g, unref as o, withCtx as u, createElementVNode as s, normalizeClass as m, createCommentVNode as n, createElementBlock as l, renderSlot as f, createVNode as c, toDisplayString as k, createTextVNode as b, withModifiers as K } from "vue";
 import "../../typography/Heading.vue.js";
-import N from "../../typography/Text.vue.js";
-import O from "../../checkbox/v4/CheckboxV4.vue.js";
-import g from "../../icon/v4/IconV4.vue.js";
+import S from "../../typography/Text.vue.js";
+import L from "../../checkbox/v4/CheckboxV4.vue.js";
+import y from "../../icon/v4/IconV4.vue.js";
 import "../../icon/v4/IconFlag.vue.js";
-import { NOOP as P } from "@vue/shared";
-import { optionCommon as S } from "../common/Option.common.js";
-import x from "../../typography/v4/Typography.vue.js";
-import E from "../../tooltip/v4/TooltipV4.vue.js";
-import { isElementTruncated as j } from "../../../utils/text.js";
-const M = {
+import { NOOP as N } from "@vue/shared";
+import { optionCommon as j } from "../common/Option.common.js";
+import w from "../../typography/v4/Typography.vue.js";
+import R from "../../tooltip/v4/TooltipV4.vue.js";
+import { isElementTruncated as A } from "../../../utils/text.js";
+import { promiseTimeout as D } from "@vueuse/core";
+const q = {
   key: 1,
   class: "image"
-}, R = ["src"], A = {
+}, F = ["src"], G = {
   key: 2,
   class: "start-icon"
-}, D = { class: "main-text" }, q = {
+}, H = { class: "main-text" }, J = {
   key: 0,
   class: "caption-text"
-}, F = {
+}, Q = {
   key: 3,
   class: "end-icon"
-}, G = { key: 0 }, ie = /* @__PURE__ */ B({
+}, U = ["onClick"], W = { key: 0 }, ce = /* @__PURE__ */ V({
   __name: "OptionV4",
   props: {
     option: { default: null },
@@ -38,122 +39,144 @@ const M = {
     endIconKey: { default: null },
     endIconType: { default: "regular" },
     toolTipPlacement: { default: "right" },
+    treeMainOption: { type: Boolean, default: !1 },
+    treeMainOptionExpanded: { type: Boolean, default: !1 },
+    stopOptionClickEventPropagation: { type: Boolean, default: !1 },
     optionTwoLinesVariant: { default: void 0 },
-    optionTwoLinesKey: { default: void 0 }
+    optionTwoLinesKey: { default: void 0 },
+    treeChildShown: { type: Boolean, default: !1 }
   },
-  setup(e) {
-    const k = e, { selected: u, isMulti: m, id: p, onClick: I, api: b } = S(k), f = z(null), C = V(
-      () => f.value && j(f.value)
-    ), $ = (t) => t && typeof t == "object" && "optionTooltipText" in t ? t.optionTooltipText : C.value ? t[k.nameKey] : "", w = (t) => t && typeof t == "object" && "optionTooltipTestId" in t ? t.optionTooltipTestId : null;
-    return (t, c) => (n(), y(i(E), {
-      text: $(e.option),
-      "test-id": w(e.option),
+  emits: ["toggleTreeCollapse"],
+  setup(e, { emit: I }) {
+    const a = e, { selected: p, isMulti: T, id: B, onClick: O, api: v } = j(a), $ = (t) => {
+      a.stopOptionClickEventPropagation && t.stopPropagation(), a.disabled ? N() : O(t);
+    }, d = x(null), h = x(!1);
+    M([() => a.treeChildShown, d], async () => {
+      await D(100), h.value = d.value && A(d.value);
+    });
+    const z = (t) => t && typeof t == "object" && "optionTooltipText" in t ? t.optionTooltipText : h.value ? t[a.nameKey] : "", E = (t) => t && typeof t == "object" && "optionTooltipTestId" in t ? t.optionTooltipTestId : null, P = () => {
+      I("toggleTreeCollapse", a.option);
+    };
+    return (t, r) => (i(), g(o(R), {
+      text: z(e.option),
+      "test-id": E(e.option),
       placement: e.toolTipPlacement,
       class: "tooltip-option"
     }, {
-      default: d(() => [
-        l("div", {
+      default: u(() => [
+        s("div", {
           ref: "el",
-          class: T(["item-container", {
+          class: m(["item-container", {
             "item-container--disabled": e.disabled,
             "item-container--active": e.nameKey ? !1 : e.active,
-            "item-container--selected": i(u),
-            "item-container--multi": i(m)
+            "item-container--selected": o(p),
+            "item-container--multi": o(T)
           }])
         }, [
-          l("div", {
-            class: T(["item", {
-              "item--multi": i(m),
+          s("div", {
+            class: m(["item", {
+              "item--multi": o(T),
               "item--with-icon": t.$slots["icon-start"] || t.$slots.image
             }])
           }, [
-            i(m) ? (n(), y(i(O), {
+            o(T) ? (i(), g(o(L), {
               key: 0,
-              id: i(p).toString(),
+              id: o(B).toString(),
               tabindex: "-1",
               class: "checkbox",
-              "is-checked": i(u),
+              "is-checked": o(p),
               "is-indeterminate": e.isIndeterminate,
-              onClick: c[0] || (c[0] = (K) => e.disabled ? i(P)() : i(I)(K))
-            }, null, 8, ["id", "is-checked", "is-indeterminate"])) : o("", !0),
-            t.$slots.image || e.imageKey ? (n(), a("div", M, [
-              r(t.$slots, "image", {}, () => [
-                e.imageKey ? (n(), a("img", {
+              onClick: r[0] || (r[0] = (C) => $(C))
+            }, null, 8, ["id", "is-checked", "is-indeterminate"])) : n("", !0),
+            t.$slots.image || e.imageKey ? (i(), l("div", q, [
+              f(t.$slots, "image", {}, () => [
+                e.imageKey ? (i(), l("img", {
                   key: 0,
                   src: e.option[e.imageKey]
-                }, null, 8, R)) : o("", !0)
+                }, null, 8, F)) : n("", !0)
               ], !0)
-            ])) : o("", !0),
-            t.$slots["icon-start"] || e.iconKey ? (n(), a("div", A, [
-              r(t.$slots, "icon-start", {}, () => [
-                s(i(g), {
+            ])) : n("", !0),
+            t.$slots["icon-start"] || e.iconKey ? (i(), l("div", G, [
+              f(t.$slots, "icon-start", {}, () => [
+                c(o(y), {
                   type: e.iconType,
                   name: e.option[e.iconKey],
                   size: e.iconType === "regular" ? "20px" : "16px"
                 }, null, 8, ["type", "name", "size"])
               ], !0)
-            ])) : o("", !0),
-            l("div", {
+            ])) : n("", !0),
+            s("div", {
               ref_key: "textContainerRef",
-              ref: f,
+              ref: d,
               class: "text-container"
             }, [
-              s(i(x), {
+              c(o(w), {
                 class: "option-text",
                 variant: "body2"
               }, {
-                default: d(() => [
-                  r(t.$slots, "default", {}, () => [
-                    l("div", {
-                      class: T(`option-content-${e.optionTwoLinesVariant || "horizontal"}`)
+                default: u(() => [
+                  f(t.$slots, "default", {}, () => [
+                    s("div", {
+                      class: m(`option-content-${e.optionTwoLinesVariant || "horizontal"}`)
                     }, [
-                      l("div", D, v(e.option[e.nameKey]), 1),
-                      e.optionTwoLinesKey ? (n(), a("div", q, [
-                        s(i(x), { variant: "caption" }, {
-                          default: d(() => [
-                            h(v(e.option[e.optionTwoLinesKey]), 1)
+                      s("div", H, k(e.option[e.nameKey]), 1),
+                      e.optionTwoLinesKey ? (i(), l("div", J, [
+                        c(o(w), { variant: "caption" }, {
+                          default: u(() => [
+                            b(k(e.option[e.optionTwoLinesKey]), 1)
                           ]),
                           _: 1
                         })
-                      ])) : o("", !0)
+                      ])) : n("", !0)
                     ], 2)
                   ], !0)
                 ]),
                 _: 3
               }),
-              e.subtitle ? (n(), y(i(N), {
+              e.subtitle ? (i(), g(o(S), {
                 key: 0,
                 class: "subtitle",
                 size: "xs"
               }, {
-                default: d(() => [
-                  h(v(e.subtitle), 1)
+                default: u(() => [
+                  b(k(e.subtitle), 1)
                 ]),
                 _: 1
-              })) : o("", !0)
+              })) : n("", !0)
             ], 512),
-            t.$slots["icon-end"] || e.endIconKey && e.option[e.endIconKey] ? (n(), a("div", F, [
-              r(t.$slots, "icon-end", {}, () => [
-                s(i(g), {
+            t.$slots["icon-end"] || e.endIconKey && e.option[e.endIconKey] ? (i(), l("div", Q, [
+              f(t.$slots, "icon-end", {}, () => [
+                c(o(y), {
                   type: e.endIconType,
                   name: e.option[e.endIconKey],
                   size: e.endIconType === "regular" || e.endIconType === "ab-test" ? "20px" : "16px"
                 }, null, 8, ["type", "name", "size"])
               ], !0)
-            ])) : o("", !0)
+            ])) : n("", !0),
+            e.treeMainOption ? (i(), l("div", {
+              key: 4,
+              class: "tree-main-arrow-wrapper",
+              onClick: K(P, ["stop"])
+            }, [
+              c(o(y), {
+                name: "caret-down",
+                size: "16px",
+                class: m(`app-trigger--icon ${e.treeMainOptionExpanded && "expanded"}`)
+              }, null, 8, ["class"])
+            ], 8, U)) : n("", !0)
           ], 2),
-          i(b).clearable && i(u) ? (n(), a("div", G, [
-            l("button", {
+          o(v).clearable && o(p) ? (i(), l("div", W, [
+            s("button", {
               class: "clear-button",
-              onClick: c[1] || (c[1] = L((K) => i(b).clearSelection(), ["prevent", "stop"]))
+              onClick: r[1] || (r[1] = K((C) => o(v).clearSelection(), ["prevent", "stop"]))
             }, [
-              s(i(g), {
+              c(o(y), {
                 name: "close",
                 width: "8",
                 height: "8"
               })
             ])
-          ])) : o("", !0)
+          ])) : n("", !0)
         ], 2)
       ]),
       _: 3
@@ -161,5 +184,5 @@ const M = {
   }
 });
 export {
-  ie as default
+  ce as default
 };

package/components/dropdown/v4/TreeDropdown.vue.d.ts

@@ -1,23 +1,23 @@
-import { IconTypes } from '@is-ssp/icon/v4/Icon.types';
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     options: unknown[];
     selected?: unknown[];
     isOpen?: boolean;
     placeholder?: string;
     inlineSearchPlaceholder?: string;
-    size?: 'small' | 'medium' | 'large';
+    size?: "small" | "medium" | "large";
     disabled?: boolean;
     testId?: string;
     displayValue: (option: unknown) => string;
     optionNameKey?: string;
     optionIconKey?: string;
     optionImageKey?: string;
-    optionIconType?: IconTypes;
+    optionIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     optionEndIconKey?: string;
-    optionEndIconType?: IconTypes;
+    optionEndIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     valueToCopy?: string;
     disabledOptionKey?: string;
-    optionChildrenKey?: string;
+    optionChildrenKey: string;
+    optionUniqueIdKey: string;
 }>, {
     selected: any;
     placeholder: string;
@@ -33,7 +33,6 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     optionEndIconType: any;
     valueToCopy: any;
     disabledOptionKey: string;
-    optionChildrenKey: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:selected": (value: unknown) => void;
     "update:isOpen": (value: unknown) => void;
@@ -43,19 +42,20 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     isOpen?: boolean;
     placeholder?: string;
     inlineSearchPlaceholder?: string;
-    size?: 'small' | 'medium' | 'large';
+    size?: "small" | "medium" | "large";
     disabled?: boolean;
     testId?: string;
     displayValue: (option: unknown) => string;
     optionNameKey?: string;
     optionIconKey?: string;
     optionImageKey?: string;
-    optionIconType?: IconTypes;
+    optionIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     optionEndIconKey?: string;
-    optionEndIconType?: IconTypes;
+    optionEndIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     valueToCopy?: string;
     disabledOptionKey?: string;
-    optionChildrenKey?: string;
+    optionChildrenKey: string;
+    optionUniqueIdKey: string;
 }>, {
     selected: any;
     placeholder: string;
@@ -71,13 +71,12 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     optionEndIconType: any;
     valueToCopy: any;
     disabledOptionKey: string;
-    optionChildrenKey: string;
 }>>> & {
     "onUpdate:selected"?: (value: unknown) => any;
     "onUpdate:isOpen"?: (value: unknown) => any;
 }, {
     disabled: boolean;
-    size: 'small' | 'medium' | 'large';
+    size: "small" | "medium" | "large";
     testId: string;
     selected: unknown[];
     placeholder: string;
@@ -85,12 +84,13 @@ declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_T
     optionNameKey: string;
     optionIconKey: string;
     optionImageKey: string;
-    optionIconType: IconTypes;
+    optionIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     optionEndIconKey: string;
-    optionEndIconType: IconTypes;
+    optionEndIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     valueToCopy: string;
     disabledOptionKey: string;
-    optionChildrenKey: string;
+}>, {
+    "trigger-end-icon"?(_: {}): any;
 }>;
 export default _default;
 type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
@@ -110,3 +110,8 @@ type __VLS_WithDefaults<P, D> = {
 type __VLS_Prettify<T> = {
     [K in keyof T]: T[K];
 } & {};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/components/dropdown/v4/TreeDropdown.vue.js

@@ -1,7 +1,7 @@
 import o from "./TreeDropdown.vue2.js";
 /* empty css                   */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../TreeDropdown.vue_vue_type_style_index_0_scoped_142eab98_lang.css"; //*');
-const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-142eab98"]]);
+// import "../../../TreeDropdown.vue_vue_type_style_index_0_scoped_dbd80d49_lang.css"; //*');
+const r = /* @__PURE__ */ e(o, [["__scopeId", "data-v-dbd80d49"]]);
 export {
-  s as default
+  r as default
 };