import { n as normalizeComponent, u as use, r as registerComponent } from './normalize-component-63e8c7a0.js';
import { _ as _objectSpread2 } from './objectSpread2-605331b1.js';
import './es.number.constructor-16a232f3.js';
import './es.object.to-string-5a59fbfc.js';
import './web.dom-collections.for-each-917714ef.js';
import './es.array.from-3ef944e4.js';
import './es.string.iterator-eb7ab984.js';
import Swiper, { Navigation, Lazy, Keyboard } from 'swiper';
import './es.regexp.to-string-784af81c.js';
import './es.array.includes-1f433385.js';
import './regexp-exec-abstract-04d119fc.js';
import './es.string.match-4b347bdd.js';
import './es.array.join-6ca857ff.js';
import './es.array.map-093cfbca.js';
import './es.object.keys-6369b884.js';
import './es.array.concat-9f3136dc.js';
import './es.object.values-a2198dd7.js';
import BaseLoader from './BaseLoader-a5bfc4d9.js';
import { i as i18n } from './i18n-e25edebe.js';
import BaseIcon from './BaseIcon-d03b1fa2.js';
import { p as popUpLock } from './popUpLock-e65bd82b.js';
import './defineProperty-18999f8e.js';
import './export-ecf4b1cb.js';
import './object-set-prototype-of-9853ad1a.js';
import './classof-b10e7604.js';
import './dom-iterables-b6f5ef3b.js';
import './array-iteration-dec5536e.js';
import './function-bind-context-b3fabf77.js';
import './array-species-create-afb281e6.js';
import './array-method-is-strict-903f485b.js';
import './create-property-c00b5c27.js';
import './string-multibyte-88926e02.js';
import './set-to-string-tag-452fb9b0.js';
import './regexp-flags-b5fc4ddb.js';
import './object-keys-a5d351f7.js';
import './array-method-has-species-support-d96108b0.js';
import './es.string.split-cd1f3afc.js';
import './is-regexp-5558fd03.js';

/**
 * Component allowing for the display of images or streaming of
 * audio and video (currently only hls format) and by using browser pdf viewer also pdfs
 */

