@adyen/bento-vue2 1.63.2 → 1.64.0

package/dist/chunks/{copy.Co1MMqtM.js.map → copy.CXeLbvUP.js.map}

@@ -1 +1 @@
-{"version":3,"file":"copy.Co1MMqtM.js","sources":["../../src/components/internal/copy/copy.types.ts","../../../ui-assets/icons-16/dist/vue/copy.vue","../../src/components/internal/copy/copy.vue"],"sourcesContent":["import type { BentoButton } from '../../button';\n\nexport enum CopyTooltipState {\n    DEFAULT = 'default',\n    COPYING = 'copying',\n    ERROR = 'error',\n}\n\ntype ButtonProps = InstanceType<typeof BentoButton>['$props'];\nexport type BentoCopyButtonProps = {\n    variant?: ButtonProps['variant'];\n    condensed?: ButtonProps['condensed'];\n    disabled?: ButtonProps['disabled'];\n};\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M3.5 1.25C2.25736 1.25 1.25 2.25736 1.25 3.5V8.5C1.25 9.74264 2.25736 10.75 3.5 10.75H5.25V12.5C5.25 13.7426 6.25736 14.75 7.5 14.75H12.5C13.7426 14.75 14.75 13.7426 14.75 12.5V7.5C14.75 6.25736 13.7426 5.25 12.5 5.25H10.75V3.5C10.75 2.25736 9.74264 1.25 8.5 1.25H3.5ZM9.25 5.25H7.5C6.25736 5.25 5.25 6.25736 5.25 7.5V9.25H3.5C3.08579 9.25 2.75 8.91421 2.75 8.5V3.5C2.75 3.08579 3.08579 2.75 3.5 2.75H8.5C8.91421 2.75 9.25 3.08579 9.25 3.5V5.25ZM6.75 12.5V7.5C6.75 7.08579 7.08579 6.75 7.5 6.75H12.5C12.9142 6.75 13.25 7.08579 13.25 7.5V12.5C13.25 12.9142 12.9142 13.25 12.5 13.25H7.5C7.08579 13.25 6.75 12.9142 6.75 12.5Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <div class=\"b-copy\" @mouseleave=\"resetText\" @focusout=\"resetText\">\n        <span v-if=\"$slots.default\" v-bento-tooltip-directive:[tooltipPosition]=\"copyText\" @click=\"onClickCopy\">\n            <slot />\n        </span>\n        <bento-button\n            v-else\n            v-bento-tooltip-directive:[tooltipPosition]=\"copyText\"\n            v-bind=\"button\"\n            @click=\"onClickCopy\"\n        >\n            <template #iconLeft>\n                <copy-icon :svg-title=\"svgTitle\" />\n            </template>\n            <template v-if=\"buttonText\" #default>\n                {{ buttonText }}\n            </template>\n        </bento-button>\n        <div v-if=\"showScreenReaderAlert\" role=\"alert\" class=\"b-copy__screen-reader-alert\">{{ t('copied') }}</div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { PopperContainerPosition } from '@/components/popper-container';\n    import { BentoTooltipDirective } from '@/directives';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoCopyButtonProps, CopyTooltipState } from './copy.types';\n    import CopyIcon from '@adyen/ui-assets-icons-16/vue/copy';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * An internal button component that copies text to the user's clipboard.\n     *\n     * @example\n     * import { Copy } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { Copy },\n     *     template: `\n     *          <copy :text=\"textToCopy\" />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'copy',\n        components: { BentoButton, CopyIcon },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.\n             */\n            button: {\n                type: Object as PropType<BentoCopyButtonProps>,\n                default: () =>\n                    ({\n                        variant: 'tertiary',\n                    } as BentoCopyButtonProps),\n            },\n\n            /**\n             * Sets the button text of the copy button.\n             */\n            buttonText: {\n                type: String,\n                default: undefined,\n            },\n\n            /**\n             * Defines the string that will get copied to the clipboard\n             */\n            text: {\n                type: String,\n                required: true,\n            },\n\n            /**\n             * Position the tooltip should take if space is available. Defaults to 'top'\n             */\n            tooltipPosition: {\n                type: String as PropType<PopperContainerPosition>,\n                default: PopperContainerPosition.TOP,\n            },\n        },\n        setup(props) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const copyState = ref<CopyTooltipState>(CopyTooltipState.DEFAULT);\n\n            const showScreenReaderAlert = ref(false);\n            const onClickCopy = async () => {\n                try {\n                    await navigator.clipboard.writeText(props.text);\n                    copyState.value = CopyTooltipState.COPYING;\n                    showScreenReaderAlert.value = true;\n                } catch {\n                    copyState.value = CopyTooltipState.ERROR;\n                }\n            };\n\n            const resetText = () => {\n                copyState.value = CopyTooltipState.DEFAULT;\n                showScreenReaderAlert.value = false;\n            };\n\n            const copyText = computed(() => {\n                switch (copyState.value) {\n                    case CopyTooltipState.COPYING:\n                        return t('copied');\n                    case CopyTooltipState.ERROR:\n                        return t('copyFailed');\n                    case CopyTooltipState.DEFAULT:\n                    default:\n                        return t('copy');\n                }\n            });\n\n            const svgTitle = computed(() => (props?.buttonText ? undefined : t('copy')));\n\n            return {\n                copyText,\n                onClickCopy,\n                resetText,\n                showScreenReaderAlert,\n                svgTitle,\n\n                // Translations\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./copy.scss\" />\n"],"names":["CopyTooltipState","CopyTooltipState2","uuid","_sfc_main$1","_sfc_main","defineComponent","messages","BentoButton","CopyIcon","BentoTooltipDirective","PopperContainerPosition","props","useI18n","copyState","ref","showScreenReaderAlert","onClickCopy","resetText","copyText","computed","svgTitle"],"mappings":";;;;;;;;AAEY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,UAAA,WACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA;ACKZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;GCiCAE,IAAAC,EAAA;AAAA,EAAA,MAAA,EAAA,UAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,GAAA,UAAAC,EAAA;AAAA,EACA,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA,OAAA;AAAA,QAEA,SAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,YAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,iBAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAC,EAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAEA,UAAA,EAAA,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAAd,EAAA,OAAA,GAEAe,IAAAD,EAAA,EAAA,GACAE,IAAA,YAAA;AACA,UAAA;AACA,cAAA,UAAA,UAAA,UAAAL,EAAA,IAAA,GACAE,EAAA,QAAAb,EAAA,SACAe,EAAA,QAAA;AAAA,MAAA,QAAA;AAEA,QAAAF,EAAA,QAAAb,EAAA;AAAA,MAAA;AAAA,IACA,GAGAiB,IAAA,MAAA;AACA,MAAAJ,EAAA,QAAAb,EAAA,SACAe,EAAA,QAAA;AAAA,IAAA,GAGAG,IAAAC,EAAA,MAAA;AACA,cAAAN,EAAA,OAAA;AAAA,QAAA,KAAAb,EAAA;AAEA,iBAAA,EAAA,QAAA;AAAA,QAAA,KAAAA,EAAA;AAEA,iBAAA,EAAA,YAAA;AAAA,QAAA,KAAAA,EAAA;AAAA,QACA;AAEA,iBAAA,EAAA,MAAA;AAAA,MAAA;AAAA,IACA,CAAA,GAGAoB,IAAAD,EAAA,MAAAR,KAAA,QAAAA,EAAA,aAAA,SAAA,EAAA,MAAA,CAAA;AAEA,WAAA;AAAA,MAAA,UAAAO;AAAA,MACA,aAAAF;AAAA,MACA,WAAAC;AAAA,MACA,uBAAAF;AAAA,MACA,UAAAK;AAAA;AAAA,MACA;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"copy.CXeLbvUP.js","sources":["../../src/components/internal/copy/copy.types.ts","../../../ui-assets/icons-16/dist/vue/copy.vue","../../src/components/internal/copy/copy.vue"],"sourcesContent":["import type { BentoButton } from '../../button';\n\nexport enum CopyTooltipState {\n    DEFAULT = 'default',\n    COPYING = 'copying',\n    ERROR = 'error',\n}\n\ntype ButtonProps = InstanceType<typeof BentoButton>['$props'];\nexport type BentoCopyButtonProps = {\n    variant?: ButtonProps['variant'];\n    condensed?: ButtonProps['condensed'];\n    disabled?: ButtonProps['disabled'];\n};\n","\n<template>\n    <svg role=\"img\" v-bind=\"$attrs\" class=\"ui-assets-icons-16\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"none\"><title v-if=\"$attrs['svg-title']\">{{ $attrs['svg-title'] }}</title><path fill=\"#001222\" d=\"M3.5 1.25C2.25736 1.25 1.25 2.25736 1.25 3.5V8.5C1.25 9.74264 2.25736 10.75 3.5 10.75H5.25V12.5C5.25 13.7426 6.25736 14.75 7.5 14.75H12.5C13.7426 14.75 14.75 13.7426 14.75 12.5V7.5C14.75 6.25736 13.7426 5.25 12.5 5.25H10.75V3.5C10.75 2.25736 9.74264 1.25 8.5 1.25H3.5ZM9.25 5.25H7.5C6.25736 5.25 5.25 6.25736 5.25 7.5V9.25H3.5C3.08579 9.25 2.75 8.91421 2.75 8.5V3.5C2.75 3.08579 3.08579 2.75 3.5 2.75H8.5C8.91421 2.75 9.25 3.08579 9.25 3.5V5.25ZM6.75 12.5V7.5C6.75 7.08579 7.08579 6.75 7.5 6.75H12.5C12.9142 6.75 13.25 7.08579 13.25 7.5V12.5C13.25 12.9142 12.9142 13.25 12.5 13.25H7.5C7.08579 13.25 6.75 12.9142 6.75 12.5Z\"/></svg>\n</template>\n<script>\n    import '../css/main.css';\n\n    let uuid = 0;\n\n    export default {\n        beforeCreate() {\n            this.uuid = uuid.toString();\n            uuid += 1;\n        },\n    };\n</script>\n","<template>\n    <div class=\"b-copy\" @mouseleave=\"resetText\" @focusout=\"resetText\">\n        <span v-if=\"$slots.default\" v-bento-tooltip-directive:[tooltipPosition]=\"copyText\" @click=\"onClickCopy\">\n            <slot />\n        </span>\n        <bento-button\n            v-else\n            v-bento-tooltip-directive:[tooltipPosition]=\"copyText\"\n            v-bind=\"button\"\n            @click=\"onClickCopy\"\n        >\n            <template #iconLeft>\n                <copy-icon :svg-title=\"svgTitle\" />\n            </template>\n            <template v-if=\"buttonText\" #default>\n                {{ buttonText }}\n            </template>\n        </bento-button>\n        <div v-if=\"showScreenReaderAlert\" role=\"alert\" class=\"b-copy__screen-reader-alert\">{{ t('copied') }}</div>\n    </div>\n</template>\n\n<script lang=\"ts\">\n    import { computed, defineComponent, PropType, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { PopperContainerPosition } from '@/components/popper-container';\n    import { BentoTooltipDirective } from '@/directives';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { BentoCopyButtonProps, CopyTooltipState } from './copy.types';\n    import CopyIcon from '@adyen/ui-assets-icons-16/vue/copy';\n    import messages from './messages.json';\n\n    type MessageSchema = (typeof messages)['en-US'];\n\n    /**\n     * An internal button component that copies text to the user's clipboard.\n     *\n     * @example\n     * import { Copy } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { Copy },\n     *     template: `\n     *          <copy :text=\"textToCopy\" />\n     *     `\n     * }\n     */\n    export default defineComponent({\n        i18n: { messages },\n        name: 'copy',\n        components: { BentoButton, CopyIcon },\n        directives: { BentoTooltipDirective },\n        props: {\n            /**\n             * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.\n             */\n            button: {\n                type: Object as PropType<BentoCopyButtonProps>,\n                default: () =>\n                    ({\n                        variant: 'tertiary',\n                    } as BentoCopyButtonProps),\n            },\n\n            /**\n             * Sets the button text of the copy button.\n             */\n            buttonText: {\n                type: String,\n                default: undefined,\n            },\n\n            /**\n             * Defines the string that will get copied to the clipboard\n             */\n            text: {\n                type: String,\n                required: true,\n            },\n\n            /**\n             * Position the tooltip should take if space is available. Defaults to 'top'\n             */\n            tooltipPosition: {\n                type: String as PropType<PopperContainerPosition>,\n                default: PopperContainerPosition.TOP,\n            },\n        },\n        setup(props) {\n            const { t } = useI18n<{ message: MessageSchema }>({ messages });\n            const copyState = ref<CopyTooltipState>(CopyTooltipState.DEFAULT);\n\n            const showScreenReaderAlert = ref(false);\n            const onClickCopy = async () => {\n                try {\n                    await navigator.clipboard.writeText(props.text);\n                    copyState.value = CopyTooltipState.COPYING;\n                    showScreenReaderAlert.value = true;\n                } catch {\n                    copyState.value = CopyTooltipState.ERROR;\n                }\n            };\n\n            const resetText = () => {\n                copyState.value = CopyTooltipState.DEFAULT;\n                showScreenReaderAlert.value = false;\n            };\n\n            const copyText = computed(() => {\n                switch (copyState.value) {\n                    case CopyTooltipState.COPYING:\n                        return t('copied');\n                    case CopyTooltipState.ERROR:\n                        return t('copyFailed');\n                    case CopyTooltipState.DEFAULT:\n                    default:\n                        return t('copy');\n                }\n            });\n\n            const svgTitle = computed(() => (props?.buttonText ? undefined : t('copy')));\n\n            return {\n                copyText,\n                onClickCopy,\n                resetText,\n                showScreenReaderAlert,\n                svgTitle,\n\n                // Translations\n                t,\n            };\n        },\n    });\n</script>\n\n<style lang=\"scss\" scoped src=\"./copy.scss\" />\n"],"names":["CopyTooltipState","CopyTooltipState2","uuid","_sfc_main$1","_sfc_main","defineComponent","messages","BentoButton","CopyIcon","BentoTooltipDirective","PopperContainerPosition","props","useI18n","copyState","ref","showScreenReaderAlert","onClickCopy","resetText","copyText","computed","svgTitle"],"mappings":";;;;;;;;AAEY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,UAAA,WACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA;ACKZ,IAAAE,IAAA;AAEA,MAAAC,IAAA;AAAA,EACA,eAAA;AACA,SAAA,OAAAD,EAAA,SAAA,GACAA,KAAA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;GCiCAE,IAAAC,EAAA;AAAA,EAAA,MAAA,EAAA,UAAAC,EAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA,EAAA,aAAAC,GAAA,UAAAC,EAAA;AAAA,EACA,YAAA,EAAA,uBAAAC,EAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IACA,QAAA;AAAA,MAIA,MAAA;AAAA,MACA,SAAA,OAAA;AAAA,QAEA,SAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,YAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,MAAA;AAAA,MAKA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IACA,iBAAA;AAAA,MAKA,MAAA;AAAA,MACA,SAAAC,EAAA;AAAA,IACA;AAAA,EACA;AAAA,EACA,MAAAC,GAAA;AAEA,UAAA,EAAA,EAAA,IAAAC,EAAA,GACAC,IAAAC,EAAAd,EAAA,OAAA,GAEAe,IAAAD,EAAA,EAAA,GACAE,IAAA,YAAA;AACA,UAAA;AACA,cAAA,UAAA,UAAA,UAAAL,EAAA,IAAA,GACAE,EAAA,QAAAb,EAAA,SACAe,EAAA,QAAA;AAAA,MAAA,QAAA;AAEA,QAAAF,EAAA,QAAAb,EAAA;AAAA,MAAA;AAAA,IACA,GAGAiB,IAAA,MAAA;AACA,MAAAJ,EAAA,QAAAb,EAAA,SACAe,EAAA,QAAA;AAAA,IAAA,GAGAG,IAAAC,EAAA,MAAA;AACA,cAAAN,EAAA,OAAA;AAAA,QAAA,KAAAb,EAAA;AAEA,iBAAA,EAAA,QAAA;AAAA,QAAA,KAAAA,EAAA;AAEA,iBAAA,EAAA,YAAA;AAAA,QAAA,KAAAA,EAAA;AAAA,QACA;AAEA,iBAAA,EAAA,MAAA;AAAA,MAAA;AAAA,IACA,CAAA,GAGAoB,IAAAD,EAAA,MAAAR,KAAA,QAAAA,EAAA,aAAA,SAAA,EAAA,MAAA,CAAA;AAEA,WAAA;AAAA,MAAA,UAAAO;AAAA,MACA,aAAAF;AAAA,MACA,WAAAC;AAAA,MACA,uBAAAF;AAAA,MACA,UAAAK;AAAA;AAAA,MACA;AAAA,IAGA;AAAA,EACA;AAEA,CAAA;;;;;;;;;;;;;;;;;"}

