{"version":3,"file":"logo-carousel-row-c25d04b1.js","sources":["../../../../src/scripts/modules/logo-carousel-row.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport Swiper, { Navigation, Keyboard } from 'swiper';\nimport 'swiper/css/bundle';\nimport { debounce } from '../helpers/debounce';\nimport { DataLayerObject, ExtendedWindowType } from '../helpers/global-types';\n\nclass LogoCarouselRow extends Component {\n  private touch = false;\n  private swiper: Swiper | null;\n  private numberOfSlides: number;\n\n  constructor(el: HTMLElement) {\n    super(el);\n    this.swiper = null;\n    this.initSwiper();\n    this.calcImgWidth();\n    this.numberOfSlides = 0;\n\n    window.addEventListener(\n      'resize',\n      debounce(this.handleResize.bind(this), 250)\n    );\n  }\n\n  setupDefaults() {\n    this.dom = {\n      swiperContainer: this.el.querySelector<HTMLElement>('.swiper-container'),\n      swiperSlides: this.el.querySelectorAll<HTMLElement>(\n        '.logo-carousel-row__swiper-slide'\n      ),\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\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    (this.dom.swiperSlides as NodeList).forEach((item, index) => {\n      if (\n        index < swiper.activeIndex ||\n        index > swiper.activeIndex + this.numberOfSlides\n      ) {\n        (item as HTMLAnchorElement).setAttribute('inert', 'true');\n      } else {\n        (item as HTMLAnchorElement).removeAttribute('inert');\n      }\n    });\n  }\n\n  calcImgWidth() {\n    (this.dom.swiperSlides as NodeList).forEach(slide => {\n      const _slide = slide as HTMLElement;\n\n      const getContainedSize = (img: HTMLImageElement) => {\n        const ratio = img.naturalWidth / img.naturalHeight;\n        let width = img.height * ratio;\n        if (width > img.width) {\n          width = img.width;\n        }\n        return width;\n      };\n\n      const _img = _slide.querySelector('img') as HTMLImageElement;\n\n      _slide.style.setProperty('--img-size', `${getContainedSize(_img)}px`);\n    });\n  }\n\n  handleResize() {\n    this.swiper?.destroy();\n    this.initSwiper();\n    this.calcImgWidth();\n  }\n\n  initSwiper() {\n    Swiper.use([Navigation, Keyboard]);\n    if (!this.dom.swiperSlides) return;\n    const containerWidth = (this.dom.swiperContainer as HTMLElement)\n      .offsetWidth;\n    const swiperSlides = this.dom.swiperSlides as NodeList;\n    const mobile = window.innerWidth < 361;\n    const tablet = window.innerWidth < 769;\n    const gap = mobile ? 32 : 72;\n    const slideWidth = tablet ? 180 : 300;\n    const slidesWidth =\n      swiperSlides.length * slideWidth + (gap * swiperSlides.length - 1);\n\n    if (containerWidth < slidesWidth) {\n      (this.el as HTMLElement)?.classList.remove('swiper-container--centered');\n\n      const numberOfSlides =\n        Math.round((containerWidth / (slideWidth + gap)) * 10) / 10;\n\n      this.numberOfSlides = numberOfSlides;\n      this.swiper = new Swiper(this.dom.swiperContainer as HTMLElement, {\n        spaceBetween: gap,\n        centeredSlides: mobile,\n        navigation: {\n          prevEl: this.dom.prevArrow as HTMLElement,\n          nextEl: this.dom.nextArrow as HTMLElement\n        },\n        slidesPerView: numberOfSlides,\n        on: {\n          slideChange: swiper => this.swiperLayerEvent(swiper),\n          init: swiper => this.swiperLayerEvent(swiper),\n          touchEnd: () => {\n            this.touch = true;\n          },\n          click: () => {\n            this.touch = false;\n          }\n        },\n        keyboard: {\n          enabled: true,\n          onlyInViewport: true\n        }\n      });\n    } else {\n      if (\n        (this.el as HTMLElement)?.classList.contains(\n          'swiper-container--centered'\n        )\n      )\n        return;\n      (this.el as HTMLElement)?.classList.add('swiper-container--centered');\n    }\n  }\n}\n\nexport default LogoCarouselRow;\n"],"names":["LogoCarouselRow","Component","el","__publicField","debounce","swiper","interactLayer","item","index","slide","_slide","getContainedSize","img","ratio","width","_img","_a","Swiper","Navigation","Keyboard","containerWidth","swiperSlides","mobile","tablet","gap","slideWidth","slidesWidth","numberOfSlides","_b","_c"],"mappings":"wcAMA,MAAMA,UAAwBC,CAAU,CAKtC,YAAYC,EAAiB,CAC3B,MAAMA,CAAE,EALFC,EAAA,aAAQ,IACRA,EAAA,eACAA,EAAA,uBAIN,KAAK,OAAS,KACd,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,eAAiB,EAEf,OAAA,iBACL,SACAC,EAAS,KAAK,aAAa,KAAK,IAAI,EAAG,GAAG,CAAA,CAE9C,CAEA,eAAgB,CACd,KAAK,IAAM,CACT,gBAAiB,KAAK,GAAG,cAA2B,mBAAmB,EACvE,aAAc,KAAK,GAAG,iBACpB,kCACF,EACA,cAAe,KAAK,GAAG,cAA2B,iBAAiB,EACnE,UAAW,KAAK,GAAG,cAA2B,qBAAqB,EACnE,UAAW,KAAK,GAAG,cAA2B,qBAAqB,CAAA,CAEvE,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,EAI3B,KAAK,IAAI,aAA0B,QAAQ,CAACC,EAAMC,IAAU,CAEzDA,EAAQH,EAAO,aACfG,EAAQH,EAAO,YAAc,KAAK,eAEjCE,EAA2B,aAAa,QAAS,MAAM,EAEvDA,EAA2B,gBAAgB,OAAO,CACrD,CACD,CACH,CAEA,cAAe,CACZ,KAAK,IAAI,aAA0B,QAAiBE,GAAA,CACnD,MAAMC,EAASD,EAETE,EAAoBC,GAA0B,CAC5C,MAAAC,EAAQD,EAAI,aAAeA,EAAI,cACjC,IAAAE,EAAQF,EAAI,OAASC,EACrB,OAAAC,EAAQF,EAAI,QACdE,EAAQF,EAAI,OAEPE,CAAA,EAGHC,EAAOL,EAAO,cAAc,KAAK,EAEvCA,EAAO,MAAM,YAAY,aAAc,GAAGC,EAAiBI,CAAI,KAAK,CAAA,CACrE,CACH,CAEA,cAAe,QACbC,EAAA,KAAK,SAAL,MAAAA,EAAa,UACb,KAAK,WAAW,EAChB,KAAK,aAAa,CACpB,CAEA,YAAa,WAEP,GADJC,EAAO,IAAI,CAACC,EAAYC,CAAQ,CAAC,EAC7B,CAAC,KAAK,IAAI,aAAc,OACtB,MAAAC,EAAkB,KAAK,IAAI,gBAC9B,YACGC,EAAe,KAAK,IAAI,aACxBC,EAAS,OAAO,WAAa,IAC7BC,EAAS,OAAO,WAAa,IAC7BC,EAAMF,EAAS,GAAK,GACpBG,EAAaF,EAAS,IAAM,IAC5BG,EACJL,EAAa,OAASI,GAAcD,EAAMH,EAAa,OAAS,GAElE,GAAID,EAAiBM,EAAa,EAC/BV,EAAA,KAAK,KAAL,MAAAA,EAAyB,UAAU,OAAO,8BAE3C,MAAMW,EACJ,KAAK,MAAOP,GAAkBK,EAAaD,GAAQ,EAAE,EAAI,GAE3D,KAAK,eAAiBG,EACtB,KAAK,OAAS,IAAIV,EAAO,KAAK,IAAI,gBAAgC,CAChE,aAAcO,EACd,eAAgBF,EAChB,WAAY,CACV,OAAQ,KAAK,IAAI,UACjB,OAAQ,KAAK,IAAI,SACnB,EACA,cAAeK,EACf,GAAI,CACF,YAAatB,GAAU,KAAK,iBAAiBA,CAAM,EACnD,KAAMA,GAAU,KAAK,iBAAiBA,CAAM,EAC5C,SAAU,IAAM,CACd,KAAK,MAAQ,EACf,EACA,MAAO,IAAM,CACX,KAAK,MAAQ,EACf,CACF,EACA,SAAU,CACR,QAAS,GACT,eAAgB,EAClB,CAAA,CACD,MACI,CAEF,IAAAuB,EAAA,KAAK,KAAL,MAAAA,EAAyB,UAAU,SAClC,8BAGF,QACDC,EAAA,KAAK,KAAL,MAAAA,EAAyB,UAAU,IAAI,8BAE5C,CACF"}