@adyen/bento-mcp 0.1.4 → 0.3.0

package/dist/assets/components/input-time/input-time.stories.ts

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { isVue2 } from 'vue-demi'; import { ref } from 'vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoInputTime from './input-time.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import defaultCode from './__tests__/input-time-default-example.vue?raw'; const meta: Meta = { title: 'Input Time', component: BentoInputTime, }; const DEFAULT_PROPS = { label: 'Input time', }; export default meta; type Story = StoryObj<typeof BentoInputTime>; export const Default: Story = { args: DEFAULT_PROPS, render: (_args, { argTypes }) => ({ components: { BentoInputTime }, props: Object.keys(argTypes), setup(props) { const modelValue = ref(''); const onUpdateModelValue = (value: string) => { modelValue.value = value; action('update:model-value')(value); }; return { args: isVue2 ? props : _args, modelValue, onUpdateModelValue, onInputValid: action('input:valid'), onInputError: action('input:error'), onInputKeydown: action('keydown'), }; }, template: ` <bento-input-time v-bind="args" :model-value="modelValue" @update:model-value="onUpdateModelValue" @input:valid="onInputValid" @input:error="onInputError" @keydown="onInputKeydown" /> `, }), parameters: storybookDocsParameter(defaultCode), }; 

package/dist/assets/components/input-time/input-time.types.ts

@@ -0,0 +1 @@
+import type { BentoInputFieldValue } from '@/components/input-field/input-field.types'; import { type FormField } from '../../types/form-field'; export interface BentoInputTimeProps extends FormField { /** * Reduces height of the input */ condensed?: boolean; /** * Text displayed as the value of the input field */ modelValue?: BentoInputFieldValue; } 

package/dist/assets/components/input-time/input-time.vue

@@ -0,0 +1 @@
+<template> <bento-input-field class="b-input-time" :condensed="props.condensed" :disabled="props.disabled" :error-message="computedErrorMessage" :label="props.label" :model-value="props.modelValue" :optional="props.optional" :placeholder="props.placeholder" :readonly="props.readonly" :required="props.required" :tooltip-text="props.tooltipText" v-bind="$attrs" @update:model-value="onInput" @keydown="onKeyDown" > <template v-if="hasSlot('default')" #default> <slot name="default"></slot> </template> <template #description> <slot name="description">{{ props.description ? `${props.description} ${t('timeFormatDescription')}` : t('timeFormatDescription') }}</slot> </template> </bento-input-field> </template> <script setup lang="ts"> // Components import { BentoInputField } from '@/components/input-field'; // Utils import { debounce } from '@/utils/ts/debounce'; import { useI18n } from '@/utils/ts/i18n'; import { formatTimeInputValue, isValidTimeString, validateTimeInput } from '@/utils/ts/time-input'; // Types import type { BentoInputFieldValue } from '@/components/input-field/input-field.types'; import { type BentoInputTimeProps } from './input-time.types'; // Localization import messages from './messages.json'; import { computed, ref, useSlots, watch } from 'vue'; import { useHasSlot } from '@/composables'; const VALIDATION_DEBOUNCE_TIME = 300; const slots = useSlots(); const hasSlot = useHasSlot(slots); type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoInputTimeProps>(), { condensed: false, description: undefined, disabled: false, errorMessage: null, label: '', modelValue: undefined, optional: false, placeholder: '', readonly: false, required: false, tooltipText: null, }); const emit = defineEmits<{ /** * Emitted when the component's model changes */ (e: 'update:model-value', value: BentoInputFieldValue): void; /** * Emitted when a key is pressed down */ (e: 'keydown', event: KeyboardEvent): void; /** * Emitted when the time value passes validation (complete HH:MM:SS format) */ (e: 'input:valid'): void; /** * Emitted when the time value fails validation */ (e: 'input:error'): void; }>(); const internalError = ref(false); const computedErrorMessage = computed(() => { if (props.errorMessage) { return props.errorMessage; } return internalError.value ? t('invalidTimeFormat') : null; }); const validateTime = (timeText: string) => { if (!timeText) { internalError.value = false; return; } const isValid = isValidTimeString(timeText); internalError.value = !isValid; if (isValid) { emit('input:valid'); } else { emit('input:error'); } }; const validateTimeWithDebounce = debounce(validateTime, VALIDATION_DEBOUNCE_TIME); // Watch for external modelValue changes (e.g., when parent resets the value) watch( () => props.modelValue, newValue => { const timeText = String(newValue ?? ''); // Clear the error only when the new value is a complete, valid time string if (timeText.length === 8 && isValidTimeString(timeText)) { internalError.value = false; } } ); const onInput = (value: BentoInputFieldValue) => { if (props.disabled || props.readonly) { return; } const formatted = formatTimeInputValue(String(value ?? '')); emit('update:model-value', formatted); validateTimeWithDebounce(formatted); }; const onKeyDown = (event: KeyboardEvent) => { validateTimeInput(event); emit('keydown', event); }; </script> <script lang="ts"> /** * Input time component for entering time values in HH:MM:SS format. * This is an extension of the `bento-input-field` component with built-in * time formatting and validation logic. * * @usage * import { BentoInputTime } from '@adyen/bento-vue2'; * * const timeValue = ref(''); * * export default { * components: { BentoInputTime }, * template: ` * <bento-input-time * label="Start time" * :model-value="timeValue" * @update:model-value="newValue => timeValue.value = newValue" * /> * ` * } */ export default { i18n: { messages }, name: 'bento-input-time', inheritAttrs: false, model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./input-time.scss" /> 

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

@@ -0,0 +1 @@
+export const BentoInspectorSizeOptions = ['small', 'large'] as const; export type BentoInspectorRelativeLayout = 'push-content' | 'overlay-content'; export type BentoInspectorSize = (typeof BentoInspectorSizeOptions)[number]; export interface BentoInspectorProps { /** * ID of the current active inspector page */ activePage?: string; /** * Shows the Expand icon in the inspector */ expandable?: boolean; /** * Opens and closes the inspector */ isOpen?: boolean; /** * Shows loading indicator for the content */ loading?: boolean; /** * Determines the size of the inspector */ size?: BentoInspectorSize; /** * The title of the component */ title: string; /** * The appearance of the inspector relative to the main content. Defaults to `push-content`. * * - `push-content`: The inspector pushes the main content to the side, resizing it to fit. * - `overlay-content`: The inspector opens on top of the main content, without affecting its layout. */ relativeLayout?: BentoInspectorRelativeLayout; /** * An optional HTMLElement to focus on when returning focus from the inspector * to the main page content (e.g. via the `Ctrl+Shift+S` keyboard shortcut). * * By default, the inspector attempts to return focus to the element that was active before it opened. * However, if that trigger element is removed from the DOM (e.g., via a `v-if`), focus cannot be returned. * * Providing a `pageFocusAnchor` (e.g. role="gridcell") ensures that the * focus context is preserved for accessibility. */ pageFocusAnchor?: HTMLElement; } 