var script$1 = {
  name: 'BaseMedia',
  components: {
    BaseLoader: BaseLoader,
    BaseButton: function BaseButton() {
      return import('./BaseButton-44a621e1.js');
    },
    BaseHlsVideo: function BaseHlsVideo() {
      return import('./BaseHlsVideo-7830351c.js');
    }
  },
  mixins: [i18n],
  props: {
    /**
     * url of the medium to be displayed
     */
    mediaUrl: {
      type: String,
      default: ''
    },

    /**
     * url of image for poster property in html5 video tag
     */
    mediaPosterUrl: {
      type: String,
      default: ''
    },

    /**
     * filename that will be displayed for the medium
     */
    displayName: {
      type: String,
      default: ''
    },

    /**
     * url for downloading the file
     */
    downloadUrl: {
      type: String,
      default: ''
    },

    /**
     * define the media type <br>
     *     options: 'image'|'video'|'audio'|'pdf'
     */
    mediaType: {
      type: String,
      default: '',
      validator: function validator(val) {
        return ['image', 'video', 'audio', 'pdf', ''].includes(val);
      }
    },

    /**
     * set height and with from outside <br>
     * e.g. { width: 1280px, height: 720px }
     */
    displaySize: {
      type: Object,
      default: function _default() {
        return {};
      }
    },

    /**
     * define if download button should be shown and download be enabled
     */
    allowDownload: {
      type: Boolean,
      default: true
    },

    /**
     * define information texts for download and view (for pdfs) buttons in an
     * object with the respective properties<br>
     *   could be strings or path to i18n json as well
     */
    infoTexts: {
      type: Object,
      default: function _default() {
        return {
          download: 'Download',
          view: 'View'
        };
      }
    },

    /**
     * define how the image should be rotated (EXIF orientation values)
     */
    orientation: {
      type: Number,
      default: 0
    },

    /**
     * specify an image srcset as an array of objects in the form <br>
     *     { 'mediawidth': 'url' }
     */
    previews: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * additional info text below file name
     */
    additionalInfo: {
      type: Array,
      default: function _default() {
        return [];
      }
    },

    /**
     * set autoplay for video
     */
    autoplay: {
      type: Boolean,
      default: false
    },

    /**
     * info text to display current slide e.g. '1 / 6'
     */
    currentSlideInfo: {
      type: String,
      default: ''
    },

    /**
     * define startLevel (size) of hls-video
     */
    hlsStartLevel: {
      type: Number,
      default: undefined
    }
  },
  data: function data() {
    return {
      // variable for display image error handling
      displayImage: true,
      isMobile: false,
      // variable to store calculated footer height
      footerHeight: null
    };
  },
  computed: {
    fileType: function fileType() {
      if (this.mediaType) return this.mediaType;
      var docType = this.fileEnding; // check if image

      if (['png', 'gif', 'jpeg', 'jpg'].includes(docType.toLowerCase())) {
        return 'image';
      } // check if video


      if (['mp4', 'm3u8', 'ogg'].includes(docType.toLowerCase())) {
        return 'video';
      } // check if audio


      if (['mp3', 'wav', 'mpeg'].includes(docType.toLowerCase())) {
        return 'audio';
      } // check if pdf


      if (['pdf'].includes(docType.toLowerCase())) {
        return 'document';
      }

      return '';
    },
    fileName: function fileName() {
      var match = this.sourceUrl.match(/([^/]+)$/);
      return match ? decodeURI(match[1]) : '';
    },
    fileEnding: function fileEnding() {
      var match = this.sourceUrl.match(/\w+\.(\w{2,4})$/);
      return match ? match[1] : '';
    },
    formatNotSupported: function formatNotSupported() {
      return !this.fileType;
    },
    imageSourceSet: function imageSourceSet() {
      return this.previews.length ? this.previews.map(function (size) {
        return Object.keys(size).map(function (width) {
          return "".concat(size[width], " ").concat(width);
        });
      }).join(', ') : '';
    },
    sourceUrl: function sourceUrl() {
      var last = this.previews.length - 1;
      return this.previews && this.previews[last] ? Object.values(this.previews[last])[0] : this.mediaUrl;
    }
  },
  mounted: function mounted() {
    this.isMobile = window.innerWidth <= 640;
    this.setFooterHeight();
    this.resizeObserver().observe(document.body);
  },
  beforeDestroy: function beforeDestroy() {
    this.resizeObserver().unobserve(document.body);
  },
  methods: {
    /**
     * function to trigger download action
     */
    download: function download() {
      // check again if user is allowed to download
      if (this.allowDownload || !this.allowDownload && this.fileType === '') {
        /**
         * download button clicked
         *
         * @event download
         * @type { Object }
         *
         */
        this.$emit('download', {
          url: this.downloadUrl || this.mediaUrl,
          name: this.fileName
        });
      }
    },

    /**
     * function to open pdf
     */
    openPdf: function openPdf() {
      window.open(this.mediaUrl);
    },

    /**
     * set footer height
     */
    setFooterHeight: function setFooterHeight() {
      if (!this.$refs.footer) {
        return;
      }

      this.footerHeight = this.$refs.footer.offsetHeight;
    },

    /**
     * check if document width changes and calc/set footer height
     */
    resizeObserver: function resizeObserver() {
      var _this = this;

      return new ResizeObserver(this.throttle(function () {
        return _this.setFooterHeight();
      }, 500));
    },

    /**
     * throttle event until user action is finished
     * @param {function} callback - callback function
     * @param {number} delay - time to delay in ms
     * @returns {(function(...[*]=): void)|*}
     */
    throttle: function throttle(callback, delay) {
      var _this2 = this;

      var timer = 0;
      return function () {
        for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
          args[_key] = arguments[_key];
        }

        clearTimeout(timer);
        timer = setTimeout(function () {
          return callback.apply(_this2, args);
        }, delay);
      };
    }
  }
};

var __vue_script__$1 = script$1;
/* template */

