@ironsource/shared-ui 2.1.7-rc.0 → 2.1.7-rc.10

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

@@ -9,10 +9,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     nameKey?: string;
     imageKey?: string;
     iconKey?: string;
-    iconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat";
+    iconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     endIconKey?: string;
-    endIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat";
+    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";
+    optionTwoLinesVariant?: "horizontal" | "vertical";
+    optionTwoLinesKey?: string;
 }>, {
     subtitle: string;
     disabled: boolean;
@@ -27,6 +29,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     endIconKey: any;
     endIconType: string;
     toolTipPlacement: string;
+    optionTwoLinesVariant: any;
+    optionTwoLinesKey: any;
 }>, {}, 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<{
     option?: unknown;
     subtitle?: string;
@@ -38,10 +42,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     nameKey?: string;
     imageKey?: string;
     iconKey?: string;
-    iconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat";
+    iconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate";
     endIconKey?: string;
-    endIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat";
+    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";
+    optionTwoLinesVariant?: "horizontal" | "vertical";
+    optionTwoLinesKey?: string;
 }>, {
     subtitle: string;
     disabled: boolean;
@@ -56,18 +62,22 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     endIconKey: any;
     endIconType: string;
     toolTipPlacement: string;
+    optionTwoLinesVariant: any;
+    optionTwoLinesKey: any;
 }>>>, {
     option: any;
     disabled: boolean;
     active: boolean;
-    endIconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat";
+    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;
     nameKey: string;
     imageKey: string;
     iconKey: string;
-    iconType: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat";
+    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";
 }>, {

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

@@ -0,0 +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_b6a06f00_lang.css"; //*');
+const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-b6a06f00"]]);
+export {
+  s as default
+};

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

@@ -0,0 +1,165 @@
+ 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 "../../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 "../../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 = {
+  key: 1,
+  class: "image"
+}, R = ["src"], A = {
+  key: 2,
+  class: "start-icon"
+}, D = { class: "main-text" }, q = {
+  key: 0,
+  class: "caption-text"
+}, F = {
+  key: 3,
+  class: "end-icon"
+}, G = { key: 0 }, ie = /* @__PURE__ */ B({
+  __name: "OptionV4",
+  props: {
+    option: { default: null },
+    subtitle: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    selectedProp: { type: Boolean },
+    isIndeterminate: { type: Boolean, default: !1 },
+    selectAllOption: { type: Boolean, default: !1 },
+    active: { type: Boolean, default: null },
+    nameKey: { default: null },
+    imageKey: { default: null },
+    iconKey: { default: null },
+    iconType: { default: "regular" },
+    endIconKey: { default: null },
+    endIconType: { default: "regular" },
+    toolTipPlacement: { default: "right" },
+    optionTwoLinesVariant: { default: void 0 },
+    optionTwoLinesKey: { default: void 0 }
+  },
+  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),
+      placement: e.toolTipPlacement,
+      class: "tooltip-option"
+    }, {
+      default: d(() => [
+        l("div", {
+          ref: "el",
+          class: T(["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)
+          }])
+        }, [
+          l("div", {
+            class: T(["item", {
+              "item--multi": i(m),
+              "item--with-icon": t.$slots["icon-start"] || t.$slots.image
+            }])
+          }, [
+            i(m) ? (n(), y(i(O), {
+              key: 0,
+              id: i(p).toString(),
+              tabindex: "-1",
+              class: "checkbox",
+              "is-checked": i(u),
+              "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", {
+                  key: 0,
+                  src: e.option[e.imageKey]
+                }, null, 8, R)) : o("", !0)
+              ], !0)
+            ])) : o("", !0),
+            t.$slots["icon-start"] || e.iconKey ? (n(), a("div", A, [
+              r(t.$slots, "icon-start", {}, () => [
+                s(i(g), {
+                  type: e.iconType,
+                  name: e.option[e.iconKey],
+                  size: e.iconType === "regular" ? "20px" : "16px"
+                }, null, 8, ["type", "name", "size"])
+              ], !0)
+            ])) : o("", !0),
+            l("div", {
+              ref_key: "textContainerRef",
+              ref: f,
+              class: "text-container"
+            }, [
+              s(i(x), {
+                class: "option-text",
+                variant: "body2"
+              }, {
+                default: d(() => [
+                  r(t.$slots, "default", {}, () => [
+                    l("div", {
+                      class: T(`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)
+                          ]),
+                          _: 1
+                        })
+                      ])) : o("", !0)
+                    ], 2)
+                  ], !0)
+                ]),
+                _: 3
+              }),
+              e.subtitle ? (n(), y(i(N), {
+                key: 0,
+                class: "subtitle",
+                size: "xs"
+              }, {
+                default: d(() => [
+                  h(v(e.subtitle), 1)
+                ]),
+                _: 1
+              })) : o("", !0)
+            ], 512),
+            t.$slots["icon-end"] || e.endIconKey && e.option[e.endIconKey] ? (n(), a("div", F, [
+              r(t.$slots, "icon-end", {}, () => [
+                s(i(g), {
+                  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)
+          ], 2),
+          i(b).clearable && i(u) ? (n(), a("div", G, [
+            l("button", {
+              class: "clear-button",
+              onClick: c[1] || (c[1] = L((K) => i(b).clearSelection(), ["prevent", "stop"]))
+            }, [
+              s(i(g), {
+                name: "close",
+                width: "8",
+                height: "8"
+              })
+            ])
+          ])) : o("", !0)
+        ], 2)
+      ]),
+      _: 3
+    }, 8, ["text", "test-id", "placement"]));
+  }
+});
+export {
+  ie as default
+};

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

@@ -0,0 +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"]]);
+export {
+  s as default
+};

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

@@ -0,0 +1,122 @@
+ import "../../../TreeDropdown.vue_vue_type_style_index_0_scoped_142eab98_lang.css"; import { defineComponent as w, ref as S, watch as T, openBlock as u, createBlock as f, unref as o, withCtx as E, createVNode as N, withModifiers as k, createElementBlock as h, Fragment as B, renderList as x, createCommentVNode as z } from "vue";
+import V from "./DropdownV4.vue.js";
+import "./DefaultDropdownTrigger.vue.js";
+import "./IconButtonDropdownTrigger.vue.js";
+import "./ChipDropdownTrigger.vue.js";
+import "./AppDropdownTrigger.vue.js";
+import "./ButtonDropdownTrigger.vue.js";
+import "./ButtonFilterDropdownTrigger.vue.js";
+import "./TreeDropdown.vue.js";
+import v from "./OptionV4.vue.js";
+import { useChildOptions as D } from "../composables/useChildOptions.js";
+const P = {
+  key: 0,
+  class: "child-options"
+}, Q = /* @__PURE__ */ w({
+  __name: "TreeDropdown",
+  props: {
+    options: null,
+    selected: { default: null },
+    isOpen: { type: Boolean },
+    placeholder: { default: "Select" },
+    inlineSearchPlaceholder: { default: "Search" },
+    size: { default: "medium" },
+    disabled: { type: Boolean, default: !1 },
+    testId: { default: "" },
+    displayValue: null,
+    optionNameKey: { default: "" },
+    optionIconKey: { default: "" },
+    optionImageKey: { default: "" },
+    optionIconType: { default: null },
+    optionEndIconKey: { default: "" },
+    optionEndIconType: { default: null },
+    valueToCopy: { default: null },
+    disabledOptionKey: { default: "disabled" },
+    optionChildrenKey: { default: "" }
+  },
+  emits: ["update:selected", "update:isOpen"],
+  setup(e, { emit: y }) {
+    const a = e, l = S(a.selected);
+    T(
+      () => a.selected,
+      () => {
+        l.value = [...a.selected];
+      }
+    );
+    const { hasChildren: c, getChildren: d, allChildrenSelected: r, someChildrenSelected: K } = D(l, a.optionChildrenKey), p = (n) => {
+      if (c(n)) {
+        r(n) ? l.value = l.value.filter(
+          (i) => !d(n).includes(i)
+        ) : l.value = [
+          ...l.value.filter((i) => !d(n).includes(i)),
+          ...d(n)
+        ];
+        return;
+      }
+      l.value.includes(n) ? l.value = l.value.filter(
+        (i) => i !== n
+      ) : l.value = [...l.value, n];
+    }, m = (n) => l.value.includes(n), C = (n) => 1 + (c(n) ? d(n).length : 0), I = () => {
+      y("update:selected", l.value);
+    }, g = () => {
+      l.value = [];
+    };
+    return (n, i) => (u(), f(o(V), {
+      multi: "",
+      class: "tree-dropdown",
+      "show-select-all": !1,
+      "is-open": e.isOpen,
+      options: e.options,
+      selected: e.selected,
+      "display-value": e.displayValue,
+      placeholder: e.placeholder,
+      "inline-search-placeholder": e.inlineSearchPlaceholder,
+      "option-name-key": e.optionNameKey,
+      size: e.size,
+      "test-id": e.testId,
+      disabled: e.disabled,
+      "disable-virtual-scroll": "",
+      "override-option-count-calculation": C,
+      "trigger-show-all-selected-text": !1,
+      "onUpdate:selected": i[0] || (i[0] = (t) => y("update:selected", t)),
+      "onUpdate:isOpen": i[1] || (i[1] = (t) => y("update:isOpen", t)),
+      onApply: I,
+      onClear: g
+    }, {
+      default: E(({ option: t, index: b }) => [
+        N(o(v), {
+          option: t,
+          "selected-prop": o(c)(t) ? o(r)(t) : m(t),
+          "is-indeterminate": !o(r)(t) && o(K)(t),
+          disabled: t[e.disabledOptionKey],
+          "name-key": e.optionNameKey,
+          "image-key": e.optionImageKey,
+          "icon-key": e.optionIconKey,
+          "icon-type": e.optionIconType,
+          "end-icon-key": e.optionEndIconKey,
+          "end-icon-type": e.optionEndIconType,
+          onClick: k(() => p(t), ["stop"])
+        }, null, 8, ["option", "selected-prop", "is-indeterminate", "disabled", "name-key", "image-key", "icon-key", "icon-type", "end-icon-key", "end-icon-type", "onClick"]),
+        o(c)(t) ? (u(), h("div", P, [
+          (u(!0), h(B, null, x(o(d)(t), (s, O) => (u(), f(o(v), {
+            key: `${b}-${O}`,
+            option: s,
+            "selected-prop": m(s),
+            disabled: s[e.disabledOptionKey],
+            "name-key": e.optionNameKey,
+            "image-key": e.optionImageKey,
+            "icon-key": e.optionIconKey,
+            "icon-type": e.optionIconType,
+            "end-icon-key": e.optionEndIconKey,
+            "end-icon-type": e.optionEndIconType,
+            onClick: k(() => p(s), ["stop"])
+          }, null, 8, ["option", "selected-prop", "disabled", "name-key", "image-key", "icon-key", "icon-type", "end-icon-key", "end-icon-type", "onClick"]))), 128))
+        ])) : z("", !0)
+      ]),
+      _: 1
+    }, 8, ["is-open", "options", "selected", "display-value", "placeholder", "inline-search-placeholder", "option-name-key", "size", "test-id", "disabled"]));
+  }
+});
+export {
+  Q as default
+};

package/components/dropdown/v4/dropdownStoryArgs.d.ts

@@ -220,7 +220,21 @@ export declare const dropDownStoryArgs: {
         };
     };
     optionIconType: {
-        options: ("fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat")[];
+        options: ("fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat" | "content-rate")[];
+        table: {
+            category: string;
+        };
+    };
+    optionTwoLinesVariant: {
+        options: string[];
+        table: {
+            category: string;
+        };
+    };
+    optionTwoLinesKey: {
+        control: {
+            type: string;
+        };
         table: {
             category: string;
         };