@duetds/components 8.0.6 → 8.1.1

package/lib/collection/components/duet-tab-group/duet-tab-group.js

@@ -4,659 +4,662 @@
 import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common";
 import { createID } from "../../utils/create-id";
-import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey } from "../../utils/keyboard-utils";
+import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, subscribeTabbingChange, unsubscribeTabbingChange, } from "../../utils/keyboard-utils";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
 /**
  * @part ${identifier}-button - piercing selector for styling tab buttons
  * @part ${identifier}-button--selected - piercing selector for styling selected tab button
  */
 export class DuetTabGroup {
-  constructor() {
-    this.id = createID("DuetTabGroup");
+    constructor() {
+        this.id = createID("DuetTabGroup");
+        /**
+         * Component event handling.
+         */
+        this.handleKeyDown = ev => {
+            let button;
+            if (isArrowLeftKey(ev) || isArrowUpKey(ev)) {
+                button = ev.target.previousElementSibling;
+            }
+            else if (isArrowRightKey(ev) || isArrowDownKey(ev)) {
+                button = ev.target.nextElementSibling;
+            }
+            if (button) {
+                ev.preventDefault();
+                button.click();
+                button.focus();
+            }
+        };
+        this.onTabSelect = (tabIndex) => {
+            if (this.tabChangeConfirm) {
+                if (tabIndex !== this.selected) {
+                    const event = {
+                        value: tabIndex,
+                        component: "duet-tab-group",
+                    };
+                    this.duetTabChangeRequested.emit(event);
+                }
+            }
+            else {
+                this.openTab(tabIndex);
+            }
+        };
+        this.scrollToActive = () => {
+            if (this.variation === "checked" || this.variation === "plain-scrolling") {
+                setTimeout(() => {
+                    const active = this.tabsContainer.querySelector(".selected");
+                    if (active) {
+                        active.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+                    }
+                }, 50);
+            }
+        };
+        this.renderTab = () => {
+            const renderedTabs = this.tabs.map((element, index) => {
+                return (h("button", { role: "tab", id: this.getButtonId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), tabindex: index === 0 ? "0" : "-1", part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
+                        "duet-p-0": this.padding === "none",
+                        "duet-tab-button": true,
+                        "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
+                        selected: element.selected,
+                    }, onClick: () => this.onTabSelect(index), onKeyDown: ev => this.handleKeyDown(ev) }, this.variation === "checked" ? (h("div", { class: { "checked-tab-content": true, "stackable-checked-tab-content": this.tabs.length <= 3 } }, h("div", { class: { "checked-tab-description": true, "stackable-description": this.tabs.length <= 3 } }, h("p", null, element.label), h("p", { class: { "tab-caption": true, selected: element.selected } }, element.caption)), h("div", { class: { "stackable-checkmark": this.tabs.length <= 3 } }, h("duet-checkmark", { theme: this.theme, checked: element.selected, type: "radio", "presentation-only": true, center: true })))) : (element.label)));
+            });
+            if (this.scrolls) {
+                return (h("duet-scrollable", { selected: this.selected, identifier: this.identifier }, renderedTabs));
+            }
+            return renderedTabs;
+        };
+        this.tabs = [];
+        this.selected = undefined;
+        this.theme = "";
+        this.scrolls = false;
+        this.collapses = true;
+        this.accessibleLabel = undefined;
+        this.variation = "default";
+        this.language = getLanguage();
+        this.labelDefaults = {
+            fi: "Valitse",
+            en: "Choose",
+            sv: "Välj",
+        };
+        this.label = getLocaleString(this.labelDefaults, this.language);
+        this.labelHidden = true;
+        this.identifier = this.id;
+        this.margin = "auto";
+        this.padding = "auto";
+        this.setTabIndex = false;
+        this.tabChangeConfirm = false;
+    }
+    /**
+     * Component lifecycle events.
+     */
+    async connectedCallback() {
+        if (typeof MutationObserver !== "undefined") {
+            this.mutationO = new MutationObserver(() => {
+                this.updateTabs();
+            });
+            this.mutationO.observe(this.element, {
+                attributes: true,
+                attributeFilter: ["label"],
+                childList: true,
+                characterData: true,
+                subtree: true,
+            });
+        }
+        await this.updateTabs();
+        subscribeTabbingChange(this);
+    }
+    disconnectedCallback() {
+        if (this.mutationO) {
+            this.mutationO.disconnect();
+            this.mutationO = undefined;
+        }
+        unsubscribeTabbingChange(this);
+    }
+    componentWillLoad() {
+        inheritGlobalTheme(this);
+    }
+    componentDidLoad() {
+        this.scrollToActive();
+    }
     /**
-     * Component event handling.
+     * This method allows you to open any of the tabs by calling the method and
+     * passing the index of the tab. Please note that index starts from zero.
      */
