@itcenteratunihelsinki/huds-lib 0.8.73 → 0.8.75

package/dist/collection/components/hy-tabs/hy-tabs.js

@@ -1,409 +1,408 @@
 import { h } from "@stencil/core";
 // For easy reference
 let keys = {
-  end: 35,
-  home: 36,
-  left: 37,
-  up: 38,
-  right: 39,
-  down: 40,
-  delete: 46,
+    end: 35,
+    home: 36,
+    left: 37,
+    up: 38,
+    right: 39,
+    down: 40,
+    delete: 46,
 };
 // Add or substract depending on key pressed
 let direction = {
-  37: -1,
-  38: -1,
-  39: 1,
-  40: 1,
+    37: -1,
+    38: -1,
+    39: 1,
+    40: 1,
 };
 let checkTimeout;
 let focusTimeout;
 let scrollTimeout;
 export class HyTabs {
-  constructor() {
-    this.tabId = undefined;
-    this.tabListLabel = "";
-    this.focusTimeoutCleared = true;
-    this.tabButtonTitles = undefined;
-    this.tabPanelsState = undefined;
-    this.tabButtons = undefined;
-    this.tabList = undefined;
-    this.headerstyle = "common";
-  }
-  componentWillLoad() {
-    const tabItems = this.el.querySelectorAll("hy-tabs-item");
-    if (tabItems) {
-      this.tabButtonTitles = Array.from(tabItems).map((panel) => {
-        return {
-          title: panel.getAttribute("tab-title"),
-          id: panel.getAttribute("tab-title").toLowerCase().replace(/\W/g, "-"),
-        };
-      });
-    }
-  }
-  componentDidLoad() {
-    let hyMainDiv = this.el.closest(".hy-main");
-    if (hyMainDiv) {
-      if (!hyMainDiv.classList.contains("with-sidebar")) {
-        this.headerstyle = "large";
-      }
+    constructor() {
+        this.tabId = undefined;
+        this.tabListLabel = "";
+        this.focusTimeoutCleared = true;
+        this.tabButtonTitles = undefined;
+        this.tabPanelsState = undefined;
+        this.tabButtons = undefined;
+        this.tabList = undefined;
+        this.headerstyle = "common";
     }
-    const tabContainer = this.el.querySelector(".hy-tabs__container");
-    if (tabContainer) {
-      this.generateArrays(tabContainer);
-      const leftButton = this.el.querySelectorAll(".hy-tab-scroll__left")[0];
-      const rightButton = this.el.querySelectorAll(".hy-tab-scroll__right")[0];
-      const tabList = this.tabList;
-      this.checkScrollHidden(tabList, leftButton, rightButton);
-      tabList.addEventListener("scroll", () => {
-        scrollTimeout = setTimeout(() => {
-          window.clearTimeout(scrollTimeout);
-          this.checkScrollHidden(tabList, leftButton, rightButton);
-        }, 250);
-      }, false);
-      if (tabList.offSetWidth <= document.body.scrollWidth) {
-        leftButton.classList.add("is-hidden");
-        rightButton.classList.add("is-hidden");
-      }
-      const oneTabWidth = 250;
-      rightButton.addEventListener("click", (e) => {
-        e.preventDefault();
-        rightButton.classList.add("is-disabled");
-        tabList.scrollBy({
-          top: 0,
-          left: +oneTabWidth,
-          behavior: "smooth",
-        });
-        checkTimeout = window.setTimeout(() => {
-          window.clearTimeout(checkTimeout);
-          this.checkScrollHidden(tabList, leftButton, rightButton);
-          rightButton.classList.remove("is-disabled");
-        }, 250);
-      });
-      leftButton.addEventListener("click", (e) => {
-        e.preventDefault();
-        leftButton.classList.add("is-disabled");
-        tabList.scrollBy({
-          top: 0,
-          left: -oneTabWidth,
-          behavior: "smooth",
-        });
-        checkTimeout = window.setTimeout(() => {
-          window.clearTimeout(checkTimeout);
-          this.checkScrollHidden(tabList, leftButton, rightButton);
-          leftButton.classList.remove("is-disabled");
-        }, 250);
-      });
+    componentWillLoad() {
+        const tabItems = this.el.querySelectorAll("hy-tabs-item");
+        if (tabItems) {
+            this.tabButtonTitles = Array.from(tabItems).map((panel) => {
+                return {
+                    title: panel.getAttribute("tab-title"),
+                    id: panel.getAttribute("tab-title").toLowerCase().replace(/\W/g, "-"),
+                };
+            });
+        }
     }
-  }
-  generateArrays(tc) {
-    this.tabList = tc.querySelectorAll('[role="tablist"]')[0];
-    this.tabButtons = tc.querySelectorAll('[role="tab"]');
-    this.tabPanelsState = [tc.querySelectorAll('[role="tabpanel"]')];
-    if (this.tabButtons.length > 0) {
-      this.addListeners(this.tabButtons, 1);
-      this.activateTab(this.tabButtons[0], true);
+    componentDidLoad() {
+        let hyMainDiv = this.el.closest(".hy-main");
+        if (hyMainDiv) {
+            if (!hyMainDiv.classList.contains("with-sidebar")) {
+                this.headerstyle = "large";
+            }
+        }
+        const tabContainer = this.el.querySelector(".hy-tabs__container");
+        if (tabContainer) {
+            this.generateArrays(tabContainer);
+            const leftButton = this.el.querySelectorAll(".hy-tab-scroll__left")[0];
+            const rightButton = this.el.querySelectorAll(".hy-tab-scroll__right")[0];
+            const tabList = this.tabList;
+            this.checkScrollHidden(tabList, leftButton, rightButton);
+            tabList.addEventListener("scroll", () => {
+                scrollTimeout = setTimeout(() => {
+                    window.clearTimeout(scrollTimeout);
+                    this.checkScrollHidden(tabList, leftButton, rightButton);
+                }, 250);
+            }, false);
+            if (tabList.offSetWidth <= document.body.scrollWidth) {
+                leftButton.classList.add("is-hidden");
+                rightButton.classList.add("is-hidden");
+            }
+            const oneTabWidth = 250;
+            rightButton.addEventListener("click", (e) => {
+                e.preventDefault();
+                rightButton.classList.add("is-disabled");
+                tabList.scrollBy({
+                    top: 0,
+                    left: +oneTabWidth,
+                    behavior: "smooth",
+                });
+                checkTimeout = window.setTimeout(() => {
+                    window.clearTimeout(checkTimeout);
+                    this.checkScrollHidden(tabList, leftButton, rightButton);
+                    rightButton.classList.remove("is-disabled");
+                }, 250);
+            });
+            leftButton.addEventListener("click", (e) => {
+                e.preventDefault();
+                leftButton.classList.add("is-disabled");
+                tabList.scrollBy({
+                    top: 0,
+                    left: -oneTabWidth,
+                    behavior: "smooth",
+                });
+                checkTimeout = window.setTimeout(() => {
+                    window.clearTimeout(checkTimeout);
+                    this.checkScrollHidden(tabList, leftButton, rightButton);
+                    leftButton.classList.remove("is-disabled");
+                }, 250);
+            });
+        }
     }
-  }
-  addListeners(tabs, index) {
-    if (tabs.length > 1) {
-      for (let i = 0; i < tabs.length; ++i) {
-        tabs[index].addEventListener("click", this.clickEventListener);
-        tabs[index].addEventListener("keydown", this.keydownEventListener);
-        //tabs[index].addEventListener('keyup', this.keyupEventListener);
-        tabs[index].index = index;
-      }
+    generateArrays(tc) {
+        this.tabList = tc.querySelectorAll('[role="tablist"]')[0];
+        this.tabButtons = tc.querySelectorAll('[role="tab"]');
+        this.tabPanelsState = [tc.querySelectorAll('[role="tabpanel"]')];
+        if (this.tabButtons.length > 0) {
+            this.addListeners(this.tabButtons, 1);
+            this.activateTab(this.tabButtons[0], true);
+        }
     }
-  }
-  checkScrollHidden(tablist, leftButton, rightButton) {
-    if (tablist.scrollLeft === 0) {
-      leftButton.classList.add("is-hidden");
+    addListeners(tabs, index) {
+        if (tabs.length > 1) {
+            for (let i = 0; i < tabs.length; ++i) {
+                tabs[index].addEventListener("click", this.clickEventListener);
+                tabs[index].addEventListener("keydown", this.keydownEventListener);
+                //tabs[index].addEventListener('keyup', this.keyupEventListener);
+                tabs[index].index = index;
+            }
+        }
     }
-    else {
-      leftButton.classList.remove("is-hidden");
+    checkScrollHidden(tablist, leftButton, rightButton) {
+        if (tablist.scrollLeft === 0) {
+            leftButton.classList.add("is-hidden");
+        }
+        else {
+            leftButton.classList.remove("is-hidden");
+        }
+        if (tablist.scrollLeft + tablist.clientWidth >= tablist.scrollWidth - 1) {
+            rightButton.classList.add("is-hidden");
+        }
+        else {
+            rightButton.classList.remove("is-hidden");
+        }
     }
-    if (tablist.scrollLeft + tablist.clientWidth >= tablist.scrollWidth - 1) {
-      rightButton.classList.add("is-hidden");
+    // When a tab is clicked, activateTab is fired to activate it
+    clickEventListener(event) {
+        if (event) {
+            const target = event.target;
+            const tabs = this.tabButtonTitles;
+            if (tabs) {
+                tabs.forEach((tab) => {
+                    const id = Object.values(tab)[1];
+                    if (id === target.id) {
+                        this.activateTab(target, true);
+                    }
+                });
+                event.stopPropagation();
+                event.stopImmediatePropagation();
+            }
+        }
     }
-    else {
-      rightButton.classList.remove("is-hidden");
+    keydownEventListener(event) {
+        const key = event.keyCode;
+        const tabs = this.tabButtonTitles;
+        switch (key) {
+            case keys.end:
+                event.preventDefault();
+                // Activate last tab
+                this.activateTab(tabs[tabs.length - 1], true);
+                break;
+            case keys.home:
+                event.preventDefault();
+                // Activate first tab
+                this.activateTab(tabs[0], true);
+                break;
+            // Up and down are in keydown
+            // because we need to prevent page scroll >:)
+            case keys.up:
+            case keys.down:
+                if (this.focusTimeoutCleared) {
+                    this.determineOrientation(event);
+                }
+                break;
+        }
     }
-  }
-  // When a tab is clicked, activateTab is fired to activate it
-  clickEventListener(event) {
-    if (event) {
-      const target = event.target;
-      const tabs = this.tabButtonTitles;
-      if (tabs) {
-        tabs.forEach((tab) => {
-          const id = Object.values(tab)[1];
-          if (id === target.id) {
-            this.activateTab(target, true);
-          }
-        });
+    keyupEventListener(event) {
+        const key = event.keyCode;
+        switch (key) {
+            case keys.left:
+            case keys.right:
+                if (event.target.role === "tab") {
+                    event.preventDefault();
+                    if (this.focusTimeoutCleared) {
+                        this.determineOrientation(event);
+                    }
+                }
+                break;
+        }
         event.stopPropagation();
         event.stopImmediatePropagation();
-      }
     }
-  }
-  keydownEventListener(event) {
-    const key = event.keyCode;
-    const tabs = this.tabButtonTitles;
-    switch (key) {
-      case keys.end:
-        event.preventDefault();
-        // Activate last tab
-        this.activateTab(tabs[tabs.length - 1], true);
-        break;
-      case keys.home:
-        event.preventDefault();
-        // Activate first tab
-        this.activateTab(tabs[0], true);
-        break;
-      // Up and down are in keydown
-      // because we need to prevent page scroll >:)
-      case keys.up:
-      case keys.down:
-        if (this.focusTimeoutCleared) {
-          this.determineOrientation(event);
+    determineOrientation(event) {
+        const leftButton = this.el.querySelectorAll(".hy-tab-scroll__left")[0];
+        const rightButton = this.el.querySelectorAll(".hy-tab-scroll__right")[0];
+        const tabList = this.tabList;
+        this.checkScrollHidden(tabList, leftButton, rightButton);
+        const key = event.keyCode;
+        const vertical = tabList.getAttribute("aria-orientation") == "vertical";
+        let proceed = false;
+        if (vertical) {
+            if (key === keys.up || key === keys.down) {
+                event.preventDefault();
+                proceed = true;
+            }
         }
-        break;
-    }
-  }
-  keyupEventListener(event) {
-    const key = event.keyCode;
-    switch (key) {
-      case keys.left:
-      case keys.right:
-        if (event.target.role === "tab") {
-          event.preventDefault();
-          if (this.focusTimeoutCleared) {
-            this.determineOrientation(event);
-          }
+        else {
+            if (key === keys.left || key === keys.right) {
+                proceed = true;
+            }
+        }
+        if (proceed) {
+            this.switchTabOnArrowPress(event);
         }
-        break;
     }
-    event.stopPropagation();
-    event.stopImmediatePropagation();
-  }
-  determineOrientation(event) {
-    const leftButton = this.el.querySelectorAll(".hy-tab-scroll__left")[0];
-    const rightButton = this.el.querySelectorAll(".hy-tab-scroll__right")[0];
-    const tabList = this.tabList;
-    this.checkScrollHidden(tabList, leftButton, rightButton);
-    const key = event.keyCode;
-    const vertical = tabList.getAttribute("aria-orientation") == "vertical";
-    let proceed = false;
-    if (vertical) {
-      if (key === keys.up || key === keys.down) {
-        event.preventDefault();
-        proceed = true;
-      }
+    switchTabOnArrowPress(event) {
+        const pressed = event.keyCode;
+        if (direction[pressed]) {
+            const target = event.target;
+            const tabs = this.tabButtons;
+            for (let i = 0; i < tabs.length; i++) {
+                if (tabs[i].id === target.id) {
+                    if (i > 0) {
+                        if (direction[pressed] === -1) {
+                            tabs[i - 1].focus();
+                            this.focusEventHandler(tabs[i - 1]);
+                            break;
+                        }
+                    }
+                    if (i < tabs.length - 1) {
+                        if (direction[pressed] === 1) {
+                            tabs[i + 1].focus();
+                            this.focusEventHandler(tabs[i + 1]);
+                            break;
+                        }
+                    }
+                }
+            }
+        }
     }
-    else {
-      if (key === keys.left || key === keys.right) {
-        proceed = true;
-      }
+    // Activates any given tab panel
+    activateTab(tab, setFocus) {
+        setFocus = setFocus || true;
+        // Deactivate all other tabs
+        this.deactivateTabs(this.tabButtons);
+        // Remove tabindex attribute
+        tab.removeAttribute("tabindex");
+        tab.setAttribute("aria-selected", "true");
+        const controls = tab.getAttribute("aria-controls");
+        this.el.querySelector(`#${controls}`).removeAttribute("hidden");
+        if (setFocus) {
+            tab.focus();
+        }
     }
-    if (proceed) {
-      this.switchTabOnArrowPress(event);
+    // Deactivate all tabs and tab panels
+    deactivateTabs(tabs) {
+        for (let t = 0; t < tabs.length; t++) {
+            tabs[t].setAttribute("tabindex", "-1");
+            tabs[t].setAttribute("aria-selected", "false");
+            tabs[t].removeEventListener("focus", this.focusEventHandler);
+        }
+        const panels = this.tabPanelsState[0];
+        for (let p = 0; p < panels.length; p++) {
+            panels[p].setAttribute("hidden", "hidden");
+        }
     }
-  }
-  switchTabOnArrowPress(event) {
-    const pressed = event.keyCode;
-    if (direction[pressed]) {
-      const target = event.target;
-      const tabs = this.tabButtons;
-      for (let i = 0; i < tabs.length; i++) {
-        if (tabs[i].id === target.id) {
-          if (i > 0) {
-            if (direction[pressed] === -1) {
-              tabs[i - 1].focus();
-              this.focusEventHandler(tabs[i - 1]);
-              break;
+    focusEventHandler(tab) {
+        const target = tab;
+        this.focusTimeoutCleared = false;
+        focusTimeout = window.setTimeout(() => {
+            window.clearTimeout(focusTimeout);
+            this.focusTimeoutCleared = true;
+            const focused = document.activeElement;
+            if (target === focused) {
+                this.activateTab(target, false);
             }
-          }
-          if (i < tabs.length - 1) {
-            if (direction[pressed] === 1) {
-              tabs[i + 1].focus();
-              this.focusEventHandler(tabs[i + 1]);
-              break;
+        }, 250);
+    }
+    render() {
+        const classComponentAttributes = ["hy-tabs__container", `hy-tabs__container__${this.headerstyle}`].join(" ");
+        const id = this.tabId.toLowerCase().replace(/\W/g, "-");
+        if (window.location.hash) {
+            const tabHash = window.location.hash.substring(1);
+            const isUrlHashed = this.tabButtonTitles.some((tab) => tab["id"] === tabHash);
+            if (isUrlHashed) {
+                const hashElement = document.getElementById(tabHash);
+                if (hashElement) {
+                    this.activateTab(hashElement, true);
+                    const hashElementRect = hashElement.getBoundingClientRect();
+                    window.scrollTo({ top: window.scrollY + hashElementRect.top - 200, behavior: "smooth" });
+                }
             }
-          }
         }
-      }
+        return [
+            h("hy-box", { key: '683a5479d2a708bb3d0cdaf68a54aa9bd801bb8a', pt: "1.25, 1.25, 1.5, 2.5" }),
+            h("div", { key: '41d787351d1ed5c07911584ed1a6f8dfd371ee64', id: id, class: classComponentAttributes }, h("div", { key: '451e17551576064418127d5bf9f837a5a8754c52', class: "hy-tablist-container" }, h("button", { key: 'c7e7f80d87ac1d9a67745d52788444adc89daa4e', tabindex: "-1", class: "hy-tab-scroll hy-tab-scroll__left is-hidden", "aria-hidden": "true" }, h("span", { key: 'aad02a75f2158552f9144f166779f78faf650242' }, h("hy-icon", { key: '47edc4178e962779da31830f6112e9e33e41b121', icon: "hy-icon-caret-left", size: 16 }))), h("div", { key: '13eef5d285c5676ee8f30306d6e86c369971c051', role: "tablist", "aria-label": this.tabListLabel }, this.tabButtonTitles &&
+                this.tabButtonTitles.map((item) => {
+                    const title = Object.values(item)[0];
+                    const id = title.toLowerCase().replace(/\W/g, "-");
+                    const titleAsId = title.toLowerCase().replace(/\W/g, "-");
+                    const tabItemHref = "#" + titleAsId;
+                    return (h("a", { href: tabItemHref, tabindex: "-1" }, h("button", { "aria-selected": "false", "aria-controls": `${id}-tab`, class: this.headerstyle, role: "tab", id: id }, h("span", null, title))));
+                })), h("button", { key: '44a95a82583d97ffa5b39630b2a49cb50aa1cea0', tabindex: "-1", class: "hy-tab-scroll hy-tab-scroll__right", "aria-hidden": "true" }, h("span", { key: 'd1f51ef899ea7471e3bfd4d5ae7358375012bc56' }, h("hy-icon", { key: '4942edbc2baba197b2dc5b0752052ebd4ede474d', icon: "hy-icon-caret-right", size: 16 })))), h("slot", { key: '90eb5de9ef6acda255b97db747f92b2d08f7702c' })),
+            h("hy-box", { key: '6e6aeac055c32cd5ef1e582f849ee1426424463d', mb: "1.75, 1.75, 2, 2.5" }),
+        ];
     }
-  }
-  // Activates any given tab panel
-  activateTab(tab, setFocus) {
-    setFocus = setFocus || true;
-    // Deactivate all other tabs
-    this.deactivateTabs(this.tabButtons);
-    // Remove tabindex attribute
-    tab.removeAttribute("tabindex");
-    tab.setAttribute("aria-selected", "true");
-    const controls = tab.getAttribute("aria-controls");
-    this.el.querySelector(`#${controls}`).removeAttribute("hidden");
-    if (setFocus) {
-      tab.focus();
+    static get is() { return "hy-tabs"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["hy-tabs.scss"]
+        };
     }
-  }
-  // Deactivate all tabs and tab panels
-  deactivateTabs(tabs) {
-    for (let t = 0; t < tabs.length; t++) {
-      tabs[t].setAttribute("tabindex", "-1");
-      tabs[t].setAttribute("aria-selected", "false");
-      tabs[t].removeEventListener("focus", this.focusEventHandler);
+    static get styleUrls() {
+        return {
+            "$": ["hy-tabs.css"]
+        };
     }
-    const panels = this.tabPanelsState[0];
-    for (let p = 0; p < panels.length; p++) {
-      panels[p].setAttribute("hidden", "hidden");
+    static get properties() {
+        return {
+            "tabId": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "tab-id",
+                "reflect": false
+            },
+            "tabListLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "tab-list-label",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "headerstyle": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "headerstyle",
+                "reflect": false,
+                "defaultValue": "\"common\""
+            }
+        };
     }
-  }
-  focusEventHandler(tab) {
-    const target = tab;
-    this.focusTimeoutCleared = false;
-    focusTimeout = window.setTimeout(() => {
-      window.clearTimeout(focusTimeout);
-      this.focusTimeoutCleared = true;
-      const focused = document.activeElement;
-      if (target === focused) {
-        this.activateTab(target, false);
-      }
-    }, 250);
-  }
-  render() {
-    const classComponentAttributes = ["hy-tabs__container", `hy-tabs__container__${this.headerstyle}`].join(" ");
-    const id = this.tabId.toLowerCase().replace(/\W/g, "-");
-    if (window.location.hash) {
-      const tabHash = window.location.hash.substring(1);
-      const isUrlHashed = this.tabButtonTitles.some((tab) => tab["id"] === tabHash);
-      if (isUrlHashed) {
-        const hashElement = document.getElementById(tabHash);
-        if (hashElement) {
-          this.activateTab(hashElement, true);
-          const hashElementRect = hashElement.getBoundingClientRect();
-          window.scrollTo({ top: window.scrollY + hashElementRect.top - 200, behavior: "smooth" });
-        }
-      }
+    static get states() {
+        return {
+            "focusTimeoutCleared": {},
+            "tabButtonTitles": {},
+            "tabPanelsState": {},
+            "tabButtons": {},
+            "tabList": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "clickEventListener",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "keydownEventListener",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "keydown",
+                "method": "keyupEventListener",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "focus",
+                "method": "focusEventHandler",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
     }
-    return [
-      h("hy-box", { pt: "1.25, 1.25, 1.5, 2.5" }),
-      h("div", { id: id, class: classComponentAttributes }, h("div", { class: "hy-tablist-container" }, h("button", { tabindex: "-1", class: "hy-tab-scroll hy-tab-scroll__left is-hidden", "aria-hidden": "true" }, h("span", null, h("hy-icon", { icon: "hy-icon-caret-left", size: 16 }))), h("div", { role: "tablist", "aria-label": this.tabListLabel }, this.tabButtonTitles &&
-        this.tabButtonTitles.map((item) => {
-          const title = Object.values(item)[0];
-          const id = title.toLowerCase().replace(/\W/g, "-");
-          const titleAsId = title.toLowerCase().replace(/\W/g, "-");
-          const tabItemHref = "#" + titleAsId;
-          return (h("a", { href: tabItemHref, tabindex: "-1" }, h("button", { "aria-selected": "false", "aria-controls": `${id}-tab`, class: this.headerstyle, role: "tab", id: id }, h("span", null, title))));
-        })), h("button", { tabindex: "-1", class: "hy-tab-scroll hy-tab-scroll__right", "aria-hidden": "true" }, h("span", null, h("hy-icon", { icon: "hy-icon-caret-right", size: 16 })))), h("slot", null)),
-      h("hy-box", { mb: "1.75, 1.75, 2, 2.5" }),
-    ];
-  }
-  static get is() { return "hy-tabs"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["hy-tabs.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["hy-tabs.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "tabId": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "tab-id",
-        "reflect": false
-      },
-      "tabListLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "tab-list-label",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "headerstyle": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "headerstyle",
-        "reflect": false,
-        "defaultValue": "\"common\""
-      }
-    };
-  }
-  static get states() {
-    return {
-      "focusTimeoutCleared": {},
-      "tabButtonTitles": {},
-      "tabPanelsState": {},
-      "tabButtons": {},
-      "tabList": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "clickEventListener",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "keydown",
-        "method": "keydownEventListener",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "keydown",
-        "method": "keyupEventListener",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "focus",
-        "method": "focusEventHandler",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
 }
-//# sourceMappingURL=hy-tabs.js.map