@adyen/bento-vue2 2.1.0 → 2.2.0

package/dist/chunks/{dashboard-section.yS2FNoIV.js.map → dashboard-section.BJGzt3yh.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dashboard-section.yS2FNoIV.js","sources":["../../src/templates/dashboard-template/dashboard-template.vue","../../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 = defineProps({\n  header: null,\n  tabs: { default: undefined },\n  stickyTabs: { type: Boolean, default: false },\n  stickyFilters: { type: Boolean, default: false }\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 = defineProps({\n  header: null,\n  halfWidth: { type: Boolean, default: false }\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","slots","useSlots","hasSlot","useHasSlot","tabsRef","ref","filtersRef","isFiltersPinned","filtersElementObserver","tabsPosition","hasStickyFilters","computed","props","hasStickyTabs","dashboardFiltersConditionalClasses","dashboardTopSectionConditionalClasses","tabsSlots","el","getTabTitle","index","computedTabsOptions","y","useWindowScroll","watch","observeSizeOfElement","filtersHeight","onUnmounted","__default__","conditionalClasses","onMounted"],"mappings":";;;;;;;;;AA6II,MAAAA,IAAA,CAAA;;;;;;;;;;iBAtFAC,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,SAAAM,EAAA,aAAA,GACAC,IAAAF,EAAA,MAAAP,EAAA,SAAAQ,EAAA,UAAA,GAEAE,IAAAH,EAAA,OAAA;AAAA,MAA2D,yCAAAC,EAAA;AAAA,MACR,8CAAAF,EAAA,SAAA,CAAAG,EAAA,SAAAN,EAAA;AAAA,IAEuB,EAAA,GAG1EQ,IAAAJ,EAAA,OAAA;AAAA,MAA8D,6CAAAC,EAAA,cAAAA,EAAA;AAAA,IACa,EAAA,GAG3EI,IAAAL,EAAA,MAAA,OAAA,KAAAX,CAAA,EAAA,OAAA,CAAAiB,MAAAA,GAAA,SAAA,MAAA,CAAA,CAAA,GAEAC,IAAA,CAAAC,MAAAP,GAAA,KAAA,OAAAO,CAAA,GAAA,SAAA,OAAAA,IAAA,CAAA,IAEAC,IAAAT,EAAA,MAAAF,EAAA,QAAA,EAAA,KAAAA,EAAA,MAAA,IAAA,MAAA,GAEA,EAAA,GAAAY,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAAjB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAgB,EAAAlB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAO,EAAA,OAAA;AACI,kBAAAY,IAAAnB,EAAA,MAAA;AACA,YAAAG,EAAA,QAAAC,EAAA,QAAAe,IAAA;AAAA,UAA8D;AAAA,QAClE,CAAA;AAAA,MAER;AAAA,IACJ,GAGJF;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;AAEJ,QAAAX,EAAA,UACIH,EAAA,QAAAD,EAAA,OAAA,sBAAA,EAAA,QAAA;AAAA,MACJ;AAAA,IACJ,GAGJoB,EAAA,MAAA;AACI,MAAAlB,GAAA,WAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;qBCnCvCmB,IAAA,CAAA;;;;;;;;iBAzCA3B,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA4B,IAAAjB,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;AAG7C,WAAAiB,EAAA,MAAA;AACI,WAAA3B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAU,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dashboard-section.BJGzt3yh.js","sources":["../../src/templates/dashboard-template/dashboard-template.vue","../../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 = defineProps({\n  header: null,\n  tabs: { default: undefined },\n  stickyTabs: { type: Boolean, default: false },\n  stickyFilters: { type: Boolean, default: false }\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 = defineProps({\n  header: null,\n  halfWidth: { type: Boolean, default: false }\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","slots","useSlots","hasSlot","useHasSlot","tabsRef","ref","filtersRef","isFiltersPinned","filtersElementObserver","tabsPosition","hasStickyFilters","computed","props","hasStickyTabs","dashboardFiltersConditionalClasses","dashboardTopSectionConditionalClasses","tabsSlots","el","getTabTitle","index","computedTabsOptions","y","useWindowScroll","watch","observeSizeOfElement","filtersHeight","onUnmounted","__default__","conditionalClasses","onMounted"],"mappings":";;;;;;;;;AA6II,MAAAA,IAAA,CAAA;;;;;;;;;;iBAtFAC,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,SAAAM,EAAA,aAAA,GACAC,IAAAF,EAAA,MAAAP,EAAA,SAAAQ,EAAA,UAAA,GAEAE,IAAAH,EAAA,OAAA;AAAA,MAA2D,yCAAAC,EAAA;AAAA,MACR,8CAAAF,EAAA,SAAA,CAAAG,EAAA,SAAAN,EAAA;AAAA,IAEuB,EAAA,GAG1EQ,IAAAJ,EAAA,OAAA;AAAA,MAA8D,6CAAAC,EAAA,cAAAA,EAAA;AAAA,IACa,EAAA,GAG3EI,IAAAL,EAAA,MAAA,OAAA,KAAAX,CAAA,EAAA,OAAA,CAAAiB,MAAAA,GAAA,SAAA,MAAA,CAAA,CAAA,GAEAC,IAAA,CAAAC,MAAAP,GAAA,KAAA,OAAAO,CAAA,GAAA,SAAA,OAAAA,IAAA,CAAA,IAEAC,IAAAT,EAAA,MAAAF,EAAA,QAAA,EAAA,KAAAA,EAAA,MAAA,IAAA,MAAA,GAEA,EAAA,GAAAY,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAAjB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAgB,EAAAlB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAO,EAAA,OAAA;AACI,kBAAAY,IAAAnB,EAAA,MAAA;AACA,YAAAG,EAAA,QAAAC,EAAA,QAAAe,IAAA;AAAA,UAA8D;AAAA,QAClE,CAAA;AAAA,MAER;AAAA,IACJ,GAGJF;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;AAEJ,QAAAX,EAAA,UACIH,EAAA,QAAAD,EAAA,OAAA,sBAAA,EAAA,QAAA;AAAA,MACJ;AAAA,IACJ,GAGJoB,EAAA,MAAA;AACI,MAAAlB,GAAA,WAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;qBCnCvCmB,IAAA,CAAA;;;;;;;;iBAzCA3B,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA4B,IAAAjB,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;AAG7C,WAAAiB,EAAA,MAAA;AACI,WAAA3B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAU,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{dashed-underline.RcRbre03.js → dashed-underline.CCGmjCty.js}

@@ -1,8 +1,8 @@
 import { defineComponent as v, useSlots as u, ref as c, computed as i, watch as f } from "vue";
-import { e as m, h as _ } from "./button-actions.CdetBz3J.js";
+import { e as m, h as _ } from "./button-actions.B332AjJp.js";
 import { u as h } from "./use-has-slot.C9lQZ6nz.js";
 import { B as T } from "./typography.Cd386LC_.js";
-import { b as B } from "./tooltip.BOe7LOfD.js";
+import { b as B } from "./tooltip.BeDzwoCN.js";
 import { u as b } from "./use-bento-delayed-hover.D6QjSugc.js";
 import { n as x } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/dashed-underline.css";
@@ -51,4 +51,4 @@ const k = w.exports;
 export {
   k as B
 };
-//# sourceMappingURL=dashed-underline.RcRbre03.js.map
+//# sourceMappingURL=dashed-underline.CCGmjCty.js.map

package/dist/chunks/{dashed-underline.RcRbre03.js.map → dashed-underline.CCGmjCty.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dashed-underline.RcRbre03.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        v-on=\"hoverEvents\"\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=\"hoverEvents\">\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 { useBentoDelayedHover } from '@/composables';\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 props = defineProps({\n  popoverText: { default: null },\n  popoverTitle: { default: null },\n  popoverPosition: { default: 'top' },\n  popoverSize: { default: 'fit-content' },\n  teleport: { default: () => ({\n            disabled: true,\n        }) },\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\n    const { isOpen, hoverEvents } = useBentoDelayedHover();\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     * 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__","slots","useSlots","hasSlot","useHasSlot","element","ref","isOpen","hoverEvents","useBentoDelayedHover","hasPopover","computed","props","shouldShowTooltipPopoverError","watch","value"],"mappings":";;;;;;;;AAkGI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;iBAzCAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,IAAA,GAEA,EAAA,QAAAC,GAAA,aAAAC,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,MAAAC,EAAA,eAAAT,EAAA,iBAAA,CAAA,GAEAU,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.CCGmjCty.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        v-on=\"hoverEvents\"\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=\"hoverEvents\">\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 { useBentoDelayedHover } from '@/composables';\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 props = defineProps({\n  popoverText: { default: null },\n  popoverTitle: { default: null },\n  popoverPosition: { default: 'top' },\n  popoverSize: { default: 'fit-content' },\n  teleport: { default: () => ({\n            disabled: true,\n        }) },\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\n    const { isOpen, hoverEvents } = useBentoDelayedHover();\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     * 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__","slots","useSlots","hasSlot","useHasSlot","element","ref","isOpen","hoverEvents","useBentoDelayedHover","hasPopover","computed","props","shouldShowTooltipPopoverError","watch","value"],"mappings":";;;;;;;;AAkGI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;iBAzCAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,IAAA,GAEA,EAAA,QAAAC,GAAA,aAAAC,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA,MAAAC,EAAA,eAAAT,EAAA,iBAAA,CAAA,GAEAU,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.B5A9whlD.js → data-grid-template.BMdKtfXm.js}

@@ -1,7 +1,7 @@
 import { defineComponent as R, useSlots as S, ref as r, computed as s, provide as I, toRef as u } from "vue";
-import { B as h } from "./header.CDiold9n.js";
-import { B } from "./inspector.BwtV4rE9.js";
-import { a as x, B as A } from "./tab.zeRxc-3T.js";
+import { B as h } from "./header.CVKe-1fx.js";
+import { B } from "./inspector.DZau1W4j.js";
+import { a as x, B as A } from "./tab.BHaKwojJ.js";
 import { u as E } from "./use-has-slot.C9lQZ6nz.js";
 import { D } from "./data-grid-template.keys.VezYtHtM.js";
 import { n as G } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -99,4 +99,4 @@ const q = $.exports;
 export {
   q as d
 };
-//# sourceMappingURL=data-grid-template.B5A9whlD.js.map
+//# sourceMappingURL=data-grid-template.BMdKtfXm.js.map

package/dist/chunks/{data-grid-template.B5A9whlD.js.map → data-grid-template.BMdKtfXm.js.map}

@@ -1 +1 @@
-{"version":3,"file":"data-grid-template.B5A9whlD.js","sources":["../../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([\"update:tabs\", \"update:is-open:inspector\", \"update:active-page:inspector\", \"expand:inspector\"]);\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__","slots","useSlots","hasSlot","useHasSlot","tabsRef","ref","additionalContentRef","inspectorRef","additionalContentConditionalClasses","computed","props","computedInspectorProps","computedStickyAdditionalContentHeight","computedTabsRef","tabsSlots","el","inspectorEvents","value","emit","emitTabs","newActiveTabIndex","getTabTitle","index","registerDatagridInDataGridTemplate","stickyTabs","toRef","stickyAdditionalContent","provide","DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY"],"mappings":";;;;;;;;AAuLI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAhFAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAIAI,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GAEAG,IAAAC,EAAA,OAAA;AAAA,MAA4D,oDAAAC,EAAA;AAAA,IACE,EAAA,GAG9DC,IAAAF,EAAA,OAAA;AAAA,MAA+C,OAAA;AAAA,MACpC,GAAAC,EAAA;AAAA,IACE,EAAA,GAGbE,IAAAH,EAAA,MAAAH,GAAA,OAAA,YAAA,GAEAO,IAAAJ,EAAA,MAAAL,EAAA,OAAA,OAAA,cAAA,GAEAU,IAAAL,EAAA,MAAA,OAAA,KAAAT,CAAA,EAAA,OAAA,CAAAe,MAAAA,GAAA,SAAA,MAAA,CAAA,CAAA,GAEAC,IAAAP,EAAA,OAAA;AAAA,MAAwC,kBAAA,CAAAQ,MAAAC,EAAA,4BAAAD,CAAA;AAAA,MACwC,sBAAA,CAAAA,MAAAC,EAAA,gCAAAD,CAAA;AAAA,MACO,QAAA,CAAAA,MAAAC,EAAA,oBAAAD,CAAA;AAAA,IACzB,EAAA,GAG9DE,IAAA,CAAAC,MAAA;AACI,MAAAF,EAAA,eAAA,EAAA,GAAAR,EAAA,MAAA,gBAAAU,EAAA,CAAA;AAAA,IAAwE,GAG5EC,IAAA,CAAAC,MAAAZ,GAAA,KAAA,OAAAY,CAAA,GAAA,SAAA,OAAAA,IAAA,CAAA,IAEAC,IAAA,MAAA;AAEI,YAAAC,IAAAC,EAAAf,GAAA,YAAA,GACAgB,IAAAD,EAAAf,GAAA,yBAAA;AAKA,aAAA;AAAA,QAAO;AAAA,QACH,YAAAc;AAAA,QACA,SANJX;AAAA,QAOI,yBAAAa;AAAA,QACA,0BAPJpB;AAAA,MAQI;AAAA,IACJ;AAGJ,WAAAqB,EAAAC,GAAAL,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"data-grid-template.BMdKtfXm.js","sources":["../../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([\"update:tabs\", \"update:is-open:inspector\", \"update:active-page:inspector\", \"expand:inspector\"]);\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__","slots","useSlots","hasSlot","useHasSlot","tabsRef","ref","additionalContentRef","inspectorRef","additionalContentConditionalClasses","computed","props","computedInspectorProps","computedStickyAdditionalContentHeight","computedTabsRef","tabsSlots","el","inspectorEvents","value","emit","emitTabs","newActiveTabIndex","getTabTitle","index","registerDatagridInDataGridTemplate","stickyTabs","toRef","stickyAdditionalContent","provide","DATA_GRID_REGISTER_TEMPLATE_INJECTION_KEY"],"mappings":";;;;;;;;AAuLI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAhFAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAIAI,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,IAAA,GACAE,IAAAF,EAAA,IAAA,GAEAG,IAAAC,EAAA,OAAA;AAAA,MAA4D,oDAAAC,EAAA;AAAA,IACE,EAAA,GAG9DC,IAAAF,EAAA,OAAA;AAAA,MAA+C,OAAA;AAAA,MACpC,GAAAC,EAAA;AAAA,IACE,EAAA,GAGbE,IAAAH,EAAA,MAAAH,GAAA,OAAA,YAAA,GAEAO,IAAAJ,EAAA,MAAAL,EAAA,OAAA,OAAA,cAAA,GAEAU,IAAAL,EAAA,MAAA,OAAA,KAAAT,CAAA,EAAA,OAAA,CAAAe,MAAAA,GAAA,SAAA,MAAA,CAAA,CAAA,GAEAC,IAAAP,EAAA,OAAA;AAAA,MAAwC,kBAAA,CAAAQ,MAAAC,EAAA,4BAAAD,CAAA;AAAA,MACwC,sBAAA,CAAAA,MAAAC,EAAA,gCAAAD,CAAA;AAAA,MACO,QAAA,CAAAA,MAAAC,EAAA,oBAAAD,CAAA;AAAA,IACzB,EAAA,GAG9DE,IAAA,CAAAC,MAAA;AACI,MAAAF,EAAA,eAAA,EAAA,GAAAR,EAAA,MAAA,gBAAAU,EAAA,CAAA;AAAA,IAAwE,GAG5EC,IAAA,CAAAC,MAAAZ,GAAA,KAAA,OAAAY,CAAA,GAAA,SAAA,OAAAA,IAAA,CAAA,IAEAC,IAAA,MAAA;AAEI,YAAAC,IAAAC,EAAAf,GAAA,YAAA,GACAgB,IAAAD,EAAAf,GAAA,yBAAA;AAKA,aAAA;AAAA,QAAO;AAAA,QACH,YAAAc;AAAA,QACA,SANJX;AAAA,QAOI,yBAAAa;AAAA,QACA,0BAPJpB;AAAA,MAQI;AAAA,IACJ;AAGJ,WAAAqB,EAAAC,GAAAL,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{data-grid.Pg5iM8CJ.js → data-grid.DP4IQ00C.js}

@@ -1,47 +1,47 @@
 import { ref as _, onMounted as be, nextTick as q, watch as ee, onUnmounted as _t, reactive as ke, toRefs as $e, computed as f, watchEffect as En, onBeforeUpdate as yn, getCurrentInstance as re, defineComponent as te, inject as ie, toRef as Be, useSlots as We, provide as ye } from "vue";
 import { C as Ln } from "./checkmark-circle-fill.Ds9Mwqpi.js";
-import { W as Tn } from "./alert.BddJPWMN.js";
+import { W as Tn } from "./warning-filled.DI6aB6vH.js";
 /* empty css              */
 import { n as V } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { C as Ct } from "./cross.szJ_ZUTI.js";
 import { N as ot } from "./minus-small.CAycYt5H.js";
-import { b as On } from "./popper-container.Cj3AWXSd.js";
-import { E as W, b as vt, B as In, T as Nn } from "./tooltip.BOe7LOfD.js";
-import { B as Dn } from "./dashed-underline.RcRbre03.js";
+import { b as On } from "./popper-container.Co4j6qME.js";
+import { E as W, b as vt, B as In, T as Nn } from "./tooltip.BeDzwoCN.js";
+import { B as Dn } from "./dashed-underline.CCGmjCty.js";
 import { B as pe, p as pt } from "./typography.Cd386LC_.js";
 import { u as me } from "./index.CPOlyau9.js";
-import { B as Mn } from "./tag.CgsX8v2m.js";
-import { B as xn } from "./action-bar.D29UQHoA.js";
-import { B as Fn } from "./pagination.DZEVT-CA.js";
+import { B as Mn } from "./tag.DSyMRETc.js";
+import { B as xn } from "./action-bar.DCknEWYe.js";
+import { B as Fn } from "./pagination.BVGAPUhn.js";
 import { B as Ge } from "./loading-indicator.PxbRzshH.js";
 import { u as Ve } from "./use-has-slot.C9lQZ6nz.js";
 import { u as Pn } from "./use-touch-device.DTqFAbXh.js";
 import { g as Te } from "./generate-uid.DBWe4g6T.js";
-import { a as zn } from "./filter-bar.Bio9nf9V.js";
-import { B as Bn } from "./empty-state.L3DTfiY7.js";
+import { a as zn } from "./filter-bar.U5VrFM6-.js";
+import { B as Bn } from "./empty-state.jbVOuwyN.js";
 import { E as Un } from "./tabs.keys.B4qGhjp2.js";
 import { D as kn } from "./data-grid-template.keys.VezYtHtM.js";
 import { h as $n } from "./index.CL3TXc0a.js";
 import { o as ht } from "./resize.Bqks3WUm.js";
 import "./index.Cl4_42j5.js";
-import { g as bt } from "./focus-trap.fd6_d2EW.js";
-import { B as wt } from "./checkbox.CnuIUi4-.js";
+import { g as bt } from "./focus-trap.BDpcWIxI.js";
+import { B as wt } from "./checkbox.D-S3f_zM.js";
 import { B as St } from "./button.tsTeQRcP.js";
-import { c as He, f as Rt, h as Wn, b as Gn, a as Vn, O as st, D as Hn } from "./button-actions.CdetBz3J.js";
+import { c as He, f as Rt, h as Wn, b as Gn, a as Vn, O as st, D as Hn } from "./button-actions.B332AjJp.js";
 import { E as lt } from "./link.iNnolG9W.js";
-import { C as at } from "./copy.B12-P_8A.js";
+import { C as at } from "./copy.Cmu6Z-5X.js";
 import { C as Zn } from "./chevron-down.B_QiVCoO.js";
 import { C as jn } from "./chevron-up.YQRo8uKs.js";
 import { u as qn } from "./use-expandable-content-height.DmFeas9-.js";
-import { B as Kn } from "./info-icon.D11usblr.js";
-import { j as Yn, f as Xn } from "./dropdown.CpZQYisR.js";
-import { B as it } from "./popover.types.DvIwSAAp.js";
+import { B as Kn } from "./info-icon.D_VTjUV3.js";
+import { j as Yn, f as Xn } from "./dropdown.Dd8RNGXv.js";
+import { B as it } from "./popover.types.CoDfZgDc.js";
 import { A as Jn } from "./arrow-left.BBflhjQa.js";
 import { A as Qn } from "./arrow-right.2jTnMmVP.js";
 import { H as eo, S as to } from "./show.Cs2jT9TJ.js";
 import { l as rt } from "./events.BQOQSSb7.js";
 import { B as At } from "./toggle.BL_w2xUm.js";
-import { B as no } from "./search-bar.DrIwlAQj.js";
+import { B as no } from "./search-bar.DFvrkNTD.js";
 import { S as oo } from "./search.Bzm6F8rR.js";
 import { B as so } from "./directive.D1-d-C2K.js";
 import "../assets/data-grid.css";
@@ -2065,7 +2065,7 @@ const Hs = Vs.exports, Zs = {
       default: !1
     },
     /**
-     * Enables the nested content slot functionality.
+     * Enables the nested rows functionality.
      */
     hasNestedRows: {
       type: Boolean,
@@ -2401,7 +2401,7 @@ var qs = function() {
   Ks,
   !1,
   null,
-  "93233429"
+  "a7f556cd"
 );
 const Xs = Ys.exports, Js = {
   __name: "warning-circle-fill",
@@ -3264,4 +3264,4 @@ export {
   ve as h,
   ae as i
 };
-//# sourceMappingURL=data-grid.Pg5iM8CJ.js.map
+//# sourceMappingURL=data-grid.DP4IQ00C.js.map