@adyen/bento-vue2 1.68.2 → 1.69.0

package/dist/chunks/button-actions.Ju27CRNG.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button-actions.Ju27CRNG.js","sources":["../../src/components/button/components/button-actions/button-actions.types.ts","../../../core/src/components/loading-button/loading-button.types.ts","../../src/components/button/components/loading-button/loading-button.vue","../../src/components/internal/button-actions-with-menu/button-actions-with-menu.keys.ts","../../src/components/button/components/button-actions/composables/use-stack-buttons/use-stack-buttons.ts","../../src/components/button/components/button-actions/button-actions.vue"],"sourcesContent":["import type { BentoButtonProps } from '@adyen/bento-core/src/components/button/button.types';\nimport type { BentoLoadingButtonState } from '@adyen/bento-core/src/components/loading-button/loading-button.types';\nimport type { VueNodeElement } from '@/types';\n\nexport interface BentoButtonActionObject extends BentoButtonProps {\n    title: string;\n    event?: (event: Event) => void;\n    icon?: VueNodeElement;\n    iconLeft?: VueNodeElement;\n    iconRight?: VueNodeElement;\n    state?: BentoLoadingButtonState | `${BentoLoadingButtonState}`;\n    iconOnly?: boolean;\n}\n\nexport type BentoButtonActionsList = Array<BentoButtonActionObject>;\n\nexport enum BentoButtonActionsLayoutBasic {\n    BUTTONS_END = 'buttons-end',\n    FILL_CONTAINER = 'fill-container',\n    SPACE_BETWEEN = 'space-between',\n    VERTICAL_STACK = 'vertical-stack',\n}\nexport enum BentoButtonActionsLayoutExtended {\n    BUTTONS_START = 'buttons-start',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport const BentoButtonActionsLayout = { ...BentoButtonActionsLayoutBasic, ...BentoButtonActionsLayoutExtended };\nexport type BentoButtonActionsLayout = BentoButtonActionsLayoutBasic | BentoButtonActionsLayoutExtended;\n\nexport interface BentoButtonActionsProps {\n    /**\n     * List of actions that will be used to render the buttons.\n     * First element in the list will be rendered as \"primary\".\n     * All elements after the first will be rendered as \"secondary\".\n     *\n     * Each object in the list should have a `title`, an `event` and\n     * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`.\n     *\n     * `title`: Button's text.\n     *\n     * `event`: Event triggered when clicking the Button.\n     *\n     * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`.\n     *\n     * @see BentoButton for a list of all the other props supported by each button action.\n     *\n     * ```\n     * [{\n     *   title: 'Primary',\n     *   event: () => { ... },\n     *   icon: FourPeopleIcon,\n     *   link: {\n     *           variant: 'default',\n     *           external: true,\n     *           to: 'https://www.adyen.com/'\n     *       },\n     *  }, {\n     *   title: 'Secondary',\n     *   event: () => { ... }\n     *   disabled: true,\n     *   variant: 'secondary',\n     *   critical: true\n     * }]\n     * ```\n     */\n    actions: BentoButtonActionsList;\n\n    /**\n     * Sets the Button Actions to color scheme inverse\n     */\n    inverse?: boolean;\n\n    /**\n     * Defines the layout in which the button actions is presented.\n     * It can be one of:\n     *\n     * @values BUTTONS_START\n     * @values BUTTONS_END\n     * @values FILL_CONTAINER\n     * @values SPACE_BETWEEN\n     * @values VERTICAL_STACK\n     */\n    layout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`;\n}\n","export enum BentoLoadingButtonState {\n    START = 'start',\n    LOADING = 'loading',\n    SUCCESS = 'success',\n    FAIL = 'fail',\n}\n\nexport type BentoLoadingButtonIconState = Partial<{ [key in BentoLoadingButtonState]: string }>;\n","<template>\n    <bento-button\n        :critical=\"isCritical\"\n        :variant=\"variant\"\n        :condensed=\"condensed\"\n        :disabled=\"disabled\"\n        :inverse=\"inverse\"\n        class=\"b-loading-button\"\n        :class=\"conditionalClasses\"\n        @click.capture.stop=\"onClick\"\n    >\n        <slot></slot>\n\n        <template v-if=\"state === 'start' && hasSlot('iconLeft')\" #iconLeft>\n            <slot name=\"iconLeft\"></slot>\n        </template>\n        <template v-else-if=\"state !== 'start'\" #iconLeft>\n            <span class=\"b-loading-button__icon\" data-testid=\"loading-button-rotating-icon\">\n                <cross v-if=\"state === 'fail'\" :svg-title=\"t('failed')\" />\n                <checkmark v-else-if=\"state === 'success'\" :svg-title=\"t('succeded')\" />\n                <!-- TODO: Replace with new loading-indicator component -->\n                <bento-loading-indicator v-else-if=\"state === 'loading'\" small :inverse=\"isInverseLoadingIndicator\" />\n            </span>\n        </template>\n    </bento-button>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, useSlots } from 'vue';\n    import { BentoLoadingButtonState } from '@/core/components/loading-button/loading-button.types';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import BentoButton from '@/components/button/button.vue';\n    import Cross from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import Checkmark from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * Reduces sizing of button\n         */\n        condensed: {\n            type: BentoButton.props.condensed.type,\n            default: false,\n        },\n\n        /**\n         * Displays loading-button as critical\n         */\n        critical: {\n            type: BentoButton.props.critical.type,\n            default: false,\n        },\n\n        /**\n         * Disables button functonality\n         */\n        disabled: {\n            type: BentoButton.props.disabled.type,\n            default: false,\n        },\n\n        /**\n         * Sets color set to inverse\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * State of the button.\n         * @values start, loading, success, fail\n         */\n        state: {\n            type: String as PropType<BentoLoadingButtonState | `${BentoLoadingButtonState}`>,\n            default: BentoLoadingButtonState.START,\n            validator: (value: BentoLoadingButtonState) => Object.values(BentoLoadingButtonState).includes(value),\n        },\n\n        /**\n         * Types of flavour of Button\n         */\n        variant: {\n            type: BentoButton.props.variant.type,\n            default: 'primary',\n            validator: BentoButton.props.variant.validator,\n        },\n    });\n\n    const emit = defineEmits([\"click\"]);\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const conditionalClasses = computed(() => ({\n        [`b-loading-button--${props.variant}-${BentoLoadingButtonState.LOADING}`]:\n            props.state === BentoLoadingButtonState.LOADING && !props.disabled,\n        'b-loading-button--loading': props.state === BentoLoadingButtonState.LOADING && !props.disabled,\n        [`b-loading-button--${props.variant}-${BentoLoadingButtonState.SUCCESS}`]:\n            props.state === BentoLoadingButtonState.SUCCESS,\n        [`b-loading-button--inverse`]: props.inverse,\n    }));\n\n    const isInverseLoadingIndicator = computed(\n        () => (props.variant === 'primary' && !props.inverse) || (props.variant !== 'primary' && props.inverse)\n    );\n    const isCritical = computed(\n        () =>\n            (props.critical && props.state === BentoLoadingButtonState.START) ||\n            props.state === BentoLoadingButtonState.FAIL\n    );\n\n    const onClick = (e: MouseEvent) => {\n        // Prevent Vue3 from triggering event twice\n        e.stopPropagation();\n\n        if (props.state !== BentoLoadingButtonState.LOADING) {\n            emit('click', e);\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Loading Button component is used for cases where pressing a button starts an event that requires a loading state, e.g.  when you have any sort of asynchronous action and are waiting for a response\n     *\n     * @example\n     * import { BentoLoadingButton } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoLoadingButton },\n     *     template: `\n     *          <bento-loading-button state=\"loading\" variant=\"secondary\">\n     *              Loading\n     *          </bento-loading button>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/loading-button/loading-button.scss\" />\n","export const BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY = Symbol(\n    'button actions with menu container injection key'\n);\n","import { computed, inject, nextTick, onMounted, onUnmounted, ref, Ref, watch } from 'vue';\nimport { observeSizeOfElement } from '@/utils/ts/resize';\nimport { BButtonActionsButtonsEndColumnGap } from '@adyen/bento-design-tokens/dist/js/bento/es6';\nimport { BentoButtonActionsList } from '../../button-actions.types';\nimport { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from '@/internal/button-actions-with-menu/button-actions-with-menu.keys';\n\nconst CONTAINER_QUERY = 242;\nconst BUTTONS_GAP = parseInt(BButtonActionsButtonsEndColumnGap, 10);\n\n/**\n * Calculates the width of the container and the buttons and decides if the buttons should be stacked or not\n *\n * @param buttonActions Reference to the container element\n * @param buttons Reference array of button elements\n * @param actions Button actions actions prop\n */\nexport const useStackButtons = (\n    buttonActions: Ref<HTMLDivElement>,\n    buttons: Ref<HTMLDivElement[]>,\n    actions: BentoButtonActionsList\n) => {\n    const originalButtonsWidth = ref(0);\n    let containerObserver: ResizeObserver | null = null;\n\n    const { buttonActionsWithMenu, menu, stackButtons } = inject(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, {\n        buttonActionsWithMenu: ref(null),\n        menu: ref(null),\n        stackButtons: ref(false),\n    });\n\n    const container = computed(() => buttonActionsWithMenu.value ?? buttonActions.value);\n\n    const computedButtons = computed(() => (menu.value ? [...buttons.value, menu.value.$el] : buttons.value));\n\n    const areButtonsWiderThanContainer = (updateOriginalButtonsWidth?: boolean) => {\n        const buttonsWidth = computedButtons.value?.reduce(\n            (acc, button) => acc + button.clientWidth + BUTTONS_GAP,\n            -BUTTONS_GAP - 1 // to remove the extra spacing, as if there's 3 buttons, only two will have a gap in between\n        );\n\n        const containersWidth = container.value.clientWidth;\n\n        if (updateOriginalButtonsWidth) {\n            originalButtonsWidth.value = containersWidth >= CONTAINER_QUERY && !stackButtons.value ? buttonsWidth : 0;\n        }\n        return originalButtonsWidth.value > containersWidth;\n    };\n\n    watch(\n        () => actions,\n        () => {\n            nextTick(() => {\n                stackButtons.value = areButtonsWiderThanContainer(true);\n            });\n        },\n        { deep: true }\n    );\n\n    onMounted(() => {\n        containerObserver = observeSizeOfElement(container.value, () => {\n            stackButtons.value = areButtonsWiderThanContainer(originalButtonsWidth.value === 0);\n        });\n    });\n\n    onUnmounted(() => {\n        containerObserver?.disconnect();\n    });\n\n    return stackButtons;\n};\n","<template>\n    <div ref=\"buttonActions\" class=\"b-button-actions\">\n        <div class=\"b-button-actions__container-wrapper\" :class=\"conditionalClasses\" role=\"group\">\n            <div\n                v-for=\"(button, index) in reversedActionsList\"\n                :key=\"index\"\n                ref=\"buttons\"\n                class=\"b-button-actions__button-wrapper\"\n            >\n                <bento-loading-button\n                    v-if=\"button.state\"\n                    :condensed=\"button.condensed\"\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :inverse=\"inverse\"\n                    :state=\"button.state\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    v-on=\"generateButtonEvents(button)\"\n                >\n                    {{ button.title }}\n                </bento-loading-button>\n                <bento-button\n                    v-else\n                    :condensed=\"button.condensed\"\n                    :critical=\"button.critical\"\n                    :disabled=\"button.disabled\"\n                    :inverse=\"inverse\"\n                    :link=\"button.link\"\n                    :variant=\"button.variant || generateButtonVariantByIndex(index)\"\n                    v-on=\"generateButtonEvents(button)\"\n                >\n                    <template v-if=\"button.icon || button.iconLeft\" #iconLeft>\n                        <component :is=\"button.icon || button.iconLeft\" :svg-title=\"button.title\"></component>\n                    </template>\n                    <template v-if=\"!isIconOnly(button)\" #default>\n                        {{ button.title }}\n                    </template>\n                    <template v-if=\"button.iconRight\" #iconRight>\n                        <component :is=\"button.iconRight\" :svg-title=\"button.title\"></component>\n                    </template>\n                </bento-button>\n            </div>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref } from 'vue';\n    import BentoButton from '../../button.vue';\n    import { BentoButtonActionObject, BentoButtonActionsLayout } from './button-actions.types';\n    import type { BentoButtonActionsProps } from './button-actions.types';\n    import { BentoLoadingButton } from '../loading-button';\n    import { useStackButtons } from './composables/use-stack-buttons/use-stack-buttons';\n\n    const props = defineProps({\n  actions: null,\n  inverse: { type: Boolean, default: false },\n  layout: { default: BentoButtonActionsLayout.BUTTONS_END }\n});\n\n    const buttonActions = ref<HTMLDivElement>(null);\n    const buttons = ref<HTMLDivElement[]>(null);\n    const stackButtons = useStackButtons(buttonActions, buttons, props.actions);\n\n    const reversedActionsList = computed(() => props.actions.slice().reverse());\n    const generateButtonVariantByIndex = actionIndex => {\n        const lastActionIndex = props.actions.length - 1;\n        return actionIndex === lastActionIndex ? 'primary' : 'secondary';\n    };\n\n    const conditionalClasses = computed(() => ({\n        [`b-button-actions--${props.layout}`]: true,\n        [`b-button-actions--stacked-buttons`]: stackButtons.value,\n    }));\n\n    const generateButtonEvents = (button: BentoButtonActionObject) =>\n        button?.event !== undefined\n            ? {\n                  click: button.event,\n              }\n            : {};\n\n    const isIconOnly = (button: BentoButtonActionObject) =>\n        button.iconOnly && (button.iconLeft || button.iconRight || button.icon);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * ButtonActions component manages a set of actions a user can choose from by displaying a group of buttons.\n     *\n     * @example\n     * import { BentoButtonActions } from '@adyen/bento-vue2';\n     * import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning';\n     *\n     * const clickedAction = () => { //your action here }\n     *\n     * <template>\n     *     <bento-button-actions\n     *         :actions=\"[{\n     *             title: 'Primary',\n     *             event: clickedAction,\n     *             icon: MachineLearningIcon,\n     *         }, {\n     *             title: 'Secondary',\n     *             event: clickedAction,\n     *         }, {\n     *             title: 'Tertiary',\n     *             event: clickedAction,\n     *         }]\"\n     *     />\n     * </template>\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/button-actions/button-actions.scss\" />\n"],"names":["BentoButtonActionsLayoutBasic","BentoButtonActionsLayoutBasic2","BentoButtonActionsLayoutExtended","BentoButtonActionsLayoutExtended2","BentoButtonActionsLayout","BentoLoadingButtonState","BentoLoadingButtonState2","__default__$1","messages","slots","useSlots","hasSlot","useHasSlot","t","useI18n","conditionalClasses","computed","props","isInverseLoadingIndicator","isCritical","e","emit","BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY","CONTAINER_QUERY","BUTTONS_GAP","BButtonActionsButtonsEndColumnGap","useStackButtons","buttonActions","buttons","actions","originalButtonsWidth","ref","containerObserver","buttonActionsWithMenu","menu","stackButtons","inject","container","computedButtons","areButtonsWiderThanContainer","updateOriginalButtonsWidth","buttonsWidth","_a","acc","button","containersWidth","watch","nextTick","onMounted","observeSizeOfElement","onUnmounted","__default__","reversedActionsList","generateButtonVariantByIndex","actionIndex","lastActionIndex"],"mappings":"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"}

