{"version":3,"sources":["webpack:///./src/js/modules/tabs.js"],"names":["Module","Component","setupDefaults","identifier","this","el","dataset","dom","$tabs","_$$","$panels","isVertical","urlParams","URLSearchParams","window","location","search","tabParam","get","activateTab","document","getElementById","addListeners","_on","onClick","bind","onKeyDown","onKeyUp","onActivatetab","onReset","e","target","keyCode","KEYS","END","preventDefault","length","HOME","don","UP","DOWN","LEFT","RIGHT","switchTabOnArrowPress","tab","detail","id","setFocus","deactivateTabs","setAttribute","removeAttribute","controls","getAttribute","focus","event","CustomEvent","dispatchEvent","forEach","panel","KEYS_DIRECTION","index","parseInt"],"mappings":"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","file":"86.18fba9.js","sourcesContent":["import { Component } from '@verndale/core';\nimport { KEYS, KEYS_DIRECTION } from '../constants';\n\nclass Module extends Component {\n  setupDefaults() {\n    const identifier = this.el.dataset.identifier;\n\n    this.dom = {\n      $tabs: this.el._$$(`[data-identifier=\"${identifier}\"][role=\"tab\"]`),\n      $panels: this.el._$$(`[data-identifier=\"${identifier}\"][role=\"tabpanel\"]`)\n    };\n\n    this.isVertical = this.el.dataset.isVertical === 'true';\n\n    this.urlParams = new URLSearchParams(window.location.search);\n    this.tabParam = this.urlParams.get('tab');\n    if (this.tabParam) {\n      this.activateTab(document.getElementById(this.tabParam), false);\n    }\n  }\n\n  addListeners() {\n    this.dom.$tabs._on('click', this.onClick.bind(this));\n    this.dom.$tabs._on('keydown', this.onKeyDown.bind(this));\n    this.dom.$tabs._on('keyup', this.onKeyUp.bind(this));\n    this.el._on('activatetab', this.onActivatetab.bind(this));\n    this.el._on('reset', this.onReset.bind(this));\n  }\n\n  onClick(e) {\n    this.activateTab(e.target, false);\n  }\n\n  onKeyDown(e) {\n    switch (e.keyCode) {\n    case KEYS.END:\n      e.preventDefault();\n      this.activateTab(this.dom.$tabs[this.dom.$tabs.length - 1]);\n      break;\n    case KEYS.HOME:\n      e.preventDefault();\n      this.activateTab(this.don.$tabs[0]);\n      break;\n    case KEYS.UP:\n    case KEYS.DOWN:\n      if (this.isVertical) e.preventDefault();\n      break;\n    }\n  }\n\n  onKeyUp(e) {\n    switch (e.keyCode) {\n    case KEYS.LEFT:\n    case KEYS.RIGHT:\n      if (!this.isVertical) this.switchTabOnArrowPress(e);\n      break;\n    case KEYS.UP:\n    case KEYS.DOWN:\n      if (this.isVertical) this.switchTabOnArrowPress(e);\n      break;\n    }\n  }\n\n  onActivatetab(e) {\n    const tab = document.getElementById(e.detail.id);\n    this.activateTab(tab, !!e.detail.setFocus);\n  }\n\n  onReset() {\n    this.deactivateTabs();\n    this.dom.$tabs[0].setAttribute('tabindex', '0');\n  }\n\n  activateTab(tab, setFocus = true) {\n    this.deactivateTabs();\n    tab.removeAttribute('tabindex');\n    tab.setAttribute('aria-selected', 'true');\n    const controls = tab.getAttribute('aria-controls');\n    document.getElementById(controls).removeAttribute('aria-hidden');\n    if (setFocus) {\n      tab.focus();\n    }\n    const event = new CustomEvent('tabchange', { detail: { id: tab.id } });\n    this.el.dispatchEvent(event);\n  }\n\n  deactivateTabs() {\n    this.dom.$tabs.forEach(tab => {\n      tab.setAttribute('tabindex', '-1');\n      tab.setAttribute('aria-selected', 'false');\n    });\n\n    this.dom.$panels.forEach(panel => {\n      panel.setAttribute('aria-hidden', 'true');\n    });\n  }\n\n  switchTabOnArrowPress(e) {\n    if (!KEYS_DIRECTION[e.keyCode]) return;\n    if (typeof e.target.dataset.index === 'undefined') return;\n    const index = parseInt(e.target.dataset.index, 10);\n\n    if (this.dom.$tabs[index + KEYS_DIRECTION[e.keyCode]]) {\n      this.activateTab(this.dom.$tabs[index + KEYS_DIRECTION[e.keyCode]], true);\n      return;\n    }\n\n    if (this.isVertical) {\n      if (e.keyCode === KEYS.UP) {\n        this.activateTab(this.dom.$tabs[this.dom.$tabs.length - 1], true);\n      } else if (e.keyCode === KEYS.DOWN) {\n        this.activateTab(this.dom.$tabs[0], true);\n      }\n    } else {\n      if (e.keyCode === KEYS.LEFT) {\n        this.activateTab(this.dom.$tabs[this.dom.$tabs.length - 1], true);\n      } else if (e.keyCode === KEYS.RIGHT) {\n        this.activateTab(this.dom.$tabs[0], true);\n      }\n    }\n  }\n}\n\nexport default Module;\n"],"sourceRoot":""}