@duetds/components 5.4.1 → 5.4.2

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

@@ -25,7 +25,7 @@ const createEvent = (ev, data) => ({
 });
 /**
  * @slot utility - A slot for utilities, such as a notification drawer or shopping basket.
- * @slot logo-utility - A slot to place elements alongside the logo. This takes precedence over the **region** prop. Note: not available in desktop multilevel header.
+ * @slot logo-utility - A slot to place elements alongside the logo. This takes precedence over the **region** prop. Note: not available in multilevel header.
  * @part header - piercing selector for styling the header element.
  */
 export class DuetHeader {
@@ -57,7 +57,7 @@ export class DuetHeader {
     this.processedSearch = null;
     this.processedUser = null;
     this.processedBack = null;
-    this.renderDesktopNav = (_a = this.mql[0]) === null || _a === void 0 ? void 0 : _a.matches;
+    this.renderDesktopNav = Build.isServer ? true : (_a = this.mql[0]) === null || _a === void 0 ? void 0 : _a.matches;
     /**
      * Theme of the header.
      */
@@ -173,7 +173,7 @@ export class DuetHeader {
     this.skipToId = "";
     /**
      * Region that is shown next to the logo. If empty, region will be hidden.
-     * Note: not available in desktop multilevel header.
+     * Note: not available in multilevel header.
      */
     this.region = "";
     /**
@@ -418,8 +418,9 @@ export class DuetHeader {
    * Local methods.
    */
   async refresh() {
-    if (this.renderDesktopNav !== this.mql[0].matches) {
-      this.renderDesktopNav = this.mql[0].matches;
+    var _a, _b;
+    if (this.renderDesktopNav !== Build.isServer ? true : (_a = this.mql[0]) === null || _a === void 0 ? void 0 : _a.matches) {
+      this.renderDesktopNav = Build.isServer ? true : (_b = this.mql[0]) === null || _b === void 0 ? void 0 : _b.matches;
       this.openMenu = null;
       if (this.isSlideOutOpen) {
         this.toggleMenu(document.createEvent("UIEvents"), "mobile");
@@ -492,10 +493,10 @@ export class DuetHeader {
    */
   render() {
     const { skipLabel, changeLanguage, activeLanguage } = this.accessibleI18nLabels;
-    const skipToLabel = this.skipToId ? (h("a", { href: this.skipToId, class: "duet-header-skip", onClick: this.handleSkipClick }, skipLabel)) : null;
-    const logo = (h("duet-logo", { href: this.logoHref, size: "medium", ref: el => (this.logoEl = el), language: this.language, theme: this.theme, onClick: this.handleLogoClick }));
-    const largeLogo = (h("duet-logo", { href: this.logoHref, size: "large", ref: el => (this.logoEl = el), language: this.language, theme: this.theme, onClick: this.handleLogoClick }));
-    const contactDropdown = this.contact && this.processedContactItems ? (h(DuetHeaderDropdown, { id: "duet-header-contact", label: this.contact, icon: contactDropdownIcon.svg, active: this.isContactOpen, isOpen: this.isContactOpen, badge: false, toggleRef: el => (this.contactItemsButtonEl = el), itemsRef: el => (this.contactItemsEl = el), onToggle: event => this.toggleMenu(event, "contact") }, this.processedContactItems.map(item => (h("a", { role: "menuitem", href: item.href || "#", id: item.id, onClick: event => this.handleContactClick(event, item), onKeyDown: ev => this.handleArrowKeys(ev), target: item.external ? "_blank" : "_self" },
+    const skipToLabel = () => this.skipToId ? (h("a", { href: this.skipToId, class: "duet-header-skip", onClick: this.handleSkipClick }, skipLabel)) : null;
+    const logo = () => (h("duet-logo", { href: this.logoHref, size: "medium", ref: el => (this.logoEl = el), language: this.language, theme: this.theme, onClick: this.handleLogoClick }));
+    const largeLogo = () => (h("duet-logo", { href: this.logoHref, size: "large", ref: el => (this.logoEl = el), language: this.language, theme: this.theme, onClick: this.handleLogoClick }));
+    const contactDropdown = () => this.contact && this.processedContactItems ? (h(DuetHeaderDropdown, { id: "duet-header-contact", label: this.contact, icon: contactDropdownIcon.svg, active: this.isContactOpen, isOpen: this.isContactOpen, badge: false, toggleRef: el => (this.contactItemsButtonEl = el), itemsRef: el => (this.contactItemsEl = el), onToggle: event => this.toggleMenu(event, "contact") }, this.processedContactItems.map(item => (h("a", { role: "menuitem", href: item.href || "#", id: item.id, onClick: event => this.handleContactClick(event, item), onKeyDown: ev => this.handleArrowKeys(ev), target: item.external ? "_blank" : "_self" },
       item.label,
       Build.isBrowser && item.external && (h(Fragment, null,
         h("duet-visually-hidden", null,
@@ -503,25 +504,25 @@ export class DuetHeader {
           this.accessibleLabelExternal),
         h("span", { class: "duet-header-link-external" },
           h("duet-icon", { name: "action-new-window-small", size: "xx-small", margin: "none", color: this.theme === "turva" ? "primary-turva" : "primary" }))))))))) : null;
-    const languageDropdown = this.language && this.processedLanguageItems ? (h(DuetHeaderDropdown, { id: "duet-header-language", label: this.language, icon: languageIcon.svg, accessibleText: `${changeLanguage}${this.hasLanguageChanged ? `, ${activeLanguage}` : ""}`, active: this.isLanguageOpen, isOpen: this.isLanguageOpen, badge: false, toggleRef: el => (this.languageItemsButtonEl = el), itemsRef: el => (this.languageItemsEl = el), onToggle: event => this.toggleMenu(event, "language") }, this.processedLanguageItems.map(item => (h("a", { class: { active: this.language === item.country }, "aria-selected": this.language === item.country, role: "menuitem", id: item.id, lang: item.country, href: item.href || "#", onClick: event => this.handleLanguageClick(event, item), onKeyDown: this.handleArrowKeys }, item.label))))) : null;
-    const processedUserWithLink = this.processedUser && this.processedUser.href ? (h("a", { href: this.processedUser.href || "#", id: this.processedUser.id, class: "duet-header-user duet-header-button", onClick: this.handleUserClick },
+    const languageDropdown = () => this.language && this.processedLanguageItems ? (h(DuetHeaderDropdown, { id: "duet-header-language", label: this.language, icon: languageIcon.svg, accessibleText: `${changeLanguage}${this.hasLanguageChanged ? `, ${activeLanguage}` : ""}`, active: this.isLanguageOpen, isOpen: this.isLanguageOpen, badge: false, toggleRef: el => (this.languageItemsButtonEl = el), itemsRef: el => (this.languageItemsEl = el), onToggle: event => this.toggleMenu(event, "language") }, this.processedLanguageItems.map(item => (h("a", { class: { active: this.language === item.country }, "aria-selected": this.language === item.country, role: "menuitem", id: item.id, lang: item.country, href: item.href || "#", onClick: event => this.handleLanguageClick(event, item), onKeyDown: this.handleArrowKeys }, item.label))))) : null;
+    const processedUserWithLink = () => this.processedUser && this.processedUser.href ? (h("a", { href: this.processedUser.href || "#", id: this.processedUser.id, class: "duet-header-user duet-header-button", onClick: this.handleUserClick },
       h(DuetHeaderIcon, { icon: userIcon.svg }),
       h("span", { class: "duet-header-user-label" }, this.processedUser.label))) : null;
-    const processedUserWithoutLink = this.processedUser && !this.processedUser.href ? (h("span", { id: this.processedUser.id, class: "duet-header-user duet-header-button duet-header-no-action" },
+    const processedUserWithoutLink = () => this.processedUser && !this.processedUser.href ? (h("span", { id: this.processedUser.id, class: "duet-header-user duet-header-button duet-header-no-action" },
       h(DuetHeaderIcon, { icon: userIcon.svg }),
       h("span", { class: "duet-header-user-label" }, this.processedUser.label))) : null;
-    const processedSessionIconSize = this.renderDesktopNav ? "x-small" : "small";
-    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 }),
+    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, { class: "desktop", icon: this.processedSession.type === "logout" ? logoutIcon.svg : loginIcon.svg, iconSize: "x-small" }),
+      h(DuetHeaderIcon, { class: "mobile", icon: this.processedSession.type === "logout" ? logoutIcon.svg : loginIcon.svg, iconSize: "small" }),
       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,
+    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 },
+    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;
     // Back variation
@@ -535,23 +536,104 @@ export class DuetHeader {
               "duet-header-inactive": true,
             }, part: "header" },
             h("div", { class: "duet-header-top" },
-              skipToLabel,
+              skipToLabel(),
               h("duet-button", { url: this.processedBack.href, id: this.processedBack.id, theme: this.theme, variation: "plain", color: this.theme === "turva" ? "secondary-turva" : "secondary", icon: "navigation-arrow-left", iconSize: "large", onClick: this.handleBackClick }, this.processedBack.label),
-              logo,
+              logo(),
               h("slot", { name: "logo-utility" }))))));
     }
-    // multi level desktop variation
     const itemsHaveSubItems = this.processedItems && this.processedItems.some(item => item.items && item.items.length > 0);
-    if (this.renderDesktopNav && itemsHaveSubItems) {
+    const isSecondLevelActive = this.processedItems &&
+      this.processedItems.some(item => item.items && item.items.some(secondLevelItem => secondLevelItem.active === true));
+    const isThirdLevelActive = this.processedItems &&
+      this.processedItems.some(item => item.items &&
+        item.items.some(secondLevelItem => secondLevelItem.items && secondLevelItem.items.some(thirdLevelItem => thirdLevelItem.active === true)));
+    const defaultVariationContent = (h("div", { class: {
+        "duet-header-reserved-space": true,
+        "duet-with-links": !!this.processedItems,
+        "duet-header-second-level-active": isSecondLevelActive,
+        "duet-header-third-level-active": isThirdLevelActive,
+        "duet-header-items-have-sub-items": itemsHaveSubItems,
+      } },
+      h("header", { class: {
+          "duet-header": true,
+          "duet-theme-turva": this.theme === "turva",
+          "duet-header-inactive": !this.processedItems,
+        }, part: "header" },
+        h("div", { class: "duet-header-top" },
+          skipToLabel(),
+          logo(),
+          h("slot", { name: "logo-utility" }, this.region && h("div", { class: "duet-header-region" }, this.region)),
+          (this.processedItems ||
+            languageDropdown() ||
+            contactDropdown() ||
+            this.processedSession ||
+            this.processedUser) && (h("button", { class: { "duet-header-toggle": true, active: this.isSlideOutOpen }, onClick: event => this.toggleMenu(event, "mobile"), type: "button" },
+            h("duet-visually-hidden", null, this.accessibleLabel),
+            h(DuetHeaderHamburger, null)))),
+        h("div", { ref: el => (this.navigationEl = el), class: {
+            "duet-header-bottom": true,
+            active: this.isSlideOutOpen,
+            inactive: !this.processedItems,
+          } },
+          h("nav", { class: "duet-header-items", role: "navigation" }, this.processedItems &&
+            this.processedItems.map((item, itemIndex) => (h("div", { class: "duet-header-item-container" },
+              h("a", { class: {
+                  "duet-header-first-level": true,
+                  "duet-header-item": true,
+                  active: (!itemsHaveSubItems && this.currentHref === item.href) ||
+                    (item.active === true &&
+                      !this.openMenu &&
+                      this.closedActives &&
+                      this.closedActives.length === 1) ||
+                    (item.active === true &&
+                      !this.openMenu &&
+                      item.items &&
+                      !item.items.some(s => s.active === true)),
+                }, href: item.href || "#", id: item.id || `header-item-${itemIndex}`, onClick: event => this.handleItemClick(event, item) },
+                item.label,
+                item.badge && h("div", { class: "duet-header-badge" })),
+              item.items &&
+                item.items
+                  .filter(secondLevelitem => secondLevelitem.items && secondLevelitem.items.length > 0)
+                  .map((secondLevelItem, secondLevelItemIndex) => {
+                  const id = secondLevelItem.id || `header-item-${itemIndex}-${secondLevelItemIndex}`;
+                  const active = (!this.openMenu &&
+                    secondLevelItem.active === true &&
+                    !(this.closedActives && !!this.closedActives.find(i => i === id))) ||
+                    this.openMenu === id;
+                  const activeBar = active && !(secondLevelItem.items && secondLevelItem.items.some(s => s.active === true));
+                  return (h(DuetHeaderDropdown, { id: id, className: "duet-header-second-level", label: secondLevelItem.label, icon: `${secondLevelItem.icon}.svg`, active: activeBar, isOpen: active, badge: secondLevelItem.badge, toggleRef: el => (this.subMenuButtonRefs[id] = el), itemsRef: el => (this.subMenuItemRefs[id] = el), onToggle: event => this.toggleMenu(event, "sub", id, secondLevelItem.active === true) },
+                    h("div", { class: "duet-header-third-level" }, secondLevelItem.items &&
+                      secondLevelItem.items.map(thirdLevelItem => (h("a", { class: {
+                          "duet-header-item": true,
+                          active: thirdLevelItem.active === true,
+                        }, role: "menuitem", href: thirdLevelItem.href || "#", id: thirdLevelItem.id, onClick: event => this.handleItemClick(event, thirdLevelItem), onKeyDown: ev => this.handleArrowKeys(ev), target: thirdLevelItem.external ? "_blank" : "_self" },
+                        thirdLevelItem.icon && (h("div", { class: "duet-header-icon" },
+                          h("duet-icon", { margin: "none", size: "medium", name: thirdLevelItem.icon, color: "currentColor" }))),
+                        h("span", null, thirdLevelItem.label),
+                        thirdLevelItem.badge && h("div", { class: "duet-header-badge" })))))));
+                }))))),
+          h("div", { class: "duet-header-bottom-utils" },
+            h("slot", { name: "utility" })),
+          h("div", { class: "duet-header-utils" },
+            !itemsHaveSubItems && contactDropdown(),
+            languageDropdown(),
+            !itemsHaveSubItems && (h(Fragment, null,
+              processedUserWithLink(),
+              processedUserWithoutLink())),
+            processedSearch(),
+            processedSession())))));
+    // multi level variation
+    if (itemsHaveSubItems) {
       const activeSegment = this.processedItems.find(item => item.active);
       const isThirdLevelActive = this.processedItems &&
         this.processedItems.some(item => item.items &&
           item.items.some(secondLevelItem => secondLevelItem.items && secondLevelItem.items.some(thirdLevelItem => thirdLevelItem.active === true)));
       const segmentId = "duet-header-segment";
-      return (h(Host, { class: "duet-header-multi-level-desktop-variation" },
+      return (h(Host, { class: "duet-header-multi-level-variation" },
         h("div", { class: {
-            "duet-header-multi-level-desktop": true,
-            "duet-header-multi-level-desktop-third-level-is-open": isThirdLevelActive,
+            "duet-header-multi-level": true,
+            "duet-header-multi-level-third-level-is-open": isThirdLevelActive,
           } },
           h("header", { class: {
               "duet-header": true,
@@ -559,15 +641,15 @@ export class DuetHeader {
               "duet-header-inactive": !this.processedItems,
             }, part: "header" },
             h("div", { class: "duet-header-top" },
-              skipToLabel,
+              skipToLabel(),
               h("div", { class: "logo-and-segment" },
-                h("div", null, 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" }))),
                   h("span", null, item.label),
                   item.badge && h("div", { class: "duet-header-badge" }))))))),
-              h("nav", { class: "duet-header-multi-level-desktop-nav" }, activeSegment.items &&
+              h("nav", { class: "duet-header-multi-level-nav" }, activeSegment.items &&
                 activeSegment.items
                   .filter(secondLevelItem => secondLevelItem.items && secondLevelItem.items.length > 0)
                   .map((secondLevelItem, secondLevelItemIndex) => {
@@ -579,96 +661,17 @@ export class DuetHeader {
                       h("span", null, thirdLevelItem.label),
                       thirdLevelItem.badge && h("div", { class: "duet-header-badge" }))))));
                 })),
-              h("div", { class: "duet-header-multi-level-desktop-utils" },
-                processedSearch,
-                languageDropdown,
-                processedSessionDropdown != null ? processedSessionDropdown : processedSession),
-              h("slot", { name: "utility" }))))));
+              h("div", { class: "duet-header-multi-level-utils" },
+                processedSearch(),
+                languageDropdown(),
+                processedSessionDropdown() != null ? processedSessionDropdown() : processedSession()),
+              h("slot", { name: "utility" })))),
+        defaultVariationContent));
     }
     // Default variation
-    const isSecondLevelActive = this.processedItems &&
-      this.processedItems.some(item => item.items && item.items.some(secondLevelItem => secondLevelItem.active === true));
-    const isThirdLevelActive = this.processedItems &&
-      this.processedItems.some(item => item.items &&
-        item.items.some(secondLevelItem => secondLevelItem.items && secondLevelItem.items.some(thirdLevelItem => thirdLevelItem.active === true)));
     return (h(Host, { class: {
         "duet-header-default-variation": true,
-      } },
-      h("div", { class: {
-          "duet-header-reserved-space": true,
-          "duet-with-links": !!this.processedItems,
-          "duet-header-second-level-active": isSecondLevelActive,
-          "duet-header-third-level-active": isThirdLevelActive,
-        } },
-        h("header", { class: {
-            "duet-header": true,
-            "duet-theme-turva": this.theme === "turva",
-            "duet-header-inactive": !this.processedItems,
-          }, part: "header" },
-          h("div", { class: "duet-header-top" },
-            skipToLabel,
-            logo,
-            h("slot", { name: "logo-utility" }, this.region && h("div", { class: "duet-header-region" }, this.region)),
-            (this.processedItems ||
-              languageDropdown ||
-              contactDropdown ||
-              this.processedSession ||
-              this.processedUser) && (h("button", { class: { "duet-header-toggle": true, active: this.isSlideOutOpen }, onClick: event => this.toggleMenu(event, "mobile"), type: "button" },
-              h("duet-visually-hidden", null, this.accessibleLabel),
-              h(DuetHeaderHamburger, null)))),
-          h("div", { ref: el => (this.navigationEl = el), class: {
-              "duet-header-bottom": true,
-              active: this.isSlideOutOpen,
-              inactive: !this.processedItems,
-            } },
-            h("nav", { class: "duet-header-items", role: "navigation" }, this.processedItems &&
-              this.processedItems.map((item, itemIndex) => (h("div", { class: "duet-header-item-container" },
-                h("a", { class: {
-                    "duet-header-first-level": true,
-                    "duet-header-item": true,
-                    active: (!itemsHaveSubItems && this.currentHref === item.href) ||
-                      (item.active === true &&
-                        !this.openMenu &&
-                        this.closedActives &&
-                        this.closedActives.length === 1) ||
-                      (item.active === true &&
-                        !this.openMenu &&
-                        item.items &&
-                        !item.items.some(s => s.active === true)),
-                  }, href: item.href || "#", id: item.id || `header-item-${itemIndex}`, onClick: event => this.handleItemClick(event, item) },
-                  item.label,
-                  item.badge && h("div", { class: "duet-header-badge" })),
-                item.items &&
-                  item.items
-                    .filter(secondLevelitem => secondLevelitem.items && secondLevelitem.items.length > 0)
-                    .map((secondLevelItem, secondLevelItemIndex) => {
-                    const id = secondLevelItem.id || `header-item-${itemIndex}-${secondLevelItemIndex}`;
-                    const active = (!this.openMenu &&
-                      secondLevelItem.active === true &&
-                      !(this.closedActives && !!this.closedActives.find(i => i === id))) ||
-                      this.openMenu === id;
-                    const activeBar = active && !(secondLevelItem.items && secondLevelItem.items.some(s => s.active === true));
-                    return (h(DuetHeaderDropdown, { id: id, className: "duet-header-second-level", label: secondLevelItem.label, icon: `${secondLevelItem.icon}.svg`, active: activeBar, isOpen: active, badge: secondLevelItem.badge, toggleRef: el => (this.subMenuButtonRefs[id] = el), itemsRef: el => (this.subMenuItemRefs[id] = el), onToggle: event => this.toggleMenu(event, "sub", id, secondLevelItem.active === true) },
-                      h("div", { class: "duet-header-third-level" }, secondLevelItem.items &&
-                        secondLevelItem.items.map(thirdLevelItem => (h("a", { class: {
-                            "duet-header-item": true,
-                            active: thirdLevelItem.active === true,
-                          }, role: "menuitem", href: thirdLevelItem.href || "#", id: thirdLevelItem.id, onClick: event => this.handleItemClick(event, thirdLevelItem), onKeyDown: ev => this.handleArrowKeys(ev), target: thirdLevelItem.external ? "_blank" : "_self" },
-                          thirdLevelItem.icon && (h("div", { class: "duet-header-icon" },
-                            h("duet-icon", { margin: "none", size: "medium", name: thirdLevelItem.icon, color: "currentColor" }))),
-                          h("span", null, thirdLevelItem.label),
-                          thirdLevelItem.badge && h("div", { class: "duet-header-badge" })))))));
-                  }))))),
-            h("div", { class: "duet-header-bottom-utils" },
-              h("slot", { name: "utility" })),
-            h("div", { class: "duet-header-utils" },
-              !itemsHaveSubItems && contactDropdown,
-              languageDropdown,
-              !itemsHaveSubItems && (h(Fragment, null,
-                processedUserWithLink,
-                processedUserWithoutLink)),
-              processedSearch,
-              processedSession))))));
+      } }, defaultVariationContent));
   }
   static get is() { return "duet-header"; }
   static get encapsulation() { return "shadow"; }
