@adyen/bento-vue3 1.53.0 → 1.54.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 (214) hide show
  1. package/dist/@types/index.d.ts +1851 -2155
  2. package/dist/action-bar.js +1 -1
  3. package/dist/assets/accordion-item.css +1 -1
  4. package/dist/assets/action-bar.css +1 -1
  5. package/dist/assets/base-modal.css +1 -1
  6. package/dist/assets/button-actions.css +1 -1
  7. package/dist/assets/calendar.css +1 -1
  8. package/dist/assets/card.css +1 -1
  9. package/dist/assets/checkbox.css +1 -1
  10. package/dist/assets/data-grid.css +1 -1
  11. package/dist/assets/dialog-page.css +1 -1
  12. package/dist/assets/dropdown.css +1 -1
  13. package/dist/assets/file-uploader.css +1 -1
  14. package/dist/assets/filter-bar.css +1 -1
  15. package/dist/assets/input-field-password.css +1 -1
  16. package/dist/assets/inspector.css +1 -1
  17. package/dist/assets/link.css +1 -1
  18. package/dist/assets/menu.css +1 -1
  19. package/dist/assets/modal-fullscreen.css +1 -1
  20. package/dist/assets/pagination.css +1 -1
  21. package/dist/assets/payment-method.css +1 -1
  22. package/dist/assets/popover.css +1 -1
  23. package/dist/assets/sidepanel.css +1 -1
  24. package/dist/assets/summary-grid.css +1 -0
  25. package/dist/assets/tabs.css +1 -1
  26. package/dist/assets/textarea.css +1 -1
  27. package/dist/button.js +1 -1
  28. package/dist/card.js +1 -1
  29. package/dist/checkbox.js +2 -2
  30. package/dist/chunks/{action-bar.PIz6tShf.js → action-bar.CUDi5Po7.js} +5 -5
  31. package/dist/chunks/{action-bar.PIz6tShf.js.map → action-bar.CUDi5Po7.js.map} +1 -1
  32. package/dist/chunks/{base-modal.D4INiJGX.js → base-modal.BegK8cPb.js} +3 -3
  33. package/dist/chunks/{base-modal.D4INiJGX.js.map → base-modal.BegK8cPb.js.map} +1 -1
  34. package/dist/chunks/{button-actions-with-menu.DFD7gbdT.js → button-actions-with-menu.CcoKss9T.js} +5 -5
  35. package/dist/chunks/{button-actions-with-menu.DFD7gbdT.js.map → button-actions-with-menu.CcoKss9T.js.map} +1 -1
  36. package/dist/chunks/{button-actions.BvGAE7sw.js → button-actions.CdlXZ29B.js} +59 -117
  37. package/dist/chunks/{button-actions.BvGAE7sw.js.map → button-actions.CdlXZ29B.js.map} +1 -1
  38. package/dist/chunks/{calendar.DKHNrb9_.js → calendar.BRsV4rkQ.js} +72 -72
  39. package/dist/chunks/{calendar.DKHNrb9_.js.map → calendar.BRsV4rkQ.js.map} +1 -1
  40. package/dist/chunks/{card.IrL_Fw-f.js → card.C5bSqYsB.js} +2 -2
  41. package/dist/chunks/{card.IrL_Fw-f.js.map → card.C5bSqYsB.js.map} +1 -1
  42. package/dist/chunks/{checkbox-group.X2fi2jkS.js → checkbox-group.EPDS2n3a.js} +4 -4
  43. package/dist/chunks/{checkbox-group.X2fi2jkS.js.map → checkbox-group.EPDS2n3a.js.map} +1 -1
  44. package/dist/chunks/{checkbox.CXZQtFhM.js → checkbox.Z2Jeglk-.js} +52 -52
  45. package/dist/chunks/checkbox.Z2Jeglk-.js.map +1 -0
  46. package/dist/chunks/{code-snippet.CcdsPxT7.js → code-snippet.zdidL9RT.js} +5 -5
  47. package/dist/chunks/{code-snippet.CcdsPxT7.js.map → code-snippet.zdidL9RT.js.map} +1 -1
  48. package/dist/chunks/{controls-group.ClMNznTz.js → controls-group.DcbOWqxA.js} +2 -2
  49. package/dist/chunks/{controls-group.ClMNznTz.js.map → controls-group.DcbOWqxA.js.map} +1 -1
  50. package/dist/chunks/{copy.BYG9aoNO.js → copy.CFhrpASp.js} +2 -2
  51. package/dist/chunks/{copy.BYG9aoNO.js.map → copy.CFhrpASp.js.map} +1 -1
  52. package/dist/chunks/{dashboard-section.Dz9GpOvy.js → dashboard-section.DpL72ax7.js} +4 -4
  53. package/dist/chunks/{dashboard-section.Dz9GpOvy.js.map → dashboard-section.DpL72ax7.js.map} +1 -1
  54. package/dist/chunks/{dashed-underline.BuCIjMch.js → dashed-underline.BYAXhfnX.js} +3 -3
  55. package/dist/chunks/{dashed-underline.BuCIjMch.js.map → dashed-underline.BYAXhfnX.js.map} +1 -1
  56. package/dist/chunks/{data-grid-template.B4jxtwoW.js → data-grid-template.CJxPIu3E.js} +3 -3
  57. package/dist/chunks/{data-grid-template.B4jxtwoW.js.map → data-grid-template.CJxPIu3E.js.map} +1 -1
  58. package/dist/chunks/{data-grid.CLu8mvil.js → data-grid.i-NPmpso.js} +15 -15
  59. package/dist/chunks/data-grid.i-NPmpso.js.map +1 -0
  60. package/dist/chunks/{date-picker.CA2i6QxD.js → date-picker.wesQox8h.js} +17 -17
  61. package/dist/chunks/{date-picker.CA2i6QxD.js.map → date-picker.wesQox8h.js.map} +1 -1
  62. package/dist/chunks/{date-range-picker.DVQ-j-JX.js → date-range-picker.V6QCtfnc.js} +26 -26
  63. package/dist/chunks/{date-range-picker.DVQ-j-JX.js.map → date-range-picker.V6QCtfnc.js.map} +1 -1
  64. package/dist/chunks/{dropdown-tag.DFWV7Zj_.js → dropdown-tag.D8wU10wx.js} +4 -4
  65. package/dist/chunks/{dropdown-tag.DFWV7Zj_.js.map → dropdown-tag.D8wU10wx.js.map} +1 -1
  66. package/dist/chunks/{dropdown.RVt9T6j5.js → dropdown.DQunMieR.js} +138 -139
  67. package/dist/chunks/{dropdown.RVt9T6j5.js.map → dropdown.DQunMieR.js.map} +1 -1
  68. package/dist/chunks/{error-message.BQ5MlnLg.js → error-message.DH8Er2JS.js} +2 -2
  69. package/dist/chunks/{error-message.BQ5MlnLg.js.map → error-message.DH8Er2JS.js.map} +1 -1
  70. package/dist/chunks/es6.BtaxuP0b.js.map +1 -1
  71. package/dist/chunks/{file-uploader.DJLGEmtF.js → file-uploader.Rtt1Uz2U.js} +592 -540
  72. package/dist/chunks/file-uploader.Rtt1Uz2U.js.map +1 -0
  73. package/dist/chunks/{filter-bar.GGHRoo6O.js → filter-bar.DW7lAAtF.js} +697 -689
  74. package/dist/chunks/filter-bar.DW7lAAtF.js.map +1 -0
  75. package/dist/chunks/{focus-trap.D-HSKa_Q.js → focus-trap.BFCzfiI_.js} +2 -2
  76. package/dist/chunks/{focus-trap.D-HSKa_Q.js.map → focus-trap.BFCzfiI_.js.map} +1 -1
  77. package/dist/chunks/{footer-actions.DK3pMfDY.js → footer-actions.A9H5F5D-.js} +2 -2
  78. package/dist/chunks/{footer-actions.DK3pMfDY.js.map → footer-actions.A9H5F5D-.js.map} +1 -1
  79. package/dist/chunks/{header-with-views.BkcFu7QW.js → header-with-views.D2B-20ZR.js} +11 -11
  80. package/dist/chunks/{header-with-views.BkcFu7QW.js.map → header-with-views.D2B-20ZR.js.map} +1 -1
  81. package/dist/chunks/{header.CyTcPWF4.js → header.CoyUQXFL.js} +4 -4
  82. package/dist/chunks/{header.CyTcPWF4.js.map → header.CoyUQXFL.js.map} +1 -1
  83. package/dist/chunks/{index.C5sL_d0I.js → index.BzJQl-2M.js} +3 -3
  84. package/dist/chunks/{index.C5sL_d0I.js.map → index.BzJQl-2M.js.map} +1 -1
  85. package/dist/chunks/{info-icon-with-popover.DgZh2mnN.js → info-icon-with-popover.CBi7CmUZ.js} +2 -2
  86. package/dist/chunks/{info-icon-with-popover.DgZh2mnN.js.map → info-icon-with-popover.CBi7CmUZ.js.map} +1 -1
  87. package/dist/chunks/{info-icon.DxOAiUg4.js → info-icon.Bomzzcc5.js} +2 -2
  88. package/dist/chunks/{info-icon.DxOAiUg4.js.map → info-icon.Bomzzcc5.js.map} +1 -1
  89. package/dist/chunks/input-field-password.DMEjy243.js +343 -0
  90. package/dist/chunks/input-field-password.DMEjy243.js.map +1 -0
  91. package/dist/chunks/{input-field-phone-number.BtRMkC84.js → input-field-phone-number.DhJznFQP.js} +3 -3
  92. package/dist/chunks/{input-field-phone-number.BtRMkC84.js.map → input-field-phone-number.DhJznFQP.js.map} +1 -1
  93. package/dist/chunks/{input-field.CRlXtS3z.js → input-field.B9AU1IsG.js} +3 -3
  94. package/dist/chunks/{input-field.CRlXtS3z.js.map → input-field.B9AU1IsG.js.map} +1 -1
  95. package/dist/chunks/inspector.types.Fs9URmPq.js +188 -0
  96. package/dist/chunks/inspector.types.Fs9URmPq.js.map +1 -0
  97. package/dist/chunks/{layout-row.CwwbWO7s.js → layout-row.BC3Z1mQx.js} +2 -2
  98. package/dist/chunks/{layout-row.CwwbWO7s.js.map → layout-row.BC3Z1mQx.js.map} +1 -1
  99. package/dist/chunks/{listbox-option-tag.2k0hRv0z.js → listbox-option-tag.CqnkZr9x.js} +2 -2
  100. package/dist/chunks/{listbox-option-tag.2k0hRv0z.js.map → listbox-option-tag.CqnkZr9x.js.map} +1 -1
  101. package/dist/chunks/{menu.DBRBVdsd.js → menu.P_KG1J8b.js} +2 -2
  102. package/dist/chunks/{menu.DBRBVdsd.js.map → menu.P_KG1J8b.js.map} +1 -1
  103. package/dist/chunks/{modal-fullscreen.POY-6qYC.js → modal-fullscreen.DxuMKagz.js} +3 -3
  104. package/dist/chunks/{modal-fullscreen.POY-6qYC.js.map → modal-fullscreen.DxuMKagz.js.map} +1 -1
  105. package/dist/chunks/{modal.vue_vue_type_script_setup_true_lang.CGV0E6eK.js → modal.vue_vue_type_script_setup_true_lang.DfzxXSwn.js} +4 -4
  106. package/dist/chunks/{modal.vue_vue_type_script_setup_true_lang.CGV0E6eK.js.map → modal.vue_vue_type_script_setup_true_lang.DfzxXSwn.js.map} +1 -1
  107. package/dist/chunks/{pagination.TWtayPVy.js → pagination.DsEd-vpq.js} +3 -3
  108. package/dist/chunks/{pagination.TWtayPVy.js.map → pagination.DsEd-vpq.js.map} +1 -1
  109. package/dist/chunks/{payment-method.CLUppDo_.js → payment-method.eazefwm6.js} +9 -9
  110. package/dist/chunks/payment-method.eazefwm6.js.map +1 -0
  111. package/dist/chunks/payment-method.types.BqtH7RM2.js +5 -0
  112. package/dist/chunks/payment-method.types.BqtH7RM2.js.map +1 -0
  113. package/dist/chunks/{popover.BBnUL5Y_.js → popover.Csq1gQ6T.js} +3 -3
  114. package/dist/chunks/{popover.BBnUL5Y_.js.map → popover.Csq1gQ6T.js.map} +1 -1
  115. package/dist/chunks/{popper-container.Be3h7X17.js → popper-container.DnlxQ9eS.js} +2 -2
  116. package/dist/chunks/{popper-container.Be3h7X17.js.map → popper-container.DnlxQ9eS.js.map} +1 -1
  117. package/dist/chunks/{promo-banner.BdaUFMsl.js → promo-banner.CN-TTSov.js} +2 -2
  118. package/dist/chunks/{promo-banner.BdaUFMsl.js.map → promo-banner.CN-TTSov.js.map} +1 -1
  119. package/dist/chunks/{radio-group.BUazlUAi.js → radio-group.Vm-hmL1q.js} +4 -4
  120. package/dist/chunks/{radio-group.BUazlUAi.js.map → radio-group.Vm-hmL1q.js.map} +1 -1
  121. package/dist/chunks/{search-bar.21CWuOHb.js → search-bar.BBV1KNdd.js} +3 -3
  122. package/dist/chunks/{search-bar.21CWuOHb.js.map → search-bar.BBV1KNdd.js.map} +1 -1
  123. package/dist/chunks/{secondary-nav.CUQi4Ybt.js → secondary-nav.O2R1ltD9.js} +3 -3
  124. package/dist/chunks/{secondary-nav.CUQi4Ybt.js.map → secondary-nav.O2R1ltD9.js.map} +1 -1
  125. package/dist/chunks/{segmented-control.BZJ9DzRF.js → segmented-control.DBy-nbYM.js} +2 -2
  126. package/dist/chunks/{segmented-control.BZJ9DzRF.js.map → segmented-control.DBy-nbYM.js.map} +1 -1
  127. package/dist/chunks/{selection-card-group.Bdrx1b6M.js → selection-card-group.Bt4jBqjc.js} +4 -4
  128. package/dist/chunks/{selection-card-group.Bdrx1b6M.js.map → selection-card-group.Bt4jBqjc.js.map} +1 -1
  129. package/dist/chunks/{sidepanel.D_bGUcyi.js → sidepanel.Ds2CCG9L.js} +3 -3
  130. package/dist/chunks/{sidepanel.D_bGUcyi.js.map → sidepanel.Ds2CCG9L.js.map} +1 -1
  131. package/dist/chunks/{structured-list-item.r1jYiX6Y.js → structured-list-item.CygGTBVl.js} +4 -4
  132. package/dist/chunks/{structured-list-item.r1jYiX6Y.js.map → structured-list-item.CygGTBVl.js.map} +1 -1
  133. package/dist/chunks/summary-grid.types.DzvuP-NU.js +454 -0
  134. package/dist/chunks/summary-grid.types.DzvuP-NU.js.map +1 -0
  135. package/dist/chunks/tabs.B8BRqQpv.js +272 -0
  136. package/dist/chunks/tabs.B8BRqQpv.js.map +1 -0
  137. package/dist/chunks/{tag.DVkBzXMx.js → tag.C4SGN5Eb.js} +2 -2
  138. package/dist/chunks/{tag.DVkBzXMx.js.map → tag.C4SGN5Eb.js.map} +1 -1
  139. package/dist/chunks/{textarea.C8R71Q4l.js → textarea.bQwvvIkq.js} +103 -95
  140. package/dist/chunks/textarea.bQwvvIkq.js.map +1 -0
  141. package/dist/chunks/{timeline-item.DBeAlt3N.js → timeline-item.Bxt_pNII.js} +5 -5
  142. package/dist/chunks/{timeline-item.DBeAlt3N.js.map → timeline-item.Bxt_pNII.js.map} +1 -1
  143. package/dist/chunks/{tooltip.Cbs_YIap.js → tooltip.CyQxprBQ.js} +2 -2
  144. package/dist/chunks/{tooltip.Cbs_YIap.js.map → tooltip.CyQxprBQ.js.map} +1 -1
  145. package/dist/chunks/{tutorial.vue_vue_type_script_setup_true_lang.4smMvopK.js → tutorial.vue_vue_type_script_setup_true_lang.BtVT3Ltg.js} +5 -5
  146. package/dist/chunks/{tutorial.vue_vue_type_script_setup_true_lang.4smMvopK.js.map → tutorial.vue_vue_type_script_setup_true_lang.BtVT3Ltg.js.map} +1 -1
  147. package/dist/chunks/{use-cached-selected-values.Chb18cq_.js → use-cached-selected-values.DmW8XRgJ.js} +135 -135
  148. package/dist/chunks/{use-cached-selected-values.Chb18cq_.js.map → use-cached-selected-values.DmW8XRgJ.js.map} +1 -1
  149. package/dist/code-snippet.js +1 -1
  150. package/dist/dashboard-template.js +1 -1
  151. package/dist/dashed-underline.js +1 -1
  152. package/dist/data-grid-template.js +1 -1
  153. package/dist/data-grid.js +1 -1
  154. package/dist/date-picker.js +2 -2
  155. package/dist/date-range-picker.js +2 -2
  156. package/dist/dropdown.js +3 -3
  157. package/dist/file-uploader.js +1 -1
  158. package/dist/filter-bar.js +1 -1
  159. package/dist/focus-trap.js +1 -1
  160. package/dist/header-with-views.js +1 -1
  161. package/dist/header.js +1 -1
  162. package/dist/index.js +61 -61
  163. package/dist/info-icon.js +1 -1
  164. package/dist/input-field-password.js +1 -1
  165. package/dist/input-field-phone-number.js +1 -1
  166. package/dist/input-field.js +1 -1
  167. package/dist/inspector.js +1 -1
  168. package/dist/internal.js +10 -10
  169. package/dist/layout.js +1 -1
  170. package/dist/menu.js +1 -1
  171. package/dist/modal-fullscreen.js +1 -1
  172. package/dist/modal.js +2 -2
  173. package/dist/pagination.js +1 -1
  174. package/dist/payment-method.js +2 -2
  175. package/dist/popover.js +1 -1
  176. package/dist/popper-container.js +1 -1
  177. package/dist/promo-banner.js +1 -1
  178. package/dist/radio-group.js +1 -1
  179. package/dist/search-bar.js +2 -2
  180. package/dist/secondary-nav.js +1 -1
  181. package/dist/segmented-control.js +1 -1
  182. package/dist/selection-card.js +1 -1
  183. package/dist/sidepanel.js +1 -1
  184. package/dist/structured-list.js +1 -1
  185. package/dist/styles/bento-dark.css +42 -16
  186. package/dist/styles/bento-light.css +42 -16
  187. package/dist/styles/bento.css +42 -16
  188. package/dist/styles/legacy.css +30 -4
  189. package/dist/styles/styleguide.css +42 -16
  190. package/dist/summary-grid.js +1 -1
  191. package/dist/tabs.js +1 -1
  192. package/dist/tag.js +1 -1
  193. package/dist/textarea.js +1 -1
  194. package/dist/timeline.js +1 -1
  195. package/dist/tutorial.js +1 -1
  196. package/dist/web-types.json +1 -1
  197. package/package.json +5 -5
  198. package/dist/assets/summary-grid-item-custom.css +0 -1
  199. package/dist/chunks/checkbox.CXZQtFhM.js.map +0 -1
  200. package/dist/chunks/data-grid.CLu8mvil.js.map +0 -1
  201. package/dist/chunks/file-uploader.DJLGEmtF.js.map +0 -1
  202. package/dist/chunks/filter-bar.GGHRoo6O.js.map +0 -1
  203. package/dist/chunks/input-field-password.BSJMbPHf.js +0 -313
  204. package/dist/chunks/input-field-password.BSJMbPHf.js.map +0 -1
  205. package/dist/chunks/inspector.types.s0va--Nn.js +0 -184
  206. package/dist/chunks/inspector.types.s0va--Nn.js.map +0 -1
  207. package/dist/chunks/payment-method.CLUppDo_.js.map +0 -1
  208. package/dist/chunks/payment-method.types.CJKfZQN5.js +0 -5
  209. package/dist/chunks/payment-method.types.CJKfZQN5.js.map +0 -1
  210. package/dist/chunks/summary-grid-item-custom.ACP0RH0N.js +0 -826
  211. package/dist/chunks/summary-grid-item-custom.ACP0RH0N.js.map +0 -1
  212. package/dist/chunks/tabs.hp52NnXH.js +0 -211
  213. package/dist/chunks/tabs.hp52NnXH.js.map +0 -1
  214. package/dist/chunks/textarea.C8R71Q4l.js.map +0 -1
