@adyen/bento-vue3 1.42.0 → 1.44.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"button-actions.BjlQS6tm.js","sources":["../../../core/src/components/button-actions/button-actions.types.ts","../../../core/src/components/loading-button/loading-button.types.ts","../../../vue2/src/components/button/components/loading-button/loading-button.vue","../../../vue2/src/components/internal/button-actions-with-menu/button-actions-with-menu.keys.ts","../../../vue2/src/components/button/components/button-actions/composables/use-stack-buttons/use-stack-buttons.ts","../../../vue2/src/components/button/components/button-actions/button-actions.vue"],"sourcesContent":["import type { BentoButtonProps } from '@/core/components/button/button.types';\nimport { BentoLoadingButtonState } from '@/core/components/loading-button/loading-button.types';\n\nexport interface BentoButtonActionObject<IconType = object> extends BentoButtonProps {\n    title: string;\n    event?: (event: Event) => void;\n    icon?: IconType;\n    iconLeft?: IconType;\n    iconRight?: IconType;\n    state?: BentoLoadingButtonState | `${BentoLoadingButtonState}`;\n    iconOnly?: boolean;\n}\n\nexport type BentoButtonActionsList<IconType = object> = Array<BentoButtonActionObject<IconType>>;\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","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<{\n        /**\n         * Click event handler\n         */\n        (e: 'click', event: MouseEvent): void;\n    }>();\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, PropType, ref } from 'vue';\n    import BentoButton from '../../button.vue';\n    import {\n        BentoButtonActionObject,\n        BentoButtonActionsLayout,\n        BentoButtonActionsList,\n    } from '@/core/components/button-actions/button-actions.types';\n    import { BentoLoadingButton } from '../loading-button';\n    import { useStackButtons } from '@/components/button/components/button-actions/composables/use-stack-buttons/use-stack-buttons';\n\n    const props = defineProps({\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: {\n            type: Array as PropType<BentoButtonActionsList>,\n            required: true,\n        },\n\n        /**\n         * Sets the Button Actions to color scheme inverse\n         */\n        inverse: {\n            type: Boolean,\n            default: false,\n        },\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: {\n            type: String as PropType<BentoButtonActionsLayout | `${BentoButtonActionsLayout}`>,\n            default: BentoButtonActionsLayout.BUTTONS_END,\n            validator: (layout: BentoButtonActionsLayout) => Object.values(BentoButtonActionsLayout).includes(layout),\n        },\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","props","__props","emit","__emit","slots","useSlots","hasSlot","useHasSlot","t","useI18n","conditionalClasses","computed","isInverseLoadingIndicator","isCritical","onClick","e","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","generateButtonEvents","isIconOnly"],"mappings":"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"}

package/dist/chunks/{card.D_XL2TWr.js → card.BrEfcUoE.js}

@@ -6,7 +6,7 @@ import { u as ee } from "./use-has-slot.B7eQSabc.js";
 import { g as ae } from "./generate-uid.D-HFI38h.js";
 import { u as te } from "./i18n.CPGoe9tN.js";
 import { o as oe } from "./resize.Bqks3WUm.js";
-import { c as ne, B as de } from "./button-actions.Bjfo46Q_.js";
+import { c as ne, B as de } from "./button-actions.BjlQS6tm.js";
 import { _ as se } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/card.css";
 var T = /* @__PURE__ */ ((l) => (l.PRIMARY = "primary", l.SECONDARY = "secondary", l))(T || {}), p = /* @__PURE__ */ ((l) => (l.DEFAULT = "default", l.SMALL = "small", l))(p || {});
@@ -210,4 +210,4 @@ export {
   p as a,
   Se as c
 };
-//# sourceMappingURL=card.D_XL2TWr.js.map
+//# sourceMappingURL=card.BrEfcUoE.js.map

package/dist/chunks/{card.D_XL2TWr.js.map → card.BrEfcUoE.js.map}

