{"version":3,"file":"feature-productApplicationBlock-DXvZvx2W.js","sources":["../../../../Coloplast.UI/Features/ProductDeepDive/Views/Blocks/ProductApplicationBlock/ProductCarouselBlock.vue","../../../../Coloplast.UI/Features/ProductDeepDive/Views/Blocks/ProductApplicationBlock/productApplicationBlock-entry.ts"],"sourcesContent":["<script setup>\r\n\timport { ref, computed } from 'vue';\r\n\timport { Swiper, SwiperSlide } from 'swiper/vue/swiper-vue';\r\n\timport { Navigation, Pagination, Keyboard, A11y } from 'swiper';\r\n\timport 'swiper/scss';\r\n\timport { DsIconButton, DsButton, DsText, DsButtonPlay, dsUseIsMobile } from '@coloplast/design-system';\r\n\timport VideoPopup from 'shared/components/VideoElements/videoPopup.vue';\r\n\timport { track_content_engagement } from 'shared/services/tracking/contentTrackingService.ts';\r\n\r\n\tconst props = defineProps({\r\n\t\tvm: {\r\n\t\t\ttype: Object,\r\n\t\t\trequired: true\r\n\t\t},\r\n\t});\r\n\r\n\tconst { isMobile } = dsUseIsMobile();\r\n\r\n\t//refs\r\n\tconst\r\n\t\tslides = ref(props?.vm?.BaseViewModel?.CarouselItems),\r\n\t\tslidesCount = ref(props?.vm?.BaseViewModel?.CarouselItems?.length),\r\n\t\tslidesPerView = ref(0);\r\n\r\n\tconst showNavigation = computed(() => Math.ceil(slidesCount.value / slidesPerView.value) > 1);\r\n\r\n\tfunction initCarousel(swiper) {\r\n\t\tslidesPerView.value = swiper?.params?.slidesPerView;\r\n\t}\r\n\r\n\tfunction onResize(swiper) {\r\n\t\tslidesPerView.value = swiper?.params?.slidesPerView;\r\n\t\tswiper.slideTo(0);\r\n\t}\r\n\r\n\t// Video Carousel logic\r\n\tconst isVideoCarousel = computed(() => props.vm?.BaseViewModel?.CarouselItems?.some(item => item.VideoUrl));\r\n\r\n\tconst videoIsPlaying = ref(false);\r\n\tconst videoUrl = ref(null);\r\n\r\n\tconst setVideoUrl = (url, headline) => {\r\n\t\tvideoUrl.value = url;\r\n\t\tvideoIsPlaying.value = true;\r\n\t\ttrack_content_engagement('video', 'start', headline || 'no_data', url);\r\n\t}\r\n\r\n\t//Swiper settings\r\n\tconst formattedSlidesPerView = computed(() => {\r\n\t\tif (!isVideoCarousel.value) {\r\n\t\t\treturn props.vm.BaseViewModel.CarouselItems?.length > 1 ? 1.1 : 1;\r\n\t\t} else {\r\n\t\t\treturn 2.4;\r\n\t\t}\r\n\t});\r\n\r\n\tconst settings = {\r\n\t\tspeed: 500,\r\n\t\tmousewheel: true,\r\n\t\tkeyboard: true,\r\n\t\twatchOverflow: true,\r\n\t\tbreakpoints: {\r\n\t\t\t768: {\r\n\t\t\t\tslidesPerView: formattedSlidesPerView.value,\r\n\t\t\t\tspaceBetween: 24,\r\n\t\t\t},\r\n\t\t\t0: {\r\n\t\t\t\tslidesPerView: props.vm.BaseViewModel.CarouselItems?.length > 1 ? 1.01 : 1,\r\n\t\t\t\tspaceBetween: 12,\r\n\t\t\t},\r\n\t\t},\r\n\t\tpagination: {\r\n\t\t\tel: `.pagination-${props.vm.BaseViewModel.CurrentBlockId}`,\r\n\t\t\ttype: 'progressbar',\r\n\t\t\tprogressbarFillClass: 'c-content-library-carousel__progressbar--fill',\r\n\t\t},\r\n\t\tnavigation: {\r\n\t\t\tnextEl: `.next-${props.vm.BaseViewModel.CurrentBlockId}`,\r\n\t\t\tprevEl: `.prev-${props.vm.BaseViewModel.CurrentBlockId}`,\r\n\t\t},\r\n\t\tmodules: [Navigation, Pagination, Keyboard, A11y],\r\n\t};\r\n</script>\r\n\r\n<template>\r\n\t<div class=\"c-content-library-carousel__container\">\r\n\t\t<div class=\"c-content-library-carousel__toparea --applicationArea\">\r\n\t\t\t<div class=\"c-content-library-carousel__intro\">\r\n\t\t\t\t<DsText\r\n\t\t\t\t\tv-if=\"vm.CurrentBlock.Headline\"\r\n\t\t\t\t\thtml-element=\"h3\"\r\n\t\t\t\t\ttext-type=\"heading-3xl\"\r\n\t\t\t\t\ttext-style=\"medium\"\r\n\t\t\t\t\tclass=\"c-content-library-carousel__headline\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ vm.CurrentBlock.Headline }}\r\n\t\t\t\t</DsText>\r\n\t\t\t\t<DsText\r\n\t\t\t\t\tv-if=\"vm.CurrentBlock.Description\"\r\n\t\t\t\t\thtml-element=\"div\"\r\n\t\t\t\t\ttext-type=\"body-md\"\r\n\t\t\t\t\ttext-style=\"regular\"\r\n\t\t\t\t\tclass=\"c-content-library-carousel__description\"\r\n\t\t\t\t>\r\n\t\t\t\t\t<span v-html=\"vm.CurrentBlock.Description\"></span>\r\n\t\t\t\t</DsText>\r\n\t\t\t</div>\r\n\t\t\t<div\r\n\t\t\t\tclass=\"c-content-library-carousel__nav --muted\"\r\n\t\t\t\t:class=\"{ '--hidden': !showNavigation }\"\r\n\t\t\t>\r\n\t\t\t\t<DsIconButton\r\n\t\t\t\t\taria-label=\"Previous\"\r\n\t\t\t\t\ticon-name=\"chevron-left\"\r\n\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\tsize=\"md\"\r\n\t\t\t\t\t:class=\"`prev-${vm.BaseViewModel.CurrentBlockId}`\"\r\n\t\t\t\t>\r\n\t\t\t\t</DsIconButton>\r\n\t\t\t\t<DsIconButton\r\n\t\t\t\t\taria-label=\"Next\"\r\n\t\t\t\t\ticon-name=\"chevron-right\"\r\n\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\tsize=\"md\"\r\n\t\t\t\t\t:class=\"`next-${vm.BaseViewModel.CurrentBlockId}`\"\r\n\t\t\t\t>\r\n\t\t\t\t</DsIconButton>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t\t<div\r\n\t\t\tv-show=\"showNavigation\"\r\n\t\t\tclass=\"c-content-library-carousel__progressbar\"\r\n\t\t\t:class=\"`pagination-${vm.BaseViewModel.CurrentBlockId}`\"\r\n\t\t>\r\n\t\t</div>\r\n\t\t<Swiper\r\n\t\t\tv-if=\"slidesCount\"\r\n\t\t\tv-bind=\"settings\"\r\n\t\t\tclass=\"c-content-library-carousel__productappswiper\"\r\n\t\t\t@init=\"initCarousel\"\r\n\t\t\t@resize=\"swiper => onResize(swiper)\"\r\n\t\t>\r\n\t\t\t<SwiperSlide\r\n\t\t\t\tv-for=\"(slide, index) in slides\"\r\n\t\t\t\t:key=\"index\"\r\n\t\t\t>\r\n\t\t\t\t<template v-if=\"!isVideoCarousel\">\r\n\t\t\t\t\t<div class=\"c-content-library-carousel__slidescontainer\">\r\n\t\t\t\t\t\t<picture class=\"c-content-library-carousel__slideimagebox --left\">\r\n\t\t\t\t\t\t\t<source\r\n\t\t\t\t\t\t\t\tmedia=\"(max-width: 767px)\"\r\n\t\t\t\t\t\t\t\t:srcset=\"`${slide.LeftSideImageUrl}?im=Resize=(327,134)`\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t<img\r\n\t\t\t\t\t\t\t\t:src=\"`${slide.LeftSideImageUrl}?im=Resize=(732,400)`\"\r\n\t\t\t\t\t\t\t\t:alt=\"slide.LeftSideImageAltText || slide.Caption\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</picture>\r\n\t\t\t\t\t\t<picture class=\"c-content-library-carousel__slideimagebox --right\">\r\n\t\t\t\t\t\t\t<source\r\n\t\t\t\t\t\t\t\tmedia=\"(max-width: 767px)\"\r\n\t\t\t\t\t\t\t\t:srcset=\"`${slide.RightSideImageUrl}?im=Resize=(327,134)`\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t<img\r\n\t\t\t\t\t\t\t\t:src=\"`${slide.RightSideImageUrl}?im=Resize=(516,400)`\"\r\n\t\t\t\t\t\t\t\t:alt=\"slide.RightSideImageAltText || slide.Caption\"\r\n\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t</picture>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t\t<DsText\r\n\t\t\t\t\t\tv-if=\"slide.Caption\"\r\n\t\t\t\t\t\thtml-element=\"div\"\r\n\t\t\t\t\t\ttext-type=\"body-sm\"\r\n\t\t\t\t\t\ttext-style=\"regular\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<span v-html=\"slide.Caption\" class=\"c-content-library-carousel__slidecaption\"></span>\r\n\t\t\t\t\t</DsText>\r\n\t\t\t\t</template>\r\n\t\t\t\t<template v-if=\"isVideoCarousel\">\r\n\t\t\t\t\t<article\r\n\t\t\t\t\t\tclass=\"c-content-library-carousel__video-card\"\r\n\t\t\t\t\t\t@click=\"setVideoUrl(slide.VideoUrl, slide.Caption)\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\t<figure class=\"c-content-library-carousel__video-figure\">\r\n\t\t\t\t\t\t\t<div class=\"c-content-library-carousel__image-wrapper\">\r\n\t\t\t\t\t\t\t\t<img\r\n\t\t\t\t\t\t\t\t\t:alt=\"slide.Caption\"\r\n\t\t\t\t\t\t\t\t\t:src=\"slide.PreviewImageUrl\"\r\n\t\t\t\t\t\t\t\t\tclass=\"c-content-library-carousel__video-image\"\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t<div class=\"c-content-library-carousel__video-button\">\r\n\t\t\t\t\t\t\t\t\t<DsButtonPlay\r\n\t\t\t\t\t\t\t\t\t\taria-label-play=\"Play video\"\r\n\t\t\t\t\t\t\t\t\t\t:size=\"isMobile ? 'md' : 'lg'\"\r\n\t\t\t\t\t\t\t\t\t\tvariant=\"inverted\"\r\n\t\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t<figcaption class=\"c-content-library-carousel__video-figcaption\">\r\n\t\t\t\t\t\t\t\t<DsText\r\n\t\t\t\t\t\t\t\t\tv-if=\"slide.Caption\"\r\n\t\t\t\t\t\t\t\t\thtml-element=\"h4\"\r\n\t\t\t\t\t\t\t\t\ttext-type=\"heading-xl\"\r\n\t\t\t\t\t\t\t\t\ttext-style=\"medium\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t{{ slide.Caption }}\r\n\t\t\t\t\t\t\t\t</DsText>\r\n\t\t\t\t\t\t\t</figcaption>\r\n\t\t\t\t\t\t</figure>\r\n\t\t\t\t\t</article>\r\n\t\t\t\t</template>\r\n\t\t\t</SwiperSlide>\r\n\t\t</Swiper>\r\n\t\t<div\r\n\t\t\tv-if=\"vm.BaseViewModel.LinkUrl\"\r\n\t\t\tclass=\"c-content-library-carousel__viewall\"\r\n\t\t>\r\n\t\t\t<DsButton\r\n\t\t\t\tvariant=\"link\"\r\n\t\t\t\ticon-end=\"navigate-forward\"\r\n\t\t\t\t:href=\"vm.BaseViewModel.LinkUrl\"\r\n\t\t\t\tsize=\"md\"\r\n\t\t\t\t:disabled=\"null\"\r\n\t\t\t>\r\n\t\t\t\t{{ vm.CurrentBlock.LinkText }}\r\n\t\t\t</DsButton>\r\n\t\t</div>\r\n\t\t<VideoPopup\r\n\t\t\tv-if=\"videoIsPlaying\"\r\n\t\t\t:video-url=\"videoUrl\"\r\n\t\t\t@close-popup=\"videoIsPlaying = false\"\r\n\t\t/>\r\n\t</div>\r\n</template>\r\n","import { createApp } from 'vue';\r\nimport ProductCarouselBlock from './ProductCarouselBlock.vue';\r\nimport 'shared/styles/components/_c-content-library-carousel.scss';\r\n\r\nconst productCarouselBlocks = [...document.querySelectorAll('[data-product-carousel-block]')];\r\n\r\nif (productCarouselBlocks) {\r\n\tproductCarouselBlocks.forEach(productCarouselBlock => {\r\n\t\tconst app = createApp({\r\n\t\t\tname: 'ProductCarouselBlockApp',\r\n\t\t});\r\n\t\tapp.component('product-carousel-block', ProductCarouselBlock);\r\n\t\tapp.mount(productCarouselBlock);\r\n\t});\r\n}"],"names":["props","__props","isMobile","dsUseIsMobile","slides","ref","_b","_a","slidesCount","_e","_d","_c","slidesPerView","showNavigation","computed","initCarousel","swiper","onResize","isVideoCarousel","item","videoIsPlaying","videoUrl","setVideoUrl","url","headline","track_content_engagement","settings","_f","Navigation","Pagination","Keyboard","A11y","productCarouselBlocks","productCarouselBlock","app","createApp","ProductCarouselBlock"],"mappings":"okDASC,MAAMA,EAAQC,EAOR,CAAE,SAAAC,GAAaC,IAIpBC,EAASC,GAAIC,GAAAC,EAAAP,GAAA,YAAAA,EAAO,KAAP,YAAAO,EAAW,gBAAX,YAAAD,EAA0B,aAAa,EACpDE,EAAcH,GAAII,GAAAC,GAAAC,EAAAX,GAAA,YAAAA,EAAO,KAAP,YAAAW,EAAW,gBAAX,YAAAD,EAA0B,gBAA1B,YAAAD,EAAyC,MAAM,EACjEG,EAAgBP,EAAI,CAAC,EAEhBQ,EAAiBC,EAAS,IAAM,KAAK,KAAKN,EAAY,MAAQI,EAAc,KAAK,EAAI,CAAC,EAE5F,SAASG,EAAaC,EAAQ,OAC7BJ,EAAc,OAAQL,EAAAS,GAAA,YAAAA,EAAQ,SAAR,YAAAT,EAAgB,aACtC,CAED,SAASU,EAASD,EAAQ,OACzBJ,EAAc,OAAQL,EAAAS,GAAA,YAAAA,EAAQ,SAAR,YAAAT,EAAgB,cACtCS,EAAO,QAAQ,CAAC,CAChB,CAGD,MAAME,EAAkBJ,EAAS,IAAM,WAAA,OAAAH,GAAAL,GAAAC,EAAAP,EAAM,KAAN,YAAAO,EAAU,gBAAV,YAAAD,EAAyB,gBAAzB,YAAAK,EAAwC,KAAKQ,GAAQA,EAAK,UAAS,EAEpGC,EAAiBf,EAAI,EAAK,EAC1BgB,EAAWhB,EAAI,IAAI,EAEnBiB,EAAc,CAACC,EAAKC,IAAa,CACtCH,EAAS,MAAQE,EACjBH,EAAe,MAAQ,GACvBK,GAAyB,QAAS,QAASD,GAAY,UAAWD,CAAG,CACrE,EAWKG,EAAW,CAChB,MAAO,IACP,WAAY,GACZ,SAAU,GACV,cAAe,GACf,YAAa,CACZ,IAAK,CACJ,cAf4BZ,EAAS,IAAM,OAC7C,OAAKI,EAAgB,MAGb,MAFAX,EAAAP,EAAM,GAAG,cAAc,gBAAvB,YAAAO,EAAsC,QAAS,EAAI,IAAM,CAInE,CAAE,EASwC,MACtC,aAAc,EACd,EACD,EAAG,CACF,gBAAeoB,EAAA3B,EAAM,GAAG,cAAc,gBAAvB,YAAA2B,EAAsC,QAAS,EAAI,KAAO,EACzE,aAAc,EACd,CACD,EACD,WAAY,CACX,GAAI,eAAe3B,EAAM,GAAG,cAAc,cAAc,GACxD,KAAM,cACN,qBAAsB,+CACtB,EACD,WAAY,CACX,OAAQ,SAASA,EAAM,GAAG,cAAc,cAAc,GACtD,OAAQ,SAASA,EAAM,GAAG,cAAc,cAAc,EACtD,EACD,QAAS,CAAC4B,EAAYC,EAAYC,EAAUC,CAAI,CAClD,+6FC7EMC,EAAwB,CAAC,GAAG,SAAS,iBAAiB,+BAA+B,CAAC,EAExFA,GACHA,EAAsB,QAAgCC,GAAA,CACrD,MAAMC,EAAMC,EAAU,CACrB,KAAM,yBAAA,CACN,EACGD,EAAA,UAAU,yBAA0BE,EAAoB,EAC5DF,EAAI,MAAMD,CAAoB,CAAA,CAC9B"}