{"version":3,"file":"steps-carousel.component.js","sources":["../../../../KNHS.Website.Frontend/script/vue/apps/steps-carousel/config/index.ts","../../../../KNHS.Website.Frontend/script/vue/apps/steps-carousel/components/navigation-button.component.vue","../../../../KNHS.Website.Frontend/script/vue/apps/steps-carousel/components/navigation-button.component.vue","../../../../KNHS.Website.Frontend/script/vue/apps/steps-carousel/StepsCarousel.vue","../../../../KNHS.Website.Frontend/script/vue/apps/steps-carousel/StepsCarousel.vue","../../../../KNHS.Website.Frontend/script/vue/apps/steps-carousel/index.ts","../../../../KNHS.Website.Frontend/script/steps-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=\"steps-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            <div class=\"slide\">\n                <figure class=\"slide__figure\">\n                    <img\n                        :src=\"slide.Image.ImageUrl\"\n                        :alt=\"slide.Image.AlternativeText\"\n                        loading=\"lazy\" />\n                </figure>\n                <div class=\"slide__content\">\n                    <header class=\"header\">\n                        <span class=\"index\">{{ index + 1 }}</span>\n                        <div class=\"title h5\">{{ slide.Title }}</div>\n                    </header>\n                    <div class=\"body\">\n                        {{ slide.Description }}\n                    </div>\n                </div>\n            </div>\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/steps-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';\n\nexport default defineComponent({\n    components: {\n        Swiper,\n        SwiperSlide,\n        'navigation-button': navigationButton,\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=\"steps-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            <div class=\"slide\">\n                <figure class=\"slide__figure\">\n                    <img\n                        :src=\"slide.Image.ImageUrl\"\n                        :alt=\"slide.Image.AlternativeText\"\n                        loading=\"lazy\" />\n                </figure>\n                <div class=\"slide__content\">\n                    <header class=\"header\">\n                        <span class=\"index\">{{ index + 1 }}</span>\n                        <div class=\"title h5\">{{ slide.Title }}</div>\n                    </header>\n                    <div class=\"body\">\n                        {{ slide.Description }}\n                    </div>\n                </div>\n            </div>\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/steps-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';\n\nexport default defineComponent({\n    components: {\n        Swiper,\n        SwiperSlide,\n        'navigation-button': navigationButton,\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 stepsCarousel from './StepsCarousel.vue';\n\nexport default {\n    name: NAME_SPACE,\n    components: {\n        'steps-carousel': stepsCarousel,\n    },\n};\n","import { createApp, pinia } from './vue';\n\nimport stepsCarousel from './vue/apps/steps-carousel';\n\nconst stepsCarouselMountingContainer = document.querySelectorAll('.js-steps-carousel-container');\n\nif (stepsCarouselMountingContainer) {\n    const stepsCarousels = [];\n\n    stepsCarouselMountingContainer.forEach((el) => {\n        const app = createApp(stepsCarousel).use(pinia).mount(el);\n        stepsCarousels.push(app);\n    });\n}\n"],"names":["NAME_SPACE","_sfc_main$1","svgComponent","props","swiper","useSwiper","_resolveComponent","_openBlock","_createElementBlock","_normalizeClass","$setup","_cache","$event","_normalizeStyle","_a","_createVNode","_component_svgComponent","_sfc_main","defineComponent","Swiper","SwiperSlide","navigationButton","activeSlideIndex","ref","nextSlideIndex","prevSlideIndex","activeSlide","paginationOptions","onSwiper","onSlideChange","getIndex","index","realIndex","Pagination","_hoisted_1","_hoisted_2","_hoisted_5","_hoisted_7","_hoisted_10","_createBlock","_component_swiper","_ctx","_withCtx","_createElementVNode","_toDisplayString","_hoisted_3","_component_navigation_button","_Fragment","_renderList","slide","_hoisted_4","_hoisted_6","_hoisted_8","_hoisted_9","stepsCarousel","stepsCarouselMountingContainer","el","createApp","pinia"],"mappings":"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"}