@@ -1 +1 @@
-{"version":3,"file":"card.D_XL2TWr.js","sources":["../../../vue2/src/components/card/card.types.ts","../../../vue2/src/components/card/card.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCardBackground {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCardTitleSize {\n    DEFAULT = 'default',\n    SMALL = 'small',\n}\n","<template>\n    <div class=\"b-card\" :class=\"cardConditionalClasses\" data-testid=\"card\" @click=\"onClick\">\n        <div v-if=\"hasSlot('image')\" class=\"b-card__image\">\n            <slot name=\"image\"></slot>\n        </div>\n        <div\n            v-if=\"showHeader\"\n            class=\"b-card__header\"\n            :class=\"cardHeaderConditionalClasses\"\n            :tabindex=\"tabIndex\"\n            :aria-controls=\"expandable ? cardId : null\"\n            :aria-expanded=\"expandable ? `${showContent}` : null\"\n            :role=\"expandable ? 'button' : null\"\n            @click=\"toggleExpansion\"\n            @keypress.enter=\"toggleExpansion\"\n            @keypress.space=\"toggleExpansion\"\n        >\n            <div class=\"b-card__header-wrapper\">\n                <div v-if=\"showTitleWrapper\" class=\"b-card__header-slot-wrapper\">\n                    <div class=\"b-card__title-wrapper\" :class=\"cardTitleWrapperConditionalClasses\">\n                        <div v-if=\"expandable\" class=\"b-card__toggle\" :class=\"cardToggleConditionalClasses\">\n                            <chevron-up-icon v-if=\"showContent\" :svg-title=\"t('hideContent')\" aria-hidden=\"true\" />\n                            <chevron-down-icon v-else :svg-title=\"t('showContent')\" aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography v-if=\"hasSlot('default')\" class=\"b-card__title\" v-bind=\"typography\">\n                            <slot />\n                        </bento-typography>\n                    </div>\n\n                    <template v-if=\"hasSlot('header')\">\n                        <slot name=\"header\"></slot>\n                    </template>\n                </div>\n\n                <bento-typography v-if=\"hasSlot('description')\" class=\"b-card__description\" el=\"div\" variant=\"body\">\n                    <slot name=\"description\" />\n                </bento-typography>\n            </div>\n        </div>\n\n        <Transition name=\"b-card__animation\">\n            <div v-if=\"showCardBody\" class=\"b-card__wrapper\" :style=\"contentMaxHeight\">\n                <div\n                    :id=\"expandable ? cardId : null\"\n                    ref=\"contentDiv\"\n                    class=\"b-card__body\"\n                    :class=\"cardBodyConditionalClasses\"\n                >\n                    <div v-if=\"hasSlot('content')\" class=\"b-card__content\" :class=\"cardContentConditionalClasses\">\n                        <slot name=\"content\" />\n                    </div>\n\n                    <div v-if=\"actions\" class=\"b-card__actions\" :class=\"cardActionsConditionalClasses\">\n                        <bento-button-actions :actions=\"actions\" :layout=\"actionsLayout\"></bento-button-actions>\n                    </div>\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, useSlots, watch } from 'vue';\n\n    // Components\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButtonActions, BentoButtonActionsLayout, BentoButtonActionsList } from '@/components/button';\n    import { BentoCardBackground, BentoCardTitleSize } from '@/components/card/card.types';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    // Composables\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = withDefaults(\n        defineProps<{\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`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             * }]\n             * ```\n             */\n            actions?: BentoButtonActionsList;\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            actionsLayout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`;\n\n            /**\n             * Defines the color of card background\n             */\n            background?: BentoCardBackground | `${BentoCardBackground}`;\n\n            /**\n             * Sets the expandable card in a closed state\n             */\n            closed?: boolean;\n\n            /**\n             * Disables the expandable card\n             */\n            disabled?: boolean;\n\n            /**\n             * The whole content of the card will be expandable in accordion manner\n             */\n            expandable?: boolean;\n\n            /**\n             * Defines the title size of the card header\n             */\n            titleSize?: BentoCardTitleSize | `${BentoCardTitleSize}`;\n        }>(),\n        {\n            actions: null,\n            actionsLayout: BentoButtonActionsLayout.BUTTONS_END,\n            background: BentoCardBackground.PRIMARY,\n            closed: false,\n            disabled: false,\n            expandable: false,\n            titleSize: BentoCardTitleSize.DEFAULT,\n        }\n    );\n\n    const emit = defineEmits<{\n        (e: 'click');\n        (e: 'expanded', isExpanded: boolean);\n    }>();\n\n    const contentDiv = ref<HTMLDivElement>(null);\n\n    const cardId = generateUid('card');\n    const showContent = ref(!props.closed);\n    watch(\n        () => props.closed,\n        value => {\n            showContent.value = !value;\n        }\n    );\n    const showHeader = computed(() => hasSlot('default') || hasSlot('description') || hasSlot('header'));\n    const showTitleWrapper = computed(() => hasSlot('default') || hasSlot('header'));\n    const showCardBody = computed(\n        () =>\n            (hasSlot('content') || props.actions?.length) &&\n            (!props.expandable || (props.expandable && showContent.value))\n    );\n    const tabIndex = computed(() => (props.expandable && !props.disabled ? 0 : -1));\n\n    const cardConditionalClasses = computed(() => ({\n        [`b-card--${props.background}`]: props.background,\n        'b-card--expandable': props.expandable,\n        'b-card--disabled': props.expandable && props.disabled,\n    }));\n\n    const cardHeaderConditionalClasses = computed(() => ({\n        'b-card__header--expandable': props.expandable,\n        'b-card__header--without-body': !props.expandable && !showCardBody.value,\n    }));\n\n    const cardToggleConditionalClasses = computed(() => ({\n        'b-card__toggle--small-text': props.titleSize === BentoCardTitleSize.SMALL,\n    }));\n\n    const cardBodyConditionalClasses = computed(() => ({\n        'b-card__body--expandable': props.expandable && hasSlot('content'),\n        'b-card__body--without-header': !props.expandable && !showHeader.value,\n    }));\n\n    const cardContentConditionalClasses = computed(() => ({\n        'b-card__content--without-header': !props.expandable && !showHeader.value,\n        'b-card__content--expandable': props.expandable,\n    }));\n\n    const cardActionsConditionalClasses = computed(() => {\n        const isNotExpandableWithoutContent = !props.expandable && props.actions && !hasSlot('content');\n\n        return {\n            'b-card__actions--without-content': isNotExpandableWithoutContent,\n            'b-card__actions--without-content-and-with-header': isNotExpandableWithoutContent && showHeader.value,\n        };\n    });\n\n    const cardTitleWrapperConditionalClasses = computed(() => ({\n        'b-card__title-wrapper--truncated': hasSlot('header'),\n    }));\n\n    const typography = computed(\n        () =>\n            ({\n                el: 'div',\n                variant: props.titleSize === BentoCardTitleSize.DEFAULT ? 'title' : 'body',\n                strongest: props.titleSize === BentoCardTitleSize.SMALL,\n                wide: props.titleSize === BentoCardTitleSize.SMALL,\n            } as InstanceType<typeof BentoTypography>['$props'])\n    );\n\n    // Toggle open and close logic and animation\n    const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, showContent);\n\n    const contentMaxHeight = computed(() =>\n        props.expandable && contentHeight.value ? { 'max-height': contentHeight.value } : {}\n    );\n\n    watch(\n        () => contentDiv.value,\n        () => {\n            let observer: ResizeObserver | null = null;\n            if (!observer && contentDiv.value) {\n                observer = observeSizeOfElement(contentDiv.value, () => {\n                    if (contentDiv.value) {\n                        updateContentHeight();\n                    }\n                });\n            }\n        }\n    );\n\n    const toggleExpansion = () => {\n        if (!props.disabled && props.expandable) {\n            showContent.value = !showContent.value;\n            emit('expanded', showContent.value);\n            updateContentHeight();\n        }\n    };\n\n    const onClick = () => {\n        if (!props.disabled) {\n            emit('click');\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A card is a flexible and composable container.\n     * Use cards to represent a single object or to visually group certain content, like legal information within company settings.\n     *\n     * @example\n     * import { BentoCard } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCard },\n     *     template: `\n     *         <bento-card>\n     *             Title of the Card\n     *         </bento-card>\n     *     `\n     * };\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-card',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/card/card.scss\" />\n"],"names":["BentoCardBackground","BentoCardBackground2","BentoCardTitleSize","BentoCardTitleSize2","__default__","messages","t","useI18n","slots","useSlots","hasSlot","useHasSlot","props","__props","emit","__emit","contentDiv","ref","cardId","generateUid","showContent","watch","value","showHeader","computed","showTitleWrapper","showCardBody","_a","tabIndex","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","observer","observeSizeOfElement","toggleExpansion","onClick"],"mappings":";;;;;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,YAAA,aAFQA,IAAAD,KAAA,CAAA,CAAA,GAQAE,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,QAAA,SAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;;;;;;;;;;gBCwRRE,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;;;;AAlNA,UAAA,EAAA,GAAAC,EAAA,IAAAC,GAAA,EAAA,UAAAF,EAAA,CAAA,GAEAG,IAAAC,EAAA,GACAC,IAAAC,GAAAH,CAAA,GAEAI,IAAAC,GA6EAC,IAAAC,GAKAC,IAAAC,EAAA,IAAA,GAEAC,IAAAC,GAAA,MAAA,GACAC,IAAAH,EAAA,CAAAL,EAAA,MAAA;AACA,IAAAS;AAAA,MAAA,MAAAT,EAAA;AAAA,MACgB,CAAAU,MAAA;AAER,QAAAF,EAAA,QAAA,CAAAE;AAAA,MAAqB;AAAA,IACzB;AAEJ,UAAAC,IAAAC,EAAA,MAAAd,EAAA,SAAA,KAAAA,EAAA,aAAA,KAAAA,EAAA,QAAA,CAAA,GACAe,IAAAD,EAAA,MAAAd,EAAA,SAAA,KAAAA,EAAA,QAAA,CAAA,GACAgB,IAAAF;AAAA,MAAqB,MAAA;;AAAA,gBAAAd,EAAA,SAAA,OAAAiB,IAAAf,EAAA,YAAA,gBAAAe,EAAA,aAAA,CAAAf,EAAA,cAAAA,EAAA,cAAAQ,EAAA;AAAA;AAAA,IAG0C,GAE/DQ,IAAAJ,EAAA,MAAAZ,EAAA,cAAA,CAAAA,EAAA,WAAA,IAAA,EAAA,GAEAiB,IAAAL,EAAA,OAAA;AAAA,MAA+C,CAAA,WAAAZ,EAAA,UAAA,EAAA,GAAAA,EAAA;AAAA,MACJ,sBAAAA,EAAA;AAAA,MACX,oBAAAA,EAAA,cAAAA,EAAA;AAAA,IACkB,EAAA,GAGlDkB,IAAAN,EAAA,OAAA;AAAA,MAAqD,8BAAAZ,EAAA;AAAA,MACb,gCAAA,CAAAA,EAAA,cAAA,CAAAc,EAAA;AAAA,IAC+B,EAAA,GAGvEK,IAAAP,EAAA,OAAA;AAAA,MAAqD,8BAAAZ,EAAA,cAAAV,EAAA;AAAA,IACoB,EAAA,GAGzE8B,IAAAR,EAAA,OAAA;AAAA,MAAmD,4BAAAZ,EAAA,cAAAF,EAAA,SAAA;AAAA,MACkB,gCAAA,CAAAE,EAAA,cAAA,CAAAW,EAAA;AAAA,IACA,EAAA,GAGrEU,IAAAT,EAAA,OAAA;AAAA,MAAsD,mCAAA,CAAAZ,EAAA,cAAA,CAAAW,EAAA;AAAA,MACkB,+BAAAX,EAAA;AAAA,IAC/B,EAAA,GAGzCsB,IAAAV,EAAA,MAAA;AACI,YAAAW,IAAA,CAAAvB,EAAA,cAAAA,EAAA,WAAA,CAAAF,EAAA,SAAA;AAEA,aAAA;AAAA,QAAO,oCAAAyB;AAAA,QACiC,oDAAAA,KAAAZ,EAAA;AAAA,MAC4D;AAAA,IACpG,CAAA,GAGJa,IAAAZ,EAAA,OAAA;AAAA,MAA2D,oCAAAd,EAAA,QAAA;AAAA,IACH,EAAA,GAGxD2B,IAAAb;AAAA,MAAmB,OAAA;AAAA,QAEV,IAAA;AAAA,QACO,SAAAZ,EAAA,cAAAV,EAAA,UAAA,UAAA;AAAA,QACgE,WAAAU,EAAA,cAAAV,EAAA;AAAA,QAClB,MAAAU,EAAA,cAAAV,EAAA;AAAA,MACL;AAAA,IACjD,GAIR,EAAA,qBAAAoC,GAAA,eAAAC,EAAA,IAAAC,EAAAxB,GAAAI,CAAA,GAEAqB,IAAAjB;AAAA,MAAyB,MAAAZ,EAAA,cAAA2B,EAAA,QAAA,EAAA,cAAAA,EAAA,MAAA,IAAA,CAAA;AAAA,IAC8D;AAGvF,IAAAlB;AAAA,MAAA,MAAAL,EAAA;AAAA,MACqB,MAAA;AAEb,YAAA0B,IAAA;AACA,QAAA,CAAAA,KAAA1B,EAAA,UACI0B,IAAAC,GAAA3B,EAAA,OAAA,MAAA;AACI,UAAAA,EAAA,SACIsB,EAAA;AAAA,QACJ,CAAA;AAAA,MAER;AAAA,IACJ;AAGJ,UAAAM,IAAA,MAAA;AACI,MAAA,CAAAhC,EAAA,YAAAA,EAAA,eACIQ,EAAA,QAAA,CAAAA,EAAA,OACAN,EAAA,YAAAM,EAAA,KAAA,GACAkB,EAAA;AAAA,IACJ,GAGJO,IAAA,MAAA;AACI,MAAAjC,EAAA,YACIE,EAAA,OAAA;AAAA,IACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"card.BrEfcUoE.js","sources":["../../../vue2/src/components/card/card.types.ts","../../../vue2/src/components/card/card.vue"],"sourcesContent":["/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCardBackground {\n    PRIMARY = 'primary',\n    SECONDARY = 'secondary',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCardTitleSize {\n    DEFAULT = 'default',\n    SMALL = 'small',\n}\n","<template>\n    <div class=\"b-card\" :class=\"cardConditionalClasses\" data-testid=\"card\" @click=\"onClick\">\n        <div v-if=\"hasSlot('image')\" class=\"b-card__image\">\n            <slot name=\"image\"></slot>\n        </div>\n        <div\n            v-if=\"showHeader\"\n            class=\"b-card__header\"\n            :class=\"cardHeaderConditionalClasses\"\n            :tabindex=\"tabIndex\"\n            :aria-controls=\"expandable ? cardId : null\"\n            :aria-expanded=\"expandable ? `${showContent}` : null\"\n            :role=\"expandable ? 'button' : null\"\n            @click=\"toggleExpansion\"\n            @keypress.enter=\"toggleExpansion\"\n            @keypress.space=\"toggleExpansion\"\n        >\n            <div class=\"b-card__header-wrapper\">\n                <div v-if=\"showTitleWrapper\" class=\"b-card__header-slot-wrapper\">\n                    <div class=\"b-card__title-wrapper\" :class=\"cardTitleWrapperConditionalClasses\">\n                        <div v-if=\"expandable\" class=\"b-card__toggle\" :class=\"cardToggleConditionalClasses\">\n                            <chevron-up-icon v-if=\"showContent\" :svg-title=\"t('hideContent')\" aria-hidden=\"true\" />\n                            <chevron-down-icon v-else :svg-title=\"t('showContent')\" aria-hidden=\"true\" />\n                        </div>\n                        <bento-typography v-if=\"hasSlot('default')\" class=\"b-card__title\" v-bind=\"typography\">\n                            <slot />\n                        </bento-typography>\n                    </div>\n\n                    <template v-if=\"hasSlot('header')\">\n                        <slot name=\"header\"></slot>\n                    </template>\n                </div>\n\n                <bento-typography v-if=\"hasSlot('description')\" class=\"b-card__description\" el=\"div\" variant=\"body\">\n                    <slot name=\"description\" />\n                </bento-typography>\n            </div>\n        </div>\n\n        <Transition name=\"b-card__animation\">\n            <div v-if=\"showCardBody\" class=\"b-card__wrapper\" :style=\"contentMaxHeight\">\n                <div\n                    :id=\"expandable ? cardId : null\"\n                    ref=\"contentDiv\"\n                    class=\"b-card__body\"\n                    :class=\"cardBodyConditionalClasses\"\n                >\n                    <div v-if=\"hasSlot('content')\" class=\"b-card__content\" :class=\"cardContentConditionalClasses\">\n                        <slot name=\"content\" />\n                    </div>\n\n                    <div v-if=\"actions\" class=\"b-card__actions\" :class=\"cardActionsConditionalClasses\">\n                        <bento-button-actions :actions=\"actions\" :layout=\"actionsLayout\"></bento-button-actions>\n                    </div>\n                </div>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, ref, useSlots, watch } from 'vue';\n\n    // Components\n    import { BentoTypography } from '@/components/typography';\n    import { BentoButtonActions, BentoButtonActionsLayout, BentoButtonActionsList } from '@/components/button';\n    import { BentoCardBackground, BentoCardTitleSize } from '@/components/card/card.types';\n    import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down';\n    import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up';\n\n    // Composables\n    import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n    import { generateUid } from '@/core/utils/ts';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const props = withDefaults(\n        defineProps<{\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`: Vue Icon from the library `@adyen/ui-assets-icons-16`.\n             *\n             * ```\n             * [{\n             *   title: 'Primary',\n             *   event: () => { ... },\n             *   icon: FourPeopleIcon\n             * }, {\n             *   title: 'Secondary',\n             *   event: () => { ... }\n             * }]\n             * ```\n             */\n            actions?: BentoButtonActionsList;\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            actionsLayout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`;\n\n            /**\n             * Defines the color of card background\n             */\n            background?: BentoCardBackground | `${BentoCardBackground}`;\n\n            /**\n             * Sets the expandable card in a closed state\n             */\n            closed?: boolean;\n\n            /**\n             * Disables the expandable card\n             */\n            disabled?: boolean;\n\n            /**\n             * The whole content of the card will be expandable in accordion manner\n             */\n            expandable?: boolean;\n\n            /**\n             * Defines the title size of the card header\n             */\n            titleSize?: BentoCardTitleSize | `${BentoCardTitleSize}`;\n        }>(),\n        {\n            actions: null,\n            actionsLayout: BentoButtonActionsLayout.BUTTONS_END,\n            background: BentoCardBackground.PRIMARY,\n            closed: false,\n            disabled: false,\n            expandable: false,\n            titleSize: BentoCardTitleSize.DEFAULT,\n        }\n    );\n\n    const emit = defineEmits<{\n        (e: 'click');\n        (e: 'expanded', isExpanded: boolean);\n    }>();\n\n    const contentDiv = ref<HTMLDivElement>(null);\n\n    const cardId = generateUid('card');\n    const showContent = ref(!props.closed);\n    watch(\n        () => props.closed,\n        value => {\n            showContent.value = !value;\n        }\n    );\n    const showHeader = computed(() => hasSlot('default') || hasSlot('description') || hasSlot('header'));\n    const showTitleWrapper = computed(() => hasSlot('default') || hasSlot('header'));\n    const showCardBody = computed(\n        () =>\n            (hasSlot('content') || props.actions?.length) &&\n            (!props.expandable || (props.expandable && showContent.value))\n    );\n    const tabIndex = computed(() => (props.expandable && !props.disabled ? 0 : -1));\n\n    const cardConditionalClasses = computed(() => ({\n        [`b-card--${props.background}`]: props.background,\n        'b-card--expandable': props.expandable,\n        'b-card--disabled': props.expandable && props.disabled,\n    }));\n\n    const cardHeaderConditionalClasses = computed(() => ({\n        'b-card__header--expandable': props.expandable,\n        'b-card__header--without-body': !props.expandable && !showCardBody.value,\n    }));\n\n    const cardToggleConditionalClasses = computed(() => ({\n        'b-card__toggle--small-text': props.titleSize === BentoCardTitleSize.SMALL,\n    }));\n\n    const cardBodyConditionalClasses = computed(() => ({\n        'b-card__body--expandable': props.expandable && hasSlot('content'),\n        'b-card__body--without-header': !props.expandable && !showHeader.value,\n    }));\n\n    const cardContentConditionalClasses = computed(() => ({\n        'b-card__content--without-header': !props.expandable && !showHeader.value,\n        'b-card__content--expandable': props.expandable,\n    }));\n\n    const cardActionsConditionalClasses = computed(() => {\n        const isNotExpandableWithoutContent = !props.expandable && props.actions && !hasSlot('content');\n\n        return {\n            'b-card__actions--without-content': isNotExpandableWithoutContent,\n            'b-card__actions--without-content-and-with-header': isNotExpandableWithoutContent && showHeader.value,\n        };\n    });\n\n    const cardTitleWrapperConditionalClasses = computed(() => ({\n        'b-card__title-wrapper--truncated': hasSlot('header'),\n    }));\n\n    const typography = computed(\n        () =>\n            ({\n                el: 'div',\n                variant: props.titleSize === BentoCardTitleSize.DEFAULT ? 'title' : 'body',\n                strongest: props.titleSize === BentoCardTitleSize.SMALL,\n                wide: props.titleSize === BentoCardTitleSize.SMALL,\n            } as InstanceType<typeof BentoTypography>['$props'])\n    );\n\n    // Toggle open and close logic and animation\n    const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, showContent);\n\n    const contentMaxHeight = computed(() =>\n        props.expandable && contentHeight.value ? { 'max-height': contentHeight.value } : {}\n    );\n\n    watch(\n        () => contentDiv.value,\n        () => {\n            let observer: ResizeObserver | null = null;\n            if (!observer && contentDiv.value) {\n                observer = observeSizeOfElement(contentDiv.value, () => {\n                    if (contentDiv.value) {\n                        updateContentHeight();\n                    }\n                });\n            }\n        }\n    );\n\n    const toggleExpansion = () => {\n        if (!props.disabled && props.expandable) {\n            showContent.value = !showContent.value;\n            emit('expanded', showContent.value);\n            updateContentHeight();\n        }\n    };\n\n    const onClick = () => {\n        if (!props.disabled) {\n            emit('click');\n        }\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A card is a flexible and composable container.\n     * Use cards to represent a single object or to visually group certain content, like legal information within company settings.\n     *\n     * @example\n     * import { BentoCard } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCard },\n     *     template: `\n     *         <bento-card>\n     *             Title of the Card\n     *         </bento-card>\n     *     `\n     * };\n     */\n    export default {\n        i18n: { messages },\n        name: 'bento-card',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"@/core/components/card/card.scss\" />\n"],"names":["BentoCardBackground","BentoCardBackground2","BentoCardTitleSize","BentoCardTitleSize2","__default__","messages","t","useI18n","slots","useSlots","hasSlot","useHasSlot","props","__props","emit","__emit","contentDiv","ref","cardId","generateUid","showContent","watch","value","showHeader","computed","showTitleWrapper","showCardBody","_a","tabIndex","cardConditionalClasses","cardHeaderConditionalClasses","cardToggleConditionalClasses","cardBodyConditionalClasses","cardContentConditionalClasses","cardActionsConditionalClasses","isNotExpandableWithoutContent","cardTitleWrapperConditionalClasses","typography","updateContentHeight","contentHeight","useExpandableContentHeight","contentMaxHeight","observer","observeSizeOfElement","toggleExpansion","onClick"],"mappings":"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"}

package/dist/chunks/{code-snippet.CiOcZKKH.js → code-snippet.S5NdUu0p.js}

@@ -1,7 +1,7 @@
 import { defineComponent as Y, ref as v, computed as h, shallowRef as x, onMounted as F, watch as K, watchEffect as q, resolveComponent as i, openBlock as o, createElementBlock as _, normalizeClass as D, createElementVNode as C, createBlock as g, mergeProps as Q, createCommentVNode as c, createVNode as N, withCtx as f, createTextVNode as R, toDisplayString as O, renderSlot as Z, normalizeProps as ee, guardReactiveProps as ne } from "vue";
 import { s as te, H as ae, t as n, j as oe, x as ie, a as se, b as le, p as re, E as ce, h as de, k as ge, i as pe, c as $, d as J, l as ue, e as me, C as H } from "./codemirror.BlV6WO5w.js";
-import { B as be, a as he, b as fe, c as ye } from "./es6.b4enG1py.js";
-import { B as ve } from "./dropdown.BqkUB1So.js";
+import { B as be, a as he, b as fe, c as ye } from "./es6.C-HLzYPA.js";
+import { B as ve } from "./dropdown.Sj2OLuEF.js";
 import { B as _e } from "./button.pwNCxwPu.js";
 import { B as Ce } from "./typography.DNzU41ah.js";
 import "./events.FNmSWp_P.js";
