@duetds/components 5.0.3 → 5.1.0

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

@@ -838,11 +838,23 @@ button {
     transition: 300ms ease;
     transform: scale(0.85) translateZ(0) translateY(-20px);
   }
+  .duet-header-dropdown .duet-header-dropdown-content.duet-header-session-items {
+    right: 0%;
+    left: auto;
+    min-width: 225px;
+  }
+  .duet-header-dropdown .duet-header-dropdown-content.duet-header-session-items .duet-header-session-label {
+    padding: 0 20px;
+    font-weight: 600;
+  }
 }
 @media (min-width: 64.0625em) {
   .duet-header-dropdown .duet-header-dropdown-content {
     min-width: 170px;
   }
+  .duet-header-dropdown .duet-header-dropdown-content.duet-header-session-items {
+    min-width: 225px;
+  }
 }
 .duet-header-dropdown .duet-header-dropdown-content.active {
   display: block;
@@ -1105,6 +1117,9 @@ button {
 .duet-header-multi-level-desktop-utils > :last-child::before {
   display: none;
 }
+.duet-header-multi-level-desktop-utils > :last-child.duet-header-dropdown .duet-header-button::before {
+  display: none;
+}
 .duet-header-multi-level-desktop-utils .duet-header-dropdown {
   z-index: 400;
 }

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,6 +288,7 @@ export class DuetHeader {
         this.isContactOpen = false;
         this.isLanguageOpen = false;
         this.isSegmentOpen = false;
+        this.isSessionOpen = false;
         el = this.navigationEl;
         this.isSlideOutOpen = !this.isSlideOutOpen;
         if (this.isSlideOutOpen) {
@@ -285,15 +302,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);
@@ -417,7 +441,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 +457,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 +470,7 @@ export class DuetHeader {
       this.isContactOpen = false;
       this.isLanguageOpen = false;
       this.isSegmentOpen = false;
+      this.isSessionOpen = false;
       this.openMenu = null;
     }
   }
@@ -479,6 +509,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;
@@ -540,7 +577,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 +1085,7 @@ export class DuetHeader {
   static get states() { return {
     "isContactOpen": {},
     "isLanguageOpen": {},
+    "isSessionOpen": {},
     "isSlideOutOpen": {},
     "isSegmentOpen": {},
     "openMenu": {},

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

@@ -22,6 +22,14 @@ export class DuetInput {
     this.topCaptionPlaceholderId = createID("DuetCaptionPlaceholderTop");
     this.errorId = createID("DuetError");
     this.disallowPatternRegex = null;
+    /**
+     * 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.
@@ -127,6 +135,25 @@ export class DuetInput {
         component: "duet-input",
       });
     };
+    /** Private functions
+     *
+     */
+    this.getDescribedBy = () => {
+      let describedBy = "";
+      if (this.isCaptionVisible && this.topCaptionId) {
+        describedBy = this.topCaptionId;
+        if (this.accessibleDescribedBy) {
+          describedBy += " " + this.accessibleDescribedBy;
+        }
+      }
+      else if (this.accessibleDescribedBy.length > 0) {
+        describedBy = this.accessibleDescribedBy;
+      }
+      else {
+        describedBy = undefined;
+      }
+      return describedBy;
+    };
   }
   disallowedPatternChange() {
     this.disallowPatternRegex = this.disallowPattern ? new RegExp(this.disallowPattern, "g") : null;
@@ -170,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.
@@ -206,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.isCaptionVisible ? this.topCaptionId : ""} ${this.accessibleDescribedBy}`, 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" },
@@ -291,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,
@@ -306,7 +361,26 @@ export class DuetInput {
         "text": "Indicates the id of a component that describes the input."
       },
       "attribute": "accessible-described-by",
-      "reflect": false
+      "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",
@@ -912,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-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/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;