var __vue_render__$1 = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('div', {
    staticClass: "base-media-preview-image-stage",
    style: {
      '--footer-height': _vm.footerHeight + 'px'
    }
  }, [_vm.displayImage && _vm.fileType === 'image' ? _c('div', {
    staticClass: "base-media-preview-preloader"
  }, [_c('base-loader', {
    staticClass: "base-media-preview-preloader-loader"
  })], 1) : _vm._e(), _vm._v(" "), _vm.displayImage && _vm.fileType === 'image' ? _c('img', {
    class: ['swiper-lazy', 'base-media-preview-image', 'base-media-preview-rotation-' + _vm.orientation.toString()],
    style: _vm.displaySize,
    attrs: {
      "data-srcset": _vm.imageSourceSet,
      "data-src": _vm.sourceUrl
    },
    on: {
      "error": function error($event) {
        _vm.displayImage = false;
      }
    }
  }) : _vm.fileType === 'image' && !_vm.displayImage ? _c('div', {
    staticClass: "base-media-preview-not-supported base-media-preview-error"
  }, [_c('p', {
    staticClass: "base-media-preview-not-supported-file-name"
  }, [_vm._v("\n      An error occurred displaying this image.\n    ")])]) : _vm.fileType === 'video' ? _c('base-hls-video', {
    ref: "baseMediaVideo",
    staticClass: "base-media-preview-image base-media-preview-video",
    attrs: {
      "display-size": _vm.displaySize,
      "media-url": _vm.mediaUrl,
      "media-poster-url": _vm.mediaPosterUrl,
      "autoplay": _vm.autoplay,
      "hls-start-level": _vm.hlsStartLevel
    }
  }) : _vm.fileType === 'audio' ? _c('audio', {
    ref: "baseMediaAudio",
    staticClass: "base-media-preview__audio",
    attrs: {
      "controls": ""
    }
  }, [_vm._v("\n    Your browser does not support the audio tag.\n    "), _c('source', {
    attrs: {
      "src": _vm.mediaUrl,
      "type": "audio/mpeg"
    }
  })]) : _c('div', {
    staticClass: "base-media-preview-not-supported base-media-preview-error"
  }, [_c('p', {
    staticClass: "base-media-preview-not-supported-file-name"
  }, [_vm._v("\n      " + _vm._s(_vm.fileName) + "\n    ")]), _vm._v(" "), _c('div', {
    staticClass: "base-media-preview-not-supported-buttons"
  }, [_vm.allowDownload || !_vm.allowDownload && _vm.fileType === '' ? _c('BaseButton', {
    staticClass: "base-media-preview__button base-media-preview-not-supported-button",
    attrs: {
      "text": _vm.getI18nTerm(_vm.infoTexts.download),
      "icon": "download",
      "icon-position": "right",
      "icon-size": "large"
    },
    on: {
      "clicked": _vm.download
    }
  }) : _vm._e(), _vm._v(" "), !_vm.isMobile && _vm.fileEnding === 'pdf' || !_vm.allowDownload && _vm.fileEnding === 'pdf' ? _c('BaseButton', {
    staticClass: "base-media-preview__button base-media-preview-not-supported-button",
    attrs: {
      "text": _vm.getI18nTerm(_vm.infoTexts.view),
      "icon": "eye",
      "icon-position": "right",
      "icon-size": "large"
    },
    on: {
      "clicked": function clicked($event) {
        return _vm.openPdf();
      }
    }
  }) : _vm._e()], 1), _vm._v(" "), _vm._l(_vm.additionalInfo, function (textline) {
    return _c('p', {
      key: textline,
      staticClass: "base-media-preview__not-supported-additional"
    }, [_vm._v("\n      " + _vm._s(textline) + "\n    ")]);
  })], 2), _vm._v(" "), _c('div', {
    ref: "footer",
    staticClass: "base-media-preview-info"
  }, [_c('div', {
    staticClass: "base-media-preview__info__col\n             base-media-preview__info__col1\n             base-media-preview__info-text-wrapper"
  }, [_c('p', {
    staticClass: "base-media-preview-info-text"
  }, [_vm._v("\n        " + _vm._s(_vm.displayName) + "\n      ")]), _vm._v(" "), _vm.additionalInfo.length ? _vm._l(_vm.additionalInfo, function (textline) {
    return _c('p', {
      key: textline,
      staticClass: "base-media-preview__info-text-additional"
    }, [_vm._v("\n          " + _vm._s(textline) + "\n        ")]);
  }) : _vm._e()], 2), _vm._v(" "), _vm.currentSlideInfo ? _c('div', {
    staticClass: "base-media-preview__info__col base-media-preview__info__col2",
    attrs: {
      "aria-hidden": "true"
    }
  }, [_c('p', [_vm._v("\n        " + _vm._s(_vm.currentSlideInfo) + "\n      ")])]) : _vm._e(), _vm._v(" "), _vm.allowDownload ? _c('div', {
    staticClass: "base-media-preview__info__col base-media-preview__info__col3"
  }, [_c('BaseButton', {
    staticClass: "base-media-preview__button",
    attrs: {
      "text": _vm.infoTexts.download,
      "icon": "download",
      "icon-position": "right",
      "icon-size": "large"
    },
    on: {
      "clicked": _vm.download
    }
  })], 1) : _vm._e()])], 1);
};