@@ -9,7 +9,7 @@ import { B as Ne } from "./tooltip.BvJoy09y.js";
 import { B as Le } from "./loading-indicator.N_WV9Gwz.js";
 import { u as Ie } from "./i18n.CPGoe9tN.js";
 import { E as Ae } from "./expand.CgwNEbbz.js";
-import { h as Ee } from "./base-modal.ku0lyHOs.js";
+import { h as Ee } from "./base-modal.BR_pB6eH.js";
 import { C as Te } from "./copy.CnzLQyvJ.js";
 import { _ as ke } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/code-snippet.css";
@@ -389,4 +389,4 @@ export {
   y as b,
   on as c
 };
-//# sourceMappingURL=code-snippet.CiOcZKKH.js.map
+//# sourceMappingURL=code-snippet.S5NdUu0p.js.map

package/dist/chunks/{code-snippet.CiOcZKKH.js.map → code-snippet.S5NdUu0p.js.map}

@@ -1 +1 @@
-{"version":3,"file":"code-snippet.CiOcZKKH.js","sources":["../../../vue2/src/components/code-snippet/highlight.ts","../../../vue2/src/components/code-snippet/code-snippet.types.ts","../../../vue2/src/components/code-snippet/utils/get-lang-loader.ts","../../../vue2/src/components/code-snippet/utils/indent-same-as-line-before-extension.ts","../../../vue2/src/components/code-snippet/code-snippet.vue"],"sourcesContent":["import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';\nimport { tags as t } from '@lezer/highlight';\nimport {\n    BCodeSnippetCodeAreaHighlightBlue,\n    BCodeSnippetCodeAreaHighlightGreen,\n    BCodeSnippetCodeAreaHighlightOrange,\n    BCodeSnippetCodeAreaHighlightRed,\n} from '@adyen/bento-design-tokens/dist/js/bento/es6';\nimport { BentoCodeSnippetSupportedLanguage } from './code-snippet.types';\n\nconst lightThemeColors = {\n    red: BCodeSnippetCodeAreaHighlightRed,\n    orange: BCodeSnippetCodeAreaHighlightOrange,\n    green: BCodeSnippetCodeAreaHighlightGreen,\n    blue: BCodeSnippetCodeAreaHighlightBlue,\n    invalid: '#ffffff',\n};\n\nconst highlightStyle = (colors, language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`) =>\n    HighlightStyle.define([\n        {\n            tag: t.keyword,\n            color: colors.red,\n        },\n        {\n            tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],\n            color: colors.green,\n        },\n        {\n            tag: [t.function(t.variableName), t.labelName],\n            color: colors.blue,\n        },\n        {\n            tag: [t.color, t.constant(t.name), t.standard(t.name)],\n            color: colors.red,\n        },\n        {\n            tag: [t.definition(t.name), ...(language !== 'json' ? [t.separator] : [])],\n            color: colors.red,\n        },\n        {\n            tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],\n            color: colors.orange,\n        },\n        {\n            tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],\n            color: colors.blue,\n        },\n        {\n            tag: [t.meta, t.comment],\n            color: colors.orange,\n        },\n        {\n            tag: t.strong,\n            fontWeight: 'bold',\n        },\n        {\n            tag: t.emphasis,\n            fontStyle: 'italic',\n        },\n        {\n            tag: t.strikethrough,\n            textDecoration: 'line-through',\n        },\n        {\n            tag: t.link,\n            color: colors.orange,\n            textDecoration: 'underline',\n        },\n        {\n            tag: t.heading,\n            fontWeight: 'bold',\n            color: colors.blue,\n        },\n        {\n            tag: [t.atom, t.bool, t.special(t.variableName)],\n            color: colors.red,\n        },\n        {\n            tag: [t.processingInstruction, t.string, t.inserted],\n            color: colors.blue,\n        },\n        {\n            tag: t.invalid,\n            color: colors.invalid,\n        },\n    ]);\n\nexport const lightThemeHighlight = (\n    language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`\n) => syntaxHighlighting(highlightStyle(lightThemeColors, language));\n","/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCodeSnippetVariant {\n    INLINE = 'inline',\n    SINGLELINE = 'singleline',\n    MULTILINE = 'multiline',\n}\n\n// These supported types need to be kept in line with the ones in packages/vue2/src/components/code-snippet/composables/useLanguage.ts function and vice-versa\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCodeSnippetSupportedLanguage {\n    JSON = 'json',\n    XML = 'xml',\n    JAVA = 'java',\n    JAVASCRIPT = 'javascript',\n    PYTHON = 'python',\n}\n\nexport enum BentoCodeSnippetEvent {\n    ACTION = 'action',\n    CHANGE = 'change',\n}\n","import { BentoCodeSnippetSupportedLanguage } from '@/components/code-snippet/code-snippet.types';\nimport { json } from '@codemirror/lang-json';\nimport { xml } from '@codemirror/lang-xml';\nimport { javascript } from '@codemirror/lang-javascript';\nimport { java } from '@codemirror/lang-java';\nimport { python } from '@codemirror/lang-python';\n\n/**\n * TODO: This should be handled with dynamic imports,\n * without relying on importing every single language/package available.\n * These supported types need to be kept in line with the ones in packages/vue2/src/components/code-snippet/code-snippet.types.ts enum\n */\nconst importsMap = {\n    [BentoCodeSnippetSupportedLanguage.JSON]: json,\n    [BentoCodeSnippetSupportedLanguage.XML]: xml,\n    [BentoCodeSnippetSupportedLanguage.JAVASCRIPT]: javascript,\n    [BentoCodeSnippetSupportedLanguage.JAVA]: java,\n    [BentoCodeSnippetSupportedLanguage.PYTHON]: python,\n};\n\n/**\n * Returns a language loder for `CodeMirror`.\n * Supported languages: json, xml, javascript & java\n *\n * @param language Language to be used\n * @returns Language configuration loader to be used in codemirror\n */\nexport const getLangLoader = (language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`) => {\n    const loadLang = async () => importsMap[language];\n\n    return loadLang;\n};\n","import { EditorSelection, type EditorState, type SelectionRange } from '@codemirror/state';\n\n/**\n * Calculate indentation for a new line based on line before it.\n * @param state - The editor state\n * @param line - the selection range, in this case one line\n * @returns the indentation string to be pre-pended on a new line.\n */\nconst getIndentation = (state: EditorState, line: SelectionRange) => {\n    const currentLine = state.doc.lineAt(line.from);\n    const indentMatch = /^\\s*/.exec(currentLine.text);\n    return indentMatch ? indentMatch[0] : '';\n};\n\n/**\n * This extension to codemirror will, upon pressing the 'Enter' key, indent the new line\n * the same as the line before it.\n */\nexport const INDENT_SAME_AS_LINE_BEFORE = {\n    key: 'Enter',\n    run: ({ state, dispatch }) => {\n        const changes = state.changeByRange(range => {\n            const indentation = getIndentation(state, range);\n            const newText = `\\n${indentation}`;\n            return {\n                changes: { from: range.from, to: range.to, insert: newText },\n                range: EditorSelection.cursor(range.from + newText.length),\n            };\n        });\n        dispatch(state.update(changes, { scrollIntoView: true, userEvent: 'input' }));\n        return true;\n    },\n};\n\nexport default INDENT_SAME_AS_LINE_BEFORE;\n","<template>\n    <div class=\"b-code-snippet\" :class=\"conditionalClasses\">\n        <section v-if=\"!isInlineVariant\" class=\"b-code-snippet__action-bar\">\n            <div class=\"b-code-snippet__action-bar--start\">\n                <bento-dropdown\n                    v-if=\"availableLanguages.length > 0\"\n                    v-model=\"selectedLanguage\"\n                    v-bind=\"$props\"\n                    :disabled=\"availableLanguages.length === 1\"\n                    :items=\"availableLanguages\"\n                    class=\"b-code-snippet__language-picker\"\n                    @input=\"handleChangeLanguage\"\n                />\n                <bento-typography el=\"span\" stronger>\n                    {{ displayedLang }}\n                </bento-typography>\n            </div>\n            <div class=\"b-code-snippet__action-bar--end\">\n                <bento-loading-indicator v-if=\"loading\" />\n                <copy v-if=\"currentContents !== null\" class=\"b-structured-list__icon\" :text=\"currentContents\" />\n                <bento-button\n                    v-if=\"expandable\"\n                    variant=\"tertiary\"\n                    condensed\n                    :aria-label=\"t('expand')\"\n                    @click=\"showModal = true\"\n                >\n                    <template #iconLeft>\n                        <expand-icon />\n                    </template>\n                </bento-button>\n                <bento-button v-if=\"actionable\" variant=\"primary\" tertiary condensed @click=\"onActionClicked\">\n                    <template #iconLeft>\n                        <bento-typography el=\"span\" class=\"b-code-snippet__action-button\">\n                            {{ runText }}\n                        </bento-typography>\n                    </template>\n                </bento-button>\n            </div>\n        </section>\n        <code v-if=\"content || editable\" class=\"b-code-snippet__code-area\">\n            <div ref=\"container\" class=\"b-code-snippet__code-area-content\" :class=\"codeAreaContentConditionalClasses\" />\n        </code>\n        <section v-else>\n            <slot name=\"empty-state\">\n                <!-- TODO: switch with empty-state component when ready -->\n                <div class=\"b-code-snippet__empty-state\">{{ t('nothingToDisplay') }}</div>\n            </slot>\n        </section>\n        <base-modal\n            v-if=\"expandable\"\n            class=\"b-code-snippet__modal\"\n            :hide-close-button=\"true\"\n            :custom-padding=\"'0px'\"\n            :is-dismissible=\"true\"\n            :is-open=\"showModal\"\n            size=\"large\"\n            @close-modal=\"showModal = false\"\n        >\n            <template #content>\n                <bento-code-snippet v-bind=\"{ ...$props, expandable: false }\" />\n            </template>\n        </base-modal>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, PropType, ref, shallowRef, watch, watchEffect } from 'vue';\n    import { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view';\n    import { Compartment, EditorState } from '@codemirror/state';\n    import { history, indentWithTab } from '@codemirror/commands';\n    import { lightThemeHighlight } from './highlight';\n    import { getLangLoader, INDENT_SAME_AS_LINE_BEFORE } from './utils';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoTooltipDirective } from '@/directives';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { Copy } from '@/internal';\n    import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\n    import {\n        BentoCodeSnippetEvent,\n        BentoCodeSnippetSupportedLanguage,\n        BentoCodeSnippetVariant,\n    } from '@/components/code-snippet/code-snippet.types';\n    import BaseModal from '@/components/modal/components/base-modal/base-modal.vue';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * A code-snippet is a container to display code in a readable way.\n     * Come with added functionalities like syntax highlighting, editing and actioning the code\n     *\n     * @example\n     * import { BentoCodeSnippet } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCodeSnippet },\n     *     template: `\n     *          <bento-code-snippet :variant=\"BentoCodeSnippetVariant.MULTILINE\" content=\"{ example: 1234 }\" />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-code-snippet',\n        components: {\n            BentoTypography,\n            BentoButton,\n            BentoDropdown,\n            Copy,\n            BaseModal,\n            BentoLoadingIndicator,\n            ExpandIcon,\n        },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Defines the variant of code-snippet\n             */\n            variant: {\n                type: String as PropType<BentoCodeSnippetVariant | `${BentoCodeSnippetVariant}`>,\n                default: BentoCodeSnippetVariant.MULTILINE,\n                validator: (value: BentoCodeSnippetVariant) => Object.values(BentoCodeSnippetVariant).includes(value),\n            },\n            /**\n             * Language name for syntax highlighting rules\n             */\n            lang: {\n                type: String as PropType<BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`>,\n                default: BentoCodeSnippetSupportedLanguage.JSON,\n                validator: (value: BentoCodeSnippetSupportedLanguage) =>\n                    Object.values(BentoCodeSnippetSupportedLanguage).includes(value),\n            },\n            /**\n             * Label to show in the action-bar, describing the language\n             */\n            langLabel: {\n                type: String,\n                default: null,\n            },\n            /**\n             * The code content\n             */\n            content: {\n                type: String,\n                default: '',\n            },\n            /**\n             * Allows editing of the code-snippet content by the user\n             */\n            editable: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays a button that when clicked will emit an action event\n             * Leaves to the parent component the logic of what to do with it\n             */\n            actionable: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays a button that can expand the codeblock into a modal to easily\n             * view large blocks of code.\n             */\n            expandable: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays a button that when clicked will emit a run event\n             * Leaves to the parent component the logic of what to do with it\n             */\n            actionableText: {\n                type: String,\n                default: 'run',\n            },\n            /**\n             * Toggles the loading indicator within the action bar\n             */\n            loading: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: [BentoCodeSnippetEvent.ACTION, BentoCodeSnippetEvent.CHANGE],\n        setup(props, { emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n            // language\n            const selectedLanguage = ref<string | null>(null);\n            const availableLanguages = []; // TODO: implement\n            // eslint-disable-next-line @typescript-eslint/no-empty-function\n            const handleChangeLanguage = () => {};\n            const displayedLang = computed(() => props.langLabel ?? props.lang.toUpperCase());\n\n            const isInlineVariant = computed(() => props.variant === BentoCodeSnippetVariant.INLINE);\n\n            const conditionalClasses = computed(() => ({\n                'b-code-snippet--inline': isInlineVariant.value,\n                'b-code-snippet--scrollable': !isInlineVariant.value,\n            }));\n\n            const codeAreaContentConditionalClasses = computed(() => ({\n                'b-code-snippet__code-area-content--editable': props.editable,\n            }));\n\n            const loadLang = getLangLoader(props.lang);\n\n            const container = shallowRef<HTMLDivElement>();\n            const editor = shallowRef<EditorView>();\n            const languageConf = new Compartment();\n            const editorTheme = new Compartment();\n            const editorReadOnly = new Compartment();\n\n            const currentContents = ref(null);\n            const contentLength = ref(0);\n\n            onMounted(async () => {\n                const language = await loadLang();\n\n                // alongside the updateListener plugin it acts as a watcher of changes to the editor state\n                currentContents.value = props.content;\n                const updateCurrentContents = ({ state }) => {\n                    currentContents.value = state.doc.toString();\n                };\n\n                const extensions = [\n                    highlightActiveLine(),\n                    keymap.of([indentWithTab, INDENT_SAME_AS_LINE_BEFORE]),\n                    languageConf.of(language()),\n                    editorTheme.of(lightThemeHighlight(props.lang)),\n\n                    editorReadOnly.of(EditorState.readOnly.of(!props.editable)),\n                    EditorView.updateListener.of(content => updateCurrentContents(content)),\n                ];\n\n                if (props.variant === 'multiline') {\n                    extensions.push([lineNumbers(), history()]);\n                }\n\n                const state = EditorState.create({\n                    doc: props.content,\n                    extensions: [...extensions],\n                });\n                contentLength.value = state.doc.length;\n\n                editor.value = new EditorView({\n                    state,\n                    parent: container.value,\n                });\n            });\n            watch(\n                () => props.content,\n                () => {\n                    if (props.content !== currentContents.value) {\n                        const upcomingContentLength = props.content.length;\n                        editor.value.dispatch({\n                            changes: {\n                                from: 0,\n                                to: contentLength.value,\n                                insert: props.content,\n                            },\n                        });\n                        contentLength.value = upcomingContentLength;\n                    }\n                }\n            );\n\n            const runText = computed(() => t(props.actionableText as 'run'));\n            const onActionClicked = () => {\n                emit(BentoCodeSnippetEvent.ACTION, currentContents.value);\n            };\n\n            watchEffect(() => {\n                if (currentContents.value !== null) {\n                    emit(BentoCodeSnippetEvent.CHANGE, currentContents.value);\n                }\n            });\n\n            const showModal = ref(false);\n\n            return {\n                // Values\n                availableLanguages,\n                codeAreaContentConditionalClasses,\n                conditionalClasses,\n                container,\n                currentContents,\n                displayedLang,\n                editor,\n                selectedLanguage,\n                showModal,\n                isInlineVariant,\n\n                // Methods\n                handleChangeLanguage,\n                onActionClicked,\n                runText,\n\n                // Translations\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./code-snippet.scss\"></style>\n"],"names":["lightThemeColors","BCodeSnippetCodeAreaHighlightRed","BCodeSnippetCodeAreaHighlightOrange","BCodeSnippetCodeAreaHighlightGreen","BCodeSnippetCodeAreaHighlightBlue","highlightStyle","colors","language","HighlightStyle","tags","lightThemeHighlight","syntaxHighlighting","BentoCodeSnippetVariant","BentoCodeSnippetVariant2","BentoCodeSnippetSupportedLanguage","BentoCodeSnippetSupportedLanguage2","BentoCodeSnippetEvent","BentoCodeSnippetEvent2","importsMap","json","xml","javascript","java","python","getLangLoader","getIndentation","state","line","currentLine","indentMatch","INDENT_SAME_AS_LINE_BEFORE","dispatch","changes","range","newText","EditorSelection","_sfc_main","defineComponent","messages","BentoTypography","BentoButton","BentoDropdown","Copy","BaseModal","BentoLoadingIndicator","ExpandIcon","BentoTooltipDirective","value","props","emit","t","useI18n","selectedLanguage","ref","availableLanguages","handleChangeLanguage","displayedLang","computed","isInlineVariant","conditionalClasses","codeAreaContentConditionalClasses","loadLang","container","shallowRef","editor","languageConf","Compartment","editorTheme","editorReadOnly","currentContents","contentLength","onMounted","updateCurrentContents","state2","extensions","highlightActiveLine","keymap","indentWithTab","EditorState","EditorView","content","lineNumbers","history","watch","upcomingContentLength","runText","onActionClicked","watchEffect","showModal","_hoisted_3","_ctx","createCommentVNode","openBlock","createElementBlock","_hoisted_1","createElementVNode","_hoisted_2","createBlock","_component_bento_dropdown","mergeProps","_cache","$event","createVNode","_component_bento_typography","createTextVNode","toDisplayString","_component_bento_loading_indicator","_component_copy","_component_bento_button","_component_expand_icon","_hoisted_4","renderSlot","expandable","_component_base_modal","_component_bento_code_snippet","normalizeProps","guardReactiveProps"],"mappings":"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"}
+{"version":3,"file":"code-snippet.S5NdUu0p.js","sources":["../../../vue2/src/components/code-snippet/highlight.ts","../../../vue2/src/components/code-snippet/code-snippet.types.ts","../../../vue2/src/components/code-snippet/utils/get-lang-loader.ts","../../../vue2/src/components/code-snippet/utils/indent-same-as-line-before-extension.ts","../../../vue2/src/components/code-snippet/code-snippet.vue"],"sourcesContent":["import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';\nimport { tags as t } from '@lezer/highlight';\nimport {\n    BCodeSnippetCodeAreaHighlightBlue,\n    BCodeSnippetCodeAreaHighlightGreen,\n    BCodeSnippetCodeAreaHighlightOrange,\n    BCodeSnippetCodeAreaHighlightRed,\n} from '@adyen/bento-design-tokens/dist/js/bento/es6';\nimport { BentoCodeSnippetSupportedLanguage } from './code-snippet.types';\n\nconst lightThemeColors = {\n    red: BCodeSnippetCodeAreaHighlightRed,\n    orange: BCodeSnippetCodeAreaHighlightOrange,\n    green: BCodeSnippetCodeAreaHighlightGreen,\n    blue: BCodeSnippetCodeAreaHighlightBlue,\n    invalid: '#ffffff',\n};\n\nconst highlightStyle = (colors, language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`) =>\n    HighlightStyle.define([\n        {\n            tag: t.keyword,\n            color: colors.red,\n        },\n        {\n            tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],\n            color: colors.green,\n        },\n        {\n            tag: [t.function(t.variableName), t.labelName],\n            color: colors.blue,\n        },\n        {\n            tag: [t.color, t.constant(t.name), t.standard(t.name)],\n            color: colors.red,\n        },\n        {\n            tag: [t.definition(t.name), ...(language !== 'json' ? [t.separator] : [])],\n            color: colors.red,\n        },\n        {\n            tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],\n            color: colors.orange,\n        },\n        {\n            tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],\n            color: colors.blue,\n        },\n        {\n            tag: [t.meta, t.comment],\n            color: colors.orange,\n        },\n        {\n            tag: t.strong,\n            fontWeight: 'bold',\n        },\n        {\n            tag: t.emphasis,\n            fontStyle: 'italic',\n        },\n        {\n            tag: t.strikethrough,\n            textDecoration: 'line-through',\n        },\n        {\n            tag: t.link,\n            color: colors.orange,\n            textDecoration: 'underline',\n        },\n        {\n            tag: t.heading,\n            fontWeight: 'bold',\n            color: colors.blue,\n        },\n        {\n            tag: [t.atom, t.bool, t.special(t.variableName)],\n            color: colors.red,\n        },\n        {\n            tag: [t.processingInstruction, t.string, t.inserted],\n            color: colors.blue,\n        },\n        {\n            tag: t.invalid,\n            color: colors.invalid,\n        },\n    ]);\n\nexport const lightThemeHighlight = (\n    language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`\n) => syntaxHighlighting(highlightStyle(lightThemeColors, language));\n","/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCodeSnippetVariant {\n    INLINE = 'inline',\n    SINGLELINE = 'singleline',\n    MULTILINE = 'multiline',\n}\n\n// These supported types need to be kept in line with the ones in packages/vue2/src/components/code-snippet/composables/useLanguage.ts function and vice-versa\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoCodeSnippetSupportedLanguage {\n    JSON = 'json',\n    XML = 'xml',\n    JAVA = 'java',\n    JAVASCRIPT = 'javascript',\n    PYTHON = 'python',\n}\n\nexport enum BentoCodeSnippetEvent {\n    ACTION = 'action',\n    CHANGE = 'change',\n}\n","import { BentoCodeSnippetSupportedLanguage } from '@/components/code-snippet/code-snippet.types';\nimport { json } from '@codemirror/lang-json';\nimport { xml } from '@codemirror/lang-xml';\nimport { javascript } from '@codemirror/lang-javascript';\nimport { java } from '@codemirror/lang-java';\nimport { python } from '@codemirror/lang-python';\n\n/**\n * TODO: This should be handled with dynamic imports,\n * without relying on importing every single language/package available.\n * These supported types need to be kept in line with the ones in packages/vue2/src/components/code-snippet/code-snippet.types.ts enum\n */\nconst importsMap = {\n    [BentoCodeSnippetSupportedLanguage.JSON]: json,\n    [BentoCodeSnippetSupportedLanguage.XML]: xml,\n    [BentoCodeSnippetSupportedLanguage.JAVASCRIPT]: javascript,\n    [BentoCodeSnippetSupportedLanguage.JAVA]: java,\n    [BentoCodeSnippetSupportedLanguage.PYTHON]: python,\n};\n\n/**\n * Returns a language loder for `CodeMirror`.\n * Supported languages: json, xml, javascript & java\n *\n * @param language Language to be used\n * @returns Language configuration loader to be used in codemirror\n */\nexport const getLangLoader = (language: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`) => {\n    const loadLang = async () => importsMap[language];\n\n    return loadLang;\n};\n","import { EditorSelection, type EditorState, type SelectionRange } from '@codemirror/state';\n\n/**\n * Calculate indentation for a new line based on line before it.\n * @param state - The editor state\n * @param line - the selection range, in this case one line\n * @returns the indentation string to be pre-pended on a new line.\n */\nconst getIndentation = (state: EditorState, line: SelectionRange) => {\n    const currentLine = state.doc.lineAt(line.from);\n    const indentMatch = /^\\s*/.exec(currentLine.text);\n    return indentMatch ? indentMatch[0] : '';\n};\n\n/**\n * This extension to codemirror will, upon pressing the 'Enter' key, indent the new line\n * the same as the line before it.\n */\nexport const INDENT_SAME_AS_LINE_BEFORE = {\n    key: 'Enter',\n    run: ({ state, dispatch }) => {\n        const changes = state.changeByRange(range => {\n            const indentation = getIndentation(state, range);\n            const newText = `\\n${indentation}`;\n            return {\n                changes: { from: range.from, to: range.to, insert: newText },\n                range: EditorSelection.cursor(range.from + newText.length),\n            };\n        });\n        dispatch(state.update(changes, { scrollIntoView: true, userEvent: 'input' }));\n        return true;\n    },\n};\n\nexport default INDENT_SAME_AS_LINE_BEFORE;\n","<template>\n    <div class=\"b-code-snippet\" :class=\"conditionalClasses\">\n        <section v-if=\"!isInlineVariant\" class=\"b-code-snippet__action-bar\">\n            <div class=\"b-code-snippet__action-bar--start\">\n                <bento-dropdown\n                    v-if=\"availableLanguages.length > 0\"\n                    v-model=\"selectedLanguage\"\n                    v-bind=\"$props\"\n                    :disabled=\"availableLanguages.length === 1\"\n                    :items=\"availableLanguages\"\n                    class=\"b-code-snippet__language-picker\"\n                    @input=\"handleChangeLanguage\"\n                />\n                <bento-typography el=\"span\" stronger>\n                    {{ displayedLang }}\n                </bento-typography>\n            </div>\n            <div class=\"b-code-snippet__action-bar--end\">\n                <bento-loading-indicator v-if=\"loading\" />\n                <copy v-if=\"currentContents !== null\" class=\"b-structured-list__icon\" :text=\"currentContents\" />\n                <bento-button\n                    v-if=\"expandable\"\n                    variant=\"tertiary\"\n                    condensed\n                    :aria-label=\"t('expand')\"\n                    @click=\"showModal = true\"\n                >\n                    <template #iconLeft>\n                        <expand-icon />\n                    </template>\n                </bento-button>\n                <bento-button v-if=\"actionable\" variant=\"primary\" tertiary condensed @click=\"onActionClicked\">\n                    <template #iconLeft>\n                        <bento-typography el=\"span\" class=\"b-code-snippet__action-button\">\n                            {{ runText }}\n                        </bento-typography>\n                    </template>\n                </bento-button>\n            </div>\n        </section>\n        <code v-if=\"content || editable\" class=\"b-code-snippet__code-area\">\n            <div ref=\"container\" class=\"b-code-snippet__code-area-content\" :class=\"codeAreaContentConditionalClasses\" />\n        </code>\n        <section v-else>\n            <slot name=\"empty-state\">\n                <!-- TODO: switch with empty-state component when ready -->\n                <div class=\"b-code-snippet__empty-state\">{{ t('nothingToDisplay') }}</div>\n            </slot>\n        </section>\n        <base-modal\n            v-if=\"expandable\"\n            class=\"b-code-snippet__modal\"\n            :hide-close-button=\"true\"\n            :custom-padding=\"'0px'\"\n            :is-dismissible=\"true\"\n            :is-open=\"showModal\"\n            size=\"large\"\n            @close-modal=\"showModal = false\"\n        >\n            <template #content>\n                <bento-code-snippet v-bind=\"{ ...$props, expandable: false }\" />\n            </template>\n        </base-modal>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, onMounted, PropType, ref, shallowRef, watch, watchEffect } from 'vue';\n    import { EditorView, highlightActiveLine, keymap, lineNumbers } from '@codemirror/view';\n    import { Compartment, EditorState } from '@codemirror/state';\n    import { history, indentWithTab } from '@codemirror/commands';\n    import { lightThemeHighlight } from './highlight';\n    import { getLangLoader, INDENT_SAME_AS_LINE_BEFORE } from './utils';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { BentoButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoTooltipDirective } from '@/directives';\n    import { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { Copy } from '@/internal';\n    import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\n    import {\n        BentoCodeSnippetEvent,\n        BentoCodeSnippetSupportedLanguage,\n        BentoCodeSnippetVariant,\n    } from '@/components/code-snippet/code-snippet.types';\n    import BaseModal from '@/components/modal/components/base-modal/base-modal.vue';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * A code-snippet is a container to display code in a readable way.\n     * Come with added functionalities like syntax highlighting, editing and actioning the code\n     *\n     * @example\n     * import { BentoCodeSnippet } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoCodeSnippet },\n     *     template: `\n     *          <bento-code-snippet :variant=\"BentoCodeSnippetVariant.MULTILINE\" content=\"{ example: 1234 }\" />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'bento-code-snippet',\n        components: {\n            BentoTypography,\n            BentoButton,\n            BentoDropdown,\n            Copy,\n            BaseModal,\n            BentoLoadingIndicator,\n            ExpandIcon,\n        },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Defines the variant of code-snippet\n             */\n            variant: {\n                type: String as PropType<BentoCodeSnippetVariant | `${BentoCodeSnippetVariant}`>,\n                default: BentoCodeSnippetVariant.MULTILINE,\n                validator: (value: BentoCodeSnippetVariant) => Object.values(BentoCodeSnippetVariant).includes(value),\n            },\n            /**\n             * Language name for syntax highlighting rules\n             */\n            lang: {\n                type: String as PropType<BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`>,\n                default: BentoCodeSnippetSupportedLanguage.JSON,\n                validator: (value: BentoCodeSnippetSupportedLanguage) =>\n                    Object.values(BentoCodeSnippetSupportedLanguage).includes(value),\n            },\n            /**\n             * Label to show in the action-bar, describing the language\n             */\n            langLabel: {\n                type: String,\n                default: null,\n            },\n            /**\n             * The code content\n             */\n            content: {\n                type: String,\n                default: '',\n            },\n            /**\n             * Allows editing of the code-snippet content by the user\n             */\n            editable: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays a button that when clicked will emit an action event\n             * Leaves to the parent component the logic of what to do with it\n             */\n            actionable: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays a button that can expand the codeblock into a modal to easily\n             * view large blocks of code.\n             */\n            expandable: {\n                type: Boolean,\n                default: false,\n            },\n            /**\n             * Displays a button that when clicked will emit a run event\n             * Leaves to the parent component the logic of what to do with it\n             */\n            actionableText: {\n                type: String,\n                default: 'run',\n            },\n            /**\n             * Toggles the loading indicator within the action bar\n             */\n            loading: {\n                type: Boolean,\n                default: false,\n            },\n        },\n        emits: [BentoCodeSnippetEvent.ACTION, BentoCodeSnippetEvent.CHANGE],\n        setup(props, { emit }) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n            // language\n            const selectedLanguage = ref<string | null>(null);\n            const availableLanguages = []; // TODO: implement\n            // eslint-disable-next-line @typescript-eslint/no-empty-function\n            const handleChangeLanguage = () => {};\n            const displayedLang = computed(() => props.langLabel ?? props.lang.toUpperCase());\n\n            const isInlineVariant = computed(() => props.variant === BentoCodeSnippetVariant.INLINE);\n\n            const conditionalClasses = computed(() => ({\n                'b-code-snippet--inline': isInlineVariant.value,\n                'b-code-snippet--scrollable': !isInlineVariant.value,\n            }));\n\n            const codeAreaContentConditionalClasses = computed(() => ({\n                'b-code-snippet__code-area-content--editable': props.editable,\n            }));\n\n            const loadLang = getLangLoader(props.lang);\n\n            const container = shallowRef<HTMLDivElement>();\n            const editor = shallowRef<EditorView>();\n            const languageConf = new Compartment();\n            const editorTheme = new Compartment();\n            const editorReadOnly = new Compartment();\n\n            const currentContents = ref(null);\n            const contentLength = ref(0);\n\n            onMounted(async () => {\n                const language = await loadLang();\n\n                // alongside the updateListener plugin it acts as a watcher of changes to the editor state\n                currentContents.value = props.content;\n                const updateCurrentContents = ({ state }) => {\n                    currentContents.value = state.doc.toString();\n                };\n\n                const extensions = [\n                    highlightActiveLine(),\n                    keymap.of([indentWithTab, INDENT_SAME_AS_LINE_BEFORE]),\n                    languageConf.of(language()),\n                    editorTheme.of(lightThemeHighlight(props.lang)),\n\n                    editorReadOnly.of(EditorState.readOnly.of(!props.editable)),\n                    EditorView.updateListener.of(content => updateCurrentContents(content)),\n                ];\n\n                if (props.variant === 'multiline') {\n                    extensions.push([lineNumbers(), history()]);\n                }\n\n                const state = EditorState.create({\n                    doc: props.content,\n                    extensions: [...extensions],\n                });\n                contentLength.value = state.doc.length;\n\n                editor.value = new EditorView({\n                    state,\n                    parent: container.value,\n                });\n            });\n            watch(\n                () => props.content,\n                () => {\n                    if (props.content !== currentContents.value) {\n                        const upcomingContentLength = props.content.length;\n                        editor.value.dispatch({\n                            changes: {\n                                from: 0,\n                                to: contentLength.value,\n                                insert: props.content,\n                            },\n                        });\n                        contentLength.value = upcomingContentLength;\n                    }\n                }\n            );\n\n            const runText = computed(() => t(props.actionableText as 'run'));\n            const onActionClicked = () => {\n                emit(BentoCodeSnippetEvent.ACTION, currentContents.value);\n            };\n\n            watchEffect(() => {\n                if (currentContents.value !== null) {\n                    emit(BentoCodeSnippetEvent.CHANGE, currentContents.value);\n                }\n            });\n\n            const showModal = ref(false);\n\n            return {\n                // Values\n                availableLanguages,\n                codeAreaContentConditionalClasses,\n                conditionalClasses,\n                container,\n                currentContents,\n                displayedLang,\n                editor,\n                selectedLanguage,\n                showModal,\n                isInlineVariant,\n\n                // Methods\n                handleChangeLanguage,\n                onActionClicked,\n                runText,\n\n                // Translations\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./code-snippet.scss\"></style>\n"],"names":["lightThemeColors","BCodeSnippetCodeAreaHighlightRed","BCodeSnippetCodeAreaHighlightOrange","BCodeSnippetCodeAreaHighlightGreen","BCodeSnippetCodeAreaHighlightBlue","highlightStyle","colors","language","HighlightStyle","tags","lightThemeHighlight","syntaxHighlighting","BentoCodeSnippetVariant","BentoCodeSnippetVariant2","BentoCodeSnippetSupportedLanguage","BentoCodeSnippetSupportedLanguage2","BentoCodeSnippetEvent","BentoCodeSnippetEvent2","importsMap","json","xml","javascript","java","python","getLangLoader","getIndentation","state","line","currentLine","indentMatch","INDENT_SAME_AS_LINE_BEFORE","dispatch","changes","range","newText","EditorSelection","_sfc_main","defineComponent","messages","BentoTypography","BentoButton","BentoDropdown","Copy","BaseModal","BentoLoadingIndicator","ExpandIcon","BentoTooltipDirective","value","props","emit","t","useI18n","selectedLanguage","ref","availableLanguages","handleChangeLanguage","displayedLang","computed","isInlineVariant","conditionalClasses","codeAreaContentConditionalClasses","loadLang","container","shallowRef","editor","languageConf","Compartment","editorTheme","editorReadOnly","currentContents","contentLength","onMounted","updateCurrentContents","state2","extensions","highlightActiveLine","keymap","indentWithTab","EditorState","EditorView","content","lineNumbers","history","watch","upcomingContentLength","runText","onActionClicked","watchEffect","showModal","_hoisted_3","_ctx","createCommentVNode","openBlock","createElementBlock","_hoisted_1","createElementVNode","_hoisted_2","createBlock","_component_bento_dropdown","mergeProps","_cache","$event","createVNode","_component_bento_typography","createTextVNode","toDisplayString","_component_bento_loading_indicator","_component_copy","_component_bento_button","_component_expand_icon","_hoisted_4","renderSlot","expandable","_component_base_modal","_component_bento_code_snippet","normalizeProps","guardReactiveProps"],"mappings":"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"}

