@adyen/bento-vue2 1.71.0 → 1.72.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 (228) hide show
  1. package/README.md +3 -1
  2. package/dist/@types/index.d.ts +405 -581
  3. package/dist/action-bar.js +1 -1
  4. package/dist/assets/accordion-item.css +1 -1
  5. package/dist/assets/action-bar.css +1 -1
  6. package/dist/assets/ai-button.css +1 -0
  7. package/dist/assets/base-button.css +1 -1
  8. package/dist/assets/base-modal.css +1 -1
  9. package/dist/assets/button-actions.css +1 -0
  10. package/dist/assets/calendar.css +1 -1
  11. package/dist/assets/card.css +1 -1
  12. package/dist/assets/code-snippet.css +1 -1
  13. package/dist/assets/dashboard-section.css +1 -1
  14. package/dist/assets/data-grid-template.css +1 -1
  15. package/dist/assets/data-grid.css +1 -1
  16. package/dist/assets/date-picker.css +1 -1
  17. package/dist/assets/dialog-page.css +1 -1
  18. package/dist/assets/empty-state.css +1 -1
  19. package/dist/assets/field-label.css +1 -0
  20. package/dist/assets/file-uploader.css +1 -1
  21. package/dist/assets/filter-bar.css +1 -1
  22. package/dist/assets/focus-trap.css +1 -1
  23. package/dist/assets/input-field-phone-number.css +1 -1
  24. package/dist/assets/inspector.css +1 -1
  25. package/dist/assets/layout-row.css +1 -1
  26. package/dist/assets/modal-fullscreen.css +1 -1
  27. package/dist/assets/popper-container.css +1 -1
  28. package/dist/assets/selection-card-group.css +1 -1
  29. package/dist/assets/sidepanel.css +1 -1
  30. package/dist/assets/structured-list-item.css +1 -1
  31. package/dist/button.js +11 -9
  32. package/dist/button.js.map +1 -1
  33. package/dist/card.js +1 -1
  34. package/dist/checkbox.js +2 -2
  35. package/dist/chip.js +1 -1
  36. package/dist/chunks/{action-bar.C01Tjxh_.js → action-bar.Bxrtx1Vj.js} +3 -3
  37. package/dist/chunks/{action-bar.C01Tjxh_.js.map → action-bar.Bxrtx1Vj.js.map} +1 -1
  38. package/dist/chunks/ai-button.FRPkTHz6.js +67 -0
  39. package/dist/chunks/ai-button.FRPkTHz6.js.map +1 -0
  40. package/dist/chunks/{base-button.BB5tkzjh.js → base-button.Cv-1788W.js} +6 -6
  41. package/dist/chunks/base-button.Cv-1788W.js.map +1 -0
  42. package/dist/chunks/{base-modal.CnIt7hra.js → base-modal.DInbAZlp.js} +4 -4
  43. package/dist/chunks/{base-modal.CnIt7hra.js.map → base-modal.DInbAZlp.js.map} +1 -1
  44. package/dist/chunks/{button-actions-with-menu.B9R0J68W.js → button-actions-with-menu.BtWUxmSL.js} +2 -2
  45. package/dist/chunks/{button-actions-with-menu.B9R0J68W.js.map → button-actions-with-menu.BtWUxmSL.js.map} +1 -1
  46. package/dist/chunks/{toggle-button.B1Y2qhzJ.js → button-actions.55vIvDsX.js} +241 -239
  47. package/dist/chunks/button-actions.55vIvDsX.js.map +1 -0
  48. package/dist/chunks/button-actions.types.BptAXjD8.js.map +1 -1
  49. package/dist/chunks/{calendar.DjktWs25.js → calendar.M69sfyB9.js} +290 -287
  50. package/dist/chunks/{calendar.DjktWs25.js.map → calendar.M69sfyB9.js.map} +1 -1
  51. package/dist/chunks/{card.DTrBQQAm.js → card.C11dmth8.js} +2 -2
  52. package/dist/chunks/{card.DTrBQQAm.js.map → card.C11dmth8.js.map} +1 -1
  53. package/dist/chunks/{checkbox-group.lVv3mWHL.js → checkbox-group.Cr3WdkDM.js} +4 -4
  54. package/dist/chunks/{checkbox-group.lVv3mWHL.js.map → checkbox-group.Cr3WdkDM.js.map} +1 -1
  55. package/dist/chunks/{checkbox.C7Yu3rls.js → checkbox.D7-f9Y6w.js} +18 -18
  56. package/dist/chunks/{checkbox.C7Yu3rls.js.map → checkbox.D7-f9Y6w.js.map} +1 -1
  57. package/dist/chunks/{chevron-right.C--ZOC9j.js → chevron-left.BS24hEFa.js} +5 -5
  58. package/dist/chunks/chevron-left.BS24hEFa.js.map +1 -0
  59. package/dist/chunks/{chip.Bfi-ff5E.js → chip.omQX_Ziq.js} +2 -2
  60. package/dist/chunks/{chip.Bfi-ff5E.js.map → chip.omQX_Ziq.js.map} +1 -1
  61. package/dist/chunks/{code-snippet.BvhpH_JE.js → code-snippet.BGrwAxWy.js} +100 -91
  62. package/dist/chunks/code-snippet.BGrwAxWy.js.map +1 -0
  63. package/dist/chunks/{controls-group.DUr_o-vW.js → controls-group.CWeUgE2P.js} +2 -2
  64. package/dist/chunks/{controls-group.DUr_o-vW.js.map → controls-group.CWeUgE2P.js.map} +1 -1
  65. package/dist/chunks/{copy.CsyXGPuN.js → copy._BdbMnHK.js} +3 -3
  66. package/dist/chunks/{copy.CsyXGPuN.js.map → copy._BdbMnHK.js.map} +1 -1
  67. package/dist/chunks/{dashboard-section.CiFxBFnc.js → dashboard-section.e7ozaS9M.js} +3 -3
  68. package/dist/chunks/{dashboard-section.CiFxBFnc.js.map → dashboard-section.e7ozaS9M.js.map} +1 -1
  69. package/dist/chunks/{dashed-underline.CTtzy_vE.js → dashed-underline.CGU6o7ni.js} +3 -3
  70. package/dist/chunks/{dashed-underline.CTtzy_vE.js.map → dashed-underline.CGU6o7ni.js.map} +1 -1
  71. package/dist/chunks/{data-grid-template.CmfHBR3u.js → data-grid-template.BaPjUlZ2.js} +10 -10
  72. package/dist/chunks/data-grid-template.BaPjUlZ2.js.map +1 -0
  73. package/dist/chunks/{data-grid.D2AvGjyH.js → data-grid.B_Ha2vma.js} +772 -726
  74. package/dist/chunks/data-grid.B_Ha2vma.js.map +1 -0
  75. package/dist/chunks/{date-picker.Bhe5lCfr.js → date-picker.CGTMHUNH.js} +75 -69
  76. package/dist/chunks/date-picker.CGTMHUNH.js.map +1 -0
  77. package/dist/chunks/{date-range-picker.BsQ6kMzK.js → date-range-picker.ChGfJUPq.js} +7 -7
  78. package/dist/chunks/{date-range-picker.BsQ6kMzK.js.map → date-range-picker.ChGfJUPq.js.map} +1 -1
  79. package/dist/chunks/{dropdown-tag.DaVNZO_q.js → dropdown-tag.Bwl0fY7o.js} +3 -3
  80. package/dist/chunks/{dropdown-tag.DaVNZO_q.js.map → dropdown-tag.Bwl0fY7o.js.map} +1 -1
  81. package/dist/chunks/{dropdown.J5FaL_2T.js → dropdown.DQbTuKc5.js} +5 -5
  82. package/dist/chunks/{dropdown.J5FaL_2T.js.map → dropdown.DQbTuKc5.js.map} +1 -1
  83. package/dist/chunks/empty-state.DNTrhYUm.js +106 -0
  84. package/dist/chunks/empty-state.DNTrhYUm.js.map +1 -0
  85. package/dist/chunks/es6.MoTTyETW.js.map +1 -1
  86. package/dist/chunks/{error-message.BGuKk5tR.js → field-label.BKzuCnXr.js} +53 -53
  87. package/dist/chunks/field-label.BKzuCnXr.js.map +1 -0
  88. package/dist/chunks/{file-uploader.ZHBf2zwh.js → file-uploader.BEClGxsF.js} +3 -3
  89. package/dist/chunks/{file-uploader.ZHBf2zwh.js.map → file-uploader.BEClGxsF.js.map} +1 -1
  90. package/dist/chunks/{filter-bar.CNxqgSgM.js → filter-bar.Dnnv0rpV.js} +184 -185
  91. package/dist/chunks/filter-bar.Dnnv0rpV.js.map +1 -0
  92. package/dist/chunks/{fixed-scroller.DDYpO7Li.js → fixed-scroller.QCXpkadN.js} +2 -2
  93. package/dist/chunks/{fixed-scroller.DDYpO7Li.js.map → fixed-scroller.QCXpkadN.js.map} +1 -1
  94. package/dist/chunks/{focus-trap.COfrmVfx.js → focus-trap.BJfpIboH.js} +155 -144
  95. package/dist/chunks/{focus-trap.COfrmVfx.js.map → focus-trap.BJfpIboH.js.map} +1 -1
  96. package/dist/chunks/{footer-actions.CR8l2FSl.js → footer-actions.BTELM6rh.js} +2 -2
  97. package/dist/chunks/{footer-actions.CR8l2FSl.js.map → footer-actions.BTELM6rh.js.map} +1 -1
  98. package/dist/chunks/{header-meta.tZNYmQBF.js → header-meta.DZYH-qg-.js} +3 -3
  99. package/dist/chunks/{header-meta.tZNYmQBF.js.map → header-meta.DZYH-qg-.js.map} +1 -1
  100. package/dist/chunks/{header-with-views.BXZT6R6N.js → header-with-views.DjZa4Wob.js} +8 -8
  101. package/dist/chunks/{header-with-views.BXZT6R6N.js.map → header-with-views.DjZa4Wob.js.map} +1 -1
  102. package/dist/chunks/{header.CwlFMYus.js → header.CQMiTG7f.js} +3 -3
  103. package/dist/chunks/{header.CwlFMYus.js.map → header.CQMiTG7f.js.map} +1 -1
  104. package/dist/chunks/{info-icon.JAvdSXdT.js → info-icon.fB7jf3NJ.js} +3 -3
  105. package/dist/chunks/{info-icon.JAvdSXdT.js.map → info-icon.fB7jf3NJ.js.map} +1 -1
  106. package/dist/chunks/{input-field-password.C1bzrmje.js → input-field-password.BPujvbx8.js} +5 -5
  107. package/dist/chunks/{input-field-password.C1bzrmje.js.map → input-field-password.BPujvbx8.js.map} +1 -1
  108. package/dist/chunks/{input-field-phone-number.YTbO3djd.js → input-field-phone-number.bqUe_CVf.js} +5 -5
  109. package/dist/chunks/{input-field-phone-number.YTbO3djd.js.map → input-field-phone-number.bqUe_CVf.js.map} +1 -1
  110. package/dist/chunks/{input-field.o-Hie5W9.js → input-field.CwF6ldRY.js} +3 -3
  111. package/dist/chunks/{input-field.o-Hie5W9.js.map → input-field.CwF6ldRY.js.map} +1 -1
  112. package/dist/chunks/{inspector.DxteqciY.js → inspector.g3OErNAU.js} +2 -2
  113. package/dist/chunks/{inspector.DxteqciY.js.map → inspector.g3OErNAU.js.map} +1 -1
  114. package/dist/chunks/{listbox-option-tag.AsRozx37.js → listbox-option-tag.UaD4kmXc.js} +2 -2
  115. package/dist/chunks/{listbox-option-tag.AsRozx37.js.map → listbox-option-tag.UaD4kmXc.js.map} +1 -1
  116. package/dist/chunks/{modal-fullscreen.B_72Iyh-.js → modal-fullscreen.B-9Ke6Ya.js} +3 -3
  117. package/dist/chunks/{modal-fullscreen.B_72Iyh-.js.map → modal-fullscreen.B-9Ke6Ya.js.map} +1 -1
  118. package/dist/chunks/{modal.crwnBhJG.js → modal.qybFapnI.js} +4 -4
  119. package/dist/chunks/{modal.crwnBhJG.js.map → modal.qybFapnI.js.map} +1 -1
  120. package/dist/chunks/{pagination.B4SjTHnN.js → pagination.BWTyXMRW.js} +2 -2
  121. package/dist/chunks/{pagination.B4SjTHnN.js.map → pagination.BWTyXMRW.js.map} +1 -1
  122. package/dist/chunks/popover.types.iyDoIAOE.js +6 -0
  123. package/dist/chunks/popover.types.iyDoIAOE.js.map +1 -0
  124. package/dist/chunks/{popper-container.Dt0SuHXX.js → popper-container.C9KCAJxI.js} +12 -5
  125. package/dist/chunks/{popper-container.Dt0SuHXX.js.map → popper-container.C9KCAJxI.js.map} +1 -1
  126. package/dist/chunks/{radio-group.T5hXVLRz.js → radio-group.DHUa6baR.js} +4 -4
  127. package/dist/chunks/{radio-group.T5hXVLRz.js.map → radio-group.DHUa6baR.js.map} +1 -1
  128. package/dist/chunks/{rich-text-editor._5fF0vFL.js → rich-text-editor.C905JEDW.js} +4 -4
  129. package/dist/chunks/{rich-text-editor._5fF0vFL.js.map → rich-text-editor.C905JEDW.js.map} +1 -1
  130. package/dist/chunks/{search-bar.yIVTIbdP.js → search-bar.CKt_-tZH.js} +3 -3
  131. package/dist/chunks/{search-bar.yIVTIbdP.js.map → search-bar.CKt_-tZH.js.map} +1 -1
  132. package/dist/chunks/{secondary-nav.DBetOL_3.js → secondary-nav.B5L2bLmm.js} +2 -2
  133. package/dist/chunks/{secondary-nav.DBetOL_3.js.map → secondary-nav.B5L2bLmm.js.map} +1 -1
  134. package/dist/chunks/{segmented-control.DrShqTCa.js → segmented-control.Dc34mUMM.js} +2 -2
  135. package/dist/chunks/{segmented-control.DrShqTCa.js.map → segmented-control.Dc34mUMM.js.map} +1 -1
  136. package/dist/chunks/{selection-card-group.3QYPl3w3.js → selection-card-group.CBVKMu6b.js} +10 -10
  137. package/dist/chunks/{selection-card-group.3QYPl3w3.js.map → selection-card-group.CBVKMu6b.js.map} +1 -1
  138. package/dist/chunks/{sidepanel.U9XLcivw.js → sidepanel.uWNc58r7.js} +4 -4
  139. package/dist/chunks/{sidepanel.U9XLcivw.js.map → sidepanel.uWNc58r7.js.map} +1 -1
  140. package/dist/chunks/{step.DwXkOVky.js → step.D8blWwfR.js} +2 -2
  141. package/dist/chunks/{step.DwXkOVky.js.map → step.D8blWwfR.js.map} +1 -1
  142. package/dist/chunks/structured-list-item.BLalgOps.js +90 -0
  143. package/dist/chunks/structured-list-item.BLalgOps.js.map +1 -0
  144. package/dist/chunks/{summary-grid.types.BZlzUWVO.js → summary-grid.types.DqzYJ9_N.js} +5 -5
  145. package/dist/chunks/{summary-grid.types.BZlzUWVO.js.map → summary-grid.types.DqzYJ9_N.js.map} +1 -1
  146. package/dist/chunks/{tab.ClkH0GtX.js → tab.D8YyoNFV.js} +2 -2
  147. package/dist/chunks/{tab.ClkH0GtX.js.map → tab.D8YyoNFV.js.map} +1 -1
  148. package/dist/chunks/{tag.Dcm5YMUI.js → tag.Tjg4linG.js} +2 -2
  149. package/dist/chunks/{tag.Dcm5YMUI.js.map → tag.Tjg4linG.js.map} +1 -1
  150. package/dist/chunks/{textarea.B2jAycbX.js → textarea.DUPV-I-L.js} +2 -2
  151. package/dist/chunks/{textarea.B2jAycbX.js.map → textarea.DUPV-I-L.js.map} +1 -1
  152. package/dist/chunks/{timeline-item.Dhcs9a0S.js → timeline-item.DaRKHndA.js} +5 -5
  153. package/dist/chunks/{timeline-item.Dhcs9a0S.js.map → timeline-item.DaRKHndA.js.map} +1 -1
  154. package/dist/chunks/{tooltip.C94gYIPr.js → tooltip.DOD_4rkI.js} +2 -2
  155. package/dist/chunks/{tooltip.C94gYIPr.js.map → tooltip.DOD_4rkI.js.map} +1 -1
  156. package/dist/chunks/{tutorial.DAv_sABs.js → tutorial.BwnRyUoh.js} +4 -4
  157. package/dist/chunks/{tutorial.DAv_sABs.js.map → tutorial.BwnRyUoh.js.map} +1 -1
  158. package/dist/chunks/{use-cached-selected-values.DSDrNPbW.js → use-cached-selected-values.C7j6YhuC.js} +4 -4
  159. package/dist/chunks/use-cached-selected-values.C7j6YhuC.js.map +1 -0
  160. package/dist/code-snippet.js +1 -1
  161. package/dist/dashboard-template.js +1 -1
  162. package/dist/dashed-underline.js +1 -1
  163. package/dist/data-grid-template.js +1 -1
  164. package/dist/data-grid.js +1 -1
  165. package/dist/date-picker.js +2 -2
  166. package/dist/date-range-picker.js +2 -2
  167. package/dist/dropdown.js +3 -3
  168. package/dist/empty-state.js +1 -1
  169. package/dist/file-uploader.js +1 -1
  170. package/dist/filter-bar.js +1 -1
  171. package/dist/focus-trap.js +1 -1
  172. package/dist/header-with-views.js +1 -1
  173. package/dist/header.js +1 -1
  174. package/dist/index.js +174 -172
  175. package/dist/index.js.map +1 -1
  176. package/dist/info-icon.js +1 -1
  177. package/dist/input-field-password.js +1 -1
  178. package/dist/input-field-phone-number.js +1 -1
  179. package/dist/input-field.js +1 -1
  180. package/dist/inspector.js +1 -1
  181. package/dist/internal.js +11 -11
  182. package/dist/menu.js +1 -1
  183. package/dist/modal-fullscreen.js +1 -1
  184. package/dist/modal.js +2 -2
  185. package/dist/pagination.js +1 -1
  186. package/dist/popover.js +2 -2
  187. package/dist/popper-container.js +1 -1
  188. package/dist/radio-group.js +1 -1
  189. package/dist/rich-text-editor.js +1 -1
  190. package/dist/search-bar.js +2 -2
  191. package/dist/secondary-nav.js +1 -1
  192. package/dist/segmented-control.js +1 -1
  193. package/dist/selection-card.js +1 -1
  194. package/dist/sidepanel.js +1 -1
  195. package/dist/stepper.js +1 -1
  196. package/dist/structured-list.js +1 -1
  197. package/dist/styles/bento-dark.css +35 -16
  198. package/dist/styles/bento-light.css +34 -11
  199. package/dist/styles/bento.css +34 -11
  200. package/dist/styles/legacy.css +2108 -0
  201. package/dist/styles/styleguide.css +34 -11
  202. package/dist/styles/utility.css +12 -0
  203. package/dist/summary-grid.js +1 -1
  204. package/dist/tabs.js +1 -1
  205. package/dist/tag.js +1 -1
  206. package/dist/textarea.js +1 -1
  207. package/dist/timeline.js +1 -1
  208. package/dist/tutorial.js +1 -1
  209. package/dist/web-types.json +186 -14
  210. package/package.json +3 -3
  211. package/dist/assets/error-message.css +0 -1
  212. package/dist/assets/toggle-button.css +0 -1
  213. package/dist/chunks/base-button.BB5tkzjh.js.map +0 -1
  214. package/dist/chunks/chevron-right.C--ZOC9j.js.map +0 -1
  215. package/dist/chunks/code-snippet.BvhpH_JE.js.map +0 -1
  216. package/dist/chunks/data-grid-template.CmfHBR3u.js.map +0 -1
  217. package/dist/chunks/data-grid.D2AvGjyH.js.map +0 -1
  218. package/dist/chunks/date-picker.Bhe5lCfr.js.map +0 -1
  219. package/dist/chunks/empty-state.DAbj9xWF.js +0 -151
  220. package/dist/chunks/empty-state.DAbj9xWF.js.map +0 -1
  221. package/dist/chunks/error-message.BGuKk5tR.js.map +0 -1
  222. package/dist/chunks/filter-bar.CNxqgSgM.js.map +0 -1
  223. package/dist/chunks/popover.types.BUM8GOuO.js +0 -6
  224. package/dist/chunks/popover.types.BUM8GOuO.js.map +0 -1
  225. package/dist/chunks/structured-list-item.DHklFEiK.js +0 -87
  226. package/dist/chunks/structured-list-item.DHklFEiK.js.map +0 -1
  227. package/dist/chunks/toggle-button.B1Y2qhzJ.js.map +0 -1
  228. package/dist/chunks/use-cached-selected-values.DSDrNPbW.js.map +0 -1