var __vue_staticRenderFns__$1 = [];
/* style */

var __vue_inject_styles__$1 = undefined;
/* scoped */

var __vue_scope_id__$1 = "data-v-151dd655";
/* module identifier */

var __vue_module_identifier__$1 = undefined;
/* functional template */

var __vue_is_functional_template__$1 = false;
/* style inject */

/* style inject SSR */

/* style inject shadow dom */

var __vue_component__$1 = /*#__PURE__*/normalizeComponent({
  render: __vue_render__$1,
  staticRenderFns: __vue_staticRenderFns__$1
}, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, false, undefined, undefined, undefined);

var BaseMediaCarouselItem = __vue_component__$1;

Swiper.use([Navigation, Lazy, Keyboard]);
/**
 * Component allowing sliding through images,
 * audio, video (currently only hls format) and files
 */

var script = {
  name: 'BaseMediaCarousel',
  components: {
    BaseMediaCarouselItem: BaseMediaCarouselItem,
    BaseIcon: BaseIcon
  },
  mixins: [popUpLock],
  props: {
    /**
     * array of items to render <br>
     * structure: [<br>
     *   { title: 'Image', mediaUrl: 'path-to-file.file-format' },<br>
     *   { title: 'Video', mediaUrl: 'path-to-file.m3u8',
     *     mediaPosterUrl: 'path-to-file.file-format', displaySize: { width: '1000px' } },<br>
     *   { title: 'Audio', mediaUrl: 'path-to-file.file-format' },<br>
     *   { title: 'Document', mediaUrl: 'path-to-file.file-format' },<br>
     * ]
     */
    items: {
      type: Array,
      default: function _default() {
        return [{}];
      }
    },

    /**
     * index of initial slide<br>
     *   this NEEDS to be provided if carousel should start with any other
     *   than first image in items array
     */
    initialSlide: {
      type: [Number, String],
      default: 0
    },

    /**
     * define if download button should be shown and download be enabled
     */
    allowDownload: {
      type: Boolean,
      default: true
    },

    /**
     * define information texts for download and view (for pdfs) buttons
     */
    infoTexts: {
      type: Object,
      default: function _default() {
        return {
          download: 'Download',
          view: 'View'
        };
      }
    },

    /**
     * steer the display of the lightbox
     */
    showPreview: {
      type: Boolean,
      default: false
    },

    /**
     * swiper API: https://swiperjs.com/api/#parameters
     */
    swiperOptions: {
      type: Object,
      default: function _default() {
        return {
          speed: 500,
          keyboard: {
            enabled: true
          }
        };
      }
    }
  },
  data: function data() {
    return {
      showInt: this.showPreview,
      // needed for popUpLock mixin
      targetName: 'mediaCarousel',
      swiper: null,
      // eslint-disable-next-line
      swiperId: "base-media-carousel__swiper".concat(this._uid)
    };
  },
  watch: {
    showPreview: function showPreview(val) {
      this.showInt = val;
    }
  },
  updated: function updated() {
    var _this = this;

    this.$nextTick(function () {
      if (process.browser && _this.showInt && _this.swiper === null) {
        _this.initSwiper();

        _this.$el.addEventListener('keyup', function (e) {
          return _this.escapeEvent(e);
        });

        _this.$el.addEventListener('keydown', function (e) {
          return _this.tabEvents(e);
        });
      }

      if (!_this.showInt) {
        _this.swiper = null;

        _this.$el.removeEventListener('keyup', function (e) {
          return _this.escapeEvent(e);
        });

        _this.$el.removeEventListener('keydown', function (e) {
          return _this.tabEvents(e);
        });
      }
    });
  },
  methods: {
    /**
     * hide preview
     */
    hide: function hide() {
      /**
       * triggered by clicking on close button
       *
       * @event hide
       * @type { None }
       *
       */
      this.$emit('hide');
    },

    /**
     * init Swiper
     * control media after swipe
     */
    initSwiper: function initSwiper() {
      var _this2 = this;

      var additionalOptions = {
        init: false,
        initialSlide: this.initialSlide,
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        },
        preloadImages: false,
        lazy: {
          loadPrevNext: true,
          preloaderClass: 'base-media-preview-preloader'
        },
        // Threshold value in px.
        // If "touch distance" will be lower than this value then swiper will not move
        threshold: 10
      };
      this.swiper = new Swiper("#".concat(this.swiperId), _objectSpread2(_objectSpread2({}, this.swiperOptions), additionalOptions));
      this.swiper.on('slideChange', function () {
        _this2.mediaPause();
      });
      this.swiper.on('transitionEnd', function () {
        // select active slide and set focus
        var media = _this2.$refs.baseMedia[_this2.swiper.activeIndex];
        media.$el.focus();
      }); // calc of slide width is wrong on first initialization using component in ssr
      // quickfix is to trigger resize after swiper init
      // TODO: clarify and find better solution

      this.swiper.on('init', function () {
        // edge needs somehow setTimeout to trigger resize
        setTimeout(function () {
          window.dispatchEvent(new Event('resize'));
        }, 0);
      });
      this.swiper.init(); // set focus to opened slide/media - otherwise esc key won't work on first slide

      this.$refs.baseMedia[this.swiper.activeIndex].$el.focus();
    },

    /**
     * pause media on previous slide
     */
    mediaPause: function mediaPause() {
      var media = this.$refs.baseMedia[this.swiper.previousIndex]; // video

      if (media && media.$refs.baseMediaVideo) {
        media.$refs.baseMediaVideo.pause();
      } // audio


      if (media && media.$refs.baseMediaAudio) {
        media.$refs.baseMediaAudio.pause();
      }
    },

    /**
     * intercept escape key event, hide modal
     */
    escapeEvent: function escapeEvent(e) {
      if (e.key === 'Escape') {
        this.hide();
      }
    },

    /**
     * intercept tab key event
     * due swiper breaks using tab keys
     */
    tabEvents: function tabEvents(e) {
      if (e.shiftKey && e.key === 'Tab') {
        e.preventDefault();
        this.setFocus('prev');
        return;
      }

      if (e.key === 'Tab') {
        e.preventDefault();
        this.setFocus('next');
      }
    },

    /**
     * get focusable dom elements per slide
     *
     * @return array
     */
    getFocusableItems: function getFocusableItems() {
      var focusable = 'button, audio, video[tabindex="1"]';
      var focusableBySlide = [];
      this.$refs.baseMedia.forEach(function (slide) {
        // focusable dom elements
        var items = Array.from(slide.$el.querySelectorAll(focusable)); // add current slide (is focused after slide change)

        items.unshift(slide.$el);
        focusableBySlide.push(items);
      });
      return focusableBySlide;
    },

    /**
     * set focus to prev/next focusable dom element
     * trigger slideEvent if needed
     *
     * @param {string} direction 'prev', 'next'
     */
    setFocus: function setFocus() {
      var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'next';
      var items = this.getFocusableItems();
      var currentSlide;
      var currentFocus;
      items.forEach(function (item, itemIndex) {
        item.forEach(function (element, elemIndex) {
          if (element.matches(':focus')) {
            currentSlide = itemIndex;
            currentFocus = elemIndex;
          }
        });
      });

      if (direction === 'next') {
        if (items[currentSlide][currentFocus + 1]) {
          items[currentSlide][currentFocus + 1].focus();
          return;
        }

        this.swiper.slideNext();
      }

      if (direction === 'prev') {
        if (items[currentSlide][currentFocus - 1]) {
          items[currentSlide][currentFocus - 1].focus();
          return;
        }

        this.swiper.slidePrev();
      }
    },
    download: function download(value) {
      /**
       * download button clicked
       *
       * @event download
       * @type { Object }
       *
       */
      this.$emit('download', value);
    }
  }
};

