{"version":3,"file":"tabbed-featured-content-47502721.js","sources":["../../../../src/scripts/modules/tabbed-featured-content.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport { rovingIndex } from 'roving-ux';\nimport { debounce } from '../helpers/debounce';\nimport { ExtendedWindowType } from '../coveo/engine';\n\nclass TabbedFeaturedContent extends Component {\n  private defaultValue: string | undefined;\n  private panels: object;\n  private currentCard: HTMLElement | null;\n\n  constructor(el: HTMLElement) {\n    super(el);\n    this.defaultValue = this.el.dataset.defaultValue;\n    this.panels = this.setTabPanels();\n    this.currentCard = this.el.querySelector<HTMLElement>(\n      '.tabbed-featured-content__panel.active .featured-content-card'\n    );\n\n    if (\n      this.dom.tabsList &&\n      (this.dom.tabsList as HTMLElement).querySelectorAll(\n        '.tabbed-featured-content__tab'\n      ).length > 0\n    ) {\n      rovingIndex({\n        element: this.dom.tabsList,\n        target: '.tabbed-featured-content__tab'\n      });\n    }\n\n    this.defaultValue = this.el.dataset.defaultValue;\n    const selectedTab = this.el.querySelector<HTMLElement>(\n      `.tabbed-featured-content__tab[data-value=\"${this.defaultValue}\"]`\n    );\n\n    if (!this.defaultValue || !selectedTab) {\n      const firstTab = this.el.querySelector<HTMLElement>(\n        '.tabbed-featured-content__tab'\n      );\n\n      const firstPanel = this.el.querySelector<HTMLElement>(\n        '.tabbed-featured-content__panel'\n      );\n\n      const firstCard = firstPanel?.querySelector<HTMLElement>(\n        '.featured-content-card'\n      );\n\n      if (firstTab && firstPanel && firstCard) {\n        this.defaultValue = firstTab.dataset.value;\n        firstTab.classList.add('active');\n        firstPanel.classList.add('active');\n        this.currentCard = firstCard;\n      }\n    }\n\n    this.panels = this.setTabPanels();\n\n    this.init();\n  }\n\n  setupDefaults() {\n    this.dom = {\n      container: this.el,\n      tabsList: this.el.querySelector<HTMLElement>(\n        '.tabbed-featured-content__tabs-list'\n      ),\n      tabs: this.el.querySelectorAll<HTMLButtonElement>(\n        '.tabbed-featured-content__tab'\n      ),\n      panels: this.el.querySelectorAll<HTMLElement>(\n        '.tabbed-featured-content__panel'\n      ),\n      cards: this.el.querySelectorAll<HTMLElement>('.featured-content-card'),\n      dropdown: this.el.querySelector<HTMLFormElement>('.field__select'),\n      panelsContainer: this.el.querySelector<HTMLElement>(\n        '.tabbed-featured-content__content-wrapper'\n      )\n    };\n  }\n\n  addListeners() {\n    (this.dom.tabs as NodeList).forEach(trigger => {\n      trigger.addEventListener('click', this.handleTabClick.bind(this));\n    });\n\n    (this.dom.dropdown as HTMLFormElement)?.addEventListener(\n      'change',\n      this.handleDropdownChange.bind(this)\n    );\n\n    window.addEventListener(\n      'resize',\n      debounce(this.handleResize.bind(this), 250)\n    );\n  }\n\n  setTabPanels() {\n    let panels = {};\n\n    (this.dom.tabs as NodeListOf<HTMLElement>)?.forEach(tab => {\n      const value = tab.dataset.value;\n      const id = tab.id;\n      const panel = this.el.querySelector<HTMLElement>(\n        `[aria-labelledby=\"${id}\"]`\n      );\n\n      if (value) {\n        panels = { ...panels, [value]: panel };\n      }\n    });\n\n    return panels;\n  }\n\n  setActiveTab(button: HTMLElement) {\n    const activeTab = button;\n    const activePanel = activeTab.dataset.value;\n\n    if (activePanel) {\n      (this.dom.panels as NodeListOf<HTMLElement>).forEach(panel => {\n        panel.classList.add('tabbed-featured-content__panel--hidden');\n        panel.classList.remove('.active');\n      });\n\n      (this.dom.tabs as NodeListOf<HTMLElement>).forEach(tab => {\n        tab.classList.remove('active');\n        tab.blur();\n        tab.ariaSelected = 'false';\n      });\n\n      const currentPanel: HTMLElement =\n        this.panels[activePanel as keyof object];\n\n      currentPanel?.classList.remove('tabbed-featured-content__panel--hidden');\n      currentPanel?.classList.add('active');\n\n      const currentCard = currentPanel.querySelector<HTMLElement>(\n        '.featured-content-card'\n      );\n      currentCard?.focus();\n\n      activeTab.classList.add('active');\n      activeTab.ariaSelected = 'true';\n\n      if (this.dom.dropdown)\n        (this.dom.dropdown as HTMLFormElement).value = activePanel;\n\n      this.calculateOffset(currentCard as HTMLElement);\n      this.getMaxCardHeight();\n\n      setTimeout(() => {\n        this.calculateOffset(currentCard as HTMLElement);\n        this.getMaxCardHeight();\n      });\n    }\n  }\n\n  init() {\n    if (this.defaultValue) {\n      const defaultTab = this.el.querySelector<HTMLElement>(\n        `.tabbed-featured-content__tab[data-value=\"${this.defaultValue}\"]`\n      );\n\n      if (defaultTab) {\n        this.setActiveTab(defaultTab);\n      }\n    } else if (this.dom.tabs) {\n      this.setActiveTab(\n        (this.dom.tabs as NodeListOf<HTMLButtonElement>).item(0)\n      );\n    }\n\n    this.getMaxCardHeight();\n  }\n\n  calculateOffset(card?: HTMLElement) {\n    const currentCard = card || this.currentCard;\n    const height = currentCard?.offsetHeight;\n\n    if (this.dom.container && height) {\n      const container = this.dom.container as HTMLElement;\n      const containerHeight = container.offsetHeight;\n      const offsetHeight = height - containerHeight;\n\n      if (offsetHeight !== 0) {\n        container.style.setProperty(\n          '--tab-content-offset',\n          `${offsetHeight > 0 ? offsetHeight / 2 : 0}px`\n        );\n      }\n    }\n  }\n\n  getMaxCardHeight() {\n    (this.dom.panelsContainer as HTMLElement).classList.add(\n      '.tabbed-featured-content__content-wrapper--hidden'\n    );\n\n    const maxHeight = Math.max(\n      ...Array.from(this.dom.cards as NodeListOf<HTMLElement>).map(\n        panel => panel.offsetHeight\n      )\n    );\n\n    (this.dom.container as HTMLElement).style.setProperty(\n      '--min-featured-card-height',\n      `${maxHeight}px`\n    );\n\n    (this.dom.panelsContainer as HTMLElement).classList.remove(\n      '.tabbed-featured-content__content-wrapper--hidden'\n    );\n  }\n\n  handleTabClick(e: Event) {\n    const target = e.target as HTMLElement;\n    this.setActiveTab(\n      target.classList.contains('tabbed-featured-content__tab')\n        ? target\n        : (target.parentElement as HTMLElement)\n    );\n\n    const global = window as ExtendedWindowType;\n\n    global.dataLayer?.push({\n      event: 'featured_click',\n      event_category: 'tabbed featured content',\n      event_action: this.el.querySelector('h2')?.innerText,\n      event_label: (\n        target.closest('.tabbed-featured-content__tab') as HTMLElement\n      )?.innerText.trim()\n    });\n  }\n\n  handleResize() {\n    this.getMaxCardHeight();\n    this.calculateOffset();\n    setTimeout(() => {\n      this.getMaxCardHeight();\n      this.calculateOffset();\n    });\n  }\n\n  handleDropdownChange(e: Event) {\n    const target = e.target as HTMLFormElement;\n    const value = target.value;\n    const tab = this.el.querySelector<HTMLElement>(\n      `.tabbed-featured-content__tab[data-value=\"${value}\"]`\n    );\n\n    if (tab) {\n      this.setActiveTab(tab);\n\n      const global = window as ExtendedWindowType;\n\n      global.dataLayer?.push({\n        event: 'featured_click',\n        event_category: 'tabbed featured content',\n        event_action: this.el.querySelector('h2')?.innerText,\n        event_label: tab?.innerText.trim()\n      });\n    }\n  }\n}\n\nexport default TabbedFeaturedContent;\n"],"names":["TabbedFeaturedContent","Component","el","__publicField","rovingIndex","selectedTab","firstTab","firstPanel","firstCard","trigger","_a","debounce","panels","tab","value","id","panel","button","activeTab","activePanel","currentPanel","currentCard","defaultTab","card","height","container","containerHeight","offsetHeight","maxHeight","target","_c","_b"],"mappings":"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"}