@adyen/bento-vue3 1.92.2 → 1.93.0

package/dist/chunks/{copy.CL893i9-.js → copy.C4LTKtNj.js}

@@ -1,7 +1,7 @@
 import { openBlock as i, createElementBlock as c, mergeProps as V, toDisplayString as d, createCommentVNode as _, createElementVNode as P, defineComponent as R, ref as f, computed as v, withDirectives as h, renderSlot as w, unref as n, createBlock as $, createSlots as B, withCtx as g, createVNode as H, createTextVNode as I } from "vue";
 import { B as N } from "./button.DWF7FSIw.js";
-import { b as D } from "./popper-container.DMN8n5iC.js";
-import { b as F } from "./tooltip.DHfG2aRt.js";
+import { b as D } from "./popper-container.Agl6sImi.js";
+import { b as F } from "./tooltip.CZ_sV-Vj.js";
 import { u as O } from "./index.B875RXHM.js";
 /* empty css              */
 import { _ as k } from "./_plugin-vue_export-helper.CHgC5LLL.js";
@@ -111,4 +111,4 @@ export {
   Q as C,
   t as a
 };
-//# sourceMappingURL=copy.CL893i9-.js.map
+//# sourceMappingURL=copy.C4LTKtNj.js.map

package/dist/chunks/{copy.CL893i9-.js.map → copy.C4LTKtNj.js.map}

