@adyen/bento-mcp 0.1.4 → 0.2.1

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

@@ -0,0 +1 @@
+import { BentoButton } from '@/components/button'; import { BentoToggle } from '@/components/toggle'; import BentoList from './list.vue'; import BentoListItem from './components/list-item/list-item.vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import ListDefault from './__tests__/list-default.vue?raw'; import { isVue2 } from 'vue-demi'; import type { Meta, StoryObj } from '@storybook/vue'; const meta: Meta = { title: 'List', component: BentoList, argTypes: { type: { options: ['unordered', 'ordered'], control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoList>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoList, BentoListItem, BentoButton, BentoToggle }, props: Object.keys(argTypes), template: ` <bento-list v-bind="args"> <bento-list-item label="Payment details" description="Updated 2 hours ago" :tag="{ label: 'Live', variant: 'green' }" show-bottom-divider > <template #start> <bento-toggle aria-label="Payment details" /> </template> <template #end> <bento-button variant="secondary">Edit</bento-button> </template> </bento-list-item> <bento-list-item label="Payout settings" description="Updated yesterday" :tag="{ label: 'Review', variant: 'orange' }" show-bottom-divider > <template #start> <bento-toggle aria-label="Payout settings" /> </template> <template #end> <bento-button variant="secondary">Edit</bento-button> </template> </bento-list-item> <bento-list-item label="Risk configuration" description="Updated 3 days ago" :tag="{ label: 'Draft', variant: 'grey' }" > <template #start> <bento-toggle aria-label="Risk configuration" /> </template> <template #end> <bento-button variant="secondary">Edit</bento-button> </template> </bento-list-item> </bento-list> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { type: 'unordered', }, parameters: storybookDocsParameter(ListDefault), }; 

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

@@ -0,0 +1 @@
+export type BentoListType = 'unordered' | 'ordered'; export interface BentoListProps { /** * Defines if the list should render as unordered (`ul`) or ordered (`ol`). * @values unordered, ordered */ type?: BentoListType; } 

package/dist/assets/components/list/list.vue

@@ -0,0 +1 @@
+<template> <component :is="listElement" class="b-list"> <slot /> </component> </template> <script setup lang="ts"> import { computed } from 'vue'; import type { BentoListProps } from './list.types'; const props = withDefaults(defineProps<BentoListProps>(), { type: 'unordered', }); const listElement = computed(() => (props.type === 'ordered' ? 'ol' : 'ul')); </script> <script lang="ts"> /** * `BentoList` renders an ordered or unordered list container for `BentoListItem` rows. * * @example * import { BentoList, BentoListItem } from '@adyen/bento-vue2'; * * export default { * components: { BentoList, BentoListItem }, * template: ` * <bento-list> * <bento-list-item * label="Payment details" * description="Updated 2 hours ago" * :tag="{ label: 'Live', variant: 'green' }" * show-bottom-divider * /> * <bento-list-item * label="Risk configuration" * description="Updated yesterday" * :tag="{ label: 'Review', variant: 'orange' }" * /> * </bento-list> * ` * } */ export default { name: 'bento-list', }; </script> <style lang="scss" scoped src="./list.scss" /> 

package/dist/assets/components/loading-indicator/loading-indicator.types.ts

@@ -0,0 +1 @@
+export enum BentoLoadingIndicatorEvent { START = 'loading-start', END = 'loading-end', } export interface BentoLoadingIndicatorProps { /** * Displays the loading indicator in a small size */ small?: boolean; /** * Displays the loading indicator in a large size */ large?: boolean; /** * Displays the loading indicator in a white variant */ inverse?: boolean; } 

package/dist/assets/components/menu/components/menu-item/menu-item.types.ts

@@ -0,0 +1 @@
+import type { VueNodeElement } from '@/types/elements'; export interface BentoMenuItem { text: string; handler: () => void; secondaryText?: string; items?: Array<BentoMenuItem>; disabled?: boolean; chevron?: boolean; icon?: VueNodeElement; critical?: boolean; indent?: boolean; addDivider?: boolean; skipClose?: boolean; } 

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

@@ -0,0 +1 @@
+import { type OnClickOutsideOptions } from '@/directives/click-outside/types'; import { PopperContainerPosition } from '../popper-container/popper-container.types'; import { type BentoMenuItem } from './components/menu-item/menu-item.types'; import { type HTMLAttributes } from 'vue'; import { type BentoButtonProps } from '../button/button.types'; /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ const BentoMenuPositions = { ...PopperContainerPosition }; type BentoMenuPositions = PopperContainerPosition; export type * from './components/menu-item/menu-item.types'; export enum BentoMenuEvent { BACK = 'back', CLOSE = 'close', OPEN = 'open', } export interface BentoMenuButtonProps { 'aria-label'?: HTMLAttributes['aria-label']; condensed?: boolean; disabled?: boolean; variant?: BentoButtonProps['variant']; } export interface BentoMenuProps { /** * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton. */ button?: BentoMenuButtonProps; /** * Controls if the menu should close when an item is clicked. * Defaults to `true`. */ closeMenuOnItemSelect?: boolean; /** * The data to be displayed in the list */ data: Array<BentoMenuItem>; /** * Disables opening the menu when the down arrow key is pressed. */ disableArrowDownOpeningMenu?: boolean; /** * The position of where the menu should open. */ menuPosition?: BentoMenuPositions | `${BentoMenuPositions}`; /** * Instructs the menu popover to be visible outside of the containing container. * @see {@link https://floating-ui.com/docs/usefloating#strategy} */ menuFixedPositioning?: boolean; /** * Sets a custom width for the menu popover. Values are clamped between 150 - 350. */ menuWidth?: number; /** * Returns focus to the menu button after popover is closed. * Disable if focus management is delegated to the parent component. * Defaults to `true`. */ revertFocusToButton?: boolean; /** * Can be used to set the inner teleport component to render the menu's popover in the root `body` DOM node * (or `dialog` if popover is inside a dialog). */ teleport?: boolean; /** * Can be used to set the inner teleport component to render the menu's popover in the root `body` DOM node * (or `dialog` if popover is inside a dialog). * * @see {@link OnClickOutsideOptions} */ closeOnClickOutsideOptions?: OnClickOutsideOptions; } 

package/dist/assets/components/modal/components/modal-page/modal-page.types.ts

@@ -0,0 +1 @@
+import type { BentoButtonActionsList } from '@/components/button'; import type { BentoModalColumnLayoutVariant } from '../../modal.types'; export interface BentoModalPageProps { /** * 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". * But you may change the color of 1-st action to red with 'critical' key * Not more than 3 action buttons can be provided * Or 2 action buttons and 1 Label for them * * 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; /** * Text label that is displayed left to the action buttons */ actionsLabel?: string; /** * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column. */ columnsSize?: BentoModalColumnLayoutVariant | `${BentoModalColumnLayoutVariant}`; /** * If provided, manages the padding of the whole modal container */ customPadding?: string; /** * If passed - sets first button color to red */ destructiveActions?: boolean; /** * If provided, renders the modal's content in a two-column layout an with dividers separating its content */ withColumnLayout?: boolean; /** * Identifier of the page, used with activePage prop to handle modal navigation */ pageId?: string; /** * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior * Used when the back button should not take the user to the natural previous page * Set to `null` to hide back button in the page */ previousPage?: string | null; } 

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

@@ -0,0 +1 @@
+import { type ComputedRef, type Ref } from 'vue'; /** * Public */ /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoModalVariant { DEFAULT = 'default', DIALOG = 'dialog', } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoModalVariantMapping { DEFAULT = 'BentoModalDefault', DIALOG = 'BentoModalDialog', } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoModalSize { SMALL = 'small', MEDIUM = 'medium', LARGE = 'large', } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoModalColumnLayoutVariant { SMALLER = 'smaller', EQUAL = 'equal', BIGGER = 'bigger', } export enum BentoModalRole { DIALOG = 'dialog', ALERT_DIALOG = 'alertdialog', } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoModalDialogType { CONFIRMATION = 'confirmation', DESTRUCTIVE = 'destructive', INFO = 'info', ACKNOWLEDGEMENT = 'acknowledgement', } export enum BentoModalEvent { CLOSE_MODAL = 'close-modal', } /** * Private */ export interface BentoModalConfigData { activePage: Ref<string>; height: Ref<string>; isAnimationActive: Ref<boolean>; pageCustomPadding: Ref<string>; showCloseButton: ComputedRef<boolean>; size: Ref<BentoModalSize | `${BentoModalSize}`>; } 

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

