{"version":3,"file":"testimonial-carousel-f34ae2d6.js","sources":["../../../../src/scripts/modules/testimonial-carousel.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport Swiper, { Navigation, Keyboard } from 'swiper';\nimport 'swiper/css/bundle';\nimport { BREAKPOINTS } from '../helpers/breakpoints';\nimport { DataLayerObject, ExtendedWindowType } from '../helpers/global-types';\n\nclass TestimonialCarousel extends Component {\n  private touch = false;\n\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        '.testimonial-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        '.testimonial-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        '.testimonial-card__content'\n      );\n      let dots = '<div class=\"testimonial-card__pagination-indicator\">';\n      let carouselDots =\n        '<div class=\"testimonial-carousel__pagination-indicator\">';\n      for (let i = 0; i < totalDots; i++) {\n        dots += `<span class=\"testimonial-card__pagination-bullet ${\n          i === index ? 'active' : ''\n        }\" data-index=\"${index}\"></span>`;\n        carouselDots += `<span class=\"testimonial-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\n    new Swiper(this.dom.swiperContainer as HTMLElement, {\n      spaceBetween: 10,\n      slidesPerView: 1,\n      autoHeight: true,\n      navigation: {\n        prevEl: this.dom.prevArrow as HTMLElement,\n        nextEl: this.dom.nextArrow as HTMLElement\n      },\n      effect: 'slide',\n      speed: 500,\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),\n        touchEnd: () => (this.touch = true),\n        click: () => (this.touch = false)\n      },\n      keyboard: {\n        enabled: true,\n        onlyInViewport: true\n      }\n    });\n  }\n\n  swiperLayerEvent(swiper: Swiper) {\n    const interactLayer = `{\"event\":\"carousel_interaction\",\"event_action\":\"${\n      this.touch ? 'swipe' : 'arrow click'\n    }\",\"event_category\":\"content_interaction\",\"event_label\":\"${(\n      swiper.activeIndex + 1\n    ).toString()} of ${swiper.slides.length}\"}`;\n\n    if (interactLayer) {\n      (window as ExtendedWindowType).dataLayer.push(\n        JSON.parse(interactLayer) as DataLayerObject\n      );\n    }\n  }\n\n  handleSlideChange(swiper: Swiper) {\n    this.swiperLayerEvent(swiper);\n    (\n      (this.dom.carouselDotsContainer as HTMLElement).querySelectorAll(\n        '.testimonial-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}\n\nexport default TestimonialCarousel;\n"],"names":["TestimonialCarousel","Component","el","__publicField","totalDots","_a","item","index","content","dots","carouselDots","i","Swiper","Navigation","Keyboard","BREAKPOINTS","swiper","interactLayer"],"mappings":"0eAMA,MAAMA,UAA4BC,CAAU,CAG1C,YAAYC,EAAiB,CAC3B,MAAMA,CAAE,EAHFC,EAAA,aAAQ,GAIhB,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,6BACF,EACA,UAAW,KAAK,GAAG,cAA2B,qBAAqB,EACnE,UAAW,KAAK,GAAG,cAA2B,qBAAqB,EACnE,sBAAuB,KAAK,GAAG,cAC7B,0CACF,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,4BAAA,EAEF,IAAIG,EAAO,uDACPC,EACF,2DACF,QAASC,EAAI,EAAGA,EAAIP,EAAWO,IAC7BF,GAAQ,oDACNE,IAAMJ,EAAQ,SAAW,mBACVA,aACjBG,GAAgB,wDACdC,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,EAE7B,IAAAF,EAAO,KAAK,IAAI,gBAAgC,CAClD,aAAc,GACd,cAAe,EACf,WAAY,GACZ,WAAY,CACV,OAAQ,KAAK,IAAI,UACjB,OAAQ,KAAK,IAAI,SACnB,EACA,OAAQ,QACR,MAAO,IACP,YAAa,CACX,CAACG,EAAY,MAAM,EAAG,CACpB,aAAc,EAChB,EACA,CAACA,EAAY,eAAe,EAAG,CAC7B,aAAc,EAChB,CACF,EACA,GAAI,CACF,YAAaC,GAAU,KAAK,kBAAkBA,CAAM,EACpD,SAAU,IAAO,KAAK,MAAQ,GAC9B,MAAO,IAAO,KAAK,MAAQ,EAC7B,EACA,SAAU,CACR,QAAS,GACT,eAAgB,EAClB,CAAA,CACD,CACH,CAEA,iBAAiBA,EAAgB,CAC/B,MAAMC,EAAgB,mDACpB,KAAK,MAAQ,QAAU,yEAEvBD,EAAO,YAAc,GACrB,SAAA,QAAiBA,EAAO,OAAO,WAE7BC,GACD,OAA8B,UAAU,KACvC,KAAK,MAAMA,CAAa,CAAA,CAG9B,CAEA,kBAAkBD,EAAgB,CAChC,KAAK,iBAAiBA,CAAM,EAEzB,KAAK,IAAI,sBAAsC,iBAC9C,0CAAA,EAEF,QAAQ,CAACV,EAAMC,IAAU,CACrBA,IAAUS,EAAO,YAClBV,EAAqB,UAAU,IAAI,QAAQ,EAE3CA,EAAqB,UAAU,OAAO,QAAQ,CACjD,CACD,CACH,CACF"}