{"version":3,"file":"DvwqnZlH.js","sources":["../../../../src/helpers/globalModal.ts","../../../../src/components/components/core/fullscreen-modal.vue","../../../../src/components/components/core/image-carousel/image-carousel.vue"],"sourcesContent":["export function showModal(show: boolean) {\n  if (import.meta.server) return;\n  if (show) {\n    document.body.classList.add('globalModalOpen');\n  } else {\n    document.body.classList.remove('globalModalOpen');\n  }\n}\n","<template>\n  <teleport to=\"body\">\n    <div\n      v-if=\"showModal\"\n      ref=\"modal-backdrop\"\n      class=\"fixed inset-0 overflow-hidden bg-white z-[999] overscroll-none\"\n      :class=\"\n        modalWidth && isDesktopView\n          ? 'mx-auto shadow-xl -left-[var(--scrollbar-width)] rounded-alt-md'\n          : 'w-full'\n      \"\n      :style=\"[\n        modalTop && isDesktopView\n          ? `top: ${modalTop}px; height: calc(100% - ${modalTop}px - 60px)`\n          : 'height: 100%',\n        modalWidth && isDesktopView\n          ? `max-width: ${modalWidth}px; width:100%;`\n          : '',\n      ]\"\n    >\n      <div class=\"flex w-full h-full\">\n        <div\n          ref=\"modal\"\n          class=\"flex flex-auto overflow-hidden\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=\"modal-headline\"\n        >\n          <div\n            class=\"absolute bg-transparent cursor-pointer top-sm right-sm\"\n            @click=\"closeModal\"\n          >\n            <FaIcon :icon-class=\"getIconClass()\" />\n          </div>\n          <slot name=\"content\" />\n        </div>\n      </div>\n    </div>\n  </teleport>\n</template>\n\n<script setup lang=\"ts\">\nimport { showModal as showGlobalModal } from '@/helpers/globalModal';\nimport { mq_breakpointIsMobile } from '@/injectionSymbols';\nimport FaIcon from '@/components/fa-icon.vue';\n\nconst isMobile = inject(mq_breakpointIsMobile);\n\nconst props = defineProps({\n  show: {\n    type: Boolean,\n    required: true,\n    default: false,\n  },\n  modalWidth: {\n    type: Number,\n    required: true,\n    default: null,\n  },\n  modalTop: {\n    type: Number,\n    required: false,\n    default: null,\n  },\n});\n\nconst emit = defineEmits<{\n  (e: 'close'): void;\n}>();\n\nconst showModal = ref(false);\nconst isDesktopView = useIsDesktopView();\n\nfunction getIconClass(): string {\n  const iconClass = 'fal fa-xmark ';\n  if (isMobile.value === true) {\n    return iconClass + 'text-[3rem]';\n  }\n  return iconClass + 'text-[2rem]';\n}\n\nfunction closeModal() {\n  showModal.value = false;\n  emit('close');\n}\n\nwatch(\n  () => props.show,\n  (show) => {\n    showModal.value = show;\n    showGlobalModal(show);\n  },\n);\n\nonUnmounted(() => {\n  if (import.meta.client) {\n    showGlobalModal(false);\n  }\n});\n</script>\n","<template>\n  <ModalFullscreen\n    :show=\"showModal\"\n    :modal-width=\"modalWidth\"\n    :modal-top=\"modalTop\"\n    @close=\"onCloseModal\"\n  >\n    <template #content>\n      <div class=\"flex flex-auto max-w-full\">\n        <div\n          v-if=\"isDesktopView\"\n          class=\"absolute left-0 flex items-center justify-center my-auto transition-all -translate-y-1/2 cursor-pointer select-none rounded-r-alt-xl top-1/2 w-md hover:w-xl bg-btn-primary-base h-xl\"\n          @click=\"prevImage\"\n        >\n          <FaIcon\n            icon-class=\"fas fa-chevron-left text-[1rem]\"\n            classes=\"text-white\"\n          />\n        </div>\n        <div :class=\"getContainerStyle()\">\n          <div\n            v-if=\"isDesktopView\"\n            class=\"flex flex-col max-h-full my-auto overflow-auto no-scrollbar shrink-0 max-w-[250px]\"\n          >\n            <img\n              v-for=\"(image, index) in images\"\n              :id=\"IMAGE_REF_PREFIX + index\"\n              :key=\"image.id\"\n              :src=\"image.url\"\n              :alt=\"image.altText\"\n              :title=\"image.title\"\n              draggable=\"false\"\n              loading=\"lazy\"\n              class=\"hover:scale-[1.02] transition-all\"\n              :class=\"getImageFilterStyle(index)\"\n              @click=\"state.activeIndex = index\"\n            />\n          </div>\n          <div\n            v-if=\"props.images && props.images.length > 0\"\n            class=\"flex flex-col flex-auto touch:md:ml-md touch:md:mr-md lg:ml-md lg:mr-md md:mr-0 my-sm h-[60%] md:h-full\"\n          >\n            <img\n              class=\"m-auto max-h-[95%]\"\n              :src=\"props.images[state.activeIndex].url\"\n              :alt=\"props.images[state.activeIndex].altText\"\n              :title=\"props.images[state.activeIndex].title\"\n              draggable=\"false\"\n              loading=\"lazy\"\n            />\n            <p class=\"mx-auto italic font-bold bold text-border-dark\">\n              {{\n                props.images[state.activeIndex].copyright\n                  ? `${props.images[state.activeIndex].title} - &copy; ${\n                      props.images[state.activeIndex].copyright\n                    }`\n                  : props.images[state.activeIndex].title\n              }}\n            </p>\n            <p class=\"mx-auto text-sm italic text-border-dark px-md md:px-0\">\n              {{ props.images[state.activeIndex].shortDescription }}\n            </p>\n          </div>\n          <div\n            v-if=\"!isDesktopView\"\n            class=\"flex mx-auto overflow-auto no-scrollbar\"\n          >\n            <div\n              class=\"flex items-center justify-center cursor-pointer select-none flex-auton bg-btn-primary-base rounded-r-alt-xl\"\n              @click=\"prevImage\"\n            >\n              <FaIcon\n                icon-class=\"fas fa-chevron-left\"\n                classes=\"text-white text-[1.5rem]\"\n              />\n            </div>\n            <div class=\"flex overflow-auto no-scrollbar\">\n              <img\n                v-for=\"(image, index) in images\"\n                :id=\"MOBILE_IMAGE_REF_PREFIX + index\"\n                :key=\"image.id\"\n                :src=\"image.url\"\n                :alt=\"image.altText\"\n                :title=\"image.title\"\n                loading=\"lazy\"\n                draggable=\"false\"\n                :class=\"getImageFilterStyle(index)\"\n                @click=\"state.activeIndex = index\"\n              />\n            </div>\n            <div\n              class=\"flex items-center justify-center flex-auto cursor-pointer select-none bg-btn-primary-base rounded-l-alt-xl\"\n              @click=\"nextImage\"\n            >\n              <FaIcon\n                icon-class=\"fas fa-chevron-right\"\n                classes=\"text-white text-[1.5rem]\"\n              />\n            </div>\n          </div>\n        </div>\n        <div\n          v-if=\"isDesktopView\"\n          class=\"absolute right-0 flex items-center justify-center my-auto transition-all -translate-y-1/2 cursor-pointer select-none rounded-l-alt-xl top-1/2 w-md hover:w-xl bg-btn-primary-base h-xl\"\n          @click=\"nextImage\"\n        >\n          <FaIcon\n            icon-class=\"fas fa-chevron-right text-white text-[1rem]\"\n            classes=\"text-white\"\n          />\n        </div>\n      </div>\n    </template>\n  </ModalFullscreen>\n</template>\n\n<script setup lang=\"ts\">\nimport ModalFullscreen from '@/components/components/core/fullscreen-modal.vue';\nimport { reactive } from 'vue';\nimport type { ImageData } from '../basicImage/type';\nimport FaIcon from '@/components/fa-icon.vue';\n\nconst MOBILE_IMAGE_REF_PREFIX = 'mobile_img_ref_';\nconst IMAGE_REF_PREFIX = 'img_ref_';\n\nconst isDesktopView = useIsDesktopView();\n\nconst props = defineProps({\n  images: {\n    type: Array as PropType<ImageData[]>,\n    required: true,\n    default: new Array(0),\n  },\n  activeIndex: {\n    type: Number,\n    required: false,\n    default: 0,\n  },\n  show: {\n    type: Boolean,\n    required: true,\n    default: false,\n  },\n  modalTop: {\n    type: Number,\n    required: false,\n    default: 0,\n  },\n  modalWidth: {\n    type: Number,\n    required: false,\n    default: 0,\n  },\n});\n\nconst emit = defineEmits<{\n  (e: 'close'): void;\n}>();\n\nfunction onCloseModal() {\n  emit('close');\n}\n\nfunction getContainerStyle(): string {\n  if (!isDesktopView.value) {\n    return 'flex flex-auto flex flex-col px-0 py-sm';\n  }\n  return 'flex flex-auto px-20 py-16';\n}\n\nfunction getImageFilterStyle(imageIndex: number): string {\n  let style = 'self-auto object-contain mx-auto cursor-pointer ';\n  if (!isDesktopView.value) {\n    style += ' mx-xs  max-h-20 my-auto';\n  } else {\n    style += 'max-h-36 my-4';\n  }\n  if (imageIndex === state.activeIndex) {\n    return style;\n  }\n  return style + ' filter brightness-50 grayscale-[50%]';\n}\n\nfunction scrollSlider(toIndex: number): void {\n  if (import.meta.client) {\n    let element;\n    if (!isDesktopView.value) {\n      element = document.getElementById(MOBILE_IMAGE_REF_PREFIX + toIndex);\n    } else {\n      element = document.getElementById(IMAGE_REF_PREFIX + toIndex);\n    }\n    if (element) {\n      element.scrollIntoView({ behavior: 'smooth' });\n    }\n  }\n}\n\ntype ImageCarouselDefaultState = {\n  activeIndex?: number;\n};\n\nconst state: ImageCarouselDefaultState = reactive({\n  activeIndex: 0,\n});\n\nconst showModal = ref(false);\n\nwatch(\n  () => showModal.value,\n  (newVal) => {\n    usePreventBodyScroll(newVal);\n  },\n);\n\nfunction prevImage() {\n  if (state.activeIndex === 0) {\n    state.activeIndex = props.images.length - 1;\n  } else {\n    state.activeIndex = state.activeIndex - 1;\n  }\n  scrollSlider(state.activeIndex);\n}\n\nfunction nextImage() {\n  if (state.activeIndex === props.images.length - 1) {\n    state.activeIndex = 0;\n  } else {\n    state.activeIndex = state.activeIndex + 1;\n  }\n  scrollSlider(state.activeIndex);\n}\n\nwatch(\n  () => props.show,\n  (show) => {\n    showModal.value = show;\n  },\n);\n\nwatch(\n  () => props.activeIndex,\n  (activeIndex) => {\n    state.activeIndex = activeIndex;\n    scrollSlider(state.activeIndex);\n  },\n);\n\nonUnmounted(() => {\n  state.activeIndex = undefined;\n  usePreventBodyScroll(false);\n});\n</script>\n"],"names":["showModal","show","isMobile","inject","mq_breakpointIsMobile","props","__props","emit","__emit","ref","isDesktopView","useIsDesktopView","getIconClass","iconClass","closeModal","watch","showGlobalModal","onUnmounted","MOBILE_IMAGE_REF_PREFIX","IMAGE_REF_PREFIX","onCloseModal","getContainerStyle","getImageFilterStyle","imageIndex","style","state","scrollSlider","toIndex","element","reactive","newVal","usePreventBodyScroll","prevImage","nextImage","activeIndex"],"mappings":"8RAAO,SAASA,EAAUC,EAAe,CAEnCA,EACO,SAAA,KAAK,UAAU,IAAI,iBAAiB,EAEpC,SAAA,KAAK,UAAU,OAAO,iBAAiB,CAEpD,wXCuCM,MAAAC,EAAWC,EAAOC,CAAqB,EAEvCC,EAAQC,EAkBRC,EAAOC,EAIPR,EAAYS,EAAI,EAAK,EACrBC,EAAgBC,IAEtB,SAASC,GAAuB,CAC9B,MAAMC,EAAY,gBACd,OAAAX,EAAS,QAAU,GACdW,EAAY,cAEdA,EAAY,aACrB,CAEA,SAASC,GAAa,CACpBd,EAAU,MAAQ,GAClBO,EAAK,OAAO,CACd,CAEA,OAAAQ,EACE,IAAMV,EAAM,KACXJ,GAAS,CACRD,EAAU,MAAQC,EAClBe,EAAgBf,CAAI,CACtB,CAAA,EAGFgB,EAAY,IAAM,CAEdD,EAAgB,EAAK,CACvB,CACD,ysCCwBKE,EAA0B,kBAC1BC,EAAmB,+TAEzB,MAAMT,EAAgBC,IAEhBN,EAAQC,EA4BRC,EAAOC,EAIb,SAASY,GAAe,CACtBb,EAAK,OAAO,CACd,CAEA,SAASc,GAA4B,CAC/B,OAACX,EAAc,MAGZ,6BAFE,yCAGX,CAEA,SAASY,EAAoBC,EAA4B,CACvD,IAAIC,EAAQ,mDAMR,OALCd,EAAc,MAGRc,GAAA,gBAFAA,GAAA,2BAIPD,IAAeE,EAAM,YAChBD,EAEFA,EAAQ,uCACjB,CAEA,SAASE,EAAaC,EAAuB,CACnB,CAClB,IAAAC,EACClB,EAAc,MAGPkB,EAAA,SAAS,eAAeT,EAAmBQ,CAAO,EAFlDC,EAAA,SAAS,eAAeV,EAA0BS,CAAO,EAIjEC,GACFA,EAAQ,eAAe,CAAE,SAAU,QAAU,CAAA,CAEjD,CACF,CAMA,MAAMH,EAAmCI,EAAS,CAChD,YAAa,CAAA,CACd,EAEK7B,EAAYS,EAAI,EAAK,EAE3BM,EACE,IAAMf,EAAU,MACf8B,GAAW,CACVC,EAAqBD,CAAM,CAC7B,CAAA,EAGF,SAASE,GAAY,CACfP,EAAM,cAAgB,EAClBA,EAAA,YAAcpB,EAAM,OAAO,OAAS,EAEpCoB,EAAA,YAAcA,EAAM,YAAc,EAE1CC,EAAaD,EAAM,WAAW,CAChC,CAEA,SAASQ,GAAY,CACfR,EAAM,cAAgBpB,EAAM,OAAO,OAAS,EAC9CoB,EAAM,YAAc,EAEdA,EAAA,YAAcA,EAAM,YAAc,EAE1CC,EAAaD,EAAM,WAAW,CAChC,CAEA,OAAAV,EACE,IAAMV,EAAM,KACXJ,GAAS,CACRD,EAAU,MAAQC,CACpB,CAAA,EAGFc,EACE,IAAMV,EAAM,YACX6B,GAAgB,CACfT,EAAM,YAAcS,EACpBR,EAAaD,EAAM,WAAW,CAChC,CAAA,EAGFR,EAAY,IAAM,CAChBQ,EAAM,YAAc,OACpBM,EAAqB,EAAK,CAAA,CAC3B"}