@adyen/bento-vue2 1.92.2 → 1.93.0

package/dist/chunks/{sidepanel.nW0Bhk_u.js.map → sidepanel.B9ecjbyC.js.map}

@@ -1 +1 @@
-{"version":3,"file":"sidepanel.nW0Bhk_u.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 { type PropType } from 'vue';\n\n    import { type 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, onMounted, onUnmounted, 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        type BentoDialogPageConfigData,\n        type 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<Array<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    const isMounted = 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 && sidepanel.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 || !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    onMounted(() => {\n        isMounted.value = true;\n    });\n\n    onUnmounted(() => {\n        isMounted.value = false;\n    });\n\n    // Watching isOpen prop to toggle open/close the dialog element\n    watch(\n        [() => isOpen.value, sidepanel],\n        ([newIsOpen, newSidepanelValue]) => {\n            if (!isMounted.value || !newSidepanelValue) {\n                return;\n            }\n\n            if (newIsOpen) {\n                internalIsOpen.value = true;\n                if (!newSidepanelValue.open) {\n                    newSidepanelValue.showModal();\n                }\n                if (!previousPages.value.length) {\n                    previousPages.value.push(activePage.value);\n                }\n            } else if (newSidepanelValue.open) {\n                startCloseSidepanelAnimation();\n            }\n        },\n        { immediate: true, flush: 'post' }\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","isMounted","conditionalClasses","computed","closeSidepanelAfterAnimation","emit","startCloseSidepanelAnimation","closeSidepanelOnClickOutside","computedHideCloseButton","onMounted","onUnmounted","watch","newIsOpen","newSidepanelValue","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":"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"}
+{"version":3,"file":"sidepanel.B9ecjbyC.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 { type PropType } from 'vue';\n\n    import { type 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, onMounted, onUnmounted, 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        type BentoDialogPageConfigData,\n        type 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<Array<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    const isMounted = 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 && sidepanel.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 || !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    onMounted(() => {\n        isMounted.value = true;\n    });\n\n    onUnmounted(() => {\n        isMounted.value = false;\n    });\n\n    // Watching isOpen prop to toggle open/close the dialog element\n    watch(\n        [() => isOpen.value, sidepanel],\n        ([newIsOpen, newSidepanelValue]) => {\n            if (!isMounted.value || !newSidepanelValue) {\n                return;\n            }\n\n            if (newIsOpen) {\n                internalIsOpen.value = true;\n                if (!newSidepanelValue.open) {\n                    newSidepanelValue.showModal();\n                }\n                if (!previousPages.value.length) {\n                    previousPages.value.push(activePage.value);\n                }\n            } else if (newSidepanelValue.open) {\n                startCloseSidepanelAnimation();\n            }\n        },\n        { immediate: true, flush: 'post' }\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","isMounted","conditionalClasses","computed","closeSidepanelAfterAnimation","emit","startCloseSidepanelAnimation","closeSidepanelOnClickOutside","computedHideCloseButton","onMounted","onUnmounted","watch","newIsOpen","newSidepanelValue","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":"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"}

package/dist/chunks/{structured-list-item.BBBtie1s.js → structured-list-item.De_yYayn.js}

@@ -1,12 +1,12 @@
 import { defineComponent as i, inject as n, computed as o, provide as b, ref as v } from "vue";
 import { n as u } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { B as C } from "./button.C9b2AC9w.js";
-import { B } from "./info-icon.DCR42Kvm.js";
+import { B } from "./info-icon.BOX4oIVD.js";
 import { B as S } from "./typography.C8lPlsbD.js";
-import { C as T } from "./copy.qqGYFbKJ.js";
+import { C as T } from "./copy.DcpG08B_.js";
 import { S as I } from "./search.D53Ia3rC.js";
 import { u as L } from "./index.B6WW_F-J.js";
