{"version":3,"file":"tabbed-container-da17f357.js","sources":["../../../../src/scripts/modules/tabbed-container.ts"],"sourcesContent":["import { Component } from '@verndale/core';\nimport { rovingIndex } from 'roving-ux';\nimport { dispatchChangeTab } from '../coveo/modules/contractor-listing/helpers';\n\nclass TabbedContainer extends Component {\n  private defaultValue: string | null;\n  private panels: object;\n  private firstLoad: boolean;\n\n  constructor(el: HTMLElement) {\n    super(el);\n    this.defaultValue = this.el.dataset.defaultValue || null;\n    this.panels = this.setTabPanels();\n    this.firstLoad = true;\n  }\n\n  setupDefaults() {\n    this.dom = {\n      container: this.el,\n      tabsList: this.el.querySelector<HTMLElement>(\n        '.tabbed-container__tabs-list'\n      ),\n      tabs: this.el.querySelectorAll<HTMLButtonElement>(\n        '.tabbed-container__tab-btn'\n      ),\n      panels: this.el.querySelectorAll<HTMLElement>('.tabbed-container__panel'),\n      dropdown: this.el.querySelector<HTMLFormElement>('.field__select'),\n      panelsContainer: this.el.querySelector<HTMLElement>(\n        '.tabbed-container__content-wrapper'\n      )\n    };\n\n    rovingIndex({\n      element: this.dom.tabsList,\n      target: '.tabbed-container__tab-btn'\n    });\n\n    this.defaultValue = this.el.dataset.defaultValue || null;\n    this.panels = this.setTabPanels();\n\n    this.init();\n  }\n\n  addListeners() {\n    window.addEventListener('documentLandingChange', e =>\n      this.handlePersonaCommercial(e as CustomEvent)\n    );\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\n  init() {\n    if (this.defaultValue) {\n      const defaultTab = this.el.querySelector<HTMLElement>(\n        `.tabbed-container__tab-btn[data-value=\"${this.defaultValue}\"]`\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\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-container__panel--hidden');\n        panel.classList.remove('.active');\n        panel.tabIndex = -1;\n      });\n\n      (this.dom.tabs as NodeListOf<HTMLElement>).forEach(tab => {\n        tab.classList.remove('active');\n        tab.ariaSelected = 'false';\n      });\n\n      const currentPanel: HTMLElement =\n        this.panels[activePanel as keyof object];\n\n      currentPanel?.classList.remove('tabbed-container__panel--hidden');\n      currentPanel?.classList.add('active');\n      currentPanel.tabIndex = 0;\n\n      activeTab.classList.add('active');\n      activeTab.setAttribute('aria-selected', 'true');\n\n      if (this.firstLoad) {\n        activeTab.focus();\n        this.firstLoad = false;\n      }\n\n      if (this.dom.dropdown)\n        (this.dom.dropdown as HTMLFormElement).value = activePanel;\n    }\n  }\n\n  handlePersonaCommercial(e: CustomEvent) {\n    if (e.detail) {\n      this.setActiveTab(\n        (this.dom.tabs as NodeListOf<HTMLButtonElement>).item(1)\n      );\n    } else {\n      this.setActiveTab(\n        (this.dom.tabs as NodeListOf<HTMLButtonElement>).item(0)\n      );\n    }\n  }\n\n  handleTabClick(e: Event) {\n    const target = e.target as HTMLElement;\n    if (this.el.closest('.city-listing-masthead')) {\n      dispatchChangeTab(target.innerText);\n    }\n    this.setActiveTab(target);\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-container__tab-btn[data-value=\"${value}\"]`\n    );\n    if (this.el.closest('.city-listing-masthead') && tab) {\n      dispatchChangeTab(tab.innerText?.trim());\n    }\n    if (tab) {\n      this.setActiveTab(tab);\n    }\n  }\n}\n\nexport default TabbedContainer;\n"],"names":["TabbedContainer","Component","el","__publicField","rovingIndex","trigger","_a","defaultTab","panels","tab","value","id","panel","button","activeTab","activePanel","currentPanel","e","target","dispatchChangeTab"],"mappings":"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"}