@@ -0,0 +1 @@
+export interface BentoPaginationProps { /** * A brief description of the purpose of the navigation (for a11y). * Omit the term "navigation", as the screen reader will read both the role and the contents of the label. * @deprecated from version 2.0.0. Use the aria-label attribute instead. */ ariaLabel?: string; /** * Use to determine if the pager has a "next page". */ hasNext?: boolean; /** * Toggles the visibility of the "results per page" part of the pagination component. */ hidePageSize?: boolean; /** * Hides the page selection dropdown and displays a static "Page X of Y" text instead. * Useful for very large datasets where rendering all page options would cause performance issues. */ hidePageSelection?: boolean; /* * Determines whether to hide the dropdown that allows users to change the number of results per page. * When set to `true`, the current `itemsPerPage` value is displayed as plain static text. * This prop only takes effect if `hidePageSize` is `false`. */ hidePageSizeSelection?: boolean; /** * The current page number of the pager. */ page?: number; /** * The size of the items the pager is paging through. */ size?: number; /** * The total number of items the pager is paging through. */ totalCount?: number; /** * Enables virtual scrolling on all dropdowns if set to true. */ virtualScroll?: boolean; /** * The predefined list of numeric options available in the 'results per page' selection dropdown. */ pageSizeItems?: Array<number>; } 

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

@@ -0,0 +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 This enum is no longer actively maintained and may not include all available payment types. For full compatibility, please use a string for the `type` property in `BentoPaymentMethodProps` instead. */ export enum BentoPaymentMethodType { CTP = 'ctp', P24_LOGO = 'P24_logo', /** * @deprecated This enum KEY is no longer valid please do not use it. * */ 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 This key is invalid and will be removed. Use the correct 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 This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_FIRSTTRUST = 'Paybybank_uk_Firsttrust', /** * @deprecated This key is invalid and will be removed. Use the correct 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 This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_BANKOFSCOTLAND = 'Paybybank_uk_bankofscotland', /** * @deprecated This key is invalid and will be removed. Use the correct 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 This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_DANSKEBANK = 'Paybybank_uk_danskebank', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_FIRSTDIRECT = 'Paybybank_uk_firstdirect', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_HALIFAX = 'Paybybank_uk_halifax', PAYBYBANK_UK_HANDELSBANKEN = 'paybybank_uk_handelsbanken', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_HSBC = 'Paybybank_uk_hsbc', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_LLOYDS = 'Paybybank_uk_lloyds', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_MONZO = 'Paybybank_uk_monzo', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_NATIONWIDE = 'Paybybank_uk_nationwide', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_NATWEST = 'Paybybank_uk_natwest', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_REVOLUT = 'Paybybank_uk_revolut', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_ROYALBANKOFSCOTLAND = 'Paybybank_uk_royalbankofscotland', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_SATANDER = 'Paybybank_uk_satander', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_STARLING = 'Paybybank_uk_starling', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_TSB = 'Paybybank_uk_tsb', /** * @deprecated This key is invalid and will be removed. Use the correct string literal instead. */ PAYBYBANK_UK_ULSTERBANK = 'Paybybank_uk_ulsterbank', /** * @deprecated This key is invalid and will be removed. Use the correct 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.types.ts

@@ -0,0 +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 for usage with properties since version 2.0. Use the 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 from version 2.0.0. Use the aria-label attribute 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 * NOTE: 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; } 

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

@@ -0,0 +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 for usage with properties since version 2.0. Use the string literal instead. */ export const PopperContainerPosition = { ...PopperContainerPositionBasic, ...PopperContainerPositionExtended }; export type PopperContainerPosition = PopperContainerPositionBasic | PopperContainerPositionExtended; export type FallbackPositionProp = Array<`${PopperContainerPosition}`> | `${PopperContainerPosition}`; 

package/dist/assets/components/promo-banner/promo-banner.types.ts

@@ -0,0 +1 @@
+import { type BentoButtonActionObject } from '@/components/button'; import { type BentoButtonVariant } from '../button'; import { type BentoImageAspectRatio, type BentoImageProps } from '../image'; export interface BentoPromoBannerProps { /** * List of actions that will be used to render the buttons. * * Each object in the list should have a `title`, an `event` and a `variant`. * * `title`: Button's text. * `event`: Event triggered when clicking the Button. * `variant`: Button's style. * * ``` * [{ * title: 'Primary', * event: () => { ... }, * variant: 'primary' * }, { * title: 'Secondary', * event: () => { ... } * variant: 'secondary' * }] * ``` */ actions?: Array<BentoPromoBannerAction>; /** * Defines the color of banner's background */ color?: `${BentoPromoBannerColor}`; /** * Defines whether the banner has a `Dismiss` button */ isDismissible?: boolean; /** * Defines whether the banner has a `Dismiss` button */ dismissButtonText?: string; /** * Defines the image used in the banner. * * The promotional banner adapts to different container sizes based on the image's `aspect-ratio`. * Only the following `aspect-ratio` values are supported: `16:9`, `2:1`, and `1:1`. * * In Storybook, to verify the image display, update `image.src` and `image.aspectRatio` as follows: * - `./1-1.png` with an aspect ratio of `1:1` * - `./2-1.png` with an aspect ratio of `2:1` * - `./16-9.png` with an aspect ratio of `16:9` */ image: BentoPromoBannerImage; /** * Defines style of the banner. * * The horizontal layout is responsive to the container size and * changes depending on the image aspect ratio. * * The vertical layout remains the same regardless of container size. */ layout?: `${BentoPromoBannerLayout}`; /** * Defines the title text to be shown on the banner */ title: string; } export type BentoPromoBannerImageAspectRatio = `${ | BentoImageAspectRatio.P16_9 | BentoImageAspectRatio.P2_1 | BentoImageAspectRatio.P1_1}`; export type BentoPromoBannerButtonVariant = `${BentoButtonVariant.PRIMARY | BentoButtonVariant.SECONDARY}`; /** * @deprecated for usage with generic. Remove the generic and use it as `BentoPromoBannerAction`. */ // eslint-disable-next-line @typescript-eslint/no-unused-vars export type BentoPromoBannerAction<IconType = object> = BentoButtonActionObject & { variant: BentoPromoBannerButtonVariant; }; export interface BentoPromoBannerImage { src: BentoImageProps['src']; alt?: BentoImageProps['alt']; aspectRatio: BentoPromoBannerImageAspectRatio; } export enum BentoPromoBannerColor { BLUE = 'blue', GREY = 'grey', GREEN = 'green', } export enum BentoPromoBannerLayout { HORIZONTAL = 'horizontal', VERTICAL = 'vertical', } 

package/dist/assets/components/radio-group/components/radio-button/radio-button.types.ts

@@ -0,0 +1 @@
+import type { BentoTag } from '@/components/tag'; import type { RadioInputValue as BentoRadioButtonValue } from '../../../internal/radio-input'; import { RadioInputStateClass as BentoRadioButtonStateClass } from '../../../internal/radio-input'; export { BentoRadioButtonValue, BentoRadioButtonStateClass }; export type BentoRadioButtonTag = InstanceType<typeof BentoTag>['$props']; 

package/dist/assets/components/radio-group/radio-group.types.ts

@@ -0,0 +1 @@
+import type { FormField, FormFieldEmits } from '../../types/form-field'; import type { BentoRadioButtonTag, BentoRadioButtonValue } from './components/radio-button'; /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoRadioGroupVariant { HORIZONTAL = 'horizontal', VERTICAL = 'vertical', } export type BentoRadioGroupValue = BentoRadioButtonValue; export interface BentoRadioGroupItem { value: BentoRadioGroupValue; label: string; description?: string; disabled?: boolean; readonly?: boolean; hasError?: boolean; tag?: BentoRadioButtonTag; } export type BentoRadioGroupItems = Array<BentoRadioGroupItem>; export type BentoRadioGroupEmits = FormFieldEmits<BentoRadioGroupValue>; export interface BentoRadioGroupProps extends FormField { /** * The form id the radio group is associated with. Defaults to null, as a radio group can also be used standalone. * @default null */ formId?: string | null; /** * If set to true, renders all bento-radio-buttons in the group in an error state. * @deprecated Use "errorMessage" prop instead * @default false */ hasError?: boolean; /** * Shows/hides the group label. * @default null */ hideLabel?: boolean | null; /** * The radio group's items. * Required. */ items: BentoRadioGroupItems; /** * The name associated with the group. Required for accessibility purposes. * Required. */ label: string; /** * Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value. * Defaults to no value selected. * @default null */ modelValue?: BentoRadioGroupValue | null; /** * The radio group's layout. It can be vertical or horizontal. Defaults to vertical. * @default BentoRadioGroupVariant.VERTICAL */ variant?: BentoRadioGroupVariant | `${BentoRadioGroupVariant}`; } 

package/dist/assets/components/rich-text-editor/components/rich-text-editor-content-area/rich-text-editor-content-area.types.ts

@@ -0,0 +1 @@
+export interface BentoRichTextEditorContentAreaProps { value?: string; disabled?: boolean; } 

package/dist/assets/components/rich-text-editor/components/rich-text-editor-renderer/components/rich-text-editor-code-block/rich-text-editor-code-block.types.ts

@@ -0,0 +1 @@
+export interface RichTextEditorCodeBlockProps { /** * Code to be rendered */ code: string; } 

package/dist/assets/components/rich-text-editor/components/rich-text-editor-renderer/components/rich-text-editor-inline-code/rich-text-editor-inline-code.types.ts

@@ -0,0 +1 @@
+export interface RichTextEditorInlineCodeProps { /** * Code to be rendered */ code: string; } 

package/dist/assets/components/rich-text-editor/components/rich-text-editor-renderer/components/rich-text-editor-link/rich-text-editor-link.types.ts

@@ -0,0 +1 @@
+export interface RichTextEditorLinkProps { url: string; } 

package/dist/assets/components/rich-text-editor/components/rich-text-editor-renderer/components/rich-text-editor-list-item/rich-text-editor-list-item.types.ts

@@ -0,0 +1 @@
+export interface RichTextEditorListItemProps { checked?: boolean; } 

package/dist/assets/components/rich-text-editor/components/rich-text-editor-renderer/rich-text-editor-renderer.types.ts

@@ -0,0 +1 @@
+import { type VNode, type VNodeChildren } from 'vue-demi'; import type { Content, Root } from 'mdast'; export interface RenderedProps { astNode: Root | Content; childrenVNodes: VNodeChildren | Array<VNodeChildren>; } export type Renderer = (props: RenderedProps) => VNode | string; export interface RendererMap { [x: string]: Renderer; } 

package/dist/assets/components/rich-text-editor/rich-text-editor.types.ts

@@ -0,0 +1 @@
+/** * Private */ export type BentoRichTextEditorMode = 'visual' | 'markdown'; /** * Public */ export interface BentoRichTextEditorProps { /** * Descriptive supporting text visibile underneath the rich text editor. */ description?: string; /** * Disables rich text editor functionality. */ disabled?: boolean; /** * Highlights the rich text editor in an erroneous state with an error message. */ errorMessage?: string; /** * Shows/hides the label. */ hideLabel?: boolean; /** * Text that is displayed as a label above the element. */ label?: string; /** * Allows the component to render first in visual mode. */ mode?: BentoRichTextEditorMode; /** * Highlights the rich text editor is required. */ required?: boolean; /** * Adds a info icon next to the label to display the passed tooltip message. */ tooltipText?: string; /** * Text displayed as the value of the rich text editor */ value?: string; } 

package/dist/assets/components/search-bar/search-bar.types.ts

@@ -0,0 +1 @@
+export enum BentoSearchBarInternalEvent { CLEAR = 'clear', ESCAPE = 'escape-pressed', INPUT = 'input', UPDATE = 'update:search-term', } export enum BentoSearchBarEvent { CLEAR = 'search-clear', INPUT = 'search-input', UPDATE = 'update:search-term', } export interface BentoSearchBarItem { label: string; items?: Array<BentoSearchBarItem>; } export type BentoSearchBarData = Array<BentoSearchBarItem>; export interface BentoSearchBarProps { /** * Text that labels an the search bar input element */ inputFieldAriaLabel: string; /** * Reduces height of the search bar. Default: false */ condensed?: boolean; /** * Custom debounce time. Default: 300 */ debounceTime?: number; /** * Disables the text input. */ disabled?: boolean; /** * Text displayed as a hint when the field is not empty */ hint?: string; /** * Text displayed as the placeholder of the input-field */ placeholder?: string; /** * Text displayed as the value being searched */ value?: string; } 

package/dist/assets/components/secondary-nav/secondary-nav.types.ts

@@ -0,0 +1 @@
+import type { Ref } from 'vue'; export interface BentoSecondaryNavState { activeItemValue: Ref<string>; updateActiveItemValue: (id: string) => void; } export interface BentoSecondaryNavItemsItem { label: string; value: string; } export interface BentoSecondaryNavItemsCategory { label: string; items: Array<BentoSecondaryNavItemsItem>; } export type BentoSecondaryNavItems = Array<BentoSecondaryNavItemsItem | BentoSecondaryNavItemsCategory>; 

package/dist/assets/components/segmented-control/segmented-control.types.ts

@@ -0,0 +1 @@
+export type BentoSegmentedControlValue = string | number; export interface BentoSegmentedControlProps { /** * Accessible name describing the segmented control. * @deprecated from version 2.0.0. Use the aria-label attribute instead. */ ariaLabel?: string; /** * If set to true, renders the component full width. */ fullWidth?: boolean; /** * Items that will populate the segmented control. */ items: Array<BentoSegmentedControlItem>; /** * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value. */ modelValue?: BentoSegmentedControlValue; /** * If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore. */ wrap?: boolean; } export interface BentoSegmentedControlItem { label: string; value: string | number; disabled?: boolean; } /** * @deprecated from version 2.0.0. Use "@update:model-value" or "v-model" instead */ export enum BentoSegmentedControlEvent { UPDATE = 'update:model-value', } 

package/dist/assets/components/selection-card/components/selection-card-group/selection-card-group.types.ts

@@ -0,0 +1 @@
+import { type GridLayoutColumnWidth } from '@/internal'; import type { BentoSelectionCardItem, BentoSelectionCardModelValue } from '@/components/selection-card'; import { type FormField, type FormFieldEmits } from '../../../../types/form-field'; export type BentoSelectionCardGroupVariant = 'checkbox' | 'radio'; export type BentoSelectionCardGroupLayout = 'horizontal' | 'vertical'; export type BentoSelectionCardGroupItemsPerRow = GridLayoutColumnWidth; export type BentoSelectionCardGroupEmits = FormFieldEmits<BentoSelectionCardModelValue>; export interface BentoSelectionCardGroupProps extends FormField { /** * The form id the selection card group is associated with. Defaults to null, as a selection card group can also be * used standalone. * @default null */ formId?: string; /** * Shows/hides the group label. * @default null */ hideLabel?: boolean; /** * The selection card group's layout. It can be vertical or horizontal. Defaults to vertical. * @values horizontal, vertical * @default vertical */ layout?: BentoSelectionCardGroupLayout; /** * The selection card group's items. */ items: Array<BentoSelectionCardItem>; /** * Sets the responsive number of items rendered in each row. * @default undefined */ itemsPerRow?: BentoSelectionCardGroupItemsPerRow; /** * Determines the initially selected value of the group. Corresponds to the BentoSelectionCardItem's value. * @default null */ modelValue?: BentoSelectionCardModelValue; /** * Renders the cards with a checkbox or a radio input. Selection logic will also apply in accordance. * @values checkbox, radio * @default checkbox */ variant?: BentoSelectionCardGroupVariant; } 

package/dist/assets/components/selection-card/selection-card.types.ts

@@ -0,0 +1 @@
+import { type RadioInputValue } from '@/components/internal/radio-input'; import { type BentoCheckboxType } from '../checkbox/checkbox.types'; import { type VueNodeElement } from '@/types/elements'; export enum BentoSelectionCardState { DISABLED = 'disabled', READONLY = 'readonly', ERROR = 'error', } export type BentoSelectionCardValue = string | number; export type BentoSelectionCardModelValue = BentoCheckboxType | RadioInputValue; export interface BentoSelectionCardItem { content?: string | object; description?: string; disabled?: boolean; dynamicContent?: string | object; fullyClickable?: boolean; hasError?: boolean; icon?: VueNodeElement; readonly?: boolean; subtitle?: string; title: string; value: BentoSelectionCardValue; } 

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

@@ -0,0 +1 @@
+export enum BentoSidepanelEvent { UPDATE_ACTIVE_PAGE = 'update:active-page', UPDATE_IS_OPEN = 'update:is-open', } 

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

@@ -0,0 +1 @@
+/** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoStatusVariant { BLUE = 'blue', GREEN = 'green', GREY = 'grey', ORANGE = 'orange', RED = 'red', YELLOW = 'yellow', } export interface BentoStatusProps { /** * Defines the type and color of the Status */ variant: BentoStatusVariant | `${BentoStatusVariant}`; } 

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

