{"version":3,"file":"Carousel-Csalr640.js","sources":["../../resources/js/components/CarouselNew/Carousel.vue"],"sourcesContent":["<template>\n    <div class=\"relative overflow-hidden\">\n        <transition-group\n            v-if=\"navButtons\"\n            name=\"fade\"\n            class=\"nav-buttons\"\n        >\n            <Btn\n                v-show=\"hasPrevious\"\n                key=\"prev-nav\"\n                :variant=\"BtnVariant.TEXT\"\n                :class=\"['left-0', navClass, 'navigation-button']\"\n                icon=\"chevron-left\"\n                :size=\"BtnSize.XXS\"\n                @click=\"previousSlides\"\n            />\n            <Btn\n                v-show=\"hasNext\"\n                key=\"next-nav\"\n                :variant=\"BtnVariant.TEXT\"\n                :class=\"['right-0', navClass, 'navigation-button']\"\n                icon=\"chevron-right\"\n                :size=\"BtnSize.XXS\"\n                @click=\"nextSlides\"\n            />\n        </transition-group>\n\n        <div\n            ref=\"slides\"\n            v-drag-scroll\n            :class=\"[\n                'flex gap-x-3 hide-scrollbar slides',\n                {\n                    'fade-left-edge': scrollDistance && !noEdgeFade && !noEdgeFadeLeft,\n                    'fade-right-edge': hasNext && !noEdgeFade && !noEdgeFadeRight,\n                },\n            ]\"\n            :style=\"{\n                paddingLeft: padding,\n                paddingRight: padding,\n                paddingTop: verticalPadding,\n                paddingBottom: verticalPadding,\n                scrollPadding: padding,\n                '--sd-gap': gap,\n            }\"\n            @scroll=\"onScroll\"\n        >\n            <slot></slot>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { BtnVariant, BtnSize } from '@components/Btn';\n\n/**\n * Simple carousel component based on native scroll & snap behavior.\n * It's slide will currently only snap to the left edge.\n */\nexport default {\n    name: 'Carousel',\n    props: {\n        navButtons: {\n            type: Boolean,\n            default: false,\n        },\n        /** specifies left and right padding of the whole carousel */\n        padding: {\n            type: String,\n            default: '0px',\n        },\n        /** specifies top and bottom padding of the whole carousel */\n        verticalPadding: {\n            type: String,\n            default: '0px',\n        },\n        /** gap between elements */\n        gap: {\n            type: String,\n            default: null,\n        },\n        noEdgeFade: {\n            type: Boolean,\n            default: false,\n        },\n        noEdgeFadeLeft: {\n            type: Boolean,\n            default: false,\n        },\n        noEdgeFadeRight: {\n            type: Boolean,\n            default: false,\n        },\n        navClass: {\n            type: undefined,\n            default: '',\n        },\n        customGradientColor: {\n            type: String,\n            default: 'rgb(var(--colors-white)) 49.65%',\n        },\n    },\n    data() {\n        return {\n            BtnVariant,\n            BtnSize,\n            activeIndex: null,\n            scrollDistance: null,\n        };\n    },\n    computed: {\n        hasNext() {\n            if (this.scrollDistance === null) return false;\n\n            const { slides } = this.$refs;\n            const remainingScrollDistance = slides.scrollWidth - this.scrollDistance - slides.offsetWidth;\n            return remainingScrollDistance > 0;\n        },\n        hasPrevious() {\n            return !!this.activeIndex;\n        },\n        gradientColor() {\n            return this.customGradientColor;\n        },\n    },\n    mounted() {\n        this.updateScrollDistance();\n        this.updateActiveIndex();\n    },\n    methods: {\n        onScroll() {\n            this.updateScrollDistance();\n            this.updateActiveIndex();\n        },\n        updateScrollDistance() {\n            this.scrollDistance = this.$refs.slides.scrollLeft;\n        },\n        updateActiveIndex() {\n            const { slides } = this.$refs;\n            this.activeIndex = Math.max(\n                0,\n                Array.from(slides.children).findIndex((el) => el.offsetLeft >= slides.scrollLeft) ?? 0,\n            );\n        },\n        nextSlide() {\n            if (!this.$refs.slides.children.length || this.$refs.slides.children.length <= this.activeIndex + 1) return;\n\n            this.activeIndex += 1;\n            this.scrollToSlideWithIndex(this.activeIndex);\n        },\n        previousSlide() {\n            if (this.activeIndex === 0 || !this.$refs.slides.children.length) return;\n\n            this.activeIndex -= 1;\n            this.scrollToSlideWithIndex(this.activeIndex);\n        },\n        getSlideByIndex(index) {\n            return this.$refs.slides?.children?.[index];\n        },\n        scrollToSlideWithIndex(index) {\n            const scrollPadding = this.getScrollPadding();\n            const slide = this.getSlideByIndex(index);\n\n            if (!slide) return;\n\n            const amount = slide.offsetLeft - this.$refs.slides.scrollLeft - scrollPadding;\n\n            this.scrollCarousel(amount);\n        },\n        async scrollCarousel(amount) {\n            this.scrollDistance = this.$refs.slides.scrollLeft + amount;\n\n            await this.$nextTick();\n            this.$refs.slides.scrollBy({\n                left: amount,\n                behavior: 'smooth',\n            });\n        },\n        nextSlides() {\n            const { slides } = this.$refs;\n            const children = Array.from(slides.children);\n            const maxOffset = slides.scrollLeft + slides.offsetWidth;\n            const firstNotFullyVisibleIndex = children.findIndex((el) => el.offsetLeft + el.offsetWidth > maxOffset);\n\n            // in case we cannot find anymore slides, scroll to the last one\n            if (firstNotFullyVisibleIndex < 0) return this.scrollToSlideWithIndex(children.length - 1);\n\n            return this.scrollToSlideWithIndex(firstNotFullyVisibleIndex);\n        },\n        previousSlides() {\n            const { slides } = this.$refs;\n            const children = Array.from(slides.children);\n            const scrollPadding = this.getScrollPadding();\n\n            const firstCurrentlyVisible = children.find((el) => el.offsetLeft >= slides.scrollLeft + scrollPadding / 2);\n            // determine minimum offset so the visible slide will become not fully visible\n            const minOffset = firstCurrentlyVisible.offsetLeft - slides.offsetWidth;\n\n            const scrollToIndex = children.findIndex((el) => el.offsetLeft >= minOffset);\n\n            if (scrollToIndex < 0) return this.scrollToSlideWithIndex(0);\n\n            return this.scrollToSlideWithIndex(scrollToIndex);\n        },\n        getScrollPadding() {\n            return parseInt(window.getComputedStyle(this.$refs.slides).paddingLeft, 10);\n        },\n    },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.slides {\n    @apply flex w-full h-full overflow-x-scroll;\n\n    scroll-snap-type: x mandatory;\n    scroll-behavior: smooth;\n\n    & > * {\n        scroll-snap-align: start;\n        flex-shrink: 0;\n\n        &:not(:last-child) {\n            margin-right: var(--sd-gap);\n        }\n    }\n\n    img {\n        user-select: none;\n    }\n\n    &::before,\n    &::after {\n        pointer-events: none;\n        position: absolute;\n        top: 0;\n        height: 100%;\n        content: '';\n        min-width: 4rem;\n        padding-right: inherit;\n        opacity: 0;\n        transition: all 0.3s ease;\n        z-index: 1;\n    }\n\n    &::before {\n        left: 0;\n        background: linear-gradient(90deg, v-bind(gradientColor), rgba(255, 255, 255, 0) 92.66%);\n    }\n\n    &::after {\n        right: 0;\n        background: linear-gradient(-90deg, v-bind(gradientColor), rgba(255, 255, 255, 0) 92.66%);\n    }\n\n    &.fade-left-edge::before,\n    &.fade-right-edge::after {\n        opacity: 1;\n    }\n}\n\n.navigation-button {\n    @apply h-12 w-12 rounded-full bg-white border-slate-300 border shadow-md transform -translate-y-1/2;\n    top: 50%;\n    position: absolute;\n    display: flex;\n    flex-shrink: 0;\n    justify-content: center;\n    align-items: center;\n    z-index: 2;\n}\n</style>\n"],"names":["_sfc_main","BtnVariant","BtnSize","slides","_a","el","index","_b","scrollPadding","slide","amount","__async","children","maxOffset","firstNotFullyVisibleIndex","minOffset","scrollToIndex","_hoisted_1","_openBlock","_createElementBlock","$props","_createBlock","_TransitionGroup","_createVNode","_component_Btn","$data","$options","_normalizeClass","_normalizeStyle","args","_renderSlot","_ctx"],"mappings":"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"}