{"version":3,"sources":["webpack:///./src/js/modules/tabbedContentRow.js"],"names":["TabbedContentRow","this","dom","tabsContainer","el","querySelector","tabsContent","querySelectorAll","sliders","cards","currentTab","initializeTabs","length","classList","add","initSlider","forEach","card","addEventListener","onHoverCard","onLeaveCard","tabs","tab","index","e","handleTabsClick","handleTabsKeydown","window","slider","imageContainer","captionContainer","sliderHeight","offsetHeight","style","height","renderTabs","setAttribute","tabIndex","currentTabContent","tabContent","remove","focus","innerWidth","breakpoints","laptop","scrollTo","top","left","offsetLeft","behavior","changeSelectedTab","removeAnimations","keyMapper","ArrowLeft","ArrowRight","key","nextTabIndex","lastTabIndex","innerHTML","filter","map","tabId","getAttribute","tabContentId","tabLabel","dataset","join","images","Array","from","captions","progressBars","currentImageIndex","getActiveSlide","slideAnimation","anime","targets","translateX","easing","delay","duration","autoplay","update","width","progress","begin","currentCaption","complete","oldNext","find","image","contains","removeAttribute","running","animation","i","animatables","target","findIndex","Component"],"mappings":"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","file":"84.da251e970a4ebb134fdd.js","sourcesContent":["import { Component } from '@verndale/core';\nimport { breakpoints } from '../helpers/constants';\nimport anime from 'animejs/lib/anime.es.js';\nimport Swiper from 'swiper';\n/**\n * Refer to https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html\n * for accessibility concerns\n */\n\nclass TabbedContentRow extends Component {\n  setupDefaults() {\n    this.dom = {\n      tabsContainer: this.el.querySelector('.tabbed-content-row__tabs'),\n      tabsContent: [\n        ...this.el.querySelectorAll(\n          '.tabbed-content-row__tab-content[role=\"tabpanel\"]'\n        )\n      ],\n      sliders: this.el.querySelectorAll(\n        '.tabbed-content-row__slider-container'\n      ),\n      cards: this.el.querySelectorAll('.cta-description-card')\n    };\n    this.currentTab = 0;\n    this.initializeTabs();\n\n    if (this.dom.sliders.length > 0) {\n      const firstSlide = this.dom.sliders[0].querySelector(\n        '.tabbed-content__image'\n      );\n      firstSlide.classList.add('active');\n      this.initSlider(this.dom.sliders[0]);\n    }\n  }\n\n  addListeners() {\n    const { cards } = this.dom;\n\n    cards.forEach(card =>\n      card.addEventListener('mouseover', ::this.onHoverCard)\n    );\n    cards.forEach(card =>\n      card.addEventListener('mouseleave', ::this.onLeaveCard)\n    );\n    this.dom.tabs.forEach((tab, index) => {\n      // Click event on tab\n      tab.addEventListener('click', e => this.handleTabsClick(e, index));\n      // Keydown event on tab\n      tab.addEventListener('keydown', e => this.handleTabsKeydown(e));\n    });\n    if (this.dom.sliders.length > 0) {\n      window.addEventListener('resize', () => {\n        const slider = this.dom.sliders[0];\n        const imageContainer = slider.querySelector('.tabbed-content__slide');\n        const captionContainer = slider.querySelector(\n          '.tabbed-content-row__tab-image-caption'\n        );\n        const sliderHeight =\n          imageContainer.offsetHeight + captionContainer.offsetHeight;\n        slider.style.height = `${sliderHeight}px`;\n      });\n    }\n  }\n\n  initializeTabs() {\n    if (this.dom.tabsContent.length > 0) {\n      this.renderTabs();\n      this.dom.tabsContent[0].classList.add('active');\n      this.dom.tabsContent[0].setAttribute('tabindex', 0);\n      this.el.classList.add('initialized');\n    }\n  }\n\n  changeSelectedTab(tabIndex) {\n    this.currentTab = tabIndex;\n    const currentTabContent = this.dom.tabsContent[tabIndex];\n    const currentTab = this.dom.tabs[tabIndex];\n    // Reset tabsContent styles and accessibility attributes\n    this.dom.tabsContent.forEach((tabContent, index) => {\n      tabContent.setAttribute('tabindex', -1);\n      tabContent.classList.remove('active');\n    });\n    // Update currentTabContent styles and accessibility attributes\n    currentTabContent.setAttribute('tabindex', 0);\n    currentTabContent.classList.add('active');\n    // Reset tabs styles and accessibility attributes\n    this.dom.tabs.forEach(tab => {\n      tab.setAttribute('aria-selected', false);\n      tab.setAttribute('tabindex', -1);\n      tab.classList.remove('active');\n    });\n    // Update currentTab styles and accessibility attributes\n    currentTab.setAttribute('aria-selected', true);\n    currentTab.setAttribute('tabindex', 0);\n    currentTab.classList.add('active');\n    currentTab.focus();\n    // Scroll to element on tablet\n    if (window.innerWidth <= breakpoints.laptop) {\n      this.dom.tabsContainer.scrollTo({\n        top: 0,\n        left: currentTab.offsetLeft - 20,\n        behavior: 'smooth'\n      });\n    }\n  }\n\n  handleTabsClick(e, index) {\n    this.changeSelectedTab(index);\n    this.removeAnimations();\n    if (this.dom.sliders[index]) {\n      this.initSlider(this.dom.sliders[index]);\n    }\n  }\n\n  handleTabsKeydown(e) {\n    const keyMapper = { ArrowLeft: -1, ArrowRight: 1 };\n    // Return if theres no action for a key\n    if (!keyMapper[e.key]) return;\n    const nextTabIndex = keyMapper[e.key];\n    const lastTabIndex = this.dom.tabs.length - 1;\n    // Handle navigation from 0 index to last index\n    if (this.currentTab + nextTabIndex === -1) {\n      this.changeSelectedTab(lastTabIndex);\n      // Handle navigation from last index to 0 index\n    } else if (this.currentTab + nextTabIndex > lastTabIndex) {\n      this.changeSelectedTab(0);\n      // Handle regular navigation\n    } else {\n      this.changeSelectedTab(this.currentTab + nextTabIndex);\n    }\n  }\n\n  renderTabs() {\n    // Generate tabs\n    this.dom.tabsContainer.innerHTML = this.dom.tabsContent\n      .filter(tabContent => {\n        // Only render tabs if has child nodes\n        /*return tabContent.hasChildNodes();*/\n        return true;\n      })\n      .map((tabContent, index) => {\n        const tabId = tabContent.getAttribute('aria-labelledby');\n        const tabContentId = tabContent.getAttribute('id');\n        const tabLabel = tabContent.dataset.tabLabel;\n        return `\n        <button\n          class='${!index ? 'active' : ''}'\n          role='tab'\n          tabindex='${!index ? 0 : -1}'\n          aria-selected='${!index}'\n          aria-controls='${tabContentId}'\n          id='${tabId}'\n        >\n          <span>${tabLabel}</span>\n        </button>\n      `;\n      })\n      .join('');\n    // Set tabs reference\n    this.dom.tabs = [\n      ...this.el.querySelectorAll(\n        '.tabbed-content-row__tabs button[role=\"tab\"]'\n      )\n    ];\n  }\n\n  initSlider(slider) {\n    const images = Array.from(\n      slider.querySelectorAll('.tabbed-content__image')\n    );\n    const captions = Array.from(\n      slider.querySelectorAll('.tabbed-content-row__tab-image-caption')\n    );\n    if (\n      slider &&\n      images.length > 1\n    ) {\n      const imageContainer = slider.querySelector('.tabbed-content__slide');\n      const captionContainer = slider.querySelector(\n        '.tabbed-content-row__tab-image-caption'\n      );\n      slider.style.height = `${\n        imageContainer.offsetHeight + captionContainer.offsetHeight\n      }px`;\n\n      const progressBars = Array.from(slider.querySelectorAll('.progress-bar'));\n      const currentImageIndex = this.getActiveSlide(images);\n      const time = 400;\n      this.slideAnimation = anime({\n        targets: images[currentImageIndex],\n        translateX: ['0%', '-100%'],\n        easing: 'easeInOutQuad',\n        delay: 7000,\n        duration: time,\n        autoplay: true,\n        update: () => {\n          progressBars[currentImageIndex].style.width = `${\n            this.slideAnimation.progress + 5.4\n          }%`;\n        },\n        begin: () => {\n          const currentImageIndex = this.getActiveSlide(images);\n          images[currentImageIndex].classList.add('active');\n          const currentCaption = captions[currentImageIndex];\n          currentCaption?.classList.add(\n            'tabbed-content-row__tab-image-caption--active'\n          );\n          images[\n            currentImageIndex === images.length - 1 ? 0 : currentImageIndex + 1\n          ].classList.add('next');\n        },\n        complete: () => {\n          const currentImageIndex = this.getActiveSlide(images);\n          const currentCaption = captions[currentImageIndex];\n          currentCaption?.classList.remove(\n            'tabbed-content-row__tab-image-caption--active'\n          );\n          const oldNext = images.find(image =>\n            image.classList.contains('next')\n          );\n          if (oldNext) oldNext.classList.remove('next');\n          images[currentImageIndex].removeAttribute('style');\n          images[currentImageIndex].classList.remove('active');\n          images[\n            currentImageIndex === images.length - 1 ? 0 : currentImageIndex + 1\n          ].classList.add('active');\n          progressBars[currentImageIndex].style.width = '0';\n          this.initSlider(slider);\n        }\n      });\n    } else {\n      const currentImageIndex = this.getActiveSlide(images);\n      images[currentImageIndex].classList.add('active');\n      const currentCaption = captions[currentImageIndex];\n      currentCaption?.classList.add(\n        'tabbed-content-row__tab-image-caption--active'\n      );\n    }\n  }\n\n  removeAnimations() {\n    const animations = anime.running;\n    animations.forEach((animation, i) => {\n      animation.remove(animation.animatables[i].target);\n    });\n  }\n\n  getActiveSlide(images) {\n    const currentImageIndex = images.findIndex(image =>\n      image.classList.contains('active')\n    );\n    return currentImageIndex === -1 || !currentImageIndex\n      ? 0\n      : currentImageIndex;\n  }\n\n  onHoverCard(e) {\n    const { cards } = this.dom;\n    cards.forEach(\n      card => !card.contains(e.target) && card.classList.add('light-opacity')\n    );\n  }\n\n  onLeaveCard(e) {\n    const { cards } = this.dom;\n    cards.forEach(\n      card => !card.contains(e.target) && card.classList.remove('light-opacity')\n    );\n  }\n}\n\nexport default TabbedContentRow;\n"],"sourceRoot":""}