{"version":3,"file":"tabs.da824fd939a42c7767cc.js","mappings":"85BAAA,IAAMA,EAAW,CACfC,KAAMC,SAASC,cAAc,aAGzBC,EACS,eAkBf,SAASC,EAAiBC,EAAGC,GAC3B,IALmBC,EAKbP,EAAO,EAAIQ,KAAKC,iBAAiB,IAAD,OAAKN,KACrCO,EAAS,EAAIF,KAAKC,iBAAiB,uBACnCE,EAAY,SAElBX,EAAKY,SAAQ,SAACL,EAAIM,GAChBN,EAAGO,UAAUC,OAAOJ,GACpBJ,EAAGS,aAAa,iBAAiB,GACjCT,EAAGS,aAAa,YAAa,GAEzBH,IAAMP,IACRC,EAAGO,UAAUG,IAAIN,GACjBJ,EAAGS,aAAa,iBAAiB,GACjCT,EAAGS,aAAa,WAAY,GAC5BT,EAAGW,QAEP,IAEAR,EAAOE,SAAQ,SAACL,EAAIM,GAClBN,EAAGS,aAAa,SAAU,IAEtBH,IAAMP,GACRC,EAAGY,gBAAgB,SAEvB,IA5BmBZ,EA8BPG,EAAOJ,GA7BnBc,OAAOC,QAAQC,UAAU,CAAC,EAAG,KAAM,GAAF,OAAKF,OAAOG,SAASC,SAAQ,YAAIjB,EAAGkB,aAAa,OA8BpF,CAEA,SAASC,EAAWrB,GAClB,GAAIA,EAAEsB,OAAOb,UAAUc,SAASzB,GAAuB,CACrD,IAAMG,EAAQuB,SAASxB,EAAEsB,OAAOG,QAAQxB,MAAO,IAE/C,IACc,cAAVD,EAAE0B,KAAiC,YAAV1B,EAAE0B,MAAsBzB,EAAQ,IAC/C,eAAVD,EAAE0B,KAAkC,cAAV1B,EAAE0B,MAC5BzB,EAAQuB,SAASrB,KAAKsB,QAAQE,MAAQ,EAAG,IAC3C,CACA3B,EAAE4B,iBACF,IAAMC,EAAwB9B,EAAiB+B,KAAK3B,KAAMH,EAtDhE,SAAmBC,EAAOyB,GAQxB,MAPa,CACXK,QAAS9B,EAAQ,EACjB+B,UAAW/B,EAAQ,EACnBgC,UAAWhC,EAAQ,EACnBiC,WAAYjC,EAAQ,GAGVyB,EACd,CA6CmES,CAAUlC,EAAOD,EAAE0B,MAChFG,GACF,CACF,CACF,CAEA,SAASO,EAAapC,GACpB,GAAIA,EAAEsB,OAAOb,UAAUc,SAASzB,KAA0BE,EAAEsB,OAAOb,UAAUc,SAAS,UAAW,CAC/F,IAAMtB,EAAQuB,SAASxB,EAAEsB,OAAOG,QAAQxB,MAAO,IACjBF,EAAiB+B,KAAK3B,KAAMH,EAAGC,EAC7D4B,EACF,CACF,CAmBC,MAPD,WACMnC,EAASC,QAXf,WACE,GAA6B,KAAzBoB,OAAOG,SAASmB,KAAa,CAC/B,IAAMC,EAAM1C,SAASC,cAAckB,OAAOG,SAASmB,MAC7CE,EAAYD,EAAIE,QAAQ,YACxBvC,EAAQuB,SAASc,EAAIb,QAAQxB,MAAO,IACZF,EAAiB+B,KAAKS,EAAW,KAAMtC,EACrE4B,EACF,CACF,CAIIY,GAEA/C,EAASC,KAAK+C,iBAAiB,QAASN,GACxC1C,EAASC,KAAK+C,iBAAiB,UAAWrB,GAE9C,EAEmB,W","sources":["webpack://jcb.com/./src/js/components/tabs.js"],"sourcesContent":["const elements = {\r\n  tabs: document.querySelector('.js-tabs'),\r\n};\r\n\r\nconst settings = {\r\n  tabCssClass: 'js-tabs__tab',\r\n};\r\n\r\nfunction calcIndex(index, key) {\r\n  const calc = {\r\n    ArrowUp: index - 1,\r\n    ArrowLeft: index - 1,\r\n    ArrowDown: index + 1,\r\n    ArrowRight: index + 1,\r\n  };\r\n\r\n  return calc[key];\r\n}\r\n\r\nfunction pushHistory(el) {\r\n  window.history.pushState({}, null, `${window.location.pathname}#${el.getAttribute('id')}`);\r\n}\r\n\r\nfunction toggleVisibility(e, index) {\r\n  const tabs = [...this.querySelectorAll(`.${settings.tabCssClass}`)];\r\n  const panels = [...this.querySelectorAll('.js-tabs__tabpanel')];\r\n  const activeCss = 'active';\r\n\r\n  tabs.forEach((el, i) => {\r\n    el.classList.remove(activeCss);\r\n    el.setAttribute('aria-selected', false);\r\n    el.setAttribute('tabindex', -1);\r\n\r\n    if (i === index) {\r\n      el.classList.add(activeCss);\r\n      el.setAttribute('aria-selected', true);\r\n      el.setAttribute('tabindex', 0);\r\n      el.focus();\r\n    }\r\n  });\r\n\r\n  panels.forEach((el, i) => {\r\n    el.setAttribute('hidden', '');\r\n\r\n    if (i === index) {\r\n      el.removeAttribute('hidden');\r\n    }\r\n  });\r\n\r\n  pushHistory(panels[index]);\r\n}\r\n\r\nfunction keyHandler(e) {\r\n  if (e.target.classList.contains(settings.tabCssClass)) {\r\n    const index = parseInt(e.target.dataset.index, 10);\r\n\r\n    if (\r\n      ((e.key === 'ArrowLeft' || e.key === 'ArrowUp') && index > 0) ||\r\n      ((e.key === 'ArrowRight' || e.key === 'ArrowDown') &&\r\n        index < parseInt(this.dataset.count - 1, 10))\r\n    ) {\r\n      e.preventDefault();\r\n      const boundToggleVisibility = toggleVisibility.bind(this, e, calcIndex(index, e.key));\r\n      boundToggleVisibility();\r\n    }\r\n  }\r\n}\r\n\r\nfunction clickHandler(e) {\r\n  if (e.target.classList.contains(settings.tabCssClass) && !e.target.classList.contains('active')) {\r\n    const index = parseInt(e.target.dataset.index, 10);\r\n    const boundToggleVisibility = toggleVisibility.bind(this, e, index);\r\n    boundToggleVisibility();\r\n  }\r\n}\r\n\r\nfunction checkHash() {\r\n  if (window.location.hash !== '') {\r\n    const tab = document.querySelector(window.location.hash);\r\n    const container = tab.closest('.js-tabs');\r\n    const index = parseInt(tab.dataset.index, 10);\r\n    const boundToggleVisibility = toggleVisibility.bind(container, null, index);\r\n    boundToggleVisibility();\r\n  }\r\n}\r\n\r\nfunction init() {\r\n  if (elements.tabs) {\r\n    checkHash();\r\n\r\n    elements.tabs.addEventListener('click', clickHandler);\r\n    elements.tabs.addEventListener('keydown', keyHandler);\r\n  }\r\n}\r\n\r\nexport default init;\r\n"],"names":["elements","tabs","document","querySelector","settings","toggleVisibility","e","index","el","this","querySelectorAll","panels","activeCss","forEach","i","classList","remove","setAttribute","add","focus","removeAttribute","window","history","pushState","location","pathname","getAttribute","keyHandler","target","contains","parseInt","dataset","key","count","preventDefault","boundToggleVisibility","bind","ArrowUp","ArrowLeft","ArrowDown","ArrowRight","calcIndex","clickHandler","hash","tab","container","closest","checkHash","addEventListener"],"sourceRoot":""}