-import { b as E } from "./tooltip.BxtnF3is.js";
+import { b as E } from "./tooltip.Bl6kedql.js";
 import "../assets/structured-list-item.css";
 const _ = /* @__PURE__ */ Symbol("structured list condensed style injection key"), p = /* @__PURE__ */ Symbol("structured list labels width injection key"), x = ["25-75", "33-66", "42-58", "50-50", "75-25", "66-33", "58-42"], D = {}, R = /* @__PURE__ */ i({
   ...D,
@@ -108,4 +108,4 @@ export {
   _ as S,
   M as a
 };
-//# sourceMappingURL=structured-list-item.BBBtie1s.js.map
+//# sourceMappingURL=structured-list-item.De_yYayn.js.map

package/dist/chunks/{structured-list-item.BBBtie1s.js.map → structured-list-item.De_yYayn.js.map}

@@ -1 +1 @@
-{"version":3,"file":"structured-list-item.BBBtie1s.js","sources":["../../src/components/structured-list/structured-list.keys.ts","../../src/components/structured-list/structured-list.types.ts","../../src/components/structured-list/structured-list.vue","../../src/components/structured-list/components/structered-list-item/structured-list-item.vue"],"sourcesContent":["export const STRUCTURED_LIST_CONDENSED_INJECTION_KEY = Symbol('structured list condensed style injection key');\nexport const STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY = Symbol('structured list labels width injection key');\n","export type BentoStructuredListLayoutOptions = '25-75' | '33-66' | '42-58' | '50-50' | '75-25' | '66-33' | '58-42';\nexport const BentoStructuredListLayoutOptions = ['25-75', '33-66', '42-58', '50-50', '75-25', '66-33', '58-42'];\n","<template>\n    <dl class=\"b-structured-list\">\n        <slot />\n    </dl>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, provide } from 'vue';\n    import {\n        STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n        STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n    } from '@/components/structured-list/structured-list.keys';\n    import { BentoStructuredListLayoutOptions } from './structured-list.types';\n\n    const props = defineProps({\n  labelsWidth: { default: null },\n  layout: { default: '33-66' }\n});\n\n    const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n\n    const computedLayout = computed(() =>\n        BentoStructuredListLayoutOptions.includes(props.layout) ? props.layout : '33-66'\n    );\n\n    const computedLabelsWidth = computed(() => {\n        if (isCondensed) {\n            return '130px';\n        }\n\n        if (props.labelsWidth) {\n            return `${props.labelsWidth}px`;\n        }\n\n        return `${computedLayout.value.split('-')[0]}%`;\n    });\n\n    provide(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, computedLabelsWidth);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This is a list used to display pairs of information in a clear and organized manner.\n     * `BentoStructureListItem` should be used to pass the label/value pairs to the list.\n     *\n     * @example\n     * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredList, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Payment\">\n     *               <bento-payment-method label=\"Klarna\" type=\"Klarna\"  />\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\">\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\" :value=\"123456\" />\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list.scss\" />\n","<template>\n    <div class=\"b-structured-list-item\" :class=\"conditionalClasses\">\n        <dt class=\"b-structured-list-item__label\" :style=\"computedLabelStyle\">\n            <bento-typography :variant=\"labelTypographyVariant\">{{ label }}</bento-typography>\n            <bento-info-icon v-if=\"labelInfo\" class=\"b-structured-list-item__icon\" :tooltip-text=\"labelInfo\" />\n        </dt>\n        <dd class=\"b-structured-list-item__value\" :class=\"valueConditionalClasses\">\n            <slot />\n            <copy v-if=\"copy\" class=\"b-structured-list-item__icon\" :text=\"copy\" @click=\"emitCopy\" />\n            <bento-button\n                v-if=\"search\"\n                v-bento-tooltip-directive:top=\"searchTooltip ? searchTooltip : t('search')\"\n                class=\"b-structured-list-item__icon\"\n                variant=\"tertiary\"\n                @click=\"search\"\n            >\n                <template #iconLeft>\n                    <search-icon :svg-title=\"t('search')\" />\n                </template>\n            </bento-button>\n        </dd>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, type Ref } from 'vue';\n\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography } from '@/components/typography';\n    import Copy from '@/components/internal/copy/copy.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n\n    // Utils\n    import { useI18n } from '@/utils/ts/i18n';\n\n    // Directives\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n\n    // Keys\n    import {\n        STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n        STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n    } from '../../structured-list.keys';\n\n    import messages from '../../messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const DEFAULT_LABELS_WIDTH = '33%';\n\n    const props = defineProps({\n  label: null,\n  labelInfo: null,\n  copy: null,\n  search: { type: Function },\n  searchTooltip: null,\n  truncate: { type: Boolean }\n});\n\n    const emit = defineEmits([\"copy\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n    const labelsWidth = inject<Ref<string>>(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, ref(DEFAULT_LABELS_WIDTH));\n    const computedLabelStyle = computed(() => `flex-basis:${labelsWidth.value}`);\n    const conditionalClasses = computed(() => ({\n        'b-structured-list-item--condensed': isCondensed,\n    }));\n\n    const valueConditionalClasses = computed(() => ({\n        'b-structured-list-item__value--truncate': props.truncate,\n    }));\n\n    const emitCopy = () => {\n        emit('copy', props.copy);\n    };\n\n    const labelTypographyVariant = computed(() => (isCondensed ? 'caption' : 'body'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This is an item of the `BentoStructuredList` meant to be used only with that component.\n     * It consists of a label/value pair, and also the optional copy and search modifiers.\n     *\n     * @example\n     * import { BentoCurrencyISOCode, BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredListItem, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Shopper\" search='searchShopper' search-tooltip='Find shopper'>\n     *               <bento-typography>\n     *                  143442642\n     *               </bento-status>\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\" copy='123456'>\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\" :value=\"123456\" />\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list-item.scss\" />\n"],"names":["STRUCTURED_LIST_CONDENSED_INJECTION_KEY","STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY","BentoStructuredListLayoutOptions","__default__$1","isCondensed","inject","computedLayout","computed","props","computedLabelsWidth","provide","__default__","messages","DEFAULT_LABELS_WIDTH","t","useI18n","labelsWidth","ref","computedLabelStyle","conditionalClasses","valueConditionalClasses","emitCopy","emit","labelTypographyVariant"],"mappings":";;;;;;;;;;AAAO,MAAAA,IAAA,uBAAA,+CAAA,GACAC,IAAA,uBAAA,4CAAA,GCAAC,IAAA,CAAA,SAAA,SAAA,SAAA,SAAA,SAAA,SAAA,OAAA,GC6DHC,IAAA,CAAA;;;;;;;;iBA3CAC,IAAAC,EAAAL,GAAA,EAAA,GAEAM,IAAAC;AAAA,MAAuB,MAAAL,EAAA,SAAAM,EAAA,MAAA,IAAAA,EAAA,SAAA;AAAA,IACsD,GAG7EC,IAAAF,EAAA,MACIH,IACI,UAGJI,EAAA,cACI,GAAAA,EAAA,WAAA,OAGJ,GAAAF,EAAA,MAAA,MAAA,GAAA,EAAA,CAAA,CAAA,GAA4C;AAGhD,WAAAI,EAAAT,GAAAQ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCqEAE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;iBA1DAC,IAAA,OAaA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAX,IAAAC,EAAAL,GAAA,EAAA,GACAgB,IAAAX,EAAAJ,GAAAgB,EAAAJ,CAAA,CAAA,GACAK,IAAAX,EAAA,MAAA,cAAAS,EAAA,KAAA,EAAA,GACAG,IAAAZ,EAAA,OAAA;AAAA,MAA2C,qCAAAH;AAAA,IACF,EAAA,GAGzCgB,IAAAb,EAAA,OAAA;AAAA,MAAgD,2CAAAC,EAAA;AAAA,IACK,EAAA,GAGrDa,IAAA,MAAA;AACI,MAAAC,EAAA,QAAAd,EAAA,IAAA;AAAA,IAAuB,GAG3Be,IAAAhB,EAAA,MAAAH,IAAA,YAAA,MAAA;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"structured-list-item.De_yYayn.js","sources":["../../src/components/structured-list/structured-list.keys.ts","../../src/components/structured-list/structured-list.types.ts","../../src/components/structured-list/structured-list.vue","../../src/components/structured-list/components/structered-list-item/structured-list-item.vue"],"sourcesContent":["export const STRUCTURED_LIST_CONDENSED_INJECTION_KEY = Symbol('structured list condensed style injection key');\nexport const STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY = Symbol('structured list labels width injection key');\n","export type BentoStructuredListLayoutOptions = '25-75' | '33-66' | '42-58' | '50-50' | '75-25' | '66-33' | '58-42';\nexport const BentoStructuredListLayoutOptions = ['25-75', '33-66', '42-58', '50-50', '75-25', '66-33', '58-42'];\n","<template>\n    <dl class=\"b-structured-list\">\n        <slot />\n    </dl>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, provide } from 'vue';\n    import {\n        STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n        STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n    } from '@/components/structured-list/structured-list.keys';\n    import { BentoStructuredListLayoutOptions } from './structured-list.types';\n\n    const props = defineProps({\n  labelsWidth: { default: null },\n  layout: { default: '33-66' }\n});\n\n    const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n\n    const computedLayout = computed(() =>\n        BentoStructuredListLayoutOptions.includes(props.layout) ? props.layout : '33-66'\n    );\n\n    const computedLabelsWidth = computed(() => {\n        if (isCondensed) {\n            return '130px';\n        }\n\n        if (props.labelsWidth) {\n            return `${props.labelsWidth}px`;\n        }\n\n        return `${computedLayout.value.split('-')[0]}%`;\n    });\n\n    provide(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, computedLabelsWidth);\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This is a list used to display pairs of information in a clear and organized manner.\n     * `BentoStructureListItem` should be used to pass the label/value pairs to the list.\n     *\n     * @example\n     * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredList, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Payment\">\n     *               <bento-payment-method label=\"Klarna\" type=\"Klarna\"  />\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\">\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\" :value=\"123456\" />\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list.scss\" />\n","<template>\n    <div class=\"b-structured-list-item\" :class=\"conditionalClasses\">\n        <dt class=\"b-structured-list-item__label\" :style=\"computedLabelStyle\">\n            <bento-typography :variant=\"labelTypographyVariant\">{{ label }}</bento-typography>\n            <bento-info-icon v-if=\"labelInfo\" class=\"b-structured-list-item__icon\" :tooltip-text=\"labelInfo\" />\n        </dt>\n        <dd class=\"b-structured-list-item__value\" :class=\"valueConditionalClasses\">\n            <slot />\n            <copy v-if=\"copy\" class=\"b-structured-list-item__icon\" :text=\"copy\" @click=\"emitCopy\" />\n            <bento-button\n                v-if=\"search\"\n                v-bento-tooltip-directive:top=\"searchTooltip ? searchTooltip : t('search')\"\n                class=\"b-structured-list-item__icon\"\n                variant=\"tertiary\"\n                @click=\"search\"\n            >\n                <template #iconLeft>\n                    <search-icon :svg-title=\"t('search')\" />\n                </template>\n            </bento-button>\n        </dd>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, inject, ref, type Ref } from 'vue';\n\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoInfoIcon } from '@/components/info-icon';\n    import { BentoTypography } from '@/components/typography';\n    import Copy from '@/components/internal/copy/copy.vue';\n    import SearchIcon from '@adyen/ui-assets-icons-16/vue/search';\n\n    // Utils\n    import { useI18n } from '@/utils/ts/i18n';\n\n    // Directives\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n\n    // Keys\n    import {\n        STRUCTURED_LIST_CONDENSED_INJECTION_KEY,\n        STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY,\n    } from '../../structured-list.keys';\n\n    import messages from '../../messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const DEFAULT_LABELS_WIDTH = '33%';\n\n    const props = defineProps({\n  label: null,\n  labelInfo: null,\n  copy: null,\n  search: { type: Function },\n  searchTooltip: null,\n  truncate: { type: Boolean }\n});\n\n    const emit = defineEmits([\"copy\"]);\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false);\n    const labelsWidth = inject<Ref<string>>(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, ref(DEFAULT_LABELS_WIDTH));\n    const computedLabelStyle = computed(() => `flex-basis:${labelsWidth.value}`);\n    const conditionalClasses = computed(() => ({\n        'b-structured-list-item--condensed': isCondensed,\n    }));\n\n    const valueConditionalClasses = computed(() => ({\n        'b-structured-list-item__value--truncate': props.truncate,\n    }));\n\n    const emitCopy = () => {\n        emit('copy', props.copy);\n    };\n\n    const labelTypographyVariant = computed(() => (isCondensed ? 'caption' : 'body'));\n</script>\n\n<script lang=\"ts\">\n    /**\n     * This is an item of the `BentoStructuredList` meant to be used only with that component.\n     * It consists of a label/value pair, and also the optional copy and search modifiers.\n     *\n     * @example\n     * import { BentoCurrencyISOCode, BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoStructuredListItem, BentoStructuredListItem },\n     *     template: `\n     *       <bento-structured-list>\n     *         <bento-structured-list-item label=\"Shopper\" search='searchShopper' search-tooltip='Find shopper'>\n     *               <bento-typography>\n     *                  143442642\n     *               </bento-status>\n     *         </bento-structured-list-item>\n     *         <bento-structured-list-item label=\"Amount\" copy='123456'>\n     *               <bento-currency :currency=\"BentoCurrencyISOCode.USD\" :value=\"123456\" />\n     *         </bento-structured-list-item>\n     *       </bento-structured-list>\n     *     `\n     * }\n     */\n    export default {\n        i18n: { messages },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./structured-list-item.scss\" />\n"],"names":["STRUCTURED_LIST_CONDENSED_INJECTION_KEY","STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY","BentoStructuredListLayoutOptions","__default__$1","isCondensed","inject","computedLayout","computed","props","computedLabelsWidth","provide","__default__","messages","DEFAULT_LABELS_WIDTH","t","useI18n","labelsWidth","ref","computedLabelStyle","conditionalClasses","valueConditionalClasses","emitCopy","emit","labelTypographyVariant"],"mappings":";;;;;;;;;;AAAO,MAAAA,IAAA,uBAAA,+CAAA,GACAC,IAAA,uBAAA,4CAAA,GCAAC,IAAA,CAAA,SAAA,SAAA,SAAA,SAAA,SAAA,SAAA,OAAA,GC6DHC,IAAA,CAAA;;;;;;;;iBA3CAC,IAAAC,EAAAL,GAAA,EAAA,GAEAM,IAAAC;AAAA,MAAuB,MAAAL,EAAA,SAAAM,EAAA,MAAA,IAAAA,EAAA,SAAA;AAAA,IACsD,GAG7EC,IAAAF,EAAA,MACIH,IACI,UAGJI,EAAA,cACI,GAAAA,EAAA,WAAA,OAGJ,GAAAF,EAAA,MAAA,MAAA,GAAA,EAAA,CAAA,CAAA,GAA4C;AAGhD,WAAAI,EAAAT,GAAAQ,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GCqEAE,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAEf;;;;;;;;;;;;;iBA1DAC,IAAA,OAaA,EAAA,GAAAC,EAAA,IAAAC,EAAA,GACAX,IAAAC,EAAAL,GAAA,EAAA,GACAgB,IAAAX,EAAAJ,GAAAgB,EAAAJ,CAAA,CAAA,GACAK,IAAAX,EAAA,MAAA,cAAAS,EAAA,KAAA,EAAA,GACAG,IAAAZ,EAAA,OAAA;AAAA,MAA2C,qCAAAH;AAAA,IACF,EAAA,GAGzCgB,IAAAb,EAAA,OAAA;AAAA,MAAgD,2CAAAC,EAAA;AAAA,IACK,EAAA,GAGrDa,IAAA,MAAA;AACI,MAAAC,EAAA,QAAAd,EAAA,IAAA;AAAA,IAAuB,GAG3Be,IAAAhB,EAAA,MAAAH,IAAA,YAAA,MAAA;;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{summary-grid.types.Dp_efYVN.js → summary-grid.types.Dc-PJlfH.js}

@@ -5,10 +5,10 @@ import { G as R } from "./grid-layout.1aIiz2N_.js";
 import { n as f } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import { B as g } from "./typography.C8lPlsbD.js";
 import { u as G } from "./index.B6WW_F-J.js";
-import { B as w } from "./dashed-underline.D_FhFRXM.js";
-import { B as L } from "./info-icon.DCR42Kvm.js";
-import { B as E } from "./tag.D2xagTJv.js";
-import { C as N } from "./copy.qqGYFbKJ.js";
+import { B as w } from "./dashed-underline.CPTkubjQ.js";
+import { B as L } from "./info-icon.BOX4oIVD.js";
+import { B as E } from "./tag.DPNSUeue.js";
+import { C as N } from "./copy.DcpG08B_.js";
 import "../assets/summary-grid.css";
 const A = {}, F = /* @__PURE__ */ d({
   ...A,
@@ -334,4 +334,4 @@ export {
   ge as f,
   Re as s
 };
-//# sourceMappingURL=summary-grid.types.Dp_efYVN.js.map
+//# sourceMappingURL=summary-grid.types.Dc-PJlfH.js.map

package/dist/chunks/{summary-grid.types.Dp_efYVN.js.map → summary-grid.types.Dc-PJlfH.js.map}

@@ -1 +1 @@
-{"version":3,"file":"summary-grid.types.Dp_efYVN.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 { 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            <bento-typography\n                v-if=\"secondaryLabel\"\n                variant=\"caption\"\n                class=\"b-summary-grid-item-amount__secondary-label\"\n                >{{ secondaryLabel }}</bento-typography\n            >\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 { BentoTypography } from '@/components/typography';\n    import { 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 { 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 { 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 { 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 { 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 { type GridLayoutColumnWidths } from '@/components/internal/grid-layout/grid-layout.types';\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoSummaryGridItemSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated Since v2.0.0. Use 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":"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"}
+{"version":3,"file":"summary-grid.types.Dc-PJlfH.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 { 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            <bento-typography\n                v-if=\"secondaryLabel\"\n                variant=\"caption\"\n                class=\"b-summary-grid-item-amount__secondary-label\"\n                >{{ secondaryLabel }}</bento-typography\n            >\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 { BentoTypography } from '@/components/typography';\n    import { 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 { 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 { 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 { 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 { 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 { type GridLayoutColumnWidths } from '@/components/internal/grid-layout/grid-layout.types';\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoSummaryGridItemSize {\n    SMALL = 'small',\n    MEDIUM = 'medium',\n    LARGE = 'large',\n}\n\n/**\n * @deprecated Since v2.0.0. Use 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":"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"}

package/dist/chunks/{tag.D2xagTJv.js → tag.DPNSUeue.js}

@@ -2,7 +2,7 @@ import { defineComponent as m, useSlots as f, computed as s } from "vue";
 import { B as v } from "./typography.C8lPlsbD.js";
 import { u as b } from "./aria-label.CaUURpnB.js";
 import { g as r } from "./get-slot-text.Bjb9dTSV.js";
-import { b as g } from "./tooltip.BxtnF3is.js";
+import { b as g } from "./tooltip.Bl6kedql.js";
 import { n as h } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/tag.css";
 var i = /* @__PURE__ */ ((e) => (e.GREY = "grey", e.BLUE = "blue", e.GREEN = "green", e.ORANGE = "orange", e.RED = "red", e.WHITE = "white", e))(i || {});
@@ -41,4 +41,4 @@ export {
   L as B,
   i as a
 };
-//# sourceMappingURL=tag.D2xagTJv.js.map
+//# sourceMappingURL=tag.DPNSUeue.js.map

package/dist/chunks/{tag.D2xagTJv.js.map → tag.DPNSUeue.js.map}

@@ -1 +1 @@
-{"version":3,"file":"tag.D2xagTJv.js","sources":["../../src/components/tag/tag.types.ts","../../src/components/tag/tag.vue"],"sourcesContent":["export interface BentoTagProps {\n    /**\n     * The label text content of the Tag.\n     */\n    label?: string;\n\n    /**\n     * The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots \"...\".\n     */\n    truncate?: number;\n\n    /**\n     * The variant variant of tag\n     */\n    variant?: BentoTagVariant | `${BentoTagVariant}`;\n}\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoTagVariant {\n    GREY = 'grey',\n    BLUE = 'blue',\n    GREEN = 'green',\n    ORANGE = 'orange',\n    RED = 'red',\n    WHITE = 'white',\n}\n","<template>\n    <span\n        v-bento-tooltip-directive=\"shouldShowTooltip ? textFromSlot : null\"\n        data-testid=\"tag\"\n        class=\"b-tag\"\n        :class=\"tagConditionalClasses\"\n        :aria-label=\"computedAriaLabel\"\n    >\n        <div v-if=\"hasTextContent && hasSlot('icon')\" class=\"b-tag__icon\" role=\"presentation\">\n            <slot name=\"icon\"></slot>\n        </div>\n        <bento-typography class=\"b-tag__label\" el=\"span\" variant=\"caption\" stronger>\n            {{ formattedText }}\n        </bento-typography>\n    </span>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    // Use relative paths otherwise the interface won't be correctly detected\n    // TODO: Use alias once the support is added to work with the betterDefine macro\n    import { type BentoTagProps, BentoTagVariant } from './tag.types';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n\n    const props = defineProps({\n  label: { default: null },\n  truncate: { default: null },\n  variant: { default: BentoTagVariant.GREY }\n});\n\n    const slots = useSlots();\n    // Slots logic\n    // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots\n    // We do the same in bento-checkbox-group\n    const hasSlot = name => !!slots[name];\n\n    const hasTextContent = computed(() => !!(props.label || getSlotText(slots)('default')));\n\n    const computedAriaLabel = useAriaLabel({\n        label: props.label || getSlotText(slots)('default'),\n        defaultFallback: 'tag',\n    });\n\n    const tagConditionalClasses = computed(() => ({\n        [`b-tag--${props.variant}`]: props.variant,\n    }));\n\n    const textFromSlot = computed(() => props.label ?? getSlotText(slots)('default') ?? 'tag');\n    const shouldShowTooltip = computed(() => props.truncate && textFromSlot.value.length > props.truncate);\n\n    const formattedText = computed(() => {\n        if (!props.truncate) {\n            return textFromSlot.value;\n        }\n\n        return shouldShowTooltip.value ? `${textFromSlot.value.slice(0, props.truncate)}...` : textFromSlot.value;\n    });\n</script>\n\n<script lang=\"ts\">\n    export default {\n        name: 'bento-tag',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./tag.scss\" />\n"],"names":["BentoTagVariant","BentoTagVariant2","__default__","slots","useSlots","hasSlot","name","hasTextContent","computed","props","getSlotText","computedAriaLabel","useAriaLabel","tagConditionalClasses","textFromSlot","shouldShowTooltip","formattedText"],"mappings":";;;;;;;AAoBO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,SAAA,UACAA,EAAA,MAAA,OACAA,EAAA,QAAA,SANQA,IAAAD,KAAA,CAAA,CAAA;AC2CR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;iBAhCAC,IAAAC,EAAA,GAIAC,IAAA,CAAAC,MAAA,CAAA,CAAAH,EAAAG,CAAA,GAEAC,IAAAC,EAAA,MAAA,CAAA,EAAAC,EAAA,SAAAC,EAAAP,CAAA,EAAA,SAAA,EAAA,GAEAQ,IAAAC,EAAA;AAAA,MAAuC,OAAAH,EAAA,SAAAC,EAAAP,CAAA,EAAA,SAAA;AAAA,MACe,iBAAA;AAAA,IACjC,CAAA,GAGrBU,IAAAL,EAAA,OAAA;AAAA,MAA8C,CAAA,UAAAC,EAAA,OAAA,EAAA,GAAAA,EAAA;AAAA,IACP,EAAA,GAGvCK,IAAAN,EAAA,MAAAC,EAAA,SAAAC,EAAAP,CAAA,EAAA,SAAA,KAAA,KAAA,GACAY,IAAAP,EAAA,MAAAC,EAAA,YAAAK,EAAA,MAAA,SAAAL,EAAA,QAAA,GAEAO,IAAAR,EAAA,MACIC,EAAA,YAIAM,EAAA,QAAA,GAAAD,EAAA,MAAA,MAAA,GAAAL,EAAA,QAAA,CAAA,QAHIK,EAAA,KAGgG;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"tag.DPNSUeue.js","sources":["../../src/components/tag/tag.types.ts","../../src/components/tag/tag.vue"],"sourcesContent":["export interface BentoTagProps {\n    /**\n     * The label text content of the Tag.\n     */\n    label?: string;\n\n    /**\n     * The number of characters to limit the number of displayed characters for the tag text, truncating it with an ellipsis of three dots \"...\".\n     */\n    truncate?: number;\n\n    /**\n     * The variant variant of tag\n     */\n    variant?: BentoTagVariant | `${BentoTagVariant}`;\n}\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoTagVariant {\n    GREY = 'grey',\n    BLUE = 'blue',\n    GREEN = 'green',\n    ORANGE = 'orange',\n    RED = 'red',\n    WHITE = 'white',\n}\n","<template>\n    <span\n        v-bento-tooltip-directive=\"shouldShowTooltip ? textFromSlot : null\"\n        data-testid=\"tag\"\n        class=\"b-tag\"\n        :class=\"tagConditionalClasses\"\n        :aria-label=\"computedAriaLabel\"\n    >\n        <div v-if=\"hasTextContent && hasSlot('icon')\" class=\"b-tag__icon\" role=\"presentation\">\n            <slot name=\"icon\"></slot>\n        </div>\n        <bento-typography class=\"b-tag__label\" el=\"span\" variant=\"caption\" stronger>\n            {{ formattedText }}\n        </bento-typography>\n    </span>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, useSlots } from 'vue';\n    // Use relative paths otherwise the interface won't be correctly detected\n    // TODO: Use alias once the support is added to work with the betterDefine macro\n    import { type BentoTagProps, BentoTagVariant } from './tag.types';\n    import { BentoTypography } from '@/components/typography';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { getSlotText } from '@/utils/ts/get-slot-text';\n\n    const props = defineProps({\n  label: { default: null },\n  truncate: { default: null },\n  variant: { default: BentoTagVariant.GREY }\n});\n\n    const slots = useSlots();\n    // Slots logic\n    // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots\n    // We do the same in bento-checkbox-group\n    const hasSlot = name => !!slots[name];\n\n    const hasTextContent = computed(() => !!(props.label || getSlotText(slots)('default')));\n\n    const computedAriaLabel = useAriaLabel({\n        label: props.label || getSlotText(slots)('default'),\n        defaultFallback: 'tag',\n    });\n\n    const tagConditionalClasses = computed(() => ({\n        [`b-tag--${props.variant}`]: props.variant,\n    }));\n\n    const textFromSlot = computed(() => props.label ?? getSlotText(slots)('default') ?? 'tag');\n    const shouldShowTooltip = computed(() => props.truncate && textFromSlot.value.length > props.truncate);\n\n    const formattedText = computed(() => {\n        if (!props.truncate) {\n            return textFromSlot.value;\n        }\n\n        return shouldShowTooltip.value ? `${textFromSlot.value.slice(0, props.truncate)}...` : textFromSlot.value;\n    });\n</script>\n\n<script lang=\"ts\">\n    export default {\n        name: 'bento-tag',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./tag.scss\" />\n"],"names":["BentoTagVariant","BentoTagVariant2","__default__","slots","useSlots","hasSlot","name","hasTextContent","computed","props","getSlotText","computedAriaLabel","useAriaLabel","tagConditionalClasses","textFromSlot","shouldShowTooltip","formattedText"],"mappings":";;;;;;;AAoBO,IAAAA,IAAA,kBAAAC,OACHA,EAAA,OAAA,QACAA,EAAA,OAAA,QACAA,EAAA,QAAA,SACAA,EAAA,SAAA,UACAA,EAAA,MAAA,OACAA,EAAA,QAAA,SANQA,IAAAD,KAAA,CAAA,CAAA;AC2CR,MAAAE,IAAA;AAAA,EAAe,MAAA;AAEf;;;;;;;;iBAhCAC,IAAAC,EAAA,GAIAC,IAAA,CAAAC,MAAA,CAAA,CAAAH,EAAAG,CAAA,GAEAC,IAAAC,EAAA,MAAA,CAAA,EAAAC,EAAA,SAAAC,EAAAP,CAAA,EAAA,SAAA,EAAA,GAEAQ,IAAAC,EAAA;AAAA,MAAuC,OAAAH,EAAA,SAAAC,EAAAP,CAAA,EAAA,SAAA;AAAA,MACe,iBAAA;AAAA,IACjC,CAAA,GAGrBU,IAAAL,EAAA,OAAA;AAAA,MAA8C,CAAA,UAAAC,EAAA,OAAA,EAAA,GAAAA,EAAA;AAAA,IACP,EAAA,GAGvCK,IAAAN,EAAA,MAAAC,EAAA,SAAAC,EAAAP,CAAA,EAAA,SAAA,KAAA,KAAA,GACAY,IAAAP,EAAA,MAAAC,EAAA,YAAAK,EAAA,MAAA,SAAAL,EAAA,QAAA,GAEAO,IAAAR,EAAA,MACIC,EAAA,YAIAM,EAAA,QAAA,GAAAD,EAAA,MAAA,MAAA,GAAAL,EAAA,QAAA,CAAA,QAHIK,EAAA,KAGgG;;;;;;;;;;;;;;;;"}

package/dist/chunks/{textarea.CJS-1I41.js → textarea.C2gJX1kj.js}

@@ -8,8 +8,8 @@ import { u as be } from "./aria-label.CaUURpnB.js";
 import { u as ye } from "./index.B6WW_F-J.js";
 import { u as _e } from "./form-field.D_2g7vaP.js";
 import { u as ve } from "./use-form-layout-loading.CWbjZiwP.js";
-import { B as Ce } from "./es6.C1DXQV6f.js";
-import { F as ge } from "./field-label.DjjjkcO6.js";
+import { b as Ce } from "./es6.Cu3DYUPA.js";
+import { F as ge } from "./field-label.D7w7mHvW.js";
 import { E as Le } from "./error-message.CyERcfdt.js";
 import { n as Ee } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/textarea.css";
@@ -216,4 +216,4 @@ const Ve = Ie.exports;
 export {
   Ve as B
 };
-//# sourceMappingURL=textarea.CJS-1I41.js.map
+//# sourceMappingURL=textarea.C2gJX1kj.js.map

package/dist/chunks/{textarea.CJS-1I41.js.map → textarea.C2gJX1kj.js.map}

@@ -1 +1 @@
-{"version":3,"file":"textarea.CJS-1I41.js","sources":["../../src/components/textarea/textarea.types.ts","../../src/components/textarea/textarea.vue"],"sourcesContent":["import type { FormField } from '../../types/form-field';\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoTextareaResizeOption {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n    BOTH = 'both',\n    NONE = 'none',\n}\n\nexport enum BentoTextareaStateClass {\n    CLEARABLE = 'clearable',\n    DISABLED = 'disabled',\n    ERROR = 'error',\n    READONLY = 'readonly',\n}\n\nexport enum BentoTextareaEvent {\n    BLUR = 'blur',\n    CHANGE = 'change',\n    CLEAR = 'clear',\n    ESCAPE_PRESSED = 'escape-pressed',\n    FOCUS = 'focus',\n    INPUT = 'input',\n    UPDATE_MODEL_VALUE = 'update:model-value',\n    KEYDOWN = 'keydown',\n    KEYUP = 'keyup',\n}\n\nexport interface BentoTextareaProps extends FormField {\n    /**\n     * Text that labels the input element\n     * @default undefined\n     */\n    ariaLabel?: string;\n\n    /**\n     * Text that shows number of characters in textarea\n     * @default undefined\n     */\n    characterLimit?: number;\n\n    /**\n     * If set to true, shows a button to clear all the text\n     * @default false\n     */\n    clearable?: boolean;\n\n    /**\n     * Sets the height of the textarea, e.g 200px OR 20vh\n     * @default null\n     */\n    height?: string | null;\n\n    /**\n     * Indicates the possibility of resize the textarea.\n     * Accepts the Enum or the string literal version.\n     * @default BentoTextareaResizeOption.BOTH\n     */\n    resizable?: BentoTextareaResizeOption | `${BentoTextareaResizeOption}`;\n\n    /**\n     * Text displayed as the value of the textarea\n     * @deprecated Since v2.0.0. Use `v-model` or `model-value` instead.\n     */\n    value?: string;\n\n    /**\n     * Text displayed as the value of the textarea\n     */\n    modelValue?: string;\n}\n","<template>\n    <div ref=\"textareaComponent\" class=\"b-textarea\" :class=\"conditionalClasses\">\n        <div :style=\"{ width: textareaWrapperWidth }\">\n            <div class=\"b-textarea__label-box\" :class=\"conditionalClassesLabelBox\">\n                <field-label\n                    v-if=\"label\"\n                    :for=\"textareaId\"\n                    :label=\"label\"\n                    :tooltip-text=\"tooltipText\"\n                    :optional=\"optional\"\n                    :required=\"required\"\n                />\n                <bento-typography\n                    v-if=\"characterLimit\"\n                    el=\"span\"\n                    class=\"b-textarea__label-item\"\n                    :class=\"conditionalClassesLabelItem\"\n                >\n                    {{ counter }}\n                </bento-typography>\n            </div>\n            <bento-typography el=\"div\" class=\"b-textarea__input-box\" :aria-disabled=\"disabled\">\n                <textarea\n                    :id=\"textareaId\"\n                    ref=\"textareaElement\"\n                    :value=\"textareaValue\"\n                    class=\"b-textarea__input\"\n                    :class=\"conditionalClassesInput\"\n                    :aria-label=\"computedAriaLabel\"\n                    :aria-invalid=\"invalidInput\"\n                    :readonly=\"isReadOnly\"\n                    :required=\"required\"\n                    :aria-required=\"required\"\n                    :disabled=\"disabled\"\n                    :placeholder=\"placeholder\"\n                    :style=\"{ resize: resizable, height: textareaHeight }\"\n                    @blur=\"onBlur\"\n                    @change=\"onChange\"\n                    @focus=\"onFocus\"\n                    @input=\"onInput\"\n                    @keydown.esc=\"onPressEscape\"\n                    @keydown=\"onKeyDown\"\n                    @keyup=\"onKeyUp\"\n                    @mousedown=\"onMouseDown\"\n                    @mouseup=\"onMouseUp\"\n                >\n                </textarea>\n\n                <div v-if=\"showClearButton\" class=\"b-textarea__clear-button\">\n                    <bento-button\n                        variant=\"tertiary\"\n                        :disabled=\"disabled\"\n                        @click=\"onClear\"\n                        @keypress.enter=\"onClear\"\n                        @keyup.space=\"onClear\"\n                    >\n                        <template #iconLeft>\n                            <cross-circle-fill-small-icon :svg-title=\"t('clearText')\" />\n                        </template>\n                    </bento-button>\n                </div>\n            </bento-typography>\n\n            <error-message v-if=\"isOverCharacterLimit\" :error-message=\"counterErrorText\" />\n\n            <error-message v-if=\"errorMessage\" :error-message=\"errorMessage\" />\n\n            <bento-typography v-if=\"description\" class=\"b-textarea__description\" el=\"span\">\n                {{ description }}\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, onMounted, onUnmounted, ref, toRef, toRefs, useAttrs, watch } from 'vue';\n\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { ErrorMessage, FieldLabel } from '@/internal';\n    import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small';\n\n    // Utils\n    import { generateUid } from '@/core/utils/ts';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    // Composables\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n    // Constants\n    import { BBorderWidthAttention } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n\n    // Types\n    import { BentoTextareaEvent, type BentoTextareaProps, BentoTextareaStateClass } from './textarea.types';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const attrs = useAttrs();\n\n    const props = defineProps({\n  description: { default: '' },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: '' },\n  label: { default: '' },\n  optional: { type: Boolean, default: false },\n  placeholder: { default: '' },\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  ariaLabel: { default: undefined },\n  characterLimit: { default: undefined },\n  clearable: { type: Boolean, default: false },\n  height: { default: null },\n  resizable: { default: 'both' },\n  value: { default: '' },\n  modelValue: { default: '' }\n});\n\n    const emit = defineEmits([]);\n\n    const { height } = toRefs(props);\n\n    const textareaId = generateUid('textarea');\n    const textareaElement = ref<HTMLTextAreaElement>(null);\n    const textareaComponent = ref<HTMLDivElement>(null);\n    const textareaValue = ref(props.modelValue || props.value);\n    const defaultTextareaHeight = 44;\n    const textareaHeight = ref(props.height || `${defaultTextareaHeight}px`);\n    const userSetHeight = ref<number>(0);\n    const textareaWrapperWidth = ref('100%'); // The width set to the wrapper of the label, textarea and description\n    const isUserResizing = ref(false);\n    let textareaElementObserver: ResizeObserver | null = null;\n    let textareaComponentObserver: ResizeObserver | null = null;\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n    const { emitValue } = useFormFieldEmits<string>(emit);\n\n    const counter = computed(() => `${n(textareaValue?.value?.length ?? 0)} / ${n(props.characterLimit)}`);\n    const isDynamicHeight = computed(() => !height.value);\n    const isOverCharacterLimit = computed(\n        () => props.characterLimit && textareaValue.value.length > props.characterLimit\n    );\n\n    /**\n     * Calculates and sets the height of the textarea.\n     * The height is determined by the maximum of the following values:\n     *\n     * 1. The content's scroll height (with a minimum of `defaultTextareaHeight`) + the border width.\n     * 2. The height set by the user manually resizing the textarea (`userSetHeight`).\n     * 3. The default minimum height (`defaultTextareaHeight`).\n     *\n     * This ensures the textarea grows with content, shrinks when content is removed,\n     * but never goes below the manually set height or the default height.\n     */\n    const calculateHeight = () => {\n        if (textareaElement.value) {\n            const newHeight = Math.max(\n                textareaElement.value.scrollHeight <= defaultTextareaHeight\n                    ? defaultTextareaHeight\n                    : textareaElement.value.scrollHeight + TEXTAREA_BORDER_WIDTH * 2,\n                userSetHeight.value,\n                defaultTextareaHeight\n            );\n            textareaHeight.value = `${newHeight}px`;\n        }\n    };\n\n    watch(height, () => {\n        if (isDynamicHeight.value) {\n            calculateHeight();\n        } else {\n            textareaHeight.value = height.value;\n        }\n    });\n\n    watch(\n        () => [props.value, props.modelValue],\n        () => {\n            textareaValue.value = props.modelValue || props.value;\n        },\n        { immediate: true }\n    );\n\n    watch(\n        () => textareaValue.value,\n        async () => {\n            if (isDynamicHeight.value) {\n                // Hack to make the textarea calculate its height properly\n                // Set the textarea back to the original value before calculating the height\n                textareaHeight.value = `${defaultTextareaHeight}px`;\n                if (!textareaValue.value) {\n                    return;\n                }\n\n                await nextTick();\n                calculateHeight();\n            }\n        },\n        { immediate: true }\n    );\n\n    const invalidInput = computed(() => !!props.errorMessage || isOverCharacterLimit.value);\n\n    const conditionalClasses = computed(() => ({\n        [`b-textarea--${BentoTextareaStateClass.DISABLED}`]: props.disabled,\n    }));\n\n    const conditionalClassesInput = computed(() => ({\n        [`b-textarea__input--${BentoTextareaStateClass.CLEARABLE}`]: props.clearable,\n        [`b-textarea__input--${BentoTextareaStateClass.READONLY}`]: isReadOnly.value,\n        [`b-textarea__input--${BentoTextareaStateClass.ERROR}`]: invalidInput.value,\n        [`b-textarea__input--dynamic-height`]: isDynamicHeight.value,\n    }));\n\n    const conditionalClassesLabelBox = computed(() => ({\n        [`b-textarea__label-box--no-label`]: !props.label,\n    }));\n\n    const conditionalClassesLabelItem = computed(() => ({\n        [`b-textarea__label-item--${BentoTextareaStateClass.ERROR}`]: isOverCharacterLimit.value,\n    }));\n\n    const counterErrorText = computed(() => t('yourTextCanBenAtMost', { characterLimit: props.characterLimit }));\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel, label } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n        defaultFallback: label,\n    });\n\n    const showClearButton = computed(\n        () => props.clearable && textareaValue.value && !props.disabled && !isReadOnly.value\n    );\n\n    const onClear = () => {\n        textareaValue.value = '';\n        emit(BentoTextareaEvent.CLEAR);\n        emitValue('');\n    };\n\n    const onInput = (event: InputEvent) => {\n        event.stopImmediatePropagation();\n\n        if (!props.disabled && !isReadOnly.value) {\n            textareaValue.value = (event.target as HTMLInputElement).value;\n            /**\n             * Triggered when input value is changed\n             *\n             * @event input\n             * @property {String} inputValue - the updated textarea value\n             */\n            emitValue(textareaValue.value);\n        }\n    };\n\n    const onBlur = () => {\n        textareaElement.value.scrollTop = 0;\n        emit(BentoTextareaEvent.BLUR);\n    };\n\n    const onFocus = () => {\n        textareaElement.value.focus();\n        emit(BentoTextareaEvent.FOCUS);\n    };\n\n    const onChange = () => {\n        emit(BentoTextareaEvent.CHANGE);\n    };\n\n    const onPressEscape = () => {\n        emit(BentoTextareaEvent.ESCAPE_PRESSED);\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        emit(BentoTextareaEvent.KEYDOWN, event);\n    };\n\n    const onKeyUp = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        emit(BentoTextareaEvent.KEYUP, event);\n    };\n\n    const onMouseDown = () => {\n        isUserResizing.value = true;\n    };\n\n    const onMouseUp = () => {\n        isUserResizing.value = false;\n    };\n\n    /**\n     * Updates the textarea width depending if the container or the user update its size.\n     * @param isTextareaElement - sets to true if the element being observed is the textarea HTML element.\n     */\n    const resizeTextareaWrapper = (isTextareaElement = false) => {\n        // Width assigned by the browser whenever the textarea is manually resized. String of the format `<value>px`.\n        const textareaStyleWidth = textareaElement.value.style.width;\n\n        // Make sure the tracked textareaHeight is always in sync with the height size in case we manually resize the textarea\n        if (textareaElement.value.style.height) {\n            if (isUserResizing.value) {\n                userSetHeight.value = parseInt(textareaElement.value.style.height, 10);\n            }\n            textareaHeight.value = textareaElement.value.style.height;\n        }\n\n        // If the textarea element observer is being triggered, but there's no textareaStyleWidth, we want to ignore it, as no manual resize as happened yet\n        // The component wrapper will handle the resizing logic instead\n        if (isTextareaElement && !textareaStyleWidth) {\n            return;\n        }\n\n        // Width of the whole bento-textarea component\n        const textareaComponentWidth = textareaComponent?.value?.offsetWidth;\n\n        // If there is no textareaStyleWidth or the textareaStyleWidth is larger than the component container, the wrapper should be 100% of the container\n        if (!textareaStyleWidth || parseInt(textareaStyleWidth, 10) > textareaComponentWidth) {\n            textareaWrapperWidth.value = '100%';\n        } else {\n            // Else the wrapper should always be as wide as the textarea element itself\n            textareaWrapperWidth.value = textareaStyleWidth;\n        }\n    };\n\n    const focus = () => {\n        textareaElement.value.focus();\n    };\n\n    defineExpose({\n        focus,\n    });\n\n    onMounted(() => {\n        textareaElementObserver = observeSizeOfElement(textareaElement.value, () => {\n            resizeTextareaWrapper(true);\n        });\n\n        textareaComponentObserver = observeSizeOfElement(textareaComponent.value, () => {\n            resizeTextareaWrapper();\n        });\n\n        if (isDynamicHeight.value) {\n            calculateHeight();\n        }\n\n        if (props.value) {\n            deprecate(\n                'BentoTextarea \"value\" property',\n                `The use of \"value\" prop in \"BentoTextarea\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n                '2.0.0'\n            );\n        }\n    });\n\n    onUnmounted(() => {\n        textareaElementObserver?.disconnect();\n        textareaComponentObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    const TEXTAREA_BORDER_WIDTH = parseFloat(BBorderWidthAttention);\n\n    export default {\n        i18n: { messages },\n        name: 'bento-textarea',\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./textarea.scss\" />\n"],"names":["BentoTextareaStateClass","BentoTextareaStateClass2","BentoTextareaEvent","BentoTextareaEvent2","TEXTAREA_BORDER_WIDTH","BBorderWidthAttention","__default__","messages","attrs","useAttrs","height","toRefs","props","textareaId","generateUid","textareaElement","ref","textareaComponent","textareaValue","defaultTextareaHeight","textareaHeight","userSetHeight","textareaWrapperWidth","isUserResizing","textareaElementObserver","textareaComponentObserver","t","n","useI18n","isReadOnly","useFormLayoutFieldLoading","toRef","emitValue","useFormFieldEmits","emit","counter","computed","_a","isDynamicHeight","isOverCharacterLimit","calculateHeight","newHeight","watch","nextTick","invalidInput","conditionalClasses","conditionalClassesInput","conditionalClassesLabelBox","conditionalClassesLabelItem","counterErrorText","ariaLabelAttribute","ariaLabel","label","computedAriaLabel","useAriaLabel","showClearButton","onClear","onInput","event","onBlur","onFocus","onChange","onPressEscape","onKeyDown","onKeyUp","onMouseDown","onMouseUp","resizeTextareaWrapper","isTextareaElement","textareaStyleWidth","textareaComponentWidth","focus","expose","onMounted","observeSizeOfElement","deprecate","onUnmounted"],"mappings":"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"}
+{"version":3,"file":"textarea.C2gJX1kj.js","sources":["../../src/components/textarea/textarea.types.ts","../../src/components/textarea/textarea.vue"],"sourcesContent":["import type { FormField } from '../../types/form-field';\n\n/**\n * @deprecated Since v2.0.0. Use string literal instead.\n */\nexport enum BentoTextareaResizeOption {\n    HORIZONTAL = 'horizontal',\n    VERTICAL = 'vertical',\n    BOTH = 'both',\n    NONE = 'none',\n}\n\nexport enum BentoTextareaStateClass {\n    CLEARABLE = 'clearable',\n    DISABLED = 'disabled',\n    ERROR = 'error',\n    READONLY = 'readonly',\n}\n\nexport enum BentoTextareaEvent {\n    BLUR = 'blur',\n    CHANGE = 'change',\n    CLEAR = 'clear',\n    ESCAPE_PRESSED = 'escape-pressed',\n    FOCUS = 'focus',\n    INPUT = 'input',\n    UPDATE_MODEL_VALUE = 'update:model-value',\n    KEYDOWN = 'keydown',\n    KEYUP = 'keyup',\n}\n\nexport interface BentoTextareaProps extends FormField {\n    /**\n     * Text that labels the input element\n     * @default undefined\n     */\n    ariaLabel?: string;\n\n    /**\n     * Text that shows number of characters in textarea\n     * @default undefined\n     */\n    characterLimit?: number;\n\n    /**\n     * If set to true, shows a button to clear all the text\n     * @default false\n     */\n    clearable?: boolean;\n\n    /**\n     * Sets the height of the textarea, e.g 200px OR 20vh\n     * @default null\n     */\n    height?: string | null;\n\n    /**\n     * Indicates the possibility of resize the textarea.\n     * Accepts the Enum or the string literal version.\n     * @default BentoTextareaResizeOption.BOTH\n     */\n    resizable?: BentoTextareaResizeOption | `${BentoTextareaResizeOption}`;\n\n    /**\n     * Text displayed as the value of the textarea\n     * @deprecated Since v2.0.0. Use `v-model` or `model-value` instead.\n     */\n    value?: string;\n\n    /**\n     * Text displayed as the value of the textarea\n     */\n    modelValue?: string;\n}\n","<template>\n    <div ref=\"textareaComponent\" class=\"b-textarea\" :class=\"conditionalClasses\">\n        <div :style=\"{ width: textareaWrapperWidth }\">\n            <div class=\"b-textarea__label-box\" :class=\"conditionalClassesLabelBox\">\n                <field-label\n                    v-if=\"label\"\n                    :for=\"textareaId\"\n                    :label=\"label\"\n                    :tooltip-text=\"tooltipText\"\n                    :optional=\"optional\"\n                    :required=\"required\"\n                />\n                <bento-typography\n                    v-if=\"characterLimit\"\n                    el=\"span\"\n                    class=\"b-textarea__label-item\"\n                    :class=\"conditionalClassesLabelItem\"\n                >\n                    {{ counter }}\n                </bento-typography>\n            </div>\n            <bento-typography el=\"div\" class=\"b-textarea__input-box\" :aria-disabled=\"disabled\">\n                <textarea\n                    :id=\"textareaId\"\n                    ref=\"textareaElement\"\n                    :value=\"textareaValue\"\n                    class=\"b-textarea__input\"\n                    :class=\"conditionalClassesInput\"\n                    :aria-label=\"computedAriaLabel\"\n                    :aria-invalid=\"invalidInput\"\n                    :readonly=\"isReadOnly\"\n                    :required=\"required\"\n                    :aria-required=\"required\"\n                    :disabled=\"disabled\"\n                    :placeholder=\"placeholder\"\n                    :style=\"{ resize: resizable, height: textareaHeight }\"\n                    @blur=\"onBlur\"\n                    @change=\"onChange\"\n                    @focus=\"onFocus\"\n                    @input=\"onInput\"\n                    @keydown.esc=\"onPressEscape\"\n                    @keydown=\"onKeyDown\"\n                    @keyup=\"onKeyUp\"\n                    @mousedown=\"onMouseDown\"\n                    @mouseup=\"onMouseUp\"\n                >\n                </textarea>\n\n                <div v-if=\"showClearButton\" class=\"b-textarea__clear-button\">\n                    <bento-button\n                        variant=\"tertiary\"\n                        :disabled=\"disabled\"\n                        @click=\"onClear\"\n                        @keypress.enter=\"onClear\"\n                        @keyup.space=\"onClear\"\n                    >\n                        <template #iconLeft>\n                            <cross-circle-fill-small-icon :svg-title=\"t('clearText')\" />\n                        </template>\n                    </bento-button>\n                </div>\n            </bento-typography>\n\n            <error-message v-if=\"isOverCharacterLimit\" :error-message=\"counterErrorText\" />\n\n            <error-message v-if=\"errorMessage\" :error-message=\"errorMessage\" />\n\n            <bento-typography v-if=\"description\" class=\"b-textarea__description\" el=\"span\">\n                {{ description }}\n            </bento-typography>\n        </div>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\n    import { computed, nextTick, onMounted, onUnmounted, ref, toRef, toRefs, useAttrs, watch } from 'vue';\n\n    // Components\n    import { BentoButton } from '@/components/button';\n    import { BentoTypography } from '@/components/typography';\n    import { ErrorMessage, FieldLabel } from '@/internal';\n    import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small';\n\n    // Utils\n    import { generateUid } from '@/core/utils/ts';\n    import { observeSizeOfElement } from '@/utils/ts/resize';\n    import { useAriaLabel } from '@/utils/ts/aria-label';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { deprecate } from '@/utils/ts/deprecate';\n    import { useFormFieldEmits } from '@/utils/ts/form-field/form-field';\n\n    // Composables\n    import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading';\n\n    // Constants\n    import { BBorderWidthAttention } from '@adyen/bento-design-tokens/dist/js/bento/es6';\n\n    // Types\n    import { BentoTextareaEvent, type BentoTextareaProps, BentoTextareaStateClass } from './textarea.types';\n\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    const attrs = useAttrs();\n\n    const props = defineProps({\n  description: { default: '' },\n  disabled: { type: Boolean, default: false },\n  errorMessage: { default: '' },\n  label: { default: '' },\n  optional: { type: Boolean, default: false },\n  placeholder: { default: '' },\n  readonly: { type: Boolean, default: false },\n  required: { type: Boolean, default: false },\n  tooltipText: { default: null },\n  ariaLabel: { default: undefined },\n  characterLimit: { default: undefined },\n  clearable: { type: Boolean, default: false },\n  height: { default: null },\n  resizable: { default: 'both' },\n  value: { default: '' },\n  modelValue: { default: '' }\n});\n\n    const emit = defineEmits([]);\n\n    const { height } = toRefs(props);\n\n    const textareaId = generateUid('textarea');\n    const textareaElement = ref<HTMLTextAreaElement>(null);\n    const textareaComponent = ref<HTMLDivElement>(null);\n    const textareaValue = ref(props.modelValue || props.value);\n    const defaultTextareaHeight = 44;\n    const textareaHeight = ref(props.height || `${defaultTextareaHeight}px`);\n    const userSetHeight = ref<number>(0);\n    const textareaWrapperWidth = ref('100%'); // The width set to the wrapper of the label, textarea and description\n    const isUserResizing = ref(false);\n    let textareaElementObserver: ResizeObserver | null = null;\n    let textareaComponentObserver: ResizeObserver | null = null;\n\n    const { t, n } = useI18n<{ message: MessageSchema }>({ messages });\n\n    const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly'));\n\n    const { emitValue } = useFormFieldEmits<string>(emit);\n\n    const counter = computed(() => `${n(textareaValue?.value?.length ?? 0)} / ${n(props.characterLimit)}`);\n    const isDynamicHeight = computed(() => !height.value);\n    const isOverCharacterLimit = computed(\n        () => props.characterLimit && textareaValue.value.length > props.characterLimit\n    );\n\n    /**\n     * Calculates and sets the height of the textarea.\n     * The height is determined by the maximum of the following values:\n     *\n     * 1. The content's scroll height (with a minimum of `defaultTextareaHeight`) + the border width.\n     * 2. The height set by the user manually resizing the textarea (`userSetHeight`).\n     * 3. The default minimum height (`defaultTextareaHeight`).\n     *\n     * This ensures the textarea grows with content, shrinks when content is removed,\n     * but never goes below the manually set height or the default height.\n     */\n    const calculateHeight = () => {\n        if (textareaElement.value) {\n            const newHeight = Math.max(\n                textareaElement.value.scrollHeight <= defaultTextareaHeight\n                    ? defaultTextareaHeight\n                    : textareaElement.value.scrollHeight + TEXTAREA_BORDER_WIDTH * 2,\n                userSetHeight.value,\n                defaultTextareaHeight\n            );\n            textareaHeight.value = `${newHeight}px`;\n        }\n    };\n\n    watch(height, () => {\n        if (isDynamicHeight.value) {\n            calculateHeight();\n        } else {\n            textareaHeight.value = height.value;\n        }\n    });\n\n    watch(\n        () => [props.value, props.modelValue],\n        () => {\n            textareaValue.value = props.modelValue || props.value;\n        },\n        { immediate: true }\n    );\n\n    watch(\n        () => textareaValue.value,\n        async () => {\n            if (isDynamicHeight.value) {\n                // Hack to make the textarea calculate its height properly\n                // Set the textarea back to the original value before calculating the height\n                textareaHeight.value = `${defaultTextareaHeight}px`;\n                if (!textareaValue.value) {\n                    return;\n                }\n\n                await nextTick();\n                calculateHeight();\n            }\n        },\n        { immediate: true }\n    );\n\n    const invalidInput = computed(() => !!props.errorMessage || isOverCharacterLimit.value);\n\n    const conditionalClasses = computed(() => ({\n        [`b-textarea--${BentoTextareaStateClass.DISABLED}`]: props.disabled,\n    }));\n\n    const conditionalClassesInput = computed(() => ({\n        [`b-textarea__input--${BentoTextareaStateClass.CLEARABLE}`]: props.clearable,\n        [`b-textarea__input--${BentoTextareaStateClass.READONLY}`]: isReadOnly.value,\n        [`b-textarea__input--${BentoTextareaStateClass.ERROR}`]: invalidInput.value,\n        [`b-textarea__input--dynamic-height`]: isDynamicHeight.value,\n    }));\n\n    const conditionalClassesLabelBox = computed(() => ({\n        [`b-textarea__label-box--no-label`]: !props.label,\n    }));\n\n    const conditionalClassesLabelItem = computed(() => ({\n        [`b-textarea__label-item--${BentoTextareaStateClass.ERROR}`]: isOverCharacterLimit.value,\n    }));\n\n    const counterErrorText = computed(() => t('yourTextCanBenAtMost', { characterLimit: props.characterLimit }));\n\n    const ariaLabelAttribute = ref(attrs['aria-label']);\n    const { ariaLabel, label } = toRefs(props);\n    const computedAriaLabel = useAriaLabel({\n        ariaLabel: ariaLabelAttribute.value as string,\n        // TODO: take this line away when the aria-label props is removed\n        label: ariaLabel,\n        defaultFallback: label,\n    });\n\n    const showClearButton = computed(\n        () => props.clearable && textareaValue.value && !props.disabled && !isReadOnly.value\n    );\n\n    const onClear = () => {\n        textareaValue.value = '';\n        emit(BentoTextareaEvent.CLEAR);\n        emitValue('');\n    };\n\n    const onInput = (event: InputEvent) => {\n        event.stopImmediatePropagation();\n\n        if (!props.disabled && !isReadOnly.value) {\n            textareaValue.value = (event.target as HTMLInputElement).value;\n            /**\n             * Triggered when input value is changed\n             *\n             * @event input\n             * @property {String} inputValue - the updated textarea value\n             */\n            emitValue(textareaValue.value);\n        }\n    };\n\n    const onBlur = () => {\n        textareaElement.value.scrollTop = 0;\n        emit(BentoTextareaEvent.BLUR);\n    };\n\n    const onFocus = () => {\n        textareaElement.value.focus();\n        emit(BentoTextareaEvent.FOCUS);\n    };\n\n    const onChange = () => {\n        emit(BentoTextareaEvent.CHANGE);\n    };\n\n    const onPressEscape = () => {\n        emit(BentoTextareaEvent.ESCAPE_PRESSED);\n    };\n\n    const onKeyDown = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        emit(BentoTextareaEvent.KEYDOWN, event);\n    };\n\n    const onKeyUp = (event: KeyboardEvent) => {\n        event.stopPropagation();\n        emit(BentoTextareaEvent.KEYUP, event);\n    };\n\n    const onMouseDown = () => {\n        isUserResizing.value = true;\n    };\n\n    const onMouseUp = () => {\n        isUserResizing.value = false;\n    };\n\n    /**\n     * Updates the textarea width depending if the container or the user update its size.\n     * @param isTextareaElement - sets to true if the element being observed is the textarea HTML element.\n     */\n    const resizeTextareaWrapper = (isTextareaElement = false) => {\n        // Width assigned by the browser whenever the textarea is manually resized. String of the format `<value>px`.\n        const textareaStyleWidth = textareaElement.value.style.width;\n\n        // Make sure the tracked textareaHeight is always in sync with the height size in case we manually resize the textarea\n        if (textareaElement.value.style.height) {\n            if (isUserResizing.value) {\n                userSetHeight.value = parseInt(textareaElement.value.style.height, 10);\n            }\n            textareaHeight.value = textareaElement.value.style.height;\n        }\n\n        // If the textarea element observer is being triggered, but there's no textareaStyleWidth, we want to ignore it, as no manual resize as happened yet\n        // The component wrapper will handle the resizing logic instead\n        if (isTextareaElement && !textareaStyleWidth) {\n            return;\n        }\n\n        // Width of the whole bento-textarea component\n        const textareaComponentWidth = textareaComponent?.value?.offsetWidth;\n\n        // If there is no textareaStyleWidth or the textareaStyleWidth is larger than the component container, the wrapper should be 100% of the container\n        if (!textareaStyleWidth || parseInt(textareaStyleWidth, 10) > textareaComponentWidth) {\n            textareaWrapperWidth.value = '100%';\n        } else {\n            // Else the wrapper should always be as wide as the textarea element itself\n            textareaWrapperWidth.value = textareaStyleWidth;\n        }\n    };\n\n    const focus = () => {\n        textareaElement.value.focus();\n    };\n\n    defineExpose({\n        focus,\n    });\n\n    onMounted(() => {\n        textareaElementObserver = observeSizeOfElement(textareaElement.value, () => {\n            resizeTextareaWrapper(true);\n        });\n\n        textareaComponentObserver = observeSizeOfElement(textareaComponent.value, () => {\n            resizeTextareaWrapper();\n        });\n\n        if (isDynamicHeight.value) {\n            calculateHeight();\n        }\n\n        if (props.value) {\n            deprecate(\n                'BentoTextarea \"value\" property',\n                `The use of \"value\" prop in \"BentoTextarea\" is no longer supported.\n                Use the \"v-model\" or \"model-value\" property instead.`,\n                '2.0.0'\n            );\n        }\n    });\n\n    onUnmounted(() => {\n        textareaElementObserver?.disconnect();\n        textareaComponentObserver?.disconnect();\n    });\n</script>\n\n<script lang=\"ts\">\n    const TEXTAREA_BORDER_WIDTH = parseFloat(BBorderWidthAttention);\n\n    export default {\n        i18n: { messages },\n        name: 'bento-textarea',\n        model: { prop: 'modelValue' },\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./textarea.scss\" />\n"],"names":["BentoTextareaStateClass","BentoTextareaStateClass2","BentoTextareaEvent","BentoTextareaEvent2","TEXTAREA_BORDER_WIDTH","BBorderWidthAttention","__default__","messages","attrs","useAttrs","height","toRefs","props","textareaId","generateUid","textareaElement","ref","textareaComponent","textareaValue","defaultTextareaHeight","textareaHeight","userSetHeight","textareaWrapperWidth","isUserResizing","textareaElementObserver","textareaComponentObserver","t","n","useI18n","isReadOnly","useFormLayoutFieldLoading","toRef","emitValue","useFormFieldEmits","emit","counter","computed","_a","isDynamicHeight","isOverCharacterLimit","calculateHeight","newHeight","watch","nextTick","invalidInput","conditionalClasses","conditionalClassesInput","conditionalClassesLabelBox","conditionalClassesLabelItem","counterErrorText","ariaLabelAttribute","ariaLabel","label","computedAriaLabel","useAriaLabel","showClearButton","onClear","onInput","event","onBlur","onFocus","onChange","onPressEscape","onKeyDown","onKeyUp","onMouseDown","onMouseUp","resizeTextareaWrapper","isTextareaElement","textareaStyleWidth","textareaComponentWidth","focus","expose","onMounted","observeSizeOfElement","deprecate","onUnmounted"],"mappings":"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"}

package/dist/chunks/{timeline-item.CF9jbIRr.js → timeline-item.BKc5c9sS.js}

@@ -1,15 +1,15 @@
 import { defineComponent as S, computed as o, ref as N, toRefs as X, watch as Z, provide as A, nextTick as Q, useSlots as ee, inject as k, onUnmounted as te } from "vue";
 import { B as H } from "./button.C9b2AC9w.js";
-import { B as se } from "./textarea.CJS-1I41.js";
+import { B as se } from "./textarea.C2gJX1kj.js";
 import { u as J } from "./index.B6WW_F-J.js";
-import { B as ae } from "./button-actions.CXD6_9qN.js";
+import { B as ae } from "./button-actions.CdsmKyvj.js";
 import { n as R } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
-import { B as ie } from "./dashed-underline.D_FhFRXM.js";
+import { B as ie } from "./dashed-underline.CPTkubjQ.js";
 import { B as ne } from "./date.B0m0sFP6.js";
 import { B as oe } from "./link.DB5g6d48.js";
-import { B as re } from "./tag.D2xagTJv.js";
+import { B as re } from "./tag.DPNSUeue.js";
 import { d as le, B as me } from "./typography.C8lPlsbD.js";
-import { S as de, a as ce, B as ue } from "./structured-list-item.BBBtie1s.js";
+import { S as de, a as ce, B as ue } from "./structured-list-item.De_yYayn.js";
 /* empty css              */
 import { g as _e } from "./generate-uid.NJ8tVoha.js";
 import { u as pe } from "./use-has-slot.C9lQZ6nz.js";
@@ -319,4 +319,4 @@ export {
   Ce as d,
   st as t
 };
-//# sourceMappingURL=timeline-item.CF9jbIRr.js.map
+//# sourceMappingURL=timeline-item.BKc5c9sS.js.map