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

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

@@ -13,6 +13,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     endIconKey?: string;
     endIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     toolTipPlacement?: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+    treeMainOption?: boolean;
+    treeMainOptionExpanded?: boolean;
+    stopOptionClickEventPropagation?: boolean;
+    optionTwoLinesVariant?: "horizontal" | "vertical";
+    optionTwoLinesKey?: string;
+    treeChildShown?: boolean;
 }>, {
     subtitle: string;
     disabled: boolean;
@@ -27,7 +33,15 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     endIconKey: any;
     endIconType: string;
     toolTipPlacement: string;
-}>, {}, 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<{
+    treeMainOption: boolean;
+    treeMainOptionExpanded: boolean;
+    stopOptionClickEventPropagation: boolean;
+    optionTwoLinesVariant: any;
+    optionTwoLinesKey: any;
+    treeChildShown: boolean;
+}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    toggleTreeCollapse: (option: unknown) => void;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     option?: unknown;
     subtitle?: string;
     disabled?: boolean;
@@ -42,6 +56,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     endIconKey?: string;
     endIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     toolTipPlacement?: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+    treeMainOption?: boolean;
+    treeMainOptionExpanded?: boolean;
+    stopOptionClickEventPropagation?: boolean;
+    optionTwoLinesVariant?: "horizontal" | "vertical";
+    optionTwoLinesKey?: string;
+    treeChildShown?: boolean;
 }>, {
     subtitle: string;
     disabled: boolean;
@@ -56,11 +76,21 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     endIconKey: any;
     endIconType: string;
     toolTipPlacement: string;
-}>>>, {
+    treeMainOption: boolean;
+    treeMainOptionExpanded: boolean;
+    stopOptionClickEventPropagation: boolean;
+    optionTwoLinesVariant: any;
+    optionTwoLinesKey: any;
+    treeChildShown: boolean;
+}>>> & {
+    onToggleTreeCollapse?: (option: unknown) => any;
+}, {
     option: any;
     disabled: boolean;
     active: boolean;
     endIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
+    optionTwoLinesVariant: "horizontal" | "vertical";
+    optionTwoLinesKey: string;
     isIndeterminate: boolean;
     subtitle: string;
     selectAllOption: boolean;
@@ -70,6 +100,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     iconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     endIconKey: string;
     toolTipPlacement: "auto" | "left" | "right" | "bottom" | "top" | "auto-start" | "auto-end" | "top-start" | "top-end" | "right-start" | "right-end" | "bottom-start" | "bottom-end" | "left-start" | "left-end";
+    treeMainOption: boolean;
+    treeMainOptionExpanded: boolean;
+    stopOptionClickEventPropagation: boolean;
+    treeChildShown: boolean;
 }>, {
     image?(_: {}): any;
     "icon-start"?(_: {}): any;

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

@@ -1,7 +1,7 @@
 import o from "./OptionV4.vue2.js";
 /* empty css               */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../OptionV4.vue_vue_type_style_index_0_scoped_9db0f796_lang.css"; //*');
-const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-9db0f796"]]);
+// import "../../../OptionV4.vue_vue_type_style_index_0_scoped_77509f61_lang.css"; //*');
+const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-77509f61"]]);
 export {
   s as default
 };

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

@@ -1,24 +1,28 @@
- import "../../../OptionV4.vue_vue_type_style_index_0_scoped_9db0f796_lang.css"; import { defineComponent as B, ref as z, computed as N, openBlock as n, createBlock as f, unref as i, withCtx as y, createElementVNode as s, normalizeClass as v, createCommentVNode as o, createElementBlock as l, renderSlot as c, createVNode as d, createTextVNode as K, toDisplayString as h, withModifiers as V } 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 w from "../../typography/Text.vue.js";
-import O from "../../checkbox/v4/CheckboxV4.vue.js";
-import T 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 E from "../../typography/v4/Typography.vue.js";
-import j from "../../tooltip/v4/TooltipV4.vue.js";
-import { isElementTruncated as M } from "../../../utils/text.js";
-const R = {
+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"
-}, A = ["src"], D = {
+}, F = ["src"], G = {
   key: 2,
   class: "start-icon"
-}, q = {
+}, H = { class: "main-text" }, J = {
+  key: 0,
+  class: "caption-text"
+}, Q = {
   key: 3,
   class: "end-icon"
-}, F = { key: 0 }, ee = /* @__PURE__ */ B({
+}, U = ["onClick"], W = { key: 0 }, ce = /* @__PURE__ */ V({
   __name: "OptionV4",
   props: {
     option: { default: null },
@@ -34,109 +38,145 @@ const R = {
     iconType: { default: "regular" },
     endIconKey: { default: null },
     endIconType: { default: "regular" },
-    toolTipPlacement: { default: "right" }
+    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 },
+    treeChildShown: { type: Boolean, default: !1 }
   },
-  setup(e) {
-    const g = e, { selected: r, isMulti: u, id: I, onClick: p, api: b } = S(g), m = z(null), x = N(
-      () => m.value && M(m.value)
-    ), C = (t) => t && typeof t == "object" && "optionTooltipText" in t ? t.optionTooltipText : x.value ? t[g.nameKey] : "", $ = (t) => t && typeof t == "object" && "optionTooltipTestId" in t ? t.optionTooltipTestId : null;
-    return (t, a) => (n(), f(i(j), {
-      text: C(e.option),
-      "test-id": $(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: y(() => [
+      default: u(() => [
         s("div", {
           ref: "el",
-          class: v(["item-container", {
+          class: m(["item-container", {
             "item-container--disabled": e.disabled,
             "item-container--active": e.nameKey ? !1 : e.active,
-            "item-container--selected": i(r),
-            "item-container--multi": i(u)
+            "item-container--selected": o(p),
+            "item-container--multi": o(T)
           }])
         }, [
           s("div", {
-            class: v(["item", {
-              "item--multi": i(u),
+            class: m(["item", {
+              "item--multi": o(T),
               "item--with-icon": t.$slots["icon-start"] || t.$slots.image
             }])
           }, [
-            i(u) ? (n(), f(i(O), {
+            o(T) ? (i(), g(o(L), {
               key: 0,
-              id: i(I).toString(),
+              id: o(B).toString(),
               tabindex: "-1",
               class: "checkbox",
-              "is-checked": i(r),
+              "is-checked": o(p),
               "is-indeterminate": e.isIndeterminate,
-              onClick: a[0] || (a[0] = (k) => e.disabled ? i(P)() : i(p)(k))
-            }, null, 8, ["id", "is-checked", "is-indeterminate"])) : o("", !0),
-            t.$slots.image || e.imageKey ? (n(), l("div", R, [
-              c(t.$slots, "image", {}, () => [
-                e.imageKey ? (n(), l("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, A)) : o("", !0)
+                }, null, 8, F)) : n("", !0)
               ], !0)
-            ])) : o("", !0),
-            t.$slots["icon-start"] || e.iconKey ? (n(), l("div", D, [
-              c(t.$slots, "icon-start", {}, () => [
-                d(i(T), {
+            ])) : 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),
+            ])) : n("", !0),
             s("div", {
               ref_key: "textContainerRef",
-              ref: m,
+              ref: d,
               class: "text-container"
             }, [
-              d(i(E), {
+              c(o(w), {
                 class: "option-text",
                 variant: "body2"
               }, {
-                default: y(() => [
-                  c(t.$slots, "default", {}, () => [
-                    K(h(e.option[e.nameKey]), 1)
+                default: u(() => [
+                  f(t.$slots, "default", {}, () => [
+                    s("div", {
+                      class: m(`option-content-${e.optionTwoLinesVariant || "horizontal"}`)
+                    }, [
+                      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
+                        })
+                      ])) : n("", !0)
+                    ], 2)
                   ], !0)
                 ]),
                 _: 3
               }),
-              e.subtitle ? (n(), f(i(w), {
+              e.subtitle ? (i(), g(o(S), {
                 key: 0,
                 class: "subtitle",
                 size: "xs"
               }, {
-                default: y(() => [
-                  K(h(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(), l("div", q, [
-              c(t.$slots, "icon-end", {}, () => [
-                d(i(T), {
+            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(r) ? (n(), l("div", F, [
+          o(v).clearable && o(p) ? (i(), l("div", W, [
             s("button", {
               class: "clear-button",
-              onClick: a[1] || (a[1] = V((k) => i(b).clearSelection(), ["prevent", "stop"]))
+              onClick: r[1] || (r[1] = K((C) => o(v).clearSelection(), ["prevent", "stop"]))
             }, [
-              d(i(T), {
+              c(o(y), {
                 name: "close",
                 width: "8",
                 height: "8"
               })
             ])
-          ])) : o("", !0)
+          ])) : n("", !0)
         ], 2)
       ]),
       _: 3
@@ -144,5 +184,5 @@ const R = {
   }
 });
 export {
-  ee 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
 };