package/dist/chunks/{dashboard-section.BCc8HoQG.js → dashboard-section.LWxBcOV_.js}

@@ -1,7 +1,7 @@
 import { defineComponent as F, useSlots as R, ref as _, computed as d, watch as g, onUnmounted as O, openBlock as a, createElementBlock as i, createVNode as B, unref as s, mergeProps as H, createSlots as P, withCtx as h, renderSlot as l, createElementVNode as p, normalizeClass as f, createCommentVNode as W, createBlock as I, Fragment as U, renderList as q, onMounted as A } from "vue";
-import { B as E } from "./header.C0NBlBJv.js";
+import { B as E } from "./header.8BzBNgxj.js";
 import { a as G, B as J } from "./tabs.B3DGxpmI.js";
-import { b as K } from "./index.Cwtxz7pr.js";
+import { b as K } from "./index.lHdwuJAx.js";
 import { o as Q } from "./resize.Bqks3WUm.js";
 import { u as N } from "./use-has-slot.B7eQSabc.js";
 import { _ as V } from "./_plugin-vue_export-helper.CHgC5LLL.js";
@@ -164,4 +164,4 @@ export {
   mt as a,
   vt as d
 };
-//# sourceMappingURL=dashboard-section.BCc8HoQG.js.map
+//# sourceMappingURL=dashboard-section.LWxBcOV_.js.map

