@adyen/bento-vue2 1.66.0 → 1.67.0

package/dist/chunks/{search-bar.5JHI6li0.js → search-bar.BTZSePJh.js}

@@ -1,8 +1,8 @@
 import { defineComponent as h, provide as _, toRef as b, useAttrs as C, ref as l, watch as v } from "vue";
 import { d as y } from "./debounce.DUTu11PS.js";
 import { u as I } from "./i18n.BQkEbtPM.js";
-import { I as S } from "./dropdown.BWsU98dn.js";
-import { B as k } from "./input-field.L5bWjTpB.js";
+import { I as S } from "./dropdown.HA6ISg2h.js";
+import { B as k } from "./input-field.Bg77qHT2.js";
 import { S as T } from "./search.D53Ia3rC.js";
 import { C as E } from "./cross-circle-fill.DTDtgLMf.js";
 import { n as A } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
@@ -94,4 +94,4 @@ export {
   i as a,
   F as b
 };
-//# sourceMappingURL=search-bar.5JHI6li0.js.map
+//# sourceMappingURL=search-bar.BTZSePJh.js.map

package/dist/chunks/{search-bar.5JHI6li0.js.map → search-bar.BTZSePJh.js.map}

@@ -1 +1 @@
-{"version":3,"file":"search-bar.5JHI6li0.js","sources":["../../src/components/search-bar/search-bar.types.ts","../../src/components/search-bar/search-bar.vue"],"sourcesContent":["export enum BentoSearchBarInternalEvent {\n    CLEAR = 'clear',\n    ESCAPE = 'escape-pressed',\n    INPUT = 'input',\n    UPDATE = 'update:search-term',\n}\n\nexport enum BentoSearchBarEvent {\n    CLEAR = 'search-clear',\n    INPUT = 'search-input',\n    UPDATE = 'update:search-term',\n}\n\nexport interface BentoSearchBarItem {\n    label: string;\n    items?: Array<BentoSearchBarItem>;\n}\n\nexport type BentoSearchBarData = Array<BentoSearchBarItem>;\n\nexport interface BentoSearchBarProps {\n    /**\n     * Text that labels an the search bar input element\n     */\n    inputFieldAriaLabel: string;\n\n    /**\n     * Reduces height of the search bar. Default: false\n     */\n    condensed?: boolean;\n\n    /**\n     * Custom debounce time. Default: 300\n     */\n    debounceTime?: number;\n\n    /**\n     * Text displayed as a hint when the field is not empty\n     */\n    hint?: string;\n\n    /**\n     * Text displayed as the placeholder of the input-field\n     */\n    placeholder?: string;\n\n    /**\n     * Text displayed as the value being searched\n     */\n    value?: string;\n}\n","<template>\n    <div class=\"b-search-bar\">\n        <bento-input-field\n            ref=\"bentoInputField\"\n            v-bind=\"attrs\"\n            :value=\"searchTerm\"\n            type=\"search\"\n            :condensed=\"condensed\"\n            :aria-label=\"inputFieldAriaLabel\"\n            :aria-hidden=\"false\"\n            :placeholder=\"placeholder\"\n            @input=\"onInputEvent\"\n            @focus=\"emit('focus')\"\n            @blur=\"emit('blur')\"\n            @escape-pressed=\"emit(BentoSearchBarInternalEvent.ESCAPE)\"\n        >\n            <template #iconBefore>\n                <search-icon :svg-title=\"t('search')\" aria-hidden=\"true\" />\n            </template>\n\n            <template v-if=\"searchTerm\" #iconAfter>\n                <div\n                    class=\"b-search-bar__clear-search\"\n                    tabindex=\"0\"\n                    data-testid=\"b-search-bar-clear-search-button\"\n                    @click=\"onClearSearch\"\n                    @keypress.enter=\"onClearSearch\"\n                    @keyup.space=\"onClearSearch\"\n                >\n                    <cross-circle-fill-icon :svg-title=\"t('clearSearch')\" />\n                </div>\n            </template>\n        </bento-input-field>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { provide, ref, toRef, useAttrs, watch } from 'vue';\n    import { debounce } from '@/utils/ts/debounce';\n    import { BentoSearchBarInternalEvent, BentoSearchBarProps } from './search-bar.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { INPUT_FIELD_HINT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n    import BentoInputField from '@/components/input-field/input-field.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  inputFieldAriaLabel: null,\n  condensed: { type: Boolean, default: false },\n  debounceTime: { default: 300 },\n  hint: { default: '' },\n  placeholder: { default: '' },\n  value: { default: undefined }\n});\n\n    const emit = defineEmits([\"input\", \"clear\", \"escape-pressed\", \"blur\", \"focus\"]);\n\n    provide(INPUT_FIELD_HINT_INJECTION_KEY, toRef(props, 'hint'));\n\n    const attrs = useAttrs();\n    const searchTerm = ref(props.value);\n    const bentoInputField = ref<InstanceType<typeof BentoInputField> | null>();\n\n    watch(\n        () => props.value,\n        () => {\n            searchTerm.value = props.value;\n        },\n        { immediate: true }\n    );\n\n    const onClearSearch = () => {\n        searchTerm.value = '';\n        emit('clear');\n        emit('input', '');\n    };\n\n    const debouncedEmit = debounce(() => {\n        emit('input', searchTerm.value);\n    }, props.debounceTime);\n\n    const onInputEvent = (value: string) => {\n        searchTerm.value = value;\n        debouncedEmit();\n    };\n\n    const focus = () => {\n        bentoInputField.value.focusInput();\n    };\n\n    // Expose method so that it can be used to focus on the input from outside the component\n    defineExpose({\n        /**\n         * Focus on the input field when called.\n         */\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Search functionality to help users find the desired data quicker.\n     * When a user starts typing, the data is dynamically filtered to\n     * only show the relevant results.\n     *\n     * Clearing the search field displays the entire list again.\n     *\n     * @example\n     * import {\n     *     BentoSearchBar,\n     *     BentoSearchBarData,\n     *     useSearchBarFilter\n     * } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSearchBar },\n     *     template: `\n     *          <bento-search-bar\n     *              input-field-aria-label=\"Search bar\"\n     *              v-model=\"searchTerm\"\n     *              @input=\"onInput\"\n     *              @clear=\"onClearSearch\"\n     *          />\n     *          // Render the filtered data\n     *          {{ filteredData }}\n     *     `,\n     *     setup() {\n     *         const searchTerm = ref('');\n     *         const data = ref<BentoSearchBarData>([]);\n     *         const filteredData = useSearchBarFilter(searchTerm, data);\n     *\n     *         consdt onInput = () => {}\n     *         consdt onClearSearch = () => {}\n     *\n     *         return {\n     *             searchTerm,\n     *             filteredData,\n     *             onInput,\n     *             onClearSearch,\n     *         };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./search-bar.scss\" />\n"],"names":["BentoSearchBarInternalEvent","BentoSearchBarInternalEvent2","BentoSearchBarEvent","BentoSearchBarEvent2","__default__","messages","useI18n","provide","INPUT_FIELD_HINT_INJECTION_KEY","toRef","props","attrs","useAttrs","searchTerm","ref","bentoInputField","watch","onClearSearch","emit","debouncedEmit","debounce","onInputEvent","value","focus","expose"],"mappings":";;;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,SAAA,kBACAA,EAAA,QAAA,SACAA,EAAA,SAAA,sBAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,QAAA,gBACAA,EAAA,QAAA,gBACAA,EAAA,SAAA,sBAHQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;;;;GC6IRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;iBArGA,EAAA,EAAA,IAAAC,EAAA;AAaA,IAAAC,EAAAC,GAAAC,EAAAC,GAAA,MAAA,CAAA;AAEA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAJ,EAAA,KAAA,GACAK,IAAAD,EAAA;AAEA,IAAAE;AAAA,MAAA,MAAAN,EAAA;AAAA,MACgB,MAAA;AAER,QAAAG,EAAA,QAAAH,EAAA;AAAA,MAAyB;AAAA,MAC7B,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAO,IAAA,MAAA;AACI,MAAAJ,EAAA,QAAA,IACAK,EAAA,OAAA,GACAA,EAAA,SAAA,EAAA;AAAA,IAAgB,GAGpBC,IAAAC,EAAA,MAAA;AACI,MAAAF,EAAA,SAAAL,EAAA,KAAA;AAAA,IAA8B,GAAAH,EAAA,YAAA,GAGlCW,IAAA,CAAAC,MAAA;AACI,MAAAT,EAAA,QAAAS,GACAH,EAAA;AAAA,IAAc,GAGlBI,IAAA,MAAA;AACI,MAAAR,EAAA,MAAA,WAAA;AAAA,IAAiC;AAIrC,WAAAS,EAAA;AAAA;AAAA;AAAA;AAAA,MAAa,OAAAD;AAAA,IAIT,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"search-bar.BTZSePJh.js","sources":["../../src/components/search-bar/search-bar.types.ts","../../src/components/search-bar/search-bar.vue"],"sourcesContent":["export enum BentoSearchBarInternalEvent {\n    CLEAR = 'clear',\n    ESCAPE = 'escape-pressed',\n    INPUT = 'input',\n    UPDATE = 'update:search-term',\n}\n\nexport enum BentoSearchBarEvent {\n    CLEAR = 'search-clear',\n    INPUT = 'search-input',\n    UPDATE = 'update:search-term',\n}\n\nexport interface BentoSearchBarItem {\n    label: string;\n    items?: Array<BentoSearchBarItem>;\n}\n\nexport type BentoSearchBarData = Array<BentoSearchBarItem>;\n\nexport interface BentoSearchBarProps {\n    /**\n     * Text that labels an the search bar input element\n     */\n    inputFieldAriaLabel: string;\n\n    /**\n     * Reduces height of the search bar. Default: false\n     */\n    condensed?: boolean;\n\n    /**\n     * Custom debounce time. Default: 300\n     */\n    debounceTime?: number;\n\n    /**\n     * Text displayed as a hint when the field is not empty\n     */\n    hint?: string;\n\n    /**\n     * Text displayed as the placeholder of the input-field\n     */\n    placeholder?: string;\n\n    /**\n     * Text displayed as the value being searched\n     */\n    value?: string;\n}\n","<template>\n    <div class=\"b-search-bar\">\n        <bento-input-field\n            ref=\"bentoInputField\"\n            v-bind=\"attrs\"\n            :value=\"searchTerm\"\n            type=\"search\"\n            :condensed=\"condensed\"\n            :aria-label=\"inputFieldAriaLabel\"\n            :aria-hidden=\"false\"\n            :placeholder=\"placeholder\"\n            @input=\"onInputEvent\"\n            @focus=\"emit('focus')\"\n            @blur=\"emit('blur')\"\n            @escape-pressed=\"emit(BentoSearchBarInternalEvent.ESCAPE)\"\n        >\n            <template #iconBefore>\n                <search-icon :svg-title=\"t('search')\" aria-hidden=\"true\" />\n            </template>\n\n            <template v-if=\"searchTerm\" #iconAfter>\n                <div\n                    class=\"b-search-bar__clear-search\"\n                    tabindex=\"0\"\n                    data-testid=\"b-search-bar-clear-search-button\"\n                    @click=\"onClearSearch\"\n                    @keypress.enter=\"onClearSearch\"\n                    @keyup.space=\"onClearSearch\"\n                >\n                    <cross-circle-fill-icon :svg-title=\"t('clearSearch')\" />\n                </div>\n            </template>\n        </bento-input-field>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { provide, ref, toRef, useAttrs, watch } from 'vue';\n    import { debounce } from '@/utils/ts/debounce';\n    import { BentoSearchBarInternalEvent, BentoSearchBarProps } from './search-bar.types';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { INPUT_FIELD_HINT_INJECTION_KEY } from '@/components/input-field/input-field.keys';\n    import BentoInputField from '@/components/input-field/input-field.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n    import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const props = defineProps({\n  inputFieldAriaLabel: null,\n  condensed: { type: Boolean, default: false },\n  debounceTime: { default: 300 },\n  hint: { default: '' },\n  placeholder: { default: '' },\n  value: { default: undefined }\n});\n\n    const emit = defineEmits([\"input\", \"clear\", \"escape-pressed\", \"blur\", \"focus\"]);\n\n    provide(INPUT_FIELD_HINT_INJECTION_KEY, toRef(props, 'hint'));\n\n    const attrs = useAttrs();\n    const searchTerm = ref(props.value);\n    const bentoInputField = ref<InstanceType<typeof BentoInputField> | null>();\n\n    watch(\n        () => props.value,\n        () => {\n            searchTerm.value = props.value;\n        },\n        { immediate: true }\n    );\n\n    const onClearSearch = () => {\n        searchTerm.value = '';\n        emit('clear');\n        emit('input', '');\n    };\n\n    const debouncedEmit = debounce(() => {\n        emit('input', searchTerm.value);\n    }, props.debounceTime);\n\n    const onInputEvent = (value: string) => {\n        searchTerm.value = value;\n        debouncedEmit();\n    };\n\n    const focus = () => {\n        bentoInputField.value.focusInput();\n    };\n\n    // Expose method so that it can be used to focus on the input from outside the component\n    defineExpose({\n        /**\n         * Focus on the input field when called.\n         */\n        focus,\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Search functionality to help users find the desired data quicker.\n     * When a user starts typing, the data is dynamically filtered to\n     * only show the relevant results.\n     *\n     * Clearing the search field displays the entire list again.\n     *\n     * @example\n     * import {\n     *     BentoSearchBar,\n     *     BentoSearchBarData,\n     *     useSearchBarFilter\n     * } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSearchBar },\n     *     template: `\n     *          <bento-search-bar\n     *              input-field-aria-label=\"Search bar\"\n     *              v-model=\"searchTerm\"\n     *              @input=\"onInput\"\n     *              @clear=\"onClearSearch\"\n     *          />\n     *          // Render the filtered data\n     *          {{ filteredData }}\n     *     `,\n     *     setup() {\n     *         const searchTerm = ref('');\n     *         const data = ref<BentoSearchBarData>([]);\n     *         const filteredData = useSearchBarFilter(searchTerm, data);\n     *\n     *         consdt onInput = () => {}\n     *         consdt onClearSearch = () => {}\n     *\n     *         return {\n     *             searchTerm,\n     *             filteredData,\n     *             onInput,\n     *             onClearSearch,\n     *         };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./search-bar.scss\" />\n"],"names":["BentoSearchBarInternalEvent","BentoSearchBarInternalEvent2","BentoSearchBarEvent","BentoSearchBarEvent2","__default__","messages","useI18n","provide","INPUT_FIELD_HINT_INJECTION_KEY","toRef","props","attrs","useAttrs","searchTerm","ref","bentoInputField","watch","onClearSearch","emit","debouncedEmit","debounce","onInputEvent","value","focus","expose"],"mappings":";;;;;;;;;AAAY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,SAAA,kBACAA,EAAA,QAAA,SACAA,EAAA,SAAA,sBAJQA,IAAAD,KAAA,CAAA,CAAA,GAOAE,IAAA,kBAAAC,OACRA,EAAA,QAAA,gBACAA,EAAA,QAAA,gBACAA,EAAA,SAAA,sBAHQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;;;;GC6IRE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;iBArGA,EAAA,EAAA,IAAAC,EAAA;AAaA,IAAAC,EAAAC,GAAAC,EAAAC,GAAA,MAAA,CAAA;AAEA,UAAAC,IAAAC,EAAA,GACAC,IAAAC,EAAAJ,EAAA,KAAA,GACAK,IAAAD,EAAA;AAEA,IAAAE;AAAA,MAAA,MAAAN,EAAA;AAAA,MACgB,MAAA;AAER,QAAAG,EAAA,QAAAH,EAAA;AAAA,MAAyB;AAAA,MAC7B,EAAA,WAAA,GAAA;AAAA,IACkB;AAGtB,UAAAO,IAAA,MAAA;AACI,MAAAJ,EAAA,QAAA,IACAK,EAAA,OAAA,GACAA,EAAA,SAAA,EAAA;AAAA,IAAgB,GAGpBC,IAAAC,EAAA,MAAA;AACI,MAAAF,EAAA,SAAAL,EAAA,KAAA;AAAA,IAA8B,GAAAH,EAAA,YAAA,GAGlCW,IAAA,CAAAC,MAAA;AACI,MAAAT,EAAA,QAAAS,GACAH,EAAA;AAAA,IAAc,GAGlBI,IAAA,MAAA;AACI,MAAAR,EAAA,MAAA,WAAA;AAAA,IAAiC;AAIrC,WAAAS,EAAA;AAAA;AAAA;AAAA;AAAA,MAAa,OAAAD;AAAA,IAIT,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{secondary-nav.D4hrWvf7.js → secondary-nav.BBhSBNn7.js}

