{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/modules/tabs/productFeatureTab.ts","webpack://@verndale/toolkit/./src/js/modules/tabs/generalTab.ts","webpack://@verndale/toolkit/./src/js/modules/tabs/newsTab.ts","webpack://@verndale/toolkit/./src/js/modules/tabs/index.ts"],"names":["ProductFeatureTab","Component","el","isActive","__publicField","card","left","at","enter","translate","sequence","cardClass","animationStart","stagger","timeline","GeneralTab","link","spanEl","NewsTab","Tabs","_a","panels","tabsContainer","mobileTabs","desktopTabs","tabsContent","dropdownContent","item","index","uuid","activeId","tab","e","target","tabs","flag","id","__async","_b","_c","currentTab","selectedTab","panel"],"mappings":"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","file":"scripts/8856.74b19cfce77c1946ad37.js","sourcesContent":["import { Component } from '@verndale/core';\nimport { stagger, timeline } from 'motion';\nimport {\n  TimelineDefinition,\n  TimelineSegment\n} from '@motionone/dom/types/timeline/types';\nimport { TabItem } from './index';\n\nclass ProductFeatureTab extends Component implements TabItem {\n  id: string;\n  sliderBreakpoint = window.matchMedia('(min-width: 1024px)');\n  reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');\n\n  constructor(el: HTMLElement, public isActive = false) {\n    super(el);\n\n    this.id = el.id;\n  }\n\n  setupDefaults() {\n    this.dom = {\n      imageContainer: this.el.querySelector<HTMLElement>('.picture'),\n      image: this.el.querySelector<HTMLElement>('.picture picture'),\n      cardsContainer: this.el.querySelector<HTMLElement>(\n        '.product-feature-tabs__cards'\n      ),\n      cards: this.el.querySelectorAll('.product-feature-tabs__card')\n    };\n  }\n\n  setActive(isActive: boolean) {\n    this.isActive = isActive;\n\n    if (isActive) {\n      if (!this.reducedMotion.matches) {\n        this.el.classList.add('product-feature-tabs__panel--ready');\n        this.el.classList.remove('tabs__item--hidden');\n\n        return new Promise(() => {\n          setTimeout(() => {\n            this.el.classList.remove('product-feature-tabs__panel--ready');\n            return this.animateIn();\n          }, 20);\n        });\n      }\n\n      this.el.classList.remove('tabs__item--hidden');\n    } else {\n      if (!this.reducedMotion.matches) {\n        return this.animateOut().then(() => {\n          this.el.classList.add('tabs__item--hidden');\n        });\n      }\n\n      this.el.classList.add('tabs__item--hidden');\n    }\n\n    return;\n  }\n\n  private cardAnimation(\n    card: HTMLElement,\n    left: boolean,\n    at: number,\n    enter = true\n  ): TimelineSegment {\n    const translate = left ? '-50%' : '50%';\n    return [\n      card,\n      {\n        opacity: enter ? [0, 1] : 0,\n        translate: enter ? [translate, 0] : translate\n      },\n      { duration: 2, at }\n    ];\n  }\n\n  private animateIn() {\n    const sequence: TimelineDefinition = [];\n\n    if (this.sliderBreakpoint.matches) {\n      sequence.push([\n        this.dom.imageContainer as HTMLImageElement,\n        { opacity: [0, 1], scale: [0.9, 1] },\n        { duration: 1.5 }\n      ]);\n\n      (this.dom.cards as NodeListOf<HTMLDivElement>).forEach(card => {\n        const cardClass = card.getAttribute('class') || '';\n\n        let animationStart = 0;\n\n        if (cardClass.includes('center')) {\n          animationStart = 0.5;\n        } else if (cardClass.includes('bottom')) {\n          animationStart = 1;\n        }\n\n        sequence.push(\n          this.cardAnimation(card, cardClass.includes('left'), animationStart)\n        );\n      });\n    } else {\n      sequence.push([\n        this.dom.cards as NodeListOf<HTMLDivElement>,\n        { opacity: [0, 1], y: [10, 0] },\n        { duration: 2, delay: stagger(1), at: 0.5 }\n      ]);\n    }\n\n    return timeline(sequence, {\n      duration: 1\n    }).finished;\n  }\n\n  private animateOut() {\n    const sequence: TimelineDefinition = [];\n\n    if (this.sliderBreakpoint.matches) {\n      sequence.push([\n        this.dom.imageContainer as HTMLImageElement,\n        { opacity: 0, scale: 0.9 },\n        { duration: this.sliderBreakpoint.matches ? 3 : 1 }\n      ]);\n\n      (this.dom.cards as NodeListOf<HTMLDivElement>).forEach(card => {\n        const cardClass = card.getAttribute('class') || '';\n\n        let animationStart = 0;\n\n        if (cardClass.includes('center')) {\n          animationStart = 0.5;\n        } else if (cardClass.includes('bottom')) {\n          animationStart = 1;\n        }\n\n        sequence.push(\n          this.cardAnimation(\n            card,\n            cardClass.includes('left'),\n            animationStart,\n            false\n          )\n        );\n      });\n    } else {\n      sequence.push([\n        this.dom.cards as NodeListOf<HTMLDivElement>,\n        { opacity: 0, y: 10 },\n        { duration: 2, delay: stagger(1), at: 1 }\n      ]);\n    }\n\n    return timeline(sequence, {\n      duration: 0.7\n    }).finished.then(() => {\n      this.resetAfterAnimation();\n    });\n  }\n\n  private resetAfterAnimation() {\n    (this.dom.imageContainer as HTMLPictureElement).setAttribute('style', '');\n\n    (this.dom.cards as NodeListOf<HTMLDivElement>).forEach(card => {\n      card.setAttribute('style', '');\n    });\n  }\n}\n\nexport default ProductFeatureTab;\n","import { Component } from '@verndale/core';\nimport { ElementOrSelector, stagger, timeline } from 'motion';\nimport { TimelineDefinition } from '@motionone/dom/types/timeline/types';\nimport { TabItem } from './index';\n\nclass GeneralTab extends Component implements TabItem {\n  id: string;\n  reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');\n\n  constructor(el: HTMLElement, public isActive = false) {\n    super(el);\n\n    this.id = el.id;\n    this.addAnimationElements();\n  }\n\n  setupDefaults() {\n    this.dom = {\n      innerPannel: this.el.querySelector<HTMLElement>(\n        '.general-tabbed-module__panel-inner'\n      ),\n      image: this.el.querySelector<HTMLElement>(\n        '.general-tabbed-module__panel-inner .picture'\n      ),\n      title: this.el.querySelector<HTMLElement>(\n        '.general-tabbed-module__panel-content h3'\n      ),\n      rtfContent: this.el.querySelector<HTMLElement>(\n        '.general-tabbed-module__panel-content.rtf'\n      ),\n      links: this.el.querySelectorAll('.general-tabbed-module__panel-links a')\n    };\n  }\n\n  addAnimationElements() {\n    this.dom.imageAnimation = document.createElement('span');\n    (this.dom.image as HTMLDivElement).append(this.dom.imageAnimation);\n    (this.dom.links as NodeListOf<HTMLAnchorElement>).forEach(link => {\n      const spanEl = document.createElement('span');\n      spanEl.classList.add('general-tabbed-module__panel-link-animation');\n      link.append(spanEl);\n    });\n    this.dom.linksAnimation = this.el.querySelectorAll(\n      '.general-tabbed-module__panel-link-animation'\n    );\n  }\n\n  setActive(isActive: boolean) {\n    this.isActive = isActive;\n\n    if (isActive) {\n      if (this.reducedMotion.matches) {\n        this.el.classList.remove('tabs__item--hidden');\n      } else {\n        return this.animateIn();\n      }\n    } else {\n      if (this.reducedMotion.matches) {\n        this.el.classList.add('tabs__item--hidden');\n      } else {\n        return this.animateOut();\n      }\n    }\n\n    return;\n  }\n\n  private animateIn() {\n    this.el.classList.remove('tabs__item--hidden');\n\n    const sequence: TimelineDefinition = [\n      [\n        (this.dom.rtfContent as HTMLElement).querySelectorAll(\n          ':scope > *:not(.general-tabbed-module__panel-links)'\n        ) as ElementOrSelector,\n        { opacity: [0, 1], translate: ['-25%', 0] },\n        { delay: stagger(0.1) }\n      ],\n      [\n        this.dom.imageAnimation as HTMLDivElement,\n        { translate: [0, '100%'] },\n        { at: 0, duration: 0.5 }\n      ]\n    ];\n\n    sequence.push([\n      this.dom.linksAnimation as NodeListOf<HTMLSpanElement>,\n      { translate: [0, '105%'] },\n      {\n        easing: 'linear',\n        delay: stagger(0.05),\n        at:\n          (this.dom.rtfContent as HTMLElement).querySelectorAll(\n            ':scope > *:not(.general-tabbed-module__panel-links)'\n          ).length * 0.1\n      }\n    ]);\n\n    return timeline(sequence, {\n      duration: 0.5\n    }).finished;\n  }\n\n  private animateOut() {\n    const sequence: TimelineDefinition = [\n      [\n        (this.dom.rtfContent as HTMLElement).querySelectorAll(\n          ':scope > *:not(.general-tabbed-module__panel-links)'\n        ) as ElementOrSelector,\n        { opacity: 0, translate: '25%' },\n        { delay: stagger(0.1) }\n      ],\n      [\n        this.dom.imageAnimation as HTMLDivElement,\n        { translate: ['-100%', 0] },\n        { at: 0, duration: 0.5 }\n      ]\n    ];\n\n    sequence.push([\n      this.dom.linksAnimation as NodeListOf<HTMLSpanElement>,\n      { translate: ['-105%', 0] },\n      {\n        easing: 'linear',\n        delay: stagger(0.05),\n        at:\n          (this.dom.rtfContent as HTMLElement).querySelectorAll(\n            ':scope > *:not(.general-tabbed-module__panel-links)'\n          ).length * 0.1\n      }\n    ]);\n\n    return timeline(sequence, {\n      duration: 0.5\n    }).finished.then(() => {\n      this.el.classList.add('tabs__item--hidden');\n      this.resetAfterAnimation();\n    });\n  }\n\n  private resetAfterAnimation() {\n    (this.dom.innerPannel as HTMLDivElement).setAttribute('style', 'null');\n\n    (this.dom.links as NodeListOf<HTMLAnchorElement>).forEach(link => {\n      link.setAttribute('style', 'null');\n    });\n  }\n}\n\nexport default GeneralTab;\n","import { Component } from '@verndale/core';\nimport { stagger, timeline } from 'motion';\nimport { TimelineDefinition } from '@motionone/dom/types/timeline/types';\nimport { TabItem } from './index';\n\nclass NewsTab extends Component implements TabItem {\n  id: string;\n  reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');\n\n  constructor(el: HTMLElement, public isActive = false) {\n    super(el);\n    this.id = el.id;\n  }\n\n  setupDefaults() {\n    this.dom = {\n      cards: this.el.querySelectorAll('.news-headline-card')\n    };\n  }\n\n  setActive(isActive: boolean) {\n    this.isActive = isActive;\n\n    if (isActive) {\n      if (this.reducedMotion.matches) {\n        this.el.classList.remove('tabs__item--hidden');\n      } else {\n        return this.animateIn();\n      }\n    } else {\n      if (this.reducedMotion.matches) {\n        this.el.classList.add('tabs__item--hidden');\n      } else {\n        return this.animateOut();\n      }\n    }\n\n    return;\n  }\n\n  private animateIn() {\n    this.el.classList.remove('tabs__item--hidden');\n\n    const sequence: TimelineDefinition = [];\n\n    sequence.push([\n      this.dom.cards as NodeListOf<HTMLSpanElement>,\n      { translate: ['25%', 0], opacity: [0, 1] },\n      {\n        easing: 'linear',\n        delay: stagger(0.025),\n        at: 0,\n        opacity: {\n          duration: 1\n        }\n      }\n    ]);\n\n    return timeline(sequence, {}).finished;\n  }\n\n  private animateOut() {\n    const sequence: TimelineDefinition = [];\n\n    sequence.push([\n      this.dom.cards as NodeListOf<HTMLSpanElement>,\n      { translate: [0, '-50%'], opacity: 0 },\n      { easing: 'linear', delay: stagger(0.025), at: 0 }\n    ]);\n\n    return timeline(sequence, {}).finished.then(() => {\n      this.el.classList.add('tabs__item--hidden');\n    });\n  }\n\n  // private resetAfterAnimation() {}\n}\n\nexport default NewsTab;\n","import { Component } from '@verndale/core';\nimport ProductFeatureTab from './productFeatureTab';\nimport GeneralTab from './generalTab';\nimport NewsTab from './newsTab';\n\nexport interface TabItem {\n  id: string;\n  isActive: boolean;\n  setActive(isActive: boolean, force?: boolean): Promise<any> | undefined;\n}\n\nclass Tabs extends Component {\n  panels: TabItem[] = [];\n  panelInTransition: TabItem | undefined;\n\n  constructor(el: HTMLElement) {\n    super(el);\n    this.buildTabs();\n    this.addTabListeners();\n  }\n\n  setupDefaults() {\n    this.dom = {\n      tabsContainer: this.el.querySelector<HTMLElement>('.tabs'),\n      panels: this.el.querySelectorAll('.tabs__panel')\n    };\n  }\n\n  buildTabs() {\n    const panels = this.dom.panels as NodeListOf<HTMLDivElement>;\n    const tabsContainer = this.dom.tabsContainer as HTMLDivElement;\n\n    const mobileTabs = document.createElement('div');\n    mobileTabs.classList.add('tabs__mobile');\n    const desktopTabs = document.createElement('div');\n    desktopTabs.classList.add('tabs__desktop');\n\n    let tabsContent = '';\n    let dropdownContent = '';\n\n    panels.forEach((item, index) => {\n      const uuid = item.id;\n\n      item.setAttribute('aria-labelledby', `tab-${uuid}`);\n      if (index) {\n        item.classList.add('tabs__item--hidden');\n      }\n\n      tabsContent += `\n        <button ${\n          item.classList.contains('news-tabbed-module__panel')\n            ? 'class=\"link\"'\n            : ''\n        }type=\"button\" role=\"tab\" id=\"tab-${uuid}\" aria-controls=\"${uuid}\" aria-selected=\"${!index}\"${\n        index ? ' tabindex=\"-1\"' : ''\n      }>\n         ${\n           item.classList.contains('news-tabbed-module__panel') ? '<span>' : ''\n         } ${item.dataset.title}\n         ${\n           item.classList.contains('news-tabbed-module__panel') ? '</span>' : ''\n         }\n        </button>\n      `;\n\n      dropdownContent += `<option value=\"${uuid}\">${item.dataset.title}</option>`;\n\n      if (item.classList.contains('general-tabbed-module__panel')) {\n        this.panels.push(new GeneralTab(item, !index));\n      } else if (item.classList.contains('product-feature-tabs__panel')) {\n        this.panels.push(new ProductFeatureTab(item, !index));\n      } else if (item.classList.contains('news-tabbed-module__panel')) {\n        if (item.classList.contains('news-tabbed-module__panel'))\n          (this.dom.tabsContainer as HTMLElement).classList.add('tabs--news');\n        this.panels.push(new NewsTab(item, !index));\n      }\n    });\n\n    desktopTabs.innerHTML = tabsContent;\n    this.dom.tabs = desktopTabs.querySelectorAll('button');\n\n    this.dom.dropdown = document.createElement('select');\n    this.dom.dropdown.classList.add('tabs__dropdown');\n    this.dom.dropdown.classList.add('dropdown');\n    this.dom.dropdown.innerHTML = dropdownContent;\n\n    mobileTabs.append(this.dom.dropdown);\n    tabsContainer.append(desktopTabs);\n    tabsContainer.append(mobileTabs);\n    const activeId = Array.from(this.dom.tabs)\n      .find(tab => tab.getAttribute('aria-selected'))\n      ?.getAttribute('aria-controls');\n    if (activeId) this.setSelectedPanel(activeId);\n  }\n\n  addTabListeners() {\n    (this.dom.tabs as NodeList).forEach(tab => {\n      tab.addEventListener('click', this.handleTabClick.bind(this));\n      tab.addEventListener('keydown', this.handleTabKeyDown.bind(this));\n    });\n\n    (this.dom.dropdown as HTMLSelectElement).addEventListener(\n      'change',\n      this.handleDropdownChange.bind(this)\n    );\n  }\n\n  handleTabClick(e: Event) {\n    const target = e.currentTarget as HTMLButtonElement;\n    const activeId = target.getAttribute('aria-controls');\n\n    this.setSelectedPanel(`${activeId}`);\n  }\n\n  handleTabKeyDown(e: Event) {\n    if (!(e instanceof KeyboardEvent)) return;\n\n    const target = e.currentTarget as HTMLButtonElement;\n    const tabs = this.dom.tabs as NodeListOf<HTMLButtonElement>;\n    let flag = false;\n\n    switch (e.key) {\n      case 'ArrowLeft':\n        if (target.previousElementSibling) {\n          (target.previousElementSibling as HTMLButtonElement).focus();\n        } else {\n          (tabs[tabs.length - 1] as HTMLButtonElement).focus();\n        }\n        flag = true;\n        break;\n\n      case 'ArrowRight':\n        if (target.nextElementSibling) {\n          (target.nextElementSibling as HTMLButtonElement).focus();\n        } else {\n          (tabs[0] as HTMLButtonElement).focus();\n        }\n        flag = true;\n        break;\n\n      case 'Home':\n        (tabs[0] as HTMLButtonElement).focus();\n        flag = true;\n        break;\n\n      case 'End':\n        (tabs[tabs.length - 1] as HTMLButtonElement).focus();\n        flag = true;\n        break;\n\n      default:\n        break;\n    }\n\n    if (flag) {\n      e.stopPropagation();\n      e.preventDefault();\n    }\n  }\n\n  handleDropdownChange(e: Event) {\n    const target = e.target as HTMLSelectElement;\n    const activeId = target.value;\n\n    this.setSelectedPanel(activeId);\n  }\n\n  async setSelectedPanel(id: string) {\n    const tabs = [...(this.dom.tabs as NodeListOf<HTMLButtonElement>)];\n\n    (this.dom.dropdown as HTMLSelectElement).value = id;\n\n    // Deselect active tab\n    const currentTab = tabs.find(\n      tab => tab.getAttribute('aria-selected') === 'true'\n    );\n    currentTab?.setAttribute('aria-selected', 'false');\n    currentTab?.setAttribute('tabindex', '-1');\n\n    // Select new tab\n    const selectedTab = tabs.find(tab => tab.id === `tab-${id}`);\n    selectedTab?.setAttribute('aria-selected', 'true');\n    selectedTab?.removeAttribute('tabindex');\n\n    if (\n      (this.dom.tabsContainer as HTMLElement).classList.contains('tabs--news')\n    ) {\n      const desktopTabs = (this.dom.tabsContainer as HTMLElement).querySelector(\n        '.tabs__desktop'\n      );\n      if (desktopTabs) {\n        (desktopTabs as HTMLElement).style.setProperty(\n          '--inset-inline-start',\n          `${(selectedTab as HTMLElement).offsetLeft}px`\n        );\n        (desktopTabs as HTMLElement).style.setProperty(\n          '--inline-size',\n          `${(selectedTab as HTMLElement).offsetWidth}px`\n        );\n      }\n    }\n\n    if (this.panelInTransition) {\n      // Check if previous panel in transition\n      await this.panelInTransition?.setActive(false);\n    }\n\n    // Deselect active panel\n    this.panelInTransition = this.panels.find(panel => panel.isActive);\n    await this.panelInTransition?.setActive(false);\n\n    // Select new panel\n    this.panelInTransition = this.panels.find(panel => panel.id === id);\n    await this.panelInTransition?.setActive(true);\n    this.panelInTransition = undefined;\n  }\n}\n\nexport default Tabs;\n"],"sourceRoot":""}