@@ -1 +1 @@
-{"version":3,"file":"copy.CL893i9-.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 PopperContainerPosition } from '@/components/popper-container';\nimport type { BentoButton } from '@/components/button';\n\nexport enum CopyTooltipState {\n    DEFAULT = 'default',\n    COPYING = 'copying',\n    ERROR = 'error',\n}\n\ntype ButtonProps = InstanceType<typeof BentoButton>['$props'];\nexport interface BentoCopyButtonProps {\n    variant?: ButtonProps['variant'];\n    condensed?: ButtonProps['condensed'];\n    disabled?: ButtonProps['disabled'];\n}\n\nexport interface BentoCopyProps {\n    /**\n     * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.\n     */\n    button?: BentoCopyButtonProps;\n    /**\n     * Sets the button text of the copy button.\n     */\n    buttonText?: string;\n    /**\n     * Defines the string that will get copied to the clipboard\n     */\n    text: string;\n    /**\n     * Position the tooltip should take if space is available. Defaults to 'top'\n     */\n    tooltipPosition?: PopperContainerPosition;\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=\"#001222\" d=\"M8 1.25C9.51878 1.25 10.75 2.48122 10.75 4V5.25H12C13.5188 5.25 14.75 6.48122 14.75 8V12C14.75 13.5188 13.5188 14.75 12 14.75H8C6.48122 14.75 5.25 13.5188 5.25 12V10.75H4C2.48122 10.75 1.25 9.51878 1.25 8V4C1.25 2.48122 2.48122 1.25 4 1.25H8ZM8 6.75C7.30964 6.75 6.75 7.30964 6.75 8V12C6.75 12.6904 7.30964 13.25 8 13.25H12C12.6904 13.25 13.25 12.6904 13.25 12V8C13.25 7.30964 12.6904 6.75 12 6.75H8ZM4 2.75C3.30964 2.75 2.75 3.30964 2.75 4V8C2.75 8.69036 3.30964 9.25 4 9.25H5.25V8C5.25 6.48122 6.48122 5.25 8 5.25H9.25V4C9.25 3.30964 8.69036 2.75 8 2.75H4Z\"/></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 setup lang=\"ts\">\n    import { computed, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { PopperContainerPosition } from '@/components/popper-container';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { type BentoCopyButtonProps, type BentoCopyProps, 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    const emit = defineEmits<{\n        /**\n         * Emitted when the copy button is clicked.\n         */\n        (e: 'click', event: MouseEvent): void;\n    }>();\n\n    const props = withDefaults(defineProps<BentoCopyProps>(), {\n        button: () => ({ variant: 'tertiary' }) as BentoCopyButtonProps,\n        buttonText: undefined,\n        tooltipPosition: PopperContainerPosition.TOP,\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const copyState = ref<CopyTooltipState>(CopyTooltipState.DEFAULT);\n\n    const showScreenReaderAlert = ref(false);\n    const onClickCopy = async (event: MouseEvent) => {\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        emit('click', event);\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            default:\n                return t('copy');\n        }\n    });\n\n    const svgTitle = computed(() => (props.buttonText ? undefined : t('copy')));\n</script>\n\n<script lang=\"ts\">\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 {\n        i18n: { messages },\n        name: 'copy',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./copy.scss\" />\n"],"names":["CopyTooltipState","CopyTooltipState2","uuid","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","__default__","messages","emit","__emit","props","__props","t","useI18n","copyState","ref","showScreenReaderAlert","onClickCopy","event","resetText","copyText","computed","svgTitle"],"mappings":";;;;;;;;AAGO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,UAAA,WACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA;ACIR,IAAAE,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;;AAVR,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;gFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE8M,MAAA;AAAA,MAAe,GAAA;AAAA;;;;;;;;;;;;;;;;;;GC8FzNC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;AAjEA,UAAAC,IAAAC,GAOAC,IAAAC,GAMA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAN,EAAA,CAAA,GACAO,IAAAC,EAAAjB,EAAA,OAAA,GAEAkB,IAAAD,EAAA,EAAA,GACAE,IAAA,OAAAC,MAAA;AACI,UAAA;AACI,cAAA,UAAA,UAAA,UAAAR,EAAA,IAAA,GACAI,EAAA,QAAAhB,EAAA,SACAkB,EAAA,QAAA;AAAA,MAA8B,QAAA;AAE9B,QAAAF,EAAA,QAAAhB,EAAA;AAAA,MAAmC;AAGvC,MAAAU,EAAA,SAAAU,CAAA;AAAA,IAAmB,GAGvBC,IAAA,MAAA;AACI,MAAAL,EAAA,QAAAhB,EAAA,SACAkB,EAAA,QAAA;AAAA,IAA8B,GAGlCI,IAAAC,EAAA,MAAA;AACI,cAAAP,EAAA,OAAA;AAAA,QAAyB,KAAAhB,EAAA;AAEjB,iBAAAc,EAAA,QAAA;AAAA,QAAiB,KAAAd,EAAA;AAEjB,iBAAAc,EAAA,YAAA;AAAA,QAAqB;AAErB,iBAAAA,EAAA,MAAA;AAAA,MAAe;AAAA,IACvB,CAAA,GAGJU,IAAAD,EAAA,MAAAX,EAAA,aAAA,SAAAE,EAAA,MAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"copy.C4LTKtNj.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 PopperContainerPosition } from '@/components/popper-container';\nimport type { BentoButton } from '@/components/button';\n\nexport enum CopyTooltipState {\n    DEFAULT = 'default',\n    COPYING = 'copying',\n    ERROR = 'error',\n}\n\ntype ButtonProps = InstanceType<typeof BentoButton>['$props'];\nexport interface BentoCopyButtonProps {\n    variant?: ButtonProps['variant'];\n    condensed?: ButtonProps['condensed'];\n    disabled?: ButtonProps['disabled'];\n}\n\nexport interface BentoCopyProps {\n    /**\n     * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.\n     */\n    button?: BentoCopyButtonProps;\n    /**\n     * Sets the button text of the copy button.\n     */\n    buttonText?: string;\n    /**\n     * Defines the string that will get copied to the clipboard\n     */\n    text: string;\n    /**\n     * Position the tooltip should take if space is available. Defaults to 'top'\n     */\n    tooltipPosition?: PopperContainerPosition;\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=\"#001222\" d=\"M8 1.25C9.51878 1.25 10.75 2.48122 10.75 4V5.25H12C13.5188 5.25 14.75 6.48122 14.75 8V12C14.75 13.5188 13.5188 14.75 12 14.75H8C6.48122 14.75 5.25 13.5188 5.25 12V10.75H4C2.48122 10.75 1.25 9.51878 1.25 8V4C1.25 2.48122 2.48122 1.25 4 1.25H8ZM8 6.75C7.30964 6.75 6.75 7.30964 6.75 8V12C6.75 12.6904 7.30964 13.25 8 13.25H12C12.6904 13.25 13.25 12.6904 13.25 12V8C13.25 7.30964 12.6904 6.75 12 6.75H8ZM4 2.75C3.30964 2.75 2.75 3.30964 2.75 4V8C2.75 8.69036 3.30964 9.25 4 9.25H5.25V8C5.25 6.48122 6.48122 5.25 8 5.25H9.25V4C9.25 3.30964 8.69036 2.75 8 2.75H4Z\"/></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 setup lang=\"ts\">\n    import { computed, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { PopperContainerPosition } from '@/components/popper-container';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { type BentoCopyButtonProps, type BentoCopyProps, 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    const emit = defineEmits<{\n        /**\n         * Emitted when the copy button is clicked.\n         */\n        (e: 'click', event: MouseEvent): void;\n    }>();\n\n    const props = withDefaults(defineProps<BentoCopyProps>(), {\n        button: () => ({ variant: 'tertiary' }) as BentoCopyButtonProps,\n        buttonText: undefined,\n        tooltipPosition: PopperContainerPosition.TOP,\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const copyState = ref<CopyTooltipState>(CopyTooltipState.DEFAULT);\n\n    const showScreenReaderAlert = ref(false);\n    const onClickCopy = async (event: MouseEvent) => {\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        emit('click', event);\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            default:\n                return t('copy');\n        }\n    });\n\n    const svgTitle = computed(() => (props.buttonText ? undefined : t('copy')));\n</script>\n\n<script lang=\"ts\">\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 {\n        i18n: { messages },\n        name: 'copy',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./copy.scss\" />\n"],"names":["CopyTooltipState","CopyTooltipState2","uuid","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","__default__","messages","emit","__emit","props","__props","t","useI18n","copyState","ref","showScreenReaderAlert","onClickCopy","event","resetText","copyText","computed","svgTitle"],"mappings":";;;;;;;;AAGO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,UAAA,WACAA,EAAA,UAAA,WACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA;ACIR,IAAAE,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;;AAVR,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;gFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE8M,MAAA;AAAA,MAAe,GAAA;AAAA;;;;;;;;;;;;;;;;;;GC8FzNC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;AAjEA,UAAAC,IAAAC,GAOAC,IAAAC,GAMA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAN,EAAA,CAAA,GACAO,IAAAC,EAAAjB,EAAA,OAAA,GAEAkB,IAAAD,EAAA,EAAA,GACAE,IAAA,OAAAC,MAAA;AACI,UAAA;AACI,cAAA,UAAA,UAAA,UAAAR,EAAA,IAAA,GACAI,EAAA,QAAAhB,EAAA,SACAkB,EAAA,QAAA;AAAA,MAA8B,QAAA;AAE9B,QAAAF,EAAA,QAAAhB,EAAA;AAAA,MAAmC;AAGvC,MAAAU,EAAA,SAAAU,CAAA;AAAA,IAAmB,GAGvBC,IAAA,MAAA;AACI,MAAAL,EAAA,QAAAhB,EAAA,SACAkB,EAAA,QAAA;AAAA,IAA8B,GAGlCI,IAAAC,EAAA,MAAA;AACI,cAAAP,EAAA,OAAA;AAAA,QAAyB,KAAAhB,EAAA;AAEjB,iBAAAc,EAAA,QAAA;AAAA,QAAiB,KAAAd,EAAA;AAEjB,iBAAAc,EAAA,YAAA;AAAA,QAAqB;AAErB,iBAAAA,EAAA,MAAA;AAAA,MAAe;AAAA,IACvB,CAAA,GAGJU,IAAAD,EAAA,MAAAX,EAAA,aAAA,SAAAE,EAAA,MAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{dashboard-section.kwKlujP-.js → dashboard-section.TSdidWWP.js}

