@adyen/bento-vue2 1.44.0 → 1.45.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 (275) hide show
  1. package/dist/@types/index.d.ts +17 -90
  2. package/dist/accordion.js +1 -1
  3. package/dist/action-bar.js +1 -1
  4. package/dist/alert.js +1 -1
  5. package/dist/assets/accordion-item.css +1 -1
  6. package/dist/assets/action-bar.css +1 -1
  7. package/dist/assets/base-button.css +1 -1
  8. package/dist/assets/base-modal.css +1 -1
  9. package/dist/assets/button.css +1 -1
  10. package/dist/assets/card.css +1 -1
  11. package/dist/assets/checkbox.css +1 -1
  12. package/dist/assets/data-grid.css +1 -1
  13. package/dist/assets/dialog-page.css +1 -1
  14. package/dist/assets/dropdown-default-textbox.css +1 -1
  15. package/dist/assets/file-uploader.css +1 -1
  16. package/dist/assets/focus-trap.css +1 -1
  17. package/dist/assets/header.css +1 -1
  18. package/dist/assets/info-icon-with-popover.css +1 -0
  19. package/dist/assets/input-field.css +1 -1
  20. package/dist/assets/inspector.css +1 -1
  21. package/dist/assets/layout-row.css +1 -1
  22. package/dist/assets/link.css +1 -1
  23. package/dist/assets/menu.css +1 -1
  24. package/dist/assets/modal-fullscreen.css +1 -1
  25. package/dist/assets/popover.css +1 -1
  26. package/dist/assets/popper-container.css +1 -1
  27. package/dist/assets/radio-input.css +1 -1
  28. package/dist/assets/sidepanel.css +1 -1
  29. package/dist/assets/tabs.css +1 -1
  30. package/dist/assets/use-cached-selected-values.css +1 -1
  31. package/dist/avatar.js +1 -1
  32. package/dist/button.js +3 -3
  33. package/dist/card.js +1 -1
  34. package/dist/checkbox.js +2 -2
  35. package/dist/chunks/{accordion-item.BjXzREaK.js → accordion-item.CzKttO4w.js} +5 -5
  36. package/dist/chunks/{accordion-item.BjXzREaK.js.map → accordion-item.CzKttO4w.js.map} +1 -1
  37. package/dist/chunks/{action-bar.Dx12xlEW.js → action-bar.BXemSuq4.js} +7 -7
  38. package/dist/chunks/{action-bar.Dx12xlEW.js.map → action-bar.BXemSuq4.js.map} +1 -1
  39. package/dist/chunks/{alert.D2Z_aiFC.js → alert.CAIp-87f.js} +3 -3
  40. package/dist/chunks/{alert.D2Z_aiFC.js.map → alert.CAIp-87f.js.map} +1 -1
  41. package/dist/chunks/{avatar.DXzyWKsI.js → avatar.BgwjpLQO.js} +2 -2
  42. package/dist/chunks/{avatar.DXzyWKsI.js.map → avatar.BgwjpLQO.js.map} +1 -1
  43. package/dist/chunks/{base-button.4UYC3kp2.js → base-button.-gx_u8Bd.js} +3 -3
  44. package/dist/chunks/base-button.-gx_u8Bd.js.map +1 -0
  45. package/dist/chunks/{base-modal.BrqNR-ah.js → base-modal.4JSNBM4T.js} +12 -12
  46. package/dist/chunks/{base-modal.BrqNR-ah.js.map → base-modal.4JSNBM4T.js.map} +1 -1
  47. package/dist/chunks/{button-actions-with-menu.ptKgeQEb.js → button-actions-with-menu.ieopdfI7.js} +4 -4
  48. package/dist/chunks/{button-actions-with-menu.ptKgeQEb.js.map → button-actions-with-menu.ieopdfI7.js.map} +1 -1
  49. package/dist/chunks/{button-actions.BIQ3qA8q.js → button-actions.CtFB6iRj.js} +3 -3
  50. package/dist/chunks/{button-actions.BIQ3qA8q.js.map → button-actions.CtFB6iRj.js.map} +1 -1
  51. package/dist/chunks/{button.CufUNBkv.js → button.BX6ZJxF7.js} +13 -13
  52. package/dist/chunks/button.BX6ZJxF7.js.map +1 -0
  53. package/dist/chunks/{calendar.B9WZ8ub3.js → calendar.BouORZfb.js} +9 -9
  54. package/dist/chunks/{calendar.B9WZ8ub3.js.map → calendar.BouORZfb.js.map} +1 -1
  55. package/dist/chunks/{card.D9g7fZDX.js → card.BabmUkTG.js} +6 -6
  56. package/dist/chunks/{card.D9g7fZDX.js.map → card.BabmUkTG.js.map} +1 -1
  57. package/dist/chunks/{checkbox-group.Bcqac3y8.js → checkbox-group.DbLznnsa.js} +7 -7
  58. package/dist/chunks/{checkbox-group.Bcqac3y8.js.map → checkbox-group.DbLznnsa.js.map} +1 -1
  59. package/dist/chunks/{checkbox.B1qjI4R_.js → checkbox.fhQLs-NN.js} +6 -6
  60. package/dist/chunks/checkbox.fhQLs-NN.js.map +1 -0
  61. package/dist/chunks/{chevron-left.CtnrsqUy.js → chevron-left.PIu6yPqe.js} +3 -3
  62. package/dist/chunks/{chevron-left.CtnrsqUy.js.map → chevron-left.PIu6yPqe.js.map} +1 -1
  63. package/dist/chunks/{chevron-up.B2uWhZf7.js → chevron-up.DVfo78kV.js} +3 -3
  64. package/dist/chunks/{chevron-up.B2uWhZf7.js.map → chevron-up.DVfo78kV.js.map} +1 -1
  65. package/dist/chunks/{code-snippet.rmKiWrIv.js → code-snippet.5iJcUZSo.js} +20 -20
  66. package/dist/chunks/{code-snippet.rmKiWrIv.js.map → code-snippet.5iJcUZSo.js.map} +1 -1
  67. package/dist/chunks/{codemirror.BlV6WO5w.js → codemirror.CXFEqvAi.js} +2047 -2053
  68. package/dist/chunks/{codemirror.BlV6WO5w.js.map → codemirror.CXFEqvAi.js.map} +1 -1
  69. package/dist/chunks/{controls-group.J8shO_JL.js → controls-group.CnXzOQkX.js} +3 -3
  70. package/dist/chunks/{controls-group.J8shO_JL.js.map → controls-group.CnXzOQkX.js.map} +1 -1
  71. package/dist/chunks/{copy.DgzxvExj.js → copy.DN0tClPm.js} +4 -4
  72. package/dist/chunks/{copy.DgzxvExj.js.map → copy.DN0tClPm.js.map} +1 -1
  73. package/dist/chunks/{country.CM5oZOyZ.js → country.Bft91V1L.js} +3 -3
  74. package/dist/chunks/{country.CM5oZOyZ.js.map → country.Bft91V1L.js.map} +1 -1
  75. package/dist/chunks/{country.types.Br0AjxGy.js → country.types.pilf5B3F.js} +483 -480
  76. package/dist/chunks/{country.types.Br0AjxGy.js.map → country.types.pilf5B3F.js.map} +1 -1
  77. package/dist/chunks/{currency.P7Psn_SK.js → currency.BmI4Sqy5.js} +2 -2
  78. package/dist/chunks/{currency.P7Psn_SK.js.map → currency.BmI4Sqy5.js.map} +1 -1
  79. package/dist/chunks/{dashboard-section._KVy37B0.js → dashboard-section.DYXZhtop.js} +5 -5
  80. package/dist/chunks/{dashboard-section._KVy37B0.js.map → dashboard-section.DYXZhtop.js.map} +1 -1
  81. package/dist/chunks/{dashed-underline.DX5QlK14.js → dashed-underline.BvSZS1-m.js} +4 -4
  82. package/dist/chunks/{dashed-underline.DX5QlK14.js.map → dashed-underline.BvSZS1-m.js.map} +1 -1
  83. package/dist/chunks/{data-grid-template.BgTUIoak.js → data-grid-template.Du92TEFY.js} +4 -4
  84. package/dist/chunks/{data-grid-template.BgTUIoak.js.map → data-grid-template.Du92TEFY.js.map} +1 -1
  85. package/dist/chunks/{data-grid.sAbzCVND.js → data-grid.Kwtf1DMq.js} +46 -46
  86. package/dist/chunks/{data-grid.sAbzCVND.js.map → data-grid.Kwtf1DMq.js.map} +1 -1
  87. package/dist/chunks/{date-picker.DrSWxADA.js → date-picker.B7mTNghB.js} +11 -11
  88. package/dist/chunks/{date-picker.DrSWxADA.js.map → date-picker.B7mTNghB.js.map} +1 -1
  89. package/dist/chunks/{date-range-picker.CFIOD59O.js → date-range-picker.DPLri9D-.js} +241 -241
  90. package/dist/chunks/{date-range-picker.CFIOD59O.js.map → date-range-picker.DPLri9D-.js.map} +1 -1
  91. package/dist/chunks/{date.BQ29-2L1.js → date.1zs9CRhw.js} +2 -4
  92. package/dist/chunks/{date.BQ29-2L1.js.map → date.1zs9CRhw.js.map} +1 -1
  93. package/dist/chunks/{dialog-page.CplkzZGZ.js → dialog-page.DcJ7LaOE.js} +33 -32
  94. package/dist/chunks/dialog-page.DcJ7LaOE.js.map +1 -0
  95. package/dist/chunks/{dropdown-default-textbox.ZAFh7KqG.js → dropdown-default-textbox.DBoSso4J.js} +88 -76
  96. package/dist/chunks/dropdown-default-textbox.DBoSso4J.js.map +1 -0
  97. package/dist/chunks/{dropdown-tag.Ntdp7P7W.js → dropdown-tag.XIlES6IT.js} +8 -8
  98. package/dist/chunks/{dropdown-tag.Ntdp7P7W.js.map → dropdown-tag.XIlES6IT.js.map} +1 -1
  99. package/dist/chunks/{dropdown.DC9un4VJ.js → dropdown.BqsoncJr.js} +60 -60
  100. package/dist/chunks/dropdown.BqsoncJr.js.map +1 -0
  101. package/dist/chunks/{empty-state.B8ZeRgDi.js → empty-state.1TyzB5ju.js} +5 -5
  102. package/dist/chunks/{empty-state.B8ZeRgDi.js.map → empty-state.1TyzB5ju.js.map} +1 -1
  103. package/dist/chunks/{error-message.B7uoqQpq.js → error-message.Ccc1sTTp.js} +3 -3
  104. package/dist/chunks/{error-message.B7uoqQpq.js.map → error-message.Ccc1sTTp.js.map} +1 -1
  105. package/dist/chunks/{es6.C-HLzYPA.js → es6.jIyAPBgt.js} +4 -4
  106. package/dist/chunks/{es6.C-HLzYPA.js.map → es6.jIyAPBgt.js.map} +1 -1
  107. package/dist/chunks/{file-uploader.ItCr8Ezn.js → file-uploader.C6kcnhqp.js} +9 -9
  108. package/dist/chunks/{file-uploader.ItCr8Ezn.js.map → file-uploader.C6kcnhqp.js.map} +1 -1
  109. package/dist/chunks/{filter-bar.Dowrph-Z.js → filter-bar.DT_-lVmf.js} +48 -48
  110. package/dist/chunks/{filter-bar.Dowrph-Z.js.map → filter-bar.DT_-lVmf.js.map} +1 -1
  111. package/dist/chunks/{fixed-scroller.B880PL1J.js → fixed-scroller.IPM3AzHS.js} +4 -4
  112. package/dist/chunks/{fixed-scroller.B880PL1J.js.map → fixed-scroller.IPM3AzHS.js.map} +1 -1
  113. package/dist/chunks/focus-trap.CGypVwG6.js +495 -0
  114. package/dist/chunks/focus-trap.CGypVwG6.js.map +1 -0
  115. package/dist/chunks/{footer-actions.B3GJ1wNP.js → footer-actions.D0uH9JWq.js} +4 -4
  116. package/dist/chunks/{footer-actions.B3GJ1wNP.js.map → footer-actions.D0uH9JWq.js.map} +1 -1
  117. package/dist/chunks/{form-layout-title.BarHgyjC.js → form-layout-title.DN0jonFa.js} +3 -3
  118. package/dist/chunks/{form-layout-title.BarHgyjC.js.map → form-layout-title.DN0jonFa.js.map} +1 -1
  119. package/dist/chunks/{generate-uid.D-HFI38h.js → generate-uid.NJ8tVoha.js} +2 -2
  120. package/dist/chunks/{generate-uid.D-HFI38h.js.map → generate-uid.NJ8tVoha.js.map} +1 -1
  121. package/dist/chunks/header.BvZxtIOD.js +205 -0
  122. package/dist/chunks/header.BvZxtIOD.js.map +1 -0
  123. package/dist/chunks/{index.Gcw_BUVh.js → index.D8ivUe7P.js} +6 -5
  124. package/dist/chunks/{index.Gcw_BUVh.js.map → index.D8ivUe7P.js.map} +1 -1
  125. package/dist/chunks/info-icon-with-popover.DEjsASNU.js +71 -0
  126. package/dist/chunks/info-icon-with-popover.DEjsASNU.js.map +1 -0
  127. package/dist/chunks/{info-icon.p-28zHUJ.js → info-icon.0d0GzDe2.js} +3 -3
  128. package/dist/chunks/{info-icon.p-28zHUJ.js.map → info-icon.0d0GzDe2.js.map} +1 -1
  129. package/dist/chunks/{input-field-password.CgxF9jhq.js → input-field-password.HRDEb0jL.js} +10 -10
  130. package/dist/chunks/{input-field-password.CgxF9jhq.js.map → input-field-password.HRDEb0jL.js.map} +1 -1
  131. package/dist/chunks/{input-field.CcjqGkLs.js → input-field.D6N2kt7s.js} +6 -6
  132. package/dist/chunks/input-field.D6N2kt7s.js.map +1 -0
  133. package/dist/chunks/{inspector.types.DaY6OOzz.js → inspector.types.2YEArjPi.js} +5 -5
  134. package/dist/chunks/{inspector.types.DaY6OOzz.js.map → inspector.types.2YEArjPi.js.map} +1 -1
  135. package/dist/chunks/{layout-row.DzS_XyyF.js → layout-row.BfS-cPky.js} +5 -5
  136. package/dist/chunks/layout-row.BfS-cPky.js.map +1 -0
  137. package/dist/chunks/{link.v-y0fKjn.js → link.UOEUR35A.js} +7 -7
  138. package/dist/chunks/{link.v-y0fKjn.js.map → link.UOEUR35A.js.map} +1 -1
  139. package/dist/chunks/{listbox-option-tag.BnX0H4HE.js → listbox-option-tag.Co0ycEdQ.js} +3 -3
  140. package/dist/chunks/{listbox-option-tag.BnX0H4HE.js.map → listbox-option-tag.Co0ycEdQ.js.map} +1 -1
  141. package/dist/chunks/{menu.B78fzH_k.js → menu.CLaN9Eys.js} +9 -9
  142. package/dist/chunks/{menu.B78fzH_k.js.map → menu.CLaN9Eys.js.map} +1 -1
  143. package/dist/chunks/{modal-fullscreen.DgftXCJe.js → modal-fullscreen.B-qr1Szh.js} +7 -7
  144. package/dist/chunks/{modal-fullscreen.DgftXCJe.js.map → modal-fullscreen.B-qr1Szh.js.map} +1 -1
  145. package/dist/chunks/{modal.BA745pfv.js → modal.wU3uUJKq.js} +6 -6
  146. package/dist/chunks/{modal.BA745pfv.js.map → modal.wU3uUJKq.js.map} +1 -1
  147. package/dist/chunks/{pagination.CfwtuZ7R.js → pagination.BM3FhtxJ.js} +5 -5
  148. package/dist/chunks/{pagination.CfwtuZ7R.js.map → pagination.BM3FhtxJ.js.map} +1 -1
  149. package/dist/chunks/{payment-method.CoXB0ZAW.js → payment-method.UaERFtej.js} +2 -2
  150. package/dist/chunks/{payment-method.CoXB0ZAW.js.map → payment-method.UaERFtej.js.map} +1 -1
  151. package/dist/chunks/{popover.ZlmaSYms.js → popover.DsUymZWJ.js} +5 -5
  152. package/dist/chunks/{popover.ZlmaSYms.js.map → popover.DsUymZWJ.js.map} +1 -1
  153. package/dist/chunks/{popper-container.CnWphJTN.js → popper-container.B1iB2ovW.js} +5 -5
  154. package/dist/chunks/popper-container.B1iB2ovW.js.map +1 -0
  155. package/dist/chunks/{promo-banner.cTUF9seG.js → promo-banner.BXtIM4C9.js} +7 -7
  156. package/dist/chunks/{promo-banner.cTUF9seG.js.map → promo-banner.BXtIM4C9.js.map} +1 -1
  157. package/dist/chunks/{radio-group.EnMXbuly.js → radio-group.DMob8x2J.js} +15 -15
  158. package/dist/chunks/{radio-group.EnMXbuly.js.map → radio-group.DMob8x2J.js.map} +1 -1
  159. package/dist/chunks/{radio-input.q980f8Uf.js → radio-input.C1DZbkcT.js} +5 -5
  160. package/dist/chunks/radio-input.C1DZbkcT.js.map +1 -0
  161. package/dist/chunks/{search-bar.lYuXPzBX.js → search-bar.rubkdbcD.js} +3 -3
  162. package/dist/chunks/{search-bar.lYuXPzBX.js.map → search-bar.rubkdbcD.js.map} +1 -1
  163. package/dist/chunks/{secondary-nav.CF6WPYn4.js → secondary-nav.DKSjc5bn.js} +5 -5
  164. package/dist/chunks/{secondary-nav.CF6WPYn4.js.map → secondary-nav.DKSjc5bn.js.map} +1 -1
  165. package/dist/chunks/{segmented-control.CVeUROYR.js → segmented-control.DL0W7lJ_.js} +4 -4
  166. package/dist/chunks/{segmented-control.CVeUROYR.js.map → segmented-control.DL0W7lJ_.js.map} +1 -1
  167. package/dist/chunks/{selection-card-group.CjuBQ2UA.js → selection-card-group.iYyZ9yX4.js} +10 -10
  168. package/dist/chunks/{selection-card-group.CjuBQ2UA.js.map → selection-card-group.iYyZ9yX4.js.map} +1 -1
  169. package/dist/chunks/{sidepanel.NUx7L5f1.js → sidepanel.CQnLpV8A.js} +7 -7
  170. package/dist/chunks/{sidepanel.NUx7L5f1.js.map → sidepanel.CQnLpV8A.js.map} +1 -1
  171. package/dist/chunks/{status.types.B0jtv0c7.js → status.types.Cv6hHRMu.js} +2 -2
  172. package/dist/chunks/{status.types.B0jtv0c7.js.map → status.types.Cv6hHRMu.js.map} +1 -1
  173. package/dist/chunks/{step.5g9BIi15.js → step.BsIdWhaZ.js} +3 -3
  174. package/dist/chunks/{step.5g9BIi15.js.map → step.BsIdWhaZ.js.map} +1 -1
  175. package/dist/chunks/{structured-list-item.BEhWyaVP.js → structured-list-item.BhBbmkbw.js} +6 -6
  176. package/dist/chunks/{structured-list-item.BEhWyaVP.js.map → structured-list-item.BhBbmkbw.js.map} +1 -1
  177. package/dist/chunks/{summary-grid-item-custom.CSXo4NjY.js → summary-grid-item-custom.CicAOBVQ.js} +5 -5
  178. package/dist/chunks/{summary-grid-item-custom.CSXo4NjY.js.map → summary-grid-item-custom.CicAOBVQ.js.map} +1 -1
  179. package/dist/chunks/{tabs.Casntai-.js → tabs.9kObZry9.js} +5 -5
  180. package/dist/chunks/{tabs.Casntai-.js.map → tabs.9kObZry9.js.map} +1 -1
  181. package/dist/chunks/{tag.wTXg-O7i.js → tag.-YNhsBv7.js} +3 -3
  182. package/dist/chunks/{tag.wTXg-O7i.js.map → tag.-YNhsBv7.js.map} +1 -1
  183. package/dist/chunks/{textarea.F-JyRtIw.js → textarea.Cf21WMwL.js} +6 -6
  184. package/dist/chunks/{textarea.F-JyRtIw.js.map → textarea.Cf21WMwL.js.map} +1 -1
  185. package/dist/chunks/{timeline-item.BJyB8-Wv.js → timeline-item.Cu5b-Mqj.js} +12 -12
  186. package/dist/chunks/timeline-item.Cu5b-Mqj.js.map +1 -0
  187. package/dist/chunks/{toast.BEipTIrz.js → toast.DgJbW9CL.js} +4 -4
  188. package/dist/chunks/{toast.BEipTIrz.js.map → toast.DgJbW9CL.js.map} +1 -1
  189. package/dist/chunks/{toggle-button.CYplDIO-.js → toggle-button.Cf8C7p6e.js} +2 -2
  190. package/dist/chunks/{toggle-button.CYplDIO-.js.map → toggle-button.Cf8C7p6e.js.map} +1 -1
  191. package/dist/chunks/{toggle.INRYdQzz.js → toggle.CnS7qszG.js} +3 -3
  192. package/dist/chunks/{toggle.INRYdQzz.js.map → toggle.CnS7qszG.js.map} +1 -1
  193. package/dist/chunks/{tooltip.DH8TqpYV.js → tooltip.R2sqydIE.js} +4 -4
  194. package/dist/chunks/{tooltip.DH8TqpYV.js.map → tooltip.R2sqydIE.js.map} +1 -1
  195. package/dist/chunks/{tutorial.DFvMZAN5.js → tutorial.w2ZqeOh1.js} +9 -9
  196. package/dist/chunks/{tutorial.DFvMZAN5.js.map → tutorial.w2ZqeOh1.js.map} +1 -1
  197. package/dist/chunks/{typography.Bu_WAKdf.js → typography.J1v_SPG3.js} +2 -1
  198. package/dist/chunks/{typography.Bu_WAKdf.js.map → typography.J1v_SPG3.js.map} +1 -1
  199. package/dist/chunks/{use-bento-toast-controller.BVVMh0wc.js → use-bento-toast-controller.Cn_2Eogn.js} +3 -3
  200. package/dist/chunks/{use-bento-toast-controller.BVVMh0wc.js.map → use-bento-toast-controller.Cn_2Eogn.js.map} +1 -1
  201. package/dist/chunks/{use-cached-selected-values.BiqVX5O7.js → use-cached-selected-values.impKjAIS.js} +22 -22
  202. package/dist/chunks/use-cached-selected-values.impKjAIS.js.map +1 -0
  203. package/dist/chunks/{use-country-items.C25TI6tp.js → use-country-items.DPBbl1KK.js} +2 -2
  204. package/dist/chunks/{use-country-items.C25TI6tp.js.map → use-country-items.DPBbl1KK.js.map} +1 -1
  205. package/dist/code-snippet.js +1 -1
  206. package/dist/country.js +2 -2
  207. package/dist/currency.js +1 -1
  208. package/dist/dashboard-template.js +1 -1
  209. package/dist/dashed-underline.js +1 -1
  210. package/dist/data-grid-template.js +1 -1
  211. package/dist/data-grid.js +1 -1
  212. package/dist/date-picker.js +2 -2
  213. package/dist/date-range-picker.js +2 -2
  214. package/dist/date.js +1 -1
  215. package/dist/dropdown.js +4 -4
  216. package/dist/empty-state.js +1 -1
  217. package/dist/file-uploader.js +1 -1
  218. package/dist/filter-bar.js +1 -1
  219. package/dist/focus-trap.js +1 -1
  220. package/dist/form-layout.js +1 -1
  221. package/dist/header.js +1 -1
  222. package/dist/index.js +69 -69
  223. package/dist/index.js.map +1 -1
  224. package/dist/info-icon.js +1 -1
  225. package/dist/input-field-password.js +1 -1
  226. package/dist/input-field.js +1 -1
  227. package/dist/inspector.js +1 -1
  228. package/dist/internal.js +27 -25
  229. package/dist/internal.js.map +1 -1
  230. package/dist/layout.js +1 -1
  231. package/dist/link.js +1 -1
  232. package/dist/menu.js +1 -1
  233. package/dist/modal-fullscreen.js +1 -1
  234. package/dist/modal.js +2 -2
  235. package/dist/pagination.js +1 -1
  236. package/dist/payment-method.js +1 -1
  237. package/dist/popover.js +1 -1
  238. package/dist/popper-container.js +1 -1
  239. package/dist/promo-banner.js +1 -1
  240. package/dist/radio-group.js +2 -2
  241. package/dist/search-bar.js +2 -2
  242. package/dist/secondary-nav.js +1 -1
  243. package/dist/segmented-control.js +1 -1
  244. package/dist/selection-card.js +1 -1
  245. package/dist/sidepanel.js +1 -1
  246. package/dist/status.js +1 -1
  247. package/dist/stepper.js +1 -1
  248. package/dist/structured-list.js +1 -1
  249. package/dist/summary-grid.js +1 -1
  250. package/dist/tabs.js +1 -1
  251. package/dist/tag.js +1 -1
  252. package/dist/textarea.js +1 -1
  253. package/dist/timeline.js +1 -1
  254. package/dist/toast.js +1 -1
  255. package/dist/toggle.js +1 -1
  256. package/dist/tutorial.js +1 -1
  257. package/dist/typography.js +1 -1
  258. package/dist/web-types.json +2 -2
  259. package/package.json +7 -6
  260. package/dist/chunks/base-button.4UYC3kp2.js.map +0 -1
  261. package/dist/chunks/button.CufUNBkv.js.map +0 -1
  262. package/dist/chunks/checkbox.B1qjI4R_.js.map +0 -1
  263. package/dist/chunks/dialog-page.CplkzZGZ.js.map +0 -1
  264. package/dist/chunks/dropdown-default-textbox.ZAFh7KqG.js.map +0 -1
  265. package/dist/chunks/dropdown.DC9un4VJ.js.map +0 -1
  266. package/dist/chunks/focus-trap.DSkLNO_i.js +0 -443
  267. package/dist/chunks/focus-trap.DSkLNO_i.js.map +0 -1
  268. package/dist/chunks/header.BLjdXtYJ.js +0 -266
  269. package/dist/chunks/header.BLjdXtYJ.js.map +0 -1
  270. package/dist/chunks/input-field.CcjqGkLs.js.map +0 -1
  271. package/dist/chunks/layout-row.DzS_XyyF.js.map +0 -1
  272. package/dist/chunks/popper-container.CnWphJTN.js.map +0 -1
  273. package/dist/chunks/radio-input.q980f8Uf.js.map +0 -1
  274. package/dist/chunks/timeline-item.BJyB8-Wv.js.map +0 -1
  275. package/dist/chunks/use-cached-selected-values.BiqVX5O7.js.map +0 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@adyen/bento-vue2",
