{"version":3,"file":"imageSlider.component.bundle.js","sources":["../../../../Frontend/js/components/imageSlider.component.ts"],"sourcesContent":["export const setupImageSliders = (): void => {\r\n  const imageSliders = document.querySelectorAll<HTMLElement>(\"[data-image-slider-container]\");\r\n  if (!imageSliders) return;\r\n\r\n  imageSliders.forEach(setupImageSlider);\r\n};\r\n\r\nconst setupImageSlider = (slider: HTMLElement): void => {\r\n  const mainImages = slider.querySelectorAll<HTMLElement>(\"[data-image-slider-main]\");\r\n  const scrollContainer = slider.querySelector<HTMLElement>(\"[data-image-slider-scroll]\");\r\n  const thumbnails = slider.querySelectorAll<HTMLElement>(\"[data-image-slider-thumbnail]\");\r\n  const nextButton = slider.querySelector<HTMLElement>(\"[data-image-slider-next]\");\r\n  const prevButton = slider.querySelector<HTMLElement>(\"[data-image-slider-prev]\");\r\n\r\n  if (!scrollContainer) return;\r\n\r\n  let scrollTimer: NodeJS.Timeout | null; //nodejs timeout is created for using interval\r\n  let currentIndex = 0;\r\n\r\n\r\n  const stopScrolling = () => {\r\n      if (scrollTimer) {\r\n          clearInterval(scrollTimer);\r\n          scrollTimer = null;\r\n      }\r\n  };\r\n\r\n  // Helper: Scroll to a specific thumbnail smoothly\r\n  const smoothScrollToThumbnail = (thumbnail: HTMLElement) => {\r\n      const containerCenter = scrollContainer.getBoundingClientRect().left + scrollContainer.offsetWidth * 0.5;\r\n      const thumbnailCenter = thumbnail.getBoundingClientRect().left + thumbnail.offsetWidth * 0.5;\r\n      const scrollByValue = thumbnailCenter - containerCenter;\r\n\r\n      scrollContainer.scrollBy({ left: scrollByValue, behavior: \"smooth\" });\r\n      stopScrolling();\r\n  };\r\n\r\n  // Update the main image and highlight the active thumbnail\r\n  const updateSlider = () => {\r\n      //Main images only appear on desktop.\r\n      if(mainImages)\r\n      {\r\n          mainImages.forEach((image, index) => {\r\n              image.classList.toggle(\"hidden\", index !== currentIndex);\r\n          });\r\n      }\r\n\r\n      let isActive = false;\r\n      thumbnails.forEach((thumbnail, index) => {\r\n          isActive = index === currentIndex;\r\n          thumbnail.classList.toggle(\"active\", isActive);\r\n          if (isActive)\r\n          {\r\n              smoothScrollToThumbnail(thumbnail);\r\n          } \r\n      });\r\n  };\r\n\r\n  // Event Handlers\r\n  const handleThumbnailClick = (thumbnail: HTMLElement, index: number) => {\r\n      thumbnail.addEventListener(\"click\", () => {\r\n          currentIndex = index;\r\n          updateSlider();\r\n      });\r\n  };\r\n\r\n  const handleNavigation = (direction: number) => {\r\n      if(mainImages.length > 0)\r\n      {\r\n          currentIndex = (currentIndex + direction + mainImages.length) % mainImages.length;\r\n      }\r\n      else\r\n      {\r\n          currentIndex = (currentIndex + direction + thumbnails.length) % thumbnails.length;\r\n      }\r\n      updateSlider();\r\n  };\r\n\r\n  // Attach Event Listeners\r\n  thumbnails.forEach((thumbnail, index) => handleThumbnailClick(thumbnail, index));\r\n\r\n  prevButton?.addEventListener(\"click\" , () => handleNavigation(-1));\r\n  nextButton?.addEventListener(\"click\" , () => handleNavigation(1));\r\n\r\n\r\n  // Initialize slider\r\n  updateSlider();\r\n};\r\n"],"names":["setupImageSliders","imageSliders","setupImageSlider","slider","mainImages","scrollContainer","thumbnails","nextButton","prevButton","currentIndex","smoothScrollToThumbnail","thumbnail","containerCenter","scrollByValue","updateSlider","image","index","isActive","handleThumbnailClick","handleNavigation","direction"],"mappings":"AAAO,MAAMA,EAAoB,IAAY,CACrC,MAAAC,EAAe,SAAS,iBAA8B,+BAA+B,EACtFA,GAELA,EAAa,QAAQC,CAAgB,CACvC,EAEMA,EAAoBC,GAA8B,CAChD,MAAAC,EAAaD,EAAO,iBAA8B,0BAA0B,EAC5EE,EAAkBF,EAAO,cAA2B,4BAA4B,EAChFG,EAAaH,EAAO,iBAA8B,+BAA+B,EACjFI,EAAaJ,EAAO,cAA2B,0BAA0B,EACzEK,EAAaL,EAAO,cAA2B,0BAA0B,EAE/E,GAAI,CAACE,EAAiB,OAGtB,IAAII,EAAe,EAWb,MAAAC,EAA2BC,GAA2B,CACxD,MAAMC,EAAkBP,EAAgB,sBAAA,EAAwB,KAAOA,EAAgB,YAAc,GAE/FQ,EADkBF,EAAU,sBAAA,EAAwB,KAAOA,EAAU,YAAc,GACjDC,EAExCP,EAAgB,SAAS,CAAE,KAAMQ,EAAe,SAAU,SAAU,CAExE,EAGMC,EAAe,IAAM,CAEpBV,GAEYA,EAAA,QAAQ,CAACW,EAAOC,IAAU,CACjCD,EAAM,UAAU,OAAO,SAAUC,IAAUP,CAAY,CAAA,CAC1D,EAGL,IAAIQ,EAAW,GACJX,EAAA,QAAQ,CAACK,EAAWK,IAAU,CACrCC,EAAWD,IAAUP,EACXE,EAAA,UAAU,OAAO,SAAUM,CAAQ,EACzCA,GAEAP,EAAwBC,CAAS,CACrC,CACH,CACL,EAGMO,EAAuB,CAACP,EAAwBK,IAAkB,CAC1DL,EAAA,iBAAiB,QAAS,IAAM,CACvBF,EAAAO,EACFF,EAAA,CAAA,CAChB,CACL,EAEMK,EAAoBC,GAAsB,CACzChB,EAAW,OAAS,EAEnBK,GAAgBA,EAAeW,EAAYhB,EAAW,QAAUA,EAAW,OAI3EK,GAAgBA,EAAeW,EAAYd,EAAW,QAAUA,EAAW,OAElEQ,EAAA,CACjB,EAGAR,EAAW,QAAQ,CAACK,EAAWK,IAAUE,EAAqBP,EAAWK,CAAK,CAAC,EAE/ER,GAAY,iBAAiB,QAAU,IAAMW,EAAiB,EAAE,CAAC,EACjEZ,GAAY,iBAAiB,QAAU,IAAMY,EAAiB,CAAC,CAAC,EAInDL,EAAA,CACf"}