@duetds/components 6.2.3 → 6.2.5

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

@@ -1,7 +1,7 @@
 /*!
  * Built with Duet Design System
  */
-import { Component, Element, Event, h, Method, Prop, State } from "@stencil/core";
+import { h } from "@stencil/core";
 import { inheritGlobalTheme } from "../../common/themeable-component";
 import { createID } from "../../utils/create-id";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey } from "../../utils/keyboard-utils";
@@ -13,70 +13,6 @@ import { getLanguage, getLocaleString } from "../../utils/language-utils";
 export class DuetTabGroup {
   constructor() {
     this.id = createID("DuetTabGroup");
-    /**
-     * State() variables
-     * Inlined decorator, alphabetical order.
-     */
-    this.tabs = [];
-    this.selected = 0;
-    /**
-     * Theme of the component.
-     */
-    this.theme = "";
-    /**
-     * Controls whether the tab-group should scroll (by inflection this will disable collapsing to select box on small screens),
-     * if this is a number instead of true it will be used as "amount of items to scroll"
-     */
-    this.scrolls = false;
-    /**
-     * Whether the tab-group collapses to a select dropwdown in minor breakpoints
-     */
-    this.collapses = true;
-    /**
-     * Aria label for the entire tab-group
-     */
-    this.accessibleLabel = undefined;
-    /**
-     * Style variation of the tab group.
-     */
-    this.variation = "default";
-    /**
-     * The currently active language. This setting changes the accessible labels to match the
-     * chosen language.
-     * @deprecated this is now handled via the html lang tag, and is no longer used - kept to avoid breaking changes and ease unit testing
-     * @default "fi"
-     */
-    this.language = getLanguage();
-    /**
-     * Defaults for Label
-     * @default {fi: "Valitse", en: "Choose", sv: "Välja"}
-     */
-    this.labelDefaults = {
-      fi: "Valitse",
-      en: "Choose",
-      sv: "Välj",
-    };
-    /**
-     * Label for the select element which gets shown on mobile.
-     * @default {fi: "Valitse", en: "Choose", sv: "Välja"}
-     */
-    this.label = getLocaleString(this.labelDefaults, this.language);
-    /**
-     * Determines whether the label for the select element shown on mobile is visually hidden.
-     */
-    this.labelHidden = true;
-    /**
-     * Optional identifier to add to buttons in the tab group
-     */
-    this.identifier = this.id;
-    /**
-     * Controls the margin of the component.
-     */
-    this.margin = "auto";
-    /**
-     * Controls the padding of the component.
-     */
-    this.padding = "auto";
     /**
      * Component event handling.
      */
@@ -107,6 +43,24 @@ export class DuetTabGroup {
       }
       return renderedTabs;
     };
+    this.tabs = [];
+    this.selected = 0;
+    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";
   }
   /**
    * Component lifecycle events.
@@ -206,374 +160,382 @@ export class DuetTabGroup {
         [`duet-tab-variation-${this.variation}`]: true,
         "duet-tab-group-scrolls": this.scrolls,
         "duet-tab-group-collapses": this.collapses,
-      }, "aria-label": this.accessibleLabel },
-      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.openTab(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",
-          "duet-tab-group-tabs": true,
-          "duet-tab-group-hidden": this.tabs.length > 3,
-          "duet-tab-group-collapses": this.collapses,
-        } }, this.renderTab()),
-      h("div", { role: "tabpanel", tabindex: "0", class: { "duet-tab-group-content": true, "duet-m-0": this.margin === "none" } },
-        h("slot", null))));
+      }, "aria-label": this.accessibleLabel }, 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.openTab(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",
+        "duet-tab-group-tabs": true,
+        "duet-tab-group-hidden": this.tabs.length > 3,
+        "duet-tab-group-collapses": this.collapses,
+      } }, this.renderTab()), h("div", { role: "tabpanel", tabindex: "0", class: { "duet-tab-group-content": true, "duet-m-0": this.margin === "none" } }, 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"
+  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"
+            }
           }
-        }
-      },
-      "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": "Theme of the component."
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Whether the tab-group collapses to a select dropwdown in minor breakpoints"
+      "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"
       },
-      "attribute": "collapses",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "accessibleLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Aria label for the entire tab-group"
+      "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"
       },
-      "attribute": "accessible-label",
-      "reflect": false,
-      "defaultValue": "undefined"
-    },
-    "variation": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetTabVariation",
-        "resolved": "\"default\" | \"plain\"",
-        "references": {
-          "DuetTabVariation": {
-            "location": "local"
+      "variation": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetTabVariation",
+          "resolved": "\"default\" | \"plain\"",
+          "references": {
+            "DuetTabVariation": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Style variation of the tab group."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Style variation of the tab group."
+        },
+        "attribute": "variation",
+        "reflect": false,
+        "defaultValue": "\"default\""
       },
-      "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"
+      "language": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "DuetLanguage",
+          "resolved": "\"en\" | \"fi\" | \"sv\"",
+          "references": {
+            "DuetLanguage": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "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."
+        },
+        "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()"
       },
-      "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"
+      "labelDefaults": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetLangObject | string",
+          "resolved": "DuetLangObject | string",
+          "references": {
+            "DuetLangObject": {
+              "location": "import",
+              "path": "../../utils/language-utils"
+            }
           }
-        }
-      },
-      "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": [{
+              "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  }"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Determines whether the label for the select element shown on mobile is visually hidden."
+      "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)"
       },
-      "attribute": "label-hidden",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "identifier": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "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"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Optional identifier to add to buttons in the tab group"
+      "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"
       },
-      "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"
+      "margin": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetMargin",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetMargin": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Controls the margin of the component."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the margin of the component."
+        },
+        "attribute": "margin",
+        "reflect": false,
+        "defaultValue": "\"auto\""
       },
-      "attribute": "margin",
-      "reflect": false,
-      "defaultValue": "\"auto\""
-    },
-    "padding": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "DuetPadding",
-        "resolved": "\"auto\" | \"none\"",
-        "references": {
-          "DuetPadding": {
-            "location": "import",
-            "path": "../../common-types"
+      "padding": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "DuetPadding",
+          "resolved": "\"auto\" | \"none\"",
+          "references": {
+            "DuetPadding": {
+              "location": "import",
+              "path": "../../common-types"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Controls the padding of the component."
-      },
-      "attribute": "padding",
-      "reflect": false,
-      "defaultValue": "\"auto\""
-    }
-  }; }
-  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"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Controls the padding of the component."
+        },
+        "attribute": "padding",
+        "reflect": false,
+        "defaultValue": "\"auto\""
+      }
+    };
+  }
+  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"
+            }
           }
         }
-      }
-    }, {
-      "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"
+      }, {
+        "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"
+            }
           }
         }
-      }
-    }]; }
-  static get methods() { return {
-    "openTab": {
-      "complexType": {
-        "signature": "(tabIndex: number) => Promise<void>",
-        "parameters": [{
-            "tags": [],
-            "text": ""
-          }],
-        "references": {
-          "Promise": {
-            "location": "global"
+      }];
+  }
+  static get methods() {
+    return {
+      "openTab": {
+        "complexType": {
+          "signature": "(tabIndex: number) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "DuetTabGroupEvent": {
+              "location": "local"
+            }
           },
-          "DuetTabGroupEvent": {
-            "location": "local"
-          }
+          "return": "Promise<void>"
         },
-        "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": []
+        }
       },
-      "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"
-          }
+      "refresh": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
         },
-        "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
-          }]
+        "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"; }
 }