{"version":3,"file":"CopyLink-ea15ca77.js","sources":["../../src/components/share/CopyLink.vue"],"sourcesContent":["<template>\r\n  <button class=\"share-copy__text share-copy__copy unstyled-btn\" @click=\"copyLink\">\r\n    <img class=\"share-copy__link-icon\" alt=\"An icon of a chain link.\" />\r\n    <span v-text=\"shareCopy.copyLinkText\" />\r\n    <div :class=\"['copy-link__toast', addFadeOutClass ? 'fade-out' : '']\" v-if=\"isToastVisible\">Link copied</div>\r\n  </button>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref } from 'vue';\r\nimport { useTimeoutFn } from '@vueuse/core';\r\nimport { useContentStore } from '../../foundation/stores/contentStore';\r\nimport { storeToRefs } from 'pinia';\r\nimport { useAnalytics } from '../../composables/useAnalytics';\r\nimport { AnalyticsEventNames, AnalyticsEvents, AnalyticsEventTypes } from '../../foundation/enums/AnalyticsEvents';\r\n/**\r\n * Data\r\n */\r\n\r\nconst isToastVisible = ref(false);\r\nconst addFadeOutClass = ref(false);\r\nconst contentStore = useContentStore();\r\nconst analytics = useAnalytics();\r\n//Retrieve component content from content store\r\nconst { shareCopy } = storeToRefs(contentStore);\r\n\r\n/**\r\n * Methods\r\n */\r\n\r\nfunction pushToAnalytics(url: string) {\r\n  try {\r\n    analytics.push(AnalyticsEvents.NavigationClickToCopy, {\r\n      eventInfo: {\r\n        navigation: {\r\n          name: AnalyticsEventNames.CopyLink,\r\n          type: AnalyticsEventTypes.Share,\r\n          URL: url,\r\n        },\r\n      },\r\n    });\r\n  } catch (error) {\r\n    console.warn('Fail to push data to analytics', error);\r\n  }\r\n}\r\n\r\n/**\r\n * Copy the url to the clipboard\r\n */\r\nasync function copyLink() {\r\n  const url = window.location.href;\r\n  pushToAnalytics(url);\r\n  await navigator.clipboard.writeText(url).then(showToast);\r\n}\r\n\r\n/**\r\n * Add class to perform the fadeout animation and then hide the element at the end\r\n */\r\nfunction showToast() {\r\n  isToastVisible.value = true;\r\n  addFadeOutClass.value = true;\r\n  useTimeoutFn(hideToast, 3000);\r\n}\r\n\r\nfunction hideToast() {\r\n  isToastVisible.value = false;\r\n}\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.copy-link__toast {\r\n  position: absolute;\r\n  left: 100px;\r\n  top: 0px;\r\n  width: 186px;\r\n  background-color: $racq-teal;\r\n  color: $racq-true-white;\r\n  border-radius: 4px;\r\n  font-size: 1rem;\r\n  text-align: center;\r\n  line-height: 33px;\r\n  cursor: default;\r\n  background-image: url(@/assets/img/tick.svg);\r\n  background-position: calc(50% - 55px);\r\n  background-repeat: no-repeat;\r\n  background-size: 1rem;\r\n}\r\n\r\n.share-copy__copy {\r\n  display: flex;\r\n  align-items: center;\r\n\r\n  .share-copy__link-icon {\r\n    width: 1rem;\r\n    margin-right: 8px;\r\n    content: url(@/assets/img/copy-link.svg);\r\n  }\r\n\r\n  &:hover {\r\n    .share-copy__link-icon {\r\n      content: url(@/assets/img/copy-link-blue.svg);\r\n    }\r\n  }\r\n}\r\n</style>\r\n"],"names":["isToastVisible","ref","addFadeOutClass","contentStore","useContentStore","analytics","useAnalytics","shareCopy","storeToRefs","pushToAnalytics","url","AnalyticsEvents","AnalyticsEventNames","AnalyticsEventTypes","error","copyLink","showToast","useTimeoutFn","hideToast"],"mappings":"mfAmBM,MAAAA,EAAiBC,EAAI,EAAK,EAC1BC,EAAkBD,EAAI,EAAK,EAC3BE,EAAeC,IACfC,EAAYC,IAEZ,CAAE,UAAAC,CAAA,EAAcC,EAAYL,CAAY,EAM9C,SAASM,EAAgBC,EAAa,CAChC,GAAA,CACQL,EAAA,KAAKM,EAAgB,sBAAuB,CACpD,UAAW,CACT,WAAY,CACV,KAAMC,EAAoB,SAC1B,KAAMC,EAAoB,MAC1B,IAAKH,CACP,CACF,CAAA,CACD,QACMI,GACC,QAAA,KAAK,iCAAkCA,CAAK,CACtD,CACF,CAKA,eAAeC,GAAW,CAClB,MAAAL,EAAM,OAAO,SAAS,KAC5BD,EAAgBC,CAAG,EACnB,MAAM,UAAU,UAAU,UAAUA,CAAG,EAAE,KAAKM,CAAS,CACzD,CAKA,SAASA,GAAY,CACnBhB,EAAe,MAAQ,GACvBE,EAAgB,MAAQ,GACxBe,EAAaC,EAAW,GAAI,CAC9B,CAEA,SAASA,GAAY,CACnBlB,EAAe,MAAQ,EACzB"}