@duetds/components 4.32.0 → 4.34.0

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

@@ -1,31 +1,43 @@
 /*!
  * Built with Duet Design System
  */
-import arrowDownIcon from "@duetds/icons/lib/assets/action-arrow-down-small";
+import searchIcon from "@duetds/icons/lib/assets/form-search";
 import contactDropdownIcon from "@duetds/icons/lib/assets/navigation-contact-dropdown";
 import languageIcon from "@duetds/icons/lib/assets/navigation-language";
 import loginIcon from "@duetds/icons/lib/assets/navigation-login";
 import logoutIcon from "@duetds/icons/lib/assets/navigation-logout";
 import userIcon from "@duetds/icons/lib/assets/navigation-user";
-import { Build, Component, Element, Event, Fragment, h, Listen, Method, Prop, State, Watch, } from "@stencil/core";
+import { media_query_large } from "@duetds/tokens/lib/tokens.json";
+import { Build, Component, Element, Event, Fragment, h, Host, Listen, Method, Prop, State, Watch, } from "@stencil/core";
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock/lib/bodyScrollLock.es6.js";
 import { DuetStringsExternalDefaults } from "../../common-strings";
 import { isArrowDownKey, isArrowLeftKey, isArrowRightKey, isArrowUpKey, isEscapeKey, isSpaceKey, } from "../../utils/keyboard-utils";
 import { getLanguage, getLocaleString } from "../../utils/language-utils";
 import { parsePossibleJSON } from "../../utils/string-utils";
 import { inheritGlobalTheme } from "../../utils/themeable-component";
