@duetds/components 4.34.4 → 4.35.2

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.
      */
@@ -48,6 +57,10 @@ export class DuetTabGroup {
      * 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.
      */
@@ -73,12 +86,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), part: `${this.identifier}-button`, 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, identifier: this.identifier }, renderedTabs));
+      }
+      return renderedTabs;
     };
   }
   /**
@@ -97,7 +116,7 @@ export class DuetTabGroup {
         subtree: true,
       });
     }
-    this.updateTabs();
+    await this.updateTabs();
   }
   disconnectedCallback() {
     if (this.mutationO) {
@@ -138,19 +157,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 +185,7 @@ export class DuetTabGroup {
         this.selected = index;
       }
     });
+    return;
   }
   /**
    * render() function
@@ -168,20 +196,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 +243,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,
@@ -328,6 +395,24 @@ export class DuetTabGroup {
       "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,

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

@@ -16,6 +16,9 @@ import { makeXhrRequest } from "./xhr.helpers";
  * @slot header  - named slot - to place content after description / caption
  * @slot fileheader - named slot - to place content above "filelist" (only displayed when "filelist" contains items)
  * @slot filefooter - named slot - to place content below "filelist" (only displayed when "filelist" contains items)
+ * @part ${this.identifier}-empty-state : duet-upload-empty-state - named part - can be used to style the empty notification area or hide it completely
+ * @part ${this.identifier}-editable-table : duet-upload-editable-table - named part - can be used to style the editable-table
+ * @part ${this.identifier}-error-notification : duet-upload-error-notification - named part - can be used to style any error notifications occurring internally
  */
 export class DuetUpload {
   constructor() {
@@ -775,19 +778,19 @@ export class DuetUpload {
     return (h(Host, { class: { "duet-m-0": this.margin === "none" } },
       h("duet-fieldset", { label: this.label, caption: caption },
         h("slot", { name: "header" }),
-        !this.files.size && (h("duet-label", { theme: this.theme === "turva" ? "turva" : "default", size: "small", class: {
+        !this.files.size && (h("duet-label", { part: this.identifier ? `${this.identifier}-empty-state` : "duet-upload-empty-state", theme: this.theme === "turva" ? "turva" : "default", size: "small", class: {
             "duet-upload-filelist-empty": !this.files.size,
             "duet-upload-filelist": true,
             "duet-upload-filelist-filled": this.files.size,
           }, id: this.labelId, for: identifier }, this.fileListEmpty)),
         !!this.files.size && h("slot", { name: "fileheader" }),
         !!this.files.size && (h("duet-upload-aria-status", { invalid: this.getFilesAsArray().invalid.length, valid: this.getFilesAsArray().valid.length, inprogress: this.filesInProgress.size, total: this.files.size, statusMessageLabel: this.internalStatusMessageLabel })),
-        !!this.files.size && (h("duet-editable-table", { "aria-live": "polite", "aria-relevant": "removals", accessibleRole: "log", id: this.editableTableId, groups: this.groups, actions: this.actions, hideGroups: this.hideGroups, alignment: this.alignment, items: this.convertToDuetEditableTableItems() })),
+        !!this.files.size && (h("duet-editable-table", { part: this.identifier ? `${this.identifier}-editable-table` : "duet-upload-editable-table", "aria-live": "polite", "aria-relevant": "removals", accessibleRole: "log", id: this.editableTableId, groups: this.groups, actions: this.actions, hideGroups: this.hideGroups, alignment: this.alignment, items: this.convertToDuetEditableTableItems() })),
         !!this.files.size && h("slot", { name: "filefooter" }),
         h("duet-spacer", { size: "large" }),
-        !this.hideButton && (h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle" }, this.buttonLabel)),
+        !this.hideButton && (h("duet-button", { id: this.buttonId, onClick: this.startUpload, "accessible-controls": identifier, disabled: this.fileMaxReached, "accessible-label": this.accessibleButtonLabel, "accessible-owns": identifier, size: "small", variation: "secondary", fixed: true, icon: "action-add-circle", part: this.identifier ? `${this.identifier}-button-upload` : "duet-upload-button-upload" }, this.buttonLabel)),
         h("duet-spacer", { size: "medium" }),
-        (this.fileMaxReached || this.bytesMaxReached) && (h("duet-alert", null,
+        (this.fileMaxReached || this.bytesMaxReached) && (h("duet-alert", { part: this.identifier ? `${this.identifier}-error-notification` : "duet-upload-error-notification" },
           this.fileMaxReached && getI18nError("duet-upload-301"),
           this.bytesMaxReached && getI18nError("duet-upload-202"))),
         h("duet-spacer", { size: "medium" }),

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;