package/dist/chunks/{dashed-underline.DD24UDCz.js → dashed-underline.CEaAmjDa.js}

@@ -2,7 +2,7 @@ import { defineComponent as T, useSlots as P, ref as u, computed as d, watch as
 import { B as O } from "./popover.B05xkQ4e.js";
 import { B as b } from "./typography.J1v_SPG3.js";
 import { u as x } from "./use-has-slot.C9lQZ6nz.js";
-import { B as g } from "./tooltip.DyZIyMZN.js";
+import { B as g } from "./tooltip.wQsyAwkC.js";
 import { B as S } from "./teleport.BV6zrDjA.js";
 import { n as C } from "./_plugin-vue2_normalizer.CeySl7Fu.js";
 import "../assets/dashed-underline.css";
@@ -75,4 +75,4 @@ const q = z.exports;
 export {
   q as B
 };
-//# sourceMappingURL=dashed-underline.DD24UDCz.js.map
+//# sourceMappingURL=dashed-underline.CEaAmjDa.js.map

package/dist/chunks/{dashed-underline.DD24UDCz.js.map → dashed-underline.CEaAmjDa.js.map}

@@ -1 +1 @@
-{"version":3,"file":"dashed-underline.DD24UDCz.js","sources":["../../src/components/dashed-underline/dashed-underline.vue"],"sourcesContent":["<template>\n    <span\n        ref=\"element\"\n        v-bento-tooltip-directive:[tooltipPosition]=\"tooltipText\"\n        class=\"b-dashed-underline\"\n        tabindex=\"0\"\n        @mouseenter=\"openPopover\"\n        @mouseleave=\"closePopover\"\n        @focus=\"dashedUnderlineOnFocus\"\n        @focusout=\"dashedUnderlineOnFocusOut\"\n    >\n        <span class=\"b-dashed-underline__content\">\n            <slot></slot>\n        </span>\n        <bento-teleport v-if=\"element && hasPopover\" :disabled=\"teleport?.disabled\" :to=\"teleport?.to\">\n            <span v-on=\"computedPopoverContainerEvents\">\n                <bento-popover\n                    :open=\"isOpen\"\n                    :target-element=\"element\"\n                    :position=\"popoverPosition\"\n                    role=\"tooltip\"\n                    :fit-content=\"popoverSize === 'fit-content' || undefined\"\n                    :large=\"popoverSize === 'large' || undefined\"\n                    :small=\"popoverSize === 'small' || undefined\"\n                    :title=\"popoverTitle\"\n                    disable-focus-trap\n                >\n                    <slot name=\"popover-content\">\n                        <bento-typography>\n                            {{ popoverText }}\n                        </bento-typography>\n                    </slot>\n                </bento-popover>\n            </span>\n        </bento-teleport>\n    </span>\n</template>\n\n<script lang=\"ts\" setup>\n    import { computed, ref, useSlots, watch } from 'vue';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip/index';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { BentoTeleport } from '@/internal';\n    import { BentoDashedUnderlineProps } from './dashed-underline.types';\n\n    const CLOSING_POPOVER_DELAY_MS = 200;\n\n    const props = defineProps({\n  popoverText: { default: null },\n  popoverTitle: { default: null },\n  popoverPosition: { default: 'top' },\n  popoverSize: { default: 'fit-content' },\n  teleport: { default: () => ({\n            disabled: true,\n        }) },\n  tooltipText: { default: null },\n  tooltipPosition: { default: 'top' }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const element = ref<HTMLSpanElement>(null);\n    const isOpen = ref(false);\n\n    const closingTimeOutId = ref();\n\n    const openPopover = () => {\n        isOpen.value = true;\n        if (closingTimeOutId.value) {\n            clearTimeout(closingTimeOutId.value);\n        }\n    };\n\n    const closePopover = () => {\n        // We want to delay closing for a couple of seconds so\n        // it doesn't flicker if a user hovers over the icon and then inside the popover.\n        const timeOutId = setTimeout(() => {\n            isOpen.value = false;\n        }, CLOSING_POPOVER_DELAY_MS);\n        closingTimeOutId.value = timeOutId;\n    };\n\n    const dashedUnderlineOnFocus = () => {\n        openPopover();\n    };\n\n    /**\n     * Only close popover on blur if the newly focus element is not a child of this element\n     * @param e - the event that contains the newly focused element\n     */\n    const dashedUnderlineOnFocusOut = (e: FocusEvent) => {\n        if (!element.value || !(e?.relatedTarget instanceof Element) || !element.value.contains(e.relatedTarget)) {\n            closePopover();\n        }\n    };\n\n    const hasPopover = computed(() => props.popoverText || hasSlot('popover-content'));\n\n    const shouldShowTooltipPopoverError = computed(() => !props.tooltipText && !hasPopover.value);\n\n    watch(\n        shouldShowTooltipPopoverError,\n        value => {\n            if (value) {\n                throw new Error(\n                    'BentoDashedUnderline requires either a tooltip or a popover to be configured. Check the docs for more info.'\n                );\n            }\n        },\n        { immediate: true }\n    );\n\n    /**\n     * When the popover is teleported, it is no longer a DOM descendant of the trigger element.\n     * We add these event listeners to the popover's container to keep the popover open when\n     * the user moves their mouse or focuses out from the trigger to the popover BUT then mouses over\n     * or focuses on the popover content.\n     */\n    const computedPopoverContainerEvents = computed(() =>\n        props.teleport?.disabled === false\n            ? {\n                  mouseenter: openPopover,\n                  mouseleave: closePopover,\n                  focus: dashedUnderlineOnFocus,\n                  focusout: dashedUnderlineOnFocusOut,\n              }\n            : {}\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Provides a dashed underline to text, indicating that more information is available on\n     * hover or focus. The additional information is displayed in a tooltip or a popover.\n     *\n     * @example\n     * import { BentoDashedUnderline } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashedUnderline },\n     *     template: `\n     *       <p>\n     *         This is some <bento-dashed-underline tooltip-text=\"A short explanation\">annotated text</bento-dashed-underline>.\n     *       </p>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashed-underline.scss\" />\n"],"names":["__default__","CLOSING_POPOVER_DELAY_MS","slots","useSlots","hasSlot","useHasSlot","element","ref","isOpen","closingTimeOutId","openPopover","closePopover","timeOutId","dashedUnderlineOnFocus","dashedUnderlineOnFocusOut","e","hasPopover","computed","props","shouldShowTooltipPopoverError","watch","value","computedPopoverContainerEvents","_a"],"mappings":";;;;;;;;AAsJI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;iBAvGAC,IAAA,KAcAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,EAAA,GAEAE,IAAAF,EAAA,GAEAG,IAAA,MAAA;AACI,MAAAF,EAAA,QAAA,IACAC,EAAA,SACI,aAAAA,EAAA,KAAA;AAAA,IACJ,GAGJE,IAAA,MAAA;AAGI,YAAAC,IAAA,WAAA,MAAA;AACI,QAAAJ,EAAA,QAAA;AAAA,MAAe,GAAAP,CAAA;AAEnB,MAAAQ,EAAA,QAAAG;AAAA,IAAyB,GAG7BC,IAAA,MAAA;AACI,MAAAH,EAAA;AAAA,IAAY,GAOhBI,IAAA,CAAAC,MAAA;AACI,OAAA,CAAAT,EAAA,SAAA,GAAAS,KAAA,gBAAAA,EAAA,0BAAA,YAAA,CAAAT,EAAA,MAAA,SAAAS,EAAA,aAAA,MACIJ,EAAA;AAAA,IACJ,GAGJK,IAAAC,EAAA,MAAAC,EAAA,eAAAd,EAAA,iBAAA,CAAA,GAEAe,IAAAF,EAAA,MAAA,CAAAC,EAAA,eAAA,CAAAF,EAAA,KAAA;AAEA,IAAAI;AAAA,MAAAD;AAAA,MACI,CAAAE,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA;AAAA,YAAU;AAAA,UACN;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAStB,UAAAC,IAAAL;AAAA,MAAuC,MAAA;;AAAA,iBAAAM,IAAAL,EAAA,aAAA,gBAAAK,EAAA,cAAA,KAAA;AAAA,UAE7B,YAAAb;AAAA,UACgB,YAAAC;AAAA,UACA,OAAAE;AAAA,UACL,UAAAC;AAAA,QACG,IAAA,CAAA;AAAA;AAAA,IAEb;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dashed-underline.CEaAmjDa.js","sources":["../../src/components/dashed-underline/dashed-underline.vue"],"sourcesContent":["<template>\n    <span\n        ref=\"element\"\n        v-bento-tooltip-directive:[tooltipPosition]=\"tooltipText\"\n        class=\"b-dashed-underline\"\n        tabindex=\"0\"\n        @mouseenter=\"openPopover\"\n        @mouseleave=\"closePopover\"\n        @focus=\"dashedUnderlineOnFocus\"\n        @focusout=\"dashedUnderlineOnFocusOut\"\n    >\n        <span class=\"b-dashed-underline__content\">\n            <slot></slot>\n        </span>\n        <bento-teleport v-if=\"element && hasPopover\" :disabled=\"teleport?.disabled\" :to=\"teleport?.to\">\n            <span v-on=\"computedPopoverContainerEvents\">\n                <bento-popover\n                    :open=\"isOpen\"\n                    :target-element=\"element\"\n                    :position=\"popoverPosition\"\n                    role=\"tooltip\"\n                    :fit-content=\"popoverSize === 'fit-content' || undefined\"\n                    :large=\"popoverSize === 'large' || undefined\"\n                    :small=\"popoverSize === 'small' || undefined\"\n                    :title=\"popoverTitle\"\n                    disable-focus-trap\n                >\n                    <slot name=\"popover-content\">\n                        <bento-typography>\n                            {{ popoverText }}\n                        </bento-typography>\n                    </slot>\n                </bento-popover>\n            </span>\n        </bento-teleport>\n    </span>\n</template>\n\n<script lang=\"ts\" setup>\n    import { computed, ref, useSlots, watch } from 'vue';\n    import { BentoPopover } from '@/components/popover';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives/tooltip/index';\n    import { BentoTypography } from '@/components/typography';\n    import { useHasSlot } from '@/composables';\n    import { BentoTeleport } from '@/internal';\n    import { BentoDashedUnderlineProps } from './dashed-underline.types';\n\n    const CLOSING_POPOVER_DELAY_MS = 200;\n\n    const props = defineProps({\n  popoverText: { default: null },\n  popoverTitle: { default: null },\n  popoverPosition: { default: 'top' },\n  popoverSize: { default: 'fit-content' },\n  teleport: { default: () => ({\n            disabled: true,\n        }) },\n  tooltipText: { default: null },\n  tooltipPosition: { default: 'top' }\n});\n\n    const slots = useSlots();\n    const hasSlot = useHasSlot(slots);\n\n    const element = ref<HTMLSpanElement>(null);\n    const isOpen = ref(false);\n\n    const closingTimeOutId = ref();\n\n    const openPopover = () => {\n        isOpen.value = true;\n        if (closingTimeOutId.value) {\n            clearTimeout(closingTimeOutId.value);\n        }\n    };\n\n    const closePopover = () => {\n        // We want to delay closing for a couple of seconds so\n        // it doesn't flicker if a user hovers over the icon and then inside the popover.\n        const timeOutId = setTimeout(() => {\n            isOpen.value = false;\n        }, CLOSING_POPOVER_DELAY_MS);\n        closingTimeOutId.value = timeOutId;\n    };\n\n    const dashedUnderlineOnFocus = () => {\n        openPopover();\n    };\n\n    /**\n     * Only close popover on blur if the newly focus element is not a child of this element\n     * @param e - the event that contains the newly focused element\n     */\n    const dashedUnderlineOnFocusOut = (e: FocusEvent) => {\n        if (!element.value || !(e?.relatedTarget instanceof Element) || !element.value.contains(e.relatedTarget)) {\n            closePopover();\n        }\n    };\n\n    const hasPopover = computed(() => props.popoverText || hasSlot('popover-content'));\n\n    const shouldShowTooltipPopoverError = computed(() => !props.tooltipText && !hasPopover.value);\n\n    watch(\n        shouldShowTooltipPopoverError,\n        value => {\n            if (value) {\n                throw new Error(\n                    'BentoDashedUnderline requires either a tooltip or a popover to be configured. Check the docs for more info.'\n                );\n            }\n        },\n        { immediate: true }\n    );\n\n    /**\n     * When the popover is teleported, it is no longer a DOM descendant of the trigger element.\n     * We add these event listeners to the popover's container to keep the popover open when\n     * the user moves their mouse or focuses out from the trigger to the popover BUT then mouses over\n     * or focuses on the popover content.\n     */\n    const computedPopoverContainerEvents = computed(() =>\n        props.teleport?.disabled === false\n            ? {\n                  mouseenter: openPopover,\n                  mouseleave: closePopover,\n                  focus: dashedUnderlineOnFocus,\n                  focusout: dashedUnderlineOnFocusOut,\n              }\n            : {}\n    );\n</script>\n\n<script lang=\"ts\">\n    /**\n     * Provides a dashed underline to text, indicating that more information is available on\n     * hover or focus. The additional information is displayed in a tooltip or a popover.\n     *\n     * @example\n     * import { BentoDashedUnderline } from '@adyen/bento-vue2';\n     *\n     * export default {\n     *     components: { BentoDashedUnderline },\n     *     template: `\n     *       <p>\n     *         This is some <bento-dashed-underline tooltip-text=\"A short explanation\">annotated text</bento-dashed-underline>.\n     *       </p>\n     *     `\n     * }\n     */\n    export default {};\n</script>\n\n<style lang=\"scss\" scoped src=\"./dashed-underline.scss\" />\n"],"names":["__default__","CLOSING_POPOVER_DELAY_MS","slots","useSlots","hasSlot","useHasSlot","element","ref","isOpen","closingTimeOutId","openPopover","closePopover","timeOutId","dashedUnderlineOnFocus","dashedUnderlineOnFocusOut","e","hasPopover","computed","props","shouldShowTooltipPopoverError","watch","value","computedPopoverContainerEvents","_a"],"mappings":";;;;;;;;AAsJI,MAAAA,IAAA,CAAA;;;;;;;;;;;;;;;iBAvGAC,IAAA,KAcAC,IAAAC,EAAA,GACAC,IAAAC,EAAAH,CAAA,GAEAI,IAAAC,EAAA,IAAA,GACAC,IAAAD,EAAA,EAAA,GAEAE,IAAAF,EAAA,GAEAG,IAAA,MAAA;AACI,MAAAF,EAAA,QAAA,IACAC,EAAA,SACI,aAAAA,EAAA,KAAA;AAAA,IACJ,GAGJE,IAAA,MAAA;AAGI,YAAAC,IAAA,WAAA,MAAA;AACI,QAAAJ,EAAA,QAAA;AAAA,MAAe,GAAAP,CAAA;AAEnB,MAAAQ,EAAA,QAAAG;AAAA,IAAyB,GAG7BC,IAAA,MAAA;AACI,MAAAH,EAAA;AAAA,IAAY,GAOhBI,IAAA,CAAAC,MAAA;AACI,OAAA,CAAAT,EAAA,SAAA,GAAAS,KAAA,gBAAAA,EAAA,0BAAA,YAAA,CAAAT,EAAA,MAAA,SAAAS,EAAA,aAAA,MACIJ,EAAA;AAAA,IACJ,GAGJK,IAAAC,EAAA,MAAAC,EAAA,eAAAd,EAAA,iBAAA,CAAA,GAEAe,IAAAF,EAAA,MAAA,CAAAC,EAAA,eAAA,CAAAF,EAAA,KAAA;AAEA,IAAAI;AAAA,MAAAD;AAAA,MACI,CAAAE,MAAA;AAEI,YAAAA;AACI,gBAAA,IAAA;AAAA,YAAU;AAAA,UACN;AAAA,MAER;AAAA,MACJ,EAAA,WAAA,GAAA;AAAA,IACkB;AAStB,UAAAC,IAAAL;AAAA,MAAuC,MAAA;;AAAA,iBAAAM,IAAAL,EAAA,aAAA,gBAAAK,EAAA,cAAA,KAAA;AAAA,UAE7B,YAAAb;AAAA,UACgB,YAAAC;AAAA,UACA,OAAAE;AAAA,UACL,UAAAC;AAAA,QACG,IAAA,CAAA;AAAA;AAAA,IAEb;;;;;;;;;;;;;;;;;;;"}