{"version":3,"file":"card-carousel.component.js","sources":["../../../../KNHS.Website.Frontend/script/vue/apps/card-carousel/config/index.ts","../../../../KNHS.Website.Frontend/script/vue/apps/card-carousel/components/navigation-button.component.vue","../../../../KNHS.Website.Frontend/script/vue/apps/card-carousel/components/navigation-button.component.vue","../../../../KNHS.Website.Frontend/script/vue/apps/card-carousel/CardCarousel.vue","../../../../KNHS.Website.Frontend/script/vue/apps/card-carousel/CardCarousel.vue","../../../../KNHS.Website.Frontend/script/vue/apps/card-carousel/index.ts","../../../../KNHS.Website.Frontend/script/card-carousel.component.ts"],"sourcesContent":["const NAME_SPACE = 'StepsCarouselComponent';\n\nexport { NAME_SPACE };\n","<template>\n    <button\n        type=\"button\"\n        role=\"button\"\n        class=\"btn-default btn-default--3 btn-default--icon\"\n        :class=\"`btn-${props.direction}`\"\n        @click=\"props.direction === 'prev' ? swiper.slidePrev() : swiper.slideNext()\"\n        :style=\"`color: ${props.item?.CaseColour}`\"\n        ref=\"navButton\">\n        <svgComponent\n            :width=\"24\"\n            :height=\"24\"\n            class-name=\"icon-next\"\n            :icon-name=\"props.direction === 'prev' ? 'arrow-left' : 'arrow-right'\"></svgComponent>\n    </button>\n</template>\n\n<script lang=\"ts\">\nimport { useSwiper } from 'swiper/vue';\nimport svgComponent from '../../../components/svgComponent.vue';\n\nexport default {\n    props: {\n        direction: String,\n        item: Object,\n    },\n    components: {\n        svgComponent,\n    },\n    setup(props) {\n        const swiper = useSwiper();\n\n        return {\n            props,\n            swiper,\n        };\n    },\n};\n</script>\n","<template>\n    <button\n        type=\"button\"\n        role=\"button\"\n        class=\"btn-default btn-default--3 btn-default--icon\"\n        :class=\"`btn-${props.direction}`\"\n        @click=\"props.direction === 'prev' ? swiper.slidePrev() : swiper.slideNext()\"\n        :style=\"`color: ${props.item?.CaseColour}`\"\n        ref=\"navButton\">\n        <svgComponent\n            :width=\"24\"\n            :height=\"24\"\n            class-name=\"icon-next\"\n            :icon-name=\"props.direction === 'prev' ? 'arrow-left' : 'arrow-right'\"></svgComponent>\n    </button>\n</template>\n\n<script lang=\"ts\">\nimport { useSwiper } from 'swiper/vue';\nimport svgComponent from '../../../components/svgComponent.vue';\n\nexport default {\n    props: {\n        direction: String,\n        item: Object,\n    },\n    components: {\n        svgComponent,\n    },\n    setup(props) {\n        const swiper = useSwiper();\n\n        return {\n            props,\n            swiper,\n        };\n    },\n};\n</script>\n","<!-- eslint-disable @typescript-eslint/no-magic-numbers -->\n<template>\n    <swiper\n        :slides-per-view=\"1.2\"\n        :space-between=\"16\"\n        :pagination=\"paginationOptions\"\n        :modules=\"[Pagination]\"\n        :breakpoints=\"{\n            1024: {\n                slidesPerView: 2.3,\n            },\n            1440: {\n                slidesPerView: 4.1,\n            },\n        }\"\n        @swiper=\"onSwiper\"\n        @slideChange=\"onSlideChange\">\n        <header class=\"card-carousel__header\">\n            <div class=\"title h4\">{{ title }}</div>\n            <div class=\"controls\">\n                <navigation-button\n                    :item=\"getItem(prevSlideIndex)\"\n                    direction=\"prev\"></navigation-button>\n                <navigation-button\n                    :item=\"getItem(nextSlideIndex)\"\n                    direction=\"next\"></navigation-button>\n            </div>\n        </header>\n        <swiper-slide v-for=\"(slide, index) in slides\" :key=\"`slide-${index}`\">\n            <template v-if=\"slide.Link.Url\">\n                <a\n                    :href=\"slide.Link.Url\"\n                    :title=\"slide.Link.Text\"\n                    :target=\"slide.Link.Target\"\n                    class=\"slide\">\n                    <slide-item :slide=\"slide\"></slide-item>\n                </a>\n            </template>\n            <template v-else>\n                <div class=\"slide\">\n                    <slide-item :slide=\"slide\"></slide-item>\n                </div>\n            </template>\n        </swiper-slide>\n\n        <div class=\"pagination\"></div>\n    </swiper>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType, ref } from 'vue';\nimport type { Ref } from 'vue';\nimport { ISlide } from './interface/card-carousel.model';\nimport { Pagination } from 'swiper';\nimport { Swiper, SwiperSlide } from 'swiper/vue';\nimport { PaginationOptions, Swiper as SwiperT } from 'swiper/types';\n\nimport navigationButton from './components/navigation-button.component.vue';\nimport slideItem from './components/slideItem.component.vue';\n\nexport default defineComponent({\n    components: {\n        Swiper,\n        SwiperSlide,\n        'navigation-button': navigationButton,\n        'slide-item': slideItem,\n    },\n    props: {\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        title: {\n            type: String,\n            required: false,\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 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            activeSlideIndex,\n            nextSlideIndex,\n            prevSlideIndex,\n            paginationOptions,\n            onSwiper,\n            onSlideChange,\n            getItem,\n            getIndex,\n            Pagination,\n        };\n    },\n});\n</script>\n","<!-- eslint-disable @typescript-eslint/no-magic-numbers -->\n<template>\n    <swiper\n        :slides-per-view=\"1.2\"\n        :space-between=\"16\"\n        :pagination=\"paginationOptions\"\n        :modules=\"[Pagination]\"\n        :breakpoints=\"{\n            1024: {\n                slidesPerView: 2.3,\n            },\n            1440: {\n                slidesPerView: 4.1,\n            },\n        }\"\n        @swiper=\"onSwiper\"\n        @slideChange=\"onSlideChange\">\n        <header class=\"card-carousel__header\">\n            <div class=\"title h4\">{{ title }}</div>\n            <div class=\"controls\">\n                <navigation-button\n                    :item=\"getItem(prevSlideIndex)\"\n                    direction=\"prev\"></navigation-button>\n                <navigation-button\n                    :item=\"getItem(nextSlideIndex)\"\n                    direction=\"next\"></navigation-button>\n            </div>\n        </header>\n        <swiper-slide v-for=\"(slide, index) in slides\" :key=\"`slide-${index}`\">\n            <template v-if=\"slide.Link.Url\">\n                <a\n                    :href=\"slide.Link.Url\"\n                    :title=\"slide.Link.Text\"\n                    :target=\"slide.Link.Target\"\n                    class=\"slide\">\n                    <slide-item :slide=\"slide\"></slide-item>\n                </a>\n            </template>\n            <template v-else>\n                <div class=\"slide\">\n                    <slide-item :slide=\"slide\"></slide-item>\n                </div>\n            </template>\n        </swiper-slide>\n\n        <div class=\"pagination\"></div>\n    </swiper>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, PropType, ref } from 'vue';\nimport type { Ref } from 'vue';\nimport { ISlide } from './interface/card-carousel.model';\nimport { Pagination } from 'swiper';\nimport { Swiper, SwiperSlide } from 'swiper/vue';\nimport { PaginationOptions, Swiper as SwiperT } from 'swiper/types';\n\nimport navigationButton from './components/navigation-button.component.vue';\nimport slideItem from './components/slideItem.component.vue';\n\nexport default defineComponent({\n    components: {\n        Swiper,\n        SwiperSlide,\n        'navigation-button': navigationButton,\n        'slide-item': slideItem,\n    },\n    props: {\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        title: {\n            type: String,\n            required: false,\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 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            activeSlideIndex,\n            nextSlideIndex,\n            prevSlideIndex,\n            paginationOptions,\n            onSwiper,\n            onSlideChange,\n            getItem,\n            getIndex,\n            Pagination,\n        };\n    },\n});\n</script>\n","import { NAME_SPACE } from './config';\nimport cardCarousel from './CardCarousel.vue';\n\nexport default {\n    name: NAME_SPACE,\n    components: {\n        'card-carousel': cardCarousel,\n    },\n};\n","import { createApp, pinia } from './vue';\n\nimport cardCarousel from './vue/apps/card-carousel';\n\nconst cardCarouselMountingContainer = document.querySelectorAll('.js-card-carousel-container');\n\nif (cardCarouselMountingContainer) {\n    const cardCarousels = [];\n\n    cardCarouselMountingContainer.forEach((el) => {\n        const app = createApp(cardCarousel).use(pinia).mount(el);\n        cardCarousels.push(app);\n    });\n}\n"],"names":["NAME_SPACE","_sfc_main$2","svgComponent","props","swiper","useSwiper","_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","$setup","_cache","$event","_normalizeStyle","_a","_createVNode","_component_svgComponent","_sfc_main","defineComponent","Swiper","SwiperSlide","navigationButton","slideItem","activeSlideIndex","ref","nextSlideIndex","prevSlideIndex","activeSlide","paginationOptions","onSwiper","onSlideChange","e","getIndex","index","realIndex","Pagination","_hoisted_1","_hoisted_5","_createBlock","_component_swiper","_ctx","_withCtx","_createElementVNode","_hoisted_2","_toDisplayString","_hoisted_3","_component_navigation_button","_Fragment","_renderList","slide","_component_slide_item","_hoisted_4","cardCarousel","cardCarouselMountingContainer","el","createApp","pinia"],"mappings":"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"}