@adyen/bento-vue2 1.62.1 → 1.63.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 (145) hide show
  1. package/dist/@types/index.d.ts +181 -235
  2. package/dist/accordion.js +1 -1
  3. package/dist/action-bar.js +1 -1
  4. package/dist/assets/accordion-item.css +1 -1
  5. package/dist/assets/action-bar.css +1 -1
  6. package/dist/assets/base-modal.css +1 -1
  7. package/dist/assets/card.css +1 -1
  8. package/dist/assets/checkbox-input.css +1 -1
  9. package/dist/assets/data-grid.css +1 -1
  10. package/dist/assets/date-range-picker.css +1 -1
  11. package/dist/assets/dialog-page.css +1 -1
  12. package/dist/assets/file-uploader.css +1 -1
  13. package/dist/assets/header-with-views.css +1 -1
  14. package/dist/assets/inspector.css +1 -1
  15. package/dist/assets/listbox-option-tag.css +1 -1
  16. package/dist/assets/menu.css +1 -1
  17. package/dist/assets/modal-fullscreen.css +1 -1
  18. package/dist/assets/popover.css +1 -1
  19. package/dist/assets/sidepanel.css +1 -1
  20. package/dist/assets/use-cached-selected-values.css +1 -1
  21. package/dist/card.js +1 -1
  22. package/dist/checkbox.js +3 -3
  23. package/dist/chunks/{accordion-item.D1t0oHlP.js → accordion-item.BNtdoVto.js} +9 -8
  24. package/dist/chunks/{accordion-item.D1t0oHlP.js.map → accordion-item.BNtdoVto.js.map} +1 -1
  25. package/dist/chunks/{action-bar.whU1em8H.js → action-bar.Dsp7iRxz.js} +2 -2
  26. package/dist/chunks/{action-bar.whU1em8H.js.map → action-bar.Dsp7iRxz.js.map} +1 -1
  27. package/dist/chunks/{button-actions-with-menu.RoaQFPKT.js → button-actions-with-menu.CtW_16tY.js} +2 -2
  28. package/dist/chunks/{button-actions-with-menu.RoaQFPKT.js.map → button-actions-with-menu.CtW_16tY.js.map} +1 -1
  29. package/dist/chunks/{calendar.DoOFNX-Z.js → calendar.DbTC35rM.js} +2 -2
  30. package/dist/chunks/{calendar.DoOFNX-Z.js.map → calendar.DbTC35rM.js.map} +1 -1
  31. package/dist/chunks/card.CypgT0Ji.js +136 -0
  32. package/dist/chunks/card.CypgT0Ji.js.map +1 -0
  33. package/dist/chunks/{checkbox-group.B0IGYf1q.js → checkbox-group.6y92U6AF.js} +2 -2
  34. package/dist/chunks/{checkbox-group.B0IGYf1q.js.map → checkbox-group.6y92U6AF.js.map} +1 -1
  35. package/dist/chunks/checkbox-input.CNWigbX4.js +117 -0
  36. package/dist/chunks/checkbox-input.CNWigbX4.js.map +1 -0
  37. package/dist/chunks/{checkbox.DkCukYh0.js → checkbox.C9nJVvMq.js} +9 -8
  38. package/dist/chunks/{checkbox.DkCukYh0.js.map → checkbox.C9nJVvMq.js.map} +1 -1
  39. package/dist/chunks/chevron-down.eYtgv5ly.js +24 -0
  40. package/dist/chunks/chevron-down.eYtgv5ly.js.map +1 -0
  41. package/dist/chunks/{chevron-left.BS24hEFa.js → chevron-right.C--ZOC9j.js} +5 -5
  42. package/dist/chunks/chevron-right.C--ZOC9j.js.map +1 -0
  43. package/dist/chunks/chevron-up.d8cwIlA_.js +24 -0
  44. package/dist/chunks/chevron-up.d8cwIlA_.js.map +1 -0
  45. package/dist/chunks/{code-snippet.C17bZ5LS.js → code-snippet.CBU8Tlbs.js} +2 -2
  46. package/dist/chunks/{code-snippet.C17bZ5LS.js.map → code-snippet.CBU8Tlbs.js.map} +1 -1
  47. package/dist/chunks/{dashboard-section.BEw-n-XQ.js → dashboard-section.CspNW0CA.js} +3 -3
  48. package/dist/chunks/{dashboard-section.BEw-n-XQ.js.map → dashboard-section.CspNW0CA.js.map} +1 -1
  49. package/dist/chunks/{data-grid-template.DGFmCUII.js → data-grid-template.BhzgqkZp.js} +3 -3
  50. package/dist/chunks/{data-grid-template.DGFmCUII.js.map → data-grid-template.BhzgqkZp.js.map} +1 -1
  51. package/dist/chunks/{data-grid.BFw0RHNG.js → data-grid.BfsBhYpW.js} +451 -452
  52. package/dist/chunks/data-grid.BfsBhYpW.js.map +1 -0
  53. package/dist/chunks/{date-picker.DIegsFDO.js → date-picker.CPQ6WLZE.js} +13 -13
  54. package/dist/chunks/{date-picker.DIegsFDO.js.map → date-picker.CPQ6WLZE.js.map} +1 -1
  55. package/dist/chunks/date-range-picker.CNB28UaM.js +1005 -0
  56. package/dist/chunks/date-range-picker.CNB28UaM.js.map +1 -0
  57. package/dist/chunks/{dropdown-default-textbox.7PMxHqoa.js → dropdown-default-textbox.BNuuA4ES.js} +15 -14
  58. package/dist/chunks/{dropdown-default-textbox.7PMxHqoa.js.map → dropdown-default-textbox.BNuuA4ES.js.map} +1 -1
  59. package/dist/chunks/{dropdown-tag.DopZ3PPD.js → dropdown-tag.DmVsDrL_.js} +3 -3
  60. package/dist/chunks/{dropdown-tag.DopZ3PPD.js.map → dropdown-tag.DmVsDrL_.js.map} +1 -1
  61. package/dist/chunks/{dropdown.4KhU0G3H.js → dropdown.B_PWXFtT.js} +16 -16
  62. package/dist/chunks/{dropdown.4KhU0G3H.js.map → dropdown.B_PWXFtT.js.map} +1 -1
  63. package/dist/chunks/es6.n1ewaW31.js.map +1 -1
  64. package/dist/chunks/{filter-bar.BcQUTqis.js → filter-bar.D6HeYnzZ.js} +15 -14
  65. package/dist/chunks/{filter-bar.BcQUTqis.js.map → filter-bar.D6HeYnzZ.js.map} +1 -1
  66. package/dist/chunks/{fixed-scroller.Ctz5dFqz.js → fixed-scroller.XN-jvWqb.js} +12 -12
  67. package/dist/chunks/fixed-scroller.XN-jvWqb.js.map +1 -0
  68. package/dist/chunks/{header-with-views.DKj9cp5r.js → header-with-views.Dkn8IDew.js} +270 -270
  69. package/dist/chunks/header-with-views.Dkn8IDew.js.map +1 -0
  70. package/dist/chunks/{header.B1PrBQG0.js → header.DNzQO7u-.js} +2 -2
  71. package/dist/chunks/{header.B1PrBQG0.js.map → header.DNzQO7u-.js.map} +1 -1
  72. package/dist/chunks/{input-field-password.D-rEjNIS.js → input-field-password.CY3eRVpe.js} +3 -3
  73. package/dist/chunks/{input-field-password.D-rEjNIS.js.map → input-field-password.CY3eRVpe.js.map} +1 -1
  74. package/dist/chunks/{input-field-phone-number.BXopNol8.js → input-field-phone-number.CN5qZ0VL.js} +3 -3
  75. package/dist/chunks/{input-field-phone-number.BXopNol8.js.map → input-field-phone-number.CN5qZ0VL.js.map} +1 -1
  76. package/dist/chunks/{input-field.cU5zOb6o.js → input-field.DKhsSYF8.js} +2 -2
  77. package/dist/chunks/{input-field.cU5zOb6o.js.map → input-field.DKhsSYF8.js.map} +1 -1
  78. package/dist/chunks/{listbox-option-tag.EzSkn_lM.js → listbox-option-tag.DFmB_TuD.js} +9 -9
  79. package/dist/chunks/listbox-option-tag.DFmB_TuD.js.map +1 -0
  80. package/dist/chunks/menu.W_kuhRKI.js +514 -0
  81. package/dist/chunks/menu.W_kuhRKI.js.map +1 -0
  82. package/dist/chunks/minus-small.DJacLGTw.js +27 -0
  83. package/dist/chunks/minus-small.DJacLGTw.js.map +1 -0
  84. package/dist/chunks/{pagination.K2EzoJKj.js → pagination.DvP8FqiW.js} +2 -2
  85. package/dist/chunks/{pagination.K2EzoJKj.js.map → pagination.DvP8FqiW.js.map} +1 -1
  86. package/dist/chunks/{rich-text-editor.BTJpOiYL.js → rich-text-editor.aSOSl4Rz.js} +2 -2
  87. package/dist/chunks/{rich-text-editor.BTJpOiYL.js.map → rich-text-editor.aSOSl4Rz.js.map} +1 -1
  88. package/dist/chunks/{search-bar.2U9B3XTR.js → search-bar.Sh4A8UId.js} +3 -3
  89. package/dist/chunks/{search-bar.2U9B3XTR.js.map → search-bar.Sh4A8UId.js.map} +1 -1
  90. package/dist/chunks/{secondary-nav.D5bWZz_7.js → secondary-nav.BFtGx_IN.js} +2 -2
  91. package/dist/chunks/{secondary-nav.D5bWZz_7.js.map → secondary-nav.BFtGx_IN.js.map} +1 -1
  92. package/dist/chunks/{selection-card-group.CjFm-cAm.js → selection-card-group.CrWy35QU.js} +2 -2
  93. package/dist/chunks/{selection-card-group.CjFm-cAm.js.map → selection-card-group.CrWy35QU.js.map} +1 -1
  94. package/dist/chunks/{tabs.zkTl2PQR.js → tabs.Dx6teJGW.js} +2 -2
  95. package/dist/chunks/{tabs.zkTl2PQR.js.map → tabs.Dx6teJGW.js.map} +1 -1
  96. package/dist/chunks/{tutorial.C9PYfB4z.js → tutorial.BNZh6N3h.js} +2 -2
  97. package/dist/chunks/{tutorial.C9PYfB4z.js.map → tutorial.BNZh6N3h.js.map} +1 -1
  98. package/dist/chunks/{use-cached-selected-values.DzIppuhI.js → use-cached-selected-values.CDBmVxYM.js} +423 -390
  99. package/dist/chunks/use-cached-selected-values.CDBmVxYM.js.map +1 -0
  100. package/dist/code-snippet.js +1 -1
  101. package/dist/dashboard-template.js +1 -1
  102. package/dist/data-grid-template.js +1 -1
  103. package/dist/data-grid.js +1 -1
  104. package/dist/date-picker.js +2 -2
  105. package/dist/date-range-picker.js +2 -2
  106. package/dist/dropdown.js +4 -4
  107. package/dist/filter-bar.js +1 -1
  108. package/dist/header-with-views.js +1 -1
  109. package/dist/header.js +1 -1
  110. package/dist/index.js +31 -31
  111. package/dist/input-field-password.js +1 -1
  112. package/dist/input-field-phone-number.js +1 -1
  113. package/dist/input-field.js +1 -1
  114. package/dist/internal.js +5 -5
  115. package/dist/menu.js +1 -1
  116. package/dist/pagination.js +1 -1
  117. package/dist/rich-text-editor.js +1 -1
  118. package/dist/search-bar.js +2 -2
  119. package/dist/secondary-nav.js +1 -1
  120. package/dist/selection-card.js +1 -1
  121. package/dist/styles/bento-dark.css +4 -0
  122. package/dist/styles/bento-light.css +4 -0
  123. package/dist/styles/bento.css +4 -0
  124. package/dist/styles/legacy.css +4 -0
  125. package/dist/styles/styleguide.css +4 -0
  126. package/dist/tabs.js +1 -1
  127. package/dist/tutorial.js +1 -1
  128. package/dist/web-types.json +176 -120
  129. package/package.json +7 -7
  130. package/dist/chunks/card.Cu6MicVI.js +0 -123
  131. package/dist/chunks/card.Cu6MicVI.js.map +0 -1
  132. package/dist/chunks/checkbox-input.B-4Rw5mp.js +0 -137
  133. package/dist/chunks/checkbox-input.B-4Rw5mp.js.map +0 -1
  134. package/dist/chunks/chevron-left.BS24hEFa.js.map +0 -1
  135. package/dist/chunks/chevron-up.CHK1E4p9.js +0 -43
  136. package/dist/chunks/chevron-up.CHK1E4p9.js.map +0 -1
  137. package/dist/chunks/data-grid.BFw0RHNG.js.map +0 -1
  138. package/dist/chunks/date-range-picker.bQnZ1R2Q.js +0 -977
  139. package/dist/chunks/date-range-picker.bQnZ1R2Q.js.map +0 -1
  140. package/dist/chunks/fixed-scroller.Ctz5dFqz.js.map +0 -1
  141. package/dist/chunks/header-with-views.DKj9cp5r.js.map +0 -1
  142. package/dist/chunks/listbox-option-tag.EzSkn_lM.js.map +0 -1
  143. package/dist/chunks/menu.CTVbNfuo.js +0 -601
  144. package/dist/chunks/menu.CTVbNfuo.js.map +0 -1
  145. package/dist/chunks/use-cached-selected-values.DzIppuhI.js.map +0 -1
