import { DomHandler, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
import Ripple from 'primevue/ripple';
import { resolveDirective, openBlock, createBlock, createVNode, withDirectives, createCommentVNode, resolveDynamicComponent, Fragment, renderList, withKeys, resolveComponent, Teleport, Transition, withCtx, mergeProps } from 'vue';

var script = {
    name: 'GalleriaItem',
    emits: ['start-slideshow', 'stop-slideshow', 'update:activeIndex'],
    props: {
        circular: {
            type: Boolean,
            default: false
        },
        activeIndex: {
            type: Number,
            default: 0
        },
        value: {
            type: Array,
            default: null
        },
        showItemNavigators: {
            type: Boolean,
            default: true
        },
        showIndicators: {
            type: Boolean,
            default: true
        },
        slideShowActive: {
            type: Boolean,
            default: true
        },
        changeItemOnIndicatorHover: {
            type: Boolean,
            default: true
        },
        autoPlay: {
            type: Boolean,
            default: false
        },
        templates: {
            type: null,
            default: null
        }
    },
    mounted() {
        if (this.autoPlay) {
            this.$emit('start-slideshow');
        }
    },
    methods: {
        next() {
            let nextItemIndex = this.activeIndex + 1;
            let activeIndex = this.circular && this.value.length - 1 === this.activeIndex
                        ? 0
                        : nextItemIndex;

            this.$emit('update:activeIndex', activeIndex);
        },
        prev() {
            let prevItemIndex = this.activeIndex !== 0 ? this.activeIndex - 1 : 0;
            let activeIndex = this.circular && this.activeIndex === 0
                    ? this.value.length - 1
                    : prevItemIndex;

            this.$emit('update:activeIndex', activeIndex);
        },
        stopSlideShow() {
            if (this.slideShowActive && this.stopSlideShow) {
                this.$emit('stop-slideshow');
            }
        },
        navBackward(e) {
            this.stopSlideShow();
            this.prev();

            if (e && e.cancelable) {
                e.preventDefault();
            }
        },
        navForward(e) {
            this.stopSlideShow();
            this.next();

            if (e && e.cancelable) {
                e.preventDefault();
            }
        },
        onIndicatorClick(index) {
            this.stopSlideShow();
            this.$emit('update:activeIndex', index);
        },
        onIndicatorMouseEnter(index) {
            if (this.changeItemOnIndicatorHover) {
                this.stopSlideShow();

                this.$emit('update:activeIndex', index);
            }
        },
        onIndicatorKeyDown(index) {
            this.stopSlideShow();

            this.$emit('update:activeIndex', index);
        },
        isIndicatorItemActive(index) {
            return this.activeIndex === index;
        },
        isNavBackwardDisabled() {
            return !this.circular && this.activeIndex === 0;
        },
        isNavForwardDisabled() {
            return !this.circular && this.activeIndex === (this.value.length - 1);
        }
    },
    computed: {
        activeItem() {
            return this.value[this.activeIndex];
        },
        navBackwardClass() {
            return ['p-galleria-item-prev p-galleria-item-nav p-link', {
                'p-disabled': this.isNavBackwardDisabled()
            }];
        },
        navForwardClass() {
            return ['p-galleria-item-next p-galleria-item-nav p-link', {
                'p-disabled': this.isNavForwardDisabled()
            }];
        }
    },
    directives: {
        'ripple': Ripple
    }
};

const _hoisted_1 = { class: "p-galleria-item-wrapper" };
const _hoisted_2 = { class: "p-galleria-item-container" };
const _hoisted_3 = /*#__PURE__*/createVNode("span", { class: "p-galleria-item-prev-icon pi pi-chevron-left" }, null, -1);
const _hoisted_4 = { class: "p-galleria-item" };
const _hoisted_5 = /*#__PURE__*/createVNode("span", { class: "p-galleria-item-next-icon pi pi-chevron-right" }, null, -1);
const _hoisted_6 = {
  key: 2,
  class: "p-galleria-caption"
};
const _hoisted_7 = {
  key: 0,
  class: "p-galleria-indicators p-reset"
};
const _hoisted_8 = {
  key: 0,
  type: "button",
  tabindex: "-1",
  class: "p-link"
};

function render(_ctx, _cache, $props, $setup, $data, $options) {
  const _directive_ripple = resolveDirective("ripple");

  return (openBlock(), createBlock("div", _hoisted_1, [
    createVNode("div", _hoisted_2, [
      ($props.showItemNavigators)
        ? withDirectives((openBlock(), createBlock("button", {
            key: 0,
            type: "button",
            class: $options.navBackwardClass,
            onClick: _cache[1] || (_cache[1] = $event => ($options.navBackward($event))),
            disabled: $options.isNavBackwardDisabled()
          }, [
            _hoisted_3
          ], 10, ["disabled"])), [
            [_directive_ripple]
          ])
        : createCommentVNode("", true),
      createVNode("div", _hoisted_4, [
        ($props.templates.item)
          ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.item), {
              key: 0,
              item: $options.activeItem
            }, null, 8, ["item"]))
          : createCommentVNode("", true)
      ]),
      ($props.showItemNavigators)
        ? withDirectives((openBlock(), createBlock("button", {
            key: 1,
            type: "button",
            class: $options.navForwardClass,
            onClick: _cache[2] || (_cache[2] = $event => ($options.navForward($event))),
            disabled: $options.isNavForwardDisabled()
          }, [
            _hoisted_5
          ], 10, ["disabled"])), [
            [_directive_ripple]
          ])
        : createCommentVNode("", true),
      ($props.templates['caption'])
        ? (openBlock(), createBlock("div", _hoisted_6, [
            ($props.templates.caption)
              ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.caption), {
                  key: 0,
                  item: $options.activeItem
                }, null, 8, ["item"]))
              : createCommentVNode("", true)
          ]))
        : createCommentVNode("", true)
    ]),
    ($props.showIndicators)
      ? (openBlock(), createBlock("ul", _hoisted_7, [
          (openBlock(true), createBlock(Fragment, null, renderList($props.value, (item, index) => {
            return (openBlock(), createBlock("li", {
              key: `p-galleria-indicator-${index}`,
              tabindex: "0",
              onClick: $event => ($options.onIndicatorClick(index)),
              onMouseenter: $event => ($options.onIndicatorMouseEnter(index)),
              onKeydown: withKeys($event => ($options.onIndicatorKeyDown(index)), ["enter"]),
              class: ['p-galleria-indicator', {'p-highlight': $options.isIndicatorItemActive(index)}]
            }, [
              (!$props.templates['indicator'])
                ? (openBlock(), createBlock("button", _hoisted_8))
                : createCommentVNode("", true),
              ($props.templates.indicator)
                ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.indicator), {
                    key: 1,
                    index: index
                  }, null, 8, ["index"]))
                : createCommentVNode("", true)
            ], 42, ["onClick", "onMouseenter", "onKeydown"]))
          }), 128))
        ]))
      : createCommentVNode("", true)
  ]))
}

