@adyen/bento-vue3 1.22.0 → 1.23.0

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 (199) hide show
  1. package/dist/@types/packages/vue2/src/components/data-grid/components/data-grid-cell/data-grid-cell.types.d.ts +9 -5
  2. package/dist/@types/packages/vue2/src/components/data-grid/components/data-grid-cell/data-grid-cell.vue.d.ts +15 -0
  3. package/dist/@types/packages/vue2/src/components/data-grid/components/data-grid-columns/data-grid-columns.types.d.ts +1 -0
  4. package/dist/@types/packages/vue2/src/components/data-grid/components/data-grid-columns/data-grid-columns.vue.d.ts +18 -0
  5. package/dist/@types/packages/vue2/src/components/data-grid/composables/index.d.ts +1 -0
  6. package/dist/@types/packages/vue2/src/components/data-grid/composables/use-calculate-column-width/use-calculate-column-width.d.ts +1 -0
  7. package/dist/@types/packages/vue2/src/components/data-grid/composables/use-column-hovering/index.d.ts +2 -0
  8. package/dist/@types/packages/vue2/src/components/data-grid/composables/use-column-hovering/use-column-hovering.d.ts +53 -0
  9. package/dist/@types/packages/vue2/src/components/data-grid/composables/use-column-hovering/use-column-hovering.types.d.ts +12 -0
  10. package/dist/@types/packages/vue2/src/components/data-grid/composables/use-config-settings/use-config-settings.d.ts +2 -99
  11. package/dist/@types/packages/vue2/src/components/data-grid/composables/use-config-settings/use-config.settings.types.d.ts +7 -0
  12. package/dist/@types/packages/vue2/src/components/data-grid/composables/use-resizer.d.ts +47 -1
  13. package/dist/@types/packages/vue2/src/components/data-grid/data-grid.vue.d.ts +48 -8
  14. package/dist/@types/packages/vue2/src/components/filter-bar/components/all-filters-modal/all-filters-modal.vue.d.ts +48 -24
  15. package/dist/@types/packages/vue2/src/components/filter-bar/filter-bar.types.d.ts +12 -2
  16. package/dist/@types/packages/vue2/src/components/menu/menu.types.d.ts +1 -1
  17. package/dist/@types/packages/vue2/src/components/menu/menu.vue.d.ts +1 -0
  18. package/dist/@types/packages/vue2/src/components/stepper/composables/index.d.ts +2 -0
  19. package/dist/@types/packages/vue2/src/components/stepper/composables/use-step-register/use-step-register.d.ts +11 -0
  20. package/dist/@types/packages/vue2/src/components/stepper/stepper.types.d.ts +1 -0
  21. package/dist/accordion.js +2 -2
  22. package/dist/action-bar.js +6 -6
  23. package/dist/alert.js +3 -3
  24. package/dist/assets/base-modal.css +1 -1
  25. package/dist/assets/button.css +1 -1
  26. package/dist/assets/dialog-page.css +1 -1
  27. package/dist/assets/index10.css +1 -1
  28. package/dist/assets/index11.css +1 -1
  29. package/dist/assets/index12.css +1 -1
  30. package/dist/assets/index13.css +1 -1
  31. package/dist/assets/index14.css +1 -1
  32. package/dist/assets/index15.css +1 -1
  33. package/dist/assets/index16.css +1 -1
  34. package/dist/assets/index17.css +1 -1
  35. package/dist/assets/index18.css +1 -1
  36. package/dist/assets/index19.css +1 -1
  37. package/dist/assets/index2.css +1 -1
  38. package/dist/assets/index20.css +1 -1
  39. package/dist/assets/index21.css +1 -1
  40. package/dist/assets/index22.css +1 -1
  41. package/dist/assets/index23.css +1 -1
  42. package/dist/assets/index24.css +1 -1
  43. package/dist/assets/index25.css +1 -1
  44. package/dist/assets/index26.css +1 -1
  45. package/dist/assets/index27.css +1 -1
  46. package/dist/assets/index28.css +1 -1
  47. package/dist/assets/index29.css +1 -1
  48. package/dist/assets/index3.css +1 -1
  49. package/dist/assets/index30.css +1 -1
  50. package/dist/assets/index31.css +1 -1
  51. package/dist/assets/index32.css +1 -1
  52. package/dist/assets/index33.css +1 -1
  53. package/dist/assets/index34.css +1 -1
  54. package/dist/assets/index35.css +1 -1
  55. package/dist/assets/index36.css +1 -1
  56. package/dist/assets/index37.css +1 -1
  57. package/dist/assets/index39.css +1 -1
  58. package/dist/assets/index4.css +1 -1
  59. package/dist/assets/index40.css +1 -1
  60. package/dist/assets/index41.css +1 -1
  61. package/dist/assets/index42.css +1 -1
  62. package/dist/assets/index43.css +1 -1
  63. package/dist/assets/index44.css +1 -1
  64. package/dist/assets/index45.css +1 -1
  65. package/dist/assets/index46.css +1 -1
  66. package/dist/assets/index47.css +1 -1
  67. package/dist/assets/index48.css +1 -1
  68. package/dist/assets/index5.css +1 -1
  69. package/dist/assets/index6.css +1 -1
  70. package/dist/assets/index7.css +1 -1
  71. package/dist/assets/index8.css +1 -1
  72. package/dist/assets/index9.css +1 -1
  73. package/dist/avatar-image.js +1 -1
  74. package/dist/button.js +5 -5
  75. package/dist/card.js +3 -3
  76. package/dist/checkbox.js +5 -5
  77. package/dist/chunks/{base-button.86be8130.js → base-button.13df4e44.js} +2 -2
  78. package/dist/chunks/{base-button.86be8130.js.map → base-button.13df4e44.js.map} +1 -1
  79. package/dist/chunks/{base-modal.01333c00.js → base-modal.30bce990.js} +6 -6
  80. package/dist/chunks/{base-modal.01333c00.js.map → base-modal.30bce990.js.map} +1 -1
  81. package/dist/chunks/{button-actions-with-menu.df95130d.js → button-actions-with-menu.a5d2bb13.js} +4 -4
  82. package/dist/chunks/{button-actions-with-menu.df95130d.js.map → button-actions-with-menu.a5d2bb13.js.map} +1 -1
  83. package/dist/chunks/{button-actions.bcc9dcc7.js → button-actions.ec3c649c.js} +3 -3
  84. package/dist/chunks/{button-actions.bcc9dcc7.js.map → button-actions.ec3c649c.js.map} +1 -1
  85. package/dist/chunks/{button.a378e7ab.js → button.e965bf53.js} +3 -3
  86. package/dist/chunks/{button.a378e7ab.js.map → button.e965bf53.js.map} +1 -1
  87. package/dist/chunks/{calendar.891a60a9.js → calendar.52fe4032.js} +4 -4
  88. package/dist/chunks/{calendar.891a60a9.js.map → calendar.52fe4032.js.map} +1 -1
  89. package/dist/chunks/{checkbox.9753e9d6.js → checkbox.1442f41a.js} +3 -3
  90. package/dist/chunks/{checkbox.9753e9d6.js.map → checkbox.1442f41a.js.map} +1 -1
  91. package/dist/chunks/{controls-group.84981503.js → controls-group.1f29b602.js} +3 -3
  92. package/dist/chunks/{controls-group.84981503.js.map → controls-group.1f29b602.js.map} +1 -1
  93. package/dist/chunks/{copy.86eb5d86.js → copy.d052f444.js} +4 -4
  94. package/dist/chunks/{copy.86eb5d86.js.map → copy.d052f444.js.map} +1 -1
  95. package/dist/chunks/{dialog-page.ce02932b.js → dialog-page.d505c5ec.js} +3 -3
  96. package/dist/chunks/{dialog-page.ce02932b.js.map → dialog-page.d505c5ec.js.map} +1 -1
  97. package/dist/chunks/{dropdown-default-textbox.91ad6585.js → dropdown-default-textbox.e0ca5afb.js} +136 -116
  98. package/dist/chunks/dropdown-default-textbox.e0ca5afb.js.map +1 -0
  99. package/dist/chunks/{dropdown.6c010045.js → dropdown.257691c0.js} +14 -15
  100. package/dist/chunks/{dropdown.6c010045.js.map → dropdown.257691c0.js.map} +1 -1
  101. package/dist/chunks/{error-message.498811e4.js → error-message.56247bcc.js} +2 -2
  102. package/dist/chunks/{error-message.498811e4.js.map → error-message.56247bcc.js.map} +1 -1
  103. package/dist/chunks/{fixed-scroller.51b63488.js → fixed-scroller.47546775.js} +2 -2
  104. package/dist/chunks/{fixed-scroller.51b63488.js.map → fixed-scroller.47546775.js.map} +1 -1
  105. package/dist/chunks/{footer-actions.573307ed.js → footer-actions.3c2dbf43.js} +4 -4
  106. package/dist/chunks/{footer-actions.573307ed.js.map → footer-actions.3c2dbf43.js.map} +1 -1
  107. package/dist/chunks/{index.fb0e9e1a.js → index.08d813e2.js} +6 -6
  108. package/dist/chunks/{index.fb0e9e1a.js.map → index.08d813e2.js.map} +1 -1
  109. package/dist/chunks/{index.19dab2ef.js → index.0e01e0b2.js} +3 -3
  110. package/dist/chunks/{index.19dab2ef.js.map → index.0e01e0b2.js.map} +1 -1
  111. package/dist/chunks/{index.c4f8460d.js → index.10c69f39.js} +187 -187
  112. package/dist/chunks/index.10c69f39.js.map +1 -0
  113. package/dist/chunks/{index.037ae52f.js → index.44f2aca7.js} +2 -2
  114. package/dist/chunks/{index.037ae52f.js.map → index.44f2aca7.js.map} +1 -1
  115. package/dist/chunks/{index.9c423f37.js → index.4fb57ba0.js} +6 -6
  116. package/dist/chunks/{index.9c423f37.js.map → index.4fb57ba0.js.map} +1 -1
  117. package/dist/chunks/{index.da4cb1b8.js → index.56c13d2c.js} +16 -17
  118. package/dist/chunks/{index.da4cb1b8.js.map → index.56c13d2c.js.map} +1 -1
  119. package/dist/chunks/{index.d6a0cf32.js → index.824101bb.js} +2 -2
  120. package/dist/chunks/{index.d6a0cf32.js.map → index.824101bb.js.map} +1 -1
  121. package/dist/chunks/{index.6e7e9ac6.js → index.99c63a74.js} +2 -2
  122. package/dist/chunks/{index.6e7e9ac6.js.map → index.99c63a74.js.map} +1 -1
  123. package/dist/chunks/{index.e2793c20.js → index.9aaed799.js} +3 -3
  124. package/dist/chunks/{index.e2793c20.js.map → index.9aaed799.js.map} +1 -1
  125. package/dist/chunks/{index.030fb327.js → index.bf4a116b.js} +20 -19
  126. package/dist/chunks/index.bf4a116b.js.map +1 -0
  127. package/dist/chunks/{index.9d65b72a.js → index.f800b267.js} +2 -2
  128. package/dist/chunks/{index.9d65b72a.js.map → index.f800b267.js.map} +1 -1
  129. package/dist/chunks/{listbox-option-tag.abedc9e0.js → listbox-option-tag.4de1659c.js} +3 -3
  130. package/dist/chunks/{listbox-option-tag.abedc9e0.js.map → listbox-option-tag.4de1659c.js.map} +1 -1
  131. package/dist/chunks/{listbox.8ce17729.js → listbox.eb436d06.js} +5 -5
  132. package/dist/chunks/{listbox.8ce17729.js.map → listbox.eb436d06.js.map} +1 -1
  133. package/dist/chunks/{loading-button.5f58f1cf.js → loading-button.6e15f27f.js} +2 -2
  134. package/dist/chunks/{loading-button.5f58f1cf.js.map → loading-button.6e15f27f.js.map} +1 -1
  135. package/dist/chunks/{payment-method.313f2635.js → payment-method.df1b62db.js} +2 -2
  136. package/dist/chunks/{payment-method.313f2635.js.map → payment-method.df1b62db.js.map} +1 -1
  137. package/dist/chunks/{tooltip.a70c9e69.js → tooltip.066fd8f7.js} +3 -3
  138. package/dist/chunks/{tooltip.a70c9e69.js.map → tooltip.066fd8f7.js.map} +1 -1
  139. package/dist/chunks/use-click-outside.941d1600.js +14 -0
  140. package/dist/chunks/use-click-outside.941d1600.js.map +1 -0
  141. package/dist/code-snippet.js +7 -7
  142. package/dist/code-snippet.js.map +1 -1
  143. package/dist/country.js +2 -2
  144. package/dist/currency.js +1 -1
  145. package/dist/data-grid-template.js +1 -1
  146. package/dist/data-grid.js +1219 -1127
  147. package/dist/data-grid.js.map +1 -1
  148. package/dist/date-picker.js +21 -22
  149. package/dist/date-picker.js.map +1 -1
  150. package/dist/date-range-picker.js +2 -2
  151. package/dist/date.js +1 -1
  152. package/dist/divider.js +1 -1
  153. package/dist/dropdown.js +7 -7
  154. package/dist/empty-state.js +3 -3
  155. package/dist/filter-bar.js +586 -593
  156. package/dist/filter-bar.js.map +1 -1
  157. package/dist/focus-trap.js +1 -1
  158. package/dist/form-layout.js +2 -2
  159. package/dist/header.js +4 -4
  160. package/dist/index.js +19 -19
  161. package/dist/info-icon.js +3 -3
  162. package/dist/input-field.js +4 -4
  163. package/dist/internal.js +8 -8
  164. package/dist/link.js +1 -1
  165. package/dist/loading-indicator.js +1 -1
  166. package/dist/menu.js +1 -1
  167. package/dist/modal-fullscreen.js +6 -6
  168. package/dist/modal.js +6 -6
  169. package/dist/pagination.js +4 -4
  170. package/dist/payment-method.js +1 -1
  171. package/dist/popover.js +1 -1
  172. package/dist/popper-container.js +1 -1
  173. package/dist/radio-group.js +4 -4
  174. package/dist/search-bar.js +2 -2
  175. package/dist/secondary-nav.js +2 -2
  176. package/dist/segmented-control.js +3 -3
  177. package/dist/selection-card.js +4 -4
  178. package/dist/sidepanel.js +6 -6
  179. package/dist/status.js +2 -2
  180. package/dist/stepper.js +152 -141
  181. package/dist/stepper.js.map +1 -1
  182. package/dist/structured-list.js +1 -1
  183. package/dist/summary-grid.js +3 -3
  184. package/dist/tabs.js +3 -3
  185. package/dist/tag.js +2 -2
  186. package/dist/textarea.js +4 -4
  187. package/dist/timeline.js +7 -7
  188. package/dist/toast.js +3 -3
  189. package/dist/toggle.js +2 -2
  190. package/dist/tutorial.js +6 -6
  191. package/dist/typography.js +1 -1
  192. package/dist/web-types.json +1 -1
  193. package/package.json +2 -2
  194. package/dist/chunks/directive.0408e565.js +0 -23
  195. package/dist/chunks/directive.0408e565.js.map +0 -1
  196. package/dist/chunks/dropdown-default-textbox.91ad6585.js.map +0 -1
  197. package/dist/chunks/index.030fb327.js.map +0 -1
  198. package/dist/chunks/index.c4f8460d.js.map +0 -1
  199. /package/dist/@types/packages/vue2/src/components/stepper/composables/{useKeyboardNavigation/useKeyboardNavigation.d.ts → use-keyboard-navigation/use-keyboard-navigation.d.ts} +0 -0
