@adyen/bento-vue2 1.18.0 → 1.19.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 (239) hide show
  1. package/dist/@types/components.d.ts +4 -0
  2. package/dist/@types/packages/vue2/src/components/button/components/toggle-button/index.d.ts +1 -0
  3. package/dist/@types/packages/vue2/src/components/button/components/toggle-button/toggle-button.vue.d.ts +65 -0
  4. package/dist/@types/packages/vue2/src/components/button/components/toggle-button/toggle.types.d.ts +1 -0
  5. package/dist/@types/packages/vue2/src/components/button/index.d.ts +1 -0
  6. package/dist/@types/packages/vue2/src/components/checkbox/checkbox.types.d.ts +3 -8
  7. package/dist/@types/packages/vue2/src/components/checkbox/checkbox.vue.d.ts +3 -6
  8. package/dist/@types/packages/vue2/src/components/checkbox/components/checkbox-group/checkbox-group.vue.d.ts +1 -1
  9. package/dist/@types/packages/vue2/src/components/data-grid/components/data-grid-cell/data-grid-cell.types.d.ts +1 -1
  10. package/dist/@types/packages/vue2/src/components/date-range-picker/components/date-range-picker-calendar/date-range-picker-calendar.vue.d.ts +7 -5
  11. package/dist/@types/packages/vue2/src/components/{internal/calendar → date-range-picker}/composables/use-granularity-memory.types.d.ts +2 -2
  12. package/dist/@types/packages/vue2/src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.types.d.ts +5 -5
  13. package/dist/@types/packages/vue2/src/components/dropdown/components/dropdown-base-textbox/dropdown-base-textbox.vue.d.ts +5 -5
  14. package/dist/@types/packages/vue2/src/components/dropdown/components/dropdown-default-textbox/dropdown-default-textbox.vue.d.ts +18 -19
  15. package/dist/@types/packages/vue2/src/components/dropdown/components/dropdown-small-textbox/dropdown-small-textbox.vue.d.ts +2 -2
  16. package/dist/@types/packages/vue2/src/components/filter-bar/components/all-filters-modal/all-filters-modal.vue.d.ts +1 -1
  17. package/dist/@types/packages/vue2/src/components/internal/calendar/calendar.types.d.ts +2 -2
  18. package/dist/@types/packages/vue2/src/components/internal/calendar/composables/use-granularity-adjustments.types.d.ts +7 -7
  19. package/dist/@types/packages/vue2/src/components/internal/checkbox-input/checkbox-input.types.d.ts +20 -0
  20. package/dist/@types/packages/vue2/src/components/internal/checkbox-input/checkbox-input.vue.d.ts +90 -0
  21. package/dist/@types/packages/vue2/src/components/internal/checkbox-input/index.d.ts +3 -0
  22. package/dist/@types/packages/vue2/src/components/internal/dialog-page/dialog-page.keys.d.ts +2 -0
  23. package/dist/@types/packages/vue2/src/components/internal/dialog-page/dialog-page.types.d.ts +16 -0
  24. package/dist/@types/packages/vue2/src/components/internal/dialog-page/dialog-page.vue.d.ts +54 -0
  25. package/dist/@types/packages/vue2/src/components/internal/dialog-page/index.d.ts +3 -0
  26. package/dist/@types/packages/vue2/src/components/internal/index.d.ts +1 -0
  27. package/dist/@types/packages/vue2/src/components/internal/listbox/composables/use-cached-selected-values/use-cached-selected-values.d.ts +14 -0
  28. package/dist/@types/packages/vue2/src/components/internal/listbox/index.d.ts +1 -0
  29. package/dist/@types/packages/vue2/src/components/internal/radio-input/index.d.ts +3 -0
  30. package/dist/@types/packages/vue2/src/components/internal/radio-input/radio-input.types.d.ts +6 -0
  31. package/dist/@types/packages/vue2/src/components/internal/radio-input/radio-input.vue.d.ts +80 -0
  32. package/dist/@types/packages/vue2/src/components/modal-fullscreen/components/modal-fullscreen-page.vue.d.ts +60 -0
  33. package/dist/@types/packages/vue2/src/components/modal-fullscreen/index.d.ts +1 -0
  34. package/dist/@types/packages/vue2/src/components/modal-fullscreen/modal-fullscreen.vue.d.ts +12 -1
  35. package/dist/@types/packages/vue2/src/components/radio-group/components/radio-button/radio-button.types.d.ts +3 -6
  36. package/dist/@types/packages/vue2/src/components/radio-group/components/radio-button/radio-button.vue.d.ts +1 -1
  37. package/dist/@types/packages/vue2/src/components/radio-group/radio-group.vue.d.ts +1 -1
  38. package/dist/@types/packages/vue2/src/components/sidepanel/components/sidepanel-page.vue.d.ts +3 -3
  39. package/dist/@types/packages/vue2/src/components/sidepanel/sidepanel.keys.d.ts +0 -2
  40. package/dist/@types/packages/vue2/src/components/sidepanel/sidepanel.types.d.ts +0 -19
  41. package/dist/@types/packages/vue2/src/components/sidepanel/sidepanel.vue.d.ts +1 -1
  42. package/dist/@types/packages/vue2/src/composables/use-form-validate/use-form.d.ts +1 -1
  43. package/dist/accordion.js +2 -2
  44. package/dist/action-bar.js +6 -6
  45. package/dist/alert.js +3 -3
  46. package/dist/assets/base-modal.css +1 -1
  47. package/dist/assets/button-actions.css +1 -0
  48. package/dist/assets/button.css +1 -1
  49. package/dist/assets/calendar.css +1 -1
  50. package/dist/assets/checkbox.css +1 -1
  51. package/dist/assets/dialog-page.css +1 -0
  52. package/dist/assets/dropdown-default-textbox.css +1 -1
  53. package/dist/assets/dropdown.css +1 -1
  54. package/dist/assets/index10.css +1 -1
  55. package/dist/assets/index11.css +1 -1
  56. package/dist/assets/index12.css +1 -1
  57. package/dist/assets/index13.css +1 -1
  58. package/dist/assets/index14.css +1 -1
  59. package/dist/assets/index15.css +1 -1
  60. package/dist/assets/index16.css +1 -1
  61. package/dist/assets/index17.css +1 -1
  62. package/dist/assets/index18.css +1 -1
  63. package/dist/assets/index19.css +1 -1
  64. package/dist/assets/index20.css +1 -1
  65. package/dist/assets/index21.css +1 -1
  66. package/dist/assets/index22.css +1 -1
  67. package/dist/assets/index23.css +1 -1
  68. package/dist/assets/index24.css +1 -1
  69. package/dist/assets/index25.css +1 -1
  70. package/dist/assets/index26.css +1 -1
  71. package/dist/assets/index27.css +1 -1
  72. package/dist/assets/index28.css +1 -1
  73. package/dist/assets/index29.css +1 -1
  74. package/dist/assets/index3.css +1 -1
  75. package/dist/assets/index30.css +1 -1
  76. package/dist/assets/index31.css +1 -1
  77. package/dist/assets/index32.css +1 -1
  78. package/dist/assets/index33.css +1 -1
  79. package/dist/assets/index34.css +1 -1
  80. package/dist/assets/index35.css +1 -1
  81. package/dist/assets/index36.css +1 -1
  82. package/dist/assets/index37.css +1 -1
  83. package/dist/assets/index38.css +1 -1
  84. package/dist/assets/index39.css +1 -1
  85. package/dist/assets/index4.css +1 -1
  86. package/dist/assets/index40.css +1 -1
  87. package/dist/assets/index41.css +1 -1
  88. package/dist/assets/index42.css +1 -1
  89. package/dist/assets/index43.css +1 -1
  90. package/dist/assets/index44.css +1 -1
  91. package/dist/assets/index45.css +1 -1
  92. package/dist/assets/index46.css +1 -1
  93. package/dist/assets/index47.css +1 -1
  94. package/dist/assets/index48.css +1 -1
  95. package/dist/assets/index5.css +1 -1
  96. package/dist/assets/index6.css +1 -1
  97. package/dist/assets/index7.css +1 -1
  98. package/dist/assets/index8.css +1 -1
  99. package/dist/assets/index9.css +1 -1
  100. package/dist/assets/teleport.css +1 -1
  101. package/dist/avatar-image.js +1 -1
  102. package/dist/button.js +71 -93
  103. package/dist/button.js.map +1 -1
  104. package/dist/card.js +3 -3
  105. package/dist/checkbox.js +6 -6
  106. package/dist/chunks/{base-button.bf0c938c.js → base-button.3c3d473d.js} +2 -2
  107. package/dist/chunks/{base-button.bf0c938c.js.map → base-button.3c3d473d.js.map} +1 -1
  108. package/dist/chunks/{base-modal.1dc6cf96.js → base-modal.27c6f2db.js} +5 -5
  109. package/dist/chunks/{base-modal.1dc6cf96.js.map → base-modal.27c6f2db.js.map} +1 -1
  110. package/dist/chunks/{button-actions-with-menu.4ecf3d93.js → button-actions-with-menu.a38327c2.js} +4 -4
  111. package/dist/chunks/{button-actions-with-menu.4ecf3d93.js.map → button-actions-with-menu.a38327c2.js.map} +1 -1
  112. package/dist/chunks/button-actions.1dc90a19.js +111 -0
  113. package/dist/chunks/button-actions.1dc90a19.js.map +1 -0
  114. package/dist/chunks/{button.f5739261.js → button.0b6cda85.js} +3 -3
  115. package/dist/chunks/{button.f5739261.js.map → button.0b6cda85.js.map} +1 -1
  116. package/dist/chunks/calendar.263cfc88.js +913 -0
  117. package/dist/chunks/calendar.263cfc88.js.map +1 -0
  118. package/dist/chunks/checkbox.c7a74005.js +275 -0
  119. package/dist/chunks/checkbox.c7a74005.js.map +1 -0
  120. package/dist/chunks/{controls-group.2b645d54.js → controls-group.8abe0bd1.js} +3 -3
  121. package/dist/chunks/{controls-group.2b645d54.js.map → controls-group.8abe0bd1.js.map} +1 -1
  122. package/dist/chunks/{copy.e01532cf.js → copy.647aae54.js} +4 -4
  123. package/dist/chunks/{copy.e01532cf.js.map → copy.647aae54.js.map} +1 -1
  124. package/dist/chunks/dialog-page.f787969c.js +113 -0
  125. package/dist/chunks/dialog-page.f787969c.js.map +1 -0
  126. package/dist/chunks/{dropdown-default-textbox.d45138fa.js → dropdown-default-textbox.59803edd.js} +97 -111
  127. package/dist/chunks/dropdown-default-textbox.59803edd.js.map +1 -0
  128. package/dist/chunks/{dropdown.0a9acf8b.js → dropdown.0574f613.js} +62 -61
  129. package/dist/chunks/dropdown.0574f613.js.map +1 -0
  130. package/dist/chunks/{error-message.317dd85f.js → error-message.75666843.js} +2 -2
  131. package/dist/chunks/{error-message.317dd85f.js.map → error-message.75666843.js.map} +1 -1
  132. package/dist/chunks/{fixed-scroller.afe02620.js → fixed-scroller.06574a66.js} +2 -2
  133. package/dist/chunks/{fixed-scroller.afe02620.js.map → fixed-scroller.06574a66.js.map} +1 -1
  134. package/dist/chunks/{footer-actions.e0b866b1.js → footer-actions.0268a57b.js} +4 -4
  135. package/dist/chunks/{footer-actions.e0b866b1.js.map → footer-actions.0268a57b.js.map} +1 -1
  136. package/dist/chunks/{index.7aa428c2.js → index.026ae47b.js} +2 -2
  137. package/dist/chunks/{index.7aa428c2.js.map → index.026ae47b.js.map} +1 -1
  138. package/dist/chunks/{index.898a95bc.js → index.0bb773a7.js} +6 -6
  139. package/dist/chunks/{index.898a95bc.js.map → index.0bb773a7.js.map} +1 -1
  140. package/dist/chunks/{index.651dac2d.js → index.10b9618d.js} +3 -3
  141. package/dist/chunks/{index.651dac2d.js.map → index.10b9618d.js.map} +1 -1
  142. package/dist/chunks/{index.6c299479.js → index.302e9cf2.js} +2 -2
  143. package/dist/chunks/{index.6c299479.js.map → index.302e9cf2.js.map} +1 -1
  144. package/dist/chunks/index.408e1419.js +712 -0
  145. package/dist/chunks/index.408e1419.js.map +1 -0
  146. package/dist/chunks/{index.88ac1dab.js → index.45cd2344.js} +31 -31
  147. package/dist/chunks/index.45cd2344.js.map +1 -0
  148. package/dist/chunks/{index.6c017121.js → index.5b47c56b.js} +7 -7
  149. package/dist/chunks/{index.6c017121.js.map → index.5b47c56b.js.map} +1 -1
  150. package/dist/chunks/{index.2e70720a.js → index.5bfc67d1.js} +2 -2
  151. package/dist/chunks/{index.2e70720a.js.map → index.5bfc67d1.js.map} +1 -1
  152. package/dist/chunks/{index.e6aa2c36.js → index.932c230b.js} +6 -6
  153. package/dist/chunks/{index.e6aa2c36.js.map → index.932c230b.js.map} +1 -1
  154. package/dist/chunks/{index.81443e01.js → index.a52b98d1.js} +8 -8
  155. package/dist/chunks/{index.81443e01.js.map → index.a52b98d1.js.map} +1 -1
  156. package/dist/chunks/{index.290bbc9e.js → index.dc985e76.js} +3 -3
  157. package/dist/chunks/{index.290bbc9e.js.map → index.dc985e76.js.map} +1 -1
  158. package/dist/chunks/{index.546b27ae.js → index.de687404.js} +3 -2
  159. package/dist/chunks/{index.546b27ae.js.map → index.de687404.js.map} +1 -1
  160. package/dist/chunks/{listbox-option-tag.720eabb5.js → listbox-option-tag.89846151.js} +3 -3
  161. package/dist/chunks/{listbox-option-tag.720eabb5.js.map → listbox-option-tag.89846151.js.map} +1 -1
  162. package/dist/chunks/{listbox.dc3d986e.js → listbox.a8180c4a.js} +5 -5
  163. package/dist/chunks/{listbox.dc3d986e.js.map → listbox.a8180c4a.js.map} +1 -1
  164. package/dist/chunks/{loading-button.390228ff.js → loading-button.50dddf2f.js} +2 -2
  165. package/dist/chunks/{loading-button.390228ff.js.map → loading-button.50dddf2f.js.map} +1 -1
  166. package/dist/chunks/modal-fullscreen.keys.b9f31632.js +5 -0
  167. package/dist/chunks/modal-fullscreen.keys.b9f31632.js.map +1 -0
  168. package/dist/chunks/sidepanel.keys.1ed8a57c.js +5 -0
  169. package/dist/chunks/sidepanel.keys.1ed8a57c.js.map +1 -0
  170. package/dist/chunks/{teleport.d52e5254.js → teleport.84b0f20b.js} +14 -13
  171. package/dist/chunks/teleport.84b0f20b.js.map +1 -0
  172. package/dist/chunks/{tooltip.d452f6c4.js → tooltip.6748027a.js} +3 -3
  173. package/dist/chunks/{tooltip.d452f6c4.js.map → tooltip.6748027a.js.map} +1 -1
  174. package/dist/code-snippet.js +7 -7
  175. package/dist/code-snippet.js.map +1 -1
  176. package/dist/country.js +2 -2
  177. package/dist/currency.js +1 -1
  178. package/dist/data-grid.js +1 -1
  179. package/dist/date-picker.js +18 -18
  180. package/dist/date-range-picker.js +2 -2
  181. package/dist/date.js +1 -1
  182. package/dist/divider.js +1 -1
  183. package/dist/dropdown.js +6 -6
  184. package/dist/empty-state.js +3 -3
  185. package/dist/filter-bar.js +19 -19
  186. package/dist/filter-bar.js.map +1 -1
  187. package/dist/focus-trap.js +1 -1
  188. package/dist/form-layout.js +2 -2
  189. package/dist/header.js +4 -4
  190. package/dist/index.js +299 -2935
  191. package/dist/index.js.map +1 -1
  192. package/dist/info-icon.js +3 -3
  193. package/dist/input-field.js +4 -4
  194. package/dist/internal.js +78 -25
  195. package/dist/internal.js.map +1 -1
  196. package/dist/link.js +1 -1
  197. package/dist/loading-indicator.js +1 -1
  198. package/dist/menu.js +1 -1
  199. package/dist/modal-fullscreen.js +144 -44
  200. package/dist/modal-fullscreen.js.map +1 -1
  201. package/dist/modal.js +6 -6
  202. package/dist/pagination.js +4 -4
  203. package/dist/payment-method.js +2 -2
  204. package/dist/popover.js +1 -1
  205. package/dist/popper-container.js +1 -1
  206. package/dist/radio-group.js +147 -78
  207. package/dist/radio-group.js.map +1 -1
  208. package/dist/search-bar.js +2 -2
  209. package/dist/secondary-nav.js +2 -2
  210. package/dist/segmented-control.js +3 -3
  211. package/dist/sidepanel.js +78 -111
  212. package/dist/sidepanel.js.map +1 -1
  213. package/dist/status.js +2 -2
  214. package/dist/stepper.js +3 -3
  215. package/dist/structured-list.js +1 -1
  216. package/dist/summary-grid.js +3 -3
  217. package/dist/tabs.js +3 -3
  218. package/dist/tag.js +3 -3
  219. package/dist/textarea.js +4 -4
  220. package/dist/timeline.js +12 -12
  221. package/dist/toast.js +3 -3
  222. package/dist/toggle.js +2 -2
  223. package/dist/tutorial.js +6 -6
  224. package/dist/typography.js +1 -1
  225. package/dist/web-types.json +431 -5
  226. package/package.json +3 -3
  227. package/dist/chunks/calendar.7a2d1894.js +0 -960
  228. package/dist/chunks/calendar.7a2d1894.js.map +0 -1
  229. package/dist/chunks/checkbox.1345941b.js +0 -195
  230. package/dist/chunks/checkbox.1345941b.js.map +0 -1
  231. package/dist/chunks/dropdown-default-textbox.d45138fa.js.map +0 -1
  232. package/dist/chunks/dropdown.0a9acf8b.js.map +0 -1
  233. package/dist/chunks/index.84c2cef6.js +0 -637
  234. package/dist/chunks/index.84c2cef6.js.map +0 -1
  235. package/dist/chunks/index.88ac1dab.js.map +0 -1
  236. package/dist/chunks/sidepanel.keys.3f8d69c1.js +0 -7
  237. package/dist/chunks/sidepanel.keys.3f8d69c1.js.map +0 -1
  238. package/dist/chunks/teleport.d52e5254.js.map +0 -1
  239. /package/dist/@types/packages/vue2/src/components/{internal/calendar → date-range-picker}/composables/use-granularity-memory.d.ts +0 -0
