https://100thieves.com/cdn/shop/t/725/assets/-component-tabs.min.js?v=86814929913098355601776706983

1// src/tabs.js
2var HHTabs = class extends HTMLElement {
3  constructor() {
4    super();
5    this.tabs = [...this.querySelectorAll(".js-tab")];
6    this.tabList = this.querySelector(".js-tablist");
7    this.tabPanels = [...this.querySelectorAll(".js-tabpanel")];
8    this.mobileOnly = this.dataset.mobileOnly;
9    this.tabs.forEach((tab) => {
10      tab.addEventListener("click", this.showTabPanel);
11    });
12    this.tabList.addEventListener("keydown", (e) => {
13      this.onKeydown(e);
14    });
15    if (this.mobileOnly) {
16      this.resizeFunction(true);
17      window.addEventListener("resize", () => this.resizeFunction());
18    }
19  }
20  showTabPanel = (event) => {
21    var target = event.target;
22    this.tabPanels.forEach((tabPanel) => {
23      tabPanel.classList.add("hidden");
24      tabPanel.removeAttribute("tabindex");
25      tabPanel.setAttribute("aria-hidden", true);
26    });
27    this.tabs.forEach((tab) => {
28      tab.setAttribute("aria-selected", "false");
29      tab.classList.remove("active");
30      tab.closest("hh-button-wrapper")?.setAttribute("theme", "secondary");
31    });
32    var tabPanelToOpen = document.getElementById(
33      target.getAttribute("aria-controls")
34    );
35    tabPanelToOpen.classList.remove("hidden");
36    tabPanelToOpen.setAttribute("tabindex", -1);
37    tabPanelToOpen.setAttribute("aria-hidden", false);
38    tabPanelToOpen.focus();
39    target.setAttribute("aria-selected", "true");
40    target.classList.add("active");
41    target.closest("hh-button-wrapper")?.setAttribute("theme", "primary");
42  };
43  onKeydown = (e) => {
44    if (e.keyCode === 39 || e.keyCode === 37) {
45      var selected = document.activeElement;
46      if (e.keyCode === 39) {
47        if (selected.nextElementSibling) {
48          selected.nextElementSibling.click();
49          selected.nextElementSibling.focus();
50        }
51      } else if (e.keyCode === 37) {
52        if (selected.previousElementSibling) {
53          selected.previousElementSibling.click();
54          selected.previousElementSibling.focus();
55        }
56      }
57    }
58  };
59  resizeFunction = (isFirst) => {
60    const mobile = window.matchMedia("(max-width: 989px)").matches;
61    if (mobile && isFirst) {
62      return;
63    }
64    mobile ? (this.tabList.classList.remove("hidden"), this.tabList.setAttribute("aria-hidden", false)) : (this.tabList.classList.add("hidden"), this.tabList.setAttribute("aria-hidden", true));
65    this.tabPanels.forEach((tabPanel, i) => {
66      const tabId = tabPanel.id.split("-")[0];
67      mobile ? (tabPanel.classList.add("hidden"), tabPanel.setAttribute("aria-hidden", true), i == 0 && tabPanel.classList.remove("hidden"), i == 0 && tabPanel.setAttribute("aria-hidden", false), tabPanel.setAttribute("role", "tabpanel"), tabPanel.setAttribute("aria-labelledby", `${tabId}-tab`)) : (tabPanel.classList.remove("hidden"), tabPanel.setAttribute("aria-hidden", false), tabPanel.removeAttribute("role"), tabPanel.removeAttribute("aria-labelledby"));
68    });

69    this.tabs.forEach((tab, i) => {
70      if (mobile) {
71        tab.classList.remove("active");
72        i == 0 && tab.classList.add("active");
73      }
74    });
75  };
76};
77customElements.define("hh-tabs", HHTabs);
78//# sourceMappingURL=-component-tabs.min.js.map