{"version":3,"file":"EditorialGallerySlideshow-v2.js","sources":["../../../../../design-system/components/Editorial/EditorialGallerySlideshow.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type {\n  EditorialGallerySlideshowProps,\n  galleryCard,\n} from './EditorialGallerySlideshow.props'\nimport { v4 as uuidv4 } from 'uuid'\nimport type { EmblaOptionsType, EmblaCarouselType } from 'embla-carousel'\n\nconst props = defineProps<EditorialGallerySlideshowProps>()\n\nconst GALLERY_SLIDE_SHOW_ID = `gallery-slideshow-${uuidv4()}`\n\nconst { openDialog } = useDialog(GALLERY_SLIDE_SHOW_ID)\n\nconst clickedSlide = ref(0)\n\nconst emblaApi = ref<EmblaCarouselType | null>(null)\n\nconst options = computed(\n  (): EmblaOptionsType => ({\n    loop: false,\n    skipSnaps: true,\n    startIndex: clickedSlide.value,\n  })\n)\n\nconst canScrollPrev = ref(false)\nconst canScrollNext = ref(false)\n\nconst onInit = (embla: Ref<EmblaCarouselType | undefined>) => {\n  if (embla.value) {\n    emblaApi.value = embla.value\n    updateButtonStates()\n\n    emblaApi.value.on('select', () => {\n      updateButtonStates()\n    })\n  }\n}\n\nconst scrollPrev = () => {\n  if (emblaApi.value) {\n    emblaApi.value.scrollPrev()\n    updateButtonStates()\n  }\n}\n\nconst scrollNext = () => {\n  if (emblaApi.value) {\n    emblaApi.value.scrollNext()\n    updateButtonStates()\n  }\n}\n\nconst updateButtonStates = () => {\n  if (!emblaApi.value) return\n\n  if (!options.value.loop) {\n    canScrollPrev.value = emblaApi.value.canScrollPrev()\n    canScrollNext.value = emblaApi.value.canScrollNext()\n  } else {\n    canScrollPrev.value = true\n    canScrollNext.value = true\n  }\n}\n\nconst handleClick = (item: galleryCard) => {\n  clickedSlide.value = props.cardsSlideShow.indexOf(item)\n\n  openDialog()\n}\n\nconst titleStripTextPositionOptions = {\n  center: 'align-class-center',\n  left: 'align-class-left',\n  right: 'align-class-right',\n}\n\nconst cardTextPositionOptions = {\n  center: 'text-center',\n  left: 'text-start',\n  right: 'text-end',\n}\n\nconst isHovering = ref(false)\n\nconst hasTitleStrip = computed(() => {\n  return props.titleStrip && Object.keys(props.titleStrip).length > 0\n})\n\nonBeforeUnmount(() => {\n  if (emblaApi.value) {\n    emblaApi.value.off('select', updateButtonStates)\n  }\n})\n</script>\n\n<template>\n  <div\n    class=\"editorial-gallery-slideshow bg-background-secondary relative flex flex-col gap-6 overflow-hidden\"\n    :class=\"hasTitleStrip ? 'py-16' : ''\"\n  >\n    <UITitleStrip\n      v-if=\"hasTitleStrip\"\n      v-bind=\"titleStrip\"\n      :text-alignment=\"titleStripTextPositionOptions[titleTextAlign ?? 'left']\"\n    />\n    <UISliderEditorialWithArrows\n      :items=\"cardsSlideShow\"\n      :has-no-space-between=\"cardsConfiguration?.hasNoSpaceBetween\"\n      :loop=\"cardsSlideShow.length > 3\"\n      :show-navigation=\"cardsSlideShow.length > 3\"\n      :type=\"cardsConfiguration?.type\"\n      :card-dimensions=\"cardsConfiguration?.cardDimensions\"\n      :mobile-centered=\"cardsConfiguration?.mobileCentered\"\n      :padding=\"cardsConfiguration?.padding\"\n    >\n      <template #default=\"{ item }\">\n        <div @click=\"handleClick(item)\">\n          <UIMedia\n            v-bind=\"item.cardMediaSlide\"\n            :class=\"[isHovering ? 'custom-zoom-cursor-add' : '']\"\n            class=\"image-slider-container\"\n            :aspect-ratio=\"\n              aspectRatio ?? item.cardMediaSlide.aspectRatio ?? '4/5'\n            \"\n            @mouseover=\"isHovering = true\"\n            @mouseleave=\"isHovering = false\"\n          />\n\n          <div\n            v-if=\"item.title || item.subtitle\"\n            class=\"slide-info pt-md lg:pt-lg flex w-full flex-col gap-2\"\n          >\n            <UtilsMarkdown\n              v-if=\"item.title\"\n              :content=\"item.title\"\n              is-preprocessed\n              container=\"span\"\n              class=\"text-text-primary text-book-5\"\n              :class=\"[\n                cardTextPositionOptions[item.cardTitlePosition ?? 'center'],\n              ]\"\n            />\n            <UtilsMarkdown\n              v-if=\"item.subtitle\"\n              :content=\"item.subtitle\"\n              is-preprocessed\n              container=\"span\"\n              class=\"text-text-primary text-light-5\"\n              :class=\"[\n                cardTextPositionOptions[item.cardSubtitlePosition ?? 'center'],\n              ]\"\n            />\n          </div>\n        </div>\n      </template>\n    </UISliderEditorialWithArrows>\n\n    <OrganismsModal :id=\"GALLERY_SLIDE_SHOW_ID\" :uses-highest-z-index=\"true\">\n      <template #body>\n        <div class=\"relative h-full w-full\">\n          <button\n            type=\"button\"\n            class=\"carousel-button carousel-button-prev hidden md:block\"\n            :disabled=\"!canScrollPrev\"\n            aria-label=\"Previous slide\"\n            @click.stop=\"scrollPrev\"\n          >\n            <div class=\"arrow arrow--left\"></div>\n          </button>\n\n          <UISliderBase :options=\"options\" @init=\"onInit\">\n            <div v-for=\"(card, index) of cardsSlideShow\" :key=\"index\">\n              <div\n                class=\"flex h-[100vh] flex-col gap-8 pb-8 pt-12 md:pt-6 lg:pt-16\"\n              >\n                <UIZoomableImage\n                  v-if=\"card.cardMediaSlide.media.type === 'image'\"\n                  :src=\"card.cardMediaSlide.media.srcImage.secure_url!\"\n                  :alt=\"card.cardMediaSlide.media.alt!\"\n                  :reset-zoom=\"0\"\n                  :is-gallery-slide-show=\"true\"\n                  :aspect-ratio=\"card.cardMediaSlide.aspectRatio ?? '4/5'\"\n                  class=\"positive-padding\"\n                />\n                <div\n                  class=\"flex flex-col gap-2 px-2 md:m-auto md:w-[68vh] md:px-0\"\n                >\n                  <UtilsMarkdown\n                    v-if=\"card.title\"\n                    :content=\"card.title\"\n                    is-preprocessed\n                    container=\"span\"\n                    class=\"text-text-primary text-book-5\"\n                    :class=\"[\n                      cardTextPositionOptions[\n                        card.zoomTitlePosition ?? 'center'\n                      ],\n                    ]\"\n                  />\n                  <UtilsMarkdown\n                    v-if=\"card.subtitle\"\n                    :content=\"card.subtitle\"\n                    is-preprocessed\n                    container=\"span\"\n                    class=\"text-text-primary text-light-5\"\n                    :class=\"[\n                      cardTextPositionOptions[\n                        card.zoomSubtitlePosition ?? 'center'\n                      ],\n                    ]\"\n                  />\n                </div>\n              </div>\n            </div>\n          </UISliderBase>\n\n          <button\n            type=\"button\"\n            class=\"carousel-button carousel-button-next hidden md:block\"\n            :disabled=\"!canScrollNext\"\n            aria-label=\"Next slide\"\n            @click.stop=\"scrollNext\"\n          >\n            <div class=\"arrow arrow--right\"></div>\n          </button>\n        </div>\n      </template>\n    </OrganismsModal>\n  </div>\n</template>\n\n<style scoped lang=\"scss\">\n.swiper-button-next-unique-gallery::after,\n.swiper-button-prev-unique-gallery::after,\n.swiper-button-next-unique-gallery,\n.swiper-button-prev-unique-gallery {\n  --swiper-navigation-size: 14px;\n  --swiper-navigation-sides-offset: 30px;\n  --swiper-navigation-top-offset: 50%;\n  @apply text-text-primary;\n}\n\n.swiper-button-next-unique::after,\n.swiper-button-prev-unique::after,\n.swiper-button-next-unique,\n.swiper-button-prev-unique {\n  --swiper-navigation-size: 14px;\n  --swiper-navigation-sides-offset: 10px;\n  --swiper-navigation-top-offset: 45%;\n  @apply text-text-primary;\n}\n\n.custom-zoom-cursor-add {\n  cursor:\n    url('@design-system/icons/AddWBkg.svg') 24 24,\n    auto;\n}\n\n.carousel-button {\n  @apply absolute top-1/2 z-50 -translate-y-1/2;\n  @apply text-text-primary transition-opacity duration-300;\n  @apply hover:opacity-80 disabled:opacity-30;\n  @apply h-12 w-12 cursor-pointer;\n  background: transparent;\n  border: none;\n  pointer-events: auto;\n\n  &.carousel-button-prev {\n    @apply left-8;\n  }\n\n  &.carousel-button-next {\n    @apply right-8;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:not(:disabled):hover {\n    @apply opacity-80;\n  }\n}\n\n.arrow {\n  width: 12px;\n  height: 12px;\n  border-top: 2px solid currentColor;\n  border-right: 2px solid currentColor;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%) rotate(-135deg);\n  pointer-events: none;\n\n  &--right {\n    transform: translate(-50%, -50%) rotate(45deg);\n  }\n}\n</style>\n"],"names":["__props","props","GALLERY_SLIDE_SHOW_ID","uuidv4","openDialog","useDialog","clickedSlide","ref","emblaApi","options","computed","canScrollPrev","canScrollNext","onInit","embla","updateButtonStates","scrollPrev","scrollNext","handleClick","item","titleStripTextPositionOptions","cardTextPositionOptions","isHovering","hasTitleStrip"],"mappings":"gkBAKA,MAAS,mNAGT,WAAc,CAAA,EAER,eAAA,CAAA,EAEN,mBAAuB,CAAA,EAEjB,YAAA,CAAA,CAEA,EAEN,MAAAA,EAAgB,CAAA,MACWC,EAAAD,EACjBE,EAAA,qBAAAC,EAAA,CAAA,GACK,CAAA,WAAAC,CACc,EAC3BC,EAAAH,CAAA,EACFI,EAAAC,EAAA,CAAA,EAEMC,EAAAD,EAAA,MACAE,EAAAC,OAAyB,CAEzB,KAAA,GACJ,UAAiB,GACf,aAAuB,KACvB,EAAmB,EAEVC,EAASJ,EAAA,EAAA,EACGK,EAAAL,EAAA,EAAA,EACpBM,EAAAC,GAAA,CACHA,EAAA,QACFN,EAAA,MAAAM,EAAA,MAEAC,EAAyB,EACvBP,QAAoB,GAAA,SAAA,IAAA,CAClBO,EAA0B,CAC1B,CAAmB,EAEvB,EAEMC,EAAa,IAAM,CACnBR,EAAS,QACXA,EAAS,MAAM,WAAW,EACPO,EAAA,EAEvB,EAEME,OACAT,UAEAA,EAAS,MAAA,WAAY,EACTO,EAAA,EACqC,EAEnDA,EAAsB,IAAA,CACtBP,EAAA,QACFC,EAAA,MAAA,MAMWE,EAAA,MAAA,GACbC,EAAA,MAAA,KANAD,EAAA,MAAAH,EAAA,MAAA,cAAA,EAEMI,EAAA,MAAqCJ,EAAA,MAAA,cAAA,GAML,EAE9BU,EAAAC,GAAA,CACNb,EAAO,MAAAL,EAAA,eAAA,QAAAkB,CAAA,EACTf,EAAA,CAEA,EACUgB,EAAA,CACR,OAAM,qBACN,KAAO,mBACT,MAAA,mBAEM,EAEAC,EAA+B,CACnC,qBACD,KAAA,aAED,MAAA,UACE,EACWC,EAAMf,EAAI,EAAA,EACrBgB,EAAAb,EAAA,IACDT,EAAA,YAAA,OAAA,KAAAA,EAAA,UAAA,EAAA,OAAA"}