script.render = render;

var script$1 = {
    name: 'GalleriaThumbnails',
    emits: ['stop-slideshow', 'update:activeIndex'],
    props: {
        containerId: {
            type: String,
            default: null,
        },
        value: {
            type: Array,
            default: null
        },
        numVisible: {
            type: Number,
            default: 3
        },
        activeIndex: {
            type: Number,
            default: 0
        },
        isVertical: {
            type: Boolean,
            default: false
        },
        slideShowActive: {
            type: Boolean,
            default: false
        },
        circular: {
            type: Boolean,
            default: false
        },
        responsiveOptions: {
            type: Array,
            default: null
        },
        contentHeight: {
            type: String,
            default: "300px"
        },
        showThumbnailNavigators: {
            type: Boolean,
            default: true
        },
        templates: {
            type: null,
            default: null
        }
    },
    startPos: null,
    thumbnailsStyle: null,
    sortedResponsiveOptions: null,
    data() {
        return {
            d_numVisible: this.numVisible,
            d_oldNumVisible: this.numVisible,
            d_activeIndex: this.activeIndex,
            d_oldActiveItemIndex: this.activeIndex,
            totalShiftedItems: 0,
            page: 0
        }
    },
    watch: {
        numVisible(newValue, oldValue) {
			this.d_numVisible = newValue;
			this.d_oldNumVisible = oldValue;
        },
        activeIndex(newValue, oldValue) {
			this.d_activeIndex = newValue;
			this.d_oldActiveItemIndex = oldValue;
        }
    },
    mounted() {
		this.createStyle();
		this.calculatePosition();

		if (this.responsiveOptions) {
			this.bindDocumentListeners();
		}
    },
    updated() {
        let totalShiftedItems = this.totalShiftedItems;

        if (this.d_oldNumVisible !== this.d_numVisible || this.d_oldActiveItemIndex !== this.d_activeIndex) {
            if (this.d_activeIndex <= this.getMedianItemIndex()) {
                totalShiftedItems = 0;
            }
            else if (this.value.length - this.d_numVisible + this.getMedianItemIndex() < this.d_activeIndex) {
                totalShiftedItems = this.d_numVisible - this.value.length;
            }
            else if (this.value.length - this.d_numVisible < this.d_activeIndex && this.d_numVisible % 2 === 0) {
                totalShiftedItems = (this.d_activeIndex * -1) + this.getMedianItemIndex() + 1;
            }
            else {
                totalShiftedItems = (this.d_activeIndex * -1) + this.getMedianItemIndex();
            }

            if (totalShiftedItems !== this.totalShiftedItems) {
                this.totalShiftedItems = totalShiftedItems;
            }

            this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100/ this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.d_numVisible)}%, 0, 0)`;

            if (this.d_oldActiveItemIndex !== this.d_activeIndex) {
                DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden');
                this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
            }

            this.d_oldActiveItemIndex = this.d_activeIndex;
            this.d_oldNumVisible = this.d_numVisible;
        }
    },
    beforeUnmount() {
		if (this.responsiveOptions) {
			this.unbindDocumentListeners();
        }

        if (this.thumbnailsStyle) {
            this.thumbnailsStyle.parentNode.removeChild(this.thumbnailsStyle);
        }
	},
    methods: {
        step(dir) {
            let totalShiftedItems = this.totalShiftedItems + dir;

            if (dir < 0 && (-1 * totalShiftedItems) + this.d_numVisible > (this.value.length - 1)) {
                totalShiftedItems = this.d_numVisible - this.value.length;
            }
            else if (dir > 0 && totalShiftedItems > 0) {
                totalShiftedItems = 0;
            }

            if (this.circular) {
                if (dir < 0 && this.value.length - 1 === this.d_activeIndex) {
                    totalShiftedItems = 0;
                }
                else if (dir > 0 && this.d_activeIndex === 0) {
                    totalShiftedItems = this.d_numVisible - this.value.length;
                }
            }

            if (this.$refs.itemsContainer) {
                DomHandler.removeClass(this.$refs.itemsContainer, 'p-items-hidden');
                this.$refs.itemsContainer.style.transform = this.isVertical ? `translate3d(0, ${totalShiftedItems * (100/ this.d_numVisible)}%, 0)` : `translate3d(${totalShiftedItems * (100/ this.d_numVisible)}%, 0, 0)`;
                this.$refs.itemsContainer.style.transition = 'transform 500ms ease 0s';
            }

            this.totalShiftedItems = totalShiftedItems;
        },
        stopSlideShow() {
            if (this.slideShowActive && this.stopSlideShow) {
                this.$emit('stop-slideshow');
            }
        },
        getMedianItemIndex() {
            let index = Math.floor(this.d_numVisible / 2);

            return (this.d_numVisible % 2) ? index : index - 1;
        },
        navBackward(e) {
            this.stopSlideShow();

            let prevItemIndex = this.d_activeIndex !== 0 ? this.d_activeIndex - 1 : 0;
            let diff = prevItemIndex + this.totalShiftedItems;
            if ((this.d_numVisible - diff - 1) > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) !== 0 || this.circular)) {
                this.step(1);
            }

            let activeIndex = this.circular && this.d_activeIndex === 0 ? this.value.length - 1 : prevItemIndex;
            this.$emit('update:activeIndex', activeIndex);

            if (e.cancelable) {
                e.preventDefault();
            }
        },
        navForward(e) {
            this.stopSlideShow();

            let nextItemIndex = this.d_activeIndex + 1;
            if (nextItemIndex + this.totalShiftedItems > this.getMedianItemIndex() && ((-1 * this.totalShiftedItems) < this.getTotalPageNumber() - 1 || this.circular)) {
                this.step(-1);
            }

            let activeIndex = this.circular && (this.value.length - 1) === this.d_activeIndex ? 0 : nextItemIndex;
            this.$emit('update:activeIndex', activeIndex);

            if (e.cancelable) {
                e.preventDefault();
            }
        },
        onItemClick(index) {
            this.stopSlideShow();

            let selectedItemIndex = index;
            if (selectedItemIndex !== this.d_activeIndex) {
                const diff = selectedItemIndex + this.totalShiftedItems;
                let dir = 0;
                if (selectedItemIndex < this.d_activeIndex) {
                    dir = (this.d_numVisible - diff - 1) - this.getMedianItemIndex();
                    if (dir > 0 && (-1 * this.totalShiftedItems) !== 0) {
                        this.step(dir);
                    }
                }
                else {
                    dir = this.getMedianItemIndex() - diff;
                    if (dir < 0 && (-1 * this.totalShiftedItems) < this.getTotalPageNumber() - 1) {
                        this.step(dir);
                    }
                }

                this.$emit('update:activeIndex', selectedItemIndex);
            }
        },
        onTransitionEnd() {
            if (this.$refs.itemsContainer) {
                DomHandler.addClass(this.$refs.itemsContainer, 'p-items-hidden');
                this.$refs.itemsContainer.style.transition = '';
            }
        },
        onTouchStart(e) {
            let touchobj = e.changedTouches[0];

            this.startPos = {
                x: touchobj.pageX,
                y: touchobj.pageY
            };
        },
        onTouchMove(e) {
            if (e.cancelable) {
                e.preventDefault();
            }
        },
        onTouchEnd(e) {
            let touchobj = e.changedTouches[0];

            if (this.isVertical) {
                this.changePageOnTouch(e, (touchobj.pageY - this.startPos.y));
            }
            else {
                this.changePageOnTouch(e, (touchobj.pageX - this.startPos.x));
            }
        },
        changePageOnTouch(e, diff) {
            if (diff < 0) {           // left
                this.navForward(e);
            }
            else {                    // right
                this.navBackward(e);
            }
        },
        getTotalPageNumber() {
            return this.value.length > this.d_numVisible ? (this.value.length - this.d_numVisible) + 1 : 0;
        },
        createStyle() {
            if (!this.thumbnailsStyle) {
                this.thumbnailsStyle = document.createElement('style');
                this.thumbnailsStyle.type = 'text/css';
                document.body.appendChild(this.thumbnailsStyle);
            }

            let innerHTML = `
                #${this.containerId} .p-galleria-thumbnail-item {
                    flex: 1 0 ${ (100/ this.d_numVisible) }%
                }
            `;

            if (this.responsiveOptions) {
                this.sortedResponsiveOptions = [...this.responsiveOptions];
                this.sortedResponsiveOptions.sort((data1, data2) => {
                    const value1 = data1.breakpoint;
                    const value2 = data2.breakpoint;
                    let result = null;

                    if (value1 == null && value2 != null)
                        result = -1;
                    else if (value1 != null && value2 == null)
                        result = 1;
                    else if (value1 == null && value2 == null)
                        result = 0;
                    else if (typeof value1 === 'string' && typeof value2 === 'string')
                        result = value1.localeCompare(value2, undefined, { numeric: true });
                    else
                        result = (value1 < value2) ? -1 : (value1 > value2) ? 1 : 0;

                    return -1 * result;
                });

                for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
                    let res = this.sortedResponsiveOptions[i];

                    innerHTML += `
                        @media screen and (max-width: ${res.breakpoint}) {
                            #${this.containerId} .p-galleria-thumbnail-item {
                                flex: 1 0 ${ (100/ res.numVisible) }%
                            }
                        }
                    `;
                }
            }

            this.thumbnailsStyle.innerHTML = innerHTML;
        },
        calculatePosition() {
            if (this.$refs.itemsContainer && this.sortedResponsiveOptions) {
                let windowWidth = window.innerWidth;
                let matchedResponsiveData = {
                    numVisible: this.numVisible
                };

                for (let i = 0; i < this.sortedResponsiveOptions.length; i++) {
                    let res = this.sortedResponsiveOptions[i];

                    if (parseInt(res.breakpoint, 10) >= windowWidth) {
                        matchedResponsiveData = res;
                    }
                }

                if (this.d_numVisible !== matchedResponsiveData.numVisible) {
                    this.d_numVisible = matchedResponsiveData.numVisible;
                }
            }
        },
        bindDocumentListeners() {
            if (!this.documentResizeListener) {
                this.documentResizeListener = () => {
                    this.calculatePosition();
                };

                window.addEventListener('resize', this.documentResizeListener);
            }
        },
        unbindDocumentListeners() {
            if(this.documentResizeListener) {
                window.removeEventListener('resize', this.documentResizeListener);
                this.documentResizeListener = null;
            }
        },
        isNavBackwardDisabled() {
            return (!this.circular && this.d_activeIndex === 0) || (this.value.length <= this.d_numVisible);
        },
        isNavForwardDisabled() {
            return (!this.circular && this.d_activeIndex === (this.value.length - 1)) || (this.value.length <= this.d_numVisible);
        },
        firstItemAciveIndex() {
            return this.totalShiftedItems * -1;
        },
        lastItemActiveIndex() {
            return this.firstItemAciveIndex() + this.d_numVisible - 1;
        },
        isItemActive(index) {
            return this.firstItemAciveIndex() <= index && this.lastItemActiveIndex() >= index;
        }
    },
    computed: {
        navBackwardClass() {
            return ['p-galleria-thumbnail-prev p-link', {
                'p-disabled': this.isNavBackwardDisabled()
            }];
        },
        navForwardClass() {
            return ['p-galleria-thumbnail-next p-link', {
                'p-disabled': this.isNavForwardDisabled()
            }];
        },
        navBackwardIconClass() {
            return ['p-galleria-thumbnail-prev-icon pi', {
                'pi-chevron-left': !this.isVertical,
                'pi-chevron-up': this.isVertical
            }];
        },
        navForwardIconClass() {
            return ['p-galleria-thumbnail-next-icon pi', {
                'pi-chevron-right': !this.isVertical,
                'pi-chevron-down': this.isVertical
            }];
        }
    },
    directives: {
        'ripple': Ripple
    }
};

const _hoisted_1$1 = { class: "p-galleria-thumbnail-wrapper" };
const _hoisted_2$1 = { class: "p-galleria-thumbnail-container" };

function render$1(_ctx, _cache, $props, $setup, $data, $options) {
  const _directive_ripple = resolveDirective("ripple");

  return (openBlock(), createBlock("div", _hoisted_1$1, [
    createVNode("div", _hoisted_2$1, [
      ($props.showThumbnailNavigators)
        ? withDirectives((openBlock(), createBlock("button", {
            key: 0,
            class: $options.navBackwardClass,
            onClick: _cache[1] || (_cache[1] = $event => ($options.navBackward($event))),
            disabled: $options.isNavBackwardDisabled(),
            type: "button"
          }, [
            createVNode("span", { class: $options.navBackwardIconClass }, null, 2)
          ], 10, ["disabled"])), [
            [_directive_ripple]
          ])
        : createCommentVNode("", true),
      createVNode("div", {
        class: "p-galleria-thumbnail-items-container",
        style: {'height': $props.isVertical ? $props.contentHeight : ''}
      }, [
        createVNode("div", {
          ref: "itemsContainer",
          class: "p-galleria-thumbnail-items",
          onTransitionend: _cache[2] || (_cache[2] = (...args) => ($options.onTransitionEnd && $options.onTransitionEnd(...args))),
          onTouchstart: _cache[3] || (_cache[3] = $event => ($options.onTouchStart($event))),
          onTouchmove: _cache[4] || (_cache[4] = $event => ($options.onTouchMove($event))),
          onTouchend: _cache[5] || (_cache[5] = $event => ($options.onTouchEnd($event)))
        }, [
          (openBlock(true), createBlock(Fragment, null, renderList($props.value, (item, index) => {
            return (openBlock(), createBlock("div", {
              key: `p-galleria-thumbnail-item-${index}`,
              class: ['p-galleria-thumbnail-item', {
                        'p-galleria-thumbnail-item-current': $props.activeIndex === index,
                        'p-galleria-thumbnail-item-active': $options.isItemActive(index),
                        'p-galleria-thumbnail-item-start': $options.firstItemAciveIndex() === index,
                        'p-galleria-thumbnail-item-end': $options.lastItemActiveIndex() === index }]
            }, [
              createVNode("div", {
                class: "p-galleria-thumbnail-item-content",
                tabindex: $options.isItemActive(index) ? 0 : null,
                onClick: $event => ($options.onItemClick(index)),
                onKeydown: withKeys($event => ($options.onItemClick(index)), ["enter"])
              }, [
                ($props.templates.thumbnail)
                  ? (openBlock(), createBlock(resolveDynamicComponent($props.templates.thumbnail), {
                      key: 0,
                      item: item
                    }, null, 8, ["item"]))
                  : createCommentVNode("", true)
              ], 40, ["tabindex", "onClick", "onKeydown"])
            ], 2))
          }), 128))
        ], 544)
      ], 4),
      ($props.showThumbnailNavigators)
        ? withDirectives((openBlock(), createBlock("button", {
            key: 1,
            class: $options.navForwardClass,
            onClick: _cache[6] || (_cache[6] = $event => ($options.navForward($event))),
            disabled: $options.isNavForwardDisabled(),
            type: "button"
          }, [
            createVNode("span", { class: $options.navForwardIconClass }, null, 2)
          ], 10, ["disabled"])), [
            [_directive_ripple]
          ])
        : createCommentVNode("", true)
    ])
  ]))
}

script$1.render = render$1;

var script$2 = {
    functional: true,
    props: {
        item: {
            type: null,
            default: null
        },
        index: {
            type: Number,
            default: 0
        },
        templates: {
            type: null,
            default: null
        },
        type: {
            type: String,
            default: null
        }
    },
    render(createElement, context) {
        const { item, index, templates, type } = context.props;
        const template = templates && templates[type];

        if (template) {
            let content;
            switch (type) {
                case 'item':
                case 'caption':
                case 'thumbnail':
                    content = template({
                        item
                    });
                    break;
                case 'indicator':
                    content = template({
                        index
                    });
                    break;
                default:
                    content = template({});
                    break;
            }

            return content ? [content] : null;
        }

        return null;
    }
};

var script$3 = {
    name: 'GalleriaContent',
    inheritAttrs: false,
    interval: null,
    emits: ['activeitem-change', 'mask-hide'],
    data() {
        return {
            id: this.$attrs.id || UniqueComponentId(),
            activeIndex: this.$attrs.activeIndex,
            slideShowActive: false
        }
    },
    watch: {
        '$attrs.activeIndex': function(newVal) {
            this.activeIndex = newVal;
        }
    },
    updated() {
        this.$emit('activeitem-change', this.activeIndex);
    },
    beforeUnmount() {
		if (this.slideShowActive) {
			this.stopSlideShow();
		}
	},
    methods: {
        isAutoPlayActive() {
            return this.slideShowActive;
        },
        startSlideShow() {
            this.interval = setInterval(() => {
                let activeIndex = (this.$attrs.circular && (this.$attrs.value.length - 1) === this.activeIndex) ? 0 : (this.activeIndex + 1);
                this.activeIndex = activeIndex;
            }, this.$attrs.transitionInterval);

            this.slideShowActive = true;
        },
        stopSlideShow() {
            if (this.interval) {
                clearInterval(this.interval);
            }

            this.slideShowActive = false;
        },
        getPositionClass(preClassName, position) {
            const positions = ['top', 'left', 'bottom', 'right'];
            const pos = positions.find(item => item === position);

            return pos ? `${preClassName}-${pos}` : '';
        },
        isVertical() {
            return this.$attrs.thumbnailsPosition === 'left' || this.$attrs.thumbnailsPosition === 'right';
        }
    },
    computed: {
        galleriaClass() {
            const thumbnailsPosClass = this.$attrs.showThumbnails && this.getPositionClass('p-galleria-thumbnails', this.$attrs.thumbnailsPosition);
            const indicatorPosClass = this.$attrs.showIndicators && this.getPositionClass('p-galleria-indicators', this.$attrs.indicatorsPosition);

            return ['p-galleria p-component', {
                'p-galleria-fullscreen': this.$attrs.fullScreen,
                'p-galleria-indicator-onitem': this.$attrs.showIndicatorsOnItem,
                'p-galleria-item-nav-onhover': this.$attrs.showItemNavigatorsOnHover && !this.$attrs.fullScreen
            }, thumbnailsPosClass, indicatorPosClass, this.$attrs.containerClass]
        }
    },
    components: {
        'GalleriaItem': script,
        'GalleriaThumbnails': script$1,
        'GalleriaItemSlot': script$2
    },
    directives: {
        'ripple': Ripple
    }
};

const _hoisted_1$2 = /*#__PURE__*/createVNode("span", { class: "p-galleria-close-icon pi pi-times" }, null, -1);
const _hoisted_2$2 = {
  key: 1,
  class: "p-galleria-header"
};
const _hoisted_3$1 = { class: "p-galleria-content" };
const _hoisted_4$1 = {
  key: 2,
  class: "p-galleria-footer"
};

function render$2(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_GalleriaItem = resolveComponent("GalleriaItem");
  const _component_GalleriaThumbnails = resolveComponent("GalleriaThumbnails");
  const _directive_ripple = resolveDirective("ripple");

  return (_ctx.$attrs.value && _ctx.$attrs.value.length > 0)
    ? (openBlock(), createBlock("div", {
        key: 0,
        id: $data.id,
        class: $options.galleriaClass,
        style: _ctx.$attrs.containerStyle
      }, [
        (_ctx.$attrs.fullScreen)
          ? withDirectives((openBlock(), createBlock("button", {
              key: 0,
              type: "button",
              class: "p-galleria-close p-link",
              onClick: _cache[1] || (_cache[1] = $event => (_ctx.$emit('mask-hide')))
            }, [
              _hoisted_1$2
            ], 512)), [
              [_directive_ripple]
            ])
          : createCommentVNode("", true),
        (_ctx.$attrs.templates && _ctx.$attrs.templates['header'])
          ? (openBlock(), createBlock("div", _hoisted_2$2, [
              (openBlock(), createBlock(resolveDynamicComponent(_ctx.$attrs.templates['header'])))
            ]))
          : createCommentVNode("", true),
        createVNode("div", _hoisted_3$1, [
          createVNode(_component_GalleriaItem, {
            value: _ctx.$attrs.value,
            activeIndex: $data.activeIndex,
            "onUpdate:activeIndex": _cache[2] || (_cache[2] = $event => ($data.activeIndex = $event)),
            circular: _ctx.$attrs.circular,
            templates: _ctx.$attrs.templates,
            showIndicators: _ctx.$attrs.showIndicators,
            changeItemOnIndicatorHover: _ctx.$attrs.changeItemOnIndicatorHover,
            showItemNavigators: _ctx.$attrs.showItemNavigators,
            autoPlay: _ctx.$attrs.autoPlay,
            slideShowActive: $data.slideShowActive,
            "onUpdate:slideShowActive": _cache[3] || (_cache[3] = $event => ($data.slideShowActive = $event)),
            onStartSlideshow: $options.startSlideShow,
            onStopSlideshow: $options.stopSlideShow
          }, null, 8, ["value", "activeIndex", "circular", "templates", "showIndicators", "changeItemOnIndicatorHover", "showItemNavigators", "autoPlay", "slideShowActive", "onStartSlideshow", "onStopSlideshow"]),
          (_ctx.$attrs.showThumbnails)
            ? (openBlock(), createBlock(_component_GalleriaThumbnails, {
                key: 0,
                containerId: $data.id,
                value: _ctx.$attrs.value,
                activeIndex: $data.activeIndex,
                "onUpdate:activeIndex": _cache[4] || (_cache[4] = $event => ($data.activeIndex = $event)),
                templates: _ctx.$attrs.templates,
                numVisible: _ctx.$attrs.numVisible,
                responsiveOptions: _ctx.$attrs.responsiveOptions,
                circular: _ctx.$attrs.circular,
                isVertical: $options.isVertical(),
                contentHeight: _ctx.$attrs.verticalThumbnailViewPortHeight,
                showThumbnailNavigators: _ctx.$attrs.showThumbnailNavigators,
                slideShowActive: $data.slideShowActive,
                "onUpdate:slideShowActive": _cache[5] || (_cache[5] = $event => ($data.slideShowActive = $event)),
                onStopSlideshow: $options.stopSlideShow
              }, null, 8, ["containerId", "value", "activeIndex", "templates", "numVisible", "responsiveOptions", "circular", "isVertical", "contentHeight", "showThumbnailNavigators", "slideShowActive", "onStopSlideshow"]))
            : createCommentVNode("", true)
        ]),
        (_ctx.$attrs.templates && _ctx.$attrs.templates['footer'])
          ? (openBlock(), createBlock("div", _hoisted_4$1, [
              (openBlock(), createBlock(resolveDynamicComponent(_ctx.$attrs.templates['footer'])))
            ]))
          : createCommentVNode("", true)
      ], 14, ["id"]))
    : createCommentVNode("", true)
}

script$3.render = render$2;

var script$4 = {
    name: 'Galleria',
    inheritAttrs: false,
    emits: ['update:activeIndex', 'update:visible'],
    props: {
        id: {
            type: String,
            default: null
        },
		value: {
            type: Array,
            default: null
        },
        activeIndex: {
            type: Number,
            default: 0
        },
        fullScreen: {
            type: Boolean,
            default: false
        },
        visible: {
            type: Boolean,
            default: false
        },
        numVisible: {
			type: Number,
			default: 3
		},
        responsiveOptions: {
            type: Array,
            default: null
        },
        showItemNavigators: {
            type: Boolean,
            default: false
        },
        showThumbnailNavigators: {
            type: Boolean,
            default: true
        },
        showItemNavigatorsOnHover: {
            type: Boolean,
            default: false
        },
        changeItemOnIndicatorHover: {
            type: Boolean,
            default: false
        },
        circular: {
            type: Boolean,
            default: false
        },
        autoPlay: {
            type: Boolean,
            default: false
        },
        transitionInterval: {
			type: Number,
			default: 4000
		},
        showThumbnails: {
            type: Boolean,
            default: true
        },
        thumbnailsPosition: {
			type: String,
			default: "bottom"
		},
        verticalThumbnailViewPortHeight: {
			type: String,
			default: "300px"
		},
        showIndicators: {
            type: Boolean,
            default: false
        },
        showIndicatorsOnItem: {
            type: Boolean,
            default: false
        },
        indicatorsPosition: {
			type: String,
			default: "bottom"
		},
        baseZIndex: {
			type: Number,
			default: 0
        },
        maskClass: {
            type: String,
            default: null
        },
        containerStyle: {
            type: String,
            default: null
        },
        containerClass: {
            type: String,
            default: null
        }
    },
    container: null,
    mask: null,
    data() {
        return {
            containerVisible: this.visible
        }
    },
    updated() {
        if (this.fullScreen && this.visible) {
            this.containerVisible = this.visible;
        }
    },
    beforeUnmount() {
        if (this.fullScreen) {
            DomHandler.removeClass(document.body, 'p-overflow-hidden');
        }

        this.mask = null;
        if (this.container) {
            ZIndexUtils.clear(this.container);
            this.container = null;
        }
    },
    methods: {
        onBeforeEnter(el) {
            ZIndexUtils.set('modal', el, this.baseZIndex || this.$primevue.config.zIndex.modal);
        },
        onEnter(el) {
            this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1);
            DomHandler.addClass(document.body, 'p-overflow-hidden');
        },
        onBeforeLeave() {
            DomHandler.addClass(this.mask, 'p-galleria-mask-leave');
        },
        onAfterLeave(el) {
            ZIndexUtils.clear(el);
            this.containerVisible = false;
            DomHandler.removeClass(document.body, 'p-overflow-hidden');
        },
        onActiveItemChange(index) {
            if (this.activeIndex !== index) {
                this.$emit('update:activeIndex', index);
            }
        },
        maskHide() {
            this.$emit('update:visible', false);
        },
        containerRef(el) {
            this.container = el;
        },
        maskRef(el) {
            this.mask = el;
        }
    },
    computed: {
        maskContentClass() {
            return ['p-galleria-mask p-component-overlay', this.maskClass, {
                'p-input-filled': this.$primevue.config.inputStyle === 'filled',
                'p-ripple-disabled': this.$primevue.config.ripple === false
            }];
        }
    },
    components: {
        'GalleriaContent': script$3
    }
};

function render$3(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_GalleriaContent = resolveComponent("GalleriaContent");

  return ($props.fullScreen)
    ? (openBlock(), createBlock(Teleport, {
        key: 0,
        to: "body"
      }, [
        ($data.containerVisible)
          ? (openBlock(), createBlock("div", {
              key: 0,
              ref: $options.maskRef,
              class: $options.maskContentClass
            }, [
              createVNode(Transition, {
                name: "p-galleria",
                onBeforeEnter: $options.onBeforeEnter,
                onEnter: $options.onEnter,
                onBeforeLeave: $options.onBeforeLeave,
                onAfterLeave: $options.onAfterLeave,
                appear: ""
              }, {
                default: withCtx(() => [
                  ($props.visible)
                    ? (openBlock(), createBlock(_component_GalleriaContent, mergeProps({
                        key: 0,
                        ref: $options.containerRef
                      }, _ctx.$props, {
                        onMaskHide: $options.maskHide,
                        templates: _ctx.$slots,
                        onActiveitemChange: $options.onActiveItemChange
                      }), null, 16, ["onMaskHide", "templates", "onActiveitemChange"]))
                    : createCommentVNode("", true)
                ]),
                _: 1
              }, 8, ["onBeforeEnter", "onEnter", "onBeforeLeave", "onAfterLeave"])
            ], 2))
          : createCommentVNode("", true)
      ]))
    : (openBlock(), createBlock(_component_GalleriaContent, mergeProps({ key: 1 }, _ctx.$props, {
        templates: _ctx.$slots,
        onActiveitemChange: $options.onActiveItemChange
      }), null, 16, ["templates", "onActiveitemChange"]))
}

function styleInject(css, ref) {
  if ( ref === void 0 ) ref = {};
  var insertAt = ref.insertAt;

  if (!css || typeof document === 'undefined') { return; }

  var head = document.head || document.getElementsByTagName('head')[0];
  var style = document.createElement('style');
  style.type = 'text/css';

  if (insertAt === 'top') {
    if (head.firstChild) {
      head.insertBefore(style, head.firstChild);
    } else {
      head.appendChild(style);
    }
  } else {
    head.appendChild(style);
  }

  if (style.styleSheet) {
    style.styleSheet.cssText = css;
  } else {
    style.appendChild(document.createTextNode(css));
  }
}

var css_248z = "\n.p-galleria-content {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-galleria-item-wrapper {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    position: relative;\n}\n.p-galleria-item-container {\n    position: relative;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    height: 100%;\n}\n.p-galleria-item-nav {\n    position: absolute;\n    top: 50%;\n    margin-top: -.5rem;\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n}\n.p-galleria-item-prev {\n    left: 0;\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n.p-galleria-item-next {\n    right: 0;\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n}\n.p-galleria-item {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    height: 100%;\n    width: 100%;\n}\n.p-galleria-item-nav-onhover .p-galleria-item-nav {\n    pointer-events: none;\n    opacity: 0;\n    -webkit-transition: opacity .2s ease-in-out;\n    transition: opacity .2s ease-in-out;\n}\n.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav {\n    pointer-events: all;\n    opacity: 1;\n}\n.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled {\n    pointer-events: none;\n}\n.p-galleria-caption {\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    width: 100%;\n}\n\n/* Thumbnails */\n.p-galleria-thumbnail-wrapper {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    overflow: auto;\n    -ms-flex-negative: 0;\n        flex-shrink: 0;\n}\n.p-galleria-thumbnail-prev,\n.p-galleria-thumbnail-next {\n    -ms-flex-item-align: center;\n        align-self: center;\n    -webkit-box-flex: 0;\n        -ms-flex: 0 0 auto;\n            flex: 0 0 auto;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n    position: relative;\n}\n.p-galleria-thumbnail-prev span,\n.p-galleria-thumbnail-next span {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-galleria-thumbnail-container {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-galleria-thumbnail-items-container {\n    overflow: hidden;\n}\n.p-galleria-thumbnail-items {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-galleria-thumbnail-item {\n    overflow: auto;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    cursor: pointer;\n    opacity: .5;\n}\n.p-galleria-thumbnail-item:hover {\n    opacity: 1;\n    -webkit-transition: opacity .3s;\n    transition: opacity .3s;\n}\n.p-galleria-thumbnail-item-current {\n    opacity: 1;\n}\n\n/* Positions */\n/* Thumbnails */\n.p-galleria-thumbnails-left .p-galleria-content,\n.p-galleria-thumbnails-right .p-galleria-content {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-galleria-thumbnails-left .p-galleria-item-wrapper,\n.p-galleria-thumbnails-right .p-galleria-item-wrapper {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n}\n.p-galleria-thumbnails-left .p-galleria-item-wrapper,\n.p-galleria-thumbnails-top .p-galleria-item-wrapper {\n    -webkit-box-ordinal-group: 3;\n        -ms-flex-order: 2;\n            order: 2;\n}\n.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper,\n.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper {\n    -webkit-box-ordinal-group: 2;\n        -ms-flex-order: 1;\n            order: 1;\n}\n.p-galleria-thumbnails-left .p-galleria-thumbnail-container,\n.p-galleria-thumbnails-right .p-galleria-thumbnail-container {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    -webkit-box-flex: 1;\n        -ms-flex-positive: 1;\n            flex-grow: 1;\n}\n.p-galleria-thumbnails-left .p-galleria-thumbnail-items,\n.p-galleria-thumbnails-right .p-galleria-thumbnail-items {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n    height: 100%;\n}\n\n/* Indicators */\n.p-galleria-indicators {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n}\n.p-galleria-indicator > button {\n    display: -webkit-inline-box;\n    display: -ms-inline-flexbox;\n    display: inline-flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-galleria-indicators-left .p-galleria-item-wrapper,\n.p-galleria-indicators-right .p-galleria-item-wrapper {\n    -webkit-box-orient: horizontal;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: row;\n            flex-direction: row;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n}\n.p-galleria-indicators-left .p-galleria-item-container,\n.p-galleria-indicators-top .p-galleria-item-container {\n    -webkit-box-ordinal-group: 3;\n        -ms-flex-order: 2;\n            order: 2;\n}\n.p-galleria-indicators-left .p-galleria-indicators,\n.p-galleria-indicators-top .p-galleria-indicators {\n    -webkit-box-ordinal-group: 2;\n        -ms-flex-order: 1;\n            order: 1;\n}\n.p-galleria-indicators-left .p-galleria-indicators,\n.p-galleria-indicators-right .p-galleria-indicators {\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-galleria-indicator-onitem .p-galleria-indicators {\n    position: absolute;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n}\n.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators {\n    top: 0;\n    left: 0;\n    width: 100%;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators {\n    right: 0;\n    top: 0;\n    height: 100%;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    -webkit-box-align: end;\n        -ms-flex-align: end;\n            align-items: flex-end;\n}\n.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators {\n    left: 0;\n    top: 0;\n    height: 100%;\n    -webkit-box-align: start;\n        -ms-flex-align: start;\n            align-items: flex-start;\n}\n\n/* FullScreen */\n.p-galleria-mask {\n    position: fixed;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    background-color: transparent;\n    -webkit-transition-property: background-color;\n    transition-property: background-color;\n}\n.p-galleria-close {\n    position: absolute;\n    top: 0;\n    right: 0;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    overflow: hidden;\n}\n.p-galleria-mask .p-galleria-item-nav {\n    position: fixed;\n    top: 50%;\n    margin-top: -.5rem;\n}\n\n/* Animation */\n.p-galleria-enter-active {\n    -webkit-transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n}\n.p-galleria-leave-active {\n    -webkit-transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n    transition: all 150ms cubic-bezier(0.4, 0.0, 0.2, 1);\n}\n.p-galleria-enter-from,\n.p-galleria-leave-to {\n    opacity: 0;\n    -webkit-transform: scale(0.7);\n            transform: scale(0.7);\n}\n.p-galleria-enter-active .p-galleria-item-nav {\n    opacity: 0;\n}\n.p-galleria-mask.p-galleria-mask-leave {\n    background-color: transparent;\n}\n\n/* Keyboard Support */\n.p-items-hidden .p-galleria-thumbnail-item {\n    visibility: hidden;\n}\n.p-items-hidden .p-galleria-thumbnail-item.p-galleria-thumbnail-item-active {\n    visibility: visible;\n}\n";
styleInject(css_248z);

script$4.render = render$3;

export default script$4;