@@ -1,5 +1,5 @@
 import { defineComponent as v, inject as C, computed as r, ref as g, readonly as I, watch as h, provide as S } from "vue";
-import { B as k } from "./dropdown.BWsU98dn.js";
+import { B as k } from "./dropdown.HA6ISg2h.js";
 import { g as w } from "./index.BdrLbvtJ.js";
 import { u as B } from "./i18n.BQkEbtPM.js";
 import { B as $ } from "./es6.n1ewaW31.js";
@@ -109,4 +109,4 @@ const X = Q.exports;
 export {
   X as s
 };
-//# sourceMappingURL=secondary-nav.D4hrWvf7.js.map
+//# sourceMappingURL=secondary-nav.BBhSBNn7.js.map

package/dist/chunks/{secondary-nav.D4hrWvf7.js.map → secondary-nav.BBhSBNn7.js.map}

@@ -1 +1 @@
-{"version":3,"file":"secondary-nav.D4hrWvf7.js","sources":["../../src/components/secondary-nav/secondary-nav.keys.ts","../../src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue","../../src/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue","../../src/components/secondary-nav/secondary-nav.vue"],"sourcesContent":["import { InjectionKey } from 'vue';\nimport { BentoSecondaryNavState } from './secondary-nav.types';\n\nexport const SECONDARY_NAV_STATE = Symbol('secondary nav state') as InjectionKey<BentoSecondaryNavState>;\n","<template>\n    <button class=\"b-secondary-nav-item\" :class=\"conditionalClasses\" :aria-selected=\"isItemSelected\" @click=\"onClick\">\n        <bento-typography class=\"b-secondary-nav-item__title\" variant=\"body\" stronger>\n            {{ label }}\n        </bento-typography>\n    </button>\n</template>\n\n<script lang=\"ts\" setup>\n    import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys';\n    import { BentoTypography } from '@/components/typography';\n    import { computed, inject } from 'vue';\n\n    const { activeItemValue, updateActiveItemValue } = inject(SECONDARY_NAV_STATE);\n\n    const props = defineProps({\n  label: null,\n  value: null\n});\n\n    const isItemSelected = computed(() => activeItemValue.value === props.value);\n\n    const conditionalClasses = computed(() => ({\n        'b-secondary-nav-item--active': isItemSelected.value,\n    }));\n\n    const emit = defineEmits([\"click\"]);\n\n    const onClick = (e: MouseEvent) => {\n        emit('click', e);\n        updateActiveItemValue(props.value);\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-item.scss\" />\n","<template>\n    <section class=\"b-secondary-nav-category\" :aria-label=\"label\">\n        <bento-typography el=\"h1\" class=\"b-secondary-nav-category__label\" variant=\"caption\" stronger>{{\n            label\n        }}</bento-typography>\n        <ul class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.value\">\n                <secondary-nav-item :label=\"item.label\" :value=\"item.value\" />\n            </li>\n        </ul>\n    </section>\n</template>\n\n<script lang=\"ts\" setup>\n    import { BentoTypography } from '@/components/typography';\n    import { SecondaryNavItem } from '../secondary-nav-item';\n    import { BentoSecondaryNavItemsItem } from '../../secondary-nav.types';\n\n    defineProps({\n  label: null,\n  items: null\n});\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-category.scss\" />\n","<template>\n    <nav class=\"b-secondary-nav\">\n        <bento-dropdown\n            v-if=\"isMobile\"\n            :aria-label=\"t('mobileDropdownAriaLabel')\"\n            :items=\"dropdownItems\"\n            :static-categories=\"hasCategories\"\n            :value=\"activeItemValue\"\n            @input=\"updateActiveItemValue\"\n        />\n        <ul v-else class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.label\">\n                <secondary-nav-category v-if=\"'items' in item\" :label=\"item.label\" :items=\"item.items\" />\n                <secondary-nav-item v-else :label=\"item.label\" :value=\"item.value\" />\n            </li>\n        </ul>\n    </nav>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, readonly, ref, watch } from 'vue';\n    import { SecondaryNavItem } from './components/secondary-nav-item';\n    import { SecondaryNavCategory } from './components/secondary-nav-category';\n    import { SECONDARY_NAV_STATE } from './secondary-nav.keys';\n    import { BentoSecondaryNavItems, BentoSecondaryNavState } from './secondary-nav.types';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { useBreakpoints } from '@vueuse/core';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoListboxOptions } from '@/types';\n    import { BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const breakpoints = useBreakpoints({\n        s: BMediaQuerySMax,\n    });\n\n    const isMobile = breakpoints.smallerOrEqual('s');\n    const props = defineProps({\n  items: null,\n  value: null\n});\n\n    const emit = defineEmits([\"change\"]);\n\n    const hasCategories = computed(() => props.items.some(item => Object.hasOwn(item, 'items')));\n    const dropdownItems = computed(() => props.items as BentoListboxOptions);\n\n    const activeItemValueFallback = computed(() => {\n        const firstDropdownItem = (dropdownItems.value as BentoSecondaryNavItems)[0];\n\n        if ('items' in firstDropdownItem) {\n            return firstDropdownItem.items[0].value;\n        } else {\n            return firstDropdownItem.value;\n        }\n    });\n    const activeItemValue = ref(props.value ?? activeItemValueFallback.value);\n    const updateActiveItemValue = (value: string) => {\n        activeItemValue.value = value;\n        emit('change', value);\n    };\n\n    // The component's state is inject on `secondary-nav-item` to determine the\n    // current active item and to change its value\n    const state: BentoSecondaryNavState = {\n        activeItemValue: readonly(activeItemValue),\n        updateActiveItemValue,\n    };\n\n    watch(\n        () => props.value,\n        value => {\n            activeItemValue.value = value;\n        }\n    );\n\n    provide(SECONDARY_NAV_STATE, state);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Secondary Nav offers users a structured way to access information.\n     * It also provides a clear hierarchy for users to understand and navigate through various information.\n     *\n     * @example\n     * import { BentoSecondaryNav } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSecondaryNav },\n     *     template: `\n     *          <bento-secondary-nav :value=\"value\" :items=\"items\" />\n     *     `,\n     *     setup() {\n     *         const value = ref(2) // Active item value\n     *         const items: BentoSecondaryNavItemInfo[] = [\n     *              { label: 'Option 1', value: 1 },\n     *              { label: 'Option 2', value: 2 },\n     *         ];\n     *         return { items, value };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav.scss\" />\n"],"names":["SECONDARY_NAV_STATE","__default__$2","activeItemValue","updateActiveItemValue","inject","isItemSelected","computed","props","conditionalClasses","e","emit","__default__$1","__default__","messages","useI18n","breakpoints","useBreakpoints","BMediaQuerySMax","isMobile","hasCategories","item","dropdownItems","activeItemValueFallback","firstDropdownItem","ref","value","state","readonly","watch","provide"],"mappings":";;;;;;;;AAGa,MAAAA,IAAA,OAAA,qBAAA,GCmCTC,IAAA,CAAA;;;;;;;;;iBAzBA,EAAA,iBAAAC,GAAA,uBAAAC,EAAA,IAAAC,EAAAJ,CAAA,GAOAK,IAAAC,EAAA,MAAAJ,EAAA,UAAAK,EAAA,KAAA,GAEAC,IAAAF,EAAA,OAAA;AAAA,MAA2C,gCAAAD,EAAA;AAAA,IACQ,EAAA;4IAKnD,CAAAI,MAAA;AACI,MAAAC,EAAA,SAAAD,CAAA,GACAN,EAAAI,EAAA,KAAA;AAAA,IAAiC;;;;;;;;;;;;;;qBCFrCI,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC+EAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;iBA1EA,EAAA,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA;AAAA,MAAmC,GAAAC;AAAA,IAC5B,CAAA,GAGPC,IAAAH,EAAA,eAAA,GAAA,GAQAI,IAAAb,EAAA,MAAAC,EAAA,MAAA,KAAA,CAAAa,MAAA,OAAA,OAAAA,GAAA,OAAA,CAAA,CAAA,GACAC,IAAAf,EAAA,MAAAC,EAAA,KAAA,GAEAe,IAAAhB,EAAA,MAAA;AACI,YAAAiB,IAAAF,EAAA,MAAA,CAAA;AAEA,aAAA,WAAAE,IACIA,EAAA,MAAA,CAAA,EAAA,QAEAA,EAAA;AAAA,IACJ,CAAA,GAEJrB,IAAAsB,EAAAjB,EAAA,SAAAe,EAAA,KAAA,GACAnB,IAAA,CAAAsB,MAAA;AACI,MAAAvB,EAAA,QAAAuB,GACAf,EAAA,UAAAe,CAAA;AAAA,IAAoB,GAKxBC,IAAA;AAAA,MAAsC,iBAAAC,EAAAzB,CAAA;AAAA,MACO,uBAAAC;AAAA,IACzC;AAGJ,WAAAyB;AAAA,MAAA,MAAArB,EAAA;AAAA,MACgB,CAAAkB,MAAA;AAER,QAAAvB,EAAA,QAAAuB;AAAA,MAAwB;AAAA,IAC5B,GAGJI,EAAA7B,GAAA0B,CAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"secondary-nav.BBhSBNn7.js","sources":["../../src/components/secondary-nav/secondary-nav.keys.ts","../../src/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue","../../src/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue","../../src/components/secondary-nav/secondary-nav.vue"],"sourcesContent":["import { InjectionKey } from 'vue';\nimport { BentoSecondaryNavState } from './secondary-nav.types';\n\nexport const SECONDARY_NAV_STATE = Symbol('secondary nav state') as InjectionKey<BentoSecondaryNavState>;\n","<template>\n    <button class=\"b-secondary-nav-item\" :class=\"conditionalClasses\" :aria-selected=\"isItemSelected\" @click=\"onClick\">\n        <bento-typography class=\"b-secondary-nav-item__title\" variant=\"body\" stronger>\n            {{ label }}\n        </bento-typography>\n    </button>\n</template>\n\n<script lang=\"ts\" setup>\n    import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys';\n    import { BentoTypography } from '@/components/typography';\n    import { computed, inject } from 'vue';\n\n    const { activeItemValue, updateActiveItemValue } = inject(SECONDARY_NAV_STATE);\n\n    const props = defineProps({\n  label: null,\n  value: null\n});\n\n    const isItemSelected = computed(() => activeItemValue.value === props.value);\n\n    const conditionalClasses = computed(() => ({\n        'b-secondary-nav-item--active': isItemSelected.value,\n    }));\n\n    const emit = defineEmits([\"click\"]);\n\n    const onClick = (e: MouseEvent) => {\n        emit('click', e);\n        updateActiveItemValue(props.value);\n    };\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-item.scss\" />\n","<template>\n    <section class=\"b-secondary-nav-category\" :aria-label=\"label\">\n        <bento-typography el=\"h1\" class=\"b-secondary-nav-category__label\" variant=\"caption\" stronger>{{\n            label\n        }}</bento-typography>\n        <ul class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.value\">\n                <secondary-nav-item :label=\"item.label\" :value=\"item.value\" />\n            </li>\n        </ul>\n    </section>\n</template>\n\n<script lang=\"ts\" setup>\n    import { BentoTypography } from '@/components/typography';\n    import { SecondaryNavItem } from '../secondary-nav-item';\n    import { BentoSecondaryNavItemsItem } from '../../secondary-nav.types';\n\n    defineProps({\n  label: null,\n  items: null\n});\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav}\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav-category.scss\" />\n","<template>\n    <nav class=\"b-secondary-nav\">\n        <bento-dropdown\n            v-if=\"isMobile\"\n            :aria-label=\"t('mobileDropdownAriaLabel')\"\n            :items=\"dropdownItems\"\n            :static-categories=\"hasCategories\"\n            :value=\"activeItemValue\"\n            @input=\"updateActiveItemValue\"\n        />\n        <ul v-else class=\"b-secondary-nav__list\">\n            <li v-for=\"item in items\" :key=\"item.label\">\n                <secondary-nav-category v-if=\"'items' in item\" :label=\"item.label\" :items=\"item.items\" />\n                <secondary-nav-item v-else :label=\"item.label\" :value=\"item.value\" />\n            </li>\n        </ul>\n    </nav>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, provide, readonly, ref, watch } from 'vue';\n    import { SecondaryNavItem } from './components/secondary-nav-item';\n    import { SecondaryNavCategory } from './components/secondary-nav-category';\n    import { SECONDARY_NAV_STATE } from './secondary-nav.keys';\n    import { BentoSecondaryNavItems, BentoSecondaryNavState } from './secondary-nav.types';\n    import { BentoDropdown } from '@/components/dropdown';\n    import { useBreakpoints } from '@vueuse/core';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoListboxOptions } from '@/types';\n    import { BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const breakpoints = useBreakpoints({\n        s: BMediaQuerySMax,\n    });\n\n    const isMobile = breakpoints.smallerOrEqual('s');\n    const props = defineProps({\n  items: null,\n  value: null\n});\n\n    const emit = defineEmits([\"change\"]);\n\n    const hasCategories = computed(() => props.items.some(item => Object.hasOwn(item, 'items')));\n    const dropdownItems = computed(() => props.items as BentoListboxOptions);\n\n    const activeItemValueFallback = computed(() => {\n        const firstDropdownItem = (dropdownItems.value as BentoSecondaryNavItems)[0];\n\n        if ('items' in firstDropdownItem) {\n            return firstDropdownItem.items[0].value;\n        } else {\n            return firstDropdownItem.value;\n        }\n    });\n    const activeItemValue = ref(props.value ?? activeItemValueFallback.value);\n    const updateActiveItemValue = (value: string) => {\n        activeItemValue.value = value;\n        emit('change', value);\n    };\n\n    // The component's state is inject on `secondary-nav-item` to determine the\n    // current active item and to change its value\n    const state: BentoSecondaryNavState = {\n        activeItemValue: readonly(activeItemValue),\n        updateActiveItemValue,\n    };\n\n    watch(\n        () => props.value,\n        value => {\n            activeItemValue.value = value;\n        }\n    );\n\n    provide(SECONDARY_NAV_STATE, state);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Secondary Nav offers users a structured way to access information.\n     * It also provides a clear hierarchy for users to understand and navigate through various information.\n     *\n     * @example\n     * import { BentoSecondaryNav } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSecondaryNav },\n     *     template: `\n     *          <bento-secondary-nav :value=\"value\" :items=\"items\" />\n     *     `,\n     *     setup() {\n     *         const value = ref(2) // Active item value\n     *         const items: BentoSecondaryNavItemInfo[] = [\n     *              { label: 'Option 1', value: 1 },\n     *              { label: 'Option 2', value: 2 },\n     *         ];\n     *         return { items, value };\n     *     }\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./secondary-nav.scss\" />\n"],"names":["SECONDARY_NAV_STATE","__default__$2","activeItemValue","updateActiveItemValue","inject","isItemSelected","computed","props","conditionalClasses","e","emit","__default__$1","__default__","messages","useI18n","breakpoints","useBreakpoints","BMediaQuerySMax","isMobile","hasCategories","item","dropdownItems","activeItemValueFallback","firstDropdownItem","ref","value","state","readonly","watch","provide"],"mappings":";;;;;;;;AAGa,MAAAA,IAAA,OAAA,qBAAA,GCmCTC,IAAA,CAAA;;;;;;;;;iBAzBA,EAAA,iBAAAC,GAAA,uBAAAC,EAAA,IAAAC,EAAAJ,CAAA,GAOAK,IAAAC,EAAA,MAAAJ,EAAA,UAAAK,EAAA,KAAA,GAEAC,IAAAF,EAAA,OAAA;AAAA,MAA2C,gCAAAD,EAAA;AAAA,IACQ,EAAA;4IAKnD,CAAAI,MAAA;AACI,MAAAC,EAAA,SAAAD,CAAA,GACAN,EAAAI,EAAA,KAAA;AAAA,IAAiC;;;;;;;;;;;;;;qBCFrCI,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;GC+EAC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;iBA1EA,EAAA,EAAA,IAAAC,EAAA,GAEAC,IAAAC,EAAA;AAAA,MAAmC,GAAAC;AAAA,IAC5B,CAAA,GAGPC,IAAAH,EAAA,eAAA,GAAA,GAQAI,IAAAb,EAAA,MAAAC,EAAA,MAAA,KAAA,CAAAa,MAAA,OAAA,OAAAA,GAAA,OAAA,CAAA,CAAA,GACAC,IAAAf,EAAA,MAAAC,EAAA,KAAA,GAEAe,IAAAhB,EAAA,MAAA;AACI,YAAAiB,IAAAF,EAAA,MAAA,CAAA;AAEA,aAAA,WAAAE,IACIA,EAAA,MAAA,CAAA,EAAA,QAEAA,EAAA;AAAA,IACJ,CAAA,GAEJrB,IAAAsB,EAAAjB,EAAA,SAAAe,EAAA,KAAA,GACAnB,IAAA,CAAAsB,MAAA;AACI,MAAAvB,EAAA,QAAAuB,GACAf,EAAA,UAAAe,CAAA;AAAA,IAAoB,GAKxBC,IAAA;AAAA,MAAsC,iBAAAC,EAAAzB,CAAA;AAAA,MACO,uBAAAC;AAAA,IACzC;AAGJ,WAAAyB;AAAA,MAAA,MAAArB,EAAA;AAAA,MACgB,CAAAkB,MAAA;AAER,QAAAvB,EAAA,QAAAuB;AAAA,MAAwB;AAAA,IAC5B,GAGJI,EAAA7B,GAAA0B,CAAA;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{sidepanel.CI8fu1Q3.js → sidepanel.Dt-BnFzN.js}

