{"version":3,"file":"CYFgqkwn.js","sources":["../../../../components/os-slide.vue","../../../../components/os-slides.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst guid = useGuid()\n\nconst props = defineProps<{\n  uspTemplate?: UspTemplate\n}>()\n\n/*\nonMounted(() => globalThis.dispatchEvent(new Event('os-slide-mounted')));\nonUnmounted(() => globalThis.dispatchEvent(new Event('os-slide-unmounted')));\n*/\n</script>\n\n<template>\n  <div class=\"swiper-slide os-slide\" :key=\"`os_slide_${guid}`\">\n    <slot />\n  </div>\n</template>\n\n<style scoped>\n.swiper-slide {\n  width: 100%;\n  height: 100%;\n  position: relative; /* Ensure the USP can be positioned relative to this */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  overflow: hidden; /* In case the USP goes beyond the boundaries */\n}\n</style>\n\n<style>\n.os-slide > * {\n  width: 100%;\n  height: 100%;\n  object-fit: contain;\n}\n\n.swiper--thumbs .swiper-slide {\n  cursor: pointer;\n  transition: opacity 300ms ease;\n  position: relative;\n}\n\n.swiper--thumbs .swiper-slide:not(.swiper-slide-thumb-active) {\n  opacity: 0.66;\n}\n\n.swiper--dialog-thumbs .swiper-slide {\n  cursor: pointer;\n  transition: opacity 300ms ease;\n}\n\n.swiper--dialog-thumbs .swiper-slide:not(.swiper-slide-thumb-active) {\n  opacity: 0.66;\n}\n</style>\n","<script setup lang=\"ts\">\nconst mediaQuery = useMediaQuery()\nconst guid = useGuid()\n\nconst props = defineProps<{\n  zoom?: boolean\n  paginate?: boolean\n  hint?: boolean\n}>()\n\nconst emit = defineEmits(['change'])\n\nconst fullscreenDialog = ref()\nconst swiperElement: Ref<HTMLElement | undefined> = ref()\nconst swiperThumbsElement: Ref<HTMLElement | undefined> = ref()\nconst swiperFullscreenElement: Ref<HTMLElement | undefined> = ref()\nconst swiperFullscreenThumbsElement: Ref<HTMLElement | undefined> = ref()\n\nlet currentSlideIndex: number = 0\nlet debouncer: number\nlet destroySwipers = () => {}\n\nfunction rebuildSwipers() {\n  let isReady = false\n\n  debouncer && globalThis.clearTimeout(debouncer)\n\n  debouncer = globalThis.setTimeout(() => {\n    destroySwipers()\n\n    let thumbsSwiper: any\n    let swiper: any\n    let fullscreenThumbsSwiper: any\n    let fullscreenSwiper: any\n\n    if (props.paginate && mediaQuery.value.isLarge) {\n      // @ts-ignore\n      thumbsSwiper = new Swiper(swiperThumbsElement.value, {\n        loop: !props.hint,\n        keyboard: true,\n\n        observer: true,\n        observeParents: true,\n        observeSlideChildren: true,\n\n        spaceBetween: 16,\n        slidesPerView: 4.5,\n        watchSlidesProgress: true,\n        initialSlide: currentSlideIndex,\n      })\n    }\n\n    // @ts-ignore\n    swiper = new Swiper(swiperElement.value, {\n      loop: !props.hint,\n      keyboard: true,\n      spaceBetween: 16,\n      initialSlide: currentSlideIndex,\n\n      navigation: {\n        nextEl: '.swiper-button-next',\n        prevEl: '.swiper-button-prev',\n      },\n\n      on: {\n        slideChange(event: any) {\n          if (isReady) {\n            currentSlideIndex = event.realIndex\n            emit('change', currentSlideIndex)\n            checkAndReloadIframe()\n          }\n        },\n      },\n\n      ...(props.paginate\n        ? {\n            thumbs: {\n              swiper: thumbsSwiper,\n            },\n            pagination: {\n              el: '.swiper-pagination',\n              dynamicBullets: true,\n              dynamicMainBullets: 4,\n            },\n          }\n        : {}),\n\n      ...(props.hint\n        ? {\n            spaceBetween: 16,\n            slidesPerView: 1.4,\n            centeredSlides: true,\n            slideToClickedSlide: true,\n          }\n        : {}),\n    })\n\n    if (props.zoom) {\n      // @ts-ignore\n      fullscreenThumbsSwiper = new Swiper(swiperFullscreenThumbsElement.value, {\n        loop: !props.hint,\n        keyboard: true,\n\n        observer: true,\n        observeParents: true,\n        observeSlideChildren: true,\n\n        spaceBetween: 16,\n        slidesPerView: 4.5,\n        watchSlidesProgress: true,\n        initialSlide: currentSlideIndex,\n      })\n\n      // @ts-ignore\n      fullscreenSwiper = new Swiper(swiperFullscreenElement.value, {\n        loop: !props.hint,\n        keyboard: true,\n        spaceBetween: 16,\n        initialSlide: currentSlideIndex,\n\n        navigation: {\n          nextEl: '.swiper-button-next',\n          prevEl: '.swiper-button-prev',\n        },\n        on: {\n          slideChange(event: any) {\n            checkAndReloadIframe()\n          },\n        },\n\n        thumbs: {\n          swiper: fullscreenThumbsSwiper,\n        },\n      })\n    }\n\n    destroySwipers = () => {\n      isReady = false\n\n      try {\n        swiper && swiper.destory && swiper.destory()\n      } catch (error) {}\n\n      try {\n        thumbsSwiper && thumbsSwiper.destory && thumbsSwiper.destory()\n      } catch (error) {}\n\n      try {\n        fullscreenSwiper &&\n          fullscreenSwiper.destory &&\n          fullscreenSwiper.destroy()\n      } catch (error) {}\n\n      try {\n        fullscreenThumbsSwiper &&\n          fullscreenThumbsSwiper.destory &&\n          fullscreenThumbsSwiper.destroy()\n      } catch (error) {}\n    }\n\n    setTimeout(() => {\n      isReady = true\n    }, 0)\n  }, 0)\n}\n\nfunction selectSlide(index: number) {\n  //@ts-ignore\n  if (swiperElement.value && swiperElement.value.swiper) {\n    //@ts-ignore\n    swiperElement.value.swiper.slideTo(index, 0, false)\n  }\n}\nfunction reloadIframe() {\n  const videoContainers = document.getElementsByClassName(\n    'youtube-embed-container',\n  )\n  if (videoContainers.length > 0) {\n    for (let i = 0; i < videoContainers.length; i++) {\n      const iframe = videoContainers[i] as HTMLIFrameElement\n      if (iframe) {\n        iframe.src = iframe.src // Reload the iframe\n      }\n    }\n  }\n}\n\nfunction checkAndReloadIframe() {\n  const activeSlides = document.getElementsByClassName('swiper-slide-active')\n  if (activeSlides.length > 0) {\n    for (let i = 0; i < activeSlides.length; i++) {\n      if (\n        activeSlides[i] &&\n        activeSlides[i].querySelector('.video-container')\n      ) {\n        reloadIframe()\n        break\n      }\n    }\n  }\n}\nonMounted(() => {\n  rebuildSwipers()\n  //globalThis.addEventListener('os-slide-mounted', rebuildSwipers);\n  //globalThis.addEventListener('os-slide-unmounted', rebuildSwipers);\n})\n\nonUnmounted(() => {\n  destroySwipers()\n  //globalThis.removeEventListener('os-slide-mounted', rebuildSwipers);\n  //globalThis.removeEventListener('os-slide-unmounted', rebuildSwipers);\n})\n\nfunction enterFullscreen() {\n  props.zoom && fullscreenDialog.value.open()\n}\n\ndefineExpose({\n  rebuildSwipers,\n  enterFullscreen,\n  selectSlide,\n})\n</script>\n\n<template>\n  <div\n    class=\"os-slides\"\n    :class=\"{\n      'os-slides--zoom': zoom,\n      'os-slides--paginate': paginate,\n      'os-slides--hint': hint,\n    }\"\n    :id=\"`os_slides_${guid}`\"\n  >\n    <div\n      class=\"swiper swiper--main\"\n      ref=\"swiperElement\"\n      @click=\"enterFullscreen\"\n    >\n      <div class=\"swiper-wrapper\">\n        <slot />\n      </div>\n\n      <div class=\"swiper-button-prev\" @click.stop=\"\">\n        <ion-button fill=\"outline\" size=\"small\">\n          <ion-icon :icon=\"ioniconsChevronBackOutline\" slot=\"icon-only\" />\n        </ion-button>\n      </div>\n\n      <div class=\"swiper-button-next\" @click.stop=\"\">\n        <ion-button fill=\"outline\" size=\"small\">\n          <ion-icon :icon=\"ioniconsChevronForwardOutline\" slot=\"icon-only\" />\n        </ion-button>\n      </div>\n\n      <div v-if=\"paginate\" class=\"swiper-pagination\"></div>\n    </div>\n\n    <div\n      v-if=\"paginate && mediaQuery.isLarge\"\n      class=\"swiper swiper--thumbs\"\n      ref=\"swiperThumbsElement\"\n    >\n      <div class=\"swiper-wrapper\">\n        <slot />\n      </div>\n    </div>\n\n    <os-dialog\n      v-if=\"zoom\"\n      ref=\"fullscreenDialog\"\n      class=\"os-slides-dialog\"\n      size=\"large\"\n      padding=\"none\"\n      @open=\"rebuildSwipers\"\n    >\n      <div>\n        <div class=\"swiper swiper--dialog\" ref=\"swiperFullscreenElement\">\n          <div class=\"swiper-wrapper\">\n            <slot />\n          </div>\n\n          <div class=\"swiper-button-prev\" @click.stop=\"\">\n            <ion-button fill=\"outline\" size=\"small\">\n              <ion-icon :icon=\"ioniconsChevronBackOutline\" slot=\"icon-only\" />\n            </ion-button>\n          </div>\n\n          <div class=\"swiper-button-next\" @click.stop=\"\">\n            <ion-button fill=\"outline\" size=\"small\">\n              <ion-icon\n                :icon=\"ioniconsChevronForwardOutline\"\n                slot=\"icon-only\"\n              />\n            </ion-button>\n          </div>\n        </div>\n\n        <div\n          v-show=\"!mediaQuery.isMedium\"\n          class=\"swiper swiper--dialog-thumbs\"\n          ref=\"swiperFullscreenThumbsElement\"\n        >\n          <div class=\"swiper-wrapper\">\n            <slot />\n          </div>\n        </div>\n      </div>\n    </os-dialog>\n  </div>\n</template>\n\n<style scoped>\n.os-slides {\n  width: 100%;\n  overflow: hidden;\n\n  --swiper-pagination-color: var(--background--accent);\n  --swiper-pagination-bullet-opacity: 1;\n  --swiper-pagination-bullet-inactive-color: var(--background--primary);\n  --swiper-pagination-bullet-inactive-opacity: 1;\n}\n.swiper {\n  width: 100%;\n  height: 100%;\n  position: relative;\n  margin-bottom: 1rem;\n}\n\n.os-slides--hint .swiper {\n  margin-bottom: 0;\n}\n\n.os-slides--hint .swiper-wrapper {\n  padding-bottom: 1rem;\n}\n\n.os-slides--zoom .swiper--main {\n  cursor: zoom-in;\n}\n.swiper-button-prev,\n.swiper-button-next {\n  width: auto;\n  height: 2rem;\n  padding: 0;\n  margin: 0;\n  top: 50%;\n  margin-top: -1rem;\n  left: 1rem;\n  z-index: 50;\n}\n\n.swiper-button-prev ion-button,\n.swiper-button-next ion-button {\n  height: 2rem;\n  width: 2.5rem;\n}\n\n.swiper-button-next {\n  left: auto;\n  right: 1rem;\n}\n\n.swiper-button-prev::after,\n.swiper-button-next::after {\n  display: none;\n}\n\n.swiper-wrapper {\n  padding-bottom: 1.5rem;\n}\n\n.swiper-pagination {\n  bottom: 0;\n}\n\n.swiper--dialog {\n  margin-bottom: -1rem !important;\n}\n\n.swiper--dialog-thumbs {\n  position: absolute;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  height: 50px;\n}\n\n@media (min-width: 640px) {\n  .swiper-pagination {\n    display: none;\n  }\n  .swiper-wrapper {\n    padding-bottom: 0;\n  }\n\n  .swiper-button-prev ion-button,\n  .swiper-button-next ion-button {\n    height: 3rem;\n    width: 3rem;\n  }\n}\n\n@media screen and (max-width: 767px) {\n  .swiper--dialog {\n    height: calc(100vh - max(30px, var(--ion-safe-area-top)) - 120px);\n  }\n}\n</style>\n"],"names":["guid","useGuid","mediaQuery","useMediaQuery","props","__props","emit","__emit","fullscreenDialog","ref","swiperElement","swiperThumbsElement","swiperFullscreenElement","swiperFullscreenThumbsElement","currentSlideIndex","debouncer","destroySwipers","rebuildSwipers","isReady","thumbsSwiper","swiper","fullscreenThumbsSwiper","fullscreenSwiper","event","checkAndReloadIframe","selectSlide","index","reloadIframe","videoContainers","i","iframe","activeSlides","onMounted","onUnmounted","enterFullscreen","__expose"],"mappings":"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"}