+import { DuetHeaderDropdown } from "./duet-header-dropdown";
+import { DuetHeaderHamburger } from "./duet-header-hamburger";
+import { DuetHeaderIcon } from "./duet-header-icon";
 const createEvent = (ev, data) => ({
   component: "duet-header",
   data,
   originalEvent: ev,
 });
 /**
- * @slot utility - A slot for utilities, such as a notification drawer
- * @slot logo-utility - A slot to place elements alongside the logo. This takes precedence over the **region** prop.
+ * @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.
  */
 export class DuetHeader {
   constructor() {
+    var _a;
+    /**
+     * Own Properties
+     */
+    this.subMenuItemRefs = {};
+    this.subMenuButtonRefs = {};
     this.hasLanguageChanged = false;
+    this.mql = [window.matchMedia(media_query_large.replace(/'/g, ""))];
+    this.boundMqlFunctions = [];
     /**
      * State() variables
      * Inlined decorator, alphabetical order.
@@ -33,12 +45,17 @@ export class DuetHeader {
     this.isContactOpen = false;
     this.isLanguageOpen = false;
     this.isSlideOutOpen = false;
+    this.isSegmentOpen = false;
+    this.openMenu = null;
+    this.closedActives = null;
     this.processedItems = null;
     this.processedLanguageItems = null;
     this.processedContactItems = null;
     this.processedSession = null;
+    this.processedSearch = null;
     this.processedUser = null;
     this.processedBack = null;
+    this.renderDesktopNav = (_a = this.mql[0]) === null || _a === void 0 ? void 0 : _a.matches;
     /**
      * Theme of the header.
      */
@@ -144,6 +161,7 @@ export class DuetHeader {
     this.logoHref = "/";
     /**
      * The href of the current page item that is shown as “active”.
+     * Note: not available in multilevel headers.
      */
     this.currentHref = "/";
     /**
@@ -153,10 +171,12 @@ 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.
      */
     this.region = "";
     /**
      * Label of the contact menu. If empty, contact menu will be hidden.
+     * Note: not available in multilevel headers.
      */
     this.contact = "";
     this.handleClick = (event) => {
@@ -175,6 +195,11 @@ export class DuetHeader {
       this.handleClick(e);
       this.duetSessionClick.emit(e);
     };
+    this.handleSearchClick = (ev) => {
+      const e = createEvent(ev, this.processedSearch);
+      this.handleClick(e);
+      this.duetSearchClick.emit(e);
+    };
     this.handleUserClick = (ev) => {
       const e = createEvent(ev, this.processedUser);
       this.handleClick(e);
@@ -197,40 +222,55 @@ export class DuetHeader {
       this.duetLogoClick.emit(e);
     };
     this.handleArrowKeys = ev => {
-      if (this.isContactOpen || this.isLanguageOpen) {
-        let button;
-        if (isArrowLeftKey(ev) || isArrowUpKey(ev)) {
-          button = ev.target.previousElementSibling;
-        }
-        else if (isArrowRightKey(ev) || isArrowDownKey(ev)) {
-          button = ev.target.nextElementSibling;
-        }
-        if (button) {
-          ev.preventDefault();
-          button.focus();
-        }
+      let button;
+      if (isArrowLeftKey(ev) || isArrowUpKey(ev)) {
+        button = ev.target.previousElementSibling;
+      }
+      else if (isArrowRightKey(ev) || isArrowDownKey(ev)) {
+        button = ev.target.nextElementSibling;
+      }
+      if (button) {
+        ev.preventDefault();
+        button.focus();
       }
     };
-    this.toggleMenu = (ev, type) => {
+    this.toggleMenu = (ev, type, id, active) => {
       let el;
       ev.preventDefault();
       ev.stopPropagation();
+      if (active === true && !this.openMenu) {
+        const closedActives = this.closedActives ? [...this.closedActives] : [];
+        const index = closedActives.findIndex(i => i === id);
+        if (index > -1) {
+          closedActives.splice(index, 1);
+          this.closedActives = [...closedActives];
+        }
+        else {
+          this.closedActives = [...closedActives, id];
+        }
+      }
+      else {
+        this.openMenu = this.openMenu === id ? null : id;
+      }
       // For language menu
       if (type === "language") {
         this.isContactOpen = false;
         this.isLanguageOpen = !this.isLanguageOpen;
+        this.isSegmentOpen = false;
         el = this.languageItemsEl;
       }
       // For contact menu
       else if (type === "contact") {
         this.isLanguageOpen = false;
         this.isContactOpen = !this.isContactOpen;
+        this.isSegmentOpen = false;
         el = this.contactItemsEl;
       }
       // For mobile menu
       else if (type === "mobile") {
         this.isContactOpen = false;
         this.isLanguageOpen = false;
+        this.isSegmentOpen = false;
         el = this.navigationEl;
         this.isSlideOutOpen = !this.isSlideOutOpen;
         if (this.isSlideOutOpen) {
@@ -240,7 +280,19 @@ export class DuetHeader {
           enableBodyScroll(this.navigationEl);
         }
       }
-      if (this.isSlideOutOpen || this.isLanguageOpen || this.isContactOpen) {
+      else if (type === "sub") {
+        this.isContactOpen = false;
+        this.isLanguageOpen = false;
+        this.isSegmentOpen = false;
+        el = this.subMenuItemRefs[id];
+      }
+      else if (type === "segment") {
+        this.isContactOpen = false;
+        this.isLanguageOpen = false;
+        this.isSegmentOpen = !this.isSegmentOpen;
+        el = this.segmentItemsEl;
+      }
+      if (this.isSlideOutOpen || this.isLanguageOpen || this.isContactOpen || this.isSegmentOpen || this.openMenu) {
         const drawer = this.element.querySelector("duet-notification-drawer");
         if (drawer) {
           drawer.close(false);
@@ -259,10 +311,21 @@ export class DuetHeader {
     inheritGlobalTheme(this);
     this.refresh();
   }
+  connectedCallback() {
+    for (let i = 0; i < this.mql.length; i++) {
+      const bound = this.refresh.bind(this);
+      this.mql[i].addEventListener("change", bound);
+      this.boundMqlFunctions[i] = bound;
+    }
+  }
   disconnectedCallback() {
     if (this.navigationEl) {
       enableBodyScroll(this.navigationEl);
     }
+    for (let i = 0; i < this.mql.length; i++) {
+      this.mql[i].removeEventListener("change", this.boundMqlFunctions[i]);
+    }
+    this.boundMqlFunctions = [];
   }
   /**
    * Component event handling.
@@ -275,7 +338,7 @@ export class DuetHeader {
     }
   }
   handleKeyDown(ev) {
-    if (this.isContactOpen || this.isLanguageOpen) {
+    if (this.isContactOpen || this.isLanguageOpen || this.isSegmentOpen) {
       const activeElement = this.element.shadowRoot.activeElement;
       // When Space is pressed
       if (isSpaceKey(ev) && activeElement) {
@@ -287,6 +350,12 @@ export class DuetHeader {
         else if (this.isLanguageOpen) {
           this.closeMenus(true);
         }
+        else if (this.isSegmentOpen) {
+          this.closeMenus();
+        }
+        else if (this.openMenu) {
+          this.closeMenus();
+        }
         activeElement.click();
       }
     }
@@ -316,10 +385,15 @@ export class DuetHeader {
    * Local methods.
    */
   async refresh() {
+    if (this.renderDesktopNav !== this.mql[0].matches) {
+      this.renderDesktopNav = this.mql[0].matches;
+      this.openMenu = null;
+    }
     this.processedItems = parsePossibleJSON(this.items);
     this.processedLanguageItems = parsePossibleJSON(this.languageItems);
     this.processedContactItems = parsePossibleJSON(this.contactItems);
     this.processedSession = parsePossibleJSON(this.session);
+    this.processedSearch = parsePossibleJSON(this.search);
     this.processedUser = parsePossibleJSON(this.user);
     this.processedBack = parsePossibleJSON(this.back);
   }
@@ -336,7 +410,7 @@ export class DuetHeader {
    * Closes all dropdown menus in header when called.
    */
   async closeMenus(moveFocusToButton = false) {
-    if (this.isContactOpen || this.isLanguageOpen) {
+    if (this.isContactOpen || this.isLanguageOpen || this.isSegmentOpen || this.openMenu) {
       if (this.isContactOpen && moveFocusToButton) {
         this.contactItemsButtonEl.focus({
           preventScroll: true,
@@ -347,8 +421,20 @@ export class DuetHeader {
           preventScroll: true,
         });
       }
+      if (this.isSegmentOpen && moveFocusToButton) {
+        this.segmentItemsButtonEl.focus({
+          preventScroll: true,
+        });
+      }
+      if (this.openMenu && moveFocusToButton) {
+        this.subMenuButtonRefs[this.openMenu].focus({
+          preventScroll: true,
+        });
+      }
       this.isContactOpen = false;
       this.isLanguageOpen = false;
+      this.isSegmentOpen = false;
+      this.openMenu = null;
     }
   }
   /**
@@ -364,105 +450,166 @@ export class DuetHeader {
    */
   render() {
     const { skipLabel, changeLanguage, activeLanguage } = this.accessibleI18nLabels;
-    return (h("div", { class: {
-        "duet-header-reserved-space": true,
-        "duet-with-links": !!this.processedItems,
-        "duet-without-links": !this.processedItems,
+    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,
+          ", ",
+          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 },
+      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" },
+      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 }),
+      h("span", { class: "duet-header-button-label" }, this.processedSession.label))) : 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;
+    // Back variation
+    if (this.processedBack) {
+      return (h(Host, { class: "duet-header-back-variation" },
+        h("div", { class: "duet-header-reserved-space" },
+          h("header", { class: {
+              "duet-header": true,
+              "duet-theme-turva": this.theme === "turva",
+              "duet-header-back": true,
+              "duet-header-inactive": true,
+            } },
+            h("div", { class: "duet-header-top" },
+              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,
+              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 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" },
+        h("div", { class: {
+            "duet-header-multi-level-desktop": true,
+            "duet-header-multi-level-desktop-third-level-is-open": isThirdLevelActive,
+          } },
+          h("header", { class: {
+              "duet-header": true,
+              "duet-theme-turva": this.theme === "turva",
+              "duet-header-inactive": !this.processedItems,
+            } },
+            h("div", { class: "duet-header-top" },
+              skipToLabel,
+              h("div", { class: "logo-and-segment" },
+                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 &&
+                activeSegment.items
+                  .filter(secondLevelItem => secondLevelItem.items && secondLevelItem.items.length > 0)
+                  .map((secondLevelItem, secondLevelItemIndex) => {
+                  const id = secondLevelItem.id || `segment-item-${secondLevelItemIndex}`;
+                  return (h(DuetHeaderDropdown, { id: id, label: secondLevelItem.label, active: (!this.openMenu && secondLevelItem.active === true) || this.openMenu === id, isOpen: this.openMenu === id, badge: secondLevelItem.badge, toggleRef: el => (this.subMenuButtonRefs[id] = el), itemsRef: el => (this.subMenuItemRefs[id] = el), onToggle: event => this.toggleMenu(event, "sub", id) }, secondLevelItem.items &&
+                    secondLevelItem.items.map(thirdLevelItem => (h("a", { class: { active: thirdLevelItem.active }, 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-multi-level-desktop-utils" },
+                processedSearch,
+                languageDropdown,
+                processedSession),
+              h("slot", { name: "utility" }))))));
+    }
+    // Default variation
+    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("header", { class: {
-          "duet-header": true,
-          "duet-theme-turva": this.theme === "turva",
-          "duet-header-back": !!this.processedBack,
-          "duet-header-inactive": !this.processedItems,
+      h("div", { class: {
+          "duet-header-reserved-space": true,
+          "duet-with-links": !!this.processedItems,
+          "duet-header-third-level-active": isThirdLevelActive,
         } },
-        h("div", { class: "duet-header-top" },
-          this.skipToId && (h("a", { href: this.skipToId, class: "duet-header-skip", onClick: this.handleSkipClick }, skipLabel)),
-          this.processedBack && (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)),
-          h("duet-logo", { href: this.logoHref, size: "medium", ref: el => (this.logoEl = el), language: this.language, theme: this.theme, onClick: this.handleLogoClick }),
-          h("slot", { name: "logo-utility" }, this.region && !this.processedBack && h("div", { class: "duet-header-region" }, this.region)),
-          (this.processedItems ||
-            this.processedLanguageItems ||
-            this.processedContactItems ||
-            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("div", { class: "duet-header-hamburger" },
-              h("span", { class: "duet-header-bar" }),
-              h("span", { class: "duet-header-bar" }),
-              h("span", { class: "duet-header-bar" }),
-              h("span", { class: "duet-header-bar" }))))),
-        !this.processedBack && (h("div", { ref: el => (this.navigationEl = el), class: {
-            "duet-header-bottom": true,
-            active: this.isSlideOutOpen,
-            inactive: !this.processedItems,
+        h("header", { class: {
+            "duet-header": true,
+            "duet-theme-turva": this.theme === "turva",
+            "duet-header-inactive": !this.processedItems,
           } },
-          h("nav", { class: "duet-header-items", role: "navigation" }, this.processedItems &&
-            this.processedItems.map(item => (h("a", { class: { active: this.currentHref === item.href }, href: item.href || "#", id: item.id, onClick: event => this.handleItemClick(event, item) },
-              item.label,
-              item.badge && h("div", { class: "duet-header-badge" }))))),
-          h("div", { class: "duet-header-bottom-utils" },
-            h("slot", { name: "utility" })),
-          h("div", { class: "duet-header-utils" },
-            this.contact && this.processedContactItems && (h("div", { class: "duet-header-dropdown" },
-              h("button", { ref: el => (this.contactItemsButtonEl = el), class: {
-                  "duet-header-contact": true,
-                  "duet-header-dropdown-toggle": true,
-                  "duet-header-button": true,
-                  active: this.isContactOpen,
-                }, type: "button", "aria-haspopup": "listbox", "aria-controls": "duet-header-contact", "aria-expanded": this.isContactOpen ? "true" : "false", id: "duet-header-contact-button", onClick: event => this.toggleMenu(event, "contact") },
-                h("div", { class: "duet-header-icon" },
-                  h("duet-icon", { margin: "none", size: "x-small", icon: contactDropdownIcon.svg, color: "currentColor" })),
-                h("span", { id: "duet-header-contact-label" }, this.contact),
-                h("div", { class: "duet-header-caret" },
-                  h("duet-icon", { margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" }))),
-              h("div", { ref: el => (this.contactItemsEl = el), tabindex: "-1", role: "menu", id: "duet-header-contact", "aria-labelledby": "duet-header-contact-button", class: {
-                  "duet-header-dropdown-content": true,
-                  "duet-header-contact-items": true,
-                  active: this.isContactOpen,
-                } }, this.processedContactItems &&
-                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" },
+          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,
+                  }, href: item.href || "#", id: item.id || `header-item-${itemIndex}`, onClick: event => this.handleItemClick(event, item) },
                   item.label,
-                  Build.isBrowser && item.external && (h(Fragment, null,
-                    h("duet-visually-hidden", null,
-                      ", ",
-                      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" })))))))))),
-            this.language && this.processedLanguageItems && (h("div", { class: "duet-header-dropdown" },
-              h("button", { ref: el => (this.languageItemsButtonEl = el), "aria-haspopup": "listbox", "aria-controls": "duet-header-language", "aria-expanded": this.isLanguageOpen ? "true" : "false", id: "duet-header-language-button", type: "button", class: {
-                  "duet-header-language": true,
-                  "duet-header-dropdown-toggle": true,
-                  "duet-header-button": true,
-                  active: this.isLanguageOpen,
-                }, onClick: event => this.toggleMenu(event, "language") },
-                h("div", { class: "duet-header-icon" },
-                  h("duet-icon", { margin: "none", size: "x-small", icon: languageIcon.svg, color: "currentColor" })),
-                h("span", { "aria-hidden": "true" }, this.language),
-                h("div", { class: "duet-header-caret" },
-                  h("duet-icon", { margin: "none", size: "auto", icon: arrowDownIcon.svg, color: "currentColor" })),
-                h("duet-visually-hidden", null,
-                  changeLanguage,
-                  this.hasLanguageChanged && h("span", null,
-                    ", ",
-                    activeLanguage))),
-              h("div", { ref: el => (this.languageItemsEl = el), tabindex: "-1", role: "menu", id: "duet-header-language", "aria-labelledby": "duet-header-language-button", class: {
-                  "duet-header-dropdown-content": true,
-                  "duet-header-language-items": true,
-                  active: this.isLanguageOpen,
-                } }, this.processedLanguageItems &&
-                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: ev => this.handleArrowKeys(ev) }, item.label)))))),
-            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("span", { class: "duet-header-icon" },
-                h("duet-icon", { margin: "none", size: "x-small", icon: userIcon.svg, color: "currentColor" })),
-              h("span", { class: "duet-header-user-label" }, this.processedUser.label))),
-            this.processedUser && !this.processedUser.href && (h("span", { id: this.processedUser.id, class: "duet-header-user duet-header-button duet-header-no-action" },
-              h("span", { class: "duet-header-icon" },
-                h("duet-icon", { margin: "none", size: "x-small", icon: userIcon.svg, color: "currentColor" })),
-              h("span", { class: "duet-header-user-label" }, this.processedUser.label))),
-            this.processedSession && (h("a", { href: this.processedSession.href || "#", id: this.processedSession.id, class: "duet-header-logout duet-header-button", onClick: this.handleSessionClick },
-              h("span", { class: "duet-header-icon" },
-                h("duet-icon", { margin: "none", size: "x-small", icon: this.processedSession.type === "logout" ? logoutIcon.svg : loginIcon.svg, color: "currentColor" })),
-              this.processedSession.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}`;
+                    return (h(DuetHeaderDropdown, { id: id, className: "duet-header-second-level", label: secondLevelItem.label, icon: `${secondLevelItem.icon}.svg`, active: (!this.openMenu &&
+                        secondLevelItem.active === true &&
+                        !(this.closedActives && !!this.closedActives.find(i => i === id))) ||
+                        this.openMenu === id, isOpen: (!this.openMenu &&
+                        secondLevelItem.active === true &&
+                        !(this.closedActives && !!this.closedActives.find(i => i === id))) ||
+                        this.openMenu === id, 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, item), 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))))));
   }
   static get is() { return "duet-header"; }
   static get encapsulation() { return "shadow"; }
@@ -683,7 +830,7 @@ export class DuetHeader {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "An object that includes mandatory \"label\" and \"href\" fields for the user\nprofile link. Additionally, you can pass an \"id\" that is added as an HTML\nidentifier for the element. If nothing is passed, user won\u2019t be shown."
+        "text": "An object that includes mandatory \"label\" and \"href\" fields for the user\nprofile link. Additionally, you can pass an \"id\" that is added as an HTML\nidentifier for the element. If nothing is passed, user won\u2019t be shown.\nNote: not available in multilevel headers."
       },
       "attribute": "user",
       "reflect": false
@@ -718,7 +865,7 @@ export class DuetHeader {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "The href of the current page item that is shown as \u201Cactive\u201D."
+        "text": "The href of the current page item that is shown as \u201Cactive\u201D.\nNote: not available in multilevel headers."
       },
       "attribute": "current-href",
       "reflect": false,
@@ -754,7 +901,7 @@ export class DuetHeader {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "An array of items for the main navigation. Items have to include mandatory\n\"label\" and \"href\" fields to work. Additionally, you can pass an \"id\" that is\nadded as an HTML identifier for the element."
+        "text": "An array of items for the main navigation. Items have to include mandatory\n\"label\" and \"href\" fields to work. Additionally, you can pass an \"id\" that is\nadded as an HTML identifier for the element, \"active\" boolean that makes item active,\n\"badge\" boolean to add notification badge next to the item and\n\"items\" array consisting of sub items that are allowed up to three levels."
       },
       "attribute": "items",
       "reflect": false
@@ -771,7 +918,7 @@ export class DuetHeader {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Region that is shown next to the logo. If empty, region will be hidden."
+        "text": "Region that is shown next to the logo. If empty, region will be hidden.\nNote: not available in desktop multilevel header."
       },
       "attribute": "region",
       "reflect": false,
@@ -789,11 +936,28 @@ export class DuetHeader {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "An object that includes mandatory \"label\", \"href\" and \"type\" fields for the\nsession login/logout link. Additionally, you can pass an \"id\" that is added\nas an HTML identifier for the element. If nothing is passed, this link won\u2019t\nbe shown."
+        "text": "An object that includes mandatory \"label\", \"href\" and \"type\" fields for the\nsession login/logout link. Additionally, you can pass an \"id\" that is added\nas an HTML identifier for the element.\nIf nothing is passed, this link won\u2019t be shown."
       },
       "attribute": "session",
       "reflect": false
     },
+    "search": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "An object that includes mandatory \"label\" and \"href\" fields for the\nsearch link. Additionally, you can pass an \"id\" that is added\nas an HTML identifier for the element. If nothing is passed, this link won\u2019t\nbe shown."
+      },
+      "attribute": "search",
+      "reflect": false
+    },
     "back": {
       "type": "any",
       "mutable": false,
@@ -823,7 +987,7 @@ export class DuetHeader {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Label of the contact menu. If empty, contact menu will be hidden."
+        "text": "Label of the contact menu. If empty, contact menu will be hidden.\nNote: not available in multilevel headers."
       },
       "attribute": "contact",
       "reflect": false,
@@ -868,12 +1032,17 @@ export class DuetHeader {
     "isContactOpen": {},
     "isLanguageOpen": {},
     "isSlideOutOpen": {},
+    "isSegmentOpen": {},
+    "openMenu": {},
+    "closedActives": {},
     "processedItems": {},
     "processedLanguageItems": {},
     "processedContactItems": {},
     "processedSession": {},
+    "processedSearch": {},
     "processedUser": {},
-    "processedBack": {}
+    "processedBack": {},
+    "renderDesktopNav": {}
   }; }
   static get events() { return [{
       "method": "duetChange",
@@ -916,6 +1085,25 @@ export class DuetHeader {
           }
         }
       }
+    }, {
+      "method": "duetSearchClick",
+      "name": "duetSearchClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Event for when a user has clicked the search link. You can prevent the\ndefault browser functionality by calling **event.detail.originalEvent.preventDefault()**\ninside your listener. Additionally, the passed data is available via **event.detail.data**."
+      },
+      "complexType": {
+        "original": "DuetHeaderChangeEvent",
+        "resolved": "{ originalEvent: Event; data: DuetHeaderItem | DuetHeaderLanguageItem | DuetHeaderSession; component: \"duet-header\"; }",
+        "references": {
+          "DuetHeaderChangeEvent": {
+            "location": "local"
+          }
+        }
+      }
     }, {
       "method": "duetUserClick",
       "name": "duetUserClick",