@@ -0,0 +1 @@
+import type { ComputedRef, Ref, UnwrapRef } from 'vue'; export enum BentoStepperTypeOption { LINEAR = 'linear', NON_LINEAR = 'non-linear', } export enum BentoStepperVariantOption { HORIZONTAL = 'horizontal', VERTICAL = 'vertical', } export interface BentoStepperStepExposeState { buttonElement: HTMLButtonElement | Ref<UnwrapRef<HTMLButtonElement>>; substeps: Array<BentoStepperStepExposeState> | Ref<Array<BentoStepperStepExposeState>>; stepContent: string | ComputedRef<string>; } export type BentoStepperState = Ref<{ activeStepIndex: number; latestActiveStep: number; type: `${BentoStepperTypeOption}`; variant: `${BentoStepperVariantOption}`; steps: Array<HTMLElement>; isParentStep?: boolean; navigateToStep: (index: number) => void; registerStep: (stepState: BentoStepperStepExposeState) => void; removeStep: (stepState: BentoStepperStepExposeState) => void; }>; 

package/dist/assets/components/structured-list/structured-list.types.ts

@@ -0,0 +1 @@
+export type BentoStructuredListLayoutOptions = '25-75' | '33-66' | '42-58' | '50-50' | '75-25' | '66-33' | '58-42'; export const BentoStructuredListLayoutOptions = ['25-75', '33-66', '42-58', '50-50', '75-25', '66-33', '58-42']; 