@@ -977,7 +980,7 @@ export class DuetHeader {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Region that is shown next to the logo. If empty, region will be hidden.\nNote: not available in desktop multilevel header."
+        "text": "Region that is shown next to the logo. If empty, region will be hidden.\nNote: not available in multilevel header."
       },
       "attribute": "region",
       "reflect": false,

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

@@ -40,7 +40,12 @@ export const validateFile = (item, validators, errorCodes) => {
   if (item) {
     const { name, type, size } = item;
     const mime = validateFileMime(type, allowedMimetypes);
-    const ext = validateFileExtension(name.toLowerCase(), allowedExtensions);
+    const ext = allowedExtensions === "all" ||
+      allowedExtensions === "" ||
+      allowedExtensions === " " ||
+      allowedExtensions === undefined
+      ? true
+      : validateFileExtension(name.toLowerCase(), allowedExtensions);
     const bytes = validateFileSize(size, maxBytes);
     if (!mime) {
       errorMessage = getError("duet-upload-101", errorCodes);

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

@@ -10,6 +10,17 @@ export const debounce = (func, timeout = 250) => {
     }, timeout);
   };
 };
+/**
+ * The fieldSorter function is a helper function that takes an array of objects and returns
+ * a function that can be used to sort those objects. The returned sorting function takes two
+ * parameters, which are compared using the field values in the object. If one object's field value is greater than another's, then 1 is returned; if they're equal, 0 is returned; and if one object's field value is less than another's, - 1 will be returned. This allows for easy sorting by multiple fields in any order desired (e.g., first by name ascending and then by age descending).
+ *
+ *
+ * @param fields Sort the table
+ *
+ * @return A function that takes two objects and returns an integer
+ *
+ */
 export function fieldSorter(fields) {
   return function (a, b) {
     return fields