@@ -0,0 +1 @@
1
+ {"version":3,"file":"minus-small.DJacLGTw.js","sources":["../../../core/src/components/internal/checkbox-input/checkbox-input.types.ts","../../../ui-assets/icons-16/dist/vue/minus-small.vue"],"sourcesContent":["export type MultiCheckboxInputType = Array<string | number>;\nexport type CheckboxInputType = boolean | MultiCheckboxInputType;\n\nexport enum CheckboxInputState {\n UNCHECKED = 'unchecked',\n CHECKED = 'checked',\n DISABLED = 'disabled',\n ERROR = 'error',\n READONLY = 'readonly',\n INDETERMINATE = 'indeterminate',\n}\n\nexport enum CheckboxInputEvent {\n UPDATE = 'update:model-value',\n}\n\ninterface CheckboxInputGroupItem {\n value: string | number;\n disabled?: boolean;\n hasError?: boolean;\n errorMessage?: string;\n readonly?: boolean;\n}\n\nexport type CheckboxInputGroupItems = Array<CheckboxInputGroupItem>;\n","\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M4.25 7.25H11.75V8.75H4.25V7.25Z\"/></svg>\n</template>\n<script>\n import '../css/main.css';\n\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n"],"names":["CheckboxInputState","CheckboxInputEvent","uuid","_sfc_main"],"mappings":";;AAGY,IAAAA,sBAAAA,OACRA,EAAA,YAAY,aACZA,EAAA,UAAU,WACVA,EAAA,WAAW,YACXA,EAAA,QAAQ,SACRA,EAAA,WAAW,YACXA,EAAA,gBAAgB,iBANRA,IAAAA,KAAA,CAAA,CAAA,GASAC,sBAAAA,OACRA,EAAA,SAAS,sBADDA,IAAAA,KAAA,CAAA,CAAA;ACLZ,IAAAC,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;"}
@@ -1,6 +1,6 @@
1
1
  import { defineComponent as v, ref as T, computed as _, useSlots as y, useAttrs as B, toRefs as N } from "vue";