@@ -1,7 +1,7 @@
 import { defineComponent as g, useSlots as w, ref as b, computed as d, watch as B, onUnmounted as j, openBlock as s, createElementBlock as i, createVNode as k, unref as o, mergeProps as I, createSlots as F, withCtx as u, renderSlot as l, createElementVNode as _, normalizeClass as T, createCommentVNode as E, createBlock as S, Fragment as D, renderList as L, onMounted as M } from "vue";
-import { B as R } from "./header.5RQulwlL.js";
+import { B as R } from "./header.FZwBPZLA.js";
 import { a as U, B as q } from "./tab.9nyNZiGw.js";
-import { d as A } from "./index.DDwcHPb6.js";
+import { e as A } from "./index.CxrHirmk.js";
 import { o as G } from "./resize.Bqks3WUm.js";
 import { u as H } from "./use-has-slot.CyMiImRQ.js";
 import { _ as O } from "./_plugin-vue_export-helper.CHgC5LLL.js";
@@ -158,4 +158,4 @@ export {
   pt as a,
   vt as d
 };
-//# sourceMappingURL=dashboard-section.kwKlujP-.js.map
+//# sourceMappingURL=dashboard-section.TSdidWWP.js.map

package/dist/chunks/{dashboard-section.kwKlujP-.js.map → dashboard-section.TSdidWWP.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dashboard-section.kwKlujP-.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","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,GAAA,SAAA,MAAA,CAAA,CAAA,GAEAC,IAAA,CAAAC,MAAApB,GAAA,KAAA,OAAAoB,CAAA,GAAA,SAAA,OAAAA,IAAA,CAAA,IAEAC,IAAAR,EAAA,MAAAF,EAAA,QAAA,EAAA,KAAAA,EAAA,MAAA,IAAA,MAAA,GAEA,EAAA,GAAAW,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAAhB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAe,EAAAjB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAM,EAAA,OAAA;AACI,kBAAAY,IAAAlB,EAAA,MAAA;AACA,YAAAG,EAAA,QAAAC,EAAA,QAAAc,IAAA;AAAA,UAA8D;AAAA,QAClE,CAAA;AAAA,MAER;AAAA,IACJ,GAGJF;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;AAEJ,QAAAV,EAAA,UACIH,EAAA,QAAAD,EAAA,OAAA,sBAAA,EAAA,QAAA;AAAA,MACJ;AAAA,IACJ,GAGJmB,EAAA,MAAA;AACI,MAAAjB,GAAA,WAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mGC/CvCkB,KAAA,CAAA;;;;;;;;AA1DA,UAAA5B,IAAAC,GAiBAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA2B,IAAAhB,EAAA,OAAA;AAAA,MAA2C,mCAAAb,EAAA;AAAA,IACE,EAAA;AAG7C,WAAA8B,EAAA,MAAA;AACI,WAAA1B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAJ,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dashboard-section.TSdidWWP.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","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,GAAA,SAAA,MAAA,CAAA,CAAA,GAEAC,IAAA,CAAAC,MAAApB,GAAA,KAAA,OAAAoB,CAAA,GAAA,SAAA,OAAAA,IAAA,CAAA,IAEAC,IAAAR,EAAA,MAAAF,EAAA,QAAA,EAAA,KAAAA,EAAA,MAAA,IAAA,MAAA,GAEA,EAAA,GAAAW,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAAhB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAe,EAAAjB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAM,EAAA,OAAA;AACI,kBAAAY,IAAAlB,EAAA,MAAA;AACA,YAAAG,EAAA,QAAAC,EAAA,QAAAc,IAAA;AAAA,UAA8D;AAAA,QAClE,CAAA;AAAA,MAER;AAAA,IACJ,GAGJF;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;AAEJ,QAAAV,EAAA,UACIH,EAAA,QAAAD,EAAA,OAAA,sBAAA,EAAA,QAAA;AAAA,MACJ;AAAA,IACJ,GAGJmB,EAAA,MAAA;AACI,MAAAjB,GAAA,WAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mGC/CvCkB,KAAA,CAAA;;;;;;;;AA1DA,UAAA5B,IAAAC,GAiBAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA2B,IAAAhB,EAAA,OAAA;AAAA,MAA2C,mCAAAb,EAAA;AAAA,IACE,EAAA;AAG7C,WAAA8B,EAAA,MAAA;AACI,WAAA1B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAJ,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{dashed-underline.ADDEdamG.js → dashed-underline.C0n0UG5_.js}

@@ -1,6 +1,6 @@
 import { defineComponent as g, useSlots as B, ref as i, computed as p, watch as E, withDirectives as C, openBlock as f, createElementBlock as D, createElementVNode as m, renderSlot as h, createBlock as k, unref as t, withCtx as u, toHandlers as w, createVNode as T, createTextVNode as N, toDisplayString as V, createCommentVNode as y } from "vue";
-import { e as I, h as z } from "./button-actions.7Oi2Ra4p.js";
-import { b as F } from "./tooltip.DHfG2aRt.js";
+import { e as I, h as z } from "./button-actions.Dp3VkQWU.js";
+import { b as F } from "./tooltip.CZ_sV-Vj.js";
 import { B as L } from "./typography.B3J6_tYk.js";
 import { u as M } from "./use-has-slot.CyMiImRQ.js";
 import { _ as U } from "./_plugin-vue_export-helper.CHgC5LLL.js";
@@ -105,4 +105,4 @@ const A = { class: "b-dashed-underline__content" }, G = {}, H = /* @__PURE__ */
 export {
   Q as B
 };
-//# sourceMappingURL=dashed-underline.ADDEdamG.js.map
+//# sourceMappingURL=dashed-underline.C0n0UG5_.js.map

package/dist/chunks/{dashed-underline.ADDEdamG.js.map → dashed-underline.C0n0UG5_.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dashed-underline.ADDEdamG.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        <span class=\"b-dashed-underline__content\">\n            <slot></slot>\n        </span>\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 { type 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"],"mappings":";;;;;;;oDAsJIA,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,EAAA,GAAA,yBAAA,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,MAAAhB,EAAA,UAAA,aAAA,KAAA;AAAA,QAE7B,YAAAU;AAAA,QACgB,YAAAC;AAAA,QACA,OAAAE;AAAA,QACL,UAAAC;AAAA,MACG,IAAA,CAAA;AAAA,IAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dashed-underline.C0n0UG5_.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        <span class=\"b-dashed-underline__content\">\n            <slot></slot>\n        </span>\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 { type 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"],"mappings":";;;;;;;oDAsJIA,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,EAAA,GAAA,yBAAA,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,MAAAhB,EAAA,UAAA,aAAA,KAAA;AAAA,QAE7B,YAAAU;AAAA,QACgB,YAAAC;AAAA,QACA,OAAAE;AAAA,QACL,UAAAC;AAAA,MACG,IAAA,CAAA;AAAA,IAEb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{data-grid-template.C69yN3ZR.js → data-grid-template.DNJI6xng.js}