/* script */
var __vue_script__ = script;
/* template */

var __vue_render__ = function __vue_render__() {
  var _vm = this;

  var _h = _vm.$createElement;

  var _c = _vm._self._c || _h;

  return _c('transition', {
    attrs: {
      "name": "grow"
    }
  }, [_vm.showInt ? _c('div', {
    ref: "mediaCarousel",
    staticClass: "base-media-carousel"
  }, [_c('div', {
    staticClass: "base-media-carousel__background"
  }), _vm._v(" "), _c('button', {
    staticClass: "base-media-carousel__close",
    on: {
      "click": _vm.hide
    }
  }, [_c('base-icon', {
    attrs: {
      "name": "remove"
    }
  })], 1), _vm._v(" "), _c('div', {
    staticClass: "swiper-container",
    attrs: {
      "id": _vm.swiperId
    }
  }, [_vm.items.length > 1 ? [_c('base-icon', {
    staticClass: "swiper-button swiper-button-prev",
    attrs: {
      "name": "prev"
    }
  }), _vm._v(" "), _c('base-icon', {
    staticClass: "swiper-button swiper-button-next",
    attrs: {
      "name": "next"
    }
  })] : _vm._e(), _vm._v(" "), _c('div', {
    staticClass: "swiper-wrapper"
  }, _vm._l(_vm.items, function (media, index) {
    return _c('div', {
      key: index,
      staticClass: "swiper-slide"
    }, [_c('base-media-carousel-item', {
      ref: "baseMedia",
      refInFor: true,
      attrs: {
        "autoplay": index === _vm.initialSlide,
        "additional-info": media.additionalInfo,
        "allow-download": _vm.allowDownload,
        "current-slide-info": _vm.items.length > 1 ? index + 1 + " / " + _vm.items.length : '',
        "display-name": media.title,
        "display-size": media.displaySize,
        "download-url": media.downloadUrl,
        "info-texts": _vm.infoTexts,
        "media-url": media.mediaUrl,
        "media-poster-url": media.mediaPosterUrl,
        "media-type": media.mediaType,
        "orientation": media.orientation,
        "previews": media.previews,
        "hls-start-level": media.hlsStartLevel,
        "tabindex": "1"
      },
      on: {
        "download": _vm.download
      }
    })], 1);
  }), 0)], 2)]) : _vm._e()]);
};

var __vue_staticRenderFns__ = [];
/* style */

var __vue_inject_styles__ = undefined;
/* scoped */

var __vue_scope_id__ = "data-v-9aeb5576";
/* module identifier */

var __vue_module_identifier__ = undefined;
/* functional template */

var __vue_is_functional_template__ = false;
/* style inject */

/* style inject SSR */

/* style inject shadow dom */

var __vue_component__ = /*#__PURE__*/normalizeComponent({
  render: __vue_render__,
  staticRenderFns: __vue_staticRenderFns__
}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);

var BaseMediaCarousel = __vue_component__;

var Plugin = {
  install: function install(Vue) {
    registerComponent(Vue, BaseMediaCarousel);
  }
};
use(Plugin);

export { BaseMediaCarousel, Plugin as default };
