@adyen/bento-mcp 0.10.0 → 0.12.0

package/dist/assets/components/pagination/pagination.vue

@@ -1 +1 @@
-<template> <div class="b-pagination"> <nav :aria-label="computedAriaLabel" class="b-pagination__navigation" :class="navigationConditionalClasses()"> <bento-pagination-results-per-page v-if="!hidePageSize" class="b-pagination__results-per-page" :hide-page-size-selection="hidePageSizeSelection" :items-per-page="size" :total-count="totalCount" :page-size-items="pageSizeItems" @select="onItemsPerPageChange" /> <bento-typography v-else-if="hasSlot('default')"><slot /></bento-typography> <div class="b-pagination__page-navigator"> <bento-pagination-context class="b-pagination__context" :total-pages="totalPages" :page="page" :virtual-scroll="virtualScroll" :hide-page-selection="hidePageSelection" @page-selected="onPageSelected" /> <div class="b-pagination__divider"></div> <bento-pagination-controls class="b-pagination__controls" :has-next="hasNext" :hide-first-last-page-buttons="hideFirstLastPageButtons" :page="page" :total-pages="totalPages" @navigate="navigate" /> </div> </nav> </div> </template> <script setup lang="ts"> import { computed, ref, toRefs, useAttrs, useSlots } from 'vue'; import { BentoTypography } from '@/components/typography'; import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue'; import BentoPaginationContext from './components/pagination-context/pagination-context.vue'; import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { useHasSlot } from '@/composables'; import type { BentoPaginationProps } from './pagination.types'; const props = withDefaults(defineProps<BentoPaginationProps>(), { ariaLabel: null, hasNext: null, hideFirstLastPageButtons: false, hidePageSize: false, hidePageSelection: false, hidePageSizeSelection: false, page: 1, pageSizeItems: undefined, size: 20, totalCount: null, virtualScroll: false, }); const emit = defineEmits<{ /** * Triggered when the navigation controls are clicked or the items per page is changed (i.e. when the arrow buttons to the * rightmost of the screen or either dropdown is updated). It indicates to which page it should go next and also the page size. */ (e: 'navigate', page: number, items?: number): void; /** * Triggered when the number of items per page is changed from the left hand dropdown. * It indicates the new number of items that will be displayed. */ (e: 'items-page', size: number): void; /** * Triggered when the navigation controls are clicked, whether the arrow buttons to the * right most of the screen or the dropdown on the right hand is updated. * It indicates to which page it should go next * (easily achieved using the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier)) * e.g. `:page.sync="currentPage"` */ (e: 'update:page', page: number): void; /** * Triggered when the number of items per page is changed from the left hand dropdown. * It indicates the new number of items that will be displayed. * (easily achieved using the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier)) * e.g. `:size.sync="itemsPerPage"` */ (e: 'update:size', size: number): void; }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const attrs = useAttrs(); const ariaLabelAttribute = ref(attrs['aria-label']); const { ariaLabel } = toRefs(props); const computedAriaLabel = useAriaLabel({ ariaLabel: ariaLabelAttribute.value as string, // TODO: take this line away when the aria-label props is removed label: ariaLabel, }); const totalPages = computed(() => !props.totalCount || !props.size ? null : Math.ceil(props.totalCount / props.size) ); const navigate = (pageArg: number, itemsPerPage?: number) => { if (props.hidePageSize) { emit('navigate', pageArg); } else { emit('navigate', pageArg, itemsPerPage ?? props?.size); } emit('update:page', pageArg); }; const onPageSelected = (pageNumber: number) => { navigate(pageNumber); }; const onItemsPerPageChange = (elements: number) => { emit('items-page', elements); emit('update:size', elements); // Always go to first page when the // number of items page changes navigate(1, elements); }; const navigationConditionalClasses = () => ({ 'b-pagination__navigation--only-page-navigator': !hasSlot('default') && props.hidePageSize, }); </script> <script lang="ts"> /** * Paginiation component to help users page through data sets. * * There are two ways of doing navigation in this component: * 1. (Basic) You tell the component if there is a next page (hasNext) * 2. (Enhanced) You tell the component: * - How many total items exist (totalCount) * - The max number of items that you show/fetch per page (size) * - In this case you should not set the hasNext props * * If you have the data available and opt to use the Enhanced way you get extra controls: * - Page dropdown selector * - Last page button * - "Showing 10 of 200 items" text * * @usage * import { BentoPagination } from '@adyen/bento-vue2'; * * export default { * components: { BentoPagination }, * template: ` * <bento-pagination :has-next="isNextPage" /> * `, * } */ export default {}; </script> <style lang="scss" scoped src="./pagination.scss" /> 
+<template> <div class="b-pagination"> <nav :aria-label="$attrs['aria-label']" class="b-pagination__navigation" :class="navigationConditionalClasses()" > <bento-pagination-results-per-page v-if="!hidePageSize" class="b-pagination__results-per-page" :hide-page-size-selection="hidePageSizeSelection" :items-per-page="size" :total-count="totalCount" :page-size-items="pageSizeItems" @select="onItemsPerPageChange" /> <bento-typography v-else-if="hasSlot('default')"><slot /></bento-typography> <div class="b-pagination__page-navigator"> <bento-pagination-context class="b-pagination__context" :total-pages="totalPages" :page="page" :virtual-scroll="virtualScroll" :hide-page-selection="hidePageSelection" @page-selected="onPageSelected" /> <div class="b-pagination__divider"></div> <bento-pagination-controls class="b-pagination__controls" :has-next="hasNext" :hide-first-last-page-buttons="hideFirstLastPageButtons" :page="page" :total-pages="totalPages" @navigate="navigate" /> </div> </nav> </div> </template> <script setup lang="ts"> import { computed, useSlots } from 'vue'; import { BentoTypography } from '@/components/typography'; import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue'; import BentoPaginationContext from './components/pagination-context/pagination-context.vue'; import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue'; import { useHasSlot } from '@/composables'; import type { BentoPaginationProps } from './pagination.types'; const props = withDefaults(defineProps<BentoPaginationProps>(), { hasNext: null, hideFirstLastPageButtons: false, hidePageSize: false, hidePageSelection: false, hidePageSizeSelection: false, page: 1, pageSizeItems: undefined, size: 20, totalCount: null, virtualScroll: false, }); const emit = defineEmits<{ /** * Triggered when the navigation controls are clicked or the items per page is changed (i.e. when the arrow buttons to the * rightmost of the screen or either dropdown is updated). It indicates to which page it should go next and also the page size. */ (e: 'navigate', page: number, items?: number): void; /** * Triggered when the number of items per page is changed from the left hand dropdown. * It indicates the new number of items that will be displayed. */ (e: 'items-page', size: number): void; /** * Triggered when the navigation controls are clicked, whether the arrow buttons to the * right most of the screen or the dropdown on the right hand is updated. * It indicates to which page it should go next * (easily achieved using the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier)) * e.g. `:page.sync="currentPage"` */ (e: 'update:page', page: number): void; /** * Triggered when the number of items per page is changed from the left hand dropdown. * It indicates the new number of items that will be displayed. * (easily achieved using the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier)) * e.g. `:size.sync="itemsPerPage"` */ (e: 'update:size', size: number): void; }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const totalPages = computed(() => !props.totalCount || !props.size ? null : Math.ceil(props.totalCount / props.size) ); const navigate = (pageArg: number, itemsPerPage?: number) => { if (props.hidePageSize) { emit('navigate', pageArg); } else { emit('navigate', pageArg, itemsPerPage ?? props?.size); } emit('update:page', pageArg); }; const onPageSelected = (pageNumber: number) => { navigate(pageNumber); }; const onItemsPerPageChange = (elements: number) => { emit('items-page', elements); emit('update:size', elements); // Always go to first page when the // number of items page changes navigate(1, elements); }; const navigationConditionalClasses = () => ({ 'b-pagination__navigation--only-page-navigator': !hasSlot('default') && props.hidePageSize, }); </script> <script lang="ts"> /** * Paginiation component to help users page through data sets. * * There are two ways of doing navigation in this component: * 1. (Basic) You tell the component if there is a next page (hasNext) * 2. (Enhanced) You tell the component: * - How many total items exist (totalCount) * - The max number of items that you show/fetch per page (size) * - In this case you should not set the hasNext props * * If you have the data available and opt to use the Enhanced way you get extra controls: * - Page dropdown selector * - Last page button * - "Showing 10 of 200 items" text * * @usage * import { BentoPagination } from '@adyen/bento-vue2'; * * export default { * components: { BentoPagination }, * template: ` * <bento-pagination :has-next="isNextPage" /> * `, * } */ export default { name: 'bento-pagination', }; </script> <style lang="scss" scoped src="./pagination.scss" /> 

package/dist/assets/components/payment-method/payment-method.stories.ts

@@ -1 +1 @@
-import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoPaymentMethod from './payment-method.vue'; const meta: Meta = { title: 'Payment method', component: BentoPaymentMethod, }; export default meta; type Story = StoryObj<typeof BentoPaymentMethod>; const defaultCode = ` <bento-payment-method type="ideal" label="iDeal" /> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoPaymentMethod }, props: Object.keys(argTypes), template: ` <bento-payment-method v-bind="args"/> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { type: 'ideal', label: 'iDEAL', }, parameters: storybookDocsParameter(defaultCode), }; 
+import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoPaymentMethod from './payment-method.vue'; const PaymentMethodDefaultExample = "<template>\n <bento-payment-method type=\"ideal\" label=\"iDEAL\" />\n</template>\n\n<script lang=\"ts\" setup>\n import { BentoPaymentMethod } from '@adyen/bento-vue2';\n</script>\n"; const meta: Meta = { title: 'Payment method', component: BentoPaymentMethod, }; export default meta; type Story = StoryObj<typeof BentoPaymentMethod>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoPaymentMethod }, props: Object.keys(argTypes), template: ` <bento-payment-method v-bind="args"/> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { type: 'ideal', label: 'iDEAL', }, parameters: storybookDocsParameter(PaymentMethodDefaultExample), }; 

package/dist/assets/components/payment-method/payment-method.types.ts

@@ -1 +1 @@
-export interface BentoPaymentMethodProps { /** * The label describing to the payment method icon. * @default null */ label?: string; /** * Render payment method icon in a smaller size * @default false */ small?: boolean; /** * The type of payment method to display. * @default 'Unknowncard' */ type?: string; } /** * A collection of all payment method types. * Directly map to payment icon SVG name. * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoPaymentMethodType { CTP = 'ctp', P24_LOGO = 'P24_logo', /** * @deprecated Since v2.0.0. Do not use. */ TOUCH__N_GO = "Touch 'N Go", ABSA = 'absa', ACB = 'acb', ACCEL = 'accel', ACH = 'ach', ACHCOLOMBIA = 'achcolombia', ADYEN = 'adyen', ADYEN_TEST_VOUCHER = 'adyen_test_voucher', AFFIN = 'affin', AFFIRM = 'affirm', AFTERPAY_B2B = 'afterpay_b2b', AFTERPAY_DEFAULT = 'afterpay_default', AFTERPAY_DIRECTDEBIT = 'afterpay_directdebit', AFTERPAYTOUCH = 'afterpaytouch', AFTERPAYTOUCH_POS = 'afterpaytouch_pos', AGRIBANK = 'agribank', AIRBANK = 'airbank', ALASKA_OPTION = 'alaska_option', ALASKAOPTION = 'alaskaoption', ALBELLIGIFTCARD = 'albelligiftcard', ALELO = 'alelo', ALFA_BANK = 'alfa_bank', ALFABANK = 'alfabank', ALFAMART = 'alfamart', ALIPAY = 'alipay', ALIPAY_CONNECT = 'alipay_connect', ALIPAY_HK = 'alipay_hk', ALIPAY_WAP = 'alipay_wap', ALPHA_BANK = 'alpha_bank', AMAZONPAY = 'amazonpay', AMBANK = 'ambank', AMEX = 'amex', AMEX_AMAZONPAY = 'amex_amazonpay', AMEX_APPLEPAY = 'amex_applepay', AMEX_SAMSUNGPAY = 'amex_samsungpay', ANDROIDPAY = 'androidpay', APPLEPAY = 'applepay', ARGENCARD = 'argencard', ASIAPAY = 'asiapay', ASIAPAY_CIMBCLICK = 'asiapay_cimbclick', ASIAPAY_M2U = 'asiapay_m2u', ASIAPAY_ONEPAY = 'asiapay_onepay', ASIAPAY_UNIONPAY = 'asiapay_unionpay', ATH = 'ath', ATM_BERSAMA = 'atm_bersama', ATOME = 'atome', AURA = 'aura', AUTOPAY = 'autopay', B2S = 'b2s', BABYGIFTCARD = 'babygiftcard', /** * @deprecated Since v2.0.0. Use string literal instead. */ BACNET = 'Bacnet', BACS = 'bacs', BALANCEPLATFORM = 'balanceplatform', BALOTO = 'baloto', BANAMEX = 'banamex', BANCONACIONAL = 'bancoNacional', BANCO_BRADESCO = 'banco_bradesco', BANCODOBRASIL = 'bancodobrasil', BANESE = 'banese', BANESE_CARD_CREDIT = 'banese_card_credit', BANESE_CARD_DEBIT = 'banese_card_debit', BANESE_CARD_PREPAID = 'banese_card_prepaid', BANGKOK_BANK = 'bangkok_bank', BANK = 'bank', BANKTRANSFER = 'bankTransfer', BANKTRANSFER_AT = 'bankTransfer_AT', BANKTRANSFER_AU = 'bankTransfer_AU', BANKTRANSFER_BE = 'bankTransfer_BE', BANKTRANSFER_BG = 'bankTransfer_BG', BANKTRANSFER_CH = 'bankTransfer_CH', BANKTRANSFER_CY = 'bankTransfer_CY', BANKTRANSFER_DE = 'bankTransfer_DE', BANKTRANSFER_DK = 'bankTransfer_DK', BANKTRANSFER_ES = 'bankTransfer_ES', BANKTRANSFER_FI = 'bankTransfer_FI', BANKTRANSFER_FR = 'bankTransfer_FR', BANKTRANSFER_GB = 'bankTransfer_GB', BANKTRANSFER_HU = 'bankTransfer_HU', BANKTRANSFER_IBAN = 'bankTransfer_IBAN', BANKTRANSFER_IE = 'bankTransfer_IE', BANKTRANSFER_IT = 'bankTransfer_IT', BANKTRANSFER_LU = 'bankTransfer_LU', BANKTRANSFER_MT = 'bankTransfer_MT', BANKTRANSFER_MX = 'bankTransfer_MX', BANKTRANSFER_NL = 'bankTransfer_NL', BANKTRANSFER_NO = 'bankTransfer_NO', BANKTRANSFER_PL = 'bankTransfer_PL', BANKTRANSFER_PT = 'bankTransfer_PT', BANKTRANSFER_SE = 'bankTransfer_SE', BANKTRANSFER_SK = 'bankTransfer_SK', BANK_RU = 'bank_ru', BANKAXEPT = 'bankaxept', BANKISLAM = 'bankislam', BANORTE = 'banorte', BAPRO = 'bapro', BCA = 'bca', BCMC = 'bcmc', BCMC_MOBILE = 'bcmc_mobile', BCMC_MOBILE_QR = 'bcmc_mobile_QR', BCMC_MOBILE_APP = 'bcmc_mobile_app', BCP = 'bcp', BEAUTYCADEAUKAART = 'beautycadeaukaart', BENEFIT = 'benefit', BIDV = 'bidv', BIGC = 'bigc', BIJCADEAUCARD = 'bijcadeaucard', BIJCARD = 'bijcard', BIJENKORF = 'bijenkorf', BIJPOINTS = 'bijpoints', BIJVOUCHER = 'bijvoucher', BILL99 = 'bill99', BILLDESK_BILLDESK_162 = 'billdesk/billdesk_162', BILLDESK_BILLDESK_CUB = 'billdesk/billdesk_cub', BILLDESK_BILLDESK_HDF = 'billdesk/billdesk_hdf', BILLDESK_BILLDESK_ICI = 'billdesk/billdesk_ici', BILLDESK_BILLDESK_ONLINE = 'billdesk/billdesk_online', BILLDESK_BILLDESK_PNB = 'billdesk/billdesk_pnb', BILLDESK_BILLDESK_SBI = 'billdesk/billdesk_sbi', BILLDESK_BILLDESK_UPI = 'billdesk/billdesk_upi', BILLDESK_BILLDESK_UTI = 'billdesk/billdesk_uti', BILLDESK_BILLDESK_WALLET = 'billdesk/billdesk_wallet', BILLDESK_162 = 'billdesk_162', BILLDESK_CUB = 'billdesk_cub', BILLDESK_HDF = 'billdesk_hdf', BILLDESK_ICI = 'billdesk_ici', BILLDESK_ONLINE = 'billdesk_online', BILLDESK_SBI = 'billdesk_sbi', BILLDESK_UPI = 'billdesk_upi', BILLDESK_UTI = 'billdesk_uti', BILLDESK_WALLET = 'billdesk_wallet', BITCOIN = 'bitcoin', BLIK = 'blik', BLOEMENGIFTCARD = 'bloemengiftcard', BNI = 'bni', BOKU = 'boku', BOLETO = 'boleto', BOLETOBANCARIO = 'boletobancario', BOLETOBANCARIO_BANCODOBRASIL = 'boletobancario_bancodobrasil', BOLETOBANCARIO_BRADESCO = 'boletobancario_bradesco', BOLETOBANCARIO_HSBC = 'boletobancario_hsbc', BOLETOBANCARIO_ITAU = 'boletobancario_itau', BOLETOBANCARIO_SANTANDER = 'boletobancario_santander', BR_SCHEMES = 'br_schemes', BRADESCO = 'bradesco', BUALUANGIBANKING = 'bualuangibanking', BUNQ = 'bunq', C_BEDRIJFSFIETSPLAN = 'c_bedrijfsfietsplan', C_BYPHONE = 'c_byphone', C_CASH = 'c_cash', C_FACTUUR = 'c_factuur', C_INVOICE = 'c_invoice', C_KAUFPERRECHNUNG = 'c_kaufperrechnung', C_OPREKENING = 'c_oprekening', C_POS = 'c_pos', C_VORKASSE = 'c_vorkasse', CABAL = 'cabal', CARD = 'card', CARNET = 'carnet', CARTEBANCAIRE = 'cartebancaire', CASHCOM = 'cashcom', CASHCOMGIFTCARD = 'cashcomgiftcard', CASHTICKET = 'cashticket', CASHU = 'cashu', CB = 'cb', CCAVENUE = 'ccavenue', CELLULANT = 'cellulant', CEN_PAY = 'cen_pay', CENCOSUD = 'cencosud', CENTRAL = 'central', CENTRAL_FOOD_HALL = 'central_food_hall', CESKA = 'ceska', CHEQUEDEJENEUR = 'chequedejeneur', CIMB = 'cimb', CLEARPAY = 'clearpay', CLICKANDBUY = 'clickandbuy', COBROEXPRESS = 'cobroexpress', CODENSA = 'codensa', COSTES = 'costes', COSTESGIFTCARD = 'costesgiftcard', CREDIT_UNION = 'credit_union', CREDTODOS = 'credtodos', CSOB = 'csob', CU24 = 'cu24', CUP = 'cup', CUP_AMAZONPAY = 'cup_amazonpay', DANA = 'dana', DANKORT = 'dankort', DANSKEBANK = 'danskebank', DECADEAUKAART = 'decadeaukaart', DIEAERZTEBANK = 'dieaerztebank', DINEROMAIL = 'dineromail', DINERS = 'diners', DINNER = 'dinner', DIRECTEBANKING = 'directEbanking', DIRECTDEBIT = 'directdebit', DIRECTDEBIT_BR_BANCODOBRASIL = 'directdebit_BR_bancodobrasil', DIRECTDEBIT_BR_ITAU = 'directdebit_BR_itau', DIRECTDEBIT_GB = 'directdebit_GB', DIRECTDEBIT_NL = 'directdebit_NL', DISCOVER = 'discover', DISCOVER_AMAZONPAY = 'discover_amazonpay', DISCOVER_ANDROIDPAY = 'discover_androidpay', DISCOVER_APPLEPAY = 'discover_applepay', DK = 'dk', DOKU = 'doku', DOKU_ALFAMART = 'doku_alfamart', DOKU_BCA_KLIKPAY = 'doku_bca_klikpay', DOKU_BCA_VA = 'doku_bca_va', DOKU_BNI = 'doku_bni', DOKU_BNI_VA = 'doku_bni_va', DOKU_BRI_VA = 'doku_bri_va', DOKU_BRIEPAY = 'doku_briepay', DOKU_CIMB_VA = 'doku_cimb_va', DOKU_DANAMON_VA = 'doku_danamon_va', DOKU_INDOMARET = 'doku_indomaret', DOKU_MANDIRI_CLICKPAY = 'doku_mandiri_clickpay', DOKU_MANDIRI_VA = 'doku_mandiri_va', DOKU_OVO = 'doku_ovo', DOKU_PERMATA_ATM = 'doku_permata_atm', DOKU_PERMATA_LITE_ATM = 'doku_permata_lite_atm', DOKU_SINARMAS_VA = 'doku_sinarmas_va', DOKU_WALLET = 'doku_wallet', DONGABANK = 'dongabank', DOTPAY = 'dotpay', DOTPAY_1 = 'dotpay/1', DOTPAY_10 = 'dotpay/10', DOTPAY_11 = 'dotpay/11', DOTPAY_16 = 'dotpay/16', DOTPAY_2 = 'dotpay/2', DOTPAY_21 = 'dotpay/21', DOTPAY_24 = 'dotpay/24', DOTPAY_31 = 'dotpay/31', DOTPAY_32 = 'dotpay/32', DOTPAY_35 = 'dotpay/35', DOTPAY_36 = 'dotpay/36', DOTPAY_38 = 'dotpay/38', DOTPAY_4 = 'dotpay/4', DOTPAY_44 = 'dotpay/44', DOTPAY_45 = 'dotpay/45', DOTPAY_46 = 'dotpay/46', DOTPAY_48 = 'dotpay/48', DOTPAY_50 = 'dotpay/50', DOTPAY_51 = 'dotpay/51', DOTPAY_52 = 'dotpay/52', DOTPAY_55 = 'dotpay/55', DOTPAY_56 = 'dotpay/56', DOTPAY_58 = 'dotpay/58', DOTPAY_59 = 'dotpay/59', DOTPAY_6 = 'dotpay/6', DOTPAY_60 = 'dotpay/60', DOTPAY_65 = 'dotpay/65', DOTPAY_66 = 'dotpay/66', DOTPAY_68 = 'dotpay/68', DOTPAY_7 = 'dotpay/7', DOTPAY_70 = 'dotpay/70', DOTPAY_72 = 'dotpay/72', DOTPAY_73 = 'dotpay/73', DOTPAY_74 = 'dotpay/74', DOTPAY_75 = 'dotpay/75', DOTPAY_76 = 'dotpay/76', DOTPAY_80 = 'dotpay/80', DOTPAY_81 = 'dotpay/81', DOTPAY_83 = 'dotpay/83', DOTPAY_84 = 'dotpay/84', DOTPAY_87 = 'dotpay/87', DOTPAY_88 = 'dotpay/88', DOTPAY_89 = 'dotpay/89', DOTPAY_90 = 'dotpay/90', DOTPAY_91 = 'dotpay/91', DOTPAY_92 = 'dotpay/92', DOTPAY_93 = 'dotpay/93', DRAGONPAY = 'dragonpay', DRAGONPAY_CREDITS = 'dragonpay_credits', DRAGONPAY_EBANKING = 'dragonpay_ebanking', DRAGONPAY_EBANKING_BDO = 'dragonpay_ebanking/bdo', DRAGONPAY_EBANKING_BOG = 'dragonpay_ebanking/bog', DRAGONPAY_EBANKING_BPI = 'dragonpay_ebanking/bpi', DRAGONPAY_EBANKING_BPIB = 'dragonpay_ebanking/bpib', DRAGONPAY_EBANKING_CBC = 'dragonpay_ebanking/cbc', DRAGONPAY_EBANKING_DPAY = 'dragonpay_ebanking/dpay', DRAGONPAY_EBANKING_LBPA = 'dragonpay_ebanking/lbpa', DRAGONPAY_EBANKING_MBTC = 'dragonpay_ebanking/mbtc', DRAGONPAY_EBANKING_RCBC = 'dragonpay_ebanking/rcbc', DRAGONPAY_EBANKING_UBP = 'dragonpay_ebanking/ubp', DRAGONPAY_EBANKING_UCPB = 'dragonpay_ebanking/ucpb', DRAGONPAY_GCASH = 'dragonpay_gcash', DRAGONPAY_OTC_BANKING = 'dragonpay_otc_banking', DRAGONPAY_OTC_BANKING_BDOA = 'dragonpay_otc_banking/bdoa', DRAGONPAY_OTC_BANKING_BDRX = 'dragonpay_otc_banking/bdrx', DRAGONPAY_OTC_BANKING_BOGX = 'dragonpay_otc_banking/bogx', DRAGONPAY_OTC_BANKING_BPXB = 'dragonpay_otc_banking/bpxb', DRAGONPAY_OTC_BANKING_CBCX = 'dragonpay_otc_banking/cbcx', DRAGONPAY_OTC_BANKING_EWBX = 'dragonpay_otc_banking/ewbx', DRAGONPAY_OTC_BANKING_LBXB = 'dragonpay_otc_banking/lbxb', DRAGONPAY_OTC_BANKING_MBTX = 'dragonpay_otc_banking/mbtx', DRAGONPAY_OTC_BANKING_PNBB = 'dragonpay_otc_banking/pnbb', DRAGONPAY_OTC_BANKING_PNXB = 'dragonpay_otc_banking/pnxb', DRAGONPAY_OTC_BANKING_RCXB = 'dragonpay_otc_banking/rcxb', DRAGONPAY_OTC_BANKING_RSXB = 'dragonpay_otc_banking/rsxb', DRAGONPAY_OTC_BANKING_SBCA = 'dragonpay_otc_banking/sbca', DRAGONPAY_OTC_BANKING_SBCB = 'dragonpay_otc_banking/sbcb', DRAGONPAY_OTC_BANKING_UBXB = 'dragonpay_otc_banking/ubxb', DRAGONPAY_OTC_BANKING_UCXB = 'dragonpay_otc_banking/ucxb', DRAGONPAY_OTC_INTERNATIONAL = 'dragonpay_otc_international', DRAGONPAY_OTC_NON_BANKING = 'dragonpay_otc_non_banking', DRAGONPAY_OTC_NON_BANKING_BAYD = 'dragonpay_otc_non_banking/bayd', DRAGONPAY_OTC_NON_BANKING_CEBL = 'dragonpay_otc_non_banking/cebl', DRAGONPAY_OTC_NON_BANKING_CEBP = 'dragonpay_otc_non_banking/cebp', DRAGONPAY_OTC_NON_BANKING_ECPY = 'dragonpay_otc_non_banking/ecpy', DRAGONPAY_OTC_NON_BANKING_LBC = 'dragonpay_otc_non_banking/lbc', DRAGONPAY_OTC_NON_BANKING_MLH = 'dragonpay_otc_non_banking/mlh', DRAGONPAY_OTC_NON_BANKING_RDS = 'dragonpay_otc_non_banking/rds', DRAGONPAY_OTC_NON_BANKING_RLNT = 'dragonpay_otc_non_banking/rlnt', DRAGONPAY_OTC_NON_BANKING_SMR = 'dragonpay_otc_non_banking/smr', DRAGONPAY_OTC_PHILIPPINES = 'dragonpay_otc_philippines', DRAGONPAY_SEVENELEVEN = 'dragonpay_seveneleven', DUITNOWQR = 'duitnowqr', EAGLEEYE_VOUCHER = 'eagleeye_voucher', EASYBANK = 'easybank', EBANKING_FI = 'ebanking_FI', EBUCKS = 'ebucks', ECONTEXT_ATM = 'econtext_atm', ECONTEXT_ONLINE = 'econtext_online', ECONTEXT_SEVEN_ELEVEN = 'econtext_seven_eleven', ECONTEXT_STORES = 'econtext_stores', EDENRED_MEAL_VOUCHER = 'edenred_meal_voucher', EFECTIVO_BANCOMER = 'efectivo_bancomer', EFECTIVO_IXE = 'efectivo_ixe', EFECTY = 'efecty', EFTPOS = 'eftpos', EFTPOS_AUSTRALIA = 'eftpos_australia', EFTPOS_AUSTRALIA_CHQ = 'eftpos_australia_chq', EFTPOS_AUSTRALIA_SAV = 'eftpos_australia_sav', ELECTRON = 'electron', ELECTRON_AMAZONPAY = 'electron_amazonpay', ELECTRON_APPLEPAY = 'electron_applepay', ELECTRON_SAMSUNGPAY = 'electron_samsungpay', ELEKSNET = 'eleksnet', ELO = 'elo', ELO_AMAZONPAY = 'elo_amazonpay', ELO_APPLEPAY = 'elo_applepay', ELODEBIT_AMAZONPAY = 'elodebit_amazonpay', ELV = 'elv', ENETS = 'enets', ENTERCASH = 'entercash', ENTERCASH_200 = 'entercash/200', ENTERCASH_204 = 'entercash/204', ENTERCASH_205 = 'entercash/205', ENTERCASH_206 = 'entercash/206', ENTERCASH_207 = 'entercash/207', ENTERCASH_208 = 'entercash/208', ENTERCASH_209 = 'entercash/209', ENTERCASH_211 = 'entercash/211', ENTERCASH_213 = 'entercash/213', ENTERCASH_216 = 'entercash/216', ENTERCASH_231 = 'entercash/231', ENTERCASH_232 = 'entercash/232', ENTERCASH_233 = 'entercash/233', ENTERCASH_234 = 'entercash/234', ENTERCASH_235 = 'entercash/235', ENTERCASH_240 = 'entercash/240', ENTERCASH_260 = 'entercash/260', ENTERCASH_265 = 'entercash/265', ENTERCASH_500 = 'entercash/500', ENTERCASH_505 = 'entercash/505', ENTERCASH_550 = 'entercash/550', ENTERCASH_551 = 'entercash/551', ENTERCASH_552 = 'entercash/552', ENTERCASH_553 = 'entercash/553', ENTERCASH_554 = 'entercash/554', ENTERCASH_555 = 'entercash/555', ENTERCASH_556 = 'entercash/556', ENTERCASH_557 = 'entercash/557', ENTERCASH_640 = 'entercash/640', ENTERCASH_720 = 'entercash/720', ENTERCASH_721 = 'entercash/721', ENTERCASH_722 = 'entercash/722', ENTERCASH_723 = 'entercash/723', ENTERCASH_724 = 'entercash/724', ENTERCASH_750 = 'entercash/750', ENTERCASH_751 = 'entercash/751', ENTERCASH_752 = 'entercash/752', ENTERCASH_753 = 'entercash/753', ENTERCASH_940 = 'entercash/940', ENTERCASH_941 = 'entercash/941', ENTERCASH_942 = 'entercash/942', ENTERCASH_943 = 'entercash/943', ENTERTAINMENTCARD = 'entertainmentcard', EPAY = 'epay', EPS = 'eps', EPS_09350598_7BA4_4AFB_B706_843E49A64759 = 'eps/09350598-7ba4-4afb-b706-843e49a64759', EPS_1190C4D1_B37A_487E_9355_E0A067F54A9F = 'eps/1190c4d1-b37a-487e-9355-e0a067f54a9f', EPS_1D48E2F7_604C_4D1D_894E_170635D1A645 = 'eps/1d48e2f7-604c-4d1d-894e-170635d1a645', EPS_242209E6_A81F_48BC_9041_A31306CB153F = 'eps/242209e6-a81f-48bc-9041-a31306cb153f', EPS_25942CC9_617D_42A1_89BA_D1AB5A05770A = 'eps/25942cc9-617d-42a1-89ba-d1ab5a05770a', EPS_31659756_FB43_4094_AFD5_82980FF48750 = 'eps/31659756-fb43-4094-afd5-82980ff48750', EPS_33FDC41FC_3D3D_4EE3_A1FE_CD79CFD58EA3 = 'eps/33fdc41fc-3d3d-4ee3-a1fe-cd79cfd58ea3', EPS_3ED7DA63_0924_424C_A822_2A0DFAAADCE1 = 'eps/3ed7da63-0924-424c-a822-2a0dfaaadce1', EPS_3FDC41FC_3D3D_4EE3_A1FE_CD79CFD58EA3 = 'eps/3fdc41fc-3d3d-4ee3-a1fe-cd79cfd58ea3', EPS_43B3AF24_7969_4701_A7CE_1F9FC6EEF834 = 'eps/43b3af24-7969-4701-a7ce-1f9fc6eef834', EPS_43DCA1AB_4BA3_41AC_B672_5518362CDE54 = 'eps/43dca1ab-4ba3-41ac-b672-5518362cde54', EPS_479FF5D2_6F44_4921_9330_6BF6763806E9 = 'eps/479ff5d2-6f44-4921-9330-6bf6763806e9', EPS_4A0A975B_0594_4B40_9068_39F77B3A91F9 = 'eps/4a0a975b-0594-4b40-9068-39f77b3a91f9', EPS_52D9DF19_F5C5_401F_89D9_38A8B36AE721 = 'eps/52d9df19-f5c5-401f-89d9-38a8b36ae721', EPS_54016D9D_31B0_4DB3_9EAF_CF9FBC58EE81 = 'eps/54016d9d-31b0-4db3-9eaf-cf9fbc58ee81', EPS_64669764_E6FC_401C_8F3D_26E9169BA6FF = 'eps/64669764-e6fc-401c-8f3d-26e9169ba6ff', EPS_6765E225_A0DC_4481_9666_E26303D4F221 = 'eps/6765e225-a0dc-4481-9666-e26303d4f221', EPS_68DB503B_EA48_4681_814B_10FC74064F68 = 'eps/68db503b-ea48-4681-814b-10fc74064f68', EPS_69A67A81_7518_463F_8527_3F1128AF1F93 = 'eps/69a67a81-7518-463f-8527-3f1128af1f93', EPS_7217D822_470C_4768_B346_A440E8CB7096 = 'eps/7217d822-470c-4768-b346-a440e8cb7096', EPS_744D26DA_90C9_49EB_9A0B_9A7F1FA3A8D2 = 'eps/744d26da-90c9-49eb-9a0b-9a7f1fa3a8d2', EPS_84F468DC_37B4_44AA_8301_50A16F746464 = 'eps/84f468dc-37b4-44aa-8301-50a16f746464', EPS_880CC8C4_D723_49AB_8299_DC35EAFC9385 = 'eps/880cc8c4-d723-49ab-8299-dc35eafc9385', EPS_89C79DA1_1B75_41E2_9254_118F36231BBD = 'eps/89c79da1-1b75-41e2-9254-118f36231bbd', EPS_8B0BFEEA_FBB0_4337_B3A1_0E25C0F060FC = 'eps/8b0bfeea-fbb0-4337-b3a1-0e25c0f060fc', EPS_958D1CF8_0D2D_4B21_B1F2_8383BB9F243F = 'eps/958d1cf8-0d2d-4b21-b1f2-8383bb9f243f', EPS_9C92D29B_A898_488E_836F_E93B911F9A94 = 'eps/9c92d29b-a898-488e-836f-e93b911f9a94', EPS_A990A73B_3D6B_4D91_9B8A_856428089B34 = 'eps/a990a73b-3d6b-4d91-9b8a-856428089b34', EPS_AA1DE16A_223F_494F_90F0_01FCE9C065FB = 'eps/aa1de16a-223f-494f-90f0-01fce9c065fb', EPS_B3B1554F_C9AE_4396_A62F_BAFFB8A2DE1C = 'eps/b3b1554f-c9ae-4396-a62f-baffb8a2de1c', EPS_B42DD796_8BDA_4893_ACC2_DDFAE9C9CDB7 = 'eps/b42dd796-8bda-4893-acc2-ddfae9c9cdb7', EPS_BA7199CC_F057_42F2_9856_2378ABF21638 = 'eps/ba7199cc-f057-42f2-9856-2378abf21638', EPS_BB7D223A_17D5_48AF_A6EF_8A2BF5A4E5D9 = 'eps/bb7d223a-17d5-48af-a6ef-8a2bf5a4e5d9', EPS_BBD44F4D_609B_454E_8D5A_E0D1AC21F15A = 'eps/bbd44f4d-609b-454e-8d5a-e0d1ac21f15a', EPS_C522E299_479C_4134_849F_A6EF0399A6E0 = 'eps/c522e299-479c-4134-849f-a6ef0399a6e0', EPS_CC4A034E_F8A1_4CE4_A96B_1CD251AF03B5 = 'eps/cc4a034e-f8a1-4ce4-a96b-1cd251af03b5', EPS_D5639C17_0207_4D49_8708_922181135AD1 = 'eps/d5639c17-0207-4d49-8708-922181135ad1', EPS_D5D5B133_1C0D_4C08_B2BE_3C9B116DC326 = 'eps/d5d5b133-1c0d-4c08-b2be-3c9b116dc326', EPS_E15C6132_430F_415C_AC95_C127ECB49D55 = 'eps/e15c6132-430f-415c-ac95-c127ecb49d55', EPS_E2E97AAA_DE4C_4E18_9431_D99790773433 = 'eps/e2e97aaa-de4c-4e18-9431-d99790773433', EPS_E590EB4F_B805_43F7_86A0_4EA3F560B18F = 'eps/e590eb4f-b805-43f7-86a0-4ea3f560b18f', EPS_E6819E7A_F663_414B_92EC_CF7C82D2F4E5 = 'eps/e6819e7a-f663-414b-92ec-cf7c82d2f4e5', EPS_EE9FC487_EBE0_486C_8101_17DCE5141A67 = 'eps/ee9fc487-ebe0-486c-8101-17dce5141a67', EPS_EFF103E6_843D_48B7_A6E6_FBD88F511B11 = 'eps/eff103e6-843d-48b7-a6e6-fbd88f511b11', EPS_F848C582_1B94_4E13_B58E_B3A2C68A3FBA = 'eps/f848c582-1b94-4e13-b58e-b3a2c68a3fba', ESA_PAY = 'esa_pay', EXPERTGIFTCARD = 'expertgiftcard', FACILYPAY = 'facilypay', FACILYPAY_10X = 'facilypay_10x', FACILYPAY_12X = 'facilypay_12x', FACILYPAY_3X = 'facilypay_3x', FACILYPAY_4X = 'facilypay_4x', FACILYPAY_6X = 'facilypay_6x', FAKTURA = 'faktura', FAMILYMART = 'familymart', FASHIONCHEQUE = 'fashioncheque', FAWRY = 'fawry', FIO_BANKA = 'fio_banka', FIS_MAYORSGIFTCARD = 'fis_mayorsgiftcard', FLEUROP = 'fleurop', FLEUROPBLOEMENBON = 'fleuropbloemenbon', FONQ = 'fonq', FONQGIFTCARD = 'fonqgiftcard', FORBRUGSFORENINGEN = 'forbrugsforeningen', FORTIS = 'fortis', FPX = 'fpx', FPX_ABB = 'fpx_abb', FPX_ABMB = 'fpx_abmb', FPX_AMB = 'fpx_amb', FPX_BIMB = 'fpx_bimb', FPX_BKRM = 'fpx_bkrm', FPX_CIMBCLICKS = 'fpx_cimbclicks', FPX_HLB = 'fpx_hlb', FPX_MB2U = 'fpx_mb2u', FPX_OCBC = 'fpx_ocbc', FPX_PBB = 'fpx_pbb', FPX_RHB = 'fpx_rhb', FPX_SCB = 'fpx_scb', FPX_UOB = 'fpx_uob', FRIESLAND_BANK = 'friesland_bank', GALLGALL = 'gallgall', GARTNER = 'gartner', GCASH = 'gcash', GE = 'ge', GENERIC_BANKTRANSFER = 'generic_banktransfer', GENERIC_WALLET = 'generic_wallet', GENERICGIFTCARD = 'genericgiftcard', GIFTCARD = 'giftcard', GIFTFOR2CARD = 'giftfor2card', GIROCARD = 'girocard', GIROPAY = 'giropay', GIVEX = 'givex', GLOBE_GCASH = 'globe_gcash', GLOBEGCASH = 'globegcash', GOLDSMITHSCARD = 'goldsmithscard', GOOGLEPAY = 'googlepay', GOOGLEWALLET = 'googlewallet', GOPAY_WALLET = 'gopay_wallet', GRABPAY = 'grabpay', GRABPAY_MY = 'grabpay_MY', GRABPAY_PH = 'grabpay_PH', GRABPAY_SG = 'grabpay_SG', GRABPAY_TH = 'grabpay_TH', GRABPAY_POS = 'grabpay_pos', GRUPO_MUTUAL = 'grupo_mutual', HALLMARK = 'hallmark', HALLMARKCARD = 'hallmarkcard', HANDELSBAN = 'handelsban', HANDELSBANKEN = 'handelsbanken', HANSABANK = 'hansabank', HDFC = 'hdfc', HELM = 'helm', HIPER = 'hiper', HIPERCARD = 'hipercard', HMLINGERIE = 'hmlingerie', HOMEWORKS = 'homeworks', HONG_LEONG = 'hong_leong', HSBC = 'hsbc', HYPO_ALPE_ADRIA = 'hypo_alpe_adria', HYPO_LANDESBANK_VORARLBERG = 'hypo_landesbank_vorarlberg', HYPO_NOE_GRUPPE = 'hypo_noe_gruppe', HYPO_TIROL_BANK = 'hypo_tirol_bank', HYUNDAI_CARD = 'hyundai_card', IDEAL = 'ideal', IDEAL_0021 = 'ideal/0021', IDEAL_0031 = 'ideal/0031', IDEAL_0161 = 'ideal/0161', IDEAL_0511 = 'ideal/0511', IDEAL_0721 = 'ideal/0721', IDEAL_0751 = 'ideal/0751', IDEAL_0761 = 'ideal/0761', IDEAL_0771 = 'ideal/0771', IDEAL_0801 = 'ideal/0801', IDEAL_0802 = 'ideal/0802', IDEAL_0803 = 'ideal/0803', IDEAL_0804 = 'ideal/0804', IDEAL_0805 = 'ideal/0805', IDEAL_1151 = 'ideal/1151', IGIVE = 'igive', IKANO = 'ikano', IMMO_BANK = 'immo-bank', INICISINIPAY_ACCOUNTTRANSFER = 'inicisIniPay_accounttransfer', INICISINIPAY_CREDITCARD = 'inicisIniPay_creditcard', INICISMOBILE_ACCOUNTTRANSFER = 'inicisMobile_accounttransfer', INICISMOBILE_CREDITCARD = 'inicisMobile_creditcard', INICISMOBILE_MOBILEPHONE = 'inicisMobile_mobilephone', INICIS_CREDITCARD = 'inicis_creditcard', INTERAC = 'interac', INTERAC_AMAZONPAY = 'interac_amazonpay', INTERAC_APPLEPAY = 'interac_applepay', INTERAC_CARD = 'interac_card', INTERBANK = 'interbank', INTERLINK = 'interlink', IPAY = 'ipay', IPAY88 = 'ipay88', ISRACARD = 'isracard', ITAU = 'itau', IVR = 'ivr', IVRLANDLINE = 'ivrLandline', IVRMOBILE = 'ivrMobile', IXE = 'ixe', JCB = 'jcb', JCB_APPLEPAY = 'jcb_applepay', JUST_PAY = 'just_pay', KADOWERELD = 'kadowereld', KAKAOPAY = 'kakaopay', KAREN_MILLEN = 'karen_millen', KARENMILLEN = 'karenmillen', KARENMILLENGIFTCARD = 'karenmillengiftcard', KASIKORNBANK = 'kasikornbank', KCP_BANKTRANSFER = 'kcp_banktransfer', KCP_CREDITCARD = 'kcp_creditcard', KCP_PAYCO = 'kcp_payco', KLARNA_PAY_LATER = 'klarna-pay-later', KLARNA_PAY_NOW = 'klarna-pay-now', KLARNA_SLICE = 'klarna-slice', KLARNA = 'klarna', KLARNA_ACCOUNT = 'klarna_account', KLARNA_B2B = 'klarna_b2b', KLARNA_PAYNOW = 'klarna_paynow', KLARNAPAYMENTS = 'klarnapayments', KLARNAPAYMENTS_ACCOUNT = 'klarnapayments_account', KLARNAPAYMENTS_B2B = 'klarnapayments_b2b', KMART = 'kmart', KNET = 'knet', KONBINI = 'konbini', KOREAN_LOCAL_CARD = 'korean_local_card', KRUNGSRI_ATM = 'krungsri_atm', KRUNGTHAI = 'krungthai', KRUNSGRI = 'krunsgri', LASER = 'laser', LAWESON = 'laweson', LHV = 'lhv', LIANLIANPAY_ABC = 'lianlianpay_abc', LIANLIANPAY_BCM = 'lianlianpay_bcm', LIANLIANPAY_BEA = 'lianlianpay_bea', LIANLIANPAY_BOB = 'lianlianpay_bob', LIANLIANPAY_BOC = 'lianlianpay_boc', LIANLIANPAY_CCIB = 'lianlianpay_ccib', LIANLIANPAY_CCOB = 'lianlianpay_ccob', LIANLIANPAY_CEB = 'lianlianpay_ceb', LIANLIANPAY_CGB = 'lianlianpay_cgb', LIANLIANPAY_CMB = 'lianlianpay_cmb', LIANLIANPAY_CMBC = 'lianlianpay_cmbc', LIANLIANPAY_CREDITCARD = 'lianlianpay_creditcard', LIANLIANPAY_DEBITCARD = 'lianlianpay_debitcard', LIANLIANPAY_EBANKING = 'lianlianpay_ebanking', LIANLIANPAY_EBANKING_CREDIT_01020000 = 'lianlianpay_ebanking_credit/01020000', LIANLIANPAY_EBANKING_CREDIT_01030000 = 'lianlianpay_ebanking_credit/01030000', LIANLIANPAY_EBANKING_CREDIT_01040000 = 'lianlianpay_ebanking_credit/01040000', LIANLIANPAY_EBANKING_CREDIT_01050000 = 'lianlianpay_ebanking_credit/01050000', LIANLIANPAY_EBANKING_CREDIT_03010000 = 'lianlianpay_ebanking_credit/03010000', LIANLIANPAY_EBANKING_CREDIT_03020000 = 'lianlianpay_ebanking_credit/03020000', LIANLIANPAY_EBANKING_CREDIT_03030000 = 'lianlianpay_ebanking_credit/03030000', LIANLIANPAY_EBANKING_CREDIT_03040000 = 'lianlianpay_ebanking_credit/03040000', LIANLIANPAY_EBANKING_CREDIT_03050000 = 'lianlianpay_ebanking_credit/03050000', LIANLIANPAY_EBANKING_CREDIT_03060000 = 'lianlianpay_ebanking_credit/03060000', LIANLIANPAY_EBANKING_CREDIT_03070000 = 'lianlianpay_ebanking_credit/03070000', LIANLIANPAY_EBANKING_CREDIT_03080000 = 'lianlianpay_ebanking_credit/03080000', LIANLIANPAY_EBANKING_CREDIT_03100000 = 'lianlianpay_ebanking_credit/03100000', LIANLIANPAY_EBANKING_CREDIT_03200000 = 'lianlianpay_ebanking_credit/03200000', LIANLIANPAY_EBANKING_CREDIT_1000000 = 'lianlianpay_ebanking_credit/1000000', LIANLIANPAY_EBANKING_CREDIT_4031000 = 'lianlianpay_ebanking_credit/4031000', LIANLIANPAY_EBANKING_DEBIT_01020000 = 'lianlianpay_ebanking_debit/01020000', LIANLIANPAY_EBANKING_DEBIT_01030000 = 'lianlianpay_ebanking_debit/01030000', LIANLIANPAY_EBANKING_DEBIT_01040000 = 'lianlianpay_ebanking_debit/01040000', LIANLIANPAY_EBANKING_DEBIT_01050000 = 'lianlianpay_ebanking_debit/01050000', LIANLIANPAY_EBANKING_DEBIT_03010000 = 'lianlianpay_ebanking_debit/03010000', LIANLIANPAY_EBANKING_DEBIT_03020000 = 'lianlianpay_ebanking_debit/03020000', LIANLIANPAY_EBANKING_DEBIT_03030000 = 'lianlianpay_ebanking_debit/03030000', LIANLIANPAY_EBANKING_DEBIT_03040000 = 'lianlianpay_ebanking_debit/03040000', LIANLIANPAY_EBANKING_DEBIT_03050000 = 'lianlianpay_ebanking_debit/03050000', LIANLIANPAY_EBANKING_DEBIT_03060000 = 'lianlianpay_ebanking_debit/03060000', LIANLIANPAY_EBANKING_DEBIT_03070000 = 'lianlianpay_ebanking_debit/03070000', LIANLIANPAY_EBANKING_DEBIT_03080000 = 'lianlianpay_ebanking_debit/03080000', LIANLIANPAY_EBANKING_DEBIT_03100000 = 'lianlianpay_ebanking_debit/03100000', LIANLIANPAY_EBANKING_DEBIT_03200000 = 'lianlianpay_ebanking_debit/03200000', LIANLIANPAY_EBANKING_DEBIT_1000000 = 'lianlianpay_ebanking_debit/1000000', LIANLIANPAY_EBANKING_DEBIT_4031000 = 'lianlianpay_ebanking_debit/4031000', LIANLIANPAY_EBANKING_ENTERPRISE_01020000 = 'lianlianpay_ebanking_enterprise/01020000', LIANLIANPAY_EBANKING_ENTERPRISE_01030000 = 'lianlianpay_ebanking_enterprise/01030000', LIANLIANPAY_EBANKING_ENTERPRISE_01040000 = 'lianlianpay_ebanking_enterprise/01040000', LIANLIANPAY_EBANKING_ENTERPRISE_01050000 = 'lianlianpay_ebanking_enterprise/01050000', LIANLIANPAY_EBANKING_ENTERPRISE_03010000 = 'lianlianpay_ebanking_enterprise/03010000', LIANLIANPAY_EBANKING_ENTERPRISE_03020000 = 'lianlianpay_ebanking_enterprise/03020000', LIANLIANPAY_EBANKING_ENTERPRISE_03030000 = 'lianlianpay_ebanking_enterprise/03030000', LIANLIANPAY_EBANKING_ENTERPRISE_03040000 = 'lianlianpay_ebanking_enterprise/03040000', LIANLIANPAY_EBANKING_ENTERPRISE_03050000 = 'lianlianpay_ebanking_enterprise/03050000', LIANLIANPAY_EBANKING_ENTERPRISE_03060000 = 'lianlianpay_ebanking_enterprise/03060000', LIANLIANPAY_EBANKING_ENTERPRISE_03070000 = 'lianlianpay_ebanking_enterprise/03070000', LIANLIANPAY_EBANKING_ENTERPRISE_03080000 = 'lianlianpay_ebanking_enterprise/03080000', LIANLIANPAY_EBANKING_ENTERPRISE_03100000 = 'lianlianpay_ebanking_enterprise/03100000', LIANLIANPAY_EBANKING_ENTERPRISE_03200000 = 'lianlianpay_ebanking_enterprise/03200000', LIANLIANPAY_EBANKING_ENTERPRISE_1000000 = 'lianlianpay_ebanking_enterprise/1000000', LIANLIANPAY_EBANKING_ENTERPRISE_4031000 = 'lianlianpay_ebanking_enterprise/4031000', LIANLIANPAY_HXB = 'lianlianpay_hxb', LIANLIANPAY_ICBC = 'lianlianpay_icbc', LIANLIANPAY_PAB = 'lianlianpay_pab', LIANLIANPAY_PSBC = 'lianlianpay_psbc', LIANLIANPAY_SPDB = 'lianlianpay_spdb', LOODS5GIFTCARD = 'loods5giftcard', LOODS5PREPAIDCARD = 'loods5prepaidcard', M_PAY = 'm_pay', MADA = 'mada', MADA_CARD = 'mada_card', MAESTRO = 'maestro', MAESTRO_AMAZONPAY = 'maestro_amazonpay', MAESTRO_APPLEPAY = 'maestro_applepay', MAESTRO_SAMSUNGPAY = 'maestro_samsungpay', MAESTROUK = 'maestrouk', MANDIRI = 'mandiri', MAPPINWEBBCARD = 'mappinwebbcard', MARITIME = 'maritime', MASTERPASS = 'masterpass', MAYBANK = 'maybank', MAYORS = 'mayors', MB = 'mb', MBANK = 'mbank', MBWAY = 'mbway', MC = 'mc', MC_AMAZONPAY = 'mc_amazonpay', MC_ANDROIDPAY = 'mc_androidpay', MC_APPLEPAY = 'mc_applepay', MC_SAMSUNGPAY = 'mc_samsungpay', MEALVOUCHER_FR_GROUPEUP = 'mealVoucher_FR_groupeup', MEALVOUCHER_FR_NATIXIS = 'mealVoucher_FR_natixis', MEALVOUCHER_FR_SODEXO = 'mealVoucher_FR_sodexo', MERCADOPAGO = 'mercadopago', MINISTOP = 'ministop', MIR = 'mir', MOBILE_SUICA = 'mobile_suica', MOBILEPAY = 'mobilepay', MOLPAY = 'molpay', MOLPAY_A = 'molpay_a', MOLPAY_ABMB = 'molpay_abmb', MOLPAY_ACB = 'molpay_acb', MOLPAY_AFFIN_EPG = 'molpay_affin_epg', MOLPAY_AGRIBANK = 'molpay_agribank', MOLPAY_ALIPAY = 'molpay_alipay', MOLPAY_AMB = 'molpay_amb', MOLPAY_BANGKOKBANK = 'molpay_bangkokbank', MOLPAY_BANKGKOKBANK = 'molpay_bankgkokbank', MOLPAY_BANKISLAM = 'molpay_bankislam', MOLPAY_BIDV = 'molpay_bidv', MOLPAY_BKRM = 'molpay_bkrm', MOLPAY_BOOST = 'molpay_boost', MOLPAY_CASH = 'molpay_cash', MOLPAY_CIMB = 'molpay_cimb', MOLPAY_CIMB_VA = 'molpay_cimb_va', MOLPAY_DONGABANK = 'molpay_dongabank', MOLPAY_EBANKING_MY = 'molpay_ebanking_MY', MOLPAY_EBANKING_TH = 'molpay_ebanking_TH', MOLPAY_EBANKING_TH_MOLPAY_BANGKOKBANK = 'molpay_ebanking_TH/molpay_bangkokbank', MOLPAY_EBANKING_TH_MOLPAY_KBANK = 'molpay_ebanking_TH/molpay_kbank', MOLPAY_EBANKING_TH_MOLPAY_KRUNGSRIBANK = 'molpay_ebanking_TH/molpay_krungsribank', MOLPAY_EBANKING_TH_MOLPAY_KRUNGTHAIBANK = 'molpay_ebanking_TH/molpay_krungthaibank', MOLPAY_EBANKING_TH_MOLPAY_SIAMCOMMERCIALBANK = 'molpay_ebanking_TH/molpay_siamcommercialbank', MOLPAY_EBANKING_VN = 'molpay_ebanking_VN', MOLPAY_EBANKING_VN_VTCPAY_ACB = 'molpay_ebanking_VN/vtcpay-acb', MOLPAY_EBANKING_VN_VTCPAY_AGRIBANK = 'molpay_ebanking_VN/vtcpay-agribank', MOLPAY_EBANKING_VN_VTCPAY_BIDV = 'molpay_ebanking_VN/vtcpay-bidv', MOLPAY_EBANKING_VN_VTCPAY_DONGABANK = 'molpay_ebanking_VN/vtcpay-dongabank', MOLPAY_EBANKING_VN_VTCPAY_MARITIMEBANK = 'molpay_ebanking_VN/vtcpay-maritimebank', MOLPAY_EBANKING_VN_VTCPAY_MB = 'molpay_ebanking_VN/vtcpay-mb', MOLPAY_EBANKING_VN_VTCPAY_SACOMBANK = 'molpay_ebanking_VN/vtcpay-sacombank', MOLPAY_EBANKING_VN_VTCPAY_TECHCOMBANK = 'molpay_ebanking_VN/vtcpay-techcombank', MOLPAY_EBANKING_VN_VTCPAY_VIETCOMBANK = 'molpay_ebanking_VN/vtcpay-vietcombank', MOLPAY_EBANKING_VN_VTCPAY_VIETINBANK = 'molpay_ebanking_VN/vtcpay-vietinbank', MOLPAY_EBANKING_FPX_MY = 'molpay_ebanking_fpx_MY', MOLPAY_EBANKING_FPX_MY_FPX_ABB = 'molpay_ebanking_fpx_MY/fpx_abb', MOLPAY_EBANKING_FPX_MY_FPX_ABMB = 'molpay_ebanking_fpx_MY/fpx_abmb', MOLPAY_EBANKING_FPX_MY_FPX_AMB = 'molpay_ebanking_fpx_MY/fpx_amb', MOLPAY_EBANKING_FPX_MY_FPX_BIMB = 'molpay_ebanking_fpx_MY/fpx_bimb', MOLPAY_EBANKING_FPX_MY_FPX_BKRM = 'molpay_ebanking_fpx_MY/fpx_bkrm', MOLPAY_EBANKING_FPX_MY_FPX_BMMB = 'molpay_ebanking_fpx_MY/fpx_bmmb', MOLPAY_EBANKING_FPX_MY_FPX_BSN = 'molpay_ebanking_fpx_MY/fpx_bsn', MOLPAY_EBANKING_FPX_MY_FPX_CIMBCLICKS = 'molpay_ebanking_fpx_MY/fpx_cimbclicks', MOLPAY_EBANKING_FPX_MY_FPX_HLB = 'molpay_ebanking_fpx_MY/fpx_hlb', MOLPAY_EBANKING_FPX_MY_FPX_HSBC = 'molpay_ebanking_fpx_MY/fpx_hsbc', MOLPAY_EBANKING_FPX_MY_FPX_KFH = 'molpay_ebanking_fpx_MY/fpx_kfh', MOLPAY_EBANKING_FPX_MY_FPX_MB2U = 'molpay_ebanking_fpx_MY/fpx_mb2u', MOLPAY_EBANKING_FPX_MY_FPX_OCBC = 'molpay_ebanking_fpx_MY/fpx_ocbc', MOLPAY_EBANKING_FPX_MY_FPX_PBB = 'molpay_ebanking_fpx_MY/fpx_pbb', MOLPAY_EBANKING_FPX_MY_FPX_RHB = 'molpay_ebanking_fpx_MY/fpx_rhb', MOLPAY_EBANKING_FPX_MY_FPX_SCB = 'molpay_ebanking_fpx_MY/fpx_scb', MOLPAY_EBANKING_FPX_MY_FPX_UOB = 'molpay_ebanking_fpx_MY/fpx_uob', MOLPAY_ENETSD = 'molpay_enetsd', MOLPAY_EPAY = 'molpay_epay', MOLPAY_ESAPAY = 'molpay_esapay', MOLPAY_FPX = 'molpay_fpx', MOLPAY_HLB = 'molpay_hlb', MOLPAY_KBANK = 'molpay_kbank', MOLPAY_KRUNGSRIBANK = 'molpay_krungsribank', MOLPAY_KRUNGTHAIBANK = 'molpay_krungthaibank', MOLPAY_MARITIMEBANK = 'molpay_maritimebank', MOLPAY_MAYBANK2U = 'molpay_maybank2u', MOLPAY_MB = 'molpay_mb', MOLPAY_NGANLUONG = 'molpay_nganluong', MOLPAY_OCBC = 'molpay_ocbc', MOLPAY_PAYLINK = 'molpay_paylink', MOLPAY_PAYSBUY = 'molpay_paysbuy', MOLPAY_POINTS = 'molpay_points', MOLPAY_PUBLICBANK = 'molpay_publicbank', MOLPAY_RHB = 'molpay_rhb', MOLPAY_SACOMBANK = 'molpay_sacombank', MOLPAY_SCB = 'molpay_scb', MOLPAY_SENHENG = 'molpay_senheng', MOLPAY_SIAMCOMMERCIALBANK = 'molpay_siamcommercialbank', MOLPAY_SINGPOST = 'molpay_singpost', MOLPAY_TECHCOMBANK = 'molpay_techcombank', MOLPAY_UOB = 'molpay_uob', MOLPAY_VIETCOMBANK = 'molpay_vietcombank', MOLPAY_VIETINBANK = 'molpay_vietinbank', MOLPAY_WALLET = 'molpay_wallet', MOMO_ATM = 'momo_atm', MOMO_WALLET = 'momo_wallet', MONETA = 'moneta', MONETA_CZ = 'moneta_cz', MONEYBOOKERS = 'moneybookers', MONEYMAIL = 'moneymail', MONEYOU = 'moneyou', MUCAP = 'mucap', MULA = 'mula', MULTIBANCO = 'multibanco', MULTICAJA = 'multicaja', MUSICALCARD = 'musicalcard', NAPS = 'naps', NARANJA = 'naranja', NATIONALEBIOSCOOPBON = 'nationalebioscoopbon', NATIONALETUINBON = 'nationaletuinbon', NATIONALEVERWENCADEAUBON = 'nationaleverwencadeaubon', NEDBANK = 'nedbank', NETAXEPT_BANKAXESS = 'netaxept_bankaxess', NETELLER = 'neteller', NETPLUS = 'netplus', NETS = 'nets', NETSCARD = 'netscard', NGANLUONG = 'nganluong', NOCARD = 'nocard', NORDEA = 'nordea', NYCE = 'nyce', OASIS = 'oasis', OASISGIFTCARD = 'oasisgiftcard', OBERTHUR = 'oberthur', OFFICE_MATE = 'office_mate', OMANNET = 'omannet', OMASP = 'omasp', ONEBIP = 'onebip', ONETWOTHREE = 'onetwothree', ONEY = 'oney', ONEY_CHIP = 'oney_chip', ONEY_POS = 'oney_pos', ONLINE_RU = 'online_RU', ONLINEBANKING_PL = 'onlineBanking_PL', OPENBANKING = 'openbanking', OPENBANKING_UK = 'openbanking_UK', OPENBANKING_UK_1 = 'openbanking_UK/1', OPENBANKING_UK_10 = 'openbanking_UK/10', OPENBANKING_UK_11 = 'openbanking_UK/11', OPENBANKING_UK_12 = 'openbanking_UK/12', OPENBANKING_UK_13 = 'openbanking_UK/13', OPENBANKING_UK_14 = 'openbanking_UK/14', OPENBANKING_UK_15 = 'openbanking_UK/15', OPENBANKING_UK_16 = 'openbanking_UK/16', OPENBANKING_UK_17 = 'openbanking_UK/17', OPENBANKING_UK_18 = 'openbanking_UK/18', OPENBANKING_UK_19 = 'openbanking_UK/19', OPENBANKING_UK_2 = 'openbanking_UK/2', OPENBANKING_UK_20 = 'openbanking_UK/20', OPENBANKING_UK_3 = 'openbanking_UK/3', OPENBANKING_UK_4 = 'openbanking_UK/4', OPENBANKING_UK_5 = 'openbanking_UK/5', OPENBANKING_UK_6 = 'openbanking_UK/6', OPENBANKING_UK_7 = 'openbanking_UK/7', OPENBANKING_UK_8 = 'openbanking_UK/8', OPENBANKING_UK_9 = 'openbanking_UK/9', OPENINVOICE = 'openinvoice', OXXO = 'oxxo', PAGOEFECTIVO = 'pagoefectivo', PAGOFACIL = 'pagofacil', PATHEGIFTCARD = 'pathegiftcard', PAY_EASY = 'pay_easy', PAY_POST = 'pay_post', PAY_U = 'pay_u', PAYBRIGHT = 'paybright', PAYBYBANK = 'paybybank', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_FIRSTTRUST = 'Paybybank_uk_Firsttrust', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_AIB = 'Paybybank_uk_aib', PAYBYBANK_UK_AMEX = 'paybybank_uk_amex', PAYBYBANK_UK_ARBUTHNOTLATHAM = 'paybybank_uk_arbuthnotlatham', PAYBYBANK_UK_BANKOFIRELAND = 'paybybank_uk_bankofireland', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_BANKOFSCOTLAND = 'Paybybank_uk_bankofscotland', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_BARCLAYS = 'Paybybank_uk_barclays', PAYBYBANK_UK_BBANK = 'paybybank_uk_bbank', PAYBYBANK_UK_C_HOARE_CO = 'paybybank_uk_c-hoare-co', PAYBYBANK_UK_CAPITALONE = 'paybybank_uk_capitalone', PAYBYBANK_UK_CASHPLUS = 'paybybank_uk_cashplus', PAYBYBANK_UK_CATERALLEN = 'paybybank_uk_caterallen', PAYBYBANK_UK_CLYDESDALE = 'paybybank_uk_clydesdale', PAYBYBANK_UK_COUTTS = 'paybybank_uk_coutts', PAYBYBANK_UK_CREATION = 'paybybank_uk_creation', PAYBYBANK_UK_CUMBERLAND = 'paybybank_uk_cumberland', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_DANSKEBANK = 'Paybybank_uk_danskebank', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_FIRSTDIRECT = 'Paybybank_uk_firstdirect', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_HALIFAX = 'Paybybank_uk_halifax', PAYBYBANK_UK_HANDELSBANKEN = 'paybybank_uk_handelsbanken', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_HSBC = 'Paybybank_uk_hsbc', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_LLOYDS = 'Paybybank_uk_lloyds', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_MONZO = 'Paybybank_uk_monzo', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_NATIONWIDE = 'Paybybank_uk_nationwide', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_NATWEST = 'Paybybank_uk_natwest', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_REVOLUT = 'Paybybank_uk_revolut', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_ROYALBANKOFSCOTLAND = 'Paybybank_uk_royalbankofscotland', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_SATANDER = 'Paybybank_uk_satander', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_STARLING = 'Paybybank_uk_starling', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_TSB = 'Paybybank_uk_tsb', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_ULSTERBANK = 'Paybybank_uk_ulsterbank', /** * @deprecated Since v2.0.0. Use string literal instead. */ PAYBYBANK_UK_UTESCOBANK = 'Paybybank_uk_utescobank', PAYCO = 'payco', PAYEX = 'payex', PAYMAYA_WALLET = 'paymaya_wallet', PAYNOW = 'paynow', PAYPAL = 'paypal', PAYPAL_POS = 'paypal_pos', PAYSAFECARD = 'paysafecard', PAYSBUY = 'paysbuy', PAYSHOP = 'payshop', PAYTHRU = 'paythru', PAYTM = 'paytm', PAYTRAIL = 'paytrail', PAYU_IN = 'payu_IN', PAYU_IN_CASHCARD = 'payu_IN_cashcard', PAYU_IN_NB = 'payu_IN_nb', PAYU_IN_UPI = 'payu_IN_upi', PAYU_ZA_EFTPRO = 'payu_ZA_eftpro', PAYWITHGOOGLE = 'paywithgoogle', PERMATABANK = 'permatabank', PIX = 'pix', PLASTIX = 'plastix', PLATIKA = 'platika', PLUIMEN = 'pluimen', PLUIMGIFTCARD = 'pluimgiftcard', POCZTA_POLSKA = 'poczta_polska', PODIUMCARD = 'podiumcard', POLI = 'poli', POP_PANKKI = 'pop_pankki', POS = 'pos', POST_RUSSIA = 'post_russia', POSTBANK = 'postbank', POWER_BUY = 'power_buy', PPS = 'pps', PRIMEIROPAY_BOLETO = 'primeiropay_boleto', PROMPTPAY_QR = 'promptpay_qr', PROSODIE_ILLICADO = 'prosodie_illicado', PSB = 'psb', PSE = 'pse', PSE_PAYULATAM = 'pse_payulatam', PUBLIC_BANK = 'public_bank', PULSE = 'pulse', PULSE_PAY = 'pulse_pay', QBANK = 'qbank', QIWI = 'qiwi', QIWIWALLET = 'qiwiwallet', RAIFFEISEN = 'raiffeisen', RAKUTEN = 'rakuten', RAKUTEN_EDY = 'rakuten_edy', RAPIPAGO = 'rapipago', RATEPAY = 'ratepay', RATEPAY_DIRECTDEBIT = 'ratepay_directdebit', RAZER = 'razer', REDCOMPRA = 'redcompra', REGIOBANK = 'regiobank', RESTAURATIONHARDWARE_GIFTCART = 'restaurationhardware_giftcart', RESTORATIONHARDWARE = 'restorationhardware', RESURSBANK = 'resursbank', RESURSGIFTCARD = 'resursgiftcard', RHB = 'rhb', RISK = 'risk', RISPA = 'rispa', RITUALS = 'rituals', RIVIERAMAISONGIFTCARD = 'rivieramaisongiftcard', ROBINSON = 'robinson', ROMCARD = 'romcard', ROMCARD_CREDIT = 'romcard_credit', ROMCARD_DEBIT = 'romcard_debit', RSB = 'rsb', RUPAY = 'rupay', S_PANKKI = 's-pankki', SACOMBANK = 'sacombank', SAFETYPAY = 'safetypay', SAFETYPAY_CASH = 'safetypay_cash', SAMPO_PANKKI = 'sampo_pankki', SAMSUNGPAY = 'samsungpay', SANTANDER = 'santander', SARAIVA = 'saraiva', SBERBANK = 'sberbank', SCBEASY = 'scbeasy', SCOTIABANK = 'scotiabank', SEBDIRECTPAYMENT = 'sebdirectpayment', SEPA = 'sepa', SEPADIRECTDEBIT = 'sepadirectdebit', SEPADIRECTDEBIT_AMAZONPAY = 'sepadirectdebit_amazonpay', SEVENELEVEN = 'seveneleven', SF_CADEAU = 'sf_cadeau', SHAZAM = 'shazam', SHOPPING = 'shopping', SINARMAS = 'sinarmas', SINGAPORE_POST = 'singapore_post', SKANDIA = 'skandia', SKRILL = 'skrill', SMART = 'smart', SMARTMONEY = 'smartmoney', SMS = 'sms', SNS = 'sns', SODEXO = 'sodexo', SOFORT = 'sofort', SOLO = 'solo', SOROCRED = 'sorocred', SPARBANKEN = 'sparbanken', SPARDA_BANK = 'sparda-bank', SPAREBANK = 'sparebank', SPARKASSE = 'sparkasse', SPARNORD = 'sparnord', STANDARD_BANK = 'standard_bank', STAR = 'star', STORE = 'store', SUICA = 'suica', SVS = 'svs', SWEDBANK = 'swedbank', SWISH = 'swish', SWITCHDEVICE = 'switchdevice', SYNCHRONY = 'synchrony', SYNCHRONY_MERCHANT = 'synchrony/merchant', TAP = 'tap', TCSTESTGIFTCARD = 'tcstestgiftcard', TECHOM_BANK = 'techom_bank', TENPAY = 'tenpay', TERMINAL_RU = 'terminal_RU', TESCO = 'tesco', TESCO_LOTUS = 'tesco_lotus', THAI_WATSADU = 'thai_watsadu', THESTINGGIFTCARD = 'thestinggiftcard', TICKET = 'ticket', TMBINTERNETBANKING = 'tmbinternetbanking', TOPS_DAILY = 'tops_daily', TROY = 'troy', TRUSTLY = 'trustly', TRUSTPAY = 'trustpay', TWINT = 'twint', TWINT_POS = 'twint_pos', UBERCREDIT = 'ubercredit', UKASH = 'ukash', UNICREDIT = 'unicredit', UNIONPAY = 'unionpay', UNKNOWNCARD = 'unknowncard', UOB = 'uob', UOBDIRECTDEBIT = 'uobdirectdebit', UPI = 'upi', UPI_COLLECT = 'upi_collect', UPI_QR = 'upi_qr', VALE_REFEICAO = 'vale_refeicao', VALE_REFEICAO_PREPAID = 'vale_refeicao_prepaid', VALUELINK = 'valuelink', VIAS = 'vias', VIETCOMBANK = 'vietcombank', VIETINBANK = 'vietinbank', VIPPS = 'vipps', VIS_MAYORSGIFTCARD = 'vis_mayorsgiftcard', VISA = 'visa', VISA_AMAZONPAY = 'visa_amazonpay', VISA_ANDROIDPAY = 'visa_androidpay', VISA_APPLEPAY = 'visa_applepay', VISA_SAMSUNGPAY = 'visa_samsungpay', VISACHECKOUT = 'visacheckout', VISADANKORT = 'visadankort', VOLKSBANK = 'volksbank', VPAY = 'vpay', VR_BANK = 'vr_bank', VTCPAY_ACB = 'vtcpay-acb', VTCPAY_AGRIBANK = 'vtcpay-agribank', VTCPAY_BIDV = 'vtcpay-bidv', VTCPAY_DONGABANK = 'vtcpay-dongabank', VTCPAY_MARITIMEBANK = 'vtcpay-maritimebank', VTCPAY_MB = 'vtcpay-mb', VTCPAY_SACOMBANK = 'vtcpay-sacombank', VTCPAY_TECHCOMBANK = 'vtcpay-techcombank', VTCPAY_VIETCOMBANK = 'vtcpay-vietcombank', VTCPAY_VIETINBANK = 'vtcpay-vietinbank', VVVCADEAUBON = 'vvvcadeaubon', VVVGIFTCARD = 'vvvgiftcard', WALLET = 'wallet', WALLET_RU = 'wallet_RU', WALLET_RU_YANDEXMONEY = 'wallet_RU/yandexmoney', WALLIE = 'wallie', WAREHOUSE = 'warehouse', WAREHOUSEGIFTCARD = 'warehousegiftcard', WEBSHOPGIFTCARD = 'webshopgiftcard', WECHATPAY = 'wechatpay', WECHATPAYMINIPROGRAM = 'wechatpayMiniProgram', WECHATPAYQR = 'wechatpayQR', WECHATPAYSDK = 'wechatpaySDK', WECHATPAYWEB = 'wechatpayWeb', WECHATPAY_FULLBRAND = 'wechatpay_fullbrand', WECHATPAY_POS = 'wechatpay_pos', WEFASHIONGIFTCARD = 'wefashiongiftcard', WESTERNUNION = 'westernunion', WIJNCARD = 'wijncard', WINKELCHEQUE = 'winkelcheque', WOSCARD = 'woscard', XPONCARD = 'xponcard', YALO_PREPAID = 'yalo_prepaid', YANDEX = 'yandex', YANDEX_ALFACLICK = 'yandex_alfaclick', YANDEX_BANK_CARD = 'yandex_bank_card', YANDEX_CASH = 'yandex_cash', YANDEX_INSTALLMENTS = 'yandex_installments', YANDEX_PROMSVYAZBANK = 'yandex_promsvyazbank', YANDEX_QIWI = 'yandex_qiwi', YANDEX_SBERBANK = 'yandex_sberbank', YANDEX_WEBMONEY = 'yandex_webmoney', YANDEXMONEY = 'yandexmoney', YOURGIFT = 'yourgift', ZABKA = 'zabka', ZIP = 'zip', ZIP_POS = 'Zip_pos', } 
+export interface BentoPaymentMethodProps { /** * The label describing to the payment method icon. * @default null */ label?: string; /** * Render payment method icon in a smaller size * @default false */ small?: boolean; /** * The type of payment method to display. * @default 'Unknowncard' */ type?: string; } /** * A collection of all payment method types. * Directly map to payment icon SVG name. * @deprecated Since v3.0.0. Use string literal instead. */ export enum BentoPaymentMethodType { CTP = 'ctp', P24_LOGO = 'P24_logo', /** * @deprecated Since v3.0.0. Do not use. */ TOUCH__N_GO = "Touch 'N Go", ABSA = 'absa', ACB = 'acb', ACCEL = 'accel', ACH = 'ach', ACHCOLOMBIA = 'achcolombia', ADYEN = 'adyen', ADYEN_TEST_VOUCHER = 'adyen_test_voucher', AFFIN = 'affin', AFFIRM = 'affirm', AFTERPAY_B2B = 'afterpay_b2b', AFTERPAY_DEFAULT = 'afterpay_default', AFTERPAY_DIRECTDEBIT = 'afterpay_directdebit', AFTERPAYTOUCH = 'afterpaytouch', AFTERPAYTOUCH_POS = 'afterpaytouch_pos', AGRIBANK = 'agribank', AIRBANK = 'airbank', ALASKA_OPTION = 'alaska_option', ALASKAOPTION = 'alaskaoption', ALBELLIGIFTCARD = 'albelligiftcard', ALELO = 'alelo', ALFA_BANK = 'alfa_bank', ALFABANK = 'alfabank', ALFAMART = 'alfamart', ALIPAY = 'alipay', ALIPAY_CONNECT = 'alipay_connect', ALIPAY_HK = 'alipay_hk', ALIPAY_WAP = 'alipay_wap', ALPHA_BANK = 'alpha_bank', AMAZONPAY = 'amazonpay', AMBANK = 'ambank', AMEX = 'amex', AMEX_AMAZONPAY = 'amex_amazonpay', AMEX_APPLEPAY = 'amex_applepay', AMEX_SAMSUNGPAY = 'amex_samsungpay', ANDROIDPAY = 'androidpay', APPLEPAY = 'applepay', ARGENCARD = 'argencard', ASIAPAY = 'asiapay', ASIAPAY_CIMBCLICK = 'asiapay_cimbclick', ASIAPAY_M2U = 'asiapay_m2u', ASIAPAY_ONEPAY = 'asiapay_onepay', ASIAPAY_UNIONPAY = 'asiapay_unionpay', ATH = 'ath', ATM_BERSAMA = 'atm_bersama', ATOME = 'atome', AURA = 'aura', AUTOPAY = 'autopay', B2S = 'b2s', BABYGIFTCARD = 'babygiftcard', /** * @deprecated Since v3.0.0. Use string literal instead. */ BACNET = 'Bacnet', BACS = 'bacs', BALANCEPLATFORM = 'balanceplatform', BALOTO = 'baloto', BANAMEX = 'banamex', BANCONACIONAL = 'bancoNacional', BANCO_BRADESCO = 'banco_bradesco', BANCODOBRASIL = 'bancodobrasil', BANESE = 'banese', BANESE_CARD_CREDIT = 'banese_card_credit', BANESE_CARD_DEBIT = 'banese_card_debit', BANESE_CARD_PREPAID = 'banese_card_prepaid', BANGKOK_BANK = 'bangkok_bank', BANK = 'bank', BANKTRANSFER = 'bankTransfer', BANKTRANSFER_AT = 'bankTransfer_AT', BANKTRANSFER_AU = 'bankTransfer_AU', BANKTRANSFER_BE = 'bankTransfer_BE', BANKTRANSFER_BG = 'bankTransfer_BG', BANKTRANSFER_CH = 'bankTransfer_CH', BANKTRANSFER_CY = 'bankTransfer_CY', BANKTRANSFER_DE = 'bankTransfer_DE', BANKTRANSFER_DK = 'bankTransfer_DK', BANKTRANSFER_ES = 'bankTransfer_ES', BANKTRANSFER_FI = 'bankTransfer_FI', BANKTRANSFER_FR = 'bankTransfer_FR', BANKTRANSFER_GB = 'bankTransfer_GB', BANKTRANSFER_HU = 'bankTransfer_HU', BANKTRANSFER_IBAN = 'bankTransfer_IBAN', BANKTRANSFER_IE = 'bankTransfer_IE', BANKTRANSFER_IT = 'bankTransfer_IT', BANKTRANSFER_LU = 'bankTransfer_LU', BANKTRANSFER_MT = 'bankTransfer_MT', BANKTRANSFER_MX = 'bankTransfer_MX', BANKTRANSFER_NL = 'bankTransfer_NL', BANKTRANSFER_NO = 'bankTransfer_NO', BANKTRANSFER_PL = 'bankTransfer_PL', BANKTRANSFER_PT = 'bankTransfer_PT', BANKTRANSFER_SE = 'bankTransfer_SE', BANKTRANSFER_SK = 'bankTransfer_SK', BANK_RU = 'bank_ru', BANKAXEPT = 'bankaxept', BANKISLAM = 'bankislam', BANORTE = 'banorte', BAPRO = 'bapro', BCA = 'bca', BCMC = 'bcmc', BCMC_MOBILE = 'bcmc_mobile', BCMC_MOBILE_QR = 'bcmc_mobile_QR', BCMC_MOBILE_APP = 'bcmc_mobile_app', BCP = 'bcp', BEAUTYCADEAUKAART = 'beautycadeaukaart', BENEFIT = 'benefit', BIDV = 'bidv', BIGC = 'bigc', BIJCADEAUCARD = 'bijcadeaucard', BIJCARD = 'bijcard', BIJENKORF = 'bijenkorf', BIJPOINTS = 'bijpoints', BIJVOUCHER = 'bijvoucher', BILL99 = 'bill99', BILLDESK_BILLDESK_162 = 'billdesk/billdesk_162', BILLDESK_BILLDESK_CUB = 'billdesk/billdesk_cub', BILLDESK_BILLDESK_HDF = 'billdesk/billdesk_hdf', BILLDESK_BILLDESK_ICI = 'billdesk/billdesk_ici', BILLDESK_BILLDESK_ONLINE = 'billdesk/billdesk_online', BILLDESK_BILLDESK_PNB = 'billdesk/billdesk_pnb', BILLDESK_BILLDESK_SBI = 'billdesk/billdesk_sbi', BILLDESK_BILLDESK_UPI = 'billdesk/billdesk_upi', BILLDESK_BILLDESK_UTI = 'billdesk/billdesk_uti', BILLDESK_BILLDESK_WALLET = 'billdesk/billdesk_wallet', BILLDESK_162 = 'billdesk_162', BILLDESK_CUB = 'billdesk_cub', BILLDESK_HDF = 'billdesk_hdf', BILLDESK_ICI = 'billdesk_ici', BILLDESK_ONLINE = 'billdesk_online', BILLDESK_SBI = 'billdesk_sbi', BILLDESK_UPI = 'billdesk_upi', BILLDESK_UTI = 'billdesk_uti', BILLDESK_WALLET = 'billdesk_wallet', BITCOIN = 'bitcoin', BLIK = 'blik', BLOEMENGIFTCARD = 'bloemengiftcard', BNI = 'bni', BOKU = 'boku', BOLETO = 'boleto', BOLETOBANCARIO = 'boletobancario', BOLETOBANCARIO_BANCODOBRASIL = 'boletobancario_bancodobrasil', BOLETOBANCARIO_BRADESCO = 'boletobancario_bradesco', BOLETOBANCARIO_HSBC = 'boletobancario_hsbc', BOLETOBANCARIO_ITAU = 'boletobancario_itau', BOLETOBANCARIO_SANTANDER = 'boletobancario_santander', BR_SCHEMES = 'br_schemes', BRADESCO = 'bradesco', BUALUANGIBANKING = 'bualuangibanking', BUNQ = 'bunq', C_BEDRIJFSFIETSPLAN = 'c_bedrijfsfietsplan', C_BYPHONE = 'c_byphone', C_CASH = 'c_cash', C_FACTUUR = 'c_factuur', C_INVOICE = 'c_invoice', C_KAUFPERRECHNUNG = 'c_kaufperrechnung', C_OPREKENING = 'c_oprekening', C_POS = 'c_pos', C_VORKASSE = 'c_vorkasse', CABAL = 'cabal', CARD = 'card', CARNET = 'carnet', CARTEBANCAIRE = 'cartebancaire', CASHCOM = 'cashcom', CASHCOMGIFTCARD = 'cashcomgiftcard', CASHTICKET = 'cashticket', CASHU = 'cashu', CB = 'cb', CCAVENUE = 'ccavenue', CELLULANT = 'cellulant', CEN_PAY = 'cen_pay', CENCOSUD = 'cencosud', CENTRAL = 'central', CENTRAL_FOOD_HALL = 'central_food_hall', CESKA = 'ceska', CHEQUEDEJENEUR = 'chequedejeneur', CIMB = 'cimb', CLEARPAY = 'clearpay', CLICKANDBUY = 'clickandbuy', COBROEXPRESS = 'cobroexpress', CODENSA = 'codensa', COSTES = 'costes', COSTESGIFTCARD = 'costesgiftcard', CREDIT_UNION = 'credit_union', CREDTODOS = 'credtodos', CSOB = 'csob', CU24 = 'cu24', CUP = 'cup', CUP_AMAZONPAY = 'cup_amazonpay', DANA = 'dana', DANKORT = 'dankort', DANSKEBANK = 'danskebank', DECADEAUKAART = 'decadeaukaart', DIEAERZTEBANK = 'dieaerztebank', DINEROMAIL = 'dineromail', DINERS = 'diners', DINNER = 'dinner', DIRECTEBANKING = 'directEbanking', DIRECTDEBIT = 'directdebit', DIRECTDEBIT_BR_BANCODOBRASIL = 'directdebit_BR_bancodobrasil', DIRECTDEBIT_BR_ITAU = 'directdebit_BR_itau', DIRECTDEBIT_GB = 'directdebit_GB', DIRECTDEBIT_NL = 'directdebit_NL', DISCOVER = 'discover', DISCOVER_AMAZONPAY = 'discover_amazonpay', DISCOVER_ANDROIDPAY = 'discover_androidpay', DISCOVER_APPLEPAY = 'discover_applepay', DK = 'dk', DOKU = 'doku', DOKU_ALFAMART = 'doku_alfamart', DOKU_BCA_KLIKPAY = 'doku_bca_klikpay', DOKU_BCA_VA = 'doku_bca_va', DOKU_BNI = 'doku_bni', DOKU_BNI_VA = 'doku_bni_va', DOKU_BRI_VA = 'doku_bri_va', DOKU_BRIEPAY = 'doku_briepay', DOKU_CIMB_VA = 'doku_cimb_va', DOKU_DANAMON_VA = 'doku_danamon_va', DOKU_INDOMARET = 'doku_indomaret', DOKU_MANDIRI_CLICKPAY = 'doku_mandiri_clickpay', DOKU_MANDIRI_VA = 'doku_mandiri_va', DOKU_OVO = 'doku_ovo', DOKU_PERMATA_ATM = 'doku_permata_atm', DOKU_PERMATA_LITE_ATM = 'doku_permata_lite_atm', DOKU_SINARMAS_VA = 'doku_sinarmas_va', DOKU_WALLET = 'doku_wallet', DONGABANK = 'dongabank', DOTPAY = 'dotpay', DOTPAY_1 = 'dotpay/1', DOTPAY_10 = 'dotpay/10', DOTPAY_11 = 'dotpay/11', DOTPAY_16 = 'dotpay/16', DOTPAY_2 = 'dotpay/2', DOTPAY_21 = 'dotpay/21', DOTPAY_24 = 'dotpay/24', DOTPAY_31 = 'dotpay/31', DOTPAY_32 = 'dotpay/32', DOTPAY_35 = 'dotpay/35', DOTPAY_36 = 'dotpay/36', DOTPAY_38 = 'dotpay/38', DOTPAY_4 = 'dotpay/4', DOTPAY_44 = 'dotpay/44', DOTPAY_45 = 'dotpay/45', DOTPAY_46 = 'dotpay/46', DOTPAY_48 = 'dotpay/48', DOTPAY_50 = 'dotpay/50', DOTPAY_51 = 'dotpay/51', DOTPAY_52 = 'dotpay/52', DOTPAY_55 = 'dotpay/55', DOTPAY_56 = 'dotpay/56', DOTPAY_58 = 'dotpay/58', DOTPAY_59 = 'dotpay/59', DOTPAY_6 = 'dotpay/6', DOTPAY_60 = 'dotpay/60', DOTPAY_65 = 'dotpay/65', DOTPAY_66 = 'dotpay/66', DOTPAY_68 = 'dotpay/68', DOTPAY_7 = 'dotpay/7', DOTPAY_70 = 'dotpay/70', DOTPAY_72 = 'dotpay/72', DOTPAY_73 = 'dotpay/73', DOTPAY_74 = 'dotpay/74', DOTPAY_75 = 'dotpay/75', DOTPAY_76 = 'dotpay/76', DOTPAY_80 = 'dotpay/80', DOTPAY_81 = 'dotpay/81', DOTPAY_83 = 'dotpay/83', DOTPAY_84 = 'dotpay/84', DOTPAY_87 = 'dotpay/87', DOTPAY_88 = 'dotpay/88', DOTPAY_89 = 'dotpay/89', DOTPAY_90 = 'dotpay/90', DOTPAY_91 = 'dotpay/91', DOTPAY_92 = 'dotpay/92', DOTPAY_93 = 'dotpay/93', DRAGONPAY = 'dragonpay', DRAGONPAY_CREDITS = 'dragonpay_credits', DRAGONPAY_EBANKING = 'dragonpay_ebanking', DRAGONPAY_EBANKING_BDO = 'dragonpay_ebanking/bdo', DRAGONPAY_EBANKING_BOG = 'dragonpay_ebanking/bog', DRAGONPAY_EBANKING_BPI = 'dragonpay_ebanking/bpi', DRAGONPAY_EBANKING_BPIB = 'dragonpay_ebanking/bpib', DRAGONPAY_EBANKING_CBC = 'dragonpay_ebanking/cbc', DRAGONPAY_EBANKING_DPAY = 'dragonpay_ebanking/dpay', DRAGONPAY_EBANKING_LBPA = 'dragonpay_ebanking/lbpa', DRAGONPAY_EBANKING_MBTC = 'dragonpay_ebanking/mbtc', DRAGONPAY_EBANKING_RCBC = 'dragonpay_ebanking/rcbc', DRAGONPAY_EBANKING_UBP = 'dragonpay_ebanking/ubp', DRAGONPAY_EBANKING_UCPB = 'dragonpay_ebanking/ucpb', DRAGONPAY_GCASH = 'dragonpay_gcash', DRAGONPAY_OTC_BANKING = 'dragonpay_otc_banking', DRAGONPAY_OTC_BANKING_BDOA = 'dragonpay_otc_banking/bdoa', DRAGONPAY_OTC_BANKING_BDRX = 'dragonpay_otc_banking/bdrx', DRAGONPAY_OTC_BANKING_BOGX = 'dragonpay_otc_banking/bogx', DRAGONPAY_OTC_BANKING_BPXB = 'dragonpay_otc_banking/bpxb', DRAGONPAY_OTC_BANKING_CBCX = 'dragonpay_otc_banking/cbcx', DRAGONPAY_OTC_BANKING_EWBX = 'dragonpay_otc_banking/ewbx', DRAGONPAY_OTC_BANKING_LBXB = 'dragonpay_otc_banking/lbxb', DRAGONPAY_OTC_BANKING_MBTX = 'dragonpay_otc_banking/mbtx', DRAGONPAY_OTC_BANKING_PNBB = 'dragonpay_otc_banking/pnbb', DRAGONPAY_OTC_BANKING_PNXB = 'dragonpay_otc_banking/pnxb', DRAGONPAY_OTC_BANKING_RCXB = 'dragonpay_otc_banking/rcxb', DRAGONPAY_OTC_BANKING_RSXB = 'dragonpay_otc_banking/rsxb', DRAGONPAY_OTC_BANKING_SBCA = 'dragonpay_otc_banking/sbca', DRAGONPAY_OTC_BANKING_SBCB = 'dragonpay_otc_banking/sbcb', DRAGONPAY_OTC_BANKING_UBXB = 'dragonpay_otc_banking/ubxb', DRAGONPAY_OTC_BANKING_UCXB = 'dragonpay_otc_banking/ucxb', DRAGONPAY_OTC_INTERNATIONAL = 'dragonpay_otc_international', DRAGONPAY_OTC_NON_BANKING = 'dragonpay_otc_non_banking', DRAGONPAY_OTC_NON_BANKING_BAYD = 'dragonpay_otc_non_banking/bayd', DRAGONPAY_OTC_NON_BANKING_CEBL = 'dragonpay_otc_non_banking/cebl', DRAGONPAY_OTC_NON_BANKING_CEBP = 'dragonpay_otc_non_banking/cebp', DRAGONPAY_OTC_NON_BANKING_ECPY = 'dragonpay_otc_non_banking/ecpy', DRAGONPAY_OTC_NON_BANKING_LBC = 'dragonpay_otc_non_banking/lbc', DRAGONPAY_OTC_NON_BANKING_MLH = 'dragonpay_otc_non_banking/mlh', DRAGONPAY_OTC_NON_BANKING_RDS = 'dragonpay_otc_non_banking/rds', DRAGONPAY_OTC_NON_BANKING_RLNT = 'dragonpay_otc_non_banking/rlnt', DRAGONPAY_OTC_NON_BANKING_SMR = 'dragonpay_otc_non_banking/smr', DRAGONPAY_OTC_PHILIPPINES = 'dragonpay_otc_philippines', DRAGONPAY_SEVENELEVEN = 'dragonpay_seveneleven', DUITNOWQR = 'duitnowqr', EAGLEEYE_VOUCHER = 'eagleeye_voucher', EASYBANK = 'easybank', EBANKING_FI = 'ebanking_FI', EBUCKS = 'ebucks', ECONTEXT_ATM = 'econtext_atm', ECONTEXT_ONLINE = 'econtext_online', ECONTEXT_SEVEN_ELEVEN = 'econtext_seven_eleven', ECONTEXT_STORES = 'econtext_stores', EDENRED_MEAL_VOUCHER = 'edenred_meal_voucher', EFECTIVO_BANCOMER = 'efectivo_bancomer', EFECTIVO_IXE = 'efectivo_ixe', EFECTY = 'efecty', EFTPOS = 'eftpos', EFTPOS_AUSTRALIA = 'eftpos_australia', EFTPOS_AUSTRALIA_CHQ = 'eftpos_australia_chq', EFTPOS_AUSTRALIA_SAV = 'eftpos_australia_sav', ELECTRON = 'electron', ELECTRON_AMAZONPAY = 'electron_amazonpay', ELECTRON_APPLEPAY = 'electron_applepay', ELECTRON_SAMSUNGPAY = 'electron_samsungpay', ELEKSNET = 'eleksnet', ELO = 'elo', ELO_AMAZONPAY = 'elo_amazonpay', ELO_APPLEPAY = 'elo_applepay', ELODEBIT_AMAZONPAY = 'elodebit_amazonpay', ELV = 'elv', ENETS = 'enets', ENTERCASH = 'entercash', ENTERCASH_200 = 'entercash/200', ENTERCASH_204 = 'entercash/204', ENTERCASH_205 = 'entercash/205', ENTERCASH_206 = 'entercash/206', ENTERCASH_207 = 'entercash/207', ENTERCASH_208 = 'entercash/208', ENTERCASH_209 = 'entercash/209', ENTERCASH_211 = 'entercash/211', ENTERCASH_213 = 'entercash/213', ENTERCASH_216 = 'entercash/216', ENTERCASH_231 = 'entercash/231', ENTERCASH_232 = 'entercash/232', ENTERCASH_233 = 'entercash/233', ENTERCASH_234 = 'entercash/234', ENTERCASH_235 = 'entercash/235', ENTERCASH_240 = 'entercash/240', ENTERCASH_260 = 'entercash/260', ENTERCASH_265 = 'entercash/265', ENTERCASH_500 = 'entercash/500', ENTERCASH_505 = 'entercash/505', ENTERCASH_550 = 'entercash/550', ENTERCASH_551 = 'entercash/551', ENTERCASH_552 = 'entercash/552', ENTERCASH_553 = 'entercash/553', ENTERCASH_554 = 'entercash/554', ENTERCASH_555 = 'entercash/555', ENTERCASH_556 = 'entercash/556', ENTERCASH_557 = 'entercash/557', ENTERCASH_640 = 'entercash/640', ENTERCASH_720 = 'entercash/720', ENTERCASH_721 = 'entercash/721', ENTERCASH_722 = 'entercash/722', ENTERCASH_723 = 'entercash/723', ENTERCASH_724 = 'entercash/724', ENTERCASH_750 = 'entercash/750', ENTERCASH_751 = 'entercash/751', ENTERCASH_752 = 'entercash/752', ENTERCASH_753 = 'entercash/753', ENTERCASH_940 = 'entercash/940', ENTERCASH_941 = 'entercash/941', ENTERCASH_942 = 'entercash/942', ENTERCASH_943 = 'entercash/943', ENTERTAINMENTCARD = 'entertainmentcard', EPAY = 'epay', EPS = 'eps', EPS_09350598_7BA4_4AFB_B706_843E49A64759 = 'eps/09350598-7ba4-4afb-b706-843e49a64759', EPS_1190C4D1_B37A_487E_9355_E0A067F54A9F = 'eps/1190c4d1-b37a-487e-9355-e0a067f54a9f', EPS_1D48E2F7_604C_4D1D_894E_170635D1A645 = 'eps/1d48e2f7-604c-4d1d-894e-170635d1a645', EPS_242209E6_A81F_48BC_9041_A31306CB153F = 'eps/242209e6-a81f-48bc-9041-a31306cb153f', EPS_25942CC9_617D_42A1_89BA_D1AB5A05770A = 'eps/25942cc9-617d-42a1-89ba-d1ab5a05770a', EPS_31659756_FB43_4094_AFD5_82980FF48750 = 'eps/31659756-fb43-4094-afd5-82980ff48750', EPS_33FDC41FC_3D3D_4EE3_A1FE_CD79CFD58EA3 = 'eps/33fdc41fc-3d3d-4ee3-a1fe-cd79cfd58ea3', EPS_3ED7DA63_0924_424C_A822_2A0DFAAADCE1 = 'eps/3ed7da63-0924-424c-a822-2a0dfaaadce1', EPS_3FDC41FC_3D3D_4EE3_A1FE_CD79CFD58EA3 = 'eps/3fdc41fc-3d3d-4ee3-a1fe-cd79cfd58ea3', EPS_43B3AF24_7969_4701_A7CE_1F9FC6EEF834 = 'eps/43b3af24-7969-4701-a7ce-1f9fc6eef834', EPS_43DCA1AB_4BA3_41AC_B672_5518362CDE54 = 'eps/43dca1ab-4ba3-41ac-b672-5518362cde54', EPS_479FF5D2_6F44_4921_9330_6BF6763806E9 = 'eps/479ff5d2-6f44-4921-9330-6bf6763806e9', EPS_4A0A975B_0594_4B40_9068_39F77B3A91F9 = 'eps/4a0a975b-0594-4b40-9068-39f77b3a91f9', EPS_52D9DF19_F5C5_401F_89D9_38A8B36AE721 = 'eps/52d9df19-f5c5-401f-89d9-38a8b36ae721', EPS_54016D9D_31B0_4DB3_9EAF_CF9FBC58EE81 = 'eps/54016d9d-31b0-4db3-9eaf-cf9fbc58ee81', EPS_64669764_E6FC_401C_8F3D_26E9169BA6FF = 'eps/64669764-e6fc-401c-8f3d-26e9169ba6ff', EPS_6765E225_A0DC_4481_9666_E26303D4F221 = 'eps/6765e225-a0dc-4481-9666-e26303d4f221', EPS_68DB503B_EA48_4681_814B_10FC74064F68 = 'eps/68db503b-ea48-4681-814b-10fc74064f68', EPS_69A67A81_7518_463F_8527_3F1128AF1F93 = 'eps/69a67a81-7518-463f-8527-3f1128af1f93', EPS_7217D822_470C_4768_B346_A440E8CB7096 = 'eps/7217d822-470c-4768-b346-a440e8cb7096', EPS_744D26DA_90C9_49EB_9A0B_9A7F1FA3A8D2 = 'eps/744d26da-90c9-49eb-9a0b-9a7f1fa3a8d2', EPS_84F468DC_37B4_44AA_8301_50A16F746464 = 'eps/84f468dc-37b4-44aa-8301-50a16f746464', EPS_880CC8C4_D723_49AB_8299_DC35EAFC9385 = 'eps/880cc8c4-d723-49ab-8299-dc35eafc9385', EPS_89C79DA1_1B75_41E2_9254_118F36231BBD = 'eps/89c79da1-1b75-41e2-9254-118f36231bbd', EPS_8B0BFEEA_FBB0_4337_B3A1_0E25C0F060FC = 'eps/8b0bfeea-fbb0-4337-b3a1-0e25c0f060fc', EPS_958D1CF8_0D2D_4B21_B1F2_8383BB9F243F = 'eps/958d1cf8-0d2d-4b21-b1f2-8383bb9f243f', EPS_9C92D29B_A898_488E_836F_E93B911F9A94 = 'eps/9c92d29b-a898-488e-836f-e93b911f9a94', EPS_A990A73B_3D6B_4D91_9B8A_856428089B34 = 'eps/a990a73b-3d6b-4d91-9b8a-856428089b34', EPS_AA1DE16A_223F_494F_90F0_01FCE9C065FB = 'eps/aa1de16a-223f-494f-90f0-01fce9c065fb', EPS_B3B1554F_C9AE_4396_A62F_BAFFB8A2DE1C = 'eps/b3b1554f-c9ae-4396-a62f-baffb8a2de1c', EPS_B42DD796_8BDA_4893_ACC2_DDFAE9C9CDB7 = 'eps/b42dd796-8bda-4893-acc2-ddfae9c9cdb7', EPS_BA7199CC_F057_42F2_9856_2378ABF21638 = 'eps/ba7199cc-f057-42f2-9856-2378abf21638', EPS_BB7D223A_17D5_48AF_A6EF_8A2BF5A4E5D9 = 'eps/bb7d223a-17d5-48af-a6ef-8a2bf5a4e5d9', EPS_BBD44F4D_609B_454E_8D5A_E0D1AC21F15A = 'eps/bbd44f4d-609b-454e-8d5a-e0d1ac21f15a', EPS_C522E299_479C_4134_849F_A6EF0399A6E0 = 'eps/c522e299-479c-4134-849f-a6ef0399a6e0', EPS_CC4A034E_F8A1_4CE4_A96B_1CD251AF03B5 = 'eps/cc4a034e-f8a1-4ce4-a96b-1cd251af03b5', EPS_D5639C17_0207_4D49_8708_922181135AD1 = 'eps/d5639c17-0207-4d49-8708-922181135ad1', EPS_D5D5B133_1C0D_4C08_B2BE_3C9B116DC326 = 'eps/d5d5b133-1c0d-4c08-b2be-3c9b116dc326', EPS_E15C6132_430F_415C_AC95_C127ECB49D55 = 'eps/e15c6132-430f-415c-ac95-c127ecb49d55', EPS_E2E97AAA_DE4C_4E18_9431_D99790773433 = 'eps/e2e97aaa-de4c-4e18-9431-d99790773433', EPS_E590EB4F_B805_43F7_86A0_4EA3F560B18F = 'eps/e590eb4f-b805-43f7-86a0-4ea3f560b18f', EPS_E6819E7A_F663_414B_92EC_CF7C82D2F4E5 = 'eps/e6819e7a-f663-414b-92ec-cf7c82d2f4e5', EPS_EE9FC487_EBE0_486C_8101_17DCE5141A67 = 'eps/ee9fc487-ebe0-486c-8101-17dce5141a67', EPS_EFF103E6_843D_48B7_A6E6_FBD88F511B11 = 'eps/eff103e6-843d-48b7-a6e6-fbd88f511b11', EPS_F848C582_1B94_4E13_B58E_B3A2C68A3FBA = 'eps/f848c582-1b94-4e13-b58e-b3a2c68a3fba', ESA_PAY = 'esa_pay', EXPERTGIFTCARD = 'expertgiftcard', FACILYPAY = 'facilypay', FACILYPAY_10X = 'facilypay_10x', FACILYPAY_12X = 'facilypay_12x', FACILYPAY_3X = 'facilypay_3x', FACILYPAY_4X = 'facilypay_4x', FACILYPAY_6X = 'facilypay_6x', FAKTURA = 'faktura', FAMILYMART = 'familymart', FASHIONCHEQUE = 'fashioncheque', FAWRY = 'fawry', FIO_BANKA = 'fio_banka', FIS_MAYORSGIFTCARD = 'fis_mayorsgiftcard', FLEUROP = 'fleurop', FLEUROPBLOEMENBON = 'fleuropbloemenbon', FONQ = 'fonq', FONQGIFTCARD = 'fonqgiftcard', FORBRUGSFORENINGEN = 'forbrugsforeningen', FORTIS = 'fortis', FPX = 'fpx', FPX_ABB = 'fpx_abb', FPX_ABMB = 'fpx_abmb', FPX_AMB = 'fpx_amb', FPX_BIMB = 'fpx_bimb', FPX_BKRM = 'fpx_bkrm', FPX_CIMBCLICKS = 'fpx_cimbclicks', FPX_HLB = 'fpx_hlb', FPX_MB2U = 'fpx_mb2u', FPX_OCBC = 'fpx_ocbc', FPX_PBB = 'fpx_pbb', FPX_RHB = 'fpx_rhb', FPX_SCB = 'fpx_scb', FPX_UOB = 'fpx_uob', FRIESLAND_BANK = 'friesland_bank', GALLGALL = 'gallgall', GARTNER = 'gartner', GCASH = 'gcash', GE = 'ge', GENERIC_BANKTRANSFER = 'generic_banktransfer', GENERIC_WALLET = 'generic_wallet', GENERICGIFTCARD = 'genericgiftcard', GIFTCARD = 'giftcard', GIFTFOR2CARD = 'giftfor2card', GIROCARD = 'girocard', GIROPAY = 'giropay', GIVEX = 'givex', GLOBE_GCASH = 'globe_gcash', GLOBEGCASH = 'globegcash', GOLDSMITHSCARD = 'goldsmithscard', GOOGLEPAY = 'googlepay', GOOGLEWALLET = 'googlewallet', GOPAY_WALLET = 'gopay_wallet', GRABPAY = 'grabpay', GRABPAY_MY = 'grabpay_MY', GRABPAY_PH = 'grabpay_PH', GRABPAY_SG = 'grabpay_SG', GRABPAY_TH = 'grabpay_TH', GRABPAY_POS = 'grabpay_pos', GRUPO_MUTUAL = 'grupo_mutual', HALLMARK = 'hallmark', HALLMARKCARD = 'hallmarkcard', HANDELSBAN = 'handelsban', HANDELSBANKEN = 'handelsbanken', HANSABANK = 'hansabank', HDFC = 'hdfc', HELM = 'helm', HIPER = 'hiper', HIPERCARD = 'hipercard', HMLINGERIE = 'hmlingerie', HOMEWORKS = 'homeworks', HONG_LEONG = 'hong_leong', HSBC = 'hsbc', HYPO_ALPE_ADRIA = 'hypo_alpe_adria', HYPO_LANDESBANK_VORARLBERG = 'hypo_landesbank_vorarlberg', HYPO_NOE_GRUPPE = 'hypo_noe_gruppe', HYPO_TIROL_BANK = 'hypo_tirol_bank', HYUNDAI_CARD = 'hyundai_card', IDEAL = 'ideal', IDEAL_0021 = 'ideal/0021', IDEAL_0031 = 'ideal/0031', IDEAL_0161 = 'ideal/0161', IDEAL_0511 = 'ideal/0511', IDEAL_0721 = 'ideal/0721', IDEAL_0751 = 'ideal/0751', IDEAL_0761 = 'ideal/0761', IDEAL_0771 = 'ideal/0771', IDEAL_0801 = 'ideal/0801', IDEAL_0802 = 'ideal/0802', IDEAL_0803 = 'ideal/0803', IDEAL_0804 = 'ideal/0804', IDEAL_0805 = 'ideal/0805', IDEAL_1151 = 'ideal/1151', IGIVE = 'igive', IKANO = 'ikano', IMMO_BANK = 'immo-bank', INICISINIPAY_ACCOUNTTRANSFER = 'inicisIniPay_accounttransfer', INICISINIPAY_CREDITCARD = 'inicisIniPay_creditcard', INICISMOBILE_ACCOUNTTRANSFER = 'inicisMobile_accounttransfer', INICISMOBILE_CREDITCARD = 'inicisMobile_creditcard', INICISMOBILE_MOBILEPHONE = 'inicisMobile_mobilephone', INICIS_CREDITCARD = 'inicis_creditcard', INTERAC = 'interac', INTERAC_AMAZONPAY = 'interac_amazonpay', INTERAC_APPLEPAY = 'interac_applepay', INTERAC_CARD = 'interac_card', INTERBANK = 'interbank', INTERLINK = 'interlink', IPAY = 'ipay', IPAY88 = 'ipay88', ISRACARD = 'isracard', ITAU = 'itau', IVR = 'ivr', IVRLANDLINE = 'ivrLandline', IVRMOBILE = 'ivrMobile', IXE = 'ixe', JCB = 'jcb', JCB_APPLEPAY = 'jcb_applepay', JUST_PAY = 'just_pay', KADOWERELD = 'kadowereld', KAKAOPAY = 'kakaopay', KAREN_MILLEN = 'karen_millen', KARENMILLEN = 'karenmillen', KARENMILLENGIFTCARD = 'karenmillengiftcard', KASIKORNBANK = 'kasikornbank', KCP_BANKTRANSFER = 'kcp_banktransfer', KCP_CREDITCARD = 'kcp_creditcard', KCP_PAYCO = 'kcp_payco', KLARNA_PAY_LATER = 'klarna-pay-later', KLARNA_PAY_NOW = 'klarna-pay-now', KLARNA_SLICE = 'klarna-slice', KLARNA = 'klarna', KLARNA_ACCOUNT = 'klarna_account', KLARNA_B2B = 'klarna_b2b', KLARNA_PAYNOW = 'klarna_paynow', KLARNAPAYMENTS = 'klarnapayments', KLARNAPAYMENTS_ACCOUNT = 'klarnapayments_account', KLARNAPAYMENTS_B2B = 'klarnapayments_b2b', KMART = 'kmart', KNET = 'knet', KONBINI = 'konbini', KOREAN_LOCAL_CARD = 'korean_local_card', KRUNGSRI_ATM = 'krungsri_atm', KRUNGTHAI = 'krungthai', KRUNSGRI = 'krunsgri', LASER = 'laser', LAWESON = 'laweson', LHV = 'lhv', LIANLIANPAY_ABC = 'lianlianpay_abc', LIANLIANPAY_BCM = 'lianlianpay_bcm', LIANLIANPAY_BEA = 'lianlianpay_bea', LIANLIANPAY_BOB = 'lianlianpay_bob', LIANLIANPAY_BOC = 'lianlianpay_boc', LIANLIANPAY_CCIB = 'lianlianpay_ccib', LIANLIANPAY_CCOB = 'lianlianpay_ccob', LIANLIANPAY_CEB = 'lianlianpay_ceb', LIANLIANPAY_CGB = 'lianlianpay_cgb', LIANLIANPAY_CMB = 'lianlianpay_cmb', LIANLIANPAY_CMBC = 'lianlianpay_cmbc', LIANLIANPAY_CREDITCARD = 'lianlianpay_creditcard', LIANLIANPAY_DEBITCARD = 'lianlianpay_debitcard', LIANLIANPAY_EBANKING = 'lianlianpay_ebanking', LIANLIANPAY_EBANKING_CREDIT_01020000 = 'lianlianpay_ebanking_credit/01020000', LIANLIANPAY_EBANKING_CREDIT_01030000 = 'lianlianpay_ebanking_credit/01030000', LIANLIANPAY_EBANKING_CREDIT_01040000 = 'lianlianpay_ebanking_credit/01040000', LIANLIANPAY_EBANKING_CREDIT_01050000 = 'lianlianpay_ebanking_credit/01050000', LIANLIANPAY_EBANKING_CREDIT_03010000 = 'lianlianpay_ebanking_credit/03010000', LIANLIANPAY_EBANKING_CREDIT_03020000 = 'lianlianpay_ebanking_credit/03020000', LIANLIANPAY_EBANKING_CREDIT_03030000 = 'lianlianpay_ebanking_credit/03030000', LIANLIANPAY_EBANKING_CREDIT_03040000 = 'lianlianpay_ebanking_credit/03040000', LIANLIANPAY_EBANKING_CREDIT_03050000 = 'lianlianpay_ebanking_credit/03050000', LIANLIANPAY_EBANKING_CREDIT_03060000 = 'lianlianpay_ebanking_credit/03060000', LIANLIANPAY_EBANKING_CREDIT_03070000 = 'lianlianpay_ebanking_credit/03070000', LIANLIANPAY_EBANKING_CREDIT_03080000 = 'lianlianpay_ebanking_credit/03080000', LIANLIANPAY_EBANKING_CREDIT_03100000 = 'lianlianpay_ebanking_credit/03100000', LIANLIANPAY_EBANKING_CREDIT_03200000 = 'lianlianpay_ebanking_credit/03200000', LIANLIANPAY_EBANKING_CREDIT_1000000 = 'lianlianpay_ebanking_credit/1000000', LIANLIANPAY_EBANKING_CREDIT_4031000 = 'lianlianpay_ebanking_credit/4031000', LIANLIANPAY_EBANKING_DEBIT_01020000 = 'lianlianpay_ebanking_debit/01020000', LIANLIANPAY_EBANKING_DEBIT_01030000 = 'lianlianpay_ebanking_debit/01030000', LIANLIANPAY_EBANKING_DEBIT_01040000 = 'lianlianpay_ebanking_debit/01040000', LIANLIANPAY_EBANKING_DEBIT_01050000 = 'lianlianpay_ebanking_debit/01050000', LIANLIANPAY_EBANKING_DEBIT_03010000 = 'lianlianpay_ebanking_debit/03010000', LIANLIANPAY_EBANKING_DEBIT_03020000 = 'lianlianpay_ebanking_debit/03020000', LIANLIANPAY_EBANKING_DEBIT_03030000 = 'lianlianpay_ebanking_debit/03030000', LIANLIANPAY_EBANKING_DEBIT_03040000 = 'lianlianpay_ebanking_debit/03040000', LIANLIANPAY_EBANKING_DEBIT_03050000 = 'lianlianpay_ebanking_debit/03050000', LIANLIANPAY_EBANKING_DEBIT_03060000 = 'lianlianpay_ebanking_debit/03060000', LIANLIANPAY_EBANKING_DEBIT_03070000 = 'lianlianpay_ebanking_debit/03070000', LIANLIANPAY_EBANKING_DEBIT_03080000 = 'lianlianpay_ebanking_debit/03080000', LIANLIANPAY_EBANKING_DEBIT_03100000 = 'lianlianpay_ebanking_debit/03100000', LIANLIANPAY_EBANKING_DEBIT_03200000 = 'lianlianpay_ebanking_debit/03200000', LIANLIANPAY_EBANKING_DEBIT_1000000 = 'lianlianpay_ebanking_debit/1000000', LIANLIANPAY_EBANKING_DEBIT_4031000 = 'lianlianpay_ebanking_debit/4031000', LIANLIANPAY_EBANKING_ENTERPRISE_01020000 = 'lianlianpay_ebanking_enterprise/01020000', LIANLIANPAY_EBANKING_ENTERPRISE_01030000 = 'lianlianpay_ebanking_enterprise/01030000', LIANLIANPAY_EBANKING_ENTERPRISE_01040000 = 'lianlianpay_ebanking_enterprise/01040000', LIANLIANPAY_EBANKING_ENTERPRISE_01050000 = 'lianlianpay_ebanking_enterprise/01050000', LIANLIANPAY_EBANKING_ENTERPRISE_03010000 = 'lianlianpay_ebanking_enterprise/03010000', LIANLIANPAY_EBANKING_ENTERPRISE_03020000 = 'lianlianpay_ebanking_enterprise/03020000', LIANLIANPAY_EBANKING_ENTERPRISE_03030000 = 'lianlianpay_ebanking_enterprise/03030000', LIANLIANPAY_EBANKING_ENTERPRISE_03040000 = 'lianlianpay_ebanking_enterprise/03040000', LIANLIANPAY_EBANKING_ENTERPRISE_03050000 = 'lianlianpay_ebanking_enterprise/03050000', LIANLIANPAY_EBANKING_ENTERPRISE_03060000 = 'lianlianpay_ebanking_enterprise/03060000', LIANLIANPAY_EBANKING_ENTERPRISE_03070000 = 'lianlianpay_ebanking_enterprise/03070000', LIANLIANPAY_EBANKING_ENTERPRISE_03080000 = 'lianlianpay_ebanking_enterprise/03080000', LIANLIANPAY_EBANKING_ENTERPRISE_03100000 = 'lianlianpay_ebanking_enterprise/03100000', LIANLIANPAY_EBANKING_ENTERPRISE_03200000 = 'lianlianpay_ebanking_enterprise/03200000', LIANLIANPAY_EBANKING_ENTERPRISE_1000000 = 'lianlianpay_ebanking_enterprise/1000000', LIANLIANPAY_EBANKING_ENTERPRISE_4031000 = 'lianlianpay_ebanking_enterprise/4031000', LIANLIANPAY_HXB = 'lianlianpay_hxb', LIANLIANPAY_ICBC = 'lianlianpay_icbc', LIANLIANPAY_PAB = 'lianlianpay_pab', LIANLIANPAY_PSBC = 'lianlianpay_psbc', LIANLIANPAY_SPDB = 'lianlianpay_spdb', LOODS5GIFTCARD = 'loods5giftcard', LOODS5PREPAIDCARD = 'loods5prepaidcard', M_PAY = 'm_pay', MADA = 'mada', MADA_CARD = 'mada_card', MAESTRO = 'maestro', MAESTRO_AMAZONPAY = 'maestro_amazonpay', MAESTRO_APPLEPAY = 'maestro_applepay', MAESTRO_SAMSUNGPAY = 'maestro_samsungpay', MAESTROUK = 'maestrouk', MANDIRI = 'mandiri', MAPPINWEBBCARD = 'mappinwebbcard', MARITIME = 'maritime', MASTERPASS = 'masterpass', MAYBANK = 'maybank', MAYORS = 'mayors', MB = 'mb', MBANK = 'mbank', MBWAY = 'mbway', MC = 'mc', MC_AMAZONPAY = 'mc_amazonpay', MC_ANDROIDPAY = 'mc_androidpay', MC_APPLEPAY = 'mc_applepay', MC_SAMSUNGPAY = 'mc_samsungpay', MEALVOUCHER_FR_GROUPEUP = 'mealVoucher_FR_groupeup', MEALVOUCHER_FR_NATIXIS = 'mealVoucher_FR_natixis', MEALVOUCHER_FR_SODEXO = 'mealVoucher_FR_sodexo', MERCADOPAGO = 'mercadopago', MINISTOP = 'ministop', MIR = 'mir', MOBILE_SUICA = 'mobile_suica', MOBILEPAY = 'mobilepay', MOLPAY = 'molpay', MOLPAY_A = 'molpay_a', MOLPAY_ABMB = 'molpay_abmb', MOLPAY_ACB = 'molpay_acb', MOLPAY_AFFIN_EPG = 'molpay_affin_epg', MOLPAY_AGRIBANK = 'molpay_agribank', MOLPAY_ALIPAY = 'molpay_alipay', MOLPAY_AMB = 'molpay_amb', MOLPAY_BANGKOKBANK = 'molpay_bangkokbank', MOLPAY_BANKGKOKBANK = 'molpay_bankgkokbank', MOLPAY_BANKISLAM = 'molpay_bankislam', MOLPAY_BIDV = 'molpay_bidv', MOLPAY_BKRM = 'molpay_bkrm', MOLPAY_BOOST = 'molpay_boost', MOLPAY_CASH = 'molpay_cash', MOLPAY_CIMB = 'molpay_cimb', MOLPAY_CIMB_VA = 'molpay_cimb_va', MOLPAY_DONGABANK = 'molpay_dongabank', MOLPAY_EBANKING_MY = 'molpay_ebanking_MY', MOLPAY_EBANKING_TH = 'molpay_ebanking_TH', MOLPAY_EBANKING_TH_MOLPAY_BANGKOKBANK = 'molpay_ebanking_TH/molpay_bangkokbank', MOLPAY_EBANKING_TH_MOLPAY_KBANK = 'molpay_ebanking_TH/molpay_kbank', MOLPAY_EBANKING_TH_MOLPAY_KRUNGSRIBANK = 'molpay_ebanking_TH/molpay_krungsribank', MOLPAY_EBANKING_TH_MOLPAY_KRUNGTHAIBANK = 'molpay_ebanking_TH/molpay_krungthaibank', MOLPAY_EBANKING_TH_MOLPAY_SIAMCOMMERCIALBANK = 'molpay_ebanking_TH/molpay_siamcommercialbank', MOLPAY_EBANKING_VN = 'molpay_ebanking_VN', MOLPAY_EBANKING_VN_VTCPAY_ACB = 'molpay_ebanking_VN/vtcpay-acb', MOLPAY_EBANKING_VN_VTCPAY_AGRIBANK = 'molpay_ebanking_VN/vtcpay-agribank', MOLPAY_EBANKING_VN_VTCPAY_BIDV = 'molpay_ebanking_VN/vtcpay-bidv', MOLPAY_EBANKING_VN_VTCPAY_DONGABANK = 'molpay_ebanking_VN/vtcpay-dongabank', MOLPAY_EBANKING_VN_VTCPAY_MARITIMEBANK = 'molpay_ebanking_VN/vtcpay-maritimebank', MOLPAY_EBANKING_VN_VTCPAY_MB = 'molpay_ebanking_VN/vtcpay-mb', MOLPAY_EBANKING_VN_VTCPAY_SACOMBANK = 'molpay_ebanking_VN/vtcpay-sacombank', MOLPAY_EBANKING_VN_VTCPAY_TECHCOMBANK = 'molpay_ebanking_VN/vtcpay-techcombank', MOLPAY_EBANKING_VN_VTCPAY_VIETCOMBANK = 'molpay_ebanking_VN/vtcpay-vietcombank', MOLPAY_EBANKING_VN_VTCPAY_VIETINBANK = 'molpay_ebanking_VN/vtcpay-vietinbank', MOLPAY_EBANKING_FPX_MY = 'molpay_ebanking_fpx_MY', MOLPAY_EBANKING_FPX_MY_FPX_ABB = 'molpay_ebanking_fpx_MY/fpx_abb', MOLPAY_EBANKING_FPX_MY_FPX_ABMB = 'molpay_ebanking_fpx_MY/fpx_abmb', MOLPAY_EBANKING_FPX_MY_FPX_AMB = 'molpay_ebanking_fpx_MY/fpx_amb', MOLPAY_EBANKING_FPX_MY_FPX_BIMB = 'molpay_ebanking_fpx_MY/fpx_bimb', MOLPAY_EBANKING_FPX_MY_FPX_BKRM = 'molpay_ebanking_fpx_MY/fpx_bkrm', MOLPAY_EBANKING_FPX_MY_FPX_BMMB = 'molpay_ebanking_fpx_MY/fpx_bmmb', MOLPAY_EBANKING_FPX_MY_FPX_BSN = 'molpay_ebanking_fpx_MY/fpx_bsn', MOLPAY_EBANKING_FPX_MY_FPX_CIMBCLICKS = 'molpay_ebanking_fpx_MY/fpx_cimbclicks', MOLPAY_EBANKING_FPX_MY_FPX_HLB = 'molpay_ebanking_fpx_MY/fpx_hlb', MOLPAY_EBANKING_FPX_MY_FPX_HSBC = 'molpay_ebanking_fpx_MY/fpx_hsbc', MOLPAY_EBANKING_FPX_MY_FPX_KFH = 'molpay_ebanking_fpx_MY/fpx_kfh', MOLPAY_EBANKING_FPX_MY_FPX_MB2U = 'molpay_ebanking_fpx_MY/fpx_mb2u', MOLPAY_EBANKING_FPX_MY_FPX_OCBC = 'molpay_ebanking_fpx_MY/fpx_ocbc', MOLPAY_EBANKING_FPX_MY_FPX_PBB = 'molpay_ebanking_fpx_MY/fpx_pbb', MOLPAY_EBANKING_FPX_MY_FPX_RHB = 'molpay_ebanking_fpx_MY/fpx_rhb', MOLPAY_EBANKING_FPX_MY_FPX_SCB = 'molpay_ebanking_fpx_MY/fpx_scb', MOLPAY_EBANKING_FPX_MY_FPX_UOB = 'molpay_ebanking_fpx_MY/fpx_uob', MOLPAY_ENETSD = 'molpay_enetsd', MOLPAY_EPAY = 'molpay_epay', MOLPAY_ESAPAY = 'molpay_esapay', MOLPAY_FPX = 'molpay_fpx', MOLPAY_HLB = 'molpay_hlb', MOLPAY_KBANK = 'molpay_kbank', MOLPAY_KRUNGSRIBANK = 'molpay_krungsribank', MOLPAY_KRUNGTHAIBANK = 'molpay_krungthaibank', MOLPAY_MARITIMEBANK = 'molpay_maritimebank', MOLPAY_MAYBANK2U = 'molpay_maybank2u', MOLPAY_MB = 'molpay_mb', MOLPAY_NGANLUONG = 'molpay_nganluong', MOLPAY_OCBC = 'molpay_ocbc', MOLPAY_PAYLINK = 'molpay_paylink', MOLPAY_PAYSBUY = 'molpay_paysbuy', MOLPAY_POINTS = 'molpay_points', MOLPAY_PUBLICBANK = 'molpay_publicbank', MOLPAY_RHB = 'molpay_rhb', MOLPAY_SACOMBANK = 'molpay_sacombank', MOLPAY_SCB = 'molpay_scb', MOLPAY_SENHENG = 'molpay_senheng', MOLPAY_SIAMCOMMERCIALBANK = 'molpay_siamcommercialbank', MOLPAY_SINGPOST = 'molpay_singpost', MOLPAY_TECHCOMBANK = 'molpay_techcombank', MOLPAY_UOB = 'molpay_uob', MOLPAY_VIETCOMBANK = 'molpay_vietcombank', MOLPAY_VIETINBANK = 'molpay_vietinbank', MOLPAY_WALLET = 'molpay_wallet', MOMO_ATM = 'momo_atm', MOMO_WALLET = 'momo_wallet', MONETA = 'moneta', MONETA_CZ = 'moneta_cz', MONEYBOOKERS = 'moneybookers', MONEYMAIL = 'moneymail', MONEYOU = 'moneyou', MUCAP = 'mucap', MULA = 'mula', MULTIBANCO = 'multibanco', MULTICAJA = 'multicaja', MUSICALCARD = 'musicalcard', NAPS = 'naps', NARANJA = 'naranja', NATIONALEBIOSCOOPBON = 'nationalebioscoopbon', NATIONALETUINBON = 'nationaletuinbon', NATIONALEVERWENCADEAUBON = 'nationaleverwencadeaubon', NEDBANK = 'nedbank', NETAXEPT_BANKAXESS = 'netaxept_bankaxess', NETELLER = 'neteller', NETPLUS = 'netplus', NETS = 'nets', NETSCARD = 'netscard', NGANLUONG = 'nganluong', NOCARD = 'nocard', NORDEA = 'nordea', NYCE = 'nyce', OASIS = 'oasis', OASISGIFTCARD = 'oasisgiftcard', OBERTHUR = 'oberthur', OFFICE_MATE = 'office_mate', OMANNET = 'omannet', OMASP = 'omasp', ONEBIP = 'onebip', ONETWOTHREE = 'onetwothree', ONEY = 'oney', ONEY_CHIP = 'oney_chip', ONEY_POS = 'oney_pos', ONLINE_RU = 'online_RU', ONLINEBANKING_PL = 'onlineBanking_PL', OPENBANKING = 'openbanking', OPENBANKING_UK = 'openbanking_UK', OPENBANKING_UK_1 = 'openbanking_UK/1', OPENBANKING_UK_10 = 'openbanking_UK/10', OPENBANKING_UK_11 = 'openbanking_UK/11', OPENBANKING_UK_12 = 'openbanking_UK/12', OPENBANKING_UK_13 = 'openbanking_UK/13', OPENBANKING_UK_14 = 'openbanking_UK/14', OPENBANKING_UK_15 = 'openbanking_UK/15', OPENBANKING_UK_16 = 'openbanking_UK/16', OPENBANKING_UK_17 = 'openbanking_UK/17', OPENBANKING_UK_18 = 'openbanking_UK/18', OPENBANKING_UK_19 = 'openbanking_UK/19', OPENBANKING_UK_2 = 'openbanking_UK/2', OPENBANKING_UK_20 = 'openbanking_UK/20', OPENBANKING_UK_3 = 'openbanking_UK/3', OPENBANKING_UK_4 = 'openbanking_UK/4', OPENBANKING_UK_5 = 'openbanking_UK/5', OPENBANKING_UK_6 = 'openbanking_UK/6', OPENBANKING_UK_7 = 'openbanking_UK/7', OPENBANKING_UK_8 = 'openbanking_UK/8', OPENBANKING_UK_9 = 'openbanking_UK/9', OPENINVOICE = 'openinvoice', OXXO = 'oxxo', PAGOEFECTIVO = 'pagoefectivo', PAGOFACIL = 'pagofacil', PATHEGIFTCARD = 'pathegiftcard', PAY_EASY = 'pay_easy', PAY_POST = 'pay_post', PAY_U = 'pay_u', PAYBRIGHT = 'paybright', PAYBYBANK = 'paybybank', /** * @deprecated Since v3.0.0. Use string literal instead. */ PAYBYBANK_UK_FIRSTTRUST = 'Paybybank_uk_Firsttrust', /** * @deprecated Since v3.0.0. Use string literal instead. */ PAYBYBANK_UK_AIB = 'Paybybank_uk_aib', PAYBYBANK_UK_AMEX = 'paybybank_uk_amex', PAYBYBANK_UK_ARBUTHNOTLATHAM = 'paybybank_uk_arbuthnotlatham', PAYBYBANK_UK_BANKOFIRELAND = 'paybybank_uk_bankofireland', /** * @deprecated Since v3.0.0. Use string literal instead. */ PAYBYBANK_UK_BANKOFSCOTLAND = 'Paybybank_uk_bankofscotland', /** * @deprecated Since v3.0.0. Use string literal instead. */ PAYBYBANK_UK_BARCLAYS = 'Paybybank_uk_barclays', PAYBYBANK_UK_BBANK = 'paybybank_uk_bbank', PAYBYBANK_UK_C_HOARE_CO = 'paybybank_uk_c-hoare-co', PAYBYBANK_UK_CAPITALONE = 'paybybank_uk_capitalone', PAYBYBANK_UK_CASHPLUS = 'paybybank_uk_cashplus', PAYBYBANK_UK_CATERALLEN = 'paybybank_uk_caterallen', PAYBYBANK_UK_CLYDESDALE = 'paybybank_uk_clydesdale', PAYBYBANK_UK_COUTTS = 'paybybank_uk_coutts', PAYBYBANK_UK_CREATION = 'paybybank_uk_creation', PAYBYBANK_UK_CUMBERLAND = 'paybybank_uk_cumberland', /** * @deprecated Since v3.0.0. Use string literal instead. */ PAYBYBANK_UK_DANSKEBANK = 'Paybybank_uk_danskebank', /** * @deprecated Since v3.0.0. Use string literal instead. */ PAYBYBANK_UK_FIRSTDIRECT = 'Paybybank_uk_firstdirect', /** * @deprecated Since v3.0.0. Use string literal instead. */ PAYBYBANK_UK_HALIFAX = 'Paybybank_uk_halifax', PAYBYBANK_UK_HANDELSBANKEN = 'paybybank_uk_handelsbanken', /** * @deprecated Since v3.0.0. Use string literal instead. */ PAYBYBANK_UK_HSBC = 'Paybybank_uk_hsbc', /** * @deprecated Since v3.0.0. Use string literal instead. */ PAYBYBANK_UK_LLOYDS = 'Paybybank_uk_lloyds', /** * @deprecated Since v3.0.0. Use string literal instead. */ PAYBYBANK_UK_MONZO = 'Paybybank_uk_monzo', /** * @deprecated Since v3.0.0. Use string literal instead. */ PAYBYBANK_UK_NATIONWIDE = 'Paybybank_uk_nationwide', /** * @deprecated Since v3.0.0. Use string literal instead. */ PAYBYBANK_UK_NATWEST = 'Paybybank_uk_natwest', /** * @deprecated Since v3.0.0. Use string literal instead. */ PAYBYBANK_UK_REVOLUT = 'Paybybank_uk_revolut', /** * @deprecated Since v3.0.0. Use string literal instead. */ PAYBYBANK_UK_ROYALBANKOFSCOTLAND = 'Paybybank_uk_royalbankofscotland', /** * @deprecated Since v3.0.0. Use string literal instead. */ PAYBYBANK_UK_SATANDER = 'Paybybank_uk_satander', /** * @deprecated Since v3.0.0. Use string literal instead. */ PAYBYBANK_UK_STARLING = 'Paybybank_uk_starling', /** * @deprecated Since v3.0.0. Use string literal instead. */ PAYBYBANK_UK_TSB = 'Paybybank_uk_tsb', /** * @deprecated Since v3.0.0. Use string literal instead. */ PAYBYBANK_UK_ULSTERBANK = 'Paybybank_uk_ulsterbank', /** * @deprecated Since v3.0.0. Use string literal instead. */ PAYBYBANK_UK_UTESCOBANK = 'Paybybank_uk_utescobank', PAYCO = 'payco', PAYEX = 'payex', PAYMAYA_WALLET = 'paymaya_wallet', PAYNOW = 'paynow', PAYPAL = 'paypal', PAYPAL_POS = 'paypal_pos', PAYSAFECARD = 'paysafecard', PAYSBUY = 'paysbuy', PAYSHOP = 'payshop', PAYTHRU = 'paythru', PAYTM = 'paytm', PAYTRAIL = 'paytrail', PAYU_IN = 'payu_IN', PAYU_IN_CASHCARD = 'payu_IN_cashcard', PAYU_IN_NB = 'payu_IN_nb', PAYU_IN_UPI = 'payu_IN_upi', PAYU_ZA_EFTPRO = 'payu_ZA_eftpro', PAYWITHGOOGLE = 'paywithgoogle', PERMATABANK = 'permatabank', PIX = 'pix', PLASTIX = 'plastix', PLATIKA = 'platika', PLUIMEN = 'pluimen', PLUIMGIFTCARD = 'pluimgiftcard', POCZTA_POLSKA = 'poczta_polska', PODIUMCARD = 'podiumcard', POLI = 'poli', POP_PANKKI = 'pop_pankki', POS = 'pos', POST_RUSSIA = 'post_russia', POSTBANK = 'postbank', POWER_BUY = 'power_buy', PPS = 'pps', PRIMEIROPAY_BOLETO = 'primeiropay_boleto', PROMPTPAY_QR = 'promptpay_qr', PROSODIE_ILLICADO = 'prosodie_illicado', PSB = 'psb', PSE = 'pse', PSE_PAYULATAM = 'pse_payulatam', PUBLIC_BANK = 'public_bank', PULSE = 'pulse', PULSE_PAY = 'pulse_pay', QBANK = 'qbank', QIWI = 'qiwi', QIWIWALLET = 'qiwiwallet', RAIFFEISEN = 'raiffeisen', RAKUTEN = 'rakuten', RAKUTEN_EDY = 'rakuten_edy', RAPIPAGO = 'rapipago', RATEPAY = 'ratepay', RATEPAY_DIRECTDEBIT = 'ratepay_directdebit', RAZER = 'razer', REDCOMPRA = 'redcompra', REGIOBANK = 'regiobank', RESTAURATIONHARDWARE_GIFTCART = 'restaurationhardware_giftcart', RESTORATIONHARDWARE = 'restorationhardware', RESURSBANK = 'resursbank', RESURSGIFTCARD = 'resursgiftcard', RHB = 'rhb', RISK = 'risk', RISPA = 'rispa', RITUALS = 'rituals', RIVIERAMAISONGIFTCARD = 'rivieramaisongiftcard', ROBINSON = 'robinson', ROMCARD = 'romcard', ROMCARD_CREDIT = 'romcard_credit', ROMCARD_DEBIT = 'romcard_debit', RSB = 'rsb', RUPAY = 'rupay', S_PANKKI = 's-pankki', SACOMBANK = 'sacombank', SAFETYPAY = 'safetypay', SAFETYPAY_CASH = 'safetypay_cash', SAMPO_PANKKI = 'sampo_pankki', SAMSUNGPAY = 'samsungpay', SANTANDER = 'santander', SARAIVA = 'saraiva', SBERBANK = 'sberbank', SCBEASY = 'scbeasy', SCOTIABANK = 'scotiabank', SEBDIRECTPAYMENT = 'sebdirectpayment', SEPA = 'sepa', SEPADIRECTDEBIT = 'sepadirectdebit', SEPADIRECTDEBIT_AMAZONPAY = 'sepadirectdebit_amazonpay', SEVENELEVEN = 'seveneleven', SF_CADEAU = 'sf_cadeau', SHAZAM = 'shazam', SHOPPING = 'shopping', SINARMAS = 'sinarmas', SINGAPORE_POST = 'singapore_post', SKANDIA = 'skandia', SKRILL = 'skrill', SMART = 'smart', SMARTMONEY = 'smartmoney', SMS = 'sms', SNS = 'sns', SODEXO = 'sodexo', SOFORT = 'sofort', SOLO = 'solo', SOROCRED = 'sorocred', SPARBANKEN = 'sparbanken', SPARDA_BANK = 'sparda-bank', SPAREBANK = 'sparebank', SPARKASSE = 'sparkasse', SPARNORD = 'sparnord', STANDARD_BANK = 'standard_bank', STAR = 'star', STORE = 'store', SUICA = 'suica', SVS = 'svs', SWEDBANK = 'swedbank', SWISH = 'swish', SWITCHDEVICE = 'switchdevice', SYNCHRONY = 'synchrony', SYNCHRONY_MERCHANT = 'synchrony/merchant', TAP = 'tap', TCSTESTGIFTCARD = 'tcstestgiftcard', TECHOM_BANK = 'techom_bank', TENPAY = 'tenpay', TERMINAL_RU = 'terminal_RU', TESCO = 'tesco', TESCO_LOTUS = 'tesco_lotus', THAI_WATSADU = 'thai_watsadu', THESTINGGIFTCARD = 'thestinggiftcard', TICKET = 'ticket', TMBINTERNETBANKING = 'tmbinternetbanking', TOPS_DAILY = 'tops_daily', TROY = 'troy', TRUSTLY = 'trustly', TRUSTPAY = 'trustpay', TWINT = 'twint', TWINT_POS = 'twint_pos', UBERCREDIT = 'ubercredit', UKASH = 'ukash', UNICREDIT = 'unicredit', UNIONPAY = 'unionpay', UNKNOWNCARD = 'unknowncard', UOB = 'uob', UOBDIRECTDEBIT = 'uobdirectdebit', UPI = 'upi', UPI_COLLECT = 'upi_collect', UPI_QR = 'upi_qr', VALE_REFEICAO = 'vale_refeicao', VALE_REFEICAO_PREPAID = 'vale_refeicao_prepaid', VALUELINK = 'valuelink', VIAS = 'vias', VIETCOMBANK = 'vietcombank', VIETINBANK = 'vietinbank', VIPPS = 'vipps', VIS_MAYORSGIFTCARD = 'vis_mayorsgiftcard', VISA = 'visa', VISA_AMAZONPAY = 'visa_amazonpay', VISA_ANDROIDPAY = 'visa_androidpay', VISA_APPLEPAY = 'visa_applepay', VISA_SAMSUNGPAY = 'visa_samsungpay', VISACHECKOUT = 'visacheckout', VISADANKORT = 'visadankort', VOLKSBANK = 'volksbank', VPAY = 'vpay', VR_BANK = 'vr_bank', VTCPAY_ACB = 'vtcpay-acb', VTCPAY_AGRIBANK = 'vtcpay-agribank', VTCPAY_BIDV = 'vtcpay-bidv', VTCPAY_DONGABANK = 'vtcpay-dongabank', VTCPAY_MARITIMEBANK = 'vtcpay-maritimebank', VTCPAY_MB = 'vtcpay-mb', VTCPAY_SACOMBANK = 'vtcpay-sacombank', VTCPAY_TECHCOMBANK = 'vtcpay-techcombank', VTCPAY_VIETCOMBANK = 'vtcpay-vietcombank', VTCPAY_VIETINBANK = 'vtcpay-vietinbank', VVVCADEAUBON = 'vvvcadeaubon', VVVGIFTCARD = 'vvvgiftcard', WALLET = 'wallet', WALLET_RU = 'wallet_RU', WALLET_RU_YANDEXMONEY = 'wallet_RU/yandexmoney', WALLIE = 'wallie', WAREHOUSE = 'warehouse', WAREHOUSEGIFTCARD = 'warehousegiftcard', WEBSHOPGIFTCARD = 'webshopgiftcard', WECHATPAY = 'wechatpay', WECHATPAYMINIPROGRAM = 'wechatpayMiniProgram', WECHATPAYQR = 'wechatpayQR', WECHATPAYSDK = 'wechatpaySDK', WECHATPAYWEB = 'wechatpayWeb', WECHATPAY_FULLBRAND = 'wechatpay_fullbrand', WECHATPAY_POS = 'wechatpay_pos', WEFASHIONGIFTCARD = 'wefashiongiftcard', WESTERNUNION = 'westernunion', WIJNCARD = 'wijncard', WINKELCHEQUE = 'winkelcheque', WOSCARD = 'woscard', XPONCARD = 'xponcard', YALO_PREPAID = 'yalo_prepaid', YANDEX = 'yandex', YANDEX_ALFACLICK = 'yandex_alfaclick', YANDEX_BANK_CARD = 'yandex_bank_card', YANDEX_CASH = 'yandex_cash', YANDEX_INSTALLMENTS = 'yandex_installments', YANDEX_PROMSVYAZBANK = 'yandex_promsvyazbank', YANDEX_QIWI = 'yandex_qiwi', YANDEX_SBERBANK = 'yandex_sberbank', YANDEX_WEBMONEY = 'yandex_webmoney', YANDEXMONEY = 'yandexmoney', YOURGIFT = 'yourgift', ZABKA = 'zabka', ZIP = 'zip', ZIP_POS = 'Zip_pos', } 

package/dist/assets/components/popover/popover.docs.mdx

@@ -111,6 +111,12 @@ When the popover is rendered as a descendant of the trigger element, this is not
 <bento-tag ref="triggerRef" label="Hover me" tabindex="0" @mouseenter.native="open" @mouseleave.native="close"
 @focusin.native="open" @focusout.native="close" /> `} />
 
