@adyen/bento-vue2 1.34.0 → 1.35.0

package/dist/chunks/{dashed-underline.C7gLtEqx.js.map → dashed-underline.BnBP41jp.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dashed-underline.C7gLtEqx.js","sources":["../../src/components/dashed-underline/dashed-underline.vue"],"sourcesContent":["<template>\n    <span\n        ref=\"element\"\n        v-bento-tooltip-directive:[tooltipPosition]=\"tooltipText\"\n        class=\"b-dashed-underline\"\n        tabindex=\"0\"\n        @mouseenter=\"openPopover\"\n        @mouseleave=\"closePopover\"\n        @focus=\"infoIconOnFocus\"\n        @focusout=\"infoIconOnFocusOut\"\n    >\n        <slot></slot>\n        <bento-popover\n            v-if=\"element && hasPopover\"\n            :open=\"isOpen\"\n            :target-element=\"element\"\n            :position=\"popoverPosition\"\n            role=\"tooltip\"\n            fit-content\n            disable-focus-trap\n        >\n            <slot name=\"popover-content\">\n                <bento-typography>\n                    {{ popoverText }}\n                </bento-typography>\n            </slot>\n        </bento-popover>\n    </span>\n</template>\n\n<script lang=\"ts\" setup>\n    import { computed, ref, useSlots, watch } from 'vue';\n    import { BentoPopover, type BentoPopoverPositions } from '@/components/popover';\n    import {\n        type BentoTooltipPosition,\n        BentoTooltipDirective as vBentoTooltipDirective,\n    } from '@/directives/tooltip/index';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n\n    const CLOSING_POPOVER_DELAY_MS = 200;\n\n    const props = defineProps({\n  popoverText: { default: null },\n  popoverPosition: { default: 'top' },\n  tooltipText: { default: null },\n  tooltipPosition: { default: '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 infoIconOnFocus = () => {\n        openPopover();\n    };\n\n    /**\n     * Only close popover on blur if the newly focus element is not a child of this element\n     * @param e - the event that contains the newly focused element\n     */\n    const infoIconOnFocusOut = (e: FocusEvent) => {\n        if (!element.value || !(e?.relatedTarget instanceof Element) || !element.value.contains(e.relatedTarget)) {\n            closePopover();\n        }\n    };\n\n    const hasPopover = computed(() => props.popoverText || hasSlot('popover-content'));\n\n    const shouldShowTooltipPopoverError = computed(() => !props.tooltipText && !hasPopover.value);\n\n    watch(\n        shouldShowTooltipPopoverError,\n        value => {\n            if (value) {\n                throw new Error(\n                    'BentoDashedUnderline requires either a tooltip or a popover to be configured. Check the docs for more info.'\n                );\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The dashed underline serves as a visual cue to indicate that additional information is available for\n     * a specific word or phrase without adding an icon.\n     *\n     * @example\n     * import { BentoDashedUnderline } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashedUnderline },\n     *     template: `\n     *          <bento-dashed-underline>\n     *              annotated text\n     *          </bento-dashed-underline>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashed-underline.scss\" />\n"],"names":["__default__","CLOSING_POPOVER_DELAY_MS","slots","useSlots","hasSlot","useHasSlot","element","ref","isOpen","closingTimeOutId","openPopover","closePopover","timeOutId","infoIconOnFocus","infoIconOnFocusOut","e","hasPopover","computed","props","shouldShowTooltipPopoverError","watch","value"],"mappings":";;;;;;;AAyHI,MAAAA,IAAA,CAAA;;;;;;;;;;iBAjFAC,IAAA,KASAC,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,GAAAP,CAAA;AAEnB,MAAAQ,EAAA,QAAAG;AAAA,IAAyB,GAG7BC,IAAA,MAAA;AACI,MAAAH,EAAA;AAAA,IAAY,GAOhBI,IAAA,CAAAC,MAAA;AACI,OAAA,CAAAT,EAAA,SAAA,GAAAS,KAAA,gBAAAA,EAAA,0BAAA,YAAA,CAAAT,EAAA,MAAA,SAAAS,EAAA,aAAA,MACIJ,EAAA;AAAA,IACJ,GAGJK,IAAAC,EAAA,MAAAC,EAAA,eAAAd,EAAA,iBAAA,CAAA,GAEAe,IAAAF,EAAA,MAAA,CAAAC,EAAA,eAAA,CAAAF,EAAA,KAAA;AAEA,WAAAI;AAAA,MAAAD;AAAA,MACI,CAAAE,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA;AAAA,YAAU;AAAA,UACN;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dashed-underline.BnBP41jp.js","sources":["../../src/components/dashed-underline/dashed-underline.vue"],"sourcesContent":["<template>\n    <span\n        ref=\"element\"\n        v-bento-tooltip-directive:[tooltipPosition]=\"tooltipText\"\n        class=\"b-dashed-underline\"\n        tabindex=\"0\"\n        @mouseenter=\"openPopover\"\n        @mouseleave=\"closePopover\"\n        @focus=\"infoIconOnFocus\"\n        @focusout=\"infoIconOnFocusOut\"\n    >\n        <slot></slot>\n        <bento-popover\n            v-if=\"element && hasPopover\"\n            :open=\"isOpen\"\n            :target-element=\"element\"\n            :position=\"popoverPosition\"\n            role=\"tooltip\"\n            fit-content\n            disable-focus-trap\n        >\n            <slot name=\"popover-content\">\n                <bento-typography>\n                    {{ popoverText }}\n                </bento-typography>\n            </slot>\n        </bento-popover>\n    </span>\n</template>\n\n<script lang=\"ts\" setup>\n    import { computed, ref, useSlots, watch } from 'vue';\n    import { BentoPopover, type BentoPopoverPositions } from '@/components/popover';\n    import {\n        type BentoTooltipPosition,\n        BentoTooltipDirective as vBentoTooltipDirective,\n    } from '@/directives/tooltip/index';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n\n    const CLOSING_POPOVER_DELAY_MS = 200;\n\n    const props = defineProps({\n  popoverText: { default: null },\n  popoverPosition: { default: 'top' },\n  tooltipText: { default: null },\n  tooltipPosition: { default: '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 infoIconOnFocus = () => {\n        openPopover();\n    };\n\n    /**\n     * Only close popover on blur if the newly focus element is not a child of this element\n     * @param e - the event that contains the newly focused element\n     */\n    const infoIconOnFocusOut = (e: FocusEvent) => {\n        if (!element.value || !(e?.relatedTarget instanceof Element) || !element.value.contains(e.relatedTarget)) {\n            closePopover();\n        }\n    };\n\n    const hasPopover = computed(() => props.popoverText || hasSlot('popover-content'));\n\n    const shouldShowTooltipPopoverError = computed(() => !props.tooltipText && !hasPopover.value);\n\n    watch(\n        shouldShowTooltipPopoverError,\n        value => {\n            if (value) {\n                throw new Error(\n                    'BentoDashedUnderline requires either a tooltip or a popover to be configured. Check the docs for more info.'\n                );\n            }\n        },\n        { immediate: true }\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * The dashed underline serves as a visual cue to indicate that additional information is available for\n     * a specific word or phrase without adding an icon.\n     *\n     * @example\n     * import { BentoDashedUnderline } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashedUnderline },\n     *     template: `\n     *          <bento-dashed-underline>\n     *              annotated text\n     *          </bento-dashed-underline>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashed-underline.scss\" />\n"],"names":["__default__","CLOSING_POPOVER_DELAY_MS","slots","useSlots","hasSlot","useHasSlot","element","ref","isOpen","closingTimeOutId","openPopover","closePopover","timeOutId","infoIconOnFocus","infoIconOnFocusOut","e","hasPopover","computed","props","shouldShowTooltipPopoverError","watch","value"],"mappings":";;;;;;;AAyHI,MAAAA,IAAA,CAAA;;;;;;;;;;iBAjFAC,IAAA,KASAC,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,GAAAP,CAAA;AAEnB,MAAAQ,EAAA,QAAAG;AAAA,IAAyB,GAG7BC,IAAA,MAAA;AACI,MAAAH,EAAA;AAAA,IAAY,GAOhBI,IAAA,CAAAC,MAAA;AACI,OAAA,CAAAT,EAAA,SAAA,GAAAS,KAAA,gBAAAA,EAAA,0BAAA,YAAA,CAAAT,EAAA,MAAA,SAAAS,EAAA,aAAA,MACIJ,EAAA;AAAA,IACJ,GAGJK,IAAAC,EAAA,MAAAC,EAAA,eAAAd,EAAA,iBAAA,CAAA,GAEAe,IAAAF,EAAA,MAAA,CAAAC,EAAA,eAAA,CAAAF,EAAA,KAAA;AAEA,WAAAI;AAAA,MAAAD;AAAA,MACI,CAAAE,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA;AAAA,YAAU;AAAA,UACN;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{data-grid-template.2xocKVqX.js → data-grid-template.CY3uHWRY.js}

@@ -1,6 +1,6 @@
 import { defineComponent as m, useSlots as u, ref as T, computed as b, provide as v, toRef as y } from "vue";
-import { B as C } from "./header.BmNDoXio.js";
-import { B as g, a as R } from "./tabs.D4ORafqH.js";
+import { B as C } from "./header.Nh_SoSJP.js";
+import { B as g, a as R } from "./tabs.D8Ni3Zfb.js";
 import { u as I } from "./use-has-slot.C9lQZ6nz.js";
 import { D as S } from "./data-grid-template.keys.2_AkxuNT.js";
 import { n as h } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -66,4 +66,4 @@ const N = G.exports;
 export {
   N as d
 };
-//# sourceMappingURL=data-grid-template.2xocKVqX.js.map
+//# sourceMappingURL=data-grid-template.CY3uHWRY.js.map

package/dist/chunks/{data-grid-template.2xocKVqX.js.map → data-grid-template.CY3uHWRY.js.map}

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