@adyen/bento-vue3 1.60.1 → 1.61.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 (181) hide show
  1. package/dist/@types/index.d.ts +119 -7
  2. package/dist/action-bar.js +1 -1
  3. package/dist/alert.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/base-modal.css +1 -1
  7. package/dist/assets/button.css +1 -1
  8. package/dist/assets/card.css +1 -1
  9. package/dist/assets/dashed-underline.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/header-with-views.css +1 -1
  16. package/dist/assets/inspector.css +1 -1
  17. package/dist/assets/menu.css +1 -1
  18. package/dist/assets/modal-fullscreen.css +1 -1
  19. package/dist/assets/popover.css +1 -1
  20. package/dist/assets/radio-group.css +1 -1
  21. package/dist/assets/sidepanel.css +1 -1
  22. package/dist/button.js +3 -3
  23. package/dist/card.js +1 -1
  24. package/dist/chunks/{action-bar.BDF61iH-.js → action-bar.BVfkekHC.js} +5 -5
  25. package/dist/chunks/{action-bar.BDF61iH-.js.map → action-bar.BVfkekHC.js.map} +1 -1
  26. package/dist/chunks/{alert.CjegN2iG.js → alert.C0YBI66O.js} +2 -2
  27. package/dist/chunks/{alert.CjegN2iG.js.map → alert.C0YBI66O.js.map} +1 -1
  28. package/dist/chunks/{base-modal.D2tNbxw3.js → base-modal.BphJ3uEa.js} +4 -4
  29. package/dist/chunks/{base-modal.D2tNbxw3.js.map → base-modal.BphJ3uEa.js.map} +1 -1
  30. package/dist/chunks/{button-actions-with-menu.DG5t9zB7.js → button-actions-with-menu.DZVOijPY.js} +4 -4
  31. package/dist/chunks/{button-actions-with-menu.DG5t9zB7.js.map → button-actions-with-menu.DZVOijPY.js.map} +1 -1
  32. package/dist/chunks/{button-actions.1MReMMnL.js → button-actions.Cr5gxSXb.js} +2 -2
  33. package/dist/chunks/{button-actions.1MReMMnL.js.map → button-actions.Cr5gxSXb.js.map} +1 -1
  34. package/dist/chunks/{button.CVZJTZv0.js → button.BF_dGonK.js} +37 -26
  35. package/dist/chunks/button.BF_dGonK.js.map +1 -0
  36. package/dist/chunks/{calendar.ugV5Vzqs.js → calendar.CTcfG9JK.js} +2 -2
  37. package/dist/chunks/{calendar.ugV5Vzqs.js.map → calendar.CTcfG9JK.js.map} +1 -1
  38. package/dist/chunks/{card.dF_i6neN.js → card.B9AfyVI3.js} +2 -2
  39. package/dist/chunks/{card.dF_i6neN.js.map → card.B9AfyVI3.js.map} +1 -1
  40. package/dist/chunks/{code-snippet.iD36_pOw.js → code-snippet.CK52UjIT.js} +5 -5
  41. package/dist/chunks/{code-snippet.iD36_pOw.js.map → code-snippet.CK52UjIT.js.map} +1 -1
  42. package/dist/chunks/{copy.jE0EciK8.js → copy.CHnSy6IK.js} +2 -2
  43. package/dist/chunks/{copy.jE0EciK8.js.map → copy.CHnSy6IK.js.map} +1 -1
  44. package/dist/chunks/{dashboard-section.Bq1abySA.js → dashboard-section.Dmtz7Dcc.js} +3 -3
  45. package/dist/chunks/{dashboard-section.Bq1abySA.js.map → dashboard-section.Dmtz7Dcc.js.map} +1 -1
  46. package/dist/chunks/dashed-underline.BTdq4lZ4.js +114 -0
  47. package/dist/chunks/dashed-underline.BTdq4lZ4.js.map +1 -0
  48. package/dist/chunks/{data-grid-template.UkERMC7S.js → data-grid-template.CP8N6JL8.js} +4 -4
  49. package/dist/chunks/{data-grid-template.UkERMC7S.js.map → data-grid-template.CP8N6JL8.js.map} +1 -1
  50. package/dist/chunks/{data-grid.o4emi6FA.js → data-grid.mNFj1mbB.js} +338 -335
  51. package/dist/chunks/data-grid.mNFj1mbB.js.map +1 -0
  52. package/dist/chunks/{date-picker.BPLtpBbX.js → date-picker.C61tyaW9.js} +3 -3
  53. package/dist/chunks/{date-picker.BPLtpBbX.js.map → date-picker.C61tyaW9.js.map} +1 -1
  54. package/dist/chunks/{date-range-picker.BYvj1y8T.js → date-range-picker.BCD198XQ.js} +6 -6
  55. package/dist/chunks/{date-range-picker.BYvj1y8T.js.map → date-range-picker.BCD198XQ.js.map} +1 -1
  56. package/dist/chunks/delight.CDBAFnwC.js +5 -0
  57. package/dist/chunks/delight.CDBAFnwC.js.map +1 -0
  58. package/dist/chunks/delight.xKDCvvaS.js +5 -0
  59. package/dist/chunks/delight.xKDCvvaS.js.map +1 -0
  60. package/dist/chunks/{dialog-page.Cngbnn1Z.js → dialog-page.D0E69ruX.js} +2 -2
  61. package/dist/chunks/{dialog-page.Cngbnn1Z.js.map → dialog-page.D0E69ruX.js.map} +1 -1
  62. package/dist/chunks/{dropdown-tag.DxLOtAIw.js → dropdown-tag.DstHH6nK.js} +2 -2
  63. package/dist/chunks/{dropdown-tag.DxLOtAIw.js.map → dropdown-tag.DstHH6nK.js.map} +1 -1
  64. package/dist/chunks/{dropdown.FJu_m8Tw.js → dropdown.B4yyYeuQ.js} +119 -104
  65. package/dist/chunks/{dropdown.FJu_m8Tw.js.map → dropdown.B4yyYeuQ.js.map} +1 -1
  66. package/dist/chunks/{empty-state.BGWjUH6G.js → empty-state.CEphUdux.js} +28 -28
  67. package/dist/chunks/empty-state.CEphUdux.js.map +1 -0
  68. package/dist/chunks/es6.n1ewaW31.js.map +1 -1
  69. package/dist/chunks/{file-uploader.Bp8PDPHt.js → file-uploader.DLFdbRG_.js} +3 -3
  70. package/dist/chunks/{file-uploader.Bp8PDPHt.js.map → file-uploader.DLFdbRG_.js.map} +1 -1
  71. package/dist/chunks/{filter-bar.BRB7BjbE.js → filter-bar.B4xd462M.js} +800 -794
  72. package/dist/chunks/filter-bar.B4xd462M.js.map +1 -0
  73. package/dist/chunks/{fixed-scroller.BjxA_R63.js → fixed-scroller.A-YuItwn.js} +2 -2
  74. package/dist/chunks/{fixed-scroller.BjxA_R63.js.map → fixed-scroller.A-YuItwn.js.map} +1 -1
  75. package/dist/chunks/{footer-actions.jRnnqdse.js → footer-actions.v8GdXxdM.js} +3 -3
  76. package/dist/chunks/{footer-actions.jRnnqdse.js.map → footer-actions.v8GdXxdM.js.map} +1 -1
  77. package/dist/chunks/{form-layout-title.CsmjzAje.js → form-layout-title.DTurbdqZ.js} +2 -2
  78. package/dist/chunks/{form-layout-title.CsmjzAje.js.map → form-layout-title.DTurbdqZ.js.map} +1 -1
  79. package/dist/chunks/{header-with-views.DJSGKRhj.js → header-with-views.CrR5TEJ6.js} +526 -522
  80. package/dist/chunks/{header-with-views.DJSGKRhj.js.map → header-with-views.CrR5TEJ6.js.map} +1 -1
  81. package/dist/chunks/{header.BBnN_HU9.js → header.B5gm8-_5.js} +4 -4
  82. package/dist/chunks/{header.BBnN_HU9.js.map → header.B5gm8-_5.js.map} +1 -1
  83. package/dist/chunks/{info-icon-with-popover.D6WFtFFY.js → info-icon-with-popover.DAq-iAlh.js} +2 -2
  84. package/dist/chunks/{info-icon-with-popover.D6WFtFFY.js.map → info-icon-with-popover.DAq-iAlh.js.map} +1 -1
  85. package/dist/chunks/{input-field-password.CtK2VVqL.js → input-field-password.B_khsQVP.js} +5 -5
  86. package/dist/chunks/{input-field-password.CtK2VVqL.js.map → input-field-password.B_khsQVP.js.map} +1 -1
  87. package/dist/chunks/{input-field-phone-number.Cf5nQpfS.js → input-field-phone-number.CLgA141p.js} +3 -3
  88. package/dist/chunks/{input-field-phone-number.Cf5nQpfS.js.map → input-field-phone-number.CLgA141p.js.map} +1 -1
  89. package/dist/chunks/{input-field.C94JL_Qv.js → input-field.hOqNPju4.js} +2 -2
  90. package/dist/chunks/{input-field.C94JL_Qv.js.map → input-field.hOqNPju4.js.map} +1 -1
  91. package/dist/chunks/{inspector.CxNXHV8C.js → inspector.DteTv0He.js} +2 -2
  92. package/dist/chunks/{inspector.CxNXHV8C.js.map → inspector.DteTv0He.js.map} +1 -1
  93. package/dist/chunks/{menu.BcXV6WhV.js → menu.CxYiSxSe.js} +3 -3
  94. package/dist/chunks/{menu.BcXV6WhV.js.map → menu.CxYiSxSe.js.map} +1 -1
  95. package/dist/chunks/{modal-fullscreen.D93NZCBg.js → modal-fullscreen.ByaJ5E40.js} +4 -4
  96. package/dist/chunks/{modal-fullscreen.D93NZCBg.js.map → modal-fullscreen.ByaJ5E40.js.map} +1 -1
  97. package/dist/chunks/{modal.vue_vue_type_script_setup_true_lang.B3uzibmr.js → modal.vue_vue_type_script_setup_true_lang.B6khnywr.js} +5 -5
  98. package/dist/chunks/{modal.vue_vue_type_script_setup_true_lang.B3uzibmr.js.map → modal.vue_vue_type_script_setup_true_lang.B6khnywr.js.map} +1 -1
  99. package/dist/chunks/{pagination.rrPdG7nK.js → pagination.CrwYnynf.js} +3 -3
  100. package/dist/chunks/{pagination.rrPdG7nK.js.map → pagination.CrwYnynf.js.map} +1 -1
  101. package/dist/chunks/{popover.KFyR9BXF.js → popover.DvAXLmCp.js} +3 -3
  102. package/dist/chunks/{popover.KFyR9BXF.js.map → popover.DvAXLmCp.js.map} +1 -1
  103. package/dist/chunks/{promo-banner.BfXfaCrf.js → promo-banner.Di_GK1ac.js} +2 -2
  104. package/dist/chunks/{promo-banner.BfXfaCrf.js.map → promo-banner.Di_GK1ac.js.map} +1 -1
  105. package/dist/chunks/{rich-text-editor.Ddt7IVXL.js → rich-text-editor.9z0_M-YN.js} +2 -2
  106. package/dist/chunks/{rich-text-editor.Ddt7IVXL.js.map → rich-text-editor.9z0_M-YN.js.map} +1 -1
  107. package/dist/chunks/{search-bar.ZidZj4NE.js → search-bar.ye0aeyd2.js} +3 -3
  108. package/dist/chunks/{search-bar.ZidZj4NE.js.map → search-bar.ye0aeyd2.js.map} +1 -1
  109. package/dist/chunks/{secondary-nav.Cy2JAzoO.js → secondary-nav.Dsa986cq.js} +2 -2
  110. package/dist/chunks/{secondary-nav.Cy2JAzoO.js.map → secondary-nav.Dsa986cq.js.map} +1 -1
  111. package/dist/chunks/{sidepanel.CNA3pTXy.js → sidepanel.UiX__UxV.js} +4 -4
  112. package/dist/chunks/{sidepanel.CNA3pTXy.js.map → sidepanel.UiX__UxV.js.map} +1 -1
  113. package/dist/chunks/{structured-list-item.CLpfMbkV.js → structured-list-item.BYFd1N3z.js} +3 -3
  114. package/dist/chunks/{structured-list-item.CLpfMbkV.js.map → structured-list-item.BYFd1N3z.js.map} +1 -1
  115. package/dist/chunks/{summary-grid.types.BcicwgZm.js → summary-grid.types.IkdgA45D.js} +3 -3
  116. package/dist/chunks/{summary-grid.types.BcicwgZm.js.map → summary-grid.types.IkdgA45D.js.map} +1 -1
  117. package/dist/chunks/{tabs.Bn4YIjoy.js → tabs.CVCqPMAR.js} +2 -2
  118. package/dist/chunks/{tabs.Bn4YIjoy.js.map → tabs.CVCqPMAR.js.map} +1 -1
  119. package/dist/chunks/{textarea.Dl5TFi8E.js → textarea.UtxQ22_c.js} +2 -2
  120. package/dist/chunks/{textarea.Dl5TFi8E.js.map → textarea.UtxQ22_c.js.map} +1 -1
  121. package/dist/chunks/{timeline-item.CcbL86D0.js → timeline-item.C3AkVKE8.js} +5 -5
  122. package/dist/chunks/{timeline-item.CcbL86D0.js.map → timeline-item.C3AkVKE8.js.map} +1 -1
  123. package/dist/chunks/{toast.Ae5ZoWHb.js → toast.DdAPkCce.js} +2 -2
  124. package/dist/chunks/{toast.Ae5ZoWHb.js.map → toast.DdAPkCce.js.map} +1 -1
  125. package/dist/chunks/{toggle-button.Dv1t15yj.js → toggle-button.D-jybXy-.js} +2 -2
  126. package/dist/chunks/{toggle-button.Dv1t15yj.js.map → toggle-button.D-jybXy-.js.map} +1 -1
  127. package/dist/chunks/{tutorial.vue_vue_type_script_setup_true_lang.Bcu-t4d8.js → tutorial.vue_vue_type_script_setup_true_lang.DwYfNGGI.js} +4 -4
  128. package/dist/chunks/{tutorial.vue_vue_type_script_setup_true_lang.Bcu-t4d8.js.map → tutorial.vue_vue_type_script_setup_true_lang.DwYfNGGI.js.map} +1 -1
  129. package/dist/chunks/{use-cached-selected-values.Ber7lUiH.js → use-cached-selected-values.CRwxKmxX.js} +586 -580
  130. package/dist/chunks/use-cached-selected-values.CRwxKmxX.js.map +1 -0
  131. package/dist/code-snippet.js +1 -1
  132. package/dist/dashboard-template.js +1 -1
  133. package/dist/dashed-underline.js +1 -1
  134. package/dist/data-grid-template.js +1 -1
  135. package/dist/data-grid.js +1 -1
  136. package/dist/date-picker.js +2 -2
  137. package/dist/date-range-picker.js +2 -2
  138. package/dist/dropdown.js +3 -3
  139. package/dist/empty-state.js +1 -1
  140. package/dist/file-uploader.js +1 -1
  141. package/dist/filter-bar.js +1 -1
  142. package/dist/form-layout.js +1 -1
  143. package/dist/header-with-views.js +1 -1
  144. package/dist/header.js +1 -1
  145. package/dist/index.js +45 -45
  146. package/dist/input-field-password.js +1 -1
  147. package/dist/input-field-phone-number.js +1 -1
  148. package/dist/input-field.js +1 -1
  149. package/dist/inspector.js +1 -1
  150. package/dist/internal.js +8 -8
  151. package/dist/menu.js +1 -1
  152. package/dist/modal-fullscreen.js +1 -1
  153. package/dist/modal.js +2 -2
  154. package/dist/pagination.js +1 -1
  155. package/dist/popover.js +1 -1
  156. package/dist/promo-banner.js +1 -1
  157. package/dist/rich-text-editor.js +1 -1
  158. package/dist/search-bar.js +2 -2
  159. package/dist/secondary-nav.js +1 -1
  160. package/dist/sidepanel.js +1 -1
  161. package/dist/structured-list.js +1 -1
  162. package/dist/styles/bento-dark.css +1 -0
  163. package/dist/styles/bento-light.css +1 -0
  164. package/dist/styles/bento.css +1 -0
  165. package/dist/styles/legacy.css +1 -0
  166. package/dist/styles/styleguide.css +1 -0
  167. package/dist/summary-grid.js +1 -1
  168. package/dist/tabs.js +1 -1
  169. package/dist/textarea.js +1 -1
  170. package/dist/timeline.js +1 -1
  171. package/dist/toast.js +1 -1
  172. package/dist/tutorial.js +1 -1
  173. package/dist/web-types.json +1 -1
  174. package/package.json +4 -4
  175. package/dist/chunks/button.CVZJTZv0.js.map +0 -1
  176. package/dist/chunks/dashed-underline.DweJIpuJ.js +0 -98
  177. package/dist/chunks/dashed-underline.DweJIpuJ.js.map +0 -1
  178. package/dist/chunks/data-grid.o4emi6FA.js.map +0 -1
  179. package/dist/chunks/empty-state.BGWjUH6G.js.map +0 -1
  180. package/dist/chunks/filter-bar.BRB7BjbE.js.map +0 -1
  181. package/dist/chunks/use-cached-selected-values.Ber7lUiH.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"promo-banner.BfXfaCrf.js","sources":["../../../vue2/src/components/promo-banner/promo-banner.types.ts","../../../vue2/src/components/promo-banner/promo-banner.vue"],"sourcesContent":["import { BentoButtonActionObject } from '@/core/components/button-actions/button-actions.types';\nimport { BentoButtonVariant } from '../button';\nimport { BentoImageAspectRatio, BentoImageProps } from '../image';\n\nexport interface BentoPromoBannerProps {\n /**\n * List of actions that will be used to render the buttons.\n *\n * Each object in the list should have a `title`, an `event` and a `variant`.\n *\n * `title`: Button's text.\n * `event`: Event triggered when clicking the Button.\n * `variant`: Button's style.\n *\n * ```\n * [{\n * title: 'Primary',\n * event: () => { ... },\n * variant: 'primary'\n * }, {\n * title: 'Secondary',\n * event: () => { ... }\n * variant: 'secondary'\n * }]\n * ```\n */\n actions?: BentoPromoBannerAction[];\n\n /**\n * Defines the color of banner's background\n */\n color?: `${BentoPromoBannerColor}`;\n\n /**\n * Defines whether the banner has a `Dismiss` button\n */\n isDismissible?: boolean;\n\n /**\n * Defines whether the banner has a `Dismiss` button\n */\n dismissButtonText?: string;\n\n /**\n * Defines the image used in the banner.\n *\n * The promotional banner adapts to different container sizes based on the image's `aspect-ratio`.\n * Only the following `aspect-ratio` values are supported: `16:9`, `2:1`, and `1:1`.\n *\n * In Storybook, to verify the image display, update `image.src` and `image.aspectRatio` as follows:\n * - `./1-1.png` with an aspect ratio of `1:1`\n * - `./2-1.png` with an aspect ratio of `2:1`\n * - `./16-9.png` with an aspect ratio of `16:9`\n */\n image: BentoPromoBannerImage;\n\n /**\n * Defines style of the banner.\n *\n * The horizontal layout is responsive to the container size and\n * changes depending on the image aspect ratio.\n *\n * The vertical layout remains the same regardless of container size.\n */\n layout?: `${BentoPromoBannerLayout}`;\n\n /**\n * Defines the title text to be shown on the banner\n */\n title: string;\n}\n\nexport type BentoPromoBannerImageAspectRatio = `${\n | BentoImageAspectRatio.P16_9\n | BentoImageAspectRatio.P2_1\n | BentoImageAspectRatio.P1_1}`;\n\nexport type BentoPromoBannerButtonVariant = `${BentoButtonVariant.PRIMARY | BentoButtonVariant.SECONDARY}`;\n\nexport type BentoPromoBannerAction<IconType = object> = BentoButtonActionObject<IconType> & {\n variant: BentoPromoBannerButtonVariant;\n};\n\nexport type BentoPromoBannerImage = {\n src: BentoImageProps['src'];\n alt?: BentoImageProps['alt'];\n aspectRatio: BentoPromoBannerImageAspectRatio;\n};\n\nexport enum BentoPromoBannerColor {\n BLUE = 'blue',\n GREY = 'grey',\n GREEN = 'green',\n}\n\nexport enum BentoPromoBannerLayout {\n HORIZONTAL = 'horizontal',\n VERTICAL = 'vertical',\n}\n","<template>\n <section\n ref=\"promoBannerRef\"\n class=\"b-promo-banner\"\n :class=\"bannerConditionalClass\"\n :aria-labelledby=\"promoBannerTitleId\"\n >\n <div class=\"b-promo-banner__content\">\n <div class=\"b-promo-banner__content-header\">\n <bento-typography :id=\"promoBannerTitleId\" variant=\"title\" large>\n {{ title }}\n </bento-typography>\n\n <slot name=\"description\" />\n </div>\n\n <div class=\"b-promo-banner__content-actions\">\n <template v-if=\"actions\">\n <bento-button\n v-for=\"(button, index) in actions\"\n :key=\"index\"\n :variant=\"button.variant\"\n :critical=\"button.critical\"\n :disabled=\"button.disabled\"\n :inverse=\"button.inverse\"\n :icon-only=\"button.iconOnly\"\n :link=\"button.link\"\n @click=\"button.event\"\n >\n <template v-if=\"button.icon || button.iconLeft\" #iconLeft>\n <component :is=\"button.icon || button.iconLeft\" :svg-title=\"button.title\"></component>\n </template>\n\n <template v-if=\"!isIconOnly(button)\" #default>\n {{ button.title }}\n </template>\n\n <template v-if=\"button.iconRight\" #iconRight>\n <component :is=\"button.iconRight\" :svg-title=\"button.title\"></component>\n </template>\n </bento-button>\n </template>\n\n <bento-button v-if=\"isDismissible\" variant=\"secondary\" @click=\"emit('dismiss')\">\n {{ computedDismissButtonText }}\n </bento-button>\n </div>\n </div>\n\n <div class=\"b-promo-banner__image\">\n <bento-image\n class=\"b-promo-banner__image-item\"\n :src=\"image.src\"\n :alt=\"image.alt ?? ''\"\n :aspect-ratio=\"image.aspectRatio\"\n :object-fit=\"BentoImageObjectFit.CONTAIN\"\n ></bento-image>\n </div>\n </section>\n</template>\n\n<script setup lang=\"ts\">\n import { useElementSize } from '@vueuse/core';\n import { computed, ref } from 'vue';\n\n // Components\n import { BentoButton, BentoButtonActionObject } from '@/components/button';\n import { BentoImage, BentoImageAspectRatio, BentoImageObjectFit } from '@/components/image';\n import { BentoTypography } from '@/components/typography';\n import { BentoPromoBannerColor, BentoPromoBannerLayout, BentoPromoBannerProps } from './promo-banner.types';\n\n // Utils\n import { useI18n } from '@/utils/ts/i18n';\n\n import { generateUid } from '@/core/utils/ts';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const props = withDefaults(defineProps<BentoPromoBannerProps>(), {\n actions: null,\n color: BentoPromoBannerColor.GREY,\n isDismissible: true,\n dismissButtonText: null,\n layout: BentoPromoBannerLayout.HORIZONTAL,\n });\n\n const emit = defineEmits<{\n /**\n * Emits a dismiss event when dismiss button on the promotional banner is pressed\n */\n (e: 'dismiss');\n }>();\n\n const promoBannerRef = ref(null);\n const promoBannerSize = useElementSize(promoBannerRef);\n const promoBannerTitleId = generateUid('promoBannerTitle');\n\n const horizontalLayoutBreakpoint = computed(() => {\n if (props.image.aspectRatio === BentoImageAspectRatio.P16_9) {\n return 800;\n } else if (props.image.aspectRatio === BentoImageAspectRatio.P2_1) {\n return 850;\n } else if (props.image.aspectRatio === BentoImageAspectRatio.P1_1) {\n return 623;\n }\n\n return 0;\n });\n\n const bannerLayoutClass = computed(() => {\n // only horizontal layout is responsive and, by design, follows the container size\n if (\n props.layout === BentoPromoBannerLayout.HORIZONTAL &&\n promoBannerSize.width.value <= horizontalLayoutBreakpoint.value\n ) {\n return BentoPromoBannerLayout.VERTICAL;\n }\n\n return props.layout;\n });\n\n const bannerConditionalClass = computed(() =>\n [`b-promo-banner--${bannerLayoutClass.value}`, `b-promo-banner--${props.color}`].join(' ')\n );\n\n const isIconOnly = (button: BentoButtonActionObject) =>\n button.iconOnly && (button.iconLeft || button.iconRight || button.icon);\n\n const computedDismissButtonText = computed(() => props.dismissButtonText || t('dismiss'));\n</script>\n\n<script lang=\"ts\">\n /**\n * Promotional Banner highlights important information, announcements, or promotions.\n *\n * @example\n * import { BentoPromoBanner } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoPromoBanner },\n * template: `\n * <bento-promo-banner\n * title=\"Title\"\n * description=\"Brief description explaining and giving more information about the title\"\n * :image=\"{ src: '16-1.png', aspectRatio: '16:9' }\"\n * :actions=\"[{ title: 'Primary', event: () => {} }]\"\n * >\n * </bento-promo-banner>\n * `\n * };\n */\n export default {\n i18n: { messages },\n name: 'bento-promo-banner',\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./promo-banner.scss\" />\n"],"names":["BentoPromoBannerColor","BentoPromoBannerColor2","BentoPromoBannerLayout","BentoPromoBannerLayout2","__default__","messages","t","useI18n","props","__props","emit","__emit","promoBannerRef","ref","promoBannerSize","useElementSize","promoBannerTitleId","generateUid","horizontalLayoutBreakpoint","computed","BentoImageAspectRatio","bannerLayoutClass","bannerConditionalClass","isIconOnly","button","computedDismissButtonText"],"mappings":";;;;;;;;;AAyFY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA,GAMAE,IAAA,kBAAAC,OACRA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;iNC2DRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;;AA9EA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAF,EAAA,CAAA,GAEAG,IAAAC,GAQAC,IAAAC,GAOAC,IAAAC,EAAA,IAAA,GACAC,IAAAC,EAAAH,CAAA,GACAI,IAAAC,EAAA,kBAAA,GAEAC,IAAAC,EAAA,MACIX,EAAA,MAAA,gBAAAY,EAAA,QACI,MAAOZ,EAAA,MAAA,gBAAAY,EAAA,OAEP,MAAOZ,EAAA,MAAA,gBAAAY,EAAA,OAEP,MAGJ,CAAO,GAGXC,IAAAF,EAAA,MAEIX,EAAA,WAAAN,EAAA,cAAAY,EAAA,MAAA,SAAAI,EAAA,QAIIhB,EAAA,WAGJM,EAAA,MAAa,GAGjBc,IAAAH;AAAA,MAA+B,MAAA,CAAA,mBAAAE,EAAA,KAAA,IAAA,mBAAAb,EAAA,KAAA,EAAA,EAAA,KAAA,GAAA;AAAA,IAC8D,GAG7Fe,IAAA,CAAAC,MAAAA,EAAA,aAAAA,EAAA,YAAAA,EAAA,aAAAA,EAAA,OAGAC,IAAAN,EAAA,MAAAX,EAAA,qBAAAF,EAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"promo-banner.Di_GK1ac.js","sources":["../../../vue2/src/components/promo-banner/promo-banner.types.ts","../../../vue2/src/components/promo-banner/promo-banner.vue"],"sourcesContent":["import { BentoButtonActionObject } from '@/core/components/button-actions/button-actions.types';\nimport { BentoButtonVariant } from '../button';\nimport { BentoImageAspectRatio, BentoImageProps } from '../image';\n\nexport interface BentoPromoBannerProps {\n /**\n * List of actions that will be used to render the buttons.\n *\n * Each object in the list should have a `title`, an `event` and a `variant`.\n *\n * `title`: Button's text.\n * `event`: Event triggered when clicking the Button.\n * `variant`: Button's style.\n *\n * ```\n * [{\n * title: 'Primary',\n * event: () => { ... },\n * variant: 'primary'\n * }, {\n * title: 'Secondary',\n * event: () => { ... }\n * variant: 'secondary'\n * }]\n * ```\n */\n actions?: BentoPromoBannerAction[];\n\n /**\n * Defines the color of banner's background\n */\n color?: `${BentoPromoBannerColor}`;\n\n /**\n * Defines whether the banner has a `Dismiss` button\n */\n isDismissible?: boolean;\n\n /**\n * Defines whether the banner has a `Dismiss` button\n */\n dismissButtonText?: string;\n\n /**\n * Defines the image used in the banner.\n *\n * The promotional banner adapts to different container sizes based on the image's `aspect-ratio`.\n * Only the following `aspect-ratio` values are supported: `16:9`, `2:1`, and `1:1`.\n *\n * In Storybook, to verify the image display, update `image.src` and `image.aspectRatio` as follows:\n * - `./1-1.png` with an aspect ratio of `1:1`\n * - `./2-1.png` with an aspect ratio of `2:1`\n * - `./16-9.png` with an aspect ratio of `16:9`\n */\n image: BentoPromoBannerImage;\n\n /**\n * Defines style of the banner.\n *\n * The horizontal layout is responsive to the container size and\n * changes depending on the image aspect ratio.\n *\n * The vertical layout remains the same regardless of container size.\n */\n layout?: `${BentoPromoBannerLayout}`;\n\n /**\n * Defines the title text to be shown on the banner\n */\n title: string;\n}\n\nexport type BentoPromoBannerImageAspectRatio = `${\n | BentoImageAspectRatio.P16_9\n | BentoImageAspectRatio.P2_1\n | BentoImageAspectRatio.P1_1}`;\n\nexport type BentoPromoBannerButtonVariant = `${BentoButtonVariant.PRIMARY | BentoButtonVariant.SECONDARY}`;\n\nexport type BentoPromoBannerAction<IconType = object> = BentoButtonActionObject<IconType> & {\n variant: BentoPromoBannerButtonVariant;\n};\n\nexport type BentoPromoBannerImage = {\n src: BentoImageProps['src'];\n alt?: BentoImageProps['alt'];\n aspectRatio: BentoPromoBannerImageAspectRatio;\n};\n\nexport enum BentoPromoBannerColor {\n BLUE = 'blue',\n GREY = 'grey',\n GREEN = 'green',\n}\n\nexport enum BentoPromoBannerLayout {\n HORIZONTAL = 'horizontal',\n VERTICAL = 'vertical',\n}\n","<template>\n <section\n ref=\"promoBannerRef\"\n class=\"b-promo-banner\"\n :class=\"bannerConditionalClass\"\n :aria-labelledby=\"promoBannerTitleId\"\n >\n <div class=\"b-promo-banner__content\">\n <div class=\"b-promo-banner__content-header\">\n <bento-typography :id=\"promoBannerTitleId\" variant=\"title\" large>\n {{ title }}\n </bento-typography>\n\n <slot name=\"description\" />\n </div>\n\n <div class=\"b-promo-banner__content-actions\">\n <template v-if=\"actions\">\n <bento-button\n v-for=\"(button, index) in actions\"\n :key=\"index\"\n :variant=\"button.variant\"\n :critical=\"button.critical\"\n :disabled=\"button.disabled\"\n :inverse=\"button.inverse\"\n :icon-only=\"button.iconOnly\"\n :link=\"button.link\"\n @click=\"button.event\"\n >\n <template v-if=\"button.icon || button.iconLeft\" #iconLeft>\n <component :is=\"button.icon || button.iconLeft\" :svg-title=\"button.title\"></component>\n </template>\n\n <template v-if=\"!isIconOnly(button)\" #default>\n {{ button.title }}\n </template>\n\n <template v-if=\"button.iconRight\" #iconRight>\n <component :is=\"button.iconRight\" :svg-title=\"button.title\"></component>\n </template>\n </bento-button>\n </template>\n\n <bento-button v-if=\"isDismissible\" variant=\"secondary\" @click=\"emit('dismiss')\">\n {{ computedDismissButtonText }}\n </bento-button>\n </div>\n </div>\n\n <div class=\"b-promo-banner__image\">\n <bento-image\n class=\"b-promo-banner__image-item\"\n :src=\"image.src\"\n :alt=\"image.alt ?? ''\"\n :aspect-ratio=\"image.aspectRatio\"\n :object-fit=\"BentoImageObjectFit.CONTAIN\"\n ></bento-image>\n </div>\n </section>\n</template>\n\n<script setup lang=\"ts\">\n import { useElementSize } from '@vueuse/core';\n import { computed, ref } from 'vue';\n\n // Components\n import { BentoButton, BentoButtonActionObject } from '@/components/button';\n import { BentoImage, BentoImageAspectRatio, BentoImageObjectFit } from '@/components/image';\n import { BentoTypography } from '@/components/typography';\n import { BentoPromoBannerColor, BentoPromoBannerLayout, BentoPromoBannerProps } from './promo-banner.types';\n\n // Utils\n import { useI18n } from '@/utils/ts/i18n';\n\n import { generateUid } from '@/core/utils/ts';\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const props = withDefaults(defineProps<BentoPromoBannerProps>(), {\n actions: null,\n color: BentoPromoBannerColor.GREY,\n isDismissible: true,\n dismissButtonText: null,\n layout: BentoPromoBannerLayout.HORIZONTAL,\n });\n\n const emit = defineEmits<{\n /**\n * Emits a dismiss event when dismiss button on the promotional banner is pressed\n */\n (e: 'dismiss');\n }>();\n\n const promoBannerRef = ref(null);\n const promoBannerSize = useElementSize(promoBannerRef);\n const promoBannerTitleId = generateUid('promoBannerTitle');\n\n const horizontalLayoutBreakpoint = computed(() => {\n if (props.image.aspectRatio === BentoImageAspectRatio.P16_9) {\n return 800;\n } else if (props.image.aspectRatio === BentoImageAspectRatio.P2_1) {\n return 850;\n } else if (props.image.aspectRatio === BentoImageAspectRatio.P1_1) {\n return 623;\n }\n\n return 0;\n });\n\n const bannerLayoutClass = computed(() => {\n // only horizontal layout is responsive and, by design, follows the container size\n if (\n props.layout === BentoPromoBannerLayout.HORIZONTAL &&\n promoBannerSize.width.value <= horizontalLayoutBreakpoint.value\n ) {\n return BentoPromoBannerLayout.VERTICAL;\n }\n\n return props.layout;\n });\n\n const bannerConditionalClass = computed(() =>\n [`b-promo-banner--${bannerLayoutClass.value}`, `b-promo-banner--${props.color}`].join(' ')\n );\n\n const isIconOnly = (button: BentoButtonActionObject) =>\n button.iconOnly && (button.iconLeft || button.iconRight || button.icon);\n\n const computedDismissButtonText = computed(() => props.dismissButtonText || t('dismiss'));\n</script>\n\n<script lang=\"ts\">\n /**\n * Promotional Banner highlights important information, announcements, or promotions.\n *\n * @example\n * import { BentoPromoBanner } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoPromoBanner },\n * template: `\n * <bento-promo-banner\n * title=\"Title\"\n * description=\"Brief description explaining and giving more information about the title\"\n * :image=\"{ src: '16-1.png', aspectRatio: '16:9' }\"\n * :actions=\"[{ title: 'Primary', event: () => {} }]\"\n * >\n * </bento-promo-banner>\n * `\n * };\n */\n export default {\n i18n: { messages },\n name: 'bento-promo-banner',\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./promo-banner.scss\" />\n"],"names":["BentoPromoBannerColor","BentoPromoBannerColor2","BentoPromoBannerLayout","BentoPromoBannerLayout2","__default__","messages","t","useI18n","props","__props","emit","__emit","promoBannerRef","ref","promoBannerSize","useElementSize","promoBannerTitleId","generateUid","horizontalLayoutBreakpoint","computed","BentoImageAspectRatio","bannerLayoutClass","bannerConditionalClass","isIconOnly","button","computedDismissButtonText"],"mappings":";;;;;;;;;AAyFY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA,GAMAE,IAAA,kBAAAC,OACRA,EAAA,aAAA,cACAA,EAAA,WAAA,YAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;iNC2DRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;;AA9EA,UAAA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAF,EAAA,CAAA,GAEAG,IAAAC,GAQAC,IAAAC,GAOAC,IAAAC,EAAA,IAAA,GACAC,IAAAC,EAAAH,CAAA,GACAI,IAAAC,EAAA,kBAAA,GAEAC,IAAAC,EAAA,MACIX,EAAA,MAAA,gBAAAY,EAAA,QACI,MAAOZ,EAAA,MAAA,gBAAAY,EAAA,OAEP,MAAOZ,EAAA,MAAA,gBAAAY,EAAA,OAEP,MAGJ,CAAO,GAGXC,IAAAF,EAAA,MAEIX,EAAA,WAAAN,EAAA,cAAAY,EAAA,MAAA,SAAAI,EAAA,QAIIhB,EAAA,WAGJM,EAAA,MAAa,GAGjBc,IAAAH;AAAA,MAA+B,MAAA,CAAA,mBAAAE,EAAA,KAAA,IAAA,mBAAAb,EAAA,KAAA,EAAA,EAAA,KAAA,GAAA;AAAA,IAC8D,GAG7Fe,IAAA,CAAAC,MAAAA,EAAA,aAAAA,EAAA,YAAAA,EAAA,aAAAA,EAAA,OAGAC,IAAAN,EAAA,MAAAX,EAAA,qBAAAF,EAAA,SAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,7 +1,7 @@
