{"version":3,"file":"javascripts/chunks/0448ae39160815070da5.tabs.js","mappings":"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","sources":["webpack:///./components/tabs/javascripts/tabs.js","webpack:///./javascripts/dom/select.js","webpack:///./javascripts/helpers/baseModule.js"],"sourcesContent":["import BaseModule from '../../../javascripts/helpers/baseModule';\n\n// Tabs module based on the wai-aria best practices https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html\nexport default class Tabs extends BaseModule {\n  constructor(element) {\n    super(element, element.getAttribute('data-js-module'));\n\n    this.getElements([\n      { id: 'tabs', selector: 'tab' },\n      { id: 'panels', selector: 'panel' },\n      { id: 'list', selector: 'list' }\n    ]);\n\n    this.bindControlEvents();\n  }\n\n  static activateTab(tab) {\n    const tabControls = tab.getAttribute('aria-controls');\n    document.getElementById(tabControls).removeAttribute('hidden');\n\n    tab.removeAttribute('tabindex');\n    tab.setAttribute('aria-selected', 'true');\n  }\n\n  deactivateTabs() {\n    this.elements.tabs.forEach((tab, tabIndex) => {\n      this.elements.panels[tabIndex].setAttribute('hidden', 'hidden');\n      tab.setAttribute('tabindex', '-1');\n      tab.setAttribute('aria-selected', 'false');\n    });\n  }\n\n  bindControlEvents() {\n    this.elements.tabs.forEach((tab, tabIndex) => {\n      tab.addEventListener('click', (event) => {\n        event.preventDefault();\n\n        const clickTarget = event.currentTarget;\n\n        this.deactivateTabs();\n        this.constructor.activateTab(clickTarget);\n      });\n\n      // Handle keydown on tabs\n      tab.addEventListener('keydown', (event) => {\n        event.preventDefault();\n\n        const firstTab = this.elements.tabs[0];\n        const lastTab = this.elements.tabs[this.elements.tabs.length - 1];\n\n        switch (event.key) {\n          // When focus is on an tab, moves focus to the last tab.\n          case 'End': {\n            event.preventDefault();\n\n            lastTab.focus();\n            this.deactivateTabs();\n            this.constructor.activateTab(lastTab);\n            break;\n          }\n          // When focus is on an tab, moves focus to the first tab.\n          case 'Home': {\n            event.preventDefault();\n\n            firstTab.focus();\n            this.deactivateTabs();\n            this.constructor.activateTab(firstTab);\n            break;\n          }\n          // Up and down are in keydown\n          // because we need to prevent page scroll >:)\n          case 'ArrowUp':\n          case 'ArrowDown': {\n            this.determineOrientation(event, tabIndex);\n            break;\n          }\n          default: {\n            break;\n          }\n        }\n      });\n\n      // Handle keyup on tabs\n      tab.addEventListener('keyup', (event) => {\n        event.preventDefault();\n\n        switch (event.key) {\n          case 'ArrowRight':\n          case 'ArrowLeft': {\n            this.determineOrientation(event, tabIndex);\n            break;\n          }\n          default: {\n            break;\n          }\n        }\n      });\n    });\n  }\n\n  // When a lists aria-orientation is set to vertical,\n  // only up and down arrow should function.\n  // In all other cases only left and right arrow function.\n  determineOrientation(event, tabIndex) {\n    const { key } = event;\n    const vertical =\n      this.elements.list.getAttribute('aria-orientation') === 'vertical';\n\n    if (vertical) {\n      if (key === 'ArrowUp' || key === 'ArrowDown') {\n        event.preventDefault();\n        this.switchTabOnArrowPress(key, tabIndex);\n      }\n    } else if (key === 'ArrowLeft' || key === 'ArrowRight') {\n      event.preventDefault();\n      this.switchTabOnArrowPress(key, tabIndex);\n    }\n  }\n\n  // Either focus the next, previous, first, or last tab\n  // depening on key pressed\n  switchTabOnArrowPress(key, tabIndex) {\n    const tabCount = this.elements.tabs.length;\n\n    switch (key) {\n      case 'ArrowUp':\n      case 'ArrowRight': {\n        const newIndex = (tabIndex + tabCount + 1) % tabCount;\n        const nextTab = this.elements.tabs[newIndex];\n        nextTab.focus();\n        this.deactivateTabs();\n        this.constructor.activateTab(nextTab);\n        break;\n      }\n      case 'ArrowDown':\n      case 'ArrowLeft': {\n        const newIndex = (tabIndex + tabCount - 1) % tabCount;\n        const previousTab = this.elements.tabs[newIndex];\n        previousTab.focus();\n        this.deactivateTabs();\n        this.constructor.activateTab(previousTab);\n        break;\n      }\n      default: {\n        break;\n      }\n    }\n  }\n}\n","/**\n * This methods selects Elements from a specific context by a selector\n * @param {string} selector Selector of the element to find\n * @param {Element|HTMLDocument} [element] Context of the selectable\n * @returns {Array<Element>} Am array with selected Elements\n */\nexport default (selector, element = window.document) =>\n  [].slice.call(element.querySelectorAll(selector));\n","import select from '../dom/select';\n\nclass BaseModule {\n  constructor(element, id) {\n    this.id = id;\n    this.elements = {\n      self: element\n    };\n\n    this.setInitialized();\n  }\n\n  setInitialized() {\n    if (this.elements.self) {\n      this.elements.self.setAttribute('data-js-module-initialized', true);\n    }\n  }\n\n  setUnInitialized() {\n    if (this.elements.self) {\n      this.elements.self.removeAttribute('data-js-module-initialized');\n    }\n  }\n\n  /**\n   * Selects DOMElements of a module with a specific data attribute (`data-js-element=\"${module}__${selector}\"`)\n   * Receives an object where the id param is the key in the elements cache\n   * The selector param of the config is the selector part in the query-selector described above\n   * @param {Object} config Configuration object in a key value format\n   * @returns {void}\n   */\n  getElements(config) {\n    const elementsConfig = config.map((elementConfig) => ({\n      ...elementConfig,\n      selector: `${this.id}__${elementConfig.selector}`\n    }));\n\n    const domElements = select('[data-js-element]', this.elements.self);\n\n    for (let i = 0; i < domElements.length; i += 1) {\n      const domElement = domElements[i];\n      const elementConfigCandidates = elementsConfig.filter(\n        (singleConfig) =>\n          domElement.getAttribute('data-js-element') === singleConfig.selector\n      );\n\n      const [elementConfig] = elementConfigCandidates;\n\n      if (elementConfig) {\n        if (typeof this.elements[elementConfig.id] === 'undefined') {\n          this.elements[elementConfig.id] = domElement;\n        } else {\n          if (typeof this.elements[elementConfig.id].push === 'undefined') {\n            this.elements[elementConfig.id] = [this.elements[elementConfig.id]];\n          }\n          this.elements[elementConfig.id].push(domElement);\n        }\n      }\n    }\n\n    /*\n     * Append a attribute \"asList\" to each element/s in this.elements\n     * which is always an array no matter if element/s is an array\n     * or a single HTMLElement\n     */\n\n    const asList = (obj) => (typeof obj.push === 'undefined' ? [obj] : obj);\n    Object.values(this.elements).forEach((obj) => {\n      obj.asList = asList(obj); // eslint-disable-line no-param-reassign\n    });\n  }\n}\n\nexport default BaseModule;\n"],"names":["Tabs","element","getAttribute","getElements","id","selector","bindControlEvents","tab","tabControls","document","getElementById","removeAttribute","setAttribute","this","elements","tabs","forEach","tabIndex","panels","addEventListener","event","preventDefault","clickTarget","currentTarget","deactivateTabs","constructor","activateTab","firstTab","lastTab","length","key","focus","determineOrientation","list","switchTabOnArrowPress","tabCount","newIndex","nextTab","previousTab","BaseModule","window","slice","call","querySelectorAll","self","setInitialized","config","elementsConfig","map","elementConfig","domElements","select","i","domElement","filter","singleConfig","push","Object","values","obj","asList"],"sourceRoot":""}