package/dist/assets/components/summary-grid/components/summary-grid-item/summary-grid-item.types.ts

@@ -0,0 +1 @@
+import type { BentoDashedUnderlineProps } from '@/components/dashed-underline'; import type { BentoSummaryGridItemSize, BentoSummaryGridItemTrendDirection } from '../../summary-grid.types'; /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum SummaryGridItemType { AMOUNT = 'amount', PERCENTAGE = 'percentage', NUMERIC = 'numeric', TEXT = 'text', CUSTOM = 'custom', } export interface BaseSummaryGridItemProps { /** * Text to copy to the clipboard */ copy?: string; /** * The width of `summary-grid-item` fits its content */ fitContent?: boolean; /** * Text showed in the info-icon tooltip on hover */ infoIconTooltipText?: string; // amount, percentage and numeric props /** * Defines the size of the `summary-grid-item` text content */ // TODO implement logic for Large size size?: `${BentoSummaryGridItemSize}`; /** * Text used as a title */ title: string; /** * Shows colored trend label next to text content */ trend?: string; /** * Defines the color of trend label */ trendDirection?: `${BentoSummaryGridItemTrendDirection}`; /** * Shows colored trend tag next to secondary metric value */ secondaryTrend?: string; /** * Defines the color of secondary trend tag */ secondaryTrendDirection?: `${BentoSummaryGridItemTrendDirection}`; /** * Size of the popover of a dashed-underline title */ underlinePopoverSize?: BentoDashedUnderlineProps['popoverSize']; /** * Text showed in a dashed-underline title tooltip on hover */ underlineTooltipText?: string; } export interface BentoSummaryGridItemProps extends BaseSummaryGridItemProps { /** * Applies styling based on content type */ // TODO add text truncation for SummaryGridItemType.TEXT itemType?: `${SummaryGridItemType}`; } 

package/dist/assets/components/summary-grid/components/summary-grid-item-amount/summary-grid-item-amount.types.ts

@@ -0,0 +1 @@
+import type { BaseSummaryGridItemProps } from '../summary-grid-item/summary-grid-item.types'; export interface BentoSummaryGridItemAmountProps extends BaseSummaryGridItemProps { /** * Amount to be shown as the main value */ label: string; /** * Adds additional label next to amount content */ secondaryLabel?: string; /** * Amount to be shown as the secondary metric value */ secondaryMetric?: string; } 

package/dist/assets/components/summary-grid/components/summary-grid-item-custom/summary-grid-item-custom.types.ts

@@ -0,0 +1 @@
+import type { BentoDashedUnderlineProps } from '@/components/dashed-underline'; export interface BentoSummaryGridItemCustomProps { /** * Text to copy to the clipboard */ copy?: string; /** * Text showed in the info-icon tooltip on hover */ infoIconTooltipText?: string; /** * Text used as a title */ title: string; /** * The width of `summary-grid-item` fits its content */ fitContent?: boolean; /** * Size of the popover of a dashed-underline title */ underlinePopoverSize?: BentoDashedUnderlineProps['popoverSize']; /** * Text showed in a dashed-underline title tooltip on hover */ underlineTooltipText?: string; } 

package/dist/assets/components/summary-grid/components/summary-grid-item-numeric/summary-grid-item-numeric.types.ts

@@ -0,0 +1 @@
+import type { BaseSummaryGridItemProps } from '../summary-grid-item/summary-grid-item.types'; export interface BentoSummaryGridItemNumericProps extends BaseSummaryGridItemProps { /** * Amount to be shown as the main value */ label: string; /** * Amount to be shown as the secondary metric value */ secondaryMetric?: string; } 

package/dist/assets/components/summary-grid/components/summary-grid-item-percentage/summary-grid-item-percentage.types.ts

@@ -0,0 +1 @@
+import type { BaseSummaryGridItemProps } from '../summary-grid-item/summary-grid-item.types'; export interface BentoSummaryGridItemPercentageProps extends BaseSummaryGridItemProps { /** * Amount to be shown as the main value */ label: string | number; /** * Amount to be shown as the secondary metric value */ secondaryMetric?: string | number; } 

package/dist/assets/components/summary-grid/components/summary-grid-item-text/summary-grid-item-text.types.ts

@@ -0,0 +1 @@
+import type { BentoDashedUnderlineProps } from '@/components/dashed-underline'; export interface BentoSummaryGridItemTextProps { /** * Text to copy to the clipboard */ copy?: string; /** * The width of `summary-grid-item` fits its content */ fitContent?: boolean; /** * Text showed in the info-icon tooltip on hover */ infoIconTooltipText?: string; /** * Amount to be shown as the main value */ label: string; /** * Text used as a title */ title: string; /** * Size of the popover of a dashed-underline title */ underlinePopoverSize?: BentoDashedUnderlineProps['popoverSize']; /** * Text showed in a dashed-underline title tooltip on hover */ underlineTooltipText?: string; } 

package/dist/assets/components/summary-grid/summary-grid.types.ts

@@ -0,0 +1 @@
+import { type GridLayoutColumnWidths } from '@/components/internal/grid-layout/grid-layout.types'; /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoSummaryGridItemSize { SMALL = 'small', MEDIUM = 'medium', LARGE = 'large', } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoSummaryGridItemTrendDirection { POSITIVE = 'positive', NEGATIVE = 'negative', NEUTRAL = 'neutral', } export interface BentoSummaryGridColumnWidth { row1: GridLayoutColumnWidths; row2?: GridLayoutColumnWidths; row3?: GridLayoutColumnWidths; } export type BentoSummaryGridLayout = () => { isSummaryGridLayout: boolean; }; export interface BentoSummaryGridProps { /** * Sets the responsive columns widths values for 1 of the 3 rows. */ columnWidth?: BentoSummaryGridColumnWidth; /** * Renders a font numeric style with slashed zeros instead of normal ones. */ slashedZero?: boolean; } 

package/dist/assets/components/tabs/components/tab.types.ts

@@ -0,0 +1 @@
+import { type Ref } from 'vue'; import { type MaybeRef } from '@/types/maybe-ref'; /** * Public */ export interface BentoTabProps { /** * Displays a counter next to the tab title */ counter?: number; /** * Determines whether the tab is disabled */ disabled?: boolean; /** * Prevents a tab from being displayed. * Use `hidden` instead of `v-show`. */ hidden?: boolean; /** * Title of the tab */ title: string; /** * Displays the tab with a notification indicator */ withNotificationIndicator?: boolean; /** * Callback function to safely capture the underlying DOM element of the tab. * Useful for anchoring tooltips, popovers, or tutorials. * * @example * // 1. Define your ref and setter in setup() * const tabNode = ref<Element | null>(null); * const setTabNode = (el: Element | null) => { tabNode.value = el; }; * * // 2. Pass the setter to the tab * <bento-tab :set-element-ref="setTabNode"> */ setElementRef?: (el: Element | null) => void; } /** * Private */ export interface BentoTab { counter: Ref<number>; disabled: Ref<boolean>; hidden: Ref<boolean>; id: string; title: MaybeRef<string>; withNotificationIndicator: Ref<boolean>; setElementRef: BentoTabProps['setElementRef']; } export type BentoTabProvidedTitle = (value: string) => void; 

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

@@ -0,0 +1 @@
+import type { Ref } from 'vue'; /** * Private */ export interface BentoStickyTabsOptions { top?: Ref<number>; } export type BentoTabsRegisterTab = (props: { counter: Ref<number>; disabled: Ref<boolean>; hidden: Ref<boolean>; title: Ref<string>; withNotificationIndicator: Ref<boolean>; setElementRef: (el: Element | null) => void; }) => { id: string; unregisterTab: () => void }; export enum BentoTabsEvent { ACTIVE_TAB_INDEX = 'update:active-tab-index', } 

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

@@ -0,0 +1 @@
+export interface BentoTagProps { /** * The label text content of the Tag. */ label?: string; /** * The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots "...". */ truncate?: number; /** * The variant variant of tag */ variant?: BentoTagVariant | `${BentoTagVariant}`; } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoTagVariant { GREY = 'grey', BLUE = 'blue', GREEN = 'green', ORANGE = 'orange', RED = 'red', WHITE = 'white', } 

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

@@ -0,0 +1 @@
+import type { FormField } from '../../types/form-field'; /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoTextareaResizeOption { HORIZONTAL = 'horizontal', VERTICAL = 'vertical', BOTH = 'both', NONE = 'none', } export enum BentoTextareaStateClass { CLEARABLE = 'clearable', DISABLED = 'disabled', ERROR = 'error', READONLY = 'readonly', } export enum BentoTextareaEvent { BLUR = 'blur', CHANGE = 'change', CLEAR = 'clear', ESCAPE_PRESSED = 'escape-pressed', FOCUS = 'focus', INPUT = 'input', UPDATE_MODEL_VALUE = 'update:model-value', KEYDOWN = 'keydown', KEYUP = 'keyup', } export interface BentoTextareaProps extends FormField { /** * Text that labels the input element * @default undefined */ ariaLabel?: string; /** * Text that shows number of characters in textarea * @default undefined */ characterLimit?: number; /** * If set to true, shows a button to clear all the text * @default false */ clearable?: boolean; /** * Sets the height of the textarea, e.g 200px OR 20vh * @default null */ height?: string | null; /** * Indicates the possibility of resize the textarea. * Accepts the Enum or the string literal version. * @default BentoTextareaResizeOption.BOTH */ resizable?: BentoTextareaResizeOption | `${BentoTextareaResizeOption}`; /** * Text displayed as the value of the textarea * @deprecated for usage with properties since version 2.0. Use `v-model` or `model-value` instead. */ value?: string; /** * Text displayed as the value of the textarea */ modelValue?: string; } 

package/dist/assets/components/timeline/components/timeline-item/timeline-item.vue

@@ -1 +1 @@
-<template> <li v-if="isVisible" class="b-timeline-item" :class="conditionalClasses"> <div v-if="timegap" class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <div class="b-timeline-item__icon b-timeline-item__icon--timegap"></div> <div class="b-timeline-item__separator"></div> </div> <div class="b-timeline-item__content"> <bento-typography class="b-timeline-item__timegap" :aria-label="timegapAriaLabel"> {{ timegap }} </bento-typography> </div> </div> <div class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <square-small-icon class="b-timeline-item__icon" :class="iconConditionalClasses" /> <div v-if="!isLastItem" class="b-timeline-item__separator" data-testid="last-timeline-item-separator" ></div> </div> <div class="b-timeline-item__content"> <bento-typography v-if="!isNoteType" el="div" variant="body" strongest class="b-timeline-item__title" role="heading" aria-level="2" > <bento-link v-if="isLinkTitle" v-bind="linkTitleProps" disable-typography>{{ linkTitleProps.title }}</bento-link> <span v-else>{{ title }}</span> </bento-typography> <bento-typography v-if="isNoteType && (description || hasSlot('default'))" el="div" variant="body" class="b-timeline-item__description" > <slot>{{ description }}</slot> </bento-typography> <bento-typography v-if="timestamp" class="b-timeline-item__timestamp" el="div" variant="caption"> <bento-date :date="timestamp.date" :format="timestamp.format" disable-typography /> {{ timestamp.value }} </bento-typography> <bento-typography v-if="!isNoteType && additionalTimestamp" class="b-timeline-item__timestamp" el="div" variant="caption" > <bento-date :date="additionalTimestamp.date" :format="additionalTimestamp.format" disable-typography /> {{ additionalTimestamp.value }} </bento-typography> <bento-typography v-if="!isNoteType && (description || hasSlot('default'))" el="div" variant="body" class="b-timeline-item__description" > <slot>{{ description }}</slot> </bento-typography> <div v-if="!isNoteType && dataList" class="b-timeline-item__data-list"> <bento-structured-list> <bento-structured-list-item v-for="listEntry in dataList" :key="generateUid(listEntry.label)" :label="listEntry.label" > <bento-typography variant="caption">{{ listEntry.value }}</bento-typography> </bento-structured-list-item> </bento-structured-list> </div> <bento-tag v-if="!isNoteType && tag" v-bind="tag" class="b-timeline-item__tag" /> </div> </div> <div v-if="displayShowMoreButton" class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <div class="b-timeline-item__separator"></div> </div> <div class="b-timeline-item__content"> <bento-button class="b-timeline__show-more" variant="tertiary" @click="showAll = !showAll"> <template v-if="!showAll">{{ t('showMore', { items: hiddenItems }) }}</template> <template v-else>{{ t('showLess') }}</template> </bento-button> </div> </div> </li> </template> <script setup lang="ts"> import { computed, defineComponent, inject, onUnmounted, provide, useSlots } from 'vue'; // Components import { BentoButton } from '@/components/button'; import { BentoDate } from '@/components/date'; import { BentoLink } from '@/components/link'; import { BentoTag } from '@/components/tag'; import { BentoTypography } from '@/components/typography'; import { BentoStructuredList, BentoStructuredListItem } from '@/components/structured-list'; import SquareSmallIcon from '@adyen/ui-assets-icons-16/vue/square-small-fill'; // Utils import { deprecate } from '@/utils/ts/deprecate'; import { generateUid } from '@/core/utils/ts'; import { useI18n } from '@/utils/ts/i18n'; import { useHasSlot } from '@/composables'; import { formatDistanceStrict } from 'date-fns/formatDistanceStrict'; // Types import { type BentoTimelineConfigData, type BentoTimelineEntry, type BentoTimelineItemProps, type BentoTimelineItemTitle, BentoTimelineItemVariant, type BentoTimelineRegisterEntry, } from '../../timeline.types'; // Keys import { TIMELINE_CONFIG_INJECTION_KEY, TIMELINE_REGISTER_ENTRY_INJECTION_KEY } from '../../timeline.keys'; import { STRUCTURED_LIST_CONDENSED_INJECTION_KEY } from '@/components/structured-list/structured-list.keys'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<BentoTimelineItemProps>(), { additionalTimestamp: null, dataList: null, description: null, status: 'black', tag: undefined, title: null, type: 'milestone', variant: null, }); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const slots = useSlots(); const hasSlot = useHasSlot(slots); const isNoteType = computed(() => props.type === 'note'); // Handle variant deprecation, by setting `critical` and `success` variants to their respective colors const computedStatus = computed(() => { if (props.variant === BentoTimelineItemVariant.CRITICAL) { return 'red'; } if (props.variant === BentoTimelineItemVariant.SUCCESS) { return 'green'; } return props.status; }); if (props.variant) { deprecate( 'BentoTimelineItem "variant" property', `Use the BentoTimelineItem "status" modifier instead to modify the color of the timeline icon. <bento-timeline-item status="red" />`, '2.0.0' ); } const iconConditionalClasses = computed(() => ({ [`b-timeline-item__icon--${computedStatus.value}`]: computedStatus.value && !isNoteType.value, })); const conditionalClasses = computed(() => ({ 'b-timeline-item--note': isNoteType.value, })); // Provide STRUCTURED_LIST_CONDENSED_INJECTION_KEY as true, to set the internal condensed style in the BentoStructuredList comp provide(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, true); const entry: BentoTimelineEntry = { title: props.title, date: props.timestamp.date, }; // Register timeline entry to the timeline entries array const registerTimelineEntry: BentoTimelineRegisterEntry = inject(TIMELINE_REGISTER_ENTRY_INJECTION_KEY); const { timelineEntries, unregisterTimelineEntry } = registerTimelineEntry(entry); // On unmounting timeline item, unregister it from the parent timeline component onUnmounted(() => unregisterTimelineEntry()); // Get timeline config data from the parent Timeline comp const { showAll, showMoreIndex, hiddenItems, visibleIndexes, timegapLimit }: BentoTimelineConfigData = inject(TIMELINE_CONFIG_INJECTION_KEY); const index = computed(() => timelineEntries.value.indexOf(entry)); const allItemsShowing = computed(() => showAll.value || !visibleIndexes.value); const isVisible = computed(() => (allItemsShowing.value ? true : visibleIndexes.value.includes(index.value))); const isLinkTitle = computed(() => typeof props.title === 'object'); const linkTitleProps = computed(() => props.title as BentoTimelineItemTitle); const timegap = computed(() => { if (!timegapLimit.value) { return null; } const previousDate = timelineEntries.value[index.value - 1]?.date; const isPreviousItemVisible = allItemsShowing.value || visibleIndexes.value.includes(index.value - 1); if (!previousDate || !isPreviousItemVisible) { return null; } const { date } = timelineEntries.value[index.value]; const timegapInSelectedUnit = parseInt( formatDistanceStrict(previousDate, date, { unit: timegapLimit.value.unit }), 10 ); return timegapLimit.value.amount < timegapInSelectedUnit ? formatDistanceStrict(previousDate, date, { roundingMethod: 'floor' }) : null; }); const timegapAriaLabel = computed(() => (timegap.value ? t('timegap', { timegap: timegap.value }) : '')); const displayShowMoreButton = computed(() => hiddenItems.value && showMoreIndex.value === index.value); const isLastItem = computed(() => { // The index can be -1 before the parent has had a chance to sort the array. return index.value !== -1 && index.value === timelineEntries.value.length - 1; }); </script> <script lang="ts"> /** * BentoTimelineItem renders each event in the Timeline component * * @example * import { BentoDateFormat, BentoTimelineItem } from '@adyen/bento-vue2'; * * export default { * components: { BentoTimelineItem }, * template: ` * <bento-timeline-item * title="Milestone" * :timestamp="{ date: new Date(), value: 'Created at', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD }" * :additional-timestamp="{ date: new Date(), value: 'Modified at' }" * description="Milestone description" * :data-list="[ * { label: 'Label', value: 'Value' }, * { label: 'Label', value: 'Value' }, * ]" * :tag="{ label: 'Tag'}" * /> * ` * } */ export default defineComponent({ name: 'bento-timeline-item', i18n: { messages }, }); </script> <style lang="scss" scoped src="./timeline-item.scss" /> 
+<template> <li v-if="isVisible" class="b-timeline-item" :class="conditionalClasses"> <div v-if="timegap" class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <div class="b-timeline-item__icon b-timeline-item__icon--timegap"></div> <div class="b-timeline-item__separator"></div> </div> <div class="b-timeline-item__content"> <bento-typography class="b-timeline-item__timegap" :aria-label="timegapAriaLabel"> {{ timegap }} </bento-typography> </div> </div> <div class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <square-small-icon class="b-timeline-item__icon" :class="iconConditionalClasses" /> <div v-if="!isLastItem" class="b-timeline-item__separator" data-testid="last-timeline-item-separator" ></div> </div> <div class="b-timeline-item__content"> <bento-typography v-if="!isNoteType" el="div" variant="body" strongest class="b-timeline-item__title" role="heading" aria-level="2" > <bento-link v-if="isLinkTitle" v-bind="linkTitleProps" disable-typography>{{ linkTitleProps.title }}</bento-link> <span v-else>{{ title }}</span> </bento-typography> <bento-typography v-if="isNoteType && (description || hasSlot('default'))" el="div" variant="body" class="b-timeline-item__description" > <slot>{{ description }}</slot> </bento-typography> <bento-typography v-if="timestamp" class="b-timeline-item__timestamp" el="div" variant="caption"> <bento-date :date="timestamp.date" :format="timestamp.format" disable-typography /> <bento-dashed-underline v-if="timestamp.description" v-bind="timestamp.description"> {{ timestamp.value }} </bento-dashed-underline> <span v-else>{{ timestamp.value }}</span> </bento-typography> <bento-typography v-if="!isNoteType && additionalTimestamp" class="b-timeline-item__timestamp" el="div" variant="caption" > <bento-date :date="additionalTimestamp.date" :format="additionalTimestamp.format" disable-typography /> <bento-dashed-underline v-if="additionalTimestamp.description" v-bind="additionalTimestamp.description" > {{ additionalTimestamp.value }} </bento-dashed-underline> <span v-else> {{ additionalTimestamp.value }} </span> </bento-typography> <bento-typography v-if="!isNoteType && (description || hasSlot('default'))" el="div" variant="body" class="b-timeline-item__description" > <slot>{{ description }}</slot> </bento-typography> <div v-if="!isNoteType && dataList" class="b-timeline-item__data-list"> <bento-structured-list> <bento-structured-list-item v-for="listEntry in dataList" :key="generateUid(listEntry.label)" :label="listEntry.label" > <bento-typography variant="caption">{{ listEntry.value }}</bento-typography> </bento-structured-list-item> </bento-structured-list> </div> <bento-tag v-if="!isNoteType && tag" v-bind="tag" class="b-timeline-item__tag" /> </div> </div> <div v-if="displayShowMoreButton" class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <div class="b-timeline-item__separator"></div> </div> <div class="b-timeline-item__content"> <bento-button class="b-timeline__show-more" variant="tertiary" @click="showAll = !showAll"> <template v-if="!showAll">{{ t('showMore', { items: hiddenItems }) }}</template> <template v-else>{{ t('showLess') }}</template> </bento-button> </div> </div> </li> </template> <script setup lang="ts"> import { computed, defineComponent, inject, onUnmounted, provide, useSlots } from 'vue'; // Components import { BentoButton } from '@/components/button'; import { BentoDashedUnderline } from '@/components/dashed-underline'; import { BentoDate } from '@/components/date'; import { BentoLink } from '@/components/link'; import { BentoTag } from '@/components/tag'; import { BentoTypography } from '@/components/typography'; import { BentoStructuredList, BentoStructuredListItem } from '@/components/structured-list'; import SquareSmallIcon from '@adyen/ui-assets-icons-16/vue/square-small-fill'; // Utils import { deprecate } from '@/utils/ts/deprecate'; import { generateUid } from '@/core/utils/ts'; import { useI18n } from '@/utils/ts/i18n'; import { useHasSlot } from '@/composables'; import { formatDistanceStrict } from 'date-fns/formatDistanceStrict'; // Types import { type BentoTimelineConfigData, type BentoTimelineEntry, type BentoTimelineItemProps, type BentoTimelineItemTitle, BentoTimelineItemVariant, type BentoTimelineRegisterEntry, } from '../../timeline.types'; // Keys import { TIMELINE_CONFIG_INJECTION_KEY, TIMELINE_REGISTER_ENTRY_INJECTION_KEY } from '../../timeline.keys'; import { STRUCTURED_LIST_CONDENSED_INJECTION_KEY } from '@/components/structured-list/structured-list.keys'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<BentoTimelineItemProps>(), { additionalTimestamp: null, dataList: null, description: null, status: 'black', tag: undefined, title: null, type: 'milestone', variant: null, }); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const slots = useSlots(); const hasSlot = useHasSlot(slots); const isNoteType = computed(() => props.type === 'note'); // Handle variant deprecation, by setting `critical` and `success` variants to their respective colors const computedStatus = computed(() => { if (props.variant === BentoTimelineItemVariant.CRITICAL) { return 'red'; } if (props.variant === BentoTimelineItemVariant.SUCCESS) { return 'green'; } return props.status; }); if (props.variant) { deprecate( 'BentoTimelineItem "variant" property', `Use the BentoTimelineItem "status" modifier instead to modify the color of the timeline icon. <bento-timeline-item status="red" />`, '2.0.0' ); } const iconConditionalClasses = computed(() => ({ [`b-timeline-item__icon--${computedStatus.value}`]: computedStatus.value && !isNoteType.value, })); const conditionalClasses = computed(() => ({ 'b-timeline-item--note': isNoteType.value, })); // Provide STRUCTURED_LIST_CONDENSED_INJECTION_KEY as true, to set the internal condensed style in the BentoStructuredList comp provide(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, true); const entry: BentoTimelineEntry = { title: props.title, date: props.timestamp.date, }; // Register timeline entry to the timeline entries array const registerTimelineEntry: BentoTimelineRegisterEntry = inject(TIMELINE_REGISTER_ENTRY_INJECTION_KEY); const { timelineEntries, unregisterTimelineEntry } = registerTimelineEntry(entry); // On unmounting timeline item, unregister it from the parent timeline component onUnmounted(() => unregisterTimelineEntry()); // Get timeline config data from the parent Timeline comp const { showAll, showMoreIndex, hiddenItems, visibleIndexes, timegapLimit }: BentoTimelineConfigData = inject(TIMELINE_CONFIG_INJECTION_KEY); const index = computed(() => timelineEntries.value.indexOf(entry)); const allItemsShowing = computed(() => showAll.value || !visibleIndexes.value); const isVisible = computed(() => (allItemsShowing.value ? true : visibleIndexes.value.includes(index.value))); const isLinkTitle = computed(() => typeof props.title === 'object'); const linkTitleProps = computed(() => props.title as BentoTimelineItemTitle); const timegap = computed(() => { if (!timegapLimit.value) { return null; } const previousDate = timelineEntries.value[index.value - 1]?.date; const isPreviousItemVisible = allItemsShowing.value || visibleIndexes.value.includes(index.value - 1); if (!previousDate || !isPreviousItemVisible) { return null; } const { date } = timelineEntries.value[index.value]; const timegapInSelectedUnit = parseInt( formatDistanceStrict(previousDate, date, { unit: timegapLimit.value.unit }), 10 ); return timegapLimit.value.amount < timegapInSelectedUnit ? formatDistanceStrict(previousDate, date, { roundingMethod: 'floor' }) : null; }); const timegapAriaLabel = computed(() => (timegap.value ? t('timegap', { timegap: timegap.value }) : '')); const displayShowMoreButton = computed(() => hiddenItems.value && showMoreIndex.value === index.value); const isLastItem = computed(() => { // The index can be -1 before the parent has had a chance to sort the array. return index.value !== -1 && index.value === timelineEntries.value.length - 1; }); </script> <script lang="ts"> /** * BentoTimelineItem renders each event in the Timeline component * * @example * import { BentoDateFormat, BentoTimelineItem } from '@adyen/bento-vue2'; * * export default { * components: { BentoTimelineItem }, * template: ` * <bento-timeline-item * title="Milestone" * :timestamp="{ date: new Date(), value: 'Created at', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD }" * :additional-timestamp="{ date: new Date(), value: 'Modified at' }" * description="Milestone description" * :data-list="[ * { label: 'Label', value: 'Value' }, * { label: 'Label', value: 'Value' }, * ]" * :tag="{ label: 'Tag'}" * /> * ` * } */ export default defineComponent({ name: 'bento-timeline-item', i18n: { messages }, }); </script> <style lang="scss" scoped src="./timeline-item.scss" /> 

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

@@ -1 +1 @@
-import type { Meta, StoryObj } from '@storybook/vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { onMounted, ref } from 'vue'; import { isVue2 } from 'vue-demi'; import BentoTimeline from './timeline.vue'; import BentoTimelineItem from './components/timeline-item/timeline-item.vue'; import { BentoTimelineGapUnit, BentoTimelineShowMorePlacement } from './timeline.types'; import TimelineDynamicAddition from './__tests__/timeline-dynamic-add-stub.vue?raw'; import { BentoDateFormat } from '@/components/date/date.types'; import BentoLink from '@/components/link/link.vue'; import BentoButton from '@/components/button/button.vue'; const meta: Meta = { title: 'Timeline', component: BentoTimeline, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'BentoTimelineItem components', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoTimeline>; const DEFAULT_PROPS = { timegapLimit: { unit: BentoTimelineGapUnit.DAY, amount: 15 }, showMore: { limit: 3, placement: BentoTimelineShowMorePlacement.AFTER_FIRST }, }; const DEFAULT_ITEM_PROPS = { timestamp: { date: new Date(), value: 'AuthorName', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD, }, dataList: [ { label: 'Label', value: 'Value' }, { label: 'Label', value: 'Value' }, ], description: 'Space to put some description about this milestone', }; const { description: _, ...DEFAULT_PROPS_WITHOUT_DESCRIPTION } = DEFAULT_ITEM_PROPS; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone5" /> <bento-timeline-item v-bind="milestone4" /> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2" /> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone5 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 5', status: 'green', }; const milestone4 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 4', timestamp: { date: new Date().setDate(-2), value: 'AuthorName', }, }; const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 3', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'red', }; const milestone2 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-15), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, milestone4, milestone5, }; }, }), args: { ...DEFAULT_PROPS, }, }; export const WithLinks: Story = { render: (_args, { argTypes }) => ({ components: { BentoLink, BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2"> A description with <bento-link to="/">a link</bento-link> </bento-timeline-item> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: { title: 'Milestone 3', to: '/', }, timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'green', }; const milestone2 = { ...DEFAULT_PROPS_WITHOUT_DESCRIPTION, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-15), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, }; }, }), args: { ...DEFAULT_PROPS, }, }; const withNotesCode = ` <template> <bento-timeline v-bind="args" @add-timeline-note="addNote"> <bento-timeline-item v-for="item in timelineItems" v-bind="item" /> </bento-timeline> </template> <script setup> const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const timelineItems = ref(); onMounted(() => { timelineItems.value = [milestone3, milestone2, milestone1]; }); const addNote = e => { timelineItems.value.unshift(e); }; return { args: isVue2 ? props : _args, timelineItems, addNote, }; </script> `; export const WithNotes: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2" /> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, }; }, }), args: { ...DEFAULT_PROPS, showMore: null, }, parameters: storybookDocsParameter(withNotesCode), }; const addNoteCode = ` <template> <bento-timeline v-bind="args" add-note @add-timeline-note="addNote"> <bento-timeline-item v-for="item in timelineItems" v-bind="item" /> </bento-timeline> </template> <script setup> const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const timelineItems = ref(); onMounted(() => { timelineItems.value = [milestone3, milestone2, milestone1]; }); const addNote = e => { timelineItems.value.unshift(e); }; return { timelineItems, addNote, }; </script> `; export const AddNote: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args" add-note @add-timeline-note="addNote"> <bento-timeline-item v-for="item in timelineItems" v-bind="item" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const timelineItems = ref(); onMounted(() => { timelineItems.value = [milestone3, milestone2, milestone1]; }); const addNote = e => { const newNote = { ...e, timestamp: { ...e.timestamp, value: 'AuthorName' } }; timelineItems.value.unshift(newNote); }; return { args: isVue2 ? props : _args, timelineItems, addNote, }; }, }), args: { ...DEFAULT_PROPS, showMore: null, addNotes: true, }, parameters: storybookDocsParameter(addNoteCode), }; export const DynamicItemAddition: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <div style="display: flex; flex-direction: row; align-items: flex-start; gap: 16px;"> <bento-button @click="addItem">Add timeline item</bento-button> <bento-timeline v-if="timelineEntries"> <bento-timeline-item v-for="entry in timelineEntries" :key="entry.title" v-bind="entry" /> </bento-timeline> </div> `, setup(props) { const timelineEntries = ref([]); let index = 0; const addItem = () => { if (index < 5) { timelineEntries.value.unshift(milestones[index]); index++; } }; const milestone5 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 5', status: 'green', }; const milestone4 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 4', timestamp: { date: new Date().setDate(-2), value: 'AuthorName', }, }; const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 3', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'red', }; const milestone2 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-15), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const milestones = [milestone1, milestone2, milestone3, milestone4, milestone5]; return { args: isVue2 ? props : _args, timelineEntries, addItem, }; }, }), args: { ...DEFAULT_PROPS, }, parameters: storybookDocsParameter(TimelineDynamicAddition), }; 
+import type { Meta, StoryObj } from '@storybook/vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { onMounted, ref } from 'vue'; import { isVue2 } from 'vue-demi'; import BentoTimeline from './timeline.vue'; import BentoTimelineItem from './components/timeline-item/timeline-item.vue'; import { BentoTimelineGapUnit, BentoTimelineShowMorePlacement } from './timeline.types'; import TimelineDynamicAddition from './__tests__/timeline-dynamic-add-stub.vue?raw'; import TimelineDefaultExample from './__tests__/timeline-default-example.vue?raw'; import { BentoDateFormat } from '@/components/date/date.types'; import BentoLink from '@/components/link/link.vue'; import BentoButton from '@/components/button/button.vue'; const meta: Meta = { title: 'Timeline', component: BentoTimeline, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'BentoTimelineItem components', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoTimeline>; const DEFAULT_PROPS = { timegapLimit: { unit: BentoTimelineGapUnit.DAY, amount: 15 }, showMore: { limit: 3, placement: BentoTimelineShowMorePlacement.AFTER_FIRST }, }; const DEFAULT_ITEM_PROPS = { timestamp: { date: new Date(), value: 'AuthorName', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD, }, dataList: [ { label: 'Label', value: 'Value' }, { label: 'Label', value: 'Value' }, ], description: 'Space to put some description about this milestone', }; const { description: _, ...DEFAULT_PROPS_WITHOUT_DESCRIPTION } = DEFAULT_ITEM_PROPS; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone5" /> <bento-timeline-item v-bind="milestone4" /> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2" /> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone5 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 5', status: 'green', }; const milestone4 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 4', timestamp: { date: new Date().setDate(-2), value: 'AuthorName', }, }; const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 3', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'red', }; const milestone2 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'BookingDate', description: { popoverText: 'date of booking', }, }, additionalTimestamp: { date: new Date().setDate(-15), value: 'ValueDate', description: { tooltipText: 'date of value', }, }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, milestone4, milestone5, }; }, }), args: { ...DEFAULT_PROPS, }, parameters: storybookDocsParameter(TimelineDefaultExample), }; export const WithLinks: Story = { render: (_args, { argTypes }) => ({ components: { BentoLink, BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2"> A description with <bento-link to="/">a link</bento-link> </bento-timeline-item> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: { title: 'Milestone 3', to: '/', }, timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'green', }; const milestone2 = { ...DEFAULT_PROPS_WITHOUT_DESCRIPTION, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-15), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, }; }, }), args: { ...DEFAULT_PROPS, }, }; const withNotesCode = ` <template> <bento-timeline v-bind="args" @add-timeline-note="addNote"> <bento-timeline-item v-for="item in timelineItems" v-bind="item" /> </bento-timeline> </template> <script setup> const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const timelineItems = ref(); onMounted(() => { timelineItems.value = [milestone3, milestone2, milestone1]; }); const addNote = e => { timelineItems.value.unshift(e); }; return { args: isVue2 ? props : _args, timelineItems, addNote, }; </script> `; export const WithNotes: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2" /> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, }; }, }), args: { ...DEFAULT_PROPS, showMore: null, }, parameters: storybookDocsParameter(withNotesCode), }; const addNoteCode = ` <template> <bento-timeline v-bind="args" add-note @add-timeline-note="addNote"> <bento-timeline-item v-for="item in timelineItems" v-bind="item" /> </bento-timeline> </template> <script setup> const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const timelineItems = ref(); onMounted(() => { timelineItems.value = [milestone3, milestone2, milestone1]; }); const addNote = e => { timelineItems.value.unshift(e); }; return { timelineItems, addNote, }; </script> `; export const AddNote: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args" add-note @add-timeline-note="addNote"> <bento-timeline-item v-for="item in timelineItems" v-bind="item" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const timelineItems = ref(); onMounted(() => { timelineItems.value = [milestone3, milestone2, milestone1]; }); const addNote = e => { const newNote = { ...e, timestamp: { ...e.timestamp, value: 'AuthorName' } }; timelineItems.value.unshift(newNote); }; return { args: isVue2 ? props : _args, timelineItems, addNote, }; }, }), args: { ...DEFAULT_PROPS, showMore: null, addNotes: true, }, parameters: storybookDocsParameter(addNoteCode), }; export const DynamicItemAddition: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <div style="display: flex; flex-direction: row; align-items: flex-start; gap: 16px;"> <bento-button @click="addItem">Add timeline item</bento-button> <bento-timeline v-if="timelineEntries"> <bento-timeline-item v-for="entry in timelineEntries" :key="entry.title" v-bind="entry" /> </bento-timeline> </div> `, setup(props) { const timelineEntries = ref([]); let index = 0; const addItem = () => { if (index < 5) { timelineEntries.value.unshift(milestones[index]); index++; } }; const milestone5 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 5', status: 'green', }; const milestone4 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 4', timestamp: { date: new Date().setDate(-2), value: 'AuthorName', }, }; const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 3', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'red', }; const milestone2 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-15), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const milestones = [milestone1, milestone2, milestone3, milestone4, milestone5]; return { args: isVue2 ? props : _args, timelineEntries, addItem, }; }, }), args: { ...DEFAULT_PROPS, }, parameters: storybookDocsParameter(TimelineDynamicAddition), }; 

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