-    this.handleKeyDown = ev => {
-      let button;
-      if (isArrowLeftKey(ev) || isArrowUpKey(ev)) {
-        button = ev.target.previousElementSibling;
-      }
-      else if (isArrowRightKey(ev) || isArrowDownKey(ev)) {
-        button = ev.target.nextElementSibling;
-      }
-      if (button) {
-        ev.preventDefault();
-        button.click();
-        button.focus();
-      }
-    };
-    this.onTabSelect = (tabIndex) => {
-      if (this.tabChangeConfirm) {
-        if (tabIndex !== this.selected) {
-          const event = {
+    async openTab(tabIndex) {
+        if (tabIndex >= this.tabs.length) {
+            throw new Error(`[duet-tabs] Index ${tabIndex} is out of bounds of tabs length`);
+        }
+        this.selected = tabIndex;
+        this.tabs.forEach((tab, i) => {
+            tab.selected = i === tabIndex;
+        });
+        this.scrollToActive();
+        const event = {
             value: tabIndex,
             component: "duet-tab-group",
-          };
-          this.duetTabChangeRequested.emit(event);
+        };
+        this.duetChange.emit(event);
+        this.duetTabChange.emit(event);
+    }
+    /**
+     * This method used to refresh the contents of the tab group
+     * but is now deprecated as this is done automatically.
+     * @deprecated
+     */
+    async refresh() {
+        console.log("[duet-tabs] Refresh method is deprecated and will be removed in the future version.");
+    }
+    /**
+     * Local methods.
+     */
+    getTabs() {
+        const allTabs = Array.from(this.element.querySelectorAll("duet-tab"));
+        const localTabs = allTabs.filter(tab => tab.closest("duet-tab-group") === this.element);
+        if (localTabs.length === 0) {
+            throw new Error("[duet-tabs] Must have at least one tab");
         }
-      }
-      else {
-        this.openTab(tabIndex);
-      }
-    };
-    this.scrollToActive = () => {
-      if (this.variation === "checked" || this.variation === "plain-scrolling") {
-        setTimeout(() => {
-          const active = this.tabsContainer.querySelector(".selected");
-          if (active) {
-            active.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
-          }
-        }, 50);
-      }
-    };
-    this.renderTab = () => {
-      const renderedTabs = this.tabs.map((element, index) => {
-        return (h("button", { role: "tab", id: this.getButtonId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), tabindex: index === 0 ? "0" : "-1", part: `${this.identifier}-button ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
-            "duet-p-0": this.padding === "none",
-            "duet-tab-button": true,
-            "stackable-tab": this.variation === "checked" && this.tabs.length <= 3,
-            selected: element.selected,
-          }, onClick: () => this.onTabSelect(index), onKeyDown: ev => this.handleKeyDown(ev) }, this.variation === "checked" ? (h("div", { class: { "checked-tab-content": true, "stackable-checked-tab-content": this.tabs.length <= 3 } }, h("div", { class: { "checked-tab-description": true, "stackable-description": this.tabs.length <= 3 } }, h("p", null, element.label), h("p", { class: { "tab-caption": true, selected: element.selected } }, element.caption)), h("div", { class: { "stackable-checkmark": this.tabs.length <= 3 } }, h("duet-checkmark", { theme: this.theme, checked: element.selected, type: "radio", "presentation-only": true, center: true })))) : (element.label)));
-      });
-      if (this.scrolls) {
-        return (h("duet-scrollable", { selected: this.selected, identifier: this.identifier }, renderedTabs));
-      }
-      return renderedTabs;
-    };
-    this.tabs = [];
-    this.selected = undefined;
-    this.theme = "";
-    this.scrolls = false;
-    this.collapses = true;
-    this.accessibleLabel = undefined;
-    this.variation = "default";
-    this.language = getLanguage();
-    this.labelDefaults = {
-      fi: "Valitse",
-      en: "Choose",
-      sv: "Välj",
-    };
-    this.label = getLocaleString(this.labelDefaults, this.language);
-    this.labelHidden = true;
-    this.identifier = this.id;
-    this.margin = "auto";
-    this.padding = "auto";
-    this.setTabIndex = false;
-    this.tabChangeConfirm = false;
-  }
-  /**
-   * Component lifecycle events.
-   */
-  async connectedCallback() {
-    if (typeof MutationObserver !== "undefined") {
-      this.mutationO = new MutationObserver(() => {
-        this.updateTabs();
-      });
-      this.mutationO.observe(this.element, {
-        attributes: true,
-        attributeFilter: ["label"],
-        childList: true,
-        characterData: true,
-        subtree: true,
-      });
+        // filter out any nested tabs
+        return localTabs;
     }
-    await this.updateTabs();
-  }
-  disconnectedCallback() {
-    if (this.mutationO) {
-      this.mutationO.disconnect();
-      this.mutationO = undefined;
+    getButtonId(index) {
+        return `${this.id}-button-${index}`;
     }
-  }
-  componentWillLoad() {
-    inheritGlobalTheme(this);
-  }
-  componentDidLoad() {
-    this.scrollToActive();
-  }
-  /**
-   * This method allows you to open any of the tabs by calling the method and
-   * passing the index of the tab. Please note that index starts from zero.
-   */
-  async openTab(tabIndex) {
-    if (tabIndex >= this.tabs.length) {
-      throw new Error(`[duet-tabs] Index ${tabIndex} is out of bounds of tabs length`);
+    getTabId(index) {
+        return `${this.id}-tab-${index}`;
     }
-    this.selected = tabIndex;
-    this.tabs.forEach((tab, i) => {
-      tab.selected = i === tabIndex;
-    });
-    this.scrollToActive();
-    const event = {
-      value: tabIndex,
-      component: "duet-tab-group",
-    };
-    this.duetChange.emit(event);
-    this.duetTabChange.emit(event);
-  }
-  /**
-   * This method used to refresh the contents of the tab group
-   * but is now deprecated as this is done automatically.
-   * @deprecated
-   */
-  async refresh() {
-    console.log("[duet-tabs] Refresh method is deprecated and will be removed in the future version.");
-  }
-  /**
-   * Local methods.
-   */
-  getTabs() {
-    const allTabs = Array.from(this.element.querySelectorAll("duet-tab"));
-    const localTabs = allTabs.filter(tab => tab.closest("duet-tab-group") === this.element);
-    if (localTabs.length === 0) {
-      throw new Error("[duet-tabs] Must have at least one tab");
+    getAccessibleDescription(index) {
+        const description = this.tabs[index].getAttribute("accessible-description") || null;
+        return description;
     }
-    // filter out any nested tabs
-    return localTabs;
-  }
-  getButtonId(index) {
-    return `${this.id}-button-${index}`;
-  }
-  getTabId(index) {
-    return `${this.id}-tab-${index}`;
-  }
-  getAccessibleDescription(index) {
-    const description = this.tabs[index].getAttribute("accessible-description") || null;
-    return description;
-  }
-  async updateTabs() {
-    this.selected = undefined;
-    this.tabs = this.getTabs();
-    this.tabs.forEach((tab, index) => {
-      tab.id = this.getTabId(index);
-      if (tab.selected) {
+    async updateTabs() {
+        this.selected = undefined;
+        this.tabs = this.getTabs();
+        this.tabs.forEach((tab, index) => {
+            tab.id = this.getTabId(index);
+            if (tab.selected) {
+                if (this.selected === undefined) {
+                    this.selected = index;
+                }
+                else {
+                    tab.selected = false;
+                }
+            }
+        });
         if (this.selected === undefined) {
-          this.selected = index;
+            this.selected = 0;
+            this.tabs[0].selected = true;
         }
-        else {
-          tab.selected = false;
-        }
-      }
-    });
-    if (this.selected === undefined) {
-      this.selected = 0;
-      this.tabs[0].selected = true;
+        return;
     }
-    return;
-  }
-  /**
-   * render() function
-   * Always the last one in the class.
-   */
-  render() {
-    const variationClass = this.variation === "plain-scrolling" ? "duet-tab-variation-plain" : `duet-tab-variation-${this.variation}`;
-    const isSwipeScrollable = this.variation === "checked" || this.variation === "plain-scrolling";
-    return (h("div", { class: {
-        "duet-tab-group": true,
-        "duet-theme-turva": this.theme === "turva",
-        [variationClass]: true,
-        "duet-tab-plain-scrolling": this.variation === "plain-scrolling",
-        "duet-tab-group-scrolls": this.scrolls,
-        "duet-tab-group-collapses": this.collapses,
-      }, "aria-label": this.accessibleLabel }, !isSwipeScrollable && this.tabs.length > 3 && this.collapses && (h("duet-select", { value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.onTabSelect(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
-        return { label: tab.label, value: index.toString() };
-      }) })), h("div", { role: "tablist", class: {
-        "duet-m-0": this.margin === "none" || this.variation === "checked",
-        "duet-tab-group-tabs": true,
-        "duet-tab-group-hidden": this.tabs.length > 3 && !isSwipeScrollable,
-        "duet-tab-group-collapses": this.collapses,
-      }, ref: el => {
-        this.tabsContainer = el;
-      } }, this.renderTab()), h("div", { role: "tabpanel", tabindex: this.setTabIndex ? null : "0", class: {
-        "duet-tab-group-content": true,
-        "duet-m-0": this.margin === "none",
-        "checked-group-content": this.variation === "checked",
-      } }, h("slot", null))));
-  }
-  static get is() { return "duet-tab-group"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["duet-tab-group.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["duet-tab-group.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "theme": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetTheme",
-          "resolved": "\"\" | \"default\" | \"turva\"",
-          "references": {
-            "DuetTheme": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetTheme"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Theme of the component."
-        },
-        "attribute": "theme",
-        "reflect": false,
-        "defaultValue": "\"\""
-      },
-      "scrolls": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens),\nif this is a number instead of true it will be used as \"amount of items to scroll\""
-        },
-        "attribute": "scrolls",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "collapses": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Whether the tab-group collapses to a select dropwdown in minor breakpoints"
-        },
-        "attribute": "collapses",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "accessibleLabel": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Aria label for the entire tab-group"
-        },
-        "attribute": "accessible-label",
-        "reflect": false,
-        "defaultValue": "undefined"
-      },
-      "variation": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetTabVariation",
-          "resolved": "\"checked\" | \"default\" | \"plain\" | \"plain-scrolling\"",
-          "references": {
-            "DuetTabVariation": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
-              "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabVariation"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Style variation of the tab group."
-        },
-        "attribute": "variation",
-        "reflect": false,
-        "defaultValue": "\"default\""
-      },
-      "language": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "DuetLanguage",
-          "resolved": "\"en\" | \"fi\" | \"sv\"",
-          "references": {
-            "DuetLanguage": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetLanguage"
+    /**
+     * render() function
+     * Always the last one in the class.
+     */
+    render() {
+        const variationClass = this.variation === "plain-scrolling" ? "duet-tab-variation-plain" : `duet-tab-variation-${this.variation}`;
+        const isSwipeScrollable = this.variation === "checked" || this.variation === "plain-scrolling";
+        return (h("div", { class: {
+                "duet-tab-group": true,
+                "duet-theme-turva": this.theme === "turva",
+                [variationClass]: true,
+                "duet-tab-plain-scrolling": this.variation === "plain-scrolling",
+                "duet-tab-group-scrolls": this.scrolls,
+                "duet-tab-group-collapses": this.collapses,
+            }, "aria-label": this.accessibleLabel }, !isSwipeScrollable && this.tabs.length > 3 && this.collapses && (h("duet-select", { value: this.selected.toString(), expand: true, label: this.label, labelHidden: this.labelHidden, theme: this.theme, onDuetChange: event => this.onTabSelect(Number(event.detail.value)), items: this.tabs.map((tab, index) => {
+                return { label: tab.label, value: index.toString() };
+            }) })), h("div", { role: "tablist", class: {
+                "duet-m-0": this.margin === "none" || this.variation === "checked",
+                "duet-tab-group-tabs": true,
+                "duet-tab-group-hidden": this.tabs.length > 3 && !isSwipeScrollable,
+                "duet-tab-group-collapses": this.collapses,
+            }, ref: el => {
+                this.tabsContainer = el;
+            } }, this.renderTab()), h("div", { role: "tabpanel", tabindex: this.setTabIndex ? null : "0", class: {
+                "duet-tab-group-content": true,
+                "duet-m-0": this.margin === "none",
+                "checked-group-content": this.variation === "checked",
+            } }, h("slot", null))));
+    }
+    static get is() { return "duet-tab-group"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["duet-tab-group.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["duet-tab-group.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "theme": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetTheme",
+                    "resolved": "\"\" | \"default\" | \"turva\"",
+                    "references": {
+                        "DuetTheme": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetTheme"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Theme of the component."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "\"\""
+            },
+            "scrolls": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens),\nif this is a number instead of true it will be used as \"amount of items to scroll\""
+                },
+                "attribute": "scrolls",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "collapses": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tab-group collapses to a select dropwdown in minor breakpoints"
+                },
+                "attribute": "collapses",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "accessibleLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Aria label for the entire tab-group"
+                },
+                "attribute": "accessible-label",
+                "reflect": false,
+                "defaultValue": "undefined"
+            },
+            "variation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetTabVariation",
+                    "resolved": "\"checked\" | \"default\" | \"plain\" | \"plain-scrolling\"",
+                    "references": {
+                        "DuetTabVariation": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabVariation"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Style variation of the tab group."
+                },
+                "attribute": "variation",
+                "reflect": false,
+                "defaultValue": "\"default\""
+            },
+            "language": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "DuetLanguage",
+                    "resolved": "\"en\" | \"fi\" | \"sv\"",
+                    "references": {
+                        "DuetLanguage": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetLanguage"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
+                        }, {
+                            "name": "default",
+                            "text": "\"fi\""
+                        }],
+                    "text": "The currently active language. This setting changes the accessible labels to match the\nchosen language."
+                },
+                "attribute": "language",
+                "reflect": false,
+                "defaultValue": "getLanguage()"
+            },
+            "labelDefaults": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetLangObject | string",
+                    "resolved": "DuetLangObject | string",
+                    "references": {
+                        "DuetLangObject": {
+                            "location": "import",
+                            "path": "../../utils/language-utils",
+                            "id": "src/utils/language-utils.ts::DuetLangObject"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Valitse\", en: \"Choose\", sv: \"V\u00E4lja\"}"
+                        }],
+                    "text": "Defaults for Label"
+                },
+                "attribute": "label-default",
+                "reflect": false,
+                "defaultValue": "{\n    fi: \"Valitse\",\n    en: \"Choose\",\n    sv: \"V\u00E4lj\",\n  }"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "{fi: \"Valitse\", en: \"Choose\", sv: \"V\u00E4lja\"}"
+                        }],
+                    "text": "Label for the select element which gets shown on mobile."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "getLocaleString(this.labelDefaults, this.language)"
+            },
+            "labelHidden": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Determines whether the label for the select element shown on mobile is visually hidden."
+                },
+                "attribute": "label-hidden",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "identifier": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional identifier to add to buttons in the tab group"
+                },
+                "attribute": "identifier",
+                "reflect": false,
+                "defaultValue": "this.id"
+            },
+            "margin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetMargin",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {
+                        "DuetMargin": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetMargin"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the margin of the component."
+                },
+                "attribute": "margin",
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DuetPadding",
+                    "resolved": "\"auto\" | \"none\"",
+                    "references": {
+                        "DuetPadding": {
+                            "location": "import",
+                            "path": "../../common-types",
+                            "id": "src/common-types.d.ts::DuetPadding"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls the padding of the component."
+                },
+                "attribute": "padding",
+                "reflect": false,
+                "defaultValue": "\"auto\""
+            },
+            "setTabIndex": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls if tab content should have tab index and be accessible by pressing tab"
+                },
+                "attribute": "set-tab-index",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "tabChangeConfirm": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If this property is set to true, tab won't change immediately after clicking it.\nComponent will emit \"duetTabChangeRequested\" event, and it needs to be handled manually in order to change tab."
+                },
+                "attribute": "tab-change-confirm",
+                "reflect": false,
+                "defaultValue": "false"
             }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing"
+        };
+    }
+    static get states() {
+        return {
+            "tabs": {},
+            "selected": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "duetChange",
+                "name": "duetChange",
+                "bubbles": false,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": "in favour of more specific duetTabChange event.\nCallback for when the value changed."
+                        }],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "DuetTabGroupEvent",
+                    "resolved": "{ component: \"duet-tab-group\"; value: number; }",
+                    "references": {
+                        "DuetTabGroupEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
+                        }
+                    }
+                }
             }, {
-              "name": "default",
-              "text": "\"fi\""
-            }],
-          "text": "The currently active language. This setting changes the accessible labels to match the\nchosen language."
-        },
-        "attribute": "language",
-        "reflect": false,
-        "defaultValue": "getLanguage()"
-      },
-      "labelDefaults": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetLangObject | string",
-          "resolved": "DuetLangObject | string",
-          "references": {
-            "DuetLangObject": {
-              "location": "import",
-              "path": "../../utils/language-utils",
-              "id": "src/utils/language-utils.ts::DuetLangObject"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{fi: \"Valitse\", en: \"Choose\", sv: \"V\u00E4lja\"}"
-            }],
-          "text": "Defaults for Label"
-        },
-        "attribute": "label-default",
-        "reflect": false,
-        "defaultValue": "{\n    fi: \"Valitse\",\n    en: \"Choose\",\n    sv: \"V\u00E4lj\",\n  }"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [{
-              "name": "default",
-              "text": "{fi: \"Valitse\", en: \"Choose\", sv: \"V\u00E4lja\"}"
-            }],
-          "text": "Label for the select element which gets shown on mobile."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "getLocaleString(this.labelDefaults, this.language)"
-      },
-      "labelHidden": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Determines whether the label for the select element shown on mobile is visually hidden."
-        },
-        "attribute": "label-hidden",
-        "reflect": false,
-        "defaultValue": "true"
-      },
-      "identifier": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Optional identifier to add to buttons in the tab group"
-        },
-        "attribute": "identifier",
-        "reflect": false,
-        "defaultValue": "this.id"
-      },
-      "margin": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetMargin",
-          "resolved": "\"auto\" | \"none\"",
-          "references": {
-            "DuetMargin": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetMargin"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Controls the margin of the component."
-        },
-        "attribute": "margin",
-        "reflect": false,
-        "defaultValue": "\"auto\""
-      },
-      "padding": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "DuetPadding",
-          "resolved": "\"auto\" | \"none\"",
-          "references": {
-            "DuetPadding": {
-              "location": "import",
-              "path": "../../common-types",
-              "id": "src/common-types.d.ts::DuetPadding"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Controls the padding of the component."
-        },
-        "attribute": "padding",
-        "reflect": false,
-        "defaultValue": "\"auto\""
-      },
-      "setTabIndex": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Controls if tab content should have tab index and be accessible by pressing tab"
-        },
-        "attribute": "set-tab-index",
-        "reflect": false,
-        "defaultValue": "false"
-      },
-      "tabChangeConfirm": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "If this property is set to true, tab won't change immediately after clicking it.\nComponent will emit \"duetTabChangeRequested\" event, and it needs to be handled manually in order to change tab."
-        },
-        "attribute": "tab-change-confirm",
-        "reflect": false,
-        "defaultValue": "false"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "tabs": {},
-      "selected": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "duetChange",
-        "name": "duetChange",
-        "bubbles": false,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [{
-              "name": "deprecated",
-              "text": "in favour of more specific duetTabChange event.\nCallback for when the value changed."
-            }],
-          "text": ""
-        },
-        "complexType": {
-          "original": "DuetTabGroupEvent",
-          "resolved": "{ component: \"duet-tab-group\"; value: number; }",
-          "references": {
-            "DuetTabGroupEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
-              "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
-            }
-          }
-        }
-      }, {
-        "method": "duetTabChange",
-        "name": "duetTabChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event raised when the selected tab is changed"
-        },
-        "complexType": {
-          "original": "DuetTabGroupEvent",
-          "resolved": "{ component: \"duet-tab-group\"; value: number; }",
-          "references": {
-            "DuetTabGroupEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
-              "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
-            }
-          }
-        }
-      }, {
-        "method": "duetTabChangeRequested",
-        "name": "duetTabChangeRequested",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Event raised when new tab is clicked and \"tabChangeConfirm\" property is set to true"
-        },
-        "complexType": {
-          "original": "DuetTabGroupEvent",
-          "resolved": "{ component: \"duet-tab-group\"; value: number; }",
-          "references": {
-            "DuetTabGroupEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
-              "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
-            }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "openTab": {
-        "complexType": {
-          "signature": "(tabIndex: number) => Promise<void>",
-          "parameters": [{
-              "tags": [],
-              "text": ""
-            }],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+                "method": "duetTabChange",
+                "name": "duetTabChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event raised when the selected tab is changed"
+                },
+                "complexType": {
+                    "original": "DuetTabGroupEvent",
+                    "resolved": "{ component: \"duet-tab-group\"; value: number; }",
+                    "references": {
+                        "DuetTabGroupEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
+                        }
+                    }
+                }
+            }, {
+                "method": "duetTabChangeRequested",
+                "name": "duetTabChangeRequested",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event raised when new tab is clicked and \"tabChangeConfirm\" property is set to true"
+                },
+                "complexType": {
+                    "original": "DuetTabGroupEvent",
+                    "resolved": "{ component: \"duet-tab-group\"; value: number; }",
+                    "references": {
+                        "DuetTabGroupEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "openTab": {
+                "complexType": {
+                    "signature": "(tabIndex: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "tabIndex",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "DuetTabGroupEvent": {
+                            "location": "local",
+                            "path": "/Users/mgibas/workspace/duet/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
+                            "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "This method allows you to open any of the tabs by calling the method and\npassing the index of the tab. Please note that index starts from zero.",
+                    "tags": []
+                }
             },
-            "DuetTabGroupEvent": {
-              "location": "local",
-              "path": "/Users/laaksju3/duetds/packages/components/src/components/duet-tab-group/duet-tab-group.tsx",
-              "id": "src/components/duet-tab-group/duet-tab-group.tsx::DuetTabGroupEvent"
+            "refresh": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "This method used to refresh the contents of the tab group\nbut is now deprecated as this is done automatically.",
+                    "tags": [{
+                            "name": "deprecated",
+                            "text": undefined
+                        }]
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method allows you to open any of the tabs by calling the method and\npassing the index of the tab. Please note that index starts from zero.",
-          "tags": []
-        }
-      },
-      "refresh": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "This method used to refresh the contents of the tab group\nbut is now deprecated as this is done automatically.",
-          "tags": [{
-              "name": "deprecated",
-              "text": undefined
-            }]
-        }
-      }
-    };
-  }
-  static get elementRef() { return "element"; }
+        };
+    }
+    static get elementRef() { return "element"; }
 }