@duetds/components 4.34.4 → 4.35.0

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

@@ -2,14 +2,29 @@
  * Built with Duet Design System
  */
 import { Build, Component, h, Prop } from "@stencil/core";
+import { getLocaleString } from "../../utils/language-utils";
 export class DuetTab {
+  constructor() {
+    /**
+     * Defaults for AccessibleLabel
+     * @default null
+     */
+    this.accessibleDescriptionDefault = null;
+    /**
+     * String for AccessibleLabel
+     * @default null
+     */
+    this.accessibleDescription = this.accessibleDescriptionDefault
+      ? getLocaleString(this.accessibleDescriptionDefault)
+      : null;
+  }
   /**
    * render() function
    * Always the last one in the class.
    */
   render() {
     if (Build.isBrowser) {
-      return (h("div", { role: "tabpanel", class: { "duet-tab": true, selected: this.selected } },
+      return (h("div", { role: "tabpanel", class: { "duet-tab": true, selected: this.selected }, "aria-description": this.accessibleDescription },
         h("slot", null)));
     }
   }
@@ -55,6 +70,53 @@ export class DuetTab {
       },
       "attribute": "selected",
       "reflect": true
+    },
+    "accessibleDescriptionDefault": {
+      "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": "null"
+          }],
+        "text": "Defaults for AccessibleLabel"
+      },
+      "attribute": "accessible-description-defaults",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "accessibleDescription": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "name": "default",
+            "text": "null"
+          }],
+        "text": "String for AccessibleLabel"
+      },
+      "attribute": "accessible-description",
+      "reflect": false,
+      "defaultValue": "this.accessibleDescriptionDefault\n    ? getLocaleString(this.accessibleDescriptionDefault)\n    : null"
     }
   }; }
 }

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

@@ -36,11 +36,11 @@
 .duet-tab-group-tabs.duet-m-0 {
   margin: 0 !important;
 }
-.duet-tab-group-tabs.duet-tab-group-hidden {
+.duet-tab-group-tabs.duet-tab-group-collapses.duet-tab-group-hidden {
   display: none;
 }
 @media (min-width: 36em) {
-  .duet-tab-group-tabs.duet-tab-group-hidden {
+  .duet-tab-group-tabs.duet-tab-group-collapses.duet-tab-group-hidden {
     display: block;
   }
 }
@@ -76,7 +76,6 @@
   cursor: pointer;
   background: white;
   border: 2px solid #e1e3e6;
-  border-style: solid;
   border-radius: 0;
   transition: 150ms ease;
 }

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

@@ -19,6 +19,15 @@ export class DuetTabGroup {
      * 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;
     /**
      * Style variation of the tab group.
      */
@@ -73,12 +82,18 @@ export class DuetTabGroup {
         button.focus();
       }
     };
-    this.renderTab = (tab, index) => {
-      return (h("button", { role: "tab", id: this.getButtonId(index), "aria-controls": this.getTabId(index), "aria-selected": tab.selected ? "true" : "false", type: "button", class: {
-          "duet-p-0": this.padding === "none",
-          "duet-tab-button": true,
-          selected: tab.selected,
-        }, onClick: () => this.openTab(index), onKeyDown: ev => this.handleKeyDown(ev) }, tab.label));
+    this.renderTab = () => {
+      const renderedTabs = this.tabs.map((element, index) => {
+        return (h("button", { role: "tab", id: this.getButtonId(index), "aria-controls": this.getTabId(index), "aria-selected": element.selected ? "true" : "false", "aria-description": this.getAccessibleDescription(index), type: "button", class: {
+            "duet-p-0": this.padding === "none",
+            "duet-tab-button": true,
+            selected: element.selected,
+          }, onClick: () => this.openTab(index), onKeyDown: ev => this.handleKeyDown(ev) }, element.label));
+      });
+      if (this.scrolls) {
+        return h("duet-scrollable", { selected: this.selected }, renderedTabs);
+      }
+      return renderedTabs;
     };
   }
   /**
@@ -97,7 +112,7 @@ export class DuetTabGroup {
         subtree: true,
       });
     }
-    this.updateTabs();
+    await this.updateTabs();
   }
   disconnectedCallback() {
     if (this.mutationO) {
@@ -138,19 +153,27 @@ export class DuetTabGroup {
   /**
    * 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");
+    }
+    // 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() {
-    const allTabs = Array.from(this.element.querySelectorAll("duet-tab"));
-    // filter out any nested tabs
-    this.tabs = allTabs.filter(tab => tab.closest("duet-tab-group") === this.element);
-    if (this.tabs.length === 0) {
-      throw new Error("[duet-tabs] Must have at least one tab");
-    }
+    this.tabs = this.getTabs();
     this.tabs.forEach((tab, index) => {
       tab.id = this.getTabId(index);
       tab.setAttribute("aria-labelledby", this.getButtonId(index));
@@ -158,6 +181,7 @@ export class DuetTabGroup {
         this.selected = index;
       }
     });
+    return;
   }
   /**
    * render() function
@@ -168,20 +192,23 @@ export class DuetTabGroup {
         "duet-tab-group": true,
         "duet-theme-turva": this.theme === "turva",
         [`duet-tab-variation-${this.variation}`]: true,
+        "duet-tab-group-scrolls": this.scrolls,
+        "duet-tab-group-collapses": this.collapses,
       } },
-      this.tabs.length > 3 && (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) => {
+      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,
-        } }, this.tabs.map(this.renderTab)),
+          "duet-tab-group-collapses": this.collapses,
+        } }, this.renderTab()),
       h("div", { 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 "scoped"; }
+  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["duet-tab-group.scss"]
   }; }
@@ -212,6 +239,42 @@ export class DuetTabGroup {
       "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"
+    },
     "variation": {
       "type": "string",
       "mutable": false,

package/lib/custom-elements-bundle/index.d.ts

@@ -254,6 +254,12 @@ export const DuetRangeSlider: {
   new (): DuetRangeSlider;
 };
 
+interface DuetScrollable extends Components.DuetScrollable, HTMLElement {}
+export const DuetScrollable: {
+  prototype: DuetScrollable;
+  new (): DuetScrollable;
+};
+
 interface DuetSelect extends Components.DuetSelect, HTMLElement {}
 export const DuetSelect: {
   prototype: DuetSelect;