@adyen/bento-vue2 1.24.0 → 1.26.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 (190) hide show
  1. package/dist/@types/index.d.ts +484 -629
  2. package/dist/accordion.js +2 -2
  3. package/dist/action-bar.js +6 -6
  4. package/dist/alert.js +69 -104
  5. package/dist/alert.js.map +1 -1
  6. package/dist/assets/base-modal.css +1 -1
  7. package/dist/assets/dialog-page.css +1 -1
  8. package/dist/assets/dropdown.css +1 -1
  9. package/dist/assets/index10.css +1 -1
  10. package/dist/assets/index11.css +1 -1
  11. package/dist/assets/index12.css +1 -1
  12. package/dist/assets/index13.css +1 -1
  13. package/dist/assets/index14.css +1 -1
  14. package/dist/assets/index15.css +1 -1
  15. package/dist/assets/index16.css +1 -1
  16. package/dist/assets/index17.css +1 -1
  17. package/dist/assets/index18.css +1 -1
  18. package/dist/assets/index19.css +1 -1
  19. package/dist/assets/index2.css +1 -1
  20. package/dist/assets/index20.css +1 -1
  21. package/dist/assets/index21.css +1 -1
  22. package/dist/assets/index22.css +1 -1
  23. package/dist/assets/index23.css +1 -1
  24. package/dist/assets/index24.css +1 -1
  25. package/dist/assets/index25.css +1 -1
  26. package/dist/assets/index26.css +1 -1
  27. package/dist/assets/index27.css +1 -1
  28. package/dist/assets/index28.css +1 -1
  29. package/dist/assets/index29.css +1 -1
  30. package/dist/assets/index3.css +1 -1
  31. package/dist/assets/index30.css +1 -1
  32. package/dist/assets/index31.css +1 -1
  33. package/dist/assets/index32.css +1 -1
  34. package/dist/assets/index33.css +1 -1
  35. package/dist/assets/index34.css +1 -1
  36. package/dist/assets/index35.css +1 -1
  37. package/dist/assets/index36.css +1 -1
  38. package/dist/assets/index37.css +1 -1
  39. package/dist/assets/index38.css +1 -1
  40. package/dist/assets/index39.css +1 -1
  41. package/dist/assets/index4.css +1 -1
  42. package/dist/assets/index40.css +1 -1
  43. package/dist/assets/index41.css +1 -1
  44. package/dist/assets/index42.css +1 -1
  45. package/dist/assets/index43.css +1 -1
  46. package/dist/assets/index44.css +1 -1
  47. package/dist/assets/index45.css +1 -1
  48. package/dist/assets/index47.css +1 -1
  49. package/dist/assets/index48.css +1 -1
  50. package/dist/assets/index5.css +1 -1
  51. package/dist/assets/index6.css +1 -1
  52. package/dist/assets/index7.css +1 -1
  53. package/dist/assets/index8.css +1 -1
  54. package/dist/assets/index9.css +1 -1
  55. package/dist/assets/{listbox.css → use-cached-selected-values.css} +1 -1
  56. package/dist/avatar-image.js +1 -1
  57. package/dist/button.js +5 -5
  58. package/dist/card.js +83 -180
  59. package/dist/card.js.map +1 -1
  60. package/dist/checkbox.js +5 -5
  61. package/dist/chunks/{base-button.090f511d.js → base-button.ad74b6f8.js} +2 -2
  62. package/dist/chunks/{base-button.090f511d.js.map → base-button.ad74b6f8.js.map} +1 -1
  63. package/dist/chunks/{base-modal.aa09a60c.js → base-modal.1fff7abe.js} +6 -6
  64. package/dist/chunks/{base-modal.aa09a60c.js.map → base-modal.1fff7abe.js.map} +1 -1
  65. package/dist/chunks/{button-actions-with-menu.879c4573.js → button-actions-with-menu.e845d77a.js} +4 -4
  66. package/dist/chunks/{button-actions-with-menu.879c4573.js.map → button-actions-with-menu.e845d77a.js.map} +1 -1
  67. package/dist/chunks/{button-actions.239456cb.js → button-actions.81db18e8.js} +3 -3
  68. package/dist/chunks/{button-actions.239456cb.js.map → button-actions.81db18e8.js.map} +1 -1
  69. package/dist/chunks/{button.6e6324f0.js → button.9d6435ae.js} +3 -3
  70. package/dist/chunks/{button.6e6324f0.js.map → button.9d6435ae.js.map} +1 -1
  71. package/dist/chunks/{calendar.1e416969.js → calendar.640b8d25.js} +4 -4
  72. package/dist/chunks/{calendar.1e416969.js.map → calendar.640b8d25.js.map} +1 -1
  73. package/dist/chunks/{checkbox.f38276e6.js → checkbox.bfed007c.js} +3 -3
  74. package/dist/chunks/{checkbox.f38276e6.js.map → checkbox.bfed007c.js.map} +1 -1
  75. package/dist/chunks/{controls-group.f1dfa419.js → controls-group.4fb50009.js} +3 -3
  76. package/dist/chunks/{controls-group.f1dfa419.js.map → controls-group.4fb50009.js.map} +1 -1
  77. package/dist/chunks/{copy.acc9f1b0.js → copy.f85700c6.js} +4 -4
  78. package/dist/chunks/{copy.acc9f1b0.js.map → copy.f85700c6.js.map} +1 -1
  79. package/dist/chunks/dialog-page.73da22cf.js +133 -0
  80. package/dist/chunks/dialog-page.73da22cf.js.map +1 -0
  81. package/dist/chunks/{dropdown-default-textbox.c1f8fe5f.js → dropdown-default-textbox.54ca1b18.js} +2 -2
  82. package/dist/chunks/{dropdown-default-textbox.c1f8fe5f.js.map → dropdown-default-textbox.54ca1b18.js.map} +1 -1
  83. package/dist/chunks/dropdown.10c034aa.js +775 -0
  84. package/dist/chunks/dropdown.10c034aa.js.map +1 -0
  85. package/dist/chunks/{error-message.8734e591.js → error-message.31ec12b7.js} +2 -2
  86. package/dist/chunks/{error-message.8734e591.js.map → error-message.31ec12b7.js.map} +1 -1
  87. package/dist/chunks/{fixed-scroller.772ad033.js → fixed-scroller.4eb9a9ac.js} +2 -2
  88. package/dist/chunks/{fixed-scroller.772ad033.js.map → fixed-scroller.4eb9a9ac.js.map} +1 -1
  89. package/dist/chunks/{footer-actions.11071f12.js → footer-actions.a1e09b4f.js} +4 -4
  90. package/dist/chunks/{footer-actions.11071f12.js.map → footer-actions.a1e09b4f.js.map} +1 -1
  91. package/dist/chunks/{index.5d5f2200.js → index.15b088b9.js} +6 -6
  92. package/dist/chunks/{index.5d5f2200.js.map → index.15b088b9.js.map} +1 -1
  93. package/dist/chunks/{index.87180cdd.js → index.1ea85d4a.js} +138 -119
  94. package/dist/chunks/index.1ea85d4a.js.map +1 -0
  95. package/dist/chunks/{index.8e6bc325.js → index.317fca12.js} +3 -3
  96. package/dist/chunks/{index.8e6bc325.js.map → index.317fca12.js.map} +1 -1
  97. package/dist/chunks/{index.51308a21.js → index.671768a1.js} +3 -3
  98. package/dist/chunks/{index.51308a21.js.map → index.671768a1.js.map} +1 -1
  99. package/dist/chunks/{index.49ce3f6a.js → index.7eefc59c.js} +3 -3
  100. package/dist/chunks/{index.49ce3f6a.js.map → index.7eefc59c.js.map} +1 -1
  101. package/dist/chunks/{index.f19887a1.js → index.885d05a9.js} +2 -2
  102. package/dist/chunks/{index.f19887a1.js.map → index.885d05a9.js.map} +1 -1
  103. package/dist/chunks/{index.73abb1a9.js → index.8b8c3b16.js} +9 -9
  104. package/dist/chunks/{index.73abb1a9.js.map → index.8b8c3b16.js.map} +1 -1
  105. package/dist/chunks/{index.ff09389c.js → index.aaf965f8.js} +6 -6
  106. package/dist/chunks/{index.ff09389c.js.map → index.aaf965f8.js.map} +1 -1
  107. package/dist/chunks/{index.03ae22b4.js → index.b21197ca.js} +2 -2
  108. package/dist/chunks/{index.03ae22b4.js.map → index.b21197ca.js.map} +1 -1
  109. package/dist/chunks/{index.94980f50.js → index.d553d3d1.js} +2 -2
  110. package/dist/chunks/{index.94980f50.js.map → index.d553d3d1.js.map} +1 -1
  111. package/dist/chunks/{index.ba6c1040.js → index.dd30e538.js} +3 -3
  112. package/dist/chunks/index.dd30e538.js.map +1 -0
  113. package/dist/chunks/{listbox-option-tag.c0a56a95.js → listbox-option-tag.6bbb6bbe.js} +3 -3
  114. package/dist/chunks/{listbox-option-tag.c0a56a95.js.map → listbox-option-tag.6bbb6bbe.js.map} +1 -1
  115. package/dist/chunks/{loading-button.84a5529d.js → loading-button.eafc9e1b.js} +2 -2
  116. package/dist/chunks/{loading-button.84a5529d.js.map → loading-button.eafc9e1b.js.map} +1 -1
  117. package/dist/chunks/{payment-method.faa302de.js → payment-method.6c1ce07c.js} +2 -2
  118. package/dist/chunks/{payment-method.faa302de.js.map → payment-method.6c1ce07c.js.map} +1 -1
  119. package/dist/chunks/{tooltip.8e9d733c.js → tooltip.58ef3f4a.js} +3 -3
  120. package/dist/chunks/{tooltip.8e9d733c.js.map → tooltip.58ef3f4a.js.map} +1 -1
  121. package/dist/chunks/{use-bento-toast-controller.7d4436ad.js → use-bento-toast-controller.c3277f73.js} +2 -2
  122. package/dist/chunks/{use-bento-toast-controller.7d4436ad.js.map → use-bento-toast-controller.c3277f73.js.map} +1 -1
  123. package/dist/chunks/{listbox.e6e1bc90.js → use-cached-selected-values.69297473.js} +510 -448
  124. package/dist/chunks/use-cached-selected-values.69297473.js.map +1 -0
  125. package/dist/code-snippet.js +7 -7
  126. package/dist/code-snippet.js.map +1 -1
  127. package/dist/country.js +2 -2
  128. package/dist/currency.js +1 -1
  129. package/dist/data-grid-template.js +1 -1
  130. package/dist/data-grid.js +947 -885
  131. package/dist/data-grid.js.map +1 -1
  132. package/dist/date-picker.js +8 -8
  133. package/dist/date-range-picker.js +2 -2
  134. package/dist/date.js +1 -1
  135. package/dist/divider.js +1 -1
  136. package/dist/dropdown.js +7 -7
  137. package/dist/empty-state.js +3 -3
  138. package/dist/filter-bar.js +1115 -955
  139. package/dist/filter-bar.js.map +1 -1
  140. package/dist/focus-trap.js +1 -1
  141. package/dist/form-layout.js +15 -14
  142. package/dist/form-layout.js.map +1 -1
  143. package/dist/header.js +4 -4
  144. package/dist/index.js +177 -169
  145. package/dist/index.js.map +1 -1
  146. package/dist/info-icon.js +3 -3
  147. package/dist/input-field.js +31 -29
  148. package/dist/input-field.js.map +1 -1
  149. package/dist/internal.js +31 -78
  150. package/dist/internal.js.map +1 -1
  151. package/dist/link.js +1 -1
  152. package/dist/loading-indicator.js +1 -1
  153. package/dist/menu.js +1 -1
  154. package/dist/modal-fullscreen.js +6 -6
  155. package/dist/modal.js +6 -6
  156. package/dist/pagination.js +4 -4
  157. package/dist/payment-method.js +1 -1
  158. package/dist/popover.js +1 -1
  159. package/dist/popper-container.js +1 -1
  160. package/dist/radio-group.js +62 -62
  161. package/dist/radio-group.js.map +1 -1
  162. package/dist/search-bar.js +2 -2
  163. package/dist/secondary-nav.js +2 -2
  164. package/dist/segmented-control.js +2 -2
  165. package/dist/selection-card.js +4 -4
  166. package/dist/sidepanel.js +52 -50
  167. package/dist/sidepanel.js.map +1 -1
  168. package/dist/status.js +2 -2
  169. package/dist/stepper.js +3 -3
  170. package/dist/structured-list.js +1 -1
  171. package/dist/summary-grid.js +3 -3
  172. package/dist/tabs.js +52 -52
  173. package/dist/tabs.js.map +1 -1
  174. package/dist/tag.js +3 -3
  175. package/dist/textarea.js +4 -4
  176. package/dist/timeline.js +7 -7
  177. package/dist/toast.js +4 -4
  178. package/dist/toggle.js +2 -2
  179. package/dist/tutorial.js +88 -67
  180. package/dist/tutorial.js.map +1 -1
  181. package/dist/typography.js +1 -1
  182. package/dist/web-types.json +550 -266
  183. package/package.json +3 -2
  184. package/dist/chunks/dialog-page.75b295b7.js +0 -133
  185. package/dist/chunks/dialog-page.75b295b7.js.map +0 -1
  186. package/dist/chunks/dropdown.669b858b.js +0 -797
  187. package/dist/chunks/dropdown.669b858b.js.map +0 -1
  188. package/dist/chunks/index.87180cdd.js.map +0 -1
  189. package/dist/chunks/index.ba6c1040.js.map +0 -1
  190. package/dist/chunks/listbox.e6e1bc90.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"index.ff09389c.js","sources":["../../src/components/structured-list/structured-list.keys.ts","../../src/components/structured-list/structured-list.types.ts","../../src/components/structured-list/structured-list.vue","../../src/components/structured-list/components/structered-list-item/structured-list-item.vue"],"sourcesContent":["export const STRUCTURED_LIST_CONDENSED_INJECTION_KEY = Symbol('structured list condensed style injection key');\nexport const STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY = Symbol('structured list labels width injection key');\n","export type BentoStructuredListLayoutOptions = '25-75' | '33-66' | '42-58' | '50-50';\nexport const BentoStructuredListLayoutOptions = ['25-75', '33-66', '42-58', '50-50'];\n","<template>\n <dl class=\"b-structured-list\">\n <slot />\n </dl>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, inject, PropType, provide } from 'vue';\n import {\n STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n } from '@/components/structured-list/structured-list.keys';\n import { BentoStructuredListLayoutOptions } from './structured-list.types';\n\n const props = defineProps({\n /**\n * Width of the labels container, in pixels. Overrides layout prop.\n */\n labelsWidth: {\n type: Number,\n default: null,\n },\n /**\n * The layout of the label value pair in percentage.\n * If labelsWidth is set, layout will be overriden by the static pixel value.\n *\n * If the value entered is not listed in the example\n * list below '33-66' will be applied\n * @example\n * '25-75'\n * '33-66'\n * '42-58'\n * '50-50'\n */\n layout: {\n type: String as PropType<BentoStructuredListLayoutOptions>,\n default: '33-66',\n validator: (value: BentoStructuredListLayoutOptions) => BentoStructuredListLayoutOptions.includes(value),\n },\n });\n\n const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n\n const computedLayout = computed(() =>\n BentoStructuredListLayoutOptions.includes(props.layout) ? props.layout : '33-66'\n );\n\n const computedLabelsWidth = computed(() => {\n if (isCondensed) {\n return '130px';\n }\n\n if (props.labelsWidth) {\n return `${props.labelsWidth}px`;\n }\n\n return `${computedLayout.value.split('-')[0]}%`;\n });\n\n provide(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, computedLabelsWidth);\n</script>\n\n<script lang=\"ts\">\n /**\n * This is a list used to display pairs of information in a clear and organized manner.\n * `BentoStructureListItem` should be used to pass the label/value pairs to the list.\n *\n * @example\n * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoStructuredList, BentoStructuredListItem },\n * template: `\n * <bento-structured-list>\n * <bento-structured-list-item label=\"Payment\">\n * <bento-payment-method label=\"Klarna\" type=\"Klarna\" />\n * </bento-structured-list-item>\n * <bento-structured-list-item label=\"Amount\">\n * <bento-currency :currency=\"BentoCurrencyISOCode.USD\">\n * 123456\n * </bento-currency>\n * </bento-structured-list-item>\n * </bento-structured-list>\n * `\n * }\n */\n export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list.scss\" />\n","<template>\n <div class=\"b-structured-list-item\" :class=\"conditionalClasses\">\n <dt class=\"b-structured-list-item__label\" :style=\"`flex-basis:${labelsWidth}`\">\n <bento-typography :variant=\"labelTypographyVariant\">{{ label }}</bento-typography>\n <bento-info-icon v-if=\"labelInfo\" class=\"b-structured-list-item__icon\" :tooltip-text=\"labelInfo\" />\n </dt>\n <dd class=\"b-structured-list-item__value\">\n <slot />\n <copy v-if=\"copy\" class=\"b-structured-list-item__icon\" :text=\"copy\" />\n <bento-button\n v-if=\"search\"\n v-bento-tooltip-directive:top=\"searchTooltip ? searchTooltip : $t('search')\"\n class=\"b-structured-list-item__icon\"\n variant=\"tertiary\"\n @click=\"search\"\n >\n <template #iconLeft>\n <search-icon :svg-title=\"$t('search')\" />\n </template>\n </bento-button>\n </dd>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, inject, PropType, ref, Ref } from 'vue';\n\n // Components\n import { BentoButton } from '@/components/button';\n import { BentoInfoIcon } from '@/components/info-icon';\n import { BentoTypography } from '@/components/typography';\n import Copy from '@/components/internal/copy/copy.vue';\n import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n\n // Directives\n import { BentoTooltipDirective } from '@/directives';\n\n // Keys\n import {\n STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n } from '../../structured-list.keys';\n\n import messages from '../../messages.json';\n\n const DEFAULT_LABELS_WIDTH = '33%';\n\n /**\n * This is an item of the `BentoStructuredList` meant to be used only with that component.\n * It consists of a label/value pair, and also the optional copy and search modifiers.\n *\n * @example\n * import { BentoCurrencyISOCode, BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoStructuredListItem, BentoStructuredListItem },\n * template: `\n * <bento-structured-list>\n * <bento-structured-list-item label=\"Shopper\" search='searchShopper' search-tooltip='Find shopper'>\n * <bento-typography>\n * 143442642\n * </bento-status>\n * </bento-structured-list-item>\n * <bento-structured-list-item label=\"Amount\" copy='123456'>\n * <bento-currency :currency=\"BentoCurrencyISOCode.USD\">\n * 123456\n * </bento-currency>\n * </bento-structured-list-item>\n * </bento-structured-list>\n * `\n * }\n */\n export default defineComponent({\n i18n: { messages },\n name: 'bento-structured-list-item',\n components: {\n BentoButton,\n BentoInfoIcon,\n BentoTypography,\n Copy,\n SearchIcon,\n },\n directives: { BentoTooltipDirective },\n props: {\n /**\n * Label to display for the value\n */\n label: {\n type: String,\n required: true,\n },\n /**\n * Text to display in info icon tooltip in the label to display for the value\n */\n labelInfo: {\n type: String,\n default: undefined,\n },\n /**\n * Text to copy when the user clicks `Copy` icon\n */\n copy: {\n type: String,\n default: undefined,\n },\n /**\n * Function to trigger when user clicks `Search` icon\n */\n search: {\n type: Function as PropType<(event: Event) => void>,\n default: undefined,\n },\n /**\n * Text to display when the user hovers over `Search` icon\n */\n searchTooltip: {\n type: String,\n default: undefined,\n },\n },\n setup() {\n const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n const labelsWidth = inject<Ref<string>>(\n STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n ref(DEFAULT_LABELS_WIDTH)\n );\n const conditionalClasses = computed(() => ({\n 'b-structured-list-item--condensed': isCondensed,\n }));\n\n const labelTypographyVariant = computed(() => (isCondensed ? 'caption' : 'body'));\n\n return {\n // Values\n conditionalClasses,\n labelTypographyVariant,\n labelsWidth,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list-item.scss\" />\n"],"names":["STRUCTURED_LIST_CONDENSED_INJECTION_KEY","STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY","BentoStructuredListLayoutOptions","__default__","isCondensed","inject","computedLayout","computed","props","computedLabelsWidth","provide","DEFAULT_LABELS_WIDTH","_sfc_main","defineComponent","messages","BentoButton","BentoInfoIcon","BentoTypography","Copy","SearchIcon","BentoTooltipDirective","labelsWidth","ref","conditionalClasses","labelTypographyVariant"],"mappings":";;;;;;;;;AAAa,MAAAA,IAAA,OAAA,+CAAA,GACAC,IAAA,OAAA,4CAAA,GCANC,IAAA,CAAA,SAAA,SAAA,SAAA,OAAA,GCqFHC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA7CAC,IAAAC,EAAAL,GAAA,EAAA,GAEAM,IAAAC;AAAA,MAAuB,MAAAL,EAAA,SAAAM,EAAA,MAAA,IAAAA,EAAA,SAAA;AAAA,IACsD,GAG7EC,IAAAF,EAAA,MACIH,IACI,UAGJI,EAAA,cACI,GAAAA,EAAA,kBAGJ,GAAAF,EAAA,MAAA,MAAA,GAAA,EAAA,CAAA,IAA2C;AAG/C,WAAAI,EAAAT,GAAAQ,CAAA;;;;;;;;;;;;;;;;;;;;GCdJE,IAAA,OA2BAC,IAAAC,EAAA;AAAA,EAAA,MAAA,EAAA,UAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC;AAAA,EACA;AAAA,EACA,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,WAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,eAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,QAAA;AAEA,UAAAhB,IAAAC,EAAAL,GAAA,EAAA,GACAqB,IAAAhB;AAAA,MAAAJ;AAAA,MACAqB,EAAAX,CAAA;AAAA,IACA,GAEAY,IAAAhB,EAAA,OAAA;AAAA,MAAA,qCAAAH;AAAA,IACA,EAAA,GAGAoB,IAAAjB,EAAA,MAAAH,IAAA,YAAA,MAAA;AAEA,WAAA;AAAA;AAAA,MAAA,oBAAAmB;AAAA,MAEA,wBAAAC;AAAA,MACA,aAAAH;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.aaf965f8.js","sources":["../../src/components/structured-list/structured-list.keys.ts","../../src/components/structured-list/structured-list.types.ts","../../src/components/structured-list/structured-list.vue","../../src/components/structured-list/components/structered-list-item/structured-list-item.vue"],"sourcesContent":["export const STRUCTURED_LIST_CONDENSED_INJECTION_KEY = Symbol('structured list condensed style injection key');\nexport const STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY = Symbol('structured list labels width injection key');\n","export type BentoStructuredListLayoutOptions = '25-75' | '33-66' | '42-58' | '50-50';\nexport const BentoStructuredListLayoutOptions = ['25-75', '33-66', '42-58', '50-50'];\n","<template>\n <dl class=\"b-structured-list\">\n <slot />\n </dl>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, inject, PropType, provide } from 'vue';\n import {\n STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n } from '@/components/structured-list/structured-list.keys';\n import { BentoStructuredListLayoutOptions } from './structured-list.types';\n\n const props = defineProps({\n /**\n * Width of the labels container, in pixels. Overrides layout prop.\n */\n labelsWidth: {\n type: Number,\n default: null,\n },\n /**\n * The layout of the label value pair in percentage.\n * If labelsWidth is set, layout will be overriden by the static pixel value.\n *\n * If the value entered is not listed in the example\n * list below '33-66' will be applied\n * @example\n * '25-75'\n * '33-66'\n * '42-58'\n * '50-50'\n */\n layout: {\n type: String as PropType<BentoStructuredListLayoutOptions>,\n default: '33-66',\n validator: (value: BentoStructuredListLayoutOptions) => BentoStructuredListLayoutOptions.includes(value),\n },\n });\n\n const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n\n const computedLayout = computed(() =>\n BentoStructuredListLayoutOptions.includes(props.layout) ? props.layout : '33-66'\n );\n\n const computedLabelsWidth = computed(() => {\n if (isCondensed) {\n return '130px';\n }\n\n if (props.labelsWidth) {\n return `${props.labelsWidth}px`;\n }\n\n return `${computedLayout.value.split('-')[0]}%`;\n });\n\n provide(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, computedLabelsWidth);\n</script>\n\n<script lang=\"ts\">\n /**\n * This is a list used to display pairs of information in a clear and organized manner.\n * `BentoStructureListItem` should be used to pass the label/value pairs to the list.\n *\n * @example\n * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoStructuredList, BentoStructuredListItem },\n * template: `\n * <bento-structured-list>\n * <bento-structured-list-item label=\"Payment\">\n * <bento-payment-method label=\"Klarna\" type=\"Klarna\" />\n * </bento-structured-list-item>\n * <bento-structured-list-item label=\"Amount\">\n * <bento-currency :currency=\"BentoCurrencyISOCode.USD\">\n * 123456\n * </bento-currency>\n * </bento-structured-list-item>\n * </bento-structured-list>\n * `\n * }\n */\n export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list.scss\" />\n","<template>\n <div class=\"b-structured-list-item\" :class=\"conditionalClasses\">\n <dt class=\"b-structured-list-item__label\" :style=\"`flex-basis:${labelsWidth}`\">\n <bento-typography :variant=\"labelTypographyVariant\">{{ label }}</bento-typography>\n <bento-info-icon v-if=\"labelInfo\" class=\"b-structured-list-item__icon\" :tooltip-text=\"labelInfo\" />\n </dt>\n <dd class=\"b-structured-list-item__value\">\n <slot />\n <copy v-if=\"copy\" class=\"b-structured-list-item__icon\" :text=\"copy\" />\n <bento-button\n v-if=\"search\"\n v-bento-tooltip-directive:top=\"searchTooltip ? searchTooltip : $t('search')\"\n class=\"b-structured-list-item__icon\"\n variant=\"tertiary\"\n @click=\"search\"\n >\n <template #iconLeft>\n <search-icon :svg-title=\"$t('search')\" />\n </template>\n </bento-button>\n </dd>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, inject, PropType, ref, Ref } from 'vue';\n\n // Components\n import { BentoButton } from '@/components/button';\n import { BentoInfoIcon } from '@/components/info-icon';\n import { BentoTypography } from '@/components/typography';\n import Copy from '@/components/internal/copy/copy.vue';\n import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n\n // Directives\n import { BentoTooltipDirective } from '@/directives';\n\n // Keys\n import {\n STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n } from '../../structured-list.keys';\n\n import messages from '../../messages.json';\n\n const DEFAULT_LABELS_WIDTH = '33%';\n\n /**\n * This is an item of the `BentoStructuredList` meant to be used only with that component.\n * It consists of a label/value pair, and also the optional copy and search modifiers.\n *\n * @example\n * import { BentoCurrencyISOCode, BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoStructuredListItem, BentoStructuredListItem },\n * template: `\n * <bento-structured-list>\n * <bento-structured-list-item label=\"Shopper\" search='searchShopper' search-tooltip='Find shopper'>\n * <bento-typography>\n * 143442642\n * </bento-status>\n * </bento-structured-list-item>\n * <bento-structured-list-item label=\"Amount\" copy='123456'>\n * <bento-currency :currency=\"BentoCurrencyISOCode.USD\">\n * 123456\n * </bento-currency>\n * </bento-structured-list-item>\n * </bento-structured-list>\n * `\n * }\n */\n export default defineComponent({\n i18n: { messages },\n name: 'bento-structured-list-item',\n components: {\n BentoButton,\n BentoInfoIcon,\n BentoTypography,\n Copy,\n SearchIcon,\n },\n directives: { BentoTooltipDirective },\n props: {\n /**\n * Label to display for the value\n */\n label: {\n type: String,\n required: true,\n },\n /**\n * Text to display in info icon tooltip in the label to display for the value\n */\n labelInfo: {\n type: String,\n default: undefined,\n },\n /**\n * Text to copy when the user clicks `Copy` icon\n */\n copy: {\n type: String,\n default: undefined,\n },\n /**\n * Function to trigger when user clicks `Search` icon\n */\n search: {\n type: Function as PropType<(event: Event) => void>,\n default: undefined,\n },\n /**\n * Text to display when the user hovers over `Search` icon\n */\n searchTooltip: {\n type: String,\n default: undefined,\n },\n },\n setup() {\n const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n const labelsWidth = inject<Ref<string>>(\n STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n ref(DEFAULT_LABELS_WIDTH)\n );\n const conditionalClasses = computed(() => ({\n 'b-structured-list-item--condensed': isCondensed,\n }));\n\n const labelTypographyVariant = computed(() => (isCondensed ? 'caption' : 'body'));\n\n return {\n // Values\n conditionalClasses,\n labelTypographyVariant,\n labelsWidth,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list-item.scss\" />\n"],"names":["STRUCTURED_LIST_CONDENSED_INJECTION_KEY","STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY","BentoStructuredListLayoutOptions","__default__","isCondensed","inject","computedLayout","computed","props","computedLabelsWidth","provide","DEFAULT_LABELS_WIDTH","_sfc_main","defineComponent","messages","BentoButton","BentoInfoIcon","BentoTypography","Copy","SearchIcon","BentoTooltipDirective","labelsWidth","ref","conditionalClasses","labelTypographyVariant"],"mappings":";;;;;;;;;AAAa,MAAAA,IAAA,OAAA,+CAAA,GACAC,IAAA,OAAA,4CAAA,GCANC,IAAA,CAAA,SAAA,SAAA,SAAA,OAAA,GCqFHC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA7CAC,IAAAC,EAAAL,GAAA,EAAA,GAEAM,IAAAC;AAAA,MAAuB,MAAAL,EAAA,SAAAM,EAAA,MAAA,IAAAA,EAAA,SAAA;AAAA,IACsD,GAG7EC,IAAAF,EAAA,MACIH,IACI,UAGJI,EAAA,cACI,GAAAA,EAAA,kBAGJ,GAAAF,EAAA,MAAA,MAAA,GAAA,EAAA,CAAA,IAA2C;AAG/C,WAAAI,EAAAT,GAAAQ,CAAA;;;;;;;;;;;;;;;;;;;;GCdJE,IAAA,OA2BAC,IAAAC,EAAA;AAAA,EAAA,MAAA,EAAA,UAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,aAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,YAAAC;AAAA,EACA;AAAA,EACA,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,OAAA;AAAA,MAIA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,WAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,eAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,QAAA;AAEA,UAAAhB,IAAAC,EAAAL,GAAA,EAAA,GACAqB,IAAAhB;AAAA,MAAAJ;AAAA,MACAqB,EAAAX,CAAA;AAAA,IACA,GAEAY,IAAAhB,EAAA,OAAA;AAAA,MAAA,qCAAAH;AAAA,IACA,EAAA,GAGAoB,IAAAjB,EAAA,MAAAH,IAAA,YAAA,MAAA;AAEA,WAAA;AAAA;AAAA,MAAA,oBAAAmB;AAAA,MAEA,wBAAAC;AAAA,MACA,aAAAH;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;"}
@@ -1,6 +1,6 @@
1
1
  import { defineComponent as N, computed as R } from "vue";
2
2
  import { r as c, t as h, e as p, g as A, d as q, f as X } from "./index.f55fdc32.js";
3
- import { B as G } from "./index.ba6c1040.js";
3
+ import { B as G } from "./index.dd30e538.js";
4
4
  import { u as F } from "./i18n.eb5b985b.js";
5
5
  import { n as Q } from "./_plugin-vue2_normalizer.71e2aa87.js";
6
6
  function $(t) {
@@ -924,4 +924,4 @@ export {
924
924
  ye as f,
925
925
  d as t
926
926
  };
927
- //# sourceMappingURL=index.03ae22b4.js.map
927
+ //# sourceMappingURL=index.b21197ca.js.map