@@ -1,6 +1,6 @@
1
1
  import { defineComponent as o, computed as d } from "vue";
2
2
  import { n as E } from "./_plugin-vue2_normalizer.71e2aa87.js";
3
- import "../assets/index27.css";
3
+ import "../assets/index26.css";
4
4
  var a = /* @__PURE__ */ ((t) => (t.CAPTION = "caption", t.BODY = "body", t.SUBTITLE = "subtitle", t.TITLE = "title", t))(a || {}), e = /* @__PURE__ */ ((t) => (t.WIDE = "wide", t.STRONGER = "stronger", t.STRONGER_WIDE = "stronger-wide", t.STRONGEST = "strongest", t.STRONGEST_WIDE = "strongest-wide", t.MEDIUM = "m", t.LARGE = "l", t.MOBILE = "mobile", t))(e || {}), i = /* @__PURE__ */ ((t) => (t.H1 = "h1", t.H2 = "h2", t.H3 = "h3", t.H4 = "h4", t.H5 = "h5", t.H6 = "h6", t.DIV = "div", t.PARAGRAPH = "p", t.SPAN = "span", t))(i || {});
5
5
  const T = ["development", "DEVELOPMENT", "dev", "DEV"], v = () => T.includes(process.env.NODE_ENV);
6
6
  function s(...t) {
@@ -121,6 +121,7 @@ export {
121
121
  e as b,
122
122
  i as c,
123
123
  u as d,
124
+ v as i,
124
125
  s as p
125
126
  };
126
- //# sourceMappingURL=index.546b27ae.js.map
127
+ //# sourceMappingURL=index.de687404.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.546b27ae.js","sources":["../../src/components/typography/typography.types.ts","../../src/utils/ts/dev-environment.ts","../../src/utils/ts/print-development-warning.ts","../../src/utils/ts/deprecate.ts","../../src/components/typography/typography.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoTypographyVariant {\n CAPTION = 'caption',\n BODY = 'body',\n /** @deprecated Use \"TITLE\" instead. */\n SUBTITLE = 'subtitle',\n TITLE = 'title',\n}\n\nexport enum BentoTypographyModifier {\n WIDE = 'wide',\n STRONGER = 'stronger',\n STRONGER_WIDE = 'stronger-wide',\n STRONGEST = 'strongest',\n STRONGEST_WIDE = 'strongest-wide',\n MEDIUM = 'm',\n LARGE = 'l',\n MOBILE = 'mobile',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoTypographyElement {\n H1 = 'h1',\n H2 = 'h2',\n H3 = 'h3',\n H4 = 'h4',\n H5 = 'h5',\n H6 = 'h6',\n DIV = 'div',\n PARAGRAPH = 'p',\n SPAN = 'span',\n}\n","const DEV_ENVIROMENT_NAMES = ['development', 'DEVELOPMENT', 'dev', 'DEV'];\n\nexport const isDevelopmentEnviroment = () => DEV_ENVIROMENT_NAMES.includes(process.env.NODE_ENV);\n","import { isDevelopmentEnviroment } from '@/utils/ts/dev-environment';\n\n/**\n * Prints console.warn messages in development mode only.\n *\n * @see console.warn for what parameters you can use\n */\n\nexport function printDevelopmentWarning(...args: Parameters<typeof console.warn>) {\n if (isDevelopmentEnviroment()) {\n // eslint-disable-next-line no-console\n console.warn(...args);\n }\n}\n","import { printDevelopmentWarning } from './print-development-warning';\n\nconst DEPRECATION_STYLES = ['color: red', 'background: yellow'].join(';');\nconst shownMessages = new Set<string>();\n\n/**\n * Informs users about the deprecations in development mode only.\n *\n * @param title Indicates what is being deprecated.\n * @param deprecationMessage How to avoid the deprecation by giving an example of the alternatives. Backticks can be used to multi-line the message.\n * @param toBeRemovedInVersion The version it will be removed. Must be in X.Y.Z format.\n */\nexport function deprecate(title: string, deprecationMessage: string, toBeRemovedInVersion: string) {\n // If the message is already showing, don't show it again\n if (!shownMessages.has(title)) {\n printDevelopmentWarning(`%cDEPRECATED:\\x1b[0m ${title}`, DEPRECATION_STYLES);\n // Format multi-line descriptions with the backtick\n printDevelopmentWarning(`${deprecationMessage.replaceAll(' ', '').trim()}`);\n printDevelopmentWarning(`To be removed in: %c${toBeRemovedInVersion}`, DEPRECATION_STYLES);\n shownMessages.add(title);\n }\n}\n\n/**\n * Reset shownMessages set\n *\n * @deprecated For testing purposes only. Do not use.\n */\nexport function resetShownMessages() {\n shownMessages.clear();\n}\n","<template>\n <component :is=\"el\" class=\"b-typography\" :class=\"conditionalClasses\" data-testid=\"typography\">\n <slot />\n </component>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { BentoTypographyElement, BentoTypographyModifier, BentoTypographyVariant } from './typography.types';\n import { deprecate } from '@/utils/ts/deprecate';\n\n /**\n * The Typography component makes it easy to apply a default set of font weights, sizes and other text styles\n * easily to text. The variants and properties match with those found in Figma.\n *\n * For example, seeing text with the typography styling of\n *\n * @example\n * import { BentoTypography } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoTypography },\n * template: `\n * <bento-typography>\n * ... text content\n * </bento-typography>\n * `\n * }\n */\n export default defineComponent({\n name: 'bento-typography',\n inheritAttrs: true,\n props: {\n /**\n * Sets the HTML DOM element.\n * @values h1, h2, h3, h4, h5, h6, div, p, span\n */\n el: {\n type: String as PropType<BentoTypographyElement | `${BentoTypographyElement}`>,\n default: BentoTypographyElement.PARAGRAPH,\n validator: (value: BentoTypographyElement) => Object.values(BentoTypographyElement).includes(value),\n },\n\n /**\n * Adds the stronger class modifier.\n * Applicable to Caption, Body and Subtitle variants.\n */\n stronger: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Adds the strongest class modifier.\n * Applicable to Caption, Body and Subtitle variants.\n */\n strongest: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Sets the type of typography variant.\n * @values caption, body, title.\n */\n variant: {\n type: String as PropType<BentoTypographyVariant | `${BentoTypographyVariant}`>,\n default: BentoTypographyVariant.BODY,\n validator: (value: BentoTypographyVariant) => Object.values(BentoTypographyVariant).includes(value),\n },\n\n /**\n * Adds the medium class modifier.\n * Applicable to the Title variant.\n */\n medium: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Adds the large class modifier.\n * Applicable to the Title variant.\n */\n large: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Adds the medium class modifier.\n * Applicable to tje Body variant.\n */\n wide: {\n type: Boolean,\n default: false,\n },\n },\n setup(props) {\n if (props.variant === BentoTypographyVariant.SUBTITLE) {\n deprecate(\n 'BentoTypography \"subtitle\" variant (BentoTypographyVariant.SUBTITLE)',\n `Use the \"title\" or \"BentoTypographyVariant.TITLE\" variant and (optionally) combine it with a size property. e.g. medium / large.\n <bento-typography :variant=\"BentoTypographyVariant.TITLE\" medium>`,\n '2.0.0'\n );\n }\n\n const conditionalClasses = computed(() => ({\n // Caption\n [`b-typography--${BentoTypographyVariant.CAPTION}`]: props.variant === BentoTypographyVariant.CAPTION,\n [`b-typography--${BentoTypographyVariant.CAPTION}-${BentoTypographyModifier.WIDE}`]:\n props.variant === BentoTypographyVariant.CAPTION && props.wide,\n [`b-typography--${BentoTypographyVariant.CAPTION}-${BentoTypographyModifier.STRONGER}`]:\n props.variant === BentoTypographyVariant.CAPTION && props.stronger,\n\n // Body\n [`b-typography--${BentoTypographyVariant.BODY}`]: props.variant === BentoTypographyVariant.BODY,\n [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.WIDE}`]:\n props.variant === BentoTypographyVariant.BODY && props.wide,\n [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.STRONGER}`]:\n props.variant === BentoTypographyVariant.BODY && props.stronger,\n [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.STRONGEST}`]:\n props.variant === BentoTypographyVariant.BODY && props.strongest,\n\n // Subtitle\n [`b-typography--${BentoTypographyVariant.SUBTITLE}`]: props.variant === BentoTypographyVariant.SUBTITLE,\n [`b-typography--${BentoTypographyVariant.SUBTITLE}-${BentoTypographyModifier.STRONGER}`]:\n props.variant === BentoTypographyVariant.SUBTITLE && props.stronger,\n\n // Title\n [`b-typography--${BentoTypographyVariant.TITLE}`]:\n props.variant === BentoTypographyVariant.TITLE && !props.medium && !props.large,\n [`b-typography--${BentoTypographyVariant.TITLE}-${BentoTypographyModifier.MEDIUM}`]:\n props.variant === BentoTypographyVariant.TITLE && props.medium,\n [`b-typography--${BentoTypographyVariant.TITLE}-${BentoTypographyModifier.LARGE}`]:\n props.variant === BentoTypographyVariant.TITLE && props.large,\n }));\n\n return {\n conditionalClasses,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./typography.scss\" />\n"],"names":["BentoTypographyVariant","BentoTypographyVariant2","BentoTypographyModifier","BentoTypographyModifier2","BentoTypographyElement","BentoTypographyElement2","DEV_ENVIROMENT_NAMES","isDevelopmentEnviroment","printDevelopmentWarning","args","DEPRECATION_STYLES","shownMessages","deprecate","title","deprecationMessage","toBeRemovedInVersion","_sfc_main","defineComponent","value","props","computed"],"mappings":"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"}
1
+ {"version":3,"file":"index.de687404.js","sources":["../../src/components/typography/typography.types.ts","../../src/utils/ts/dev-environment.ts","../../src/utils/ts/print-development-warning.ts","../../src/utils/ts/deprecate.ts","../../src/components/typography/typography.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoTypographyVariant {\n CAPTION = 'caption',\n BODY = 'body',\n /** @deprecated Use \"TITLE\" instead. */\n SUBTITLE = 'subtitle',\n TITLE = 'title',\n}\n\nexport enum BentoTypographyModifier {\n WIDE = 'wide',\n STRONGER = 'stronger',\n STRONGER_WIDE = 'stronger-wide',\n STRONGEST = 'strongest',\n STRONGEST_WIDE = 'strongest-wide',\n MEDIUM = 'm',\n LARGE = 'l',\n MOBILE = 'mobile',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoTypographyElement {\n H1 = 'h1',\n H2 = 'h2',\n H3 = 'h3',\n H4 = 'h4',\n H5 = 'h5',\n H6 = 'h6',\n DIV = 'div',\n PARAGRAPH = 'p',\n SPAN = 'span',\n}\n","const DEV_ENVIROMENT_NAMES = ['development', 'DEVELOPMENT', 'dev', 'DEV'];\n\nexport const isDevelopmentEnviroment = () => DEV_ENVIROMENT_NAMES.includes(process.env.NODE_ENV);\n","import { isDevelopmentEnviroment } from '@/utils/ts/dev-environment';\n\n/**\n * Prints console.warn messages in development mode only.\n *\n * @see console.warn for what parameters you can use\n */\n\nexport function printDevelopmentWarning(...args: Parameters<typeof console.warn>) {\n if (isDevelopmentEnviroment()) {\n // eslint-disable-next-line no-console\n console.warn(...args);\n }\n}\n","import { printDevelopmentWarning } from './print-development-warning';\n\nconst DEPRECATION_STYLES = ['color: red', 'background: yellow'].join(';');\nconst shownMessages = new Set<string>();\n\n/**\n * Informs users about the deprecations in development mode only.\n *\n * @param title Indicates what is being deprecated.\n * @param deprecationMessage How to avoid the deprecation by giving an example of the alternatives. Backticks can be used to multi-line the message.\n * @param toBeRemovedInVersion The version it will be removed. Must be in X.Y.Z format.\n */\nexport function deprecate(title: string, deprecationMessage: string, toBeRemovedInVersion: string) {\n // If the message is already showing, don't show it again\n if (!shownMessages.has(title)) {\n printDevelopmentWarning(`%cDEPRECATED:\\x1b[0m ${title}`, DEPRECATION_STYLES);\n // Format multi-line descriptions with the backtick\n printDevelopmentWarning(`${deprecationMessage.replaceAll(' ', '').trim()}`);\n printDevelopmentWarning(`To be removed in: %c${toBeRemovedInVersion}`, DEPRECATION_STYLES);\n shownMessages.add(title);\n }\n}\n\n/**\n * Reset shownMessages set\n *\n * @deprecated For testing purposes only. Do not use.\n */\nexport function resetShownMessages() {\n shownMessages.clear();\n}\n","<template>\n <component :is=\"el\" class=\"b-typography\" :class=\"conditionalClasses\" data-testid=\"typography\">\n <slot />\n </component>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import { BentoTypographyElement, BentoTypographyModifier, BentoTypographyVariant } from './typography.types';\n import { deprecate } from '@/utils/ts/deprecate';\n\n /**\n * The Typography component makes it easy to apply a default set of font weights, sizes and other text styles\n * easily to text. The variants and properties match with those found in Figma.\n *\n * For example, seeing text with the typography styling of\n *\n * @example\n * import { BentoTypography } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoTypography },\n * template: `\n * <bento-typography>\n * ... text content\n * </bento-typography>\n * `\n * }\n */\n export default defineComponent({\n name: 'bento-typography',\n inheritAttrs: true,\n props: {\n /**\n * Sets the HTML DOM element.\n * @values h1, h2, h3, h4, h5, h6, div, p, span\n */\n el: {\n type: String as PropType<BentoTypographyElement | `${BentoTypographyElement}`>,\n default: BentoTypographyElement.PARAGRAPH,\n validator: (value: BentoTypographyElement) => Object.values(BentoTypographyElement).includes(value),\n },\n\n /**\n * Adds the stronger class modifier.\n * Applicable to Caption, Body and Subtitle variants.\n */\n stronger: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Adds the strongest class modifier.\n * Applicable to Caption, Body and Subtitle variants.\n */\n strongest: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Sets the type of typography variant.\n * @values caption, body, title.\n */\n variant: {\n type: String as PropType<BentoTypographyVariant | `${BentoTypographyVariant}`>,\n default: BentoTypographyVariant.BODY,\n validator: (value: BentoTypographyVariant) => Object.values(BentoTypographyVariant).includes(value),\n },\n\n /**\n * Adds the medium class modifier.\n * Applicable to the Title variant.\n */\n medium: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Adds the large class modifier.\n * Applicable to the Title variant.\n */\n large: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Adds the medium class modifier.\n * Applicable to tje Body variant.\n */\n wide: {\n type: Boolean,\n default: false,\n },\n },\n setup(props) {\n if (props.variant === BentoTypographyVariant.SUBTITLE) {\n deprecate(\n 'BentoTypography \"subtitle\" variant (BentoTypographyVariant.SUBTITLE)',\n `Use the \"title\" or \"BentoTypographyVariant.TITLE\" variant and (optionally) combine it with a size property. e.g. medium / large.\n <bento-typography :variant=\"BentoTypographyVariant.TITLE\" medium>`,\n '2.0.0'\n );\n }\n\n const conditionalClasses = computed(() => ({\n // Caption\n [`b-typography--${BentoTypographyVariant.CAPTION}`]: props.variant === BentoTypographyVariant.CAPTION,\n [`b-typography--${BentoTypographyVariant.CAPTION}-${BentoTypographyModifier.WIDE}`]:\n props.variant === BentoTypographyVariant.CAPTION && props.wide,\n [`b-typography--${BentoTypographyVariant.CAPTION}-${BentoTypographyModifier.STRONGER}`]:\n props.variant === BentoTypographyVariant.CAPTION && props.stronger,\n\n // Body\n [`b-typography--${BentoTypographyVariant.BODY}`]: props.variant === BentoTypographyVariant.BODY,\n [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.WIDE}`]:\n props.variant === BentoTypographyVariant.BODY && props.wide,\n [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.STRONGER}`]:\n props.variant === BentoTypographyVariant.BODY && props.stronger,\n [`b-typography--${BentoTypographyVariant.BODY}-${BentoTypographyModifier.STRONGEST}`]:\n props.variant === BentoTypographyVariant.BODY && props.strongest,\n\n // Subtitle\n [`b-typography--${BentoTypographyVariant.SUBTITLE}`]: props.variant === BentoTypographyVariant.SUBTITLE,\n [`b-typography--${BentoTypographyVariant.SUBTITLE}-${BentoTypographyModifier.STRONGER}`]:\n props.variant === BentoTypographyVariant.SUBTITLE && props.stronger,\n\n // Title\n [`b-typography--${BentoTypographyVariant.TITLE}`]:\n props.variant === BentoTypographyVariant.TITLE && !props.medium && !props.large,\n [`b-typography--${BentoTypographyVariant.TITLE}-${BentoTypographyModifier.MEDIUM}`]:\n props.variant === BentoTypographyVariant.TITLE && props.medium,\n [`b-typography--${BentoTypographyVariant.TITLE}-${BentoTypographyModifier.LARGE}`]:\n props.variant === BentoTypographyVariant.TITLE && props.large,\n }));\n\n return {\n conditionalClasses,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./typography.scss\" />\n"],"names":["BentoTypographyVariant","BentoTypographyVariant2","BentoTypographyModifier","BentoTypographyModifier2","BentoTypographyElement","BentoTypographyElement2","DEV_ENVIROMENT_NAMES","isDevelopmentEnviroment","printDevelopmentWarning","args","DEPRECATION_STYLES","shownMessages","deprecate","title","deprecationMessage","toBeRemovedInVersion","_sfc_main","defineComponent","value","props","computed"],"mappings":"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"}
@@ -1,6 +1,6 @@
1
1
  import { defineComponent as i, toRefs as m, computed as r } from "vue";
2
- import { A as v, u as b, B as n, a as f } from "./index.651dac2d.js";
3
- import { B as _ } from "./index.546b27ae.js";
2
+ import { A as v, u as b, B as n, a as f } from "./index.10b9618d.js";
3
+ import { B as _ } from "./index.de687404.js";
4
4
  import "./index.4c062058.js";
5
5
  import { n as c } from "./_plugin-vue2_normalizer.71e2aa87.js";
6
6
  import { BentoTag as d } from "../tag.js";
@@ -104,4 +104,4 @@ export {
104
104
  j as B,
105
105
  q as L
106
106
  };
107
- //# sourceMappingURL=listbox-option-tag.720eabb5.js.map
107
+ //# sourceMappingURL=listbox-option-tag.89846151.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"listbox-option-tag.720eabb5.js","sources":["../../src/components/internal/avatar/avatar.vue","../../src/components/internal/listbox/components/listbox-option-tag/listbox-option-tag.vue"],"sourcesContent":["<template>\n <div class=\"b-avatar\" :aria-label=\"computedAriaLabel\">\n <avatar-image\n :src=\"src\"\n :username=\"computedUsername\"\n :variant=\"BentoAvatarImageVariant.SMALL\"\n :color=\"avatarColor\"\n />\n <bento-typography v-if=\"!iconOnly\" class=\"b-avatar__label\" el=\"span\" variant=\"body\">\n {{ username }}\n </bento-typography>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, toRefs } from 'vue';\n import { AvatarImage, BentoAvatarImageColor, BentoAvatarImageVariant } from '@/components/avatar-image';\n import { BentoTypography } from '@/components/typography';\n import { useInitials } from '@/composables';\n\n /**\n * Displays an user profile including an avatar and optionally a label.\n *\n * @example\n * import { BentoUserProfile } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoUserProfile },\n * template: `\n * <bento-user-profile :src=\"userAvatarSrc\" username=\"Jane\" />\n */\n export default defineComponent({\n name: 'bento-avatar',\n components: { AvatarImage, BentoTypography },\n props: {\n /**\n * Displays the user profile without the label.\n */\n iconOnly: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Name of the user that will be used both in the label and to extract initials to display default value.\n * John => J\n * John Smith => JS\n * John Smith Doe => JD\n * John Smith Doe Holly => JH\n */\n username: {\n type: String,\n required: true,\n },\n\n /**\n * Image src to load the profile picture.\n */\n src: {\n type: String,\n default: null,\n },\n },\n\n setup(props) {\n const { username } = toRefs(props);\n\n const computedAriaLabel = computed(() => (props.iconOnly ? props.username : null));\n const computedUsername = computed(() => (!props.src ? props.username : null));\n const initials = useInitials(username);\n\n // Returns the UTF-16 char code\n const charCode = computed(() => (initials.value ? initials.value.charCodeAt(0) - 65 : null));\n\n // Returns a computed color based on the letter passed\n const avatarColor = computed(() => {\n const numberOfAlphabetLetters = 26;\n const numberOfColors = Object.keys(BentoAvatarImageColor).length;\n const rangeStep = numberOfAlphabetLetters / numberOfColors;\n\n if (charCode.value <= rangeStep) {\n return BentoAvatarImageColor.YELLOW;\n }\n if (charCode.value <= rangeStep * 2) {\n return BentoAvatarImageColor.BLUE;\n }\n if (charCode.value <= rangeStep * 3) {\n return BentoAvatarImageColor.GREEN;\n }\n return BentoAvatarImageColor.RED;\n });\n\n return {\n // Enums\n BentoAvatarImageVariant,\n\n // Values\n computedAriaLabel,\n computedUsername,\n avatarColor,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar.scss\" />\n","<template>\n <span class=\"b-listbox-tag-option\">\n <span aria-hidden=\"true\">\n <bento-tag class=\"b-listbox-tag-option__tag\" :label=\"option.value.toString()\" :variant=\"variant\" />\n </span>\n <bento-typography v-if=\"option.label\" el=\"span\" class=\"b-listbox-tag-option__label\">\n {{ option.label }}\n </bento-typography>\n </span>\n</template>\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import type { BentoListboxOptionItem } from '@/types';\n import { BentoTag, BentoTagVariant } from '@/components/tag';\n import { BentoTypography } from '@/components/typography';\n\n /**\n * A Tag Dropdown option item used in the Dropdown and Filter components.\n */\n export default defineComponent({\n name: 'listbox-tag-option',\n components: {\n BentoTag,\n BentoTypography,\n },\n props: {\n /**\n * The option item that contains all the option item's data.\n * @type {BentoListboxOptionItem}\n */\n option: {\n type: Object as PropType<BentoListboxOptionItem>,\n required: true,\n },\n },\n setup(props) {\n const variant = computed(() => props.option.data as BentoTagVariant);\n\n return {\n // Values\n variant,\n };\n },\n });\n</script>\n<style lang=\"scss\" scoped src=\"./listbox-option-tag.scss\" />\n"],"names":["_sfc_main$1","defineComponent","AvatarImage","BentoTypography","props","username","toRefs","computedAriaLabel","computed","computedUsername","initials","useInitials","charCode","avatarColor","rangeStep","BentoAvatarImageColor","BentoAvatarImageVariant","_sfc_main","BentoTag"],"mappings":";;;;;;;AA+BA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,GAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MASA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,KAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAGA,UAAA,EAAA,UAAAC,EAAA,IAAAC,EAAAF,CAAA,GAEAG,IAAAC,EAAA,MAAAJ,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAK,IAAAD,EAAA,MAAAJ,EAAA,MAAA,OAAAA,EAAA,QAAA,GACAM,IAAAC,EAAAN,CAAA,GAGAO,IAAAJ,EAAA,MAAAE,EAAA,QAAAA,EAAA,MAAA,WAAA,CAAA,IAAA,KAAA,IAAA,GAGAG,IAAAL,EAAA,MAAA;AAGA,YAAAM,IAAA,KADA,OAAA,KAAAC,CAAA,EAAA;AAGA,aAAAH,EAAA,SAAAE,IACAC,EAAA,SAEAH,EAAA,SAAAE,IAAA,IACAC,EAAA,OAEAH,EAAA,SAAAE,IAAA,IACAC,EAAA,QAEAA,EAAA;AAAA,IAAA,CAAA;AAGA,WAAA;AAAA;AAAA,MAAA,yBAAAC;AAAA;AAAA,MAEA,mBAAAT;AAAA,MAGA,kBAAAE;AAAA,MACA,aAAAI;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;qBCnFAI,IAAAhB,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAiB;AAAA,IACA,iBAAAf;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAKA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAIA,WAAA;AAAA;AAAA,MAAA,SAFAI,EAAA,MAAAJ,EAAA,OAAA,IAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"listbox-option-tag.89846151.js","sources":["../../src/components/internal/avatar/avatar.vue","../../src/components/internal/listbox/components/listbox-option-tag/listbox-option-tag.vue"],"sourcesContent":["<template>\n <div class=\"b-avatar\" :aria-label=\"computedAriaLabel\">\n <avatar-image\n :src=\"src\"\n :username=\"computedUsername\"\n :variant=\"BentoAvatarImageVariant.SMALL\"\n :color=\"avatarColor\"\n />\n <bento-typography v-if=\"!iconOnly\" class=\"b-avatar__label\" el=\"span\" variant=\"body\">\n {{ username }}\n </bento-typography>\n </div>\n</template>\n\n<script lang=\"ts\">\n import { computed, defineComponent, toRefs } from 'vue';\n import { AvatarImage, BentoAvatarImageColor, BentoAvatarImageVariant } from '@/components/avatar-image';\n import { BentoTypography } from '@/components/typography';\n import { useInitials } from '@/composables';\n\n /**\n * Displays an user profile including an avatar and optionally a label.\n *\n * @example\n * import { BentoUserProfile } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoUserProfile },\n * template: `\n * <bento-user-profile :src=\"userAvatarSrc\" username=\"Jane\" />\n */\n export default defineComponent({\n name: 'bento-avatar',\n components: { AvatarImage, BentoTypography },\n props: {\n /**\n * Displays the user profile without the label.\n */\n iconOnly: {\n type: Boolean,\n default: false,\n },\n\n /**\n * Name of the user that will be used both in the label and to extract initials to display default value.\n * John => J\n * John Smith => JS\n * John Smith Doe => JD\n * John Smith Doe Holly => JH\n */\n username: {\n type: String,\n required: true,\n },\n\n /**\n * Image src to load the profile picture.\n */\n src: {\n type: String,\n default: null,\n },\n },\n\n setup(props) {\n const { username } = toRefs(props);\n\n const computedAriaLabel = computed(() => (props.iconOnly ? props.username : null));\n const computedUsername = computed(() => (!props.src ? props.username : null));\n const initials = useInitials(username);\n\n // Returns the UTF-16 char code\n const charCode = computed(() => (initials.value ? initials.value.charCodeAt(0) - 65 : null));\n\n // Returns a computed color based on the letter passed\n const avatarColor = computed(() => {\n const numberOfAlphabetLetters = 26;\n const numberOfColors = Object.keys(BentoAvatarImageColor).length;\n const rangeStep = numberOfAlphabetLetters / numberOfColors;\n\n if (charCode.value <= rangeStep) {\n return BentoAvatarImageColor.YELLOW;\n }\n if (charCode.value <= rangeStep * 2) {\n return BentoAvatarImageColor.BLUE;\n }\n if (charCode.value <= rangeStep * 3) {\n return BentoAvatarImageColor.GREEN;\n }\n return BentoAvatarImageColor.RED;\n });\n\n return {\n // Enums\n BentoAvatarImageVariant,\n\n // Values\n computedAriaLabel,\n computedUsername,\n avatarColor,\n };\n },\n });\n</script>\n\n<style lang=\"scss\" scoped src=\"./avatar.scss\" />\n","<template>\n <span class=\"b-listbox-tag-option\">\n <span aria-hidden=\"true\">\n <bento-tag class=\"b-listbox-tag-option__tag\" :label=\"option.value.toString()\" :variant=\"variant\" />\n </span>\n <bento-typography v-if=\"option.label\" el=\"span\" class=\"b-listbox-tag-option__label\">\n {{ option.label }}\n </bento-typography>\n </span>\n</template>\n<script lang=\"ts\">\n import { computed, defineComponent, PropType } from 'vue';\n import type { BentoListboxOptionItem } from '@/types';\n import { BentoTag, BentoTagVariant } from '@/components/tag';\n import { BentoTypography } from '@/components/typography';\n\n /**\n * A Tag Dropdown option item used in the Dropdown and Filter components.\n */\n export default defineComponent({\n name: 'listbox-tag-option',\n components: {\n BentoTag,\n BentoTypography,\n },\n props: {\n /**\n * The option item that contains all the option item's data.\n * @type {BentoListboxOptionItem}\n */\n option: {\n type: Object as PropType<BentoListboxOptionItem>,\n required: true,\n },\n },\n setup(props) {\n const variant = computed(() => props.option.data as BentoTagVariant);\n\n return {\n // Values\n variant,\n };\n },\n });\n</script>\n<style lang=\"scss\" scoped src=\"./listbox-option-tag.scss\" />\n"],"names":["_sfc_main$1","defineComponent","AvatarImage","BentoTypography","props","username","toRefs","computedAriaLabel","computed","computedUsername","initials","useInitials","charCode","avatarColor","rangeStep","BentoAvatarImageColor","BentoAvatarImageVariant","_sfc_main","BentoTag"],"mappings":";;;;;;;AA+BA,MAAAA,IAAAC,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,GAAA,iBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,UAAA;AAAA,MASA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,KAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAGA,UAAA,EAAA,UAAAC,EAAA,IAAAC,EAAAF,CAAA,GAEAG,IAAAC,EAAA,MAAAJ,EAAA,WAAAA,EAAA,WAAA,IAAA,GACAK,IAAAD,EAAA,MAAAJ,EAAA,MAAA,OAAAA,EAAA,QAAA,GACAM,IAAAC,EAAAN,CAAA,GAGAO,IAAAJ,EAAA,MAAAE,EAAA,QAAAA,EAAA,MAAA,WAAA,CAAA,IAAA,KAAA,IAAA,GAGAG,IAAAL,EAAA,MAAA;AAGA,YAAAM,IAAA,KADA,OAAA,KAAAC,CAAA,EAAA;AAGA,aAAAH,EAAA,SAAAE,IACAC,EAAA,SAEAH,EAAA,SAAAE,IAAA,IACAC,EAAA,OAEAH,EAAA,SAAAE,IAAA,IACAC,EAAA,QAEAA,EAAA;AAAA,IAAA,CAAA;AAGA,WAAA;AAAA;AAAA,MAAA,yBAAAC;AAAA;AAAA,MAEA,mBAAAT;AAAA,MAGA,kBAAAE;AAAA,MACA,aAAAI;AAAA,IACA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;qBCnFAI,IAAAhB,EAAA;AAAA,EAAA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAiB;AAAA,IACA,iBAAAf;AAAA,EACA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAKA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAIA,WAAA;AAAA;AAAA,MAAA,SAFAI,EAAA,MAAAJ,EAAA,OAAA,IAAA;AAAA,IAIA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;"}
@@ -1,5 +1,5 @@
1
1
  import { computed as c, ref as L, onMounted as Z, onUnmounted as _e, watch as ee, defineComponent as D, toRef as V } from "vue";
2
- import { B as $ } from "./index.546b27ae.js";
2
+ import { B as $ } from "./index.de687404.js";
3
3
  import { BentoLoadingIndicator as be } from "../loading-indicator.js";
4
4
  import { BentoEmptyState as ve } from "../empty-state.js";
5
5
  import { u as z } from "./i18n.eb5b985b.js";
@@ -7,12 +7,12 @@ import { d as me } from "./debounce.b5ef6acf.js";
7
7
  import { n as N } from "./_plugin-vue2_normalizer.71e2aa87.js";
8
8
  import { C as fe } from "./checkmark.a6ed8f47.js";
9
9
  import { B as k, a as H } from "./keyboard-navigation.ca47dfa8.js";
10
- import { B as X } from "./checkbox.1345941b.js";
10
+ import { B as X } from "./checkbox.c7a74005.js";
11
11
  import "./index.4c062058.js";
12
12
  import { C as ge, a as ye } from "./chevron-up.81185563.js";
13
- import { B as pe } from "./base-button.bf0c938c.js";
13
+ import { B as pe } from "./base-button.3c3d473d.js";
14
14
  import { C as xe } from "./cross-small.e851e0de.js";
15
- import { B as Se, a as J } from "./loading-button.390228ff.js";
15
+ import { B as Se, a as J } from "./loading-button.50dddf2f.js";
16
16
  import { o as Ce } from "./resize.a041304d.js";
17
17
  import "../assets/listbox.css";
18
18
  const te = (t, e, s, l) => {
@@ -1195,4 +1195,4 @@ export {
1195
1195
  i as b,
1196
1196
  ct as u
1197
1197
  };
1198
- //# sourceMappingURL=listbox.dc3d986e.js.map
1198
+ //# sourceMappingURL=listbox.a8180c4a.js.map