@@ -1,313 +0,0 @@
1
- import { defineComponent as ie, useAttrs as le, ref as s, provide as oe, computed as d, watch as Z, createElementBlock as C, openBlock as o, createVNode as T, createBlock as u, createCommentVNode as p, unref as a, mergeProps as se, createSlots as ne, withCtx as c, createTextVNode as L, toDisplayString as h, createElementVNode as E, normalizeClass as W, Fragment as re, renderList as de } from "vue";
2
- import { B as ue } from "./button.6HMG0xEY.js";
3
- import { _ as ce } from "./image.vue_vue_type_script_setup_true_lang.DQT2oNEF.js";
4
- import { B as pe } from "./input-field.CRlXtS3z.js";
5
- import { B as ve } from "./popover.BBnUL5Y_.js";
6
- import { B as A } from "./typography.DN5eC5ch.js";
7
- import { C as fe } from "./checkmark-circle-fill.jicbqe7k.js";
8
- import { D as me } from "./dot.BW-xtyjC.js";
9
- import { S as ge, H as he } from "./show.ByWWaogc.js";
10
- import { d as _e, w as we } from "./index.C5sL_d0I.js";
11
- import { u as be } from "./i18n.D9azDLPe.js";
12
- import { g as z } from "./generate-uid.NJ8tVoha.js";
13
- import { b as ke } from "./dropdown.RVt9T6j5.js";
14
- import { T as ye } from "./tooltip.Cbs_YIap.js";
15
- import { _ as Ce } from "./_plugin-vue_export-helper.CHgC5LLL.js";
16
- import "../assets/input-field-password.css";
17
- var _ = /* @__PURE__ */ ((t) => (t.TEXT = "text", t.PASSWORD = "password", t))(_ || {});
18
- const Te = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='capslock'%3e%3cg%20id='Union'%3e%3cpath%20d='M13.75%205.63952L8%201.03952L2.25%205.63952V7.74999H4.75V11.75H11.25V7.74999H13.75V5.63952ZM6.25%206.24999H3.88809L8%202.96046L12.1119%206.24999H9.75V10.25H6.25V6.24999Z'%20fill='%2300112C'/%3e%3cpath%20d='M11.25%2014.75V13.25H4.75V14.75H11.25Z'%20fill='%2300112C'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e";
19
- function w(t) {
20
- return (t == null ? void 0 : t.toString()) ?? "";
21
- }
22
- function Le(t, R = 8) {
23
- return w(t).length >= R;
24
- }
25
- function Ee(t) {
26
- return /[a-z]/.test(w(t));
27
- }
28
- function Re(t) {
29
- return /[A-Z]/.test(w(t));
30
- }
31
- function Ie(t) {
32
- return /\d/.test(w(t));
33
- }
34
- function Pe(t) {
35
- return /[^a-zA-Z0-9]/.test(w(t));
36
- }
37
- const X = {
38
- "en-US": {
39
- capsLockEnabled: "Caps lock on",
40
- hidePassword: "Hide",
41
- showPassword: "Show",
42
- validationChecked: "Checked",
43
- validationMinLength: "8 characters",
44
- validationRequireLowercase: "1 lowercase (a-z)",
45
- validationRequireNumeric: "1 numerical (0-9)",
46
- validationRequireSpecialCharacter: "1 special character",
47
- validationRequireUppercase: "1 uppercase (A-Z)",
48
- validationSuggestion: "Avoid using currency symbols or accented letters.",
49
- validationTitle: "Password must contain at least:",
50
- validationUnchecked: "Unchecked",
51
- validationValid: "Input is valid"
52
- },
53
- "ja-JP": {
54
- capsLockEnabled: "Caps lockオン",
55
- hidePassword: "非表示",
56
- showPassword: "表示",
57
- validationMinLength: "8字",
58
- validationRequireLowercase: "小文字1字 (a-z)",
59
- validationRequireNumeric: "数字1字 (0-9)",
60
- validationRequireSpecialCharacter: "特殊文字1字",
61
- validationRequireUppercase: "大文字1字 (A-Z)",
62
- validationSuggestion: "通貨記号やアクセント付き文字は避けてください。",
63
- validationTitle: "パスワードには少なくとも次のものを含める必要があります :"
64
- },
65
- "pt-BR": {
66
- capsLockEnabled: "Caps lock ativado",
67
- hidePassword: "Ocultar",
68
- showPassword: "Exibir",
69
- validationMinLength: "8 caracteres",
70
- validationRequireLowercase: "1 minúscula (a-z)",
71
- validationRequireNumeric: "1 numérico (0-9)",
72
- validationRequireSpecialCharacter: "1 caractere especial",
73
- validationRequireUppercase: "1 maiúscula (A-Z)",
74
- validationSuggestion: "Evite símbolos de moeda ou letras acentuadas.",
75
- validationTitle: "A senha deve conter pelo menos:"
76
- }
77
- }, Ve = ["id"], Se = {
78
- key: 1,
79
- class: "b-input-field-password__validation-status--valid",
80
- role: "alert"
81
- }, Be = ["id"], Me = { class: "b-input-field-password__validation-list-icon" }, Ae = {
82
- i18n: { messages: X },
83
- name: "bento-input-field-password"
84
- }, Ne = /* @__PURE__ */ ie({
85
- ...Ae,
86
- props: {
87
- condensed: { type: Boolean, default: !1 },
88
- disabled: { type: Boolean, default: !1 },
89
- disableValidation: { type: Boolean, default: !1 },
90
- errorMessage: { default: null },
91
- placeholder: { default: "" },
92
- readonly: { type: Boolean, default: !1 },
93
- value: { default: void 0 },
94
- label: { default: null },
95
- validation: { default: void 0 },
96
- withHint: { type: Boolean, default: !0 }
97
- },
98
- emits: ["input:valid", "input"],
99
- setup(t, { emit: R }) {
100
- const { t: i } = be({ messages: X }), l = t, N = R, K = le(), b = s(_.PASSWORD), g = s(l.value), q = s(!1), O = s(!1), k = s([]), v = s(null), f = s(!1), U = s(null), I = s(null), P = s(null), V = s(!1);
101
- oe(ke, "bento-input-field-password");
102
- const { focused: J } = _e(U), D = z("validationListId"), H = z("validationPopoverId"), S = d(() => b.value === _.TEXT), j = d(() => {
103
- const e = O.value && B.value, r = l.disableValidation && l.errorMessage;
104
- return e || r ? l.errorMessage : "";
105
- }), Y = d(
106
- () => k.value.map(
107
- (e) => e ? "b-input-field-password__validation-list--valid" : "b-input-field-password__validation-list--invalid"
108
- )
109
- ), $ = d(
110
- () => v.value ? "b-input-field-password__input-tooltip--timed" : ""
111
- ), G = d(() => ({
112
- ariaHidden: !1,
113
- condensed: l.condensed,
114
- disabled: l.disabled,
115
- errorMessage: j.value,
116
- placeholder: l.placeholder,
117
- readonly: l.readonly,
118
- type: b.value,
119
- value: g.value,
120
- "aria-haspopup": M.value ? "dialog" : !1,
121
- "aria-describedby": M.value ? H : "",
122
- ...K
123
- })), n = d(
124
- () => l.validation === void 0 ? {
125
- title: i("validationTitle"),
126
- suggestion: i("validationSuggestion"),
127
- list: [
128
- { label: i("validationMinLength"), validate: Le },
129
- { label: i("validationRequireLowercase"), validate: Ee },
130
- { label: i("validationRequireUppercase"), validate: Re },
131
- { label: i("validationRequireNumeric"), validate: Ie },
132
- { label: i("validationRequireSpecialCharacter"), validate: Pe }
133
- ]
134
- } : l.validation
135
- ), B = d(() => k.value.some((e) => !e)), M = d(
136
- () => {
137
- var e, r;
138
- return I.value && ((r = (e = n.value) == null ? void 0 : e.list) == null ? void 0 : r.length) > 0;
139
- }
140
- ), F = (e) => {
141
- typeof e.getModifierState == "function" && (V.value = e.getModifierState("CapsLock"));
142
- }, Q = () => {
143
- S.value ? b.value = _.PASSWORD : b.value = _.TEXT;
144
- }, ee = (e) => {
145
- l.disabled || (g.value = e, N("input", g.value));
146
- }, x = (e) => {
147
- var r, y;
148
- k.value = ((y = (r = n.value) == null ? void 0 : r.list) == null ? void 0 : y.map(
149
- (m) => m.validate(e, m.additionalArgs)
150
- )) ?? [];
151
- }, ae = () => {
152
- f.value = !1, v.value = null;
153
- }, te = () => {
154
- f.value = !0;
155
- };
156
- return Z(J, (e) => {
157
- e || (O.value = !0), l.disableValidation || (l.withHint && (q.value = e), x(g.value));
158
- }), Z(V, (e) => {
159
- e ? (f.value = !0, v.value = setTimeout(() => {
160
- v.value = null, f.value = !1;
161
- }, 2e3)) : (clearTimeout(v.value), v.value = null, f.value = !1);
162
- }), we(
163
- g,
164
- (e) => {
165
- x(e), B.value || N("input:valid");
166
- },
167
- // wait for 0.5s before checking validity OR 2s of continuous typing
168
- { debounce: 500, maxWait: 2e3 }
169
- ), (e, r) => (o(), C("div", {
170
- ref_key: "inputFieldPasswordRef",
171
- ref: U
172
- }, [
173
- T(a(pe), se({
174
- ref_key: "inputFieldPasswordInputRef",
175
- ref: I
176
- }, G.value, {
177
- class: "b-input-field-password__input",
178
- spellcheck: "false",
179
- onInput: ee,
180
- onKeydown: F,
181
- onKeyup: F
182
- }), ne({
183
- default: c(() => [
184
- L(h(e.label), 1)
185
- ]),
186
- _: 2
187
- }, [
188
- V.value ? {
189
- name: "iconBefore",
190
- fn: c(() => [
191
- E("div", {
192
- class: "b-input-field-password__caps-lock-indicator",
193
- onMouseenter: te,
194
- onMouseleave: ae
195
- }, [
196
- T(a(ce), {
197
- ref_key: "inputFieldPasswordCapsLockIconRef",
198
- ref: P,
199
- src: a(Te),
200
- alt: a(i)("capsLockEnabled")
201
- }, null, 8, ["src", "alt"])
202
- ], 32),
203
- P.value ? (o(), u(a(ye), {
204
- key: 0,
205
- class: W($.value),
206
- content: a(i)("capsLockEnabled"),
207
- "disabled-focus-trap": !0,
208
- "fallback-position": ["top", "bottom"],
209
- "is-shown": f.value,
210
- "target-element": P.value
211
- }, null, 8, ["class", "content", "is-shown", "target-element"])) : p("", !0)
212
- ]),
213
- key: "0"
214
- } : void 0,
215
- e.disabled ? void 0 : {
216
- name: "iconAfter",
217
- fn: c(() => [
218
- T(a(ue), {
219
- variant: "tertiary",
220
- onClick: Q
221
- }, {
222
- iconLeft: c(() => [
223
- S.value ? p("", !0) : (o(), u(a(ge), {
224
- key: 0,
225
- "svg-title": a(i)("showPassword")
226
- }, null, 8, ["svg-title"])),
227
- S.value ? (o(), u(a(he), {
228
- key: 1,
229
- "svg-title": a(i)("hidePassword")
230
- }, null, 8, ["svg-title"])) : p("", !0)
231
- ]),
232
- _: 1
233
- })
234
- ]),
235
- key: "1"
236
- }
237
- ]), 1040),
238
- M.value ? (o(), u(a(ve), {
239
- key: 0,
240
- open: q.value,
241
- "target-element": I.value,
242
- "disable-focus-trap": !0,
243
- "aria-label": n.value.title,
244
- "aria-describedby": a(D),
245
- position: "right-start"
246
- }, {
247
- default: c(() => [
248
- E("div", { id: a(H) }, [
249
- n.value.title ? (o(), u(a(A), {
250
- key: 0,
251
- class: "b-input-field-password__validation-title"
252
- }, {
253
- default: c(() => [
254
- L(h(n.value.title), 1)
255
- ]),
256
- _: 1
257
- })) : p("", !0),
258
- B.value ? p("", !0) : (o(), C("p", Se, h(a(i)("validationValid")), 1)),
259
- E("ul", {
260
- id: a(D),
261
- class: "b-input-field-password__validation-list"
262
- }, [
263
- (o(!0), C(re, null, de(n.value.list, (y, m) => (o(), C("li", {
264
- key: m,
265
- class: W(Y.value[m]),
266
- "aria-live": "polite",
267
- "aria-atomic": "true"
268
- }, [
269
- E("span", Me, [
270
- k.value[m] ? (o(), u(a(fe), {
271
- key: 0,
272
- "svg-title": a(i)("validationChecked")
273
- }, null, 8, ["svg-title"])) : (o(), u(a(me), {
274
- key: 1,
275
- "svg-title": a(i)("validationUnchecked")
276
- }, null, 8, ["svg-title"]))
277
- ]),
278
- T(a(A), {
279
- class: "b-input-field-password__validation-list-text",
280
- el: "span"
281
- }, {
282
- default: c(() => [
283
- L(h(y.label), 1)
284
- ]),
285
- _: 2
286
- }, 1024)
287
- ], 2))), 128))
288
- ], 8, Be),
289
- n.value.suggestion ? (o(), u(a(A), {
290
- key: 2,
291
- class: "b-input-field-password__validation-suggestion"
292
- }, {
293
- default: c(() => [
294
- L(h(n.value.suggestion), 1)
295
- ]),
296
- _: 1
297
- })) : p("", !0)
298
- ], 8, Ve)
299
- ]),
300
- _: 1
301
- }, 8, ["open", "target-element", "aria-label", "aria-describedby"])) : p("", !0)
302
- ], 512));
303
- }
304
- }), ea = /* @__PURE__ */ Ce(Ne, [["__scopeId", "data-v-1762c18c"]]);
305
- export {
306
- Re as a,
307
- Ie as b,
308
- Pe as c,
309
- ea as i,
310
- Le as m,
311
- Ee as r
312
- };
313
- //# sourceMappingURL=input-field-password.BSJMbPHf.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"input-field-password.BSJMbPHf.js","sources":["../../../vue2/src/components/input-field-password/input-field-password.types.ts","../../../vue2/src/components/input-field-password/assets/capslock.svg","../../../vue2/src/components/input-field-password/utilities/input-field-password.validation.ts","../../../vue2/src/components/input-field-password/input-field-password.vue"],"sourcesContent":["import type { BentoInputFieldProps, BentoInputFieldValue } from '@/components/input-field/input-field.types';\n\n/**\n * Public\n */\n\nexport interface BentoInputFieldPasswordValidationListItem {\n label: string;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n validate: (value: BentoInputFieldValue, ...args: any[]) => boolean;\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n additionalArgs?: any[];\n}\n\nexport interface BentoInputFieldPasswordValidation {\n title?: string;\n suggestion?: string;\n list: BentoInputFieldPasswordValidationListItem[];\n}\n\nexport interface BentoInputFieldPasswordProps {\n /**\n * Reduces height of the input\n */\n condensed?: BentoInputFieldProps['condensed'];\n\n /**\n * Disables the possibility of changing value in the input-field\n */\n disabled?: BentoInputFieldProps['disabled'];\n\n /**\n * Performs real-time validations over the input value. Default: `false`.\n * Disabling the option (set to `true`) will not run pre-defined validations or custom validations defined in the `validation` field.\n */\n disableValidation?: boolean;\n\n /**\n * Renders input-field with an error state and the error message beneath the input box\n */\n errorMessage?: BentoInputFieldProps['errorMessage'];\n\n /**\n * Text displayed as the placeholder of the input-field\n */\n placeholder?: BentoInputFieldProps['placeholder'];\n\n /**\n * Setting this property to true will set the input field to read only state.\n */\n readonly?: BentoInputFieldProps['readonly'];\n\n /**\n * Text displayed as the value of the input-field\n */\n value?: BentoInputFieldProps['value'];\n\n /**\n * Label to be shown with the input field\n */\n label?: string;\n\n /**\n * Configuration object for password field validation.\n *\n * This object defines the validation criteria and associated messages for a password field.\n * It includes the following properties:\n *\n * - `title`: The title displayed at the top of the validation hint.\n * - `suggestion`: The message displayed at the bottom of the validation hint, providing additional guidance.\n * - `list`: An array of callback functions to be executed on the value after each user input, validating the password against the specified rules.\n *\n * By default, the validation checks that:\n *\n * - The value has a minimum length of 8 characters.\n * - The value contains at least one lowercase letter.\n * - The value contains at least one uppercase letter.\n * - The value contains at least one numeric digit.\n * - The value contains at least one special character.\n *\n *\n */\n validation?: BentoInputFieldPasswordValidation;\n\n /**\n * Whether the password validation hint is displayed when the input field is activated via focus or input\n */\n withHint?: boolean;\n}\n\n/**\n * Private\n */\n\nexport enum BentoInputFieldPasswordType {\n TEXT = 'text',\n PASSWORD = 'password',\n}\n","export default \"data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cg%20id='capslock'%3e%3cg%20id='Union'%3e%3cpath%20d='M13.75%205.63952L8%201.03952L2.25%205.63952V7.74999H4.75V11.75H11.25V7.74999H13.75V5.63952ZM6.25%206.24999H3.88809L8%202.96046L12.1119%206.24999H9.75V10.25H6.25V6.24999Z'%20fill='%2300112C'/%3e%3cpath%20d='M11.25%2014.75V13.25H4.75V14.75H11.25Z'%20fill='%2300112C'/%3e%3c/g%3e%3c/g%3e%3c/svg%3e\"","import { BentoInputFieldValue } from '@/components/input-field';\n\nfunction stringifyValue(value: BentoInputFieldValue): string {\n return value?.toString() ?? '';\n}\n\n/**\n * Validates if the length of the provided value is greater than or equal to the specified length.\n *\n * @param value - The input value to check.\n * @param length - The minimum required length of the value. Defaults to 8.\n * @returns `true` if the length of the value is greater than or equal to the specified length, `false` otherwise.\n */\nexport function minLength(value: BentoInputFieldValue, length = 8): boolean {\n return stringifyValue(value).length >= length;\n}\n\n/**\n * Validates if the provided value contains at least one lowercase letter.\n *\n * @param value - The input value to check.\n * @returns `true` if the value contains at least one lowercase letter, `false` otherwise.\n */\nexport function requireLowercase(value: BentoInputFieldValue): boolean {\n return /[a-z]/.test(stringifyValue(value));\n}\n\n/**\n * Validates if the provided value contains at least one uppercase letter.\n *\n * @param value - The input value to check.\n * @returns `true` if the value contains at least one uppercase letter, `false` otherwise.\n */\nexport function requireUppercase(value: BentoInputFieldValue): boolean {\n return /[A-Z]/.test(stringifyValue(value));\n}\n\n/**\n * Validates if the provided value contains at least one numerical digit.\n *\n * @param value - The input value to check.\n * @returns `true` if the value contains at least one numerical digit, `false` otherwise.\n */\nexport function requireNumeric(value: BentoInputFieldValue): boolean {\n return /\\d/.test(stringifyValue(value));\n}\n\n/**\n * Validates if the provided value contains at least one special character (non-alphanumeric).\n *\n * @param value - The input value to check.\n * @returns `true` if the value contains at least one special character, `false` otherwise.\n */\nexport function requireSpecialCharacter(value: BentoInputFieldValue): boolean {\n return /[^a-zA-Z0-9]/.test(stringifyValue(value));\n}\n","<template>\n <div ref=\"inputFieldPasswordRef\">\n <bento-input-field\n ref=\"inputFieldPasswordInputRef\"\n v-bind=\"inputFieldArgs\"\n class=\"b-input-field-password__input\"\n spellcheck=\"false\"\n @input=\"onInput\"\n @keydown=\"checkCapsLock\"\n @keyup=\"checkCapsLock\"\n >\n <template #default>{{ label }}</template>\n\n <template v-if=\"isCapsLockOn\" #iconBefore>\n <div\n class=\"b-input-field-password__caps-lock-indicator\"\n @mouseenter=\"handleCapsLockMouseEnter\"\n @mouseleave=\"handleCapsLockMouseLeave\"\n >\n <bento-image\n ref=\"inputFieldPasswordCapsLockIconRef\"\n :src=\"CapsLockIcon\"\n :alt=\"t('capsLockEnabled')\"\n ></bento-image>\n </div>\n\n <tooltip\n v-if=\"inputFieldPasswordCapsLockIconRef\"\n :class=\"tooltipConditionalClass\"\n :content=\"t('capsLockEnabled')\"\n :disabled-focus-trap=\"true\"\n :fallback-position=\"['top', 'bottom']\"\n :is-shown=\"isTooltipDisplayed\"\n :target-element=\"inputFieldPasswordCapsLockIconRef\"\n ></tooltip>\n </template>\n\n <template v-if=\"!disabled\" #iconAfter>\n <bento-button variant=\"tertiary\" @click=\"toggleInputType\">\n <template #iconLeft>\n <show-icon v-if=\"!isPasswordReadable\" :svg-title=\"t('showPassword')\" />\n\n <hide-icon v-if=\"isPasswordReadable\" :svg-title=\"t('hidePassword')\" />\n </template>\n </bento-button>\n </template>\n </bento-input-field>\n\n <bento-popover\n v-if=\"hasValidations\"\n :open=\"isHintDisplayed\"\n :target-element=\"inputFieldPasswordInputRef\"\n :disable-focus-trap=\"true\"\n :aria-label=\"computedValidations.title\"\n :aria-describedby=\"validationListId\"\n position=\"right-start\"\n >\n <div :id=\"validationPopoverId\">\n <bento-typography v-if=\"computedValidations.title\" class=\"b-input-field-password__validation-title\">\n {{ computedValidations.title }}\n </bento-typography>\n\n <p v-if=\"!hasErrors\" class=\"b-input-field-password__validation-status--valid\" role=\"alert\">\n {{ t('validationValid') }}\n </p>\n\n <ul :id=\"validationListId\" class=\"b-input-field-password__validation-list\">\n <li\n v-for=\"(validation, index) in computedValidations.list\"\n :key=\"index\"\n :class=\"passwordValidityConditionalClass[index]\"\n aria-live=\"polite\"\n aria-atomic=\"true\"\n >\n <span class=\"b-input-field-password__validation-list-icon\">\n <checkmark-circle-fill-icon\n v-if=\"passwordValidity[index]\"\n :svg-title=\"t('validationChecked')\"\n />\n\n <dot-icon v-else :svg-title=\"t('validationUnchecked')\" />\n </span>\n\n <bento-typography class=\"b-input-field-password__validation-list-text\" el=\"span\">\n {{ validation.label }}\n </bento-typography>\n </li>\n </ul>\n\n <bento-typography\n v-if=\"computedValidations.suggestion\"\n class=\"b-input-field-password__validation-suggestion\"\n >\n {{ computedValidations.suggestion }}\n </bento-typography>\n </div>\n </bento-popover>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoButton } from '@/components/button';\n import { BentoImage } from '@/components/image';\n import { BentoInputField } from '@/components/input-field';\n import { BentoPopover } from '@/components/popover';\n import { BentoTypography } from '@/components/typography';\n import { Tooltip } from '@/internal';\n import type { BentoInputFieldProps } from '@/components/input-field/input-field.types';\n import { type BentoInputFieldPasswordProps, BentoInputFieldPasswordType } from './input-field-password.types';\n import CheckmarkCircleFillIcon from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n import DotIcon from '@adyen/ui-assets-icons-16/vue/dot';\n import HideIcon from '@adyen/ui-assets-icons-16/vue/hide';\n import ShowIcon from '@adyen/ui-assets-icons-16/vue/show';\n import CapsLockIcon from './assets/capslock.svg';\n\n import { useFocusWithin, watchDebounced } from '@vueuse/core';\n import { computed, provide, ref, SetupContext, useAttrs, watch } from 'vue';\n\n import { useI18n } from '@/utils/ts/i18n';\n\n import {\n minLength,\n requireLowercase,\n requireNumeric,\n requireSpecialCharacter,\n requireUppercase,\n } from '@/components/input-field-password/utilities/input-field-password.validation';\n import { generateUid } from '@/core/utils/ts';\n import messages from './messages.json';\n import { INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const DEBOUNCE_DURATION = 500;\n const DEBOUNCE_MAX_WAIT = 2000;\n const TOOLTIP_TIMEOUT = 2000;\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const props = withDefaults(defineProps<BentoInputFieldPasswordProps>(), {\n condensed: false,\n disabled: false,\n disableValidation: false,\n label: null,\n errorMessage: null,\n placeholder: '',\n readonly: false,\n validation: undefined,\n value: undefined,\n withHint: true,\n });\n\n const emit = defineEmits<{\n /**\n * Emits an `input:valid` event when the value is validated against the provided validations.\n * This emission has a debounce and is emitted after an `input` event.\n */\n (e: 'input:valid'): void;\n\n /**\n * Emits an `input` event whenever the value in the input is changed.\n */\n (e: 'input', value: BentoInputFieldPasswordProps['value']): void;\n }>();\n\n const attrs = useAttrs();\n\n const inputType = ref(BentoInputFieldPasswordType.PASSWORD);\n const inputValue = ref(props.value);\n const isHintDisplayed = ref(false);\n const isTouched = ref(false);\n const passwordValidity = ref<boolean[]>([]);\n const capsLockTooltipTimeoutID = ref<ReturnType<typeof setTimeout>>(null);\n const isTooltipDisplayed = ref(false);\n const inputFieldPasswordRef = ref(null);\n const inputFieldPasswordInputRef = ref(null);\n const inputFieldPasswordCapsLockIconRef = ref(null);\n const isCapsLockOn = ref(false);\n\n provide(INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY, 'bento-input-field-password');\n\n const { focused } = useFocusWithin(inputFieldPasswordRef);\n\n const validationListId = generateUid('validationListId');\n const validationPopoverId = generateUid('validationPopoverId');\n\n const isPasswordReadable = computed(() => inputType.value === BentoInputFieldPasswordType.TEXT);\n const computedErrorMessage = computed(() => {\n const hasRealTimeValidationErrors = isTouched.value && hasErrors.value;\n const hasAsyncValidationErrors = props.disableValidation && props.errorMessage;\n\n return hasRealTimeValidationErrors || hasAsyncValidationErrors ? props.errorMessage : '';\n });\n\n const passwordValidityConditionalClass = computed(() =>\n passwordValidity.value.map(validity =>\n validity\n ? 'b-input-field-password__validation-list--valid'\n : 'b-input-field-password__validation-list--invalid'\n )\n );\n\n const tooltipConditionalClass = computed(() =>\n capsLockTooltipTimeoutID.value ? 'b-input-field-password__input-tooltip--timed' : ''\n );\n\n const inputFieldArgs = computed<BentoInputFieldProps & SetupContext['attrs']>(() => ({\n ariaHidden: false,\n condensed: props.condensed,\n disabled: props.disabled,\n errorMessage: computedErrorMessage.value,\n placeholder: props.placeholder,\n readonly: props.readonly,\n type: inputType.value,\n value: inputValue.value,\n\n 'aria-haspopup': hasValidations.value ? 'dialog' : false,\n 'aria-describedby': hasValidations.value ? validationPopoverId : '',\n\n ...attrs,\n }));\n\n const computedValidations = computed(() =>\n props.validation === undefined\n ? {\n title: t('validationTitle'),\n suggestion: t('validationSuggestion'),\n list: [\n { label: t('validationMinLength'), validate: minLength },\n { label: t('validationRequireLowercase'), validate: requireLowercase },\n { label: t('validationRequireUppercase'), validate: requireUppercase },\n { label: t('validationRequireNumeric'), validate: requireNumeric },\n { label: t('validationRequireSpecialCharacter'), validate: requireSpecialCharacter },\n ],\n }\n : props.validation\n );\n\n const hasErrors = computed(() => passwordValidity.value.some(validation => !validation));\n const hasValidations = computed(\n () => inputFieldPasswordInputRef.value && computedValidations.value?.list?.length > 0\n );\n\n const checkCapsLock = (e: KeyboardEvent) => {\n // Check if getModifierState exists and is a function in case the user's browser is autofilling\n if (typeof e.getModifierState === 'function') {\n isCapsLockOn.value = e.getModifierState('CapsLock');\n }\n };\n\n const toggleInputType = () => {\n if (isPasswordReadable.value) {\n inputType.value = BentoInputFieldPasswordType.PASSWORD;\n } else {\n inputType.value = BentoInputFieldPasswordType.TEXT;\n }\n };\n\n const onInput = (value: string) => {\n if (props.disabled) {\n return;\n }\n\n inputValue.value = value;\n\n emit('input', inputValue.value);\n };\n\n const checkValidity = (value: BentoInputFieldPasswordProps['value']) => {\n passwordValidity.value =\n computedValidations.value?.list?.map(validationItem =>\n validationItem.validate(value, validationItem.additionalArgs)\n ) ?? [];\n };\n\n const handleCapsLockMouseLeave = () => {\n isTooltipDisplayed.value = false;\n capsLockTooltipTimeoutID.value = null;\n };\n\n const handleCapsLockMouseEnter = () => {\n isTooltipDisplayed.value = true;\n };\n\n watch(focused, focused => {\n // Always set dirty to true when blur occurs\n if (!focused) {\n isTouched.value = true;\n }\n\n // Disable validations & hint if \"disableValidation\" is \"true\"\n if (!props.disableValidation) {\n if (props.withHint) {\n isHintDisplayed.value = focused;\n }\n\n checkValidity(inputValue.value);\n }\n });\n\n watch(isCapsLockOn, isCapsLockOn => {\n if (!isCapsLockOn) {\n clearTimeout(capsLockTooltipTimeoutID.value);\n\n capsLockTooltipTimeoutID.value = null;\n isTooltipDisplayed.value = false;\n } else {\n isTooltipDisplayed.value = true;\n\n capsLockTooltipTimeoutID.value = setTimeout(() => {\n capsLockTooltipTimeoutID.value = null;\n isTooltipDisplayed.value = false;\n }, TOOLTIP_TIMEOUT);\n }\n });\n\n watchDebounced(\n inputValue,\n inputValue => {\n checkValidity(inputValue);\n\n if (!hasErrors.value) {\n emit('input:valid');\n }\n },\n // wait for 0.5s before checking validity OR 2s of continuous typing\n { debounce: DEBOUNCE_DURATION, maxWait: DEBOUNCE_MAX_WAIT }\n );\n</script>\n\n<script lang=\"ts\">\n /**\n * The input field password is a component designed to support users' preference for entering values securely.\n * This is an extension of the `bento-input-field` component.\n *\n * @example\n * import { BentoInputFieldPassword } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoInputFieldPassword },\n * template: `\n * <bento-input-field-password\n * label=\"Label\"\n * error-message=\"Error\"\n * :validation=\"{\n * title: 'Password must contain at least:',\n * suggestion: 'Avoid using currency symbols or accented letters.',\n * list: [\n * { label: '8 characters', validate: minLength, additionalArgs: [8] },\n * { label: '1 lowercase (a-z)', validate: requireLowercase },\n * { label: '1 uppercase (A-Z)', validate: requireUppercase },\n * { label: '1 numerical (0-9)', validate: requireNumeric },\n * { label: '1 special character', validate: requireSpecialCharacter },\n * {\n * label: 'Always true',\n * validate: () => {\n * const example = 'Example';\n *\n * return () => example.length > 1;\n * },\n * },\n * ],\n * }\"\n * />\n * `\n * }\n */\n export default {\n i18n: { messages },\n name: 'bento-input-field-password',\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./input-field-password.scss\" />\n"],"names":["BentoInputFieldPasswordType","BentoInputFieldPasswordType2","CapsLockIcon","stringifyValue","value","minLength","length","requireLowercase","requireUppercase","requireNumeric","requireSpecialCharacter","__default__","messages","t","useI18n","props","__props","emit","__emit","attrs","useAttrs","inputType","ref","inputValue","isHintDisplayed","isTouched","passwordValidity","capsLockTooltipTimeoutID","isTooltipDisplayed","inputFieldPasswordRef","inputFieldPasswordInputRef","inputFieldPasswordCapsLockIconRef","isCapsLockOn","provide","INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY","focused","useFocusWithin","validationListId","generateUid","validationPopoverId","isPasswordReadable","computed","computedErrorMessage","hasRealTimeValidationErrors","hasErrors","hasAsyncValidationErrors","passwordValidityConditionalClass","validity","tooltipConditionalClass","inputFieldArgs","hasValidations","computedValidations","validation","_b","_a","checkCapsLock","toggleInputType","onInput","checkValidity","validationItem","handleCapsLockMouseLeave","handleCapsLockMouseEnter","watch","focused2","isCapsLockOn2","watchDebounced","inputValue2"],"mappings":"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"}
@@ -1,184 +0,0 @@
1
- import { defineComponent as O, ref as r, computed as w, watch as z, createElementBlock as b, openBlock as v, normalizeClass as P, createElementVNode as a, createVNode as s, renderSlot as x, Transition as R, withCtx as c, createCommentVNode as y, withKeys as V, unref as t, Fragment as A, createTextVNode as S, toDisplayString as h, createBlock as T, nextTick as U } from "vue";
2
- import { d as W, B as j } from "./typography.DN5eC5ch.js";
3
- import { B } from "./button.6HMG0xEY.js";
4
- import { B as q } from "./loading-indicator.DEepb9Wl.js";
5
- import { B as J, s as Y, g as G, a as H, f as Q } from "./focus-trap.D-HSKa_Q.js";
6
- import { E as X } from "./expand.DusW7F7p.js";
7
- import { C as Z } from "./cross.CbLEjiVy.js";
8
- import { g as ee } from "./generate-uid.NJ8tVoha.js";
9
- import { u as te } from "./i18n.D9azDLPe.js";
10
- import { a as ne } from "./index.C5sL_d0I.js";
11
- import { _ as oe } from "./_plugin-vue_export-helper.CHgC5LLL.js";
12
- import "../assets/inspector.css";
13
- const F = {
14
- "en-US": {
15
- close: "Close",
16
- expand: "Expand",
17
- inspector: "Inspector",
18
- returnToMainContent: "Return to main content (Ctrl+Shift+S)",
19
- returnToMainContentDescription: "You can use Ctrl + Shift + S to navigate between the inspector and page sections."
20
- },
21
- "ja-JP": {
22
- close: "閉じる",
23
- expand: "展開"
24
- },
25
- "pt-BR": {
26
- close: "Fechar",
27
- expand: "Expandir"
28
- }
29
- }, ae = { class: "b-inspector__page" }, se = ["aria-label"], ie = { class: "b-inspector__container" }, re = { class: "b-inspector__header" }, ce = ["id"], le = { class: "b-inspector__icons" }, pe = { class: "b-inspector__content" }, de = { i18n: { messages: F } }, ue = /* @__PURE__ */ O({
30
- ...de,
31
- __name: "inspector",
32
- props: {
33
- activePage: { default: "" },
34
- expandable: { type: Boolean, default: !1 },
35
- isOpen: { type: Boolean, default: !1 },
36
- loading: { type: Boolean, default: !1 },
37
- size: { default: "small" },
38
- title: {}
39
- },
40
- emits: ["update:is-open", "update:active-page", "expand"],
41
- setup(I, { emit: $ }) {
42
- const o = I, f = $, { t: l } = te({ messages: F }), C = ee("returnToMainContentDescription"), E = r(null), p = r(null), L = r(null), i = r(null), m = r(null), d = r(!1), M = w(() => ({
43
- [`b-inspector--${o.size}`]: !0
44
- })), D = w(() => `${l("inspector")}, ${o.title}`), _ = async () => {
45
- o.isOpen ? (i.value = document.activeElement, await U(), Y(p.value, i.value)) : u(i.value);
46
- }, K = (e) => {
47
- if (d.value)
48
- return;
49
- const n = e.shiftKey ? -1 : 1, g = G(n, p.value);
50
- H() === g && (e.preventDefault(), m.value = document.activeElement, u(i.value), f("update:active-page", void 0));
51
- }, N = (e) => {
52
- const n = e.shiftKey && e.ctrlKey && e.key === "S";
53
- o.isOpen && !d.value && n && k();
54
- }, k = () => {
55
- Q(p.value) ? (m.value = document.activeElement, u(i.value), f("update:active-page", void 0)) : (i.value = document.activeElement, u(m.value));
56
- }, u = (e) => {
57
- e && (e == null || e.focus(), document.activeElement !== e && u(e.parentElement));
58
- };
59
- return z(
60
- () => o.activePage,
61
- () => {
62
- o.activePage && _();
63
- }
64
- ), ne(p, (e) => {
65
- const n = e[0];
66
- d.value = E.value.clientWidth === n.contentRect.width;
67
- }), o.activePage || W(
68
- 'BentoInspector "active-page" as optional',
69
- `Make sure to set the "active-page" prop and keep it in sync with "update:active-page".
70
- "active-page" prop will be required in the next version`,
71
- "2.0.0"
72
- ), (e, n) => (v(), b("div", {
73
- ref_key: "wrapper",
74
- ref: E,
75
- class: P(["b-inspector", M.value]),
76
- onKeydown: N
77
- }, [
78
- a("div", {
79
- ref_key: "page",
80
- ref: L,
81
- class: "b-inspector__page-wrapper"
82
- }, [
83
- a("div", ae, [
84
- x(e.$slots, "page", {}, void 0, !0)
85
- ])
86
- ], 512),
87
- s(R, {
88
- name: "b-inspector__animation",
89
- mode: "out-in",
90
- onBeforeEnter: _,
91
- onAfterLeave: _
92
- }, {
93
- default: c(() => [
94
- e.isOpen ? (v(), b("aside", {
95
- key: 0,
96
- ref_key: "inspector",
97
- ref: p,
98
- class: "b-inspector__container-wrapper",
99
- "aria-label": D.value,
100
- onKeydown: V(K, ["tab"])
101
- }, [
102
- s(t(J), {
103
- disabled: !d.value
104
- }, {
105
- default: c(() => [
106
- a("div", ie, [
107
- a("div", re, [
108
- d.value ? y("", !0) : (v(), b(A, { key: 0 }, [
109
- s(t(B), {
110
- class: "b-inspector__return-content",
111
- variant: "secondary",
112
- condensed: "",
113
- "aria-describedby": t(C),
114
- onClick: k
115
- }, {
116
- default: c(() => [
117
- S(h(t(l)("returnToMainContent")), 1)
118
- ]),
119
- _: 1
120
- }, 8, ["aria-describedby"]),
121
- a("span", {
122
- id: t(C),
123
- class: "b-inspector__return-content-description"
124
- }, h(t(l)("returnToMainContentDescription")), 9, ce)
125
- ], 64)),
126
- s(t(j), {
127
- el: "h2",
128
- variant: "title",
129
- class: "b-inspector__title"
130
- }, {
131
- default: c(() => [
132
- S(h(e.title), 1)
133
- ]),
134
- _: 1
135
- }),
136
- a("div", le, [
137
- e.expandable ? (v(), T(t(B), {
138
- key: 0,
139
- variant: "tertiary",
140
- onClick: n[0] || (n[0] = (g) => f("expand"))
141
- }, {
142
- iconLeft: c(() => [
143
- s(t(X), {
144
- "svg-title": t(l)("expand")
145
- }, null, 8, ["svg-title"])
146
- ]),
147
- _: 1
148
- })) : y("", !0),
149
- s(t(B), {
150
- variant: "tertiary",
151
- onClick: n[1] || (n[1] = (g) => f("update:is-open", !1))
152
- }, {
153
- iconLeft: c(() => [
154
- s(t(Z), {
155
- "svg-title": t(l)("close")
156
- }, null, 8, ["svg-title"])
157
- ]),
158
- _: 1
159
- })
160
- ])
161
- ]),
162
- a("div", pe, [
163
- e.loading ? (v(), T(t(q), {
164
- key: 0,
165
- large: "",
166
- class: "b-inspector__loading-indicator"
167
- })) : x(e.$slots, "content", { key: 1 }, void 0, !0)
168
- ])
169
- ])
170
- ]),
171
- _: 3
172
- }, 8, ["disabled"])
173
- ], 40, se)) : y("", !0)
174
- ]),
175
- _: 3
176
- })
177
- ], 34));
178
- }
179
- }), ke = /* @__PURE__ */ oe(ue, [["__scopeId", "data-v-752b5b86"]]), we = ["small", "large"];
180
- export {
181
- we as B,
182
- ke as i
183
- };
184
- //# sourceMappingURL=inspector.types.s0va--Nn.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"inspector.types.s0va--Nn.js","sources":["../../../vue2/src/components/inspector/inspector.vue","../../../vue2/src/components/inspector/inspector.types.ts"],"sourcesContent":["<template>\n <div ref=\"wrapper\" class=\"b-inspector\" :class=\"conditionalClass\" @keydown=\"handleSectionFocus\">\n <div ref=\"page\" class=\"b-inspector__page-wrapper\">\n <div class=\"b-inspector__page\">\n <slot name=\"page\" />\n </div>\n </div>\n <Transition name=\"b-inspector__animation\" mode=\"out-in\" @before-enter=\"setFocus\" @after-leave=\"setFocus\">\n <aside\n v-if=\"isOpen\"\n ref=\"inspector\"\n class=\"b-inspector__container-wrapper\"\n :aria-label=\"inspectorAriaLabel\"\n @keydown.tab=\"handleTabNavigation\"\n >\n <bento-focus-trap :disabled=\"!isFullWidthInspector\">\n <div class=\"b-inspector__container\">\n <div class=\"b-inspector__header\">\n <template v-if=\"!isFullWidthInspector\">\n <bento-button\n class=\"b-inspector__return-content\"\n variant=\"secondary\"\n condensed\n :aria-describedby=\"returnToMainContentDescriptionId\"\n @click=\"moveFocusBetweenSections\"\n >\n {{ t('returnToMainContent') }}\n </bento-button>\n <span\n :id=\"returnToMainContentDescriptionId\"\n class=\"b-inspector__return-content-description\"\n >{{ t('returnToMainContentDescription') }}</span\n >\n </template>\n <bento-typography el=\"h2\" variant=\"title\" class=\"b-inspector__title\">\n {{ title }}\n </bento-typography>\n <div class=\"b-inspector__icons\">\n <bento-button v-if=\"expandable\" variant=\"tertiary\" @click=\"emit('expand')\">\n <template #iconLeft><expand-icon :svg-title=\"t('expand')\"></expand-icon></template>\n </bento-button>\n <bento-button variant=\"tertiary\" @click=\"emit('update:is-open', false)\">\n <template #iconLeft><cross-icon :svg-title=\"t('close')\"></cross-icon></template>\n </bento-button>\n </div>\n </div>\n <div class=\"b-inspector__content\">\n <bento-loading-indicator v-if=\"loading\" large class=\"b-inspector__loading-indicator\" />\n <slot v-else name=\"content\" />\n </div>\n </div>\n </bento-focus-trap>\n </aside>\n </Transition>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, nextTick, ref, watch } from 'vue';\n import { BentoTypography } from '@/components/typography';\n import { BentoButton } from '@/components/button';\n import { BentoLoadingIndicator } from '@/components/loading-indicator';\n import { BentoFocusTrap } from '@/components/focus-trap';\n import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\n import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n import { generateUid } from '@/core/utils/ts';\n import { useI18n } from '@/utils/ts/i18n';\n import { deprecate } from '@/utils/ts/deprecate';\n import { getNextFocusableElement } from '@/utils/ts/focus-trap.utils';\n import { useResizeObserver } from '@vueuse/core';\n import moveFocusInside, { focusInside, getActiveElement } from 'focus-lock';\n\n import { BentoInspectorSize } from './inspector.types';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const props = withDefaults(\n defineProps<{\n /**\n * ID of the current active inspector page\n */\n activePage?: string;\n\n /**\n * Shows the Expand icon in the inspector\n */\n expandable?: boolean;\n\n /**\n * Opens and closes the inspector\n */\n isOpen?: boolean;\n\n /**\n * Shows loading indicator for the content\n */\n loading?: boolean;\n\n /**\n * Determines the size of the inspector\n */\n size?: BentoInspectorSize;\n\n /**\n * The title of the component\n */\n title: string;\n }>(),\n {\n activePage: '',\n expandable: false,\n isOpen: false,\n loading: false,\n size: 'small',\n }\n );\n\n const emit = defineEmits<{\n /**\n * Emits update to keep isOpen prop in sync\n */\n (e: 'update:is-open', value: boolean): void;\n /**\n * Emits update to keep activePage prop in sync\n */\n (e: 'update:active-page', value: string): void;\n /**\n * Emits event when user click expand button\n */\n (e: 'expand'): void;\n }>();\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const returnToMainContentDescriptionId = generateUid('returnToMainContentDescription');\n const wrapper = ref<HTMLElement>(null);\n const inspector = ref<HTMLElement>(null);\n const page = ref<HTMLElement>(null);\n const pageLastFocusedElement = ref<HTMLElement>(null);\n const inspectorLastFocusedElement = ref<HTMLElement>(null);\n const isFullWidthInspector = ref(false);\n\n const conditionalClass = computed(() => ({\n [`b-inspector--${props.size}`]: true,\n }));\n\n const inspectorAriaLabel = computed(() => `${t('inspector')}, ${props.title}`);\n\n const setFocus = async () => {\n if (props.isOpen) {\n pageLastFocusedElement.value = document.activeElement as HTMLElement;\n await nextTick();\n moveFocusInside(inspector.value, pageLastFocusedElement.value);\n } else {\n // This doesn't work with data grid cell actions, as the button gets destroyed once is not being hovered.\n // To be reviewed after LevelAccess revision\n focusElement(pageLastFocusedElement.value);\n }\n };\n\n const handleTabNavigation = event => {\n if (isFullWidthInspector.value) {\n return;\n }\n const direction = event.shiftKey ? -1 : 1;\n const focusableEl = getNextFocusableElement(direction, inspector.value);\n // If the nextfocusableEl is the same as the activeElement that means it's the last focusable element\n // inside the inspector, so the focus is moved back to the last focused element on the page\n if (getActiveElement() === focusableEl) {\n event.preventDefault();\n inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n focusElement(pageLastFocusedElement.value);\n // Set active-page as undefined when focus is not on page\n emit('update:active-page', undefined);\n }\n };\n\n const handleSectionFocus = event => {\n const sectionShortcut = event.shiftKey && event.ctrlKey && event.key === 'S';\n if (props.isOpen && !isFullWidthInspector.value && sectionShortcut) {\n moveFocusBetweenSections();\n }\n };\n\n const moveFocusBetweenSections = () => {\n if (focusInside(inspector.value)) {\n inspectorLastFocusedElement.value = document.activeElement as HTMLElement;\n focusElement(pageLastFocusedElement.value);\n // Set active-page as undefined when focus is not on page\n emit('update:active-page', undefined);\n } else {\n pageLastFocusedElement.value = document.activeElement as HTMLElement;\n focusElement(inspectorLastFocusedElement.value);\n }\n };\n\n const focusElement = (element: HTMLElement) => {\n if (!element) {\n return;\n }\n element?.focus();\n if (document.activeElement !== element) {\n focusElement(element.parentElement);\n }\n };\n\n watch(\n () => props.activePage,\n () => {\n if (props.activePage) {\n setFocus();\n }\n }\n );\n\n useResizeObserver(inspector, entries => {\n const entry = entries[0];\n isFullWidthInspector.value = wrapper.value.clientWidth === entry.contentRect.width;\n });\n\n if (!props.activePage) {\n deprecate(\n 'BentoInspector \"active-page\" as optional',\n `Make sure to set the \"active-page\" prop and keep it in sync with \"update:active-page\".\n \"active-page\" prop will be required in the next version`,\n '2.0.0'\n );\n }\n</script>\n\n<script lang=\"ts\">\n /**\n * Inspector allows users to access additional information or details of an object/item. The inspector opens adjacent to the main content, pushing it aside to maintain visibility and accessibility to both the main content and inspector.\n *\n * @example\n * import { BentoInspector } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoInspector },\n * template: `\n * <bento-inspector\n * title=\"Inspector\"\n * size=\"large\"\n * :is-open=\"isOpen\"\n * :active-page=\"activePage\"\n * expandable\n * @update:is-open=\"isOpen = $event\"\n * @update:active-page=\"activePage = $event\"\n * >\n * <template #page>Content of the page</template>\n * <template #content>Content of the inspector</template>\n * </bento-inspector>\n * `\n * }\n */\n export default { i18n: { messages } };\n</script>\n\n<style lang=\"scss\" scoped src=\"./inspector.scss\" />\n","export const BentoInspectorSizeOptions = ['small', 'large'] as const;\n\nexport type BentoInspectorSize = (typeof BentoInspectorSizeOptions)[number];\n"],"names":["__default__","messages","props","__props","emit","__emit","t","useI18n","returnToMainContentDescriptionId","generateUid","wrapper","ref","inspector","page","pageLastFocusedElement","inspectorLastFocusedElement","isFullWidthInspector","conditionalClass","computed","inspectorAriaLabel","setFocus$1","nextTick","setFocus","focusElement","handleTabNavigation","event","direction","focusableEl","getNextFocusableElement","getActiveElement","handleSectionFocus","sectionShortcut","moveFocusBetweenSections","focusInside","element","watch","useResizeObserver","entries","entry","deprecate","BentoInspectorSizeOptions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;yOAgQIA,KAAA,EAAA,MAAA,EAAA,UAAAC,EAAA,EAAA;;;;;;;;;;;;;AAlLA,UAAAC,IAAAC,GAyCAC,IAAAC,GAeA,EAAA,GAAAC,EAAA,IAAAC,GAAA,EAAA,UAAAN,EAAA,CAAA,GACAO,IAAAC,GAAA,gCAAA,GACAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GACAG,IAAAH,EAAA,IAAA,GACAI,IAAAJ,EAAA,IAAA,GACAK,IAAAL,EAAA,EAAA,GAEAM,IAAAC,EAAA,OAAA;AAAA,MAAyC,CAAA,gBAAAhB,EAAA,IAAA,EAAA,GAAA;AAAA,IACL,EAAA,GAGpCiB,IAAAD,EAAA,MAAA,GAAAZ,EAAA,WAAA,CAAA,KAAAJ,EAAA,KAAA,EAAA,GAEAkB,IAAA,YAAA;AACI,MAAAlB,EAAA,UACIY,EAAA,QAAA,SAAA,eACA,MAAAO,EAAA,GACAC,EAAAV,EAAA,OAAAE,EAAA,KAAA,KAIAS,EAAAT,EAAA,KAAA;AAAA,IACJ,GAGJU,IAAA,CAAAC,MAAA;AACI,UAAAT,EAAA;AACI;AAEJ,YAAAU,IAAAD,EAAA,WAAA,KAAA,GACAE,IAAAC,EAAAF,GAAAd,EAAA,KAAA;AAGA,MAAAiB,EAAA,MAAAF,MACIF,EAAA,eAAA,GACAV,EAAA,QAAA,SAAA,eACAQ,EAAAT,EAAA,KAAA,GAEAV,EAAA,sBAAA,MAAA;AAAA,IACJ,GAGJ0B,IAAA,CAAAL,MAAA;AACI,YAAAM,IAAAN,EAAA,YAAAA,EAAA,WAAAA,EAAA,QAAA;AACA,MAAAvB,EAAA,UAAA,CAAAc,EAAA,SAAAe,KACIC,EAAA;AAAA,IACJ,GAGJA,IAAA,MAAA;AACI,MAAAC,EAAArB,EAAA,KAAA,KACIG,EAAA,QAAA,SAAA,eACAQ,EAAAT,EAAA,KAAA,GAEAV,EAAA,sBAAA,MAAA,MAEAU,EAAA,QAAA,SAAA,eACAS,EAAAR,EAAA,KAAA;AAAA,IACJ,GAGJQ,IAAA,CAAAW,MAAA;AACI,MAAAA,MAGAA,KAAA,QAAAA,EAAA,SACA,SAAA,kBAAAA,KACIX,EAAAW,EAAA,aAAA;AAAA,IACJ;AAGJ,WAAAC;AAAA,MAAA,MAAAjC,EAAA;AAAA,MACgB,MAAA;AAER,QAAAA,EAAA,cACIkB,EAAA;AAAA,MACJ;AAAA,IACJ,GAGJgB,GAAAxB,GAAA,CAAAyB,MAAA;AACI,YAAAC,IAAAD,EAAA,CAAA;AACA,MAAArB,EAAA,QAAAN,EAAA,MAAA,gBAAA4B,EAAA,YAAA;AAAA,IAA6E,CAAA,GAGjFpC,EAAA,cACIqC;AAAA,MAAA;AAAA,MACI;AAAA;AAAA,MACA;AAAA,IAEA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qEClOCC,KAAA,CAAA,SAAA,OAAA;"}
@@ -1 +0,0 @@
1
- {"version":3,"file":"payment-method.CLUppDo_.js","sources":["../../../vue2/src/components/payment-method/composables/use-payment-icon/use-payment-icon.ts","../../../ui-assets/icons-pm/dist/vue/unknowncard.vue","../../../vue2/src/components/payment-method/payment-method.vue"],"sourcesContent":["import { ref, Ref, watch } from 'vue';\n\n/**\n * Generates the payment icon URl from a payment icons string.\n * @param paymentType - the payment icon you wish to generate a URL for.\n * @returns the payment icon URL to the SVG for a specific payment icon.\n */\nexport const paymentMethodToCdnUrl = (paymentType: string) =>\n `https://checkoutshopper-live.cdn.adyen.com/checkoutshopper/images/logos/${paymentType.toLowerCase()}.svg`;\n\n/**\n * Dynamically retrieves the payment method icon SVG from the @adyen/ui-assets-payment-method-icons package.\n *\n * @param type the type of payment method\n * @param useFallback if fallback icon should be used in case of error\n * @returns\n */\nexport const usePaymentIcon = (type: Ref<string>) => {\n const paymentType = ref(type);\n const paymentIconSrc = ref<string>();\n\n watch(\n paymentType,\n newPaymentType => {\n if (newPaymentType == null || newPaymentType === 'Unknowncard') {\n return;\n }\n // TODO: what about when to use checkoutshopper-test? Should we add this to the config of Bento?\n paymentIconSrc.value = paymentMethodToCdnUrl(newPaymentType);\n },\n { immediate: true }\n );\n\n return paymentIconSrc;\n};\n","\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-pm\" xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"26\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><g :clip-path=\"'url(#uia-ui-assets/icons-pm-unknowncard__a' + uuid + ')'\"><path fill=\"#fff\" d=\"M0 0H40V26H0V0Z\"/><path fill=\"#00112C\" d=\"M32 9V8C32 7.20435 31.6839 6.44129 31.1213 5.87868C30.5587 5.31607 29.7956 5 29 5H11C10.2044 5 9.44129 5.31607 8.87868 5.87868C8.31607 6.44129 8 7.20435 8 8V9H32Z\"/><path fill=\"#00112C\" d=\"M8 12V18C8 18.7956 8.31607 19.5587 8.87868 20.1213C9.44129 20.6839 10.2044 21 11 21H29C29.7956 21 30.5587 20.6839 31.1213 20.1213C31.6839 19.5587 32 18.7956 32 18V12H8Z\"/><rect width=\"5\" height=\"2\" x=\"24\" y=\"16\" fill=\"#fff\" rx=\".5\"/></g><defs><clipPath :id=\"'uia-ui-assets/icons-pm-unknowncard__a' + uuid\"><rect width=\"40\" height=\"26\" fill=\"#fff\"/></clipPath></defs></svg>\n</template>\n<script>\n import '../css/main.css';\n\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n","<template>\n <div class=\"b-payment-method\">\n <div class=\"b-payment-method__icon-container\">\n <img\n v-if=\"type !== 'Unknowncard' && !hasErroredOnImage\"\n aria-hidden=\"true\"\n class=\"b-payment-method__icon\"\n :class=\"conditionalIconClasses\"\n :alt=\"label\"\n :src=\"paymentMethodIconSrc\"\n @error=\"onSrcError\"\n />\n <unknown-card-icon v-else :svg-title=\"label\" aria-hidden=\"true\" />\n </div>\n <div class=\"b-payment-method__label\">\n <span v-if=\"isSummaryGridLayout\">{{ label }}</span>\n <bento-typography v-else el=\"span\">{{ label }}</bento-typography>\n </div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, defineComponent, inject, ref, toRef, watch } from 'vue';\n import { BentoTypography } from '@/components/typography';\n import { SUMMARY_GRID_LAYOUT_INJECTION_KEY } from '@/components/summary-grid/summary-grid.keys';\n import { BentoSummaryGridLayout } from '@/components/summary-grid';\n import { usePaymentIcon } from './composables/use-payment-icon/use-payment-icon';\n import type { BentoPaymentMethodProps } from './payment-method.types';\n import UnknownCardIcon from '@adyen/ui-assets-payment-method-icons/vue/unknowncard';\n\n const props = withDefaults(defineProps<BentoPaymentMethodProps>(), {\n type: 'Unknowncard',\n small: false,\n });\n const type = toRef(props, 'type');\n const hasErroredOnImage = ref(false);\n const paymentMethodIconSrc = usePaymentIcon(type);\n const conditionalIconClasses = computed(() => ({\n 'b-payment-method__icon--small': props.small,\n }));\n\n /* == Summary-grid styles == */\n const registerPaymentMethodInSummaryGrid: BentoSummaryGridLayout = inject(\n SUMMARY_GRID_LAYOUT_INJECTION_KEY,\n () => ({\n isSummaryGridLayout: false,\n })\n );\n\n const { isSummaryGridLayout } = registerPaymentMethodInSummaryGrid();\n\n /**\n * This funciton is fired if the payment image source is not valid and has thrown an error.\n */\n const onSrcError = () => {\n hasErroredOnImage.value = true;\n };\n\n // Reset the image error to be able to load the new payment type\n watch(\n () => type.value,\n (newType, oldType) => {\n if (newType !== oldType) {\n hasErroredOnImage.value = false;\n }\n }\n );\n</script>\n\n<script lang=\"ts\">\n /**\n * A payment method type component to display the type's icon and label.\n *\n * @example\n * import { BentoPaymentMethod} from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoPaymentMethod },\n * template: `\n * <bento-payment-method type=\"Ideal\" />\n * `\n * }\n */\n export default defineComponent({\n name: 'bento-payment-method',\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./payment-method.scss\" />\n"],"names":["paymentMethodToCdnUrl","paymentType","usePaymentIcon","type","ref","paymentIconSrc","watch","newPaymentType","uuid","_hoisted_2$1","_hoisted_3$1","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","__default__","defineComponent","props","__props","toRef","hasErroredOnImage","paymentMethodIconSrc","conditionalIconClasses","computed","registerPaymentMethodInSummaryGrid","inject","SUMMARY_GRID_LAYOUT_INJECTION_KEY","isSummaryGridLayout","onSrcError","newType","oldType"],"mappings":";;;;;AAOO,MAAAA,IAAA,CAAAC,MAAA,2EAAAA,EAAA,YAAA,CAAA,QAUMC,IAAA,CAAAC,MAAA;AACT,QAAAF,IAAAG,EAAAD,CAAA,GACAE,IAAAD,EAAA;AAEA,SAAAE;AAAA,IAAAL;AAAA,IACI,CAAAM,MAAA;AAEI,MAAAA,KAAA,QAAAA,MAAA,kBAIAF,EAAA,QAAAL,EAAAO,CAAA;AAAA,IAA2D;AAAA,IAC/D,EAAA,WAAA,GAAA;AAAA,EACkB,GAGtBF;AACJ;AC3BI,IAAAG,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;mBAZZC,IAAA,CAAA,WAAA,GAAAC,IAAA,CAAA,IAAA;;AAEI,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;gFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE4M,aAAA,+CAAAD,EAAA,OAAA;AAAA;;QAA4E,MAAA;AAAA,QAAY,GAAA;AAAA;;QAA2B,MAAA;AAAA,QAAe,GAAA;AAAA;;QAA8K,MAAA;AAAA,QAAe,GAAA;AAAA;;QAAoL,OAAA;AAAA,QAAU,QAAA;AAAA,QAAW,GAAA;AAAA,QAAO,GAAA;AAAA,QAAO,MAAA;AAAA,QAAY,IAAA;AAAA;IAF9uB,IAAA,GAAAL,CAAA;AAAA;;QAE4wB,IAAA,0CAAAK,EAAA;AAAA;;UAA0D,OAAA;AAAA,UAAW,QAAA;AAAA,UAAY,MAAA;AAAA;MAF71B,IAAA,GAAAJ,CAAA;AAAA;;;qNCmFIM,IAAAC,EAAA;AAAA,EAA+B,MAAA;AAE/B,CAAA;;;;;;;;AAvDA,UAAAC,IAAAC,GAIAhB,IAAAiB,EAAAF,GAAA,MAAA,GACAG,IAAAjB,EAAA,EAAA,GACAkB,IAAApB,EAAAC,CAAA,GACAoB,IAAAC,EAAA,OAAA;AAAA,MAA+C,iCAAAN,EAAA;AAAA,IACJ,EAAA,GAI3CO,IAAAC;AAAA,MAAmEC;AAAA,MAC/D,OAAA;AAAA,QACO,qBAAA;AAAA,MACkB;AAAA,IACzB,GAGJ,EAAA,qBAAAC,EAAA,IAAAH,EAAA,GAKAI,IAAA,MAAA;AACI,MAAAR,EAAA,QAAA;AAAA,IAA0B;AAI9B,WAAAf;AAAA,MAAA,MAAAH,EAAA;AAAA,MACe,CAAA2B,GAAAC,MAAA;AAEP,QAAAD,MAAAC,MACIV,EAAA,QAAA;AAAA,MACJ;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}