@@ -1,49 +1,49 @@
1
- import { ref as v, computed as u, defineComponent as q, toRef as E, watch as W, nextTick as O } from "vue";
2
- import { f as T, s as R, a as D } from "./calendar.DjktWs25.js";
3
- import { h as j } from "./toggle-button.B1Y2qhzJ.js";
4
- import { B as K } from "./typography.hlOAxsEn.js";
5
- import { D as $ } from "./dropdown-default-textbox.CDm-PQfc.js";
6
- import { d as z } from "./debounce.DUTu11PS.js";
7
- import { D as _, v as G, f as H } from "./date-input.BqBdAO1E.js";
8
- import { g as m } from "./generate-uid.NJ8tVoha.js";
1
+ import { ref as u, computed as p, defineComponent as q, toRef as S, watch as W, nextTick as j } from "vue";
2
+ import { f as T, s as R, a as m } from "./calendar.M69sfyB9.js";
3
+ import { h as K } from "./button-actions.55vIvDsX.js";
4
+ import { B as z } from "./typography.hlOAxsEn.js";
5
+ import { D as G } from "./dropdown-default-textbox.CDm-PQfc.js";
6
+ import { d as H } from "./debounce.DUTu11PS.js";
7
+ import { D as _, v as J, f as Q } from "./date-input.BqBdAO1E.js";
8
+ import { g as v } from "./generate-uid.NJ8tVoha.js";
9
9
  import { u as B } from "./i18n.BQkEbtPM.js";
