{"version":3,"file":"image-masthead-carousel-54afb39b.js","sources":["../../../../src/scripts/modules/image-masthead-carousel.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport Swiper, { Navigation, Keyboard } from 'swiper';\nimport 'swiper/css/bundle';\nimport { BREAKPOINTS } from '../helpers/breakpoints';\nimport { debounce } from '../helpers/debounce';\nimport { DataLayerObject, ExtendedWindowType } from '../helpers/global-types';\n\nclass ImageMastheadCarousel extends Component {\n  private touch = false;\n\n  constructor(el: HTMLElement) {\n    super(el);\n    this.initSwiper();\n  }\n\n  setupDefaults() {\n    this.dom = {\n      swiperContainer: this.el.querySelector<HTMLElement>('.swiper-container'),\n      swiperWrapper: this.el.querySelector<HTMLElement>('.swiper-wrapper'),\n      nextArrow: this.el.querySelector<HTMLElement>('.swiper-button-next'),\n      prevArrow: this.el.querySelector<HTMLElement>('.swiper-button-prev')\n    };\n\n    document.documentElement.style.setProperty(\n      '--image-masthead-block-size',\n      `${this.el.offsetHeight}px`\n    );\n  }\n\n  addListeners() {\n    window.addEventListener(\n      'resize',\n      debounce(this.handleResize.bind(this), 250)\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  handleResize() {\n    document.documentElement.style.setProperty(\n      '--image-masthead-block-size',\n      `${this.el.offsetHeight}px`\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      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.swiperLayerEvent(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\nexport default ImageMastheadCarousel;\n"],"names":["ImageMastheadCarousel","Component","el","__publicField","debounce","swiper","interactLayer","Swiper","Navigation","Keyboard","BREAKPOINTS"],"mappings":"sfAOA,MAAMA,UAA8BC,CAAU,CAG5C,YAAYC,EAAiB,CAC3B,MAAMA,CAAE,EAHFC,EAAA,aAAQ,IAId,KAAK,WAAW,CAClB,CAEA,eAAgB,CACd,KAAK,IAAM,CACT,gBAAiB,KAAK,GAAG,cAA2B,mBAAmB,EACvE,cAAe,KAAK,GAAG,cAA2B,iBAAiB,EACnE,UAAW,KAAK,GAAG,cAA2B,qBAAqB,EACnE,UAAW,KAAK,GAAG,cAA2B,qBAAqB,CAAA,EAGrE,SAAS,gBAAgB,MAAM,YAC7B,8BACA,GAAG,KAAK,GAAG,gBAAA,CAEf,CAEA,cAAe,CACN,OAAA,iBACL,SACAC,EAAS,KAAK,aAAa,KAAK,IAAI,EAAG,GAAG,CAAA,CAE9C,CAEA,iBAAiBC,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,cAAe,CACb,SAAS,gBAAgB,MAAM,YAC7B,8BACA,GAAG,KAAK,GAAG,gBAAA,CAEf,CAEA,YAAa,CACXC,EAAO,IAAI,CAACC,EAAYC,CAAQ,CAAC,EAE7B,IAAAF,EAAO,KAAK,IAAI,gBAAgC,CAClD,aAAc,GACd,cAAe,EACf,WAAY,CACV,OAAQ,KAAK,IAAI,UACjB,OAAQ,KAAK,IAAI,SACnB,EACA,YAAa,CACX,CAACG,EAAY,MAAM,EAAG,CACpB,aAAc,EAChB,EACA,CAACA,EAAY,eAAe,EAAG,CAC7B,aAAc,EAChB,CACF,EACA,GAAI,CACF,YAAaL,GAAU,KAAK,iBAAiBA,CAAM,EACnD,SAAU,IAAO,KAAK,MAAQ,GAC9B,MAAO,IAAO,KAAK,MAAQ,EAC7B,EACA,SAAU,CACR,QAAS,GACT,eAAgB,EAClB,CAAA,CACD,CACH,CACF"}