3
- "version": "1.44.0",
3
+ "version": "1.45.0",
4
4
  "description": "Adyen Bento Vue2 components",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",
@@ -36,7 +36,7 @@
36
36
  "date-fns": "2.28.0",
37
37
  "focus-lock": "0.11.0",
38
38
  "uuid": "11.0.5",
39
- "@adyen/bento-design-tokens": "1.44.0"
39
+ "@adyen/bento-design-tokens": "1.45.0"
40
40
  },
41
41
  "peerDependencies": {
42
42
  "vue": "~2.7",
@@ -92,7 +92,8 @@
92
92
  "react-dom": "18.3.1",
93
93
  "sass": "1.54.6",
94
94
  "sass-loader": "12.6.0",
95
- "ts-patch": "3.3.0",
95
+ "tsc-alias": "1.8.11",
96
+ "typescript": "5.6.3",
96
97
  "vite": "5.4.16",
97
98
  "vite-plugin-dynamic-import": "1.5.0",
98
99
  "vite-plugin-static-copy": "0.15.0",
@@ -106,8 +107,8 @@
106
107
  "vue-style-loader": "4.1.3",
107
108
  "vue-template-compiler": "2.7.16",
108
109
  "vue-tsc": "1.0.24",
109
- "@adyen/bento-cli": "0.2.2",
110
- "@adyen/bento-core": "0.0.1"
110
+ "@adyen/bento-core": "0.0.1",
111
+ "@adyen/bento-cli": "0.2.2"
111
112
  },