1
1
  import { defineComponent as Dt, ref as wt, onMounted as sr, watch as me, createElementBlock as Ft, openBlock as Z, toDisplayString as $t, createBlock as pt, unref as ht, withCtx as Pt, renderSlot as Tt, createElementVNode as Ut, computed as xt, normalizeStyle as cr, h as Q, useAttrs as fr, createCommentVNode as te, mergeProps as hr, createVNode as Pe, KeepAlive as pr, createTextVNode as Me, normalizeClass as mr } from "vue";
2
2
  import { B as Oe } from "./typography.DN5eC5ch.js";
3
3
  import { B as gr } from "./segmented-control.CZpx9H-d.js";
4
- import { B as dr } from "./alert.CjegN2iG.js";
4
+ import { B as dr } from "./alert.C0YBI66O.js";
5
5
  import { _ as Fe } from "./_plugin-vue_export-helper.CHgC5LLL.js";
6
6
  import { B as kr } from "./link.CTH1xj0i.js";
7
7
  import { B as xr } from "./checkbox.B-jC5L05.js";
@@ -6218,4 +6218,4 @@ const ao = {
6218
6218
  export {
6219
6219
  Eo as r
6220
6220
  };
6221
- //# sourceMappingURL=rich-text-editor.Ddt7IVXL.js.map
6221
+ //# sourceMappingURL=rich-text-editor.9z0_M-YN.js.map