+For content displayed on hover or focus that provides short, non-interactive supplementary information, set the
+trigger's `aria-describedby` attribute to the popover's `id`. This makes the content available as part of the trigger's
+accessible description. The popover must also open when the trigger receives keyboard focus. Do not use
+`aria-describedby` for popovers that contain interactive elements. The rendered Storybook **Triggering on hover** story
+contains an interactive link, so it uses `aria-controls` instead and uses a dialog role.
+
 ## Accessibility 🚧
 
 NOTE: The focus trap within the popover does not function as it should right now, this issue is currently being worked
@@ -137,15 +143,32 @@ documentation provided.
 - The element that shows and hides the content has role button, e.g. use the `BentoButton` component.
 - When the Popover is visible, the element with role button has `aria-expanded` set to `true`. When the content area is
   hidden, it is set to `false`.
-- When the Popover is visible, the popover needs to be identified by an `id` and the trigger element with role button
-  needs to have `aria-controls` set to the popover `id`. When the popover is hidden, the `aria-controls` attribute needs
-  to be set to `null`.
-
-| ARIA attribute  | is automatic?                                                            | fallback used | manual override |
-| --------------- | ------------------------------------------------------------------------ | ------------- | --------------- |
-| `role`          | Yes, `dialog` role is set                                                | -             | -               |
-| `id`            | No, needs to be set manually on the `bento-popover`                      | -             | -               |
-| `aria-controls` | No, needs to be set on the trigger and equal the `id` set on the popover | -             | -               |
+
+### Choosing the ARIA relationship
+
+An ID is not required merely because a component is a popover. Use an ID when an ARIA attribute needs to reference the
+popover:
+
+- For a button-controlled, interactive disclosure, use `aria-expanded` on the button. `aria-controls` may reference the
+  popover's `id` to make the controlled relationship explicit.
+- For short, non-interactive information shown on hover or focus, use `aria-describedby` on the trigger and reference
+  the popover's `id`.
+- Do not use `aria-controls` as a generic way to describe supplementary information. It identifies a controlled region
+  but does not make that region part of the trigger's accessible description.
+- If the popover contains interactive content, do not give it a tooltip role. Use an interactive popover pattern with
+  appropriate focus management and a suitable popup role instead.
+
+IDs must be unique in the document, especially when a component can be rendered more than once. Generate the ID once per
+component instance and use that same value for the popover and the ARIA attribute on its trigger. An ID reference is
+required for `aria-controls` and `aria-describedby`; otherwise, do not add an ID solely because the content is rendered
+by `bento-popover`.
+
+| ARIA attribute     | is automatic?                                                                    | fallback used | manual override |
+| ------------------ | -------------------------------------------------------------------------------- | ------------- | --------------- |
+| `role`             | Yes, `dialog` role is set                                                        | -             | -               |
+| `id`               | No, add when referenced by an ARIA attribute or other integration                | -             | -               |
+| `aria-controls`    | No, set on the trigger for an explicit button-to-popover controlled relationship | -             | -               |
+| `aria-describedby` | No, set on the trigger for short non-interactive supplementary information       | -             | -               |
 
 ## Resources
 

