{"version":3,"file":"image-carousel-row-0236f02e.js","sources":["../../../../src/scripts/modules/image-carousel-row.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';\nimport { DataLayerObject, ExtendedWindowType } from '../helpers/global-types';\nclass ImageCarouselRow 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        '.image-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        '.image-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        '.image-carousel-card__content'\n      );\n      let dots = '<div class=\"image-carousel-card__pagination-indicator\">';\n      let carouselDots = '<div class=\"image-carousel__pagination-indicator\">';\n      for (let i = 0; i < totalDots; i++) {\n        dots += `<span class=\"image-carousel-card__pagination-bullet ${\n          i === index ? 'active' : ''\n        }\" data-index=\"${index}\"></span>`;\n        carouselDots += `<span class=\"image-carousel__pagination-bullet ${\n          i === 0 ? 'active' : ''\n        }\" data-index=\"${index}\"></span>`;\n      }\n      dots += '</div>';\n      carouselDots += '</div>';\n      (content as HTMLElement).innerHTML += dots;\n      if (index === 0) {\n        (this.dom.carouselDotsContainer as HTMLElement).innerHTML +=\n          carouselDots;\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  initSwiper() {\n    Swiper.use([Navigation, Keyboard]);\n    const imageFigures: figure[] = [];\n\n    (this.dom.swiperItems as NodeList).forEach(item => {\n      const imageContainer = (item as HTMLElement).querySelector<HTMLElement>(\n        '.figure__container'\n      );\n      const fig = new figure(imageContainer as HTMLElement);\n      imageFigures?.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),\n        touchEnd: () => (this.touch = true),\n        click: () => (this.touch = false)\n      },\n      keyboard: {\n        enabled: true,\n        onlyInViewport: true\n      }\n    });\n  }\n\n  handleSlideChange(swiper: Swiper) {\n    this.swiperLayerEvent(swiper);\n    (\n      (this.dom.carouselDotsContainer as HTMLElement).querySelectorAll(\n        '.image-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 ImageCarouselRow;\n"],"names":["ImageCarouselRow","Component","el","__publicField","totalDots","_a","item","index","content","dots","carouselDots","i","swiper","interactLayer","Swiper","Navigation","Keyboard","imageContainer","figure","BREAKPOINTS"],"mappings":"8gBAMA,MAAMA,UAAyBC,CAAU,CAGvC,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,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,+BAAA,EAEF,IAAIG,EAAO,0DACPC,EAAe,qDACnB,QAASC,EAAI,EAAGA,EAAIP,EAAWO,IAC7BF,GAAQ,uDACNE,IAAMJ,EAAQ,SAAW,mBACVA,aACjBG,GAAgB,kDACdC,IAAM,EAAI,SAAW,mBACNJ,aAEXE,GAAA,SACQC,GAAA,SACfF,EAAwB,WAAaC,EAClCF,IAAU,IACX,KAAK,IAAI,sBAAsC,WAC9CG,EACJ,CACD,CACH,CACA,iBAAiBE,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,YAAa,CACXC,EAAO,IAAI,CAACC,EAAYC,CAAQ,CAAC,EAGhC,KAAK,IAAI,YAAyB,QAAgBV,GAAA,CACjD,MAAMW,EAAkBX,EAAqB,cAC3C,oBAAA,EAEU,IAAIY,EAAOD,CAA6B,CAC9B,CACvB,EAEG,IAAAH,EAAO,KAAK,IAAI,gBAAgC,CAClD,aAAc,GACd,cAAe,EACf,WAAY,CACV,OAAQ,KAAK,IAAI,UACjB,OAAQ,KAAK,IAAI,SACnB,EACA,YAAa,CACX,CAACK,EAAY,MAAM,EAAG,CACpB,aAAc,EAChB,EACA,CAACA,EAAY,eAAe,EAAG,CAC7B,aAAc,EAChB,CACF,EACA,GAAI,CACF,YAAaP,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,kBAAkBA,EAAgB,CAChC,KAAK,iBAAiBA,CAAM,EAEzB,KAAK,IAAI,sBAAsC,iBAC9C,oCAAA,EAEF,QAAQ,CAACN,EAAMC,IAAU,CACrBA,IAAUK,EAAO,YAClBN,EAAqB,UAAU,IAAI,QAAQ,EAE3CA,EAAqB,UAAU,OAAO,QAAQ,CACjD,CACD,CACH,CACF"}