{"version":3,"file":"Bd2neo2-.js","sources":["../../../../src/components/components/core/image-carousel/image-carousel.vue"],"sourcesContent":["<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":["MOBILE_IMAGE_REF_PREFIX","IMAGE_REF_PREFIX","isDesktopView","useIsDesktopView","props","__props","emit","__emit","onCloseModal","getContainerStyle","getImageFilterStyle","imageIndex","style","state","scrollSlider","toIndex","element","reactive","showModal","ref","watch","newVal","usePreventBodyScroll","prevImage","nextImage","show","activeIndex","onUnmounted"],"mappings":"+2BA0HMA,EAA0B,kBAC1BC,EAAmB,+TAEzB,MAAMC,EAAgBC,IAEhBC,EAAQC,EA4BRC,EAAOC,EAIb,SAASC,GAAe,CACtBF,EAAK,OAAO,CACd,CAEA,SAASG,GAA4B,CAC/B,OAACP,EAAc,MAGZ,6BAFE,yCAGX,CAEA,SAASQ,EAAoBC,EAA4B,CACvD,IAAIC,EAAQ,mDAMR,OALCV,EAAc,MAGRU,GAAA,gBAFAA,GAAA,2BAIPD,IAAeE,EAAM,YAChBD,EAEFA,EAAQ,uCACjB,CAEA,SAASE,EAAaC,EAAuB,CACnB,CAClB,IAAAC,EACCd,EAAc,MAGPc,EAAA,SAAS,eAAef,EAAmBc,CAAO,EAFlDC,EAAA,SAAS,eAAehB,EAA0Be,CAAO,EAIjEC,GACFA,EAAQ,eAAe,CAAE,SAAU,QAAU,CAAA,CAEjD,CACF,CAMA,MAAMH,EAAmCI,EAAS,CAChD,YAAa,CAAA,CACd,EAEKC,EAAYC,EAAI,EAAK,EAE3BC,EACE,IAAMF,EAAU,MACfG,GAAW,CACVC,EAAqBD,CAAM,CAC7B,CAAA,EAGF,SAASE,GAAY,CACfV,EAAM,cAAgB,EAClBA,EAAA,YAAcT,EAAM,OAAO,OAAS,EAEpCS,EAAA,YAAcA,EAAM,YAAc,EAE1CC,EAAaD,EAAM,WAAW,CAChC,CAEA,SAASW,GAAY,CACfX,EAAM,cAAgBT,EAAM,OAAO,OAAS,EAC9CS,EAAM,YAAc,EAEdA,EAAA,YAAcA,EAAM,YAAc,EAE1CC,EAAaD,EAAM,WAAW,CAChC,CAEA,OAAAO,EACE,IAAMhB,EAAM,KACXqB,GAAS,CACRP,EAAU,MAAQO,CACpB,CAAA,EAGFL,EACE,IAAMhB,EAAM,YACXsB,GAAgB,CACfb,EAAM,YAAca,EACpBZ,EAAaD,EAAM,WAAW,CAChC,CAAA,EAGFc,EAAY,IAAM,CAChBd,EAAM,YAAc,OACpBS,EAAqB,EAAK,CAAA,CAC3B"}