primevue/carousel/index.mjs.map

PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc

{"version":3,"file":"index.mjs","sources":["../../src/carousel/BaseCarousel.vue","../../src/carousel/Carousel.vue","../../src/carousel/Carousel.vue?vue&type=template&id=880aa236&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport CarouselStyle from 'primevue/carousel/style';\n\nexport default {\n    name: 'BaseCarousel',\n    extends: BaseComponent,\n    props: {\n        value: null,\n        page: {\n            type: Number,\n            default: 0\n        },\n        numVisible: {\n            type: Number,\n            default: 1\n        },\n        numScroll: {\n            type: Number,\n            default: 1\n        },\n        responsiveOptions: Array,\n        orientation: {\n            type: String,\n            default: 'horizontal'\n        },\n        verticalViewPortHeight: {\n            type: String,\n            default: '300px'\n        },\n        contentClass: String,\n        containerClass: String,\n        indicatorsContentClass: String,\n        circular: {\n            type: Boolean,\n            default: false\n        },\n        autoplayInterval: {\n            type: Number,\n            default: 0\n        },\n        showNavigators: {\n            type: Boolean,\n            default: true\n        },\n        showIndicators: {\n            type: Boolean,\n            default: true\n        },\n        prevButtonProps: {\n            type: Object,\n            default: () => {\n                return { severity: 'secondary', text: true, rounded: true };\n            }\n        },\n        nextButtonProps: {\n            type: Object,\n            default: () => {\n                return { severity: 'secondary', text: true, rounded: true };\n            }\n        }\n    },\n    style: CarouselStyle,\n    provide() {\n        return {\n            $pcCarousel: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" role=\"region\" v-bind=\"ptmi('root')\">\n        <div v-if=\"$slots.header\" :class=\"cx('header')\" v-bind=\"ptm('header')\">\n            <slot name=\"header\"></slot>\n        </div>\n        <div v-if=\"!empty\" :class=\"[cx('contentContainer'), containerClass]\" v-bind=\"ptm('contentContainer')\">\n            <div :class=\"[cx('content'), contentClass]\" :aria-live=\"allowAutoplay ? 'polite' : 'off'\" v-bind=\"ptm('content')\">\n                <Button\n                    v-if=\"showNavigators\"\n                    :class=\"cx('pcPrevButton')\"\n                    :disabled=\"backwardIsDisabled\"\n                    :aria-label=\"ariaPrevButtonLabel\"\n                    :unstyled=\"unstyled\"\n                    @click=\"navBackward\"\n                    v-bind=\"prevButtonProps\"\n                    :pt=\"ptm('pcPrevButton')\"\n                    data-pc-group-section=\"navigator\"\n                >\n                    <template #icon=\"slotProps\">\n                        <slot name=\"previcon\">\n                            <component :is=\"isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'\" :class=\"slotProps.icon\" v-bind=\"ptm('pcPrevButton')['icon']\" />\n                        </slot>\n                    </template>\n                </Button>\n                <div :class=\"cx('viewport')\" :style=\"[{ height: isVertical() ? verticalViewPortHeight : 'auto' }]\" @touchend=\"onTouchEnd\" @touchstart=\"onTouchStart\" @touchmove=\"onTouchMove\" v-bind=\"ptm('viewport')\">\n                    <div ref=\"itemsContainer\" :class=\"cx('itemList')\" @transitionend=\"onTransitionEnd\" v-bind=\"ptm('itemList')\">\n                        <template v-if=\"isCircular()\">\n                            <div\n                                v-for=\"(item, index) of value.slice(-1 * d_numVisible)\"\n                                :key=\"index + '_scloned'\"\n                                :class=\"cx('itemClone', { index, value, totalShiftedItems, d_numVisible })\"\n                                v-bind=\"ptm('itemClone')\"\n                                :data-p-carousel-item-active=\"totalShiftedItems * -1 === value.length + d_numVisible\"\n                                :data-p-carousel-item-start=\"index === 0\"\n                                :data-p-carousel-item-end=\"value.slice(-1 * d_numVisible).length - 1 === index\"\n                            >\n                                <slot name=\"item\" :data=\"item\" :index=\"index\"></slot>\n                            </div>\n                        </template>\n                        <div\n                            v-for=\"(item, index) of value\"\n                            :key=\"index\"\n                            :class=\"cx('item', { index })\"\n                            role=\"group\"\n                            :aria-hidden=\"firstIndex() > index || lastIndex() < index ? true : undefined\"\n                            :aria-label=\"ariaSlideNumber(index)\"\n                            :aria-roledescription=\"ariaSlideLabel\"\n                            v-bind=\"getItemPTOptions('item', index)\"\n                            :data-p-carousel-item-active=\"firstIndex() <= index && lastIndex() >= index\"\n                            :data-p-carousel-item-start=\"firstIndex() === index\"\n                            :data-p-carousel-item-end=\"lastIndex() === index\"\n                        >\n                            <slot name=\"item\" :data=\"item\" :index=\"index\"></slot>\n                        </div>\n                        <template v-if=\"isCircular()\">\n                            <div v-for=\"(item, index) of value.slice(0, d_numVisible)\" :key=\"index + '_fcloned'\" :class=\"cx('itemClone', { index, value, totalShiftedItems, d_numVisible })\" v-bind=\"ptm('itemClone')\">\n                                <slot name=\"item\" :data=\"item\" :index=\"index\"></slot>\n                            </div>\n                        </template>\n                    </div>\n                </div>\n                <Button\n                    v-if=\"showNavigators\"\n                    :class=\"cx('pcNextButton')\"\n                    :disabled=\"forwardIsDisabled\"\n                    :aria-label=\"ariaNextButtonLabel\"\n                    :unstyled=\"unstyled\"\n                    @click=\"navForward\"\n                    v-bind=\"nextButtonProps\"\n                    :pt=\"ptm('pcNextButton')\"\n                    data-pc-group-section=\"navigator\"\n                >\n                    <template #icon=\"slotProps\">\n                        <slot name=\"nexticon\">\n                            <component :is=\"isVertical() ? 'ChevronDownIcon' : 'ChevronRightIcon'\" :class=\"slotProps.class\" v-bind=\"ptm('pcNextButton')['icon']\" />\n                        </slot>\n                    </template>\n                </Button>\n            </div>\n            <ul v-if=\"totalIndicators >= 0 && showIndicators\" ref=\"indicatorContent\" :class=\"[cx('indicatorList'), indicatorsContentClass]\" @keydown=\"onIndicatorKeydown\" v-bind=\"ptm('indicatorList')\">\n                <li v-for=\"(indicator, i) of totalIndicators\" :key=\"'p-carousel-indicator-' + i.toString()\" :class=\"cx('indicator', { index: i })\" v-bind=\"getIndicatorPTOptions('indicator', i)\" :data-p-active=\"d_page === i\">\n                    <button\n                        :class=\"cx('indicatorButton')\"\n                        type=\"button\"\n                        :tabindex=\"d_page === i ? '0' : '-1'\"\n                        :aria-label=\"ariaPageLabel(i + 1)\"\n                        :aria-current=\"d_page === i ? 'page' : undefined\"\n                        @click=\"onIndicatorClick($event, i)\"\n                        v-bind=\"getIndicatorPTOptions('indicatorButton', i)\"\n                    />\n                </li>\n            </ul>\n        </div>\n        <slot v-else name=\"empty\">\n            {{ emptyMessageText }}\n        </slot>\n        <div v-if=\"$slots.footer\" :class=\"cx('footer')\" v-bind=\"ptm('footer')\">\n            <slot name=\"footer\"></slot>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { addClass, find, findSingle, getAttribute, removeClass, setAttribute } from '@primeuix/utils/dom';\nimport { localeComparator, sort } from '@primeuix/utils/object';\nimport ChevronDownIcon from '@primevue/icons/chevrondown';\nimport ChevronLeftIcon from '@primevue/icons/chevronleft';\nimport ChevronRightIcon from '@primevue/icons/chevronright';\nimport ChevronUpIcon from '@primevue/icons/chevronup';\nimport Button from 'primevue/button';\nimport Ripple from 'primevue/ripple';\nimport BaseCarousel from './BaseCarousel.vue';\n\nexport default {\n    name: 'Carousel',\n    extends: BaseCarousel,\n    inheritAttrs: false,\n    emits: ['update:page'],\n    isRemainingItemsAdded: false,\n    data() {\n        return {\n            remainingItems: 0,\n            d_numVisible: this.numVisible,\n            d_numScroll: this.numScroll,\n            d_oldNumScroll: 0,\n            d_oldNumVisible: 0,\n            d_oldValue: null,\n            d_page: this.page,\n            totalShiftedItems: this.page * this.numScroll * -1,\n            allowAutoplay: !!this.autoplayInterval,\n            d_circular: this.circular || this.allowAutoplay,\n            swipeThreshold: 20\n        };\n    },\n    watch: {\n        page(newValue) {\n            if (newValue > this.d_page) {\n                this.navForward({}, newValue);\n            } else if (newValue < this.d_page) {\n                this.navBackward({}, newValue);\n            }\n\n            this.d_page = newValue;\n        },\n        circular(newValue) {\n            this.d_circular = newValue;\n        },\n        numVisible(newValue, oldValue) {\n            this.d_numVisible = newValue;\n            this.d_oldNumVisible = oldValue;\n        },\n        numScroll(newValue, oldValue) {\n            this.d_oldNumScroll = oldValue;\n            this.d_numScroll = newValue;\n        },\n        value(oldValue) {\n            this.d_oldValue = oldValue;\n        }\n    },\n    mounted() {\n        let stateChanged = false;\n\n        this.createStyle();\n        this.calculatePosition();\n\n        if (this.responsiveOptions) {\n            this.bindDocumentListeners();\n        }\n\n        if (this.isCircular()) {\n            let totalShiftedItems = this.totalShiftedItems;\n\n            if (this.d_page === 0) {\n                totalShiftedItems = -1 * this.d_numVisible;\n            } else if (totalShiftedItems === 0) {\n                totalShiftedItems = -1 * this.value.length;\n\n                if (this.remainingItems > 0) {\n                    this.isRemainingItemsAdded = true;\n                }\n            }\n\n            if (totalShiftedItems !== this.totalShiftedItems) {\n                this.totalShiftedItems = totalShiftedItems;\n\n                stateChanged = true;\n            }\n        }\n\n        if (!stateChanged && this.isAutoplay()) {\n            this.startAutoplay();\n        }\n    },\n    updated() {\n        if (!this.empty) {\n            const isCircular = this.isCircular();\n            let stateChanged = false;\n            let totalShiftedItems = this.totalShiftedItems;\n\n            if (this.autoplayInterval) {\n                this.stopAutoplay();\n            }\n\n            if (this.d_oldNumScroll !== this.d_numScroll || this.d_oldNumVisible !== this.d_numVisible || this.d_oldValue.length !== this.value.length) {\n                this.remainingItems = (this.value.length - this.d_numVisible) % this.d_numScroll;\n\n                let page = this.d_page;\n\n                if (this.totalIndicators !== 0 && page >= this.totalIndicators) {\n                    page = this.totalIndicators - 1;\n                    this.$emit('update:page', page);\n                    this.d_page = page;\n                    stateChanged = true;\n                }\n\n                totalShiftedItems = page * this.d_numScroll * -1;\n\n                if (isCircular) {\n                    totalShiftedItems -= this.d_numVisible;\n                }\n\n                if (page === this.totalIndicators - 1 && this.remainingItems > 0) {\n                    totalShiftedItems += -1 * this.remainingItems + this.d_numScroll;\n                    this.isRemainingItemsAdded = true;\n                } else {\n                    this.isRemainingItemsAdded = false;\n                }\n\n                if (totalShiftedItems !== this.totalShiftedItems) {\n                    this.totalShiftedItems = totalShiftedItems;\n                    stateChanged = true;\n                }\n\n                this.d_oldNumScroll = this.d_numScroll;\n                this.d_oldNumVisible = this.d_numVisible;\n                this.d_oldValue = this.value;\n                this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;\n            }\n\n            if (isCircular) {\n                if (this.d_page === 0) {\n                    totalShiftedItems = -1 * this.d_numVisible;\n                } else if (totalShiftedItems === 0) {\n                    totalShiftedItems = -1 * this.value.length;\n\n                    if (this.remainingItems > 0) {\n                        this.isRemainingItemsAdded = true;\n                    }\n                }\n\n                if (totalShiftedItems !== this.totalShiftedItems) {\n                    this.totalShiftedItems = totalShiftedItems;\n\n                    stateChanged = true;\n                }\n            }\n\n            if (!stateChanged && this.isAutoplay()) {\n                this.startAutoplay();\n            }\n        }\n    },\n    beforeUnmount() {\n        if (this.responsiveOptions) {\n            this.unbindDocumentListeners();\n        }\n\n        if (this.autoplayInterval) {\n            this.stopAutoplay();\n        }\n    },\n    methods: {\n        getIndicatorPTOptions(key, index) {\n            return this.ptm(key, {\n                context: {\n                    highlighted: index === this.d_page\n                }\n            });\n        },\n        getItemPTOptions(key, index) {\n            return this.ptm(key, {\n                context: {\n                    index,\n                    active: this.firstIndex() <= index && this.lastIndex() >= index,\n                    start: this.firstIndex() === index,\n                    end: this.lastIndex() === index\n                }\n            });\n        },\n        step(dir, page) {\n            let totalShiftedItems = this.totalShiftedItems;\n            const isCircular = this.isCircular();\n\n            if (page != null) {\n                totalShiftedItems = this.d_numScroll * page * -1;\n\n                if (isCircular) {\n                    totalShiftedItems -= this.d_numVisible;\n                }\n\n                this.isRemainingItemsAdded = false;\n            } else {\n                totalShiftedItems += this.d_numScroll * dir;\n\n                if (this.isRemainingItemsAdded) {\n                    totalShiftedItems += this.remainingItems - this.d_numScroll * dir;\n                    this.isRemainingItemsAdded = false;\n                }\n\n                let originalShiftedItems = isCircular ? totalShiftedItems + this.d_numVisible : totalShiftedItems;\n\n                page = Math.abs(Math.floor(originalShiftedItems / this.d_numScroll));\n            }\n\n            if (isCircular && this.d_page === this.totalIndicators - 1 && dir === -1) {\n                totalShiftedItems = -1 * (this.value.length + this.d_numVisible);\n                page = 0;\n            } else if (isCircular && this.d_page === 0 && dir === 1) {\n                totalShiftedItems = 0;\n                page = this.totalIndicators - 1;\n            } else if (page === this.totalIndicators - 1 && this.remainingItems > 0) {\n                totalShiftedItems += this.remainingItems * -1 - this.d_numScroll * dir;\n                this.isRemainingItemsAdded = true;\n            }\n\n            if (this.$refs.itemsContainer) {\n                !this.isUnstyled && removeClass(this.$refs.itemsContainer, 'p-items-hidden');\n                this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;\n                this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';\n            }\n\n            this.totalShiftedItems = totalShiftedItems;\n\n            this.$emit('update:page', page);\n            this.d_page = page;\n        },\n        calculatePosition() {\n            if (this.$refs.itemsContainer && this.responsiveOptions) {\n                let windowWidth = window.innerWidth;\n                let matchedResponsiveOptionsData = {\n                    numVisible: this.numVisible,\n                    numScroll: this.numScroll\n                };\n\n                for (let i = 0; i < this.responsiveOptions.length; i++) {\n                    let res = this.responsiveOptions[i];\n\n                    if (parseInt(res.breakpoint, 10) >= windowWidth) {\n                        matchedResponsiveOptionsData = res;\n                    }\n                }\n\n                if (this.d_numScroll !== matchedResponsiveOptionsData.numScroll) {\n                    let page = this.d_page;\n\n                    page = parseInt((page * this.d_numScroll) / matchedResponsiveOptionsData.numScroll);\n\n                    this.totalShiftedItems = matchedResponsiveOptionsData.numScroll * page * -1;\n\n                    if (this.isCircular()) {\n                        this.totalShiftedItems -= matchedResponsiveOptionsData.numVisible;\n                    }\n\n                    this.d_numScroll = matchedResponsiveOptionsData.numScroll;\n\n                    this.$emit('update:page', page);\n                    this.d_page = page;\n                }\n\n                if (this.d_numVisible !== matchedResponsiveOptionsData.numVisible) {\n                    this.d_numVisible = matchedResponsiveOptionsData.numVisible;\n                }\n            }\n        },\n        navBackward(e, index) {\n            if (this.d_circular || this.d_page !== 0) {\n                this.step(1, index);\n            }\n\n            this.allowAutoplay = false;\n\n            if (e.cancelable) {\n                e.preventDefault();\n            }\n        },\n        navForward(e, index) {\n            if (this.d_circular || this.d_page < this.totalIndicators - 1) {\n                this.step(-1, index);\n            }\n\n            this.allowAutoplay = false;\n\n            if (e.cancelable) {\n                e.preventDefault();\n            }\n        },\n        onIndicatorClick(e, index) {\n            let page = this.d_page;\n\n            if (index > page) {\n                this.navForward(e, index);\n            } else if (index < page) {\n                this.navBackward(e, index);\n            }\n        },\n        onTransitionEnd() {\n            if (this.$refs.itemsContainer) {\n                !this.isUnstyled && addClass(this.$refs.itemsContainer, 'p-items-hidden');\n                this.$refs.itemsContainer.style.transition = '';\n\n                if ((this.d_page === 0 || this.d_page === this.totalIndicators - 1) && this.isCircular()) {\n                    this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${this.totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${this.totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;\n                }\n            }\n        },\n        onTouchStart(e) {\n            let touchobj = e.changedTouches[0];\n\n            this.startPos = {\n                x: touchobj.pageX,\n                y: touchobj.pageY\n            };\n        },\n        onTouchMove(e) {\n            const touchobj = e.changedTouches[0];\n            const diff = this.isVertical() ? touchobj.pageY - this.startPos.y : touchobj.pageX - this.startPos.x;\n\n            if (Math.abs(diff) > this.swipeThreshold && e.cancelable) {\n                e.preventDefault();\n            }\n        },\n        onTouchEnd(e) {\n            let touchobj = e.changedTouches[0];\n\n            if (this.isVertical()) {\n                this.changePageOnTouch(e, touchobj.pageY - this.startPos.y);\n            } else {\n                this.changePageOnTouch(e, touchobj.pageX - this.startPos.x);\n            }\n        },\n        changePageOnTouch(e, diff) {\n            if (Math.abs(diff) > this.swipeThreshold) {\n                if (diff < 0) {\n                    // left\n                    this.navForward(e);\n                } else {\n                    // right\n                    this.navBackward(e);\n                }\n            }\n        },\n        onIndicatorKeydown(event) {\n            switch (event.code) {\n                case 'ArrowRight':\n                    this.onRightKey();\n                    break;\n\n                case 'ArrowLeft':\n                    this.onLeftKey();\n                    break;\n\n                case 'Home':\n                    this.onHomeKey();\n                    event.preventDefault();\n                    break;\n\n                case 'End':\n                    this.onEndKey();\n                    event.preventDefault();\n                    break;\n\n                case 'ArrowUp':\n                case 'ArrowDown':\n                case 'PageUp':\n                case 'PageDown':\n                    event.preventDefault();\n                    break;\n\n                case 'Tab':\n                    this.onTabKey();\n                    break;\n\n                default:\n                    break;\n            }\n        },\n        onRightKey() {\n            const indicators = [...find(this.$refs.indicatorContent, '[data-pc-section=\"indicator\"]')];\n            const activeIndex = this.findFocusedIndicatorIndex();\n\n            this.changedFocusedIndicator(activeIndex, activeIndex + 1 === indicators.length ? indicators.length - 1 : activeIndex + 1);\n        },\n        onLeftKey() {\n            const activeIndex = this.findFocusedIndicatorIndex();\n\n            this.changedFocusedIndicator(activeIndex, activeIndex - 1 <= 0 ? 0 : activeIndex - 1);\n        },\n        onHomeKey() {\n            const activeIndex = this.findFocusedIndicatorIndex();\n\n            this.changedFocusedIndicator(activeIndex, 0);\n        },\n        onEndKey() {\n            const indicators = [...find(this.$refs.indicatorContent, '[data-pc-section=\"indicator\"]')];\n            const activeIndex = this.findFocusedIndicatorIndex();\n\n            this.changedFocusedIndicator(activeIndex, indicators.length - 1);\n        },\n        onTabKey() {\n            const indicators = [...find(this.$refs.indicatorContent, '[data-pc-section=\"indicator\"]')];\n            const highlightedIndex = indicators.findIndex((ind) => getAttribute(ind, 'data-p-active') === true);\n\n            const activeIndicator = findSingle(this.$refs.indicatorContent, '[data-pc-section=\"indicator\"] > button[tabindex=\"0\"]');\n            const activeIndex = indicators.findIndex((ind) => ind === activeIndicator.parentElement);\n\n            indicators[activeIndex].children[0].tabIndex = '-1';\n            indicators[highlightedIndex].children[0].tabIndex = '0';\n        },\n        findFocusedIndicatorIndex() {\n            const indicators = [...find(this.$refs.indicatorContent, '[data-pc-section=\"indicator\"]')];\n            const activeIndicator = findSingle(this.$refs.indicatorContent, '[data-pc-section=\"indicator\"] > button[tabindex=\"0\"]');\n\n            return indicators.findIndex((ind) => ind === activeIndicator.parentElement);\n        },\n        changedFocusedIndicator(prevInd, nextInd) {\n            const indicators = [...find(this.$refs.indicatorContent, '[data-pc-section=\"indicator\"]')];\n\n            indicators[prevInd].children[0].tabIndex = '-1';\n            indicators[nextInd].children[0].tabIndex = '0';\n            indicators[nextInd].children[0].focus();\n        },\n        bindDocumentListeners() {\n            if (!this.documentResizeListener) {\n                this.documentResizeListener = (e) => {\n                    this.calculatePosition(e);\n                };\n\n                window.addEventListener('resize', this.documentResizeListener);\n            }\n        },\n        unbindDocumentListeners() {\n            if (this.documentResizeListener) {\n                window.removeEventListener('resize', this.documentResizeListener);\n                this.documentResizeListener = null;\n            }\n        },\n        startAutoplay() {\n            this.interval = setInterval(() => {\n                if (this.d_page === this.totalIndicators - 1) {\n                    this.step(-1, 0);\n                } else {\n                    this.step(-1, this.d_page + 1);\n                }\n            }, this.autoplayInterval);\n        },\n        stopAutoplay() {\n            if (this.interval) {\n                clearInterval(this.interval);\n            }\n        },\n        createStyle() {\n            if (!this.carouselStyle) {\n                this.carouselStyle = document.createElement('style');\n                this.carouselStyle.type = 'text/css';\n                setAttribute(this.carouselStyle, 'nonce', this.$primevue?.config?.csp?.nonce);\n                document.body.appendChild(this.carouselStyle);\n            }\n\n            let innerHTML = `\n                .p-carousel[${this.$attrSelector}] .p-carousel-item {\n                    flex: 1 0 ${100 / this.d_numVisible}%\n                }\n            `;\n\n            if (this.responsiveOptions && !this.isUnstyled) {\n                let _responsiveOptions = [...this.responsiveOptions];\n                const comparer = localeComparator();\n\n                _responsiveOptions.sort((data1, data2) => {\n                    const value1 = data1.breakpoint;\n                    const value2 = data2.breakpoint;\n\n                    return sort(value1, value2, -1, comparer);\n                });\n\n                for (let i = 0; i < _responsiveOptions.length; i++) {\n                    let res = _responsiveOptions[i];\n\n                    innerHTML += `\n                        @media screen and (max-width: ${res.breakpoint}) {\n                            .p-carousel[${this.$attrSelector}] .p-carousel-item {\n                                flex: 1 0 ${100 / res.numVisible}%\n                            }\n                        }\n                    `;\n                }\n            }\n\n            this.carouselStyle.innerHTML = innerHTML;\n        },\n        isVertical() {\n            return this.orientation === 'vertical';\n        },\n        hasValidItemCount() {\n            return this.value && this.value.length > this.d_numVisible;\n        },\n        isCircular() {\n            return this.hasValidItemCount() && this.d_circular;\n        },\n        isAutoplay() {\n            return this.hasValidItemCount() && this.autoplayInterval && this.allowAutoplay;\n        },\n        firstIndex() {\n            return this.isCircular() ? -1 * (this.totalShiftedItems + this.d_numVisible) : this.totalShiftedItems * -1;\n        },\n        lastIndex() {\n            return this.firstIndex() + this.d_numVisible - 1;\n        },\n        ariaSlideNumber(value) {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.slideNumber.replace(/{slideNumber}/g, value) : undefined;\n        },\n        ariaPageLabel(value) {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.pageLabel.replace(/{page}/g, value) : undefined;\n        }\n    },\n    computed: {\n        totalIndicators() {\n            return this.value ? Math.max(Math.ceil((this.value.length - this.d_numVisible) / this.d_numScroll) + 1, 0) : 0;\n        },\n        backwardIsDisabled() {\n            return this.value && (!this.circular || this.value.length < this.d_numVisible) && this.d_page === 0;\n        },\n        forwardIsDisabled() {\n            return this.value && (!this.circular || this.value.length < this.d_numVisible) && (this.d_page === this.totalIndicators - 1 || this.totalIndicators === 0);\n        },\n        ariaSlideLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.slide : undefined;\n        },\n        ariaPrevButtonLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.prevPageLabel : undefined;\n        },\n        ariaNextButtonLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.nextPageLabel : undefined;\n        },\n        empty() {\n            return !this.value || this.value.length === 0;\n        },\n        emptyMessageText() {\n            return this.$primevue.config?.locale?.emptyMessage || '';\n        }\n    },\n    components: {\n        Button,\n        ChevronRightIcon,\n        ChevronDownIcon,\n        ChevronLeftIcon,\n        ChevronUpIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('root')\" role=\"region\" v-bind=\"ptmi('root')\">\n        <div v-if=\"$slots.header\" :class=\"cx('header')\" v-bind=\"ptm('header')\">\n            <slot name=\"header\"></slot>\n        </div>\n        <div v-if=\"!empty\" :class=\"[cx('contentContainer'), containerClass]\" v-bind=\"ptm('contentContainer')\">\n            <div :class=\"[cx('content'), contentClass]\" :aria-live=\"allowAutoplay ? 'polite' : 'off'\" v-bind=\"ptm('content')\">\n                <Button\n                    v-if=\"showNavigators\"\n                    :class=\"cx('pcPrevButton')\"\n                    :disabled=\"backwardIsDisabled\"\n                    :aria-label=\"ariaPrevButtonLabel\"\n                    :unstyled=\"unstyled\"\n                    @click=\"navBackward\"\n                    v-bind=\"prevButtonProps\"\n                    :pt=\"ptm('pcPrevButton')\"\n                    data-pc-group-section=\"navigator\"\n                >\n                    <template #icon=\"slotProps\">\n                        <slot name=\"previcon\">\n                            <component :is=\"isVertical() ? 'ChevronUpIcon' : 'ChevronLeftIcon'\" :class=\"slotProps.icon\" v-bind=\"ptm('pcPrevButton')['icon']\" />\n                        </slot>\n                    </template>\n                </Button>\n                <div :class=\"cx('viewport')\" :style=\"[{ height: isVertical() ? verticalViewPortHeight : 'auto' }]\" @touchend=\"onTouchEnd\" @touchstart=\"onTouchStart\" @touchmove=\"onTouchMove\" v-bind=\"ptm('viewport')\">\n                    <div ref=\"itemsContainer\" :class=\"cx('itemList')\" @transitionend=\"onTransitionEnd\" v-bind=\"ptm('itemList')\">\n                        <template v-if=\"isCircular()\">\n                            <div\n                                v-for=\"(item, index) of value.slice(-1 * d_numVisible)\"\n                                :key=\"index + '_scloned'\"\n                                :class=\"cx('itemClone', { index, value, totalShiftedItems, d_numVisible })\"\n                                v-bind=\"ptm('itemClone')\"\n                                :data-p-carousel-item-active=\"totalShiftedItems * -1 === value.length + d_numVisible\"\n                                :data-p-carousel-item-start=\"index === 0\"\n                                :data-p-carousel-item-end=\"value.slice(-1 * d_numVisible).length - 1 === index\"\n                            >\n                                <slot name=\"item\" :data=\"item\" :index=\"index\"></slot>\n                            </div>\n                        </template>\n                        <div\n                            v-for=\"(item, index) of value\"\n                            :key=\"index\"\n                            :class=\"cx('item', { index })\"\n                            role=\"group\"\n                            :aria-hidden=\"firstIndex() > index || lastIndex() < index ? true : undefined\"\n                            :aria-label=\"ariaSlideNumber(index)\"\n                            :aria-roledescription=\"ariaSlideLabel\"\n                            v-bind=\"getItemPTOptions('item', index)\"\n                            :data-p-carousel-item-active=\"firstIndex() <= index && lastIndex() >= index\"\n                            :data-p-carousel-item-start=\"firstIndex() === index\"\n                            :data-p-carousel-item-end=\"lastIndex() === index\"\n                        >\n                            <slot name=\"item\" :data=\"item\" :index=\"index\"></slot>\n                        </div>\n                        <template v-if=\"isCircular()\">\n                            <div v-for=\"(item, index) of value.slice(0, d_numVisible)\" :key=\"index + '_fcloned'\" :class=\"cx('itemClone', { index, value, totalShiftedItems, d_numVisible })\" v-bind=\"ptm('itemClone')\">\n                                <slot name=\"item\" :data=\"item\" :index=\"index\"></slot>\n                            </div>\n                        </template>\n                    </div>\n                </div>\n                <Button\n                    v-if=\"showNavigators\"\n                    :class=\"cx('pcNextButton')\"\n                    :disabled=\"forwardIsDisabled\"\n                    :aria-label=\"ariaNextButtonLabel\"\n                    :unstyled=\"unstyled\"\n                    @click=\"navForward\"\n                    v-bind=\"nextButtonProps\"\n                    :pt=\"ptm('pcNextButton')\"\n                    data-pc-group-section=\"navigator\"\n                >\n                    <template #icon=\"slotProps\">\n                        <slot name=\"nexticon\">\n                            <component :is=\"isVertical() ? 'ChevronDownIcon' : 'ChevronRightIcon'\" :class=\"slotProps.class\" v-bind=\"ptm('pcNextButton')['icon']\" />\n                        </slot>\n                    </template>\n                </Button>\n            </div>\n            <ul v-if=\"totalIndicators >= 0 && showIndicators\" ref=\"indicatorContent\" :class=\"[cx('indicatorList'), indicatorsContentClass]\" @keydown=\"onIndicatorKeydown\" v-bind=\"ptm('indicatorList')\">\n                <li v-for=\"(indicator, i) of totalIndicators\" :key=\"'p-carousel-indicator-' + i.toString()\" :class=\"cx('indicator', { index: i })\" v-bind=\"getIndicatorPTOptions('indicator', i)\" :data-p-active=\"d_page === i\">\n                    <button\n                        :class=\"cx('indicatorButton')\"\n                        type=\"button\"\n                        :tabindex=\"d_page === i ? '0' : '-1'\"\n                        :aria-label=\"ariaPageLabel(i + 1)\"\n                        :aria-current=\"d_page === i ? 'page' : undefined\"\n                        @click=\"onIndicatorClick($event, i)\"\n                        v-bind=\"getIndicatorPTOptions('indicatorButton', i)\"\n                    />\n                </li>\n            </ul>\n        </div>\n        <slot v-else name=\"empty\">\n            {{ emptyMessageText }}\n        </slot>\n        <div v-if=\"$slots.footer\" :class=\"cx('footer')\" v-bind=\"ptm('footer')\">\n            <slot name=\"footer\"></slot>\n        </div>\n    </div>\n</template>\n\n<script>\nimport { addClass, find, findSingle, getAttribute, removeClass, setAttribute } from '@primeuix/utils/dom';\nimport { localeComparator, sort } from '@primeuix/utils/object';\nimport ChevronDownIcon from '@primevue/icons/chevrondown';\nimport ChevronLeftIcon from '@primevue/icons/chevronleft';\nimport ChevronRightIcon from '@primevue/icons/chevronright';\nimport ChevronUpIcon from '@primevue/icons/chevronup';\nimport Button from 'primevue/button';\nimport Ripple from 'primevue/ripple';\nimport BaseCarousel from './BaseCarousel.vue';\n\nexport default {\n    name: 'Carousel',\n    extends: BaseCarousel,\n    inheritAttrs: false,\n    emits: ['update:page'],\n    isRemainingItemsAdded: false,\n    data() {\n        return {\n            remainingItems: 0,\n            d_numVisible: this.numVisible,\n            d_numScroll: this.numScroll,\n            d_oldNumScroll: 0,\n            d_oldNumVisible: 0,\n            d_oldValue: null,\n            d_page: this.page,\n            totalShiftedItems: this.page * this.numScroll * -1,\n            allowAutoplay: !!this.autoplayInterval,\n            d_circular: this.circular || this.allowAutoplay,\n            swipeThreshold: 20\n        };\n    },\n    watch: {\n        page(newValue) {\n            if (newValue > this.d_page) {\n                this.navForward({}, newValue);\n            } else if (newValue < this.d_page) {\n                this.navBackward({}, newValue);\n            }\n\n            this.d_page = newValue;\n        },\n        circular(newValue) {\n            this.d_circular = newValue;\n        },\n        numVisible(newValue, oldValue) {\n            this.d_numVisible = newValue;\n            this.d_oldNumVisible = oldValue;\n        },\n        numScroll(newValue, oldValue) {\n            this.d_oldNumScroll = oldValue;\n            this.d_numScroll = newValue;\n        },\n        value(oldValue) {\n            this.d_oldValue = oldValue;\n        }\n    },\n    mounted() {\n        let stateChanged = false;\n\n        this.createStyle();\n        this.calculatePosition();\n\n        if (this.responsiveOptions) {\n            this.bindDocumentListeners();\n        }\n\n        if (this.isCircular()) {\n            let totalShiftedItems = this.totalShiftedItems;\n\n            if (this.d_page === 0) {\n                totalShiftedItems = -1 * this.d_numVisible;\n            } else if (totalShiftedItems === 0) {\n                totalShiftedItems = -1 * this.value.length;\n\n                if (this.remainingItems > 0) {\n                    this.isRemainingItemsAdded = true;\n                }\n            }\n\n            if (totalShiftedItems !== this.totalShiftedItems) {\n                this.totalShiftedItems = totalShiftedItems;\n\n                stateChanged = true;\n            }\n        }\n\n        if (!stateChanged && this.isAutoplay()) {\n            this.startAutoplay();\n        }\n    },\n    updated() {\n        if (!this.empty) {\n            const isCircular = this.isCircular();\n            let stateChanged = false;\n            let totalShiftedItems = this.totalShiftedItems;\n\n            if (this.autoplayInterval) {\n                this.stopAutoplay();\n            }\n\n            if (this.d_oldNumScroll !== this.d_numScroll || this.d_oldNumVisible !== this.d_numVisible || this.d_oldValue.length !== this.value.length) {\n                this.remainingItems = (this.value.length - this.d_numVisible) % this.d_numScroll;\n\n                let page = this.d_page;\n\n                if (this.totalIndicators !== 0 && page >= this.totalIndicators) {\n                    page = this.totalIndicators - 1;\n                    this.$emit('update:page', page);\n                    this.d_page = page;\n                    stateChanged = true;\n                }\n\n                totalShiftedItems = page * this.d_numScroll * -1;\n\n                if (isCircular) {\n                    totalShiftedItems -= this.d_numVisible;\n                }\n\n                if (page === this.totalIndicators - 1 && this.remainingItems > 0) {\n                    totalShiftedItems += -1 * this.remainingItems + this.d_numScroll;\n                    this.isRemainingItemsAdded = true;\n                } else {\n                    this.isRemainingItemsAdded = false;\n                }\n\n                if (totalShiftedItems !== this.totalShiftedItems) {\n                    this.totalShiftedItems = totalShiftedItems;\n                    stateChanged = true;\n                }\n\n                this.d_oldNumScroll = this.d_numScroll;\n                this.d_oldNumVisible = this.d_numVisible;\n                this.d_oldValue = this.value;\n                this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;\n            }\n\n            if (isCircular) {\n                if (this.d_page === 0) {\n                    totalShiftedItems = -1 * this.d_numVisible;\n                } else if (totalShiftedItems === 0) {\n                    totalShiftedItems = -1 * this.value.length;\n\n                    if (this.remainingItems > 0) {\n                        this.isRemainingItemsAdded = true;\n                    }\n                }\n\n                if (totalShiftedItems !== this.totalShiftedItems) {\n                    this.totalShiftedItems = totalShiftedItems;\n\n                    stateChanged = true;\n                }\n            }\n\n            if (!stateChanged && this.isAutoplay()) {\n                this.startAutoplay();\n            }\n        }\n    },\n    beforeUnmount() {\n        if (this.responsiveOptions) {\n            this.unbindDocumentListeners();\n        }\n\n        if (this.autoplayInterval) {\n            this.stopAutoplay();\n        }\n    },\n    methods: {\n        getIndicatorPTOptions(key, index) {\n            return this.ptm(key, {\n                context: {\n                    highlighted: index === this.d_page\n                }\n            });\n        },\n        getItemPTOptions(key, index) {\n            return this.ptm(key, {\n                context: {\n                    index,\n                    active: this.firstIndex() <= index && this.lastIndex() >= index,\n                    start: this.firstIndex() === index,\n                    end: this.lastIndex() === index\n                }\n            });\n        },\n        step(dir, page) {\n            let totalShiftedItems = this.totalShiftedItems;\n            const isCircular = this.isCircular();\n\n            if (page != null) {\n                totalShiftedItems = this.d_numScroll * page * -1;\n\n                if (isCircular) {\n                    totalShiftedItems -= this.d_numVisible;\n                }\n\n                this.isRemainingItemsAdded = false;\n            } else {\n                totalShiftedItems += this.d_numScroll * dir;\n\n                if (this.isRemainingItemsAdded) {\n                    totalShiftedItems += this.remainingItems - this.d_numScroll * dir;\n                    this.isRemainingItemsAdded = false;\n                }\n\n                let originalShiftedItems = isCircular ? totalShiftedItems + this.d_numVisible : totalShiftedItems;\n\n                page = Math.abs(Math.floor(originalShiftedItems / this.d_numScroll));\n            }\n\n            if (isCircular && this.d_page === this.totalIndicators - 1 && dir === -1) {\n                totalShiftedItems = -1 * (this.value.length + this.d_numVisible);\n                page = 0;\n            } else if (isCircular && this.d_page === 0 && dir === 1) {\n                totalShiftedItems = 0;\n                page = this.totalIndicators - 1;\n            } else if (page === this.totalIndicators - 1 && this.remainingItems > 0) {\n                totalShiftedItems += this.remainingItems * -1 - this.d_numScroll * dir;\n                this.isRemainingItemsAdded = true;\n            }\n\n            if (this.$refs.itemsContainer) {\n                !this.isUnstyled && removeClass(this.$refs.itemsContainer, 'p-items-hidden');\n                this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;\n                this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';\n            }\n\n            this.totalShiftedItems = totalShiftedItems;\n\n            this.$emit('update:page', page);\n            this.d_page = page;\n        },\n        calculatePosition() {\n            if (this.$refs.itemsContainer && this.responsiveOptions) {\n                let windowWidth = window.innerWidth;\n                let matchedResponsiveOptionsData = {\n                    numVisible: this.numVisible,\n                    numScroll: this.numScroll\n                };\n\n                for (let i = 0; i < this.responsiveOptions.length; i++) {\n                    let res = this.responsiveOptions[i];\n\n                    if (parseInt(res.breakpoint, 10) >= windowWidth) {\n                        matchedResponsiveOptionsData = res;\n                    }\n                }\n\n                if (this.d_numScroll !== matchedResponsiveOptionsData.numScroll) {\n                    let page = this.d_page;\n\n                    page = parseInt((page * this.d_numScroll) / matchedResponsiveOptionsData.numScroll);\n\n                    this.totalShiftedItems = matchedResponsiveOptionsData.numScroll * page * -1;\n\n                    if (this.isCircular()) {\n                        this.totalShiftedItems -= matchedResponsiveOptionsData.numVisible;\n                    }\n\n                    this.d_numScroll = matchedResponsiveOptionsData.numScroll;\n\n                    this.$emit('update:page', page);\n                    this.d_page = page;\n                }\n\n                if (this.d_numVisible !== matchedResponsiveOptionsData.numVisible) {\n                    this.d_numVisible = matchedResponsiveOptionsData.numVisible;\n                }\n            }\n        },\n        navBackward(e, index) {\n            if (this.d_circular || this.d_page !== 0) {\n                this.step(1, index);\n            }\n\n            this.allowAutoplay = false;\n\n            if (e.cancelable) {\n                e.preventDefault();\n            }\n        },\n        navForward(e, index) {\n            if (this.d_circular || this.d_page < this.totalIndicators - 1) {\n                this.step(-1, index);\n            }\n\n            this.allowAutoplay = false;\n\n            if (e.cancelable) {\n                e.preventDefault();\n            }\n        },\n        onIndicatorClick(e, index) {\n            let page = this.d_page;\n\n            if (index > page) {\n                this.navForward(e, index);\n            } else if (index < page) {\n                this.navBackward(e, index);\n            }\n        },\n        onTransitionEnd() {\n            if (this.$refs.itemsContainer) {\n                !this.isUnstyled && addClass(this.$refs.itemsContainer, 'p-items-hidden');\n                this.$refs.itemsContainer.style.transition = '';\n\n                if ((this.d_page === 0 || this.d_page === this.totalIndicators - 1) && this.isCircular()) {\n                    this.$refs.itemsContainer.style.transform = this.isVertical() ? `translate3d(0, ${this.totalShiftedItems * (100 / this.d_numVisible)}%, 0)` : `translate3d(${this.totalShiftedItems * (100 / this.d_numVisible)}%, 0, 0)`;\n                }\n            }\n        },\n        onTouchStart(e) {\n            let touchobj = e.changedTouches[0];\n\n            this.startPos = {\n                x: touchobj.pageX,\n                y: touchobj.pageY\n            };\n        },\n        onTouchMove(e) {\n            const touchobj = e.changedTouches[0];\n            const diff = this.isVertical() ? touchobj.pageY - this.startPos.y : touchobj.pageX - this.startPos.x;\n\n            if (Math.abs(diff) > this.swipeThreshold && e.cancelable) {\n                e.preventDefault();\n            }\n        },\n        onTouchEnd(e) {\n            let touchobj = e.changedTouches[0];\n\n            if (this.isVertical()) {\n                this.changePageOnTouch(e, touchobj.pageY - this.startPos.y);\n            } else {\n                this.changePageOnTouch(e, touchobj.pageX - this.startPos.x);\n            }\n        },\n        changePageOnTouch(e, diff) {\n            if (Math.abs(diff) > this.swipeThreshold) {\n                if (diff < 0) {\n                    // left\n                    this.navForward(e);\n                } else {\n                    // right\n                    this.navBackward(e);\n                }\n            }\n        },\n        onIndicatorKeydown(event) {\n            switch (event.code) {\n                case 'ArrowRight':\n                    this.onRightKey();\n                    break;\n\n                case 'ArrowLeft':\n                    this.onLeftKey();\n                    break;\n\n                case 'Home':\n                    this.onHomeKey();\n                    event.preventDefault();\n                    break;\n\n                case 'End':\n                    this.onEndKey();\n                    event.preventDefault();\n                    break;\n\n                case 'ArrowUp':\n                case 'ArrowDown':\n                case 'PageUp':\n                case 'PageDown':\n                    event.preventDefault();\n                    break;\n\n                case 'Tab':\n                    this.onTabKey();\n                    break;\n\n                default:\n                    break;\n            }\n        },\n        onRightKey() {\n            const indicators = [...find(this.$refs.indicatorContent, '[data-pc-section=\"indicator\"]')];\n            const activeIndex = this.findFocusedIndicatorIndex();\n\n            this.changedFocusedI