primevue/galleria/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/galleria/BaseGalleria.vue","../../src/galleria/GalleriaItem.vue","../../src/galleria/GalleriaItem.vue?vue&type=template&id=7a6d5c4d&lang.js","../../src/galleria/GalleriaThumbnails.vue","../../src/galleria/GalleriaThumbnails.vue?vue&type=template&id=7620fc09&lang.js","../../src/galleria/GalleriaContent.vue","../../src/galleria/GalleriaContent.vue?vue&type=template&id=ad149006&lang.js","../../src/galleria/Galleria.vue","../../src/galleria/Galleria.vue?vue&type=template&id=248499cc&lang.js"],"sourcesContent":["<script>\nimport BaseComponent from '@primevue/core/basecomponent';\nimport GalleriaStyle from 'primevue/galleria/style';\n\nexport default {\n    name: 'BaseGalleria',\n    extends: BaseComponent,\n    props: {\n        id: {\n            type: String,\n            default: null\n        },\n        value: {\n            type: Array,\n            default: null\n        },\n        activeIndex: {\n            type: Number,\n            default: 0\n        },\n        fullScreen: {\n            type: Boolean,\n            default: false\n        },\n        visible: {\n            type: Boolean,\n            default: false\n        },\n        numVisible: {\n            type: Number,\n            default: 3\n        },\n        responsiveOptions: {\n            type: Array,\n            default: null\n        },\n        showItemNavigators: {\n            type: Boolean,\n            default: false\n        },\n        showThumbnailNavigators: {\n            type: Boolean,\n            default: true\n        },\n        showItemNavigatorsOnHover: {\n            type: Boolean,\n            default: false\n        },\n        changeItemOnIndicatorHover: {\n            type: Boolean,\n            default: false\n        },\n        circular: {\n            type: Boolean,\n            default: false\n        },\n        autoPlay: {\n            type: Boolean,\n            default: false\n        },\n        transitionInterval: {\n            type: Number,\n            default: 4000\n        },\n        showThumbnails: {\n            type: Boolean,\n            default: true\n        },\n        thumbnailsPosition: {\n            type: String,\n            default: 'bottom'\n        },\n        verticalThumbnailViewPortHeight: {\n            type: String,\n            default: '300px'\n        },\n        showIndicators: {\n            type: Boolean,\n            default: false\n        },\n        showIndicatorsOnItem: {\n            type: Boolean,\n            default: false\n        },\n        indicatorsPosition: {\n            type: String,\n            default: 'bottom'\n        },\n        baseZIndex: {\n            type: Number,\n            default: 0\n        },\n        maskClass: {\n            type: String,\n            default: null\n        },\n        containerStyle: {\n            type: null,\n            default: null\n        },\n        containerClass: {\n            type: null,\n            default: null\n        },\n        containerProps: {\n            type: null,\n            default: null\n        },\n        prevButtonProps: {\n            type: null,\n            default: null\n        },\n        nextButtonProps: {\n            type: null,\n            default: null\n        },\n        ariaLabel: {\n            type: String,\n            default: null\n        },\n        ariaRoledescription: {\n            type: String,\n            default: null\n        }\n    },\n    style: GalleriaStyle,\n    provide() {\n        return {\n            $pcGalleria: this,\n            $parentInstance: this\n        };\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('itemsContainer')\" v-bind=\"ptm('itemsContainer')\">\n        <div :class=\"cx('items')\" v-bind=\"ptm('items')\">\n            <button v-if=\"showItemNavigators\" v-ripple type=\"button\" :class=\"cx('prevButton')\" @click=\"navBackward($event)\" :disabled=\"isNavBackwardDisabled\" v-bind=\"ptm('prevButton')\" data-pc-group-section=\"itemnavigator\">\n                <component :is=\"templates.previousitemicon || 'ChevronLeftIcon'\" :class=\"cx('prevIcon')\" v-bind=\"ptm('prevIcon')\" />\n            </button>\n            <div :id=\"id + '_item_' + activeIndex\" :class=\"cx('item')\" role=\"group\" :aria-label=\"ariaSlideNumber(activeIndex + 1)\" :aria-roledescription=\"ariaSlideLabel\" v-bind=\"ptm('item')\">\n                <component v-if=\"templates.item\" :is=\"templates.item\" :item=\"activeItem\" />\n            </div>\n            <button v-if=\"showItemNavigators\" v-ripple type=\"button\" :class=\"cx('nextButton')\" @click=\"navForward($event)\" :disabled=\"isNavForwardDisabled\" v-bind=\"ptm('nextButton')\" data-pc-group-section=\"itemnavigator\">\n                <component :is=\"templates.nextitemicon || 'ChevronRightIcon'\" :class=\"cx('nextIcon')\" v-bind=\"ptm('nextIcon')\" />\n            </button>\n            <div v-if=\"templates['caption']\" :class=\"cx('caption')\" v-bind=\"ptm('caption')\">\n                <component v-if=\"templates.caption\" :is=\"templates.caption\" :item=\"activeItem\" />\n            </div>\n        </div>\n        <ul v-if=\"showIndicators\" ref=\"indicatorContent\" :class=\"cx('indicatorList')\" v-bind=\"ptm('indicatorList')\">\n            <li\n                v-for=\"(item, index) of value\"\n                :key=\"`p-galleria-indicator-${index}`\"\n                :class=\"cx('indicator', { index })\"\n                :aria-label=\"ariaPageLabel(index + 1)\"\n                :aria-selected=\"activeIndex === index\"\n                :aria-controls=\"id + '_item_' + index\"\n                @click=\"onIndicatorClick(index)\"\n                @mouseenter=\"onIndicatorMouseEnter(index)\"\n                @keydown=\"onIndicatorKeyDown($event, index)\"\n                v-bind=\"ptm('indicator', getIndicatorPTOptions(index))\"\n                :data-p-active=\"isIndicatorItemActive(index)\"\n            >\n                <button v-if=\"!templates['indicator']\" type=\"button\" :tabindex=\"activeIndex === index ? '0' : '-1'\" :class=\"cx('indicatorButton')\" v-bind=\"ptm('indicatorButton', getIndicatorPTOptions(index))\"></button>\n                <component v-if=\"templates.indicator\" :is=\"templates.indicator\" :index=\"index\" :activeIndex=\"activeIndex\" :tabindex=\"activeIndex === index ? '0' : '-1'\" />\n            </li>\n        </ul>\n    </div>\n</template>\n\n<script>\nimport { find, findSingle, getAttribute } from '@primeuix/utils/dom';\nimport BaseComponent from '@primevue/core/basecomponent';\nimport ChevronLeftIcon from '@primevue/icons/chevronleft';\nimport ChevronRightIcon from '@primevue/icons/chevronright';\nimport Ripple from 'primevue/ripple';\n\nexport default {\n    name: 'GalleriaItem',\n    hostName: 'Galleria',\n    extends: BaseComponent,\n    emits: ['start-slideshow', 'stop-slideshow', 'update:activeIndex'],\n    props: {\n        circular: {\n            type: Boolean,\n            default: false\n        },\n        activeIndex: {\n            type: Number,\n            default: 0\n        },\n        value: {\n            type: Array,\n            default: null\n        },\n        showItemNavigators: {\n            type: Boolean,\n            default: true\n        },\n        showIndicators: {\n            type: Boolean,\n            default: true\n        },\n        slideShowActive: {\n            type: Boolean,\n            default: true\n        },\n        changeItemOnIndicatorHover: {\n            type: Boolean,\n            default: true\n        },\n        autoPlay: {\n            type: Boolean,\n            default: false\n        },\n        templates: {\n            type: null,\n            default: null\n        },\n        id: {\n            type: String,\n            default: null\n        }\n    },\n    mounted() {\n        if (this.autoPlay) {\n            this.$emit('start-slideshow');\n        }\n    },\n    methods: {\n        getIndicatorPTOptions(index) {\n            return {\n                context: {\n                    highlighted: this.activeIndex === index\n                }\n            };\n        },\n        next() {\n            let nextItemIndex = this.activeIndex + 1;\n            let activeIndex = this.circular && this.value.length - 1 === this.activeIndex ? 0 : nextItemIndex;\n\n            this.$emit('update:activeIndex', activeIndex);\n        },\n        prev() {\n            let prevItemIndex = this.activeIndex !== 0 ? this.activeIndex - 1 : 0;\n            let activeIndex = this.circular && this.activeIndex === 0 ? this.value.length - 1 : prevItemIndex;\n\n            this.$emit('update:activeIndex', activeIndex);\n        },\n        stopSlideShow() {\n            if (this.slideShowActive && this.stopSlideShow) {\n                this.$emit('stop-slideshow');\n            }\n        },\n        navBackward(e) {\n            this.stopSlideShow();\n            this.prev();\n\n            if (e && e.cancelable) {\n                e.preventDefault();\n            }\n        },\n        navForward(e) {\n            this.stopSlideShow();\n            this.next();\n\n            if (e && e.cancelable) {\n                e.preventDefault();\n            }\n        },\n        onIndicatorClick(index) {\n            this.stopSlideShow();\n            this.$emit('update:activeIndex', index);\n        },\n        onIndicatorMouseEnter(index) {\n            if (this.changeItemOnIndicatorHover) {\n                this.stopSlideShow();\n\n                this.$emit('update:activeIndex', index);\n            }\n        },\n        onIndicatorKeyDown(event, index) {\n            switch (event.code) {\n                case 'Enter':\n                case 'NumpadEnter':\n                case 'Space':\n                    this.stopSlideShow();\n\n                    this.$emit('update:activeIndex', index);\n                    event.preventDefault();\n                    break;\n\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 'Tab':\n                    this.onTabKey();\n                    break;\n\n                case 'ArrowDown':\n                case 'ArrowUp':\n                case 'PageUp':\n                case 'PageDown':\n                    event.preventDefault();\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\"] > [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\"] > [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        isIndicatorItemActive(index) {\n            return this.activeIndex === index;\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        activeItem() {\n            return this.value[this.activeIndex];\n        },\n        ariaSlideLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.slide : undefined;\n        },\n        isNavBackwardDisabled() {\n            return !this.circular && this.activeIndex === 0;\n        },\n        isNavForwardDisabled() {\n            return !this.circular && this.activeIndex === this.value.length - 1;\n        }\n    },\n    components: {\n        ChevronLeftIcon: ChevronLeftIcon,\n        ChevronRightIcon: ChevronRightIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('itemsContainer')\" v-bind=\"ptm('itemsContainer')\">\n        <div :class=\"cx('items')\" v-bind=\"ptm('items')\">\n            <button v-if=\"showItemNavigators\" v-ripple type=\"button\" :class=\"cx('prevButton')\" @click=\"navBackward($event)\" :disabled=\"isNavBackwardDisabled\" v-bind=\"ptm('prevButton')\" data-pc-group-section=\"itemnavigator\">\n                <component :is=\"templates.previousitemicon || 'ChevronLeftIcon'\" :class=\"cx('prevIcon')\" v-bind=\"ptm('prevIcon')\" />\n            </button>\n            <div :id=\"id + '_item_' + activeIndex\" :class=\"cx('item')\" role=\"group\" :aria-label=\"ariaSlideNumber(activeIndex + 1)\" :aria-roledescription=\"ariaSlideLabel\" v-bind=\"ptm('item')\">\n                <component v-if=\"templates.item\" :is=\"templates.item\" :item=\"activeItem\" />\n            </div>\n            <button v-if=\"showItemNavigators\" v-ripple type=\"button\" :class=\"cx('nextButton')\" @click=\"navForward($event)\" :disabled=\"isNavForwardDisabled\" v-bind=\"ptm('nextButton')\" data-pc-group-section=\"itemnavigator\">\n                <component :is=\"templates.nextitemicon || 'ChevronRightIcon'\" :class=\"cx('nextIcon')\" v-bind=\"ptm('nextIcon')\" />\n            </button>\n            <div v-if=\"templates['caption']\" :class=\"cx('caption')\" v-bind=\"ptm('caption')\">\n                <component v-if=\"templates.caption\" :is=\"templates.caption\" :item=\"activeItem\" />\n            </div>\n        </div>\n        <ul v-if=\"showIndicators\" ref=\"indicatorContent\" :class=\"cx('indicatorList')\" v-bind=\"ptm('indicatorList')\">\n            <li\n                v-for=\"(item, index) of value\"\n                :key=\"`p-galleria-indicator-${index}`\"\n                :class=\"cx('indicator', { index })\"\n                :aria-label=\"ariaPageLabel(index + 1)\"\n                :aria-selected=\"activeIndex === index\"\n                :aria-controls=\"id + '_item_' + index\"\n                @click=\"onIndicatorClick(index)\"\n                @mouseenter=\"onIndicatorMouseEnter(index)\"\n                @keydown=\"onIndicatorKeyDown($event, index)\"\n                v-bind=\"ptm('indicator', getIndicatorPTOptions(index))\"\n                :data-p-active=\"isIndicatorItemActive(index)\"\n            >\n                <button v-if=\"!templates['indicator']\" type=\"button\" :tabindex=\"activeIndex === index ? '0' : '-1'\" :class=\"cx('indicatorButton')\" v-bind=\"ptm('indicatorButton', getIndicatorPTOptions(index))\"></button>\n                <component v-if=\"templates.indicator\" :is=\"templates.indicator\" :index=\"index\" :activeIndex=\"activeIndex\" :tabindex=\"activeIndex === index ? '0' : '-1'\" />\n            </li>\n        </ul>\n    </div>\n</template>\n\n<script>\nimport { find, findSingle, getAttribute } from '@primeuix/utils/dom';\nimport BaseComponent from '@primevue/core/basecomponent';\nimport ChevronLeftIcon from '@primevue/icons/chevronleft';\nimport ChevronRightIcon from '@primevue/icons/chevronright';\nimport Ripple from 'primevue/ripple';\n\nexport default {\n    name: 'GalleriaItem',\n    hostName: 'Galleria',\n    extends: BaseComponent,\n    emits: ['start-slideshow', 'stop-slideshow', 'update:activeIndex'],\n    props: {\n        circular: {\n            type: Boolean,\n            default: false\n        },\n        activeIndex: {\n            type: Number,\n            default: 0\n        },\n        value: {\n            type: Array,\n            default: null\n        },\n        showItemNavigators: {\n            type: Boolean,\n            default: true\n        },\n        showIndicators: {\n            type: Boolean,\n            default: true\n        },\n        slideShowActive: {\n            type: Boolean,\n            default: true\n        },\n        changeItemOnIndicatorHover: {\n            type: Boolean,\n            default: true\n        },\n        autoPlay: {\n            type: Boolean,\n            default: false\n        },\n        templates: {\n            type: null,\n            default: null\n        },\n        id: {\n            type: String,\n            default: null\n        }\n    },\n    mounted() {\n        if (this.autoPlay) {\n            this.$emit('start-slideshow');\n        }\n    },\n    methods: {\n        getIndicatorPTOptions(index) {\n            return {\n                context: {\n                    highlighted: this.activeIndex === index\n                }\n            };\n        },\n        next() {\n            let nextItemIndex = this.activeIndex + 1;\n            let activeIndex = this.circular && this.value.length - 1 === this.activeIndex ? 0 : nextItemIndex;\n\n            this.$emit('update:activeIndex', activeIndex);\n        },\n        prev() {\n            let prevItemIndex = this.activeIndex !== 0 ? this.activeIndex - 1 : 0;\n            let activeIndex = this.circular && this.activeIndex === 0 ? this.value.length - 1 : prevItemIndex;\n\n            this.$emit('update:activeIndex', activeIndex);\n        },\n        stopSlideShow() {\n            if (this.slideShowActive && this.stopSlideShow) {\n                this.$emit('stop-slideshow');\n            }\n        },\n        navBackward(e) {\n            this.stopSlideShow();\n            this.prev();\n\n            if (e && e.cancelable) {\n                e.preventDefault();\n            }\n        },\n        navForward(e) {\n            this.stopSlideShow();\n            this.next();\n\n            if (e && e.cancelable) {\n                e.preventDefault();\n            }\n        },\n        onIndicatorClick(index) {\n            this.stopSlideShow();\n            this.$emit('update:activeIndex', index);\n        },\n        onIndicatorMouseEnter(index) {\n            if (this.changeItemOnIndicatorHover) {\n                this.stopSlideShow();\n\n                this.$emit('update:activeIndex', index);\n            }\n        },\n        onIndicatorKeyDown(event, index) {\n            switch (event.code) {\n                case 'Enter':\n                case 'NumpadEnter':\n                case 'Space':\n                    this.stopSlideShow();\n\n                    this.$emit('update:activeIndex', index);\n                    event.preventDefault();\n                    break;\n\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 'Tab':\n                    this.onTabKey();\n                    break;\n\n                case 'ArrowDown':\n                case 'ArrowUp':\n                case 'PageUp':\n                case 'PageDown':\n                    event.preventDefault();\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\"] > [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\"] > [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        isIndicatorItemActive(index) {\n            return this.activeIndex === index;\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        activeItem() {\n            return this.value[this.activeIndex];\n        },\n        ariaSlideLabel() {\n            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.slide : undefined;\n        },\n        isNavBackwardDisabled() {\n            return !this.circular && this.activeIndex === 0;\n        },\n        isNavForwardDisabled() {\n            return !this.circular && this.activeIndex === this.value.length - 1;\n        }\n    },\n    components: {\n        ChevronLeftIcon: ChevronLeftIcon,\n        ChevronRightIcon: ChevronRightIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('thumbnails')\" v-bind=\"ptm('thumbnails')\">\n        <div :class=\"cx('thumbnailContent')\" v-bind=\"ptm('thumbnailContent')\">\n            <button\n                v-if=\"showThumbnailNavigators\"\n                v-ripple\n                :class=\"cx('thumbnailPrevButton')\"\n                :disabled=\"isNavBackwardDisabled\"\n                type=\"button\"\n                :aria-label=\"ariaPrevButtonLabel\"\n                @click=\"navBackward($event)\"\n                v-bind=\"{ ...prevButtonProps, ...ptm('thumbnailPrevButton') }\"\n                data-pc-group-section=\"thumbnailnavigator\"\n            >\n                <component :is=\"templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')\" :class=\"cx('thumbnailPrevIcon')\" v-bind=\"ptm('thumbnailPrevIcon')\" />\n            </button>\n            <div :class=\"cx('thumbnailsViewport')\" :style=\"{ height: isVertical ? contentHeight : '' }\" v-bind=\"ptm('thumbnailsViewport')\">\n                <div\n                    ref=\"itemsContainer\"\n                    :class=\"cx('thumbnailItems')\"\n                    role=\"tablist\"\n                    @transitionend=\"onTransitionEnd($event)\"\n                    @touchstart=\"onTouchStart($event)\"\n                    @touchmove=\"onTouchMove($event)\"\n                    @touchend=\"onTouchEnd($event)\"\n                    v-bind=\"ptm('thumbnailItems')\"\n                >\n                    <div\n                        v-for=\"(item, index) of value\"\n                        :key=\"`p-galleria-thumbnail-item-${index}`\"\n                        :class=\"cx('thumbnailItem', { index, activeIndex })\"\n                        role=\"tab\"\n                        :data-p-active=\"activeIndex === index\"\n                        :aria-selected=\"activeIndex === index\"\n                        :aria-controls=\"containerId + '_item_' + index\"\n                        @keydown=\"onThumbnailKeydown($event, index)\"\n                        v-bind=\"ptm('thumbnailItem')\"\n                        :data-p-galleria-thumbnail-item-current=\"activeIndex === index\"\n                        :data-p-galleria-thumbnail-item-active=\"isItemActive(index)\"\n                        :data-p-galleria-thumbnail-item-start=\"firstItemAciveIndex() === index\"\n                        :data-p-galleria-thumbnail-item-end=\"lastItemActiveIndex() === index\"\n                    >\n                        <div\n                            :class=\"cx('thumbnail')\"\n                            :tabindex=\"activeIndex === index ? '0' : '-1'\"\n                            :aria-label=\"ariaPageLabel(index + 1)\"\n                            :aria-current=\"activeIndex === index ? 'page' : undefined\"\n                            @click=\"onItemClick(index)\"\n                            v-bind=\"ptm('thumbnail')\"\n                        >\n                            <component v-if=\"templates.thumbnail\" :is=\"templates.thumbnail\" :item=\"item\" />\n                        </div>\n                    </div>\n                </div>\n            </div>\n            <button\n                v-if=\"showThumbnailNavigators\"\n                v-ripple\n                :class=\"cx('thumbnailNextButton')\"\n                :disabled=\"isNavForwardDisabled\"\n                type=\"button\"\n                :aria-label=\"ariaNextButtonLabel\"\n                @click=\"navForward($event)\"\n                v-bind=\"{ ...nextButtonProps, ...ptm('thumbnailNextButton') }\"\n                data-pc-group-section=\"thumbnailnavigator\"\n            >\n                <component :is=\"templates.nextthumbnailicon || (isVertical ? 'ChevronDownIcon' : 'ChevronRightIcon')\" :class=\"cx('thumbnailNextIcon')\" v-bind=\"ptm('thumbnailNextIcon')\" />\n            </button>\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 BaseComponent from '@primevue/core/basecomponent';\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 Ripple from 'primevue/ripple';\n\nexport default {\n    name: 'GalleriaThumbnails',\n    hostName: 'Galleria',\n    extends: BaseComponent,\n    emits: ['stop-slideshow', 'update:activeIndex'],\n    props: {\n        containerId: {\n            type: String,\n            default: null\n        },\n        value: {\n            type: Array,\n            default: null\n        },\n        numVisible: {\n            type: Number,\n            default: 3\n        },\n        activeIndex: {\n            type: Number,\n            default: 0\n        },\n        isVertical: {\n            type: Boolean,\n            default: false\n        },\n        slideShowActive: {\n            type: Boolean,\n            default: false\n        },\n        circular: {\n            type: Boolean,\n            default: false\n        },\n        responsiveOptions: {\n            type: Array,\n            default: null\n        },\n        contentHeight: {\n            type: String,\n            default: '300px'\n        },\n        showThumbnailNavigators: {\n            type: Boolean,\n            default: true\n        },\n        templates: {\n            type: null,\n            default: null\n        },\n        prevButtonProps: {\n            type: null,\n            default: null\n        },\n        nextButtonProps: {\n            type: null,\n            default: null\n        }\n    },\n    startPos: null,\n    thumbnailsStyle: null,\n    sortedResponsiveOptions: null,\n    data() {\n        return {\n            d_numVisible: this.numVisible,\n            d_oldNumVisible: this.numVisible,\n            d_activeIndex: this.activeIndex,\n            d_oldActiveItemIndex: this.activeIndex,\n            totalShiftedItems: 0,\n            page: 0\n        };\n    },\n    watch: {\n        numVisible(newValue, oldValue) {\n            this.d_numVisible = newValue;\n            this.d_oldNumVisible = oldValue;\n        },\n        activeIndex(newValue, oldValue) {\n            this.d_activeIndex = newValue;\n            this.d_oldActiveItemIndex = oldValue;\n        }\n    },\n    mounted() {\n        this.createStyle();\n        this.calculatePosition();\n\n        if (this.responsiveOptions) {\n            this.bindDocumentListeners();\n        }\n    },\n    updated() {\n        let totalShiftedItems = this.totalShiftedItems;\n\n        if (this.d_oldNumVisible !== this.d_numVisible || this.d_oldActiveItemIndex !== this.d_activeIndex) {\n            if (this.d_activeIndex <= this.getMedianItemIndex()) {\n                totalShiftedItems = 0;\n            } else if (this.value.length - this.d_numVisible + this.getMedianItemIndex() < this.d_activeIndex) {\n                totalShiftedItems = this.d_numVisible - this.value.length;\n            } else if (this.value.length - this.d_numVisible < this.d_activeIndex && this.d_numVisible % 2 === 0) {\n                totalShiftedItems = this.d_activeIndex * -1 + this.getMedianItemIndex() + 1;\n            } else {\n                totalShiftedItems = this.d_activeIndex * -1 + this.getMedianItemIndex();\n            }\n\n            if (totalShiftedItems !== this.totalShiftedItems) {\n                this.totalShiftedItems = totalShiftedItems;\n            }\n\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            if (this.d_oldActiveItemIndex !== this.d_activeIndex) {\n                document.body.setAttribute('data-p-items-hidden', 'false');\n                !this.isUnstyled && removeClass(this.$refs.itemsContainer, 'p-items-hidden');\n                this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';\n            }\n\n            this.d_oldActiveItemIndex = this.d_activeIndex;\n            this.d_oldNumVisible = this.d_numVisible;\n        }\n    },\n    beforeUnmount() {\n        if (this.responsiveOptions) {\n            this.unbindDocumentListeners();\n        }\n\n        if (this.thumbnailsStyle) {\n            this.thumbnailsStyle.parentNode.removeChild(this.thumbnailsStyle);\n        }\n    },\n    methods: {\n        step(dir) {\n            let totalShiftedItems = this.totalShiftedItems + dir;\n\n            if (dir < 0 && -1 * totalShiftedItems + this.d_numVisible > this.value.length - 1) {\n                totalShiftedItems = this.d_numVisible - this.value.length;\n            } else if (dir > 0 && totalShiftedItems > 0) {\n                totalShiftedItems = 0;\n            }\n\n            if (this.circular) {\n                if (dir < 0 && this.value.length - 1 === this.d_activeIndex) {\n                    totalShiftedItems = 0;\n                } else if (dir > 0 && this.d_activeIndex === 0) {\n                    totalShiftedItems = this.d_numVisible - this.value.length;\n                }\n            }\n\n            if (this.$refs.itemsContainer) {\n                document.body.setAttribute('data-p-items-hidden', 'false');\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        stopSlideShow() {\n            if (this.slideShowActive && this.stopSlideShow) {\n                this.$emit('stop-slideshow');\n            }\n        },\n        getMedianItemIndex() {\n            let index = Math.floor(this.d_numVisible / 2);\n\n            return this.d_numVisible % 2 ? index : index - 1;\n        },\n        navBackward(e) {\n            this.stopSlideShow();\n\n            let prevItemIndex = this.d_activeIndex !== 0 ? this.d_activeIndex - 1 : 0;\n            let diff = prevItemIndex + this.totalShiftedItems;\n\n            if (this.d_numVisible - diff - 1 > this.getMedianItemIndex() && (-1 * this.totalShiftedItems !== 0 || this.circular)) {\n                this.step(1);\n            }\n\n            let activeIndex = this.circular && this.d_activeIndex === 0 ? this.value.length - 1 : prevItemIndex;\n\n            this.$emit('update:activeIndex', activeIndex);\n\n            if (e.cancelable) {\n                e.preventDefault();\n            }\n        },\n        navForward(e) {\n            this.stopSlideShow();\n\n            let nextItemIndex = this.d_activeIndex === this.value.length - 1 ? this.value.length - 1 : this.d_activeIndex + 1;\n\n            if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && (-1 * this.totalShiftedItems < this.getTotalPageNumber() - 1 || this.circular)) {\n                this.step(-1);\n            }\n\n            let activeIndex = this.circular && this.value.length - 1 === this.d_activeIndex ? 0 : nextItemIndex;\n\n            this.$emit('update:activeIndex', activeIndex);\n\n            if (e.cancelable) {\n                e.preventDefault();\n            }\n        },\n        onItemClick(index) {\n            this.stopSlideShow();\n\n            let selectedItemIndex = index;\n\n            if (selectedItemIndex !== this.d_activeIndex) {\n                const diff = selectedItemIndex + this.totalShiftedItems;\n                let dir = 0;\n\n                if (selectedItemIndex < this.d_activeIndex) {\n                    dir = this.d_numVisible - diff - 1 - this.getMedianItemIndex();\n\n                    if (dir > 0 && -1 * this.totalShiftedItems !== 0) {\n                        this.step(dir);\n                    }\n                } else {\n                    dir = this.getMedianItemIndex() - diff;\n\n                    if (dir < 0 && -1 * this.totalShiftedItems < this.getTotalPageNumber() - 1) {\n                        this.step(dir);\n                    }\n                }\n\n                this.$emit('update:activeIndex', selectedItemIndex);\n            }\n        },\n        onThumbnailKeydown(event, index) {\n            if (event.code === 'Enter' || event.code === 'NumpadEnter' || event.code === 'Space') {\n                this.onItemClick(index);\n                event.preventDefault();\n            }\n\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                    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.itemsContainer, '[data-pc-section=\"thumbnailitem\"]');\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.itemsContainer, '[data-pc-section=\"thumbnailitem\"]');\n            const activeIndex = this.findFocusedIndicatorIndex();\n\n            this.changedFocusedIndicator(activeIndex, indicators.length - 1);\n        },\n        onTabKey() {\n            const indicators = [...find(this.$refs.itemsContainer, '[data-pc-section=\"thumbnailitem\"]')];\n            const highlightedIndex = indicators.findIndex((ind) => getAttribute(ind, 'data-p-active') === true);\n\n            const activeIndicator = findSingle(this.$refs.itemsContainer, '[tabindex=\"0\"]');\n\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.itemsContainer, '[data-pc-section=\"thumbnailitem\"]')];\n            const activeIndicator = findSingle(this.$refs.itemsContainer, '[data-pc-section=\"thumbnailitem\"] > [tabindex=\"0\"]');\n\n            return indicators.findIndex((ind) => ind === activeIndicator.parentElement);\n        },\n        changedFocusedIndicator(prevInd, nextInd) {\n            const indicators = find(this.$refs.itemsContainer, '[data-pc-section=\"thumbnailitem\"]');\n\n            indicators[prevInd].children[0].tabIndex = '-1';\n            indicators[nextInd].children[0].tabIndex = '0';\n            indicators[nextInd].children[0].focus();\n        },\n        onTransitionEnd(e) {\n            if (this.$refs.itemsContainer && e.propertyName === 'transform') {\n                document.body.setAttribute('data-p-items-hidden', 'true');\n                !this.isUnstyled && addClass(this.$refs.itemsContainer, 'p-items-hidden');\n                this.$refs.itemsContainer.style.transition = '';\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            if (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            const touchThreshold = 10\n\n            if(Math.abs(diff) < touchThreshold) {\n                // only a click/tap\n                return;\n            }\n            if (diff < 0) {\n                // left\n                this.navForward(e);\n            } else {\n                // right\n                this.navBackward(e);\n            }\n        },\n        getTotalPageNumber() {\n            return this.value.length > this.d_numVisible ? this.value.length - this.d_numVisible + 1 : 0;\n        },\n        createStyle() {\n            if (!this.thumbnailsStyle) {\n                this.thumbnailsStyle = document.createElement('style');\n                this.thumbnailsStyle.type = 'text/css';\n                setAttribute(this.thumbnailsStyle, 'nonce', this.$primevue?.config?.csp?.nonce);\n                document.body.appendChild(this.thumbnailsStyle);\n            }\n\n            let innerHTML = `\n                #${this.containerId} [data-pc-section=\"thumbnailitem\"] {\n                    flex: 1 0 ${100 / this.d_numVisible}%\n                }\n            `;\n\n            if (this.responsiveOptions && !this.isUnstyled) {\n                this.sortedResponsiveOptions = [...this.responsiveOptions];\n                const comparer = localeComparator();\n\n                this.sortedResponsiveOptions.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 < this.sortedResponsiveOptions.length; i++) {\n                    let res = this.sortedResponsiveOptions[i];\n\n                    innerHTML += `\n                        @media screen and (max-width: ${res.breakpoint}) {\n                            #${this.containerId} .p-galleria-thumbnail-item {\n                                flex: 1 0 ${100 / res.numVisible}%\n                            }\n                        }\n                    `;\n                }\n            }\n\n            this.thumbnailsStyle.innerHTML = innerHTML;\n        },\n        calculatePosition() {\n            if (this.$refs.itemsContainer && this.sortedResponsiveOptions) {\n                let windowWidth = window.innerWidth;\n                let matchedResponsiveData = {\n                    numVisible: this.numVisible\n                };\n\n                for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {\n                    let res = this.sortedResponsiveOptions[i];\n\n                    if (parseInt(res.breakpoint, 10) >= windowWidth) {\n                        matchedResponsiveData = res;\n                    }\n                }\n\n                if (this.d_numVisible !== matchedResponsiveData.numVisible) {\n                    this.d_numVisible = matchedResponsiveData.numVisible;\n                }\n            }\n        },\n        bindDocumentListeners() {\n            if (!this.documentResizeListener) {\n                this.documentResizeListener = () => {\n                    this.calculatePosition();\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\n        firstItemAciveIndex() {\n            return this.totalShiftedItems * -1;\n        },\n        lastItemActiveIndex() {\n            return this.firstItemAciveIndex() + this.d_numVisible - 1;\n        },\n        isItemActive(index) {\n            return this.firstItemAciveIndex() <= index && this.lastItemActiveIndex() >= index;\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        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        isNavBackwardDisabled() {\n            return (!this.circular && this.d_activeIndex === 0) || this.value.length <= this.d_numVisible;\n        },\n        isNavForwardDisabled() {\n            return (!this.circular && this.d_activeIndex === this.value.length - 1) || this.value.length <= this.d_numVisible;\n        }\n    },\n    components: {\n        ChevronLeftIcon: ChevronLeftIcon,\n        ChevronRightIcon: ChevronRightIcon,\n        ChevronUpIcon: ChevronUpIcon,\n        ChevronDownIcon: ChevronDownIcon\n    },\n    directives: {\n        ripple: Ripple\n    }\n};\n</script>\n","<template>\n    <div :class=\"cx('thumbnails')\" v-bind=\"ptm('thumbnails')\">\n        <div :class=\"cx('thumbnailContent')\" v-bind=\"ptm('thumbnailContent')\">\n            <button\n                v-if=\"showThumbnailNavigators\"\n                v-ripple\n                :class=\"cx('thumbnailPrevButton')\"\n                :disabled=\"isNavBackwardDisabled\"\n                type=\"button\"\n                :aria-label=\"ariaPrevButtonLabel\"\n                @click=\"navBackward($event)\"\n                v-bind=\"{ ...prevButtonProps, ...ptm('thumbnailPrevButton') }\"\n                data-pc-group-section=\"thumbnailnavigator\"\n            >\n                <component :is=\"templates.previousthumbnailicon || (isVertical ? 'ChevronUpIcon' : 'ChevronLeftIcon')\" :class=\"cx('thumbnailPrevIcon')\" v-bind=\"ptm('thumbnailPrevIcon')\" />\n            </button>\n            <div :class=\"cx('thumbnailsViewport')\" :style=\"{ height: isVertical ? contentHeight : '' }\" v-bind=\"ptm('thumbnailsViewport')\">\n                <div\n                    ref=\"itemsContainer\"\n                    :class=\"cx('thumbnailItems')\"\n                    role=\"tablist\"\n                    @transitionend=\"onTransitionEnd($event)\"\n                    @touchstart=\"onTouchStart($event)\"\n                    @touchmove=\"onTouchMove($event)\"\n                    @touchend=\"onTouchEnd($event)\"\n                    v-bind=\"ptm('thumbnailItems')\"\n                >\n                    <div\n                        v-for=\"(item, index) of value\"\n                        :key=\"`p-galleria-thumbnail-item-${index}`\"\n                        :class=\"cx('thumbnailItem', { index, activeIndex })\"\n                        role=\"tab\"\n                        :data-p-active=\"activeIndex === index\"\n                        :aria-selected=\"activeIndex === index\"\n                        :aria-controls=\"containerId + '_item_' + index\"\n                        @keydown=\"onThumbnailKeydown($event, index)\"\n                        v-bind=\"ptm('thumbnailItem')\"\n                        :data-p-galleria-thumbnail-item-current=\"activeIndex === index\"\n                        :data-p-galleria-thumbnail-item-active=\"isItemActive(index)\"\n                        :data-p-galleria-thumbnail-item-start=\"firstItemAciveIndex() === index\"\n                        :data-p-galleria-thumbnail-item-end=\"lastItemActiveIndex() === index\"\n                    >\n                        <div\n                            :class=\"cx('thumbnail')\"\n                            :tabindex=\"activeIndex === index ? '0' : '-1'\"\n                            :aria-label=\"ariaPageLa