@ironsource/shared-ui 2.0.0-test.9 → 2.0.1

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

@@ -1,388 +1,382 @@
- import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_896b5344_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as Q, openBlock as d, createElementBlock as n, normalizeClass as $, unref as e, renderSlot as h, createElementVNode as r, createVNode as s, withCtx as o, Transition as Z, createTextVNode as u, toDisplayString as b, createCommentVNode as i, createBlock as g, isRef as _, mergeProps as P, withModifiers as A, Fragment as ee, renderList as te, toRaw as T, pushScopeId as le, popScopeId as ae } from "vue";
-import C from "../../button/v4/ButtonV4.vue.js";
-import de from "../common/Option.vue.js";
-import B from "../../icon/Icon.vue.js";
-import oe from "../../search/v4/SearchV4.vue.js";
-import "../../typography/Heading.vue.js";
-import y from "../../typography/Text.vue.js";
-import { Dropdown as ie } from "floating-vue";
+ import "../../../DropdownV4.vue_vue_type_style_index_0_scoped_19f8fedd_lang.css";  import "../../../DropdownV4.vue_vue_type_style_index_1_lang.css";  import { defineComponent as ae, computed as P, openBlock as i, createElementBlock as n, mergeProps as s, unref as e, renderSlot as C, createElementVNode as p, createVNode as a, withCtx as u, Transition as de, normalizeClass as z, normalizeStyle as re, isRef as se, createCommentVNode as d, createTextVNode as g, toDisplayString as ue, withModifiers as V, Fragment as ce, renderList as fe, toRaw as T, createBlock as me, resolveDynamicComponent as pe } from "vue";
+import A from "../../button/v4/ButtonV4.vue.js";
+import "../../button/v4/IconButtonV4.vue.js";
+import "./DropdownV4.vue.js";
+import ye from "./DefaultDropdownTrigger.vue.js";
+import ge from "./IconButtonDropdownTrigger.vue.js";
+import he from "./ChipDropdownTrigger.vue.js";
+import ke from "./AppDropdownTrigger.vue.js";
+import x from "./OptionV4.vue.js";
+import Te from "../../search/v4/SearchV4.vue.js";
+import F from "../../typography/v4/Typography.vue.js";
+import { Dropdown as ve } from "floating-vue";
 import { DropdownTestIdModifiers as c } from "../../../testids/index.js";