package/dist/chunks/button.hF-nD1Og.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"button.hF-nD1Og.js","sources":["../../../core/src/components/button/button.types.ts","../../src/components/button/button.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoButtonVariant {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n    TERTIARY = 'tertiary',\n    TERTIARY_WITH_BACKGROUND = 'tertiary-with-background',\n}\n\nexport enum BentoButtonPropClass {\n    CONDENSED = 'condensed',\n    DESTRUCTIVE = 'critical',\n    DISABLED = 'disabled',\n    ICON_ONLY = 'icon-only',\n    INVERSE = 'inverse',\n}\n\nexport interface BentoButtonProps {\n    condensed?: boolean;\n    critical?: boolean;\n    disabled?: boolean;\n    inverse?: boolean;\n    variant?: BentoButtonVariant | `${BentoButtonVariant}`;\n    type?: string;\n    link?: object;\n}\n","<template>\n    <component\n        :is=\"componentType\"\n        v-bind=\"componentProps\"\n        class=\"b-button\"\n        :class=\"{ ...conditionalClasses, ...getIconOnlyClass() }\"\n        @click.capture=\"onClickButton\"\n    >\n        <span\n            v-if=\"hasSlot('iconLeft')\"\n            class=\"b-button__icon-left\"\n            data-testid=\"icon-button-left\"\n            :aria-hidden=\"hasSlot('default') ? 'true' : null\"\n        >\n            <slot name=\"iconLeft\" />\n        </span>\n        <bento-typography v-if=\"hasSlot('default')\" el=\"span\" variant=\"body\" stronger class=\"b-button__label\">\n            <slot />\n        </bento-typography>\n        <span\n            v-if=\"hasSlot('iconRight')\"\n            class=\"b-button__icon-right\"\n            data-testid=\"icon-button-right\"\n            :aria-hidden=\"hasSlot('default') ? 'true' : null\"\n        >\n            <slot name=\"iconRight\" />\n        </span>\n    </component>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, useAttrs, useSlots } from 'vue';\n    import { BentoButtonPropClass, BentoButtonVariant } from '@/core/components/button/button.types';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables/use-has-slot/use-has-slot';\n    import { Booleanish } from '@/types/prop-types';\n    import type { RouterLinkProps } from 'vue-router/types/router.d.ts';\n    import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue/types/jsx.d.ts';\n    import { BentoLink, BentoLinkVariant } from '@/components/link';\n\n    // TODO: replace all this code when migrated to Vue 3 is complete as this is the only\n    // current way to extend the `router-link` component in Vue 2 and Vue Router 3\n    export interface LinkProps extends RouterLinkProps, AnchorHTMLAttributes {\n        args?: { props: RouterLinkProps };\n\n        /**\n         * Set the rendered link to a regular external anchor link.\n         */\n        external: boolean;\n    }\n\n    const props = defineProps({\n        /**\n         * Reduces sizing of button\n         */\n        condensed: { type: Boolean, default: false },\n\n        /**\n         * Displays button as critical\n         */\n        critical: { type: Boolean, default: false },\n\n        /**\n         * Disables button functionality\n         */\n        disabled: { type: Boolean, default: false },\n\n        /**\n         * Sets color set to inverse\n         */\n        inverse: { type: Boolean, default: false },\n\n        /**\n         * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass.\n         */\n        link: { type: Object, default: undefined },\n\n        /**\n         * The default behavior of the button.\n         * Possible values are: 'button', 'reset', 'submit'\n         */\n        type: {\n            type: String as PropType<ButtonHTMLAttributes['type']>,\n            default: 'button',\n        },\n\n        /**\n         * Types of flavour of Button\n         * @values primary, secondary, tertiary, tertiary-with-background\n         */\n        variant: {\n            type: String as PropType<BentoButtonVariant | `${BentoButtonVariant}`>,\n            default: BentoButtonVariant.PRIMARY,\n            validator: (value: BentoButtonVariant) => Object.values(BentoButtonVariant).includes(value),\n        },\n    });\n\n    const emit = defineEmits([\"blur\", \"click\", \"focus\", \"keydown.esc\"]);\n\n    const attrs = useAttrs();\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const componentType = computed(() => {\n        if (props?.link !== undefined) {\n            /**\n             * Display a \"span\" with role \"link\" and \"aria-disabled=true\"\n             * if the link is disabled.\n             * @link https://www.scottohara.me/blog/2021/05/28/disabled-links.html\n             */\n            return props.disabled ? 'span' : BentoLink;\n        }\n        return 'button';\n    });\n    const ariaAttributes = computed(() => ({\n        'aria-controls': attrs['aria-controls']?.toString() as string,\n        'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish,\n    }));\n\n    const componentProps = computed(() =>\n        componentType.value === 'button'\n            ? {\n                  ...ariaAttributes.value,\n                  disabled: props.disabled,\n                  type: props.type,\n              }\n            : {\n                  ...props.link,\n                  disableTypography: true,\n                  variant: BentoLinkVariant.DEFAULT,\n                  isButton: true,\n\n                  /**\n                   * When the button is a disabled link, it's rendered as a `<span>`.\n                   * These attributes ensure it's still announced as a disabled link by screen readers.\n                   */\n                  'aria-disabled': props.disabled ? 'true' : undefined,\n                  role: props.disabled ? 'link' : undefined,\n              }\n    );\n\n    const variantClass = computed(() => ({\n        [`b-button--${props.variant}${props.critical ? `-${BentoButtonPropClass.DESTRUCTIVE}` : ''}`]: true,\n    }));\n\n    const conditionalClasses = computed(() => ({\n        ...variantClass.value,\n        [`b-button--${BentoButtonPropClass.CONDENSED}`]: props.condensed,\n        [`b-button--${BentoButtonPropClass.DISABLED}`]: props.disabled,\n        [`b-button--${BentoButtonPropClass.INVERSE}`]: props.inverse,\n    }));\n\n    const getIconOnlyClass = () => ({\n        [`b-button--${BentoButtonPropClass.ICON_ONLY}`]: !hasSlot('default'),\n    });\n\n    const onClickButton = (e: MouseEvent) => {\n        if (!props.disabled) {\n            emit('click', e);\n        } else {\n            e.preventDefault();\n            e.stopPropagation();\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Button component for all the various types of bento buttons.\n     *\n     * @example\n     * import { BentoButton } from '@adyen/bento-vue2';\n     * import { CheckMarkIcon } from '@adyen/ui-assets-icons-16';\n     *\n     * export default {\n     *     components: { BentoButton },\n     *     template: `\n     *         <bento-button\n     *             disabled\n     *             variant=\"secondary\"\n     *         >\n     *              <template #iconLeft>\n     *                  <check-mark svg-title=\"checked\" />\n     *              </template>\n     *\n     *              Button text\n     *\n     *              <template #iconRight>\n     *                  <check-mark svg-title=\"checked\" />\n     *              </template>\n     *         </bento-button>\n     *     `,\n     * }\n     */\n    export default {\n        name: 'bento-button',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/button/button.scss\" />\n"],"names":["BentoButtonVariant","BentoButtonVariant2","BentoButtonPropClass","BentoButtonPropClass2","__default__","attrs","useAttrs","slots","useSlots","hasSlot","useHasSlot","componentType","computed","props","BentoLink","ariaAttributes","_a","_b","componentProps","BentoLinkVariant","variantClass","conditionalClasses","e","emit"],"mappings":";;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,YAAA,aACAA,EAAA,WAAA,YACAA,EAAA,2BAAA,4BAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,YAAA,aACAA,EAAA,cAAA,YACAA,EAAA,WAAA,YACAA,EAAA,YAAA,aACAA,EAAA,UAAA,WALQA,IAAAD,KAAA,CAAA,CAAA;ACwLR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAjGAC,IAAAC,EAAA,GACAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,OACIC,KAAA,gBAAAA,EAAA,UAAA,SAMIA,EAAA,WAAA,SAAAC,IAEJ,QAAO,GAEXC,IAAAH,EAAA,MAAA;;AAAA;AAAA,QAAuC,kBAAAI,IAAAX,EAAA,eAAA,MAAA,gBAAAW,EAAA;AAAA,QACe,kBAAAC,IAAAZ,EAAA,eAAA,MAAA,gBAAAY,EAAA;AAAA,MACA;AAAA,KAAA,GAGtDC,IAAAN;AAAA,MAAuB,MAAAD,EAAA,UAAA,WAAA;AAAA,QAEb,GAAAI,EAAA;AAAA,QACsB,UAAAF,EAAA;AAAA,QACF,MAAAA,EAAA;AAAA,MACJ,IAAA;AAAA,QAEhB,GAAAA,EAAA;AAAA,QACa,mBAAA;AAAA,QACU,SAAAM,EAAA;AAAA,QACO,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAChB,iBAAAN,EAAA,WAAA,SAAA;AAAA,QAMiC,MAAAA,EAAA,WAAA,SAAA;AAAA,MACX;AAAA,IACpC,GAGVO,IAAAR,EAAA,OAAA;AAAA,MAAqC,CAAA,aAAAC,EAAA,OAAA,GAAAA,EAAA,WAAA,IAAAX,EAAA,WAAA,KAAA,EAAA,EAAA,GAAA;AAAA,IAC8D,EAAA,GAGnGmB,IAAAT,EAAA,OAAA;AAAA,MAA2C,GAAAQ,EAAA;AAAA,MACvB,CAAA,aAAAlB,EAAA,SAAA,EAAA,GAAAW,EAAA;AAAA,MACuC,CAAA,aAAAX,EAAA,QAAA,EAAA,GAAAW,EAAA;AAAA,MACD,CAAA,aAAAX,EAAA,OAAA,EAAA,GAAAW,EAAA;AAAA,IACD,EAAA;6LAGzD,OAAA;AAAA,MAAgC,CAAA,aAAAX,EAAA,SAAA,EAAA,GAAA,CAAAO,EAAA,SAAA;AAAA,IACuC,mBAGvE,CAAAa,MAAA;AACI,MAAAT,EAAA,YAGIS,EAAA,eAAA,GACAA,EAAA,gBAAA,KAHAC,EAAA,SAAAD,CAAA;AAAA,IAIJ;;;;;;;;;;;;;;;;;"}