package/dist/assets/components/internal/base-button/base-button.types.ts

@@ -0,0 +1 @@
+export enum BentoBaseButtonPropClass { DESTRUCTIVE = 'critical', ICON_ONLY = 'icon-only', } export enum BentoBaseButtonEvent { BLUR = 'blur', CLICK = 'click', FOCUS = 'focus', KEYDOWN_ESC = 'keydown.esc', } export enum BaseButtonType { BUTTON = 'button', RESET = 'reset', SUBMIT = 'submit', } 

package/dist/assets/components/internal/button-actions-with-menu/button-actions-with-menu.types.ts

@@ -0,0 +1 @@
+import type { BentoPopoverPositions } from '@/components/popover/popover.types'; import type { BentoButtonActionsList } from '@/components/button/components/button-actions/button-actions.types'; export interface ButtonActionsWithMenuProps { /** * 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` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`. * * @see BentoButton for a list of all the other props supported by each button action. * * ``` * [{ * title: 'Primary', * event: () => { ... }, * icon: FourPeopleIcon, * link: { variant: 'default', external: true, to: 'https://www.adyen.com/' }, * }, { * title: 'Secondary', * event: () => { ... } * disabled: true, * variant: 'primary', * critical: true * }]" * ``` */ actions: BentoButtonActionsList; /** * Defines the layout in which the button actions is presented. * * */ actionsLayout?: string; /** * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component. */ disableResponsiveBehavior?: boolean; /** * The number of actions to be displayed. The rest of the actions will be collapsed in a menu component. */ displayedActions?: number; /** * Set inverse color scheme to buttons and menu */ inverse?: boolean; /** * The min-width breakpoint to hide the button actions. * * For example, a value of 200 means that buttons will be hidden at <= 200px. * * Defaults to 0 i.e. it shows all buttons. */ hideDisplayedActionsBreakpoint?: number; /** * The position of where the menu should open. */ menuPosition?: BentoPopoverPositions | `${BentoPopoverPositions}`; } 

package/dist/assets/components/internal/calendar/calendar.types.ts

@@ -0,0 +1 @@
+import { type Ref, type UnwrapNestedRefs } from 'vue'; import type { Day } from 'date-fns'; export { CalendarMonthFirstDayOfWeek as CalendarFirstDayOfWeek } from './components/calendar-month/calendar-month.types'; export type { CalendarMonthIsDateDisabled as CalendarIsDateDisabled } from './components/calendar-month/calendar-month.types'; export { CalendarYearPosition as CalendarPosition } from './components/calendar-year/calendar-year.types'; export type CalendarGranularityType = 'daily' | 'weekly' | 'monthly' | 'quarterly'; export interface CalendarGranularityConfig<T extends CalendarGranularityType = CalendarGranularityType> { type: T; earliest?: Date; latest?: Date; disabled?: boolean; } export interface CalendarRangeDateValue { startDate: Date; endDate: Date; granularity?: CalendarGranularityType; range?: string; } export type CalendarSingleDateValue = Date; export type CalendarValue = CalendarSingleDateValue | CalendarRangeDateValue; interface UseCalendarPaneProps { isDateDisabled?: (date: Date) => boolean; maxRange?: Ref<number>; selectedDate: Ref<CalendarValue>; granularity?: Ref<CalendarGranularityConfig>; firstDayOfWeek: Day; min?: Ref<Date>; max?: Ref<Date>; } export type UseCalendarPane = ( propRefs: UseCalendarPaneProps, emit ) => { internalValue: UnwrapNestedRefs<CalendarRangeDateValue>; onDateInput: (date: Date) => void; onMouseOver: (date: Date) => void; }; export enum CalendarEvent { INPUT = 'input', START_DATE_SELECTED = 'start-date-selected', END_DATE_SELECTED = 'end-date-selected', } /** * Private types */ export enum CalendarVariant { DAY = 'day', MONTH = 'month', } 

package/dist/assets/components/internal/calendar/components/calendar-month/calendar-month.types.ts

@@ -0,0 +1 @@
+export enum CalendarMonthEvent { INPUT = 'input', MOUSE_OVER = 'mouseover', CHANGE_DAY = 'changeDay', NEXT_MONTH = 'nextMonth', PREVIOUS_MONTH = 'previousMonth', } export enum CalendarMonthFirstDayOfWeek { MONDAY = 1, SATURDAY = 6, SUNDAY = 0, } export type CalendarMonthIsDateDisabled = (date: Date) => boolean; 

package/dist/assets/components/internal/calendar/components/calendar-month/components/calendar-month-day/calendar-month-day.types.ts

