@duetds/components 4.34.2 → 4.35.1

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;
   }
 }
@@ -48,7 +48,7 @@
   border-bottom: 1px solid #e1e3e6;
 }
 .duet-theme-turva.duet-tab-variation-plain .duet-tab-group-tabs {
-  border-bottom-color: #e4e4e6 !important;
+  border-bottom-color: #e4e4e6;
 }
 
 @media (min-width: 36em) {
@@ -70,13 +70,12 @@
   font-size: 1rem;
   font-weight: 600;
   line-height: 1.1;
-  color: #00294d !important;
+  color: #00294d;
   text-align: left;
   text-decoration: none;
   cursor: pointer;
   background: white;
   border: 2px solid #e1e3e6;
-  border-style: solid;
   border-radius: 0;
   transition: 150ms ease;
 }
@@ -88,7 +87,7 @@
 }
 .duet-theme-turva .duet-tab-button {
   font-family: "turva-sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  color: #171c3a !important;
+  color: #171c3a;
   border-color: #e4e4e6;
 }
 .duet-tab-button.duet-p-0 {
@@ -108,7 +107,7 @@
   border-color: #909599;
 }
 .duet-theme-turva .duet-tab-button:hover {
-  border-color: #747475 !important;
+  border-color: #747475;
 }
 .duet-tab-button:active {
   opacity: 0.75;
@@ -116,16 +115,16 @@
 }
 .duet-tab-button.selected {
   z-index: 201;
-  color: white !important;
+  color: white;
   background: #00294d;
   border-color: #00294d;
   outline: 0;
   box-shadow: none !important;
 }
 .duet-theme-turva .duet-tab-button.selected {
-  color: white !important;
+  color: white;
   background-color: #171c3a;
-  border-color: #171c3a !important;
+  border-color: #171c3a;
 }
 .duet-tab-button:focus {
   z-index: 200;
@@ -171,13 +170,13 @@
   margin-left: 36px;
 }
 .duet-tab-variation-plain .duet-tab-button.selected {
-  color: #0077b3 !important;
+  color: #0077b3;
   background: white;
   border-bottom: 3px solid #0077b3;
 }
 .duet-theme-turva.duet-tab-variation-plain .duet-tab-button.selected {
-  color: #c60c30 !important;
-  border-bottom-color: #c60c30 !important;
+  color: #c60c30;
+  border-bottom-color: #c60c30;
 }
 
 .duet-tab-group-content {

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() {
@@ -739,6 +742,15 @@ export class DuetUpload {
     this.nativeInput.click();
     return;
   }
+  /**
+   * Method for forcing a render of the upload list, element.files can be changed externally
+   * But it will only rerender on a new Map or a top Level change - this can be used to update
+   * the tabular data if the automatic re-render is no sufficient
+   */
+  async refresh() {
+    this.kick();
+    await this.setFocus();
+  }
   /**
    * Get list of files, divided in errors and valid sections
    */
@@ -766,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" }),
@@ -1835,6 +1847,22 @@ export class DuetUpload {
         "tags": []
       }
     },
+    "refresh": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Method for forcing a render of the upload list, element.files can be changed externally\nBut it will only rerender on a new Map or a top Level change - this can be used to update\nthe tabular data if the automatic re-render is no sufficient",
+        "tags": []
+      }
+    },
     "getFiles": {
       "complexType": {
         "signature": "() => Promise<false | { valid: any[]; invalid: any[]; }>",

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

@@ -14,6 +14,18 @@ export const DuetBadge: {
   new (): DuetBadge;
 };
 
+interface DuetBreadcrumb extends Components.DuetBreadcrumb, HTMLElement {}
+export const DuetBreadcrumb: {
+  prototype: DuetBreadcrumb;
+  new (): DuetBreadcrumb;
+};
+
+interface DuetBreadcrumbs extends Components.DuetBreadcrumbs, HTMLElement {}
+export const DuetBreadcrumbs: {
+  prototype: DuetBreadcrumbs;
+  new (): DuetBreadcrumbs;
+};
+
 interface DuetButton extends Components.DuetButton, HTMLElement {}
 export const DuetButton: {
   prototype: DuetButton;
@@ -242,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;