package/dist/assets/components/popover/popover.stories.ts

@@ -1 +1 @@
-import { onMounted, ref, watch } from 'vue'; import { isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import { storybookDocsParameter } from '../../utils/ts/storybook'; import { action } from '@storybook/addon-actions'; import { BentoButton, BentoButtonActionsLayoutBasic } from '@/components/button'; import { BentoLink } from '@/components/link'; import { BentoTag } from '@/components/tag'; import { BentoTypography } from '@/components/typography'; import { useBentoDelayedHover } from '@/composables'; import { BentoPopoverImage } from './components/popover-image'; import BentoPopover from './popover.vue'; import InfoFilledIcon from '@adyen/ui-assets-icons-16/vue/info-filled'; import { BentoPopoverPositions } from './popover.types'; import { popoverImageSrcStub } from '../../__tests__/img-stub.json'; import BentoDelayedHoverExample from '@/composables/use-bento-delayed-hover/__tests__/use-bento-delayed-hover-example.vue?raw'; import './popover.stories.scss?module'; const DEFAULT_TEXT = 'Add your text here'; const TITLE_TEXT = 'Title'; const IMAGE_SRC = popoverImageSrcStub; const IMAGE_ALT = 'Example image'; const ID = 'popover-id'; const ACTIONS = [ { title: 'Primary', event: () => action('Primary')(), }, { title: 'Secondary', event: () => action('Secondary')(), }, ]; const DEFAULT_PROPS = { position: 'bottom-start', disableFocusTrap: true, default: DEFAULT_TEXT, }; export default { title: 'Popover', component: BentoPopover, parameters: { layout: 'centered', }, argTypes: { // Slots default: { defaultValue: '', description: 'Popover content', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text' }, }, headerIcon: { defaultValue: '', description: 'Vue Icon from the library @adyen/ui-assets-icons-16.', table: { type: { summary: 'VNode[]' }, }, control: { disable: true }, }, image: { defaultValue: '', description: 'Popover image container', table: { type: { summary: 'BentoPopoverImage' }, }, control: { disable: true }, }, // Enum props actionsLayout: { options: Object.values(BentoButtonActionsLayoutBasic), mapping: BentoButtonActionsLayoutBasic, control: { type: 'select', }, }, position: { options: Object.values(BentoPopoverPositions), mapping: BentoPopoverPositions, control: { type: 'select', }, }, }, } as Meta; type Story = StoryObj<typeof BentoPopover>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoPopover, BentoTypography, }, props: Object.keys(argTypes), template: ` <div class="b-popover-story--default"> <bento-popover v-if="targetElement" :open="isOpen" v-bind="args" :targetElement="targetElement" @placement="onPlacementUpdate" > <bento-typography el="span"> {{args.default}} </bento-typography> </bento-popover> <bento-button ref="targetElement" @click="togglePopover" :aria-expanded="isOpen" aria-controls="${ID}" > Open popover </bento-button> </div> `, setup(props) { const args = isVue2 ? props : _args; const isOpen = ref(false); const targetElement = ref(null); const togglePopover = () => { isOpen.value = !isOpen.value; }; watch( () => args.open, (val: boolean) => { isOpen.value = val; } ); const show = () => action('input'); onMounted(() => (isOpen.value = args.open === undefined ? true : args.open)); const onPlacementUpdate = action('placement'); return { // Values args, isOpen, targetElement, // Methods onPlacementUpdate, show, togglePopover, }; }, }), args: { ...DEFAULT_PROPS, id: ID }, parameters: storybookDocsParameter(` <div> <bento-popover v-if="targetElement" id="${ID}" :open="isOpen" position="bottom-start" :targetElement="targetElement" > <bento-typography el="span"> ${DEFAULT_TEXT} </bento-typography> </bento-popover> <bento-button ref="targetElement" :aria-expanded="isOpen" @click="togglePopover" aria-controls="${ID}" > Open popover </bento-button> </div> `), }; export const WithHeader: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoPopover, BentoTypography, InfoFilledIcon, }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const isOpen = ref(false); const targetElement = ref(null); const togglePopover = () => { isOpen.value = !isOpen.value; }; watch( () => args.open, (val: boolean) => { isOpen.value = val; } ); const show = () => action('input'); const dismissPopover = () => { action('dismiss')(); isOpen.value = false; }; onMounted(() => (isOpen.value = args.open === undefined ? true : args.open)); return { // Values args, isOpen, targetElement, // Methods togglePopover, show, dismissPopover, }; }, template: ` <div class="b-popover-story--with-header"> <bento-popover v-if="targetElement" :open="isOpen" v-bind="args" :targetElement="targetElement" @dismiss="dismissPopover" > <template #headerIcon> <info-filled-icon /> </template> <bento-typography el="span"> {{args.default}} </bento-typography> </bento-popover> <bento-button ref="targetElement" @click="togglePopover" :aria-expanded="isOpen" aria-controls="${ID}" > Open popover </bento-button> </div> `, }), args: { ...DEFAULT_PROPS, title: TITLE_TEXT, id: ID }, parameters: storybookDocsParameter(` <div> <bento-popover v-if="targetElement" id="${ID}" :open="isOpen" title="${TITLE_TEXT}" position="bottom-start" :targetElement="targetElement" @dismiss="dismissPopover" > <template #headerIcon> <info-filled-icon /> </template> <bento-typography el="span"> ${DEFAULT_TEXT} </bento-typography> </bento-popover> <bento-button ref="targetElement" :aria-expanded="isOpen" @click="togglePopover" aria-controls="${ID}" > Open popover </bento-button> </div> `), }; export const WithActions: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoPopover, BentoTypography, InfoFilledIcon, }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const isOpen = ref(false); const targetElement = ref(null); const togglePopover = () => { isOpen.value = !isOpen.value; }; watch( () => args.open, (val: boolean) => { isOpen.value = val; } ); const show = () => action('input'); const dismissPopover = () => { action('dismiss')(); isOpen.value = false; }; onMounted(() => (isOpen.value = args.open === undefined ? true : args.open)); return { // Values args, isOpen, targetElement, // Methods togglePopover, show, dismissPopover, }; }, template: ` <div class="b-popover-story--with-actions"> <bento-popover v-if="targetElement" :open="isOpen" v-bind="args" :targetElement="targetElement" @dismiss="dismissPopover" > <bento-typography el="span"> {{args.default}} </bento-typography> </bento-popover> <bento-button ref="targetElement" @click="togglePopover" :aria-expanded="isOpen" aria-controls="${ID}" > Open popover </bento-button> </div> `, }), args: { ...DEFAULT_PROPS, title: TITLE_TEXT, actions: ACTIONS, id: ID, }, parameters: storybookDocsParameter(` <div> <bento-popover v-if="targetElement" id="${ID}" :open="isOpen" title="${TITLE_TEXT}" :actions="[ { title: 'Primary', event: () => action('Primary')(), }, { title: 'Secondary', event: () => action('Secondary')(), }, ]" position="bottom-start" :targetElement="targetElement" @dismiss="dismissPopover" > <template #headerIcon> <info-filled-icon /> </template> <bento-typography el="span"> ${DEFAULT_TEXT} </bento-typography> </bento-popover> <bento-button ref="targetElement" :aria-expanded="isOpen" @click="togglePopover" aria-controls="${ID}" > Open popover </bento-button> </div> `), }; export const OnHover: Story = { render: (_args, { argTypes }) => ({ components: { BentoLink, BentoPopover, BentoTag, BentoTypography, }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const triggerElement = ref(null); const { isOpen, open, close, hoverEvents } = useBentoDelayedHover(); return { args, isOpen, open, close, triggerElement, hoverEvents, }; }, template: ` <div class="b-popover-story--on-hover"> <bento-tag ref="triggerElement" label="Hover over me" tabindex="0" :aria-expanded="isOpen.toString()" aria-controls="${ID}" @mouseenter.native="open" @mouseleave.native="close" @focusin.native="open" @focusout.native="close" /> <span v-on="hoverEvents"> <bento-popover v-if="triggerElement" :open="isOpen" v-bind="args" :target-element="triggerElement" role="tooltip" disable-focus-trap > <bento-typography el="span"> {{ args.default }} <bento-link to="https://www.adyen.com/" external> Learn more here </bento-link> </bento-typography> </bento-popover> </span> </div> `, }), args: { ...DEFAULT_PROPS, id: ID }, parameters: storybookDocsParameter(BentoDelayedHoverExample), }; export const WithImage: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoPopover, BentoPopoverImage, BentoTypography, InfoFilledIcon, }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const isOpen = ref(false); const targetElement = ref(null); const togglePopover = () => { isOpen.value = !isOpen.value; }; watch( () => args.open, (val: boolean) => { isOpen.value = val; } ); const show = () => action('input'); const dismissPopover = () => { action('dismiss')(); isOpen.value = false; }; onMounted(() => (isOpen.value = args.open === undefined ? true : args.open)); return { // Values args, isOpen, targetElement, // Methods togglePopover, show, dismissPopover, }; }, template: ` <div class="b-popover-story--with-image"> <bento-popover v-if="targetElement" :open="isOpen" v-bind="args" :targetElement="targetElement" @dismiss="dismissPopover" > <template #image> <bento-popover-image src="${IMAGE_SRC}" alt="${IMAGE_ALT}" /> </template> <bento-typography el="span"> {{args.default}} </bento-typography> </bento-popover> <bento-button ref="targetElement" @click="togglePopover" :aria-expanded="isOpen" aria-controls="${ID}" > Open popover </bento-button> </div> `, }), args: { ...DEFAULT_PROPS, title: TITLE_TEXT, actions: ACTIONS, id: ID, }, parameters: storybookDocsParameter(` <div> <bento-popover v-if="targetElement" id="${ID}" :open="isOpen" title="${TITLE_TEXT}" :actions="[ { title: 'Primary', event: () => action('Primary')(), }, { title: 'Secondary', event: () => action('Secondary')(), }, ]" position="bottom-start" :targetElement="targetElement" @dismiss="dismissPopover" > <template #image> <bento-popover-image src="${IMAGE_SRC}" alt="${IMAGE_ALT}" /> </template> <bento-typography el="span"> ${DEFAULT_TEXT} </bento-typography> </bento-popover> <bento-button ref="targetElement" :aria-expanded="isOpen" @click="togglePopover" aria-controls="${ID}" > Open popover </bento-button> </div> `), }; 
+import { onMounted, ref, watch } from 'vue'; import { isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import { storybookDocsParameter } from '../../utils/ts/storybook'; import { action } from '@storybook/addon-actions'; import { BentoButton, BentoButtonActionsLayoutBasic } from '@/components/button'; import { BentoLink } from '@/components/link'; import { BentoTag } from '@/components/tag'; import { BentoTypography } from '@/components/typography'; import { useBentoDelayedHover } from '@/composables'; import { BentoPopoverImage } from './components/popover-image'; import BentoPopover from './popover.vue'; import InfoFilledIcon from '@adyen/ui-assets-icons-16/vue/info-filled'; import { BentoPopoverPositions } from './popover.types'; import { popoverImageSrcStub } from '../../__tests__/img-stub.json'; const BentoDelayedHoverExample = "<template>\n <div>\n <bento-tag\n ref=\"triggerElement\"\n label=\"Hover over me\"\n tabindex=\"0\"\n :aria-expanded=\"isOpen.toString()\"\n aria-controls=\"popover-id\"\n @mouseenter.native=\"open\"\n @mouseleave.native=\"close\"\n @focusin.native=\"open\"\n @focusout.native=\"close\"\n />\n\n <span v-on=\"hoverEvents\">\n <bento-popover\n v-if=\"triggerElement\"\n id=\"popover-id\"\n :open=\"isOpen\"\n position=\"bottom-start\"\n :target-element=\"triggerElement\"\n role=\"tooltip\"\n disable-focus-trap\n >\n <bento-typography el=\"span\">\n Add your text here\n <bento-link to=\"https://www.adyen.com/\" external>Learn more here</bento-link>\n </bento-typography>\n </bento-popover>\n </span>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\n import { BentoLink, BentoPopover, BentoTag, BentoTypography, useBentoDelayedHover } from '@adyen/bento-vue2';\n import { ref } from 'vue';\n\n const triggerElement = ref(null);\n const { isOpen, open, close, hoverEvents } = useBentoDelayedHover();\n</script>\n"; const PopoverDefaultExample = "<template>\n <div>\n <bento-popover\n v-if=\"targetElement\"\n id=\"popover-id\"\n :open=\"isOpen\"\n position=\"bottom-start\"\n disable-focus-trap\n :target-element=\"targetElement\"\n >\n <bento-typography el=\"span\">Add your text here</bento-typography>\n </bento-popover>\n <bento-button ref=\"targetElement\" :aria-expanded=\"isOpen\" aria-controls=\"popover-id\" @click=\"isOpen = !isOpen\">\n Open popover\n </bento-button>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\n import { ref } from 'vue';\n import { BentoButton, BentoPopover, BentoTypography } from '@adyen/bento-vue2';\n\n const isOpen = ref(true);\n const targetElement = ref(null);\n</script>\n"; const PopoverWithActionsExample = "<template>\n <div>\n <bento-popover\n v-if=\"targetElement\"\n id=\"popover-id\"\n title=\"Title\"\n :actions=\"actions\"\n :open=\"isOpen\"\n position=\"bottom-start\"\n disable-focus-trap\n :target-element=\"targetElement\"\n >\n <bento-typography el=\"span\">Add your text here</bento-typography>\n </bento-popover>\n <bento-button ref=\"targetElement\" :aria-expanded=\"isOpen\" aria-controls=\"popover-id\" @click=\"isOpen = !isOpen\">\n Open popover\n </bento-button>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\n import { ref } from 'vue';\n import { BentoButton, BentoPopover, BentoTypography } from '@adyen/bento-vue2';\n\n const isOpen = ref(true);\n const targetElement = ref(null);\n const actions = [\n { title: 'Primary', event: () => true },\n { title: 'Secondary', event: () => true },\n ];\n</script>\n"; const PopoverWithHeaderExample = "<template>\n <div>\n <bento-popover\n v-if=\"targetElement\"\n id=\"popover-id\"\n title=\"Title\"\n :open=\"isOpen\"\n position=\"bottom-start\"\n disable-focus-trap\n :target-element=\"targetElement\"\n >\n <template #headerIcon>\n <info-filled-icon />\n </template>\n <bento-typography el=\"span\">Add your text here</bento-typography>\n </bento-popover>\n <bento-button ref=\"targetElement\" :aria-expanded=\"isOpen\" aria-controls=\"popover-id\" @click=\"isOpen = !isOpen\">\n Open popover\n </bento-button>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\n import { ref } from 'vue';\n import { BentoButton, BentoPopover, BentoTypography } from '@adyen/bento-vue2';\n import InfoFilledIcon from '@adyen/ui-assets-icons-16/vue/info-filled';\n\n const isOpen = ref(true);\n const targetElement = ref(null);\n</script>\n"; const PopoverWithImageExample = "<template>\n <div>\n <bento-popover\n v-if=\"targetElement\"\n id=\"popover-id\"\n title=\"Title\"\n :actions=\"actions\"\n :open=\"isOpen\"\n position=\"bottom-start\"\n disable-focus-trap\n :target-element=\"targetElement\"\n >\n <template #image>\n <bento-image\n :src=\"imageSrc\"\n alt=\"Example image\"\n aspect-ratio=\"16:9\"\n object-fit=\"cover\"\n style=\"height: 100%; width: 100%\"\n />\n </template>\n <bento-typography el=\"span\">Add your text here</bento-typography>\n </bento-popover>\n <bento-button ref=\"targetElement\" :aria-expanded=\"isOpen\" aria-controls=\"popover-id\" @click=\"isOpen = !isOpen\">\n Open popover\n </bento-button>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\n import { ref } from 'vue';\n import { BentoButton, BentoImage, BentoPopover, BentoTypography } from '@adyen/bento-vue2';\n\n const isOpen = ref(true);\n const targetElement = ref(null);\n const imageSrc =\n 'data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 16 9\"%3E%3Crect width=\"16\" height=\"9\" fill=\"%23d9e8f7\"/%3E%3C/svg%3E';\n const actions = [\n { title: 'Primary', event: () => true },\n { title: 'Secondary', event: () => true },\n ];\n</script>\n"; import './popover.stories.scss?module'; const DEFAULT_TEXT = 'Add your text here'; const TITLE_TEXT = 'Title'; const IMAGE_SRC = popoverImageSrcStub; const IMAGE_ALT = 'Example image'; const ID = 'popover-id'; const ACTIONS = [ { title: 'Primary', event: () => action('Primary')(), }, { title: 'Secondary', event: () => action('Secondary')(), }, ]; const DEFAULT_PROPS = { position: 'bottom-start', disableFocusTrap: true, default: DEFAULT_TEXT, }; export default { title: 'Popover', component: BentoPopover, parameters: { layout: 'centered', }, argTypes: { // Slots default: { defaultValue: '', description: 'Popover content', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text' }, }, headerIcon: { defaultValue: '', description: 'Vue Icon from the library @adyen/ui-assets-icons-16.', table: { type: { summary: 'VNode[]' }, }, control: { disable: true }, }, image: { defaultValue: '', description: 'Popover image container', table: { type: { summary: 'BentoPopoverImage' }, }, control: { disable: true }, }, // Enum props actionsLayout: { options: Object.values(BentoButtonActionsLayoutBasic), mapping: BentoButtonActionsLayoutBasic, control: { type: 'select', }, }, position: { options: Object.values(BentoPopoverPositions), mapping: BentoPopoverPositions, control: { type: 'select', }, }, }, } as Meta; type Story = StoryObj<typeof BentoPopover>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoPopover, BentoTypography, }, props: Object.keys(argTypes), template: ` <div class="b-popover-story--default"> <bento-popover v-if="targetElement" :open="isOpen" v-bind="args" :targetElement="targetElement" @placement="onPlacementUpdate" > <bento-typography el="span"> {{args.default}} </bento-typography> </bento-popover> <bento-button ref="targetElement" @click="togglePopover" :aria-expanded="isOpen" aria-controls="${ID}" > Open popover </bento-button> </div> `, setup(props) { const args = isVue2 ? props : _args; const isOpen = ref(false); const targetElement = ref(null); const togglePopover = () => { isOpen.value = !isOpen.value; }; watch( () => args.open, (val: boolean) => { isOpen.value = val; } ); const show = () => action('input'); onMounted(() => (isOpen.value = args.open === undefined ? true : args.open)); const onPlacementUpdate = action('placement'); return { // Values args, isOpen, targetElement, // Methods onPlacementUpdate, show, togglePopover, }; }, }), args: { ...DEFAULT_PROPS, id: ID }, parameters: storybookDocsParameter(PopoverDefaultExample), }; export const WithHeader: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoPopover, BentoTypography, InfoFilledIcon, }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const isOpen = ref(false); const targetElement = ref(null); const togglePopover = () => { isOpen.value = !isOpen.value; }; watch( () => args.open, (val: boolean) => { isOpen.value = val; } ); const show = () => action('input'); const dismissPopover = () => { action('dismiss')(); isOpen.value = false; }; onMounted(() => (isOpen.value = args.open === undefined ? true : args.open)); return { // Values args, isOpen, targetElement, // Methods togglePopover, show, dismissPopover, }; }, template: ` <div class="b-popover-story--with-header"> <bento-popover v-if="targetElement" :open="isOpen" v-bind="args" :targetElement="targetElement" @dismiss="dismissPopover" > <template #headerIcon> <info-filled-icon /> </template> <bento-typography el="span"> {{args.default}} </bento-typography> </bento-popover> <bento-button ref="targetElement" @click="togglePopover" :aria-expanded="isOpen" aria-controls="${ID}" > Open popover </bento-button> </div> `, }), args: { ...DEFAULT_PROPS, title: TITLE_TEXT, id: ID }, parameters: storybookDocsParameter(PopoverWithHeaderExample), }; export const WithActions: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoPopover, BentoTypography, InfoFilledIcon, }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const isOpen = ref(false); const targetElement = ref(null); const togglePopover = () => { isOpen.value = !isOpen.value; }; watch( () => args.open, (val: boolean) => { isOpen.value = val; } ); const show = () => action('input'); const dismissPopover = () => { action('dismiss')(); isOpen.value = false; }; onMounted(() => (isOpen.value = args.open === undefined ? true : args.open)); return { // Values args, isOpen, targetElement, // Methods togglePopover, show, dismissPopover, }; }, template: ` <div class="b-popover-story--with-actions"> <bento-popover v-if="targetElement" :open="isOpen" v-bind="args" :targetElement="targetElement" @dismiss="dismissPopover" > <bento-typography el="span"> {{args.default}} </bento-typography> </bento-popover> <bento-button ref="targetElement" @click="togglePopover" :aria-expanded="isOpen" aria-controls="${ID}" > Open popover </bento-button> </div> `, }), args: { ...DEFAULT_PROPS, title: TITLE_TEXT, actions: ACTIONS, id: ID, }, parameters: storybookDocsParameter(PopoverWithActionsExample), }; export const OnHover: Story = { render: (_args, { argTypes }) => ({ components: { BentoLink, BentoPopover, BentoTag, BentoTypography, }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const triggerElement = ref(null); const { isOpen, open, close, hoverEvents } = useBentoDelayedHover(); return { args, isOpen, open, close, triggerElement, hoverEvents, }; }, template: ` <div class="b-popover-story--on-hover"> <bento-tag ref="triggerElement" label="Hover over me" tabindex="0" :aria-expanded="isOpen.toString()" aria-controls="${ID}" @mouseenter.native="open" @mouseleave.native="close" @focusin.native="open" @focusout.native="close" /> <span v-on="hoverEvents"> <bento-popover v-if="triggerElement" :open="isOpen" v-bind="args" :target-element="triggerElement" role="dialog" disable-focus-trap > <bento-typography el="span"> {{ args.default }} <bento-link to="https://www.adyen.com/" external> Learn more here </bento-link> </bento-typography> </bento-popover> </span> </div> `, }), args: { ...DEFAULT_PROPS, id: ID }, parameters: storybookDocsParameter(BentoDelayedHoverExample), }; export const WithImage: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoPopover, BentoPopoverImage, BentoTypography, InfoFilledIcon, }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const isOpen = ref(false); const targetElement = ref(null); const togglePopover = () => { isOpen.value = !isOpen.value; }; watch( () => args.open, (val: boolean) => { isOpen.value = val; } ); const show = () => action('input'); const dismissPopover = () => { action('dismiss')(); isOpen.value = false; }; onMounted(() => (isOpen.value = args.open === undefined ? true : args.open)); return { // Values args, isOpen, targetElement, // Methods togglePopover, show, dismissPopover, }; }, template: ` <div class="b-popover-story--with-image"> <bento-popover v-if="targetElement" :open="isOpen" v-bind="args" :targetElement="targetElement" @dismiss="dismissPopover" > <template #image> <bento-popover-image src="${IMAGE_SRC}" alt="${IMAGE_ALT}" /> </template> <bento-typography el="span"> {{args.default}} </bento-typography> </bento-popover> <bento-button ref="targetElement" @click="togglePopover" :aria-expanded="isOpen" aria-controls="${ID}" > Open popover </bento-button> </div> `, }), args: { ...DEFAULT_PROPS, title: TITLE_TEXT, actions: ACTIONS, id: ID, }, parameters: storybookDocsParameter(PopoverWithImageExample), }; 

package/dist/assets/components/popover/popover.types.ts

@@ -1 +1 @@
-import { PopperContainerPosition } from '../popper-container/popper-container.types'; import type { Placement } from '@floating-ui/vue'; import type { BentoButtonActionsLayout, BentoButtonActionsList, } from '../button/components/button-actions/button-actions.types'; import { type VueNodeElement } from '@/types/elements'; import type { Options as FocusTrapOptions } from 'focus-trap/index'; /** * @deprecated Since v2.0.0. Use string literal instead. */ export const BentoPopoverPositions = { ...PopperContainerPosition }; export type BentoPopoverPositions = PopperContainerPosition; export interface BentoPopoverProps { /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * `title`: Button's text. * * `event`: Event triggered when clicking the Button. * * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`. * * ``` * [{ * title: 'Primary', * event: () => { ... }, * icon: FourPeopleIcon * }, { * title: 'Secondary', * event: () => { ... } * }] * ``` */ actions?: BentoButtonActionsList; /** * Defines the layout in which the button actions is presented. * It can be one of: * * @values BUTTONS_END * @values FILL_CONTAINER * @values SPACE_BETWEEN * @values VERTICAL_STACK */ actionsLayout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`; /** * Defines a string value that provides an accessible name for the popover. * @deprecated Since v2.0.0. Use `aria-label` instead. */ ariaLabel?: string; /** * Adds a divider line to the actions section, reduces the top/bottom paddings and removes all padding in the "default" slot. */ divider?: boolean; /** * Supports disabling focus trap functionality to avoid scroll into view behavior when we don't need it. * */ disableFocusTrap?: boolean; /** * Adds a "dismiss" icon that triggers the "dismiss" event. Requires the `title` prop to be set. */ dismissible?: boolean; /** * Allows to configure to fallback position to the one specified, it could be ['right', 'top', ...]. * Useful when not using auto as starting placement. * https://floating-ui.com/docs/flip#fallbackplacements */ fallbackPosition?: Array<Placement>; /** * Sets the size of the container to fit its content */ fitContent?: boolean; /** * Instructs popover to be visible outside of the containing container. * Useful when component would be used in limited containers like Modal, Side panel, etc. * @see {@link https://floating-ui.com/docs/usefloating#strategy} */ fixedPositioning?: boolean; /** * Toggles the popover open and closed */ open?: boolean; /** * Displays the popover in a large size. */ large?: boolean; /** * @deprecated Since v2.0.0. Do not use. This property no longer functions since moving to the floating-ui framework. */ modifiers?: Array<unknown>; /** * Popover's position relative to the target element. * Possible values are: * 'auto', 'auto-start', 'auto-end', * 'top', 'top-start', 'top-end' * 'right', 'right-start', 'right-end' * 'bottom', 'bottom-start', 'bottom-end' * 'left', 'left-start', 'left-end' */ position?: BentoPopoverPositions | `${BentoPopoverPositions}`; /** * Displays the popover in a small size. */ small?: boolean; /** * Indicates the title you want to give the popover. */ title?: string; /** * Popover's target element. * The popover will position itself relatively to target element, in specified position. */ targetElement: VueNodeElement; /** * Activates focus trap for both arrow and tab keys. */ trapAll?: boolean; /** * Configurations for the focus-trap when trap-all is active. */ trapAllOptions?: FocusTrapOptions; /** * Displays the popover without padding. */ withoutSpace?: boolean; /** * Allows content to appear outside of the popover. Used when there are nested popovers. */ overflowVisible?: boolean; } 
+import { PopperContainerPosition } from '../popper-container/popper-container.types'; import type { Placement } from '@floating-ui/vue'; import type { BentoButtonActionsLayout, BentoButtonActionsList, } from '../button/components/button-actions/button-actions.types'; import { type VueNodeElement } from '@/types/elements'; import type { FallbackStrategy } from '../popper-container/popper-container.types'; import type { Options as FocusTrapOptions } from 'focus-trap/index'; /** * @deprecated Since v3.0.0. Use string literal instead. */ export const BentoPopoverPositions = { ...PopperContainerPosition }; export type BentoPopoverPositions = PopperContainerPosition; export type BentoPopoverFallbackStrategy = FallbackStrategy; export interface BentoPopoverProps { /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * `title`: Button's text. * * `event`: Event triggered when clicking the Button. * * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`. * * ``` * [{ * title: 'Primary', * event: () => { ... }, * icon: FourPeopleIcon * }, { * title: 'Secondary', * event: () => { ... } * }] * ``` */ actions?: BentoButtonActionsList; /** * Defines the layout in which the button actions is presented. * It can be one of: * * @values BUTTONS_END * @values FILL_CONTAINER * @values SPACE_BETWEEN * @values VERTICAL_STACK */ actionsLayout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`; /** * Adds a divider line to the actions section, reduces the top/bottom paddings and removes all padding in the "default" slot. */ divider?: boolean; /** * Supports disabling focus trap functionality to avoid scroll into view behavior when we don't need it. * */ disableFocusTrap?: boolean; /** * Adds a "dismiss" icon that triggers the "dismiss" event. Requires the `title` prop to be set. */ dismissible?: boolean; /** * Allows to configure to fallback position to the one specified, it could be ['right', 'top', ...]. * Useful when not using auto as starting placement. * https://floating-ui.com/docs/flip#fallbackplacements */ fallbackPosition?: Array<Placement>; /** * Determines whether to keep the initial position or use the best fitting position when no fallback position fits. * @see {@link https://floating-ui.com/docs/flip#fallbackstrategy} */ fallbackStrategy?: BentoPopoverFallbackStrategy; /** * Sets the size of the container to fit its content */ fitContent?: boolean; /** * Instructs popover to be visible outside of the containing container. * Useful when component would be used in limited containers like Modal, Side panel, etc. * @see {@link https://floating-ui.com/docs/usefloating#strategy} */ fixedPositioning?: boolean; /** * Makes the popover match the width of its target element. */ matchWidth?: boolean; /** * Toggles the popover open and closed */ open?: boolean; /** * Displays the popover in a large size. */ large?: boolean; /** * Popover's position relative to the target element. * Possible values are: * 'auto', 'auto-start', 'auto-end', * 'top', 'top-start', 'top-end' * 'right', 'right-start', 'right-end' * 'bottom', 'bottom-start', 'bottom-end' * 'left', 'left-start', 'left-end' */ position?: BentoPopoverPositions | `${BentoPopoverPositions}`; /** * Displays the popover in a small size. */ small?: boolean; /** * Indicates the title you want to give the popover. */ title?: string; /** * Popover's target element. * The popover will position itself relatively to target element, in specified position. */ targetElement: VueNodeElement; /** * Activates focus trap for both arrow and tab keys. */ trapAll?: boolean; /** * Configurations for the focus-trap when trap-all is active. */ trapAllOptions?: FocusTrapOptions; /** * Displays the popover without padding. */ withoutSpace?: boolean; /** * Allows content to appear outside of the popover. Used when there are nested popovers. */ overflowVisible?: boolean; } 

package/dist/assets/components/popover/popover.vue

@@ -1 +1 @@
-<template> <Transition name="b-popover__animation"> <popper-container v-if="open" :id="computedAttributes['id']" :aria-role="computedAttributes.role" :aria-label="computedAriaLabel" :arrow="{ classes: ['b-popover__arrow'] }" :disabled-focus-trap="disableFocusTrap" :trap-all="trapAll" :trap-all-options="trapAllOptions" :class="conditionalClasses" :fallback-position="fallbackPosition" :fixed-positioning="fixedPositioning" :offset="[0, offset]" :position="position" :target-element="targetElement" class="b-popover" @placement="$emit('placement', $event)" > <div v-if="hasSlot('image')" class="b-popover__image"> <div v-if="dismissible" class="b-popover__image-dismiss-button"> <bento-popover-dismiss-button on-image @click="dismissPopover" /> </div> <slot name="image"></slot> </div> <div v-if="title" class="b-popover__header"> <div class="b-popover__header-title"> <slot v-if="hasSlot('headerIcon')" name="headerIcon"></slot> <bento-popover-title :title="title" :is-image-title="!!hasSlot('image')" /> </div> <div v-if="dismissible && !hasSlot('image')"> <bento-popover-dismiss-button @click="dismissPopover" /> </div> </div> <div v-if="hasSlot('default')" class="b-popover__content" :class="contentConditionalClasses"> <slot></slot> </div> <div v-if="actions" class="b-popover__footer"> <bento-button-actions :actions="actions" :layout="actionsLayout"></bento-button-actions> </div> </popper-container> </Transition> </template> <script setup lang="ts"> import { computed, inject, ref, toRefs, useAttrs, useSlots } from 'vue'; import BentoPopoverDismissButton from './components/popover-dismiss-button/popover-dismiss-button.vue'; import BentoPopoverTitle from './components/popover-title/popover-title.vue'; import BentoButtonActions from '@/components/button/components/button-actions/button-actions.vue'; import { PopperContainer, PopperContainerAriaRole } from '@/components/popper-container'; import { useHasSlot } from '@/composables/use-has-slot/use-has-slot'; import { INPUT_FILTER_POPOVER_INJECTION_KEY } from '@/components/filter-bar/components/input-filter/input-filter.keys'; import { INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY } from '@/components/filter-bar/components/input-with-dropdown-filter/input-with-dropdown-filter.keys'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { POPOVER_OFFSET_INJECTION_KEY } from './popover.keys'; import type { Placement } from '@floating-ui/vue'; import type { BentoPopoverProps } from './popover.types'; const DEFAULT_OFFSET = 2; const props = withDefaults(defineProps<BentoPopoverProps>(), { actions: undefined, actionsLayout: 'buttons-end', ariaLabel: undefined, divider: false, disableFocusTrap: false, dismissible: false, fallbackPosition: () => ['bottom-start', 'right-start', 'top-start', 'left-start'], fitContent: false, fixedPositioning: false, open: false, large: false, modifiers: undefined, position: 'bottom-start', small: false, title: undefined, trapAll: false, trapAllOptions: undefined, withoutSpace: false, overflowVisible: false, }); const emit = defineEmits<{ /** * Triggered when the `dismiss` button is clicked */ (e: 'dismiss'): void; /** * Triggered when the popover `placement` changes */ (e: 'placement', placement: Placement): void; }>(); const slots = useSlots(); const attrs = useAttrs(); const computedAttributes = computed(() => ({ id: attrs.id?.toString() as string, role: attrs?.['role'] === null ? undefined : PopperContainerAriaRole.POPOVER, })); const offset = inject<number>(POPOVER_OFFSET_INJECTION_KEY, DEFAULT_OFFSET); const ariaLabelAttribute = ref(attrs['aria-label']); const { ariaLabel, title } = toRefs(props); const computedAriaLabel = useAriaLabel({ ariaLabel: ariaLabelAttribute.value as string, // TODO: take this line away when the aria-label props is removed label: ariaLabel, defaultFallback: title, }); const isOverflowVisible = inject(INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY, false) || inject(INPUT_FILTER_POPOVER_INJECTION_KEY, false); const conditionalClasses = computed(() => ({ 'b-popover--small': props.small && !props.large, 'b-popover--with-divider': !!props.divider, 'b-popover--large': props.large && !props.small, 'b-popover--fit-content': props.fitContent, 'b-popover--without-space': props.withoutSpace, 'b-popover--overflow-visible': props.overflowVisible || isOverflowVisible, })); const contentConditionalClasses = computed(() => ({ 'b-popover__content--with-title': !!props.title, })); const dismissPopover = () => emit('dismiss'); const hasSlot = useHasSlot(slots); </script> <script lang="ts"> /** * Example description of the component... * * @example * import { BentoPopover } from '@adyen/adl-vue2'; * * export default { * components: { BentoPopover }, * template: ` * <bento-popover id="your-popover-id"> * ...Example code of the component * </bento-popover> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./popover.scss" /> 
+<template> <Transition name="b-popover__animation"> <popper-container v-if="open" :id="computedAttributes['id']" :aria-role="computedAttributes.role" :aria-label="$attrs['aria-label'] ?? title" :arrow="{ classes: ['b-popover__arrow'] }" :disabled-focus-trap="disableFocusTrap" :trap-all="trapAll" :trap-all-options="trapAllOptions" :class="conditionalClasses" :fallback-position="fallbackPosition" :fallback-strategy="fallbackStrategy" :fixed-positioning="fixedPositioning" :match-width="matchWidth" :offset="[0, offset]" :position="position" :target-element="targetElement" class="b-popover" @placement="$emit('placement', $event)" > <div v-if="hasSlot('image')" class="b-popover__image"> <div v-if="dismissible" class="b-popover__image-dismiss-button"> <bento-popover-dismiss-button on-image @click="dismissPopover" /> </div> <slot name="image"></slot> </div> <div v-if="title" class="b-popover__header"> <div class="b-popover__header-title"> <slot v-if="hasSlot('headerIcon')" name="headerIcon"></slot> <bento-popover-title :title="title" :is-image-title="!!hasSlot('image')" /> </div> <div v-if="dismissible && !hasSlot('image')"> <bento-popover-dismiss-button @click="dismissPopover" /> </div> </div> <div v-if="hasSlot('default')" class="b-popover__content" :class="contentConditionalClasses"> <slot></slot> </div> <div v-if="actions" class="b-popover__footer"> <bento-button-actions :actions="actions" :layout="actionsLayout"></bento-button-actions> </div> </popper-container> </Transition> </template> <script setup lang="ts"> import { computed, inject, useAttrs, useSlots } from 'vue'; import BentoPopoverDismissButton from './components/popover-dismiss-button/popover-dismiss-button.vue'; import BentoPopoverTitle from './components/popover-title/popover-title.vue'; import BentoButtonActions from '@/components/button/components/button-actions/button-actions.vue'; import { PopperContainer, PopperContainerAriaRole } from '@/components/popper-container'; import { useHasSlot } from '@/composables/use-has-slot/use-has-slot'; import { INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY } from '@/components/filter-bar/components/input-with-dropdown-filter/input-with-dropdown-filter.keys'; import { POPOVER_OFFSET_INJECTION_KEY } from './popover.keys'; import type { Placement } from '@floating-ui/vue'; import type { BentoPopoverProps } from './popover.types'; const DEFAULT_OFFSET = 2; const props = withDefaults(defineProps<BentoPopoverProps>(), { actions: undefined, actionsLayout: 'buttons-end', divider: false, disableFocusTrap: false, dismissible: false, fallbackPosition: () => ['bottom-start', 'right-start', 'top-start', 'left-start'], fallbackStrategy: undefined, fitContent: false, fixedPositioning: false, matchWidth: false, open: false, large: false, position: 'bottom-start', small: false, title: undefined, trapAll: false, trapAllOptions: undefined, withoutSpace: false, overflowVisible: false, }); const emit = defineEmits<{ /** * Triggered when the `dismiss` button is clicked */ (e: 'dismiss'): void; /** * Triggered when the popover `placement` changes */ (e: 'placement', placement: Placement): void; }>(); const slots = useSlots(); const attrs = useAttrs(); const computedAttributes = computed(() => ({ id: attrs.id?.toString() as string, role: attrs?.['role'] === null ? undefined : PopperContainerAriaRole.POPOVER, })); const offset = inject<number>(POPOVER_OFFSET_INJECTION_KEY, DEFAULT_OFFSET); const isOverflowVisible = inject(INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY, false); const conditionalClasses = computed(() => ({ 'b-popover--small': props.small && !props.large, 'b-popover--with-divider': !!props.divider, 'b-popover--large': props.large && !props.small, 'b-popover--fit-content': props.fitContent, 'b-popover--without-space': props.withoutSpace, 'b-popover--overflow-visible': props.overflowVisible || isOverflowVisible, })); const contentConditionalClasses = computed(() => ({ 'b-popover__content--with-title': !!props.title, })); const dismissPopover = () => emit('dismiss'); const hasSlot = useHasSlot(slots); </script> <script lang="ts"> /** * Example description of the component... * * @example * import { BentoPopover } from '@adyen/adl-vue2'; * * export default { * components: { BentoPopover }, * template: ` * <bento-popover id="your-popover-id"> * ...Example code of the component * </bento-popover> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./popover.scss" /> 

package/dist/assets/components/popper-container/popper-container.types.ts

@@ -1 +1 @@
-export interface PopperContainerArrowProp { classes?: Array<string>; padding?: string; } export enum PopperContainerPositionBasic { TOP = 'top', RIGHT = 'right', BOTTOM = 'bottom', LEFT = 'left', } export enum PopperContainerPositionExtended { AUTO = 'auto', AUTO_START = 'auto-start', AUTO_END = 'auto-end', TOP_START = 'top-start', TOP_END = 'top-end', RIGHT_START = 'right-start', RIGHT_END = 'right-end', BOTTOM_START = 'bottom-start', BOTTOM_END = 'bottom-end', LEFT_START = 'left-start', LEFT_END = 'left-end', } // TODO: add more roles as we figure them out export enum PopperContainerAriaRole { TOOLTIP = 'tooltip', POPOVER = 'dialog', } /** * @deprecated Since v2.0.0. Use string literal instead. */ export const PopperContainerPosition = { ...PopperContainerPositionBasic, ...PopperContainerPositionExtended }; export type PopperContainerPosition = PopperContainerPositionBasic | PopperContainerPositionExtended; export type FallbackPositionProp = Array<`${PopperContainerPosition}`> | `${PopperContainerPosition}`; 
+import type { FlipOptions } from '@floating-ui/core'; export interface PopperContainerArrowProp { classes?: Array<string>; padding?: string; } export enum PopperContainerPositionBasic { TOP = 'top', RIGHT = 'right', BOTTOM = 'bottom', LEFT = 'left', } export enum PopperContainerPositionExtended { AUTO = 'auto', AUTO_START = 'auto-start', AUTO_END = 'auto-end', TOP_START = 'top-start', TOP_END = 'top-end', RIGHT_START = 'right-start', RIGHT_END = 'right-end', BOTTOM_START = 'bottom-start', BOTTOM_END = 'bottom-end', LEFT_START = 'left-start', LEFT_END = 'left-end', } // TODO: add more roles as we figure them out export enum PopperContainerAriaRole { TOOLTIP = 'tooltip', POPOVER = 'dialog', } /** * @deprecated Since v3.0.0. Use string literal instead. */ export const PopperContainerPosition = { ...PopperContainerPositionBasic, ...PopperContainerPositionExtended }; export type PopperContainerPosition = PopperContainerPositionBasic | PopperContainerPositionExtended; export type FallbackPositionProp = Array<`${PopperContainerPosition}`> | `${PopperContainerPosition}`; export type FallbackStrategy = FlipOptions['fallbackStrategy']; 

package/dist/assets/components/popper-container/popper-container.vue

@@ -1 +1 @@
-<template> <bento-focus-trap v-bind="$attrs" :id="id" ref="popperContainerRef" class="b-popper-container" :data-popper-placement="placement" :disabled="disabledFocusTrap" :style="floatingStyles" :role="ariaRole" :trap-all="trapAll" :trap-all-options="trapAllOptions" > <slot></slot> <span v-if="props.arrow" v-bind="arrowAttributes" ref="floatingArrow" class="b-popper-container__arrow" data-testid="arrow" ></span> </bento-focus-trap> </template> <script setup lang="ts"> import type {} from '@floating-ui/core'; import { computed, type PropType, type Ref, ref, toRefs, watch } from 'vue'; import { arrow as arrowMiddleware, autoPlacement, autoUpdate, flip, // eslint-disable-next-line vue/no-dupe-keys offset, shift, useFloating, } from '@floating-ui/vue'; import { BentoFocusTrap } from '@/components/focus-trap'; import { type FallbackPositionProp, PopperContainerAriaRole, type PopperContainerArrowProp, PopperContainerPosition, type PopperContainerPositionBasic, } from './popper-container.types'; import type { VueNodeElement } from '@/types/elements'; import type { AutoPlacementOptions, Middleware, Placement, Strategy } from '@floating-ui/vue'; import { getFlipModifier, getOffsetModifier, sameWidthMiddleware } from './popper-container.utils'; import type { CSSProperties } from 'vue/types/jsx.d.ts'; import { type Options as FocusTrapOptions } from 'focus-trap'; const props = defineProps({ /** * The aria role assigned to the container. Defaults to null, which means it's not set if nothing is passed. */ ariaRole: { type: String as PropType<PopperContainerAriaRole>, default: null, validator: value => Object.values(PopperContainerAriaRole).includes(value as PopperContainerAriaRole), }, /** * Indicates if container should have additional arrow, pointing at target element * Can be just a boolean flag, or an object with additional configuration: * @property {Array<string>} arrow.classes – apply any additional classes to the arrow element. * @property {string} arrow.padding – useful when content has rounded corners, @see {@link https://floating-ui.com/docs/arrow#padding} */ arrow: { type: Object as PropType<PopperContainerArrowProp | boolean>, default: undefined }, /** * Disables wrapping focus-trap component. * Mostly useful for the storybook demo. */ disabledFocusTrap: { type: Boolean, default: false }, /** * Allows to configure to fallback position to the one specified, it could be 'auto' or ['right', 'top', ...]. * Useful when not using auto as starting placement. * @see {@link https://floating-ui.com/docs/flip#fallbackplacements} */ fallbackPosition: { type: [Array, String] as PropType<FallbackPositionProp>, default: null, }, /** * Instructs popover to be visible outside of the containing container. * Useful when component would be used in limited containers like Modal, Side panel, etc. * @see {@link https://floating-ui.com/docs/usefloating#strategy} */ fixedPositioning: { type: Boolean, default: false }, /** * The id to be set on the component. Use it for accessibility purposes. */ id: { type: String, default: null }, /** * If hiding / showing popper element then use this property to tell the popper when to update it's position. * This will drastically help improve performance, as we will not need to track hidden elements. */ isHidden: { type: Boolean, default: null }, /** * Instructs popper container to have the same width as target element. */ matchWidth: { type: Boolean, default: false }, /** * Custom set of middleware. Useful for low-level control over Popper behavior in some really complex use cases. * @see {@link https://floating-ui.com/docs/middleware} */ middleware: { type: Array as PropType<Array<Middleware>>, default: null }, /** * Allows to displace a popper container from its target element. * @see {@link https://floating-ui.com/docs/offset#options} */ offset: { type: Array as PropType<Array<number>>, default: () => [0, 0], validator: (value: Array<number>) => value?.length === 2, }, /** * Position relative to the target element * @see {@link https://floating-ui.com/docs/computeposition#placement} */ position: { type: String as PropType<PopperContainerPosition | `${PopperContainerPosition}`>, default: PopperContainerPosition.AUTO, validator: value => Object.values(PopperContainerPosition).includes(value as PopperContainerPositionBasic), }, /** * Reference to the DOM element or Vue component for positioning */ targetElement: { type: [Element, Object] as PropType<VueNodeElement>, required: true }, /** * Activates focus trap for both arrow and tab keys. */ trapAll: { type: Boolean, default: false }, /** * Configurations for the focus-trap when trap-all is active. */ trapAllOptions: { type: Object as PropType<FocusTrapOptions>, default: undefined, }, }); const emit = defineEmits<{ /** * Emits new placement of popper container when it's placement is updated. */ (e: 'placement', value: Placement): void; }>(); // Popper / floating ui logic const { position } = toRefs(props); const popperContainerRef = ref(); const floatingArrow = ref(null); const emittedPosition = ref(props.position); const targetElement = computed(() => (props.targetElement as any).$el ? ((props.targetElement as any).$el as Element) : (props.targetElement as Element) ); const popperContainerElement = computed(() => (popperContainerRef.value as any).$el ? ((popperContainerRef.value as any).$el as HTMLElement) : (popperContainerRef.value as HTMLElement) ); const isFlipMiddleware = computed(() => props?.position !== 'auto' && props?.fallbackPosition !== 'auto'); const getAutoPlacementProps = computed<AutoPlacementOptions>(() => { switch (props.position) { case 'auto-start': return { alignment: 'start', crossAxis: true }; case 'auto-end': return { alignment: 'end', crossAxis: true }; default: return undefined; } }); const strategy = computed<Strategy>(() => (props.fixedPositioning ? 'fixed' : 'absolute')); const { floatingStyles, middlewareData, placement, update } = useFloating(targetElement, popperContainerRef, { placement: position as Ref<Placement>, middleware: [ // Adds flip modifier if fallbackPosition is not set to auto ...(isFlipMiddleware.value ? [ flip({ fallbackPlacements: getFlipModifier(props.fallbackPosition).fallbackPlacements, }), ] : []), // Adds autoposition middlelare if position is set to any auto variants ...(!isFlipMiddleware.value ? [autoPlacement(getAutoPlacementProps.value)] : []), // Add shifting middle in case popper is still not fully visible in view port shift(), // Adds offset middlelare if offset property is set ...(props.offset ? [offset(getOffsetModifier(props.arrow, props.offset))] : []), // Adds arrow middlelare if arrow property is set, can set additional padding property ...(props.arrow ? [arrowMiddleware({ element: floatingArrow, padding: props.arrow.padding || 0 })] : []), // Adds same width middleware to keep popper width same as referenced element's width ...(props.matchWidth ? [sameWidthMiddleware] : []), // If there is additional custom middleware to add via the property then add it ...(props.middleware?.length > 0 ? props.middleware : []), ], strategy, // If we're mounting the element with a `v-if` then we need to auto update it while it's mounted ...(props.isHidden === null ? { whileElementsMounted: autoUpdate } : []), }); // If we're hiding the floating element, then we need to manually update once it's visible let cleanupAutoUpdate: undefined | (() => void); watch( () => props.isHidden, () => { if (props.isHidden !== null && !props.isHidden) { cleanupAutoUpdate = autoUpdate(targetElement?.value, popperContainerElement?.value, update); } else if (props.isHidden !== null && props.isHidden && typeof cleanupAutoUpdate === 'function') { cleanupAutoUpdate(); } } ); // Watch placement for changes, if changed then emit new placemenet watch( () => placement.value, () => { if (emittedPosition.value !== placement.value) { emittedPosition.value = placement.value; emit('placement', emittedPosition.value); } } ); // Arrow attributes and styles const arrowStyles = computed<CSSProperties>(() => ({ position: 'absolute', left: middlewareData.value.arrow?.x != null ? `${middlewareData.value.arrow.x}px` : '', top: middlewareData.value.arrow?.y != null ? `${middlewareData.value.arrow.y}px` : '', })); const arrowAttributes = computed(() => ({ class: props.arrow.classes, style: arrowStyles.value, // Applies a data-hide attribute to arrow element depending on center offset. ...(middlewareData.value.arrow?.centerOffset !== 0 ? { 'data-hide': '' } : {}), })); </script> <script lang="ts"> import type {} from '@floating-ui/vue'; /** * A wrapper for the 'popper/core' package that overlays a small piece of content near a target element. * * NOTE: This component should not be used by itself but more implemented by other exported components * e.g. Tooltip * More info here on the package: https://floating-ui.com/docs/vue * * * @usage * import { PopperContainer } from '@adyen/bento-vue2'; * * export default { * components: { PopperContainer }, * computed: { * targetElement() { * return this.$refs.tooltipTarget; * }, * }, * template: ` * <popper-container * :target-element="targetElement" * :position="position" * > * {{ content }} * </popper-container>`, * } */ export default {}; </script> <style lang="scss" scoped src="./popper-container.scss" /> 
+<template> <bento-focus-trap v-bind="$attrs" :id="id" ref="popperContainerRef" class="b-popper-container" :data-popper-placement="placement" :disabled="disabledFocusTrap" :style="floatingStyles" :role="ariaRole" :trap-all="trapAll" :trap-all-options="trapAllOptions" > <slot></slot> <span v-if="props.arrow" v-bind="arrowAttributes" ref="floatingArrow" class="b-popper-container__arrow" data-testid="arrow" ></span> </bento-focus-trap> </template> <script setup lang="ts"> import type {} from '@floating-ui/core'; import { computed, type PropType, type Ref, ref, shallowRef, toRefs, watch } from 'vue'; import { arrow as arrowMiddleware, autoPlacement, autoUpdate, flip, // eslint-disable-next-line vue/no-dupe-keys offset, shift, useFloating, } from '@floating-ui/vue'; import { BentoFocusTrap } from '@/components/focus-trap'; import { type FallbackPositionProp, type FallbackStrategy, PopperContainerAriaRole, type PopperContainerArrowProp, PopperContainerPosition, type PopperContainerPositionBasic, } from './popper-container.types'; import type { VueNodeElement } from '@/types/elements'; import type { AutoPlacementOptions, Middleware, Placement, Strategy } from '@floating-ui/vue'; import { createSameWidthMiddleware, getFlipModifier, getOffsetModifier } from './popper-container.utils'; import type { CSSProperties } from 'vue/types/jsx.d.ts'; import { type Options as FocusTrapOptions } from 'focus-trap'; const props = defineProps({ /** * The aria role assigned to the container. Defaults to null, which means it's not set if nothing is passed. */ ariaRole: { type: String as PropType<PopperContainerAriaRole>, default: null, validator: value => Object.values(PopperContainerAriaRole).includes(value as PopperContainerAriaRole), }, /** * Indicates if container should have additional arrow, pointing at target element * Can be just a boolean flag, or an object with additional configuration: * @property {Array<string>} arrow.classes – apply any additional classes to the arrow element. * @property {string} arrow.padding – useful when content has rounded corners, @see {@link https://floating-ui.com/docs/arrow#padding} */ arrow: { type: Object as PropType<PopperContainerArrowProp | boolean>, default: undefined }, /** * Disables wrapping focus-trap component. * Mostly useful for the storybook demo. */ disabledFocusTrap: { type: Boolean, default: false }, /** * Allows to configure to fallback position to the one specified, it could be 'auto' or ['right', 'top', ...]. * Useful when not using auto as starting placement. * @see {@link https://floating-ui.com/docs/flip#fallbackplacements} */ fallbackPosition: { type: [Array, String] as PropType<FallbackPositionProp>, default: null, }, /** * Determines whether to keep the initial position or use the best fitting position when no fallback position fits. * @see {@link https://floating-ui.com/docs/flip#fallbackstrategy} */ fallbackStrategy: { type: String as PropType<FallbackStrategy>, default: undefined, }, /** * Instructs popover to be visible outside of the containing container. * Useful when component would be used in limited containers like Modal, Side panel, etc. * @see {@link https://floating-ui.com/docs/usefloating#strategy} */ fixedPositioning: { type: Boolean, default: false }, /** * The id to be set on the component. Use it for accessibility purposes. */ id: { type: String, default: null }, /** * If hiding / showing popper element then use this property to tell the popper when to update it's position. * This will drastically help improve performance, as we will not need to track hidden elements. */ isHidden: { type: Boolean, default: null }, /** * Instructs popper container to have the same width as target element. */ matchWidth: { type: Boolean, default: false }, /** * Custom set of middleware. Useful for low-level control over Popper behavior in some really complex use cases. * @see {@link https://floating-ui.com/docs/middleware} */ middleware: { type: Array as PropType<Array<Middleware>>, default: null }, /** * Allows to displace a popper container from its target element. * @see {@link https://floating-ui.com/docs/offset#options} */ offset: { type: Array as PropType<Array<number>>, default: () => [0, 0], validator: (value: Array<number>) => value?.length === 2, }, /** * Position relative to the target element * @see {@link https://floating-ui.com/docs/computeposition#placement} */ position: { type: String as PropType<PopperContainerPosition | `${PopperContainerPosition}`>, default: PopperContainerPosition.AUTO, validator: value => Object.values(PopperContainerPosition).includes(value as PopperContainerPositionBasic), }, /** * Reference to the DOM element or Vue component for positioning */ targetElement: { type: [Element, Object] as PropType<VueNodeElement>, required: true }, /** * Activates focus trap for both arrow and tab keys. */ trapAll: { type: Boolean, default: false }, /** * Configurations for the focus-trap when trap-all is active. */ trapAllOptions: { type: Object as PropType<FocusTrapOptions>, default: undefined, }, }); const emit = defineEmits<{ /** * Emits new placement of popper container when it's placement is updated. */ (e: 'placement', value: Placement): void; }>(); // Popper / floating ui logic const { matchWidth, position } = toRefs(props); const popperContainerRef = ref(); const floatingArrow = ref(null); const emittedPosition = ref(props.position); const targetElement = computed(() => (props.targetElement as any).$el ? ((props.targetElement as any).$el as Element) : (props.targetElement as Element) ); const popperContainerElement = computed(() => (popperContainerRef.value as any).$el ? ((popperContainerRef.value as any).$el as HTMLElement) : (popperContainerRef.value as HTMLElement) ); const isFlipMiddleware = computed(() => props?.position !== 'auto' && props?.fallbackPosition !== 'auto'); const getAutoPlacementProps = computed<AutoPlacementOptions>(() => { switch (props.position) { case 'auto-start': return { alignment: 'start', crossAxis: true }; case 'auto-end': return { alignment: 'end', crossAxis: true }; default: return undefined; } }); const strategy = computed<Strategy>(() => (props.fixedPositioning ? 'fixed' : 'absolute')); const sameWidthMiddleware = createSameWidthMiddleware(() => matchWidth.value); const middlewareConfig = computed<Array<Middleware>>(() => [ // Adds flip modifier if fallbackPosition is not set to auto ...(isFlipMiddleware.value ? [ flip({ fallbackPlacements: getFlipModifier(props.fallbackPosition).fallbackPlacements, fallbackStrategy: props.fallbackStrategy, }), ] : []), // Adds autoposition middlelare if position is set to any auto variants ...(!isFlipMiddleware.value ? [autoPlacement(getAutoPlacementProps.value)] : []), // Add shifting middle in case popper is still not fully visible in view port shift(), // Adds offset middlelare if offset property is set ...(props.offset ? [offset(getOffsetModifier(props.arrow, props.offset))] : []), // Adds arrow middlelare if arrow property is set, can set additional padding property ...(props.arrow ? [arrowMiddleware({ element: floatingArrow, padding: props.arrow.padding || 0 })] : []), // Adds same width middleware to keep popper width same as referenced element's width sameWidthMiddleware, // If there is additional custom middleware to add via the property then add it ...(props.middleware?.length > 0 ? props.middleware : []), ]); // Preserve reactive middleware updates without exposing Floating UI's synchronous watcher to the computed graph. const floatingMiddleware = shallowRef(middlewareConfig.value); watch(middlewareConfig, middleware => { floatingMiddleware.value = middleware; }); const { floatingStyles, middlewareData, placement, update } = useFloating(targetElement, popperContainerRef, { placement: position as Ref<Placement>, middleware: floatingMiddleware, strategy, // If we're mounting the element with a `v-if` then we need to auto update it while it's mounted ...(props.isHidden === null ? { whileElementsMounted: autoUpdate } : []), }); watch(matchWidth, () => update()); // If we're hiding the floating element, then we need to manually update once it's visible let cleanupAutoUpdate: undefined | (() => void); watch( () => props.isHidden, () => { if (props.isHidden !== null && !props.isHidden) { cleanupAutoUpdate = autoUpdate(targetElement?.value, popperContainerElement?.value, update); } else if (props.isHidden !== null && props.isHidden && typeof cleanupAutoUpdate === 'function') { cleanupAutoUpdate(); } } ); // Watch placement for changes, if changed then emit new placemenet watch( () => placement.value, () => { if (emittedPosition.value !== placement.value) { emittedPosition.value = placement.value; emit('placement', emittedPosition.value); } } ); // Arrow attributes and styles const arrowStyles = computed<CSSProperties>(() => ({ position: 'absolute', left: middlewareData.value.arrow?.x != null ? `${middlewareData.value.arrow.x}px` : '', top: middlewareData.value.arrow?.y != null ? `${middlewareData.value.arrow.y}px` : '', })); const arrowAttributes = computed(() => ({ class: props.arrow.classes, style: arrowStyles.value, // Applies a data-hide attribute to arrow element depending on center offset. ...(middlewareData.value.arrow?.centerOffset !== 0 ? { 'data-hide': '' } : {}), })); </script> <script lang="ts"> import type {} from '@floating-ui/vue'; /** * A wrapper for the 'popper/core' package that overlays a small piece of content near a target element. * * NOTE: This component should not be used by itself but more implemented by other exported components * e.g. Tooltip * More info here on the package: https://floating-ui.com/docs/vue * * * @usage * import { PopperContainer } from '@adyen/bento-vue2'; * * export default { * components: { PopperContainer }, * computed: { * targetElement() { * return this.$refs.tooltipTarget; * }, * }, * template: ` * <popper-container * :target-element="targetElement" * :position="position" * > * {{ content }} * </popper-container>`, * } */ export default {}; </script> <style lang="scss" scoped src="./popper-container.scss" />