{"version":3,"file":"feature-consumerTestimonials-9BL1HXJY.js","sources":["../../../../Coloplast.UI/Features/WebShopGenericArticles/ConsumerTestimonials/Views/consumerTestimonialsVideoBlock.vue","../../../../Coloplast.UI/Features/WebShopGenericArticles/ConsumerTestimonials/Views/consumerTestimonialsCarousel.vue","../../../../Coloplast.UI/Features/WebShopGenericArticles/ConsumerTestimonials/Views/consumerTestimonials-entry.ts"],"sourcesContent":["<script setup>\r\nimport { ref, onMounted, onBeforeUnmount } from 'vue';\r\nimport { DsButtonPlay, DsIconButton } from '@coloplast/design-system';\r\nimport SkeletonBox from 'shared/components/skeleton/skeletonBox.vue';\r\nimport { youtubeVideoUrl } from 'shared/services/urlTypeService';\r\nimport axios from 'axios';\r\nimport \"@coloplast/design-system/dist/components/button/ds-button-play.css\";\r\n\r\nconst props = defineProps({\r\n\titem: {\r\n\t\ttype: Object,\r\n\t\trequired: true,\r\n\t},\r\n});\r\n\r\nconst testimonialItem = ref(props.item).value;\r\nconst iframeEl = ref(null);\r\nlet isVideoPlaying = ref(false);\r\nlet isClosing = ref(false);\r\nlet videoUrl = ref(null);\r\nlet playButtonEl = ref(null);\r\n\r\nconst isVimeo = (videoUrl) => {\r\n\treturn videoUrl.indexOf('vimeo.com') !== -1;\r\n}\r\n\r\nfunction getYtEmbedUrl(item) {\r\n\tconst id = item.VideoUrl.indexOf('youtu.be') !== -1;\r\n\tlet videoId = !id ? /watch\\?v=([^$]*)/.exec(item.VideoUrl) : /youtu.be\\/([^$]*)/.exec(item.VideoUrl);\r\n\tif (!videoId) return;\r\n\r\n\tvideoId = videoId[1].split('&');\r\n\tvideoId = videoId[0].split('?');\r\n\r\n\tconst embedUrl =\r\n\t\tyoutubeVideoUrl() +\r\n\t\tvideoId[0] +\r\n\t\t'?enablejsapi=1&autoplay=1&mute=1&modestbranding=1&showinfo=0&rel=0';\r\n\titem.embedUrl = embedUrl;\r\n\r\n\tif (item.ThumbnailImageUrl) {\r\n\t\titem.videoThumbnailUrl = item.ThumbnailImageUrl;\r\n\t\treturn;\r\n\t}\r\n\tconst videoThumbnailUrl = `https://img.youtube.com/vi/${videoId[0]}/mqdefault.jpg`;\r\n\titem.videoThumbnailUrl = videoThumbnailUrl;\r\n}\r\n\r\nasync function getVimeoEmbedUrl(item) {\r\n\tconst id = item.VideoUrl.split('/').pop();\r\n\titem.embedUrl = `https://player.vimeo.com/video/${id}?autoplay=1&api=1`;\r\n\tif (item.ThumbnailImageUrl) {\r\n\t\titem.videoThumbnailUrl = item.ThumbnailImageUrl;\r\n\t\treturn;\r\n\t}\r\n\tconst vimeoJson = `https://vimeo.com/api/oembed.json?url=https://vimeo.com/${id}&format=json`;\r\n\ttry {\r\n\t\tconst response = await axios.get(vimeoJson);\r\n\t\titem.videoThumbnailUrl = response?.data?.thumbnail_url;\r\n\t} catch (error) {\r\n\t\tconsole.log(error);\r\n\t}\r\n}\r\n\r\nfunction getVideo() {\r\n\tif (!testimonialItem.VideoUrl) return;\r\n\tif (isVimeo(testimonialItem.VideoUrl)) {\r\n\t\tgetVimeoEmbedUrl(testimonialItem);\r\n\t} else {\r\n\t\tgetYtEmbedUrl(testimonialItem);\r\n\t}\r\n}\r\n\r\nconst closePopup = () => {\r\n\tisClosing.value = true;\r\n\tdocument.body.classList.remove('h-overflow-y-hidden');\r\n\tsetTimeout(() => {\r\n\t\tvideoUrl.value = null;\r\n\t\tisVideoPlaying.value = false;\r\n\t\tisClosing.value = false;\r\n\t\tif (playButtonEl.value) playButtonEl.value.$el.focus();\r\n\t}, 200);\r\n};\r\n\r\nfunction playVideo(url) {\r\n\tvideoUrl.value = url;\r\n\tisVideoPlaying.value = true;\r\n\tdocument.body.classList.add('h-overflow-y-hidden');\r\n};\r\n\r\nfunction loadScript() {\r\n\tconst tag = document.createElement('script');\r\n\ttag.src = 'https://www.youtube.com/iframe_api';\r\n\r\n\tconst firstScriptTag = document.getElementsByTagName('script')[0];\r\n\tfirstScriptTag.parentNode.insertBefore(tag, firstScriptTag);\r\n}\r\n\r\nfunction onKeydown(event) {\r\n\tif (event.key == 'Escape') {\r\n\t\tclosePopup();\r\n\t}\r\n}\r\n\r\nfunction moveFocusToIframe(e) {\r\n\tif(e.key !== \"Tab\" || e.shiftKey) return;\r\n\te.preventDefault();\r\n\r\n\tfocusIframe();\r\n}\r\n\r\nfunction focusIframe() {\r\n\tif (iframeEl.value && iframeEl.value.contentWindow) {\r\n\t\tiframeEl.value.contentWindow.focus();\r\n\t}\r\n}\r\n\r\nonMounted(() => {\r\n\tgetVideo();\r\n\tif ( document.querySelectorAll('script[src=\"https://www.youtube.com/iframe_api\"]').length == 0) {\r\n\t\tloadScript();\r\n\t}\r\n\r\n\tdocument.addEventListener('keydown', onKeydown);\r\n});\r\n\r\nonBeforeUnmount(() => {\r\n\tdocument.removeEventListener('keydown', onKeydown);\r\n});\r\n\r\n</script>\r\n\r\n<template>\r\n\t<!-- testimonialItem {{ testimonialItem }} -->\r\n\t<div\r\n\t\tv-if=\"testimonialItem?.embedUrl\"\r\n\t\tv-on:click.prevent=\"playVideo(testimonialItem.embedUrl)\"\r\n\t\tclass=\"slide-video-placeholder c-consumer-testimonials__slide-picture\"\r\n\t\tdata-testid=\"video-placeholder\"\r\n\t>\r\n\t\t<img\r\n\t\t\t:src=\"testimonialItem.videoThumbnailUrl\"\r\n\t\t\tloading=\"lazy\"\r\n\t\t\t:alt=\"testimonialItem.Caption\"\r\n\t\t\tdata-testid=\"placeholder-image\"\r\n\t\t/>\r\n\t\t<span\r\n\t\t\tclass=\"slide-play-button\"\r\n\t\t>\r\n\t\t\t<DsButtonPlay\r\n\t\t\t\tref=\"playButtonEl\"\r\n\t\t\t\tariaLabelPlay=\"Play video\"\r\n\t\t\t\tsize=\"md\">\r\n\t\t\t</DsButtonPlay>\r\n\t\t</span>\r\n\t</div>\r\n\r\n\t<div v-else data-testid=\"video-placeholder\">\r\n\t\t<SkeletonBox height=\"100%\" />\r\n\t</div>\r\n\r\n\t<Teleport to=\"body\">\r\n\t\t<div\r\n\t\t\tclass=\"c-consumer-testimonials__video-player\"\r\n\t\t\t:class=\"{ closing: isClosing }\"\r\n\t\t\tv-on:click.prevent=\"closePopup\"\r\n\t\t\tdata-testid=\"testimonials-video-player\"\r\n\t\t\tv-if=\"isVideoPlaying\"\r\n\t\t>\r\n\t\t\t<div class=\"c-consumer-testimonials__video-player-wrapper\">\r\n\t\t\t\t<iframe\r\n\t\t\t\t\tref=\"iframeEl\"\r\n\t\t\t\t\tclass=\"c-video-card__iframe\"\r\n\t\t\t\t\ttitle=\"\"\r\n\t\t\t\t\t:allow=\"'autoplay; fullscreen; accelerometer; encrypted-media; gyroscope; picture-in-picture'\"\r\n\t\t\t\t\t:src=\"videoUrl\"\r\n\t\t\t\t\tdata-testid=\"video-player\"\r\n\t\t\t\t\tv-on:load=\"focusIframe\"\r\n\t\t\t\t>\r\n\t\t\t\t</iframe>\r\n\t\t\t\t<span class=\"c-consumer-testimonials__video-player-close-button\">\r\n\t\t\t\t\t<DsIconButton\r\n\t\t\t\t\t\ticon-name=\"close\"\r\n\t\t\t\t\t\tv-on:click.prevent=\"closePopup\"\r\n\t\t\t\t\t\t@keydown=\"moveFocusToIframe\"\r\n\t\t\t\t\t\tdata-testid=\"close-video\"\r\n\t\t\t\t\t/>\r\n\t\t\t\t</span>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</Teleport>\r\n\r\n</template>\r\n\r\n<style lang=\"scss\" scoped>\r\n.slide-video-placeholder {\r\n\tcursor: pointer;\r\n}\r\n.slide-play-button {\r\n\tposition: absolute;\r\n\ttop: 50%;\r\n\tleft: 50%;\r\n\ttransform: translate(-50%, -50%);\r\n\topacity: 0.9;\r\n}\r\n</style>\r\n","<template>\r\n\t<DsCarousel\r\n\t\t:ariaLabelNext=\"nextItemsAriaLabel\"\r\n\t\t:ariaLabelPrev=\"previousItemsAriaLabel\"\r\n\t\tscrollMode=\"view\"\r\n\t\tdata-testid=\"testimonial-carousel\"\r\n\t\t:key=\"items?.BaseViewModel.length\"\r\n\t\t>\r\n\t\t<template #header>\r\n\t\t\t<h2 class=\"ds-carousel__title ds-text-heading-3xl ds-text--regular\">{{headline}}</h2>\r\n\t\t\t<p v-if=\"description\" class=\"ds-carousel__description ds-text-body-md\" v-html=\"description\" />\r\n\t\t</template>\r\n\r\n\t\t<div v-for=\"(item, index) in items.BaseViewModel\" :key=\"`item_${index}`\" class=\"c-consumer-testimonials__slide\" data-testid=\"testimonial\">\r\n\t\t\t<figure>\r\n\t\t\t\t<template v-if=\"isVideoBlock\">\r\n\t\t\t\t\t<!-- {{ item }} -->\r\n\t\t\t\t\t<consumerTestimonialsVideoBlock :item=\"item\" />\r\n\t\t\t\t</template>\r\n\r\n\t\t\t\t<template v-else>\r\n\t\t\t\t\t<div class=\"c-consumer-testimonials__slide-picture\">\r\n\t\t\t\t\t\t<img\r\n\t\t\t\t\t\t\tv-if=\"item.ImageUrl\"\r\n\t\t\t\t\t\t\t:src=\"item.ImageUrl\"\r\n\t\t\t\t\t\t\tloading=\"lazy\"\r\n\t\t\t\t\t\t\t:alt=\"item.Caption\"/>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</template>\r\n\r\n\t\t\t\t<figcaption class=\"c-consumer-testimonials__slide-caption\">\r\n\t\t\t\t\t<DsText html-element=\"div\" text-style=\"regular\" text-type=\"body-xs\" class=\"color-muted\">{{ item.Caption }}</DsText>\r\n\t\t\t\t\t<blockquote class=\"color-muted\">\r\n\t\t\t\t\t\t<DsText html-element=\"div\" text-style=\"medium\" text-type=\"heading-lg\">{{ item.Quote }}</DsText>\r\n\t\t\t\t\t</blockquote>\r\n\t\t\t\t</figcaption>\r\n\t\t\t</figure>\r\n\t\t</div>\r\n\t</DsCarousel>\r\n</template>\r\n\r\n<script setup>\r\nimport { DsCarousel, DsText } from \"@coloplast/design-system\";\r\nimport \"@coloplast/design-system/dist/components/carousel/ds-carousel.css\";\r\nimport { computed } from 'vue';\r\nimport consumerTestimonialsVideoBlock from \"./consumerTestimonialsVideoBlock.vue\"\r\n\r\nconst props = defineProps({\r\n\theadline: {\r\n\t\ttype: String,\r\n\t\trequired: true,\r\n\t},\r\n\tdescription: {\r\n\t\ttype: String,\r\n\t},\r\n\titems: {\r\n\t\ttype: Object\r\n\t},\r\n\tnextItemsAriaLabel: {\r\n\t\ttype: String,\r\n\t\tdefault: \"Scroll to the next items\"\r\n\t},\r\n\tpreviousItemsAriaLabel: {\r\n\t\ttype: String,\r\n\t\tdefault: \"Scroll to the previous items\"\r\n\t}\r\n});\r\n\r\nconst isVideoBlock = computed(() => !!props.items?.BaseViewModel[0].VideoUrl);\r\n\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n:deep .ds-carousel__scroll {\r\n    position: relative;\r\n}\r\n</style>\r\n","import { createApp } from 'vue';\r\n\r\nimport ConsumerTestimonialsCarousel from './consumerTestimonialsCarousel.vue';\r\n\r\nimport \"./consumerTestimonials.scss\";\r\n\r\nconst consumerTestimonialsBlockContainers = document.querySelectorAll(\r\n\t\"[data-feature='consumerTestimonials']\"\r\n);\r\n\r\n// Mount Vue components\r\nconsumerTestimonialsBlockContainers.forEach((consumerTestimonialsBlockContainer) => {\r\n\tconst elements: NodeList = consumerTestimonialsBlockContainer.querySelectorAll(\r\n\t\t'[data-consumer-testimonials-content-block]'\r\n\t);\r\n\tif (elements.length) {\r\n\t\telements.forEach((element) => {\r\n\t\t\tconst htmlElement: HTMLElement = element as HTMLElement;\r\n\r\n\t\t\tconst app = createApp({\r\n\t\t\t\tname: htmlElement?.dataset?.blockName,\r\n\t\t\t});\r\n\r\n\t\t\tapp.component('consumer-testimonials-carousel', ConsumerTestimonialsCarousel);\r\n\t\t\tapp.mount(htmlElement);\r\n\t\t});\r\n\t}\r\n});"],"names":["testimonialItem","ref","__props","iframeEl","isVideoPlaying","isClosing","videoUrl","playButtonEl","isVimeo","getYtEmbedUrl","item","videoId","embedUrl","youtubeVideoUrl","videoThumbnailUrl","getVimeoEmbedUrl","id","vimeoJson","response","axios","_a","error","getVideo","closePopup","playVideo","url","loadScript","tag","firstScriptTag","onKeydown","event","moveFocusToIframe","focusIframe","onMounted","onBeforeUnmount","props","isVideoBlock","computed","consumerTestimonialsBlockContainers","consumerTestimonialsBlockContainer","elements","element","htmlElement","app","createApp","ConsumerTestimonialsCarousel"],"mappings":"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"}