@@ -1,29 +1,48 @@
1
- import { defineComponent as C, useAttrs as Q, useSlots as W, ref as X, computed as i, watch as Z, nextTick as ee, openBlock as s, createElementBlock as r, normalizeClass as A, withKeys as I, createVNode as y, unref as o, withCtx as P, mergeProps as S, renderSlot as h, normalizeProps as K, createTextVNode as B, toDisplayString as g, Fragment as U, renderList as j, createElementVNode as z, guardReactiveProps as G, createCommentVNode as V, withModifiers as Y, toHandlers as te, createSlots as oe, withDirectives as q, vShow as H } from "vue";
2
- import { g as ae } from "./unique-id.a2a2b458.js";
3
- import { u as le } from "./use-has-slot.4d98bf29.js";
4
- import { B as ne } from "./index.6e7e9ac6.js";
5
- import { d as de } from "./debounce.b5ef6acf.js";
6
- import { C as se } from "./cross-circle-fill.1abec1a2.js";
7
- import { _ as J } from "./_plugin-vue_export-helper.dad06003.js";
1
+ import { o as U } from "./on-click-outside.3e0c3e2a.js";
2
+ import { defineComponent as k, useAttrs as ee, useSlots as G, ref as te, computed as r, watch as oe, nextTick as ae, openBlock as d, createElementBlock as i, normalizeClass as A, withKeys as C, createVNode as m, unref as o, withCtx as P, mergeProps as h, renderSlot as E, normalizeProps as K, createTextVNode as L, toDisplayString as g, Fragment as Y, renderList as J, createElementVNode as Q, guardReactiveProps as X, createCommentVNode as V, withModifiers as q, toHandlers as le, createSlots as ne, withDirectives as H, vShow as W } from "vue";
3
+ import { g as se } from "./unique-id.a2a2b458.js";
4
+ import { u as de } from "./use-has-slot.4d98bf29.js";
5
+ import { B as ie } from "./index.99c63a74.js";
6
+ import { d as re } from "./debounce.b5ef6acf.js";
7
+ import { C as ue } from "./cross-circle-fill.1abec1a2.js";
8
+ import { _ as Z } from "./_plugin-vue_export-helper.dad06003.js";
8
9
  import { s as $ } from "./events.58c00e6d.js";