112
113
  "optionalDependencies": {
113
114
  "vue-router": "~3.6"
@@ -120,7 +121,7 @@
120
121
  "build:prod": "pnpm run clean:build && pnpm run build:type-check && pnpm run build:lib && pnpm run build:types && pnpm run build:webtypes",
121
122
  "build:prod:plugin": "pnpm run clean:build && vue-tsc -p ../core/tsconfig.json && pnpm run build:lib && pnpm run build:types && pnpm run build:webtypes",
122
123
  "build:type-check": "vue-tsc --noEmit -p ./tsconfig.build.json",
123
- "build:types": "vue-tsc -p ./tsconfig.d.json && pnpm run build:types:api-extractor && pnpm run copy-components-defs",
124
+ "build:types": "vue-tsc -p ./tsconfig.d.json && tsc-alias -p ./tsconfig.d.json && pnpm run build:types:api-extractor && pnpm run copy-components-defs",
124
125
  "build:types:api-extractor": "api-extractor run --local --verbose && pnpm prettier dist/@types/index.d.ts -w && rm -rf dist/@types/packages",
125
126
  "copy-components-defs": "cp src/components.d.ts dist/@types",
126
127
  "build:webtypes": "vue-docgen-web-types --outFile=./dist/web-types.json",
@@ -1 +0,0 @@
1
- {"version":3,"file":"base-button.4UYC3kp2.js","sources":["../../src/components/internal/base-button/base-button.types.ts","../../src/components/internal/base-button/base-button.vue"],"sourcesContent":["export enum BentoBaseButtonPropClass {\n DESTRUCTIVE = 'critical',\n ICON_ONLY = 'icon-only',\n}\n\nexport enum BentoBaseButtonEvent {\n BLUR = 'blur',\n CLICK = 'click',\n FOCUS = 'focus',\n KEYDOWN_ESC = 'keydown.esc',\n}\n\nexport enum BaseButtonType {\n BUTTON = 'button',\n RESET = 'reset',\n SUBMIT = 'submit',\n}\n","<template>\n <button\n ref=\"bentoBaseButtonRef\"\n class=\"b-base-button\"\n :class=\"conditionalClasses\"\n :disabled=\"disabled\"\n :type=\"type\"\n :aria-expanded=\"ariaAttributes['aria-expanded']\"\n @click=\"onClickButton\"\n @focus=\"onFocusButton\"\n @blur=\"onBlurButton\"\n >\n <span v-if=\"hasSlot('iconLeft')\" class=\"b-base-button__icon-left\" data-testid=\"icon-button-left\">\n <slot name=\"iconLeft\" />\n </span>\n <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-base-button__label\">\n <slot />\n </bento-typography>\n <span v-if=\"hasSlot('iconRight')\" class=\"b-base-button__icon-right\" data-testid=\"icon-button-right\">\n <slot name=\"iconRight\" />\n </span>\n </button>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType, ref } from 'vue';\n import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types';\n import type { ButtonHTMLAttributes } from 'vue/types/jsx';\n import { BentoTypography } from '@/components/typography';\n import { useHasSlot } from '@/composables';\n import { Booleanish } from '@/types';\n\n /**\n * Base button component to use as a base for all the various types of bento buttons. For internal use only.\n *\n * * @example\n * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button';\n * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon';\n *\n * export default {\n * components: { BaseButton, YourImportedIcon },\n * props: {\n * text:\n * },\n * template: `\n * <base-button class=\"your-custom-button-styles\" @click=\"onClick\">\n * <template #iconLeft><your-imported-icon></template>\n * Button text\n * <template #iconRight><your-imported-icon></template>\n * </base-button>\n * `,\n * emits: [BentoButtonEvent.CLICK],\n * setup: (prps, { emit }) => {\n * const onClick = value => emit(BaseButtonEvent.CLICK, value);\n *\n * return {\n * onClick,\n * };\n * }\n * }\n */\n export default defineComponent({\n name: 'base-button',\n components: { BentoTypography },\n props: {\n /**\n * Disables button functionality\n */\n disabled: {\n type: Boolean,\n default: false,\n },\n /**\n * Displays button as critical\n */\n critical: {\n type: Boolean,\n default: false,\n },\n /**\n * The default behavior of the button.\n * Possible values are: 'button', 'reset', 'submit'\n */\n type: {\n type: String as PropType<ButtonHTMLAttributes['type']>,\n default: 'button',\n },\n },\n emits: [\n BentoBaseButtonEvent.CLICK,\n BentoBaseButtonEvent.FOCUS,\n BentoBaseButtonEvent.BLUR,\n BentoBaseButtonEvent.KEYDOWN_ESC,\n ],\n setup(props, { slots, emit, attrs }) {\n const ariaAttributes = computed(() => ({\n 'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n }));\n\n const bentoBaseButtonRef = ref(null);\n\n const conditionalClasses = computed(() => ({\n [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical,\n [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default,\n }));\n\n const onClickButton = (e: MouseEvent) => {\n if (!props.disabled) {\n emit(BentoBaseButtonEvent.CLICK, e);\n } else {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n\n const onFocusButton = (e: FocusEvent) => {\n emit(BentoBaseButtonEvent.FOCUS, e);\n };\n\n const onBlurButton = (e: FocusEvent) => {\n emit(BentoBaseButtonEvent.BLUR, e);\n };\n\n return {\n // Values\n ariaAttributes,\n conditionalClasses,\n\n // Methods\n onClickButton,\n onFocusButton,\n onBlurButton,\n hasSlot: useHasSlot(slots),\n\n // Refs\n bentoBaseButtonRef,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./base-button.scss\" />\n"],"names":["BentoBaseButtonPropClass","BentoBaseButtonPropClass2","BentoBaseButtonEvent","BentoBaseButtonEvent2","_sfc_main","defineComponent","BentoTypography","props","slots","emit","attrs","ariaAttributes","computed","_a","bentoBaseButtonRef","ref","conditionalClasses","e","useHasSlot"],"mappings":";;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,cAAA,YACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAKAE,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,QAAA,SACAA,EAAA,cAAA,eAJQA,IAAAD,KAAA,CAAA,CAAA;ACwDZ,MAAAE,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,OAAA;AAAA,IACAJ,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,IACAA,EAAA;AAAA,EACA;AAAA,EACA,MAAAK,GAAA,EAAA,OAAAC,GAAA,MAAAC,GAAA,OAAAC,EAAA,GAAA;AAEA,UAAAC,IAAAC,EAAA,MAAA;;AAAA;AAAA,QAAA,kBAAAC,IAAAH,EAAA,eAAA,MAAA,gBAAAG,EAAA;AAAA,MACA;AAAA,KAAA,GAGAC,IAAAC,EAAA,IAAA,GAEAC,IAAAJ,EAAA,OAAA;AAAA,MAAA,CAAA,kBAAAZ,EAAA,WAAA,EAAA,GAAAO,EAAA;AAAA,MACA,CAAA,kBAAAP,EAAA,SAAA,EAAA,GAAA,CAAAQ,EAAA;AAAA,IACA,EAAA;AAoBA,WAAA;AAAA;AAAA,MAAA,gBAAAG;AAAA,MAEA,oBAAAK;AAAA;AAAA,MACA,eApBA,CAAAC,MAAA;AACA,QAAAV,EAAA,YAGAU,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAIA;AAAA,MAiBA,eAdA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,OAAAe,CAAA;AAAA,MAAA;AAAA,MAcA,cAXA,CAAAA,MAAA;AACA,QAAAR,EAAAP,EAAA,MAAAe,CAAA;AAAA,MAAA;AAAA,MAWA,SAAAC,EAAAV,CAAA;AAAA;AAAA,MACA,oBAAAM;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"button.CufUNBkv.js","sources":["../../../core/src/components/button/button.types.ts","../../src/components/button/button.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoButtonVariant {\n PRIMARY = 'primary',\n SECONDARY = 'secondary',\n TERTIARY = 'tertiary',\n TERTIARY_WITH_BACKGROUND = 'tertiary-with-background',\n}\n\nexport enum BentoButtonPropClass {\n CONDENSED = 'condensed',\n DESTRUCTIVE = 'critical',\n DISABLED = 'disabled',\n ICON_ONLY = 'icon-only',\n INVERSE = 'inverse',\n}\n\nexport interface BentoButtonProps {\n condensed?: boolean;\n critical?: boolean;\n disabled?: boolean;\n inverse?: boolean;\n variant?: BentoButtonVariant | `${BentoButtonVariant}`;\n type?: string;\n link?: object;\n}\n","<template>\n <component\n :is=\"componentType\"\n v-bind=\"componentProps\"\n class=\"b-button\"\n :class=\"{ ...conditionalClasses, ...getIconOnlyClass() }\"\n @click.capture=\"onClickButton\"\n >\n <span v-if=\"hasSlot('iconLeft')\" class=\"b-button__icon-left\" data-testid=\"icon-button-left\">\n <slot name=\"iconLeft\" />\n </span>\n <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-button__label\">\n <slot />\n </bento-typography>\n <span v-if=\"hasSlot('iconRight')\" class=\"b-button__icon-right\" data-testid=\"icon-button-right\">\n <slot name=\"iconRight\" />\n </span>\n </component>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, PropType, useAttrs, useSlots } from 'vue';\n import { BentoButtonPropClass, BentoButtonVariant } from '@/core/components/button/button.types';\n import { BentoTypography } from '@/components/typography';\n import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n import { Booleanish } from '@/types/prop-types';\n import type { RouterLinkProps } from 'vue-router/types/router';\n import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue/types/jsx';\n import { BentoLink, BentoLinkVariant } from '@/components/link';\n\n // TODO: replace all this code when migrated to Vue 3 is complete as this is the only\n // current way to extend the `router-link` component in Vue 2 and Vue Router 3\n export interface LinkProps extends RouterLinkProps, AnchorHTMLAttributes {\n // eslint-disable-next-line vue/require-default-prop\n args?: { props: RouterLinkProps };\n\n /**\n * Set the rendered link to a regular external anchor link.\n */\n external: boolean;\n }\n\n const props = defineProps({\n /**\n * Reduces sizing of button\n */\n condensed: { type: Boolean, default: false },\n\n /**\n * Displays button as critical\n */\n critical: { type: Boolean, default: false },\n\n /**\n * Disables button functionality\n */\n disabled: { type: Boolean, default: false },\n\n /**\n * Sets color set to inverse\n */\n inverse: { type: Boolean, default: false },\n\n /**\n * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass.\n */\n link: { type: Object, default: undefined },\n\n /**\n * The default behavior of the button.\n * Possible values are: 'button', 'reset', 'submit'\n */\n type: {\n type: String as PropType<ButtonHTMLAttributes['type']>,\n default: 'button',\n },\n\n /**\n * Types of flavour of Button\n * @values primary, secondary, tertiary, tertiary-with-background\n */\n variant: {\n type: String as PropType<BentoButtonVariant | `${BentoButtonVariant}`>,\n default: BentoButtonVariant.PRIMARY,\n validator: (value: BentoButtonVariant) => Object.values(BentoButtonVariant).includes(value),\n },\n });\n\n const emit = defineEmits([\"blur\", \"click\", \"focus\", \"keydown.esc\"]);\n\n const attrs = useAttrs();\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const componentType = computed(() => {\n if (props?.link !== undefined) {\n return BentoLink;\n }\n return 'button';\n });\n const ariaAttributes = computed(() => ({\n 'aria-controls': attrs['aria-controls']?.toString() as string,\n 'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n }));\n\n const componentProps = computed(() =>\n componentType.value === 'button'\n ? {\n ...ariaAttributes.value,\n disabled: props.disabled,\n type: props.type,\n }\n : { ...props.link, disableTypography: true, variant: BentoLinkVariant.DEFAULT, isButton: true }\n );\n\n const variantClass = computed(() => ({\n [`b-button--${props.variant}${props.critical ? `-${BentoButtonPropClass.DESTRUCTIVE}` : ''}`]: true,\n }));\n\n const conditionalClasses = computed(() => ({\n ...variantClass.value,\n [`b-button--${BentoButtonPropClass.CONDENSED}`]: props.condensed,\n [`b-button--${BentoButtonPropClass.DISABLED}`]: props.disabled,\n [`b-button--${BentoButtonPropClass.INVERSE}`]: props.inverse,\n }));\n\n const getIconOnlyClass = () => ({\n [`b-button--${BentoButtonPropClass.ICON_ONLY}`]: !hasSlot('default'),\n });\n\n const onClickButton = (e: MouseEvent) => {\n if (!props.disabled) {\n emit('click', e);\n } else {\n e.preventDefault();\n e.stopPropagation();\n }\n };\n</script>\n\n<script lang=\"ts\">\n /**\n * Button component for all the various types of bento buttons.\n *\n * @example\n * import { BentoButton } from '@adyen/bento-vue2';\n * import { CheckMarkIcon } from '@adyen/ui-assets-icons-16';\n *\n * export default {\n * components: { BentoButton },\n * template: `\n * <bento-button\n * disabled\n * variant=\"secondary\"\n * >\n * <template #iconLeft>\n * <check-mark svg-title=\"checked\" />\n * </template>\n *\n * Button text\n *\n * <template #iconRight>\n * <check-mark svg-title=\"checked\" />\n * </template>\n * </bento-button>\n * `,\n * }\n */\n export default {\n name: 'bento-button',\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/button/button.scss\" />\n"],"names":["BentoButtonVariant","BentoButtonVariant2","BentoButtonPropClass","BentoButtonPropClass2","__default__","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","componentType","computed","props","BentoLink","ariaAttributes","_a","_b","componentProps","BentoLinkVariant","variantClass","conditionalClasses","e","emit"],"mappings":";;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,YAAA,aACAA,EAAA,WAAA,YACAA,EAAA,2BAAA,4BAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,YAAA,aACAA,EAAA,cAAA,YACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WALQA,IAAAD,KAAA,CAAA,CAAA;AC8JR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAhFAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,OACIC,KAAA,gBAAAA,EAAA,UAAA,SACIC,IAEJ,QAAO,GAEXC,IAAAH,EAAA,MAAA;;AAAA;AAAA,QAAuC,kBAAAI,IAAAX,EAAA,eAAA,MAAA,gBAAAW,EAAA;AAAA,QACe,kBAAAC,IAAAZ,EAAA,eAAA,MAAA,gBAAAY,EAAA;AAAA,MACA;AAAA,KAAA,GAGtDC,IAAAN;AAAA,MAAuB,MAAAD,EAAA,UAAA,WAAA;AAAA,QAEb,GAAAI,EAAA;AAAA,QACsB,UAAAF,EAAA;AAAA,QACF,MAAAA,EAAA;AAAA,MACJ,IAAA,EAAA,GAAAA,EAAA,MAAA,mBAAA,IAAA,SAAAM,EAAA,SAAA,UAAA,GAAA;AAAA,IAE4E,GAGtGC,IAAAR,EAAA,OAAA;AAAA,MAAqC,CAAA,aAAAC,EAAA,OAAA,GAAAA,EAAA,WAAA,IAAAX,EAAA,WAAA,KAAA,EAAA,EAAA,GAAA;AAAA,IAC8D,EAAA,GAGnGmB,IAAAT,EAAA,OAAA;AAAA,MAA2C,GAAAQ,EAAA;AAAA,MACvB,CAAA,aAAAlB,EAAA,SAAA,EAAA,GAAAW,EAAA;AAAA,MACuC,CAAA,aAAAX,EAAA,QAAA,EAAA,GAAAW,EAAA;AAAA,MACD,CAAA,aAAAX,EAAA,OAAA,EAAA,GAAAW,EAAA;AAAA,IACD,EAAA;6LAGzD,OAAA;AAAA,MAAgC,CAAA,aAAAX,EAAA,SAAA,EAAA,GAAA,CAAAO,EAAA,SAAA;AAAA,IACuC,mBAGvE,CAAAa,MAAA;AACI,MAAAT,EAAA,YAGIS,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAC,EAAA,SAAAD,CAAA;AAAA,IAIJ;;;;;;;;;;;;;;;;;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"checkbox.B1qjI4R_.js","sources":["../../../core/src/components/checkbox/checkbox.types.ts","../../src/components/checkbox/checkbox.vue"],"sourcesContent":["import type { BentoTagProps } from '@/core/components/tag/tag.types';\nimport type {\n CheckboxInputType as BentoCheckboxType,\n MultiCheckboxInputType as BentoMultiCheckboxType,\n} from '@/core/components/internal/checkbox-input/checkbox-input.types';\nimport { CheckboxInputState as BentoCheckboxState } from '@/core/components/internal/checkbox-input/checkbox-input.types';\n\nexport { BentoCheckboxState, BentoCheckboxType, BentoMultiCheckboxType };\n\nexport enum BentoCheckboxEvent {\n UPDATE = 'update:model-value',\n INPUT = 'input',\n}\n\nexport type BentoCheckboxTag = BentoTagProps;\n","<template>\n <label class=\"b-checkbox\" :class=\"conditionalClass\">\n <checkbox-input\n ref=\"input\"\n v-bind=\"$attrs\"\n :aria-label=\"computedAriaLabel\"\n :aria-describedby=\"ariaDescribedBy\"\n :disabled=\"disabled\"\n :has-error=\"shouldShowError\"\n :indeterminate=\"isIndeterminate\"\n :value=\"value\"\n :model-value=\"modelValue\"\n :readonly=\"readonly\"\n @update:model-value=\"onChange\"\n />\n <span v-if=\"hasSlot('default') || shouldShowErrorMessage\" class=\"b-checkbox__text\">\n <bento-typography v-if=\"hasSlot('default')\" class=\"b-checkbox__label\" el=\"span\" variant=\"body\">\n <span><slot /></span>\n <bento-typography v-if=\"optional\" class=\"b-checkbox__label-requirement\" el=\"span\"\n >({{ t('optional') }})</bento-typography\n >\n <bento-typography v-else-if=\"required\" class=\"b-checkbox__label-requirement\" el=\"span\"\n >({{ t('required') }})</bento-typography\n >\n <bento-tag v-if=\"tag\" class=\"b-checkbox__label-tag\" v-bind=\"tag\" />\n </bento-typography>\n <bento-typography\n v-if=\"hasSlot('default') && hasSlot('description')\"\n :id=\"descriptionId\"\n class=\"b-checkbox__description\"\n el=\"span\"\n variant=\"body\"\n >\n <slot name=\"description\"></slot>\n </bento-typography>\n <error-message v-if=\"shouldShowErrorMessage\" :id=\"errorId\" :error-message=\"errorMessage\" />\n\n <bento-typography v-if=\"contentSlotAvailable\" class=\"b-checkbox__content\" el=\"span\" variant=\"body\">\n <slot name=\"content\"></slot>\n </bento-typography>\n </span>\n </label>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType, ref, toRefs } from 'vue';\n import {\n BentoCheckboxEvent,\n BentoCheckboxState,\n BentoCheckboxTag,\n BentoCheckboxType,\n BentoMultiCheckboxType,\n } from '@/core/components/checkbox/checkbox.types';\n import { BentoTypography } from '@/components/typography';\n import { CheckboxInput } from '@/components/internal/checkbox-input';\n import { ErrorMessage } from '@/components/internal/error-message';\n import type { HTMLAttributes } from 'vue/types/jsx';\n import { useDefaultSlotValidator, useHasSlot } from '@/composables';\n import { generateUid } from '@/core/utils/ts';\n import { getSlotText } from '@/utils/ts/get-slot-text';\n import { useI18n } from '@/utils/ts/i18n';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n import { BentoTag } from '@/components/tag';\n import { BentoCheckboxGroupItems } from '@/core/components/checkbox-group/checkbox-group.types';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n /**\n * Checkboxes are used to make a binary choice about an option.\n * The label tag area is also clickable.\n *\n * @usage\n * import { BentoCheckbox } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoCheckbox },\n * template: `\n * <bento-checkbox>\n * Label text\n * <template #description>Sub label text</template>\n * </bento-checkbox>\n * `,\n * }\n */\n export default defineComponent({\n name: 'bento-checkbox',\n i18n: { messages },\n components: {\n BentoTag,\n BentoTypography,\n CheckboxInput,\n ErrorMessage,\n },\n model: { prop: 'modelValue' },\n props: {\n /**\n * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n */\n /**\n * Accessible name for the radio button component. It is strongly recommended to pas this value in case this component is used without a label.\n */\n ariaLabel: { type: String, default: null },\n\n /**\n * Setting this property to true will disable the checkbox in your form.\n */\n disabled: { type: Boolean, default: false },\n\n /**\n * Renders the checkbox in an error state with an error message.\n */\n errorMessage: { type: String, default: null },\n\n /**\n * Setting this property to true will show the checkbox in error state.\n */\n hasError: { type: Boolean, default: false },\n\n /**\n * The :indeterminate CSS pseudo-class represents any form element\n * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute\n * set to true, radio buttons which are members of a group in which all radio buttons are unchecked,\n * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate\n * This property lets you control the input.indeterminate native property.\n */\n indeterminate: { type: Boolean, default: false },\n\n /**\n * When handling a single checkbox with a singular state, use a boolean.\n *\n * When handling multiple checkboxes, use an array of keys.\n * These keys exist as a set \"value\" prop for each checkbox.\n */\n modelValue: {\n type: [Boolean, Array] as PropType<BentoCheckboxType | BentoCheckboxGroupItems>,\n default: false,\n },\n\n /**\n * Highlights the checkbox is optional.\n */\n optional: { type: Boolean, default: false },\n\n /**\n * Setting this property to true will set the checkbox to read only state.\n */\n readonly: { type: Boolean, default: false },\n\n /**\n * Highlights the checkbox is required.\n */\n required: { type: Boolean, default: false },\n\n /**\n * Sets the properties of the BentoTag component that is placed next to the label.\n * {@see BentoTag}\n */\n tag: { type: Object as PropType<BentoCheckboxTag>, default: undefined },\n\n /**\n * The value of the component. The DOM API casts this to a string.\n * The browser uses \"on\" as the default value.\n *\n * In the case of multiple checkboxes this value is used as a unique key.\n */\n value: { type: [String, Number], default: null },\n },\n emits: [BentoCheckboxEvent.UPDATE, BentoCheckboxEvent.INPUT],\n setup(props, { attrs, emit, slots }) {\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const descriptionId = generateUid('description');\n const errorId = generateUid('error');\n const hasSlot = useHasSlot(slots);\n\n const { disabled, indeterminate, modelValue, readonly, value } = toRefs(props);\n\n const defaultSlotValue = getSlotText(slots)('default');\n const descriptionSlotValue = getSlotText(slots)('description');\n\n useDefaultSlotValidator('bento-checkbox', slots.default, slots.description);\n\n const isCheckboxGroup = computed(() => Array.isArray(modelValue.value));\n const isChecked = computed(() => {\n if (!isCheckboxGroup.value) {\n return modelValue.value as boolean;\n }\n\n return (modelValue.value as BentoMultiCheckboxType).some(item => item === value.value);\n });\n const isIndeterminate = computed(() => indeterminate.value);\n\n const shouldShowError = computed(\n () => !props.disabled && !props.readonly && (props.hasError || !!props.errorMessage)\n );\n const shouldShowErrorMessage = computed(() => !props.disabled && !props.readonly && !!props.errorMessage);\n\n // Content slot logic\n const hasContentSlot = computed(() => hasSlot('content'));\n const isCheckedOrIntermediate = computed(() => isIndeterminate?.value || isChecked?.value);\n const contentSlotAvailable = computed(\n () => hasContentSlot?.value && isCheckboxGroup?.value && isCheckedOrIntermediate?.value\n );\n\n // ARIA fields\n const ariaDescribedBy = computed<HTMLAttributes['aria-describedby']>(\n () =>\n `${shouldShowErrorMessage.value ? errorId : ''} ${\n defaultSlotValue && descriptionSlotValue ? descriptionId : ''\n }`.trim() || null\n );\n\n const ariaLabelAttribute = ref(attrs['aria-label']);\n const { ariaLabel } = toRefs(props);\n const computedAriaLabel = useAriaLabel({\n ariaLabel: ariaLabelAttribute.value as string,\n // TODO: take this line away when the aria-label props is removed\n label: ariaLabel,\n defaultFallback: hasSlot('default') ? (getSlotText(slots)('default') as string) : t('checkbox'),\n });\n\n const conditionalClass = computed(() => ({\n [`b-checkbox--${BentoCheckboxState.DISABLED}`]: disabled.value,\n [`b-checkbox--${BentoCheckboxState.READONLY}`]: readonly.value,\n }));\n\n const onChange = (newValue: BentoCheckboxType | BentoCheckboxGroupItems) => {\n if (disabled.value) {\n return;\n }\n emit(BentoCheckboxEvent.UPDATE, newValue);\n emit(BentoCheckboxEvent.INPUT, newValue);\n };\n\n return {\n // Values\n descriptionId,\n errorId,\n ariaDescribedBy,\n computedAriaLabel,\n conditionalClass,\n defaultSlotValue,\n descriptionSlotValue,\n isIndeterminate,\n shouldShowError,\n shouldShowErrorMessage,\n contentSlotAvailable,\n hasContentSlot,\n\n // Methods\n hasSlot,\n onChange,\n\n t,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/checkbox/checkbox.scss\" />\n"],"names":["BentoCheckboxEvent","BentoCheckboxEvent2","_sfc_main","defineComponent","messages","BentoTag","BentoTypography","CheckboxInput","ErrorMessage","props","attrs","emit","slots","t","useI18n","descriptionId","generateUid","errorId","hasSlot","useHasSlot","disabled","indeterminate","modelValue","readonly","value","toRefs","defaultSlotValue","getSlotText","descriptionSlotValue","useDefaultSlotValidator","isCheckboxGroup","computed","isChecked","item","isIndeterminate","shouldShowError","shouldShowErrorMessage","hasContentSlot","isCheckedOrIntermediate","contentSlotAvailable","ariaDescribedBy","ariaLabelAttribute","ref","ariaLabel","computedAriaLabel","useAriaLabel","conditionalClass","CheckboxInputState","newValue"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"dialog-page.CplkzZGZ.js","sources":["../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/arrow-left.vue","../../src/components/internal/dialog-page/dialog-page.types.ts","../../src/components/internal/dialog-page/dialog-page.keys.ts","../../src/components/internal/dialog-page/dialog-page.vue"],"sourcesContent":["\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M3.80655 7.25434L8.06077 3.00011L7.00011 1.93945L0.939453 8.00011L7.00011 14.0608L8.06077 13.0001L3.81499 8.75433L14.7508 8.74316L14.7492 7.24316L3.80655 7.25434Z\"/></svg>\n</template>\n<script>\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n<style>\n @import '../css/main.css';\n</style>\n","import { Ref } from 'vue';\n\nexport enum BentoDialogPageAnimation {\n TRANSITION_LEVEL_DEEPER = 'b-dialog-page__animation--level-deeper',\n TRANSITION_LEVEL_UPPER = 'b-dialog-page__animation--level-upper',\n}\n\nexport interface BentoDialogPageConfigData {\n activePage: Ref<string>;\n animation: Ref<string>;\n isAnimationActive?: Ref<boolean>;\n isOpen: Ref<boolean>;\n pages: Ref<string[]>;\n previousPages: Ref<string[]>;\n updatePage: (page: string) => void;\n}\n\nexport type BentoDialogPageRegisterPage = (pageId: string) => { unregisterPage: () => void };\n","export const DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY = Symbol('dialog registerPage injection key');\nexport const DIALOG_PAGE_CONFIG_INJECTION_KEY = Symbol('dialog page config data injection key');\n","<template>\n <Transition :name=\"animation\" mode=\"out-in\" @after-leave=\"updateAnimation\" @leave=\"startAnimation\">\n <div v-if=\"isOpen && showPage\" class=\"b-dialog-page\">\n <div v-if=\"hasSlot('header')\" class=\"b-dialog-page__header\" :class=\"headerConditionalClasses\">\n <div\n v-if=\"showBackButton\"\n class=\"b-dialog-page__back-button\"\n :style=\"backButtonStyling\"\n data-testid=\"back-button\"\n >\n <bento-button variant=\"tertiary\" @click=\"goToPreviousPage(previousPage)\">\n <arrow-left-icon :svg-title=\"t('goToPreviousPage')\" />\n </bento-button>\n </div>\n <slot name=\"header\"></slot>\n </div>\n <div v-if=\"hasSlot('content')\" ref=\"contentElement\" class=\"b-dialog-page__content\" @scroll=\"onScroll\">\n <slot name=\"content\" />\n </div>\n <div v-if=\"hasSlot('footer')\" class=\"b-dialog-page__footer\" :class=\"footerConditionalClasses\">\n <slot name=\"footer\" />\n </div>\n </div>\n </Transition>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, inject, nextTick, onUnmounted, PropType, ref, useSlots, watch } from 'vue';\n\n import { BentoButton } from '@/components/button';\n import ArrowLeftIcon from '@adyen/ui-assets-icons-16/vue/arrow-left';\n\n import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n import { useI18n } from '@/utils/ts/i18n';\n import { isDevelopmentEnviroment } from '@/utils/ts/dev-environment';\n\n import {\n BentoDialogPageAnimation,\n BentoDialogPageConfigData,\n BentoDialogPageRegisterPage,\n } from './dialog-page.types';\n import type { CSSProperties } from 'vue/types/jsx';\n\n import { DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY } from './dialog-page.keys';\n\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const props = defineProps({\n /**\n * Identifier of the page, used with activePage prop to handle navigation\n */\n pageId: {\n type: String,\n default: undefined,\n },\n\n /**\n * Show header and actions border\n */\n alwaysShowBorder: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Pass custom styling to the back button to position it correctly with the header slot\n */\n backButtonStyling: { type: Object as PropType<CSSProperties>, default: null },\n\n /**\n * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n * Used when the back button should not take the user to the natural previous page\n * Set to `null` to hide back button in the page\n */\n previousPage: {\n type: String,\n default: undefined,\n },\n });\n\n const emit = defineEmits([\"animationend\"]);\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n // Refs\n const contentElement = ref<HTMLDivElement>(null);\n const hasScroll = ref(false);\n const isScrollAtTop = ref(true);\n const isScrollAtBottom = ref(false);\n\n // Logic to choose which page is active/shown\n const showPage = computed(() => (activePage.value ? activePage.value === props.pageId : true));\n\n // Scrolling styling logic\n const headerConditionalClasses = computed(() => ({\n 'b-dialog-page__header--with-border': props.alwaysShowBorder || (hasScroll.value && !isScrollAtTop.value),\n }));\n\n const footerConditionalClasses = computed(() => ({\n 'b-dialog-page__footer--with-border': props.alwaysShowBorder || (hasScroll.value && !isScrollAtBottom.value),\n }));\n\n const onScroll = () => {\n if (!contentElement.value) {\n return;\n }\n\n isScrollAtTop.value = contentElement.value.scrollTop === 0;\n isScrollAtBottom.value =\n contentElement.value.scrollHeight - contentElement.value.clientHeight === contentElement.value.scrollTop;\n };\n\n const calculateScroll = async watchedValue => {\n if (!watchedValue) {\n return;\n }\n // Wait for content to be rendered to be able to calculate the height\n await nextTick();\n hasScroll.value = contentElement.value && contentElement.value.scrollHeight > contentElement.value.clientHeight;\n };\n\n const { activePage, animation, isAnimationActive, isOpen, pages, previousPages, updatePage } =\n inject<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY);\n\n watch(() => isOpen.value, calculateScroll, { immediate: true });\n watch(() => showPage.value, calculateScroll, { immediate: true });\n\n // Logic to determine whether the back button should be shown on the page\n const showBackButton = computed(() => {\n if (props.previousPage) {\n return true;\n }\n if (props.previousPage === null) {\n return false;\n }\n return hasPreviousPages.value && showPage.value;\n });\n\n // Animation\n const updateAnimation = () => {\n animation.value = BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER;\n if (isAnimationActive) {\n isAnimationActive.value = false;\n }\n\n emit('animationend');\n };\n\n const startAnimation = () => {\n if (isAnimationActive) {\n isAnimationActive.value = true;\n }\n };\n\n // Previous page logic\n const hasPreviousPages = computed(() => previousPages.value.length > 1);\n const lastPage = computed(() => previousPages.value[previousPages.value.length - 1]);\n const isActivePageValid = computed(() => pages.value.some(page => page === activePage.value));\n\n const goToPreviousPage = async (page: string) => {\n if (page) {\n const index = previousPages.value.indexOf(page);\n if (index !== -1) {\n previousPages.value = previousPages.value.slice(0, index + 1);\n } else {\n previousPages.value = [page];\n }\n } else {\n previousPages.value.pop();\n }\n\n animation.value = BentoDialogPageAnimation.TRANSITION_LEVEL_UPPER;\n await nextTick();\n updatePage(lastPage.value);\n };\n\n // Add new page to the previousPage array to keep track of user navigation\n watch(\n () => activePage.value,\n async () => {\n await nextTick();\n if (!isOpen.value) {\n return;\n }\n\n if (!!activePage.value && !isActivePageValid.value) {\n if (isDevelopmentEnviroment) {\n // eslint-disable-next-line no-console\n console.error(\n `The activePage passed \"${activePage.value}\" does not match the id of any of the pages`\n );\n return;\n }\n }\n\n if (activePage.value !== lastPage.value) {\n previousPages.value.push(activePage.value);\n }\n },\n { immediate: true }\n );\n\n // Register page to parent component and inject data from parent component\n const registerPage = inject<BentoDialogPageRegisterPage>(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY);\n const { unregisterPage } = registerPage(props.pageId);\n\n // Unregister page on unmounting the page\n onUnmounted(() => unregisterPage());\n</script>\n\n<script lang=\"ts\">\n /**\n * DialogPage is an internal component used to render different pages of dialog components (Modal, ModalFullscreen and Sidepanel)\n *\n * @example\n * import { DialogPage } from '@/internal';\n *\n * export default {\n * components: { DialogPage },\n * template: `\n * <dialog-page pageId='step1' always-show-border>\n * <template #header>Header</template>\n * <template #content>Content</template>\n * <template #footer>Footer</template>\n * </dialog-page>\n * `\n * }\n */\n export default {\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./dialog-page.scss\" />\n"],"names":["uuid","_sfc_main$1","BentoDialogPageAnimation","BentoDialogPageAnimation2","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY","DIALOG_PAGE_CONFIG_INJECTION_KEY","__default__","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","contentElement","ref","hasScroll","isScrollAtTop","isScrollAtBottom","showPage","computed","activePage","props","headerConditionalClasses","footerConditionalClasses","onScroll","calculateScroll","watchedValue","nextTick","animation","isAnimationActive","isOpen","pages","previousPages","updatePage","inject","watch","showBackButton","hasPreviousPages","updateAnimation","emit","startAnimation","lastPage","isActivePageValid","page","goToPreviousPage","index","registerPage","unregisterPage","onUnmounted"],"mappings":";;;;;;AAKA,IAAAA,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;ACVY,IAAAE,IAAA,kBAAAC,OACRA,EAAA,0BAAA,0CACAA,EAAA,yBAAA,yCAFQA,IAAAD,KAAA,CAAA,CAAA;ACFC,MAAAE,IAAA,OAAA,mCAAA,GACAC,IAAA,OAAA,uCAAA;;;;GCuOTC,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,GAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAtJAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GACA,EAAA,GAAAI,EAAA,IAAAC,EAAA,GAGAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,EAAA,GACAE,IAAAF,EAAA,EAAA,GACAG,IAAAH,EAAA,EAAA,GAGAI,IAAAC,EAAA,MAAAC,EAAA,QAAAA,EAAA,UAAAC,EAAA,SAAA,EAAA,GAGAC,IAAAH,EAAA,OAAA;AAAA,MAAiD,sCAAAE,EAAA,oBAAAN,EAAA,SAAA,CAAAC,EAAA;AAAA,IACsD,EAAA,GAGvGO,IAAAJ,EAAA,OAAA;AAAA,MAAiD,sCAAAE,EAAA,oBAAAN,EAAA,SAAA,CAAAE,EAAA;AAAA,IACyD,EAAA,GAG1GO,IAAA,MAAA;AACI,MAAAX,EAAA,UAIAG,EAAA,QAAAH,EAAA,MAAA,cAAA,GACAI,EAAA,QAAAJ,EAAA,MAAA,eAAAA,EAAA,MAAA,iBAAAA,EAAA,MAAA;AAAA,IACmG,GAGvGY,IAAA,OAAAC,MAAA;AACI,MAAAA,MAIA,MAAAC,EAAA,GACAZ,EAAA,QAAAF,EAAA,SAAAA,EAAA,MAAA,eAAAA,EAAA,MAAA;AAAA,IAAmG,GAGvG,EAAA,YAAAO,GAAA,WAAAQ,GAAA,mBAAAC,GAAA,QAAAC,GAAA,OAAAC,GAAA,eAAAC,GAAA,YAAAC,EAAA,IAAAC,EAAA9B,CAAA;AAGA,IAAA+B,EAAA,MAAAL,EAAA,OAAAL,GAAA,EAAA,WAAA,GAAA,CAAA,GACAU,EAAA,MAAAjB,EAAA,OAAAO,GAAA,EAAA,WAAA,GAAA,CAAA;AAGA,UAAAW,IAAAjB,EAAA,MACIE,EAAA,eACI,KAEJA,EAAA,iBAAA,OACI,KAEJgB,EAAA,SAAAnB,EAAA,KAA0C,GAI9CoB,IAAA,MAAA;AACI,MAAAV,EAAA,QAAA3B,EAAA,yBACA4B,MACIA,EAAA,QAAA,KAGJU,EAAA,cAAA;AAAA,IAAmB,GAGvBC,IAAA,MAAA;AACI,MAAAX,MACIA,EAAA,QAAA;AAAA,IACJ,GAIJQ,IAAAlB,EAAA,MAAAa,EAAA,MAAA,SAAA,CAAA,GACAS,IAAAtB,EAAA,MAAAa,EAAA,MAAAA,EAAA,MAAA,SAAA,CAAA,CAAA,GACAU,IAAAvB,EAAA,MAAAY,EAAA,MAAA,KAAA,CAAAY,MAAAA,MAAAvB,EAAA,KAAA,CAAA,GAEAwB,IAAA,OAAAD,MAAA;AACI,UAAAA,GAAA;AACI,cAAAE,IAAAb,EAAA,MAAA,QAAAW,CAAA;AACA,QAAAE,MAAA,KACIb,EAAA,QAAAA,EAAA,MAAA,MAAA,GAAAa,IAAA,CAAA,IAEAb,EAAA,QAAA,CAAAW,CAAA;AAAA,MACJ;AAEA,QAAAX,EAAA,MAAA,IAAA;AAGJ,MAAAJ,EAAA,QAAA3B,EAAA,wBACA,MAAA0B,EAAA,GACAM,EAAAQ,EAAA,KAAA;AAAA,IAAyB;AAI7B,IAAAN;AAAA,MAAA,MAAAf,EAAA;AAAA,MACqB,YAAA;AAGb,YADA,MAAAO,EAAA,GACA,EAAAG,EAAA,OAIA;AAAA,cAAAV,EAAA,SAAA,CAAAsB,EAAA,OACI;AAEI,oBAAA;AAAA,cAAQ,0BAAAtB,EAAA,KAAA;AAAA,YACsC;AAE9C;AAAA,UAAA;AAIR,UAAAA,EAAA,UAAAqB,EAAA,SACIT,EAAA,MAAA,KAAAZ,EAAA,KAAA;AAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAA0B,IAAAZ,EAAA/B,CAAA,GACA,EAAA,gBAAA4C,EAAA,IAAAD,EAAAzB,EAAA,MAAA;AAGA,WAAA2B,EAAA,MAAAD,EAAA,CAAA;;;;;;;;;;;;;;;;;","x_google_ignoreList":[0]}
@@ -1 +0,0 @@
1
- {"version":3,"file":"dropdown-default-textbox.ZAFh7KqG.js","sources":["../../src/components/dropdown/dropdown.types.ts","../../src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.types.ts","../../src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue","../../src/components/dropdown/components/dropdown-default-textbox/dropdown-default-textbox.vue"],"sourcesContent":["/**\n * @deprecated Do not use. Only 'default' size should be used.\n */\nexport enum BentoDropdownSize {\n DEFAULT = 'DropdownInputDefault',\n SMALL = 'DropdownInputSmall',\n}\n\nexport {\n /**\n * @deprecated since version 2.0. Use the string literal instead.\n */\n BentoListboxLazyLoadType as BentoDropdownLazyLoadType,\n BentoListboxEvent as BentoDropdownEvent,\n} from '@/types';\n\nexport type { BentoListboxSearchOptions as BentoDropdownSearchOptions } from '@/types';\nexport type { BentoListboxEmptyStateProps as BentoDropdownEmptyStateProps } from '@/types';\nexport type { BentoListboxVirtulisationOptions as BentoDropdownVirtulisationOptions } from '@/types';\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 size=\"1\"\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-small-icon v-if=\"size === BentoDropdownSize.SMALL\" :svg-title=\"'clearSearch'\" />\n <cross-circle-fill-icon v-else :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 '@/core/utils/ts';\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 import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small';\n import { BentoDropdownSize } from '@/components/dropdown/dropdown.types';\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 * Dropdown size\n */\n size: {\n type: String as PropType<BentoDropdownSize | `${BentoDropdownSize}`>,\n default: null,\n },\n });\n\n const emit = defineEmits([]);\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\n const focus = () => {\n textbox.value.focus();\n };\n\n defineExpose({\n focus,\n });\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 ref=\"baseTextbox\"\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, ref, 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([\"clear\", \"close\", \"input\", \"keydown\", \"open\"]);\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 baseTextbox = ref(null);\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\n const focus = () => {\n baseTextbox.value.focus();\n };\n\n defineExpose({\n focus,\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":["BentoDropdownSize","BentoDropdownSize2","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","focus","expose","__default__","baseTextbox","isDropdownOpen","onInput","newInput","onKeyDown","e","openDropdown","stopEventPropagation","closeDropdown","clearValue","listeners"],"mappings":"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"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"dropdown.DC9un4VJ.js","sources":["../../src/components/dropdown/components/dropdown-options-container/composables/use-dropdown-options-listbox.ts","../../src/components/dropdown/components/dropdown-options-container/dropdown-options-container.vue","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/chevron-down-small.vue","../../../../node_modules/.pnpm/@adyen+ui-assets-icons-16@4.1.0_vue@2.7.16/node_modules/@adyen/ui-assets-icons-16/dist/vue/chevron-up-small.vue","../../src/components/dropdown/components/dropdown-small-textbox/dropdown-small-textbox.vue","../../src/components/dropdown/composables/use-display-value.ts","../../src/components/dropdown/composables/use-keyboard-navigation.ts","../../src/components/search-bar/useSearchBarDataFilter.ts","../../src/components/input-field/input-field.keys.ts","../../src/components/dropdown/dropdown.vue"],"sourcesContent":["import { computed, ref, Ref, watch } from 'vue';\nimport { BentoListboxEvent, BentoListboxOptions } from '@/types';\nimport { BentoDropdownEvent } from '../../../dropdown.types';\nimport { useI18n } from '@/utils/ts/i18n';\nimport messages from '../messages.json';\n\ntype MessageSchema = (typeof messages)['en-US'];\n\n/**\n * A composable that handles all dropdown options option selecting logic & listeners.\n * If single select dropdown then emits straight up to dropdown.\n * If multi select dropdown then stores selections in internal state and only emits when Apply button is pressed.\n *\n * @param selectedValue The selectedValue property passed into the dropdown options container component.\n * @param multiple The multiple property passed into the dropdown options container component.\n * @param isOpen The isOpen property passed into the dropdown options container component.\n * @param emit The emit function for the dropdown options container component.\n */\nexport const useDropdownOptionsListbox = (\n selectedValue: Ref<BentoListboxOptions>,\n multiple: Ref<boolean>,\n isOpen: Ref<boolean>,\n emit: (event: BentoListboxEvent | BentoDropdownEvent, selectedValue?: BentoListboxOptions) => void\n) => {\n const internalSelectedValue = ref(selectedValue.value);\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n watch(selectedValue, () => {\n internalSelectedValue.value = selectedValue.value;\n });\n\n // Multi-select dropdown cancel and apply button logic\n const isApplyButtonDisabled = computed(\n () => JSON.stringify(internalSelectedValue.value) === JSON.stringify(selectedValue.value)\n );\n\n const onApplyClick = () => {\n emit(BentoListboxEvent.SELECT, internalSelectedValue.value);\n emit(BentoDropdownEvent.CLOSE_DROPDOWN);\n };\n\n const onCancelClick = () => {\n internalSelectedValue.value = selectedValue.value;\n emit(BentoDropdownEvent.CLOSE_DROPDOWN);\n };\n\n const onOutsideDropdownClick = () => {\n if (isOpen.value && multiple.value) {\n internalSelectedValue.value = selectedValue.value;\n }\n };\n\n const actions = computed(() => [\n {\n title: t('apply') as string,\n event: onApplyClick,\n disabled: isApplyButtonDisabled.value,\n },\n {\n title: t('cancel') as string,\n event: onCancelClick,\n },\n ]);\n\n // Click and keyboard navigation event listners\n const onOptionSelected = (newSelectedValue: BentoListboxOptions) => {\n internalSelectedValue.value = newSelectedValue;\n if (!multiple.value) {\n emit(BentoDropdownEvent.SELECT, newSelectedValue);\n }\n };\n\n const onTabKey = (newSelectedValue: BentoListboxOptions) => {\n onOptionSelected(newSelectedValue);\n emit(BentoDropdownEvent.TAB);\n };\n\n const onEnterKey = (newSelectedValue: BentoListboxOptions) => {\n onOptionSelected(newSelectedValue);\n emit(BentoDropdownEvent.ENTER);\n };\n\n const onSpaceKey = (newSelectedValue: BentoListboxOptions) => {\n onOptionSelected(newSelectedValue);\n emit(BentoDropdownEvent.SPACE);\n };\n\n const onEscapeKey = () => {\n onCancelClick();\n emit(BentoListboxEvent.ESCAPE);\n };\n\n const emitShowMoreEvent = () => {\n emit(BentoDropdownEvent.SHOW_MORE);\n };\n\n const listeners = {\n [BentoListboxEvent.SELECT]: onOptionSelected,\n [BentoListboxEvent.SHOW_MORE]: emitShowMoreEvent,\n [BentoListboxEvent.TAB]: onTabKey,\n [BentoListboxEvent.SPACE]: onSpaceKey,\n [BentoListboxEvent.ENTER]: onEnterKey,\n };\n\n return {\n // Values\n actions,\n internalSelectedValue,\n\n // Methods\n listeners,\n onEscapeKey,\n onOutsideDropdownClick,\n };\n};\n","<template>\n <component\n :is=\"popperContainerOrPopoverComponent\"\n class=\"b-dropdown-options-container\"\n :aria-label=\"ariaLabel\"\n :class=\"conditionalClasses\"\n v-bind=\"popperContainerOrPopoverProps\"\n >\n <div @keydown.esc=\"onEscapeKey\">\n <bento-listbox\n :id=\"id\"\n ref=\"dropdownOptionsListboxRef\"\n :aria-label=\"ariaLabel\"\n class=\"b-dropdown-options-container__listbox\"\n :class=\"conditionalListboxClasses\"\n :empty-state=\"emptyState\"\n :is-option-disabled=\"isOptionDisabled\"\n :items=\"items\"\n :selected-value=\"internalSelectedValue\"\n :multiple=\"multiple\"\n :static-categories=\"staticCategories\"\n :no-results-message=\"noResultsMessage\"\n :searching=\"searching\"\n :loading=\"loading\"\n :lazy-load-type=\"lazyLoadType\"\n :has-more-items=\"hasMoreItems\"\n :virtual-scroll=\"virtualScroll\"\n v-on=\"listeners\"\n >\n <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n <slot :name=\"innerSlot\" v-bind=\"scope\" />\n </template>\n </bento-listbox>\n </div>\n </component>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, defineComponent, PropType, ref, toRefs, useSlots } from 'vue';\n import { BentoListbox } from '@/internal';\n import { BentoListboxEvent, BentoListboxIsOptionDisabled, BentoListboxOptions } from '@/types';\n import { PopperContainer } from '@/components/popper-container';\n import {\n BentoDropdownEmptyStateProps,\n BentoDropdownEvent,\n BentoDropdownLazyLoadType,\n BentoDropdownVirtulisationOptions,\n } from '../../dropdown.types';\n import { useI18n } from '@/utils/ts/i18n';\n import { BentoPopover } from '@/components/popover';\n import { useDropdownOptionsListbox } from './composables/use-dropdown-options-listbox';\n import { generateUid } from '@/core/utils/ts';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const slots = useSlots();\n\n const emit = defineEmits([]);\n\n const props = defineProps({\n /**\n * Defines a string value that labels an interactive element.\n */\n ariaLabel: { type: String, default: null },\n\n /**\n * Empty state props used with the inner empty state component which is displayed when no search results are found.\n */\n emptyState: {\n type: Object as PropType<BentoDropdownEmptyStateProps>,\n default: undefined,\n },\n\n /**\n * Disables dropdown functionality\n */\n disabled: { type: Boolean, default: false },\n\n /**\n * Indicates whether there are more items to load\n */\n hasMoreItems: { type: Boolean, default: false },\n\n /**\n * Identifies the listbox whose contents are controlled by the the combobox on which the aria-controls attribute is set.\n */\n id: { type: String, required: true },\n\n /**\n * Function that allows the options to be disabled\n *\n * @type {BentoDropdownIsOptionDisabled}\n * @param {BentoDropdownOptionItem} option - Dropdown option object\n * @param {string} option.label - Option's label text\n * @param {string|number} option.value - Option's value\n * @param {unknown} option.data - Option's extra data to be passed to the default slot\n */\n isOptionDisabled: {\n type: Function as PropType<BentoListboxIsOptionDisabled>,\n default: undefined,\n },\n\n /**\n * The option elements to populate the dropdown with.\n * It must be an array of {@see BentoDropdownOptionItem }\n * * @property {string} value.label - Text to be displayed in the option\n * * @property {string,number} value.value - Value of the option\n */\n items: {\n type: Array as PropType<BentoListboxOptions>,\n required: true,\n },\n\n /**\n * The type of `Lazy Load`.\n * Type \"automatic\" will enable infinite scrolling\n * Type \"button\" will enable lazy loading with \"Show more\" button\n */\n lazyLoadType: {\n type: String as PropType<BentoDropdownLazyLoadType | `${BentoDropdownLazyLoadType}`>,\n default: BentoDropdownLazyLoadType.AUTOMATIC,\n validator: (value: BentoDropdownLazyLoadType) => Object.values(BentoDropdownLazyLoadType).includes(value),\n },\n\n /**\n * Indicates if new options are loading.\n */\n loading: { 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 container can be displayed.\n */\n open: { type: Boolean, required: true },\n\n /**\n * The `input` value.\n * Providing an empty string or empty array will select no options.\n * Set to an empty string `''` if you don't want any of the available options to be selected for single select\n */\n selectedValue: {\n type: Array as PropType<BentoListboxOptions>,\n default: null,\n },\n\n /**\n * Flag that indicates that an external search it's being made\n * to filter out the items inside the the multi-select listbox\n *\n * If enabled, hides the \"Select all\" checkbox in \"multiple\" mode.\n */\n searching: BentoListbox.props.searching,\n\n /**\n * If enabled, dropdown will display non-selectable, static categories\n */\n staticCategories: { type: Boolean, default: false },\n\n /**\n * Reference to the DOM element or Vue component for positioning\n * the Dropdown container.\n */\n targetElement: { type: PopperContainer.props.targetElement.type, required: true },\n\n /**\n * Enables virtual scrolling if set to true or by providing an object with itemHeight function.\n * The itemHeight function is used to calculate the height of rendered item given it's index.\n */\n virtualScroll: {\n type: [Boolean, Object] as PropType<BentoDropdownVirtulisationOptions>,\n default: false,\n },\n });\n\n const { selectedValue, multiple } = toRefs(props);\n const dropdownOptionsListboxRef = ref(null);\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const isDropdownOpen = computed(() => props.open && !props.disabled);\n const noResultsMessage = computed(() => t('noOptionsMatchThisSearch') as string);\n\n const conditionalClasses = computed(() => ({\n 'b-dropdown-options-container--single': !props?.multiple,\n }));\n\n const conditionalListboxClasses = computed(() => ({\n 'b-dropdown-options-container__listbox--single': !props?.multiple,\n }));\n\n const { actions, internalSelectedValue, listeners, onEscapeKey, onOutsideDropdownClick } =\n useDropdownOptionsListbox(selectedValue, multiple, isDropdownOpen, emit);\n\n // Use different components depending on if the dropdown is a single or multi-select\n const popperContainerOrPopoverComponent = computed(() => (props?.multiple ? BentoPopover : PopperContainer));\n\n const popperContainerOrPopoverProps = computed(() => {\n const containerMinAndMaxWidth = {\n 'min-width': `${(props?.targetElement as HTMLElement)?.clientWidth}px`,\n 'max-width': 'min(500px, 95%)',\n };\n\n return props?.multiple\n ? ({\n actionsLayout: 'space-between',\n actions: actions.value,\n divider: true,\n fallbackPosition: ['top-start'],\n id: generateUid(`dropdown-options-${props.id}`),\n open: props.open,\n position: 'bottom-start',\n style: {\n width: 'auto',\n ...containerMinAndMaxWidth,\n },\n targetElement: props.targetElement,\n } as InstanceType<typeof BentoPopover>['$props'])\n : ({\n fallbackPosition: ['top-start'],\n offset: [0, 8],\n position: 'bottom-start',\n style: {\n display: isDropdownOpen.value ? 'block' : 'none',\n ...containerMinAndMaxWidth,\n },\n targetElement: props.targetElement,\n } as InstanceType<typeof PopperContainer>['$props']);\n });\n\n defineExpose({\n onOutsideDropdownClick,\n });\n</script>\n\n<script lang=\"ts\">\n /**\n * Dropdown options container.\n * It lists all the available options.\n *\n * @example\n * <bento-dropdown-options-container\n * v-if=\"inputContainerRef\" <!-- Ref to the input to match the width -->\n * :id=\"dropdownOptionsContainerId\"\n * :target-element=\"inputContainerRef\"\n * :aria-label=\"ariaLabel\"\n * :open=\"isDropdownOpen\"\n * :disabled=\"disabled\"\n * :multiple=\"multiple\"\n * :selected=\"value\"\n * :isOptionDisabled=\"option => option.value === 2\"\n * :items=\"[{\n * { label: 'Option 1', value: 1 },\n * { label: 'Option 2', value: 2 },\n * }]\"\n * @select=\"onOptionSelected\"\n * />\n */\n export default defineComponent({\n i18n: { messages },\n name: 'bento-dropdown-options-container',\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-options-container.scss\" />\n","\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M5.00011 5.43922L8.00011 8.43922L11.0001 5.43922L12.0608 6.49988L8.00011 10.5605L3.93945 6.49988L5.00011 5.43922Z\"/></svg>\n</template>\n<script>\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n<style>\n @import '../css/main.css';\n</style>\n","\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M10.9999 10.5608L7.9999 7.56077L4.9999 10.5608L3.93924 9.50011L7.9999 5.43945L12.0606 9.50011L10.9999 10.5608Z\"/></svg>\n</template>\n<script>\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n<style>\n @import '../css/main.css';\n</style>\n","<template>\n <div class=\"b-dropdown-small-textbox\" :class=\"conditionalClasses\">\n <dropdown-base-textbox\n v-bind=\"{ ...$attrs, ...$props }\"\n class=\"b-dropdown-small-textbox__textbox\"\n :size=\"BentoDropdownSize.SMALL\"\n v-on=\"listeners\"\n >\n <template #icon>\n <div class=\"b-dropdown-small-textbox__chevron\">\n <chevron-up-small-icon v-show=\"isDropdownOpen\" svg-title=\"opened\" />\n <chevron-down-small-icon v-show=\"!isDropdownOpen\" svg-title=\"closed\" />\n </div>\n </template>\n </dropdown-base-textbox>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import {\n DropdownBaseTextboxEvent,\n DropdownBaseTextboxState,\n } from '@/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.types';\n import { BentoDropdownSize } from '@/components/dropdown/dropdown.types';\n import { Booleanish } from '@/types';\n import DropdownBaseTextbox from '@/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue';\n import ChevronDownSmallIcon from '@adyen/ui-assets-icons-16/vue/chevron-down-small';\n import ChevronUpSmallIcon from '@adyen/ui-assets-icons-16/vue/chevron-up-small';\n import { stopEventPropagation } from '@/utils/ts/events';\n\n const emit = defineEmits([\"clear\", \"close\", \"input\", \"keydown\", \"open\"]);\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: { 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. 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: { 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 * 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 const conditionalClasses = computed(() => ({\n [`b-dropdown-small-textbox--${DropdownBaseTextboxState.DISABLED}`]: props.disabled,\n [`b-dropdown-small-textbox--${DropdownBaseTextboxState.READONLY}`]: props.readonly,\n [`b-dropdown-small-textbox--${DropdownBaseTextboxState.OPENED}`]: props.open,\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 in its small variant used in the dropdown component.\n */\n export default defineComponent({\n name: 'dropdown-small-textbox',\n inheritAttrs: false,\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown-small-textbox.scss\" />\n","import { computed, Ref } from 'vue';\nimport { UseDisplayValueOptions } from './use-display-value.types';\nimport { BentoListboxOptions } from '@/types';\n\n/**\n * Generates the `displayValue` for the Category Multi Select based on\n * the selection, the placeholder or it can be empty if there's nothing to show.\n *\n * @param options Multi select options\n * @returns The text to be displayed by the dropdown\n */\nconst categoryMultiSelect = (selectedValues: Ref<BentoListboxOptions>, items: Ref<BentoListboxOptions>) =>\n items.value\n .reduce((acc, option) => {\n // Category items\n if (option.items) {\n const selectedCategoryOptions = option.items.filter(categoryOption =>\n selectedValues.value.find(selectedOption => selectedOption.value === categoryOption.value)\n );\n\n // If the category is fully selected add the category name\n const isCategoryFullySelected = selectedCategoryOptions.length === option.items.length;\n if (isCategoryFullySelected) {\n acc.push(option.label);\n } else {\n // If category is partially selected add each selected option and category\n selectedCategoryOptions.forEach(({ label }) => acc.push(label));\n }\n }\n\n // Non-category option\n if (selectedValues.value.find(selectedOption => selectedOption.value === option.value)) {\n acc.push(option.label);\n }\n\n return acc;\n }, [])\n .join(', ');\n\n/**\n * Generates the `displayValue` for the Dropdown based on\n * the selection, the placeholder or it can be empty if there's nothing to show.\n *\n * When there is a selected value but the value is not present in the list, the\n * value is then returned as there is no way to know what the text/label is.\n *\n * @param options Options needed to calculate the display value based on the type of Dropdown (single, multi, category)\n * @returns The text to be displayed by the dropdown\n */\nexport const useDisplayValue = ({ items, placeholder, selectedValues, isMultiSelect }: UseDisplayValueOptions) => {\n const isCategoryMultilevel = computed(\n () => isMultiSelect.value && items.value.find(option => option.items?.length)\n );\n\n const displayValue = computed(() => {\n // If no value selected, return placeholder or nothing\n if (!selectedValues.value.length) {\n return placeholder.value || null;\n }\n\n // Category multi select\n if (isCategoryMultilevel.value) {\n return categoryMultiSelect(selectedValues, items);\n }\n\n return selectedValues.value.map(({ label }) => label).join(', ');\n });\n\n return displayValue;\n};\n","import { BentoKeyboardNavigationKeyDownEvent } from '@/types';\nimport { BentoListboxEvent } from '@/types/listbox';\nimport { computed, nextTick, Ref } from 'vue';\nimport {\n UseListboxKeyboardNavigationOptions,\n UseTextboxKeyboardNavigationOptions,\n} from './use-keyboard-navigation.types';\n\n/**\n * Returns the focus to the textbox of the dropdown if it exists\n * when the dropdown is being closed.\n * @param elementToFocusOn Reference to the input container\n */\nconst focusOnTextbox = (elementToFocusOn: Ref) => {\n elementToFocusOn.value.$children?.[0].$refs.textbox.focus();\n};\n\n/**\n * Controls the keyboard navigation inside the Dropdown's textbox for Single and Multi select.\n * Adds support for the keys:\n *\n * - Arrow up\n * - Arrow Down\n * - End key\n * - Home key\n * - Escape key\n * - Space key\n * - Enter Key\n *\n * @param options Options from the Dropdown to handle the navigation\n * @param toggleDropdown Function to open/close the Dropdown\n * @param openDropdown Function to open the Dropdown\n * @param closeDropdown Function to close the Dropdown\n * @returns List of event listeners available to the Dropdown's textbox\n */\nexport const useTextboxKeyboardNavigation = (\n {\n inputContainerRef,\n optionsContainerRef,\n selectedValueIndex,\n isDropdownOpen,\n isDynamicFltering,\n items,\n isMultiple,\n }: UseTextboxKeyboardNavigationOptions,\n toggleDropdown: () => void,\n openDropdown: () => void,\n closeDropdown: () => void\n) => {\n const onArrowDown = ({ detail: event }) => {\n event.preventDefault();\n\n if (!isDropdownOpen.value) {\n openDropdown();\n }\n\n // user may click on the dropdown via mouse, then use arrow keys - dropdown already open\n // this ensure it works when use first navigate to dropdown via mouse or arrow keys\n nextTick(() => {\n if (isMultiple) {\n optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[0].$el.focus();\n } else {\n // ensures focus management in listbox is in-sync\n optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.setListboxFocusedIndex(\n selectedValueIndex.value\n );\n\n optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.listboxItemRef[\n selectedValueIndex.value\n ].$el.focus();\n }\n });\n };\n const onArrowUp = ({ detail: event }) => {\n event.preventDefault();\n\n if (!isDropdownOpen.value) {\n openDropdown();\n }\n\n // user may click on the dropdown via mouse, then use arrow keys - dropdown already open\n // ensures it works when use first navigate to dropdown via mouse or arrow keys\n nextTick(() => {\n // ensures focus management in listbox is in-sync\n optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.setListboxFocusedIndex(\n selectedValueIndex.value\n );\n\n optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.listboxItemRef[\n selectedValueIndex.value\n ].$el.focus();\n });\n };\n\n const onEndKey = () => {\n if (!isDropdownOpen.value) {\n openDropdown();\n nextTick(() => {\n if (isMultiple) {\n const firstLayer =\n optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children;\n optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[\n firstLayer.length - 1\n ].$children[items.length - 1].$el.focus();\n } else {\n optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[\n items.length - 1\n ].$el.focus();\n }\n });\n }\n };\n\n const onEscapeKey = () => {\n if (isDropdownOpen.value) {\n closeDropdown();\n focusOnTextbox(inputContainerRef);\n }\n };\n\n const onTab = () => {\n // tab should not navigate through a combobox\n if (isDropdownOpen.value) {\n closeDropdown();\n }\n };\n\n const onHomeKey = () => {\n if (!isDropdownOpen.value) {\n openDropdown();\n }\n nextTick(() => {\n optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[0].$el.focus();\n });\n };\n\n const onSpaceKey = ({ detail: event }) => {\n event.preventDefault();\n toggleDropdown();\n if (isDropdownOpen.value) {\n nextTick(() => {\n if (isMultiple) {\n optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[0].$el.focus();\n } else {\n optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[\n selectedValueIndex.value\n ].$el.focus();\n }\n });\n }\n };\n\n const onEnterKey = () => {\n toggleDropdown();\n if (isDropdownOpen.value) {\n nextTick(() => {\n if (isMultiple) {\n optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[0].$el.focus();\n } else {\n optionsContainerRef.value.$refs.dropdownOptionsListboxRef.$refs.listboxItemRef.$children?.[\n selectedValueIndex.value\n ].$el.focus();\n }\n });\n }\n };\n\n const textboxKeyboardNavigationListeners = computed(() => ({\n ...(!isDynamicFltering.value ? { [BentoKeyboardNavigationKeyDownEvent.SPACE]: onSpaceKey } : {}),\n [BentoKeyboardNavigationKeyDownEvent.ENTER]: onEnterKey,\n [BentoKeyboardNavigationKeyDownEvent.ARROW_DOWN]: onArrowDown,\n [BentoKeyboardNavigationKeyDownEvent.ARROW_UP]: onArrowUp,\n [BentoKeyboardNavigationKeyDownEvent.END]: onEndKey,\n [BentoKeyboardNavigationKeyDownEvent.ESCAPE]: onEscapeKey,\n [BentoKeyboardNavigationKeyDownEvent.HOME]: onHomeKey,\n [BentoKeyboardNavigationKeyDownEvent.TAB]: onTab,\n }));\n\n return textboxKeyboardNavigationListeners;\n};\n\n/**\n * Controls the keyboard navigation inside the Dropdown's listbox container for Single and Multi select.\n * Adds support for the keys:\n *\n * - Escape key\n * - Enter Key\n * - Tab\n * - Space key\n *\n * @param options Options from the Dropdown to handle the navigation inside the listbox\n * @param closeDropdown Function to close the Dropdown\n * @returns List of event listeners available to the Dropdown's listbox container\n */\nexport const useListboxKeyboardNavigation = (\n { inputContainerRef, isDropdownOpen }: UseListboxKeyboardNavigationOptions,\n closeDropdown: () => void\n) => {\n const closeDropdownAndFocusOnTextbox = () => {\n if (isDropdownOpen.value) {\n closeDropdown();\n }\n nextTick(() => {\n focusOnTextbox(inputContainerRef);\n });\n };\n\n const listboxKeyboardNavigationListeners = {\n [BentoListboxEvent.ENTER]: closeDropdownAndFocusOnTextbox,\n [BentoListboxEvent.ESCAPE]: closeDropdownAndFocusOnTextbox,\n [BentoListboxEvent.TAB]: closeDropdownAndFocusOnTextbox,\n [BentoListboxEvent.SPACE]: closeDropdownAndFocusOnTextbox,\n };\n\n return listboxKeyboardNavigationListeners;\n};\n","import { computed, ref, Ref, watch } from 'vue';\nimport { BentoSearchBarItem } from './search-bar.types';\n\n/**\n * Filters an array {@see BentoSearchBarData} containing elements of type {@see BentoSearchBarItem}\n * by the {@param searchTerm}.\n *\n * @param {Ref<String>} searchTerm - Text that satisfies the search criteria.\n * @param {Ref<BentoSearchBarData>} data - Array to be filtered by {@param searchTerm}\n * @returns {Ref<BentoSearchBarData>} New instance of the array filtered by the {@param searchTerm} text\n * @param {Ref<Boolean>} ignoreGroups - Boolean that determines if search returns items with subitems\n */\nexport function useSearchBarFilter<T extends BentoSearchBarItem>(\n searchTerm: Ref<string>,\n data: Ref<T[]>,\n searchEvent?: (searchValue: string) => void,\n ignoreGroups?: Ref<boolean>\n) {\n const searchTermRef = ref(searchTerm);\n const dataRef = ref(data);\n\n const findHits = (searchTermLowerCased: string, options: Array<BentoSearchBarItem> = []) =>\n options.flatMap(option => {\n if (option.label.toLocaleLowerCase().includes(searchTermLowerCased)) {\n if (ignoreGroups?.value && option.items) {\n return [...findHits(searchTermLowerCased, option.items)];\n }\n return [option, ...findHits(searchTermLowerCased, option.items)];\n }\n\n if (option.items) {\n return [...findHits(searchTermLowerCased, option.items)];\n }\n\n return [];\n });\n\n // If search event exists trigger it on the search term changing\n watch(searchTermRef, () => {\n if (searchEvent !== undefined) {\n searchEvent(searchTermRef.value);\n }\n });\n\n const filterInputData = computed(() => {\n if (!searchTermRef.value) {\n return dataRef.value;\n }\n // If search event exists, emit the new search value into the event and do not manipulate data.\n if (searchEvent !== undefined) {\n return dataRef.value;\n }\n\n const searchTermLowerCased = searchTermRef.value.toLocaleLowerCase();\n const filtered = findHits(searchTermLowerCased, dataRef.value);\n return filtered;\n });\n\n return filterInputData;\n}\n","export const INPUT_FIELD_COMPONENT_INJECTION_KEY = Symbol('input field component injection key');\nexport const INPUT_FIELD_HINT_INJECTION_KEY = Symbol('input field hint injection key');\n","<!-- TODO: Remove aria props as these are part of JSX elements /vue/types/jsx.d.ts -->\n<!-- eslint-disable vue/attribute-hyphenation -->\n<template>\n <div v-bento-click-outside-directive=\"clickOutsideDropdown\" class=\"b-dropdown\" :class=\"conditionalClasses\">\n <field-label\n v-if=\"label\"\n :id=\"labelId\"\n :condensed=\"condensed\"\n :label=\"label\"\n :tooltip-text=\"tooltipText\"\n :optional=\"optional\"\n :required=\"required\"\n />\n <div\n ref=\"inputContainerRefWrapper\"\n v-bento-keyboard-navigation-directive\n v-on=\"textboxKeyboardNavigationListeners\"\n >\n <component\n :is=\"size\"\n ref=\"inputContainerRef\"\n :condensed=\"condensed\"\n :value=\"searchTerm\"\n :additional-items-selected=\"additionalItemsSelected\"\n :ariaControls=\"dropdownOptionsContainerId\"\n :ariaExpanded=\"isDropdownOpen\"\n :aria-labelledby=\"label ? labelId : null\"\n :aria-describedby=\"ariaDescribedBy\"\n :aria-label=\"computedAriaLabel\"\n :aria-readonly=\"isReadOnly\"\n :readonly=\"isReadOnly\"\n :disabled=\"disabled\"\n :display-value=\"displayValue\"\n :dynamic-filtering=\"dynamicFiltering\"\n :is-invalid=\"!!errorMessage || error\"\n :multiple=\"multiple\"\n :open=\"isDropdownOpen\"\n :selected-value-item=\"!isInputComponent ? selectedValueItem : undefined\"\n :show-slot-content-in-multiple=\"showSlotContentInMultiple\"\n @input=\"searchTerm = $event\"\n @open=\"toggleDropdown\"\n @close=\"toggleDropdown\"\n >\n <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n <slot :name=\"innerSlot\" v-bind=\"scope\" />\n </template>\n </component>\n </div>\n <bento-dropdown-options-container\n v-if=\"inputContainerRef\"\n :id=\"dropdownOptionsContainerId\"\n ref=\"optionsContainerRef\"\n :aria-label=\"computedAriaLabel\"\n :empty-state=\"emptyState\"\n :debounce-time=\"search?.debounceTime\"\n :disabled=\"disabled\"\n :is-option-disabled=\"isOptionDisabled\"\n :items=\"filteredItems\"\n :multiple=\"multiple\"\n :static-categories=\"staticCategories\"\n :open=\"isDropdownOpen\"\n :selected-value=\"cachedSelectedListboxOptions\"\n :searching=\"isSearching\"\n :target-element=\"inputContainerRefWrapper\"\n :loading=\"loading\"\n :has-more-items=\"hasMoreItems\"\n :lazy-load-type=\"lazyLoadType\"\n :virtual-scroll=\"virtualScroll\"\n v-on=\"listboxListeners\"\n >\n <template v-for=\"(_, innerSlot) of slots\" #[innerSlot]=\"scope\">\n <slot :name=\"innerSlot\" v-bind=\"scope\" />\n </template>\n </bento-dropdown-options-container>\n <error-message\n v-if=\"!!errorMessage\"\n :id=\"errorId\"\n :error-message=\"errorMessage\"\n class=\"b-dropdown__error-message\"\n />\n <bento-typography\n v-if=\"description || hasSlot('description')\"\n :id=\"descriptionId\"\n class=\"b-dropdown__description\"\n :class=\"descriptionConditionalClasses\"\n el=\"span\"\n >\n <slot name=\"description\">\n {{ description }}\n </slot>\n </bento-typography>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, defineComponent, inject, PropType, Ref, ref, toRef, toRefs, useAttrs, useSlots } from 'vue';\n\n // Components\n import { BentoDropdownOptionsContainer } from './components/dropdown-options-container';\n import { BentoTypography } from '@/components/typography';\n import { DropdownInputDefault, DropdownInputSmall } from './components';\n import { BentoListbox, ErrorMessage, FieldLabel, useCachedSelectedValues, useMultiLevelItems } from '@/internal';\n\n // Utils\n import { deprecate } from '@/utils/ts/deprecate';\n import { generateUid } from '@/core/utils/ts';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n import { useI18n } from '@/utils/ts/i18n';\n\n // Composables\n import { useDisplayValue, useListboxKeyboardNavigation, useTextboxKeyboardNavigation } from './composables';\n\n import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n import { useSearchBarFilter } from '@/components/search-bar/useSearchBarDataFilter';\n\n // Directives\n import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside';\n import { BentoKeyboardNavigationDirective as vBentoKeyboardNavigationDirective } from '@/directives';\n\n // Types\n import {\n BentoDropdownEmptyStateProps,\n BentoDropdownEvent,\n BentoDropdownLazyLoadType,\n BentoDropdownSearchOptions,\n BentoDropdownSize,\n BentoDropdownVirtulisationOptions,\n } from './dropdown.types';\n import {\n BentoListboxEvent,\n BentoListboxIsOptionDisabled,\n BentoListboxMultiSelectValue,\n BentoListboxOptions,\n BentoListboxSelectedValue,\n } from '@/types';\n\n import messages from './messages.json';\n import { useHasSlot } from '@/composables';\n import { INPUT_FIELD_COMPONENT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const attrs = useAttrs();\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n const props = defineProps({\n /**\n * @deprecated from version 2.0.0. Use the aria-label attribute instead.\n */\n /**\n * Defines a string value that labels an interactive element.\n */\n ariaLabel: { type: String, default: null },\n\n /**\n * Renders the dropdown with a condensed style.\n */\n condensed: { type: Boolean, default: false },\n\n /**\n * Empty state props used with the inner empty state component which is displayed when no search results are found.\n */\n emptyState: {\n type: Object as PropType<BentoDropdownEmptyStateProps>,\n default: undefined,\n },\n\n /**\n * Disables dropdown functionality.\n */\n disabled: { type: Boolean, default: false },\n\n /**\n * Sets the possibility to type into the textbox.\n */\n dynamicFiltering: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Highlights the dropdown in an erroneous state.\n *\n * @deprecated Use \"errorMessage\" prop instead\n */\n error: { type: Boolean, default: false },\n\n /**\n * Highlights the dropdown in an erroneous state with an error message.\n */\n errorMessage: { type: String, default: null },\n\n /**\n * Descriptive supporting text visbile underneath the dropdown.\n */\n description: { type: String, default: null },\n\n /**\n * Indicates whether there are more items to load\n */\n hasMoreItems: { type: Boolean, default: false },\n\n /**\n * Function that dertermines which options are disabled from interaction.\n *\n * @type {BentoListboxIsOptionDisabled}\n * @param {BentoListboxOptionItem} option - Dropdown option object\n * @param {string} option.label - Option's label text\n * @param {string|number} option.value - Option's value\n * @param {unknown} option.data - Option's extra data to be passed to the default slot\n */\n isOptionDisabled: {\n type: Function as PropType<BentoListboxIsOptionDisabled>,\n default: undefined,\n },\n\n /**\n * The option elements to populate the dropdown with.\n * It must be an array of {@see BentoListboxOptionItem }\n * * @property {string} value.label - Text to be displayed in the option\n * * @property {string,number} value.value - Value of the option\n */\n items: {\n type: Array as PropType<BentoListboxOptions>,\n default: () => [],\n },\n\n /**\n * Text that is displayed as a label above the element.\n */\n label: { type: String, default: null },\n\n /**\n * Indicates if new options are loading.\n */\n loading: { type: Boolean, default: false },\n\n /**\n * The type of `Lazy Load`.\n * Type \"automatic\" will enable infinite scrolling\n * Type \"button\" will enable lazy loading with \"Show more\" button\n */\n lazyLoadType: {\n type: String as PropType<BentoDropdownLazyLoadType | `${BentoDropdownLazyLoadType}`>,\n default: BentoListbox.props.lazyLoadType.default,\n validator: (value: BentoDropdownLazyLoadType) => Object.values(BentoDropdownLazyLoadType).includes(value),\n },\n\n /*\n * If enabled, the user will be able to select multiple items.\n */\n multiple: { type: Boolean, default: false },\n\n /**\n * Highlights the dropdown is optional.\n */\n optional: { type: Boolean, default: false },\n\n /**\n * Text that appears in the form control when it has no value set\n */\n placeholder: { type: String, default: null },\n\n /**\n * Sets the dropdown to readonly state\n */\n readonly: { type: Boolean, default: false },\n\n /**\n * Highlights the dropdown is required.\n */\n required: { type: Boolean, default: false },\n\n /**\n * Dropdown search options and events.\n * @see BentoDropdownSearchOptions\n */\n search: {\n type: Object as PropType<BentoDropdownSearchOptions>,\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 * @deprecated Do not use. Only 'default' size should be used.\n */\n size: {\n type: String as PropType<BentoDropdownSize | `${BentoDropdownSize}`>,\n default: null,\n validator: (value: BentoDropdownSize) => Object.values(BentoDropdownSize).includes(value),\n },\n\n /**\n * If enabled, dropdown will display non-selectable, static categories\n */\n staticCategories: { type: Boolean, default: false },\n\n /**\n * Adds a info icon next to the label to display the passed tooltip message.\n */\n tooltipText: { type: String, default: null },\n\n /**\n * The `input` value.\n * Providing an empty string will select no options.\n * Set to an empty string `''` if you don't want any of the available options to be selected.\n */\n value: {\n type: [String, Number, Array] as PropType<BentoListboxSelectedValue>,\n default: null,\n },\n\n /**\n * Enables virtual scrolling if set to true or by providing an object with itemHeight function.\n * The itemHeight function is used to calculate the height of rendered item given it's index.\n */\n virtualScroll: {\n type: [Boolean, Object] as PropType<BentoDropdownVirtulisationOptions>,\n default: false,\n },\n });\n\n const emit = defineEmits([\"input\", \"show-more\"]);\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const inputContainerRef = ref(null);\n const inputContainerRefWrapper = ref(null);\n const optionsContainerRef: Ref<InstanceType<typeof BentoDropdownOptionsContainer>> = ref(null);\n const isDropdownOpen = ref(false);\n const dropdownOptionsContainerId = generateUid('bento-dropdown-options-container');\n const labelId = generateUid('dropdown-label');\n const descriptionId = generateUid('dropdown-description');\n const errorId = generateUid('dropdown-error');\n\n const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n const { cachedSelectedListboxOptions, cachedListboxSelectedValues, setCachedValues } = useCachedSelectedValues(\n toRef(props, 'items'),\n toRef(props, 'value'),\n toRef(props, 'multiple')\n );\n\n const ariaLabelAttribute = ref(attrs['aria-label']);\n const { ariaLabel, label } = toRefs(props);\n const computedAriaLabel = useAriaLabel({\n // TODO: take ariaLabel ref away when aria-label prop is removed\n ariaLabel: ariaLabel || (ariaLabelAttribute as Ref<string>),\n label,\n defaultFallback: t('ariaLabelFallback'),\n });\n\n // Inject input field component key to change the dropdown size\n const isInputComponent =\n props.size === BentoDropdownSize.SMALL || inject(INPUT_FIELD_COMPONENT_INJECTION_KEY, false);\n const size = computed(() => (isInputComponent ? BentoDropdownSize.SMALL : BentoDropdownSize.DEFAULT));\n\n const conditionalClasses = computed(() => ({\n 'b-dropdown--condensed': props.condensed,\n }));\n\n // Description styles\n const descriptionConditionalClasses = computed(() => ({\n 'b-dropdown__description--error': !!props.errorMessage,\n }));\n\n // Filtering\n const searchTerm = ref('');\n const items = toRef(props, 'items');\n const staticCategories = toRef(props, 'staticCategories');\n const filteredItems = useSearchBarFilter(searchTerm, items, props?.search?.searchEvent, staticCategories);\n const isSearching = computed(() => props.dynamicFiltering && !!searchTerm.value);\n\n const displayValue = useDisplayValue({\n items,\n placeholder: toRef(props, 'placeholder'),\n isMultiSelect: toRef(props, 'multiple'),\n selectedValues: cachedSelectedListboxOptions,\n });\n\n const selectedValueItem = computed(() => {\n if (props?.multiple && Array.isArray(props.value)) {\n return props.items.filter(\n ({ value }) => props?.value && (props?.value as BentoListboxMultiSelectValue).includes(value)\n );\n }\n if (!props.multiple && props.staticCategories) {\n // Find the category that holds the selected value\n const category = props.items.find(categoryItem =>\n categoryItem.items.some(item => item.value === props.value)\n );\n // Find the specific item within the category\n const selectedCategoryItem = category ? category.items.find(item => item.value === props.value) : null;\n\n return selectedCategoryItem;\n }\n\n return props.items.find(({ value }) => value === props?.value);\n });\n\n const selectedValueIndex = computed(() => {\n const index = props.items.findIndex(({ value }) => props.value === value);\n return index > 0 ? index : 0;\n });\n\n const { isMultiLevelSelect, flattenedItemsList } = useMultiLevelItems(items);\n\n const additionalItemsSelected = computed(() => {\n if (props.multiple) {\n const selectedItems = (props?.value as BentoListboxMultiSelectValue)?.length;\n const total = isMultiLevelSelect.value ? flattenedItemsList.value.length : items.value.length;\n\n // Display count always - show \"all\" only when is not external filtering (hasMoreItems = true)\n return !props.hasMoreItems && total === selectedItems ? t('all') : selectedItems;\n }\n\n return null;\n });\n\n // ARIA\n const ariaDescribedBy = computed(\n () => `${props.description ? descriptionId : ''} ${props.errorMessage ? errorId : ''}`.trim() || null\n );\n\n const openDropdown = () => {\n if (isReadOnly.value) {\n return;\n }\n isDropdownOpen.value = true;\n };\n\n const closeDropdown = () => {\n isDropdownOpen.value = false;\n };\n\n const toggleDropdown = () => {\n if (isReadOnly.value) {\n return;\n }\n isDropdownOpen.value = !isDropdownOpen.value;\n\n // Clear search\n if (isSearching.value) {\n searchTerm.value = '';\n }\n };\n\n const clickOutsideDropdown = () => {\n if (isSearching.value) {\n searchTerm.value = '';\n }\n\n if (isDropdownOpen.value) {\n isDropdownOpen.value = false;\n // Reset the internal dropdown options state\n optionsContainerRef.value.onOutsideDropdownClick();\n }\n };\n\n const onOptionSelected = (selectedValue: BentoListboxOptions) => {\n // Clear and close the dropdown on single selection\n if (!props.multiple) {\n searchTerm.value = '';\n isDropdownOpen.value = false;\n }\n\n setCachedValues(selectedValue);\n emit('input', cachedListboxSelectedValues.value);\n };\n\n const emitShowMoreEvent = () => {\n emit(BentoDropdownEvent.SHOW_MORE);\n };\n\n const textboxKeyboardNavigationListeners = useTextboxKeyboardNavigation(\n {\n inputContainerRef,\n optionsContainerRef,\n selectedValueIndex,\n isDropdownOpen,\n isDynamicFltering: toRef(props, 'dynamicFiltering'),\n items: props.items,\n isMultiple: props.multiple,\n },\n toggleDropdown,\n openDropdown,\n closeDropdown\n );\n\n const listboxKeyboardNavigationListeners = useListboxKeyboardNavigation(\n {\n inputContainerRef,\n isDropdownOpen,\n },\n closeDropdown\n );\n\n const listboxListeners = {\n [BentoListboxEvent.CLOSE_DROPDOWN]: closeDropdown,\n [BentoListboxEvent.SELECT]: onOptionSelected,\n [BentoListboxEvent.SHOW_MORE]: emitShowMoreEvent,\n ...listboxKeyboardNavigationListeners,\n };\n\n if (props.error) {\n deprecate(\n 'BentoDropdown \"error\" property',\n `Use the BentoDropdown \"errorMessage\" property instead to indicate that there is a modifier error.\n Having the field as \"undefined\" will hide/remove the error.\n <bento-dropdown errorMessage=\"Error message text\" />`,\n '2.0.0'\n );\n }\n\n if (props.size) {\n deprecate('BentoDropdown \"size\" property', `Do not use. Only 'default' size should be used.`, '2.0.0');\n }\n\n const focus = () => {\n inputContainerRef.value.focus();\n };\n\n defineExpose({\n focus,\n });\n</script>\n\n<script lang=\"ts\">\n /**\n * A Dropdown shows a selected option's.\n * Use a dropdown when you want users to select options\n * from a list of pre-defined options.\n *\n * @example\n * import { BentoDropdown } from '@adyen/bento-vue2';\n * import type { BentoDropdownOptions } from '@adyen/bento-vue2'\n *\n * export default {\n * components: { BentoDropdown },\n * template: `\n * <bento-dropdown\n * v-model=\"selectedValue\"\n * :disabled=\"false\"\n * :multiple=\"true\"\n * :isOptionsDisabled=\"option => option.value === 2\"\n * :items=\"options\"\n * />\n * `,\n * setup() {\n * const selectedValue = ref(2) // Default value\n * const options: BentoDropdownOptions = [\n * { label: 'Option 1', value: 1 },\n * { label: 'Option 2', value: 2 },\n * ];\n * return { options, selectedValue };\n * }\n * }\n */\n export default defineComponent({\n i18n: { messages },\n name: 'b-dropdown',\n components: {\n DropdownInputDefault,\n DropdownInputSmall,\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./dropdown.scss\" />\n"],"names":["useDropdownOptionsListbox","selectedValue","multiple","isOpen","emit","internalSelectedValue","ref","t","useI18n","watch","isApplyButtonDisabled","computed","onApplyClick","BentoListboxEvent","onCancelClick","onOutsideDropdownClick","actions","onOptionSelected","newSelectedValue","onTabKey","onEnterKey","onSpaceKey","onEscapeKey","emitShowMoreEvent","listeners","__default__$2","defineComponent","messages$1","slots","useSlots","toRefs","props","dropdownOptionsListboxRef","isDropdownOpen","noResultsMessage","conditionalClasses","conditionalListboxClasses","popperContainerOrPopoverComponent","BentoPopover","PopperContainer","popperContainerOrPopoverProps","containerMinAndMaxWidth","_a","generateUid","expose","uuid$1","_sfc_main$3","uuid","_sfc_main$2","__default__$1","DropdownBaseTextboxState","onInput","newInput","onKeyDown","e","openDropdown","stopEventPropagation","closeDropdown","clearValue","DropdownBaseTextboxEvent","categoryMultiSelect","selectedValues","items","acc","option","selectedCategoryOptions","categoryOption","selectedOption","label","useDisplayValue","placeholder","isMultiSelect","isCategoryMultilevel","focusOnTextbox","elementToFocusOn","useTextboxKeyboardNavigation","inputContainerRef","optionsContainerRef","selectedValueIndex","isDynamicFltering","isMultiple","toggleDropdown","onArrowDown","event","nextTick","onArrowUp","onEndKey","firstLayer","_b","onTab","onHomeKey","BentoKeyboardNavigationKeyDownEvent","useListboxKeyboardNavigation","closeDropdownAndFocusOnTextbox","useSearchBarFilter","searchTerm","data","searchEvent","ignoreGroups","searchTermRef","dataRef","findHits","searchTermLowerCased","options","INPUT_FIELD_COMPONENT_INJECTION_KEY","INPUT_FIELD_HINT_INJECTION_KEY","__default__","messages","DropdownInputDefault","DropdownInputSmall","attrs","useAttrs","hasSlot","useHasSlot","inputContainerRefWrapper","dropdownOptionsContainerId","labelId","descriptionId","errorId","isReadOnly","useFormLayoutFieldLoading","toRef","cachedSelectedListboxOptions","cachedListboxSelectedValues","setCachedValues","useCachedSelectedValues","ariaLabelAttribute","ariaLabel","computedAriaLabel","useAriaLabel","isInputComponent","BentoDropdownSize","inject","size","descriptionConditionalClasses","staticCategories","filteredItems","isSearching","displayValue","selectedValueItem","value","category","categoryItem","item","index","isMultiLevelSelect","flattenedItemsList","useMultiLevelItems","additionalItemsSelected","selectedItems","total","ariaDescribedBy","clickOutsideDropdown","textboxKeyboardNavigationListeners","listboxKeyboardNavigationListeners","listboxListeners","deprecate","focus"],"mappings":"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","x_google_ignoreList":[2,3]}