{"version":3,"sources":["webpack:///./src/js/modules/testimonial-carousel.js"],"names":["TestimonialCarousel","Component","setupDefaults","this","dom","sliderContainer","el","querySelector","slides","querySelectorAll","info","tallestSlide","length","initSlider","classList","add","tallestSlideHeight","style","forEach","item","display","inlineSize","offsetHeight","swiper","Swiper","modules","Navigation","centeredSlides","slideToClickedSlide","navigation","nextEl","prevEl","loop","slidesPerView","loopedSlides","loopAdditionalSlides","breakpoints","MEDIA_QUERIES","MOBILE","TABLET_LANDSCAPE","on","resize","update"],"mappings":"4FAAA,iCAIA,MAAMA,UAA4BC,YAChCC,gBACEC,KAAKC,IAAM,CACTC,gBAAiBF,KAAKG,GAAGC,cAAc,WACvCC,OAAQL,KAAKG,GAAGG,iBAAiB,qBACjCC,KAAMP,KAAKG,GAAGG,iBAAiB,sCAEjCN,KAAKQ,eACDR,KAAKC,IAAII,OAAOI,OAAS,EAC3BT,KAAKU,aAELV,KAAKC,IAAIC,gBAAgBS,UAAUC,IAAI,mCAI3CJ,eACE,IAAIK,EAAqB,IACzBb,KAAKG,GAAGW,MAAS,2BAA0BD,MAC3Cb,KAAKC,IAAIM,KAAKQ,QAASC,IACrBA,EAAKF,MAAMG,QAAU,QACrBD,EAAKF,MAAMI,WAAa,OACxBL,EACEG,EAAKG,aAAeN,EAAqBG,EAAKG,aAAeN,EAC/DG,EAAKF,MAAQ,KAEfd,KAAKG,GAAGW,MAAS,0BAAyBD,MAG5CH,aACEV,KAAKoB,OAAS,IAAIC,IAAOrB,KAAKC,IAAIC,gBAAiB,CACjDoB,QAAS,CAACC,KACVC,gBAAgB,EAChBC,qBAAqB,EACrBC,WAAY,CACVC,OAAQ,sBACRC,OAAQ,uBAEVC,MAAM,EACNC,cAAe,EACfC,aAAc,EACdC,qBAAsB,EACtBC,YAAa,CAEX,CAACC,IAAcC,QAAS,CACtBL,cAAe,EACfC,aAAc,GAGhB,CAACG,IAAcE,kBAAmB,CAChCN,cAAe9B,KAAKC,IAAII,OAAOI,OAAS,EAAI,EAAI,EAChDsB,aAAc/B,KAAKC,IAAII,OAAOI,OAAS,EAAI,GAAK,IAGpD4B,GAAI,CACFC,OAAQ,KACNtC,KAAKoB,OAAOmB,SACZvC,KAAKQ,oBAOAX","file":"101.bundle.js","sourcesContent":["import { Component } from '@verndale/core'\nimport Swiper, { Navigation } from 'swiper'\nimport { MEDIA_QUERIES } from '../utils'\n\nclass TestimonialCarousel extends Component {\n  setupDefaults() {\n    this.dom = {\n      sliderContainer: this.el.querySelector('.swiper'),\n      slides: this.el.querySelectorAll('.testimonial-item'),\n      info: this.el.querySelectorAll('.testimonial-item__info-container')\n    }\n    this.tallestSlide()\n    if (this.dom.slides.length > 2) {\n      this.initSlider()\n    } else {\n      this.dom.sliderContainer.classList.add('testimonial-carousel--no-slider')\n    }\n  }\n\n  tallestSlide() {\n    let tallestSlideHeight = 100\n    this.el.style = `--tallest-info-height = ${tallestSlideHeight}px`\n    this.dom.info.forEach((item) => {\n      item.style.display = 'block'\n      item.style.inlineSize = '60vw'\n      tallestSlideHeight =\n        item.offsetHeight > tallestSlideHeight ? item.offsetHeight : tallestSlideHeight\n      item.style = ''\n    })\n    this.el.style = `--tallest-info-height: ${tallestSlideHeight}px`\n  }\n\n  initSlider() {\n    this.swiper = new Swiper(this.dom.sliderContainer, {\n      modules: [Navigation],\n      centeredSlides: true,\n      slideToClickedSlide: true,\n      navigation: {\n        nextEl: '.swiper-button-next',\n        prevEl: '.swiper-button-prev'\n      },\n      loop: true,\n      slidesPerView: 3,\n      loopedSlides: 3,\n      loopAdditionalSlides: 5,\n      breakpoints: {\n        // when window width is >= 360px\n        [MEDIA_QUERIES.MOBILE]: {\n          slidesPerView: 3,\n          loopedSlides: 6\n        },\n        // when window width is >= 1024px\n        [MEDIA_QUERIES.TABLET_LANDSCAPE]: {\n          slidesPerView: this.dom.slides.length > 4 ? 5 : 3,\n          loopedSlides: this.dom.slides.length > 4 ? 10 : 6\n        }\n      },\n      on: {\n        resize: () => {\n          this.swiper.update()\n          this.tallestSlide()\n        }\n      }\n    })\n  }\n}\n\nexport default TestimonialCarousel\n"],"sourceRoot":""}