@@ -1,6 +1,6 @@
 import { defineComponent as P, toRefs as k, ref as o, computed as B, watch as N, nextTick as x, provide as v } from "vue";
 import { B as G, d as F } from "./typography.J1v_SPG3.js";
-import { F as L } from "./footer-actions.DyuSTjC5.js";
+import { F as L } from "./footer-actions.BUfQFz7J.js";
 import { D as R, B as U, b as w, a as J } from "./dialog-page.CLHZqQeU.js";
 import { n as b } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { B as V } from "./button.hF-nD1Og.js";
@@ -207,4 +207,4 @@ export {
   Ce as a,
   ge as s
 };
-//# sourceMappingURL=sidepanel.CI8fu1Q3.js.map
+//# sourceMappingURL=sidepanel.Dt-BnFzN.js.map

package/dist/chunks/{sidepanel.CI8fu1Q3.js.map → sidepanel.Dt-BnFzN.js.map}

@@ -1 +1 @@
-{"version":3,"file":"sidepanel.CI8fu1Q3.js","sources":["../../src/components/sidepanel/components/sidepanel-page.vue","../../src/components/sidepanel/sidepanel.types.ts","../../src/components/sidepanel/sidepanel.vue"],"sourcesContent":["<template>\n    <dialog-page class=\"b-sidepanel-page\" :page-id=\"pageId\" :previous-page=\"previousPage\">\n        <template #header>\n            <div class=\"b-sidepanel-page__header\">\n                <bento-typography class=\"b-sidepanel-page__title\" el=\"h2\" variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n            </div>\n        </template>\n        <template #content>\n            <div class=\"b-sidepanel-page__content\">\n                <bento-typography el=\"div\" variant=\"body\">\n                    <slot />\n                </bento-typography>\n            </div>\n        </template>\n        <template v-if=\"actions && actions.length > 0\" #footer>\n            <div class=\"b-sidepanel-page__actions\">\n                <footer-actions\n                    :actions=\"actions\"\n                    :actions-label=\"actionsLabel\"\n                    :destructive-actions=\"destructiveActions\"\n                />\n            </div>\n        </template>\n    </dialog-page>\n</template>\n\n<script setup lang=\"ts\">\n    import { PropType } from 'vue';\n\n    import { BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { FooterActions } from '@/components/internal/footer-actions';\n    import { DialogPage } from '@/internal';\n\n    defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * ```\n         * [{\n         *   title: 'Primary',\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Identifier of the page, used with activePage prop to handle sidepanel navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n         * Used when the back button should not take the user to the natural previous page\n         * Set to `null` to hide back button in the page\n         */\n        previousPage: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Title of the sidepanel page\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * SidepanelPage is used to render different pages of Sidepanel component\n     *\n     * @example\n     * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSidepanel, BentoSidepanelPage },\n     *     template: `\n     *          <bento-sidepanel active-page='step1' is-open='true'>\n     *              <bento-sidepanel-page\n     *                  title='Step 1'\n     *                  pageId='step1'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next step',\n     *                          event: () => {\n     *                              activePage.value = 'step2';\n     *                          },\n     *                      }]\">\n     *                  Step 1 info\n     *              </bento-sidepanel-page>\n     *              <bento-sidepanel-page\n     *                  title='Step 2'\n     *                  pageId='step2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Step 2 info\n     *              </bento-sidepanel-page>\n     *          </bento-sidepanel>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./sidepanel-page.scss\" />\n","export enum BentoSidepanelEvent {\n    UPDATE_ACTIVE_PAGE = 'update:active-page',\n    UPDATE_IS_OPEN = 'update:is-open',\n}\n","<template>\n    <dialog\n        ref=\"sidepanel\"\n        class=\"b-sidepanel\"\n        :class=\"conditionalClasses\"\n        @animationend=\"closeSidepanelAfterAnimation\"\n        @keydown.esc.prevent=\"isDismissible && startCloseSidepanelAnimation\"\n    >\n        <bento-focus-trap :id=\"sidepanelId\" v-bento-click-outside-directive=\"closeSidepanelOnClickOutside\">\n            <div v-if=\"!computedHideCloseButton\" class=\"b-sidepanel__close-button\">\n                <bento-button variant=\"tertiary\" @click=\"startCloseSidepanelAnimation\">\n                    <cross-icon :svg-title=\"t('close')\" />\n                </bento-button>\n            </div>\n            <slot />\n        </bento-focus-trap>\n    </dialog>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, provide, ref, toRefs, watch } from 'vue';\n\n    import { BentoButton } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { BentoSidepanelEvent } from './sidepanel.types';\n    import {\n        BentoDialogPageAnimation,\n        BentoDialogPageConfigData,\n        BentoDialogPageRegisterPage,\n        DIALOG_PAGE_CONFIG_INJECTION_KEY,\n        DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,\n    } from '@/internal';\n\n    import { SIDEPANEL_DIALOG_ID_INJECTION_KEY } from './sidepanel.keys';\n\n    import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n    import { generateUid } from '@/core/utils/ts';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * The id of the current active page\n         * Should be the same id as the BentoSidepanelPage to be displayed\n         * If the component only has one page, it can be left null/undefined.\n         */\n        activePage: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If set to true, it allows the sidepanel to be closed.\n         * Shows close button when `true` and hides close button when `false`.\n         *\n         * _Note: This property will not set the visibility of the close button in v2.0.0_\n         */\n        isDismissible: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Controls the sidepanel's state from the outside. Set it to true to open the sidepanel.\n         */\n        isOpen: {\n            type: Boolean,\n            default: null,\n        },\n\n        /**\n         * Controls the visibility of close button on the sidepanel.\n         * Defaults to `true` when `isDismissible=false`, and `true` when `isDimissible=true`.\n         *\n         * _Note: This property will be set to `false` by default, independent of `isDismissible` in v2.0.0_\n         */\n        hideCloseButton: {\n            type: Boolean,\n            default: null,\n        },\n    });\n\n    const emit = defineEmits([]);\n\n    // Refs\n    const { activePage, isOpen } = toRefs(props);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const sidepanel = ref(null);\n    const pages = ref<string[]>([]);\n    const previousPages = ref([]);\n    const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER);\n    const isClosing = ref(false);\n    const sidepanelId = generateUid('sidepanel');\n    const internalIsOpen = ref(false);\n    const isAnimationActive = ref(false);\n\n    // Animation styling\n    const conditionalClasses = computed(() => ({\n        'b-sidepanel--hide': isClosing.value,\n        'b-sidepanel--animation': isAnimationActive.value,\n    }));\n\n    // Handle closing and closing animation for dialog element\n    const closeSidepanelAfterAnimation = () => {\n        if (isClosing.value) {\n            sidepanel.value.close();\n            if (previousPages.value[0]) {\n                emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, previousPages.value[0]);\n            }\n            previousPages.value = [];\n            isClosing.value = false;\n            internalIsOpen.value = false;\n            emit(BentoSidepanelEvent.UPDATE_IS_OPEN, false);\n        }\n    };\n\n    const startCloseSidepanelAnimation = () => {\n        if (!sidepanel.value.open) {\n            return;\n        }\n        isClosing.value = true;\n    };\n\n    const closeSidepanelOnClickOutside = () => {\n        if (props.isDismissible) {\n            startCloseSidepanelAnimation();\n        }\n    };\n\n    // TODO: Remove in upcoming major. See properties `hideCloseButton` and `isDismissible`.\n    const computedHideCloseButton = computed(() => {\n        if (props.hideCloseButton !== null) {\n            return props.hideCloseButton;\n        }\n\n        return !props.isDismissible;\n    });\n\n    // Watching isOpen prop to toggle open/close the dialog element\n    watch(\n        () => isOpen.value,\n        async () => {\n            // Wait for sidepanel ref to be created\n            await nextTick();\n\n            if (!sidepanel.value) {\n                return;\n            }\n\n            if (isOpen.value) {\n                internalIsOpen.value = true;\n                sidepanel.value.showModal();\n                if (!previousPages.value.length) {\n                    previousPages.value.push(activePage.value);\n                }\n            } else if (sidepanel.value.open) {\n                startCloseSidepanelAnimation();\n            }\n        },\n        { immediate: true }\n    );\n\n    // Pages\n    const updatePage = page => emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page);\n\n    // unregister page if removed / destroyed\n    const unregisterPage = (pageIdToRemove: string) => () => {\n        pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove);\n    };\n\n    // Provide data and function to register page to subcomponent\n    const registerPage: BentoDialogPageRegisterPage = pageId => {\n        pages.value.push(pageId);\n\n        return { unregisterPage: unregisterPage(pageId) };\n    };\n\n    provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, {\n        activePage,\n        animation,\n        isAnimationActive,\n        isOpen: internalIsOpen,\n        pages,\n        previousPages,\n        updatePage,\n    });\n    provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage);\n\n    // Let's Children components know they are inside a SidePanel (dialog element)\n    provide(SIDEPANEL_DIALOG_ID_INJECTION_KEY, sidepanelId);\n\n    if (!props.isDismissible && props.hideCloseButton === null) {\n        deprecate(\n            'BentoSidepanel \"isDismissible\" property’s behavior',\n            'BentoSidepanel \"isDismissible\" will no longer hide the close button. Use \"hideCloseButton=true\" instead.',\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Sidepanel component is a slide-in panel that should be used for presenting actions, settings or features that are directly associated with a specific task or interaction on the main screen.\n     *\n     * @example\n     * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSidepanel, BentoSidepanelPage },\n     *     template: `\n     *          <bento-sidepanel active-page='step1' is-open='true'>\n     *              <bento-sidepanel-page\n     *                  title='Step 1'\n     *                  pageId='step1'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next step',\n     *                          event: () => {\n     *                              activePage.value = 'step2';\n     *                          },\n     *                      }]\">\n     *                  Step 1 info\n     *              </bento-sidepanel-page>\n     *              <bento-sidepanel-page\n     *                  title='Step 2'\n     *                  pageId='step2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Step 2 info\n     *              </bento-sidepanel-page>\n     *          </bento-sidepanel>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n<style lang=\"scss\" scoped src=\"./sidepanel.scss\" />\n"],"names":["__default__$1","BentoSidepanelEvent","BentoSidepanelEvent2","__default__","messages","activePage","isOpen","toRefs","props","t","useI18n","sidepanel","ref","pages","previousPages","animation","BentoDialogPageAnimation","isClosing","sidepanelId","generateUid","internalIsOpen","isAnimationActive","conditionalClasses","computed","closeSidepanelAfterAnimation","emit","startCloseSidepanelAnimation","closeSidepanelOnClickOutside","computedHideCloseButton","watch","nextTick","updatePage","page","unregisterPage","pageIdToRemove","_a","pageId","registerPage","provide","DIALOG_PAGE_CONFIG_INJECTION_KEY","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY","SIDEPANEL_DIALOG_ID_INJECTION_KEY","deprecate"],"mappings":";;;;;;;;;;;;;AA2II,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC3IQ,IAAAC,IAAA,kBAAAC,OACRA,EAAA,qBAAA,sBACAA,EAAA,iBAAA,kBAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;GCoPRE,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA1JA,EAAA,YAAAC,GAAA,QAAAC,EAAA,IAAAC,EAAAC,CAAA,GACA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,CAAA,CAAA,GACAE,IAAAF,EAAA,CAAA,CAAA,GACAG,IAAAH,EAAAI,EAAA,uBAAA,GACAC,IAAAL,EAAA,EAAA,GACAM,IAAAC,EAAA,WAAA,GACAC,IAAAR,EAAA,EAAA,GACAS,IAAAT,EAAA,EAAA,GAGAU,IAAAC,EAAA,OAAA;AAAA,MAA2C,qBAAAN,EAAA;AAAA,MACR,0BAAAI,EAAA;AAAA,IACa,EAAA,GAIhDG,IAAA,MAAA;AACI,MAAAP,EAAA,UACIN,EAAA,MAAA,MAAA,GACAG,EAAA,MAAA,CAAA,KACIW,EAAAxB,EAAA,oBAAAa,EAAA,MAAA,CAAA,CAAA,GAEJA,EAAA,QAAA,CAAA,GACAG,EAAA,QAAA,IACAG,EAAA,QAAA,IACAK,EAAAxB,EAAA,gBAAA,EAAA;AAAA,IACJ,GAGJyB,IAAA,MAAA;AACI,MAAAf,EAAA,MAAA,SAGAM,EAAA,QAAA;AAAA,IAAkB,GAGtBU,IAAA,MAAA;AACI,MAAAnB,EAAA,iBACIkB,EAAA;AAAA,IACJ,GAIJE,IAAAL,EAAA,MACIf,EAAA,oBAAA,OACIA,EAAA,kBAGJ,CAAAA,EAAA,aAAc;AAIlB,IAAAqB;AAAA,MAAA,MAAAvB,EAAA;AAAA,MACiB,YAAA;AAKT,QAFA,MAAAwB,EAAA,GAEAnB,EAAA,UAIAL,EAAA,SACIc,EAAA,QAAA,IACAT,EAAA,MAAA,UAAA,GACAG,EAAA,MAAA,UACIA,EAAA,MAAA,KAAAT,EAAA,KAAA,KACJM,EAAA,MAAA,QAEAe,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAK,IAAA,CAAAC,MAAAP,EAAAxB,EAAA,oBAAA+B,CAAA,GAGAC,IAAA,CAAAC,MAAA,MAAA;;AACI,MAAArB,EAAA,SAAAsB,IAAAtB,EAAA,UAAA,gBAAAsB,EAAA,OAAA,CAAAC,MAAAA,MAAAF;AAAA,IAAqE,GAIzEG,IAAA,CAAAD,OACIvB,EAAA,MAAA,KAAAuB,CAAA,GAEA,EAAA,gBAAAH,EAAAG,CAAA,EAAA;AAGJ,WAAAE,EAAAC,GAAA;AAAA,MAAqE,YAAAlC;AAAA,MACjE,WAAAU;AAAA,MACA,mBAAAM;AAAA,MACA,QAAAD;AAAA,MACQ,OAAAP;AAAA,MACR,eAAAC;AAAA,MACA,YAAAiB;AAAA,IACA,CAAA,GAEJO,EAAAE,GAAAH,CAAA,GAGAC,EAAAG,GAAAvB,CAAA,GAEA,CAAAV,EAAA,iBAAAA,EAAA,oBAAA,QACIkC;AAAA,MAAA;AAAA,MACI;AAAA,MACA;AAAA,IACA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"sidepanel.Dt-BnFzN.js","sources":["../../src/components/sidepanel/components/sidepanel-page.vue","../../src/components/sidepanel/sidepanel.types.ts","../../src/components/sidepanel/sidepanel.vue"],"sourcesContent":["<template>\n    <dialog-page class=\"b-sidepanel-page\" :page-id=\"pageId\" :previous-page=\"previousPage\">\n        <template #header>\n            <div class=\"b-sidepanel-page__header\">\n                <bento-typography class=\"b-sidepanel-page__title\" el=\"h2\" variant=\"title\">\n                    {{ title }}\n                </bento-typography>\n            </div>\n        </template>\n        <template #content>\n            <div class=\"b-sidepanel-page__content\">\n                <bento-typography el=\"div\" variant=\"body\">\n                    <slot />\n                </bento-typography>\n            </div>\n        </template>\n        <template v-if=\"actions && actions.length > 0\" #footer>\n            <div class=\"b-sidepanel-page__actions\">\n                <footer-actions\n                    :actions=\"actions\"\n                    :actions-label=\"actionsLabel\"\n                    :destructive-actions=\"destructiveActions\"\n                />\n            </div>\n        </template>\n    </dialog-page>\n</template>\n\n<script setup lang=\"ts\">\n    import { PropType } from 'vue';\n\n    import { BentoButtonActionsList } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { FooterActions } from '@/components/internal/footer-actions';\n    import { DialogPage } from '@/internal';\n\n    defineProps({\n        /**\n         * List of actions that will be used to render the buttons.\n         * First element in the list will be rendered as \"primary\".\n         * All elements after the first will be rendered as \"secondary\".\n         *\n         * ```\n         * [{\n         *   title: 'Primary',\n         *   event: () => { ... },\n         *   icon: FourPeopleIcon\n         * }, {\n         *   title: 'Secondary',\n         *   event: () => { ... }\n         * }]\n         * ```\n         */\n        actions: {\n            type: Array as PropType<BentoButtonActionsList>,\n            default: null,\n        },\n\n        /**\n         * Text label that is displayed left to the action buttons\n         */\n        actionsLabel: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If passed - sets first button color to red\n         */\n        destructiveActions: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Identifier of the page, used with activePage prop to handle sidepanel navigation\n         */\n        pageId: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior\n         * Used when the back button should not take the user to the natural previous page\n         * Set to `null` to hide back button in the page\n         */\n        previousPage: {\n            type: String,\n            default: undefined,\n        },\n\n        /**\n         * Title of the sidepanel page\n         */\n        title: {\n            type: String,\n            default: null,\n        },\n    });\n</script>\n\n<script lang=\"ts\">\n    /**\n     * SidepanelPage is used to render different pages of Sidepanel component\n     *\n     * @example\n     * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSidepanel, BentoSidepanelPage },\n     *     template: `\n     *          <bento-sidepanel active-page='step1' is-open='true'>\n     *              <bento-sidepanel-page\n     *                  title='Step 1'\n     *                  pageId='step1'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next step',\n     *                          event: () => {\n     *                              activePage.value = 'step2';\n     *                          },\n     *                      }]\">\n     *                  Step 1 info\n     *              </bento-sidepanel-page>\n     *              <bento-sidepanel-page\n     *                  title='Step 2'\n     *                  pageId='step2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Step 2 info\n     *              </bento-sidepanel-page>\n     *          </bento-sidepanel>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./sidepanel-page.scss\" />\n","export enum BentoSidepanelEvent {\n    UPDATE_ACTIVE_PAGE = 'update:active-page',\n    UPDATE_IS_OPEN = 'update:is-open',\n}\n","<template>\n    <dialog\n        ref=\"sidepanel\"\n        class=\"b-sidepanel\"\n        :class=\"conditionalClasses\"\n        @animationend=\"closeSidepanelAfterAnimation\"\n        @keydown.esc.prevent=\"isDismissible && startCloseSidepanelAnimation\"\n    >\n        <bento-focus-trap :id=\"sidepanelId\" v-bento-click-outside-directive=\"closeSidepanelOnClickOutside\">\n            <div v-if=\"!computedHideCloseButton\" class=\"b-sidepanel__close-button\">\n                <bento-button variant=\"tertiary\" @click=\"startCloseSidepanelAnimation\">\n                    <cross-icon :svg-title=\"t('close')\" />\n                </bento-button>\n            </div>\n            <slot />\n        </bento-focus-trap>\n    </dialog>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, provide, ref, toRefs, watch } from 'vue';\n\n    import { BentoButton } from '@/components/button';\n    import { BentoFocusTrap } from '@/components/focus-trap';\n    import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross';\n\n    import { BentoSidepanelEvent } from './sidepanel.types';\n    import {\n        BentoDialogPageAnimation,\n        BentoDialogPageConfigData,\n        BentoDialogPageRegisterPage,\n        DIALOG_PAGE_CONFIG_INJECTION_KEY,\n        DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY,\n    } from '@/internal';\n\n    import { SIDEPANEL_DIALOG_ID_INJECTION_KEY } from './sidepanel.keys';\n\n    import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside';\n\n    import { useI18n } from '@/utils/ts/i18n';\n\n    import messages from './messages.json';\n    import { generateUid } from '@/core/utils/ts';\n    import { deprecate } from '@/utils/ts/deprecate';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const props = defineProps({\n        /**\n         * The id of the current active page\n         * Should be the same id as the BentoSidepanelPage to be displayed\n         * If the component only has one page, it can be left null/undefined.\n         */\n        activePage: {\n            type: String,\n            default: null,\n        },\n\n        /**\n         * If set to true, it allows the sidepanel to be closed.\n         * Shows close button when `true` and hides close button when `false`.\n         *\n         * _Note: This property will not set the visibility of the close button in v2.0.0_\n         */\n        isDismissible: {\n            type: Boolean,\n            default: false,\n        },\n\n        /**\n         * Controls the sidepanel's state from the outside. Set it to true to open the sidepanel.\n         */\n        isOpen: {\n            type: Boolean,\n            default: null,\n        },\n\n        /**\n         * Controls the visibility of close button on the sidepanel.\n         * Defaults to `true` when `isDismissible=false`, and `true` when `isDimissible=true`.\n         *\n         * _Note: This property will be set to `false` by default, independent of `isDismissible` in v2.0.0_\n         */\n        hideCloseButton: {\n            type: Boolean,\n            default: null,\n        },\n    });\n\n    const emit = defineEmits([]);\n\n    // Refs\n    const { activePage, isOpen } = toRefs(props);\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const sidepanel = ref(null);\n    const pages = ref<string[]>([]);\n    const previousPages = ref([]);\n    const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER);\n    const isClosing = ref(false);\n    const sidepanelId = generateUid('sidepanel');\n    const internalIsOpen = ref(false);\n    const isAnimationActive = ref(false);\n\n    // Animation styling\n    const conditionalClasses = computed(() => ({\n        'b-sidepanel--hide': isClosing.value,\n        'b-sidepanel--animation': isAnimationActive.value,\n    }));\n\n    // Handle closing and closing animation for dialog element\n    const closeSidepanelAfterAnimation = () => {\n        if (isClosing.value) {\n            sidepanel.value.close();\n            if (previousPages.value[0]) {\n                emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, previousPages.value[0]);\n            }\n            previousPages.value = [];\n            isClosing.value = false;\n            internalIsOpen.value = false;\n            emit(BentoSidepanelEvent.UPDATE_IS_OPEN, false);\n        }\n    };\n\n    const startCloseSidepanelAnimation = () => {\n        if (!sidepanel.value.open) {\n            return;\n        }\n        isClosing.value = true;\n    };\n\n    const closeSidepanelOnClickOutside = () => {\n        if (props.isDismissible) {\n            startCloseSidepanelAnimation();\n        }\n    };\n\n    // TODO: Remove in upcoming major. See properties `hideCloseButton` and `isDismissible`.\n    const computedHideCloseButton = computed(() => {\n        if (props.hideCloseButton !== null) {\n            return props.hideCloseButton;\n        }\n\n        return !props.isDismissible;\n    });\n\n    // Watching isOpen prop to toggle open/close the dialog element\n    watch(\n        () => isOpen.value,\n        async () => {\n            // Wait for sidepanel ref to be created\n            await nextTick();\n\n            if (!sidepanel.value) {\n                return;\n            }\n\n            if (isOpen.value) {\n                internalIsOpen.value = true;\n                sidepanel.value.showModal();\n                if (!previousPages.value.length) {\n                    previousPages.value.push(activePage.value);\n                }\n            } else if (sidepanel.value.open) {\n                startCloseSidepanelAnimation();\n            }\n        },\n        { immediate: true }\n    );\n\n    // Pages\n    const updatePage = page => emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page);\n\n    // unregister page if removed / destroyed\n    const unregisterPage = (pageIdToRemove: string) => () => {\n        pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove);\n    };\n\n    // Provide data and function to register page to subcomponent\n    const registerPage: BentoDialogPageRegisterPage = pageId => {\n        pages.value.push(pageId);\n\n        return { unregisterPage: unregisterPage(pageId) };\n    };\n\n    provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, {\n        activePage,\n        animation,\n        isAnimationActive,\n        isOpen: internalIsOpen,\n        pages,\n        previousPages,\n        updatePage,\n    });\n    provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage);\n\n    // Let's Children components know they are inside a SidePanel (dialog element)\n    provide(SIDEPANEL_DIALOG_ID_INJECTION_KEY, sidepanelId);\n\n    if (!props.isDismissible && props.hideCloseButton === null) {\n        deprecate(\n            'BentoSidepanel \"isDismissible\" property’s behavior',\n            'BentoSidepanel \"isDismissible\" will no longer hide the close button. Use \"hideCloseButton=true\" instead.',\n            '2.0.0'\n        );\n    }\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Sidepanel component is a slide-in panel that should be used for presenting actions, settings or features that are directly associated with a specific task or interaction on the main screen.\n     *\n     * @example\n     * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSidepanel, BentoSidepanelPage },\n     *     template: `\n     *          <bento-sidepanel active-page='step1' is-open='true'>\n     *              <bento-sidepanel-page\n     *                  title='Step 1'\n     *                  pageId='step1'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Next step',\n     *                          event: () => {\n     *                              activePage.value = 'step2';\n     *                          },\n     *                      }]\">\n     *                  Step 1 info\n     *              </bento-sidepanel-page>\n     *              <bento-sidepanel-page\n     *                  title='Step 2'\n     *                  pageId='step2'\n     *                  :actions=\"[\n     *                      {\n     *                          title: 'Save',\n     *                          event: () => {},\n     *                      }]\">\n     *                  Step 2 info\n     *              </bento-sidepanel-page>\n     *          </bento-sidepanel>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n<style lang=\"scss\" scoped src=\"./sidepanel.scss\" />\n"],"names":["__default__$1","BentoSidepanelEvent","BentoSidepanelEvent2","__default__","messages","activePage","isOpen","toRefs","props","t","useI18n","sidepanel","ref","pages","previousPages","animation","BentoDialogPageAnimation","isClosing","sidepanelId","generateUid","internalIsOpen","isAnimationActive","conditionalClasses","computed","closeSidepanelAfterAnimation","emit","startCloseSidepanelAnimation","closeSidepanelOnClickOutside","computedHideCloseButton","watch","nextTick","updatePage","page","unregisterPage","pageIdToRemove","_a","pageId","registerPage","provide","DIALOG_PAGE_CONFIG_INJECTION_KEY","DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY","SIDEPANEL_DIALOG_ID_INJECTION_KEY","deprecate"],"mappings":";;;;;;;;;;;;;AA2II,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC3IQ,IAAAC,IAAA,kBAAAC,OACRA,EAAA,qBAAA,sBACAA,EAAA,iBAAA,kBAFQA,IAAAD,KAAA,CAAA,CAAA;;;;;;;;;;;GCoPRE,KAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBA1JA,EAAA,YAAAC,GAAA,QAAAC,EAAA,IAAAC,EAAAC,CAAA,GACA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,CAAA,CAAA,GACAE,IAAAF,EAAA,CAAA,CAAA,GACAG,IAAAH,EAAAI,EAAA,uBAAA,GACAC,IAAAL,EAAA,EAAA,GACAM,IAAAC,EAAA,WAAA,GACAC,IAAAR,EAAA,EAAA,GACAS,IAAAT,EAAA,EAAA,GAGAU,IAAAC,EAAA,OAAA;AAAA,MAA2C,qBAAAN,EAAA;AAAA,MACR,0BAAAI,EAAA;AAAA,IACa,EAAA,GAIhDG,IAAA,MAAA;AACI,MAAAP,EAAA,UACIN,EAAA,MAAA,MAAA,GACAG,EAAA,MAAA,CAAA,KACIW,EAAAxB,EAAA,oBAAAa,EAAA,MAAA,CAAA,CAAA,GAEJA,EAAA,QAAA,CAAA,GACAG,EAAA,QAAA,IACAG,EAAA,QAAA,IACAK,EAAAxB,EAAA,gBAAA,EAAA;AAAA,IACJ,GAGJyB,IAAA,MAAA;AACI,MAAAf,EAAA,MAAA,SAGAM,EAAA,QAAA;AAAA,IAAkB,GAGtBU,IAAA,MAAA;AACI,MAAAnB,EAAA,iBACIkB,EAAA;AAAA,IACJ,GAIJE,IAAAL,EAAA,MACIf,EAAA,oBAAA,OACIA,EAAA,kBAGJ,CAAAA,EAAA,aAAc;AAIlB,IAAAqB;AAAA,MAAA,MAAAvB,EAAA;AAAA,MACiB,YAAA;AAKT,QAFA,MAAAwB,EAAA,GAEAnB,EAAA,UAIAL,EAAA,SACIc,EAAA,QAAA,IACAT,EAAA,MAAA,UAAA,GACAG,EAAA,MAAA,UACIA,EAAA,MAAA,KAAAT,EAAA,KAAA,KACJM,EAAA,MAAA,QAEAe,EAAA;AAAA,MACJ;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAItB,UAAAK,IAAA,CAAAC,MAAAP,EAAAxB,EAAA,oBAAA+B,CAAA,GAGAC,IAAA,CAAAC,MAAA,MAAA;;AACI,MAAArB,EAAA,SAAAsB,IAAAtB,EAAA,UAAA,gBAAAsB,EAAA,OAAA,CAAAC,MAAAA,MAAAF;AAAA,IAAqE,GAIzEG,IAAA,CAAAD,OACIvB,EAAA,MAAA,KAAAuB,CAAA,GAEA,EAAA,gBAAAH,EAAAG,CAAA,EAAA;AAGJ,WAAAE,EAAAC,GAAA;AAAA,MAAqE,YAAAlC;AAAA,MACjE,WAAAU;AAAA,MACA,mBAAAM;AAAA,MACA,QAAAD;AAAA,MACQ,OAAAP;AAAA,MACR,eAAAC;AAAA,MACA,YAAAiB;AAAA,IACA,CAAA,GAEJO,EAAAE,GAAAH,CAAA,GAGAC,EAAAG,GAAAvB,CAAA,GAEA,CAAAV,EAAA,iBAAAA,EAAA,oBAAA,QACIkC;AAAA,MAAA;AAAA,MACI;AAAA,MACA;AAAA,IACA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{summary-grid.types.Cwri2Y3T.js → summary-grid.types.DsvtLg3D.js}