@@ -1,6 +1,6 @@
 import { defineComponent as E, useSlots as G, ref as p, computed as a, provide as H, openBlock as i, createElementBlock as u, createVNode as T, unref as o, mergeProps as N, toHandlers as O, withCtx as d, renderSlot as n, createElementVNode as P, normalizeProps as j, guardReactiveProps as x, createSlots as V, normalizeClass as w, createCommentVNode as z, createBlock as _, Fragment as L, renderList as F, toRef as C } from "vue";
-import { B as J } from "./header.5RQulwlL.js";
-import { B as K } from "./inspector.DMhKNW1K.js";
+import { B as J } from "./header.FZwBPZLA.js";
+import { B as K } from "./inspector.BNZxnDFh.js";
 import { a as M, B as U } from "./tab.9nyNZiGw.js";
 import { u as Y } from "./use-has-slot.CyMiImRQ.js";
 import { D as q } from "./data-grid-template.keys.VezYtHtM.js";
@@ -132,4 +132,4 @@ const W = { class: "b-data-grid-template" }, X = { class: "b-data-grid-template_
 export {
   ct as d
 };
-//# sourceMappingURL=data-grid-template.C69yN3ZR.js.map
+//# sourceMappingURL=data-grid-template.DNJI6xng.js.map

package/dist/chunks/{data-grid-template.C69yN3ZR.js.map → data-grid-template.DNJI6xng.js.map}

@@ -1 +1 @@
-{"version":3,"file":"data-grid-template.C69yN3ZR.js","sources":["../../../vue2/src/templates/data-grid-template/data-grid-template.vue"],"sourcesContent":["<template>\n    <main class=\"b-data-grid-template\">\n        <bento-inspector v-bind=\"computedInspectorProps\" ref=\"inspectorRef\" v-on=\"inspectorEvents\">\n            <template #page>\n                <div class=\"b-data-grid-template__header\">\n                    <slot name=\"header\">\n                        <bento-header v-bind=\"header\">\n                            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                                <slot name=\"infoIconTooltipContent\" />\n                            </template>\n                        </bento-header>\n                    </slot>\n                </div>\n\n                <div\n                    v-if=\"hasSlot('additionalContent')\"\n                    ref=\"additionalContentRef\"\n                    class=\"b-data-grid-template__additional-content\"\n                    :class=\"additionalContentConditionalClasses\"\n                >\n                    <slot name=\"additionalContent\" />\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=\"stickyAdditionalContent ? { top: computedStickyAdditionalContentHeight } : null\"\n                    @update:active-tab-index=\"emitTabs\"\n                >\n                    <bento-tab v-for=\"(_item, index) in tabsSlots\" :key=\"`tab-${index}`\" :title=\"getTabTitle(index)\">\n                        <slot :name=\"`tab-${index + 1}`\" />\n                    </bento-tab>\n                </bento-tabs>\n\n                <slot v-else />\n            </template>\n\n            <template #content>\n                <slot name=\"inspector-content\" />\n            </template>\n        </bento-inspector>\n    </main>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoHeader } from '@/components/header';\n    import { BentoInspector } from '@/components/inspector';\n    import { BentoTab, BentoTabs } from '@/components/tabs';\n    import { useHasSlot } from '@/composables';\n    import { computed, type PropType, provide, type Ref, ref, toRef, type UnwrapRef, useSlots } from 'vue';\n    import { DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY } from './data-grid-template.keys';\n    import type {\n        BentoDataGridTemplateDataGrid,\n        BentoDataGridTemplateHeader,\n        BentoDataGridTemplateInspector,\n        BentoDataGridTemplateTabs,\n    } from './data-grid-template.types';\n\n    const props = defineProps({\n        /**\n         * The header that goes to the top of the template\n         */\n        header: {\n            type: Object as PropType<BentoDataGridTemplateHeader>,\n            default: undefined,\n        },\n\n        /**\n         * All the tab properties that can be set on the inner tab components.\n         *  - tabs.activeTabIndex: the currenly active tab index.\n         *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.\n         */\n        tabs: {\n            type: Object as PropType<BentoDataGridTemplateTabs>,\n            default: undefined,\n        },\n\n        /**\n         * Renders the additional content slot with a sticky positioning\n         */\n        stickyAdditionalContent: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Renders the tabs with a sticky positioning\n         */\n        stickyTabs: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * All the inspector properties that can be set on the inner inspector component.\n         */\n        inspector: {\n            type: Object as PropType<BentoDataGridTemplateInspector>,\n            default: undefined,\n        },\n    });\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when activeTabIndex changes internally\n         */\n        (e: 'update:tabs', value: BentoDataGridTemplateTabs): void;\n\n        /**\n         * Emits update event when the inspector's `isOpen` state changes\n         */\n        (e: 'update:is-open:inspector', value: boolean): void;\n\n        /**\n         * Emits update event when the inspector's `activePage` changes\n         */\n        (e: 'update:active-page:inspector', value: string): void;\n\n        /**\n         * Emits event when the inspector's expand button is clicked\n         */\n        (e: 'expand:inspector', value: boolean): void;\n    }>();\n\n    const tabsRef = ref(null);\n    const additionalContentRef = ref(null);\n    const inspectorRef = ref(null);\n\n    const additionalContentConditionalClasses = computed(() => ({\n        'b-data-grid-template__additional-content--sticky': props.stickyAdditionalContent,\n    }));\n\n    const computedInspectorProps = computed(() => ({\n        title: '',\n        ...props.inspector,\n    }));\n\n    const computedStickyAdditionalContentHeight = computed(() => additionalContentRef?.value?.offsetHeight);\n\n    const computedTabsRef = computed(() => tabsRef.value?.$refs?.tablistwrapper);\n\n    const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-')));\n\n    const inspectorEvents = computed(() => ({\n        'update:is-open': (value: boolean) => emit('update:is-open:inspector', value),\n        'update:active-page': (value: string) => emit('update:active-page:inspector', value),\n        expand: (value: boolean) => emit('expand:inspector', value),\n    }));\n\n    const emitTabs = (newActiveTabIndex: number) => {\n        emit('update:tabs', { ...props.tabs, activeTabIndex: newActiveTabIndex });\n    };\n\n    const getTabTitle = (index: number) => props?.tabs.tabs?.[index]?.title ?? `Tab ${index + 1}`;\n\n    const registerDatagridInDataGridTemplate: BentoDataGridTemplateDataGrid = () => {\n        const isDataGridTemplate = true;\n        const stickyTabs: Ref<boolean> = toRef(props, 'stickyTabs');\n        const stickyAdditionalContent: Ref<boolean> = toRef(props, 'stickyAdditionalContent');\n        const tabsRef: Ref<UnwrapRef<HTMLDivElement>> | null = computedTabsRef;\n        const additionalContentSlotRef: Ref<UnwrapRef<HTMLDivElement>> | null = additionalContentRef;\n\n        // return values to the Tab component\n        return {\n            isDataGridTemplate,\n            stickyTabs,\n            tabsRef,\n            stickyAdditionalContent,\n            additionalContentSlotRef,\n        };\n    };\n\n    provide(DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY, registerDatagridInDataGridTemplate);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The data grid template is a restrictive, full-page data grid used to display information from a data set.\n     * You can use this data grid template when your user needs a clear overview of data or a way of organizing and analyzing the data in their own way.\n     * This data grid template shouldn’t be confused with the data grid.\n     *\n     * @example\n     * import { BentoDataGridTemplate } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDataGridTemplate },\n     *     template: `\n     *          // If you want to display multiple data grids in the same page (they will be rendered in different tabs)\n     *          <bento-data-grid-template>\n     *              <template #tab-1><bento-data-grid v-bind=\"your-data-grid-args\" title=\"Title for tab 1\"/></template>\n     *              <template #tab-2><bento-data-grid v-bind=\"your-data-grid-args\" title=\"Title for tab 2\"/></template>\n     *          </bento-data-grid-template>\n     *          // Alternatively, if you only want to pass one data grid to your template:\n     *          <bento-data-grid-template>\n     *              <template #default><bento-data-grid v-bind=\"your-data-grid-args\"/></template>\n     *          </bento-data-grid-template>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./data-grid-template.scss\" />\n"],"names":["__default__","props","__props","slots","useSlots","hasSlot","useHasSlot","emit","__emit","tabsRef","ref","additionalContentRef","inspectorRef","additionalContentConditionalClasses","computed","computedInspectorProps","computedStickyAdditionalContentHeight","computedTabsRef","tabsSlots","el","inspectorEvents","value","emitTabs","newActiveTabIndex","getTabTitle","index","provide","DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY","stickyTabs","toRef","stickyAdditionalContent"],"mappings":";;;;;;;;4FA2MIA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/IA,UAAAC,IAAAC,GA2CAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,GAsBAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GAEAG,IAAAC,EAAA,OAAA;AAAA,MAA4D,oDAAAb,EAAA;AAAA,IACE,EAAA,GAG9Dc,IAAAD,EAAA,OAAA;AAAA,MAA+C,OAAA;AAAA,MACpC,GAAAb,EAAA;AAAA,IACE,EAAA,GAGbe,IAAAF,EAAA,MAAAH,GAAA,OAAA,YAAA,GAEAM,IAAAH,EAAA,MAAAL,EAAA,OAAA,OAAA,cAAA,GAEAS,IAAAJ,EAAA,MAAA,OAAA,KAAAX,CAAA,EAAA,OAAA,CAAAgB,MAAAA,GAAA,SAAA,MAAA,CAAA,CAAA,GAEAC,IAAAN,EAAA,OAAA;AAAA,MAAwC,kBAAA,CAAAO,MAAAd,EAAA,4BAAAc,CAAA;AAAA,MACwC,sBAAA,CAAAA,MAAAd,EAAA,gCAAAc,CAAA;AAAA,MACO,QAAA,CAAAA,MAAAd,EAAA,oBAAAc,CAAA;AAAA,IACzB,EAAA,GAG9DC,IAAA,CAAAC,MAAA;AACI,MAAAhB,EAAA,eAAA,EAAA,GAAAN,EAAA,MAAA,gBAAAsB,EAAA,CAAA;AAAA,IAAwE,GAG5EC,IAAA,CAAAC,MAAAxB,GAAA,KAAA,OAAAwB,CAAA,GAAA,SAAA,OAAAA,IAAA,CAAA;AAmBA,WAAAC,EAAAC,GAjBA,MAAA;AAEI,YAAAC,IAAAC,EAAA5B,GAAA,YAAA,GACA6B,IAAAD,EAAA5B,GAAA,yBAAA;AAKA,aAAA;AAAA,QAAO;AAAA,QACH,YAAA2B;AAAA,QACA,SANJX;AAAA,QAOI,yBAAAa;AAAA,QACA,0BAPJnB;AAAA,MAQI;AAAA,IACJ,CAGJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"data-grid-template.DNJI6xng.js","sources":["../../../vue2/src/templates/data-grid-template/data-grid-template.vue"],"sourcesContent":["<template>\n    <main class=\"b-data-grid-template\">\n        <bento-inspector v-bind=\"computedInspectorProps\" ref=\"inspectorRef\" v-on=\"inspectorEvents\">\n            <template #page>\n                <div class=\"b-data-grid-template__header\">\n                    <slot name=\"header\">\n                        <bento-header v-bind=\"header\">\n                            <template v-if=\"hasSlot('infoIconTooltipContent')\" #infoIconTooltipContent>\n                                <slot name=\"infoIconTooltipContent\" />\n                            </template>\n                        </bento-header>\n                    </slot>\n                </div>\n\n                <div\n                    v-if=\"hasSlot('additionalContent')\"\n                    ref=\"additionalContentRef\"\n                    class=\"b-data-grid-template__additional-content\"\n                    :class=\"additionalContentConditionalClasses\"\n                >\n                    <slot name=\"additionalContent\" />\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=\"stickyAdditionalContent ? { top: computedStickyAdditionalContentHeight } : null\"\n                    @update:active-tab-index=\"emitTabs\"\n                >\n                    <bento-tab v-for=\"(_item, index) in tabsSlots\" :key=\"`tab-${index}`\" :title=\"getTabTitle(index)\">\n                        <slot :name=\"`tab-${index + 1}`\" />\n                    </bento-tab>\n                </bento-tabs>\n\n                <slot v-else />\n            </template>\n\n            <template #content>\n                <slot name=\"inspector-content\" />\n            </template>\n        </bento-inspector>\n    </main>\n</template>\n\n<script setup lang=\"ts\">\n    import { BentoHeader } from '@/components/header';\n    import { BentoInspector } from '@/components/inspector';\n    import { BentoTab, BentoTabs } from '@/components/tabs';\n    import { useHasSlot } from '@/composables';\n    import { computed, type PropType, provide, type Ref, ref, toRef, type UnwrapRef, useSlots } from 'vue';\n    import { DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY } from './data-grid-template.keys';\n    import type {\n        BentoDataGridTemplateDataGrid,\n        BentoDataGridTemplateHeader,\n        BentoDataGridTemplateInspector,\n        BentoDataGridTemplateTabs,\n    } from './data-grid-template.types';\n\n    const props = defineProps({\n        /**\n         * The header that goes to the top of the template\n         */\n        header: {\n            type: Object as PropType<BentoDataGridTemplateHeader>,\n            default: undefined,\n        },\n\n        /**\n         * All the tab properties that can be set on the inner tab components.\n         *  - tabs.activeTabIndex: the currenly active tab index.\n         *  - tabs.tabs: an array of BentoTab props, the first item in the array will affect the `tab-1` slot and so on.\n         */\n        tabs: {\n            type: Object as PropType<BentoDataGridTemplateTabs>,\n            default: undefined,\n        },\n\n        /**\n         * Renders the additional content slot with a sticky positioning\n         */\n        stickyAdditionalContent: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Renders the tabs with a sticky positioning\n         */\n        stickyTabs: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * All the inspector properties that can be set on the inner inspector component.\n         */\n        inspector: {\n            type: Object as PropType<BentoDataGridTemplateInspector>,\n            default: undefined,\n        },\n    });\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const emit = defineEmits<{\n        /**\n         * Emits update event when activeTabIndex changes internally\n         */\n        (e: 'update:tabs', value: BentoDataGridTemplateTabs): void;\n\n        /**\n         * Emits update event when the inspector's `isOpen` state changes\n         */\n        (e: 'update:is-open:inspector', value: boolean): void;\n\n        /**\n         * Emits update event when the inspector's `activePage` changes\n         */\n        (e: 'update:active-page:inspector', value: string): void;\n\n        /**\n         * Emits event when the inspector's expand button is clicked\n         */\n        (e: 'expand:inspector', value: boolean): void;\n    }>();\n\n    const tabsRef = ref(null);\n    const additionalContentRef = ref(null);\n    const inspectorRef = ref(null);\n\n    const additionalContentConditionalClasses = computed(() => ({\n        'b-data-grid-template__additional-content--sticky': props.stickyAdditionalContent,\n    }));\n\n    const computedInspectorProps = computed(() => ({\n        title: '',\n        ...props.inspector,\n    }));\n\n    const computedStickyAdditionalContentHeight = computed(() => additionalContentRef?.value?.offsetHeight);\n\n    const computedTabsRef = computed(() => tabsRef.value?.$refs?.tablistwrapper);\n\n    const tabsSlots = computed(() => Object.keys(slots).filter(el => el?.includes('tab-')));\n\n    const inspectorEvents = computed(() => ({\n        'update:is-open': (value: boolean) => emit('update:is-open:inspector', value),\n        'update:active-page': (value: string) => emit('update:active-page:inspector', value),\n        expand: (value: boolean) => emit('expand:inspector', value),\n    }));\n\n    const emitTabs = (newActiveTabIndex: number) => {\n        emit('update:tabs', { ...props.tabs, activeTabIndex: newActiveTabIndex });\n    };\n\n    const getTabTitle = (index: number) => props?.tabs.tabs?.[index]?.title ?? `Tab ${index + 1}`;\n\n    const registerDatagridInDataGridTemplate: BentoDataGridTemplateDataGrid = () => {\n        const isDataGridTemplate = true;\n        const stickyTabs: Ref<boolean> = toRef(props, 'stickyTabs');\n        const stickyAdditionalContent: Ref<boolean> = toRef(props, 'stickyAdditionalContent');\n        const tabsRef: Ref<UnwrapRef<HTMLDivElement>> | null = computedTabsRef;\n        const additionalContentSlotRef: Ref<UnwrapRef<HTMLDivElement>> | null = additionalContentRef;\n\n        // return values to the Tab component\n        return {\n            isDataGridTemplate,\n            stickyTabs,\n            tabsRef,\n            stickyAdditionalContent,\n            additionalContentSlotRef,\n        };\n    };\n\n    provide(DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY, registerDatagridInDataGridTemplate);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The data grid template is a restrictive, full-page data grid used to display information from a data set.\n     * You can use this data grid template when your user needs a clear overview of data or a way of organizing and analyzing the data in their own way.\n     * This data grid template shouldn’t be confused with the data grid.\n     *\n     * @example\n     * import { BentoDataGridTemplate } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDataGridTemplate },\n     *     template: `\n     *          // If you want to display multiple data grids in the same page (they will be rendered in different tabs)\n     *          <bento-data-grid-template>\n     *              <template #tab-1><bento-data-grid v-bind=\"your-data-grid-args\" title=\"Title for tab 1\"/></template>\n     *              <template #tab-2><bento-data-grid v-bind=\"your-data-grid-args\" title=\"Title for tab 2\"/></template>\n     *          </bento-data-grid-template>\n     *          // Alternatively, if you only want to pass one data grid to your template:\n     *          <bento-data-grid-template>\n     *              <template #default><bento-data-grid v-bind=\"your-data-grid-args\"/></template>\n     *          </bento-data-grid-template>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./data-grid-template.scss\" />\n"],"names":["__default__","props","__props","slots","useSlots","hasSlot","useHasSlot","emit","__emit","tabsRef","ref","additionalContentRef","inspectorRef","additionalContentConditionalClasses","computed","computedInspectorProps","computedStickyAdditionalContentHeight","computedTabsRef","tabsSlots","el","inspectorEvents","value","emitTabs","newActiveTabIndex","getTabTitle","index","provide","DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY","stickyTabs","toRef","stickyAdditionalContent"],"mappings":";;;;;;;;4FA2MIA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA/IA,UAAAC,IAAAC,GA2CAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,GAsBAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GAEAG,IAAAC,EAAA,OAAA;AAAA,MAA4D,oDAAAb,EAAA;AAAA,IACE,EAAA,GAG9Dc,IAAAD,EAAA,OAAA;AAAA,MAA+C,OAAA;AAAA,MACpC,GAAAb,EAAA;AAAA,IACE,EAAA,GAGbe,IAAAF,EAAA,MAAAH,GAAA,OAAA,YAAA,GAEAM,IAAAH,EAAA,MAAAL,EAAA,OAAA,OAAA,cAAA,GAEAS,IAAAJ,EAAA,MAAA,OAAA,KAAAX,CAAA,EAAA,OAAA,CAAAgB,MAAAA,GAAA,SAAA,MAAA,CAAA,CAAA,GAEAC,IAAAN,EAAA,OAAA;AAAA,MAAwC,kBAAA,CAAAO,MAAAd,EAAA,4BAAAc,CAAA;AAAA,MACwC,sBAAA,CAAAA,MAAAd,EAAA,gCAAAc,CAAA;AAAA,MACO,QAAA,CAAAA,MAAAd,EAAA,oBAAAc,CAAA;AAAA,IACzB,EAAA,GAG9DC,IAAA,CAAAC,MAAA;AACI,MAAAhB,EAAA,eAAA,EAAA,GAAAN,EAAA,MAAA,gBAAAsB,EAAA,CAAA;AAAA,IAAwE,GAG5EC,IAAA,CAAAC,MAAAxB,GAAA,KAAA,OAAAwB,CAAA,GAAA,SAAA,OAAAA,IAAA,CAAA;AAmBA,WAAAC,EAAAC,GAjBA,MAAA;AAEI,YAAAC,IAAAC,EAAA5B,GAAA,YAAA,GACA6B,IAAAD,EAAA5B,GAAA,yBAAA;AAKA,aAAA;AAAA,QAAO;AAAA,QACH,YAAA2B;AAAA,QACA,SANJX;AAAA,QAOI,yBAAAa;AAAA,QACA,0BAPJnB;AAAA,MAQI;AAAA,IACJ,CAGJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{data-grid.T-FnwChG.js → data-grid.CZjC3vWa.js}

@@ -5,42 +5,42 @@ import { W as yl } from "./alert.RD0qOLhx.js";
 import { _ as oe } from "./_plugin-vue_export-helper.CHgC5LLL.js";
 import { C as Cn } from "./cross.CCHdi6v3.js";
 import { N as Wt } from "./minus-small.CnYLTuSv.js";
-import { E as le, b as St, T as Ll, B as Ol } from "./tooltip.DHfG2aRt.js";
-import { b as Tl } from "./popper-container.DMN8n5iC.js";
-import { B as Il } from "./dashed-underline.ADDEdamG.js";
+import { E as le, b as St, T as Ll, B as Ol } from "./tooltip.CZ_sV-Vj.js";
+import { b as Tl } from "./popper-container.Agl6sImi.js";
+import { B as Il } from "./dashed-underline.C0n0UG5_.js";
 import { B as Ge, p as pn } from "./typography.B3J6_tYk.js";
 import { u as ze } from "./index.B875RXHM.js";
-import { B as Nl } from "./tag.YN2r-Pp3.js";
-import { B as Dl } from "./action-bar.BxyRAZn1.js";
-import { B as Ml } from "./pagination.Ch_Occwt.js";
+import { B as Nl } from "./tag.DkhJRE0r.js";
+import { B as Dl } from "./action-bar.B-OoRono.js";
+import { B as Ml } from "./pagination.DE2QAUeF.js";
 import { B as dt } from "./loading-indicator.BPol9I84.js";
 import { u as Lt } from "./use-has-slot.CyMiImRQ.js";
 import { u as zl } from "./use-touch-device.DTqFAbXh.js";
 import { g as ut } from "./generate-uid.DBWe4g6T.js";
-import { a as Fl } from "./filter-bar.BA2Rtf_p.js";
+import { a as Fl } from "./filter-bar.r_s53sYN.js";
 import { B as Pl } from "./empty-state.DT4sFyjB.js";
 import { E as $l } from "./tabs.keys.B4qGhjp2.js";
 import { D as kl } from "./data-grid-template.keys.VezYtHtM.js";
-import { b as Ul } from "./index.DDwcHPb6.js";
+import { c as Ul } from "./index.CxrHirmk.js";
 import { o as Ot } from "./resize.Bqks3WUm.js";
-import { f as _t, c as Tt, h as Bl, a as Vt, b as Gt, O as xt, D as Wl } from "./button-actions.7Oi2Ra4p.js";
+import { f as _t, c as Tt, h as Bl, a as Vt, b as Gt, O as xt, D as Wl } from "./button-actions.Dp3VkQWU.js";
 import { B as bn } from "./button.DWF7FSIw.js";
 import { B as wn } from "./toggle.BdcgY15I.js";
-import { B as Vl } from "./search-bar.BRf_Mf7n.js";
+import { B as Vl } from "./search-bar.7jhPiuah.js";
 import { B as Gl } from "./directive.C8kY-ZW-.js";
-import { u as xl } from "./dropdown.CuIBYLdy.js";
+import { u as xl } from "./dropdown.B4pTluCz.js";
 import { S as Hl } from "./search.ClLmZAgC.js";
-import { B as Sn } from "./checkbox.CdkqCAAL.js";
-import { B as Zl } from "./info-icon.B3MDsjMu.js";
-import { D as jl } from "./use-cached-selected-values.DUWGSMvO.js";
-import { B as Ht } from "./popover.types.D8tHtFl3.js";
+import { B as Sn } from "./checkbox.BEQ8QnKY.js";
+import { B as Zl } from "./info-icon.PcvZwhgr.js";
+import { D as jl } from "./use-cached-selected-values.D_CQxKZa.js";
+import { B as Ht } from "./popover.types.DTieDKDn.js";
 import { A as ql } from "./arrow-left.C6UiqO-c.js";
 import { A as Kl } from "./arrow-right.fSdLV_ho.js";
 import { H as Yl, S as Xl } from "./show.BreRPkgL.js";
 import { l as Zt } from "./events.BQOQSSb7.js";
-import { b as _n } from "./focus-trap.BAiM_ywb.js";
+import { b as _n } from "./focus-trap.D24gS9oB.js";
 import { E as jt } from "./link.D6D6YGsN.js";
-import { C as qt } from "./copy.CL893i9-.js";
+import { C as qt } from "./copy.C4LTKtNj.js";
 import { C as Jl } from "./chevron-down.XeE-LBV_.js";
 import { C as Ql } from "./chevron-up.Cmgl2a3x.js";
 import { u as eo } from "./use-expandable-content-height.B5jjRvCz.js";
@@ -4243,4 +4243,4 @@ export {
   Fe as h,
   ye as i
 };
-//# sourceMappingURL=data-grid.T-FnwChG.js.map
+//# sourceMappingURL=data-grid.CZjC3vWa.js.map