-import { dropdownCommon as ne } from "../common/Dropdown.common.js";
-const se = (t) => (le("data-v-896b5344"), t = t(), ae(), t), re = ["tabindex", "data-testid"], ue = { style: { display: "flex", width: "100%" } }, ce = ["disabled", "aria-expanded", "aria-labelledby", "aria-disabled"], fe = {
+import { dropdownCommon as be } from "../common/Dropdown.common.js";
+import Ce from "../../loader/v4/Loader.vue.js";
+import { useTestIdAttrs as we } from "../../../utils/testIds.js";
+import { TRIGGERS as y } from "./Dropdown.types.js";
+import { useElementSize as Ie } from "@vueuse/core";
+const Se = ["tabindex"], Ae = { style: { display: "flex", width: "100%" } }, Le = { key: 0 }, Be = { key: 1 }, Ne = { key: 2 }, Oe = {
   key: 0,
-  class: "image-slot"
-}, me = { class: "angle-down" }, ye = {
-  key: 0,
-  ref: "listRef",
-  class: "dropdown-title"
-}, pe = ["data-testid"], he = ["data-testid"], be = {
+  class: "inline-search-wrapper"
+}, Ee = {
   key: 0,
   class: "no-result-container"
-}, ke = {
+}, Ke = {
   key: 1,
   class: "loader"
-}, ve = /* @__PURE__ */ se(() => /* @__PURE__ */ r("svg", {
-  width: "100",
-  height: "100",
-  viewBox: "0 0 100 100"
-}, [
-  /* @__PURE__ */ r("circle", {
-    cx: "50",
-    cy: "50",
-    fill: "none",
-    stroke: "currentColor",
-    "stroke-width": "6",
-    r: "35",
-    "stroke-dasharray": "164.93361431346415 56.97787143782138"
-  }, [
-    /* @__PURE__ */ r("animateTransform", {
-      attributeName: "transform",
-      type: "rotate",
-      repeatCount: "indefinite",
-      dur: "1s",
-      values: "0 50 50;360 50 50",
-      keyTimes: "0;1"
-    })
-  ])
-], -1)), we = { key: 2 }, $e = ["aria-selected", "aria-disabled", "onClick"], ge = {
-  key: 0,
-  class: "actions"
-}, Pe = /* @__PURE__ */ Q({
+}, Re = { key: 2 }, De = ["aria-selected", "aria-disabled", "onClick"], Pe = {
+  key: 1,
+  class: "actions-wrapper"
+}, ze = { class: "actions-clear-all" }, Ve = { class: "actions-apply-cancel" }, ot = /* @__PURE__ */ ae({
   __name: "DropdownV4",
   props: {
     modelValue: { default: null },
-    placeholder: { default: "" },
-    disabled: { type: Boolean, default: !1 },
-    mandatory: { type: Boolean, default: !1 },
-    helperText: { default: "" },
-    searchPlaceholder: { default: "" },
-    isOnTop: { type: Boolean, default: !1 },
+    selected: { default: null },
     multi: { type: Boolean, default: !1 },
-    title: { default: "" },
-    inlineSearch: { type: Boolean, default: !1 },
+    placeholder: { default: "Select" },
+    disabled: { type: Boolean, default: !1 },
     popperClass: { default: "" },
-    noResultsText: { default: "No results found" },
     loading: { type: Boolean },
-    selected: { default: null },
+    testId: { default: "" },
+    isOpen: { type: Boolean },
+    options: null,
     showSelectAll: { type: Boolean },
     defaultOpen: { type: Boolean, default: !1 },
-    showButtonOnOpen: { type: Boolean, default: !0 },
-    autoFocus: { type: Boolean, default: !1 },
+    keepOpen: { type: Boolean, default: !1 },
+    autoSize: { type: Boolean, default: !1 },
+    disableKeyboardEvents: { type: Boolean, default: !1 },
+    isOnTop: { type: Boolean, default: !1 },
     distance: { default: 0 },
-    isOpen: { type: Boolean },
+    container: { default: "body" },
+    flip: { type: Boolean, default: !0 },
     skidding: { default: 0 },
     placement: { default: "bottom-start" },
-    clearable: { type: Boolean, default: !1 },
-    error: { default: "" },
+    triggerLabel: { default: "" },
+    triggerHelperText: { default: "" },
+    triggerFeedbackText: { default: "" },
+    triggerFeedbackVariant: { default: null },
     size: { default: "lg" },
+    mandatory: { type: Boolean, default: !1 },
+    predefinedTrigger: { default: y.DEFAULT },
+    inlineSearch: { type: Boolean, default: !1 },
+    inlineSearchPlaceholder: { default: "Search" },
+    onSearch: { type: Function, default: null },
+    noResultsText: { default: "No results found" },
+    searchAutoFocus: { type: Boolean, default: !0 },
+    onClear: { type: Function, default: () => !0 },
     displayValue: null,
-    options: null,
-    onSearch: { type: Function, default: () => !0 },
-    theme: { default: "is-dropdown" },
-    container: { default: "body" },
-    flip: { type: Boolean, default: !0 },
-    keepOpen: { type: Boolean, default: !1 },
-    autoSize: { type: Boolean, default: !1 },
-    disableKeyboardEvents: { type: Boolean, default: !1 },
-    multiOptionsPlaceholderPrefix: { default: "" },
-    multiOptionsPlaceholderSuffix: { default: "" },
-    testId: { default: "" },
-    darkTheme: { type: Boolean, default: !0 },
-    valueToCopy: { default: "" }
+    optionNameKey: { default: "" },
+    optionIconKey: { default: "" },
+    optionImageKey: { default: "" },
+    optionIconType: { default: null },
+    valueToCopy: { default: null },
+    theme: { default: "light-theme-v4" },
+    fullWidth: { type: Boolean, default: !0 },
+    optionsListWidth: { default: null }
   },
   emits: ["update:selected", "update:isOpen", "closed", "opened", "apply"],
-  setup(t, { expose: V, emit: N }) {
-    const K = t, {
-      onKeydown: p,
-      location: L,
-      open: m,
-      toggleMenu: I,
-      onButtonKeydown: k,
-      displayedValue: S,
-      labelRef: D,
-      query: v,
-      containerProps: H,
-      calculateTableHeight: F,
-      wrapperProps: M,
-      filteredOptions: G,
-      allSelected: z,
-      isIndeterminate: X,
-      onSelectAll: q,
-      virtualOptions: O,
-      isSelected: R,
-      selectedOption: E,
-      onSelect: x,
-      activeIndex: U,
-      onCancel: W,
-      onApply: Y,
-      scrollTo: j
-    } = ne(K, N), J = () => {
+  setup(t, { expose: $, emit: U }) {
+    const r = t, H = {
+      MULTILINE_LIST_HEIGHT: 48,
+      LIST_HEIGHT: 32 + 4,
+      MAX_NUMBER_OF_OPTIONS: 7,
+      PADDING_PX: -4
+    }, {
+      onKeydown: h,
+      open: f,
+      toggleMenu: w,
+      onButtonKeydown: G,
+      query: I,
+      containerProps: W,
+      calculateTableHeight: M,
+      wrapperProps: L,
+      filteredOptions: X,
+      allSelected: B,
+      isIndeterminate: q,
+      onSelectAll: Y,
+      virtualOptions: N,
+      isSelected: S,
+      selectedOption: k,
+      onSelect: O,
+      activeIndex: E,
+      onCancel: j,
+      onApply: J,
+      scrollTo: Q,
+      listRef: Z,
+      buttonRef: K,
+      apply: _,
+      cancel: ee,
+      el: te,
+      onClearAllSelections: R,
+      clearAll: le
+    } = be(r, U, H);
+    $({
+      selectItem: O,
+      scrollTo: Q
+    });
+    const m = we(r.testId, c), D = P(() => !r.predefinedTrigger || r.predefinedTrigger === y.DEFAULT ? ye : r.predefinedTrigger === y.APP ? ke : null), { width: oe } = Ie(K), ie = P(() => r.optionsListWidth ? r.optionsListWidth : !r.predefinedTrigger || r.predefinedTrigger === y.DEFAULT || r.predefinedTrigger === y.APP ? `${oe.value - 2}px` : "auto"), ne = () => {
+      w();
     };
-    return V({
-      selectItem: x,
-      scrollTo: j
-    }), (f, a) => (d(), n("div", {
-      ref: "el",
-      class: $(["dropdown", { "dropdown--disabled": t.disabled }]),
-      tabindex: t.disabled ? -1 : 0,
-      "data-testid": `${t.testId}-${e(c).WRAPPER}`,
-      onKeydown: a[7] || (a[7] = //@ts-ignore
-      (...l) => e(p) && e(p)(...l))
-    }, [
-      h(f.$slots, "label", {}, void 0, !0),
-      r("div", ue, [
-        s(e(ie), {
+    return (v, o) => (i(), n("div", s({
+      ref_key: "el",
+      ref: te,
+      class: ["dropdown dropdown--main-wrapper", { "dropdown--disabled": t.disabled, "full-width": t.fullWidth }],
+      tabindex: t.disabled ? -1 : 0
+    }, e(m)[e(c).WRAPPER], {
+      onKeydown: o[6] || (o[6] = //@ts-ignore
+      (...l) => e(h) && e(h)(...l))
+    }), [
+      C(v.$slots, "label", {}, void 0, !0),
+      p("div", Ae, [
+        a(e(ve), s({
           theme: t.theme,
           "popper-class": [
             t.popperClass,
-            t.darkTheme ? "dark-theme-v4" : "light-theme-v4",
-            t.autoSize ? "v-popper--theme-is-dropdown--auto-size" : null
+            t.theme,
+            t.autoSize ? "v-popper--theme-is-dropdown--auto-size" : null,
+            "v4-dropdown"
           ],
           placement: t.placement,
           skidding: t.isOnTop ? 0 : t.skidding,
-          distance: t.isOnTop ? -e(L) : t.distance,
+          distance: t.distance,
           flip: t.flip,
           triggers: [],
-          shown: !!e(m),
+          shown: !!e(f),
           "auto-hide": !1,
           container: t.container,
-          "auto-size": t.autoSize,
-          "data-testid": `${t.testId}-${e(c).TRIGGER}`
-        }, {
-          popper: o(() => [
-            s(Z, null, {
-              default: o(() => [
-                t.inlineSearch || t.title ? (d(), n("div", ye, [
-                  r("div", null, [
-                    t.title ? (d(), n("div", {
-                      key: 0,
-                      class: "dropdown-title__text",
-                      "data-testid": `${t.testId}-${e(c).TITLE}`
-                    }, [
-                      s(e(y), { strong: "" }, {
-                        default: o(() => [
-                          u(b(t.title), 1)
-                        ]),
-                        _: 1
-                      })
-                    ], 8, pe)) : i("", !0),
-                    t.inlineSearch ? (d(), g(e(oe), {
-                      key: 1,
-                      modelValue: e(v),
-                      "onUpdate:modelValue": a[4] || (a[4] = (l) => _(v) ? v.value = l : null),
-                      placeholder: t.searchPlaceholder,
-                      class: "dropdown-title__search",
-                      variant: "transparent",
-                      size: "md",
-                      "test-id": `${t.testId}-${e(c).SEARCH}`,
-                      onKeydown: e(p)
-                    }, null, 8, ["modelValue", "placeholder", "test-id", "onKeydown"])) : i("", !0)
-                  ]),
-                  e(m) ? (d(), n("div", {
+          "auto-size": t.autoSize
+        }, e(m)[e(c).TRIGGER]), {
+          popper: u(() => [
+            a(de, null, {
+              default: u(() => [
+                e(f) ? (i(), n("div", {
+                  key: 0,
+                  ref_key: "listRef",
+                  ref: Z,
+                  class: z(["light-theme-v4", {
+                    "dropdown--disabled": t.disabled,
+                    "inline-search": t.inlineSearch
+                  }]),
+                  style: re({ width: e(ie) })
+                }, [
+                  e(f) ? (i(), n("div", {
                     key: 0,
-                    class: "dropdown",
-                    onKeydown: a[6] || (a[6] = //@ts-ignore
-                    (...l) => e(p) && e(p)(...l))
+                    class: "dropdown-list-wrapper",
+                    onKeydown: o[5] || (o[5] = //@ts-ignore
+                    (...l) => e(h) && e(h)(...l))
                   }, [
-                    h(f.$slots, "input-list", { open: e(m) }, void 0, !0),
-                    r("div", P(e(H), {
+                    e(f) && t.inlineSearch ? (i(), n("div", Oe, [
+                      a(e(Te), {
+                        modelValue: e(I),
+                        "onUpdate:modelValue": [
+                          o[3] || (o[3] = (l) => se(I) ? I.value = l : null),
+                          t.onClear
+                        ],
+                        placeholder: t.inlineSearchPlaceholder,
+                        variant: "transparent",
+                        size: "md",
+                        "auto-focus": t.searchAutoFocus,
+                        "test-id": t.testId,
+                        onKeydown: e(h)
+                      }, null, 8, ["modelValue", "placeholder", "auto-focus", "test-id", "onUpdate:modelValue", "onKeydown"])
+                    ])) : d("", !0),
+                    C(v.$slots, "input-list", { open: e(f) }, void 0, !0),
+                    p("div", s({
                       class: ["list-container", { "list-container--multi": t.multi }],
-                      style: { height: `${e(F)}rem` },
-                      "data-testid": `${t.testId}-${e(c).LIST_CONTAINER}`
+                      style: { height: `${e(M)}rem` }
+                    }, {
+                      ...e(W),
+                      ...e(m)[e(c).LIST_CONTAINER]
                     }), [
-                      r("ul", P(e(M), {
+                      p("ul", s(e(L), {
+                        style: {
+                          height: Number(e(L).style.height) - 4
+                        },
                         role: "listbox",
                         class: ["list", { "list--multi": t.multi }]
                       }), [
-                        !e(G).length && !t.loading ? (d(), n("li", be, [
-                          s(e(y), {
-                            size: "sm",
-                            class: "no-result"
-                          }, {
-                            default: o(() => [
-                              u(b(t.noResultsText), 1)
-                            ]),
-                            _: 1
-                          })
-                        ])) : i("", !0),
-                        t.loading ? (d(), n("li", ke, [
-                          s(e(B), {
-                            "font-size": "md",
-                            class: "loader-icon"
-                          }, {
-                            default: o(() => [
-                              ve
+                        !e(X).length && !t.loading ? (i(), n("li", Ee, [
+                          a(e(F), s({ variant: "body2" }, e(m)[e(c).NO_RESULT]), {
+                            default: u(() => [
+                              g(ue(t.noResultsText), 1)
                             ]),
                             _: 1
-                          }),
-                          s(e(y), null, {
-                            default: o(() => [
-                              u("Loading...")
+                          }, 16)
+                        ])) : d("", !0),
+                        t.loading ? (i(), n("li", Ke, [
+                          a(e(Ce)),
+                          a(e(F), null, {
+                            default: u(() => [
+                              g("Loading...")
                             ]),
                             _: 1
                           })
-                        ])) : i("", !0),
-                        t.showSelectAll ? (d(), n("li", we, [
-                          s(de, {
-                            "aria-selected": e(z),
-                            "aria-disabled": !!t.disabled,
-                            "selected-prop": e(z),
-                            "is-indeterminate": e(X),
-                            "select-all-option": "",
-                            onClick: a[5] || (a[5] = A((l) => e(q)(), ["stop"]))
-                          }, {
-                            default: o(() => [
-                              u("Select all ")
+                        ])) : d("", !0),
+                        t.showSelectAll ? (i(), n("li", Re, [
+                          a(e(x), s(
+                            {
+                              "aria-selected": e(B),
+                              "aria-disabled": !!t.disabled,
+                              "selected-prop": e(B),
+                              "is-indeterminate": e(q),
+                              "select-all-option": ""
+                            },
+                            e(m)[e(c).SELECT_ALL],
+                            {
+                              onClick: o[4] || (o[4] = V((l) => e(Y)(), ["stop"]))
+                            }
+                          ), {
+                            default: u(() => [
+                              g("Select all ")
                             ]),
                             _: 1
-                          }, 8, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate"])
-                        ])) : i("", !0),
-                        e(O).length && !t.loading ? (d(!0), n(ee, { key: 3 }, te(e(O), ({ data: l, index: w }) => (d(), n("li", {
-                          key: w,
-                          "aria-selected": e(R)(T(e(E)), l),
+                          }, 16, ["aria-selected", "aria-disabled", "selected-prop", "is-indeterminate"])
+                        ])) : d("", !0),
+                        e(N).length && !t.loading ? (i(!0), n(ce, { key: 3 }, fe(e(N), ({ data: l, index: b }) => (i(), n("li", {
+                          key: b,
+                          "aria-selected": e(S)(T(e(k)), l),
                           "aria-disabled": !!t.disabled,
-                          onClick: A(() => e(x)(l, w), ["stop"])
+                          onClick: V(() => e(O)(l, b), ["stop"])
                         }, [
-                          h(f.$slots, "default", {
+                          C(v.$slots, "default", {
                             option: l,
-                            selected: e(R)(T(e(E)), l),
-                            active: T(e(U)) === w
-                          }, void 0, !0)
-                        ], 8, $e))), 128)) : i("", !0)
+                            selected: e(S)(T(e(k)), l),
+                            active: T(e(E)) === b
+                          }, () => [
+                            a(e(x), {
+                              option: l,
+                              selected: e(S)(T(e(k)), l),
+                              active: T(e(E)) === b,
+                              "name-key": t.optionNameKey,
+                              "image-key": t.optionImageKey,
+                              "icon-key": t.optionIconKey,
+                              "icon-type": t.optionIconType
+                            }, null, 8, ["option", "selected", "active", "name-key", "image-key", "icon-key", "icon-type"])
+                          ], !0)
+                        ], 8, De))), 128)) : d("", !0)
                       ], 16)
-                    ], 16, he),
-                    t.multi ? (d(), n("div", ge, [
-                      s(e(C), {
-                        ref: "cancel",
-                        size: "small",
-                        variant: "outlined",
-                        color: "default",
-                        "test-id": `${t.testId}-${e(c).ACTION_CANCEL}`,
-                        onClick: e(W)
-                      }, {
-                        default: o(() => [
-                          u(" Cancel ")
-                        ]),
-                        _: 1
-                      }, 8, ["test-id", "onClick"]),
-                      s(e(C), {
-                        ref: "apply",
-                        "data-testid": "mutli-apply",
-                        size: "small",
-                        class: "apply-button",
-                        "test-id": `${t.testId}-${e(c).ACTION_APPLY}`,
-                        onClick: e(Y)
-                      }, {
-                        default: o(() => [
-                          u("Apply ")
-                        ]),
-                        _: 1
-                      }, 8, ["test-id", "onClick"])
-                    ])) : i("", !0)
-                  ], 32)) : i("", !0)
-                ], 512)) : i("", !0)
+                    ], 16),
+                    t.multi ? (i(), n("div", Pe, [
+                      p("div", ze, [
+                        a(e(A), s(
+                          {
+                            ref_key: "clearAll",
+                            ref: le,
+                            size: "small",
+                            variant: "text",
+                            color: "primary"
+                          },
+                          e(m)[e(c).ACTION_CLEAR_ALL],
+                          { onClick: e(R) }
+                        ), {
+                          default: u(() => [
+                            g(" Clear all ")
+                          ]),
+                          _: 1
+                        }, 16, ["onClick"])
+                      ]),
+                      p("div", Ve, [
+                        a(e(A), s(
+                          {
+                            ref_key: "cancel",
+                            ref: ee,
+                            size: "small",
+                            variant: "outlined",
+                            color: "primary"
+                          },
+                          e(m)[e(c).ACTION_CANCEL],
+                          { onClick: e(j) }
+                        ), {
+                          default: u(() => [
+                            g(" Cancel ")
+                          ]),
+                          _: 1
+                        }, 16, ["onClick"]),
+                        a(e(A), s({
+                          ref_key: "apply",
+                          ref: _,
+                          "data-testid": "mutli-apply",
+                          size: "small",
+                          class: "apply-button"
+                        }, e(m)[e(c).ACTION_APPLY], { onClick: e(J) }), {
+                          default: u(() => [
+                            g("Apply ")
+                          ]),
+                          _: 1
+                        }, 16, ["onClick"])
+                      ])
+                    ])) : d("", !0)
+                  ], 32)) : d("", !0)
+                ], 6)) : d("", !0)
               ]),
               _: 3
             })
           ]),
-          default: o(() => [
-            r("div", {
-              class: $(["button__container", {
-                "button__container--open": !!e(m),
+          default: u(() => [
+            p("div", {
+              class: z(["button__container", {
+                "button__container--open": !!e(f),
                 [`button__container--${t.size}`]: !0,
                 "button__container--disabled": t.disabled
               }])
             }, [
-              f.$slots.input ? (d(), n("div", {
-                key: 0,
-                ref: "buttonRef",
-                onClick: a[0] || (a[0] = (l) => e(I)()),
-                onKeydown: a[1] || (a[1] = //@ts-ignore
-                (...l) => e(k) && e(k)(...l))
-              }, [
-                h(f.$slots, "input", {
-                  open: e(m),
-                  value: e(S),
-                  disabled: t.disabled
-                }, void 0, !0)
-              ], 544)) : i("", !0),
-              f.$slots.input ? i("", !0) : (d(), n("button", {
-                key: 1,
-                ref: "buttonRef",
-                disabled: t.disabled,
-                "aria-haspopup": !0,
-                "aria-expanded": !!e(m),
-                "aria-labelledby": e(D)?.id,
-                "aria-disabled": t.disabled,
-                class: $([{
-                  "button--open": !!e(m),
-                  [`button--${t.size}`]: !0,
-                  "button--disabled": t.disabled
-                }, "button"]),
-                onKeydown: a[2] || (a[2] = //@ts-ignore
-                (...l) => e(k) && e(k)(...l)),
-                onClick: a[3] || (a[3] = (l) => e(I)())
-              }, [
-                f.$slots.image ? (d(), n("div", fe, [
-                  h(f.$slots, "image", {}, void 0, !0)
-                ])) : i("", !0),
-                s(e(y), {
-                  size: "sm",
-                  "is-truncated": ""
-                }, {
-                  default: o(() => [
-                    u(b(e(S)), 1)
-                  ]),
-                  _: 1
-                }),
-                r("div", me, [
-                  s(e(B), {
-                    name: "angle-down",
-                    "font-size": "sm"
-                  })
-                ])
-              ], 42, ce))
+              C(v.$slots, "dropdown-trigger", {}, () => [
+                p("div", {
+                  ref_key: "buttonRef",
+                  ref: K
+                }, [
+                  e(D) ? (i(), n("div", Le, [
+                    (i(), me(pe(e(D)), {
+                      placeholder: t.placeholder,
+                      open: e(f),
+                      label: t.triggerLabel,
+                      "hover-help-text": t.triggerHelperText,
+                      "feedback-text": t.triggerFeedbackText,
+                      "feedback-variant": t.triggerFeedbackVariant,
+                      mandatory: t.mandatory,
+                      "test-id": t.testId,
+                      multi: t.multi,
+                      "selected-option": e(k),
+                      "display-value": t.displayValue,
+                      options: t.options,
+                      "option-name-key": t.optionNameKey,
+                      "option-image-key": t.optionImageKey,
+                      "option-icon-key": t.optionIconKey,
+                      "option-icon-type": t.optionIconType,
+                      "value-to-copy": t.valueToCopy,
+                      onKeydown: e(G),
+                      onClick: ne
+                    }, null, 40, ["placeholder", "open", "label", "hover-help-text", "feedback-text", "feedback-variant", "mandatory", "test-id", "multi", "selected-option", "display-value", "options", "option-name-key", "option-image-key", "option-icon-key", "option-icon-type", "value-to-copy", "onKeydown"]))
+                  ])) : d("", !0),
+                  t.predefinedTrigger === e(y).ICON_BUTTON ? (i(), n("div", Be, [
+                    a(e(ge), {
+                      onClick: o[0] || (o[0] = (l) => e(w)())
+                    })
+                  ])) : d("", !0),
+                  t.predefinedTrigger === e(y).CHIP ? (i(), n("div", Ne, [
+                    a(e(he), {
+                      open: e(f),
+                      label: t.placeholder,
+                      "test-id": t.testId,
+                      options: t.options,
+                      "selected-option": e(k),
+                      "display-value": t.displayValue,
+                      multi: t.multi,
+                      onClick: o[1] || (o[1] = (l) => e(w)()),
+                      onClear: o[2] || (o[2] = (l) => e(R)())
+                    }, null, 8, ["open", "label", "test-id", "options", "selected-option", "display-value", "multi"])
+                  ])) : d("", !0)
+                ], 512)
+              ], !0)
             ], 2)
           ]),
           _: 3
-        }, 8, ["theme", "popper-class", "placement", "skidding", "distance", "flip", "shown", "container", "auto-size", "data-testid"]),
-        r("div", null, [
-          s(e(C), {
-            color: "default",
-            onClick: J
-          }, {
-            default: o(() => [
-              s(e(B), { name: "lock" })
-            ]),
-            _: 1
-          })
-        ])
-      ]),
-      !t.error && t.helperText ? (d(), g(e(y), {
-        key: 0,
-        size: "caption",
-        class: "helper-text",
-        "test-id": `${t.testId}-${e(c).HELPER_TEXT}`
-      }, {
-        default: o(() => [
-          u(b(t.helperText), 1)
-        ]),
-        _: 1
-      }, 8, ["test-id"])) : i("", !0),
-      t.error ? (d(), g(e(y), {
-        key: 1,
-        size: "caption",
-        class: "helper-text helper-text--error",
-        "test-id": `${t.testId}-${e(c).HELPER_TEXT_ERROR}`
-      }, {
-        default: o(() => [
-          u(b(t.error), 1)
-        ]),
-        _: 1
-      }, 8, ["test-id"])) : i("", !0)
-    ], 42, re));
+        }, 16, ["theme", "popper-class", "placement", "skidding", "distance", "flip", "shown", "container", "auto-size"])
+      ])
+    ], 16, Se));
   }
 });
 export {
-  Pe as default
+  ot as default
 };