@@ -4,7 +4,7 @@ import { S as B, a as x } from "./summary-grid.keys.CxTf_FOc.js";
 import { G as M } from "./grid-layout.HvTAa4to.js";
 import { n as f } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { u as R } from "./i18n.BQkEbtPM.js";
-import { B as G } from "./dashed-underline.CEaAmjDa.js";
+import { B as G } from "./dashed-underline.BQwLgzz6.js";
 import { B as w } from "./info-icon.CYOXx8CL.js";
 import { B as L } from "./typography.J1v_SPG3.js";
 import { B as E } from "./tag.CGkclKVL.js";
@@ -334,4 +334,4 @@ export {
   ge as f,
   Re as s
 };
-//# sourceMappingURL=summary-grid.types.Cwri2Y3T.js.map
+//# sourceMappingURL=summary-grid.types.DsvtLg3D.js.map

package/dist/chunks/{summary-grid.types.Cwri2Y3T.js.map → summary-grid.types.DsvtLg3D.js.map}

@@ -1 +1 @@
-{"version":3,"file":"summary-grid.types.Cwri2Y3T.js","sources":["../../src/components/summary-grid/summary-grid.vue","../../src/components/summary-grid/components/summary-grid-item/summary-grid-item.vue","../../src/components/summary-grid/components/summary-grid-item-amount/summary-grid-item-amount.vue","../../src/components/summary-grid/components/summary-grid-item-numeric/summary-grid-item-numeric.vue","../../src/components/summary-grid/components/summary-grid-item-percentage/summary-grid-item-percentage.vue","../../src/components/summary-grid/components/summary-grid-item-text/summary-grid-item-text.vue","../../src/components/summary-grid/components/summary-grid-item-custom/summary-grid-item-custom.vue","../../src/components/summary-grid/summary-grid.types.ts"],"sourcesContent":["<template>\n    <div class=\"b-summary-grid\">\n        <grid-layout\n            v-for=\"index in numberOfRows\"\n            :key=\"`summary-grid-row-${index}`\"\n            :data-testid=\"`summary-grid-row-${index}`\"\n            :column-width=\"columnWidth?.[`row${index}`]\"\n        >\n            <template v-if=\"hasSlot(`cell-${index}-1`)\" #col-1>\n                <slot :name=\"`cell-${index}-1`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-2`)\" #col-2>\n                <slot :name=\"`cell-${index}-2`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-3`)\" #col-3>\n                <slot :name=\"`cell-${index}-3`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-4`)\" #col-4>\n                <slot :name=\"`cell-${index}-4`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-5`)\" #col-5>\n                <slot :name=\"`cell-${index}-5`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-6`)\" #col-6>\n                <slot :name=\"`cell-${index}-6`\" />\n            </template>\n        </grid-layout>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { onMounted, provide, toRef, useSlots } from 'vue';\n    import type { BentoSummaryGridLayout, BentoSummaryGridProps } from './summary-grid.types';\n    import { GridLayout } from '@/components/internal';\n    import { useHasSlot } from '@/composables';\n    import {\n        SUMMARY_GRID_LAYOUT_INJECTION_KEY,\n        SUMMARY_GRID_SLASHED_ZERO,\n    } from '@/components/summary-grid/summary-grid.keys';\n\n    const props = defineProps({\n  columnWidth: { default: null },\n  slashedZero: { type: Boolean, default: false }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    let numberOfRows = 1;\n    if (slots) {\n        const slotRows = Object.keys(slots)\n            ?.filter(slotName => slotName.includes('cell-'))\n            ?.map(slotName => parseInt(slotName.split('-')?.[1], 10));\n        numberOfRows = Math.max(...slotRows);\n    }\n\n    onMounted(() => {\n        if (numberOfRows > 3) {\n            throw new Error(\n                'BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information.'\n            );\n        }\n    });\n\n    const registerComponentsInSummaryGrid: BentoSummaryGridLayout = () => {\n        const isSummaryGridLayout = true;\n        return { isSummaryGridLayout };\n    };\n\n    provide(SUMMARY_GRID_LAYOUT_INJECTION_KEY, registerComponentsInSummaryGrid);\n    provide(SUMMARY_GRID_SLASHED_ZERO, toRef(props, 'slashedZero'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary grid component that displays a collection items.\n     *\n     * @example\n     * import { BentoSummaryGrid, BentoSummaryGridItemAmount } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGrid, BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid>\n     *             <template #cell-2-2>\n     *                <bento-summary-grid-item-amount\n     *                   title=\"Text Item\"\n     *                   label=\"14\"\n     *                   info-icon-tooltip-text=\"text for icon\"\n     *                   copy=\"copy this to clipboard\"\n     *                />\n     *             </template>\n     *          </bento-summary-grid>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid.scss\" />\n","<template>\n    <div class=\"b-summary-grid-item\" :class=\"conditionalClasses\" :style=\"computedStyles\">\n        <div class=\"b-summary-grid-item__header\">\n            <bento-typography class=\"b-summary-grid-item__title\" el=\"span\" variant=\"body\">\n                <bento-dashed-underline\n                    v-if=\"withUnderline\"\n                    :tooltip-text=\"underlineTooltipText\"\n                    :popover-size=\"underlinePopoverSize\"\n                >\n                    {{ title }}\n                    <template v-if=\"hasSlot('dashed-underline')\" #popover-content>\n                        <slot name=\"dashed-underline\"></slot>\n                    </template>\n                </bento-dashed-underline>\n                <template v-else>\n                    {{ title }}\n                </template>\n            </bento-typography>\n            <div class=\"b-summary-grid-item__title-icons\">\n                <copy v-if=\"copy\" class=\"b-structured-list__icon\" :text=\"copy\" @click=\"$emit('copy-click', $event)\" />\n\n                <bento-info-icon\n                    v-if=\"infoIconTooltipText\"\n                    :tooltip-text=\"infoIconTooltipText\"\n                    tooltip-position=\"top\"\n                    class=\"b-summary-grid-item__title-tooltip\"\n                    @mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n                />\n            </div>\n        </div>\n        <bento-typography\n            data-testid=\"summary-grid-item-content-typography\"\n            class=\"b-summary-grid-item__title\"\n            v-bind=\"typographyProps\"\n            el=\"span\"\n        >\n            <slot />\n            <bento-tag\n                v-if=\"trend && itemType !== 'text'\"\n                :variant=\"trendVariant\"\n                :label=\"trend\"\n                class=\"b-summary-grid-item__content-trend\"\n            />\n        </bento-typography>\n        <bento-typography\n            v-if=\"hasSlot('secondary')\"\n            class=\"b-summary-grid-item__title\"\n            data-testid=\"summary-grid-item-secondary-metric-typography\"\n            el=\"span\"\n            variant=\"caption\"\n            stronger\n        >\n            <slot name=\"secondary\" />\n            <bento-tag\n                v-if=\"secondaryTrend\"\n                :variant=\"secondaryTrendVariant\"\n                :label=\"secondaryTrend\"\n                class=\"b-summary-grid-item__content-trend\"\n            />\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, toRefs, useSlots } from 'vue';\n\n    // Components\n    import { BentoDashedUnderline } from '@/components/dashed-underline';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography, type BentoTypographyVariant } from '@/components/typography';\n    import { BentoTag, type BentoTagVariant } from '@/components/tag';\n    import { Copy } from '@/internal';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n\n    // Types\n    import { SUMMARY_GRID_SLASHED_ZERO } from '@/components/summary-grid/summary-grid.keys';\n    import type { BentoSummaryGridItemTrendDirection } from '@/components/summary-grid/summary-grid.types';\n    import type { BentoSummaryGridItemEvents, BentoSummaryGridItemProps } from './summary-grid-item.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    const props = defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  itemType: { default: 'custom' }\n});\n\n    const { trendDirection, secondaryTrendDirection, itemType, size } = toRefs(props);\n    const hasSlashedZero = inject(SUMMARY_GRID_SLASHED_ZERO, ref(false));\n\n    const tagVariantColor = (direction: `${BentoSummaryGridItemTrendDirection}`): `${BentoTagVariant}` => {\n        switch (direction) {\n            case 'positive':\n                return 'green';\n            case 'negative':\n                return 'red';\n            default:\n                return 'blue';\n        }\n    };\n\n    // TODO implement plus or minus symbol logic\n    const trendVariant = computed(() => tagVariantColor(trendDirection.value));\n    const secondaryTrendVariant = computed(() => tagVariantColor(secondaryTrendDirection.value));\n\n    const typographyContentElement = computed<`${BentoTypographyVariant}`>(() => {\n        if (size.value === 'small') {\n            return 'body';\n        }\n        if (itemType.value !== 'text') {\n            return 'title';\n        }\n\n        return null;\n    });\n\n    const typographyProps = computed(() => ({\n        medium: size.value === 'large',\n        strongest: size.value === 'small',\n        wide: size.value === 'small',\n        variant: typographyContentElement.value,\n    }));\n\n    const computedStyles = computed(() => (props.fitContent ? { width: 'fit-content' } : {}));\n\n    const conditionalClasses = computed(() => ({ 'b-summary-grid-item--slashed-zero': hasSlashedZero.value }));\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const withUnderline = computed(() => props.underlineTooltipText || hasSlot('dashed-underline'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item.scss\" />\n","<template>\n    <summary-grid-item\n        item-type=\"amount\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-amount\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        <div class=\"b-summary-grid-item-amount__content\">\n            <div>{{ label }}</div>\n            <div v-if=\"secondaryLabel\" class=\"b-summary-grid-item-amount__secondary-label\">{{ secondaryLabel }}</div>\n        </div>\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { BentoSummaryGridItemEvents, SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemAmountProps } from './summary-grid-item-amount.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryLabel: { default: null },\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display financial data, such as currency values and monetary amounts\n     *\n     * @example\n     * import { BentoSummaryGridItemAmount } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid-item-amount\n     *              title=\"Your title\"\n     *              label=\"200.00 EUR\"\n     *              secondary-label=\"/ day\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item-amount.scss\" />\n","<template>\n    <summary-grid-item\n        item-type=\"numeric\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-numeric\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { BentoSummaryGridItemEvents, SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemNumericProps } from './summary-grid-item-numeric.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display any numeric information\n     *\n     * @example\n     * import { BentoSummaryGridItemNumeric } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemNumeric },\n     *     template: `\n     *          <bento-summary-grid-item-numeric\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        item-type=\"percentage\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-percentage\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ computedLabelPercentage }}\n        <template v-if=\"secondaryMetric\" #secondary> {{ computedSecondaryMetricPercentage }} </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import { BentoSummaryGridItemEvents, SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import type { BentoSummaryGridItemPercentageProps } from './summary-grid-item-percentage.types';\n    import type { NumberFormatOptions } from 'vue-i18n';\n\n    const { locale } = useI18n();\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    const props = defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const percentageArgs: NumberFormatOptions = {\n        style: 'percent',\n        maximumFractionDigits: 2,\n    };\n\n    const isNumeric = (value: string | number) => value != null && value !== '' && !isNaN(Number(value));\n    const convertToPercentIfNumber = (value: string | number) => {\n        if (value && isNumeric(value)) {\n            return new Intl.NumberFormat(locale.value, percentageArgs).format(Number(value) / 100);\n        }\n        return value;\n    };\n\n    const computedLabelPercentage = computed(() => convertToPercentIfNumber(props.label));\n    const computedSecondaryMetricPercentage = computed(() => convertToPercentIfNumber(props.secondaryMetric));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display any percentage information\n     *\n     * @example\n     * import { BentoSummaryGridItemPercentage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemPercentage },\n     *     template: `\n     *          <bento-summary-grid-item-percentage\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: {},\n    };\n</script>\n","<template>\n    <summary-grid-item\n        item-type=\"text\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-text\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { BentoSummaryGridItemEvents, SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n\n    import type { BentoSummaryGridItemTextProps } from './summary-grid-item-text.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  label: null,\n  title: null,\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display text only. Can be used for references, IDs or any other text data.\n     *\n     * @example\n     * import { BentoSummaryGridItemText } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemText },\n     *     template: `\n     *          <bento-summary-grid-item-text\n     *              title=\"Your title\"\n     *              label=\"Your text here\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        :title=\"title\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        <slot />\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { BentoSummaryGridItemEvents, SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemCustomProps } from './summary-grid-item-custom.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    defineProps({\n  copy: { default: undefined },\n  infoIconTooltipText: { default: null },\n  title: null,\n  fitContent: { type: Boolean, default: false },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","import { GridLayoutColumnWidths } from '@/components/internal/grid-layout/grid-layout.types';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoSummaryGridItemSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoSummaryGridItemTrendDirection {\n    POSITIVE = 'positive',\n    NEGATIVE = 'negative',\n    NEUTRAL = 'neutral',\n}\n\nexport interface BentoSummaryGridColumnWidth {\n    row1: GridLayoutColumnWidths;\n    row2?: GridLayoutColumnWidths;\n    row3?: GridLayoutColumnWidths;\n}\n\nexport type BentoSummaryGridLayout = () => {\n    isSummaryGridLayout: boolean;\n};\n\nexport interface BentoSummaryGridProps {\n    /**\n     * Sets the responsive columns widths values for 1 of the 3 rows.\n     */\n    columnWidth?: BentoSummaryGridColumnWidth;\n\n    /**\n     * Renders a font numeric style with slashed zeros instead of normal ones.\n     */\n    slashedZero?: boolean;\n}\n"],"names":["__default__$6","slots","useSlots","hasSlot","useHasSlot","numberOfRows","slotRows","_b","_a","slotName","onMounted","registerComponentsInSummaryGrid","provide","SUMMARY_GRID_LAYOUT_INJECTION_KEY","SUMMARY_GRID_SLASHED_ZERO","toRef","props","__default__$5","trendDirection","secondaryTrendDirection","itemType","size","toRefs","hasSlashedZero","inject","ref","tagVariantColor","direction","trendVariant","computed","secondaryTrendVariant","typographyContentElement","typographyProps","computedStyles","conditionalClasses","withUnderline","__default__$4","__default__$3","__default__$2","locale","useI18n","percentageArgs","isNumeric","value","convertToPercentIfNumber","computedLabelPercentage","computedSecondaryMetricPercentage","__default__$1","__default__","BentoSummaryGridItemSize","BentoSummaryGridItemSize2","BentoSummaryGridItemTrendDirection","BentoSummaryGridItemTrendDirection2"],"mappings":";;;;;;;;;;;;AAgGI,MAAAA,IAAA,CAAA;;;;;;;;;iBAnDAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;AAEA,QAAAI,IAAA;AACA,QAAAJ,GAAA;AACI,YAAAK,KAAAC,KAAAC,IAAA,OAAA,KAAAP,CAAA,MAAA,gBAAAO,EAAA,OAAA,CAAAC,MAAAA,EAAA,SAAA,OAAA,OAAA,gBAAAF,EAAA,IAAA,CAAAE,MAAA;;AAAA,yBAAAD,IAAAC,EAAA,MAAA,GAAA,MAAA,gBAAAD,EAAA,IAAA,EAAA;AAAA;AAGA,MAAAH,IAAA,KAAA,IAAA,GAAAC,CAAA;AAAA,IAAmC;AAGvC,IAAAI,EAAA,MAAA;AACI,UAAAL,IAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAAA,IAER,CAAA;AAGJ,UAAAM,IAAA,OAEI,EAAA,wBAAA;AAGJ,WAAAC,EAAAC,GAAAF,CAAA,GACAC,EAAAE,GAAAC,EAAAC,GAAA,aAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBCyFAC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;iBA7DA,EAAA,gBAAAC,GAAA,yBAAAC,GAAA,UAAAC,GAAA,MAAAC,EAAA,IAAAC,EAAAN,CAAA,GACAO,IAAAC,EAAAV,GAAAW,EAAA,EAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;AACI,cAAAA,GAAA;AAAA,QAAmB,KAAA;AAEX,iBAAA;AAAA,QAAO,KAAA;AAEP,iBAAA;AAAA,QAAO;AAEP,iBAAA;AAAA,MAAO;AAAA,IACf,GAIJC,IAAAC,EAAA,MAAAH,EAAAR,EAAA,KAAA,CAAA,GACAY,IAAAD,EAAA,MAAAH,EAAAP,EAAA,KAAA,CAAA,GAEAY,IAAAF,EAAA,MACIR,EAAA,UAAA,UACI,SAEJD,EAAA,UAAA,SACI,UAGJ,IAAO,GAGXY,IAAAH,EAAA,OAAA;AAAA,MAAwC,QAAAR,EAAA,UAAA;AAAA,MACb,WAAAA,EAAA,UAAA;AAAA,MACG,MAAAA,EAAA,UAAA;AAAA,MACL,SAAAU,EAAA;AAAA,IACa,EAAA,GAGtCE,IAAAJ,EAAA,MAAAb,EAAA,aAAA,EAAA,OAAA,cAAA,IAAA,CAAA,CAAA,GAEAkB,IAAAL,EAAA,OAAA,EAAA,qCAAAN,EAAA,MAAA,EAAA,GAEAtB,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GACAkC,IAAAN,EAAA,MAAAb,EAAA,wBAAAb,EAAA,kBAAA,CAAA;;;;;;;;;;;;;;;;;;;;;qBC1DAiC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;AA1BA,UAAAnC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;;;sBCoBAoC,KAAA,CAAA;;;;;;;;;;;;;;;;;;;;AAzBA,UAAApC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;;;uBC0CAqC,KAAA;AAAA,EAAe,MAAA,CAAA;AAEf;;;;;;;;;;;;;;;;;;;;iBA/DA,EAAA,QAAAC,EAAA,IAAAC,EAAA,GAoBAvC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAwC,IAAA;AAAA,MAA4C,OAAA;AAAA,MACjC,uBAAA;AAAA,IACgB,GAG3BC,IAAA,CAAAC,MAAAA,KAAA,QAAAA,MAAA,MAAA,CAAA,MAAA,OAAAA,CAAA,CAAA,GACAC,IAAA,CAAAD,MACIA,KAAAD,EAAAC,CAAA,IACI,IAAA,KAAA,aAAAJ,EAAA,OAAAE,CAAA,EAAA,OAAA,OAAAE,CAAA,IAAA,GAAA,IAEJA,GAGJE,IAAAhB,EAAA,MAAAe,EAAA5B,EAAA,KAAA,CAAA,GACA8B,IAAAjB,EAAA,MAAAe,EAAA5B,EAAA,eAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;uBCVA+B,KAAA,CAAA;;;;;;;;;;;;;;AAtBA,UAAA9C,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;uBCeA+C,KAAA,CAAA;;;;;;;;;;;;;AApBA,UAAA/C,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;;AC/BQ,IAAAgD,KAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,SAAA,UACAA,EAAA,QAAA,SAHQA,IAAAD,MAAA,CAAA,CAAA,GASAE,KAAA,kBAAAC,OACRA,EAAA,WAAA,YACAA,EAAA,WAAA,YACAA,EAAA,UAAA,WAHQA,IAAAD,MAAA,CAAA,CAAA;"}
+{"version":3,"file":"summary-grid.types.DsvtLg3D.js","sources":["../../src/components/summary-grid/summary-grid.vue","../../src/components/summary-grid/components/summary-grid-item/summary-grid-item.vue","../../src/components/summary-grid/components/summary-grid-item-amount/summary-grid-item-amount.vue","../../src/components/summary-grid/components/summary-grid-item-numeric/summary-grid-item-numeric.vue","../../src/components/summary-grid/components/summary-grid-item-percentage/summary-grid-item-percentage.vue","../../src/components/summary-grid/components/summary-grid-item-text/summary-grid-item-text.vue","../../src/components/summary-grid/components/summary-grid-item-custom/summary-grid-item-custom.vue","../../src/components/summary-grid/summary-grid.types.ts"],"sourcesContent":["<template>\n    <div class=\"b-summary-grid\">\n        <grid-layout\n            v-for=\"index in numberOfRows\"\n            :key=\"`summary-grid-row-${index}`\"\n            :data-testid=\"`summary-grid-row-${index}`\"\n            :column-width=\"columnWidth?.[`row${index}`]\"\n        >\n            <template v-if=\"hasSlot(`cell-${index}-1`)\" #col-1>\n                <slot :name=\"`cell-${index}-1`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-2`)\" #col-2>\n                <slot :name=\"`cell-${index}-2`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-3`)\" #col-3>\n                <slot :name=\"`cell-${index}-3`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-4`)\" #col-4>\n                <slot :name=\"`cell-${index}-4`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-5`)\" #col-5>\n                <slot :name=\"`cell-${index}-5`\" />\n            </template>\n            <template v-if=\"hasSlot(`cell-${index}-6`)\" #col-6>\n                <slot :name=\"`cell-${index}-6`\" />\n            </template>\n        </grid-layout>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { onMounted, provide, toRef, useSlots } from 'vue';\n    import type { BentoSummaryGridLayout, BentoSummaryGridProps } from './summary-grid.types';\n    import { GridLayout } from '@/components/internal';\n    import { useHasSlot } from '@/composables';\n    import {\n        SUMMARY_GRID_LAYOUT_INJECTION_KEY,\n        SUMMARY_GRID_SLASHED_ZERO,\n    } from '@/components/summary-grid/summary-grid.keys';\n\n    const props = defineProps({\n  columnWidth: { default: null },\n  slashedZero: { type: Boolean, default: false }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    let numberOfRows = 1;\n    if (slots) {\n        const slotRows = Object.keys(slots)\n            ?.filter(slotName => slotName.includes('cell-'))\n            ?.map(slotName => parseInt(slotName.split('-')?.[1], 10));\n        numberOfRows = Math.max(...slotRows);\n    }\n\n    onMounted(() => {\n        if (numberOfRows > 3) {\n            throw new Error(\n                'BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information.'\n            );\n        }\n    });\n\n    const registerComponentsInSummaryGrid: BentoSummaryGridLayout = () => {\n        const isSummaryGridLayout = true;\n        return { isSummaryGridLayout };\n    };\n\n    provide(SUMMARY_GRID_LAYOUT_INJECTION_KEY, registerComponentsInSummaryGrid);\n    provide(SUMMARY_GRID_SLASHED_ZERO, toRef(props, 'slashedZero'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary grid component that displays a collection items.\n     *\n     * @example\n     * import { BentoSummaryGrid, BentoSummaryGridItemAmount } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGrid, BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid>\n     *             <template #cell-2-2>\n     *                <bento-summary-grid-item-amount\n     *                   title=\"Text Item\"\n     *                   label=\"14\"\n     *                   info-icon-tooltip-text=\"text for icon\"\n     *                   copy=\"copy this to clipboard\"\n     *                />\n     *             </template>\n     *          </bento-summary-grid>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid.scss\" />\n","<template>\n    <div class=\"b-summary-grid-item\" :class=\"conditionalClasses\" :style=\"computedStyles\">\n        <div class=\"b-summary-grid-item__header\">\n            <bento-typography class=\"b-summary-grid-item__title\" el=\"span\" variant=\"body\">\n                <bento-dashed-underline\n                    v-if=\"withUnderline\"\n                    :tooltip-text=\"underlineTooltipText\"\n                    :popover-size=\"underlinePopoverSize\"\n                >\n                    {{ title }}\n                    <template v-if=\"hasSlot('dashed-underline')\" #popover-content>\n                        <slot name=\"dashed-underline\"></slot>\n                    </template>\n                </bento-dashed-underline>\n                <template v-else>\n                    {{ title }}\n                </template>\n            </bento-typography>\n            <div class=\"b-summary-grid-item__title-icons\">\n                <copy v-if=\"copy\" class=\"b-structured-list__icon\" :text=\"copy\" @click=\"$emit('copy-click', $event)\" />\n\n                <bento-info-icon\n                    v-if=\"infoIconTooltipText\"\n                    :tooltip-text=\"infoIconTooltipText\"\n                    tooltip-position=\"top\"\n                    class=\"b-summary-grid-item__title-tooltip\"\n                    @mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n                />\n            </div>\n        </div>\n        <bento-typography\n            data-testid=\"summary-grid-item-content-typography\"\n            class=\"b-summary-grid-item__title\"\n            v-bind=\"typographyProps\"\n            el=\"span\"\n        >\n            <slot />\n            <bento-tag\n                v-if=\"trend && itemType !== 'text'\"\n                :variant=\"trendVariant\"\n                :label=\"trend\"\n                class=\"b-summary-grid-item__content-trend\"\n            />\n        </bento-typography>\n        <bento-typography\n            v-if=\"hasSlot('secondary')\"\n            class=\"b-summary-grid-item__title\"\n            data-testid=\"summary-grid-item-secondary-metric-typography\"\n            el=\"span\"\n            variant=\"caption\"\n            stronger\n        >\n            <slot name=\"secondary\" />\n            <bento-tag\n                v-if=\"secondaryTrend\"\n                :variant=\"secondaryTrendVariant\"\n                :label=\"secondaryTrend\"\n                class=\"b-summary-grid-item__content-trend\"\n            />\n        </bento-typography>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, toRefs, useSlots } from 'vue';\n\n    // Components\n    import { BentoDashedUnderline } from '@/components/dashed-underline';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography, type BentoTypographyVariant } from '@/components/typography';\n    import { BentoTag, type BentoTagVariant } from '@/components/tag';\n    import { Copy } from '@/internal';\n\n    // Utils\n    import { useHasSlot } from '@/composables';\n\n    // Types\n    import { SUMMARY_GRID_SLASHED_ZERO } from '@/components/summary-grid/summary-grid.keys';\n    import type { BentoSummaryGridItemTrendDirection } from '@/components/summary-grid/summary-grid.types';\n    import type { BentoSummaryGridItemEvents, BentoSummaryGridItemProps } from './summary-grid-item.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    const props = defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  itemType: { default: 'custom' }\n});\n\n    const { trendDirection, secondaryTrendDirection, itemType, size } = toRefs(props);\n    const hasSlashedZero = inject(SUMMARY_GRID_SLASHED_ZERO, ref(false));\n\n    const tagVariantColor = (direction: `${BentoSummaryGridItemTrendDirection}`): `${BentoTagVariant}` => {\n        switch (direction) {\n            case 'positive':\n                return 'green';\n            case 'negative':\n                return 'red';\n            default:\n                return 'blue';\n        }\n    };\n\n    // TODO implement plus or minus symbol logic\n    const trendVariant = computed(() => tagVariantColor(trendDirection.value));\n    const secondaryTrendVariant = computed(() => tagVariantColor(secondaryTrendDirection.value));\n\n    const typographyContentElement = computed<`${BentoTypographyVariant}`>(() => {\n        if (size.value === 'small') {\n            return 'body';\n        }\n        if (itemType.value !== 'text') {\n            return 'title';\n        }\n\n        return null;\n    });\n\n    const typographyProps = computed(() => ({\n        medium: size.value === 'large',\n        strongest: size.value === 'small',\n        wide: size.value === 'small',\n        variant: typographyContentElement.value,\n    }));\n\n    const computedStyles = computed(() => (props.fitContent ? { width: 'fit-content' } : {}));\n\n    const conditionalClasses = computed(() => ({ 'b-summary-grid-item--slashed-zero': hasSlashedZero.value }));\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n    const withUnderline = computed(() => props.underlineTooltipText || hasSlot('dashed-underline'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item.scss\" />\n","<template>\n    <summary-grid-item\n        item-type=\"amount\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-amount\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        <div class=\"b-summary-grid-item-amount__content\">\n            <div>{{ label }}</div>\n            <div v-if=\"secondaryLabel\" class=\"b-summary-grid-item-amount__secondary-label\">{{ secondaryLabel }}</div>\n        </div>\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { BentoSummaryGridItemEvents, SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemAmountProps } from './summary-grid-item-amount.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryLabel: { default: null },\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display financial data, such as currency values and monetary amounts\n     *\n     * @example\n     * import { BentoSummaryGridItemAmount } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemAmount },\n     *     template: `\n     *          <bento-summary-grid-item-amount\n     *              title=\"Your title\"\n     *              label=\"200.00 EUR\"\n     *              secondary-label=\"/ day\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./summary-grid-item-amount.scss\" />\n","<template>\n    <summary-grid-item\n        item-type=\"numeric\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-numeric\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}\n        <template v-if=\"secondaryMetric\" #secondary>\n            {{ secondaryMetric }}\n        </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { BentoSummaryGridItemEvents, SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemNumericProps } from './summary-grid-item-numeric.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display any numeric information\n     *\n     * @example\n     * import { BentoSummaryGridItemNumeric } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemNumeric },\n     *     template: `\n     *          <bento-summary-grid-item-numeric\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        item-type=\"percentage\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :size=\"size\"\n        :trend=\"trend\"\n        :trend-direction=\"trendDirection\"\n        :secondary-trend=\"secondaryTrend\"\n        :secondary-trend-direction=\"secondaryTrendDirection\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-percentage\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ computedLabelPercentage }}\n        <template v-if=\"secondaryMetric\" #secondary> {{ computedSecondaryMetricPercentage }} </template>\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    import { BentoSummaryGridItemEvents, SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import { useI18n } from '@/utils/ts/i18n';\n    import type { BentoSummaryGridItemPercentageProps } from './summary-grid-item-percentage.types';\n    import type { NumberFormatOptions } from 'vue-i18n';\n\n    const { locale } = useI18n();\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    const props = defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  size: { default: 'small' },\n  title: null,\n  trend: { default: null },\n  trendDirection: { default: 'positive' },\n  secondaryTrend: { default: null },\n  secondaryTrendDirection: { default: 'positive' },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null },\n  label: null,\n  secondaryMetric: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const percentageArgs: NumberFormatOptions = {\n        style: 'percent',\n        maximumFractionDigits: 2,\n    };\n\n    const isNumeric = (value: string | number) => value != null && value !== '' && !isNaN(Number(value));\n    const convertToPercentIfNumber = (value: string | number) => {\n        if (value && isNumeric(value)) {\n            return new Intl.NumberFormat(locale.value, percentageArgs).format(Number(value) / 100);\n        }\n        return value;\n    };\n\n    const computedLabelPercentage = computed(() => convertToPercentIfNumber(props.label));\n    const computedSecondaryMetricPercentage = computed(() => convertToPercentIfNumber(props.secondaryMetric));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display any percentage information\n     *\n     * @example\n     * import { BentoSummaryGridItemPercentage } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemPercentage },\n     *     template: `\n     *          <bento-summary-grid-item-percentage\n     *              title=\"Your title\"\n     *              label=\"123\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *              trend=\"+12%\"\n     *              trend-direction=\"neutral\"\n     *              size=\"medium\"\n     *          />\n     *     `\n     * }\n     */\n    export default {\n        i18n: {},\n    };\n</script>\n","<template>\n    <summary-grid-item\n        item-type=\"text\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :title=\"title\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        class=\"b-summary-grid-item-text\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        {{ label }}\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { BentoSummaryGridItemEvents, SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n\n    import type { BentoSummaryGridItemTextProps } from './summary-grid-item-text.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    defineProps({\n  copy: { default: undefined },\n  fitContent: { type: Boolean, default: false },\n  infoIconTooltipText: { default: null },\n  label: null,\n  title: null,\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Summary grid item component used to display text only. Can be used for references, IDs or any other text data.\n     *\n     * @example\n     * import { BentoSummaryGridItemText } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoSummaryGridItemText },\n     *     template: `\n     *          <bento-summary-grid-item-text\n     *              title=\"Your title\"\n     *              label=\"Your text here\"\n     *              info-icon-tooltip-text=\"Your tooltip text here will be toggled by the info icon\"\n     *          />\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","<template>\n    <summary-grid-item\n        :title=\"title\"\n        :info-icon-tooltip-text=\"infoIconTooltipText\"\n        :copy=\"copy\"\n        :fit-content=\"fitContent\"\n        :underline-popover-size=\"underlinePopoverSize\"\n        :underline-tooltip-text=\"underlineTooltipText\"\n        @copy-click=\"$emit('copy-click', $event)\"\n        @info-icon-mouseenter=\"$emit('info-icon-mouseenter', $event)\"\n    >\n        <template v-if=\"hasSlot('dashed-underline')\" #dashed-underline>\n            <slot name=\"dashed-underline\" />\n        </template>\n        <slot />\n    </summary-grid-item>\n</template>\n\n<script setup lang=\"ts\">\n    import { useSlots } from 'vue';\n    import { BentoSummaryGridItemEvents, SummaryGridItem } from '../summary-grid-item';\n    import { useHasSlot } from '@/composables';\n    import type { BentoSummaryGridItemCustomProps } from './summary-grid-item-custom.types';\n\n    defineEmits([\"copy-click\", \"info-icon-mouseenter\"]);\n\n    defineProps({\n  copy: { default: undefined },\n  infoIconTooltipText: { default: null },\n  title: null,\n  fitContent: { type: Boolean, default: false },\n  underlinePopoverSize: { default: 'fit-content' },\n  underlineTooltipText: { default: null }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component\n     *\n     * @example\n     * import { SummaryBarItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { SummaryBarItem },\n     *     template: `\n     *          <summary-grid-item :title=\"textVariable\">\n     *              Content of the item\n     *          </summary-grid-item>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n","import { GridLayoutColumnWidths } from '@/components/internal/grid-layout/grid-layout.types';\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoSummaryGridItemSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated for usage with properties since version 2.0. Use the string literal instead.\n */\nexport enum BentoSummaryGridItemTrendDirection {\n    POSITIVE = 'positive',\n    NEGATIVE = 'negative',\n    NEUTRAL = 'neutral',\n}\n\nexport interface BentoSummaryGridColumnWidth {\n    row1: GridLayoutColumnWidths;\n    row2?: GridLayoutColumnWidths;\n    row3?: GridLayoutColumnWidths;\n}\n\nexport type BentoSummaryGridLayout = () => {\n    isSummaryGridLayout: boolean;\n};\n\nexport interface BentoSummaryGridProps {\n    /**\n     * Sets the responsive columns widths values for 1 of the 3 rows.\n     */\n    columnWidth?: BentoSummaryGridColumnWidth;\n\n    /**\n     * Renders a font numeric style with slashed zeros instead of normal ones.\n     */\n    slashedZero?: boolean;\n}\n"],"names":["__default__$6","slots","useSlots","hasSlot","useHasSlot","numberOfRows","slotRows","_b","_a","slotName","onMounted","registerComponentsInSummaryGrid","provide","SUMMARY_GRID_LAYOUT_INJECTION_KEY","SUMMARY_GRID_SLASHED_ZERO","toRef","props","__default__$5","trendDirection","secondaryTrendDirection","itemType","size","toRefs","hasSlashedZero","inject","ref","tagVariantColor","direction","trendVariant","computed","secondaryTrendVariant","typographyContentElement","typographyProps","computedStyles","conditionalClasses","withUnderline","__default__$4","__default__$3","__default__$2","locale","useI18n","percentageArgs","isNumeric","value","convertToPercentIfNumber","computedLabelPercentage","computedSecondaryMetricPercentage","__default__$1","__default__","BentoSummaryGridItemSize","BentoSummaryGridItemSize2","BentoSummaryGridItemTrendDirection","BentoSummaryGridItemTrendDirection2"],"mappings":";;;;;;;;;;;;AAgGI,MAAAA,IAAA,CAAA;;;;;;;;;iBAnDAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;AAEA,QAAAI,IAAA;AACA,QAAAJ,GAAA;AACI,YAAAK,KAAAC,KAAAC,IAAA,OAAA,KAAAP,CAAA,MAAA,gBAAAO,EAAA,OAAA,CAAAC,MAAAA,EAAA,SAAA,OAAA,OAAA,gBAAAF,EAAA,IAAA,CAAAE,MAAA;;AAAA,yBAAAD,IAAAC,EAAA,MAAA,GAAA,MAAA,gBAAAD,EAAA,IAAA,EAAA;AAAA;AAGA,MAAAH,IAAA,KAAA,IAAA,GAAAC,CAAA;AAAA,IAAmC;AAGvC,IAAAI,EAAA,MAAA;AACI,UAAAL,IAAA;AACI,cAAA,IAAA;AAAA,UAAU;AAAA,QACN;AAAA,IAER,CAAA;AAGJ,UAAAM,IAAA,OAEI,EAAA,wBAAA;AAGJ,WAAAC,EAAAC,GAAAF,CAAA,GACAC,EAAAE,GAAAC,EAAAC,GAAA,aAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;sBCyFAC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;iBA7DA,EAAA,gBAAAC,GAAA,yBAAAC,GAAA,UAAAC,GAAA,MAAAC,EAAA,IAAAC,EAAAN,CAAA,GACAO,IAAAC,EAAAV,GAAAW,EAAA,EAAA,CAAA,GAEAC,IAAA,CAAAC,MAAA;AACI,cAAAA,GAAA;AAAA,QAAmB,KAAA;AAEX,iBAAA;AAAA,QAAO,KAAA;AAEP,iBAAA;AAAA,QAAO;AAEP,iBAAA;AAAA,MAAO;AAAA,IACf,GAIJC,IAAAC,EAAA,MAAAH,EAAAR,EAAA,KAAA,CAAA,GACAY,IAAAD,EAAA,MAAAH,EAAAP,EAAA,KAAA,CAAA,GAEAY,IAAAF,EAAA,MACIR,EAAA,UAAA,UACI,SAEJD,EAAA,UAAA,SACI,UAGJ,IAAO,GAGXY,IAAAH,EAAA,OAAA;AAAA,MAAwC,QAAAR,EAAA,UAAA;AAAA,MACb,WAAAA,EAAA,UAAA;AAAA,MACG,MAAAA,EAAA,UAAA;AAAA,MACL,SAAAU,EAAA;AAAA,IACa,EAAA,GAGtCE,IAAAJ,EAAA,MAAAb,EAAA,aAAA,EAAA,OAAA,cAAA,IAAA,CAAA,CAAA,GAEAkB,IAAAL,EAAA,OAAA,EAAA,qCAAAN,EAAA,MAAA,EAAA,GAEAtB,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GACAkC,IAAAN,EAAA,MAAAb,EAAA,wBAAAb,EAAA,kBAAA,CAAA;;;;;;;;;;;;;;;;;;;;;qBC1DAiC,IAAA,CAAA;;;;;;;;;;;;;;;;;;;;;AA1BA,UAAAnC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;;;sBCoBAoC,KAAA,CAAA;;;;;;;;;;;;;;;;;;;;AAzBA,UAAApC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;;;uBC0CAqC,KAAA;AAAA,EAAe,MAAA,CAAA;AAEf;;;;;;;;;;;;;;;;;;;;iBA/DA,EAAA,QAAAC,EAAA,IAAAC,EAAA,GAoBAvC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAwC,IAAA;AAAA,MAA4C,OAAA;AAAA,MACjC,uBAAA;AAAA,IACgB,GAG3BC,IAAA,CAAAC,MAAAA,KAAA,QAAAA,MAAA,MAAA,CAAA,MAAA,OAAAA,CAAA,CAAA,GACAC,IAAA,CAAAD,MACIA,KAAAD,EAAAC,CAAA,IACI,IAAA,KAAA,aAAAJ,EAAA,OAAAE,CAAA,EAAA,OAAA,OAAAE,CAAA,IAAA,GAAA,IAEJA,GAGJE,IAAAhB,EAAA,MAAAe,EAAA5B,EAAA,KAAA,CAAA,GACA8B,IAAAjB,EAAA,MAAAe,EAAA5B,EAAA,eAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;uBCVA+B,KAAA,CAAA;;;;;;;;;;;;;;AAtBA,UAAA9C,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;uBCeA+C,KAAA,CAAA;;;;;;;;;;;;;AApBA,UAAA/C,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA;;;;;;;;;;;;;;;;;;;;;;AC/BQ,IAAAgD,KAAA,kBAAAC,OACRA,EAAA,QAAA,SACAA,EAAA,SAAA,UACAA,EAAA,QAAA,SAHQA,IAAAD,MAAA,CAAA,CAAA,GASAE,KAAA,kBAAAC,OACRA,EAAA,WAAA,YACAA,EAAA,WAAA,YACAA,EAAA,UAAA,WAHQA,IAAAD,MAAA,CAAA,CAAA;"}

package/dist/chunks/{timeline-item.DK2d00rt.js → timeline-item.Dz66luo5.js}

@@ -2,7 +2,7 @@ import { defineComponent as P, computed as r, ref as T, toRefs as Z, provide as
 import { B as z } from "./button.hF-nD1Og.js";
 import { B as X } from "./textarea.RAU710Uw.js";
 import { u as H } from "./i18n.BQkEbtPM.js";
-import { B as ee } from "./button-actions._OIvTdKt.js";
+import { B as ee } from "./button-actions.BKdI_ooV.js";
 import { n as x } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { B as te } from "./date.BfyWX2PY.js";
 import { B as ie } from "./link.CXy_LoFI.js";
@@ -382,4 +382,4 @@ export {
   q as d,
   Ke as t
 };
-//# sourceMappingURL=timeline-item.DK2d00rt.js.map
+//# sourceMappingURL=timeline-item.Dz66luo5.js.map