@@ -0,0 +1 @@
+export enum CalendarMonthDayVariant { SINGLE = 'single', MIDDLE = 'middle', BEGINNING = 'beginning', END = 'end', } export enum CalendarMonthDayClass { // Variant SINGLE = CalendarMonthDayVariant.SINGLE, MIDDLE = CalendarMonthDayVariant.MIDDLE, BEGINNING = CalendarMonthDayVariant.BEGINNING, END = CalendarMonthDayVariant.END, // Selected SELECTED = 'selected', UNSELECTED = 'unselected', // Current day CURRENT_DAY = 'current-day', // Disabled DISABLED = 'disabled', } export enum CalendarMonthDayEvent { CLICK = 'click', MOUSE_OVER = 'mouseover', } 

package/dist/assets/components/internal/calendar/components/calendar-month/composables/granular-min-max-date.types.ts

@@ -0,0 +1 @@
+import type { CalendarGranularityConfig } from '../../../calendar.types'; import type { CalendarMonthFirstDayOfWeek } from '../calendar-month.types'; export interface UseMinMaxDateProps { firstDayOfWeek: CalendarMonthFirstDayOfWeek; min: Date; max: Date; } export type UseGranularMinMaxDate = (props: UseMinMaxDateProps) => { getGranularCalendarLimits: (granularity: CalendarGranularityConfig) => { min: Date; max: Date }; }; 

package/dist/assets/components/internal/calendar/components/calendar-year/calendar-year.types.ts

@@ -0,0 +1 @@
+export enum CalendarYearPosition { FIRST = 'first', LAST = 'last', MIDDLE = 'middle', UNIQUE = 'unique', } /** * Private types */ export interface CalendarYearProps { /** * end of the selected range */ endDate?: Date; /** * Indicate if a date should be disabled or not */ isDateDisabled?: (date: Date) => boolean; /** * Indicates if the calendar is part of a range date picker or a single date picker */ isRange?: boolean; /** * Sets a minimum limit for selectable dates - dates before `min` will not be selectable */ min?: Date; /** * Sets a maximum limit for selectable dates - dates after `max` will not be selectable */ max?: Date; /** * When rendering multiple calendars, this property allows to render the * Next and Previous calendar buttons to the right, left or not at all * depending on the position: Unique (only 1), First, Middle or Last */ position?: `${CalendarYearPosition}`; /** * start of the selected range */ startDate?: Date; /** * Year to be displayed in the calendar */ year: Date; } 

package/dist/assets/components/internal/calendar/components/calendar-year/components/calendar-year-month/calendar-year-month.types.ts

@@ -0,0 +1 @@
+export interface CalendarYearMonthProps { /** * Date to be displayed as the calendar month. From 1st to 12th. */ month: Date; /** * Indicate if a date should be disabled or not */ disabled?: boolean; /** * Changes the state of the calendar month to selected. */ selected?: boolean; /** * When the month is selected, this indicates if the selection is a single month or part of a range. * If it's a range it can be at the beginning, middle or end of the selection. */ variant?: `${CalendarYearMonthVariant}`; } /** * Private types */ export enum CalendarYearMonthVariant { SINGLE = 'single', MIDDLE = 'middle', BEGINNING = 'beginning', END = 'end', } export enum CalendarYearMonthClass { // Variant SINGLE = CalendarYearMonthVariant.SINGLE, MIDDLE = CalendarYearMonthVariant.MIDDLE, BEGINNING = CalendarYearMonthVariant.BEGINNING, END = CalendarYearMonthVariant.END, // Selected SELECTED = 'selected', UNSELECTED = 'unselected', // Current month CURRENT_MONTH = 'current-month', // Disabled DISABLED = 'disabled', } export enum CalendarYearMonthEvent { CLICK = 'click', MOUSE_OVER = 'mouseover', } 

package/dist/assets/components/internal/calendar/composables/use-granularity-adjustments.types.ts

@@ -0,0 +1 @@
+import { type Day } from 'date-fns'; export type UseGranularityAdjustments = (firstDayOfWeek: Day) => { adjustDateForWeekly: (date: Date, endDate?: Date, min?: Date, max?: Date) => { startDate: Date; endDate: Date }; adjustDateForMonthly: (date: Date, endDate?: Date, min?: Date, max?: Date) => { startDate: Date; endDate: Date }; adjustDateForQuarterly: (date: Date, endDate?: Date, min?: Date, max?: Date) => { startDate: Date; endDate: Date }; adjustStartDateInputForWeekly: ( date: string, formatDate: (dateToFormat?: Date) => string, min?: Date, max?: Date ) => string; adjustEndDateInputForWeekly: ( date: string, formatDate: (dateToFormat?: Date) => string, min?: Date, max?: Date ) => string; adjustStartDateInputForMonthly: ( date: string, formatDate: (dateToFormat?: Date) => string, min?: Date, max?: Date ) => string; adjustEndDateInputForMonthly: ( date: string, formatDate: (dateToFormat?: Date) => string, min?: Date, max?: Date ) => string; adjustStartDateInputForQuarterly: ( date: string, formatDate: (dateToFormat?: Date) => string, min?: Date, max?: Date ) => string; adjustEndDateInputForQuarterly: ( date: string, formatDate: (dateToFormat?: Date) => string, min?: Date, max?: Date ) => string; }; 

package/dist/assets/components/internal/checkbox-input/checkbox-input.types.ts

@@ -0,0 +1 @@
+export type MultiCheckboxInputType = Array<string | number>; export type CheckboxInputType = boolean | MultiCheckboxInputType; export enum CheckboxInputState { UNCHECKED = 'unchecked', CHECKED = 'checked', DISABLED = 'disabled', ERROR = 'error', READONLY = 'readonly', INDETERMINATE = 'indeterminate', } export enum CheckboxInputEvent { UPDATE = 'update:model-value', } interface CheckboxInputGroupItem { value: string | number; disabled?: boolean; hasError?: boolean; errorMessage?: string; readonly?: boolean; } export type CheckboxInputGroupItems = Array<CheckboxInputGroupItem>; 

package/dist/assets/components/internal/copy/copy.types.ts

@@ -0,0 +1 @@
+import { type PopperContainerPosition } from '@/components/popper-container'; import type { BentoButton } from '@/components/button'; export enum CopyTooltipState { DEFAULT = 'default', COPYING = 'copying', ERROR = 'error', } type ButtonProps = InstanceType<typeof BentoButton>['$props']; export interface BentoCopyButtonProps { variant?: ButtonProps['variant']; condensed?: ButtonProps['condensed']; disabled?: ButtonProps['disabled']; } export interface BentoCopyProps { /** * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton. */ button?: BentoCopyButtonProps; /** * Sets the button text of the copy button. */ buttonText?: string; /** * Defines the string that will get copied to the clipboard */ text: string; /** * Position the tooltip should take if space is available. Defaults to 'top' */ tooltipPosition?: PopperContainerPosition; } 

package/dist/assets/components/internal/dialog-page/dialog-page.types.ts

@@ -0,0 +1 @@
+import { type Ref } from 'vue'; export enum BentoDialogPageAnimation { TRANSITION_LEVEL_DEEPER = 'b-dialog-page__animation--level-deeper', TRANSITION_LEVEL_UPPER = 'b-dialog-page__animation--level-upper', } export interface BentoDialogPageConfigData { activePage: Ref<string>; animation: Ref<string>; isAnimationActive?: Ref<boolean>; isOpen: Ref<boolean>; pages: Ref<Array<string>>; previousPages: Ref<Array<string>>; updatePage: (page: string) => void; } export type BentoDialogPageRegisterPage = (pageId: string) => { unregisterPage: () => void }; 

package/dist/assets/components/internal/grid-layout/grid-layout.types.ts

@@ -0,0 +1 @@
+export enum GridLayoutContainerType { INLINE = 'inline-size', SIZE = 'size', NORMAL = 'normal', } export interface GridLayoutColumnWidth { small: number | string; medium: number | string; large: number | string; } export type GridLayoutColumnWidths = Array<'auto' | GridLayoutColumnWidth>; 

package/dist/assets/components/internal/header-meta/header-meta.types.ts

@@ -0,0 +1 @@
+import { type BentoHeaderReloadButton } from '../../header/header.types'; export interface HeaderMetaProps { /** * Meta description for the header component */ description?: string; /** * JavaScript "Date" object for when the content was last updated */ lastUpdated?: Date | number; /** * Reload button which shows next to the header's timestamp * @see BentoHeaderReloadButton */ reloadButton?: BentoHeaderReloadButton; } 

package/dist/assets/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-options/components/listbox-multi-select-category/listbox-multi-select-category.types.ts

@@ -0,0 +1 @@
+export enum ListboxMultiSelectCategoryClass { DISABLED = 'disabled', STATIC_CATEGORY = 'static-category', } export enum ListboxMultiSelectCategoryEvent { SELECT_CATEGORY = 'select-category', UNSELECT_CATEGORY = 'unselect-category', TOGGLE_CATEGORY_VISIBILITY = 'toggle-category-visibility', } 

package/dist/assets/components/internal/listbox/components/listbox-multi-select/components/listbox-multi-select-options/listbox-multi-select-options.types.ts

@@ -0,0 +1 @@
+export enum ListboxMultiSelectOptionsEvent { SELECT_CATEGORY = 'select-category', TOGGLE_CHECKBOX_SELECTION = 'toggle-checkbox-selection', UNSELECT_CATEGORY = 'unselect-category', TOGGLE_CATEGORY_VISIBILITY = 'toggle-category-visibility', } 

package/dist/assets/components/internal/listbox/components/listbox-multi-select/listbox-multi-select.types.ts

@@ -0,0 +1 @@
+import { type BentoListboxIsOptionDisabled, type BentoListboxLazyLoadType, type BentoListboxOptions } from '@/types/listbox'; export interface ListboxMultiSelectProps { /** * Indicates whether there are more items to load */ hasMoreItems?: boolean; /** * Function that allows the options to be disabled * * @type {BentoListboxIsOptionDisabled} * @param {BentoListboxOptionItem} option - listbox option object * @param {string} option.label - Option's label text * @param {string|number} option.value - Option's value * @param {unknown} option.data - Option's extra data to be passed to the default slot */ isOptionDisabled?: BentoListboxIsOptionDisabled; /** * The option elements to populate the listbox with. * It must be an array of {@see BentoListboxOptionItem }. * * @property {string} value.label - Text to be displayed in the option * @property {string,number} value.value - Value of the option */ items: BentoListboxOptions; /** * The type of `Lazy Load`. * Type "automatic" will enable infinite scrolling * Type "button" will enable lazy loading with "Show more" button */ lazyLoadType?: BentoListboxLazyLoadType | `${BentoListboxLazyLoadType}`; /** * Flag that indicates that an external search it's being made * to filter out the items inside the the multi-select listbox * * If enabled, hides the "Select all" checkbox in "multiple" mode. */ searching?: boolean; /** * The `input` value. * Providing an empty array will select no options. */ selectedValues: BentoListboxOptions; /** * If enabled, dropdown will display non-selectable, static categories */ staticCategories?: boolean; } 

package/dist/assets/components/internal/listbox/listbox.types.ts

@@ -0,0 +1 @@
+// Types for this components should be in @/types/listbox.ts 

package/dist/assets/components/internal/radio-input/radio-input.types.ts

@@ -0,0 +1 @@
+export type RadioInputValue = string | number; export enum RadioInputStateClass { DISABLED = 'disabled', READONLY = 'readonly', ERROR = 'error', } 

package/dist/assets/components/internal/teleport/teleport.types.ts

@@ -0,0 +1 @@
+export interface BentoTeleportProps { /** * Disables the teleport. It will prevent the slotted element to be * teleported outside of the initial parent element * @default false */ disabled: boolean; /** * Indicates the parent container in which the slotted element will be * teleported to. */ to?: string; // NOTE: "where" is not added as it doesn't exist in Vue3 } 

package/dist/assets/components/internal/tooltip/tooltip.types.ts

@@ -0,0 +1 @@
+import { PopperContainerPositionBasic } from '../../popper-container/popper-container.types'; export const BentoTooltipPosition = { ...PopperContainerPositionBasic }; export type BentoTooltipPosition = PopperContainerPositionBasic; export enum BentoTooltipState { HIDDEN = 'hidden', } 

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

@@ -0,0 +1 @@
+/** * @private */ export const BentoLayoutVariantOptions = ['page', 'component'] as const; export const BentoLayoutSizeOptions = ['full-width', 'narrow', 'half-width'] as const; export const BentoLayoutRowColumnLayoutOptions = ['3-9', '9-3', '4-8', '8-4', '6-6'] as const; // Public export type BentoLayoutVariant = (typeof BentoLayoutVariantOptions)[number]; export type BentoLayoutSize = (typeof BentoLayoutSizeOptions)[number]; export type BentoLayoutRowColumnLayout = (typeof BentoLayoutRowColumnLayoutOptions)[number]; export interface BentoLayoutProps { /** Defines if the layout is used in a page or only a section */ variant?: BentoLayoutVariant; /** Defines the size of the page */ size?: BentoLayoutSize; } export interface BentoLayoutRowProps { /** Sets the layout of the columns when multiple columns are used */ columnsLayout?: BentoLayoutRowColumnLayout; } 

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

@@ -0,0 +1 @@
+import type { Location } from 'vue-router/types/router.d.ts'; // TODO: revert to import once fully migrated to Vue 3 // import type { RouterLinkProps } from 'vue-router/types/router.d.ts'; /** * Manually defined RouterLinkProps to ensure compatibility * with Vue Macros and Vue 2.7 / 3 monorepos. */ export interface RouterLinkProps { /** * Denotes the target route of the link. When clicked, the value of the `to` prop will be passed to * `router.push()` internally, so the value can be either a string or a location descriptor object. */ to: string | Location; /** * Setting `replace` prop will call `router.replace()` instead of `router.push()` when clicked, so the navigation will * not create a new history record. * * @default false */ replace?: boolean; /** * Setting `append` prop always appends the relative path to the current path. For example, assuming we are navigating * from `/a` to a relative link `b`, without `append` we will end up at `/b`, but with append we will end up at * `/a/b`. * * @default false */ append?: boolean; /** * Sometimes we want <RouterLink> to render as another tag, e.g <li>. Then we can use tag prop to specify which tag to * render to, and it will still listen to click events for navigation. * * @default "a" */ tag?: string; /** * Configure the active CSS class applied when the link is active. Note the default value can also be configured * globally via the `linkActiveClass` router constructor option. * * @default "router-link-active" */ activeClass?: string; /** * The default active class matching behavior is **inclusive match**. For example, `<RouterLink to="/a">` will get * this class applied as long as the current path starts with `/a/` or is `/a`. * * @default false */ exact?: boolean; /** * Allows matching only using the `path` section of the url, effectively ignoring the `query` and the `hash` sections. * * @default false */ exactPath?: boolean; /** * Configure the active CSS class applied when the link is active with exact path match. Note the default value can * also be configured globally via the `linkExactPathActiveClass` router constructor option. * * @default "router-link-exact-path-active" */ exactPathActiveClass?: string; /** * Specify the event(s) that can trigger the link navigation. * * @default 'click' */ event?: string | ReadonlyArray<string>; /** * Configure the active CSS class applied when the link is active with exact match. Note the default value can also be * configured globally via the `linkExactActiveClass` router constructor option. * * @default "router-link-exact-active" */ exactActiveClass?: string; /** * Configure the value of `aria-current` when the link is active with exact match. It must be one of the allowed * values for [aria-current](https://www.w3.org/TR/wai-aria-1.2/#aria-current) in the ARIA spec. In most cases, the * default of page should be the best fit. * * @default "page" */ ariaCurrentValue?: 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false'; } /** * @deprecated for usage with properties since version 2.0. Use the string literal instead. */ export enum BentoLinkVariant { DEFAULT = 'default', QUIET = 'quiet', } export type BentoLinkProps = RouterLinkProps & { /** * Disable the default typography for the component. Only use this when the component is inside another typography component. */ disableTypography?: boolean; /** * Set the rendered link to a regular external anchor link and renders an external link icon. */ external?: boolean; /** * Set to true if used inside a `BentoButton` component. */ isButton?: boolean; /** * Set the rendered link to a regular external anchor link. */ isNotRouting?: boolean; /** * Sets the target of the rendered link. */ target?: string; /** * Set to true to truncate link. Doesn't work with disableTypography. */ truncate?: boolean; /** * Link variant type affecting visual style. * @values default, quiet */ variant?: BentoLinkVariant | `${BentoLinkVariant}`; }; 

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

@@ -0,0 +1 @@
+import BentoList from '../../list.vue'; import BentoListItem from './list-item.vue'; import { BentoAlert } from '@/components/alert'; import { BentoButton } from '@/components/button'; import { BentoCheckbox } from '@/components/checkbox'; import { BentoRadioButton } from '@/components/radio-group'; import { BentoToggle } from '@/components/toggle'; import { BentoTypography } from '@/components/typography'; import MonitoringIcon from '@adyen/ui-assets-icons-16/vue/monitoring'; import StarIcon from '@adyen/ui-assets-icons-16/vue/star-filled'; import { action } from '@storybook/addon-actions'; import { mockImage } from '@/components/image/const'; import { isVue2 } from 'vue-demi'; import { BentoStatusVariant } from '@/components/status'; import type { Meta, StoryObj } from '@storybook/vue'; enum ListItemStartSlotExample { NONE = 'None', TOGGLE = 'Toggle button', RADIO = 'Radio button', CHECKBOX = 'Checkbox', ICON = 'Icon', ICON_WITH_BACKGROUND = 'Icon with background', } enum ListItemEndSlotExample { NONE = 'None', TOGGLE = 'Toggle button', RADIO = 'Radio button', CHECKBOX = 'Checkbox', ICON = 'Icon', BUTTON = 'One button', TWO_BUTTONS = 'Two buttons', LABEL = 'Label', } enum ListItemImageSlotExample { NONE = 'No image', SIZE_44 = '44x44px', SIZE_20 = '20x20px', SIZE_70 = '70x70px', } const meta: Meta = { title: 'List/List Item', component: BentoListItem, argTypes: { start: { description: 'Secondary leading slot rendered after `image` and before the main content.', table: { type: { summary: 'VNode[]', }, }, control: { type: 'text', }, }, image: { description: 'First leading slot, rendered at the very start of the list item.', table: { type: { summary: 'VNode[]', }, }, control: { disable: true, }, }, content: { description: 'Main content slot for custom label/description layout; replaces the default text rendering.', table: { type: { summary: 'VNode[]', }, }, control: { type: 'text', }, }, end: { description: 'Slot rendered at the end of the list item (for example actions or secondary content).', table: { type: { summary: 'VNode[]', }, }, control: { type: 'text', }, }, statusColor: { options: Object.values(BentoStatusVariant), control: { type: 'select', }, }, startSlotExample: { name: 'startSlotExample', options: Object.values(ListItemStartSlotExample), table: { category: 'Storybook controls', }, control: { type: 'select', }, }, endSlotExample: { name: 'endSlotExample', options: Object.values(ListItemEndSlotExample), table: { category: 'Storybook controls', }, control: { type: 'select', }, }, imageSlotExample: { name: 'imageSlotExample', options: Object.values(ListItemImageSlotExample), table: { category: 'Storybook controls', }, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoListItem>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoAlert, BentoList, BentoListItem, BentoToggle, BentoCheckbox, BentoRadioButton, BentoButton, BentoTypography, StarIcon, MonitoringIcon, }, props: Object.keys(argTypes), template: ` <div> <bento-alert v-if="shouldShowInteractiveWarning(args)" type="warning" style="margin-bottom: var(--b-spacer-040);"> Do not use other interactive items inside the list item with chevron enabled. </bento-alert> <bento-list> <bento-list-item v-bind="args" @click="clickedAction"> <template v-if="args.imageSlotExample !== ListItemImageSlotExample.NONE" #image> <img :src="mockImage" alt="Bento logo" :width="args.imageSlotExample.split('x')[0]" :height="args.imageSlotExample.split('x')[1]" /> </template> <template v-if="args.start || args.startSlotExample !== ListItemStartSlotExample.NONE" #start> <span v-if="args.start">{{ args.start }}</span> <bento-toggle v-else-if="args.startSlotExample === ListItemStartSlotExample.TOGGLE" /> <bento-radio-button v-else-if="args.startSlotExample === ListItemStartSlotExample.RADIO" value="start-radio" model-value="start-radio" /> <bento-checkbox v-else-if="args.startSlotExample === ListItemStartSlotExample.CHECKBOX" :model-value="true" /> <star-icon v-else-if="args.startSlotExample === ListItemStartSlotExample.ICON" aria-hidden="true" /> <span v-else-if="args.startSlotExample === ListItemStartSlotExample.ICON_WITH_BACKGROUND" style="align-items: center; background-color: var(--b-color-background-warning-weak); border-radius: 999px; color: var(--b-color-label-warning); display: inline-flex; padding: var(--b-spacer-020);" > <monitoring-icon aria-hidden="true" /> </span> </template> <template v-if="args.content" #content> {{ args.content }} </template> <template v-if="args.end || args.endSlotExample !== ListItemEndSlotExample.NONE" #end> <span v-if="args.end">{{ args.end }}</span> <bento-toggle v-else-if="args.endSlotExample === ListItemEndSlotExample.TOGGLE" /> <bento-radio-button v-else-if="args.endSlotExample === ListItemEndSlotExample.RADIO" value="end-radio" model-value="end-radio" /> <bento-checkbox v-else-if="args.endSlotExample === ListItemEndSlotExample.CHECKBOX" :model-value="true" /> <star-icon v-else-if="args.endSlotExample === ListItemEndSlotExample.ICON" aria-hidden="true" /> <bento-button v-else-if="args.endSlotExample === ListItemEndSlotExample.BUTTON" variant="secondary" > Action </bento-button> <template v-else-if="args.endSlotExample === ListItemEndSlotExample.TWO_BUTTONS" > <bento-button variant="secondary">First</bento-button> <bento-button variant="secondary">Second</bento-button> </template> <bento-typography v-else-if="args.endSlotExample === ListItemEndSlotExample.LABEL" el="span" style="color: var(--b-color-label-secondary);" > Secondary label </bento-typography> </template> </bento-list-item> </bento-list> </div> `, setup(props) { const interactiveStartExamples = [ ListItemStartSlotExample.TOGGLE, ListItemStartSlotExample.RADIO, ListItemStartSlotExample.CHECKBOX, ]; const interactiveEndExamples = [ ListItemEndSlotExample.TOGGLE, ListItemEndSlotExample.RADIO, ListItemEndSlotExample.CHECKBOX, ListItemEndSlotExample.BUTTON, ListItemEndSlotExample.TWO_BUTTONS, ]; const shouldShowInteractiveWarning = args => args.withChevron && ((!args.start && interactiveStartExamples.includes(args.startSlotExample)) || (!args.end && interactiveEndExamples.includes(args.endSlotExample))); return { mockImage, ListItemStartSlotExample, ListItemEndSlotExample, ListItemImageSlotExample, args: isVue2 ? props : _args, clickedAction: () => action('click')(), shouldShowInteractiveWarning, }; }, }), args: { label: 'List item label', description: 'List item description', showStatus: true, statusColor: 'red', tag: { label: 'Tag', variant: 'green', }, withChevron: true, startSlotExample: ListItemStartSlotExample.ICON_WITH_BACKGROUND, endSlotExample: ListItemEndSlotExample.LABEL, imageSlotExample: ListItemImageSlotExample.SIZE_44, }, }; 

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

@@ -0,0 +1 @@
+import { type BentoStatusVariant } from '@/components/status'; import { type BentoTagProps } from '@/components/tag'; export interface BentoListItemProps { /** * Label text shown in the content area when the `content` slot is not used. */ label?: string; /** * Description text shown below label when the `content` slot is not used. */ description?: string; /** * Toggles the status indicator. */ showStatus?: boolean; /** * Color for the status indicator. * @values blue, green, grey, orange, red, yellow */ statusColor?: BentoStatusVariant | `${BentoStatusVariant}`; /** * Tag props passed to the internal BentoTag component. */ tag?: BentoTagProps; /** * Shows a chevron icon in the item. */ withChevron?: boolean; /** * Shows the top divider line. */ showTopDivider?: boolean; /** * Shows the bottom divider line. */ showBottomDivider?: boolean; } 

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

@@ -0,0 +1 @@
+<template> <li class="b-list-item" @click="onItemClick" @keydown="onItemKeydown"> <bento-typography class="b-list-item__inner" :class="conditionalClasses" el="div" :role="props.withChevron ? 'button' : undefined" :tabindex="props.withChevron ? 0 : undefined" > <div v-if="hasSlot('image')" class="b-list-item__image"> <slot name="image" /> </div> <div v-if="hasSlot('start')" class="b-list-item__start"> <slot name="start" /> </div> <div class="b-list-item__content"> <div v-if="hasSlot('content')" class="b-list-item__label"> <slot name="content" /> </div> <template v-else> <div class="b-list-item__header"> <bento-typography v-if="props.label" class="b-list-item__label" el="span" stronger> {{ props.label }} </bento-typography> <bento-status v-if="props.showStatus" class="b-list-item__status" :variant="props.statusColor" aria-hidden="true" /> <bento-tag v-if="props.tag" v-bind="props.tag" class="b-list-item__tag" /> </div> <span v-if="props.description" class="b-list-item__description"> {{ props.description }} </span> </template> </div> <div v-if="hasSlot('end')" class="b-list-item__end"> <slot name="end" /> </div> <chevron-right-icon v-if="props.withChevron" class="b-list-item__chevron" aria-hidden="true" /> </bento-typography> </li> </template> <script setup lang="ts"> import { computed, useSlots } from 'vue'; import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right-small'; import { BentoStatus } from '@/components/status'; import { BentoTag } from '@/components/tag'; import { BentoTypography } from '@/components/typography'; import { useHasSlot } from '@/composables'; import type { BentoListItemProps } from './list-item.types'; const slots = useSlots(); const hasSlot = useHasSlot(slots); const props = withDefaults(defineProps<BentoListItemProps>(), { showStatus: false, statusColor: 'blue', tag: undefined, withChevron: false, showTopDivider: false, showBottomDivider: false, }); const emit = defineEmits<{ /** * Emitted when a clickable list item is triggered. */ (e: 'click'): void; }>(); const onItemClick = (): void => { if (!props.withChevron) { return; } emit('click'); }; const onItemKeydown = (event: KeyboardEvent): void => { if (!props.withChevron) { return; } if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); emit('click'); } }; const conditionalClasses = computed(() => ({ 'b-list-item__inner--clickable': props.withChevron, 'b-list-item__inner--top-divider': props.showTopDivider, 'b-list-item__inner--bottom-divider': props.showBottomDivider, })); </script> <script lang="ts"> /** * `BentoListItem` renders an item to be used inside `BentoList`. * * @example * import { BentoList, BentoListItem, BentoButton, BentoToggle } from '@adyen/bento-vue2'; * * export default { * components: { BentoList, BentoListItem, BentoButton, BentoToggle }, * template: ` * <bento-list> * <bento-list-item * label="Payment details" * description="Updated 2 hours ago" * :tag="{ label: 'Live', variant: 'green' }" * show-bottom-divider * > * <template #start> * <bento-toggle /> * </template> * <template #end> * <bento-button variant="secondary">Edit</bento-button> * </template> * </bento-list-item> * </bento-list> * ` * } */ export default { name: 'bento-list-item', }; </script> <style lang="scss" scoped src="./list-item.scss" /> 

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

@@ -0,0 +1,97 @@
+import { Canvas, Meta, Story } from '@storybook/blocks';
+import * as ListStories from './list.stories';
+
+<Meta of={ListStories} />
+
+# List
+
+The b-list-item component is a flexible, abstract building block for presenting structured collections of items (list).
+
+A b-list-item component is composed of three configurable regions - `Start`, `Content`, and `End` - and optional global
+features like grab handle, image, dividers, or chevron.
+
+<Canvas withSource="closed">
+    <Story of={ListStories.Default} />
+</Canvas>
+
+## Use Cases
+
+- Use when you need to display multiple related items with a consistent structure
+- Use when you need to allow scanning and quick comparison of data points (e.g. reports, stores) that have relatively
+  simple structure
+
+### Do not use
+
+- Don't use when you need to present highly dense data → use `b-data-grid` instead
+- Don't use when you need to show only one item with rich detail → use `b-card` instead
+
+## Best practices
+
+- Keep list items scannable: one strong primary label, short secondary text
+- Be consistent: align start and end types across a list for easier comparison
+- Ensure spacing and hierarchy support quick vertical scanning
+- If a chevron is shown, avoid also showing buttons in the end slot (conflicts with navigation)
+- Don't place multiple competing controls (e.g. toggle + checkbox + two buttons)
+
+## Variations
+
+### Type
+
+`bento-list` supports:
+
+- `unordered` (default)
+- `ordered`
+
+## List item
+
+Each `bento-list-item` is composed of:
+
+- Optional `image` slot
+- Optional `start` slot
+- Main content area (`content` slot or `label` / `description`)
+- Optional `end` slot
+- Optional chevron (`withChevron`)
+- Optional top and bottom dividers (`showTopDivider`, `showBottomDivider`)
+
+## Modifiers
+
+### Status
+
+- `showStatus`: toggles the status indicator.
+- `statusColor`: controls indicator color (`blue`, `green`, `grey`, `orange`, `red`, `yellow`).
+
+### Tag
+
+- `tag`: passes tag props to the internal `bento-tag`.
+
+### Chevron
+
+- `withChevron`: shows a chevron and makes the whole item interactive.
+- When `withChevron` is enabled, do not use additional interactive elements (for example toggle, checkbox, radio, or
+  button) in `start`/`end` slots.
+
+### Dividers
+
+- `showTopDivider`: shows the top divider line.
+- `showBottomDivider`: shows the bottom divider line.
+
+## Accessibility
+
+The List component is rendered as an ordered or unordered list depending on the `type` prop.
+
+### Keyboard Interaction
+
+By default, `bento-list` itself is non-interactive and keyboard behavior depends on interactive elements rendered inside
+each `bento-list-item`.
+
+When `withChevron` is enabled on a `bento-list-item`, the full row becomes interactive and supports:
+
+| Keyboard interaction | Action                                                         |
+| -------------------- | -------------------------------------------------------------- |
+| `Tab`                | Moves focus to a clickable list item or away from it.          |
+| `Space`              | Activates the clickable list item, triggering the click event. |
+| `Enter`              | Activates the clickable list item, triggering the click event. |
+
+## Resources
+
+- [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=46446-2486&p=f&t=mea9nPq0MXKb2lOX-0)

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/components/secondary-nav-category/secondary-nav-category.vue

@@ -1 +1 @@
-<template> <section class="b-secondary-nav-category" :aria-label="label"> <bento-typography el="h1" class="b-secondary-nav-category__label" variant="caption" stronger>{{ label }}</bento-typography> <ul class="b-secondary-nav__list"> <li v-for="item in items" :key="item.value"> <secondary-nav-item :label="item.label" :value="item.value" /> </li> </ul> </section> </template> <script lang="ts" setup> import { BentoTypography } from '@/components/typography'; import { SecondaryNavItem } from '../secondary-nav-item'; import { type BentoSecondaryNavItemsItem } from '../../secondary-nav.types'; defineProps<{ /** * The display name of the category */ label: string; /** * A list of {@see BentoSecondaryNavItemsItem} that belongs to this category */ items: Array<BentoSecondaryNavItemsItem>; }>(); </script> <script lang="ts"> /** * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav} */ export default {}; </script> <style lang="scss" scoped src="./secondary-nav-category.scss" /> 
+<template> <section class="b-secondary-nav-category" :aria-label="label"> <bento-typography el="h1" class="b-secondary-nav-category__label" variant="caption" stronger>{{ label }}</bento-typography> <ul class="b-secondary-nav__list"> <li v-for="item in items" :key="item.value"> <secondary-nav-item :label="item.label" :value="item.value" :items="item.items" /> </li> </ul> </section> </template> <script lang="ts" setup> import { BentoTypography } from '@/components/typography'; import { SecondaryNavItem } from '../secondary-nav-item'; import { type BentoSecondaryNavItemsItem } from '../../secondary-nav.types'; defineProps<{ /** * The display name of the category */ label: string; /** * A list of {@see BentoSecondaryNavItemsItem} that belongs to this category */ items: Array<BentoSecondaryNavItemsItem>; }>(); </script> <script lang="ts"> /** * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav} */ export default {}; </script> <style lang="scss" scoped src="./secondary-nav-category.scss" /> 

package/dist/assets/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue

@@ -1 +1 @@
-<template> <button class="b-secondary-nav-item" :class="conditionalClasses" :aria-current="isItemSelected ? 'page' : undefined" @click="onClick" > <bento-typography class="b-secondary-nav-item__title" variant="body" stronger> {{ label }} </bento-typography> </button> </template> <script lang="ts" setup> import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys'; import { BentoTypography } from '@/components/typography'; import { computed, inject } from 'vue'; const { activeItemValue, updateActiveItemValue } = inject(SECONDARY_NAV_STATE); const props = defineProps<{ /** * The display name of the navigation item */ label: string; /** * The value of this item. */ value: string; }>(); const isItemSelected = computed(() => activeItemValue.value === props.value); const conditionalClasses = computed(() => ({ 'b-secondary-nav-item--active': isItemSelected.value, })); const emit = defineEmits<{ /** * Event emitted when this element is clicked */ (e: 'click', clickEvent: MouseEvent): void; }>(); const onClick = (e: MouseEvent) => { emit('click', e); updateActiveItemValue(props.value); }; </script> <script lang="ts"> /** * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav} */ export default {}; </script> <style lang="scss" scoped src="./secondary-nav-item.scss" /> 
+<template> <div class="b-secondary-nav-item"> <div class="b-secondary-nav-item__wrapper"> <button class="b-secondary-nav-item__option" :class="conditionalClasses" :aria-current="isItemSelected ? 'page' : undefined" :aria-expanded="expandleItemIsToggleOnly ? `${isOpen}` : undefined" :aria-controls="expandleItemIsToggleOnly ? subItemsId : undefined" @click="expandleItemIsToggleOnly ? onToggleClick() : onClick($event)" > <bento-typography class="b-secondary-nav-item__title" variant="body" stronger> {{ label }} </bento-typography> </button> <bento-button v-if="hasSubItems" :aria-hidden="expandleItemIsToggleOnly" :tabindex="expandleItemIsToggleOnly ? -1 : undefined" class="b-secondary-nav-item__toggle" variant="tertiary" :aria-label="isOpen ? `Collapse ${label}` : `Expand ${label}`" :aria-expanded="!expandleItemIsToggleOnly ? `${isOpen}` : undefined" :aria-controls="!expandleItemIsToggleOnly ? subItemsId : undefined" @click.stop="onToggleClick" > <template #iconLeft> <chevron-up-icon v-if="isOpen" class="b-secondary-nav-item__icon" aria-hidden="true" /> <chevron-down-icon v-else class="b-secondary-nav-item__icon" aria-hidden="true" /> </template> </bento-button> </div> <Transition :name="CONTENT_TRANSITION_NAME"> <div v-if="hasSubItems && isOpen" :id="subItemsId" :style="subItemsMaxHeight"> <ul ref="subItemsRef" class="b-secondary-nav-item__sub-items"> <li v-for="item in items" :key="item.value"> <secondary-nav-item :label="item.label" :value="item.value" :items="item.items" is-sub-item /> </li> </ul> </div> </Transition> </div> </template> <script lang="ts" setup> import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys'; import { BentoButton } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down'; import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up'; import { computed, inject, ref, watch } from 'vue'; import { generateUid } from '@/core/utils/ts'; import { type BentoSecondaryNavItemsItem } from '../../secondary-nav.types'; import { observeSizeOfElement } from '@/utils/ts/resize'; import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height'; const { activeItemValue, updateActiveItemValue, allowExpandableItemNavigation } = inject(SECONDARY_NAV_STATE); const CONTENT_TRANSITION_NAME = 'b-secondary-nav-item__animation--content'; const props = defineProps<{ /** * The display name of the navigation item */ label: string; /** * The value of this item. */ value: string; /** * Nested sub-items for this item. */ items?: Array<BentoSecondaryNavItemsItem>; /** * Defines if the item is a subitem */ isSubItem?: boolean; }>(); const isOpen = ref(false); const subItemsId = generateUid('secondary-nav-sub-items'); const subItemsRef = ref<HTMLUListElement>(null); const hasSubItems = computed(() => !!props.items?.length); const isItemSelected = computed(() => activeItemValue.value === props.value); const expandleItemIsToggleOnly = computed(() => hasSubItems.value && !allowExpandableItemNavigation.value); const { updateContentHeight, contentHeight } = useExpandableContentHeight(subItemsRef, isOpen); const subItemsMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {})); const conditionalClasses = computed(() => ({ 'b-secondary-nav-item__option--active': isItemSelected.value, 'b-secondary-nav-item__option--expandable': hasSubItems.value, 'b-secondary-nav-item__option--sub-item': props.isSubItem, })); const emit = defineEmits<{ /** * Event emitted when this element is clicked */ (e: 'click', clickEvent: MouseEvent): void; }>(); const onClick = (e: MouseEvent) => { emit('click', e); updateActiveItemValue(props.value); }; const onToggleClick = () => { isOpen.value = !isOpen.value; }; const hasActiveDescendant = (items: Array<BentoSecondaryNavItemsItem>, value: string): boolean => { return items.some( item => item.value === value || (item.items ? hasActiveDescendant(item.items, value) : false) ); }; watch( () => subItemsRef.value, () => { let observer: ResizeObserver | null = null; if (!observer && subItemsRef.value) { observer = observeSizeOfElement(subItemsRef.value, () => { if (subItemsRef.value) { updateContentHeight(); } }); } } ); watch( isOpen, () => { updateContentHeight(); }, { immediate: true } ); watch( activeItemValue, value => { if (hasSubItems.value && props.items && hasActiveDescendant(props.items, value)) { isOpen.value = true; } }, { immediate: true } ); </script> <script lang="ts"> /** * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav} */ export default {}; </script> <style lang="scss" scoped src="./secondary-nav-item.scss" />