{"version":3,"file":"carousel-feature-Bhix4etk.js","sources":["../../../../scripts/components/pages/dynamic/page-parts/carousel-feature.vue"],"sourcesContent":["<template>\r\n    <section v-if=\"slides.length\" :class=\"['container-fluid mt-0 p-0 top-slider', containerClasses]\">\r\n        <CarouselSliderComponent carousel-class=\"carousel-home context-dark\" :carousel-config=\"carouselConfig\" :should-enable-hearts=\"true\" :slides=\"slides\">\r\n            <template #slides=\"{slide}\">                \r\n                <div v-if=\"slide.slideHTML\" class=\"slide\" v-html=\"slide.slideHTML\"></div>\r\n                <div v-else class=\"slide\">\r\n                    <div v-if=\"slide.sponsoredText\" class=\"flag__overlay -left\" :data-flag-title=\"slide.sponsoredText\"></div>\r\n                    <button v-if=\"slide.identifier && slide.heartType\" class=\"wl-heartable -top-right\" :data-wl-type=\"slide.heartType\" :data-wl-id=\"slide.identifier\" :data-wl-title=\"slide.title\"></button>\r\n                    <a :href=\"slide.url\">\r\n                        <img :src=\"slide.imageUrl\" :class=\"['img-fit--cover', getImageCropFocusClass(slide.imageCropFocus)]\" width=\"100%\" :alt=\"slide.title\">\r\n                        <div class=\"-text-container\">\r\n                            <div class=\"-title text-shadow\" v-html=\"slide.title\"></div>\r\n                            <ul v-if=\"slide.categories.length > 0\" class=\"category-links\">\r\n                                <li v-for=\"(category, index) in slide.categories\" :key=\"index\"><a :href=\"getCategoryLink(category)\" class=\"-tag\">{{ category }}</a></li>\r\n                            </ul>\r\n                        </div>\r\n                    </a>\r\n                </div>\r\n            </template>\r\n        </CarouselSliderComponent>\r\n    </section>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n    import { Options } from \"@splidejs/vue-splide\";\r\n    import CarouselSliderComponent from \"components/shared/carousel-slider.vue\";\r\n    import { DotCMSSponsoredCarouselSlideResponse } from \"interfaces/responses/dotcms-responses\";\r\n    import { CarouselSlide } from \"interfaces/carousel\";\r\n    import { getCategoryLink } from \"services/helpers/categories\";\r\n    import { getImageCropFocusClass } from \"services/helpers/images\";\r\n    import { transformCmsFeatureCarouselSlideToCarouselSlide } from \"services/transformers/content-transformers\";\r\n    import { PropType } from \"vue\";\r\n\r\n    const props = defineProps({\r\n        content: {\r\n            type: Array as PropType<DotCMSSponsoredCarouselSlideResponse[]>,\r\n            required: true\r\n        },\r\n        containerClasses: {\r\n            type: String,\r\n            default: \"\"\r\n        }\r\n    });\r\n\r\n    const carouselConfig: Options = {           \r\n        autoplay: true,\r\n        breakpoints: \r\n            {\r\n                1268: {\r\n                    autoplay: false\r\n                }\r\n            }\r\n    };\r\n\r\n\r\n    const slides: CarouselSlide[] = [];\r\n\r\n    props.content.forEach((slide) => {\r\n        const transformedSlide = transformCmsFeatureCarouselSlideToCarouselSlide(slide);\r\n        if (transformedSlide) {\r\n            slides.push(transformedSlide);\r\n        }\r\n    });\r\n</script>\r\n"],"names":["props","__props","carouselConfig","slides","slide","transformedSlide","transformCmsFeatureCarouselSlideToCarouselSlide"],"mappings":"mwBAiCI,MAAMA,EAAQC,EAWRC,EAA0B,CAC5B,SAAU,GACV,YACI,CACI,KAAM,CACF,SAAU,EACd,CACJ,CAAA,EAIFC,EAA0B,CAAA,EAE1B,OAAAH,EAAA,QAAQ,QAASI,GAAU,CACvB,MAAAC,EAAmBC,EAAgDF,CAAK,EAC1EC,GACAF,EAAO,KAAKE,CAAgB,CAChC,CACH"}