10
- import { g as J } from "./get-date-locale.CAyOIbcp.js";
11
- import { u as Q } from "./use-form-layout-loading.D3lALhtC.js";
10
+ import { g as X } from "./get-date-locale.CAyOIbcp.js";
11
+ import { u as Z } from "./use-form-layout-loading.D3lALhtC.js";
12
12
  import "./index.Cl4_42j5.js";
13
- import { B as X } from "./directive.Cbdox5VL.js";
14
- import { F as Z, E as ee } from "./error-message.BGuKk5tR.js";
15
- import { n as ae } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
13
+ import { B as $ } from "./directive.Cbdox5VL.js";
14
+ import { F as ee, E as ae } from "./field-label.BKzuCnXr.js";
15
+ import { n as te } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
16
16
  import "../assets/date-picker.css";
17
- const te = ({
17
+ const re = ({
18
18
  datePickerValue: a,
19
19
  isDateIncorrect: e,
20
20
  isMonthVariant: t
21
21
  }) => {
22
- var p;
23
- const { locale: n, t: b } = B(), o = J(), c = v((p = a.value) == null ? void 0 : p.toDateString());
22
+ var f;
23
+ const { locale: n, t: y } = B(), o = X(), c = u((f = a.value) == null ? void 0 : f.toDateString());
24
24
  return {
25
25
  // Values
26
- dateDisplayValue: u(() => e.value ? c.value : a.value ? T(
26
+ dateDisplayValue: p(() => e.value ? c.value : a.value ? T(
27
27
  a.value,
28
28
  t != null && t.value ? _.LONG_MONTH_YEAR : _.FULL_DATE,
29
29
  {
30
30
  locale: o[n.value.substring(0, 2)] || o.enUS
31
31
  }
32
- ) : b("selectDate")),
32
+ ) : y("selectDate")),
33
33
  textInputValue: c,
34
34
  // Methods
35
- formatTextInputDisplayValue: (f = a.value) => {
35
+ formatTextInputDisplayValue: (D = a.value) => {
36
36
  if (e.value)
37
37
  return;
38
- const l = t != null && t.value ? R(f) : f;
39
- c.value = f ? T(l, _.NUMERIC_DATE_YEAR_FIRST, {
38
+ const l = t != null && t.value ? R(D) : D;
39
+ c.value = D ? T(l, _.NUMERIC_DATE_YEAR_FIRST, {
40
40
  locale: o[n.value.substring(0, 2)] || o.enUS
41
41
  }) : null;
42
42
  }
43
43
  };
44
44
  };
45
45
  var d = /* @__PURE__ */ ((a) => (a.INPUT = "input", a))(d || {});
46
- const re = {
46
+ const ne = {
47
47
  "en-US": {
48
48
  datePicker: "Date picker",
49
49
  provideDateInAFormat: "Provide date in a YYYY-MM-DD format",
@@ -59,18 +59,18 @@ const re = {
59
59
  datePicker: "Seletor de datas",
60
60
  selectDate: "Selecione uma data"
61
61
  }
62
- }, ne = 1e3, le = q({
63
- i18n: { messages: re },
62
+ }, le = 1e3, ie = q({
63
+ i18n: { messages: ne },
64
64
  name: "bento-date-picker",
65
65
  components: {
66
- BentoTypography: K,
67
- BentoPopover: j,
68
- Calendar: D,
69
- ErrorMessage: ee,
70
- DropdownInputDefault: $,
71
- FieldLabel: Z
66
+ BentoTypography: z,
67
+ BentoPopover: K,
68
+ Calendar: m,
69
+ ErrorMessage: ae,
70
+ DropdownInputDefault: G,
71
+ FieldLabel: ee
72
72
  },
73
- directives: { BentoClickOutsideDirective: X },
73
+ directives: { BentoClickOutsideDirective: $ },
74
74
  props: {
75
75
  /**
76
76
  * Descriptive supporting text visbile underneath the dropdown.
@@ -87,19 +87,19 @@ const re = {
87
87
  /**
88
88
  * Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday
89
89
  */
90
- firstDayOfWeek: D.props.firstDayOfWeek,
90
+ firstDayOfWeek: m.props.firstDayOfWeek,
91
91
  /**
92
92
  * Indicate if a date should be disabled or not
93
93
  */
94
- isDateDisabled: D.props.isDateDisabled,
94
+ isDateDisabled: m.props.isDateDisabled,
95
95
  /**
96
96
  * Sets a minimum limit for selectable dates - dates before `min` will not be selectable
97
97
  */
98
- min: D.props.min,
98
+ min: m.props.min,
99
99
  /**
100
100
  * Sets a maximum limit for selectable dates - dates after `max` will not be selectable
101
101
  */
102
- max: D.props.max,
102
+ max: m.props.max,
103
103
  /**
104
104
  * Text that is displayed as a label above the element.
105
105
  */
@@ -143,92 +143,98 @@ const re = {
143
143
  },
144
144
  emits: [d.INPUT],
145
145
  setup(a, { emit: e }) {
146
- const { t } = B(), n = m("bento-date-picker-container"), b = m("bento-date-picker-label"), o = m("bento-date-picker-description"), c = m("bento-date-picker-error"), y = m("bento-date-picker-date-error"), I = u(() => a.label || t("datePicker", { name: n })), p = v(null), f = v(null), l = v(!1), i = v(!1), { isReadOnly: w } = Q(E(a, "readonly"));
146
+ const { t } = B(), n = v("bento-date-picker-container"), y = v("bento-date-picker-label"), o = v("bento-date-picker-description"), c = v("bento-date-picker-error"), b = v("bento-date-picker-date-error"), I = p(() => a.label || t("datePicker", { name: n })), f = u(null), D = u(null), l = u(!1), i = u(!1), x = u(void 0), { isReadOnly: w } = Z(S(a, "readonly"));
147
147
  W(
148
148
  () => a.disabled,
149
149
  (r) => {
150
150
  r && i.value && (i.value = !1);
151
151
  }
152
152
  );
153
- const N = u(() => a.variant === "month"), { dateDisplayValue: U, textInputValue: s, formatTextInputDisplayValue: x } = te({
154
- datePickerValue: E(a, "value"),
153
+ const N = p(() => a.variant === "month"), { dateDisplayValue: U, textInputValue: s, formatTextInputDisplayValue: P } = re({
154
+ datePickerValue: S(a, "value"),
155
155
  isDateIncorrect: l,
156
156
  isMonthVariant: N
157
- }), k = u(() => a.isDateDisabled && s.value && a.isDateDisabled(new Date(s.value)) && !i.value ? t("selectedDateIsNotAvailable") : l.value ? t("provideDateInAFormat") : null), A = u(() => ({
157
+ }), k = p(() => a.isDateDisabled && s.value && a.isDateDisabled(new Date(s.value)) && !i.value ? t("selectedDateIsNotAvailable") : l.value ? t("provideDateInAFormat") : null), F = p(() => ({
158
158
  "b-date-picker__description--error": a.errorMessage || k.value
159
- })), L = u(
160
- () => `${a.description ? o : ""} ${a.errorMessage ? c : ""} ${k.value ? y : ""}`.trim() || null
161
- ), h = (r) => a.min && r <= a.min || a.max && r >= a.max ? !1 : a.isDateDisabled ? !a.isDateDisabled(r) : !0, C = () => {
159
+ })), A = p(
160
+ () => `${a.description ? o : ""} ${a.errorMessage ? c : ""} ${k.value ? b : ""}`.trim() || null
161
+ ), L = (r) => a.min && r <= a.min || a.max && r >= a.max ? !1 : a.isDateDisabled ? !a.isDateDisabled(r) : !0, C = () => {
162
162
  i.value = !1;
163
- }, P = () => {
164
- i.value = !0, x();
165
- }, F = (r) => {
163
+ }, O = () => {
164
+ i.value = !0, P();
165
+ }, h = (r) => {
166
166
  l.value = !1, C(), e(d.INPUT, r);
167
167
  }, M = async () => {
168
168
  l.value && (l.value = !1, s.value = null), e(d.INPUT, null);
169
169
  }, V = (r) => {
170
- G(r);
171
- }, S = (r) => {
170
+ J(r);
171
+ }, E = (r) => {
172
172
  if (r.length < 10)
173
173
  return;
174
- /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/.test(r) && h(new Date(r)) ? (l.value = !1, e(d.INPUT, new Date(r))) : r && (l.value = !0, e(d.INPUT, null));
175
- }, Y = z(S, ne);
174
+ /^\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/.test(r) && L(new Date(r)) ? (l.value = !1, e(d.INPUT, new Date(r))) : r && (l.value = !0, e(d.INPUT, null));
175
+ }, Y = H(E, le);
176
176
  return {
177
177
  // Refs
178
- inputContainerRef: f,
179
- calendarContainerRef: p,
178
+ inputContainerRef: D,
179
+ calendarContainerRef: f,
180
180
  // Values,
181
181
  dateDisplayValue: U,
182
182
  datePickerContainerId: n,
183
- descriptionConditionalClasses: A,
183
+ descriptionConditionalClasses: F,
184
184
  isDateIncorrect: l,
185
185
  isDatePickerOpen: i,
186
186
  isReadOnly: w,
187
187
  dateErrorText: k,
188
- labelId: b,
188
+ labelId: y,
189
189
  descriptionId: o,
190
190
  errorId: c,
191
- dateErrorId: y,
191
+ dateErrorId: b,
192
192
  popoverAriaLabel: I,
193
- ariaDescribedBy: L,
193
+ ariaDescribedBy: A,
194
194
  textInputValue: s,
195
+ initialFocusOnDatePickerOpen: x,
195
196
  // Events
196
197
  closeDatePicker: C,
197
198
  clearDatePickerValue: M,
198
- onDateSelected: F,
199
- openDatePicker: P,
199
+ onDateSelected: h,
200
+ openDatePicker: O,
200
201
  onDateKeyDown: V,
201
202
  onDateInputChange: (r) => {
202
- s.value = H(r), i.value ? Y(s.value) : S(s.value);
203
+ s.value = Q(r), i.value ? Y(s.value) : E(s.value);
203
204
  },
204
205
  // Keyboard navigation
205
206
  onSpaceBarOrEnter: async (r) => {
206
207
  var g;
207
- i.value || (r.preventDefault(), P(), await O(), a.value || (x(/* @__PURE__ */ new Date()), e(d.INPUT, /* @__PURE__ */ new Date()), await O()), (g = p.value) == null || g.$refs.calendarRef[0].focusOnDate(
208
- a.variant === "month" ? R(a.value) : a.value
209
- ));
208
+ i.value || (r.preventDefault(), O(), await j(), a.value || (P(/* @__PURE__ */ new Date()), e(d.INPUT, /* @__PURE__ */ new Date())), x.value = ((g = f.value) == null ? void 0 : g.$refs.calendarRef[0].focusOnDate(
209
+ a.variant === "month" ? R(a.value) : a.value,
210
+ !0
211
+ )) ?? void 0);
210
212
  }
211
213
  };
212
214
  }
213
215
  });
214
- var ie = function() {
216
+ var oe = function() {
215
217
  var e = this, t = e._self._c;
216
218
  return e._self._setupProxy, t("div", { directives: [{ name: "bento-click-outside-directive", rawName: "v-bento-click-outside-directive", value: e.closeDatePicker, expression: "closeDatePicker" }], staticClass: "b-date-picker", on: { "!keydown": [function(n) {
217
219
  return !n.type.indexOf("key") && e._k(n.keyCode, "space", 32, n.key, [" ", "Spacebar"]) ? null : e.onSpaceBarOrEnter.apply(null, arguments);
218
220
  }, function(n) {
219
221
  return !n.type.indexOf("key") && e._k(n.keyCode, "enter", 13, n.key, "Enter") ? null : e.onSpaceBarOrEnter.apply(null, arguments);
220
- }] } }, [e.label ? t("field-label", { attrs: { id: e.labelId, label: e.label, "tooltip-text": e.tooltipText, optional: e.optional, required: e.required } }) : e._e(), t("div", [t("dropdown-input-default", { ref: "inputContainerRef", attrs: { "always-combobox-is-input": "", ariaControls: e.datePickerContainerId, ariaExpanded: e.isDatePickerOpen, "aria-labelledby": e.label ? e.labelId : null, "aria-describedby": e.ariaDescribedBy, disabled: e.disabled, "dynamic-filtering": "", "is-invalid": !!e.errorMessage || !!e.dateErrorText, open: e.isDatePickerOpen, value: e.textInputValue, "display-value": e.dateDisplayValue, "debounce-time": 0, readonly: e.isReadOnly }, on: { input: e.onDateInputChange, open: e.openDatePicker, keydown: e.onDateKeyDown, clear: e.clearDatePickerValue, close: e.closeDatePicker } })], 1), e.dateErrorText ? t("error-message", { staticClass: "b-date-picker__error-message", attrs: { id: e.dateErrorId, "error-message": e.dateErrorText } }) : e._e(), e.errorMessage ? t("error-message", { staticClass: "b-date-picker__error-message", attrs: { id: e.errorId, "error-message": e.errorMessage } }) : e._e(), e.description ? t("bento-typography", { staticClass: "b-date-picker__description", class: e.descriptionConditionalClasses, attrs: { el: "span" } }, [e._v(" " + e._s(e.description) + " ")]) : e._e(), e.inputContainerRef ? t("bento-popover", { staticClass: "b-date-picker__container", attrs: { id: e.datePickerContainerId, role: "dialog", open: e.isDatePickerOpen, "target-element": e.inputContainerRef, "disable-focus-trap": !0, "aria-label": e.popoverAriaLabel, "aria-modal": !0, position: "bottom-start", "fit-content": "" } }, [t("calendar", { ref: "calendarContainerRef", attrs: { "default-display-month": e.defaultDisplayMonth, "first-day-of-week": e.firstDayOfWeek, "is-date-disabled": e.isDateDisabled, "number-of-months": 1, value: e.value, min: e.min, max: e.max, variant: e.variant }, on: { input: e.onDateSelected } })], 1) : e._e()], 1);
221
- }, oe = [], se = /* @__PURE__ */ ae(
222
- le,
222
+ }] } }, [e.label ? t("field-label", { attrs: { id: e.labelId, label: e.label, "tooltip-text": e.tooltipText, optional: e.optional, required: e.required } }) : e._e(), t("div", [t("dropdown-input-default", { ref: "inputContainerRef", attrs: { "always-combobox-is-input": "", ariaControls: e.datePickerContainerId, ariaExpanded: e.isDatePickerOpen, "aria-labelledby": e.label ? e.labelId : null, "aria-describedby": e.ariaDescribedBy, disabled: e.disabled, "dynamic-filtering": "", "is-invalid": !!e.errorMessage || !!e.dateErrorText, open: e.isDatePickerOpen, value: e.textInputValue, "display-value": e.dateDisplayValue, "debounce-time": 0, readonly: e.isReadOnly }, on: { input: e.onDateInputChange, open: e.openDatePicker, keydown: e.onDateKeyDown, clear: e.clearDatePickerValue, close: e.closeDatePicker } })], 1), e.dateErrorText ? t("error-message", { staticClass: "b-date-picker__error-message", attrs: { id: e.dateErrorId, "error-message": e.dateErrorText } }) : e._e(), e.errorMessage ? t("error-message", { staticClass: "b-date-picker__error-message", attrs: { id: e.errorId, "error-message": e.errorMessage } }) : e._e(), e.description ? t("bento-typography", { staticClass: "b-date-picker__description", class: e.descriptionConditionalClasses, attrs: { el: "span" } }, [e._v(" " + e._s(e.description) + " ")]) : e._e(), e.inputContainerRef ? t("bento-popover", { staticClass: "b-date-picker__container", attrs: { id: e.datePickerContainerId, role: "dialog", open: e.isDatePickerOpen, "target-element": e.inputContainerRef, "aria-label": e.popoverAriaLabel, "aria-modal": !0, position: "bottom-start", "fit-content": "", "trap-all": "", "trap-all-options": {
223
+ initialFocus: e.initialFocusOnDatePickerOpen
224
+ } }, nativeOn: { keydown: function(n) {
225
+ return !n.type.indexOf("key") && e._k(n.keyCode, "esc", 27, n.key, ["Esc", "Escape"]) ? null : e.closeDatePicker.apply(null, arguments);
226
+ } } }, [t("calendar", { ref: "calendarContainerRef", attrs: { "default-display-month": e.defaultDisplayMonth, "first-day-of-week": e.firstDayOfWeek, "is-date-disabled": e.isDateDisabled, "number-of-months": 1, value: e.value, min: e.min, max: e.max, variant: e.variant }, on: { input: e.onDateSelected } })], 1) : e._e()], 1);
227
+ }, se = [], de = /* @__PURE__ */ te(
223
228
  ie,
224
229
  oe,
230
+ se,
225
231
  !1,
226
232
  null,
227
- "1944efa2"
233
+ "a57e3006"
228
234
  );
229
- const Ee = se.exports;
235
+ const Se = de.exports;
230
236
  export {
231
- Ee as B,
237
+ Se as B,
232
238
  d as a
233
239
  };
234
- //# sourceMappingURL=date-picker.Bhe5lCfr.js.map
240
+ //# sourceMappingURL=date-picker.CGTMHUNH.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"date-picker.CGTMHUNH.js","sources":["../../src/components/date-picker/composables/use-date-picker-single-calendar-text.ts","../../src/components/date-picker/date-picker.types.ts","../../src/components/date-picker/date-picker.vue"],"sourcesContent":["import { computed, ref } from 'vue';\nimport { useI18n } from '@/utils/ts/i18n';\nimport { type UseDateDisplayText } from './use-date-picker-single-calendar-text.types';\nimport { DateFormat } from '@/types';\nimport { getDateLocale } from '@/utils/ts/get-date-locale/get-date-locale';\nimport format from 'date-fns/format';\nimport startOfMonth from 'date-fns/startOfMonth';\n\n/**\n * Composable that sets and formats the date to be displayed in the input box of a Single Date Picker\n * @param {Ref<Date>} option.datePickerValue Ref to the datePickerValue set in the DatePicker component\n * @param {Ref<boolean>} option.isDateIncorrect Indicates if the date is correct or not\n * @param {?Ref<boolean>} option.isMonthVariant Indicates if the date picker has variant \"month\"\n */\nexport const useDatePickerSingleCalendarText: UseDateDisplayText<Date> = ({\n datePickerValue,\n isDateIncorrect,\n isMonthVariant,\n}) => {\n const { locale, t } = useI18n();\n const locales = getDateLocale();\n\n const textInputValue = ref(datePickerValue.value?.toDateString());\n\n const dateDisplayValue = computed(() => {\n // Display incorrect date when there's an error with the input\n if (isDateIncorrect.value) {\n return textInputValue.value;\n }\n\n // Display \"Select a date\" when there's no date selected or input\n if (!datePickerValue.value) {\n return t('selectDate') as string;\n }\n\n // Display the date in format \"dd MMM, yyyy (25 Jun, 2023)\" or \"MMMM yyyy (June 2023)\"\n // if there's a valid date selected\n return format(\n datePickerValue.value,\n isMonthVariant?.value ? DateFormat.LONG_MONTH_YEAR : DateFormat.FULL_DATE,\n {\n locale: locales[locale.value.substring(0, 2)] || locales.enUS,\n }\n );\n });\n\n /**\n * Formats the \"dateToFormat\" date value with the yyyy-MM-dd format and sets it as \"formatTextInputDisplayValue\" value\n * @param {Date} dateToFormat - Date to be assigned and formatted\n */\n const formatTextInputDisplayValue = (dateToFormat: Date = datePickerValue.value) => {\n // If date is incorrect, leave the textInputValue intact\n if (isDateIncorrect.value) {\n return;\n }\n\n const date = isMonthVariant?.value ? startOfMonth(dateToFormat) : dateToFormat;\n textInputValue.value = dateToFormat\n ? format(date, DateFormat.NUMERIC_DATE_YEAR_FIRST, {\n locale: locales[locale.value.substring(0, 2)] || locales.enUS,\n })\n : null;\n };\n\n return {\n // Values\n dateDisplayValue,\n textInputValue,\n\n // Methods\n formatTextInputDisplayValue,\n };\n};\n","export { CalendarFirstDayOfWeek as BentoDatePickerFirstDayOfWeek } from '@/internal';\nexport type {\n CalendarIsDateDisabled as BentoDatePickerIsDateDisabled,\n CalendarSingleDateValue as BentoDatePickerValue,\n CalendarVariant as BentoDatePickerVariant,\n} from '@/internal';\n\nexport enum BentoDatePickerEvent {\n INPUT = 'input',\n}\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\n v-bento-click-outside-directive=\"closeDatePicker\"\n class=\"b-date-picker\"\n @keydown.space.capture=\"onSpaceBarOrEnter\"\n @keydown.enter.capture=\"onSpaceBarOrEnter\"\n >\n <!-- Label -->\n <field-label\n v-if=\"label\"\n :id=\"labelId\"\n :label=\"label\"\n :tooltip-text=\"tooltipText\"\n :optional=\"optional\"\n :required=\"required\"\n />\n\n <!-- Input -->\n <div>\n <dropdown-input-default\n ref=\"inputContainerRef\"\n always-combobox-is-input\n :ariaControls=\"datePickerContainerId\"\n :ariaExpanded=\"isDatePickerOpen\"\n :aria-labelledby=\"label ? labelId : null\"\n :aria-describedby=\"ariaDescribedBy\"\n :disabled=\"disabled\"\n dynamic-filtering\n :is-invalid=\"!!errorMessage || !!dateErrorText\"\n :open=\"isDatePickerOpen\"\n :value=\"textInputValue\"\n :display-value=\"dateDisplayValue\"\n :debounce-time=\"0\"\n :readonly=\"isReadOnly\"\n @input=\"onDateInputChange\"\n @open=\"openDatePicker\"\n @keydown=\"onDateKeyDown\"\n @clear=\"clearDatePickerValue\"\n @close=\"closeDatePicker\"\n />\n </div>\n\n <!-- Error Messages -->\n <error-message\n v-if=\"dateErrorText\"\n :id=\"dateErrorId\"\n :error-message=\"dateErrorText\"\n class=\"b-date-picker__error-message\"\n />\n <error-message\n v-if=\"errorMessage\"\n :id=\"errorId\"\n :error-message=\"errorMessage\"\n class=\"b-date-picker__error-message\"\n />\n\n <!-- Description -->\n <bento-typography\n v-if=\"description\"\n class=\"b-date-picker__description\"\n :class=\"descriptionConditionalClasses\"\n el=\"span\"\n >\n {{ description }}\n </bento-typography>\n\n <!-- Calendar container -->\n <bento-popover\n v-if=\"inputContainerRef\"\n :id=\"datePickerContainerId\"\n class=\"b-date-picker__container\"\n role=\"dialog\"\n :open=\"isDatePickerOpen\"\n :target-element=\"inputContainerRef\"\n :aria-label=\"popoverAriaLabel\"\n :aria-modal=\"true\"\n position=\"bottom-start\"\n fit-content\n trap-all\n :trap-all-options=\"{\n initialFocus: initialFocusOnDatePickerOpen,\n }\"\n @keydown.esc.native=\"closeDatePicker\"\n >\n <calendar\n ref=\"calendarContainerRef\"\n :default-display-month=\"defaultDisplayMonth\"\n :first-day-of-week=\"firstDayOfWeek\"\n :is-date-disabled=\"isDateDisabled\"\n :number-of-months=\"1\"\n :value=\"value\"\n :min=\"min\"\n :max=\"max\"\n :variant=\"variant\"\n @input=\"onDateSelected\"\n />\n </bento-popover>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, nextTick, type PropType, type Ref, ref, toRef, watch } from 'vue';\n import startOfMonth from 'date-fns/startOfMonth';\n\n // Components\n import { BentoPopover } from '@/components/popover';\n import { BentoTypography } from '../typography';\n import { Calendar, ErrorMessage, FieldLabel } from '@/internal';\n import { DropdownInputDefault } from '@/components/dropdown/components';\n\n // Utils\n import { debounce } from '@/utils/ts/debounce';\n import { formatDateInputValue, validateDateInput } from '@/utils/ts/date-input';\n import { generateUid } from '@/core/utils/ts';\n import { useI18n } from '@/utils/ts/i18n';\n\n // Composables\n import { useDatePickerSingleCalendarText } from './composables/use-date-picker-single-calendar-text';\n import { useFormLayoutFieldLoading } from '@/composables';\n\n // Directive\n import { BentoClickOutsideDirective } from '@/directives';\n\n // Types\n import { BentoDatePickerEvent, type BentoDatePickerValue, type BentoDatePickerVariant } from './date-picker.types';\n\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n const DEBOUNCE_TIME = 1000;\n\n /**\n * Date picker selector.\n *\n * @example\n * import { BentoDatePicker } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoDatePicker },\n * template: `\n * <bento-date-picker\n * label=\"Label\"\n * description=\"Supporting text\"\n * required\n * optional\n * disabled\n * @input=\"onDateChanged\"\n * v-model=\"selectedDate\"\n * />\n * `,\n * setup() {\n * const selectedDate = ref(new Date()); // reactive({ startDate: new Date(), endDate: new Date() })\n * return {\n * selectedDate,\n * }\n * }\n * }\n */\n export default defineComponent({\n i18n: { messages },\n name: 'bento-date-picker',\n components: {\n BentoTypography,\n BentoPopover,\n Calendar,\n ErrorMessage,\n DropdownInputDefault,\n FieldLabel,\n },\n directives: { BentoClickOutsideDirective },\n props: {\n /**\n * Descriptive supporting text visbile underneath the dropdown.\n */\n description: { type: String, default: undefined },\n\n /**\n * Disables dropdown functionality.\n */\n disabled: { type: Boolean, default: false },\n\n /**\n * Displays component in an error state with an error message\n */\n errorMessage: { type: String, default: null },\n\n /**\n * Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday\n */\n firstDayOfWeek: Calendar.props.firstDayOfWeek,\n\n /**\n * Indicate if a date should be disabled or not\n */\n isDateDisabled: Calendar.props.isDateDisabled,\n\n /**\n * Sets a minimum limit for selectable dates - dates before `min` will not be selectable\n */\n min: Calendar.props.min,\n\n /**\n * Sets a maximum limit for selectable dates - dates after `max` will not be selectable\n */\n max: Calendar.props.max,\n\n /**\n * Text that is displayed as a label above the element.\n */\n label: { type: String, default: undefined },\n\n /**\n * Highlights the dropdown is optional.\n */\n optional: { type: Boolean, default: false },\n\n /**\n * The Boolean readonly property, when present, makes the element not mutable, meaning the user can not edit the date picker.\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 * Adds a info icon next to the label to display the passed tooltip message.\n */\n tooltipText: { type: String, default: null },\n\n /**\n * Selected date\n */\n value: { type: [Date, Object] as PropType<BentoDatePickerValue>, default: null },\n\n /**\n * The type of calendar to display. Defaults to showing days.\n */\n variant: {\n type: String as PropType<`${BentoDatePickerVariant}`>,\n default: undefined, // Default will be set by @/internal/calendar\n },\n\n /**\n * Default start date for the calendar pane\n */\n defaultDisplayMonth: {\n type: String,\n default: null,\n validator: (value: string) => {\n // Checks for YYYY-MM-DD format\n const dateRegex = /^\\d{4}-(0?[1-9]|1[012])(-(0?[1-9]|[12][0-9]|3[01]))?$/;\n const isValidDate = dateRegex.test(value);\n\n return isValidDate;\n },\n },\n },\n emits: [BentoDatePickerEvent.INPUT],\n setup(props, { emit }) {\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const datePickerContainerId = generateUid('bento-date-picker-container');\n const labelId = generateUid('bento-date-picker-label');\n const descriptionId = generateUid('bento-date-picker-description');\n const errorId = generateUid('bento-date-picker-error');\n const dateErrorId = generateUid('bento-date-picker-date-error');\n const popoverAriaLabel = computed(() => props.label || t('datePicker', { name: datePickerContainerId }));\n\n // Refs\n const calendarContainerRef = ref(null);\n const inputContainerRef = ref(null);\n\n // Values\n const isDateIncorrect = ref(false);\n const isDatePickerOpen = ref(false);\n const initialFocusOnDatePickerOpen = ref(undefined);\n const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n watch(\n () => props.disabled,\n disabled => {\n // Close date picker popover if it's opened when it's disabled\n if (disabled && isDatePickerOpen.value) {\n isDatePickerOpen.value = false;\n }\n }\n );\n\n const isMonthVariant = computed(() => props.variant === 'month');\n\n const { dateDisplayValue, textInputValue, formatTextInputDisplayValue } = useDatePickerSingleCalendarText({\n datePickerValue: toRef(props, 'value') as Ref<Date>,\n isDateIncorrect,\n isMonthVariant,\n });\n\n const dateErrorText = computed(() => {\n if (\n props.isDateDisabled &&\n textInputValue.value &&\n props.isDateDisabled(new Date(textInputValue.value)) &&\n !isDatePickerOpen.value\n ) {\n return t('selectedDateIsNotAvailable');\n }\n\n return isDateIncorrect.value ? t('provideDateInAFormat') : null;\n });\n\n const descriptionConditionalClasses = computed(() => ({\n 'b-date-picker__description--error': props.errorMessage || dateErrorText.value,\n }));\n\n const ariaDescribedBy = computed(\n () =>\n `${props.description ? descriptionId : ''} ${props.errorMessage ? errorId : ''} ${\n dateErrorText.value ? dateErrorId : ''\n }`.trim() || null\n );\n\n const isDateEnabled = (date: Date) => {\n // Check if date is between min/max bounds, if there are any\n if ((props.min && date <= props.min) || (props.max && date >= props.max)) {\n return false;\n }\n\n // Check if function is set, otherwise all dates are enabled\n if (props.isDateDisabled) {\n return !props.isDateDisabled(date);\n }\n\n return true;\n };\n\n const closeDatePicker = () => {\n isDatePickerOpen.value = false;\n };\n\n const openDatePicker = () => {\n isDatePickerOpen.value = true;\n\n formatTextInputDisplayValue();\n };\n\n const onDateSelected = (selectedDate: Date) => {\n // Reset the error state when a valid date is selected\n isDateIncorrect.value = false;\n\n closeDatePicker();\n emit(BentoDatePickerEvent.INPUT, selectedDate);\n };\n\n const clearDatePickerValue = async () => {\n if (isDateIncorrect.value) {\n isDateIncorrect.value = false;\n textInputValue.value = null;\n }\n emit(BentoDatePickerEvent.INPUT, null);\n };\n\n const onDateKeyDown = (event: KeyboardEvent) => {\n validateDateInput(event);\n };\n\n const validateDate = (stringDate: string) => {\n // Validate only if the date is complete\n if (stringDate.length < 10) {\n return;\n }\n\n // Checks for YYYY-MM-DD format\n const dateRegex = /^\\d{4}-(0?[1-9]|1[012])-(0?[1-9]|[12][0-9]|3[01])$/;\n const isValidDate = dateRegex.test(stringDate) && isDateEnabled(new Date(stringDate));\n if (isValidDate) {\n isDateIncorrect.value = false;\n emit(BentoDatePickerEvent.INPUT, new Date(stringDate));\n } else if (stringDate) {\n // Only set to true if the value exists (not null/undefined)\n isDateIncorrect.value = true;\n emit(BentoDatePickerEvent.INPUT, null);\n }\n };\n\n const validateDateDebounced = debounce(validateDate, DEBOUNCE_TIME);\n\n const onDateInputChange = (stringDate: string) => {\n textInputValue.value = formatDateInputValue(stringDate);\n // If we are closing the date picker, we should validate (and emit date inputs) immediately so the user doesn't have to wait for the debounce time.\n if (isDatePickerOpen.value) {\n validateDateDebounced(textInputValue.value);\n } else {\n validateDate(textInputValue.value);\n }\n };\n\n /**\n * Space bar and Enter keyDown event handler.\n *\n * * Opens the date picker dialog on the first keydown.\n * * Move focus to selected date, i.e., the date displayed in the date input text field. If no date has been selected, places focus on the current date.\n * @param {KeyboardEvent} event Event being triggered\n */\n const onSpaceBarOrEnter = async (event: KeyboardEvent) => {\n if (isDatePickerOpen.value) {\n return;\n }\n event.preventDefault();\n\n openDatePicker();\n\n // Wait for the date picker dialog to open\n await nextTick();\n\n // Set current date (today) if no date is selected\n if (!props.value) {\n // Format the opened date picker date to YYYY-MM-DD\n formatTextInputDisplayValue(new Date());\n emit(BentoDatePickerEvent.INPUT, new Date());\n }\n\n // Set initial focus\n initialFocusOnDatePickerOpen.value =\n calendarContainerRef.value?.$refs.calendarRef[0].focusOnDate(\n props.variant === 'month' ? startOfMonth(props.value) : props.value,\n true\n ) ?? undefined;\n };\n\n return {\n // Refs\n inputContainerRef,\n calendarContainerRef,\n\n // Values,\n dateDisplayValue,\n datePickerContainerId,\n descriptionConditionalClasses,\n isDateIncorrect,\n isDatePickerOpen,\n isReadOnly,\n dateErrorText,\n labelId,\n descriptionId,\n errorId,\n dateErrorId,\n popoverAriaLabel,\n ariaDescribedBy,\n textInputValue,\n initialFocusOnDatePickerOpen,\n\n // Events\n closeDatePicker,\n clearDatePickerValue,\n onDateSelected,\n openDatePicker,\n onDateKeyDown,\n onDateInputChange,\n\n // Keyboard navigation\n onSpaceBarOrEnter,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./date-picker.scss\" />\n"],"names":["useDatePickerSingleCalendarText","datePickerValue","isDateIncorrect","isMonthVariant","locale","t","useI18n","locales","getDateLocale","textInputValue","ref","_a","computed","format","DateFormat","dateToFormat","date","startOfMonth","BentoDatePickerEvent","BentoDatePickerEvent2","DEBOUNCE_TIME","_sfc_main","defineComponent","messages","BentoTypography","BentoPopover","Calendar","ErrorMessage","DropdownInputDefault","FieldLabel","BentoClickOutsideDirective","value","props","emit","datePickerContainerId","generateUid","labelId","descriptionId","errorId","dateErrorId","popoverAriaLabel","calendarContainerRef","inputContainerRef","isDatePickerOpen","initialFocusOnDatePickerOpen","isReadOnly","useFormLayoutFieldLoading","toRef","watch","disabled","dateDisplayValue","formatTextInputDisplayValue","dateErrorText","descriptionConditionalClasses","ariaDescribedBy","isDateEnabled","closeDatePicker","openDatePicker","onDateSelected","selectedDate","clearDatePickerValue","onDateKeyDown","event","validateDateInput","validateDate","stringDate","validateDateDebounced","debounce","formatDateInputValue","nextTick"],"mappings":"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"}
@@ -1,24 +1,24 @@
1
1
  import { reactive as ve, defineComponent as Ye, ref as A, computed as I, onMounted as je, toRaw as Te, toRef as Ee, watch as ye } from "vue";
2
2
  import { B as it } from "./divider.CFbtmKeQ.js";
3
- import { h as ot, B as lt } from "./toggle-button.B1Y2qhzJ.js";
3
+ import { h as ot, B as lt } from "./button-actions.55vIvDsX.js";
4
4
  import { B as Qe, d as ut } from "./typography.hlOAxsEn.js";
5
5
  import { D as dt } from "./dropdown-default-textbox.CDm-PQfc.js";
6
6
  import { e as N, a as he, g as _e } from "./get-date-locale.CAyOIbcp.js";
7
7
  import { g as le } from "./generate-uid.NJ8tVoha.js";
8
8
  import { u as Re } from "./i18n.BQkEbtPM.js";
9
- import { e as $e, t as ne, g as ue, i as B, h as F, j as Oe, k as ct, l as we, m as Dt, s as Me, n as mt, o as Ce, a as G, u as ft, f as ae } from "./calendar.DjktWs25.js";
9
+ import { e as $e, t as ne, g as ue, i as B, h as F, j as Oe, k as ct, l as we, m as Dt, s as Me, n as mt, o as Ce, a as G, u as ft, f as ae } from "./calendar.M69sfyB9.js";
10
10
  import { r as w, t as j } from "./index.BrH1t1iu.js";
11
11
  import { f as xe, v as vt, D as k } from "./date-input.BqBdAO1E.js";
12
12
  import { u as pt } from "./use-form-layout-loading.D3lALhtC.js";
13
13
  import "./index.Cl4_42j5.js";
14
- import { B as gt } from "./input-field.o-Hie5W9.js";
15
- import { B as yt } from "./dropdown.J5FaL_2T.js";
16
- import { B as Tt } from "./segmented-control.DrShqTCa.js";
14
+ import { B as gt } from "./input-field.CwF6ldRY.js";
15
+ import { B as yt } from "./dropdown.DQbTuKc5.js";
16
+ import { B as Tt } from "./segmented-control.Dc34mUMM.js";
17
17
  import { d as De } from "./debounce.DUTu11PS.js";
18
18
  import { u as _t } from "./use-has-slot.C9lQZ6nz.js";
19
19
  import { n as Ge } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
20
20
  import { B as Rt } from "./directive.Cbdox5VL.js";
21
- import { F as It, E as St } from "./error-message.BGuKk5tR.js";
21
+ import { F as It, E as St } from "./field-label.BKzuCnXr.js";
22
22
  import { B as bt } from "./button-actions.types.BptAXjD8.js";
23
23
  import "../assets/date-range-picker.css";
24
24
  function He(t, e) {
@@ -968,4 +968,4 @@ export {
968
968
  Et as b,
969
969
  me as i
970
970
  };
971
- //# sourceMappingURL=date-range-picker.BsQ6kMzK.js.map
971
+ //# sourceMappingURL=date-range-picker.ChGfJUPq.js.map