package/dist/chunks/{dashboard-section.BCc8HoQG.js.map → dashboard-section.LWxBcOV_.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dashboard-section.BCc8HoQG.js","sources":["../../../vue2/src/templates/dashboard-template/dashboard-template.vue","../../../vue2/src/templates/dashboard-template/components/dashboard-section/dashboard-section.vue"],"sourcesContent":["<template>\n    <main class=\"b-dashboard-template\">\n        <bento-header v-bind=\"header\" variant=\"page\" class=\"b-dashboard-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div class=\"b-dashboard-template__top-section\" :class=\"dashboardTopSectionConditionalClasses\">\n            <div\n                v-if=\"hasSlot('filters')\"\n                ref=\"filtersRef\"\n                class=\"b-dashboard-template__filters\"\n                :class=\"dashboardFiltersConditionalClasses\"\n                data-testid=\"filters\"\n            >\n                <slot name=\"filters\" />\n            </div>\n\n            <bento-tabs\n                v-if=\"tabsSlots.length > 1\"\n                ref=\"tabsRef\"\n                :active-tab-index=\"tabs.activeTabIndex\"\n                class=\"b-dashboard-template__tabs\"\n                :class=\"dashboardTabsConditionalClasses\"\n                data-testid=\"tabs\"\n            >\n                <bento-tab v-for=\"(_item, index) in tabsSlots\" :key=\"`tab-${index}`\" :title=\"getTabTitle(index)\">\n                    <div class=\"b-dashboard-template__container b-dashboard-template__container--tabs\">\n                        <slot :name=\"`tab-${index + 1}`\" />\n                    </div>\n                </bento-tab>\n            </bento-tabs>\n            <div v-else class=\"b-dashboard-template__container\">\n                <slot />\n            </div>\n        </div>\n    </main>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onUnmounted, ref, useSlots, watch } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoTab, BentoTabs } from '@/components/tabs';\n    import { useWindowScroll } from '@vueuse/core';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useHasSlot } from '@/composables';\n    import type { BentoDashboardTemplateHeader, BentoDashboardTemplateTabs } from './dashboard-template.types';\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * The header that goes to the top of the template\n             */\n            header: BentoDashboardTemplateHeader;\n\n            /**\n             * All the tab properties that can be set on the inner tab components.\n             *  - tabs.activeTabIndex: the currently active tab index.\n             *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.\n             */\n            tabs?: BentoDashboardTemplateTabs;\n\n            /**\n             * Renders the tabs with a sticky positioning\n             */\n            stickyTabs?: boolean;\n\n            /**\n             * Renders the tabs with a sticky positioning\n             */\n            stickyFilters?: boolean;\n        }>(),\n        {\n            tabs: undefined,\n            stickyTabs: false,\n            stickyFilters: false,\n        }\n    );\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const tabsRef = ref<InstanceType<typeof BentoTabs>>();\n    const filtersRef = ref<HTMLDivElement>(null);\n    const isFiltersPinned = ref(false);\n    let filtersElementObserver: ResizeObserver | null = null;\n    const isTabsPinned = ref(false);\n    const tabsPosition = ref(0);\n\n    const hasStickyFilters = computed(() => filtersRef.value && props.stickyFilters);\n    const hasStickyTabs = computed(() => tabsRef.value && props.stickyTabs);\n\n    const dashboardFiltersConditionalClasses = computed(() => ({\n        'b-dashboard-template__filters--sticky': props.stickyFilters,\n        'b-dashboard-template__filters--show-border':\n            hasStickyFilters.value && !hasStickyTabs.value && isFiltersPinned.value,\n    }));\n\n    const dashboardTabsConditionalClasses = computed(() => ({\n        'b-dashboard-template__tabs--sticky': props.stickyTabs,\n        'b-dashboard-template__tabs--show-border': props.stickyTabs && isTabsPinned.value,\n    }));\n\n    const dashboardTopSectionConditionalClasses = computed(() => ({\n        'b-dashboard-template__top-section--sticky': props.stickyTabs || props.stickyFilters,\n    }));\n\n    const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-')));\n\n    const getTabTitle = (index: number) => props?.tabs.tabs?.[index]?.title ?? `Tab ${index + 1}`;\n\n    const { y } = useWindowScroll();\n\n    watch(\n        () => filtersRef.value,\n        () => {\n            if (!filtersElementObserver && filtersRef.value) {\n                filtersElementObserver = observeSizeOfElement(filtersRef.value, () => {\n                    if (filtersRef.value && hasStickyTabs.value) {\n                        const filtersHeight = filtersRef.value.offsetHeight;\n                        tabsPosition.value = hasStickyFilters.value ? filtersHeight : 0;\n                        (tabsRef.value.tablistwrapper.$el as HTMLDivElement).style.top = `${tabsPosition.value}px`;\n                    }\n                });\n            }\n        }\n    );\n\n    watch(\n        () => y.value,\n        () => {\n            if (hasStickyFilters.value) {\n                isFiltersPinned.value = filtersRef.value?.getBoundingClientRect().top === 0;\n            }\n            if (hasStickyTabs.value) {\n                isTabsPinned.value =\n                    (tabsRef.value.tablistwrapper.$el as HTMLDivElement)?.getBoundingClientRect().top ===\n                    tabsPosition.value;\n            }\n        }\n    );\n\n    onUnmounted(() => {\n        filtersElementObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dashboard template is a full page template used to visualize data on pages such as data dashboards and reports.\n     *\n     * @example\n     * import { BentoDashboardTemplate, BentoDashboardSection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashboardTemplate, BentoDashboardSection },\n     *     template: `\n     *          <bento-dashboard-template :header=\"{ title: 'Dashboard'}\" :tabs=\"tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }]\" sticky-tabs sticky-filters>\n     *              <template #tab-1>\n     *                  <bento-dashboard-section :header=\"{ title: 'Section'}\">\n     *                      <template #controls>\n     *                          // Add your controls here\n     *                      </template>\n     *                      // Add your content here\n     *                  </bento-dashboard-section>\n     *              </template>\n     *              <template #tab-2>\n     *                  <bento-dashboard-section :header=\"{ title: 'Section'}\">\n     *                      // Add your content here\n     *                  </bento-dashboard-section>\n     *              </template>\n     *          </bento-dashboard-template>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashboard-template.scss\" />\n","<template>\n    <div class=\"b-dashboard-section\" :class=\"conditionalClasses\">\n        <bento-header v-bind=\"header\" variant=\"component\" class=\"b-dashboard-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div v-if=\"hasSlot('controls')\" class=\"b-dashboard-section__controls\">\n            <slot name=\"controls\"></slot>\n        </div>\n        <div v-if=\"!hasSlot('content-col-1') && !hasSlot('content-col-2')\" class=\"b-dashboard-section__content\">\n            <slot name=\"default\"></slot>\n        </div>\n        <div v-else class=\"b-dashboard-section__columns\">\n            <div class=\"b-dashboard-section__content\"><slot name=\"content-col-1\"></slot></div>\n            <div class=\"b-dashboard-section__content\"><slot name=\"content-col-2\"></slot></div>\n        </div>\n        <bento-divider class=\"b-dashboard-section__divider\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoDivider } from '@/components/divider';\n    import { useHasSlot } from '@/composables';\n    import type { BentoDashboardTemplateHeader } from '../../dashboard-template.types';\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * The header of the section\n             */\n            header: BentoDashboardTemplateHeader;\n\n            /**\n             * Renders the section to take only half of the page\n             */\n            halfWidth?: boolean;\n        }>(),\n        {\n            halfWidth: false,\n        }\n    );\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const conditionalClasses = computed(() => ({\n        'b-dashboard-section--half-width': props.halfWidth,\n    }));\n\n    onMounted(() => {\n        if ((hasSlot('content-col-1') || hasSlot('content-col-2')) && props.halfWidth) {\n            throw new Error('`content-col-1` and `content-col-2` cannot be used with half-width prop');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dashboard section is subcomponent of Dashboard template meant to be used to create the different sections within the page.\n     *\n     * @example\n     * import { BentoDashboardSection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashboardSection },\n     *     template: `\n     *          <bento-dashboard-section :header=\"{ title: 'Section' }\" half-width>\n     *              <template #controls>\n     *                  // Add your controls here\n     *              </template>\n     *              // You can render content with two cols\n     *              <template #content-col-1>\n     *                  // Add your content here\n     *              </template>\n     *              <template #content-col-2>\n     *                  // Add your content here\n     *              </template>\n     *              // Or you can render full width content by using default slot\n     *              // Add your content here\n     *          </bento-dashboard-section>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashboard-section.scss\" />\n"],"names":["__default__$1","props","__props","slots","useSlots","hasSlot","useHasSlot","tabsRef","ref","filtersRef","isFiltersPinned","filtersElementObserver","isTabsPinned","tabsPosition","hasStickyFilters","computed","hasStickyTabs","dashboardFiltersConditionalClasses","dashboardTabsConditionalClasses","dashboardTopSectionConditionalClasses","tabsSlots","el","getTabTitle","index","_b","_a","y","useWindowScroll","watch","observeSizeOfElement","filtersHeight","onUnmounted","__default__","conditionalClasses","onMounted"],"mappings":";;;;;;;;;;;;GA+KIA,KAAA,CAAA;;;;;;;;;;AA/HA,UAAAC,IAAAC,GA+BAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,EAAA;AACA,QAAAG,IAAA;AACA,UAAAC,IAAAJ,EAAA,EAAA,GACAK,IAAAL,EAAA,CAAA,GAEAM,IAAAC,EAAA,MAAAN,EAAA,SAAAR,EAAA,aAAA,GACAe,IAAAD,EAAA,MAAAR,EAAA,SAAAN,EAAA,UAAA,GAEAgB,IAAAF,EAAA,OAAA;AAAA,MAA2D,yCAAAd,EAAA;AAAA,MACR,8CAAAa,EAAA,SAAA,CAAAE,EAAA,SAAAN,EAAA;AAAA,IAEuB,EAAA,GAG1EQ,IAAAH,EAAA,OAAA;AAAA,MAAwD,sCAAAd,EAAA;AAAA,MACR,2CAAAA,EAAA,cAAAW,EAAA;AAAA,IACgC,EAAA,GAGhFO,IAAAJ,EAAA,OAAA;AAAA,MAA8D,6CAAAd,EAAA,cAAAA,EAAA;AAAA,IACa,EAAA,GAG3EmB,IAAAL,EAAA,MAAA,OAAA,KAAAZ,CAAA,EAAA,OAAA,CAAAkB,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;;AAAA,eAAAC,KAAAC,IAAAxB,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAwB,EAAAF,OAAA,gBAAAC,EAAA,UAAA,OAAAD,IAAA,CAAA;AAAA,OAEA,EAAA,GAAAG,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAAnB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAkB,EAAApB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAO,EAAA,OAAA;AACI,kBAAAc,IAAArB,EAAA,MAAA;AACA,YAAAI,EAAA,QAAAC,EAAA,QAAAgB,IAAA,GACAvB,EAAA,MAAA,eAAA,IAAA,MAAA,MAAA,GAAAM,EAAA,KAAA;AAAA,UAAsF;AAAA,QAC1F,CAAA;AAAA,MAER;AAAA,IACJ,GAGJe;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;;AAEJ,QAAAZ,EAAA,UACIJ,EAAA,UAAAe,IAAAhB,EAAA,UAAA,gBAAAgB,EAAA,wBAAA,SAAA,IAEJT,EAAA,UACIJ,EAAA,UAAAY,IAAAjB,EAAA,MAAA,eAAA,QAAA,gBAAAiB,EAAA,wBAAA,SAAAX,EAAA;AAAA,MAGJ;AAAA,IACJ,GAGJkB,EAAA,MAAA;AACI,MAAApB,KAAA,QAAAA,EAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mGCzDvCqB,KAAA,CAAA;;;;;;;;AA1DA,UAAA/B,IAAAC,GAiBAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA8B,IAAAlB,EAAA,OAAA;AAAA,MAA2C,mCAAAd,EAAA;AAAA,IACE,EAAA;AAG7C,WAAAiC,EAAA,MAAA;AACI,WAAA7B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAJ,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dashboard-section.LWxBcOV_.js","sources":["../../../vue2/src/templates/dashboard-template/dashboard-template.vue","../../../vue2/src/templates/dashboard-template/components/dashboard-section/dashboard-section.vue"],"sourcesContent":["<template>\n    <main class=\"b-dashboard-template\">\n        <bento-header v-bind=\"header\" variant=\"page\" class=\"b-dashboard-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div class=\"b-dashboard-template__top-section\" :class=\"dashboardTopSectionConditionalClasses\">\n            <div\n                v-if=\"hasSlot('filters')\"\n                ref=\"filtersRef\"\n                class=\"b-dashboard-template__filters\"\n                :class=\"dashboardFiltersConditionalClasses\"\n                data-testid=\"filters\"\n            >\n                <slot name=\"filters\" />\n            </div>\n\n            <bento-tabs\n                v-if=\"tabsSlots.length > 1\"\n                ref=\"tabsRef\"\n                :active-tab-index=\"tabs.activeTabIndex\"\n                class=\"b-dashboard-template__tabs\"\n                :class=\"dashboardTabsConditionalClasses\"\n                data-testid=\"tabs\"\n            >\n                <bento-tab v-for=\"(_item, index) in tabsSlots\" :key=\"`tab-${index}`\" :title=\"getTabTitle(index)\">\n                    <div class=\"b-dashboard-template__container b-dashboard-template__container--tabs\">\n                        <slot :name=\"`tab-${index + 1}`\" />\n                    </div>\n                </bento-tab>\n            </bento-tabs>\n            <div v-else class=\"b-dashboard-template__container\">\n                <slot />\n            </div>\n        </div>\n    </main>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onUnmounted, ref, useSlots, watch } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoTab, BentoTabs } from '@/components/tabs';\n    import { useWindowScroll } from '@vueuse/core';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useHasSlot } from '@/composables';\n    import type { BentoDashboardTemplateHeader, BentoDashboardTemplateTabs } from './dashboard-template.types';\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * The header that goes to the top of the template\n             */\n            header: BentoDashboardTemplateHeader;\n\n            /**\n             * All the tab properties that can be set on the inner tab components.\n             *  - tabs.activeTabIndex: the currently active tab index.\n             *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.\n             */\n            tabs?: BentoDashboardTemplateTabs;\n\n            /**\n             * Renders the tabs with a sticky positioning\n             */\n            stickyTabs?: boolean;\n\n            /**\n             * Renders the tabs with a sticky positioning\n             */\n            stickyFilters?: boolean;\n        }>(),\n        {\n            tabs: undefined,\n            stickyTabs: false,\n            stickyFilters: false,\n        }\n    );\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const tabsRef = ref<InstanceType<typeof BentoTabs>>();\n    const filtersRef = ref<HTMLDivElement>(null);\n    const isFiltersPinned = ref(false);\n    let filtersElementObserver: ResizeObserver | null = null;\n    const isTabsPinned = ref(false);\n    const tabsPosition = ref(0);\n\n    const hasStickyFilters = computed(() => filtersRef.value && props.stickyFilters);\n    const hasStickyTabs = computed(() => tabsRef.value && props.stickyTabs);\n\n    const dashboardFiltersConditionalClasses = computed(() => ({\n        'b-dashboard-template__filters--sticky': props.stickyFilters,\n        'b-dashboard-template__filters--show-border':\n            hasStickyFilters.value && !hasStickyTabs.value && isFiltersPinned.value,\n    }));\n\n    const dashboardTabsConditionalClasses = computed(() => ({\n        'b-dashboard-template__tabs--sticky': props.stickyTabs,\n        'b-dashboard-template__tabs--show-border': props.stickyTabs && isTabsPinned.value,\n    }));\n\n    const dashboardTopSectionConditionalClasses = computed(() => ({\n        'b-dashboard-template__top-section--sticky': props.stickyTabs || props.stickyFilters,\n    }));\n\n    const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-')));\n\n    const getTabTitle = (index: number) => props?.tabs.tabs?.[index]?.title ?? `Tab ${index + 1}`;\n\n    const { y } = useWindowScroll();\n\n    watch(\n        () => filtersRef.value,\n        () => {\n            if (!filtersElementObserver && filtersRef.value) {\n                filtersElementObserver = observeSizeOfElement(filtersRef.value, () => {\n                    if (filtersRef.value && hasStickyTabs.value) {\n                        const filtersHeight = filtersRef.value.offsetHeight;\n                        tabsPosition.value = hasStickyFilters.value ? filtersHeight : 0;\n                        (tabsRef.value.tablistwrapper.$el as HTMLDivElement).style.top = `${tabsPosition.value}px`;\n                    }\n                });\n            }\n        }\n    );\n\n    watch(\n        () => y.value,\n        () => {\n            if (hasStickyFilters.value) {\n                isFiltersPinned.value = filtersRef.value?.getBoundingClientRect().top === 0;\n            }\n            if (hasStickyTabs.value) {\n                isTabsPinned.value =\n                    (tabsRef.value.tablistwrapper.$el as HTMLDivElement)?.getBoundingClientRect().top ===\n                    tabsPosition.value;\n            }\n        }\n    );\n\n    onUnmounted(() => {\n        filtersElementObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dashboard template is a full page template used to visualize data on pages such as data dashboards and reports.\n     *\n     * @example\n     * import { BentoDashboardTemplate, BentoDashboardSection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashboardTemplate, BentoDashboardSection },\n     *     template: `\n     *          <bento-dashboard-template :header=\"{ title: 'Dashboard'}\" :tabs=\"tabs: [{ title: 'Tab 1' }, { title: 'Tab 2' }]\" sticky-tabs sticky-filters>\n     *              <template #tab-1>\n     *                  <bento-dashboard-section :header=\"{ title: 'Section'}\">\n     *                      <template #controls>\n     *                          // Add your controls here\n     *                      </template>\n     *                      // Add your content here\n     *                  </bento-dashboard-section>\n     *              </template>\n     *              <template #tab-2>\n     *                  <bento-dashboard-section :header=\"{ title: 'Section'}\">\n     *                      // Add your content here\n     *                  </bento-dashboard-section>\n     *              </template>\n     *          </bento-dashboard-template>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashboard-template.scss\" />\n","<template>\n    <div class=\"b-dashboard-section\" :class=\"conditionalClasses\">\n        <bento-header v-bind=\"header\" variant=\"component\" class=\"b-dashboard-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div v-if=\"hasSlot('controls')\" class=\"b-dashboard-section__controls\">\n            <slot name=\"controls\"></slot>\n        </div>\n        <div v-if=\"!hasSlot('content-col-1') && !hasSlot('content-col-2')\" class=\"b-dashboard-section__content\">\n            <slot name=\"default\"></slot>\n        </div>\n        <div v-else class=\"b-dashboard-section__columns\">\n            <div class=\"b-dashboard-section__content\"><slot name=\"content-col-1\"></slot></div>\n            <div class=\"b-dashboard-section__content\"><slot name=\"content-col-2\"></slot></div>\n        </div>\n        <bento-divider class=\"b-dashboard-section__divider\" />\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, onMounted, useSlots } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoDivider } from '@/components/divider';\n    import { useHasSlot } from '@/composables';\n    import type { BentoDashboardTemplateHeader } from '../../dashboard-template.types';\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * The header of the section\n             */\n            header: BentoDashboardTemplateHeader;\n\n            /**\n             * Renders the section to take only half of the page\n             */\n            halfWidth?: boolean;\n        }>(),\n        {\n            halfWidth: false,\n        }\n    );\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const conditionalClasses = computed(() => ({\n        'b-dashboard-section--half-width': props.halfWidth,\n    }));\n\n    onMounted(() => {\n        if ((hasSlot('content-col-1') || hasSlot('content-col-2')) && props.halfWidth) {\n            throw new Error('`content-col-1` and `content-col-2` cannot be used with half-width prop');\n        }\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Dashboard section is subcomponent of Dashboard template meant to be used to create the different sections within the page.\n     *\n     * @example\n     * import { BentoDashboardSection } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashboardSection },\n     *     template: `\n     *          <bento-dashboard-section :header=\"{ title: 'Section' }\" half-width>\n     *              <template #controls>\n     *                  // Add your controls here\n     *              </template>\n     *              // You can render content with two cols\n     *              <template #content-col-1>\n     *                  // Add your content here\n     *              </template>\n     *              <template #content-col-2>\n     *                  // Add your content here\n     *              </template>\n     *              // Or you can render full width content by using default slot\n     *              // Add your content here\n     *          </bento-dashboard-section>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashboard-section.scss\" />\n"],"names":["__default__$1","props","__props","slots","useSlots","hasSlot","useHasSlot","tabsRef","ref","filtersRef","isFiltersPinned","filtersElementObserver","isTabsPinned","tabsPosition","hasStickyFilters","computed","hasStickyTabs","dashboardFiltersConditionalClasses","dashboardTabsConditionalClasses","dashboardTopSectionConditionalClasses","tabsSlots","el","getTabTitle","index","_b","_a","y","useWindowScroll","watch","observeSizeOfElement","filtersHeight","onUnmounted","__default__","conditionalClasses","onMounted"],"mappings":";;;;;;;;;;;;GA+KIA,KAAA,CAAA;;;;;;;;;;AA/HA,UAAAC,IAAAC,GA+BAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,EAAA;AACA,QAAAG,IAAA;AACA,UAAAC,IAAAJ,EAAA,EAAA,GACAK,IAAAL,EAAA,CAAA,GAEAM,IAAAC,EAAA,MAAAN,EAAA,SAAAR,EAAA,aAAA,GACAe,IAAAD,EAAA,MAAAR,EAAA,SAAAN,EAAA,UAAA,GAEAgB,IAAAF,EAAA,OAAA;AAAA,MAA2D,yCAAAd,EAAA;AAAA,MACR,8CAAAa,EAAA,SAAA,CAAAE,EAAA,SAAAN,EAAA;AAAA,IAEuB,EAAA,GAG1EQ,IAAAH,EAAA,OAAA;AAAA,MAAwD,sCAAAd,EAAA;AAAA,MACR,2CAAAA,EAAA,cAAAW,EAAA;AAAA,IACgC,EAAA,GAGhFO,IAAAJ,EAAA,OAAA;AAAA,MAA8D,6CAAAd,EAAA,cAAAA,EAAA;AAAA,IACa,EAAA,GAG3EmB,IAAAL,EAAA,MAAA,OAAA,KAAAZ,CAAA,EAAA,OAAA,CAAAkB,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;;AAAA,eAAAC,KAAAC,IAAAxB,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAwB,EAAAF,OAAA,gBAAAC,EAAA,UAAA,OAAAD,IAAA,CAAA;AAAA,OAEA,EAAA,GAAAG,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAAnB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAkB,EAAApB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAO,EAAA,OAAA;AACI,kBAAAc,IAAArB,EAAA,MAAA;AACA,YAAAI,EAAA,QAAAC,EAAA,QAAAgB,IAAA,GACAvB,EAAA,MAAA,eAAA,IAAA,MAAA,MAAA,GAAAM,EAAA,KAAA;AAAA,UAAsF;AAAA,QAC1F,CAAA;AAAA,MAER;AAAA,IACJ,GAGJe;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;;AAEJ,QAAAZ,EAAA,UACIJ,EAAA,UAAAe,IAAAhB,EAAA,UAAA,gBAAAgB,EAAA,wBAAA,SAAA,IAEJT,EAAA,UACIJ,EAAA,UAAAY,IAAAjB,EAAA,MAAA,eAAA,QAAA,gBAAAiB,EAAA,wBAAA,SAAAX,EAAA;AAAA,MAGJ;AAAA,IACJ,GAGJkB,EAAA,MAAA;AACI,MAAApB,KAAA,QAAAA,EAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mGCzDvCqB,KAAA,CAAA;;;;;;;;AA1DA,UAAA/B,IAAAC,GAiBAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA8B,IAAAlB,EAAA,OAAA;AAAA,MAA2C,mCAAAd,EAAA;AAAA,IACE,EAAA;AAG7C,WAAAiC,EAAA,MAAA;AACI,WAAA7B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAJ,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{dashed-underline.BKfUevuM.js → dashed-underline.CRlWNPrd.js}