2
2
  import { B as d } from "./typography.J1v_SPG3.js";
3
- import { B as L } from "./dropdown.4KhU0G3H.js";
3
+ import { B as L } from "./dropdown.B_PWXFtT.js";
4
4
  import { g as x } from "./generate-uid.NJ8tVoha.js";
5
5
  import { u as f, g as $, a as S } from "./i18n.BQkEbtPM.js";
6
6
  import { n as p } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -335,4 +335,4 @@ const Et = $t.exports;
335
335
  export {
336
336
  Et as B
337
337
  };
338
- //# sourceMappingURL=pagination.K2EzoJKj.js.map
338
+ //# sourceMappingURL=pagination.DvP8FqiW.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"pagination.K2EzoJKj.js","sources":["../../src/components/pagination/components/pagination-results-per-page/pagination-results-per-page.vue","../../src/components/pagination/components/pagination-context/pagination-context.vue","../../../ui-assets/icons-16/dist/vue/skip-left.vue","../../../ui-assets/icons-16/dist/vue/skip-right.vue","../../../ui-assets/icons-16/dist/vue/chevron-left-small.vue","../../../ui-assets/icons-16/dist/vue/chevron-right-small.vue","../../src/components/pagination/components/pagination-controls/pagination-controls.vue","../../src/components/pagination/pagination.vue"],"sourcesContent":["<template>\n <div class=\"b-pagination-results-per-page\">\n <bento-typography el=\"div\">\n <component\n :is=\"i18nComponent\"\n v-bind=\"getI18nProps(translationPathKey)\"\n class=\"b-pagination-results-per-page__dropdown-container\"\n tag=\"div\"\n :plural=\"totalCount\"\n >\n <template #itemCount>\n <bento-dropdown\n :id=\"dropdownId\"\n :aria-label=\"t(translationPathKey, { itemCount: itemsPerPage, totalCount })\"\n class=\"b-pagination-results-per-page__dropdown\"\n condensed\n :items=\"dropdownOptions\"\n :value=\"itemsPerPage\"\n @input=\"onSelectChange\"\n />\n </template>\n <template v-if=\"!!totalCount\" #totalCount>{{ totalCount }}</template>\n </component>\n </bento-typography>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, ref } from 'vue';\n import { BentoTypography } from '@/components/typography';\n import { BentoDropdown } from '@/components/dropdown';\n import { generateUid } from '@/core/utils/ts';\n import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const PREDEFINED_RESULTS_PER_PAGE_VALUES = [\n { label: '10', value: 10 },\n { label: '20', value: 20 },\n { label: '50', value: 50 },\n { label: '75', value: 75 },\n { label: '100', value: 100 },\n ];\n\n const props = defineProps({\n itemsPerPage: { default: 50 },\n totalCount: { default: null }\n});\n\n const emit = defineEmits([\"select\"]);\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const dropdownId = generateUid('b-pagination-context-number-elements');\n const dropdownOptions = ref(PREDEFINED_RESULTS_PER_PAGE_VALUES);\n const i18nComponent = getI18nComponent();\n\n const onSelectChange = (selectedNumberOfResults: number) => {\n emit('select', selectedNumberOfResults);\n };\n\n const translationPathKey = computed(() => (props.totalCount ? 'showingItemsWithTotal' : 'showingItems'));\n</script>\n\n<script lang=\"ts\">\n export default {\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-results-per-page.scss\" />\n","<template>\n <div class=\"b-pagination-context\">\n <bento-typography v-if=\"totalPages > 1\" el=\"div\">\n <component :is=\"i18nComponent\" v-bind=\"getI18nProps('pageNumber')\" tag=\"div\">\n <template #page>\n <bento-dropdown\n :id=\"dropdownId\"\n :aria-label=\"t('pageNumber', { page })\"\n class=\"b-pagination-context__dropdown\"\n condensed\n :items=\"listOfAvailablePages\"\n :value=\"page\"\n :virtual-scroll=\"virtualScroll\"\n @input=\"onPageSelectChange\"\n />\n </template>\n </component>\n </bento-typography>\n <bento-typography v-else-if=\"totalPages === 1\" el=\"span\">\n {{ t('pageOneOfOne') }}\n </bento-typography>\n <bento-typography v-else el=\"span\">\n {{ t('pageNumber', { page }) }}\n </bento-typography>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue';\n import { BentoTypography } from '@/components/typography';\n import { BentoDropdown } from '@/components/dropdown';\n import { BentoListboxOptionItem } from '@/types';\n import { generateUid } from '@/core/utils/ts';\n import messages from './messages.json';\n import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const props = defineProps({\n page: { default: 1 },\n totalPages: { default: null },\n virtualScroll: { type: Boolean, default: false }\n});\n const emit = defineEmits([\"page-selected\"]);\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const dropdownId = generateUid('bento-pagination-context-current-page');\n const onPageSelectChange = (selectedPage: string | number) => emit('page-selected', selectedPage);\n const i18nComponent = getI18nComponent();\n\n // Generate a list of pages from 1 to \"totalPages\"\n const transformIntoOption = (value: number): BentoListboxOptionItem => ({\n label: value.toString(),\n value,\n });\n const transformToPageNumber = (_, index) => index + 1;\n const listOfAvailablePages = computed(() =>\n Array.from(new Array(props.totalPages), transformToPageNumber).map(transformIntoOption)\n );\n</script>\n\n<script lang=\"ts\">\n export default {\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-context.scss\" />\n","\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M9.06055 8.00011L12.0605 5.00011L10.9999 3.93945L6.93923 8.00011L10.9999 12.0608L12.0605 11.0001L9.06055 8.00011Z\"/><path fill=\"#001222\" d=\"M4.25 4.25L4.25 11.75H5.75L5.75 4.25L4.25 4.25Z\"/></svg>\n</template>\n<script>\n import '../css/main.css';\n\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n","\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M6.93945 7.99962L3.93945 10.9996L5.00011 12.0603L9.06077 7.99963L5.00011 3.93896L3.93945 4.99963L6.93945 7.99962Z\"/><path fill=\"#001222\" d=\"M11.75 11.7497V4.24974L10.25 4.24974V11.7497H11.75Z\"/></svg>\n</template>\n<script>\n import '../css/main.css';\n\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n","\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M10.5608 5.00011L7.56077 8.00011L10.5608 11.0001L9.50011 12.0608L5.43945 8.00011L9.50011 3.93945L10.5608 5.00011Z\"/></svg>\n</template>\n<script>\n import '../css/main.css';\n\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n","\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M5.43924 10.9999L8.43924 7.99989L5.43924 4.99989L6.4999 3.93923L10.5606 7.99989L6.4999 12.0605L5.43924 10.9999Z\"/></svg>\n</template>\n<script>\n import '../css/main.css';\n\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n","<template>\n <ul class=\"b-pagination-controls\">\n <li class=\"b-pagination-controls__item\">\n <!-- Navigate to the first page -->\n <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(1)\">\n <template #iconLeft>\n <skip-left :svg-title=\"t('navigateToTheFirstPage')\" />\n </template>\n </bento-button>\n </li>\n <li class=\"b-pagination-controls__item\">\n <!-- Navigate to the previous page -->\n <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(page - 1)\">\n <template #iconLeft>\n <chevron-left :svg-title=\"t('navigateToThePreviousPage')\" />\n </template>\n </bento-button>\n </li>\n <li class=\"b-pagination-controls__item\">\n <!-- Navigate to the next page -->\n <bento-button :disabled=\"isNextButtonDisabled\" variant=\"tertiary\" condensed @click=\"navigate(page + 1)\">\n <template #iconLeft>\n <chevron-right :svg-title=\"t('navigateToTheNextPage')\" />\n </template>\n </bento-button>\n </li>\n <li class=\"b-pagination-controls__item\">\n <!-- Navigate to the last page -->\n <bento-button\n :disabled=\"isLastPageButtonDisabled\"\n variant=\"tertiary\"\n condensed\n @click=\"navigate(totalPages)\"\n >\n <template #iconLeft>\n <skip-right :svg-title=\"t('navigateToTheLastPage')\" />\n </template>\n </bento-button>\n </li>\n </ul>\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue';\n import { BentoButton } from '@/components/button';\n import { useI18n } from '@/utils/ts/i18n';\n import SkipLeft from '@adyen/ui-assets-icons-16/vue/skip-left';\n import SkipRight from '@adyen/ui-assets-icons-16/vue/skip-right';\n import ChevronLeft from '@adyen/ui-assets-icons-16/vue/chevron-left-small';\n import ChevronRight from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const props = defineProps({\n hasNext: { type: Boolean, default: null },\n page: null,\n totalPages: { default: null }\n});\n\n const emit = defineEmits([\"navigate\"]);\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const isCurrentPageFirst = computed(() => props.page === 1);\n const isCurrentPageLast = computed(() => props.page === props.totalPages);\n const isNextButtonDisabled = computed(() => {\n const hasNoNextPage = !props.hasNext;\n return hasNoNextPage || isCurrentPageLast.value;\n });\n const isLastPageButtonDisabled = computed(() => {\n const hasNoNextPage = !props.hasNext;\n const hasNoTotalPagesNumber = !props.totalPages;\n\n return hasNoNextPage || isCurrentPageLast.value || hasNoTotalPagesNumber;\n });\n\n const navigate = (pageArg: number) => {\n emit('navigate', pageArg);\n };\n</script>\n\n<script lang=\"ts\">\n export default {\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-controls.scss\" />\n","<template>\n <div class=\"b-pagination\">\n <nav :aria-label=\"computedAriaLabel\" class=\"b-pagination__navigation\" :class=\"navigationConditionalClasses()\">\n <bento-pagination-results-per-page\n v-if=\"!hidePageSize\"\n class=\"b-pagination__results-per-page\"\n :items-per-page=\"size\"\n :total-count=\"totalCount\"\n @select=\"onItemsPerPageChange\"\n />\n <bento-typography v-else-if=\"hasSlot('default')\"><slot /></bento-typography>\n\n <div class=\"b-pagination__page-navigator\">\n <bento-pagination-context\n class=\"b-pagination__context\"\n :total-pages=\"totalPages\"\n :page=\"page\"\n :total-count=\"totalCount\"\n :virtual-scroll=\"virtualScroll\"\n @page-selected=\"onPageSelected\"\n />\n\n <div class=\"b-pagination__divider\"></div>\n\n <bento-pagination-controls\n class=\"b-pagination__controls\"\n :has-next=\"hasNext\"\n :page=\"page\"\n :total-pages=\"totalPages\"\n @navigate=\"navigate\"\n />\n </div>\n </nav>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, ref, toRefs, useAttrs, useSlots } from 'vue';\n import { BentoTypography } from '@/components/typography';\n import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue';\n import BentoPaginationContext from './components/pagination-context/pagination-context.vue';\n import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n import { useHasSlot } from '@/composables';\n import type { BentoPaginationProps } from './pagination.types';\n\n const props = defineProps({\n ariaLabel: { default: null },\n hasNext: { type: Boolean, default: null },\n hidePageSize: { type: Boolean, default: false },\n page: { default: 1 },\n size: { default: 20 },\n totalCount: { default: null },\n virtualScroll: { type: Boolean, default: false }\n});\n\n const emit = defineEmits([\"navigate\", \"items-page\", \"update:page\", \"update:size\"]);\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const attrs = useAttrs();\n const ariaLabelAttribute = ref(attrs['aria-label']);\n const { ariaLabel } = toRefs(props);\n const computedAriaLabel = useAriaLabel({\n ariaLabel: ariaLabelAttribute.value as string,\n // TODO: take this line away when the aria-label props is removed\n label: ariaLabel,\n });\n\n const totalPages = computed(() =>\n !props.totalCount || !props.size ? null : Math.ceil(props.totalCount / props.size)\n );\n\n const navigate = (pageArg: number, itemsPerPage?: number) => {\n if (props.hidePageSize) {\n emit('navigate', pageArg);\n } else {\n emit('navigate', pageArg, itemsPerPage ?? props?.size);\n }\n emit('update:page', pageArg);\n };\n\n const onPageSelected = (pageNumber: number) => {\n navigate(pageNumber);\n };\n\n const onItemsPerPageChange = (elements: number) => {\n emit('items-page', elements);\n emit('update:size', elements);\n\n // Always go to first page when the\n // number of items page changes\n navigate(1, elements);\n };\n\n const navigationConditionalClasses = () => ({\n 'b-pagination__navigation--only-page-navigator': !hasSlot('default') && props.hidePageSize,\n });\n</script>\n\n<script lang=\"ts\">\n /**\n * Paginiation component to help users page through data sets.\n *\n * There are two ways of doing navigation in this component:\n * 1. (Basic) You tell the component if there is a next page (hasNext)\n * 2. (Enhanced) You tell the component:\n * - How many total items exist (totalCount)\n * - The max number of items that you show/fetch per page (size)\n * - In this case you should not set the hasNext props\n *\n * If you have the data available and opt to use the Enhanced way you get extra controls:\n * - Page dropdown selector\n * - Last page button\n * - \"Showing 10 of 200 items\" text\n *\n * @usage\n * import { BentoPagination } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoPagination },\n * template: `\n * <bento-pagination :has-next=\"isNextPage\" />\n * `,\n * }\n */\n\n export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination.scss\" />\n"],"names":["__default__$3","messages$2","PREDEFINED_RESULTS_PER_PAGE_VALUES","t","useI18n","dropdownId","generateUid","dropdownOptions","ref","i18nComponent","getI18nComponent","onSelectChange","selectedNumberOfResults","emit","translationPathKey","computed","props","__default__$2","messages$1","onPageSelectChange","selectedPage","transformIntoOption","value","transformToPageNumber","_","index","listOfAvailablePages","uuid$3","_sfc_main$5","uuid$2","_sfc_main$4","uuid$1","_sfc_main$3","uuid","_sfc_main$2","__default__$1","messages","isCurrentPageFirst","isCurrentPageLast","isNextButtonDisabled","isLastPageButtonDisabled","hasNoNextPage","hasNoTotalPagesNumber","pageArg","__default__","slots","useSlots","hasSlot","useHasSlot","attrs","useAttrs","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","totalPages","navigate","itemsPerPage","pageNumber","elements"],"mappings":"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"}
1
+ {"version":3,"file":"pagination.DvP8FqiW.js","sources":["../../src/components/pagination/components/pagination-results-per-page/pagination-results-per-page.vue","../../src/components/pagination/components/pagination-context/pagination-context.vue","../../../ui-assets/icons-16/dist/vue/skip-left.vue","../../../ui-assets/icons-16/dist/vue/skip-right.vue","../../../ui-assets/icons-16/dist/vue/chevron-left-small.vue","../../../ui-assets/icons-16/dist/vue/chevron-right-small.vue","../../src/components/pagination/components/pagination-controls/pagination-controls.vue","../../src/components/pagination/pagination.vue"],"sourcesContent":["<template>\n <div class=\"b-pagination-results-per-page\">\n <bento-typography el=\"div\">\n <component\n :is=\"i18nComponent\"\n v-bind=\"getI18nProps(translationPathKey)\"\n class=\"b-pagination-results-per-page__dropdown-container\"\n tag=\"div\"\n :plural=\"totalCount\"\n >\n <template #itemCount>\n <bento-dropdown\n :id=\"dropdownId\"\n :aria-label=\"t(translationPathKey, { itemCount: itemsPerPage, totalCount })\"\n class=\"b-pagination-results-per-page__dropdown\"\n condensed\n :items=\"dropdownOptions\"\n :value=\"itemsPerPage\"\n @input=\"onSelectChange\"\n />\n </template>\n <template v-if=\"!!totalCount\" #totalCount>{{ totalCount }}</template>\n </component>\n </bento-typography>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, ref } from 'vue';\n import { BentoTypography } from '@/components/typography';\n import { BentoDropdown } from '@/components/dropdown';\n import { generateUid } from '@/core/utils/ts';\n import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const PREDEFINED_RESULTS_PER_PAGE_VALUES = [\n { label: '10', value: 10 },\n { label: '20', value: 20 },\n { label: '50', value: 50 },\n { label: '75', value: 75 },\n { label: '100', value: 100 },\n ];\n\n const props = defineProps({\n itemsPerPage: { default: 50 },\n totalCount: { default: null }\n});\n\n const emit = defineEmits([\"select\"]);\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const dropdownId = generateUid('b-pagination-context-number-elements');\n const dropdownOptions = ref(PREDEFINED_RESULTS_PER_PAGE_VALUES);\n const i18nComponent = getI18nComponent();\n\n const onSelectChange = (selectedNumberOfResults: number) => {\n emit('select', selectedNumberOfResults);\n };\n\n const translationPathKey = computed(() => (props.totalCount ? 'showingItemsWithTotal' : 'showingItems'));\n</script>\n\n<script lang=\"ts\">\n export default {\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-results-per-page.scss\" />\n","<template>\n <div class=\"b-pagination-context\">\n <bento-typography v-if=\"totalPages > 1\" el=\"div\">\n <component :is=\"i18nComponent\" v-bind=\"getI18nProps('pageNumber')\" tag=\"div\">\n <template #page>\n <bento-dropdown\n :id=\"dropdownId\"\n :aria-label=\"t('pageNumber', { page })\"\n class=\"b-pagination-context__dropdown\"\n condensed\n :items=\"listOfAvailablePages\"\n :value=\"page\"\n :virtual-scroll=\"virtualScroll\"\n @input=\"onPageSelectChange\"\n />\n </template>\n </component>\n </bento-typography>\n <bento-typography v-else-if=\"totalPages === 1\" el=\"span\">\n {{ t('pageOneOfOne') }}\n </bento-typography>\n <bento-typography v-else el=\"span\">\n {{ t('pageNumber', { page }) }}\n </bento-typography>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue';\n import { BentoTypography } from '@/components/typography';\n import { BentoDropdown } from '@/components/dropdown';\n import { BentoListboxOptionItem } from '@/types';\n import { generateUid } from '@/core/utils/ts';\n import messages from './messages.json';\n import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const props = defineProps({\n page: { default: 1 },\n totalPages: { default: null },\n virtualScroll: { type: Boolean, default: false }\n});\n const emit = defineEmits([\"page-selected\"]);\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n const dropdownId = generateUid('bento-pagination-context-current-page');\n const onPageSelectChange = (selectedPage: string | number) => emit('page-selected', selectedPage);\n const i18nComponent = getI18nComponent();\n\n // Generate a list of pages from 1 to \"totalPages\"\n const transformIntoOption = (value: number): BentoListboxOptionItem => ({\n label: value.toString(),\n value,\n });\n const transformToPageNumber = (_, index) => index + 1;\n const listOfAvailablePages = computed(() =>\n Array.from(new Array(props.totalPages), transformToPageNumber).map(transformIntoOption)\n );\n</script>\n\n<script lang=\"ts\">\n export default {\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-context.scss\" />\n","\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M9.06055 8.00011L12.0605 5.00011L10.9999 3.93945L6.93923 8.00011L10.9999 12.0608L12.0605 11.0001L9.06055 8.00011Z\"/><path fill=\"#001222\" d=\"M4.25 4.25L4.25 11.75H5.75L5.75 4.25L4.25 4.25Z\"/></svg>\n</template>\n<script>\n import '../css/main.css';\n\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n","\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M6.93945 7.99962L3.93945 10.9996L5.00011 12.0603L9.06077 7.99963L5.00011 3.93896L3.93945 4.99963L6.93945 7.99962Z\"/><path fill=\"#001222\" d=\"M11.75 11.7497V4.24974L10.25 4.24974V11.7497H11.75Z\"/></svg>\n</template>\n<script>\n import '../css/main.css';\n\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n","\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M10.5608 5.00011L7.56077 8.00011L10.5608 11.0001L9.50011 12.0608L5.43945 8.00011L9.50011 3.93945L10.5608 5.00011Z\"/></svg>\n</template>\n<script>\n import '../css/main.css';\n\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n","\n<template>\n <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M5.43924 10.9999L8.43924 7.99989L5.43924 4.99989L6.4999 3.93923L10.5606 7.99989L6.4999 12.0605L5.43924 10.9999Z\"/></svg>\n</template>\n<script>\n import '../css/main.css';\n\n let uuid = 0;\n\n export default {\n beforeCreate() {\n this.uuid = uuid.toString();\n uuid += 1;\n },\n };\n</script>\n","<template>\n <ul class=\"b-pagination-controls\">\n <li class=\"b-pagination-controls__item\">\n <!-- Navigate to the first page -->\n <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(1)\">\n <template #iconLeft>\n <skip-left :svg-title=\"t('navigateToTheFirstPage')\" />\n </template>\n </bento-button>\n </li>\n <li class=\"b-pagination-controls__item\">\n <!-- Navigate to the previous page -->\n <bento-button :disabled=\"isCurrentPageFirst\" variant=\"tertiary\" condensed @click=\"navigate(page - 1)\">\n <template #iconLeft>\n <chevron-left :svg-title=\"t('navigateToThePreviousPage')\" />\n </template>\n </bento-button>\n </li>\n <li class=\"b-pagination-controls__item\">\n <!-- Navigate to the next page -->\n <bento-button :disabled=\"isNextButtonDisabled\" variant=\"tertiary\" condensed @click=\"navigate(page + 1)\">\n <template #iconLeft>\n <chevron-right :svg-title=\"t('navigateToTheNextPage')\" />\n </template>\n </bento-button>\n </li>\n <li class=\"b-pagination-controls__item\">\n <!-- Navigate to the last page -->\n <bento-button\n :disabled=\"isLastPageButtonDisabled\"\n variant=\"tertiary\"\n condensed\n @click=\"navigate(totalPages)\"\n >\n <template #iconLeft>\n <skip-right :svg-title=\"t('navigateToTheLastPage')\" />\n </template>\n </bento-button>\n </li>\n </ul>\n</template>\n\n<script setup lang=\"ts\">\n import { computed } from 'vue';\n import { BentoButton } from '@/components/button';\n import { useI18n } from '@/utils/ts/i18n';\n import SkipLeft from '@adyen/ui-assets-icons-16/vue/skip-left';\n import SkipRight from '@adyen/ui-assets-icons-16/vue/skip-right';\n import ChevronLeft from '@adyen/ui-assets-icons-16/vue/chevron-left-small';\n import ChevronRight from '@adyen/ui-assets-icons-16/vue/chevron-right-small';\n\n import messages from './messages.json';\n\n type MessageSchema = (typeof messages)['en-US'];\n\n const props = defineProps({\n hasNext: { type: Boolean, default: null },\n page: null,\n totalPages: { default: null }\n});\n\n const emit = defineEmits([\"navigate\"]);\n\n const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n const isCurrentPageFirst = computed(() => props.page === 1);\n const isCurrentPageLast = computed(() => props.page === props.totalPages);\n const isNextButtonDisabled = computed(() => {\n const hasNoNextPage = !props.hasNext;\n return hasNoNextPage || isCurrentPageLast.value;\n });\n const isLastPageButtonDisabled = computed(() => {\n const hasNoNextPage = !props.hasNext;\n const hasNoTotalPagesNumber = !props.totalPages;\n\n return hasNoNextPage || isCurrentPageLast.value || hasNoTotalPagesNumber;\n });\n\n const navigate = (pageArg: number) => {\n emit('navigate', pageArg);\n };\n</script>\n\n<script lang=\"ts\">\n export default {\n i18n: { messages },\n };\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination-controls.scss\" />\n","<template>\n <div class=\"b-pagination\">\n <nav :aria-label=\"computedAriaLabel\" class=\"b-pagination__navigation\" :class=\"navigationConditionalClasses()\">\n <bento-pagination-results-per-page\n v-if=\"!hidePageSize\"\n class=\"b-pagination__results-per-page\"\n :items-per-page=\"size\"\n :total-count=\"totalCount\"\n @select=\"onItemsPerPageChange\"\n />\n <bento-typography v-else-if=\"hasSlot('default')\"><slot /></bento-typography>\n\n <div class=\"b-pagination__page-navigator\">\n <bento-pagination-context\n class=\"b-pagination__context\"\n :total-pages=\"totalPages\"\n :page=\"page\"\n :total-count=\"totalCount\"\n :virtual-scroll=\"virtualScroll\"\n @page-selected=\"onPageSelected\"\n />\n\n <div class=\"b-pagination__divider\"></div>\n\n <bento-pagination-controls\n class=\"b-pagination__controls\"\n :has-next=\"hasNext\"\n :page=\"page\"\n :total-pages=\"totalPages\"\n @navigate=\"navigate\"\n />\n </div>\n </nav>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, ref, toRefs, useAttrs, useSlots } from 'vue';\n import { BentoTypography } from '@/components/typography';\n import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue';\n import BentoPaginationContext from './components/pagination-context/pagination-context.vue';\n import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue';\n import { useAriaLabel } from '@/utils/ts/aria-label';\n import { useHasSlot } from '@/composables';\n import type { BentoPaginationProps } from './pagination.types';\n\n const props = defineProps({\n ariaLabel: { default: null },\n hasNext: { type: Boolean, default: null },\n hidePageSize: { type: Boolean, default: false },\n page: { default: 1 },\n size: { default: 20 },\n totalCount: { default: null },\n virtualScroll: { type: Boolean, default: false }\n});\n\n const emit = defineEmits([\"navigate\", \"items-page\", \"update:page\", \"update:size\"]);\n\n const slots = useSlots();\n const hasSlot = useHasSlot(slots);\n\n const attrs = useAttrs();\n const ariaLabelAttribute = ref(attrs['aria-label']);\n const { ariaLabel } = toRefs(props);\n const computedAriaLabel = useAriaLabel({\n ariaLabel: ariaLabelAttribute.value as string,\n // TODO: take this line away when the aria-label props is removed\n label: ariaLabel,\n });\n\n const totalPages = computed(() =>\n !props.totalCount || !props.size ? null : Math.ceil(props.totalCount / props.size)\n );\n\n const navigate = (pageArg: number, itemsPerPage?: number) => {\n if (props.hidePageSize) {\n emit('navigate', pageArg);\n } else {\n emit('navigate', pageArg, itemsPerPage ?? props?.size);\n }\n emit('update:page', pageArg);\n };\n\n const onPageSelected = (pageNumber: number) => {\n navigate(pageNumber);\n };\n\n const onItemsPerPageChange = (elements: number) => {\n emit('items-page', elements);\n emit('update:size', elements);\n\n // Always go to first page when the\n // number of items page changes\n navigate(1, elements);\n };\n\n const navigationConditionalClasses = () => ({\n 'b-pagination__navigation--only-page-navigator': !hasSlot('default') && props.hidePageSize,\n });\n</script>\n\n<script lang=\"ts\">\n /**\n * Paginiation component to help users page through data sets.\n *\n * There are two ways of doing navigation in this component:\n * 1. (Basic) You tell the component if there is a next page (hasNext)\n * 2. (Enhanced) You tell the component:\n * - How many total items exist (totalCount)\n * - The max number of items that you show/fetch per page (size)\n * - In this case you should not set the hasNext props\n *\n * If you have the data available and opt to use the Enhanced way you get extra controls:\n * - Page dropdown selector\n * - Last page button\n * - \"Showing 10 of 200 items\" text\n *\n * @usage\n * import { BentoPagination } from '@adyen/bento-vue2';\n *\n * export default {\n * components: { BentoPagination },\n * template: `\n * <bento-pagination :has-next=\"isNextPage\" />\n * `,\n * }\n */\n\n export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./pagination.scss\" />\n"],"names":["__default__$3","messages$2","PREDEFINED_RESULTS_PER_PAGE_VALUES","t","useI18n","dropdownId","generateUid","dropdownOptions","ref","i18nComponent","getI18nComponent","onSelectChange","selectedNumberOfResults","emit","translationPathKey","computed","props","__default__$2","messages$1","onPageSelectChange","selectedPage","transformIntoOption","value","transformToPageNumber","_","index","listOfAvailablePages","uuid$3","_sfc_main$5","uuid$2","_sfc_main$4","uuid$1","_sfc_main$3","uuid","_sfc_main$2","__default__$1","messages","isCurrentPageFirst","isCurrentPageLast","isNextButtonDisabled","isLastPageButtonDisabled","hasNoNextPage","hasNoTotalPagesNumber","pageArg","__default__","slots","useSlots","hasSlot","useHasSlot","attrs","useAttrs","ariaLabelAttribute","ariaLabel","toRefs","computedAriaLabel","useAriaLabel","totalPages","navigate","itemsPerPage","pageNumber","elements"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkEIA,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;iBA9BAC,IAAA;AAAA,MAA2C,EAAA,OAAA,MAAA,OAAA,GAAA;AAAA,MACd,EAAA,OAAA,MAAA,OAAA,GAAA;AAAA,MACA,EAAA,OAAA,MAAA,OAAA,GAAA;AAAA,MACA,EAAA,OAAA,MAAA,OAAA,GAAA;AAAA,MACA,EAAA,OAAA,OAAA,OAAA,IAAA;AAAA,IACE,GAU/B,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,sCAAA,GACAC,IAAAC,EAAAN,CAAA,GACAO,IAAAC,EAAA,GAEAC,IAAA,CAAAC,MAAA;AACI,MAAAC,EAAA,UAAAD,CAAA;AAAA,IAAsC,GAG1CE,IAAAC,EAAA,MAAAC,EAAA,aAAA,0BAAA,cAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCAAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;iBAnBA,EAAA,GAAAf,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,uCAAA,GACAa,IAAA,CAAAC,MAAAP,EAAA,iBAAAO,CAAA,GACAX,IAAAC,EAAA,GAGAW,IAAA,CAAAC,OAAA;AAAA,MAAwE,OAAAA,EAAA,SAAA;AAAA,MAC9C,OAAAA;AAAA,IACtB,IAEJC,IAAA,CAAAC,GAAAC,MAAAA,IAAA,GACAC,IAAAX;AAAA,MAA6B,MAAA,MAAA,KAAA,IAAA,MAAAC,EAAA,UAAA,GAAAO,CAAA,EAAA,IAAAF,CAAA;AAAA,IAC6D;;;;;;;;;;;;;;;;;;AClD9F,IAAAM,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;ACPA,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;ACPA,IAAAE,IAAA;AAEA,MAAAC,KAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;ACPA,IAAAE,IAAA;AAEA,MAAAC,KAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCsEIE,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,GAAA;AAEf;;;;;;;;;;iBAvBA,EAAA,GAAAjC,EAAA,IAAAC,EAAA,GAEAiC,IAAAtB,EAAA,MAAAC,EAAA,SAAA,CAAA,GACAsB,IAAAvB,EAAA,MAAAC,EAAA,SAAAA,EAAA,UAAA,GACAuB,IAAAxB,EAAA,MACI,CAAAC,EAAA,WACAsB,EAAA,KAA0C,GAE9CE,IAAAzB,EAAA,MAAA;AACI,YAAA0B,IAAA,CAAAzB,EAAA,SACA0B,IAAA,CAAA1B,EAAA;AAEA,aAAAyB,KAAAH,EAAA,SAAAI;AAAA,IAAmD,CAAA;8JAGvD,CAAAC,MAAA;AACI,MAAA9B,EAAA,YAAA8B,CAAA;AAAA,IAAwB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBCiD5BC,KAAA,CAAA;;;;;;;;;;;;;;iBAtEAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,GACAC,IAAA3C,EAAAyC,EAAA,YAAA,CAAA,GACA,EAAA,WAAAG,EAAA,IAAAC,EAAArC,CAAA,GACAsC,IAAAC,EAAA;AAAA,MAAuC,WAAAJ,EAAA;AAAA;AAAA,MACL,OAAAC;AAAA,IAEvB,CAAA,GAGXI,IAAAzC;AAAA,MAAmB,MAAA,CAAAC,EAAA,cAAA,CAAAA,EAAA,OAAA,OAAA,KAAA,KAAAA,EAAA,aAAAA,EAAA,IAAA;AAAA,IACkE,GAGrFyC,IAAA,CAAAd,GAAAe,MAAA;AACI,MAAA1C,EAAA,eACIH,EAAA,YAAA8B,CAAA,IAEA9B,EAAA,YAAA8B,GAAAe,MAAA1C,KAAA,gBAAAA,EAAA,KAAA,GAEJH,EAAA,eAAA8B,CAAA;AAAA,IAA2B;kLAG/B,CAAAgB,MAAA;AACI,MAAAF,EAAAE,CAAA;AAAA,IAAmB,yBAGvB,CAAAC,MAAA;AACI,MAAA/C,EAAA,cAAA+C,CAAA,GACA/C,EAAA,eAAA+C,CAAA,GAIAH,EAAA,GAAAG,CAAA;AAAA,IAAoB,iCAGxB,OAAA;AAAA,MAA4C,iDAAA,CAAAb,EAAA,SAAA,KAAA/B,EAAA;AAAA,IACsC;;;;;;;;;;;;;;;"}
@@ -5,7 +5,7 @@ import { B as tr } from "./alert.c1rhDDrU.js";
5
5
  import { n as yt } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
6
6
  import "./index.Cl4_42j5.js";
7
7
  import { B as er } from "./link.CXy_LoFI.js";
8
- import { B as nr } from "./checkbox.DkCukYh0.js";
8
+ import { B as nr } from "./checkbox.C9nJVvMq.js";
9
9
  import { u as rr } from "./i18n.BQkEbtPM.js";
10
10
  import { u as ir } from "./aria-label.CaUURpnB.js";
11
11
  import { g as _e } from "./generate-uid.NJ8tVoha.js";
@@ -6200,4 +6200,4 @@ const Do = xo.exports;
6200
6200
  export {
6201
6201
  Do as r
6202
6202
  };
6203
- //# sourceMappingURL=rich-text-editor.BTJpOiYL.js.map
6203
+ //# sourceMappingURL=rich-text-editor.aSOSl4Rz.js.map