{"version":3,"file":"Dg5Me7EF.js","sources":["../../../../storyblok/EPCNewsreelCarouselBlock.vue"],"sourcesContent":["<script lang=\"ts\" setup> \n\n    const props = defineProps({ \n        blok: Object \n    })\n\n    const richtext = (value:any) => renderRichText(value)\n\n    const { fetchArticles, articles } = useNews()\n    await fetchArticles(props?.blok?.categories, 6, 1)\n\n    const carousel = ref(null)\n\n    const settings = reactive({\n        settings: {\n            itemsToShow: 1.25,\n            snapAlign: 'center',\n            wrapAround: true\n        }\n    })\n\n    const data = reactive({\n        breakpoints: {\n            320: {\n                itemsToShow: 1.25,\n                snapAlign: 'center',\n                wrapAround: true\n            },\n            640: {\n                itemsToShow: 2.25,\n                snapAlign: 'start',\n                wrapAround: true\n            },\n            768: {\n                itemsToShow: 3.25,\n                snapAlign: 'start',\n                wrapAround: false\n            },\n            1000: {\n                itemsToShow: 4,\n                snapAlign: 'start',\n                wrapAround: false\n            },\n            1024: {\n                itemsToShow: 4,\n                snapAlign: 'start',\n                wrapAround: false\n            },\n            1280: {\n                itemsToShow: 4,\n                snapAlign: 'start',\n                wrapAround: false\n            },\n            1300: {\n                itemsToShow: 4,\n                snapAlign: 'start',\n                wrapAround: false\n            },\n            1400: {\n                itemsToShow: 4,\n                snapAlign: 'start',\n                wrapAround: false\n            },\n            1536: {\n                itemsToShow: 4,\n                snapAlign: 'start',\n                wrapAround: false\n            },\n            1620: {\n                itemsToShow: 4,\n                snapAlign: 'start',\n                wrapAround: false\n            },\n            1800: {\n                itemsToShow: 4,\n                snapAlign: 'start',\n                wrapAround: false\n            }\n        }\n    })\n\n</script>\n\n<template>\n   <div v-editable=\"blok\" class=\"news-carousel | grid grid-col-1\" :class=\"[blok?.theme || 'dark']\">\n        <div class=\"flex flex-col gap-6 lg:gap-8\">\n      \n            <div v-if=\"blok?.heading || blok?.subheading || blok?.richtext && richtext(blok?.richtext)\" class=\"flex flex-col gap-4 justify-center items-center text-center max-w-[900px] mx-auto\">\n                <div v-if=\"blok?.heading || blok?.subheading\" class=\"flex flex-col gap-2 justify-center items-center text-center\">\n                    <component\n                        v-if=\"blok && blok?.heading\" \n                        :is=\"`headings-${blok?.heading_tag || 'h3'}`\" \n                        :value=\"blok?.heading\"\n                        :classes=\"blok?.heading_style || 'h2'\" \n                    />\n                    <component\n                        v-if=\"blok && blok?.subheading\" \n                        :is=\"`headings-${blok?.subheading_tag || 'h4'}`\" \n                        :value=\"blok?.subheading\"\n                        :classes=\"blok?.subheading_style || 'h3'\"\n                    />\n                </div>\n                <div v-if=\"blok?.richtext && richtext(blok?.richtext)\" v-html=\"richtext(blok?.richtext)\" class=\"flex flex-col gap-2 | font-hass-text text-p_mobile md:text-p_tablet lg:text-p_desktop font-normal text-white-50/75 dark:text-nevada-500\"/>\n            </div>\n\n            <div v-if=\"articles && articles.length > 0\">\n                <Carousel ref=\"carousel\" v-bind=\"settings\" :breakpoints=\"data.breakpoints\">\n                    <Slide v-for=\"article in articles\" :key=\"article.uuid\" v-editable=\"article\" class=\"w-full lg:w-auto lg:max-w-[25%]\" aria-hidden=\"false\">\n                        <div class=\"card | w-full h-full m-0 px-1\" aria-hidden=\"false\">\n                            <div class=\"card--shadow | relative flex flex-col w-full h-full justify-start items-end text-left bg-white-50 rounded overflow-hidden transition-all duration-200 ease-in-out\">\n                                <div class=\"aspect-[16/9] w-full\">\n                                    <NuxtImg\n                                        v-if=\"article?.content?.card_image && article?.content?.card_image?.filename\"\n                                        provider=\"storyblok\"\n                                        width=\"860\"\n                                        height=\"480\"\n                                        quality=\"75\"\n                                        fit=\"in\"\n                                        placeholder\n                                        :src=\"article?.content?.card_image?.filename\"\n                                        :alt=\"article?.content?.card_image?.alt || article?.content?.card_image?.title || article?.content?.card_heading || article?.name || '#'\" \n                                        loading=\"lazy\"\n                                        class=\"aspect-[16/9] w-full h-full object-center object-cover\"\n                                    />\n                                </div>\n                                <div class=\"relative flex flex-col justify-start items-start gap-4 w-full h-full m-0 p-4 bg-white-50 transition-all duration-200 ease-in-out group hover:-translate-y-2\">\n                                    <h4 v-if=\"article?.content?.card_heading || article.name\" class=\"font-hass-display text-h7_mobile md:text-h7_tablet lg:text-h7_desktop font-medium text-elephant-950 line-clamp-2\">\n                                        {{ article?.content?.card_heading || article.name }}\n                                    </h4>\n                                    <ul class=\"flex flex-wrap gap-2 z-20 mt-auto\">\n                                        <li v-for=\"category in article.content.categories\" :key=\"category._uid\">\n                                            <NuxtLink :to=\"`/${category.full_slug}`\" :title=\"category.name\" :aria-label=\"category.name\" class=\"z-20 mt-auto font-hass-text text-pxs_mobile md:text-pxs_tablet lg:text-pxs_desktop font-roman text-nevada-500\">\n                                                {{ category.name }}\n                                            </NuxtLink> \n                                        </li>\n                                    </ul>\n                                    <span class=\"icon | absolute bottom-1 right-3 ml-auto w-4 h-4 transition-all duration-200 ease-in-out opacity-0 group-hover:opacity-100\"></span>\n                                    <NuxtLink :to=\"`/${article.full_slug}`\" :title=\"article?.content?.card_heading || article.name\" class=\"absolute top-0 left-0 w-full h-full z-10\"/>\n                                </div>\n                            </div>\n                        </div>\n                    </Slide>\n                </Carousel>\n            </div>\n\n            <nav v-if=\"articles && articles.length > 0\" class=\"flex flex-row gap-1 justify-center items-center\">\n                <button @click=\"carousel.prev()\" class=\"prev | w-4 h-4\" title=\"Previous\" aria-label=\"Previous\"></button>\n                <button @click=\"carousel.next()\" class=\"next | w-4 h-4\" title=\"Next\" aria-label=\"Next\"></button>\n            </nav>\n\n            <div v-if=\"blok?.buttons && blok?.buttons.length > 0\" class=\"flex flex-wrap gap-2 justify-center\">\n                <StoryblokComponent v-for=\"button in blok.buttons\" :key=\"button._uid\" :blok=\"button\" />\n            </div>\n            \n        </div>\n   </div>\n</template>\n\n<style lang=\"scss\">\n    .news-carousel {\n\n        .carousel {\n\n            @apply w-[calc(100%_+_16px)] -translate-x-[8px] cursor-grab;\n\n            &.is-dragging {\n                @apply cursor-grabbing\n            }\n\n            .carousel__viewport {\n                @apply overflow-visible touch-auto;\n            }\n\n            .card--shadow {\n                @apply transition-all duration-200 ease-in-out;\n\n                &:hover {\n                    box-shadow: 0px 4px 16px rgba(17,17,26,0.05), 0px 8px 32px rgba(17,17,26,0.05);\n                }\n            }\n\n            .icon {\n                @apply bg-contain bg-center;\n                background-image: url(\"data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='30px' height='30px' viewBox='0 0 30 30' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EIcon%3C/title%3E%3Cdefs%3E%3Cpath d='M15,0 C23.2842712,0 30,6.71572875 30,15 C30,23.2842712 23.2842712,30 15,30 C6.71572875,30 0,23.2842712 0,15 C0,6.71572875 6.71572875,0 15,0 Z M15,2.0348186 C7.83952804,2.0348186 2.0348186,7.83952804 2.0348186,15 C2.0348186,22.160472 7.83952804,27.9651814 15,27.9651814 C22.160472,27.9651814 27.9651814,22.160472 27.9651814,15 C27.9651814,7.83952804 22.160472,2.0348186 15,2.0348186 Z M13.1907614,7.87616967 L13.2866209,7.95692746 L20.6531795,14.9884701 L13.2981455,22.2388572 C12.9058866,22.625535 12.2744337,22.6210107 11.8877559,22.2287518 C11.5308225,21.8666667 11.5072211,21.3007713 11.8142244,20.9117204 L11.8978612,20.8183622 L17.7882288,15.0116854 L11.9093858,9.3997806 C11.5416016,9.04872246 11.5007943,8.48380704 11.795819,8.08559598 L11.8765768,7.98973645 C12.2276349,7.62195224 12.7925503,7.581145 13.1907614,7.87616967 Z' id='path-1'%3E%3C/path%3E%3C/defs%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Components/Blog-Snippets' transform='translate(-1224.000000, -683.000000)'%3E%3Cg id='Cards' transform='translate(0.031661, 314.000000)'%3E%3Cg id='Card' transform='translate(806.888889, 20.000000)'%3E%3Cg id='Icon' transform='translate(417.079450, 349.000000)'%3E%3Cmask id='mask-2' fill='white'%3E%3Cuse xlink:href='%23path-1'%3E%3C/use%3E%3C/mask%3E%3Cuse id='Combined-Shape' fill='%23000000' xlink:href='%23path-1'%3E%3C/use%3E%3Cg id='Group' mask='url(%23mask-2)' fill='%2300755f'%3E%3Cg id='Colour'%3E%3Crect id='bg' x='0' y='0' width='30' height='30'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n            }   \n\n        }\n\n        .prev {\n            @apply bg-contain bg-center rotate-180;\n            background-image: url(\"data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='30px' height='30px' viewBox='0 0 30 30' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EIcon%3C/title%3E%3Cdefs%3E%3Cpath d='M15,0 C23.2842712,0 30,6.71572875 30,15 C30,23.2842712 23.2842712,30 15,30 C6.71572875,30 0,23.2842712 0,15 C0,6.71572875 6.71572875,0 15,0 Z M15,2.0348186 C7.83952804,2.0348186 2.0348186,7.83952804 2.0348186,15 C2.0348186,22.160472 7.83952804,27.9651814 15,27.9651814 C22.160472,27.9651814 27.9651814,22.160472 27.9651814,15 C27.9651814,7.83952804 22.160472,2.0348186 15,2.0348186 Z M13.1907614,7.87616967 L13.2866209,7.95692746 L20.6531795,14.9884701 L13.2981455,22.2388572 C12.9058866,22.625535 12.2744337,22.6210107 11.8877559,22.2287518 C11.5308225,21.8666667 11.5072211,21.3007713 11.8142244,20.9117204 L11.8978612,20.8183622 L17.7882288,15.0116854 L11.9093858,9.3997806 C11.5416016,9.04872246 11.5007943,8.48380704 11.795819,8.08559598 L11.8765768,7.98973645 C12.2276349,7.62195224 12.7925503,7.581145 13.1907614,7.87616967 Z' id='path-1'%3E%3C/path%3E%3C/defs%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Components/Blog-Snippets' transform='translate(-1224.000000, -683.000000)'%3E%3Cg id='Cards' transform='translate(0.031661, 314.000000)'%3E%3Cg id='Card' transform='translate(806.888889, 20.000000)'%3E%3Cg id='Icon' transform='translate(417.079450, 349.000000)'%3E%3Cmask id='mask-2' fill='white'%3E%3Cuse xlink:href='%23path-1'%3E%3C/use%3E%3C/mask%3E%3Cuse id='Combined-Shape' fill='%23002B40' xlink:href='%23path-1'%3E%3C/use%3E%3Cg id='Group' mask='url(%23mask-2)' fill='%23002B40'%3E%3Cg id='Colour'%3E%3Crect id='bg' x='0' y='0' width='30' height='30'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n        }\n\n        .next {\n            @apply bg-contain bg-center;\n            background-image: url(\"data:image/svg+xml;charset=utf8,%3C?xml version='1.0' encoding='UTF-8'?%3E%3Csvg width='30px' height='30px' viewBox='0 0 30 30' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EIcon%3C/title%3E%3Cdefs%3E%3Cpath d='M15,0 C23.2842712,0 30,6.71572875 30,15 C30,23.2842712 23.2842712,30 15,30 C6.71572875,30 0,23.2842712 0,15 C0,6.71572875 6.71572875,0 15,0 Z M15,2.0348186 C7.83952804,2.0348186 2.0348186,7.83952804 2.0348186,15 C2.0348186,22.160472 7.83952804,27.9651814 15,27.9651814 C22.160472,27.9651814 27.9651814,22.160472 27.9651814,15 C27.9651814,7.83952804 22.160472,2.0348186 15,2.0348186 Z M13.1907614,7.87616967 L13.2866209,7.95692746 L20.6531795,14.9884701 L13.2981455,22.2388572 C12.9058866,22.625535 12.2744337,22.6210107 11.8877559,22.2287518 C11.5308225,21.8666667 11.5072211,21.3007713 11.8142244,20.9117204 L11.8978612,20.8183622 L17.7882288,15.0116854 L11.9093858,9.3997806 C11.5416016,9.04872246 11.5007943,8.48380704 11.795819,8.08559598 L11.8765768,7.98973645 C12.2276349,7.62195224 12.7925503,7.581145 13.1907614,7.87616967 Z' id='path-1'%3E%3C/path%3E%3C/defs%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Components/Blog-Snippets' transform='translate(-1224.000000, -683.000000)'%3E%3Cg id='Cards' transform='translate(0.031661, 314.000000)'%3E%3Cg id='Card' transform='translate(806.888889, 20.000000)'%3E%3Cg id='Icon' transform='translate(417.079450, 349.000000)'%3E%3Cmask id='mask-2' fill='white'%3E%3Cuse xlink:href='%23path-1'%3E%3C/use%3E%3C/mask%3E%3Cuse id='Combined-Shape' fill='%23002B40' xlink:href='%23path-1'%3E%3C/use%3E%3Cg id='Group' mask='url(%23mask-2)' fill='%23002B40'%3E%3Cg id='Colour'%3E%3Crect id='bg' x='0' y='0' width='30' height='30'%3E%3C/rect%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E\");\n        }\n\n    }\n</style>\n"],"names":["props","__props","richtext","value","renderRichText","fetchArticles","articles","useNews","__temp","__restore","_withAsyncContext","_a","carousel","ref","settings","reactive","data"],"mappings":"+4DAEI,MAAMA,EAAQC,EAIRC,EAAYC,GAAcC,GAAeD,CAAK,EAE9C,CAAE,cAAAE,GAAe,SAAAC,CAAS,EAAIC,GAAQ,EAC5C,CAAAC,EAAAC,CAAA,EAAAC,GAAA,IAAM,OAAA,OAAAL,IAAcM,EAAAX,GAAA,YAAAA,EAAO,OAAP,YAAAW,EAAa,WAAY,EAAG,CAAC,EAAA,cAE3C,MAAAC,EAAWC,GAAI,IAAI,EAEnBC,GAAWC,GAAS,CACtB,SAAU,CACN,YAAa,KACb,UAAW,SACX,WAAY,EAChB,CAAA,CACH,EAEKC,GAAOD,GAAS,CAClB,YAAa,CACT,IAAK,CACD,YAAa,KACb,UAAW,SACX,WAAY,EAChB,EACA,IAAK,CACD,YAAa,KACb,UAAW,QACX,WAAY,EAChB,EACA,IAAK,CACD,YAAa,KACb,UAAW,QACX,WAAY,EAChB,EACA,IAAM,CACF,YAAa,EACb,UAAW,QACX,WAAY,EAChB,EACA,KAAM,CACF,YAAa,EACb,UAAW,QACX,WAAY,EAChB,EACA,KAAM,CACF,YAAa,EACb,UAAW,QACX,WAAY,EAChB,EACA,KAAM,CACF,YAAa,EACb,UAAW,QACX,WAAY,EAChB,EACA,KAAM,CACF,YAAa,EACb,UAAW,QACX,WAAY,EAChB,EACA,KAAM,CACF,YAAa,EACb,UAAW,QACX,WAAY,EAChB,EACA,KAAM,CACF,YAAa,EACb,UAAW,QACX,WAAY,EAChB,EACA,KAAM,CACF,YAAa,EACb,UAAW,QACX,WAAY,EAChB,CACJ,CAAA,CACH"}