{"version":3,"file":"video-carousel-7c54c181.js","sources":["../../../../src/scripts/modules/video-carousel.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport Swiper, { Navigation, Keyboard } from 'swiper';\nimport 'swiper/css/bundle';\nimport { BREAKPOINTS } from '../helpers/breakpoints';\nimport figure from './figure';\n\nclass VideoCarousel extends Component {\n  constructor(el: HTMLElement) {\n    super(el);\n  }\n\n  setupDefaults() {\n    this.dom = {\n      el: this.el,\n      swiperContainer: this.el.querySelector<HTMLElement>('.swiper-container'),\n      swiperWrapper: this.el.querySelector<HTMLElement>('.swiper-wrapper'),\n      swiperItems: this.el.querySelectorAll<HTMLElement>(\n        '.video-carousel__item'\n      ),\n      nextArrow: this.el.querySelector<HTMLElement>('.swiper-button-next'),\n      prevArrow: this.el.querySelector<HTMLElement>('.swiper-button-prev'),\n      carouselDotsContainer: this.el.querySelector<HTMLElement>(\n        '.video-carousel__swiper-pagination'\n      )\n    };\n\n    this.addSliderDots();\n    this.initSwiper();\n  }\n\n  addSliderDots() {\n    const totalDots = (this.dom.swiperItems as NodeList)?.length || 0;\n\n    if (totalDots <= 1) return;\n\n    (this.dom.swiperItems as NodeList).forEach((item, index) => {\n      const content = (item as HTMLElement).querySelector<HTMLElement>(\n        '.video-card__content'\n      );\n      let dots = '<div class=\"video-card__pagination-indicator\">';\n      let carouselDots = '<div class=\"video-carousel__pagination-indicator\">';\n      for (let i = 0; i < totalDots; i++) {\n        dots += `<span class=\"video-card__pagination-bullet ${\n          i === index ? 'active' : ''\n        }\" data-index=\"${index}\"></span>`;\n        carouselDots += `<span class=\"video-carousel__pagination-bullet ${\n          i === 0 ? 'active' : ''\n        }\" data-index=\"${index}\"></span>`;\n      }\n      dots += '</div>';\n      carouselDots += '</div>';\n\n      (content as HTMLElement).innerHTML += dots;\n      if (index === 0) {\n        (this.dom.carouselDotsContainer as HTMLElement).innerHTML +=\n          carouselDots;\n      }\n    });\n  }\n\n  initSwiper() {\n    Swiper.use([Navigation, Keyboard]);\n    const videoFigures: figure[] = [];\n\n    (this.dom.swiperItems as NodeList).forEach(item => {\n      const videoContainer = (item as HTMLElement).querySelector<HTMLElement>(\n        '.figure__container'\n      );\n      const fig = new figure(videoContainer as HTMLElement);\n      videoFigures?.push(fig);\n    });\n\n    new Swiper(this.dom.swiperContainer as HTMLElement, {\n      spaceBetween: 10,\n      slidesPerView: 1,\n      navigation: {\n        prevEl: this.dom.prevArrow as HTMLElement,\n        nextEl: this.dom.nextArrow as HTMLElement\n      },\n      breakpoints: {\n        [BREAKPOINTS.tablet]: {\n          spaceBetween: 20\n        },\n        [BREAKPOINTS.tabletLandscape]: {\n          spaceBetween: 28\n        }\n      },\n      on: {\n        slideChange: swiper => this.handleSlideChange(swiper, videoFigures),\n        init: swiper => this.handleSlideChange(swiper, videoFigures)\n      },\n      keyboard: {\n        enabled: true,\n        onlyInViewport: true\n      }\n    });\n  }\n\n  handleSlideChange(swiper: Swiper, videoFigures: figure[]) {\n    this.stopVideos(videoFigures);\n    (\n      (this.dom.carouselDotsContainer as HTMLElement).querySelectorAll(\n        '.video-carousel__pagination-bullet'\n      ) as NodeList\n    ).forEach((item, index) => {\n      if (index === swiper.activeIndex) {\n        (item as HTMLElement).classList.add('active');\n      } else {\n        (item as HTMLElement).classList.remove('active');\n      }\n    });\n\n    (this.dom.swiperItems as NodeList).forEach((item, index) => {\n      if(index !== swiper.activeIndex) {\n        (item as HTMLAnchorElement).setAttribute('inert', 'true');\n      } else {\n        (item as HTMLAnchorElement).removeAttribute('inert');\n      }\n    });\n  }\n\n  stopVideos(videoFigures: figure[]) {\n    videoFigures?.forEach(item => {\n      item.handleExternalVideoPause();\n    });\n  }\n}\n\nexport default VideoCarousel;\n"],"names":["VideoCarousel","Component","el","totalDots","_a","item","index","content","dots","carouselDots","i","Swiper","Navigation","Keyboard","videoFigures","videoContainer","fig","figure","BREAKPOINTS","swiper"],"mappings":"sWAMA,MAAMA,UAAsBC,CAAU,CACpC,YAAYC,EAAiB,CAC3B,MAAMA,CAAE,CACV,CAEA,eAAgB,CACd,KAAK,IAAM,CACT,GAAI,KAAK,GACT,gBAAiB,KAAK,GAAG,cAA2B,mBAAmB,EACvE,cAAe,KAAK,GAAG,cAA2B,iBAAiB,EACnE,YAAa,KAAK,GAAG,iBACnB,uBACF,EACA,UAAW,KAAK,GAAG,cAA2B,qBAAqB,EACnE,UAAW,KAAK,GAAG,cAA2B,qBAAqB,EACnE,sBAAuB,KAAK,GAAG,cAC7B,oCACF,CAAA,EAGF,KAAK,cAAc,EACnB,KAAK,WAAW,CAClB,CAEA,eAAgB,OACd,MAAMC,IAAaC,EAAA,KAAK,IAAI,cAAT,YAAAA,EAAmC,SAAU,EAE5DD,GAAa,GAEhB,KAAK,IAAI,YAAyB,QAAQ,CAACE,EAAMC,IAAU,CAC1D,MAAMC,EAAWF,EAAqB,cACpC,sBAAA,EAEF,IAAIG,EAAO,iDACPC,EAAe,qDACnB,QAASC,EAAI,EAAGA,EAAIP,EAAWO,IAC7BF,GAAQ,8CACNE,IAAMJ,EAAQ,SAAW,mBACVA,aACjBG,GAAgB,kDACdC,IAAM,EAAI,SAAW,mBACNJ,aAEXE,GAAA,SACQC,GAAA,SAEfF,EAAwB,WAAaC,EAClCF,IAAU,IACX,KAAK,IAAI,sBAAsC,WAC9CG,EACJ,CACD,CACH,CAEA,YAAa,CACXE,EAAO,IAAI,CAACC,EAAYC,CAAQ,CAAC,EACjC,MAAMC,EAAyB,CAAA,EAE9B,KAAK,IAAI,YAAyB,QAAgBT,GAAA,CACjD,MAAMU,EAAkBV,EAAqB,cAC3C,oBAAA,EAEIW,EAAM,IAAIC,EAAOF,CAA6B,EACpDD,GAAA,MAAAA,EAAc,KAAKE,EAAG,CACvB,EAEG,IAAAL,EAAO,KAAK,IAAI,gBAAgC,CAClD,aAAc,GACd,cAAe,EACf,WAAY,CACV,OAAQ,KAAK,IAAI,UACjB,OAAQ,KAAK,IAAI,SACnB,EACA,YAAa,CACX,CAACO,EAAY,MAAM,EAAG,CACpB,aAAc,EAChB,EACA,CAACA,EAAY,eAAe,EAAG,CAC7B,aAAc,EAChB,CACF,EACA,GAAI,CACF,YAAaC,GAAU,KAAK,kBAAkBA,EAAQL,CAAY,EAClE,KAAMK,GAAU,KAAK,kBAAkBA,EAAQL,CAAY,CAC7D,EACA,SAAU,CACR,QAAS,GACT,eAAgB,EAClB,CAAA,CACD,CACH,CAEA,kBAAkBK,EAAgBL,EAAwB,CACxD,KAAK,WAAWA,CAAY,EAEzB,KAAK,IAAI,sBAAsC,iBAC9C,oCAAA,EAEF,QAAQ,CAACT,EAAMC,IAAU,CACrBA,IAAUa,EAAO,YAClBd,EAAqB,UAAU,IAAI,QAAQ,EAE3CA,EAAqB,UAAU,OAAO,QAAQ,CACjD,CACD,EAEA,KAAK,IAAI,YAAyB,QAAQ,CAACA,EAAMC,IAAU,CACvDA,IAAUa,EAAO,YACjBd,EAA2B,aAAa,QAAS,MAAM,EAEvDA,EAA2B,gBAAgB,OAAO,CACrD,CACD,CACH,CAEA,WAAWS,EAAwB,CACjCA,GAAA,MAAAA,EAAc,QAAgBT,GAAA,CAC5BA,EAAK,yBAAyB,CAAA,EAElC,CACF"}