{"version":3,"file":"LiftCarousel.D52zAkzX.js","sources":["../../../src/theme/malloftripla2024/components/carousels/LiftCarousel.svelte"],"sourcesContent":["<!-- @format -->\n<script context=\"module\" lang=\"ts\">\n  export type CarouselConfig = {\n    initalSlideTo?: number;\n    aspectRatio?: number;\n    count?: number;\n    pos?: number\n  }\n</script>\n\n<script lang=\"ts\">\n  import Swiper from \"swiper\";\n  import type { SwiperOptions } from \"swiper/types\";\n  import { Navigation } from \"swiper/modules\";\n  import { onMount, tick } from \"svelte\";\n  import { generateRandomID } from \"~/util/common\";\n  import { lazyLoadImage } from \"~/util/actions\";\n\n  export let config: CarouselConfig;\n  export let isStorePage = false;\n  const { count = 1, initalSlideTo, aspectRatio = 1 } = config;\n\n  const id = generateRandomID();\n  let isInitialized = false;\n  let slideWidth = 0;\n  let reachEnd = false;\n  let reachBegining = false;\n  let swiper: Swiper | undefined;\n  let swiperEl: HTMLElement;\n\n  const params: SwiperOptions = {\n    modules: [Navigation],\n    navigation: {\n      enabled: true,\n      nextEl: `#next-${id}`,\n      prevEl: `#prev-${id}`,\n    },\n    on: { \n      slideChange, \n      resize, \n      init: (swiper) => {\n        resize(swiper);\n        isInitialized = true;\n      }\n    },\n    watchSlidesProgress: true,\n    slidesPerView: 1.3,\n    centeredSlides: true,\n    loop: true,\n    spaceBetween: 0,\n    initialSlide: initalSlideTo,\n    breakpoints: {\n      768: {\n        slidesPerView: Math.min(count, 4),\n        centeredSlides: count > 4,\n      },\n      992: {\n        slidesPerView: Math.min(count, 5),\n        centeredSlides: count > 5,\n      },\n      1200: {\n        slidesPerView: Math.min(count, 7),\n        centeredSlides: count > 7,\n      },\n    },\n  };\n\n  onMount(async () => {\n    swiper = new Swiper(swiperEl, {\n      ...params,\n      modules: [Navigation],\n      wrapperClass: 'swiper-wrapper',\n      slideClass: 'swiper-slide'\n    });\n\n    // Wait a tick to ensure DOM is ready\n    await tick();\n    swiperEl.classList.add('swiper-initialized');\n    isInitialized = true;\n  });\n\n  function resize(e: Swiper) {\n    const slides = Array.from(e.slides);\n    const visibleSlides = slides.filter(slide => slide.classList.contains('swiper-slide-visible'));\n    if (visibleSlides.length > 0) {\n      slideWidth = visibleSlides[0].clientWidth;\n    }\n    slideChange(e);\n  }\n\n  const opacity = \"0.12\";\n\n  function slideChange(e: Swiper) {\n    const slides = Array.from(e.slides);\n    const visibleSlides = slides.filter(slide => slide.classList.contains('swiper-slide-visible'));\n    const [first, ...rest] = visibleSlides;\n    const width = e.width ?? 0;\n    const activeIndex = e.activeIndex;\n    \n    visibleSlides.forEach((el: HTMLElement) => {\n      el.style.opacity = \"1\";\n      el.style.pointerEvents = \"auto\";\n      const img = el.querySelector<HTMLImageElement>(\"img.lazy-loading-src\");\n      if (!img || img.src) return;\n      const src = img.getAttribute(\"data-src\");\n      if (src && img) lazyLoadImage(img, src);\n    });\n\n    if (!first || !rest.length) return;\n\n    if (width >= 1200) {\n      reachEnd = activeIndex == count - 7;\n      reachBegining = activeIndex == 6;\n      if (count < 7) return;\n    } else if (width >= 992) {\n      reachEnd = activeIndex == count - 5;\n      reachBegining = activeIndex == 4;\n      if (count < 5) return;\n    } else if (width >= 744) {\n      reachEnd = activeIndex == count - 4;\n      reachBegining = activeIndex == 3;\n      if (count < 4) return;\n    } else {\n      reachEnd = activeIndex == count - 1;\n      reachBegining = activeIndex == 0;\n    }\n\n    if (reachEnd) {\n      first.style.opacity = opacity;\n      first.style.pointerEvents = \"none\";\n      return;\n    }\n    if (reachBegining) {\n      const lastSlide = rest.at(-1);\n      if (lastSlide) {\n        lastSlide.style.opacity = opacity;\n        lastSlide.style.pointerEvents = \"none\";\n      }\n      return;\n    }\n    first.style.opacity = opacity;\n    first.style.pointerEvents = \"none\";\n    const lastSlide = rest.at(-1);\n    if (lastSlide) {\n      lastSlide.style.opacity = opacity;\n      lastSlide.style.pointerEvents = \"none\";\n    }\n  }\n</script>\n\n<div class=\"lift-carousel-container\" style=\"--aspect-ratio: {aspectRatio}\">\n  <div class=\"lift-carousel\">\n    <button\n      class=\"button-prev\"\n      class:d-none={reachBegining}\n      class:d-md-none={count < 4 || reachBegining}\n      class:d-lg-none={count < 6 || reachBegining}\n      id=\"prev-{id}\"\n      aria-label=\"Previous slide\">\n      <i class=\"bi bi-chevron-left shadow\" />\n    </button>\n\n    <div \n      class=\"swiper\"\n      class:store-page={isStorePage}\n      class:visibility-hidden={!isInitialized}\n      bind:this={swiperEl}>\n      <div class=\"swiper-wrapper\">\n        <slot name=\"swiper\" />\n      </div>\n    </div>\n\n    <button\n      class=\"button-next\"\n      class:d-none={reachEnd}\n      class:d-md-none={count < 4 || reachEnd}\n      class:d-lg-none={count < 6 || reachEnd}\n      id=\"next-{id}\"\n      aria-label=\"Next slide\">\n      <i class=\"bi bi-chevron-right shadow\" />\n    </button>\n  </div>\n</div>\n\n<style lang=\"scss\">\n  .lift-carousel-container {\n    --slide-width: 216px;\n    --max-slide-width: 320px;\n    --navigation-width: calc(var(--slide-width) / 2 - 8px);\n    --navigation-height: calc((var(--slide-width) - 16px) * var(--aspect-ratio));\n    padding: 0 24px;\n    position: relative;\n\n    :global(.swiper) {\n      overflow-y: visible;\n      position: relative;\n      width: 100%;\n      \n      &.store-page {\n        max-width: calc(var(--max-slide-width) * 4);\n        margin: 0 auto;\n\n        :global(.swiper-slide) {\n          max-width: var(--max-slide-width);\n        }\n      }\n    }\n\n    :global(.swiper-wrapper) {\n      display: flex;\n      width: 100%;\n      height: auto;\n      position: relative;\n    }\n\n    :global(.swiper-slide) {\n      flex-shrink: 0;\n      width: var(--slide-width);\n      height: auto;\n      position: relative;\n      transition: opacity 0.3s ease, pointer-events 0s;\n    }\n  }\n\n  .lift-carousel {\n    position: relative;\n    margin: 0 -12px;\n    min-height: 216px;\n  }\n\n  .visibility-hidden {\n    visibility: hidden;\n  }\n\n  :global(.swiper-initialized) {\n    visibility: visible;\n    animation: fadeIn 0.3s ease forwards;\n  }\n\n  @keyframes fadeIn {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n\n  .button-next,\n  .button-prev {\n    position: absolute;\n    top: 33%;\n    transform: translateY(-50%);\n    z-index: 10;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--color-accent-primary);\n    min-width: 30px;\n    width: var(--navigation-width);\n    border: none;\n    background: none;\n    padding: 0;\n\n    @media screen and (max-width: 767px) {\n      width: 13% !important;\n    }\n\n    i {\n      background: none;\n      transform: none;\n      width: auto;\n      height: auto;\n    }\n  }\n\n  .button-prev .bi-chevron-left:before,\n  .button-next .bi-chevron-right:before {\n    background-color: #fff;\n    border-radius: 50%;\n    width: 38px;\n    height: 38px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    font-size: 20px;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n    @media screen and (min-width: 576px) {\n      width: 40px;\n      height: 40px;\n      font-size: 26px;\n    }\n  }\n\n  .button-prev {\n    left: 12px;\n  }\n\n  .button-next {\n    right: 12px;\n  }\n\n  i.shadow {\n    border-radius: 50%;\n  }\n</style>\n"],"names":["ctx","insert_hydration","target","div3","anchor","append_hydration","div2","button0","i0","div1","div0","button1","i1","opacity","config","$$props","isStorePage","count","initalSlideTo","aspectRatio","id","generateRandomID","isInitialized","reachEnd","reachBegining","swiperEl","params","Navigation","slideChange","resize","swiper","onMount","Swiper","tick","e","visibleSlides","slide","first","rest","width","activeIndex","el","img","src","lazyLoadImage","$$invalidate","lastSlide","$$value"],"mappings":"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"}