{"version":3,"file":"DWWzaAjY.js","sources":["../../../../src/components/components/cms/imageGallery/vdv/image-gallery.vue"],"sourcesContent":["<template>\n  <ContainerBasic\n    classes=\"max-w-screen-lg mx-auto print:mt-lg page-break-inside print:pl-16 print:pr-16\"\n    :class=\"isHeader ? '!mt-0 md:!mt-0' : 'mt-md md:mt-xl'\"\n  >\n    <HeadlineDynamic\n      v-if=\"props.blockData.headline\"\n      :has-decoration=\"true\"\n      :headline=\"props.blockData.headline\"\n      :level=\"props.blockData.headlineLevel\"\n    />\n    <ClientOnly>\n      <ImageCarousel\n        :show=\"state.showCarousel\"\n        :images=\"blockData.images\"\n        :active-index=\"state.carouselIndex\"\n        @close=\"state.showCarousel = false\"\n      />\n      <section\n        v-if=\"blockData.images\"\n        class=\"section px-md md:px-0 mt-md md:mt-xl\"\n      >\n        <div class=\"flex flex-wrap items-center -m-1 md:-m-2\">\n          <div\n            v-for=\"(image, index) in blockData.images\"\n            :key=\"image.id\"\n            :class=\"'flex flex-wrap ' + numColumns\"\n            style=\"page-break-inside: avoid\"\n          >\n            <div class=\"w-full p-xs md:p-sm\">\n              <img\n                style=\"page-break-inside: avoid\"\n                :src=\"image.url\"\n                :alt=\"image.altText\"\n                :title=\"image.title\"\n                loading=\"lazy\"\n                class=\"self-auto mx-auto cursor-pointer object-contain hover:scale-[1.02]\"\n                :class=\"maxImageHeight\"\n                data-bs-toggle=\"modal\"\n                :data-bs-target=\"'#cmsImageGallery'\"\n                @click=\"openImageCarousel(index)\"\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n    </ClientOnly>\n    <div v-if=\"isHeader\" class=\"bg-activesection-base w-full h-[36px] mt-sm\" />\n  </ContainerBasic>\n</template>\n\n<script setup lang=\"ts\">\nimport ImageCarousel from '@/components/components/core/image-carousel/image-carousel.vue';\nimport ContainerBasic from '@/components/components/container-basic.vue';\nimport HeadlineDynamic from '@/components/components/core/headline-dynamic/vdv/headline-dynamic.vue';\nimport { mq_breakpointIsMobile } from '@/injectionSymbols';\nimport type { ImageGalleryData } from '../blockType';\n\nconst props = defineProps({\n  blockData: {\n    type: Object as PropType<ImageGalleryData>,\n    required: true,\n    default: {} as ImageGalleryData,\n  },\n  isHeader: {\n    type: Boolean,\n    required: true,\n    default: () => {\n      return false;\n    },\n  },\n});\n\nconst isMobile = inject(mq_breakpointIsMobile);\n\nconst maxImageHeight = computed(() => {\n  if (isMobile.value === true) {\n    return 'max-h-24 print:max-h-full';\n  }\n  if (props.blockData.images.length < 5) {\n    return 'max-h-80 print:max-h-full';\n  }\n  return 'max-h-36 print:max-h-full';\n});\n\nconst numColumns = computed(() => {\n  if (props.blockData.images.length < 5 || isMobile.value === true) {\n    return 'w-1/2 print:!w-1/4';\n  }\n  return 'w-1/4 print:!w-1/4';\n});\n\ntype ImageGalleryDefaultState = {\n  carouselIndex: number;\n  showCarousel: boolean;\n};\n\nconst state: ImageGalleryDefaultState = reactive({\n  carouselIndex: 0,\n  showCarousel: false,\n});\n\nonUnmounted(() => {\n  state.carouselIndex = 0;\n  state.showCarousel = false;\n});\n\nconst openImageCarousel = (imageIndex: number) => {\n  state.carouselIndex = imageIndex;\n  state.showCarousel = true;\n};\n</script>\n\n<style scoped lang=\"postcss\">\n.page-break-inside {\n  page-break-inside: avoid;\n}\n</style>\n"],"names":["props","__props","isMobile","inject","mq_breakpointIsMobile","maxImageHeight","computed","numColumns","state","reactive","onUnmounted","openImageCarousel","imageIndex"],"mappings":"k9BA0DA,MAAMA,EAAQC,EAeRC,EAAWC,EAAOC,CAAqB,EAEvCC,EAAiBC,EAAS,IAC1BJ,EAAS,QAAU,GACd,4BAELF,EAAM,UAAU,OAAO,OAAS,EAC3B,4BAEF,2BACR,EAEKO,EAAaD,EAAS,IACtBN,EAAM,UAAU,OAAO,OAAS,GAAKE,EAAS,QAAU,GACnD,qBAEF,oBACR,EAOKM,EAAkCC,EAAS,CAC/C,cAAe,EACf,aAAc,EAAA,CACf,EAEDC,EAAY,IAAM,CAChBF,EAAM,cAAgB,EACtBA,EAAM,aAAe,EAAA,CACtB,EAEK,MAAAG,EAAqBC,GAAuB,CAChDJ,EAAM,cAAgBI,EACtBJ,EAAM,aAAe,EAAA"}