@adyen/bento-vue3 1.60.1 → 1.61.0

package/dist/chunks/{card.dF_i6neN.js → card.B9AfyVI3.js}

@@ -6,7 +6,7 @@ import { u as ee } from "./use-has-slot.B7eQSabc.js";
 import { g as ae } from "./generate-uid.NJ8tVoha.js";
 import { u as te } from "./i18n.B6g5VX0q.js";
 import { o as oe } from "./resize.Bqks3WUm.js";
-import { c as ne, B as de } from "./button-actions.1MReMMnL.js";
+import { c as ne, B as de } from "./button-actions.Cr5gxSXb.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.dF_i6neN.js.map
+//# sourceMappingURL=card.B9AfyVI3.js.map

package/dist/chunks/{card.dF_i6neN.js.map → card.B9AfyVI3.js.map}

@@ -1 +1 @@
-{"version":3,"file":"card.dF_i6neN.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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"}
+{"version":3,"file":"card.B9AfyVI3.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.iD36_pOw.js → code-snippet.CK52UjIT.js}

@@ -1,14 +1,14 @@
 import { defineComponent as K, ref as y, computed as f, shallowRef as V, onMounted as q, watch as ee, watchEffect as te, resolveComponent as ae, createElementBlock as _, openBlock as s, normalizeClass as $, createCommentVNode as p, createBlock as g, createElementVNode as S, createVNode as C, unref as l, mergeProps as ne, withCtx as h, createTextVNode as B, toDisplayString as E, renderSlot as oe, normalizeProps as se, guardReactiveProps as le } from "vue";
 import { s as re, H as ie, t as e, L as ce, a as de, b as pe, c as ue, p as ge, j as me, d as fe, x as he, e as Oe, E as be, h as ve, k as ye, C as x, f as w, i as _e, g as Q, l as Se, m as Ce } from "./codemirror.Zv80n3Z2.js";
 import { b as Ne, c as Pe, d as Te, e as Le } from "./es6.n1ewaW31.js";
-import { B as ke } from "./dropdown.FJu_m8Tw.js";
-import { B as Y } from "./button.CVZJTZv0.js";
+import { B as ke } from "./dropdown.B4yyYeuQ.js";
+import { B as Y } from "./button.BF_dGonK.js";
 import { B as H } from "./typography.DN5eC5ch.js";
 import { B as Ee } from "./loading-indicator.DEepb9Wl.js";
 import { u as xe } from "./i18n.B6g5VX0q.js";
 import { E as Ie } from "./expand.DusW7F7p.js";
-import { h as Ae } from "./base-modal.D2tNbxw3.js";
-import { C as Re } from "./copy.jE0EciK8.js";
+import { h as Ae } from "./base-modal.BphJ3uEa.js";
+import { C as Re } from "./copy.CHnSy6IK.js";
 import { _ as Ve } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import "../assets/code-snippet.css";
 const $e = {
@@ -331,4 +331,4 @@ export {
   O as b,
   pt as c
 };
-//# sourceMappingURL=code-snippet.iD36_pOw.js.map
+//# sourceMappingURL=code-snippet.CK52UjIT.js.map

package/dist/chunks/{code-snippet.iD36_pOw.js.map → code-snippet.CK52UjIT.js.map}

@@ -1 +1 @@
-{"version":3,"file":"code-snippet.iD36_pOw.js","sources":["../../../vue2/src/components/code-snippet/highlight.ts","../../../vue2/src/components/code-snippet/code-snippet.types.ts","../../../../node_modules/.pnpm/codemirror-lang-csv@0.1.1/node_modules/codemirror-lang-csv/dist/index.js","../../../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/**\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    CSV = 'csv',\n}\n\nexport enum BentoCodeSnippetEvent {\n    ACTION = 'action',\n    CHANGE = 'change',\n}\n\nexport interface BentoCodeSnippetProps {\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?: boolean;\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?: string;\n\n    /**\n     * The code content\n     */\n    content?: string;\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?: boolean;\n\n    /**\n     * Allows editing of the code-snippet content by the user\n     */\n    editable?: boolean;\n\n    /**\n     * Language name for syntax highlighting rules\n     */\n    lang?: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`;\n\n    /**\n     * Label to show in the action-bar, describing the language\n     */\n    langLabel?: string;\n\n    /**\n     * Toggles the loading indicator within the action bar\n     */\n    loading?: boolean;\n\n    /**\n     * Defines the variant of code-snippet\n     */\n    variant?: BentoCodeSnippetVariant | `${BentoCodeSnippetVariant}`;\n}\n","import { LRParser } from '@lezer/lr';\nimport { LRLanguage, LanguageSupport } from '@codemirror/language';\nimport { styleTags, tags } from '@lezer/highlight';\n\n// This file was generated by lezer-generator. You probably shouldn't edit it.\nconst parser = LRParser.deserialize({\n  version: 14,\n  states: \"nQVQPOOOOQO'#Ce'#CeOOQO'#Ca'#CaQVQPOOOOQO-E6_-E6_\",\n  stateData: \"g~OWOS~OQPORPOSPO~OQRSR~\",\n  goto: \"eYPPPPPZPPPaQRORSRTQOR\",\n  nodeNames: \"⚠ Program String Separator Value\",\n  maxTerm: 9,\n  skippedNodes: [0],\n  repeatNodeCount: 1,\n  tokenData: \"'Y~RZOYtYZ!cZrtrs!hs|t|}'T}!]t!]!^'T!^;'St;'S;=`!]<%lOt~yUS~OYtZ|t}!]t!^;'St;'S;=`!]<%lOt~!`P;=`<%lt~!hOW~~!m]S~OY!hYZ#fZr!hrs%Ss|!h|}#f}!]!h!]!^#f!^#O!h#O#P%m#P;'S!h;'S;=`&}<%lO!h~#iVOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|<%lO#f~$TOQ~~$WRO;'S#f;'S;=`$a;=`O#f~$dWOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|;=`<%l#f<%lO#f~%PP;=`<%l#f~%ZUQ~S~OYtZ|t}!]t!^;'St;'S;=`!]<%lOt~%rYS~OY!hYZ#fZ|!h|}#f}!]!h!]!^#f!^;'S!h;'S;=`&b;=`<%l#f<%lO!h~&eWOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|;=`<%l!h<%lO#f~'QP;=`<%l!h~'YOR~\",\n  tokenizers: [0],\n  topRules: {\"Program\":[0,1]},\n  tokenPrec: 18\n});\n\nconst csvLanguage = LRLanguage.define({\n    parser: parser.configure({\n        props: [\n            styleTags({\n                Separator: tags.separator,\n                Value: tags.string,\n                String: tags.string,\n                LineComment: tags.lineComment,\n                \"( )\": tags.paren,\n            }),\n        ],\n    }),\n});\nfunction csv() {\n    return new LanguageSupport(csvLanguage);\n}\n\nexport { csv, csvLanguage };\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';\nimport { csv } from 'codemirror-lang-csv';\nimport type { LanguageSupport } from '@codemirror/language';\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: Record<BentoCodeSnippetSupportedLanguage, () => LanguageSupport> = {\n    [BentoCodeSnippetSupportedLanguage.JSON]: json,\n    [BentoCodeSnippetSupportedLanguage.XML]: xml,\n    [BentoCodeSnippetSupportedLanguage.JAVASCRIPT]: javascript,\n    [BentoCodeSnippetSupportedLanguage.JAVA]: java,\n    [BentoCodeSnippetSupportedLanguage.PYTHON]: python,\n    [BentoCodeSnippetSupportedLanguage.CSV]: csv,\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 setup lang=\"ts\">\n    import { computed, onMounted, 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 { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { Copy } from '@/internal';\n    import {\n        BentoCodeSnippetEvent,\n        type BentoCodeSnippetProps,\n        BentoCodeSnippetSupportedLanguage,\n        BentoCodeSnippetVariant,\n    } from './code-snippet.types';\n    import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\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    const props = withDefaults(defineProps<BentoCodeSnippetProps>(), {\n        actionable: false,\n        actionableText: null,\n        content: '',\n        editable: false,\n        expandable: false,\n        lang: BentoCodeSnippetSupportedLanguage.JSON,\n        langLabel: null,\n        loading: false,\n        variant: BentoCodeSnippetVariant.MULTILINE,\n    });\n\n    const emit = defineEmits([BentoCodeSnippetEvent.ACTION, BentoCodeSnippetEvent.CHANGE]);\n\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    const runText = computed(() => props.actionableText || t('run'));\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 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</script>\n\n<script lang=\"ts\">\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 {\n        i18n: { messages },\n        name: 'bento-code-snippet',\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","parser","LRParser","csvLanguage","LRLanguage","styleTags","csv","LanguageSupport","importsMap","json","xml","javascript","java","python","getLangLoader","getIndentation","state","line","currentLine","indentMatch","INDENT_SAME_AS_LINE_BEFORE","dispatch","changes","range","newText","EditorSelection","__default__","messages","props","__props","emit","__emit","t","useI18n","selectedLanguage","ref","availableLanguages","handleChangeLanguage","displayedLang","computed","isInlineVariant","conditionalClasses","codeAreaContentConditionalClasses","loadLang","container","shallowRef","editor","languageConf","Compartment","editorTheme","editorReadOnly","currentContents","contentLength","runText","onMounted","updateCurrentContents","state2","extensions","highlightActiveLine","keymap","indentWithTab","EditorState","EditorView","content","lineNumbers","history","watch","upcomingContentLength","onActionClicked","watchEffect","showModal"],"mappings":"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","x_google_ignoreList":[2]}
+{"version":3,"file":"code-snippet.CK52UjIT.js","sources":["../../../vue2/src/components/code-snippet/highlight.ts","../../../vue2/src/components/code-snippet/code-snippet.types.ts","../../../../node_modules/.pnpm/codemirror-lang-csv@0.1.1/node_modules/codemirror-lang-csv/dist/index.js","../../../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/**\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    CSV = 'csv',\n}\n\nexport enum BentoCodeSnippetEvent {\n    ACTION = 'action',\n    CHANGE = 'change',\n}\n\nexport interface BentoCodeSnippetProps {\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?: boolean;\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?: string;\n\n    /**\n     * The code content\n     */\n    content?: string;\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?: boolean;\n\n    /**\n     * Allows editing of the code-snippet content by the user\n     */\n    editable?: boolean;\n\n    /**\n     * Language name for syntax highlighting rules\n     */\n    lang?: BentoCodeSnippetSupportedLanguage | `${BentoCodeSnippetSupportedLanguage}`;\n\n    /**\n     * Label to show in the action-bar, describing the language\n     */\n    langLabel?: string;\n\n    /**\n     * Toggles the loading indicator within the action bar\n     */\n    loading?: boolean;\n\n    /**\n     * Defines the variant of code-snippet\n     */\n    variant?: BentoCodeSnippetVariant | `${BentoCodeSnippetVariant}`;\n}\n","import { LRParser } from '@lezer/lr';\nimport { LRLanguage, LanguageSupport } from '@codemirror/language';\nimport { styleTags, tags } from '@lezer/highlight';\n\n// This file was generated by lezer-generator. You probably shouldn't edit it.\nconst parser = LRParser.deserialize({\n  version: 14,\n  states: \"nQVQPOOOOQO'#Ce'#CeOOQO'#Ca'#CaQVQPOOOOQO-E6_-E6_\",\n  stateData: \"g~OWOS~OQPORPOSPO~OQRSR~\",\n  goto: \"eYPPPPPZPPPaQRORSRTQOR\",\n  nodeNames: \"⚠ Program String Separator Value\",\n  maxTerm: 9,\n  skippedNodes: [0],\n  repeatNodeCount: 1,\n  tokenData: \"'Y~RZOYtYZ!cZrtrs!hs|t|}'T}!]t!]!^'T!^;'St;'S;=`!]<%lOt~yUS~OYtZ|t}!]t!^;'St;'S;=`!]<%lOt~!`P;=`<%lt~!hOW~~!m]S~OY!hYZ#fZr!hrs%Ss|!h|}#f}!]!h!]!^#f!^#O!h#O#P%m#P;'S!h;'S;=`&}<%lO!h~#iVOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|<%lO#f~$TOQ~~$WRO;'S#f;'S;=`$a;=`O#f~$dWOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|;=`<%l#f<%lO#f~%PP;=`<%l#f~%ZUQ~S~OYtZ|t}!]t!^;'St;'S;=`!]<%lOt~%rYS~OY!hYZ#fZ|!h|}#f}!]!h!]!^#f!^;'S!h;'S;=`&b;=`<%l#f<%lO!h~&eWOr#frs$Os#O#f#O#P$T#P;'S#f;'S;=`$|;=`<%l!h<%lO#f~'QP;=`<%l!h~'YOR~\",\n  tokenizers: [0],\n  topRules: {\"Program\":[0,1]},\n  tokenPrec: 18\n});\n\nconst csvLanguage = LRLanguage.define({\n    parser: parser.configure({\n        props: [\n            styleTags({\n                Separator: tags.separator,\n                Value: tags.string,\n                String: tags.string,\n                LineComment: tags.lineComment,\n                \"( )\": tags.paren,\n            }),\n        ],\n    }),\n});\nfunction csv() {\n    return new LanguageSupport(csvLanguage);\n}\n\nexport { csv, csvLanguage };\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';\nimport { csv } from 'codemirror-lang-csv';\nimport type { LanguageSupport } from '@codemirror/language';\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: Record<BentoCodeSnippetSupportedLanguage, () => LanguageSupport> = {\n    [BentoCodeSnippetSupportedLanguage.JSON]: json,\n    [BentoCodeSnippetSupportedLanguage.XML]: xml,\n    [BentoCodeSnippetSupportedLanguage.JAVASCRIPT]: javascript,\n    [BentoCodeSnippetSupportedLanguage.JAVA]: java,\n    [BentoCodeSnippetSupportedLanguage.PYTHON]: python,\n    [BentoCodeSnippetSupportedLanguage.CSV]: csv,\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 setup lang=\"ts\">\n    import { computed, onMounted, 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 { BentoLoadingIndicator } from '@/components/loading-indicator';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { Copy } from '@/internal';\n    import {\n        BentoCodeSnippetEvent,\n        type BentoCodeSnippetProps,\n        BentoCodeSnippetSupportedLanguage,\n        BentoCodeSnippetVariant,\n    } from './code-snippet.types';\n    import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand';\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    const props = withDefaults(defineProps<BentoCodeSnippetProps>(), {\n        actionable: false,\n        actionableText: null,\n        content: '',\n        editable: false,\n        expandable: false,\n        lang: BentoCodeSnippetSupportedLanguage.JSON,\n        langLabel: null,\n        loading: false,\n        variant: BentoCodeSnippetVariant.MULTILINE,\n    });\n\n    const emit = defineEmits([BentoCodeSnippetEvent.ACTION, BentoCodeSnippetEvent.CHANGE]);\n\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    const runText = computed(() => props.actionableText || t('run'));\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 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</script>\n\n<script lang=\"ts\">\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 {\n        i18n: { messages },\n        name: 'bento-code-snippet',\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","parser","LRParser","csvLanguage","LRLanguage","styleTags","csv","LanguageSupport","importsMap","json","xml","javascript","java","python","getLangLoader","getIndentation","state","line","currentLine","indentMatch","INDENT_SAME_AS_LINE_BEFORE","dispatch","changes","range","newText","EditorSelection","__default__","messages","props","__props","emit","__emit","t","useI18n","selectedLanguage","ref","availableLanguages","handleChangeLanguage","displayedLang","computed","isInlineVariant","conditionalClasses","codeAreaContentConditionalClasses","loadLang","container","shallowRef","editor","languageConf","Compartment","editorTheme","editorReadOnly","currentContents","contentLength","runText","onMounted","updateCurrentContents","state2","extensions","highlightActiveLine","keymap","indentWithTab","EditorState","EditorView","content","lineNumbers","history","watch","upcomingContentLength","onActionClicked","watchEffect","showModal"],"mappings":"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","x_google_ignoreList":[2]}

package/dist/chunks/{copy.jE0EciK8.js → copy.CHnSy6IK.js}

@@ -1,5 +1,5 @@
 import { createElementBlock as a, openBlock as r, mergeProps as $, createCommentVNode as k, createElementVNode as w, toDisplayString as d, defineComponent as R, ref as y, computed as m, resolveComponent as v, resolveDirective as P, withDirectives as f, renderSlot as B, createBlock as E, createSlots as H, withCtx as T, createVNode as S, createTextVNode as h } from "vue";
-import { B as D } from "./button.CVZJTZv0.js";
+import { B as D } from "./button.BF_dGonK.js";
 import { c as O } from "./popper-container.types.BCZMbVFD.js";
 import "./events.FNmSWp_P.js";
 import { B as F } from "./tooltip.D2o0d8Xf.js";
@@ -153,4 +153,4 @@ export {
   Q as C,
   o as a
 };
-//# sourceMappingURL=copy.jE0EciK8.js.map
+//# sourceMappingURL=copy.CHnSy6IK.js.map

package/dist/chunks/{copy.jE0EciK8.js.map → copy.CHnSy6IK.js.map}

@@ -1 +1 @@
-{"version":3,"file":"copy.jE0EciK8.js","sources":["../../../vue2/src/components/internal/copy/copy.types.ts","../../../ui-assets/icons-16/dist/vue/copy.vue","../../../vue2/src/components/internal/copy/copy.vue"],"sourcesContent":["import type { BentoButton } from '../../button';\n\nexport enum CopyTooltipState {\n    DEFAULT = 'default',\n    COPYING = 'copying',\n    ERROR = 'error',\n}\n\ntype ButtonProps = InstanceType<typeof BentoButton>['$props'];\nexport type BentoCopyButtonProps = {\n    variant?: ButtonProps['variant'];\n    condensed?: ButtonProps['condensed'];\n    disabled?: ButtonProps['disabled'];\n};\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M3.5 1.25C2.25736 1.25 1.25 2.25736 1.25 3.5V8.5C1.25 9.74264 2.25736 10.75 3.5 10.75H5.25V12.5C5.25 13.7426 6.25736 14.75 7.5 14.75H12.5C13.7426 14.75 14.75 13.7426 14.75 12.5V7.5C14.75 6.25736 13.7426 5.25 12.5 5.25H10.75V3.5C10.75 2.25736 9.74264 1.25 8.5 1.25H3.5ZM9.25 5.25H7.5C6.25736 5.25 5.25 6.25736 5.25 7.5V9.25H3.5C3.08579 9.25 2.75 8.91421 2.75 8.5V3.5C2.75 3.08579 3.08579 2.75 3.5 2.75H8.5C8.91421 2.75 9.25 3.08579 9.25 3.5V5.25ZM6.75 12.5V7.5C6.75 7.08579 7.08579 6.75 7.5 6.75H12.5C12.9142 6.75 13.25 7.08579 13.25 7.5V12.5C13.25 12.9142 12.9142 13.25 12.5 13.25H7.5C7.08579 13.25 6.75 12.9142 6.75 12.5Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <div class=\"b-copy\" @mouseleave=\"resetText\" @focusout=\"resetText\">\n        <span v-if=\"$slots.default\" v-bento-tooltip-directive:[tooltipPosition]=\"copyText\" @click=\"onClickCopy\">\n            <slot />\n        </span>\n        <bento-button\n            v-else\n            v-bento-tooltip-directive:[tooltipPosition]=\"copyText\"\n            v-bind=\"button\"\n            @click=\"onClickCopy\"\n        >\n            <template #iconLeft>\n                <copy-icon :svg-title=\"svgTitle\" />\n            </template>\n            <template v-if=\"buttonText\" #default>\n                {{ buttonText }}\n            </template>\n        </bento-button>\n        <div v-if=\"showScreenReaderAlert\" role=\"alert\" class=\"b-copy__screen-reader-alert\">{{ t('copied') }}</div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { PopperContainerPosition } from '@/components/popper-container';\n    import { BentoTooltipDirective } from '@/directives';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoCopyButtonProps, CopyTooltipState } from './copy.types';\n    import CopyIcon from '@adyen/ui-assets-icons-16/vue/copy';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * An internal button component that copies text to the user's clipboard.\n     *\n     * @example\n     * import { Copy } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { Copy },\n     *     template: `\n     *          <copy :text=\"textToCopy\" />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'copy',\n        components: { BentoButton, CopyIcon },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.\n             */\n            button: {\n                type: Object as PropType<BentoCopyButtonProps>,\n                default: () =>\n                    ({\n                        variant: 'tertiary',\n                    } as BentoCopyButtonProps),\n            },\n\n            /**\n             * Sets the button text of the copy button.\n             */\n            buttonText: {\n                type: String,\n                default: undefined,\n            },\n\n            /**\n             * Defines the string that will get copied to the clipboard\n             */\n            text: {\n                type: String,\n                required: true,\n            },\n\n            /**\n             * Position the tooltip should take if space is available. Defaults to 'top'\n             */\n            tooltipPosition: {\n                type: String as PropType<PopperContainerPosition>,\n                default: PopperContainerPosition.TOP,\n            },\n        },\n        setup(props) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const copyState = ref<CopyTooltipState>(CopyTooltipState.DEFAULT);\n\n            const showScreenReaderAlert = ref(false);\n            const onClickCopy = async () => {\n                try {\n                    await navigator.clipboard.writeText(props.text);\n                    copyState.value = CopyTooltipState.COPYING;\n                    showScreenReaderAlert.value = true;\n                } catch {\n                    copyState.value = CopyTooltipState.ERROR;\n                }\n            };\n\n            const resetText = () => {\n                copyState.value = CopyTooltipState.DEFAULT;\n                showScreenReaderAlert.value = false;\n            };\n\n            const copyText = computed(() => {\n                switch (copyState.value) {\n                    case CopyTooltipState.COPYING:\n                        return t('copied');\n                    case CopyTooltipState.ERROR:\n                        return t('copyFailed');\n                    case CopyTooltipState.DEFAULT:\n                    default:\n                        return t('copy');\n                }\n            });\n\n            const svgTitle = computed(() => (props?.buttonText ? undefined : t('copy')));\n\n            return {\n                copyText,\n                onClickCopy,\n                resetText,\n                showScreenReaderAlert,\n                svgTitle,\n\n                // Translations\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./copy.scss\" />\n"],"names":["CopyTooltipState","CopyTooltipState2","uuid","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","_sfc_main","defineComponent","messages","BentoButton","CopyIcon","BentoTooltipDirective","PopperContainerPosition","props","useI18n","copyState","ref","showScreenReaderAlert","onClickCopy","resetText","copyText","computed","svgTitle","_directive_bento_tooltip_directive","resolveDirective","_cache","args","withDirectives","tooltipPosition","createBlock","_component_bento_button","createSlots","withCtx","createVNode","_component_copy_icon","buttonText","createTextVNode","toDisplayString","_hoisted_1"],"mappings":"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"}
+{"version":3,"file":"copy.CHnSy6IK.js","sources":["../../../vue2/src/components/internal/copy/copy.types.ts","../../../ui-assets/icons-16/dist/vue/copy.vue","../../../vue2/src/components/internal/copy/copy.vue"],"sourcesContent":["import type { BentoButton } from '../../button';\n\nexport enum CopyTooltipState {\n    DEFAULT = 'default',\n    COPYING = 'copying',\n    ERROR = 'error',\n}\n\ntype ButtonProps = InstanceType<typeof BentoButton>['$props'];\nexport type BentoCopyButtonProps = {\n    variant?: ButtonProps['variant'];\n    condensed?: ButtonProps['condensed'];\n    disabled?: ButtonProps['disabled'];\n};\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#00112C\" d=\"M3.5 1.25C2.25736 1.25 1.25 2.25736 1.25 3.5V8.5C1.25 9.74264 2.25736 10.75 3.5 10.75H5.25V12.5C5.25 13.7426 6.25736 14.75 7.5 14.75H12.5C13.7426 14.75 14.75 13.7426 14.75 12.5V7.5C14.75 6.25736 13.7426 5.25 12.5 5.25H10.75V3.5C10.75 2.25736 9.74264 1.25 8.5 1.25H3.5ZM9.25 5.25H7.5C6.25736 5.25 5.25 6.25736 5.25 7.5V9.25H3.5C3.08579 9.25 2.75 8.91421 2.75 8.5V3.5C2.75 3.08579 3.08579 2.75 3.5 2.75H8.5C8.91421 2.75 9.25 3.08579 9.25 3.5V5.25ZM6.75 12.5V7.5C6.75 7.08579 7.08579 6.75 7.5 6.75H12.5C12.9142 6.75 13.25 7.08579 13.25 7.5V12.5C13.25 12.9142 12.9142 13.25 12.5 13.25H7.5C7.08579 13.25 6.75 12.9142 6.75 12.5Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <div class=\"b-copy\" @mouseleave=\"resetText\" @focusout=\"resetText\">\n        <span v-if=\"$slots.default\" v-bento-tooltip-directive:[tooltipPosition]=\"copyText\" @click=\"onClickCopy\">\n            <slot />\n        </span>\n        <bento-button\n            v-else\n            v-bento-tooltip-directive:[tooltipPosition]=\"copyText\"\n            v-bind=\"button\"\n            @click=\"onClickCopy\"\n        >\n            <template #iconLeft>\n                <copy-icon :svg-title=\"svgTitle\" />\n            </template>\n            <template v-if=\"buttonText\" #default>\n                {{ buttonText }}\n            </template>\n        </bento-button>\n        <div v-if=\"showScreenReaderAlert\" role=\"alert\" class=\"b-copy__screen-reader-alert\">{{ t('copied') }}</div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { PopperContainerPosition } from '@/components/popper-container';\n    import { BentoTooltipDirective } from '@/directives';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoCopyButtonProps, CopyTooltipState } from './copy.types';\n    import CopyIcon from '@adyen/ui-assets-icons-16/vue/copy';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * An internal button component that copies text to the user's clipboard.\n     *\n     * @example\n     * import { Copy } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { Copy },\n     *     template: `\n     *          <copy :text=\"textToCopy\" />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'copy',\n        components: { BentoButton, CopyIcon },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.\n             */\n            button: {\n                type: Object as PropType<BentoCopyButtonProps>,\n                default: () =>\n                    ({\n                        variant: 'tertiary',\n                    } as BentoCopyButtonProps),\n            },\n\n            /**\n             * Sets the button text of the copy button.\n             */\n            buttonText: {\n                type: String,\n                default: undefined,\n            },\n\n            /**\n             * Defines the string that will get copied to the clipboard\n             */\n            text: {\n                type: String,\n                required: true,\n            },\n\n            /**\n             * Position the tooltip should take if space is available. Defaults to 'top'\n             */\n            tooltipPosition: {\n                type: String as PropType<PopperContainerPosition>,\n                default: PopperContainerPosition.TOP,\n            },\n        },\n        setup(props) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const copyState = ref<CopyTooltipState>(CopyTooltipState.DEFAULT);\n\n            const showScreenReaderAlert = ref(false);\n            const onClickCopy = async () => {\n                try {\n                    await navigator.clipboard.writeText(props.text);\n                    copyState.value = CopyTooltipState.COPYING;\n                    showScreenReaderAlert.value = true;\n                } catch {\n                    copyState.value = CopyTooltipState.ERROR;\n                }\n            };\n\n            const resetText = () => {\n                copyState.value = CopyTooltipState.DEFAULT;\n                showScreenReaderAlert.value = false;\n            };\n\n            const copyText = computed(() => {\n                switch (copyState.value) {\n                    case CopyTooltipState.COPYING:\n                        return t('copied');\n                    case CopyTooltipState.ERROR:\n                        return t('copyFailed');\n                    case CopyTooltipState.DEFAULT:\n                    default:\n                        return t('copy');\n                }\n            });\n\n            const svgTitle = computed(() => (props?.buttonText ? undefined : t('copy')));\n\n            return {\n                copyText,\n                onClickCopy,\n                resetText,\n                showScreenReaderAlert,\n                svgTitle,\n\n                // Translations\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./copy.scss\" />\n"],"names":["CopyTooltipState","CopyTooltipState2","uuid","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","_sfc_main","defineComponent","messages","BentoButton","CopyIcon","BentoTooltipDirective","PopperContainerPosition","props","useI18n","copyState","ref","showScreenReaderAlert","onClickCopy","resetText","copyText","computed","svgTitle","_directive_bento_tooltip_directive","resolveDirective","_cache","args","withDirectives","tooltipPosition","createBlock","_component_bento_button","createSlots","withCtx","createVNode","_component_copy_icon","buttonText","createTextVNode","toDisplayString","_hoisted_1"],"mappings":"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"}

package/dist/chunks/{dashboard-section.Bq1abySA.js → dashboard-section.Dmtz7Dcc.js}

@@ -1,6 +1,6 @@
 import { defineComponent as I, useSlots as F, ref as u, computed as d, watch as g, onUnmounted as L, createElementBlock as l, openBlock as a, createVNode as $, createElementVNode as f, unref as s, mergeProps as R, createSlots as H, withCtx as _, renderSlot as i, normalizeClass as C, createCommentVNode as W, createBlock as w, Fragment as M, renderList as U, onMounted as q } from "vue";
-import { B as E } from "./header.BBnN_HU9.js";
-import { a as A, B as G } from "./tabs.Bn4YIjoy.js";
+import { B as E } from "./header.B5gm8-_5.js";
+import { a as A, B as G } from "./tabs.CVCqPMAR.js";
 import { c as J } from "./index.FNUaPG4G.js";
 import { o as K } from "./resize.Bqks3WUm.js";
 import { u as N } from "./use-has-slot.B7eQSabc.js";
@@ -162,4 +162,4 @@ export {
   vt as a,
   pt as d
 };
-//# sourceMappingURL=dashboard-section.Bq1abySA.js.map
+//# sourceMappingURL=dashboard-section.Dmtz7Dcc.js.map

package/dist/chunks/{dashboard-section.Bq1abySA.js.map → dashboard-section.Dmtz7Dcc.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dashboard-section.Bq1abySA.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                :sticky=\"stickyTabs\"\n                :sticky-options=\"computedTabsOptions\"\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 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 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 computedTabsOptions = computed(() => (tabsPosition.value ? { top: tabsPosition.value } : undefined));\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                    }\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        }\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","tabsPosition","hasStickyFilters","computed","hasStickyTabs","dashboardFiltersConditionalClasses","dashboardTopSectionConditionalClasses","tabsSlots","el","getTabTitle","index","_b","_a","computedTabsOptions","y","useWindowScroll","watch","observeSizeOfElement","filtersHeight","onUnmounted","__default__","conditionalClasses","onMounted"],"mappings":";;;;;;;;;;;;GAqKIA,IAAA,CAAA;;;;;;;;;;AArHA,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,CAAA,GAEAK,IAAAC,EAAA,MAAAL,EAAA,SAAAR,EAAA,aAAA,GACAc,IAAAD,EAAA,MAAAP,EAAA,SAAAN,EAAA,UAAA,GAEAe,IAAAF,EAAA,OAAA;AAAA,MAA2D,yCAAAb,EAAA;AAAA,MACR,8CAAAY,EAAA,SAAA,CAAAE,EAAA,SAAAL,EAAA;AAAA,IAEuB,EAAA,GAG1EO,IAAAH,EAAA,OAAA;AAAA,MAA8D,6CAAAb,EAAA,cAAAA,EAAA;AAAA,IACa,EAAA,GAG3EiB,IAAAJ,EAAA,MAAA,OAAA,KAAAX,CAAA,EAAA,OAAA,CAAAgB,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;;AAAA,eAAAC,KAAAC,IAAAtB,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAsB,EAAAF,OAAA,gBAAAC,EAAA,UAAA,OAAAD,IAAA,CAAA;AAAA,OAEAG,IAAAV,EAAA,MAAAF,EAAA,QAAA,EAAA,KAAAA,EAAA,MAAA,IAAA,MAAA,GAEA,EAAA,GAAAa,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAAlB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAiB,EAAAnB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAM,EAAA,OAAA;AACI,kBAAAc,IAAApB,EAAA,MAAA;AACA,YAAAG,EAAA,QAAAC,EAAA,QAAAgB,IAAA;AAAA,UAA8D;AAAA,QAClE,CAAA;AAAA,MAER;AAAA,IACJ,GAGJF;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;;AAEJ,QAAAZ,EAAA,UACIH,EAAA,UAAAa,IAAAd,EAAA,UAAA,gBAAAc,EAAA,wBAAA,SAAA;AAAA,MACJ;AAAA,IACJ,GAGJO,EAAA,MAAA;AACI,MAAAnB,KAAA,QAAAA,EAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mGC/CvCoB,KAAA,CAAA;;;;;;;;AA1DA,UAAA9B,IAAAC,GAiBAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA6B,IAAAlB,EAAA,OAAA;AAAA,MAA2C,mCAAAb,EAAA;AAAA,IACE,EAAA;AAG7C,WAAAgC,EAAA,MAAA;AACI,WAAA5B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAJ,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dashboard-section.Dmtz7Dcc.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                :sticky=\"stickyTabs\"\n                :sticky-options=\"computedTabsOptions\"\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 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 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 computedTabsOptions = computed(() => (tabsPosition.value ? { top: tabsPosition.value } : undefined));\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                    }\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        }\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","tabsPosition","hasStickyFilters","computed","hasStickyTabs","dashboardFiltersConditionalClasses","dashboardTopSectionConditionalClasses","tabsSlots","el","getTabTitle","index","_b","_a","computedTabsOptions","y","useWindowScroll","watch","observeSizeOfElement","filtersHeight","onUnmounted","__default__","conditionalClasses","onMounted"],"mappings":";;;;;;;;;;;;GAqKIA,IAAA,CAAA;;;;;;;;;;AArHA,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,CAAA,GAEAK,IAAAC,EAAA,MAAAL,EAAA,SAAAR,EAAA,aAAA,GACAc,IAAAD,EAAA,MAAAP,EAAA,SAAAN,EAAA,UAAA,GAEAe,IAAAF,EAAA,OAAA;AAAA,MAA2D,yCAAAb,EAAA;AAAA,MACR,8CAAAY,EAAA,SAAA,CAAAE,EAAA,SAAAL,EAAA;AAAA,IAEuB,EAAA,GAG1EO,IAAAH,EAAA,OAAA;AAAA,MAA8D,6CAAAb,EAAA,cAAAA,EAAA;AAAA,IACa,EAAA,GAG3EiB,IAAAJ,EAAA,MAAA,OAAA,KAAAX,CAAA,EAAA,OAAA,CAAAgB,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;;AAAA,eAAAC,KAAAC,IAAAtB,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAsB,EAAAF,OAAA,gBAAAC,EAAA,UAAA,OAAAD,IAAA,CAAA;AAAA,OAEAG,IAAAV,EAAA,MAAAF,EAAA,QAAA,EAAA,KAAAA,EAAA,MAAA,IAAA,MAAA,GAEA,EAAA,GAAAa,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAAlB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAiB,EAAAnB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAM,EAAA,OAAA;AACI,kBAAAc,IAAApB,EAAA,MAAA;AACA,YAAAG,EAAA,QAAAC,EAAA,QAAAgB,IAAA;AAAA,UAA8D;AAAA,QAClE,CAAA;AAAA,MAER;AAAA,IACJ,GAGJF;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;;AAEJ,QAAAZ,EAAA,UACIH,EAAA,UAAAa,IAAAd,EAAA,UAAA,gBAAAc,EAAA,wBAAA,SAAA;AAAA,MACJ;AAAA,IACJ,GAGJO,EAAA,MAAA;AACI,MAAAnB,KAAA,QAAAA,EAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mGC/CvCoB,KAAA,CAAA;;;;;;;;AA1DA,UAAA9B,IAAAC,GAiBAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA6B,IAAAlB,EAAA,OAAA;AAAA,MAA2C,mCAAAb,EAAA;AAAA,IACE,EAAA;AAG7C,WAAAgC,EAAA,MAAA;AACI,WAAA5B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAJ,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/dashed-underline.BTdq4lZ4.js

@@ -0,0 +1,114 @@
+import { defineComponent as E, useSlots as b, ref as i, computed as p, watch as C, withDirectives as D, createElementBlock as k, openBlock as h, renderSlot as T, createBlock as w, createCommentVNode as N, unref as t, withCtx as u, createElementVNode as V, toHandlers as y, createVNode as B, createTextVNode as I, toDisplayString as z } from "vue";
+import { B as F } from "./popover.DvAXLmCp.js";
+import "./events.FNmSWp_P.js";
+import { B as L } from "./tooltip.D2o0d8Xf.js";
+import { B as M } from "./typography.DN5eC5ch.js";
+import { u as U } from "./use-has-slot.B7eQSabc.js";
+import { B as A } from "./teleport.CfGWjxe2.js";
+import { _ as G } from "./_plugin-vue_export-helper.CHgC5LLL.js";
+import "../assets/dashed-underline.css";
+const H = {}, R = /* @__PURE__ */ E({
+  ...H,
+  __name: "dashed-underline",
+  props: {
+    popoverText: { default: null },
+    popoverTitle: { default: null },
+    popoverPosition: { default: "top" },
+    popoverSize: { default: "fit-content" },
+    teleport: { default: () => ({
+      disabled: !0
+    }) },
+    tooltipText: { default: null },
+    tooltipPosition: { default: "top" }
+  },
+  setup(P) {
+    const r = P, S = b(), _ = U(S), o = i(null), l = i(!1), n = i(), s = () => {
+      l.value = !0, n.value && clearTimeout(n.value);
+    }, a = () => {
+      const e = setTimeout(() => {
+        l.value = !1;
+      }, 200);
+      n.value = e;
+    }, d = () => {
+      s();
+    }, c = (e) => {
+      (!o.value || !((e == null ? void 0 : e.relatedTarget) instanceof Element) || !o.value.contains(e.relatedTarget)) && a();
+    }, f = p(() => r.popoverText || _("popover-content")), O = p(() => !r.tooltipText && !f.value);
+    C(
+      O,
+      (e) => {
+        if (e)
+          throw new Error(
+            "BentoDashedUnderline requires either a tooltip or a popover to be configured. Check the docs for more info."
+          );
+      },
+      { immediate: !0 }
+    );
+    const g = p(
+      () => {
+        var e;
+        return ((e = r.teleport) == null ? void 0 : e.disabled) === !1 ? {
+          mouseenter: s,
+          mouseleave: a,
+          focus: d,
+          focusout: c
+        } : {};
+      }
+    );
+    return (e, $) => {
+      var v, m;
+      return D((h(), k("span", {
+        ref_key: "element",
+        ref: o,
+        class: "b-dashed-underline",
+        tabindex: "0",
+        onMouseenter: s,
+        onMouseleave: a,
+        onFocus: d,
+        onFocusout: c
+      }, [
+        T(e.$slots, "default", {}, void 0, !0),
+        o.value && f.value ? (h(), w(t(A), {
+          key: 0,
+          disabled: (v = e.teleport) == null ? void 0 : v.disabled,
+          to: (m = e.teleport) == null ? void 0 : m.to
+        }, {
+          default: u(() => [
+            V("span", y(g.value, !0), [
+              B(t(F), {
+                open: l.value,
+                "target-element": o.value,
+                position: e.popoverPosition,
+                role: "tooltip",
+                "fit-content": e.popoverSize === "fit-content" || void 0,
+                large: e.popoverSize === "large" || void 0,
+                small: e.popoverSize === "small" || void 0,
+                title: e.popoverTitle,
+                "disable-focus-trap": ""
+              }, {
+                default: u(() => [
+                  T(e.$slots, "popover-content", {}, () => [
+                    B(t(M), null, {
+                      default: u(() => [
+                        I(z(e.popoverText), 1)
+                      ]),
+                      _: 1
+                    })
+                  ], !0)
+                ]),
+                _: 3
+              }, 8, ["open", "target-element", "position", "fit-content", "large", "small", "title"])
+            ], 16)
+          ]),
+          _: 3
+        }, 8, ["disabled", "to"])) : N("", !0)
+      ], 32)), [
+        [t(L), e.tooltipText, e.tooltipPosition]
+      ]);
+    };
+  }
+}), Z = /* @__PURE__ */ G(R, [["__scopeId", "data-v-c8cf6f6c"]]);
+export {
+  Z as B
+};
+//# sourceMappingURL=dashed-underline.BTdq4lZ4.js.map

package/dist/chunks/dashed-underline.BTdq4lZ4.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashed-underline.BTdq4lZ4.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=\"dashedUnderlineOnFocus\"\n        @focusout=\"dashedUnderlineOnFocusOut\"\n    >\n        <slot></slot>\n        <bento-teleport v-if=\"element && hasPopover\" :disabled=\"teleport?.disabled\" :to=\"teleport?.to\">\n            <span v-on=\"computedPopoverContainerEvents\">\n                <bento-popover\n                    :open=\"isOpen\"\n                    :target-element=\"element\"\n                    :position=\"popoverPosition\"\n                    role=\"tooltip\"\n                    :fit-content=\"popoverSize === 'fit-content' || undefined\"\n                    :large=\"popoverSize === 'large' || undefined\"\n                    :small=\"popoverSize === 'small' || undefined\"\n                    :title=\"popoverTitle\"\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        </bento-teleport>\n    </span>\n</template>\n\n<script lang=\"ts\" setup>\n    import { computed, ref, useSlots, watch } from 'vue';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip/index';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { BentoTeleport } from '@/internal';\n    import { BentoDashedUnderlineProps } from './dashed-underline.types';\n\n    const CLOSING_POPOVER_DELAY_MS = 200;\n\n    const props = withDefaults(defineProps<BentoDashedUnderlineProps>(), {\n        popoverText: null,\n        popoverTitle: null,\n        popoverPosition: 'top',\n        popoverSize: 'fit-content',\n        teleport: () => ({\n            disabled: true,\n        }),\n        tooltipText: null,\n        tooltipPosition: 'top',\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 dashedUnderlineOnFocus = () => {\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 dashedUnderlineOnFocusOut = (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\n    /**\n     * When the popover is teleported, it is no longer a DOM descendant of the trigger element.\n     * We add these event listeners to the popover's container to keep the popover open when\n     * the user moves their mouse or focuses out from the trigger to the popover BUT then mouses over\n     * or focuses on the popover content.\n     */\n    const computedPopoverContainerEvents = computed(() =>\n        props.teleport?.disabled === false\n            ? {\n                  mouseenter: openPopover,\n                  mouseleave: closePopover,\n                  focus: dashedUnderlineOnFocus,\n                  focusout: dashedUnderlineOnFocusOut,\n              }\n            : {}\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Provides a dashed underline to text, indicating that more information is available on\n     * hover or focus. The additional information is displayed in a tooltip or a popover.\n     *\n     * @example\n     * import { BentoDashedUnderline } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashedUnderline },\n     *     template: `\n     *       <p>\n     *         This is some <bento-dashed-underline tooltip-text=\"A short explanation\">annotated text</bento-dashed-underline>.\n     *       </p>\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","dashedUnderlineOnFocus","dashedUnderlineOnFocusOut","hasPopover","computed","shouldShowTooltipPopoverError","watch","value","computedPopoverContainerEvents","_a"],"mappings":";;;;;;;;;AAoJI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;AArGA,UAAAC,IAAAC,GAYAC,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,CAAA,MAAA;AACI,OAAA,CAAAR,EAAA,SAAA,GAAA,uBAAA,0BAAA,YAAA,CAAAA,EAAA,MAAA,SAAA,EAAA,aAAA,MACIK,EAAA;AAAA,IACJ,GAGJI,IAAAC,EAAA,MAAAhB,EAAA,eAAAI,EAAA,iBAAA,CAAA,GAEAa,IAAAD,EAAA,MAAA,CAAAhB,EAAA,eAAA,CAAAe,EAAA,KAAA;AAEA,IAAAG;AAAA,MAAAD;AAAA,MACI,CAAAE,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA;AAAA,YAAU;AAAA,UACN;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAStB,UAAAC,IAAAJ;AAAA,MAAuC,MAAA;;AAAA,iBAAAK,IAAArB,EAAA,aAAA,gBAAAqB,EAAA,cAAA,KAAA;AAAA,UAE7B,YAAAX;AAAA,UACgB,YAAAC;AAAA,UACA,OAAAE;AAAA,UACL,UAAAC;AAAA,QACG,IAAA,CAAA;AAAA;AAAA,IAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{data-grid-template.UkERMC7S.js → data-grid-template.CP8N6JL8.js}

