{"version":3,"file":"tab-row-BeXxRFC6.js","sources":["../../../../src/scripts/modules/tab-row.ts"],"sourcesContent":["import { Component } from '@verndale/core';\n\nclass Module extends Component {\n  private isInit: boolean = true;\n  private activeTabId: string = '';\n  private tabs: HTMLElement[] = [];\n\n  setupDefaults() {\n    this.dom = {\n      tabContent: this.el.querySelectorAll('.tab-row__content'),\n      select: this.el.querySelector<HTMLElement>('.tab-row__select'),\n      buttonsContainer: this.el.querySelector<HTMLElement>('.tab-row__buttons'),\n      buttonFlex: this.el.querySelector<HTMLElement>('.tab-row__buttons-wrapper')\n    };\n  }\n\n  constructor(el: HTMLElement) {\n    super(el);\n    this.initial();\n  }\n\n  addListeners() {\n    this.el.addEventListener('click', e => this.handleClick(e));\n    (this.dom.select as HTMLElement).addEventListener('change', e => this.handleChange(e));\n  }\n\n  initial() {\n    (this.dom.select as HTMLElement).innerHTML = '';\n    (this.dom.buttonFlex as HTMLElement).innerHTML = '';\n\n    const selectOptions = (this.dom.select as HTMLElement).cloneNode(true) as HTMLElement;\n    const buttons = (this.dom.buttonFlex as HTMLElement).cloneNode(true) as HTMLElement;\n    const tabContents = Array.from(this.dom.tabContent as NodeListOf<HTMLElement>);\n    tabContents.forEach(tab => {\n      const selectOption = document.createElement('option');\n      selectOption.value = tab.getAttribute('id') || '';\n      selectOption.textContent = tab.dataset.tabName || '';\n      selectOptions.appendChild(selectOption);\n\n      const button = document.createElement('button');\n      button.classList.add('tab-row__tab-btn');\n      button.setAttribute('role', 'tab');\n      button.setAttribute('aria-selected', 'false');\n      button.setAttribute('aria-controls', `#tab-${tab.getAttribute('id')}`);\n      button.setAttribute('id', tab.getAttribute('id') || '');\n      button.textContent = tab.dataset.tabName || '';\n\n      buttons.appendChild(button);\n    });\n\n    (this.dom.select as HTMLElement).innerHTML = selectOptions.innerHTML;\n    (this.dom.buttonFlex as HTMLElement).innerHTML = buttons.innerHTML;\n    this.dom.options = (this.dom.select as HTMLElement).querySelectorAll('option');\n\n    this.tabs = Array.from(this.el.querySelectorAll('.tab-row__tab-btn'));\n\n    const urlTab = new URLSearchParams(window.location.search).get('tab');\n    if (urlTab) {\n      this.activateTab(this.tabs.findIndex(tab => tab.id === urlTab));\n      this.activeTabId = urlTab;\n      this.updateUrl();\n    } else {\n      this.activateTab(0);\n      this.activeTabId = this.tabs[0].getAttribute('id') || '';\n    }\n  }\n\n  updateUrl() {\n    const url = new URL(window.location.href);\n    url.searchParams.set('tab', this.activeTabId);\n    window.history.pushState({}, '', url.toString());\n  }\n\n  tabChange(selectedId: string) {\n    if (selectedId !== this.activeTabId) {\n      this.deactivateTab(this.tabs.findIndex(tab => tab.id === this.activeTabId));\n      this.activateTab(this.tabs.findIndex(tab => tab.id === selectedId));\n      this.activeTabId = selectedId;\n      this.updateUrl();\n    }\n  }\n\n  deactivateTab(tabIndex: number) {\n    if (tabIndex < 0) return;\n    this.tabs[tabIndex].classList.remove('tab-row__tab-btn--selected');\n    this.tabs[tabIndex].removeAttribute('tabindex');\n    this.tabs[tabIndex].setAttribute('aria-selected', 'false');\n    (this.dom.tabContent as NodeListOf<HTMLElement>)?.[tabIndex].classList.remove(\n      'tab-row__content--selected'\n    );\n    (this.dom.options as NodeListOf<HTMLElement>)?.[tabIndex].setAttribute('selected', 'false');\n  }\n\n  activateTab(tabIndex: number) {\n    if (tabIndex < 0) return;\n\n    this.tabs[tabIndex].classList.add('tab-row__tab-btn--selected');\n    this.tabs[tabIndex].setAttribute('tabindex', '-1');\n    this.tabs[tabIndex].setAttribute('aria-selected', 'true');\n    (this.dom.tabContent as NodeListOf<HTMLElement>)?.[tabIndex].classList.add(\n      'tab-row__content--selected'\n    );\n    (this.dom.options as NodeListOf<HTMLElement>)?.[tabIndex].setAttribute('selected', 'true');\n\n    if (!this.isInit) this.tabs[tabIndex].focus();\n\n    this.isInit = false;\n  }\n\n  handleClick(e: Event) {\n    if ((e.target as HTMLElement)?.classList.contains('tab-row__tab-btn')) {\n      this.tabChange((e.target as HTMLElement).id);\n    }\n  }\n\n  handleChange(e: Event) {\n    this.tabChange((e.target as HTMLSelectElement)?.value);\n  }\n}\n\nexport default Module;\n"],"names":["Module","Component","el","__publicField","e","selectOptions","buttons","tab","selectOption","button","urlTab","url","selectedId","tabIndex","_a","_b"],"mappings":"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"}