{"version":3,"file":"hero-carousel.component.js","sources":["../../../../KNHS.Website.Frontend/script/vue/apps/hero-carousel/config/index.ts","../../../../KNHS.Website.Frontend/script/vue/apps/hero-carousel/HeroCarousel.vue","../../../../KNHS.Website.Frontend/script/vue/apps/hero-carousel/HeroCarousel.vue","../../../../KNHS.Website.Frontend/script/vue/apps/hero-carousel/index.ts","../../../../KNHS.Website.Frontend/script/hero-carousel.component.ts"],"sourcesContent":["const NAME_SPACE = 'HeroCarouselComponent';\n\nexport { NAME_SPACE };\n","<!-- eslint-disable @typescript-eslint/no-magic-numbers -->\n<template>\n    <swiper\n        :slides-per-view=\"1\"\n        :space-between=\"-50\"\n        :autoplay=\"false\"\n        :breakpoints=\"{\n            768: {\n                slidesPerView: 1,\n            },\n            1440: {\n                slidesPerView: 1,\n            },\n            1600: {\n                slidesPerView: 1,\n            },\n        }\"\n        :loop=\"loop\"\n        :pagination=\"paginationOptions\"\n        :modules=\"[Pagination, Autoplay]\"\n        @swiper=\"onSwiper\"\n        @slideChange=\"onSlideChange\">\n        <swiper-slide v-for=\"(slide, index) in slides\" :key=\"`slide-${index}`\">\n            <div class=\"swiper-slide__content\">\n                <div class=\"slide-body\">\n                    <header class=\"title\">{{ slide.Title }}</header>\n                    <div class=\"subtitle\" v-if=\"slide.Subtitle\">\n                        {{ slide.Subtitle }}\n                    </div>\n\n                    <a\n                        v-if=\"slide.Link.Url && slide.Link.Text\"\n                        :href=\"slide.Link.Url\"\n                        :target=\"slide.Link.Target\"\n                        class=\"link btn-default\"\n                        >{{ slide.Link.Text }}</a\n                    >\n                </div>\n                <div class=\"slide-overlay\"></div>\n                <picture>\n                    <source\n                        media=\"(min-width: 1024px)\"\n                        :srcset=\"`${slide.Image.ImageUrl}?height=560&format=webp&quality=80`\"\n                        type=\"image/webp\" />\n                    <source\n                        media=\"(max-width: 768px)\"\n                        :srcset=\"`${\n                            slide.MobileImage?.ImageUrl ?? slide.Image.ImageUrl\n                        }?width=750&format=webp&quality=80`\"\n                        type=\"image/webp\" />\n                    <img\n                        loading=\"lazy\"\n                        :src=\"slide.Image.ImageUrl\"\n                        :alt=\"slide.Image.AlternativeText\" />\n                </picture>\n            </div>\n        </swiper-slide>\n\n        <div class=\"pagination\"></div>\n    </swiper>\n</template>\n\n<script lang=\"ts\">\nimport type { Ref } from 'vue';\nimport { ISlide } from './interface/hero-carousel.model';\nimport { defineComponent, PropType, ref } from 'vue';\nimport { Pagination, Autoplay } from 'swiper';\nimport { Swiper, SwiperSlide } from 'swiper/vue';\nimport { PaginationOptions, AutoplayOptions, Swiper as SwiperT } from 'swiper/types';\n\nexport default defineComponent({\n    components: {\n        Swiper,\n        SwiperSlide,\n    },\n    props: {\n        loop: {\n            type: Boolean,\n            default: true,\n        },\n        slides: {\n            type: Array as PropType<Array<ISlide>>, //https://forum.vuejs.org/t/specifying-array-type-of-prop-in-vue-3-0-with-typescript/103169\n            required: true,\n        },\n    },\n    setup(props) {\n        const activeSlideIndex: Ref<number> = ref(0);\n        const nextSlideIndex: Ref<number> = ref(0);\n        const prevSlideIndex: Ref<number> = ref(0);\n        const activeSlide: Ref<number> = ref(0);\n\n        const autoPlayOptions: AutoplayOptions = {\n            delay: 3000,\n            pauseOnMouseEnter: true,\n            disableOnInteraction: false,\n        };\n\n        const paginationOptions: PaginationOptions = {\n            clickable: true,\n            el: '.pagination',\n        };\n\n        const onSwiper = (swiper: SwiperT) => {\n            activeSlideIndex.value = swiper.realIndex;\n            nextSlideIndex.value = activeSlideIndex.value++;\n            prevSlideIndex.value = activeSlideIndex.value--;\n        };\n\n        const onSlideChange = (e: any) => {\n            if (e.slides[e.realIndex] !== activeSlide.value) {\n                activeSlideIndex.value = getIndex(e.realIndex);\n                nextSlideIndex.value = getIndex(e.realIndex + 1);\n                prevSlideIndex.value = getIndex(e.realIndex - 1);\n            }\n            activeSlide.value = e.slides[e.realIndex];\n        };\n\n        const getIndex = (index: number) => {\n            if (index < 0) {\n                return props.slides.length - 1;\n            }\n            if (index >= props.slides.length) {\n                return 0;\n            }\n            return index;\n        };\n        const getItem = (index: number) => {\n            let realIndex = index;\n            if (index < 0 || index >= props.slides.length) {\n                realIndex = getIndex(index);\n            }\n            return props.slides[realIndex];\n        };\n\n        return {\n            autoPlayOptions,\n            paginationOptions,\n            activeSlideIndex,\n            nextSlideIndex,\n            prevSlideIndex,\n            onSwiper,\n            onSlideChange,\n            getItem,\n            getIndex,\n            Autoplay,\n            Pagination,\n        };\n    },\n});\n</script>\n","<!-- eslint-disable @typescript-eslint/no-magic-numbers -->\n<template>\n    <swiper\n        :slides-per-view=\"1\"\n        :space-between=\"-50\"\n        :autoplay=\"false\"\n        :breakpoints=\"{\n            768: {\n                slidesPerView: 1,\n            },\n            1440: {\n                slidesPerView: 1,\n            },\n            1600: {\n                slidesPerView: 1,\n            },\n        }\"\n        :loop=\"loop\"\n        :pagination=\"paginationOptions\"\n        :modules=\"[Pagination, Autoplay]\"\n        @swiper=\"onSwiper\"\n        @slideChange=\"onSlideChange\">\n        <swiper-slide v-for=\"(slide, index) in slides\" :key=\"`slide-${index}`\">\n            <div class=\"swiper-slide__content\">\n                <div class=\"slide-body\">\n                    <header class=\"title\">{{ slide.Title }}</header>\n                    <div class=\"subtitle\" v-if=\"slide.Subtitle\">\n                        {{ slide.Subtitle }}\n                    </div>\n\n                    <a\n                        v-if=\"slide.Link.Url && slide.Link.Text\"\n                        :href=\"slide.Link.Url\"\n                        :target=\"slide.Link.Target\"\n                        class=\"link btn-default\"\n                        >{{ slide.Link.Text }}</a\n                    >\n                </div>\n                <div class=\"slide-overlay\"></div>\n                <picture>\n                    <source\n                        media=\"(min-width: 1024px)\"\n                        :srcset=\"`${slide.Image.ImageUrl}?height=560&format=webp&quality=80`\"\n                        type=\"image/webp\" />\n                    <source\n                        media=\"(max-width: 768px)\"\n                        :srcset=\"`${\n                            slide.MobileImage?.ImageUrl ?? slide.Image.ImageUrl\n                        }?width=750&format=webp&quality=80`\"\n                        type=\"image/webp\" />\n                    <img\n                        loading=\"lazy\"\n                        :src=\"slide.Image.ImageUrl\"\n                        :alt=\"slide.Image.AlternativeText\" />\n                </picture>\n            </div>\n        </swiper-slide>\n\n        <div class=\"pagination\"></div>\n    </swiper>\n</template>\n\n<script lang=\"ts\">\nimport type { Ref } from 'vue';\nimport { ISlide } from './interface/hero-carousel.model';\nimport { defineComponent, PropType, ref } from 'vue';\nimport { Pagination, Autoplay } from 'swiper';\nimport { Swiper, SwiperSlide } from 'swiper/vue';\nimport { PaginationOptions, AutoplayOptions, Swiper as SwiperT } from 'swiper/types';\n\nexport default defineComponent({\n    components: {\n        Swiper,\n        SwiperSlide,\n    },\n    props: {\n        loop: {\n            type: Boolean,\n            default: true,\n        },\n        slides: {\n            type: Array as PropType<Array<ISlide>>, //https://forum.vuejs.org/t/specifying-array-type-of-prop-in-vue-3-0-with-typescript/103169\n            required: true,\n        },\n    },\n    setup(props) {\n        const activeSlideIndex: Ref<number> = ref(0);\n        const nextSlideIndex: Ref<number> = ref(0);\n        const prevSlideIndex: Ref<number> = ref(0);\n        const activeSlide: Ref<number> = ref(0);\n\n        const autoPlayOptions: AutoplayOptions = {\n            delay: 3000,\n            pauseOnMouseEnter: true,\n            disableOnInteraction: false,\n        };\n\n        const paginationOptions: PaginationOptions = {\n            clickable: true,\n            el: '.pagination',\n        };\n\n        const onSwiper = (swiper: SwiperT) => {\n            activeSlideIndex.value = swiper.realIndex;\n            nextSlideIndex.value = activeSlideIndex.value++;\n            prevSlideIndex.value = activeSlideIndex.value--;\n        };\n\n        const onSlideChange = (e: any) => {\n            if (e.slides[e.realIndex] !== activeSlide.value) {\n                activeSlideIndex.value = getIndex(e.realIndex);\n                nextSlideIndex.value = getIndex(e.realIndex + 1);\n                prevSlideIndex.value = getIndex(e.realIndex - 1);\n            }\n            activeSlide.value = e.slides[e.realIndex];\n        };\n\n        const getIndex = (index: number) => {\n            if (index < 0) {\n                return props.slides.length - 1;\n            }\n            if (index >= props.slides.length) {\n                return 0;\n            }\n            return index;\n        };\n        const getItem = (index: number) => {\n            let realIndex = index;\n            if (index < 0 || index >= props.slides.length) {\n                realIndex = getIndex(index);\n            }\n            return props.slides[realIndex];\n        };\n\n        return {\n            autoPlayOptions,\n            paginationOptions,\n            activeSlideIndex,\n            nextSlideIndex,\n            prevSlideIndex,\n            onSwiper,\n            onSlideChange,\n            getItem,\n            getIndex,\n            Autoplay,\n            Pagination,\n        };\n    },\n});\n</script>\n","import { NAME_SPACE } from './config';\nimport heroCarousel from './HeroCarousel.vue';\n\nexport default {\n    name: NAME_SPACE,\n    components: {\n        'hero-carousel': heroCarousel,\n    },\n};\n","import { createApp, pinia } from './vue';\n\nimport heroCarousel from './vue/apps/hero-carousel';\n\nconst heroCarouselMountingContainer = document.querySelectorAll('.js-hero-carousel-container');\n\nif (heroCarouselMountingContainer) {\n    const carouselHeros = [];\n\n    heroCarouselMountingContainer.forEach((el) => {\n        const app = createApp(heroCarousel).use(pinia).mount(el);\n        carouselHeros.push(app);\n    });\n}\n"],"names":["NAME_SPACE","_sfc_main","defineComponent","Swiper","SwiperSlide","props","activeSlideIndex","ref","nextSlideIndex","prevSlideIndex","activeSlide","autoPlayOptions","paginationOptions","onSwiper","swiper","onSlideChange","getIndex","index","realIndex","Autoplay","Pagination","_hoisted_1","_hoisted_4","_resolveComponent","_openBlock","_createBlock","_component_swiper","_ctx","_createElementBlock","_Fragment","_renderList","slide","_withCtx","_createElementVNode","_hoisted_2","_hoisted_3","_toDisplayString","_createCommentVNode","_hoisted_6","_hoisted_7","_b","_a","_hoisted_8","heroCarousel","heroCarouselMountingContainer","el","createApp","pinia"],"mappings":"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"}