{"version":3,"file":"DzAHGQCu.js","sources":["../../../../components/photoGallery/PhotoGalleryGrid.vue","../../../../components/photoGallery/PhotoGalleryFullscreen.vue","../../../../components/photoGallery/PhotoGallery.vue"],"sourcesContent":["<template>\n  <div class=\"h-full flex-grow pb-40 lg:pb-36\">\n    <div class=\"h-full overflow-auto pb-6\">\n      <div class=\"container row-auto grid grid-cols-2 gap-2 md:grid-cols-3\">\n        <figure\n          v-for=\"(image, imageIndex) in images\"\n          :key=\"image.id\"\n          :class=\"{\n            'col-span-2 row-span-2 md:h-[31.125rem]': imageIndex === 0,\n            'aspect-square md:aspect-auto md:h-[15.3125rem]': imageIndex > 0,\n          }\"\n        >\n          <button\n            class=\"block size-full cursor-pointer overflow-clip\"\n            @click=\"onImageClick(imageIndex)\"\n          >\n            <NuxtImg\n              :src=\"image.filename\"\n              :alt=\"image.alt\"\n              class=\"ease-out-expo size-full object-cover transition-transform duration-700 hover:scale-105\"\n              width=\"840\"\n              loading=\"lazy\"\n            />\n          </button>\n        </figure>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { MultiassetStoryblok } from '@/types/storyblok'\n\ndefineProps<{\n  images: MultiassetStoryblok\n}>()\n\nconst emit = defineEmits<{\n  onImageClick: [index: number]\n}>()\n\nfunction onImageClick(index: number) {\n  emit('onImageClick', index)\n}\n</script>\n","<template>\n  <div\n    class=\"c-carousel absolute inset-0 flex flex-grow items-center justify-center\"\n  >\n    <div\n      :class=\"{ 'container h-full': isContained, 'size-full': !isContained }\"\n    >\n      <div\n        v-if=\"showControls\"\n        class=\"absolute left-6 top-1/2 z-10 hidden -translate-y-1/2 transform md:block\"\n      >\n        <UiMediaControl\n          label=\"Previous\"\n          icon=\"arrow-left\"\n          size=\"sm\"\n          @click=\"onPrevious\"\n        />\n      </div>\n\n      <div\n        v-if=\"showControls\"\n        class=\"absolute right-6 top-1/2 z-10 hidden -translate-y-1/2 transform md:block\"\n      >\n        <UiMediaControl\n          label=\"Next\"\n          icon=\"arrow-right\"\n          size=\"sm\"\n          @click=\"onNext\"\n        />\n      </div>\n\n      <Swiper\n        :modules=\"[Pagination, A11y]\"\n        :slides-per-view=\"1\"\n        :pagination=\"{ clickable: true }\"\n        :loop=\"true\"\n        :keyboard=\"true\"\n        class=\"size-full\"\n        @swiper=\"onSwiper\"\n      >\n        <SwiperSlide v-for=\"image in images\" :key=\"image.id\" class=\"w-screen\">\n          <figure class=\"flex size-full items-center justify-center\">\n            <NuxtImg\n              :src=\"image.filename\"\n              :alt=\"image.alt\"\n              :class=\"{\n                'pb-20': hasBottomGap,\n              }\"\n              sizes=\"sm:100vw md:1920px\"\n              class=\"max-h-screen pt-20\"\n            />\n          </figure>\n        </SwiperSlide>\n      </Swiper>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport type { Swiper } from 'swiper'\nimport { Pagination, A11y } from 'swiper/modules'\nimport type { MultiassetStoryblok } from '@/types/storyblok'\n\nconst props = defineProps<{\n  images: MultiassetStoryblok\n  selectedImageIndex: number\n  isContained?: boolean\n  hasBottomGap?: boolean\n}>()\nconst swiperInstance = ref()\nconst showControls = computed(() => props.images.length > 1)\n\nfunction onSwiper(swiper: Swiper): void {\n  swiperInstance.value = swiper\n  swiperInstance.value.slideTo(props.selectedImageIndex)\n}\n\nfunction onPrevious(): void {\n  swiperInstance.value?.slidePrev()\n}\n\nfunction onNext(): void {\n  swiperInstance.value?.slideNext()\n}\n</script>\n\n<style scoped lang=\"postcss\">\n.c-carousel :deep(.swiper-pagination) {\n  @apply absolute bottom-32 left-1/2 z-50 flex h-6 w-auto -translate-x-1/2 transform items-center justify-center gap-1.5 rounded-2xl bg-white/10 px-3 lg:bottom-6 lg:bg-black/50;\n\n  .swiper-pagination-bullet {\n    @apply ease-out-expo lg:bg-tertiary m-0 h-2 w-2 bg-gray-500 opacity-100 transition-all duration-700 hover:bg-white;\n\n    &-active {\n      @apply scale-150 bg-white;\n    }\n  }\n}\n</style>\n","<template>\n  <Modal :is-open=\"isOpen\" @close=\"onModalClose\">\n    <header\n      :class=\"{\n        'lg:h-36': layoutMode === 'grid',\n      }\"\n      class=\"ease-out-expo relative z-10 h-20 w-full flex-none bg-black py-4 transition-all duration-700\"\n    >\n      <div class=\"container flex h-full items-center justify-end gap-6\">\n        <div\n          v-if=\"$slots.title || $slots.subTitle\"\n          class=\"flex-grow leading-tight text-white\"\n        >\n          <p v-if=\"$slots.title\" class=\"text-sm font-bold lg:text-base\">\n            <slot name=\"title\" />\n          </p>\n          <p v-if=\"$slots.subTitle\" class=\"text-xs lg:text-sm\">\n            <slot name=\"subTitle\" />\n          </p>\n        </div>\n\n        <div v-if=\"showLayoutModeControls\" class=\"flex items-center gap-2\">\n          <button\n            :class=\"{\n              'is-active': layoutMode === 'grid',\n            }\"\n            class=\"c-modal-action\"\n            @click=\"setMode('grid')\"\n          >\n            <span class=\"sr-only\">Go to grid view mode</span>\n            <UiIcon icon=\"grid\" size=\"md\" />\n          </button>\n\n          <button\n            :class=\"{\n              'is-active': layoutMode === 'fullscreen',\n            }\"\n            class=\"c-modal-action\"\n            @click=\"setMode('fullscreen')\"\n          >\n            <span class=\"sr-only\">Go to fullscreen mode</span>\n            <UiIcon icon=\"fullscreen\" size=\"md\" />\n          </button>\n        </div>\n\n        <slot name=\"headerActions\" />\n\n        <button class=\"c-modal-action\" @click=\"onModalClose\">\n          <span class=\"sr-only\">Close photo gallery</span>\n          <UiIcon icon=\"close\" size=\"md\" />\n        </button>\n      </div>\n    </header>\n\n    <PhotoGalleryGrid\n      v-if=\"layoutMode === 'grid'\"\n      :images=\"images\"\n      @on-image-click=\"onImageClick\"\n    />\n\n    <Transition name=\"fade\">\n      <PhotoGalleryFullscreen\n        v-if=\"layoutMode === 'fullscreen'\"\n        :images=\"images\"\n        :selected-image-index=\"selectedImageIndex\"\n        :is-contained=\"isContained\"\n        :has-bottom-gap=\"hasBottomGap\"\n      />\n    </Transition>\n\n    <footer\n      v-if=\"$slots.footerActions\"\n      class=\"absolute bottom-0 left-0 z-10 h-20 w-full flex-none bg-black lg:hidden\"\n    >\n      <div class=\"container flex h-full items-center justify-center gap-3\">\n        <slot name=\"footerActions\" />\n      </div>\n    </footer>\n  </Modal>\n</template>\n\n<script setup lang=\"ts\">\nimport type {\n  BlockGalleryStoryblok,\n  MultiassetStoryblok,\n} from '@/types/storyblok'\n\ndefineSlots<{\n  footerActions(): HTMLElement\n  headerActions(): HTMLElement\n  subTitle(): HTMLElement\n  title(): HTMLElement\n}>()\n\nconst props = defineProps<{\n  isOpen: boolean\n  isContained?: boolean\n  images: MultiassetStoryblok\n  galleryStyle?: BlockGalleryStoryblok['galleryStyle']\n  hasBottomGap?: boolean\n}>()\nconst initialLayoutMode = computed(() => {\n  if (props.galleryStyle) {\n    return props.galleryStyle === 'grid' ? 'grid' : 'fullscreen'\n  }\n\n  return props.images.length >= 3 ? 'grid' : 'fullscreen'\n})\nconst showLayoutModeControls = computed(() => props.images.length >= 2)\nconst layoutMode = ref<LayoutMode>(initialLayoutMode.value)\nconst selectedImageIndex = ref<number>(0)\nconst emit = defineEmits<{\n  close: []\n}>()\n\nfunction onModalClose(event: Event | KeyboardEvent): void {\n  if (\n    layoutMode.value === 'fullscreen' &&\n    event instanceof KeyboardEvent &&\n    event.key === 'Escape'\n  ) {\n    if (props.galleryStyle === 'default') {\n      emit('close')\n      return\n    }\n\n    if (showLayoutModeControls.value) {\n      setMode('grid')\n      return\n    }\n  }\n\n  emit('close')\n}\n\nfunction setMode(mode: LayoutMode, index?: number): void {\n  if (mode === layoutMode.value) {\n    return\n  }\n\n  layoutMode.value = mode\n  selectedImageIndex.value = index ?? 0\n}\n\nfunction onImageClick(index: number): void {\n  setMode('fullscreen', index)\n}\n\ntype LayoutMode = 'grid' | 'fullscreen'\n</script>\n\n<style scoped lang=\"postcss\">\n.c-modal-action {\n  @apply ease-out-expo text-white text-opacity-60 transition-colors duration-700 hover:text-opacity-100;\n\n  &.is-active {\n    @apply text-opacity-100;\n  }\n}\n</style>\n"],"names":["__props","props","swiperInstance","ref","showControls","computed","onSwiper","swiper","__emit","initialLayoutMode","showLayoutModeControls","layoutMode","selectedImageIndex","emit","onModalClose","event"],"mappings":"olCAqCA,OAAM,mBAIN,MAAA,CACE,SACF,62BCiBA,uIAGA,YAAc,CAMd,YACA,EAEA,cACE,KAAA,OACe,CACjB,EAEA,MAAAA,EAA4B,CAC1B,MAAAC,EAAAD,EACFE,EAAAC,IAEAC,EAAwBC,EAAA,IAAAJ,EAAA,OAAA,OAAA,CAAA,EACtB,SAAAK,IAAgC,CAClCJ,EAAA,MAAAK,8jDCWA,OAAM,eAOA,MAAA,CACJ,QACS,KAAA,OACT,EAEA,YAAa,CACd,KAAA,OACD,EACM,OAAA,CAAA,EACA,aAAA,CAAA,EACN,aAAa,CAIb,KAAA,OACE,CAKM,EACF,MAAA,CAAA,OAAY,EACZ,MAAAP,EAAA,CACF,KAAAQ,CAEA,EAAA,CACE,MAAAP,EAAQD,EACRS,EAAAJ,EAAA,IACFJ,EAAA,aACFA,EAAA,eAAA,OAAA,OAAA,aAGFA,EAAA,OAAA,QAAA,EAAA,OAAA,YAES,EACHS,EAA2BL,EAAA,IAAAJ,EAAA,OAAA,QAAA,CAAA,EAC7BU,EAAAR,EAAAM,EAAA,KAAA,EACFG,EAAAT,EAAA,CAAA,EAEAU,EAAWL,EACX,SAAAM,IAA2B,CAC7B,GAAAH,EAAA,QAAA,cAAAI,aAAA,eAAAA,EAAA,MAAA,SAAA,CAEA,GAAAd,iBAA2C,UAAA,CACzCY,WACF"}