{"version":3,"file":"featured-blog-listing-d051a97b.js","sources":["../../../../src/scripts/modules/featured-blog-listing.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport Swiper, { Navigation, Pagination, Keyboard } from 'swiper';\nimport { BREAKPOINTS } from '../helpers/breakpoints';\nimport 'swiper/css/bundle';\nimport { DataLayerObject, ExtendedWindowType } from '../helpers/global-types';\n\nclass FeaturedBlogListing extends Component {\n  private anchorsList: Array<NodeListOf<HTMLElement>>;\n  private swiper: Swiper | null = null;\n  private touch = false;\n\n  constructor(el: HTMLElement) {\n    super(el);\n    this.anchorsList = this.getAnchorsList();\n    if (\n      !window.matchMedia(`(min-width: ${BREAKPOINTS.tabletLandscape}px)`)\n        .matches\n    )\n      this.init();\n  }\n\n  addListeners() {\n    const isDesktopQuery = window.matchMedia(\n      `(min-width: ${BREAKPOINTS.tabletLandscape}px)`\n    );\n\n    isDesktopQuery.addEventListener(\n      'change',\n      this.handleDesktopQuery.bind(this)\n    );\n  }\n\n  setupDefaults() {\n    this.dom = {\n      carousel: this.el.querySelector<HTMLElement>('.swiper-container'),\n      pagination: this.el.querySelector<HTMLElement>('.swiper-pagination'),\n      nextArrow: this.el.querySelector<HTMLElement>('.swiper-button-next'),\n      prevArrow: this.el.querySelector<HTMLElement>('.swiper-button-prev'),\n      slides: this.el.querySelectorAll<HTMLElement>('.swiper-slide'),\n      controls: this.el.querySelector<HTMLElement>(\n        '.blog-category-masthead__controls'\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  handleDesktopQuery(e: MediaQueryListEvent) {\n    if (e.matches) {\n      this.swiper?.destroy();\n      this.swiper = null;\n    } else {\n      this.init();\n    }\n  }\n\n  handleActiveIndexChange(swiper: Swiper) {\n    this.anchorsList?.forEach((anchors, index) => {\n      if (index === swiper.activeIndex) {\n        anchors.forEach(anchor => {\n          anchor.removeAttribute('tabindex');\n        });\n      } else {\n        anchors.forEach(anchor => {\n          anchor.setAttribute('tabindex', '-1');\n        });\n      }\n    });\n  }\n\n  getAnchorsList() {\n    if (this.dom.slides) {\n      return Array.from(this.dom.slides as NodeListOf<HTMLElement>).map(\n        slide => slide.querySelectorAll('a') as NodeListOf<HTMLElement>\n      );\n    }\n\n    return [];\n  }\n\n  init() {\n    Swiper.use([Navigation, Pagination, Keyboard]);\n    const { pagination, nextArrow, prevArrow, carousel, slides } = this.dom;\n\n    if ((slides as NodeListOf<HTMLElement>).length <= 1) {\n      (this.dom.controls as HTMLElement).style.display = 'none';\n      return;\n    }\n\n    this.swiper = new Swiper(carousel as HTMLElement, {\n      enabled: true,\n      spaceBetween: 20,\n      slidesPerView: 1,\n      pagination: {\n        el: pagination as HTMLElement\n      },\n      navigation: {\n        prevEl: prevArrow as HTMLElement,\n        nextEl: nextArrow as HTMLElement\n      },\n      on: {\n        afterInit: (swiper: Swiper) => this.handleActiveIndexChange(swiper),\n        activeIndexChange: (swiper: Swiper) =>\n          this.handleActiveIndexChange(swiper),\n        beforeDestroy: () => {\n          this.anchorsList?.forEach(anchors => {\n            anchors.forEach(anchor => {\n              anchor.removeAttribute('tabindex');\n            });\n          });\n        },\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 FeaturedBlogListing;\n"],"names":["FeaturedBlogListing","Component","el","__publicField","BREAKPOINTS","swiper","interactLayer","_a","anchors","index","anchor","slide","Swiper","Navigation","Pagination","Keyboard","pagination","nextArrow","prevArrow","carousel","slides"],"mappings":"uhBAMA,MAAMA,UAA4BC,CAAU,CAK1C,YAAYC,EAAiB,CAC3B,MAAMA,CAAE,EALFC,EAAA,oBACAA,EAAA,cAAwB,MACxBA,EAAA,aAAQ,IAIT,KAAA,YAAc,KAAK,iBAErB,OAAO,WAAW,eAAeC,EAAY,oBAAoB,EAC/D,SAEH,KAAK,KAAK,CACd,CAEA,cAAe,CACU,OAAO,WAC5B,eAAeA,EAAY,oBAAA,EAGd,iBACb,SACA,KAAK,mBAAmB,KAAK,IAAI,CAAA,CAErC,CAEA,eAAgB,CACd,KAAK,IAAM,CACT,SAAU,KAAK,GAAG,cAA2B,mBAAmB,EAChE,WAAY,KAAK,GAAG,cAA2B,oBAAoB,EACnE,UAAW,KAAK,GAAG,cAA2B,qBAAqB,EACnE,UAAW,KAAK,GAAG,cAA2B,qBAAqB,EACnE,OAAQ,KAAK,GAAG,iBAA8B,eAAe,EAC7D,SAAU,KAAK,GAAG,cAChB,mCACF,CAAA,CAEJ,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,mBAAmB,EAAwB,OACrC,EAAE,UACJC,EAAA,KAAK,SAAL,MAAAA,EAAa,UACb,KAAK,OAAS,MAEd,KAAK,KAAK,CAEd,CAEA,wBAAwBF,EAAgB,QACtCE,EAAA,KAAK,cAAL,MAAAA,EAAkB,QAAQ,CAACC,EAASC,IAAU,CACxCA,IAAUJ,EAAO,YACnBG,EAAQ,QAAkBE,GAAA,CACxBA,EAAO,gBAAgB,UAAU,CAAA,CAClC,EAEDF,EAAQ,QAAkBE,GAAA,CACjBA,EAAA,aAAa,WAAY,IAAI,CAAA,CACrC,CACH,EAEJ,CAEA,gBAAiB,CACX,OAAA,KAAK,IAAI,OACJ,MAAM,KAAK,KAAK,IAAI,MAAiC,EAAE,IAC5DC,GAASA,EAAM,iBAAiB,GAAG,CAAA,EAIhC,EACT,CAEA,MAAO,CACLC,EAAO,IAAI,CAACC,EAAYC,EAAYC,CAAQ,CAAC,EAC7C,KAAM,CAAE,WAAAC,EAAY,UAAAC,EAAW,UAAAC,EAAW,SAAAC,EAAU,OAAAC,GAAW,KAAK,IAE/D,GAAAA,EAAmC,QAAU,EAAG,CAClD,KAAK,IAAI,SAAyB,MAAM,QAAU,OACnD,OAGG,KAAA,OAAS,IAAIR,EAAOO,EAAyB,CAChD,QAAS,GACT,aAAc,GACd,cAAe,EACf,WAAY,CACV,GAAIH,CACN,EACA,WAAY,CACV,OAAQE,EACR,OAAQD,CACV,EACA,GAAI,CACF,UAAYZ,GAAmB,KAAK,wBAAwBA,CAAM,EAClE,kBAAoBA,GAClB,KAAK,wBAAwBA,CAAM,EACrC,cAAe,IAAM,QACdE,EAAA,KAAA,cAAA,MAAAA,EAAa,QAAmBC,GAAA,CACnCA,EAAQ,QAAkBE,GAAA,CACxBA,EAAO,gBAAgB,UAAU,CAAA,CAClC,CAAA,EAEL,EACA,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"}