@duetds/components 5.0.5 → 5.1.2

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

@@ -45,6 +45,7 @@ export class DuetHeader {
      */
     this.isContactOpen = false;
     this.isLanguageOpen = false;
+    this.isSessionOpen = false;
     this.isSlideOutOpen = false;
     this.isSegmentOpen = false;
     this.openMenu = null;
@@ -196,6 +197,11 @@ export class DuetHeader {
       this.handleClick(e);
       this.duetSessionClick.emit(e);
     };
+    this.handleSessionItemClick = (ev, item) => {
+      const e = createEvent(ev, item);
+      this.handleClick(e);
+      this.duetSessionClick.emit(e);
+    };
     this.handleSearchClick = (ev) => {
       const e = createEvent(ev, this.processedSearch);
       this.handleClick(e);
@@ -258,13 +264,23 @@ export class DuetHeader {
         this.isContactOpen = false;
         this.isLanguageOpen = !this.isLanguageOpen;
         this.isSegmentOpen = false;
+        this.isSessionOpen = false;
         el = this.languageItemsEl;
       }
+      // For session menu
+      if (type === "session") {
+        this.isContactOpen = false;
+        this.isLanguageOpen = false;
+        this.isSegmentOpen = false;
+        this.isSessionOpen = !this.isSessionOpen;
+        el = this.sessionItemsEl;
+      }
       // For contact menu
       else if (type === "contact") {
         this.isLanguageOpen = false;
         this.isContactOpen = !this.isContactOpen;
         this.isSegmentOpen = false;
+        this.isSessionOpen = false;
         el = this.contactItemsEl;
       }
       // For mobile menu
@@ -272,8 +288,11 @@ export class DuetHeader {
         this.isContactOpen = false;
         this.isLanguageOpen = false;
         this.isSegmentOpen = false;
+        this.isSessionOpen = false;
         el = this.navigationEl;
-        this.isSlideOutOpen = !this.isSlideOutOpen;
+        const toggle = !this.isSlideOutOpen;
+        this.isSlideOutOpen = toggle;
+        this.duetMobileNavToggle.emit({ originalEvent: ev, open: toggle });
         if (this.isSlideOutOpen) {
           disableBodyScroll(this.navigationEl, { reserveScrollBarGap: true });
         }
@@ -285,15 +304,22 @@ export class DuetHeader {
         this.isContactOpen = false;
         this.isLanguageOpen = false;
         this.isSegmentOpen = false;
+        this.isSessionOpen = false;
         el = this.subMenuItemRefs[id];
       }
       else if (type === "segment") {
         this.isContactOpen = false;
         this.isLanguageOpen = false;
+        this.isSessionOpen = false;
         this.isSegmentOpen = !this.isSegmentOpen;
         el = this.segmentItemsEl;
       }
-      if (this.isSlideOutOpen || this.isLanguageOpen || this.isContactOpen || this.isSegmentOpen || this.openMenu) {
+      if (this.isSlideOutOpen ||
+        this.isLanguageOpen ||
+        this.isContactOpen ||
+        this.isSegmentOpen ||
+        this.isSessionOpen ||
+        this.openMenu) {
         const drawer = this.element.querySelector("duet-notification-drawer");
         if (drawer) {
           drawer.close(false);
@@ -395,6 +421,9 @@ export class DuetHeader {
     if (this.renderDesktopNav !== this.mql[0].matches) {
       this.renderDesktopNav = this.mql[0].matches;
       this.openMenu = null;
+      if (this.isSlideOutOpen) {
+        this.toggleMenu(document.createEvent("UIEvents"), "mobile");
+      }
     }
     this.processedItems = parsePossibleJSON(this.items);
     this.processedLanguageItems = parsePossibleJSON(this.languageItems);
@@ -417,7 +446,7 @@ export class DuetHeader {
    * Closes all dropdown menus in header when called.
    */
   async closeMenus(moveFocusToButton = false) {
-    if (this.isContactOpen || this.isLanguageOpen || this.isSegmentOpen || this.openMenu) {
+    if (this.isContactOpen || this.isLanguageOpen || this.isSegmentOpen || this.isSessionOpen || this.openMenu) {
       if (this.isContactOpen && moveFocusToButton) {
         this.contactItemsButtonEl.focus({
           preventScroll: true,
@@ -433,6 +462,11 @@ export class DuetHeader {
           preventScroll: true,
         });
       }
+      if (this.isSessionOpen && moveFocusToButton) {
+        this.sessionItemsButtonEl.focus({
+          preventScroll: true,
+        });
+      }
       if (this.openMenu && moveFocusToButton) {
         this.subMenuButtonRefs[this.openMenu].focus({
           preventScroll: true,
@@ -441,6 +475,7 @@ export class DuetHeader {
       this.isContactOpen = false;
       this.isLanguageOpen = false;
       this.isSegmentOpen = false;
+      this.isSessionOpen = false;
       this.openMenu = null;
     }
   }
@@ -479,6 +514,13 @@ export class DuetHeader {
     const processedSession = this.processedSession ? (h("a", { href: this.processedSession.href || "#", id: this.processedSession.id, class: "duet-header-logout duet-header-button", onClick: this.handleSessionClick },
       h(DuetHeaderIcon, { icon: this.processedSession.type === "logout" ? logoutIcon.svg : loginIcon.svg, iconSize: processedSessionIconSize }),
       h("span", { class: "duet-header-button-label" }, this.processedSession.label))) : null;
+    const processedSessionDropdown = this.processedSession && this.processedSession.sessionItems ? (h(DuetHeaderDropdown, { className: "duet-header-session", id: "duet-header-session", label: this.processedSession.label, icon: this.processedSession.type === "logout" ? logoutIcon.svg : loginIcon.svg, active: this.isSessionOpen, isOpen: this.isSessionOpen, badge: false, toggleRef: el => (this.sessionItemsButtonEl = el), itemsRef: el => (this.sessionItemsEl = el), onToggle: event => this.toggleMenu(event, "session") }, this.processedSession.sessionItems.map((sessionItem, index) => (h(Fragment, null,
+      sessionItem.label && h("span", { class: "duet-header-session-label" }, sessionItem.label),
+      h("duet-spacer", { size: "small", "aria-hidden": "true" }),
+      sessionItem.items.map(item => (h("a", { role: "menuitem", "aria-label": sessionItem.label ? `${sessionItem.label} ${item.label}` : item.label, id: item.id, href: item.href || "#", onClick: event => this.handleSessionItemClick(event, item), onKeyDown: this.handleArrowKeys }, item.label))),
+      index !== this.processedSession.sessionItems.length - 1 && (h(Fragment, null,
+        h("duet-spacer", { size: "x-small", "aria-hidden": "true" }),
+        h("duet-divider", { margin: "none", "aria-hidden": "true" })))))))) : null;
     const processedSearch = this.processedSearch ? (h("a", { href: this.processedSearch.href || "#", id: this.processedSearch.id, class: "duet-header-search duet-header-button", onClick: this.handleSearchClick },
       h(DuetHeaderIcon, { icon: searchIcon.svg }),
       h("span", { class: "duet-header-button-label" }, this.processedSearch.label))) : null;
@@ -519,7 +561,7 @@ export class DuetHeader {
             h("div", { class: "duet-header-top" },
               skipToLabel,
               h("div", { class: "logo-and-segment" },
-                largeLogo,
+                h("div", null, largeLogo),
                 this.processedItems && (h(DuetHeaderDropdown, { id: segmentId, label: activeSegment.label, active: this.isSegmentOpen, isOpen: this.isSegmentOpen, badge: false, toggleRef: el => (this.segmentItemsButtonEl = el), itemsRef: el => (this.segmentItemsEl = el), onToggle: event => this.toggleMenu(event, "segment") }, this.processedItems.map(item => (h("a", { class: { active: activeSegment === item }, role: "menuitem", href: item.href || "#", id: item.id, onClick: event => this.handleItemClick(event, item), onKeyDown: ev => this.handleArrowKeys(ev), target: item.external ? "_blank" : "_self" },
                   item.icon && (h("div", { class: "duet-header-icon" },
                     h("duet-icon", { margin: "none", size: "x-small", name: item.icon, color: "currentColor" }))),
@@ -540,7 +582,7 @@ export class DuetHeader {
               h("div", { class: "duet-header-multi-level-desktop-utils" },
                 processedSearch,
                 languageDropdown,
-                processedSession),
+                processedSessionDropdown != null ? processedSessionDropdown : processedSession),
               h("slot", { name: "utility" }))))));
     }
     // Default variation
@@ -1048,6 +1090,7 @@ export class DuetHeader {
   static get states() { return {
     "isContactOpen": {},
     "isLanguageOpen": {},
+    "isSessionOpen": {},
     "isSlideOutOpen": {},
     "isSegmentOpen": {},
     "openMenu": {},
@@ -1273,6 +1316,25 @@ export class DuetHeader {
           }
         }
       }
+    }, {
+      "method": "duetMobileNavToggle",
+      "name": "duetMobileNavToggle",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event raised mobile navigation is toggled. **event.detail.open** shows the current status of the navigation."
+      },
+      "complexType": {
+        "original": "DuetHeaderMobileNavToggleEvent",
+        "resolved": "{ originalEvent: Event; open: boolean; }",
+        "references": {
+          "DuetHeaderMobileNavToggleEvent": {
+            "location": "local"
+          }
+        }
+      }
     }]; }
   static get methods() { return {
     "closeMenus": {

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

@@ -26,6 +26,10 @@ export class DuetInput {
      * Indicates the id of a component that describes the input.
      */
     this.accessibleDescribedBy = "";
+    /**
+     * Indicates value of any popup element associated with the input.
+     */
+    this.accessibleHasPopup = undefined;
     /**
      * Set the amount of time, in milliseconds, to wait to trigger the duetChange
      * event after each keystroke.
@@ -193,6 +197,17 @@ export class DuetInput {
       this.nativeInput.focus(options);
     }
   }
+  /**
+   * Reset the cursor position on the native element
+   * `input.resetCursor()`.
+   */
+  async resetCursor() {
+    if (this.nativeInput) {
+      const restoreCursor = resetCursor(this.nativeInput);
+      this.nativeInput.value = this.value;
+      restoreCursor();
+    }
+  }
   /**
    * render() function
    * Always the last one in the class.
@@ -229,7 +244,7 @@ export class DuetInput {
               disabled: this.disabled,
               "is-number": this.component === "number",
               "is-date": this.component === "date",
-            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)),
+            }, value: this.value, disabled: this.disabled, "aria-invalid": this.error ? "true" : "false", "aria-labelledby": `${this.labelId} ${this.errorId}`, "aria-controls": this.accessibleControls, "aria-autocomplete": this.accessibleAutocomplete, "aria-activedescendant": this.accessibleActiveDescendant, "aria-expanded": this.accessibleExpanded, "aria-haspopup": this.accessibleHasPopup, "aria-owns": this.accessibleOwns, "aria-describedby": this.getDescribedBy(), placeholder: this.placeholder, spellcheck: "false", minlength: this.minlength, maxlength: this.maxlength, autocomplete: this.autoComplete, required: this.required, role: this.role, name: this.name, id: identifier }, inputProps)),
           !this.icon && this.type !== "text" && this.type !== "tel" && this.type !== "password" && (h("div", { class: "duet-input-icon" },
             h("duet-icon", { margin: "none", size: "small", icon: icons[this.type].svg, color: "currentColor" }))),
           this.icon && (h("div", { class: "duet-input-icon" },
@@ -314,6 +329,23 @@ export class DuetInput {
       "attribute": "accessible-owns",
       "reflect": false
     },
+    "accessibleExpanded": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Expanded state of the element, if needed"
+      },
+      "attribute": "accessible-expanded",
+      "reflect": false
+    },
     "accessibleDescribedBy": {
       "type": "string",
       "mutable": false,
@@ -332,6 +364,24 @@ export class DuetInput {
       "reflect": false,
       "defaultValue": "\"\""
     },
+    "accessibleHasPopup": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Indicates value of any popup element associated with the input."
+      },
+      "attribute": "accessible-has-popup",
+      "reflect": false,
+      "defaultValue": "undefined"
+    },
     "debounce": {
       "type": "number",
       "mutable": false,
@@ -936,6 +986,22 @@ export class DuetInput {
         "text": "Sets focus on the specified `duet-input`. Use this method instead of the global\n`input.focus()`.",
         "tags": []
       }
+    },
+    "resetCursor": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "Reset the cursor position on the native element\n`input.resetCursor()`.",
+        "tags": []
+      }
     }
   }; }
   static get elementRef() { return "element"; }

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

@@ -32,6 +32,10 @@ export class DuetTabGroup {
      * 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.
      */
@@ -92,7 +96,7 @@ export class DuetTabGroup {
     };
     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 ${element.selected ? `${this.identifier}-button--selected` : ""}`, type: "button", class: {
+        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), 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,
             selected: element.selected,
@@ -202,7 +206,7 @@ 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() };
         }) })),
@@ -212,7 +216,7 @@ export class DuetTabGroup {
           "duet-tab-group-hidden": this.tabs.length > 3,
           "duet-tab-group-collapses": this.collapses,
         } }, this.renderTab()),
-      h("div", { class: { "duet-tab-group-content": true, "duet-m-0": this.margin === "none" } },
+      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"; }
@@ -283,6 +287,24 @@ export class DuetTabGroup {
       "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,

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

@@ -62,6 +62,10 @@
   font-weight: 400;
   background-color: #f5f8fa;
 }
+.duet-upload-filelist-empty-label {
+  font-size: 1rem;
+  font-weight: 400;
+}
 .duet-upload-editable-table-header-hidden {
   display: none;
 }
@@ -86,4 +90,12 @@
 }
 .duet-upload-editable-table duet-editable-table .duet-editable-table-row-inprogress duet-action-button::part(button) {
   border: 0;
+}
+.duet-upload-editable-table .duet-upload-item-name duet-icon {
+  position: relative;
+  top: 2px;
+}
+
+duet-paragraph::part(duet-paragraph) {
+  word-break: break-word;
 }

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

@@ -769,7 +769,10 @@ export class DuetUpload {
             "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)),
+          }, id: this.labelId, for: identifier },
+          h("span", { class: {
+              "duet-upload-filelist-empty-label": !this.files.size,
+            } }, 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 && this.renderEditableTableGroups(),

package/lib/collection/components/duet-upload/upload-editable-item-success.js

@@ -7,7 +7,7 @@ export const SuccessItem = ({ data, showLinks }) => {
   const { item, size, uploaded, url, meta } = data;
   const { name } = item;
   const ContentName = (h("span", { class: "duet-upload-item-name" },
-    h("duet-icon", { margin: "none", size: "xx-small", name: "messaging-attachment" }),
+    h("duet-icon", { margin: "none", size: "x-small", name: "messaging-attachment" }),
     h("duet-spacer", { size: "xx-small", direction: "horizontal" }),
     name));
   const SizeText = (h("span", { class: "duet-upload-item-size", style: { fontSize: "14px", fontWeight: "400" } },

package/lib/collection/utils/input-utils.js

@@ -23,7 +23,7 @@ export function resetCursor(domElement) {
       }
     };
   }
-  return () => console.log("domElement not valid");
+  return () => true;
 }
 /**
  * Given an input and a regex, remove any characters from the input's value

package/lib/collection/utils/string-utils.js

@@ -14,6 +14,12 @@ export const parsePossibleJSON = (maybeJSON) => {
     }
     catch (e) {
       console.warn(e);
+      try {
+        return JSON.parse(convertHtmlQuotes(maybeJSON));
+      }
+      catch (e) {
+        console.warn(e);
+      }
     }
   }
   // undefined is not a type in JSON,

package/lib/collection/utils/themeable-component.js

@@ -2,7 +2,10 @@
  * Built with Duet Design System
  */
 export const inheritGlobalTheme = (component) => {
-  if (component.theme !== "default" && document.documentElement.classList.contains("duet-theme-turva")) {
-    component.theme = "turva";
+  // this minor change enables duet-theme-XXXXX instead of just duet-theme-turva
+  const classList = Array.from(document.documentElement.classList).join(" ") || "";
+  const theme = /(duet-theme-)([a-z]*)/gis.exec(classList);
+  if (theme && theme[1] === "duet-theme-") {
+    component.theme = theme[2] === "default" ? "" : theme[2];
   }
 };

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

@@ -74,6 +74,12 @@ export const DuetCollapsible: {
   new (): DuetCollapsible;
 };
 
+interface DuetCombobox extends Components.DuetCombobox, HTMLElement {}
+export const DuetCombobox: {
+  prototype: DuetCombobox;
+  new (): DuetCombobox;
+};
+
 interface DuetCookieConsent extends Components.DuetCookieConsent, HTMLElement {}
 export const DuetCookieConsent: {
   prototype: DuetCookieConsent;