@adyen/bento-vue3 1.83.1 → 1.84.0

package/dist/chunks/{copy.Cg-VyVQ4.js.map → copy.xg9ElNxd.js.map}

@@ -1 +1 @@
-{"version":3,"file":"copy.Cg-VyVQ4.js","sources":["../../../vue2/src/components/internal/copy/copy.types.ts","../../../ui-assets/icons-16/dist/vue/copy.vue","../../../vue2/src/components/internal/copy/copy.vue"],"sourcesContent":["import { type PopperContainerPosition } from '@/components/popper-container';\nimport type { BentoButton } from '@/components/button';\n\nexport enum CopyTooltipState {\n    DEFAULT = 'default',\n    COPYING = 'copying',\n    ERROR = 'error',\n}\n\ntype ButtonProps = InstanceType<typeof BentoButton>['$props'];\nexport interface BentoCopyButtonProps {\n    variant?: ButtonProps['variant'];\n    condensed?: ButtonProps['condensed'];\n    disabled?: ButtonProps['disabled'];\n}\n\nexport interface BentoCopyProps {\n    /**\n     * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.\n     */\n    button?: BentoCopyButtonProps;\n    /**\n     * Sets the button text of the copy button.\n     */\n    buttonText?: string;\n    /**\n     * Defines the string that will get copied to the clipboard\n     */\n    text: string;\n    /**\n     * Position the tooltip should take if space is available. Defaults to 'top'\n     */\n    tooltipPosition?: PopperContainerPosition;\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=\"M8 1.25C9.51878 1.25 10.75 2.48122 10.75 4V5.25H12C13.5188 5.25 14.75 6.48122 14.75 8V12C14.75 13.5188 13.5188 14.75 12 14.75H8C6.48122 14.75 5.25 13.5188 5.25 12V10.75H4C2.48122 10.75 1.25 9.51878 1.25 8V4C1.25 2.48122 2.48122 1.25 4 1.25H8ZM8 6.75C7.30964 6.75 6.75 7.30964 6.75 8V12C6.75 12.6904 7.30964 13.25 8 13.25H12C12.6904 13.25 13.25 12.6904 13.25 12V8C13.25 7.30964 12.6904 6.75 12 6.75H8ZM4 2.75C3.30964 2.75 2.75 3.30964 2.75 4V8C2.75 8.69036 3.30964 9.25 4 9.25H5.25V8C5.25 6.48122 6.48122 5.25 8 5.25H9.25V4C9.25 3.30964 8.69036 2.75 8 2.75H4Z\"/></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 setup lang=\"ts\">\n    import { computed, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { PopperContainerPosition } from '@/components/popper-container';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { type BentoCopyButtonProps, type BentoCopyProps, 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    const emit = defineEmits<{\n        /**\n         * Emitted when the copy button is clicked.\n         */\n        (e: 'click', event: MouseEvent): void;\n    }>();\n\n    const props = withDefaults(defineProps<BentoCopyProps>(), {\n        button: () => ({ variant: 'tertiary' }) as BentoCopyButtonProps,\n        buttonText: undefined,\n        tooltipPosition: PopperContainerPosition.TOP,\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const copyState = ref<CopyTooltipState>(CopyTooltipState.DEFAULT);\n\n    const showScreenReaderAlert = ref(false);\n    const onClickCopy = async (event: MouseEvent) => {\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        emit('click', event);\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            default:\n                return t('copy');\n        }\n    });\n\n    const svgTitle = computed(() => (props.buttonText ? undefined : t('copy')));\n</script>\n\n<script lang=\"ts\">\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 {\n        i18n: { messages },\n        name: 'copy',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./copy.scss\" />\n"],"names":["CopyTooltipState","CopyTooltipState2","uuid","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","__default__","messages","emit","__emit","props","__props","t","useI18n","copyState","ref","showScreenReaderAlert","onClickCopy","event","resetText","copyText","computed","svgTitle"],"mappings":";;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,UAAA,WACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA;ACIR,IAAAE,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;;AAVR,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;gFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE8M,MAAA;AAAA,MAAe,GAAA;AAAA;;;;;;;;;;;;;;;;;;;;;GC8FzNC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;AAjEA,UAAAC,IAAAC,GAOAC,IAAAC,GAMA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAN,EAAA,CAAA,GACAO,IAAAC,EAAAjB,EAAA,OAAA,GAEAkB,IAAAD,EAAA,EAAA,GACAE,IAAA,OAAAC,MAAA;AACI,UAAA;AACI,cAAA,UAAA,UAAA,UAAAR,EAAA,IAAA,GACAI,EAAA,QAAAhB,EAAA,SACAkB,EAAA,QAAA;AAAA,MAA8B,QAAA;AAE9B,QAAAF,EAAA,QAAAhB,EAAA;AAAA,MAAmC;AAGvC,MAAAU,EAAA,SAAAU,CAAA;AAAA,IAAmB,GAGvBC,IAAA,MAAA;AACI,MAAAL,EAAA,QAAAhB,EAAA,SACAkB,EAAA,QAAA;AAAA,IAA8B,GAGlCI,IAAAC,EAAA,MAAA;AACI,cAAAP,EAAA,OAAA;AAAA,QAAyB,KAAAhB,EAAA;AAEjB,iBAAAc,EAAA,QAAA;AAAA,QAAiB,KAAAd,EAAA;AAEjB,iBAAAc,EAAA,YAAA;AAAA,QAAqB;AAErB,iBAAAA,EAAA,MAAA;AAAA,MAAe;AAAA,IACvB,CAAA,GAGJU,IAAAD,EAAA,MAAAX,EAAA,aAAA,SAAAE,EAAA,MAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"copy.xg9ElNxd.js","sources":["../../../vue2/src/components/internal/copy/copy.types.ts","../../../ui-assets/icons-16/dist/vue/copy.vue","../../../vue2/src/components/internal/copy/copy.vue"],"sourcesContent":["import { type PopperContainerPosition } from '@/components/popper-container';\nimport type { BentoButton } from '@/components/button';\n\nexport enum CopyTooltipState {\n    DEFAULT = 'default',\n    COPYING = 'copying',\n    ERROR = 'error',\n}\n\ntype ButtonProps = InstanceType<typeof BentoButton>['$props'];\nexport interface BentoCopyButtonProps {\n    variant?: ButtonProps['variant'];\n    condensed?: ButtonProps['condensed'];\n    disabled?: ButtonProps['disabled'];\n}\n\nexport interface BentoCopyProps {\n    /**\n     * Object containing props to change the menu button appearance. Accepts the same props present in BentoButton.\n     */\n    button?: BentoCopyButtonProps;\n    /**\n     * Sets the button text of the copy button.\n     */\n    buttonText?: string;\n    /**\n     * Defines the string that will get copied to the clipboard\n     */\n    text: string;\n    /**\n     * Position the tooltip should take if space is available. Defaults to 'top'\n     */\n    tooltipPosition?: PopperContainerPosition;\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=\"M8 1.25C9.51878 1.25 10.75 2.48122 10.75 4V5.25H12C13.5188 5.25 14.75 6.48122 14.75 8V12C14.75 13.5188 13.5188 14.75 12 14.75H8C6.48122 14.75 5.25 13.5188 5.25 12V10.75H4C2.48122 10.75 1.25 9.51878 1.25 8V4C1.25 2.48122 2.48122 1.25 4 1.25H8ZM8 6.75C7.30964 6.75 6.75 7.30964 6.75 8V12C6.75 12.6904 7.30964 13.25 8 13.25H12C12.6904 13.25 13.25 12.6904 13.25 12V8C13.25 7.30964 12.6904 6.75 12 6.75H8ZM4 2.75C3.30964 2.75 2.75 3.30964 2.75 4V8C2.75 8.69036 3.30964 9.25 4 9.25H5.25V8C5.25 6.48122 6.48122 5.25 8 5.25H9.25V4C9.25 3.30964 8.69036 2.75 8 2.75H4Z\"/></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 setup lang=\"ts\">\n    import { computed, ref } from 'vue';\n    import { BentoButton } from '@/components/button';\n    import { PopperContainerPosition } from '@/components/popper-container';\n    import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives';\n    import { useI18n } from '@/utils/ts/i18n';\n    import { type BentoCopyButtonProps, type BentoCopyProps, 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    const emit = defineEmits<{\n        /**\n         * Emitted when the copy button is clicked.\n         */\n        (e: 'click', event: MouseEvent): void;\n    }>();\n\n    const props = withDefaults(defineProps<BentoCopyProps>(), {\n        button: () => ({ variant: 'tertiary' }) as BentoCopyButtonProps,\n        buttonText: undefined,\n        tooltipPosition: PopperContainerPosition.TOP,\n    });\n\n    const { t } = useI18n<{ message: MessageSchema }>({ messages });\n    const copyState = ref<CopyTooltipState>(CopyTooltipState.DEFAULT);\n\n    const showScreenReaderAlert = ref(false);\n    const onClickCopy = async (event: MouseEvent) => {\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        emit('click', event);\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            default:\n                return t('copy');\n        }\n    });\n\n    const svgTitle = computed(() => (props.buttonText ? undefined : t('copy')));\n</script>\n\n<script lang=\"ts\">\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 {\n        i18n: { messages },\n        name: 'copy',\n    };\n</script>\n\n<style lang=\"scss\" scoped src=\"./copy.scss\" />\n"],"names":["CopyTooltipState","CopyTooltipState2","uuid","openBlock","createElementBlock","mergeProps","_ctx","createCommentVNode","__default__","messages","emit","__emit","props","__props","t","useI18n","copyState","ref","showScreenReaderAlert","onClickCopy","event","resetText","copyText","computed","svgTitle"],"mappings":";;;;;;;;AAGY,IAAAA,IAAA,kBAAAC,OACRA,EAAA,UAAA,WACAA,EAAA,UAAA,WACAA,EAAA,QAAA,SAHQA,IAAAD,KAAA,CAAA,CAAA;ACIR,IAAAE,IAAA;;EAGI,eAAA;8BAEIA,KAAA;AAAA;;;AAVR,SAAAC,EAAA,GAAAC,EAAA,OAAAC,EAAA,EAAA,MAAA,MAAA,GAAAC,EAAA,QAAA;AAAA,IAAgC,OAAA;AAAA,IAA2B,OAAA;AAAA,IAAmC,OAAA;AAAA,IAAW,QAAA;AAAA,IAAY,MAAA;AAAA;gFAFzHC,EAAA,IAAA,EAAA;AAAA;MAE8M,MAAA;AAAA,MAAe,GAAA;AAAA;;;;;;;;;;;;;;;;;;;;;;;GC8FzNC,IAAA;AAAA,EAAe,MAAA,EAAA,UAAAC,EAAA;AAAA,EACM,MAAA;AAErB;;;;;;;;;;AAjEA,UAAAC,IAAAC,GAOAC,IAAAC,GAMA,EAAA,GAAAC,EAAA,IAAAC,EAAA,EAAA,UAAAN,EAAA,CAAA,GACAO,IAAAC,EAAAjB,EAAA,OAAA,GAEAkB,IAAAD,EAAA,EAAA,GACAE,IAAA,OAAAC,MAAA;AACI,UAAA;AACI,cAAA,UAAA,UAAA,UAAAR,EAAA,IAAA,GACAI,EAAA,QAAAhB,EAAA,SACAkB,EAAA,QAAA;AAAA,MAA8B,QAAA;AAE9B,QAAAF,EAAA,QAAAhB,EAAA;AAAA,MAAmC;AAGvC,MAAAU,EAAA,SAAAU,CAAA;AAAA,IAAmB,GAGvBC,IAAA,MAAA;AACI,MAAAL,EAAA,QAAAhB,EAAA,SACAkB,EAAA,QAAA;AAAA,IAA8B,GAGlCI,IAAAC,EAAA,MAAA;AACI,cAAAP,EAAA,OAAA;AAAA,QAAyB,KAAAhB,EAAA;AAEjB,iBAAAc,EAAA,QAAA;AAAA,QAAiB,KAAAd,EAAA;AAEjB,iBAAAc,EAAA,YAAA;AAAA,QAAqB;AAErB,iBAAAA,EAAA,MAAA;AAAA,MAAe;AAAA,IACvB,CAAA,GAGJU,IAAAD,EAAA,MAAAX,EAAA,aAAA,SAAAE,EAAA,MAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}