{"version":3,"file":"Carousel-2209f64d.js","sources":["../../../../apps/wizarr-frontend/src/modules/core/components/Carousel.vue"],"sourcesContent":["<template>\n    <div>\n        <div v-if=\"carouselTitle\" class=\"px-6 pt-6 sm:px-8 sm:pt-8\">\n            <h1\n                class=\"relative text-lg md:text-xl font-bold leading-tight tracking-tight text-gray-900 dark:text-white\"\n            >\n                <Transition\n                    name=\"fade\"\n                    mode=\"out-in\"\n                    :duration=\"{ enter: 200, leave: 200 }\"\n                >\n                    <div :key=\"carouselTitle\">\n                        {{ carouselTitle }}\n                    </div>\n                </Transition>\n            </h1>\n        </div>\n        <div\n            ref=\"carousel\"\n            class=\"relative overflow-hidden rounded h-screen\"\n            style=\"transition: max-height 0.5s ease-in-out\"\n            :style=\"{ maxHeight: carouselHeight }\"\n        >\n            <template v-for=\"(view, index) in carouselViews\" :key=\"index + 1\">\n                <div v-if=\"index == 0\" :id=\"`carousel-item-${index}`\"></div>\n                <div\n                    :id=\"`carousel-item-${index + 1}`\"\n                    class=\"hidden duration-700 ease-in-out\"\n                >\n                    <div class=\"flex flex-col items-center justify-center\">\n                        <div class=\"relative w-full\">\n                            <div\n                                class=\"text-gray-900 dark:text-white\"\n                                :class=\"\n                                    hasTitle\n                                        ? 'px-6 pb-6 pt-3 sm:px-8 sm:pb-8 sm:pt-4'\n                                        : 'p-6 sm:p-8'\n                                \"\n                            >\n                                <Transition name=\"fade\" mode=\"out-in\">\n                                    <template\n                                        v-if=\"\n                                            index + 1 == currentComponent &&\n                                            view.asyncComponent\n                                        \"\n                                    >\n                                        <component\n                                            v-bind=\"{ ...view.props, ...attrs }\"\n                                            :is=\"view.asyncComponent\"\n                                            :class=\"\n                                                carouselWait ? 'hidden' : ''\n                                            \"\n                                        />\n                                    </template>\n                                </Transition>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </template>\n        </div>\n        <Transition\n            name=\"fade\"\n            mode=\"out-in\"\n            :duration=\"{ enter: 200, leave: 200 }\"\n        >\n            <div\n                class=\"z-20 bg-white dark:bg-gray-800 absolute top-0 right-0 bottom-0 left-0 flex justify-center items-center flex-col space-y-1\"\n                v-if=\"carouselWait\"\n            >\n                <i\n                    class=\"fa-solid fa-spinner fa-spin text-4xl text-center text-gray-900 dark:text-white\"\n                ></i>\n                <p\n                    class=\"text-center font-semibold text-gray-900 dark:text-white\"\n                >\n                    {{ __('Please wait...') }}\n                </p>\n            </div>\n        </Transition>\n    </div>\n</template>\n\n<script lang=\"ts\">\nimport { Carousel, type CarouselInterface, type CarouselItem } from 'flowbite';\nimport { defineAsyncComponent, defineComponent } from 'vue';\nimport { useResizeObserver, type UseResizeObserverReturn } from '@vueuse/core';\n\nimport type { Component } from 'vue';\n\nexport interface CarouselView {\n    component: () => Promise<Component>;\n    asyncComponent?: Component;\n    props?: Record<string, any>;\n    name?: string;\n    title?: string;\n}\n\nexport default defineComponent({\n    name: 'Carousel',\n    data() {\n        return {\n            carousel: null as CarouselInterface | null,\n            carouselHeight: '100px',\n            currentComponent: this.currentView,\n            carouselViews: [] as CarouselView[],\n            carouselWait: true,\n            carouselTitle: this.pageTitle,\n            stopObserver: null as UseResizeObserverReturn['stop'] | null,\n        };\n    },\n    props: {\n        views: {\n            type: Array as () => CarouselView[],\n            required: true,\n        },\n        currentView: {\n            type: Number,\n            default: 1,\n            required: false,\n        },\n        pleaseWait: {\n            type: Boolean,\n            default: false,\n            required: false,\n        },\n        pageTitle: {\n            type: String as () => CarouselView['title'],\n            default: undefined,\n            required: false,\n        },\n    },\n    methods: {\n        getCarouselHeight(): string {\n            const activeItem = this.carousel?._activeItem?.el;\n            if (!activeItem) return '0px';\n\n            const activeItemChild = activeItem.firstChild\n                ?.firstChild as HTMLElement | null;\n            if (!activeItemChild) return '0px';\n\n            return `${activeItemChild.offsetHeight}px`;\n        },\n        updateHeight() {\n            const carouselRef = this.$refs.carousel as HTMLElement | null;\n            if (!carouselRef) return;\n\n            const carouselTransition = carouselRef.style.transition;\n            carouselRef.style.transition = 'none';\n            carouselRef.style.maxHeight = this.getCarouselHeight();\n            setTimeout(\n                () => (carouselRef.style.transition = carouselTransition),\n                500,\n            );\n        },\n        awaitReference(ref: unknown): Promise<HTMLElement> {\n            return new Promise((resolve) => {\n                const interval = setInterval(() => {\n                    if (ref) {\n                        clearInterval(interval);\n                        resolve(ref as HTMLElement);\n                    }\n                }, 100);\n            });\n        },\n        carouselElements(carousel: HTMLElement): CarouselItem[] {\n            const carouselElements = carousel.querySelectorAll(\n                'div[id^=\"carousel-item\"]',\n            );\n            return Array.from(carouselElements).map((element, index) => {\n                return {\n                    el: element,\n                    position: index,\n                } as CarouselItem;\n            });\n        },\n        asyncComponent(component: CarouselView['component']) {\n            return defineAsyncComponent({\n                loader: component,\n            });\n        },\n        mapViews() {\n            return this.views.map((view) => {\n                return {\n                    ...view,\n                    asyncComponent: this.asyncComponent(view.component),\n                };\n            });\n        },\n        handleCarouselChange(carousel: CarouselInterface) {\n            // Stop resize observer if it's running\n            if (this.stopObserver) this.stopObserver();\n\n            // Update the carousel height to match the current view\n            if (carousel?._activeItem?.el?.firstChild) {\n                this.stopObserver = useResizeObserver(\n                    carousel._activeItem.el.firstChild as HTMLElement,\n                    (entry) => {\n                        if (entry[0].target) {\n                            if (this.carouselWait) return;\n                            this.carouselHeight = `${\n                                (entry[0].target as HTMLElement).offsetHeight\n                            }px`;\n                        }\n                    },\n                ).stop;\n            }\n        },\n    },\n    watch: {\n        currentComponent: {\n            handler(index: number) {\n                // Update the carousel\n                this.carousel?.slideTo(index);\n\n                // Update the page title\n                const view = this.carouselViews[index - 1];\n                this.carouselTitle = view?.title ? view.title : undefined;\n            },\n            immediate: false,\n        },\n        currentView: {\n            handler(index: number) {\n                this.currentComponent = index;\n            },\n            immediate: false,\n        },\n        pleaseWait: {\n            handler(value: boolean) {\n                this.carouselWait = value;\n            },\n            immediate: false,\n        },\n    },\n    computed: {\n        hasTitle(): boolean {\n            return !!this.carouselTitle;\n        },\n        attrs(): Record<string, any> {\n            return {\n                ...this.$attrs,\n                onNextStep: () => this.currentComponent++,\n                onPrevStep: () => this.currentComponent--,\n                onPleaseWait: (value: boolean) => (this.carouselWait = value),\n                onUpdateTitle: (title: string) => (this.carouselTitle = title),\n                onHeight: () => this.updateHeight(),\n            };\n        },\n    },\n    async mounted() {\n        // Map views to async components\n        this.carouselViews = this.mapViews();\n\n        // Wait for carousel to be mounted in DOM and then create an array of carousel elements\n        const carouselRef = await this.awaitReference(this.$refs.carousel);\n        const carouselElements = this.carouselElements(carouselRef);\n\n        // Initialize carousel component with elements and options\n        this.carousel = new Carousel(carouselElements, {\n            defaultPosition: this.currentView,\n            onChange: this.handleCarouselChange,\n        });\n\n        const view = this.carouselViews[this.currentView - 1];\n        this.carouselTitle = view?.title ? view.title : undefined;\n\n        this.carouselWait = this.pleaseWait ?? false;\n    },\n});\n</script>\n"],"names":["_sfc_main","defineComponent","activeItem","_b","_a","activeItemChild","_c","carouselRef","carouselTransition","ref","resolve","interval","carousel","carouselElements","element","index","component","defineAsyncComponent","view","useResizeObserver","entry","value","title","Carousel","_hoisted_1","_hoisted_3","_hoisted_4","_hoisted_7","_sfc_render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createElementBlock","_createElementVNode","_hoisted_2","_createVNode","_Transition","_createCommentVNode","_Fragment","_renderList","_hoisted_5","_hoisted_6","_normalizeClass","_withCtx","_resolveDynamicComponent","_mergeProps","_hoisted_8"],"mappings":"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"}