@@ -1,5 +1,5 @@
 import { defineComponent as O, useSlots as B, ref as r, computed as u, watch as S, withDirectives as g, openBlock as c, createElementBlock as E, renderSlot as d, createBlock as I, unref as s, withCtx as f, createVNode as k, createTextVNode as w, toDisplayString as x, createCommentVNode as C } from "vue";
-import { B as D } from "./popover.D9Zw4w9l.js";
+import { B as D } from "./popover.DwGgnCyn.js";
 import "./events.FNmSWp_P.js";
 import { B as b } from "./tooltip.BvJoy09y.js";
 import { B as y } from "./typography.DNzU41ah.js";
@@ -77,4 +77,4 @@ const F = {}, L = /* @__PURE__ */ O({
 export {
   j as d
 };
-//# sourceMappingURL=dashed-underline.BKfUevuM.js.map
+//# sourceMappingURL=dashed-underline.CRlWNPrd.js.map

package/dist/chunks/{dashed-underline.BKfUevuM.js.map → dashed-underline.CRlWNPrd.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dashed-underline.BKfUevuM.js","sources":["../../../vue2/src/components/dashed-underline/dashed-underline.vue"],"sourcesContent":["<template>\n    <span\n        ref=\"element\"\n        v-bento-tooltip-directive:[tooltipPosition]=\"tooltipText\"\n        class=\"b-dashed-underline\"\n        tabindex=\"0\"\n        @mouseenter=\"openPopover\"\n        @mouseleave=\"closePopover\"\n        @focus=\"infoIconOnFocus\"\n        @focusout=\"infoIconOnFocusOut\"\n    >\n        <slot></slot>\n        <bento-popover\n            v-if=\"element && hasPopover\"\n            :open=\"isOpen\"\n            :target-element=\"element\"\n            :position=\"popoverPosition\"\n            role=\"tooltip\"\n            fit-content\n            disable-focus-trap\n        >\n            <slot name=\"popover-content\">\n                <bento-typography>\n                    {{ popoverText }}\n                </bento-typography>\n            </slot>\n        </bento-popover>\n    </span>\n</template>\n\n<script lang=\"ts\" setup>\n    import { computed, ref, useSlots, watch } from 'vue';\n    import { BentoPopover, type BentoPopoverPositions } from '@/components/popover';\n    import {\n        type BentoTooltipPosition,\n        BentoTooltipDirective as vBentoTooltipDirective,\n    } from '@/directives/tooltip/index';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n\n    const CLOSING_POPOVER_DELAY_MS = 200;\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Text showed in the popover on hover\n             */\n            popoverText?: string;\n\n            /**\n             * Position the popover should take if space is available\n             */\n            popoverPosition?: BentoPopoverPositions | `${BentoPopoverPositions}`;\n\n            /**\n             * Attaches a `BentoTooltip` if present. Text showed in the tooltip on hover.\n             */\n            tooltipText?: string;\n\n            /**\n             * Position the tooltip should take if space is available.\n             */\n            tooltipPosition?: BentoTooltipPosition | `${BentoTooltipPosition}`;\n        }>(),\n        {\n            popoverText: null,\n            popoverPosition: 'top',\n            tooltipText: null,\n            tooltipPosition: 'top',\n        }\n    );\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const element = ref<HTMLSpanElement>(null);\n    const isOpen = ref(false);\n\n    const closingTimeOutId = ref();\n\n    const openPopover = () => {\n        isOpen.value = true;\n        if (closingTimeOutId.value) {\n            clearTimeout(closingTimeOutId.value);\n        }\n    };\n\n    const closePopover = () => {\n        // We want to delay closing for a couple of seconds so\n        // it doesn't flicker if a user hovers over the icon and then inside the popover.\n        const timeOutId = setTimeout(() => {\n            isOpen.value = false;\n        }, CLOSING_POPOVER_DELAY_MS);\n        closingTimeOutId.value = timeOutId;\n    };\n\n    const infoIconOnFocus = () => {\n        openPopover();\n    };\n\n    /**\n     * Only close popover on blur if the newly focus element is not a child of this element\n     * @param e - the event that contains the newly focused element\n     */\n    const infoIconOnFocusOut = (e: FocusEvent) => {\n        if (!element.value || !(e?.relatedTarget instanceof Element) || !element.value.contains(e.relatedTarget)) {\n            closePopover();\n        }\n    };\n\n    const hasPopover = computed(() => props.popoverText || hasSlot('popover-content'));\n\n    const shouldShowTooltipPopoverError = computed(() => !props.tooltipText && !hasPopover.value);\n\n    watch(\n        shouldShowTooltipPopoverError,\n        value => {\n            if (value) {\n                throw new Error(\n                    'BentoDashedUnderline requires either a tooltip or a popover to be configured. Check the docs for more info.'\n                );\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The dashed underline serves as a visual cue to indicate that additional information is available for\n     * a specific word or phrase without adding an icon.\n     *\n     * @example\n     * import { BentoDashedUnderline } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashedUnderline },\n     *     template: `\n     *          <bento-dashed-underline>\n     *              annotated text\n     *          </bento-dashed-underline>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashed-underline.scss\" />\n"],"names":["__default__","props","__props","slots","useSlots","hasSlot","useHasSlot","element","ref","isOpen","closingTimeOutId","openPopover","closePopover","timeOutId","infoIconOnFocus","infoIconOnFocusOut","e","hasPopover","computed","shouldShowTooltipPopoverError","watch","value"],"mappings":";;;;;;;;AAgJI,MAAAA,IAAA,CAAA;;;;;;;;;;AAtGA,UAAAC,IAAAC,GA8BAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,EAAA,GAEAE,IAAAF,EAAA,GAEAG,IAAA,MAAA;AACI,MAAAF,EAAA,QAAA,IACAC,EAAA,SACI,aAAAA,EAAA,KAAA;AAAA,IACJ,GAGJE,IAAA,MAAA;AAGI,YAAAC,IAAA,WAAA,MAAA;AACI,QAAAJ,EAAA,QAAA;AAAA,MAAe,GAAA,GAAA;AAEnB,MAAAC,EAAA,QAAAG;AAAA,IAAyB,GAG7BC,IAAA,MAAA;AACI,MAAAH,EAAA;AAAA,IAAY,GAOhBI,IAAA,CAAAC,MAAA;AACI,OAAA,CAAAT,EAAA,SAAA,GAAAS,KAAA,gBAAAA,EAAA,0BAAA,YAAA,CAAAT,EAAA,MAAA,SAAAS,EAAA,aAAA,MACIJ,EAAA;AAAA,IACJ,GAGJK,IAAAC,EAAA,MAAAjB,EAAA,eAAAI,EAAA,iBAAA,CAAA,GAEAc,IAAAD,EAAA,MAAA,CAAAjB,EAAA,eAAA,CAAAgB,EAAA,KAAA;AAEA,WAAAG;AAAA,MAAAD;AAAA,MACI,CAAAE,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA;AAAA,YAAU;AAAA,UACN;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dashed-underline.CRlWNPrd.js","sources":["../../../vue2/src/components/dashed-underline/dashed-underline.vue"],"sourcesContent":["<template>\n    <span\n        ref=\"element\"\n        v-bento-tooltip-directive:[tooltipPosition]=\"tooltipText\"\n        class=\"b-dashed-underline\"\n        tabindex=\"0\"\n        @mouseenter=\"openPopover\"\n        @mouseleave=\"closePopover\"\n        @focus=\"infoIconOnFocus\"\n        @focusout=\"infoIconOnFocusOut\"\n    >\n        <slot></slot>\n        <bento-popover\n            v-if=\"element && hasPopover\"\n            :open=\"isOpen\"\n            :target-element=\"element\"\n            :position=\"popoverPosition\"\n            role=\"tooltip\"\n            fit-content\n            disable-focus-trap\n        >\n            <slot name=\"popover-content\">\n                <bento-typography>\n                    {{ popoverText }}\n                </bento-typography>\n            </slot>\n        </bento-popover>\n    </span>\n</template>\n\n<script lang=\"ts\" setup>\n    import { computed, ref, useSlots, watch } from 'vue';\n    import { BentoPopover, type BentoPopoverPositions } from '@/components/popover';\n    import {\n        type BentoTooltipPosition,\n        BentoTooltipDirective as vBentoTooltipDirective,\n    } from '@/directives/tooltip/index';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n\n    const CLOSING_POPOVER_DELAY_MS = 200;\n\n    const props = withDefaults(\n        defineProps<{\n            /**\n             * Text showed in the popover on hover\n             */\n            popoverText?: string;\n\n            /**\n             * Position the popover should take if space is available\n             */\n            popoverPosition?: BentoPopoverPositions | `${BentoPopoverPositions}`;\n\n            /**\n             * Attaches a `BentoTooltip` if present. Text showed in the tooltip on hover.\n             */\n            tooltipText?: string;\n\n            /**\n             * Position the tooltip should take if space is available.\n             */\n            tooltipPosition?: BentoTooltipPosition | `${BentoTooltipPosition}`;\n        }>(),\n        {\n            popoverText: null,\n            popoverPosition: 'top',\n            tooltipText: null,\n            tooltipPosition: 'top',\n        }\n    );\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const element = ref<HTMLSpanElement>(null);\n    const isOpen = ref(false);\n\n    const closingTimeOutId = ref();\n\n    const openPopover = () => {\n        isOpen.value = true;\n        if (closingTimeOutId.value) {\n            clearTimeout(closingTimeOutId.value);\n        }\n    };\n\n    const closePopover = () => {\n        // We want to delay closing for a couple of seconds so\n        // it doesn't flicker if a user hovers over the icon and then inside the popover.\n        const timeOutId = setTimeout(() => {\n            isOpen.value = false;\n        }, CLOSING_POPOVER_DELAY_MS);\n        closingTimeOutId.value = timeOutId;\n    };\n\n    const infoIconOnFocus = () => {\n        openPopover();\n    };\n\n    /**\n     * Only close popover on blur if the newly focus element is not a child of this element\n     * @param e - the event that contains the newly focused element\n     */\n    const infoIconOnFocusOut = (e: FocusEvent) => {\n        if (!element.value || !(e?.relatedTarget instanceof Element) || !element.value.contains(e.relatedTarget)) {\n            closePopover();\n        }\n    };\n\n    const hasPopover = computed(() => props.popoverText || hasSlot('popover-content'));\n\n    const shouldShowTooltipPopoverError = computed(() => !props.tooltipText && !hasPopover.value);\n\n    watch(\n        shouldShowTooltipPopoverError,\n        value => {\n            if (value) {\n                throw new Error(\n                    'BentoDashedUnderline requires either a tooltip or a popover to be configured. Check the docs for more info.'\n                );\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The dashed underline serves as a visual cue to indicate that additional information is available for\n     * a specific word or phrase without adding an icon.\n     *\n     * @example\n     * import { BentoDashedUnderline } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashedUnderline },\n     *     template: `\n     *          <bento-dashed-underline>\n     *              annotated text\n     *          </bento-dashed-underline>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashed-underline.scss\" />\n"],"names":["__default__","props","__props","slots","useSlots","hasSlot","useHasSlot","element","ref","isOpen","closingTimeOutId","openPopover","closePopover","timeOutId","infoIconOnFocus","infoIconOnFocusOut","e","hasPopover","computed","shouldShowTooltipPopoverError","watch","value"],"mappings":";;;;;;;;AAgJI,MAAAA,IAAA,CAAA;;;;;;;;;;AAtGA,UAAAC,IAAAC,GA8BAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,EAAA,GAEAE,IAAAF,EAAA,GAEAG,IAAA,MAAA;AACI,MAAAF,EAAA,QAAA,IACAC,EAAA,SACI,aAAAA,EAAA,KAAA;AAAA,IACJ,GAGJE,IAAA,MAAA;AAGI,YAAAC,IAAA,WAAA,MAAA;AACI,QAAAJ,EAAA,QAAA;AAAA,MAAe,GAAA,GAAA;AAEnB,MAAAC,EAAA,QAAAG;AAAA,IAAyB,GAG7BC,IAAA,MAAA;AACI,MAAAH,EAAA;AAAA,IAAY,GAOhBI,IAAA,CAAAC,MAAA;AACI,OAAA,CAAAT,EAAA,SAAA,GAAAS,KAAA,gBAAAA,EAAA,0BAAA,YAAA,CAAAT,EAAA,MAAA,SAAAS,EAAA,aAAA,MACIJ,EAAA;AAAA,IACJ,GAGJK,IAAAC,EAAA,MAAAjB,EAAA,eAAAI,EAAA,iBAAA,CAAA,GAEAc,IAAAD,EAAA,MAAA,CAAAjB,EAAA,eAAA,CAAAgB,EAAA,KAAA;AAEA,WAAAG;AAAA,MAAAD;AAAA,MACI,CAAAE,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA;AAAA,YAAU;AAAA,UACN;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{data-grid-template.DI27ou71.js → data-grid-template.BZVeRN6g.js}

@@ -1,5 +1,5 @@
 import { defineComponent as I, useSlots as R, ref as h, computed as f, provide as B, openBlock as o, createElementBlock as l, createVNode as C, unref as s, mergeProps as D, createSlots as $, withCtx as c, renderSlot as n, createCommentVNode as E, createBlock as T, Fragment as G, renderList as S, toRef as N } from "vue";
-import { B as O } from "./header.C0NBlBJv.js";
+import { B as O } from "./header.8BzBNgxj.js";
 import { a as j, B as A } from "./tabs.B3DGxpmI.js";
 import { u as x } from "./use-has-slot.B7eQSabc.js";
 import { D as H } from "./data-grid-template.keys.2_AkxuNT.js";
@@ -90,4 +90,4 @@ const P = { class: "b-data-grid-template b-data-grid-template--sticky-tabs" }, V
 export {
   Q as d
 };
-//# sourceMappingURL=data-grid-template.DI27ou71.js.map
+//# sourceMappingURL=data-grid-template.BZVeRN6g.js.map

package/dist/chunks/{data-grid-template.DI27ou71.js.map → data-grid-template.BZVeRN6g.js.map}

@@ -1 +1 @@
-{"version":3,"file":"data-grid-template.DI27ou71.js","sources":["../../../vue2/src/templates/data-grid-template/data-grid-template.vue"],"sourcesContent":["<template>\n    <main class=\"b-data-grid-template b-data-grid-template--sticky-tabs\">\n        <bento-header v-bind=\"header\" variant=\"component\" class=\"b-data-grid-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div v-if=\"hasSlot('additionalContent')\" class=\"b-data-grid-template__additional-content\">\n            <slot name=\"additionalContent\" />\n        </div>\n        <bento-tabs\n            v-if=\"tabsSlots.length > 1\"\n            ref=\"tabsRef\"\n            :active-tab-index=\"tabs.activeTabIndex\"\n            class=\"b-data-grid-template__tabs\"\n            @update:active-tab-index=\"emitTabs\"\n        >\n            <bento-tab v-for=\"(_item, index) in tabsSlots\" :key=\"`tab-${index}`\" :title=\"getTabTitle(index)\">\n                <slot :name=\"`tab-${index + 1}`\" />\n            </bento-tab>\n        </bento-tabs>\n        <slot v-else />\n    </main>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, Ref, ref, toRef, UnwrapRef, useSlots } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoTab, BentoTabs } from '@/components/tabs';\n    import { useHasSlot } from '@/composables';\n    import { DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY } from './data-grid-template.keys';\n    import type {\n        BentoDataGridTemplateDataGrid,\n        BentoDataGridTemplateHeader,\n        BentoDataGridTemplateTabs,\n    } from './data-grid-template.types';\n\n    const props = defineProps({\n        /**\n         * The header that goes to the top of the template\n         */\n        header: {\n            type: Object as PropType<BentoDataGridTemplateHeader>,\n            required: true,\n        },\n\n        /**\n         * All the tab properties that can be set on the inner tab components.\n         *  - tabs.activeTabIndex: the currently active tab index.\n         *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.\n         */\n        tabs: {\n            type: Object as PropType<BentoDataGridTemplateTabs>,\n            default: undefined,\n        },\n\n        /**\n         * Renders the tabs with a sticky positioning\n         */\n        stickyTabs: {\n            type: Boolean,\n            default: false,\n        },\n    });\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when activeTabIndex changes internally\n         */\n        (e: 'update:tabs', value: BentoDataGridTemplateTabs): void;\n    }>();\n\n    const tabsRef = ref(null);\n\n    const computedTabsRef = computed(() => tabsRef.value?.$refs?.tablist);\n\n    const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-')));\n\n    const emitTabs = (newActiveTabIndex: number) => {\n        emit('update:tabs', { ...props.tabs, activeTabIndex: newActiveTabIndex });\n    };\n\n    const getTabTitle = (index: number) => props?.tabs.tabs?.[index]?.title ?? `Tab ${index + 1}`;\n\n    const registerDatagridInDataGridTemplate: BentoDataGridTemplateDataGrid = () => {\n        const isDataGridTemplate = true;\n        const stickyTabs: Ref<boolean> = toRef(props, 'stickyTabs');\n        const tabsRef: Ref<UnwrapRef<HTMLDivElement>> | null = computedTabsRef;\n\n        // return values to the Tab component\n        return { isDataGridTemplate, stickyTabs, tabsRef };\n    };\n\n    provide(DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY, registerDatagridInDataGridTemplate);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The data grid template is a restrictive, full-page data grid used to display information from a data set.\n     * You can use this data grid template when your user needs a clear overview of data or a way of organizing and analyzing the data in their own way.\n     * This data grid template shouldn’t be confused with the data grid.\n     *\n     * @example\n     * import { BentoDataGridTemplate } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDataGridTemplate },\n     *     template: `\n     *          // If you want to display multiple data grids in the same page (they will be rendered in different tabs)\n     *          <bento-data-grid-template>\n     *              <template #tab-1><bento-data-grid v-bind=\"your-data-grid-args\" title=\"Title for tab 1\"/></template>\n     *              <template #tab-2><bento-data-grid v-bind=\"your-data-grid-args\" title=\"Title for tab 2\"/></template>\n     *          </bento-data-grid-template>\n     *          // Alternatively, if you only want to pass one data grid to your template:\n     *          <bento-data-grid-template>\n     *              <template #default><bento-data-grid v-bind=\"your-data-grid-args\"/></template>\n     *          </bento-data-grid-template>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./data-grid-template.scss\" />\n"],"names":["__default__","props","__props","slots","useSlots","hasSlot","useHasSlot","emit","__emit","tabsRef","ref","computedTabsRef","computed","_b","_a","tabsSlots","el","emitTabs","newActiveTabIndex","getTabTitle","index","provide","DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY","toRef"],"mappings":";;;;;;;;;;GA0HIA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AArFA,UAAAC,IAAAC,GA2BAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,GAOAC,IAAAC,EAAA,IAAA,GAEAC,IAAAC,EAAA,MAAA;;AAAA,cAAAC,KAAAC,IAAAL,EAAA,UAAA,gBAAAK,EAAA,UAAA,gBAAAD,EAAA;AAAA,KAAA,GAEAE,IAAAH,EAAA,MAAA,OAAA,KAAAT,CAAA,EAAA,OAAA,CAAAa,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;AACI,MAAAX,EAAA,eAAA,EAAA,GAAAN,EAAA,MAAA,gBAAAiB,EAAA,CAAA;AAAA,IAAwE,GAG5EC,IAAA,CAAAC,MAAA;;AAAA,eAAAP,KAAAC,IAAAb,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAa,EAAAM,OAAA,gBAAAP,EAAA,UAAA,OAAAO,IAAA,CAAA;AAAA;AAWA,WAAAC,EAAAC,GATA,OAMI,EAAA,wBAAA,YAJAC,EAAAtB,GAAA,YAAA,GAIA,SAHAU,EAGA,EAGJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"data-grid-template.BZVeRN6g.js","sources":["../../../vue2/src/templates/data-grid-template/data-grid-template.vue"],"sourcesContent":["<template>\n    <main class=\"b-data-grid-template b-data-grid-template--sticky-tabs\">\n        <bento-header v-bind=\"header\" variant=\"component\" class=\"b-data-grid-template__header\">\n            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                <slot name=\"infoIconTooltipContent\" />\n            </template>\n        </bento-header>\n        <div v-if=\"hasSlot('additionalContent')\" class=\"b-data-grid-template__additional-content\">\n            <slot name=\"additionalContent\" />\n        </div>\n        <bento-tabs\n            v-if=\"tabsSlots.length > 1\"\n            ref=\"tabsRef\"\n            :active-tab-index=\"tabs.activeTabIndex\"\n            class=\"b-data-grid-template__tabs\"\n            @update:active-tab-index=\"emitTabs\"\n        >\n            <bento-tab v-for=\"(_item, index) in tabsSlots\" :key=\"`tab-${index}`\" :title=\"getTabTitle(index)\">\n                <slot :name=\"`tab-${index + 1}`\" />\n            </bento-tab>\n        </bento-tabs>\n        <slot v-else />\n    </main>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, PropType, provide, Ref, ref, toRef, UnwrapRef, useSlots } from 'vue';\n    import { BentoHeader } from '@/components/header';\n    import { BentoTab, BentoTabs } from '@/components/tabs';\n    import { useHasSlot } from '@/composables';\n    import { DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY } from './data-grid-template.keys';\n    import type {\n        BentoDataGridTemplateDataGrid,\n        BentoDataGridTemplateHeader,\n        BentoDataGridTemplateTabs,\n    } from './data-grid-template.types';\n\n    const props = defineProps({\n        /**\n         * The header that goes to the top of the template\n         */\n        header: {\n            type: Object as PropType<BentoDataGridTemplateHeader>,\n            required: true,\n        },\n\n        /**\n         * All the tab properties that can be set on the inner tab components.\n         *  - tabs.activeTabIndex: the currently active tab index.\n         *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.\n         */\n        tabs: {\n            type: Object as PropType<BentoDataGridTemplateTabs>,\n            default: undefined,\n        },\n\n        /**\n         * Renders the tabs with a sticky positioning\n         */\n        stickyTabs: {\n            type: Boolean,\n            default: false,\n        },\n    });\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when activeTabIndex changes internally\n         */\n        (e: 'update:tabs', value: BentoDataGridTemplateTabs): void;\n    }>();\n\n    const tabsRef = ref(null);\n\n    const computedTabsRef = computed(() => tabsRef.value?.$refs?.tablist);\n\n    const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-')));\n\n    const emitTabs = (newActiveTabIndex: number) => {\n        emit('update:tabs', { ...props.tabs, activeTabIndex: newActiveTabIndex });\n    };\n\n    const getTabTitle = (index: number) => props?.tabs.tabs?.[index]?.title ?? `Tab ${index + 1}`;\n\n    const registerDatagridInDataGridTemplate: BentoDataGridTemplateDataGrid = () => {\n        const isDataGridTemplate = true;\n        const stickyTabs: Ref<boolean> = toRef(props, 'stickyTabs');\n        const tabsRef: Ref<UnwrapRef<HTMLDivElement>> | null = computedTabsRef;\n\n        // return values to the Tab component\n        return { isDataGridTemplate, stickyTabs, tabsRef };\n    };\n\n    provide(DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY, registerDatagridInDataGridTemplate);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The data grid template is a restrictive, full-page data grid used to display information from a data set.\n     * You can use this data grid template when your user needs a clear overview of data or a way of organizing and analyzing the data in their own way.\n     * This data grid template shouldn’t be confused with the data grid.\n     *\n     * @example\n     * import { BentoDataGridTemplate } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDataGridTemplate },\n     *     template: `\n     *          // If you want to display multiple data grids in the same page (they will be rendered in different tabs)\n     *          <bento-data-grid-template>\n     *              <template #tab-1><bento-data-grid v-bind=\"your-data-grid-args\" title=\"Title for tab 1\"/></template>\n     *              <template #tab-2><bento-data-grid v-bind=\"your-data-grid-args\" title=\"Title for tab 2\"/></template>\n     *          </bento-data-grid-template>\n     *          // Alternatively, if you only want to pass one data grid to your template:\n     *          <bento-data-grid-template>\n     *              <template #default><bento-data-grid v-bind=\"your-data-grid-args\"/></template>\n     *          </bento-data-grid-template>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./data-grid-template.scss\" />\n"],"names":["__default__","props","__props","slots","useSlots","hasSlot","useHasSlot","emit","__emit","tabsRef","ref","computedTabsRef","computed","_b","_a","tabsSlots","el","emitTabs","newActiveTabIndex","getTabTitle","index","provide","DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY","toRef"],"mappings":";;;;;;;;;;GA0HIA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AArFA,UAAAC,IAAAC,GA2BAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,GAOAC,IAAAC,EAAA,IAAA,GAEAC,IAAAC,EAAA,MAAA;;AAAA,cAAAC,KAAAC,IAAAL,EAAA,UAAA,gBAAAK,EAAA,UAAA,gBAAAD,EAAA;AAAA,KAAA,GAEAE,IAAAH,EAAA,MAAA,OAAA,KAAAT,CAAA,EAAA,OAAA,CAAAa,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;AACI,MAAAX,EAAA,eAAA,EAAA,GAAAN,EAAA,MAAA,gBAAAiB,EAAA,CAAA;AAAA,IAAwE,GAG5EC,IAAA,CAAAC,MAAA;;AAAA,eAAAP,KAAAC,IAAAb,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAa,EAAAM,OAAA,gBAAAP,EAAA,UAAA,OAAAO,IAAA,CAAA;AAAA;AAWA,WAAAC,EAAAC,GATA,OAMI,EAAA,wBAAA,YAJAC,EAAAtB,GAAA,YAAA,GAIA,SAHAU,EAGA,EAGJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}