@adyen/bento-vue2 1.64.1 → 1.66.0

package/dist/chunks/{dashboard-section.Bz54Z6Hh.js.map → dashboard-section.CcEIwDqX.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dashboard-section.Bz54Z6Hh.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","_b","_a","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,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;;AAAA,eAAAC,KAAAC,IAAAT,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAS,EAAAF,OAAA,gBAAAC,EAAA,UAAA,OAAAD,IAAA,CAAA;AAAA,OAEAG,IAAAX,EAAA,MAAAF,EAAA,QAAA,EAAA,KAAAA,EAAA,MAAA,IAAA,MAAA,GAEA,EAAA,GAAAc,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAAnB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAkB,EAAApB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAO,EAAA,OAAA;AACI,kBAAAc,IAAArB,EAAA,MAAA;AACA,YAAAG,EAAA,QAAAC,EAAA,QAAAiB,IAAA;AAAA,UAA8D;AAAA,QAClE,CAAA;AAAA,MAER;AAAA,IACJ,GAGJF;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;;AAEJ,QAAAb,EAAA,UACIH,EAAA,UAAAc,IAAAf,EAAA,UAAA,gBAAAe,EAAA,wBAAA,SAAA;AAAA,MACJ;AAAA,IACJ,GAGJO,EAAA,MAAA;AACI,MAAApB,KAAA,QAAAA,EAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;qBCnCvCqB,IAAA,CAAA;;;;;;;;iBAzCA7B,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA8B,IAAAnB,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;AAG7C,WAAAmB,EAAA,MAAA;AACI,WAAA7B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAU,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dashboard-section.CcEIwDqX.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","_b","_a","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,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;;AAAA,eAAAC,KAAAC,IAAAT,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAS,EAAAF,OAAA,gBAAAC,EAAA,UAAA,OAAAD,IAAA,CAAA;AAAA,OAEAG,IAAAX,EAAA,MAAAF,EAAA,QAAA,EAAA,KAAAA,EAAA,MAAA,IAAA,MAAA,GAEA,EAAA,GAAAc,EAAA,IAAAC,EAAA;AAEA,WAAAC;AAAA,MAAA,MAAAnB,EAAA;AAAA,MACqB,MAAA;AAEb,QAAA,CAAAE,KAAAF,EAAA,UACIE,IAAAkB,EAAApB,EAAA,OAAA,MAAA;AACI,cAAAA,EAAA,SAAAO,EAAA,OAAA;AACI,kBAAAc,IAAArB,EAAA,MAAA;AACA,YAAAG,EAAA,QAAAC,EAAA,QAAAiB,IAAA;AAAA,UAA8D;AAAA,QAClE,CAAA;AAAA,MAER;AAAA,IACJ,GAGJF;AAAA,MAAA,MAAAF,EAAA;AAAA,MACY,MAAA;;AAEJ,QAAAb,EAAA,UACIH,EAAA,UAAAc,IAAAf,EAAA,UAAA,gBAAAe,EAAA,wBAAA,SAAA;AAAA,MACJ;AAAA,IACJ,GAGJO,EAAA,MAAA;AACI,MAAApB,KAAA,QAAAA,EAAA;AAAA,IAAmC,CAAA;;;;;;;;;;;;;;;;;;qBCnCvCqB,IAAA,CAAA;;;;;;;;iBAzCA7B,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEA8B,IAAAnB,EAAA,OAAA;AAAA,MAA2C,mCAAAC,EAAA;AAAA,IACE,EAAA;AAG7C,WAAAmB,EAAA,MAAA;AACI,WAAA7B,EAAA,eAAA,KAAAA,EAAA,eAAA,MAAAU,EAAA;AACI,cAAA,IAAA,MAAA,yEAAA;AAAA,IACJ,CAAA;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{data-grid-template.DtFRjaR8.js → data-grid-template.DJQcVuPs.js}

@@ -1,7 +1,7 @@
 import { defineComponent as R, useSlots as S, ref as d, computed as i, provide as I, toRef as b } from "vue";
-import { B } from "./header.Cb644uAi.js";
-import { B as h } from "./inspector.BI28vKQz.js";
-import { a as x, B as A } from "./tabs.Dx6teJGW.js";
+import { B as h } from "./header.hTMmMN8n.js";
+import { B } from "./inspector.BI28vKQz.js";
+import { B as x, a as A } from "./tab.BhWPBxcB.js";
 import { u as E } from "./use-has-slot.C9lQZ6nz.js";
 import { D } from "./data-grid-template.keys.2_AkxuNT.js";
 import { n as G } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -15,7 +15,7 @@ const H = {}, O = /* @__PURE__ */ R({
      */
     header: {
       type: Object,
-      required: !0
+      default: void 0
     },
     /**
      * All the tab properties that can be set on the inner tab components.
@@ -49,8 +49,8 @@ const H = {}, O = /* @__PURE__ */ R({
     }
   },
   emits: ["update:tabs", "update:is-open:inspector", "update:active-page:inspector", "expand:inspector"],
-  setup(p, { emit: t }) {
-    const o = p, n = S(), l = E(n), s = d(null), r = d(null), _ = d(null), m = i(() => ({
+  setup(l, { emit: t }) {
+    const o = l, n = S(), p = E(n), s = d(null), r = d(null), _ = d(null), m = i(() => ({
       "b-data-grid-template__additional-content--sticky": o.stickyAdditionalContent
     })), T = i(() => ({
       title: "",
@@ -80,15 +80,17 @@ const H = {}, O = /* @__PURE__ */ R({
         additionalContentSlotRef: r
       };
     };
-    return I(D, f), { __sfc: !0, props: o, slots: n, hasSlot: l, emit: t, tabsRef: s, additionalContentRef: r, inspectorRef: _, additionalContentConditionalClasses: m, computedInspectorProps: T, computedStickyAdditionalContentHeight: y, computedTabsRef: u, tabsSlots: C, inspectorEvents: v, emitTabs: k, getTabTitle: g, registerDatagridInDataGridTemplate: f, BentoHeader: B, BentoInspector: h, BentoTab: A, BentoTabs: x };
+    return I(D, f), { __sfc: !0, props: o, slots: n, hasSlot: p, emit: t, tabsRef: s, additionalContentRef: r, inspectorRef: _, additionalContentConditionalClasses: m, computedInspectorProps: T, computedStickyAdditionalContentHeight: y, computedTabsRef: u, tabsSlots: C, inspectorEvents: v, emitTabs: k, getTabTitle: g, registerDatagridInDataGridTemplate: f, BentoHeader: h, BentoInspector: B, BentoTab: A, BentoTabs: x };
   }
 });
 var j = function() {
   var t = this, o = t._self._c, n = t._self._setupProxy;
   return o("main", { staticClass: "b-data-grid-template" }, [o(n.BentoInspector, t._g(t._b({ ref: "inspectorRef", scopedSlots: t._u([{ key: "page", fn: function() {
-    return [o(n.BentoHeader, t._b({ staticClass: "b-data-grid-template__header", attrs: { variant: "component" }, scopedSlots: t._u([n.hasSlot("infoIconTooltipContent") ? { key: "infoIconTooltipContent", fn: function() {
-      return [t._t("infoIconTooltipContent")];
-    }, proxy: !0 } : null], null, !0) }, "bento-header", t.header, !1)), n.hasSlot("additionalContent") ? o("div", { ref: "additionalContentRef", staticClass: "b-data-grid-template__additional-content", class: n.additionalContentConditionalClasses }, [t._t("additionalContent")], 2) : t._e(), n.tabsSlots.length > 1 ? o(n.BentoTabs, { ref: "tabsRef", attrs: { "active-tab-index": t.tabs.activeTabIndex, sticky: t.stickyTabs, "sticky-options": t.stickyAdditionalContent ? { top: n.computedStickyAdditionalContentHeight } : null }, on: { "update:active-tab-index": n.emitTabs } }, t._l(n.tabsSlots, function(l, s) {
+    return [o("div", { staticClass: "b-data-grid-template__header" }, [t._t("header", function() {
+      return [o(n.BentoHeader, t._b({ attrs: { variant: "component" }, scopedSlots: t._u([n.hasSlot("infoIconTooltipContent") ? { key: "infoIconTooltipContent", fn: function() {
+        return [t._t("infoIconTooltipContent")];
+      }, proxy: !0 } : null], null, !0) }, "bento-header", t.header, !1))];
+    })], 2), n.hasSlot("additionalContent") ? o("div", { ref: "additionalContentRef", staticClass: "b-data-grid-template__additional-content", class: n.additionalContentConditionalClasses }, [t._t("additionalContent")], 2) : t._e(), n.tabsSlots.length > 1 ? o(n.BentoTabs, { ref: "tabsRef", attrs: { "active-tab-index": t.tabs.activeTabIndex, sticky: t.stickyTabs, "sticky-options": t.stickyAdditionalContent ? { top: n.computedStickyAdditionalContentHeight } : null }, on: { "update:active-tab-index": n.emitTabs } }, t._l(n.tabsSlots, function(p, s) {
       return o(n.BentoTab, { key: `tab-${s}`, attrs: { title: n.getTabTitle(s) } }, [t._t(`tab-${s + 1}`)], 2);
     }), 1) : t._t("default")];
   }, proxy: !0 }, { key: "content", fn: function() {
@@ -100,10 +102,10 @@ var j = function() {
   P,
   !1,
   null,
-  "9497c1d5"
+  "e1b91496"
 );
-const Y = $.exports;
+const q = $.exports;
 export {
-  Y as d
+  q as d
 };
-//# sourceMappingURL=data-grid-template.DtFRjaR8.js.map
+//# sourceMappingURL=data-grid-template.DJQcVuPs.js.map

package/dist/chunks/data-grid-template.DJQcVuPs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-grid-template.DJQcVuPs.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\" variant=\"component\">\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, PropType, provide, Ref, ref, toRef, 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","_a","computedTabsRef","_b","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,MAAA;;AAAA,cAAAI,IAAAP,KAAA,gBAAAA,EAAA,UAAA,gBAAAO,EAAA;AAAA,KAAA,GAEAC,IAAAL,EAAA,MAAA;;AAAA,cAAAM,KAAAF,IAAAT,EAAA,UAAA,gBAAAS,EAAA,UAAA,gBAAAE,EAAA;AAAA,KAAA,GAEAC,IAAAP,EAAA,MAAA,OAAA,KAAAT,CAAA,EAAA,OAAA,CAAAiB,MAAAA,KAAA,gBAAAA,EAAA,SAAA,OAAA,CAAA,GAEAC,IAAAT,EAAA,OAAA;AAAA,MAAwC,kBAAA,CAAAU,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,GAAAV,EAAA,MAAA,gBAAAY,EAAA,CAAA;AAAA,IAAwE,GAG5EC,IAAA,CAAAC,MAAA;;AAAA,eAAAT,KAAAF,IAAAH,KAAA,gBAAAA,EAAA,KAAA,SAAA,gBAAAG,EAAAW,OAAA,gBAAAT,EAAA,UAAA,OAAAS,IAAA,CAAA;AAAA,OAEAC,IAAA,MAAA;AAEI,YAAAC,IAAAC,EAAAjB,GAAA,YAAA,GACAkB,IAAAD,EAAAjB,GAAA,yBAAA;AAKA,aAAA;AAAA,QAAO;AAAA,QACH,YAAAgB;AAAA,QACA,SANJZ;AAAA,QAOI,yBAAAc;AAAA,QACA,0BAPJtB;AAAA,MAQI;AAAA,IACJ;AAGJ,WAAAuB,EAAAC,GAAAL,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{data-grid.DCPJKAXM.js → data-grid.t4fCoE2Y.js}

@@ -10,38 +10,38 @@ import { E as oe, B as An, a as On, T as Tn } from "./tooltip.wQsyAwkC.js";
 import { B as Nn } from "./dashed-underline.CEaAmjDa.js";
 import { B as be, p as Ct } from "./typography.J1v_SPG3.js";
 import { u as ce } from "./i18n.BQkEbtPM.js";
-import { B as In } from "./action-bar.DHdrZtmW.js";
-import { B as Dn } from "./pagination.1XBgTs6T.js";
-import { B as $e } from "./loading-indicator.z8COalOc.js";
-import { u as Pe } from "./use-has-slot.C9lQZ6nz.js";
+import { B as In } from "./action-bar.C8zeHAJG.js";
+import { B as Dn } from "./pagination.CW_1yX5C.js";
+import { B as Pe } from "./loading-indicator.z8COalOc.js";
+import { u as $e } from "./use-has-slot.C9lQZ6nz.js";
 import { u as xn } from "./aria-label.CaUURpnB.js";
 import { g as Fn } from "./get-slot-text.BQS5Olxm.js";
-import { B as Te } from "./filter-bar.u3zmwRsM.js";
+import { B as Te } from "./filter-bar.Bx3wivl8.js";
 import { B as Mn } from "./empty-state.mtXfb1BB.js";
-import { E as Bn } from "./tabs.keys.Bc2pSKRw.js";
-import { D as $n } from "./data-grid-template.keys.2_AkxuNT.js";
+import { E as Bn } from "./tabs.keys.Cb4Vw5Jh.js";
+import { D as Pn } from "./data-grid-template.keys.2_AkxuNT.js";
 import { o as Ue } from "./resize.Bqks3WUm.js";
 import "./index.Cl4_42j5.js";
-import { u as Pn } from "./use-expandable-content-height.GkjjbmPy.js";
+import { u as $n } from "./use-expandable-content-height.GkjjbmPy.js";
 import { g as De } from "./generate-uid.NJ8tVoha.js";
 import { B as ht } from "./button.hF-nD1Og.js";
 import { B as pt, O as Un, D as zn } from "./menu.BCD4FW54.js";
 import { E as kn } from "./link.CXy_LoFI.js";
-import { C as Wn } from "./copy.CXeLbvUP.js";
-import { B as wt } from "./checkbox.nHrvoKfp.js";
+import { C as Wn } from "./copy.CF8Fzu2Y.js";
+import { B as wt } from "./checkbox.Bg5FM5Oa.js";
 import { C as Gn } from "./chevron-down.eYtgv5ly.js";
 import { C as Hn } from "./chevron-up.d8cwIlA_.js";
 import { b as St } from "./focus-trap.C-wIQqpO.js";
 import { B as ze } from "./toggle-button.DEVVvpkw.js";
 import { e as Vn, d as Zn } from "./button-actions._OIvTdKt.js";
-import { B as jn } from "./info-icon.B9aTl1nU.js";
+import { B as jn } from "./info-icon.CYOXx8CL.js";
 import { a as Je, B as qn } from "./popover.B05xkQ4e.js";
 import { A as Yn } from "./dialog-page.CLHZqQeU.js";
 import { H as Kn, S as Xn } from "./show.B_mKPF6I.js";
 import { l as Qe } from "./events.CMzGybJJ.js";
 import { B as bt } from "./toggle.DyXL09-x.js";
-import { B as Jn } from "./search-bar.BIVcXNZZ.js";
-import { u as Qn } from "./dropdown.9xELPCKZ.js";
+import { B as Jn } from "./search-bar.5JHI6li0.js";
+import { u as Qn } from "./dropdown.BWsU98dn.js";
 import { S as es } from "./search.D53Ia3rC.js";
 import { B as ts } from "./directive.Cbdox5VL.js";
 import "../assets/data-grid.css";
@@ -711,7 +711,7 @@ const Fs = {
 var Ms = function() {
   var t = this, n = t._self._c;
   return n("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? n("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), n("g", { attrs: { "clip-path": "url(#uia-ui-assets/icons-16-freeze__a" + t.uuid + ")" } }, [n("path", { attrs: { fill: "#001222", d: "M7.99989 14.0605L9.49989 15.5605L10.5605 14.4999L8.75 12.6893V10.9334L10.169 10.116L11.6861 10.9939L12.3501 13.4688L13.7988 13.0801L13.2488 11.0301L15.2988 10.4801L14.9101 9.03129L12.4363 9.695L10.9199 8.81745V7.18276L12.4365 6.3051L14.9101 6.96875L15.2988 5.51999L13.2488 4.96999L13.7988 2.91999L12.3501 2.53129L11.686 5.00635L10.1693 5.88407L8.75 5.06648L8.75 3.31043L10.5605 1.49989L9.49989 0.439226L7.99989 1.93923L6.49989 0.439226L5.43923 1.49989L7.25 3.31066V5.06639L5.83078 5.88392L4.31419 5.00626L3.65018 2.53129L2.20141 2.91998L2.384 3.60052L2.38063 3.60143L2.75032 4.97028L0.701408 5.51999L1.0901 6.96875L1.7708 6.78612L1.77173 6.78955L3.56437 6.30541L5.07992 7.18246L5.07992 8.81775L3.564 9.69502L1.0901 9.03129L0.701408 10.4801L2.75141 11.0301L2.20141 13.0801L3.65018 13.4687L4.31414 10.994L5.83106 10.1161L7.25 10.9335V12.6891L5.43923 14.4999L6.49989 15.5605L7.99989 14.0605ZM9.41992 7.18345V8.81644L7.99992 9.63441L6.57992 8.81644L6.57992 7.18345L7.99992 6.36548L9.41992 7.18345Z" } })]), n("defs", [n("clipPath", { attrs: { id: "uia-ui-assets/icons-16-freeze__a" + t.uuid } }, [n("rect", { attrs: { width: "16", height: "16", fill: "#fff", transform: "matrix(1 0 0 -1 0 16)" } })])])]);
-}, Bs = [], $s = /* @__PURE__ */ G(
+}, Bs = [], Ps = /* @__PURE__ */ G(
   Fs,
   Ms,
   Bs,
@@ -719,9 +719,9 @@ var Ms = function() {
   null,
   null
 );
-const Et = $s.exports;
+const Et = Ps.exports;
 let it = 0;
-const Ps = {
+const $s = {
   beforeCreate() {
     this.uuid = it.toString(), it += 1;
   }
@@ -730,7 +730,7 @@ var Us = function() {
   var t = this, n = t._self._c;
   return n("svg", t._b({ staticClass: "ui-assets-icons-16", attrs: { role: "img", xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", fill: "none" } }, "svg", t.$attrs, !1), [t.$attrs["svg-title"] ? n("title", [t._v(t._s(t.$attrs["svg-title"]))]) : t._e(), n("g", { attrs: { fill: "#001222", "clip-path": "url(#uia-ui-assets/icons-16-sort_ascending__a" + t.uuid + ")" } }, [n("path", { attrs: { d: "M12.0001 1.93945L16.0608 6.00011L15.0001 7.06077L12.75 4.81066V12.75H11.25V4.81089L9.00011 7.06077L7.93945 6.00011L12.0001 1.93945Z" } }), n("path", { attrs: { d: "M6.75 7.25H1.25V8.75H6.75V7.25Z" } }), n("path", { attrs: { d: "M1.25 11.25H8.75V12.75H1.25V11.25Z" } }), n("path", { attrs: { d: "M6.75 3.25H1.25V4.75H6.75V3.25Z" } })]), n("defs", [n("clipPath", { attrs: { id: "uia-ui-assets/icons-16-sort_ascending__a" + t.uuid } }, [n("rect", { attrs: { width: "16", height: "16", fill: "#fff" } })])])]);
 }, zs = [], ks = /* @__PURE__ */ G(
-  Ps,
+  $s,
   Us,
   zs,
   !1,
@@ -1051,7 +1051,7 @@ const Js = Xs.exports, Qs = {
         "b-data-grid-columns--unfrozen": !0
       };
     }), j = (i, B) => i && B === 0 ? Je.BOTTOM_START : Je.BOTTOM_END, V = (i, B) => {
-      var Y, K, Q, ve, me, ue, b, F, P, $;
+      var Y, K, Q, ve, me, ue, b, F, $, P;
       return {
         "b-data-grid-columns__column--column-hovered": i.field === e.hoveredOverColumnState.hoveredOverColumnField,
         "b-data-grid-columns__column--column-hovered-no-border-left": i.field === e.hoveredOverColumnState.hoveredOverColumnField && e.hoveredOverColumnState.noBorderLeft,
@@ -1064,7 +1064,7 @@ const Js = Xs.exports, Qs = {
         "b-data-grid-columns__column--frozen": i == null ? void 0 : i.frozen,
         "b-data-grid-columns__column--is-re-ordering": (i == null ? void 0 : i.field) === ((ve = (Q = e.draggingColumns) == null ? void 0 : Q.dragging) == null ? void 0 : ve.field),
         "b-data-grid-columns__column--is-re-ordering-target-left": (i == null ? void 0 : i.field) === ((ue = (me = e.draggingColumns) == null ? void 0 : me.target) == null ? void 0 : ue.field) && ((b = e.draggingColumns) == null ? void 0 : b.dragToLeft),
-        "b-data-grid-columns__column--is-re-ordering-target-right": (i == null ? void 0 : i.field) === ((P = (F = e.draggingColumns) == null ? void 0 : F.target) == null ? void 0 : P.field) && !(($ = e.draggingColumns) != null && $.dragToLeft),
+        "b-data-grid-columns__column--is-re-ordering-target-right": (i == null ? void 0 : i.field) === (($ = (F = e.draggingColumns) == null ? void 0 : F.target) == null ? void 0 : $.field) && !((P = e.draggingColumns) != null && P.dragToLeft),
         "b-data-grid-columns__column--with-sorting-or-column-panel": i.sortable || i.infoIconTooltip || e.hasColumnPanel && R.value === i.field || e.selectableAcrossPages
       };
     }, q = (i) => ({
@@ -1384,7 +1384,7 @@ const yo = bo.exports, Lt = {
   },
   setup(s) {
     const { t } = ce();
-    return { __sfc: !0, t, BentoLoadingButton: Zn, BentoLoadingButtonState: Vn, BentoLoadingIndicator: $e, BentoDatagridEvent: T };
+    return { __sfc: !0, t, BentoLoadingButton: Zn, BentoLoadingButtonState: Vn, BentoLoadingIndicator: Pe, BentoDatagridEvent: T };
   }
 });
 var Lo = function() {
@@ -1440,7 +1440,7 @@ const Fo = xo.exports, Mo = {
 }, Bo = {
   i18n: { messages: Mo },
   name: "data-grid-cell-actions"
-}, $o = /* @__PURE__ */ ae({
+}, Po = /* @__PURE__ */ ae({
   ...Bo,
   props: {
     /**
@@ -1536,7 +1536,7 @@ const Fo = xo.exports, Mo = {
     }, shouldShowMenuIconLeft: (d) => d.iconLeft || (d == null ? void 0 : d.variant) === "more", BentoButton: ht, BentoMenu: pt, Copy: Wn, Edit1Icon: Fo, ExternalLinkIcon: kn, OptionsVerticalIcon: Un };
   }
 });
-var Po = function() {
+var $o = function() {
   var t = this, n = t._self._c, e = t._self._setupProxy;
   return n("Transition", { attrs: { name: "b-data-grid-cell-actions__animation", appear: "" } }, [n("div", { staticClass: "b-data-grid-cell-actions" }, [e.showGradientElement ? n("div", { staticClass: "b-data-grid-cell-actions__background-gradient", class: e.conditionalCellActionsBackgroundGradientClasses }) : t._e(), n("div", { staticClass: "b-data-grid-cell-actions__actions", class: e.conditionalCellActionsClasses, attrs: { role: "group" } }, t._l(e.computedCellActions, function(o, l) {
     return n("div", { key: l, staticClass: "b-data-grid-cell-actions__action" }, [o.menuData ? n(e.BentoMenu, { attrs: { data: e.transformMenuEvents(o.menuData), button: {
@@ -1565,8 +1565,8 @@ var Po = function() {
     }, proxy: !0 } : null], null, !0) }, e.generateButtonEvents(o)))], 1);
   }), 0)])]);
 }, Uo = [], zo = /* @__PURE__ */ G(
-  $o,
   Po,
+  $o,
   Uo,
   !1,
   null,
@@ -1709,7 +1709,7 @@ const ft = () => {
   },
   emits: ["on-frozen-columns-key-press", "select-row", "register-row-cell-element", "cell-hovered", "nested-content-toggled"],
   setup(s, { expose: t, emit: n }) {
-    const e = s, o = Be(), l = Pe(o), { t: a } = ce(), f = y(null), _ = y(null), r = y(!1), R = y([]), u = y(!1), E = y(), p = y(!1), c = h(() => {
+    const e = s, o = Be(), l = $e(o), { t: a } = ce(), f = y(null), _ = y(null), r = y(!1), R = y([]), u = y(!1), E = y(), p = y(!1), c = h(() => {
       var m;
       return !!((m = e.rowData) != null && m[e.column.field]);
     }), C = h(
@@ -2027,7 +2027,7 @@ const jo = Zo.exports, qo = {
   },
   emits: ["cell-hovered", "on-frozen-columns-key-press", "select-row", "select-nested-row", "row-click", "nested-content-toggled"],
   setup(s, { expose: t, emit: n }) {
-    const e = s, o = Be(), l = Pe(o), a = y({}), f = y(!1), _ = y(), r = y(), R = De("nested-content-slot"), u = y(!1), E = y();
+    const e = s, o = Be(), l = $e(o), a = y({}), f = y(!1), _ = y(), r = y(), R = De("nested-content-slot"), u = y(!1), E = y();
     Se(() => {
       r.value && (E.value = ge(r.value));
     });
@@ -2071,7 +2071,7 @@ const jo = Zo.exports, qo = {
         };
     }), S = h(() => {
       var b, F;
-      return c.value ? (F = (b = e.rowData) == null ? void 0 : b.children) == null ? void 0 : F.reduce((P, $, le) => (P[le] = De("nested-row"), P), {}) : [];
+      return c.value ? (F = (b = e.rowData) == null ? void 0 : b.children) == null ? void 0 : F.reduce(($, P, le) => ($[le] = De("nested-row"), $), {}) : [];
     }), A = h(() => {
       var b;
       if (f.value) {
@@ -2085,37 +2085,39 @@ const jo = Zo.exports, qo = {
         return [];
       }
     }), N = h(() => {
-      var F, P;
-      const b = (P = (F = e.rowData) == null ? void 0 : F.children) == null ? void 0 : P.map(($) => e.getDataItemId($));
+      var F, $;
+      const b = ($ = (F = e.rowData) == null ? void 0 : F.children) == null ? void 0 : $.map((P) => e.getDataItemId(P));
       if ((b == null ? void 0 : b.length) > 0) {
-        const $ = b.every((Ce) => {
+        const P = b.every((Ce) => {
           var ie;
           return (ie = e == null ? void 0 : e.selectedItems) == null ? void 0 : ie.includes(Ce);
         }), le = b.some((Ce) => {
           var ie;
           return (ie = e == null ? void 0 : e.selectedItems) == null ? void 0 : ie.includes(Ce);
         });
-        return !$ && le;
+        return !P && le;
       }
       return !1;
     }), I = (b, F) => {
-      const P = b;
-      b !== null && (P != null && P.gridcellRef) && (a.value[F] = P.gridcellRef);
+      const $ = b;
+      b !== null && ($ != null && $.gridcellRef) && (a.value[F] = $.gridcellRef);
     }, g = (b) => S.value[b], O = (b) => {
       if (!e.selectable)
         return null;
       const F = e.getDataItemId(b);
       return e.selectedItems.includes(F).toString();
     }, D = (b) => {
-      var $;
+      var P;
+      if (!e.allowRowClicks)
+        return;
       let F = !1;
-      const P = ["button", "input", "a"];
-      for (let le = 0; le < P.length; le++)
-        if (($ = b == null ? void 0 : b.target) != null && $.closest(P[le])) {
+      const $ = ["button", "input", "a"];
+      for (let le = 0; le < $.length; le++)
+        if ((P = b == null ? void 0 : b.target) != null && P.closest($[le])) {
           F = !0;
           break;
         }
-      !F && e.allowRowClicks && n("row-click", e.rowData, b);
+      F || n("row-click", e.rowData, b);
     }, z = (b) => {
       n("select-row", b, e.rowData);
     }, H = (b, F) => {
@@ -2130,9 +2132,9 @@ const jo = Zo.exports, qo = {
     }, V = () => {
       ge(r.value);
     }, q = (b) => {
-      var F, P;
-      b.key !== oe.TAB && ge(r.value), b.key === oe.ARROW_RIGHT && ((F = E.value) == null ? void 0 : F.length) > 1 && E.value[0].node === document.activeElement ? (ge(r.value), E.value[1].node.setAttribute("tabindex", "0"), E.value[1].node.focus(), b.stopPropagation(), b.preventDefault()) : b.key === oe.ARROW_LEFT && ((P = E.value) == null ? void 0 : P.length) > 1 && E.value[1].node === document.activeElement && (ge(r.value), E.value[0].node.setAttribute("tabindex", "0"), E.value[0].node.focus(), b.stopPropagation(), b.preventDefault());
-    }, m = () => e.columnSets.reduce((b, { columnSet: F }) => b + F.length, 0), L = () => m() * e.rowIndex + m(), { updateContentHeight: M, contentHeight: i } = Pn(_, f), B = h(() => {
+      var F, $;
+      b.key !== oe.TAB && ge(r.value), b.key === oe.ARROW_RIGHT && ((F = E.value) == null ? void 0 : F.length) > 1 && E.value[0].node === document.activeElement ? (ge(r.value), E.value[1].node.setAttribute("tabindex", "0"), E.value[1].node.focus(), b.stopPropagation(), b.preventDefault()) : b.key === oe.ARROW_LEFT && (($ = E.value) == null ? void 0 : $.length) > 1 && E.value[1].node === document.activeElement && (ge(r.value), E.value[0].node.setAttribute("tabindex", "0"), E.value[0].node.focus(), b.stopPropagation(), b.preventDefault());
+    }, m = () => e.columnSets.reduce((b, { columnSet: F }) => b + F.length, 0), L = () => m() * e.rowIndex + m(), { updateContentHeight: M, contentHeight: i } = $n(_, f), B = h(() => {
       var b;
       if (e.hasNestedContent || e.hasNestedRows)
         return {
@@ -2158,8 +2160,8 @@ const jo = Zo.exports, qo = {
         return (b = e.rowData) == null ? void 0 : b.children;
       },
       (b, F) => {
-        var P, $;
-        (($ = (P = e == null ? void 0 : e.rowData) == null ? void 0 : P.children) == null ? void 0 : $.length) > 0 && F === void 0 && !f.value && M();
+        var $, P;
+        ((P = ($ = e == null ? void 0 : e.rowData) == null ? void 0 : $.children) == null ? void 0 : P.length) > 0 && F === void 0 && !f.value && M();
       }
     );
     const K = (b, F) => ({
@@ -2186,13 +2188,17 @@ const jo = Zo.exports, qo = {
     return t({
       gridcellRefs: a,
       rowActionsRef: r
-    }), { __sfc: !0, slots: o, hasSlot: l, props: e, emit: n, gridcellRefs: a, isNestedContentShown: f, nestedContentRef: _, rowActionsRef: r, nestedContentSlotId: R, isRowActionMenuOpen: u, focusableItems: E, shouldShowNestedRowsBooleanResult: p, shouldShowRenderNestedRows: c, isLoadingNestedRows: C, shouldShowNestedContentToggle: d, ariaRowAttributes: w, nestedContentContainerDivAriaAttributes: v, nestedRowIds: S, allNestedRowIds: A, hasUnSelectedNestedRows: N, registerRowCellRef: I, getRowId: g, getRowAriaSelectedValue: O, onRowClick: D, onRowSelect: z, onNestedRowSelect: H, onRowActionMenuOpen: k, onRowActionMenuClose: X, onRowActionsCellFocus: j, onRowActionsCellFocusOut: V, onRowActionsCellOnKeyDown: q, sumColumnAmountsInColumnSets: m, getRowActionsCellIndex: L, updateContentHeight: M, contentHeight: i, nestedContentStyles: B, nestedContentToggled: Y, conditionalRowClasses: K, conditionalRowSetClasses: Q, conditionalNestedRowClasses: ve, conditionalRowActionsContainerClasses: me, computedRowActionsStyles: ue, DataGridCell: jo, DataGridCellActions: At, BentoLoadingIndicator: $e, DataGridRow: Tt };
+    }), { __sfc: !0, slots: o, hasSlot: l, props: e, emit: n, gridcellRefs: a, isNestedContentShown: f, nestedContentRef: _, rowActionsRef: r, nestedContentSlotId: R, isRowActionMenuOpen: u, focusableItems: E, shouldShowNestedRowsBooleanResult: p, shouldShowRenderNestedRows: c, isLoadingNestedRows: C, shouldShowNestedContentToggle: d, ariaRowAttributes: w, nestedContentContainerDivAriaAttributes: v, nestedRowIds: S, allNestedRowIds: A, hasUnSelectedNestedRows: N, registerRowCellRef: I, getRowId: g, getRowAriaSelectedValue: O, onRowClick: D, onRowSelect: z, onNestedRowSelect: H, onRowActionMenuOpen: k, onRowActionMenuClose: X, onRowActionsCellFocus: j, onRowActionsCellFocusOut: V, onRowActionsCellOnKeyDown: q, sumColumnAmountsInColumnSets: m, getRowActionsCellIndex: L, updateContentHeight: M, contentHeight: i, nestedContentStyles: B, nestedContentToggled: Y, conditionalRowClasses: K, conditionalRowSetClasses: Q, conditionalNestedRowClasses: ve, conditionalRowActionsContainerClasses: me, computedRowActionsStyles: ue, DataGridCell: jo, DataGridCellActions: At, BentoLoadingIndicator: Pe, DataGridRow: Tt };
   }
 });
 var Ko = function() {
   var o;
   var t = this, n = t._self._c, e = t._self._setupProxy;
-  return n("div", { staticClass: "b-data-grid-row-container" }, [n("div", t._b({ key: t.rowIndex, staticClass: "b-data-grid-row-container__row", class: e.conditionalRowClasses(t.rowData, t.rowIndex), attrs: { id: (o = t.rowId) == null ? void 0 : o.toString(), role: "row", "aria-selected": e.getRowAriaSelectedValue(t.rowData) }, on: { click: e.onRowClick } }, "div", e.ariaRowAttributes, !1), [t._l(t.columnSets, function({ columnSet: l, id: a, isFrozenColumns: f }, _) {
+  return n("div", { staticClass: "b-data-grid-row-container" }, [n("div", t._b({ key: t.rowIndex, staticClass: "b-data-grid-row-container__row", class: e.conditionalRowClasses(t.rowData, t.rowIndex), attrs: { id: (o = t.rowId) == null ? void 0 : o.toString(), role: "row", "aria-selected": e.getRowAriaSelectedValue(t.rowData) }, on: { click: e.onRowClick, keyup: [function(l) {
+    return !l.type.indexOf("key") && t._k(l.keyCode, "enter", 13, l.key, "Enter") ? null : e.onRowClick.apply(null, arguments);
+  }, function(l) {
+    return !l.type.indexOf("key") && t._k(l.keyCode, "space", 32, l.key, [" ", "Spacebar"]) ? null : e.onRowClick.apply(null, arguments);
+  }] } }, "div", e.ariaRowAttributes, !1), [t._l(t.columnSets, function({ columnSet: l, id: a, isFrozenColumns: f }, _) {
     return [l != null && l.length ? n("div", { key: `data-grid-rows-${a}`, staticClass: "b-data-grid-row-container__cells", class: e.conditionalRowSetClasses(f), attrs: { "data-testid": `data-grid-${a}-rows` } }, t._l(l, function(r, R) {
       return n(e.DataGridCell, { key: `cell-${r.field}`, ref: (u) => e.registerRowCellRef(u, r.field), refInFor: !0, staticClass: "b-data-grid-row-container__cell", attrs: { column: r, "column-set-index": _, "col-index": R, "column-sets": t.columnSets, condensed: t.condensed, "dragging-columns": t.draggingColumns, "dragging-events-for-row-cell": t.draggingEventsForRowCell, "get-data-item-id": t.getDataItemId, "hovered-over-column-state": t.hoveredOverColumnState, "is-data-item-disabled": t.isDataItemDisabled, "is-measuring-column-widths": t.isMeasuringColumnWidths, "is-nested-content-expanded": e.isNestedContentShown, "nested-content": e.shouldShowNestedContentToggle, "nested-rows-element-ids": e.allNestedRowIds, "row-data": t.rowData, "row-index": t.rowIndex, "selection-is-indeterminate": e.hasUnSelectedNestedRows, selectable: t.selectable, "selected-items": t.selectedItems }, on: { "cell-hovered": function(u) {
         return e.emit("cell-hovered", u);
@@ -2225,7 +2231,7 @@ var Ko = function() {
   Xo,
   !1,
   null,
-  "8e2a7d99"
+  "4557cada"
 );
 const Tt = Jo.exports;
 let gt = 0;
@@ -2668,7 +2674,7 @@ const ga = _l.exports, vl = {
     T.SORT
   ],
   setup(s, { expose: t, emit: n }) {
-    const e = s, o = Be(), l = Pe(o), a = y(null), f = y(), _ = y({}), r = y(null), R = y(null), u = y(), E = y(null), p = y(null), c = y(null), {
+    const e = s, o = Be(), l = $e(o), a = y(null), f = y(), _ = y({}), r = y(null), R = y(null), u = y(), E = y(null), p = y(null), c = y(null), {
       allowColumnDragAndDrop: C,
       columns: d,
       columnPanel: w,
@@ -2684,7 +2690,7 @@ const ga = _l.exports, vl = {
       outline: H,
       pagination: k
     } = Me(e), X = y(-1), { t: j } = ce(), V = h(() => K.value.filter((x) => x.frozen).length), q = Ie(
-      $n,
+      Pn,
       () => ({
         additionalContentSlotRef: y(null),
         isDataGridTemplate: !1,
@@ -2700,7 +2706,7 @@ const ga = _l.exports, vl = {
       isTotalWidthOfColumnsTakingUpAllAvailableGridWidth: ue,
       columns: b,
       totalWidthOfAllColumns: F,
-      rowActionsMaxWidth: P
+      rowActionsMaxWidth: $
     } = gs(d, v, a, _, r, {
       hasColumnPanel: w,
       hasSelectableColumn: g,
@@ -2709,7 +2715,7 @@ const ga = _l.exports, vl = {
       hasNestedRows: I,
       allowColumnDragAndDrop: C,
       isDataGridTemplate: L
-    }), $ = (x, ...U) => {
+    }), P = (x, ...U) => {
       (x === T.COLUMNS || x === T.UPDATE_COLUMNS) && ([b.value] = U), n(x, ...U);
     }, le = tt(
       i,
@@ -2727,14 +2733,14 @@ const ga = _l.exports, vl = {
       onConfigSettingsUpdate: Dt,
       onConfigSettingsColumnsUpdate: xt,
       onConfigSettingsColumnUpdate: Ft
-    } = ws(K, $), { hoveredOverColumn: Mt, hoveredOverColumnState: Bt } = bs(
+    } = ws(K, P), { hoveredOverColumn: Mt, hoveredOverColumnState: Bt } = bs(
       Ee,
       g,
       H,
       ue
-    ), { draggingColumns: $t, draggingEventsForColumns: Pt, draggingEventsForRowCell: Ut, onMoveColumnByOffset: zt } = ps(Re, C, $), { onAllRowSelect: kt, onRowSelect: Wt, onNestedRowSelect: Gt, selectedItems: We, allItemsSelectedState: Ht } = _s(
+    ), { draggingColumns: Pt, draggingEventsForColumns: $t, draggingEventsForRowCell: Ut, onMoveColumnByOffset: zt } = ps(Re, C, P), { onAllRowSelect: kt, onRowSelect: Wt, onNestedRowSelect: Gt, selectedItems: We, allItemsSelectedState: Ht } = _s(
       O,
-      $,
+      P,
       v,
       e.getDataItemId,
       e.isDataItemDisabled
@@ -2750,7 +2756,7 @@ const ga = _l.exports, vl = {
       p,
       a,
       A,
-      $
+      P
     ), {
       updateScrollPosition: qt,
       updateScrollPositionOnFrozenColumnsNavigation: Yt,
@@ -2810,13 +2816,13 @@ const ga = _l.exports, vl = {
         Object.entries(J == null ? void 0 : J.gridcellRefs).map(([Oe, Sn]) => {
           var Ke;
           ((Ke = r.value) == null ? void 0 : Ke[Oe]) === void 0 && (r.value = { ...r.value, [Oe]: [] }), r.value[Oe][U] = Sn;
-        }), wn && (((fe = r.value) == null ? void 0 : fe[we]) === void 0 && (r.value = { ...r.value, [we]: [] }), r.value[we][U] = (he = J.rowActionsRef) == null ? void 0 : he[0], P.value = Math.max(
-          P.value,
+        }), wn && (((fe = r.value) == null ? void 0 : fe[we]) === void 0 && (r.value = { ...r.value, [we]: [] }), r.value[we][U] = (he = J.rowActionsRef) == null ? void 0 : he[0], $.value = Math.max(
+          $.value,
           ((Ye = (pe = J.rowActionsRef) == null ? void 0 : pe[0]) == null ? void 0 : Ye.offsetWidth) ?? 0
         ));
       }
     }, rn = (x, U) => {
-      e.allowRowClicks && $(T.ROW_CLICK, x, U);
+      e.allowRowClicks && P(T.ROW_CLICK, x, U);
     }, dn = (x) => {
       X.value = x;
     }, cn = h(() => !!e.selectableAcrossPages && !!e.pagination), un = h(() => e.hasNestedContent || e.hasNestedRows ? "treegrid" : "grid"), fn = xn({
@@ -2825,26 +2831,26 @@ const ga = _l.exports, vl = {
     }), Ze = h(() => {
       var x;
       return ((x = We.value) == null ? void 0 : x.length) ?? 0;
-    }), gn = h(() => e.bulkActions && Ze.value > 0), _n = (x) => $(T.COLUMN_RESIZE, x), vn = (x) => {
-      $(T.UPDATE_SORT_BY, x), $(T.SORT, x);
+    }), gn = h(() => e.bulkActions && Ze.value > 0), _n = (x) => P(T.COLUMN_RESIZE, x), vn = (x) => {
+      P(T.UPDATE_SORT_BY, x), P(T.SORT, x);
     }, mn = (x, U) => {
-      $(T.NAVIGATE, x), $(T.UPDATE_PAGINATION, {
+      P(T.NAVIGATE, x), P(T.UPDATE_PAGINATION, {
         ...e.pagination,
         size: U,
         page: x
       });
     }, Cn = (x) => {
-      $(T.ITEMS_PAGE, x);
+      P(T.ITEMS_PAGE, x);
     }, hn = () => {
-      $(T.FILTER_SEARCH_CLEAR);
+      P(T.FILTER_SEARCH_CLEAR);
     }, pn = (x) => {
-      $(T.UPDATE_FILTER_SEARCH_TERM, x), $(T.FILTER_SEARCH_INPUT, x);
+      P(T.UPDATE_FILTER_SEARCH_TERM, x), P(T.FILTER_SEARCH_INPUT, x);
     }, je = h(() => d.value.some((x) => x.mandatory));
     je.value || Ct(
       "WARNING: At least one BentoDataGrid column should be set as mandatory to ensure data is always displayed correctly."
     );
     const qe = Ie(Bn, () => null);
-    return qe(e.tabTitle), vt(Ot, Ne(e, "slashedZero")), t({ onEmptyStateClearResetButtonClick: Ve }), { __sfc: !0, props: e, slots: o, hasSlot: l, body: a, columnsRef: f, columnHeaderRefs: _, gridcellRefs: r, filtersRef: R, filterBarRef: u, paginationContainerRef: E, verticalScrollPositionRef: p, virtualHorizontalScrollbarRef: c, allowColumnDragAndDrop: C, columns: d, columnPanel: w, data: v, lazyLoadType: S, loading: A, hasNestedContent: N, hasNestedRows: I, selectable: g, selection: O, selectableAcrossPages: D, stickyPagination: z, outline: H, pagination: k, hoveredRowIndex: X, t: j, frozenColumnsLength: V, registerDatagridInDataGridTemplate: q, additionalContentSlotRef: m, isDataGridTemplate: L, stickyTabs: M, tabsRef: i, stickyAdditionalContent: B, computedColumnsTabIndex: Y, columnDefs: K, onColumnWidthOverride: Q, gridRowWidthStyle: ve, isMeasuringColumnWidths: me, isTotalWidthOfColumnsTakingUpAllAvailableGridWidth: ue, localColumnsState: b, totalWidthOfAllColumns: F, rowActionsMaxWidth: P, definedEmitsFunction: n, emit: $, stickyFiltersHeight: le, computedStickyFiltersTopPosition: Ce, columnHeadersHeight: ie, computedColumnHeadersTopPosition: Nt, sortedColumns: Re, columnSets: Ee, isOnlyOneVisibleColumn: It, onConfigSettingsUpdate: Dt, onConfigSettingsColumnsUpdate: xt, onConfigSettingsColumnUpdate: Ft, hoveredOverColumn: Mt, hoveredOverColumnState: Bt, draggingColumns: $t, draggingEventsForColumns: Pt, draggingEventsForRowCell: Ut, onMoveColumnByOffset: zt, onAllRowSelect: kt, onRowSelect: Wt, onNestedRowSelect: Gt, selectedItems: We, allItemsSelectedState: Ht, navigationInput: Vt, isLazyLoad: Le, isInfiniteScroll: Zt, verticalScrollPosition: Ge, emitLazyLoadEvent: jt, updateScrollPosition: qt, updateScrollPositionOnFrozenColumnsNavigation: Yt, syncVirtualScrollerWithBody: Kt, hasLeftOverflow: Ae, hasRightOverflow: He, horizontalScrollbarConditionalStyles: Xt, onEmptyStateClearResetButtonClick: Ve, limitedEmptyStateProps: Jt, conditionalGridClasses: Qt, conditionalGridBodyClasses: en, computedColumnPanelAlignment: tn, showFrozenColumnsSeparator: nn, conditionalFilterClasses: sn, conditionalPaginationClasses: on, registerColumnHeaderRefs: ln, registerRowCellRefs: an, onRowClick: rn, onCellHover: dn, selectableAcrossPagesComputed: cn, ariaGridRole: un, ariaGridHeaderText: fn, itemsSelectedCounter: Ze, showActionBar: gn, onColumnResized: _n, onSort: vn, onPaginationNavigate: mn, onItemsPerPageChange: Cn, onSearchTermCleared: hn, onSearchTermInput: pn, hasMandatoryColumn: je, setTitle: qe, BentoActionBar: In, BentoPagination: Dn, BentoLoadingIndicator: $e, BentoTypography: be, BentoDataGridConfigSettings: yo, DataGridColumns: lo, DataGridLazyLoad: To, DataGridRow: Tt, handleClipboard: ys, BentoDatagridEvent: T, BentoFilterBar: Te, BentoEmptyState: Mn };
+    return qe(e.tabTitle), vt(Ot, Ne(e, "slashedZero")), t({ onEmptyStateClearResetButtonClick: Ve }), { __sfc: !0, props: e, slots: o, hasSlot: l, body: a, columnsRef: f, columnHeaderRefs: _, gridcellRefs: r, filtersRef: R, filterBarRef: u, paginationContainerRef: E, verticalScrollPositionRef: p, virtualHorizontalScrollbarRef: c, allowColumnDragAndDrop: C, columns: d, columnPanel: w, data: v, lazyLoadType: S, loading: A, hasNestedContent: N, hasNestedRows: I, selectable: g, selection: O, selectableAcrossPages: D, stickyPagination: z, outline: H, pagination: k, hoveredRowIndex: X, t: j, frozenColumnsLength: V, registerDatagridInDataGridTemplate: q, additionalContentSlotRef: m, isDataGridTemplate: L, stickyTabs: M, tabsRef: i, stickyAdditionalContent: B, computedColumnsTabIndex: Y, columnDefs: K, onColumnWidthOverride: Q, gridRowWidthStyle: ve, isMeasuringColumnWidths: me, isTotalWidthOfColumnsTakingUpAllAvailableGridWidth: ue, localColumnsState: b, totalWidthOfAllColumns: F, rowActionsMaxWidth: $, definedEmitsFunction: n, emit: P, stickyFiltersHeight: le, computedStickyFiltersTopPosition: Ce, columnHeadersHeight: ie, computedColumnHeadersTopPosition: Nt, sortedColumns: Re, columnSets: Ee, isOnlyOneVisibleColumn: It, onConfigSettingsUpdate: Dt, onConfigSettingsColumnsUpdate: xt, onConfigSettingsColumnUpdate: Ft, hoveredOverColumn: Mt, hoveredOverColumnState: Bt, draggingColumns: Pt, draggingEventsForColumns: $t, draggingEventsForRowCell: Ut, onMoveColumnByOffset: zt, onAllRowSelect: kt, onRowSelect: Wt, onNestedRowSelect: Gt, selectedItems: We, allItemsSelectedState: Ht, navigationInput: Vt, isLazyLoad: Le, isInfiniteScroll: Zt, verticalScrollPosition: Ge, emitLazyLoadEvent: jt, updateScrollPosition: qt, updateScrollPositionOnFrozenColumnsNavigation: Yt, syncVirtualScrollerWithBody: Kt, hasLeftOverflow: Ae, hasRightOverflow: He, horizontalScrollbarConditionalStyles: Xt, onEmptyStateClearResetButtonClick: Ve, limitedEmptyStateProps: Jt, conditionalGridClasses: Qt, conditionalGridBodyClasses: en, computedColumnPanelAlignment: tn, showFrozenColumnsSeparator: nn, conditionalFilterClasses: sn, conditionalPaginationClasses: on, registerColumnHeaderRefs: ln, registerRowCellRefs: an, onRowClick: rn, onCellHover: dn, selectableAcrossPagesComputed: cn, ariaGridRole: un, ariaGridHeaderText: fn, itemsSelectedCounter: Ze, showActionBar: gn, onColumnResized: _n, onSort: vn, onPaginationNavigate: mn, onItemsPerPageChange: Cn, onSearchTermCleared: hn, onSearchTermInput: pn, hasMandatoryColumn: je, setTitle: qe, BentoActionBar: In, BentoPagination: Dn, BentoLoadingIndicator: Pe, BentoTypography: be, BentoDataGridConfigSettings: yo, DataGridColumns: lo, DataGridLazyLoad: To, DataGridRow: Tt, handleClipboard: ys, BentoDatagridEvent: T, BentoFilterBar: Te, BentoEmptyState: Mn };
   }
 });
 var Cl = function() {
@@ -2891,4 +2897,4 @@ export {
   T as f,
   ye as g
 };
-//# sourceMappingURL=data-grid.DCPJKAXM.js.map
+//# sourceMappingURL=data-grid.t4fCoE2Y.js.map