@@ -1,7 +1,7 @@
 import { defineComponent as G, useSlots as H, ref as f, computed as o, provide as O, createElementBlock as m, openBlock as r, createVNode as T, unref as n, mergeProps as _, toHandlers as j, withCtx as c, renderSlot as l, createCommentVNode as x, createBlock as C, createSlots as N, normalizeClass as P, Fragment as w, renderList as L, toRef as g } from "vue";
-import { B as V } from "./header.BBnN_HU9.js";
-import { B as q } from "./inspector.CxNXHV8C.js";
-import { a as z, B as F } from "./tabs.Bn4YIjoy.js";
+import { B as V } from "./header.B5gm8-_5.js";
+import { B as q } from "./inspector.DteTv0He.js";
+import { a as z, B as F } from "./tabs.CVCqPMAR.js";
 import { u as J } from "./use-has-slot.B7eQSabc.js";
 import { D as K } from "./data-grid-template.keys.2_AkxuNT.js";
 import { _ as M } from "./_plugin-vue_export-helper.CHgC5LLL.js";
@@ -140,4 +140,4 @@ const U = { class: "b-data-grid-template" }, Y = {}, Q = /* @__PURE__ */ G({
 export {
   it as d
 };
-//# sourceMappingURL=data-grid-template.UkERMC7S.js.map
+//# sourceMappingURL=data-grid-template.CP8N6JL8.js.map