@ironsource/shared-ui 2.1.6-rc.32 → 2.1.6-rc.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/AppDropdownTrigger.vue_vue_type_style_index_0_scoped_858cefbf_lang.css +1 -0
  2. package/OptionV4.vue_vue_type_style_index_0_scoped_3209b56c_lang.css +1 -0
  3. package/components/dropdown/v4/AppDropdownTrigger.vue.js +2 -2
  4. package/components/dropdown/v4/AppDropdownTrigger.vue2.js +41 -40
  5. package/components/dropdown/v4/OptionV4.vue.js +2 -2
  6. package/components/dropdown/v4/OptionV4.vue2.js +41 -38
  7. package/package.json +1 -1
  8. package/utils/text.d.ts +1 -0
  9. package/utils/text.js +9 -0
  10. package/AppDropdownTrigger.vue_vue_type_style_index_0_scoped_c700276e_lang.css +0 -1
  11. package/OptionV4.vue_vue_type_style_index_0_scoped_1df23c31_lang.css +0 -1
package/AppDropdownTrigger.vue_vue_type_style_index_0_scoped_858cefbf_lang.css ADDED
@@ -0,0 +1 @@
1
+ .app-trigger-wrapper[data-v-858cefbf]{display:flex}.app-trigger-wrapper.with-copy .app-trigger[data-v-858cefbf]{border-radius:var(--border-radius-lg) 0 0 var(--border-radius-lg);width:calc(100% - 41px)}.app-trigger-key[data-v-858cefbf]{flex:none}.app-trigger-key--content[data-v-858cefbf]{padding:10px;background:var(--default-main);cursor:pointer;border-radius:0 var(--border-radius-lg) var(--border-radius-lg) 0;border-left:1px solid var(--common-divider);color:var(--action-active)}.app-trigger-key--content[data-v-858cefbf]:hover{background:var(--action-selected);color:var(--action-primary)}.app-trigger[data-v-858cefbf]{width:100%;padding:0 12px;border-radius:var(--border-radius-lg);cursor:pointer;user-select:none;display:inline-flex;background:var(--default-main);height:40px;align-items:center}.app-trigger[data-v-858cefbf]:hover,.app-trigger.active[data-v-858cefbf]{background:var(--action-selected)}.app-trigger.disabled[data-v-858cefbf]{cursor:auto}.app-trigger--content[data-v-858cefbf]{color:var(--text-primary);display:flex;column-gap:4px;width:calc(100% - 20px);align-items:center}.app-trigger--content .x-circle-wrapper[data-v-858cefbf]{color:var(--primary-dark)}.app-trigger--content .x-circle-wrapper[data-v-858cefbf]:hover{color:var(--primary-main)}.app-trigger--icon[data-v-858cefbf]{display:flex;align-items:center;color:var(--action-active)}.app-trigger .displayed-value[data-v-858cefbf]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.app-trigger .image[data-v-858cefbf]{width:28px;height:28px;flex:none}.app-trigger .image img[data-v-858cefbf]{border-radius:4px;width:100%;height:100%}.app-trigger .start-icon[data-v-858cefbf],.app-trigger .end-icon[data-v-858cefbf]{display:flex;color:var(--action-active)}.app-trigger .end-icon[data-v-858cefbf]{margin-right:var(--spacing-100)}.app-trigger .label-text[data-v-858cefbf]{display:flex;align-items:center;gap:8px}.app-trigger .label-text .text-content[data-v-858cefbf]{display:flex;align-items:center;gap:4px;width:100%}.app-trigger .label-text .text-content .text-content-value[data-v-858cefbf]{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-trigger .label-text .is-mandatory[data-v-858cefbf]{padding-top:5px;color:var(--error-main)}.value-tooltip[data-v-858cefbf]{display:block}.value-tooltip[data-v-858cefbf] .container{width:100%}
package/OptionV4.vue_vue_type_style_index_0_scoped_3209b56c_lang.css ADDED
@@ -0,0 +1 @@
1
+ .label[data-v-3209b56c]{color:#41454d}.item-container[data-v-3209b56c]{width:100%;display:flex;align-items:center;cursor:pointer;border-radius:var(--border-radius-lg);margin-bottom:.25rem;color:var(--text-primary);padding:6px 8px}.item-container--disabled[data-v-3209b56c]{cursor:initial;color:var(--text-disabled)}.item-container[data-v-3209b56c]:hover:not(.item-container--disabled){background-color:var(--action-hover)}.item-container--active[data-v-3209b56c],.item-container[data-v-3209b56c]:active{background-color:var(--action-selected)}.item-container:not(.item-container--multi).item-container--selected[data-v-3209b56c]{background-color:var(--action-selected)}.subtitle[data-v-3209b56c]{color:#7b838c;line-height:1rem}.clear-button[data-v-3209b56c]{display:flex;padding:0 4px;color:#7b838c;align-items:center;height:auto;background-image:none;min-width:auto;border:none;background-color:transparent}.clear-button[data-v-3209b56c]:hover{color:#3083ff}.item[data-v-3209b56c]{width:100%;display:flex;gap:.5rem;align-items:center}.item--with-icon[data-v-3209b56c],.item--multi[data-v-3209b56c]{display:flex;flex-direction:row;align-items:center;justify-content:start}.item .image[data-v-3209b56c]{width:20px;height:20px;flex:none}.item .image img[data-v-3209b56c]{width:20px;height:20px;border-radius:4px}.item .start-icon[data-v-3209b56c],.item .end-icon[data-v-3209b56c]{display:flex;color:var(--action-active)}.item .option-text[data-v-3209b56c]{line-height:1.1875rem}.text-container[data-v-3209b56c]{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.tooltip-option[data-v-3209b56c]{display:block}.tooltip-option[data-v-3209b56c] .container{width:100%}
package/components/dropdown/v4/AppDropdownTrigger.vue.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import o from "./AppDropdownTrigger.vue2.js";
2
2
  /* empty css */import e from "../../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../../AppDropdownTrigger.vue_vue_type_style_index_0_scoped_c700276e_lang.css"; //*');
4
- const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-c700276e"]]);
3
+ // import "../../../AppDropdownTrigger.vue_vue_type_style_index_0_scoped_858cefbf_lang.css"; //*');
4
+ const s = /* @__PURE__ */ e(o, [["__scopeId", "data-v-858cefbf"]]);
5
5
  export {
6
6
  s as default
7
7
  };
package/components/dropdown/v4/AppDropdownTrigger.vue2.js CHANGED
@@ -1,24 +1,25 @@
1
- import "../../../AppDropdownTrigger.vue_vue_type_style_index_0_scoped_c700276e_lang.css"; import { defineComponent as E, computed as y, ref as O, watch as w, nextTick as z, openBlock as a, createElementBlock as i, normalizeClass as N, createElementVNode as d, mergeProps as C, unref as t, renderSlot as f, createCommentVNode as c, createVNode as s, withCtx as m, toDisplayString as S } from "vue";
2
- import p from "../../icon/v4/IconV4.vue.js";
1
+ import "../../../AppDropdownTrigger.vue_vue_type_style_index_0_scoped_858cefbf_lang.css"; import { defineComponent as B, computed as y, ref as O, watch as w, nextTick as z, openBlock as a, createElementBlock as i, normalizeClass as N, createElementVNode as d, mergeProps as C, unref as t, renderSlot as f, createCommentVNode as c, createVNode as s, withCtx as m, toDisplayString as S } from "vue";
2
+ import r from "../../icon/v4/IconV4.vue.js";
3
3
  import D from "../../typography/v4/Typography.vue.js";
4
4
  import { DropdownTestIdModifiers as g } from "../../../testids/index.js";
5
5
  import { useTestIdAttrs as R } from "../../../utils/testIds.js";
6
6
  import b from "../../tooltip/v4/TooltipV4.vue.js";
7
7
  import { useClipboard as P } from "@vueuse/core";
8
- import { Snackbar as W } from "../../snackbar/v4/index.js";
9
- const U = { class: "app-trigger--content" }, L = {
8
+ import { Snackbar as U } from "../../snackbar/v4/index.js";
9
+ import { isElementTruncated as L } from "../../../utils/text.js";
10
+ const M = { class: "app-trigger--content" }, W = {
10
11
  key: 0,
11
12
  class: "image"
12
- }, M = ["src"], j = {
13
+ }, j = ["src"], q = {
13
14
  key: 1,
14
15
  class: "start-icon"
15
- }, q = { class: "label-text" }, F = { key: 0 }, G = { class: "text-content" }, H = {
16
+ }, F = { class: "label-text" }, G = { key: 0 }, H = { class: "text-content" }, J = {
16
17
  key: 0,
17
18
  class: "is-mandatory"
18
- }, J = {
19
+ }, Q = {
19
20
  key: 2,
20
21
  class: "end-icon"
21
- }, Q = { class: "app-trigger-key--content" }, ae = /* @__PURE__ */ E({
22
+ }, X = { class: "app-trigger-key--content" }, se = /* @__PURE__ */ B({
22
23
  __name: "AppDropdownTrigger",
23
24
  props: {
24
25
  placeholder: { default: "Select app" },
@@ -44,37 +45,37 @@ const U = { class: "app-trigger--content" }, L = {
44
45
  optionEndIconType: { default: null }
45
46
  },
46
47
  emits: ["click", "copyToClipboard"],
47
- setup(o, { emit: v }) {
48
+ setup(o, { emit: T }) {
48
49
  const e = o, { copy: x, copied: K } = P({}), A = y(
49
50
  () => e.feedbackVariant ? `state-${e.feedbackVariant}` : ""
50
51
  ), $ = () => {
51
- v("click");
52
- }, T = R(e.testId, g), h = "All apps selected", r = y(() => e.multi ? !Array.isArray(e.selectedOption) || !e.selectedOption?.length ? e.placeholder : e.options?.length === e.selectedOption.length ? `${h} (${e.selectedOption.length})` : e.selectedOption?.length === 1 && e.displayValue ? e.displayValue(e.selectedOption[0]) : `${e.selectedOption.length} selected` : e.selectedOption ? e.displayValue(e.selectedOption) : e.placeholder), n = y(() => {
52
+ T("click");
53
+ }, v = R(e.testId, g), h = "All apps selected", p = y(() => e.multi ? !Array.isArray(e.selectedOption) || !e.selectedOption?.length ? e.placeholder : e.options?.length === e.selectedOption.length ? `${h} (${e.selectedOption.length})` : e.selectedOption?.length === 1 && e.displayValue ? e.displayValue(e.selectedOption[0]) : `${e.selectedOption.length} selected` : e.selectedOption ? e.displayValue(e.selectedOption) : e.placeholder), n = y(() => {
53
54
  if (!e.selectedOption)
54
55
  return null;
55
56
  if (!e.multi)
56
57
  return e.selectedOption;
57
58
  if (Array.isArray(e.selectedOption))
58
59
  return e.selectedOption.length === 1 ? e.selectedOption[0] : null;
59
- }), V = async () => {
60
- await x(e.valueToCopy), K.value && (W({
60
+ }), E = async () => {
61
+ await x(e.valueToCopy), K.value && (U({
61
62
  title: "Copied successfully",
62
63
  type: "success",
63
64
  duration: 2e3
64
- }), v("copyToClipboard"));
65
+ }), T("copyToClipboard"));
65
66
  }, k = O(""), u = O(null);
66
67
  w(
67
- [r, () => e.open],
68
+ [p, () => e.open],
68
69
  async () => {
69
- await z(), B();
70
+ await z(), V();
70
71
  },
71
72
  {
72
73
  immediate: !0
73
74
  }
74
75
  );
75
- const B = () => {
76
- const l = u.value && u.value.offsetWidth < u.value.scrollWidth;
77
- k.value = l && !e.open ? r.value : "";
76
+ const V = () => {
77
+ const l = u.value && L(u.value);
78
+ k.value = l && !e.open ? p.value : "";
78
79
  };
79
80
  return (l, I) => (a(), i("div", {
80
81
  class: N(["app-trigger-wrapper", { "with-copy": !!o.valueToCopy }])
@@ -84,38 +85,38 @@ const U = { class: "app-trigger--content" }, L = {
84
85
  style: {
85
86
  paddingLeft: l.$slots.image || t(n) && o.optionImageKey ? "8px" : "12px"
86
87
  }
87
- }, t(T)[t(g).BUTTON_WRAPPER], {
88
- onClick: I[0] || (I[0] = (X) => $())
88
+ }, t(v)[t(g).BUTTON_WRAPPER], {
89
+ onClick: I[0] || (I[0] = (Y) => $())
89
90
  }), [
90
- d("div", U, [
91
- l.$slots.image || t(n) && o.optionImageKey ? (a(), i("div", L, [
91
+ d("div", M, [
92
+ l.$slots.image || t(n) && o.optionImageKey ? (a(), i("div", W, [
92
93
  f(l.$slots, "image", {}, () => [
93
94
  o.optionImageKey ? (a(), i("img", {
94
95
  key: 0,
95
96
  src: t(n)[o.optionImageKey]
96
- }, null, 8, M)) : c("", !0)
97
+ }, null, 8, j)) : c("", !0)
97
98
  ], !0)
98
99
  ])) : c("", !0),
99
- l.$slots["icon-start"] || t(n) && o.optionIconKey ? (a(), i("div", j, [
100
+ l.$slots["icon-start"] || t(n) && o.optionIconKey ? (a(), i("div", q, [
100
101
  f(l.$slots, "icon-start", {}, () => [
101
- s(t(p), {
102
+ s(t(r), {
102
103
  type: o.optionIconType,
103
104
  name: t(n)[o.optionIconKey],
104
105
  size: "20px"
105
106
  }, null, 8, ["type", "name"])
106
107
  ], !0)
107
108
  ])) : c("", !0),
108
- s(t(D), C({ variant: "button" }, t(T)[t(g).BUTTON_CONTENT], { class: "displayed-value" }), {
109
+ s(t(D), C({ variant: "button" }, t(v)[t(g).BUTTON_CONTENT], { class: "displayed-value" }), {
109
110
  default: m(() => [
110
- d("div", q, [
111
- t(r) === h ? (a(), i("span", F, [
112
- s(t(p), {
111
+ d("div", F, [
112
+ t(p) === h ? (a(), i("span", G, [
113
+ s(t(r), {
113
114
  name: "cube",
114
115
  size: "20px",
115
116
  type: "fill"
116
117
  })
117
118
  ])) : c("", !0),
118
- d("div", G, [
119
+ d("div", H, [
119
120
  s(t(b), {
120
121
  text: k.value,
121
122
  placement: "bottom",
@@ -126,19 +127,19 @@ const U = { class: "app-trigger--content" }, L = {
126
127
  ref_key: "textContainerRef",
127
128
  ref: u,
128
129
  class: "text-content-value"
129
- }, S(t(r)), 513)
130
+ }, S(t(p)), 513)
130
131
  ]),
131
132
  _: 1
132
133
  }, 8, ["text"]),
133
- o.mandatory && (Array.isArray(o.selectedOption) ? !o.selectedOption.length : !o.selectedOption) ? (a(), i("span", H, "*")) : c("", !0)
134
+ o.mandatory && (Array.isArray(o.selectedOption) ? !o.selectedOption.length : !o.selectedOption) ? (a(), i("span", J, "*")) : c("", !0)
134
135
  ])
135
136
  ])
136
137
  ]),
137
138
  _: 1
138
139
  }, 16),
139
- l.$slots["icon-end"] || t(n) && o.optionEndIconKey && t(n)[o.optionEndIconKey] ? (a(), i("div", J, [
140
+ l.$slots["icon-end"] || t(n) && o.optionEndIconKey && t(n)[o.optionEndIconKey] ? (a(), i("div", Q, [
140
141
  f(l.$slots, "icon-end", {}, () => [
141
- s(t(p), {
142
+ s(t(r), {
142
143
  type: o.optionEndIconType,
143
144
  name: t(n)[o.optionEndIconKey],
144
145
  size: "24px"
@@ -147,7 +148,7 @@ const U = { class: "app-trigger--content" }, L = {
147
148
  ])) : c("", !0)
148
149
  ]),
149
150
  d("div", null, [
150
- s(t(p), {
151
+ s(t(r), {
151
152
  name: "caret-down",
152
153
  size: "20px",
153
154
  class: "app-trigger--icon"
@@ -157,7 +158,7 @@ const U = { class: "app-trigger--content" }, L = {
157
158
  o.valueToCopy ? (a(), i("div", {
158
159
  key: 0,
159
160
  class: "app-trigger-key",
160
- onClick: V
161
+ onClick: E
161
162
  }, [
162
163
  s(t(b), {
163
164
  text: o.valueToCopy,
@@ -165,8 +166,8 @@ const U = { class: "app-trigger--content" }, L = {
165
166
  placement: "bottom"
166
167
  }, {
167
168
  default: m(() => [
168
- d("div", Q, [
169
- s(t(p), {
169
+ d("div", X, [
170
+ s(t(r), {
170
171
  name: "copy",
171
172
  size: "20px"
172
173
  })
@@ -179,5 +180,5 @@ const U = { class: "app-trigger--content" }, L = {
179
180
  }
180
181
  });
181
182
  export {
182
- ae as default
183
+ se as default
183
184
  };
package/components/dropdown/v4/OptionV4.vue.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import o from "./OptionV4.vue2.js";
2
2
  /* empty css */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
3
- // import "../../../OptionV4.vue_vue_type_style_index_0_scoped_1df23c31_lang.css"; //*');
4
- const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-1df23c31"]]);
3
+ // import "../../../OptionV4.vue_vue_type_style_index_0_scoped_3209b56c_lang.css"; //*');
4
+ const s = /* @__PURE__ */ _(o, [["__scopeId", "data-v-3209b56c"]]);
5
5
  export {
6
6
  s as default
7
7
  };
package/components/dropdown/v4/OptionV4.vue2.js CHANGED
@@ -1,22 +1,23 @@
1
- import "../../../OptionV4.vue_vue_type_style_index_0_scoped_1df23c31_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 c, normalizeClass as v, createCommentVNode as o, createElementBlock as l, renderSlot as d, createVNode as r, createTextVNode as h, toDisplayString as K, withModifiers as V } from "vue";
1
+ import "../../../OptionV4.vue_vue_type_style_index_0_scoped_3209b56c_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";
2
2
  import "../../typography/Heading.vue.js";
3
3
  import w from "../../typography/Text.vue.js";
4
4
  import O from "../../checkbox/v4/CheckboxV4.vue.js";
5
5
  import T from "../../icon/v4/IconV4.vue.js";
6
6
  import { NOOP as P } from "@vue/shared";
7
7
  import { optionCommon as S } from "../common/Option.common.js";
8
- import j from "../../typography/v4/Typography.vue.js";
9
- import E from "../../tooltip/v4/TooltipV4.vue.js";
10
- const M = {
8
+ import E from "../../typography/v4/Typography.vue.js";
9
+ import j from "../../tooltip/v4/TooltipV4.vue.js";
10
+ import { isElementTruncated as M } from "../../../utils/text.js";
11
+ const R = {
11
12
  key: 1,
12
13
  class: "image"
13
- }, R = ["src"], W = {
14
+ }, A = ["src"], D = {
14
15
  key: 2,
15
16
  class: "start-icon"
16
- }, A = {
17
+ }, q = {
17
18
  key: 3,
18
19
  class: "end-icon"
19
- }, D = { key: 0 }, Y = /* @__PURE__ */ B({
20
+ }, F = { key: 0 }, _ = /* @__PURE__ */ B({
20
21
  __name: "OptionV4",
21
22
  props: {
22
23
  option: { default: null },
@@ -35,68 +36,70 @@ const M = {
35
36
  toolTipPlacement: { default: "right" }
36
37
  },
37
38
  setup(e) {
38
- const g = e, { selected: u, isMulti: m, id: I, onClick: x, api: b } = S(g), a = z(null), C = N(() => a.value && a.value.offsetWidth < a.value.scrollWidth), p = (t) => t && typeof t == "object" && "optionTooltipText" in t ? t.optionTooltipText : C.value ? t[g.nameKey] : "", $ = (t) => t && typeof t == "object" && "optionTooltipTestId" in t ? t.optionTooltipTestId : null;
39
- return (t, s) => (n(), f(i(E), {
40
- text: p(e.option),
39
+ const g = e, { selected: r, isMulti: u, id: I, onClick: x, api: b } = S(g), m = z(null), p = N(
40
+ () => m.value && M(m.value)
41
+ ), C = (t) => t && typeof t == "object" && "optionTooltipText" in t ? t.optionTooltipText : p.value ? t[g.nameKey] : "", $ = (t) => t && typeof t == "object" && "optionTooltipTestId" in t ? t.optionTooltipTestId : null;
42
+ return (t, a) => (n(), f(i(j), {
43
+ text: C(e.option),
41
44
  "test-id": $(e.option),
42
45
  placement: e.toolTipPlacement,
43
46
  class: "tooltip-option"
44
47
  }, {
45
48
  default: y(() => [
46
- c("div", {
49
+ s("div", {
47
50
  ref: "el",
48
51
  class: v(["item-container", {
49
52
  "item-container--disabled": e.disabled,
50
53
  "item-container--active": e.nameKey ? !1 : e.active,
51
- "item-container--selected": i(u),
52
- "item-container--multi": i(m)
54
+ "item-container--selected": i(r),
55
+ "item-container--multi": i(u)
53
56
  }])
54
57
  }, [
55
- c("div", {
58
+ s("div", {
56
59
  class: v(["item", {
57
- "item--multi": i(m),
60
+ "item--multi": i(u),
58
61
  "item--with-icon": t.$slots["icon-start"] || t.$slots.image
59
62
  }])
60
63
  }, [
61
- i(m) ? (n(), f(i(O), {
64
+ i(u) ? (n(), f(i(O), {
62
65
  key: 0,
63
66
  id: i(I).toString(),
64
67
  tabindex: "-1",
65
68
  class: "checkbox",
66
69
  size: "sm",
67
- "is-checked": i(u),
70
+ "is-checked": i(r),
68
71
  "is-indeterminate": e.isIndeterminate && !e.option,
69
- onClick: s[0] || (s[0] = (k) => e.disabled ? i(P)() : i(x)(k))
72
+ onClick: a[0] || (a[0] = (k) => e.disabled ? i(P)() : i(x)(k))
70
73
  }, null, 8, ["id", "is-checked", "is-indeterminate"])) : o("", !0),
71
- t.$slots.image || e.imageKey ? (n(), l("div", M, [
72
- d(t.$slots, "image", {}, () => [
74
+ t.$slots.image || e.imageKey ? (n(), l("div", R, [
75
+ c(t.$slots, "image", {}, () => [
73
76
  e.imageKey ? (n(), l("img", {
74
77
  key: 0,
75
78
  src: e.option[e.imageKey]
76
- }, null, 8, R)) : o("", !0)
79
+ }, null, 8, A)) : o("", !0)
77
80
  ], !0)
78
81
  ])) : o("", !0),
79
- t.$slots["icon-start"] || e.iconKey ? (n(), l("div", W, [
80
- d(t.$slots, "icon-start", {}, () => [
81
- r(i(T), {
82
+ t.$slots["icon-start"] || e.iconKey ? (n(), l("div", D, [
83
+ c(t.$slots, "icon-start", {}, () => [
84
+ d(i(T), {
82
85
  type: e.iconType,
83
86
  name: e.option[e.iconKey],
84
87
  size: e.iconType === "regular" ? "20px" : "16px"
85
88
  }, null, 8, ["type", "name", "size"])
86
89
  ], !0)
87
90
  ])) : o("", !0),
88
- c("div", {
91
+ s("div", {
89
92
  ref_key: "textContainerRef",
90
- ref: a,
93
+ ref: m,
91
94
  class: "text-container"
92
95
  }, [
93
- r(i(j), {
96
+ d(i(E), {
94
97
  class: "option-text",
95
98
  variant: "body2"
96
99
  }, {
97
100
  default: y(() => [
98
- d(t.$slots, "default", {}, () => [
99
- h(K(e.option[e.nameKey]), 1)
101
+ c(t.$slots, "default", {}, () => [
102
+ K(h(e.option[e.nameKey]), 1)
100
103
  ], !0)
101
104
  ]),
102
105
  _: 3
@@ -107,14 +110,14 @@ const M = {
107
110
  size: "xs"
108
111
  }, {
109
112
  default: y(() => [
110
- h(K(e.subtitle), 1)
113
+ K(h(e.subtitle), 1)
111
114
  ]),
112
115
  _: 1
113
116
  })) : o("", !0)
114
117
  ], 512),
115
- t.$slots["icon-end"] || e.endIconKey && e.option[e.endIconKey] ? (n(), l("div", A, [
116
- d(t.$slots, "icon-end", {}, () => [
117
- r(i(T), {
118
+ t.$slots["icon-end"] || e.endIconKey && e.option[e.endIconKey] ? (n(), l("div", q, [
119
+ c(t.$slots, "icon-end", {}, () => [
120
+ d(i(T), {
118
121
  type: e.endIconType,
119
122
  name: e.option[e.endIconKey],
120
123
  size: e.endIconType === "regular" || e.endIconType === "ab-test" ? "20px" : "16px"
@@ -122,12 +125,12 @@ const M = {
122
125
  ], !0)
123
126
  ])) : o("", !0)
124
127
  ], 2),
125
- i(b).clearable && i(u) ? (n(), l("div", D, [
126
- c("button", {
128
+ i(b).clearable && i(r) ? (n(), l("div", F, [
129
+ s("button", {
127
130
  class: "clear-button",
128
- onClick: s[1] || (s[1] = V((k) => i(b).clearSelection(), ["prevent", "stop"]))
131
+ onClick: a[1] || (a[1] = V((k) => i(b).clearSelection(), ["prevent", "stop"]))
129
132
  }, [
130
- r(i(T), {
133
+ d(i(T), {
131
134
  name: "close",
132
135
  width: "8",
133
136
  height: 8
@@ -141,5 +144,5 @@ const M = {
141
144
  }
142
145
  });
143
146
  export {
144
- Y as default
147
+ _ as default
145
148
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ironsource/shared-ui",
3
- "version": "2.1.6-rc.32",
3
+ "version": "2.1.6-rc.33",
4
4
  "engines": {
5
5
  "npm": ">=7.0.0",
6
6
  "node": ">=16.0.0"
package/utils/text.d.ts ADDED
@@ -0,0 +1 @@
1
+ export declare const isElementTruncated: (el: HTMLElement) => boolean;
package/utils/text.js ADDED
@@ -0,0 +1,9 @@
1
+ const o = (t) => {
2
+ const e = new Range();
3
+ e.selectNodeContents(t);
4
+ const n = e.getBoundingClientRect(), c = t.getBoundingClientRect();
5
+ return n.right > c.right;
6
+ }, r = (t) => t ? t.scrollWidth !== t.offsetWidth ? t.scrollWidth > t.offsetWidth : o(t) : !1;
7
+ export {
8
+ r as isElementTruncated
9
+ };
package/AppDropdownTrigger.vue_vue_type_style_index_0_scoped_c700276e_lang.css DELETED
@@ -1 +0,0 @@
1
- .app-trigger-wrapper[data-v-c700276e]{display:flex}.app-trigger-wrapper.with-copy .app-trigger[data-v-c700276e]{border-radius:var(--border-radius-lg) 0 0 var(--border-radius-lg);width:calc(100% - 41px)}.app-trigger-key[data-v-c700276e]{flex:none}.app-trigger-key--content[data-v-c700276e]{padding:10px;background:var(--default-main);cursor:pointer;border-radius:0 var(--border-radius-lg) var(--border-radius-lg) 0;border-left:1px solid var(--common-divider);color:var(--action-active)}.app-trigger-key--content[data-v-c700276e]:hover{background:var(--action-selected);color:var(--action-primary)}.app-trigger[data-v-c700276e]{width:100%;padding:0 12px;border-radius:var(--border-radius-lg);cursor:pointer;user-select:none;display:inline-flex;background:var(--default-main);height:40px;align-items:center}.app-trigger[data-v-c700276e]:hover,.app-trigger.active[data-v-c700276e]{background:var(--action-selected)}.app-trigger.disabled[data-v-c700276e]{cursor:auto}.app-trigger--content[data-v-c700276e]{color:var(--text-primary);display:flex;column-gap:4px;width:calc(100% - 20px);align-items:center}.app-trigger--content .x-circle-wrapper[data-v-c700276e]{color:var(--primary-dark)}.app-trigger--content .x-circle-wrapper[data-v-c700276e]:hover{color:var(--primary-main)}.app-trigger--icon[data-v-c700276e]{display:flex;align-items:center;color:var(--action-active)}.app-trigger .displayed-value[data-v-c700276e]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;flex:1}.app-trigger .image[data-v-c700276e]{width:28px;height:28px;flex:none}.app-trigger .image img[data-v-c700276e]{border-radius:4px;width:100%;height:100%}.app-trigger .start-icon[data-v-c700276e],.app-trigger .end-icon[data-v-c700276e]{display:flex;color:var(--action-active)}.app-trigger .end-icon[data-v-c700276e]{margin-right:var(--spacing-100)}.app-trigger .label-text[data-v-c700276e]{display:flex;align-items:center;gap:8px}.app-trigger .label-text .text-content[data-v-c700276e]{display:flex;align-items:center;gap:4px;width:100%}.app-trigger .label-text .text-content .text-content-value[data-v-c700276e]{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.app-trigger .label-text .is-mandatory[data-v-c700276e]{padding-top:5px;color:var(--error-main)}.value-tooltip[data-v-c700276e]{display:block}.value-tooltip[data-v-c700276e] .container{width:100%}
package/OptionV4.vue_vue_type_style_index_0_scoped_1df23c31_lang.css DELETED
@@ -1 +0,0 @@
1
- .label[data-v-1df23c31]{color:#41454d}.item-container[data-v-1df23c31]{width:100%;display:flex;align-items:center;cursor:pointer;border-radius:var(--border-radius-lg);margin-bottom:.25rem;color:var(--text-primary);padding:6px 8px}.item-container--disabled[data-v-1df23c31]{cursor:initial;color:var(--text-disabled)}.item-container[data-v-1df23c31]:hover:not(.item-container--disabled){background-color:var(--action-hover)}.item-container--active[data-v-1df23c31],.item-container[data-v-1df23c31]:active{background-color:var(--action-selected)}.item-container:not(.item-container--multi).item-container--selected[data-v-1df23c31]{background-color:var(--action-selected)}.subtitle[data-v-1df23c31]{color:#7b838c;line-height:1rem}.clear-button[data-v-1df23c31]{display:flex;padding:0 4px;color:#7b838c;align-items:center;height:auto;background-image:none;min-width:auto;border:none;background-color:transparent}.clear-button[data-v-1df23c31]:hover{color:#3083ff}.item[data-v-1df23c31]{width:100%;display:flex;gap:.5rem;align-items:center}.item--with-icon[data-v-1df23c31],.item--multi[data-v-1df23c31]{display:flex;flex-direction:row;align-items:center;justify-content:start}.item .image[data-v-1df23c31]{width:20px;height:20px;flex:none}.item .image img[data-v-1df23c31]{width:20px;height:20px;border-radius:4px}.item .start-icon[data-v-1df23c31],.item .end-icon[data-v-1df23c31]{display:flex;color:var(--action-active)}.item .option-text[data-v-1df23c31]{line-height:1.1875rem}.text-container[data-v-1df23c31]{width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:left}.tooltip-option[data-v-1df23c31]{display:block}.tooltip-option[data-v-1df23c31] .container{width:100%}