@@ -0,0 +1 @@
+import { type BentoDashedUnderlineProps } from '@/components/dashed-underline/dashed-underline.types'; import { type BentoDateFormat } from '@/components/date/date.types'; import { type BentoTag } from '@/components/tag'; import { type Ref } from 'vue'; import type { RouterLinkProps } from 'vue-router/types/router.d.ts'; export enum BentoTimelineShowMorePlacement { BOTTOM = 'bottom', AFTER_FIRST = 'after-first', BEFORE_LAST = 'before-last', } export interface BentoTimelineShowMoreObject { limit: number; placement?: BentoTimelineShowMorePlacement; } export enum BentoTimelineGapUnit { SECOND = 'second', MINUTE = 'minute', HOUR = 'hour', DAY = 'day', MONTH = 'month', YEAR = 'year', } export interface BentoTimelineGapObject { amount: number; unit: BentoTimelineGapUnit; } /** * @deprecated "variant" prop was deprecated. Use "status" modifier instead. */ export enum BentoTimelineItemVariant { DEFAULT = 'SquareSmallIcon', SUCCESS = 'CheckedCircleIcon', CRITICAL = 'CrossCircleIcon', } export enum BentoTimelineStatus { BLACK = 'black', BLUE = 'blue', GREEN = 'green', GREY = 'grey', ORANGE = 'orange', RED = 'red', YELLOW = 'yellow', } export interface BentoTimelineItemTitle extends RouterLinkProps { /** * Link label. */ title: string; /** * Set the rendered link to a regular external anchor link. */ external?: boolean; /** * Sets the target of the rendered link. */ target?: string; // This has been added to allow users to add HTML and Aria attribute // eslint-disable-next-line @typescript-eslint/no-explicit-any [name: string]: any; } export interface BentoTimelineTimestamp { date: Date | number; format?: BentoDateFormat; value?: string; description?: BentoDashedUnderlineProps; } export interface BentoTimelineDataListObject { label: string; value: string; } export type BentoTimelineDataList = Array<BentoTimelineDataListObject>; export type BentoTimelineTagProps = InstanceType<typeof BentoTag>['$props']; export interface BentoTimelineEntry { title?: string | BentoTimelineItemTitle; description?: string; date: Date | number; } /** * @deprecated from version 2.0.0. */ export type BentoTimelineRegisterEntry = (props: { title?: string | BentoTimelineItemTitle; description?: string; date: Date | number; }) => { timelineEntries: Ref<Array<BentoTimelineEntry>>; index: number; unregisterTimelineEntry: () => void }; /** * @private */ export type BentoInternalTimelineRegisterEntry = ( entry: BentoTimelineEntry ) => { timelineEntries: Ref<Array<BentoTimelineEntry>>; unregisterTimelineEntry: () => void }; export interface BentoTimelineConfigData { showAll: Ref<boolean>; showMoreIndex: Ref<number>; hiddenItems: Ref<number>; visibleIndexes: Ref<Array<number>>; timegapLimit: Ref<BentoTimelineGapObject>; timelineEntries: Ref<Array<BentoTimelineEntry>>; } export interface BentoTimelineProps { /** * If set to true, gives the possibility to manually add notes to the timeline via a textarea */ addNote?: boolean; /** * Object that determines the max number of items to show without clicking the show more button * and where in the timeline is the show more button placed */ showMore?: BentoTimelineShowMoreObject; /** * Object that determines minimum amount of time for the automatic timegap indicator; * Define a unit (hour, day, month) and an amount (e.g. { amount: 7, unit: 'days' }). * If null, automatic timegap detection will be turned off */ timegapLimit?: BentoTimelineGapObject; } export interface BentoTimelineItemProps { /** * Additional timestamp of the event */ additionalTimestamp?: BentoTimelineTimestamp; /** * Relevant key-value pair data to display in the event */ dataList?: BentoTimelineDataList; /** * Description of the event */ description?: string; /** * Modifier that changes the color of the timeline icon * @values blue, black, green, grey, orange, red, yellow */ status?: string; /** * Tag props that will be passed down to inner tag component */ tag?: BentoTimelineTagProps; /** * Main timestamp of the event. Used for timegap detection. */ timestamp: BentoTimelineTimestamp; /** * Title of the event */ title?: BentoTimelineItemTitle | string; /** * Type of the timeline item. If set to 'note', it renders a note item in the timeline. Defaults to 'milestone'. * @values milestone, note */ type?: string; /** * Variant for the timeline item * @values DEFAULT, SUCCESS, CRITICAL * * @deprecated Use "status" prop instead */ variant?: BentoTimelineItemVariant | `${BentoTimelineItemVariant}`; } 

package/dist/assets/components/toast/components/toast-shadow-stack/toast-shadow-stack.types.ts

@@ -0,0 +1 @@
+import type { BentoToastItem } from '@/composables'; export interface BentoToastItemWithDimensions extends BentoToastItem { bottom: number; height: number; } 

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

@@ -0,0 +1 @@
+export enum BentoTogglePropClass { LABEL_FIRST = 'label-first', } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoToggleLabelPosition { BEFORE = 'before', AFTER = 'after', } 

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

@@ -0,0 +1 @@
+import type { Ref } from 'vue'; import type { BentoButtonActionObject } from '@/components/button'; import type { BentoImage } from '@/components/image'; import type { BentoPopoverPositions } from '@/components/popover'; import type { VueNodeElement } from '@/types/elements'; export interface BentoTutorialStep { target: VueNodeElement | Ref<VueNodeElement>; image?: Omit<InstanceType<typeof BentoImage>['$props'], 'aspectRatio'>; title: string; description: string; action?: BentoButtonActionObject; position?: `${BentoPopoverPositions}`; } export type BentoTutorialScrollOptions = boolean | ScrollIntoViewOptions; 

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

@@ -0,0 +1 @@
+/** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoTypographyVariant { CAPTION = 'caption', BODY = 'body', /** @deprecated Use "TITLE" instead. */ SUBTITLE = 'subtitle', TITLE = 'title', } export enum BentoTypographyModifier { WIDE = 'wide', STRONGER = 'stronger', STRONGER_WIDE = 'stronger-wide', STRONGEST = 'strongest', STRONGEST_WIDE = 'strongest-wide', MEDIUM = 'm', LARGE = 'l', MOBILE = 'mobile', } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoTypographyElement { H1 = 'h1', H2 = 'h2', H3 = 'h3', H4 = 'h4', H5 = 'h5', H6 = 'h6', DIV = 'div', PARAGRAPH = 'p', SPAN = 'span', } export interface BentoTypographyProps { /** * Sets the HTML DOM element. * @values h1, h2, h3, h4, h5, h6, div, p, span */ el?: BentoTypographyElement | `${BentoTypographyElement}`; /** * Adds the large class modifier. * Applicable to the Title variant. */ large?: boolean; /** * Adds the medium class modifier. * Applicable to the Title variant. */ medium?: boolean; /** * Adds the rich-text modifier, which allows for the use of HTML tags inside typography. */ richText?: boolean; /** * Adds the stronger class modifier. * Applicable to Caption, Body and Subtitle variants. */ stronger?: boolean; /** * Adds the strongest class modifier. * Applicable to Caption, Body and Subtitle variants. */ strongest?: boolean; /** * Sets the type of typography variant. * @values caption, body, title. */ variant?: BentoTypographyVariant | `${BentoTypographyVariant}`; /** * Adds the medium class modifier. * Applicable to the Body variant. */ wide?: boolean; }