@ironsource/shared-ui 2.1.6-rc.38 → 2.1.6-rc.39

package/DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_0345d6b1_lang.css

@@ -0,0 +1 @@
+.default-dropdown-wrapper[data-v-0345d6b1]{position:relative}.dropdown-trigger[data-v-0345d6b1]{width:100%;padding:.3125rem .4375rem;display:flex;column-gap:.5rem;max-width:100%;box-sizing:border-box;border-radius:var(--border-radius-md);border:1px solid var(--action-outlined-border);background:var(--default-main);cursor:pointer;user-select:none;position:relative}.dropdown-trigger[data-v-0345d6b1]:hover{border:1px solid var(--action-active);background:var(--action-hover)}.dropdown-trigger.small[data-v-0345d6b1]{padding:.1875rem .4375rem}.dropdown-trigger.large[data-v-0345d6b1]{padding:.5625rem .4375rem}.dropdown-trigger.disabled[data-v-0345d6b1]{border:1px solid var(--action-outlined-border, #bbb);background:var(--action-disabled-background, #f1f1f1);cursor:not-allowed}.dropdown-trigger.disabled .displayed-value[data-v-0345d6b1],.dropdown-trigger.disabled .caret-down[data-v-0345d6b1]{color:var(--text-disabled)}.dropdown-trigger.open[data-v-0345d6b1]{padding:.25rem .375rem;border:2px solid var(--primary-main)}.dropdown-trigger.open.small[data-v-0345d6b1]{padding:.125rem .375rem}.dropdown-trigger.open.large[data-v-0345d6b1]{padding:.5rem .375rem}.dropdown-trigger.state-error[data-v-0345d6b1],.dropdown-trigger.state-success[data-v-0345d6b1],.dropdown-trigger.state-warning[data-v-0345d6b1]{padding:4px 6px}.dropdown-trigger.state-error.small[data-v-0345d6b1],.dropdown-trigger.state-success.small[data-v-0345d6b1],.dropdown-trigger.state-warning.small[data-v-0345d6b1]{padding:.1875rem .4375rem}.dropdown-trigger.state-error.large[data-v-0345d6b1],.dropdown-trigger.state-success.large[data-v-0345d6b1],.dropdown-trigger.state-warning.large[data-v-0345d6b1]{padding:.5625rem .4375rem}.dropdown-trigger.state-error[data-v-0345d6b1]{border:2px solid var(--error-main)}.dropdown-trigger.state-success[data-v-0345d6b1]{border:2px solid var(--success-main)}.dropdown-trigger.state-warning[data-v-0345d6b1]{border:2px solid var(--warning-dark)}.dropdown-trigger .caret-down[data-v-0345d6b1]{color:var(--action-active)}.content[data-v-0345d6b1]{width:calc(100% - 28px);display:flex;gap:.25rem;align-items:center;color:var(--text-primary)}.content .displayed-value[data-v-0345d6b1]{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.content .image[data-v-0345d6b1]{width:20px;height:20px;flex:none}.content .image img[data-v-0345d6b1]{border-radius:4px;width:100%;height:100%}.content .start-icon[data-v-0345d6b1]{display:flex;color:var(--action-active)}.content .status-dot[data-v-0345d6b1]{padding-right:.25rem}.content .status-dot>div[data-v-0345d6b1]{position:relative;top:-1px}.dropdown-field-label[data-v-0345d6b1]{color:var(--text-primary)}.dropdown-field-help-text[data-v-0345d6b1]{margin-top:4px;position:absolute}

package/DropdownV4.vue_vue_type_style_index_0_scoped_7af4f288_lang.css

@@ -0,0 +1 @@
+.v-enter-active[data-v-7af4f288],.v-leave-active[data-v-7af4f288]{transition:opacity .25s ease}ol[data-v-7af4f288],ul[data-v-7af4f288],menu[data-v-7af4f288]{list-style:none;margin:0;padding:0}.dropdown.full-width[data-v-7af4f288],.dropdown.full-width .button__container[data-v-7af4f288]{width:100%}.dropdown-list-wrapper[data-v-7af4f288]{display:flex;flex-direction:column;padding:.5rem .5rem .25rem}.dropdown-list-wrapper--multi[data-v-7af4f288]{padding:.5rem}.list-container--multi[data-v-7af4f288]{margin-bottom:0}.inline-search .inline-search-wrapper[data-v-7af4f288]{padding-bottom:.25rem}.inline-search .list-container[data-v-7af4f288]{padding-top:0}.no-result-container[data-v-7af4f288]{height:100%;display:flex;align-items:center;padding:.375rem .5rem;color:var(--text-disabled)}.no-result[data-v-7af4f288]{color:var(--text-disabled);padding-left:.5rem}.list[data-v-7af4f288]{outline:none;display:flex;flex-direction:column;width:100%;min-height:2rem}.list--multi[data-v-7af4f288]{margin-bottom:.5rem;border-bottom-left-radius:0;border-bottom-right-radius:0}.image-slot[data-v-7af4f288]{margin-right:.5rem}.actions-wrapper[data-v-7af4f288]{display:flex;width:100%;padding:.5rem .5rem .5rem .125rem;padding-bottom:0;border-top:1px solid var(--common-divider);justify-content:space-between;margin-top:.25rem}.apply-button[data-v-7af4f288]{margin-left:.5rem}

package/TreeDropdown.vue_vue_type_style_index_0_scoped_142eab98_lang.css

@@ -0,0 +1 @@
+.child-options[data-v-142eab98]{padding-left:1rem}

package/components/dropdown/common/Dropdown.common.js

@@ -1,25 +1,25 @@
-import { useToggle as me } from "../../../composables/useToggle.js";
-import { ref as n, computed as r, watch as m, useSlots as Pe, toRaw as A, nextTick as N, provide as Te, onMounted as we } from "vue";
+import { useToggle as we } from "../../../composables/useToggle.js";
+import { ref as n, computed as r, watch as m, useSlots as Ie, toRaw as O, nextTick as C, provide as xe, onMounted as De } from "vue";
 import { isObjectInArray as W } from "../../../utils/array.js";
-import { objectsEqual as Ie } from "../../../utils/object.js";
-import { useClamp as xe, useVirtualList as De, onClickOutside as Y } from "@vueuse/core";
-import { Mode as P, Type as V, DropdownContext as Ne } from "./DropdownContext.js";
-import { pxToRem as Re } from "../../../utils/style.js";
-import { useEditableContext as Ee } from "../../table-cells/common/EditableContext.js";
-const Ue = (l, O, b) => {
-  const Z = (e, t) => l.multi ? W(e, t) : A(e) === t;
+import { objectsEqual as Ce } from "../../../utils/object.js";
+import { useClamp as Ne, useVirtualList as Re, onClickOutside as Y } from "@vueuse/core";
+import { Mode as P, Type as V, DropdownContext as Ee } from "./DropdownContext.js";
+import { pxToRem as Me } from "../../../utils/style.js";
+import { useEditableContext as Ve } from "../../table-cells/common/EditableContext.js";
+const Ke = (l, A, b) => {
+  const Z = (e, t) => l.multi ? W(e, t) : O(e) === t;
   let _;
   ((e) => {
     e[e.None = 0] = "None", e[e.Next = 1] = "Next", e[e.Previous = -1] = "Previous", e[e.NextPage = 10] = "NextPage", e[e.PrevPage = -10] = "PrevPage";
   })(_ || (_ = {}));
   const a = n(
     l.selected
-  ), R = Ee(), u = r({
+  ), N = Ve(), u = r({
     get() {
-      return R?.value?.value ?? a.value;
+      return N?.value?.value ?? a.value;
     },
     set(e) {
-      R.onChange?.(e), R.onClose?.(), O("update:selected", e);
+      N.onChange?.(e), N.onClose?.(), A("update:selected", e);
     }
   });
   m(
@@ -28,7 +28,7 @@ const Ue = (l, O, b) => {
       a.value = l.selected, v.value = l.selected;
     }
   );
-  const F = Pe(), w = n(null), g = n(null), k = n(null), E = n(null), H = n(null), I = n(null), p = n(), B = n(null), L = n(null), U = n(null), ee = 8, le = r(() => I.value ? I.value.getBoundingClientRect().height + ee + l.distance : 0), c = n([]), x = n(-1), T = n(""), v = n(l.selected || []), q = () => I.value?.focus(), [d, te, ae] = me({
+  const F = Ie(), w = n(null), g = n(null), k = n(null), R = n(null), H = n(null), I = n(null), p = n(), B = n(null), L = n(null), U = n(null), ee = 8, le = r(() => I.value ? I.value.getBoundingClientRect().height + ee + l.distance : 0), c = n([]), x = n(-1), T = n(""), v = n(l.selected || []), q = () => I.value?.focus(), [d, te, ae] = we({
     disabled: l.disabled,
     initialValue: l.defaultOpen
   });
@@ -45,9 +45,9 @@ const Ue = (l, O, b) => {
       return l.isOpen;
     },
     set(e) {
-      O("update:isOpen", e);
+      A("update:isOpen", e);
     }
-  }), ne = r(() => s.value.length - 1), o = xe(0, 0, ne), K = r(() => u.value ? l.displayValue(u.value) : ""), ie = (e) => {
+  }), ne = r(() => s.value.length - 1), o = Ne(0, 0, ne), K = r(() => u.value ? l.displayValue(u.value) : ""), ie = (e) => {
     if (!e.value.length && !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix)
       return l.placeholder;
     const t = !l.multiOptionsPlaceholderPrefix && !l.multiOptionsPlaceholderSuffix ? `${e.value.length} selected` : `${l.multiOptionsPlaceholderPrefix ?? ""}${e.value.length ?? "0"}${l.multiOptionsPlaceholderSuffix ?? ""}`;
@@ -60,14 +60,14 @@ const Ue = (l, O, b) => {
   }), $ = r(() => {
     if (Array.isArray(a.value))
       return a.value.length === s.value.length;
-  }), oe = r(() => !l.multi || !Array.isArray(a.value) ? !1 : a.value.length > 0 && a.value.length < s.value.length), M = (e) => {
+  }), oe = r(() => !l.multi || !Array.isArray(a.value) ? !1 : a.value.length > 0 && a.value.length < s.value.length), E = (e) => {
     T.value = e;
   }, se = r(() => {
-    const e = A(v.value), t = {
+    const e = O(v.value), t = {
       selected: [],
       notSelected: []
     };
-    return A(l.options).forEach((y) => {
+    return O(l.options).forEach((y) => {
       const f = e.includes(y) ? "selected" : "notSelected";
       t[f].push(y);
     }), [].concat(t.selected, t.notSelected);
@@ -81,7 +81,7 @@ const Ue = (l, O, b) => {
     containerProps: J,
     wrapperProps: ve,
     scrollTo: D
-  } = De(s, {
+  } = Re(s, {
     itemHeight: j.value,
     overscan: l.disableVirtualScroll ? 1 / 0 : 2
   });
@@ -91,11 +91,11 @@ const Ue = (l, O, b) => {
       G(e);
     }
   ), m([x], async () => {
-    await N();
+    await C();
   }), m(
     [d, o, x],
     async ([e], [t]) => {
-      d.value && (await N(), x.value !== -1 && e !== t && setTimeout(() => {
+      d.value && (await C(), x.value !== -1 && e !== t && setTimeout(() => {
         l.multi && b.VERSION === 4 || D(x.value);
       }), o.value && setTimeout(() => {
         D(o.value);
@@ -105,13 +105,13 @@ const Ue = (l, O, b) => {
     D(0);
   });
   const h = (e, t = !1) => {
-    l.disabled || (G(e), N(() => {
-      d.value && O("opened"), d.value || O("closed"), w.value && t && w.value.focus();
+    l.disabled || (G(e), C(() => {
+      d.value && A("opened"), d.value || A("closed"), w.value && t && w.value.focus();
     }));
   };
   m(d, (e) => {
     if (e) {
-      X.value && Array.isArray(u.value) && (v.value = A(u.value).slice());
+      X.value && Array.isArray(u.value) && (v.value = O(u.value).slice());
       return;
     }
     q();
@@ -126,29 +126,29 @@ const Ue = (l, O, b) => {
         a.value = [];
         return;
       }
-      a.value = s.value, O("selectAll");
+      a.value = s.value, A("selectAll");
     }
   }, fe = () => {
     de(), b.VERSION !== 4 && (u.value = a.value);
   }, ge = (e = !0) => {
-    a.value = [], e && (u.value = [], v.value = []), O("clear");
-  }, C = (e, t) => {
-    if (e = A(e), c.value[t]?.disabled)
+    a.value = [], e && (u.value = [], v.value = []), A("clear");
+  }, M = (e, t) => {
+    if (e = O(e), c.value[t]?.disabled)
       return;
     if (x.value = t, i.mode !== P.Multi) {
       l.keepOpen || h(!1), i.goToOption(
         0
         /* None */
-      ), u.value = e, M(""), q(), i.type === V.Search && g.value && (g.value.value = l.displayValue(e));
+      ), u.value = e, E(""), q(), i.type === V.Search && g.value && (g.value.value = l.displayValue(e));
       return;
     }
     if (!Array.isArray(a.value))
       return;
     g.value?.focus();
-    const S = A(a.value);
+    const S = O(a.value);
     if (W(S, e)) {
       a.value = S.filter(
-        (f) => !Ie(f, e)
+        (f) => !Ce(f, e)
       );
       return;
     } else {
@@ -160,7 +160,7 @@ const Ue = (l, O, b) => {
     options: c,
     selectedOption: u,
     labelRef: H,
-    activeOption: E,
+    activeOption: R,
     listRef: w,
     clearable: l.clearable,
     type: F.input ? V.Search : V.Dropdown,
@@ -173,11 +173,11 @@ const Ue = (l, O, b) => {
     mandatory: l.mandatory,
     size: l.size,
     placeholder: l.placeholder,
-    select: C,
+    select: M,
     clearSelection: () => {
-      M(""), u.value = i.mode === P.Single ? null : [], v.value = i.mode === P.Single ? null : [], g.value && (g.value.value = "");
+      E(""), u.value = i.mode === P.Single ? null : [], v.value = i.mode === P.Single ? null : [], g.value && (g.value.value = "");
     },
-    search: M,
+    search: E,
     goToOption: async (e) => {
       if (!d.value)
         return;
@@ -187,11 +187,11 @@ const Ue = (l, O, b) => {
       ).length, S = s.value.length - y;
       for (t > S && (t = S + 1); ; ) {
         if (!c.value[t]?.disabled) {
-          E.value = s.value[t], o.value = t;
+          R.value = s.value[t], o.value = t;
           return;
         }
         if ((e === 1 || e === 10) && (t = t + 1), (e === -1 || e === -10) && (t = t + -1), !!he(o.value)) {
-          E.value = s.value[t], o.value = t;
+          R.value = s.value[t], o.value = t;
           return;
         }
       }
@@ -206,7 +206,7 @@ const Ue = (l, O, b) => {
       c.value = c.value.filter((t) => t.id !== e);
     }
   };
-  Te(Ne, i), Y(
+  xe(Ee, i), Y(
     w,
     () => {
       d.value && Q();
@@ -225,15 +225,15 @@ const Ue = (l, O, b) => {
   const ye = () => {
     g.value && (g.value.value = i.query.value = "");
   };
-  we(async () => {
-    l.autoFocus && (await N(), setTimeout(() => {
+  De(async () => {
+    l.autoFocus && (await C(), setTimeout(() => {
       k.value.focus();
     })), i.goToOption(0);
   });
   const Se = () => {
-    u.value = a.value, Array.isArray(u.value) && (v.value = A(u.value).slice()), O("apply", u.value), h(!1), ye();
+    u.value = a.value, Array.isArray(u.value) && (v.value = O(u.value).slice()), A("apply", u.value), h(!1), ye();
   }, Q = () => {
-    X.value && Array.isArray(v.value) && (u.value = A(v.value).slice()), T.value = "", h(!1);
+    X.value && Array.isArray(v.value) && (u.value = O(v.value).slice()), T.value = "", h(!1);
   }, be = (e) => {
     if (!l.disableKeyboardEvents)
       switch (e.key) {
@@ -243,7 +243,7 @@ const Ue = (l, O, b) => {
         case "ArrowDown":
           h(!0), e.preventDefault();
       }
-  }, Ae = (e) => {
+  }, Oe = (e) => {
     if (!l.disableKeyboardEvents)
       switch (e.key) {
         case "ArrowUp": {
@@ -283,19 +283,22 @@ const Ue = (l, O, b) => {
             h(!0);
             return;
           }
-          C(s.value[o.value], o.value), i.mode === P.Single && !l.keepOpen && h(!1), e.preventDefault();
+          M(s.value[o.value], o.value), i.mode === P.Single && !l.keepOpen && h(!1), e.preventDefault();
           break;
         }
       }
-  }, Oe = r(() => {
-    const e = z.value.length, t = l.multi && l.showSelectAll ? 1 : 0, y = e > b.MAX_NUMBER_OF_OPTIONS, S = e + t;
+  }, Ae = r(() => {
+    const e = z.value.reduce((me, Pe) => {
+      const Te = l.overrideOptionCountCalculation ? l.overrideOptionCountCalculation(Pe.data) : 1;
+      return me + Te;
+    }, 0), t = l.multi && l.showSelectAll ? 1 : 0, y = e > b.MAX_NUMBER_OF_OPTIONS, S = e + t;
     let f = y ? b.MAX_NUMBER_OF_OPTIONS + 0.1 : S;
-    return l.noResultsText && f === 0 && (f = f + 1), Re(
+    return l.noResultsText && f === 0 && (f = f + 1), Me(
       f * j.value + b.PADDING_PX
     );
   });
   return {
-    onKeydown: Ae,
+    onKeydown: Oe,
     location: le,
     open: d,
     toggleMenu: h,
@@ -304,7 +307,7 @@ const Ue = (l, O, b) => {
     labelRef: H,
     query: T,
     containerProps: J,
-    calculateTableHeight: Oe,
+    calculateTableHeight: Ae,
     wrapperProps: ve,
     filteredOptions: s,
     allSelected: $,
@@ -315,7 +318,7 @@ const Ue = (l, O, b) => {
     selectedOption: u,
     selectedOptionPrevious: v,
     selectedValue: K,
-    onSelect: C,
+    onSelect: M,
     activeIndex: o,
     onCancel: Q,
     onApply: Se,
@@ -332,5 +335,5 @@ const Ue = (l, O, b) => {
   };
 };
 export {
-  Ue as dropdownCommon
+  Ke as dropdownCommon
 };

package/components/dropdown/composables/useChildOptions.js

@@ -1,14 +1,14 @@
-const u = (t, s) => {
-  const l = (e) => e[s] || [], r = (e) => l(e)?.length > 0;
+const c = (s, t) => {
+  const l = (e) => e && e[t] ? e[t] : [], r = (e) => l(e)?.length > 0;
   return {
     hasChildren: r,
     getChildren: l,
-    someChildrenSelected: (e) => r(e) ? l(e).some((n) => t.value.includes(n)) : !1,
+    someChildrenSelected: (e) => r(e) ? l(e).some((n) => s.value.includes(n)) : !1,
     allChildrenSelected: (e) => r(e) ? l(e).every(
-      (n) => t.value.includes(n)
+      (n) => s.value.includes(n)
     ) : !1
   };
 };
 export {
-  u as useChildOptions
+  c as useChildOptions
 };

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

@@ -22,6 +22,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionImageKey?: string;
     optionIconKey?: string;
     optionIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat";
+    showAllSelectedText?: boolean;
     statusDotType?: "default" | "disabled" | "success" | "warning" | "error" | "archive";
 }>, {
     placeholder: string;
@@ -46,6 +47,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionImageKey: any;
     optionIconKey: any;
     optionIconType: any;
+    showAllSelectedText: boolean;
     statusDotType: any;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     click: () => void;
@@ -73,6 +75,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionImageKey?: string;
     optionIconKey?: string;
     optionIconType?: "fill" | "bold" | "regular" | "branded" | "ad-unit" | "ab-test" | "ad-networks" | "ad-networks/flat";
+    showAllSelectedText?: boolean;
     statusDotType?: "default" | "disabled" | "success" | "warning" | "error" | "archive";
 }>, {
     placeholder: string;
@@ -97,6 +100,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionImageKey: any;
     optionIconKey: any;
     optionIconType: any;
+    showAllSelectedText: boolean;
     statusDotType: any;
 }>>> & {
     onClick?: () => any;
@@ -123,6 +127,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     selectedOption: any;
     showFeedbackIcon: boolean;
     brandIconType: "android" | "ios";
+    showAllSelectedText: boolean;
     statusDotType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
 }>, {
     image?(_: {}): any;

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

@@ -1,7 +1,7 @@
 import o from "./DefaultDropdownTrigger.vue2.js";
 /* empty css                             */import e from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_ad524750_lang.css"; //*');
-const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-ad524750"]]);
+// import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_0345d6b1_lang.css"; //*');
+const p = /* @__PURE__ */ e(o, [["__scopeId", "data-v-0345d6b1"]]);
 export {
   p as default
 };

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

@@ -1,17 +1,17 @@
- import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_ad524750_lang.css"; import { defineComponent as v, computed as r, openBlock as o, createElementBlock as a, createBlock as k, createCommentVNode as n, createElementVNode as c, mergeProps as m, unref as l, renderSlot as y, createVNode as i, withCtx as I, createTextVNode as B, toDisplayString as V } from "vue";
-import x from "../../typography/v4/Typography.vue.js";
+ import "../../../DefaultDropdownTrigger.vue_vue_type_style_index_0_scoped_0345d6b1_lang.css"; import { defineComponent as v, computed as r, openBlock as o, createElementBlock as a, createBlock as k, createCommentVNode as n, createElementVNode as c, mergeProps as y, unref as l, renderSlot as m, createVNode as i, withCtx as I, createTextVNode as x, toDisplayString as B } from "vue";
+import w from "../../typography/v4/Typography.vue.js";
 import { DropdownTestIdModifiers as u } from "../../../testids/index.js";
 import h from "../../icon/v4/IconV4.vue.js";
-import w from "../../shared/FieldLabel.vue.js";
-import { useTestIdAttrs as D } from "../../../utils/testIds.js";
-import A from "../../statusDot/StatusDot.vue.js";
+import V from "../../shared/FieldLabel.vue.js";
+import { useTestIdAttrs as A } from "../../../utils/testIds.js";
+import D from "../../statusDot/StatusDot.vue.js";
 const N = { class: "default-dropdown-wrapper" }, K = { class: "content" }, $ = {
   key: 0,
   class: "image"
-}, C = ["src"], P = {
+}, C = ["src"], S = {
   key: 1,
   class: "start-icon"
-}, S = {
+}, P = {
   key: 2,
   class: "status-dot"
 }, z = { class: "caret-down" }, j = /* @__PURE__ */ v({
@@ -40,15 +40,16 @@ const N = { class: "default-dropdown-wrapper" }, K = { class: "content" }, $ = {
     optionImageKey: { default: null },
     optionIconKey: { default: null },
     optionIconType: { default: null },
+    showAllSelectedText: { type: Boolean, default: !0 },
     statusDotType: { default: null }
   },
   emits: ["click"],
-  setup(t, { emit: g }) {
-    const e = t, T = r(
+  setup(t, { emit: T }) {
+    const e = t, g = r(
       () => e.feedbackVariant ? `state-${e.feedbackVariant}` : ""
     ), b = () => {
-      g("click");
-    }, p = D(e.testId, u), O = r(() => e.multi ? !Array.isArray(e.selectedOption) || !e.selectedOption?.length ? e.placeholder : e.options?.length === e.selectedOption.length ? `All selected (${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), d = r(() => {
+      T("click");
+    }, p = A(e.testId, u), O = r(() => e.multi ? !Array.isArray(e.selectedOption) || !e.selectedOption?.length ? e.placeholder : e.showAllSelectedText && e.options?.length === e.selectedOption.length ? `All selected (${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), d = r(() => {
       if (!e.selectedOption)
         return null;
       if (!e.multi)
@@ -57,7 +58,7 @@ const N = { class: "default-dropdown-wrapper" }, K = { class: "content" }, $ = {
         return e.selectedOption.length === 1 ? e.selectedOption[0] : null;
     });
     return (s, f) => (o(), a("div", N, [
-      t.label ? (o(), k(w, {
+      t.label ? (o(), k(V, {
         key: 0,
         label: t.label,
         mandatory: t.mandatory,
@@ -67,22 +68,22 @@ const N = { class: "default-dropdown-wrapper" }, K = { class: "content" }, $ = {
         "test-id": t.testId,
         class: "dropdown-field-label"
       }, null, 8, ["label", "mandatory", "hover-help-text", "hover-help-text-placement", "disabled", "test-id"])) : n("", !0),
-      c("div", m({
-        class: ["dropdown-trigger", [t.size, l(T), { open: t.open, disabled: t.disabled }]]
+      c("div", y({
+        class: ["dropdown-trigger", [t.size, l(g), { open: t.open, disabled: t.disabled }]]
       }, l(p)[l(u).BUTTON_WRAPPER], {
         onClick: f[0] || (f[0] = (E) => b())
       }), [
         c("div", K, [
           s.$slots.image || l(d) && t.optionImageKey ? (o(), a("div", $, [
-            y(s.$slots, "image", {}, () => [
+            m(s.$slots, "image", {}, () => [
               t.optionImageKey ? (o(), a("img", {
                 key: 0,
                 src: l(d)[t.optionImageKey]
               }, null, 8, C)) : n("", !0)
             ], !0)
           ])) : n("", !0),
-          s.$slots["icon-start"] || l(d) && t.optionIconKey ? (o(), a("div", P, [
-            y(s.$slots, "icon-start", {}, () => [
+          s.$slots["icon-start"] || l(d) && t.optionIconKey ? (o(), a("div", S, [
+            m(s.$slots, "icon-start", {}, () => [
               i(l(h), {
                 type: t.optionIconType,
                 name: l(d)[t.optionIconKey],
@@ -90,12 +91,12 @@ const N = { class: "default-dropdown-wrapper" }, K = { class: "content" }, $ = {
               }, null, 8, ["type", "name"])
             ], !0)
           ])) : n("", !0),
-          t.statusDotType ? (o(), a("div", S, [
-            i(l(A), { type: t.statusDotType }, null, 8, ["type"])
+          t.statusDotType ? (o(), a("div", P, [
+            i(l(D), { type: t.statusDotType }, null, 8, ["type"])
           ])) : n("", !0),
-          i(l(x), m({ variant: "body1" }, l(p)[l(u).BUTTON_CONTENT], { class: "displayed-value" }), {
+          i(l(w), y({ variant: "body1" }, l(p)[l(u).BUTTON_CONTENT], { class: "displayed-value" }), {
             default: I(() => [
-              B(V(l(O)), 1)
+              x(B(l(O)), 1)
             ]),
             _: 1
           }, 16)

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

@@ -26,6 +26,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     triggerFeedbackText?: string;
     triggerFeedbackVariant?: "success" | "warning" | "error";
     triggerFeedbackShowIcon?: boolean;
+    triggerShowAllSelectedText?: boolean;
     size?: "small" | "medium" | "large";
     mandatory?: boolean;
     predefinedTrigger?: "default" | "icon-button" | "chip" | "app";
@@ -49,6 +50,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionsListWidth?: string;
     statusType?: "default" | "disabled" | "success" | "warning" | "error" | "archive";
     disableVirtualScroll?: boolean;
+    overrideOptionCountCalculation?: (option: unknown) => number;
 }>, {
     multi: boolean;
     inlineSearchPlaceholder: string;
@@ -82,6 +84,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     triggerFeedbackText: string;
     triggerFeedbackVariant: any;
     triggerFeedbackShowIcon: boolean;
+    triggerShowAllSelectedText: boolean;
     searchAutoFocus: boolean;
     predefinedTrigger: "default" | "icon-button" | "chip" | "app";
     optionNameKey: string;
@@ -96,6 +99,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionsListWidth: any;
     statusType: any;
     disableVirtualScroll: boolean;
+    overrideOptionCountCalculation: any;
 }>, {
     selectItem: (option: any, index?: number) => void;
     scrollTo: (index: number) => void;
@@ -135,6 +139,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     triggerFeedbackText?: string;
     triggerFeedbackVariant?: "success" | "warning" | "error";
     triggerFeedbackShowIcon?: boolean;
+    triggerShowAllSelectedText?: boolean;
     size?: "small" | "medium" | "large";
     mandatory?: boolean;
     predefinedTrigger?: "default" | "icon-button" | "chip" | "app";
@@ -158,6 +163,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionsListWidth?: string;
     statusType?: "default" | "disabled" | "success" | "warning" | "error" | "archive";
     disableVirtualScroll?: boolean;
+    overrideOptionCountCalculation?: (option: unknown) => number;
 }>, {
     multi: boolean;
     inlineSearchPlaceholder: string;
@@ -191,6 +197,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     triggerFeedbackText: string;
     triggerFeedbackVariant: any;
     triggerFeedbackShowIcon: boolean;
+    triggerShowAllSelectedText: boolean;
     searchAutoFocus: boolean;
     predefinedTrigger: "default" | "icon-button" | "chip" | "app";
     optionNameKey: string;
@@ -205,6 +212,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionsListWidth: any;
     statusType: any;
     disableVirtualScroll: boolean;
+    overrideOptionCountCalculation: any;
 }>>> & {
     onCopyToClipboard?: () => any;
     onClear?: () => any;
@@ -242,6 +250,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     triggerFeedbackText: string;
     triggerFeedbackVariant: "success" | "warning" | "error";
     triggerFeedbackShowIcon: boolean;
+    triggerShowAllSelectedText: boolean;
     predefinedTrigger: "default" | "icon-button" | "chip" | "app";
     inlineSearch: boolean;
     inlineSearchPlaceholder: string;
@@ -260,6 +269,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     optionsListWidth: string;
     statusType: "default" | "disabled" | "success" | "warning" | "error" | "archive";
     disableVirtualScroll: boolean;
+    overrideOptionCountCalculation: (option: unknown) => number;
 }>, {
     label?(_: {}): any;
     "dropdown-trigger"?(_: {

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

@@ -1,8 +1,8 @@
 import o from "./DropdownV4.vue2.js";
 /* empty css                 *//* empty css                 */import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-// import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_b484da34_lang.css"; //*');
+// import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_7af4f288_lang.css"; //*');
 // import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  //');
-const r = /* @__PURE__ */ _(o, [["__scopeId", "data-v-b484da34"]]);
+const r = /* @__PURE__ */ _(o, [["__scopeId", "data-v-7af4f288"]]);
 export {
   r as default
 };