9
- import { C as re, a as ie } from "./chevron-up.638a9f34.js";
10
+ import { C as ce, a as pe } from "./chevron-up.638a9f34.js";
10
11
  import "../assets/dropdown-default-textbox.css";
11
- var p = /* @__PURE__ */ ((t) => (t.DISABLED = "disabled", t.READONLY = "readonly", t.HAS_ITEMS = "has-items", t.OPENED = "opened", t.ERROR = "error", t))(p || {}), n = /* @__PURE__ */ ((t) => (t.OPEN = "dropdown-base-open", t.KEYDOWN = "dropdown-base-keydown", t.CLOSE = "dropdown-base-close", t.INPUT = "dropdown-base-input", t.CLEAR = "dropdown-base-clear", t))(n || {});
12
- const ue = ["onKeydown"], pe = ["id", "value", "disabled", "readonly", "onKeydown"], ce = ["id"], be = {
12
+ const j = (t, a) => {
13
+ const e = !a.modifiers.bubble;
14
+ if (typeof a.value == "function")
15
+ t.__onClickOutside_stop = U(t, a.value, { capture: e });
16
+ else {
17
+ const [b, f] = a.value;
18
+ t.__onClickOutside_stop = U(t, b, { capture: e, ...f });
19
+ }
20
+ }, z = (t) => {
21
+ t.__onClickOutside_stop();
22
+ }, Ke = {
23
+ // Vue 2 Directive hooks
24
+ inserted: j,
25
+ unbind: z,
26
+ // Vue 3 Directive hooks
27
+ beforeMount: j,
28
+ unmounted: z
29
+ };
30
+ var c = /* @__PURE__ */ ((t) => (t.DISABLED = "disabled", t.READONLY = "readonly", t.HAS_ITEMS = "has-items", t.OPENED = "opened", t.ERROR = "error", t))(c || {}), s = /* @__PURE__ */ ((t) => (t.OPEN = "dropdown-base-open", t.KEYDOWN = "dropdown-base-keydown", t.CLOSE = "dropdown-base-close", t.INPUT = "dropdown-base-input", t.CLEAR = "dropdown-base-clear", t))(s || {});
31
+ const be = ["onKeydown"], fe = ["id", "value", "disabled", "readonly", "onKeydown"], ye = ["id"], me = {
13
32
  key: 1,
14
33
  class: "b-dropdown-base-textbox__input-multiple-selected"
15
- }, ye = { class: "b-dropdown-base-textbox__input-selected-element" }, fe = {
34
+ }, xe = { class: "b-dropdown-base-textbox__input-selected-element" }, _e = {
16
35
  key: 2,
17
36
  class: "b-dropdown-base-textbox__additional-items"
18
- }, me = {
37
+ }, we = {
19
38
  key: 3,
20
39
  class: "b-dropdown-base-textbox__icon",
21
40
  "aria-hidden": "true"
22
- }, xe = ["onClick", "onKeydown", "onKeyup"], we = C({
41
+ }, ve = ["onClick", "onKeydown", "onKeyup"], Ie = k({
23
42
  name: "dropdown-base-textbox",
24
43
  inheritAttrs: !1
25
- }), _e = /* @__PURE__ */ C({
26
- ...we,
44
+ }), Se = /* @__PURE__ */ k({
45
+ ...Ie,
27
46
  props: {
28
47
  /**
29
48
  * The number of additional items that have been selected in the dropdown.
@@ -104,20 +123,20 @@ const ue = ["onKeydown"], pe = ["id", "value", "disabled", "readonly", "onKeydow
104
123
  */
105
124
  showSlotContentInMultiple: { type: Boolean, default: !1 }
106
125
  },
107
- setup(t, { emit: d }) {
108
- const e = t, E = Q(), N = W(), f = le(N), u = X(null), m = ae("textbox"), D = i(() => ({
109
- [`b-dropdown-base-textbox--${p.DISABLED}`]: e.disabled,
110
- [`b-dropdown-base-textbox--${p.READONLY}`]: e.readonly,
111
- [`b-dropdown-base-textbox--${p.HAS_ITEMS}`]: !!e.additionalItemsSelected
112
- })), k = i(() => ({
126
+ setup(t, { emit: a }) {
127
+ const e = t, b = ee(), f = G(), x = de(f), u = te(null), _ = se("textbox"), D = r(() => ({
128
+ [`b-dropdown-base-textbox--${c.DISABLED}`]: e.disabled,
129
+ [`b-dropdown-base-textbox--${c.READONLY}`]: e.readonly,
130
+ [`b-dropdown-base-textbox--${c.HAS_ITEMS}`]: !!e.additionalItemsSelected
131
+ })), N = r(() => ({
113
132
  ["b-dropdown-base-textbox__input--dynamic-filtering"]: e.dynamicFiltering
114
- })), x = i(() => e.dynamicFiltering && !!e.value && e.open), w = i(
133
+ })), w = r(() => e.dynamicFiltering && !!e.value && e.open), v = r(
115
134
  () => {
116
- var l;
135
+ var n;
117
136
  return {
118
137
  "aria-haspopup": "listbox",
119
138
  "aria-controls": e.ariaControls,
120
- "aria-describedby": (l = E["aria-describedby"]) == null ? void 0 : l.toString(),
139
+ "aria-describedby": (n = b["aria-describedby"]) == null ? void 0 : n.toString(),
121
140
  "aria-expanded": e.ariaExpanded ? "true" : "false",
122
141
  "aria-labelledby": e.ariaLabelledby,
123
142
  "aria-label": e.ariaLabelledby ? null : e.ariaLabel,
@@ -125,42 +144,42 @@ const ue = ["onKeydown"], pe = ["id", "value", "disabled", "readonly", "onKeydow
125
144
  "aria-disabled": e.disabled ? !0 : null
126
145
  };
127
146
  }
128
- ), a = i(
147
+ ), l = r(
129
148
  () => e.multiple ? e.selectedValueItem : []
130
- ), _ = i(() => e.dynamicFiltering && (e.open || e.alwaysComboboxIsInput)), R = i(() => e.selectedValueItem && !e.multiple), v = i(
131
- () => e.multiple && e.selectedValueItem && a.value.length > 0 && e.showSlotContentInMultiple
149
+ ), I = r(() => e.dynamicFiltering && (e.open || e.alwaysComboboxIsInput)), R = r(() => e.selectedValueItem && !e.multiple), S = r(
150
+ () => e.multiple && e.selectedValueItem && l.value.length > 0 && e.showSlotContentInMultiple
132
151
  );
133
- Z(
134
- () => _.value,
152
+ oe(
153
+ () => I.value,
135
154
  () => {
136
- _.value && !e.alwaysComboboxIsInput && ee(() => {
155
+ I.value && !e.alwaysComboboxIsInput && ae(() => {
137
156
  u.value.focus();
138
157
  });
139
158
  }
140
159
  );
141
- const L = () => {
142
- !e.disabled && !e.readonly && (u.value.focus(), d(n.OPEN));
160
+ const O = () => {
161
+ !e.disabled && !e.readonly && (u.value.focus(), a(s.OPEN));
143
162
  }, F = () => {
144
- e.open && (u.value.focus(), d(n.CLOSE));
145
- }, T = (l) => e.open && l.target.tagName === "INPUT" ? null : e.open ? F() : L(), O = () => {
146
- d(n.CLEAR), d(n.INPUT, ""), u.value.focus();
147
- }, M = de((l) => {
148
- !e.readonly && !e.disabled ? d(n.INPUT, l.target.value) : (l.preventDefault(), l.stopPropagation());
163
+ e.open && (u.value.focus(), a(s.CLOSE));
164
+ }, T = (n) => e.open && n.target.tagName === "INPUT" ? null : e.open ? F() : O(), B = () => {
165
+ a(s.CLEAR), a(s.INPUT, ""), u.value.focus();
166
+ }, M = re((n) => {
167
+ !e.readonly && !e.disabled ? a(s.INPUT, n.target.value) : (n.preventDefault(), n.stopPropagation());
149
168
  }, e.debounceTime);
150
- return (l, b) => (s(), r("div", {
151
- class: A(l.$attrs.class),
169
+ return (n, y) => (d(), i("div", {
170
+ class: A(n.$attrs.class),
152
171
  "data-testid": "textbox-wrapper",
153
172
  onClick: T,
154
- onKeydown: I(F, ["escape"])
173
+ onKeydown: C(F, ["escape"])
155
174
  }, [
156
- y(o(ne), {
175
+ m(o(ie), {
157
176
  class: A(["b-dropdown-base-textbox", o(D)]),
158
177
  el: "div",
159
178
  "data-testid": "base-textbox"
160
179
  }, {
161
180
  default: P(() => [
162
- o(_) ? (s(), r("input", S({ key: 0 }, o(w), {
163
- id: o(m),
181
+ o(I) ? (d(), i("input", h({ key: 0 }, o(v), {
182
+ id: o(_),
164
183
  ref_key: "textbox",
165
184
  ref: u,
166
185
  class: "b-dropdown-base-textbox__input",
@@ -171,63 +190,63 @@ const ue = ["onKeydown"], pe = ["id", "value", "disabled", "readonly", "onKeydow
171
190
  disabled: t.disabled ? !0 : null,
172
191
  readonly: t.readonly,
173
192
  onKeydown: [
174
- b[0] || (b[0] = (c) => l.$emit(o(n).KEYDOWN, c)),
175
- I(T, ["enter"])
193
+ y[0] || (y[0] = (p) => n.$emit(o(s).KEYDOWN, p)),
194
+ C(T, ["enter"])
176
195
  ],
177
- onInput: b[1] || (b[1] = //@ts-ignore
178
- (...c) => o(M) && o(M)(...c))
179
- }), null, 16, pe)) : (s(), r("div", S({
196
+ onInput: y[1] || (y[1] = //@ts-ignore
197
+ (...p) => o(M) && o(M)(...p))
198
+ }), null, 16, fe)) : (d(), i("div", h({
180
199
  key: 1,
181
- id: o(m)
182
- }, o(w), {
200
+ id: o(_)
201
+ }, o(v), {
183
202
  ref_key: "textbox",
184
203
  ref: u,
185
- class: ["b-dropdown-base-textbox__input", o(k)],
204
+ class: ["b-dropdown-base-textbox__input", o(N)],
186
205
  role: "combobox",
187
206
  tabindex: 0
188
207
  }), [
189
- o(R) ? h(l.$slots, "default", K(S({ key: 0 }, t.selectedValueItem)), () => [
190
- B(g(t.displayValue), 1)
191
- ], !0) : o(v) ? (s(), r("div", be, [
192
- (s(!0), r(U, null, j(o(a), (c) => (s(), r("div", {
193
- key: c.value
208
+ o(R) ? E(n.$slots, "default", K(h({ key: 0 }, t.selectedValueItem)), () => [
209
+ L(g(t.displayValue), 1)
210
+ ], !0) : o(S) ? (d(), i("div", me, [
211
+ (d(!0), i(Y, null, J(o(l), (p) => (d(), i("div", {
212
+ key: p.value
194
213
  }, [
195
- z("div", ye, [
196
- h(l.$slots, "default", K(G(c)), () => [
197
- B(g(t.displayValue), 1)
214
+ Q("div", xe, [
215
+ E(n.$slots, "default", K(X(p)), () => [
216
+ L(g(t.displayValue), 1)
198
217
  ], !0)
199
218
  ])
200
219
  ]))), 128))
201
- ])) : (s(), r(U, { key: 2 }, [
202
- B(g(t.displayValue), 1)
220
+ ])) : (d(), i(Y, { key: 2 }, [
221
+ L(g(t.displayValue), 1)
203
222
  ], 64))
204
- ], 16, ce)),
205
- t.additionalItemsSelected ? (s(), r("span", fe, g(t.additionalItemsSelected), 1)) : V("", !0),
206
- o(f)("icon") && !o(x) ? (s(), r("span", me, [
207
- h(l.$slots, "icon", {}, void 0, !0)
223
+ ], 16, ye)),
224
+ t.additionalItemsSelected ? (d(), i("span", _e, g(t.additionalItemsSelected), 1)) : V("", !0),
225
+ o(x)("icon") && !o(w) ? (d(), i("span", we, [
226
+ E(n.$slots, "icon", {}, void 0, !0)
208
227
  ])) : V("", !0),
209
- o(x) ? (s(), r("span", {
228
+ o(w) ? (d(), i("span", {
210
229
  key: 4,
211
230
  class: "b-dropdown-base-textbox__clear-search",
212
231
  tabindex: "0",
213
232
  "data-testid": "clear-search-button",
214
- onClick: Y(O, ["stop"]),
215
- onKeydown: I(Y(O, ["stop"]), ["enter"]),
216
- onKeyup: I(O, ["space"])
233
+ onClick: q(B, ["stop"]),
234
+ onKeydown: C(q(B, ["stop"]), ["enter"]),
235
+ onKeyup: C(B, ["space"])
217
236
  }, [
218
- y(o(se), { "svg-title": "clearSearch" })
219
- ], 40, xe)) : V("", !0)
237
+ m(o(ue), { "svg-title": "clearSearch" })
238
+ ], 40, ve)) : V("", !0)
220
239
  ]),
221
240
  _: 3
222
241
  }, 8, ["class"])
223
- ], 42, ue));
242
+ ], 42, be));
224
243
  }
225
244
  });
226
- const ve = /* @__PURE__ */ J(_e, [["__scopeId", "data-v-544908a0"]]), Ie = { class: "b-dropdown-default-textbox__chevron" }, ge = C({
245
+ const Ce = /* @__PURE__ */ Z(Se, [["__scopeId", "data-v-544908a0"]]), ge = { class: "b-dropdown-default-textbox__chevron" }, he = k({
227
246
  name: "dropdown-default-textbox",
228
247
  inheritAttrs: !1
229
- }), Se = /* @__PURE__ */ C({
230
- ...ge,
248
+ }), Ee = /* @__PURE__ */ k({
249
+ ...he,
231
250
  props: {
232
251
  /**
233
252
  * The number of additional items that have been selected in the dropdown.
@@ -318,65 +337,66 @@ const ve = /* @__PURE__ */ J(_e, [["__scopeId", "data-v-544908a0"]]), Ie = { cla
318
337
  multiple: { type: Boolean, default: !1 }
319
338
  },
320
339
  emits: ["clear", "close", "input", "keydown", "open"],
321
- setup(t, { emit: d }) {
322
- const e = t, E = W(), N = i(() => ({
323
- [`b-dropdown-default-textbox--${p.ERROR}`]: !e.disabled && !e.readonly && e.isInvalid,
324
- [`b-dropdown-default-textbox--${p.DISABLED}`]: e.disabled,
325
- [`b-dropdown-default-textbox--${p.READONLY}`]: e.readonly,
326
- [`b-dropdown-default-textbox--${p.OPENED}`]: e.open,
340
+ setup(t, { emit: a }) {
341
+ const e = t, b = G(), f = r(() => ({
342
+ [`b-dropdown-default-textbox--${c.ERROR}`]: !e.disabled && !e.readonly && e.isInvalid,
343
+ [`b-dropdown-default-textbox--${c.DISABLED}`]: e.disabled,
344
+ [`b-dropdown-default-textbox--${c.READONLY}`]: e.readonly,
345
+ [`b-dropdown-default-textbox--${c.OPENED}`]: e.open,
327
346
  "b-dropdown-default-textbox--condensed": e.condensed
328
- })), f = i(() => e.open && !e.disabled && !e.readonly), u = (a) => {
329
- d("input", a);
330
- }, m = (a) => {
331
- d("keydown", a);
332
- }, D = (a) => {
333
- $(a), d("open");
334
- }, k = (a) => {
335
- $(a), d("close");
336
- }, x = (a) => {
337
- $(a), d("clear");
338
- }, w = {
339
- [n.INPUT]: u,
340
- [n.OPEN]: D,
341
- [n.CLOSE]: k,
342
- [n.CLEAR]: x,
343
- [n.KEYDOWN]: m
347
+ })), x = r(() => e.open && !e.disabled && !e.readonly), u = (l) => {
348
+ a("input", l);
349
+ }, _ = (l) => {
350
+ a("keydown", l);
351
+ }, D = (l) => {
352
+ $(l), a("open");
353
+ }, N = (l) => {
354
+ $(l), a("close");
355
+ }, w = (l) => {
356
+ $(l), a("clear");
357
+ }, v = {
358
+ [s.INPUT]: u,
359
+ [s.OPEN]: D,
360
+ [s.CLOSE]: N,
361
+ [s.CLEAR]: w,
362
+ [s.KEYDOWN]: _
344
363
  };
345
- return (a, _) => (s(), r("div", {
346
- class: A(["b-dropdown-default-textbox", o(N)]),
364
+ return (l, I) => (d(), i("div", {
365
+ class: A(["b-dropdown-default-textbox", o(f)]),
347
366
  "data-testid": "default-textbox"
348
367
  }, [
349
- y(ve, S({ ...a.$attrs, ...a.$props }, {
368
+ m(Ce, h({ ...l.$attrs, ...l.$props }, {
350
369
  class: "b-dropdown-default-textbox__textbox",
351
370
  value: t.value
352
- }, te(w)), oe({
371
+ }, le(v)), ne({
353
372
  icon: P(() => [
354
- z("div", Ie, [
355
- q(y(o(re), { "svg-title": "opened" }, null, 512), [
356
- [H, o(f)]
373
+ Q("div", ge, [
374
+ H(m(o(ce), { "svg-title": "opened" }, null, 512), [
375
+ [W, o(x)]
357
376
  ]),
358
- q(y(o(ie), { "svg-title": "closed" }, null, 512), [
359
- [H, !o(f)]
377
+ H(m(o(pe), { "svg-title": "closed" }, null, 512), [
378
+ [W, !o(x)]
360
379
  ])
361
380
  ])
362
381
  ]),
363
382
  _: 2
364
383
  }, [
365
- j(o(E), (R, v) => ({
366
- name: v,
367
- fn: P((L) => [
368
- h(a.$slots, v, K(G(L)), void 0, !0)
384
+ J(o(b), (R, S) => ({
385
+ name: S,
386
+ fn: P((O) => [
387
+ E(l.$slots, S, K(X(O)), void 0, !0)
369
388
  ])
370
389
  }))
371
390
  ]), 1040, ["value"])
372
391
  ], 2));
373
392
  }
374
393
  });
375
- const Ve = /* @__PURE__ */ J(Se, [["__scopeId", "data-v-742f436a"]]);
394
+ const Re = /* @__PURE__ */ Z(Ee, [["__scopeId", "data-v-742f436a"]]);
376
395
  export {
377
- p as D,
378
- n as a,
379
- ve as b,
380
- Ve as c
396
+ Ke as B,
397
+ c as D,
398
+ s as a,
399
+ Ce as b,
400
+ Re as c
381
401
  };
382
- //# sourceMappingURL=dropdown-default-textbox.91ad6585.js.map
402
+ //# sourceMappingURL=dropdown-default-textbox.e0ca5afb.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"dropdown-default-textbox.e0ca5afb.js","sources":["../../../vue2/src/directives/click-outside/directive.ts","../../../vue2/src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.types.ts","../../../vue2/src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue","../../../vue2/src/components/dropdown/components/dropdown-default-textbox/dropdown-default-textbox.vue"],"sourcesContent":["import { onClickOutside } from './on-click-outside';\nimport type { DirectiveHook } from 'vue';\n\ntype Element = HTMLElement & { __onClickOutside_stop?: () => void };\n\n/**\n * Attaches the click outside listener to target element to register clicks outside the element.\n * @param targetElement Element to attach listener to.\n * @param binding\n */\nconst bindDirective: DirectiveHook<Element> = (targetElement, binding) => {\n const capture = !binding.modifiers.bubble;\n if (typeof binding.value === 'function') {\n // eslint-disable-next-line no-underscore-dangle, no-param-reassign\n targetElement.__onClickOutside_stop = onClickOutside(targetElement, binding.value, { capture });\n } else {\n const [handler, options] = binding.value;\n // eslint-disable-next-line no-underscore-dangle, no-param-reassign\n targetElement.__onClickOutside_stop = onClickOutside(targetElement, handler, { capture, ...options });\n }\n};\n\n/**\n * Removes click outside listener from the target element.\n * @param targetElement Element to detach listener from.\n */\nconst unbindDirective: DirectiveHook<Element> = targetElement => {\n // eslint-disable-next-line no-underscore-dangle\n targetElement.__onClickOutside_stop();\n};\n\nexport const BentoClickOutsideDirective = {\n // Vue 2 Directive hooks\n inserted: bindDirective,\n unbind: unbindDirective,\n\n // Vue 3 Directive hooks\n beforeMount: bindDirective,\n unmounted: unbindDirective,\n};\n","import { PropType } from 'vue';\nimport { Booleanish } from '@/types';\n\n// TODO: Change this to script setup + Typescript interface\nexport const DropdownBaseTextboxProps = {\n /**\n * The number of additional items that have been selected in the dropdown.\n */\n additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 },\n\n /**\n * Sets the possibility to type into the textbox\n */\n dynamicFiltering: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.\n */\n ariaControls: {\n type: String,\n required: true,\n },\n\n /**\n * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.\n */\n ariaExpanded: {\n type: [String, Boolean] as PropType<Booleanish>,\n required: true,\n },\n\n /**\n * Corresponds to the label's id that labels the textbox element.\n */\n ariaLabelledby: {\n type: String,\n default: null,\n },\n\n /**\n * Disables any textbox functionality\n */\n disabled: { type: Boolean, default: false },\n\n /**\n * Marks the textbox as invalid, rendering an error state\n */\n isInvalid: { type: Boolean, default: false },\n\n /**\n * Selected option's label\n */\n displayValue: { type: String, default: null },\n\n /**\n * Indicates if the dropdown is open so that\n * the respective event can be emitted\n */\n open: { type: Boolean, default: false },\n\n /**\n * The input value\n */\n value: { type: String, default: '' },\n\n /**\n * Custom debounce time. Default: 300\n */\n debounceTime: { type: Number, default: 300 },\n};\n\nexport enum DropdownBaseTextboxState {\n DISABLED = 'disabled',\n READONLY = 'readonly',\n HAS_ITEMS = 'has-items',\n OPENED = 'opened',\n ERROR = 'error',\n}\n\nexport enum DropdownBaseTextboxEvent {\n OPEN = 'dropdown-base-open',\n KEYDOWN = 'dropdown-base-keydown',\n CLOSE = 'dropdown-base-close',\n INPUT = 'dropdown-base-input',\n CLEAR = 'dropdown-base-clear',\n}\n\nexport default DropdownBaseTextboxProps;\n","<template>\n <div\n :class=\"$attrs.class\"\n data-testid=\"textbox-wrapper\"\n @click=\"onToggleDropdown\"\n @keydown.escape=\"onCloseDropdown\"\n >\n <bento-typography\n class=\"b-dropdown-base-textbox\"\n :class=\"conditionalClasses\"\n el=\"div\"\n data-testid=\"base-textbox\"\n >\n <input\n v-if=\"shouldShowInput\"\n v-bind=\"ariaAttributes\"\n :id=\"textboxId\"\n ref=\"textbox\"\n class=\"b-dropdown-base-textbox__input\"\n role=\"combobox\"\n type=\"text\"\n aria-autocomplete=\"list\"\n :value=\"open ? value : displayValue\"\n :disabled=\"disabled ? true : null\"\n :readonly=\"readonly\"\n @keydown=\"$emit(DropdownBaseTextboxEvent.KEYDOWN, $event)\"\n @keydown.enter=\"onToggleDropdown\"\n @input=\"onInputEvent\"\n />\n <div\n v-else\n :id=\"textboxId\"\n v-bind=\"ariaAttributes\"\n ref=\"textbox\"\n class=\"b-dropdown-base-textbox__input\"\n :class=\"comboboxConditionalClasses\"\n role=\"combobox\"\n :tabindex=\"0\"\n >\n <slot v-if=\"shouldShowSingleSelectSlot\" v-bind=\"selectedValueItem\">\n {{ displayValue }}\n </slot>\n <template v-else-if=\"shouldShowMultipleSlot\">\n <div class=\"b-dropdown-base-textbox__input-multiple-selected\">\n <div v-for=\"singleItem of selectedValueItems\" :key=\"singleItem.value\">\n <div class=\"b-dropdown-base-textbox__input-selected-element\">\n <slot v-bind=\"singleItem\">\n {{ displayValue }}\n </slot>\n </div>\n </div>\n </div>\n </template>\n <template v-else>{{ displayValue }}</template>\n </div>\n <span v-if=\"additionalItemsSelected\" class=\"b-dropdown-base-textbox__additional-items\">\n {{ additionalItemsSelected }}\n </span>\n <span v-if=\"hasSlot('icon') && !isFiltering\" class=\"b-dropdown-base-textbox__icon\" aria-hidden=\"true\">\n <slot name=\"icon\"></slot>\n </span>\n <span\n v-if=\"isFiltering\"\n class=\"b-dropdown-base-textbox__clear-search\"\n tabindex=\"0\"\n data-testid=\"clear-search-button\"\n @click.stop=\"onClearSearch\"\n @keydown.enter.stop=\"onClearSearch\"\n @keyup.space=\"onClearSearch\"\n >\n <cross-circle-fill-icon :svg-title=\"'clearSearch'\" />\n </span>\n </bento-typography>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, defineComponent, nextTick, PropType, ref, useAttrs, useSlots, watch } from 'vue';\n import { generateUid } from '@/utils/ts/unique-id';\n import { useHasSlot } from '@/composables';\n import { BentoTypography } from '@/components/typography';\n import { debounce } from '@/utils/ts/debounce';\n import { BentoListboxOptionItem, Booleanish } from '@/types';\n import type { HTMLAttributes } from 'vue/types/jsx';\n import { DropdownBaseTextboxEvent, DropdownBaseTextboxState } from './dropdown-base-textbox.types';\n import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n\n const attrs = useAttrs();\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n const props = defineProps({\n /**\n * The number of additional items that have been selected in the dropdown.\n */\n additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 },\n\n /**\n * If the combobox DOM element should be an `input` element.\n */\n alwaysComboboxIsInput: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.\n */\n ariaControls: { type: String, required: true },\n\n /**\n * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.\n */\n ariaExpanded: {\n type: [String, Boolean] as PropType<Booleanish>,\n required: true,\n },\n\n /**\n * If no label element is used then the aria-label is be set should be set.\n */\n ariaLabel: { type: String, default: null },\n\n /**\n * Corresponds to the label's id that labels the textbox element.\n */\n ariaLabelledby: { type: String, default: null },\n\n /**\n * Custom debounce time for the user type event.\n */\n debounceTime: { type: Number, default: 300 },\n\n /**\n * Disables any textbox functionality\n */\n disabled: { type: Boolean, default: false },\n\n /**\n * Selected option's label\n */\n displayValue: { type: String, default: null },\n\n /**\n * Sets the possibility to type into the textbox.\n */\n dynamicFiltering: { type: Boolean, default: false },\n\n /**\n * Marks the textbox as invalid, rendering an error state\n */\n isInvalid: { type: Boolean, default: false },\n\n /*\n * If enabled, the user will be able to select multiple items.\n */\n multiple: { type: Boolean, default: false },\n\n /**\n * Indicates if the dropdown is open so that\n * the respective event can be emitted\n */\n open: { type: Boolean, default: false },\n\n /**\n * Sets the dropdown to readonly state\n */\n readonly: { type: Boolean, default: false },\n\n /**\n * The input value\n */\n value: { type: String, default: '' },\n\n /**\n * The selected value's list box item.\n */\n selectedValueItem: {\n type: [Object, Array] as PropType<BentoListboxOptionItem | BentoListboxOptionItem[]>,\n default: undefined,\n },\n\n /**\n * Toggles whether to use the slot content select items shown in the textbox in multiple mode.\n */\n showSlotContentInMultiple: { type: Boolean, default: false },\n });\n\n const emit = defineEmits<{\n /**\n * Emitted when the \"clear\" button is clicked\n */\n (e: DropdownBaseTextboxEvent.CLEAR);\n\n /**\n * Emitted on click, space, enter and esc user events. It will close the dropdown.\n */\n (e: DropdownBaseTextboxEvent.CLOSE);\n\n /**\n * Emitted when `dynamicFiltering` is enabled and a search input is entered\n */\n (e: DropdownBaseTextboxEvent.INPUT, searchValue: string);\n\n /**\n * Emitted when any key is pressed and the focus is on the input field\n */\n (e: DropdownBaseTextboxEvent.KEYDOWN, event: KeyboardEvent);\n\n /**\n * Emitted on click, space and enter user events. It will open the dropdown.\n */\n (e: DropdownBaseTextboxEvent.OPEN);\n }>();\n\n const textbox = ref(null);\n const textboxId = generateUid('textbox');\n\n const conditionalClasses = computed(() => ({\n [`b-dropdown-base-textbox--${DropdownBaseTextboxState.DISABLED}`]: props.disabled,\n [`b-dropdown-base-textbox--${DropdownBaseTextboxState.READONLY}`]: props.readonly,\n [`b-dropdown-base-textbox--${DropdownBaseTextboxState.HAS_ITEMS}`]: !!props.additionalItemsSelected,\n }));\n\n const comboboxConditionalClasses = computed(() => ({\n [`b-dropdown-base-textbox__input--dynamic-filtering`]: props.dynamicFiltering,\n }));\n\n const isFiltering = computed(() => props.dynamicFiltering && !!props.value && props.open);\n\n const ariaAttributes = computed(\n () =>\n ({\n 'aria-haspopup': 'listbox',\n 'aria-controls': props.ariaControls,\n 'aria-describedby': attrs['aria-describedby']?.toString() as string,\n 'aria-expanded': props.ariaExpanded ? 'true' : 'false',\n 'aria-labelledby': props.ariaLabelledby,\n 'aria-label': props.ariaLabelledby ? null : props.ariaLabel,\n 'aria-invalid': props.isInvalid,\n 'aria-disabled': props.disabled ? true : null,\n } as HTMLAttributes)\n );\n // Cast selectedValueItem if it is an array of selected items\n const selectedValueItems = computed(() =>\n props.multiple ? (props.selectedValueItem as BentoListboxOptionItem[]) : []\n );\n\n const shouldShowInput = computed(() => props.dynamicFiltering && (props.open || props.alwaysComboboxIsInput));\n const shouldShowSingleSelectSlot = computed(() => props.selectedValueItem && !props.multiple);\n const shouldShowMultipleSlot = computed(\n () =>\n props.multiple &&\n props.selectedValueItem &&\n selectedValueItems.value.length > 0 &&\n props.showSlotContentInMultiple\n );\n\n watch(\n () => shouldShowInput.value,\n () => {\n if (shouldShowInput.value && !props.alwaysComboboxIsInput) {\n nextTick(() => {\n textbox.value.focus();\n });\n }\n }\n );\n\n const onOpenDropdown = () => {\n if (!props.disabled && !props.readonly) {\n textbox.value.focus();\n emit(DropdownBaseTextboxEvent.OPEN);\n }\n };\n\n const onCloseDropdown = () => {\n if (props.open) {\n textbox.value.focus();\n emit(DropdownBaseTextboxEvent.CLOSE);\n }\n };\n\n const onToggleDropdown = (event: Event) => {\n const isDynamicFilteringInputClickEvent = props.open && (event.target as HTMLDivElement).tagName === 'INPUT';\n if (isDynamicFilteringInputClickEvent) {\n /**\n * When there's a click even on the input during filtering\n * and the popover is open, do not toggle the popover.\n * Allow for click events inside the input field\n */\n return null;\n }\n\n return props.open ? onCloseDropdown() : onOpenDropdown();\n };\n\n const onClearSearch = () => {\n emit(DropdownBaseTextboxEvent.CLEAR);\n emit(DropdownBaseTextboxEvent.INPUT, '');\n textbox.value.focus();\n };\n const onInputEvent = debounce<(event: Event) => void>((event: Event) => {\n if (!props.readonly && !props.disabled) {\n emit(DropdownBaseTextboxEvent.INPUT, (event.target as HTMLInputElement).value);\n } else {\n event.preventDefault();\n event.stopPropagation();\n }\n }, props.debounceTime);\n</script>\n\n<script lang=\"ts\">\n /**\n * Only for internal use, implements the logic of the textbox element to be implemented in the combobox.\n */\n export default defineComponent({\n name: 'dropdown-base-textbox',\n inheritAttrs: false,\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-base-textbox.scss\" />\n","<template>\n <div class=\"b-dropdown-default-textbox\" :class=\"conditionalClasses\" data-testid=\"default-textbox\">\n <dropdown-base-textbox\n v-bind=\"{ ...$attrs, ...$props }\"\n class=\"b-dropdown-default-textbox__textbox\"\n :value=\"value\"\n v-on=\"listeners\"\n >\n <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n <slot :name=\"innerSlot\" v-bind=\"scope\" />\n </template>\n <template #icon>\n <div class=\"b-dropdown-default-textbox__chevron\">\n <chevron-up-icon v-show=\"isDropdownOpen\" svg-title=\"opened\" />\n <chevron-down-icon v-show=\"!isDropdownOpen\" svg-title=\"closed\" />\n </div>\n </template>\n </dropdown-base-textbox>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\n import { computed, defineComponent, PropType, useSlots } from 'vue';\n import DropdownBaseTextbox from '@/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue';\n import { BentoListboxOptionItem, Booleanish } from '@/types';\n import { stopEventPropagation } from '@/utils/ts/events';\n import {\n DropdownBaseTextboxEvent,\n DropdownBaseTextboxState,\n } from '../dropdown-base-textbox/dropdown-base-textbox.types';\n import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n const emit = defineEmits<{\n /**\n * Emitted on clearing the input.\n */\n (e: 'clear');\n\n /**\n * Emitted on click, space and enter user events. It will open the dropdown.\n */\n (e: 'close');\n\n /**\n * Emitted on input event.\n */\n (e: 'input', newInput: string);\n\n /**\n * Emitted on keydown event.\n */\n (e: 'keydown', keydownEvent: KeyboardEvent);\n\n /**\n * Emitted on click, space, enter and esc user events. It will close the dropdown.\n */\n (e: 'open');\n }>();\n\n const slots = useSlots();\n\n const props = defineProps({\n /**\n * The number of additional items that have been selected in the dropdown.\n */\n additionalItemsSelected: { type: [Number, String] as PropType<number | string>, default: 0 },\n\n /**\n * Sets the aria-controls attribute on the textbox. This should correspond to the popover's id that the textbox triggers.\n */\n ariaControls: {\n type: String,\n required: true,\n },\n\n /**\n * Indicates whether the content the textbox triggers is visible or not. Needs to be set accordingly when the textbox is used and changed every time the popover is shown/hidden.\n */\n ariaExpanded: {\n type: [String, Boolean] as PropType<Booleanish>,\n required: true,\n },\n\n /**\n * If no label element is used then the aria-label is be set should be set.\n */\n ariaLabel: {\n type: String,\n default: null,\n },\n\n /**\n * Corresponds to the label's id that labels the textbox element.\n */\n ariaLabelledby: {\n type: String,\n default: null,\n },\n\n /**\n * Renders the dropdown with a condensed style.\n */\n condensed: { type: Boolean, default: false },\n\n /**\n * Custom debounce time. Default: 300\n */\n debounceTime: { type: Number, default: 300 },\n\n /**\n * Disables any textbox functionality\n */\n disabled: { type: Boolean, default: false },\n\n /**\n * Selected option's label\n */\n displayValue: { type: String, default: null },\n\n /**\n * Sets the possibility to type into the textbox\n */\n dynamicFiltering: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Marks the textbox as invalid, rendering an error state\n */\n isInvalid: { type: Boolean, default: false },\n\n /**\n * Indicates if the dropdown is open so that\n * the respective event can be emitted\n */\n open: { type: Boolean, default: false },\n\n /**\n * Sets the dropdown to readonly state\n */\n readonly: { type: Boolean, default: false },\n\n /**\n * The selected value's list box item.\n */\n selectedValueItem: {\n type: [Object, Array] as PropType<BentoListboxOptionItem | BentoListboxOptionItem[]>,\n default: undefined,\n },\n\n /**\n * Toggles whether to use the slot content select items shown in the textbox in multiple mode.\n */\n showSlotContentInMultiple: { type: Boolean, default: false },\n\n /**\n * The input value\n */\n value: { type: String, default: '' },\n\n /*\n * If enabled, the user will be able to select multiple items.\n */\n multiple: { type: Boolean, default: false },\n });\n\n const conditionalClasses = computed(() => ({\n [`b-dropdown-default-textbox--${DropdownBaseTextboxState.ERROR}`]:\n !props.disabled && !props.readonly && props.isInvalid,\n [`b-dropdown-default-textbox--${DropdownBaseTextboxState.DISABLED}`]: props.disabled,\n [`b-dropdown-default-textbox--${DropdownBaseTextboxState.READONLY}`]: props.readonly,\n [`b-dropdown-default-textbox--${DropdownBaseTextboxState.OPENED}`]: props.open,\n 'b-dropdown-default-textbox--condensed': props.condensed,\n }));\n\n const isDropdownOpen = computed(() => props.open && !props.disabled && !props.readonly);\n\n const onInput = (newInput: string) => {\n emit('input', newInput);\n };\n const onKeyDown = (e: KeyboardEvent) => {\n emit('keydown', e);\n };\n const openDropdown = (e: Event) => {\n stopEventPropagation(e);\n emit('open');\n };\n const closeDropdown = (e: Event) => {\n stopEventPropagation(e);\n emit('close');\n };\n const clearValue = (e: Event) => {\n stopEventPropagation(e);\n emit('clear');\n };\n\n const listeners = {\n [DropdownBaseTextboxEvent.INPUT]: onInput,\n [DropdownBaseTextboxEvent.OPEN]: openDropdown,\n [DropdownBaseTextboxEvent.CLOSE]: closeDropdown,\n [DropdownBaseTextboxEvent.CLEAR]: clearValue,\n [DropdownBaseTextboxEvent.KEYDOWN]: onKeyDown,\n };\n</script>\n\n<script lang=\"ts\">\n /**\n * For internal use only, textbox component used in the dropdown component.\n */\n export default defineComponent({\n name: 'dropdown-default-textbox',\n inheritAttrs: false,\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-default-textbox.scss\" />\n"],"names":["bindDirective","targetElement","binding","capture","onClickOutside","handler","options","unbindDirective","BentoClickOutsideDirective","DropdownBaseTextboxState","DropdownBaseTextboxState2","DropdownBaseTextboxEvent","DropdownBaseTextboxEvent2","__default__$1","defineComponent","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","textbox","ref","textboxId","generateUid","conditionalClasses","computed","props","comboboxConditionalClasses","isFiltering","ariaAttributes","_a","selectedValueItems","shouldShowInput","shouldShowSingleSelectSlot","shouldShowMultipleSlot","watch","nextTick","onOpenDropdown","emit","onCloseDropdown","onToggleDropdown","event","onClearSearch","onInputEvent","debounce","__default__","isDropdownOpen","onInput","newInput","onKeyDown","e","openDropdown","stopEventPropagation","closeDropdown","clearValue","listeners"],"mappings":"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"}
@@ -1,18 +1,17 @@
1
1
  import { ref as w, watch as Se, computed as f, defineComponent as z, useSlots as xe, toRefs as we, openBlock as g, createBlock as P, resolveDynamicComponent as Le, unref as a, mergeProps as A, withCtx as F, createElementVNode as Q, withKeys as ze, createVNode as J, toHandlers as Z, createSlots as ae, renderList as oe, renderSlot as Y, normalizeProps as ne, guardReactiveProps as se, createElementBlock as M, toDisplayString as ue, createCommentVNode as K, normalizeClass as ie, withDirectives as G, vShow as ve, nextTick as T, useAttrs as We, toRef as _, inject as je, createTextVNode as Ue } from "vue";
2
- import { d as me, B as qe } from "./index.6e7e9ac6.js";
3
- import { D as le, a as ye, b as He, c as Je } from "./dropdown-default-textbox.91ad6585.js";
2
+ import { d as me, B as qe } from "./index.99c63a74.js";
3
+ import { D as le, a as ye, b as He, B as Je, c as Ye } from "./dropdown-default-textbox.e0ca5afb.js";
4
4
  import { _ as q } from "./_plugin-vue_export-helper.dad06003.js";
5
5
  import { g as U } from "./unique-id.a2a2b458.js";
6
- import { u as Ye } from "./aria-label.ac9651a5.js";
6
+ import { u as Ze } from "./aria-label.ac9651a5.js";
7
7
  import { u as ce } from "./i18n.f7e6533e.js";
8
- import { u as Ze } from "./use-form-layout-loading.d03e5d48.js";
9
- import { B as Ge } from "./directive.0408e565.js";
8
+ import { u as Ge } from "./use-form-layout-loading.d03e5d48.js";
10
9
  import { B as R, a as Qe } from "./keyboard-navigation.ca47dfa8.js";
11
- import { b as c, a as re, B as de, u as Xe } from "./listbox.8ce17729.js";
10
+ import { b as c, a as re, B as de, u as Xe } from "./listbox.eb436d06.js";
12
11
  import { u as Ve } from "./use-has-slot.4d98bf29.js";
13
- import { F as et, E as tt } from "./error-message.498811e4.js";
14
- import { a as be } from "./index.e2793c20.js";
15
- import { a as lt } from "./index.fb0e9e1a.js";
12
+ import { F as et, E as tt } from "./error-message.56247bcc.js";
13
+ import { a as be } from "./index.9aaed799.js";
14
+ import { a as lt } from "./index.08d813e2.js";
16
15
  import "../assets/dropdown.css";
17
16
  var D = /* @__PURE__ */ ((e) => (e.DEFAULT = "DropdownInputDefault", e.SMALL = "DropdownInputSmall", e))(D || {});
18
17
  const fe = {
@@ -540,7 +539,7 @@ const Oe = {
540
539
  i18n: { messages: Oe },
541
540
  name: "b-dropdown",
542
541
  components: {
543
- DropdownInputDefault: Je,
542
+ DropdownInputDefault: Ye,
544
543
  DropdownInputSmall: St
545
544
  }
546
545
  }), It = /* @__PURE__ */ z({
@@ -703,7 +702,7 @@ const Oe = {
703
702
  emits: ["input", "show-more"],
704
703
  setup(e, { emit: o }) {
705
704
  var pe;
706
- const t = e, l = We(), n = xe(), s = Ve(n), { t: r } = ce({ messages: Oe }), d = w(null), u = w(null), y = w(null), v = w(!1), h = U("bento-dropdown-options-container"), L = U("dropdown-label"), $ = U("dropdown-description"), O = U("dropdown-error"), { isReadOnly: S } = Ze(_(t, "readonly")), E = w(l["aria-label"]), { ariaLabel: N } = we(t), i = Ye({
705
+ const t = e, l = We(), n = xe(), s = Ve(n), { t: r } = ce({ messages: Oe }), d = w(null), u = w(null), y = w(null), v = w(!1), h = U("bento-dropdown-options-container"), L = U("dropdown-label"), $ = U("dropdown-description"), O = U("dropdown-error"), { isReadOnly: S } = Ge(_(t, "readonly")), E = w(l["aria-label"]), { ariaLabel: N } = we(t), i = Ze({
707
706
  ariaLabel: E.value,
708
707
  // TODO: take this line away when the aria-label props is removed
709
708
  label: N,
@@ -888,16 +887,16 @@ const Oe = {
888
887
  _: 3
889
888
  }, 8, ["id", "class"])) : K("", !0)
890
889
  ], 2)), [
891
- [a(Ge), Me]
890
+ [a(Je), Me]
892
891
  ]);
893
892
  };
894
893
  }
895
894
  });
896
- const Ht = /* @__PURE__ */ q(It, [["__scopeId", "data-v-c9ecdfc9"]]);
895
+ const qt = /* @__PURE__ */ q(It, [["__scopeId", "data-v-c9ecdfc9"]]);
897
896
  export {
898
- Ht as B,
897
+ qt as B,
899
898
  Dt as I,
900
899
  D as a,
901
900
  Ct as u
902
901
  };
903
- //# sourceMappingURL=dropdown.6c010045.js.map
902
+ //# sourceMappingURL=dropdown.257691c0.js.map