@dso-toolkit/core 78.1.0 → 79.0.0-pre.1

package/dist/collection/components/header/header.css

@@ -23,22 +23,29 @@
   display: block;
 }
 
+:host([is-compact]) ::slotted([slot=logo]) {
+  --_dso-logo-block-size: 2.5rem !important;
+}
+:host([is-compact]) .dso-header {
+  flex-wrap: nowrap;
+}
+:host([is-compact]) dso-dropdown-menu .dso-dropdown-options {
+  inline-size: 100%;
+}
+
+:host(:not([is-compact])) .dso-header {
+  align-items: center;
+}
+:host(:not([is-compact])) dso-dropdown-menu .dso-dropdown-options {
+  inline-size: 375px;
+}
+
 .dso-header {
   border-block-end: 1px solid #ccc;
   display: flex;
   flex-wrap: wrap;
   position: relative;
 }
-@media screen and (min-width: 768px) {
-  .dso-header {
-    align-items: center;
-  }
-}
-@media screen and (max-width: 991px) {
-  .dso-header.use-drop-down {
-    flex-wrap: nowrap;
-  }
-}
 .dso-header .dso-nav {
   border: 0;
 }
@@ -93,6 +100,8 @@
 
 .dso-navbar {
   flex-basis: 100%;
+  max-inline-size: 100%;
+  position: relative;
 }
 
 dso-dropdown-menu > button:not(.dso-primary):not(.dso-secondary):not(.dso-tertiary),
@@ -207,16 +216,6 @@ dso-dropdown-menu .dso-dropdown-options {
   border-radius: 0;
   box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);
 }
-@media screen and (min-width: 768px) {
-  dso-dropdown-menu .dso-dropdown-options {
-    inline-size: 375px;
-  }
-}
-@media screen and (max-width: 767px) {
-  dso-dropdown-menu .dso-dropdown-options {
-    inline-size: 100%;
-  }
-}
 dso-dropdown-menu .dso-dropdown-options ul {
   margin: 0;
   padding: 0;
@@ -242,8 +241,8 @@ dso-dropdown-menu .dso-dropdown-options ul li button:hover {
   color: #275937;
   text-decoration: underline;
 }
-dso-dropdown-menu .dso-dropdown-options ul li a:visited,
-dso-dropdown-menu .dso-dropdown-options ul li button:visited {
+dso-dropdown-menu .dso-dropdown-options ul li a:visited:not(:hover):not(:focus-visible),
+dso-dropdown-menu .dso-dropdown-options ul li button:visited:not(:hover):not(:focus-visible) {
   color: #275937;
 }
 dso-dropdown-menu .dso-dropdown-options ul li button {
@@ -301,6 +300,9 @@ dso-dropdown-menu .dso-dropdown-options ul li + li {
   margin-block-start: 0;
   padding-inline-start: 0;
 }
+.dso-nav.ready .menu-user-home {
+  margin-inline-start: auto;
+}
 .dso-nav > li {
   margin-block-end: 4px;
 }
@@ -324,7 +326,6 @@ dso-dropdown-menu .dso-dropdown-options ul li + li {
   text-decoration: none;
   font-size: 1.25em;
   line-height: 1;
-  margin-block-start: 8px;
   padding-block: 16px;
   padding-inline: 0;
   white-space: nowrap;
@@ -339,7 +340,6 @@ dso-dropdown-menu .dso-dropdown-options ul li + li {
 .dso-nav.dso-nav-main dso-dropdown-menu button {
   font-size: 1.25em;
   line-height: 1;
-  margin-block-start: 8px;
   padding-block: 16px;
   padding-inline: 0;
   align-items: flex-end;
@@ -356,13 +356,13 @@ dso-dropdown-menu .dso-dropdown-options ul li + li {
   inset-block-start: auto;
   transform: none;
 }
-.dso-nav .menu-user-home {
-  margin-inline-start: auto;
-}
-.dso-nav .menu-user-home dso-icon {
+.dso-nav .main-menu-item-icon {
   block-size: 1em;
   margin-inline-end: 8px;
   position: relative;
   inset-block-start: -2px;
   inline-size: 1.2em;
+}
+.dso-nav .dropdown-menu-item .main-menu-item-icon {
+  margin-inline-end: 0;
 }

package/dist/collection/components/header/header.interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.interfaces.js","sourceRoot":"","sources":["../../../../src/components/header/header.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface HeaderMenuItem {\r\n  label: string;\r\n  url: string;\r\n  active?: boolean;\r\n}\r\n\r\nexport type HeaderNavigationType = \"menuItem\" | \"profile\" | \"logout\" | \"login\" | \"userHome\" | \"help\";\r\n\r\nexport interface HeaderClickEvent {\r\n  originalEvent: MouseEvent;\r\n  type: HeaderNavigationType;\r\n  /** True when user selected the page holding Ctrl, Alt or other modifiers. Can be used to determine navigation. */\r\n  isModifiedEvent: boolean;\r\n  /** Url of the selected item. */\r\n  url?: string;\r\n}\r\n\r\nexport interface HeaderClickMenuItemEvent extends HeaderClickEvent {\r\n  menuItem: HeaderMenuItem;\r\n}\r\n\r\nexport type HeaderEvent = HeaderClickEvent | HeaderClickMenuItemEvent;\r\n"]}
+{"version":3,"file":"header.interfaces.js","sourceRoot":"","sources":["../../../../src/components/header/header.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface HeaderMenuItem {\r\n  label: string;\r\n  url: string;\r\n  active?: boolean;\r\n}\r\n\r\nexport type HeaderAuthStatus = \"none\" | \"loggedOut\" | \"loggedIn\";\r\n\r\nexport type HeaderCompactMode = \"always\" | \"auto\";\r\n\r\nexport type HeaderNavigationType = \"menuItem\" | \"profile\" | \"logout\" | \"login\" | \"userHome\" | \"help\";\r\n\r\nexport interface HeaderClickEvent {\r\n  originalEvent: MouseEvent;\r\n  type: HeaderNavigationType;\r\n  /** True when user selected the page holding Ctrl, Alt or other modifiers. Can be used to determine navigation. */\r\n  isModifiedEvent: boolean;\r\n  /** Url of the selected item. */\r\n  url?: string;\r\n}\r\n\r\nexport interface HeaderClickMenuItemEvent extends HeaderClickEvent {\r\n  menuItem: HeaderMenuItem;\r\n}\r\n\r\nexport type HeaderEvent = HeaderClickEvent | HeaderClickMenuItemEvent;\r\n"]}

package/dist/collection/components/header/header.js

@@ -1,9 +1,10 @@
-import { Fragment, h } from "@stencil/core";
+import { Fragment, Host, forceUpdate, h, } from "@stencil/core";
 import clsx from "clsx";
 import debounce from "debounce";
 import { i18n } from "../../utils/i18n";
 import { isModifiedEvent } from "../../utils/is-modified-event";
 import { translations } from "./header.i18n";
+import { MenuItem } from "./menu-item.functional-component";
 const minDesktopViewportWidth = 992;
 export class Header {
     constructor() {
@@ -12,9 +13,10 @@ export class Header {
          */
         this.mainMenu = [];
         /**
-         * Either have the dropdown menu appear automatically or always.
+         * Set to "always" to force the header to be compact. Otherwise it will be compact when
+         * the viewport is smaller than 992px.
          */
-        this.useDropDownMenu = "auto";
+        this.compact = "auto";
         /**
          * Used to show the login/logout option. 'none' renders nothing.
          */
@@ -23,83 +25,73 @@ export class Header {
          * Show a help-button or link in the header
          */
         this.showHelp = false;
-        this.overflowMenuItems = 0;
+        /**
+         * Set this to true when the user is at "Mijn Omgevingsloket".
+         */
+        this.userHomeActive = false;
+        this.visibleMenuItemsCount = undefined;
         this.dropdownOptionsOffset = 0;
-        this.text = i18n(() => this.host, translations);
-        this.onWindowResize = debounce(() => {
+        this.onWindowResize = debounce(() => this.resetVisibleMenuItems(), 20);
+        this.resetVisibleMenuItems = () => {
+            this.visibleMenuItemsCount = undefined;
+            forceUpdate(this.host);
+        };
+        this.clickHandler = (e, type, options) => {
             var _a, _b;
-            (_a = this.dropdownElement) === null || _a === void 0 ? void 0 : _a.removeAttribute("open");
-            (_b = this.dropdownElement) === null || _b === void 0 ? void 0 : _b.removeAttribute("tabindex");
-            this.setDropDownMenu();
-            this.setOverflowMenu();
-            if (this.showDropDown) {
-                this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();
-            }
-        }, 100);
-        this.MenuItem = (item) => {
-            return (h("li", { class: item.active ? "dso-active" : undefined }, h("a", { href: item.url, "aria-current": item.active ? "page" : undefined, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem: item }) }, item.label)));
+            this.dsoHeaderClick.emit({
+                originalEvent: e,
+                isModifiedEvent: isModifiedEvent(e),
+                type,
+                menuItem: options === null || options === void 0 ? void 0 : options.menuItem,
+                url: (_a = options === null || options === void 0 ? void 0 : options.url) !== null && _a !== void 0 ? _a : (_b = options === null || options === void 0 ? void 0 : options.menuItem) === null || _b === void 0 ? void 0 : _b.url,
+            });
         };
+        this.menuItemElementRefs = [];
+        this.text = i18n(() => this.host, translations);
     }
-    clickHandler(e, type, options) {
-        var _a, _b;
-        this.dsoHeaderClick.emit({
-            originalEvent: e,
-            isModifiedEvent: isModifiedEvent(e),
-            type,
-            menuItem: options === null || options === void 0 ? void 0 : options.menuItem,
-            url: (_a = options === null || options === void 0 ? void 0 : options.url) !== null && _a !== void 0 ? _a : (_b = options === null || options === void 0 ? void 0 : options.menuItem) === null || _b === void 0 ? void 0 : _b.url,
-        });
+    mainMenuChanged() {
+        this.resetVisibleMenuItems();
     }
-    setShowDropDown(value) {
-        if (value === "auto") {
-            this.setDropDownMenu();
-            return;
-        }
-        this.showDropDown = value === "always";
+    resizeListener() {
+        this.onWindowResize();
     }
-    shrinkMenuToFit() {
-        if (!this.wrapper || !this.nav) {
-            return;
-        }
-        if (this.wrapper.clientWidth >= this.nav.clientWidth) {
-            return;
-        }
-        if (this.mainMenu && this.overflowMenuItems >= this.mainMenu.length) {
-            return;
-        }
-        this.overflowMenuItems++;
+    get isCompact() {
+        return this.compact === "always" || window.innerWidth < minDesktopViewportWidth;
     }
-    componentDidRender() {
-        if (!this.host.isConnected) {
-            return;
-        }
-        if (this.showDropDown) {
-            this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();
-            return;
-        }
-        window.setTimeout(() => this.shrinkMenuToFit(), 0);
-    }
-    componentDidLoad() {
-        this.setShowDropDown(this.useDropDownMenu);
-        if (this.showDropDown) {
-            this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();
-        }
-    }
-    setOverflowMenu() {
-        if (this.showDropDown) {
-            return;
+    /**
+     * Before determining the visible menu items, all the menu items are rendered (including the dropdown menu item and the user home menu item).
+     * Then the visible menu items are calculated in componentDidRender() and ONLY when the visibleMenuItemsCount is undefined.
+     *
+     * When the window resizes or this.mainMenu changes, a reset is triggered to recalculate the visible menu items.
+     *
+     * @param navElement The navigation element to calculate the overflow menu item count for.
+     * @returns The number of menu items that can fit in the available space.
+     */
+    calculateOverflowMenuItemCount(navElement) {
+        var _a;
+        const availableWidth = navElement.offsetWidth;
+        const lastMenuItem = this.menuItemElementRefs[this.menuItemElementRefs.length - 1];
+        const mostRightMenuItem = (_a = this.userHomeMenuItemElementRef) !== null && _a !== void 0 ? _a : lastMenuItem;
+        const dropdownMenuItem = this.dropdownMenuItemElementRef;
+        if (!mostRightMenuItem || !dropdownMenuItem || !lastMenuItem) {
+            return this.menuItemElementRefs.length;
         }
-        if (this.overflowMenuItems !== 0) {
-            this.overflowMenuItems = 0;
-            return;
+        const dropdownMenuItemEffectiveWidth = dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth - (lastMenuItem.offsetLeft + lastMenuItem.offsetWidth);
+        const requiredWidth = mostRightMenuItem.offsetLeft + mostRightMenuItem.offsetWidth - dropdownMenuItemEffectiveWidth;
+        if (requiredWidth <= availableWidth) {
+            return this.menuItemElementRefs.length;
         }
-        this.shrinkMenuToFit();
-    }
-    setDropDownMenu() {
-        if (this.useDropDownMenu !== "auto") {
-            return;
+        const userHomeMenuItemEffectiveWidth = this.userHomeMenuItemElementRef
+            ? this.userHomeMenuItemElementRef.offsetLeft +
+                this.userHomeMenuItemElementRef.offsetWidth -
+                (dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth)
+            : 0;
+        const remainingWidth = availableWidth - dropdownMenuItemEffectiveWidth - userHomeMenuItemEffectiveWidth;
+        const visibleMenuItems = this.menuItemElementRefs.findIndex((menuItem) => menuItem && menuItem.offsetLeft + menuItem.offsetWidth > remainingWidth);
+        if (visibleMenuItems < 0) {
+            return this.menuItemElementRefs.length;
         }
-        this.showDropDown = window.innerWidth < minDesktopViewportWidth;
+        return visibleMenuItems;
     }
     calculateDropdownOptionsOffset() {
         var _a;
@@ -109,28 +101,34 @@ export class Header {
         return (this.host.clientHeight -
             (((_a = this.dropdownElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().bottom) - this.host.getBoundingClientRect().top));
     }
-    connectedCallback() {
-        window.addEventListener("resize", this.onWindowResize);
+    get visibleMainMenuItems() {
+        return typeof this.visibleMenuItemsCount === "number"
+            ? this.mainMenu.slice(0, this.visibleMenuItemsCount)
+            : this.mainMenu;
     }
-    disconnectedCallback() {
-        window.removeEventListener("resize", this.onWindowResize);
+    get hiddenMainMenuItems() {
+        return typeof this.visibleMenuItemsCount === "number" ? this.mainMenu.slice(this.visibleMenuItemsCount) : [];
     }
-    render() {
-        // Prevent 'flickering' when useDropDownMenu = 'always'
-        if (this.showDropDown === undefined) {
+    componentDidRender() {
+        if (!this.host.isConnected) {
             return;
         }
-        return (h(Fragment, null, h("div", { class: clsx("dso-header", {
-                ["use-drop-down"]: this.showDropDown,
-            }), ref: (element) => (this.wrapper = element) }, h("div", { class: "logo-container" }, h("slot", { name: "logo" })), this.showDropDown &&
-            this.mainMenu &&
-            (this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right", dropdownOptionsOffset: this.dropdownOptionsOffset, ref: (element) => (this.dropdownElement = element) }, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("menu")), h("dso-icon", { icon: "chevron-down" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map(this.MenuItem), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", null, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", null, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("li", null, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("li", null, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { type: "button", class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))))))), !this.showDropDown && (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("a", { href: this.userProfileUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (h("div", { class: "login" }, this.loginUrl ? (h("a", { href: this.loginUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("div", { class: "logout" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("div", { class: "help" }, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))), ((this.mainMenu && this.mainMenu.length > 0) || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: "dso-nav dso-nav-main", ref: (element) => (this.nav = element) }, this.mainMenu &&
-            this.mainMenu
-                .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)
-                .map(this.MenuItem), this.overflowMenuItems > 0 && (h("li", null, h("dso-dropdown-menu", null, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("overflowMenu")), h("dso-icon", { icon: "chevron-down" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu &&
-            this.mainMenu
-                .filter((_, index) => this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems)
-                .map(this.MenuItem)))))), this.userHomeUrl && (h("li", { class: clsx("menu-user-home", { "dso-active": this.userHomeActive }) }, h("a", { href: this.userHomeUrl, "aria-current": this.userHomeActive ? "page" : undefined, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, h("dso-icon", { icon: "user-line" }), this.text("userHome"))))))))))));
+        if (this.isCompact && this.dropdownElement) {
+            this.dropdownElement.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();
+        }
+        if (typeof this.visibleMenuItemsCount === "undefined" && this.navElement) {
+            this.visibleMenuItemsCount = this.calculateOverflowMenuItemCount(this.navElement);
+        }
+    }
+    render() {
+        return (h(Host, { key: '8e00a5489946b71addacb1b71c2f9f36d443c14f', "is-compact": this.isCompact }, h("div", { key: '220b6faaeb955c2631dd038434fb91f74f90f233', class: "dso-header" }, h("div", { key: '00800011fd196a1c59e6401309ecbd3e97d7be6f', class: "logo-container" }, h("slot", { key: '6285ba06ebca475c7d38d3fb4ab60fdbb82a60e3', name: "logo" })), this.isCompact ? this.renderCompact() : this.renderNormal())));
+    }
+    renderCompact() {
+        return ((this.mainMenu.length > 0 || this.userHomeUrl || this.authStatus !== "none") && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right", dropdownOptionsOffset: this.dropdownOptionsOffset, ref: (element) => (this.dropdownElement = element) }, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("menu")), h("dso-icon", { icon: "chevron-down" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.mainMenu.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }) }))), this.userHomeUrl && (h("li", null, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, this.text("userHome")))), this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("li", null, h("a", { href: this.userProfileUrl, onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName, h("span", { class: "profile-label" }, " - Mijn profiel")))), this.authStatus === "loggedOut" && (h("li", null, this.loginUrl ? (h("a", { href: this.loginUrl, onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("li", null, this.logoutUrl ? (h("a", { href: this.logoutUrl, onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("li", null, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { type: "button", class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))))))));
+    }
+    renderNormal() {
+        this.menuItemElementRefs = [];
+        return (h(Fragment, null, h("div", { class: "dso-header-session" }, this.userProfileUrl && this.userProfileName && this.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("a", { href: this.userProfileUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "profile", { url: this.userProfileUrl }) }, this.userProfileName))), this.authStatus === "loggedOut" && (h("div", { class: "login" }, this.loginUrl ? (h("a", { href: this.loginUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "login", { url: this.loginUrl }) }, this.text("login"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "login") }, this.text("login"))))), this.authStatus === "loggedIn" && (h("div", { class: "logout" }, this.logoutUrl ? (h("a", { href: this.logoutUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "logout", { url: this.logoutUrl }) }, this.text("logout"))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "logout") }, this.text("logout"))))), this.showHelp && (h("div", { class: "help" }, this.helpUrl ? (h("a", { href: this.helpUrl, class: "dso-tertiary", onClick: (e) => this.clickHandler(e, "help", { url: this.helpUrl }) }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" }))) : (h("button", { class: "dso-tertiary", type: "button", onClick: (e) => this.clickHandler(e, "help") }, h("span", null, this.text("help")), h("dso-icon", { icon: "help" })))))), (this.mainMenu.length > 0 || this.userHomeUrl) && (h("nav", { class: "dso-navbar" }, h("ul", { class: clsx("dso-nav", "dso-nav-main", { ready: this.visibleMenuItemsCount !== undefined }), ref: (element) => (this.navElement = element) }, this.visibleMainMenuItems.map((menuItem, i) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }), key: menuItem.label, ref: (el) => (this.menuItemElementRefs[i] = el) }))), (this.visibleMenuItemsCount === undefined || this.hiddenMainMenuItems.length > 0) && (h("li", { "aria-hidden": this.visibleMenuItemsCount === undefined, ref: (el) => (this.dropdownMenuItemElementRef = el), class: "dropdown-menu-item" }, h("dso-dropdown-menu", null, h("button", { type: "button", slot: "toggle" }, h("span", null, this.text("overflowMenu")), h("dso-icon", { icon: "chevron-down", class: "main-menu-item-icon" })), h("div", { class: "dso-dropdown-options" }, h("ul", null, this.hiddenMainMenuItems.map((menuItem) => (h(MenuItem, { item: menuItem, onClick: (e) => this.clickHandler(e, "menuItem", { menuItem }) })))))))), this.userHomeUrl && (h("li", { class: clsx("menu-user-home", { "dso-active": this.userHomeActive }), ref: (el) => (this.userHomeMenuItemElementRef = el) }, h("a", { href: this.userHomeUrl, "aria-current": this.userHomeActive ? "page" : undefined, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, h("dso-icon", { icon: "user-line", class: "main-menu-item-icon" }), this.text("userHome")))))))));
     }
     static get is() { return "dso-header"; }
     static get encapsulation() { return "shadow"; }
@@ -152,7 +150,7 @@ export class Header {
                 "mutable": false,
                 "complexType": {
                     "original": "HeaderMenuItem[]",
-                    "resolved": "HeaderMenuItem[] | undefined",
+                    "resolved": "HeaderMenuItem[]",
                     "references": {
                         "HeaderMenuItem": {
                             "location": "import",
@@ -162,7 +160,7 @@ export class Header {
                     }
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "The main menu items."
@@ -171,20 +169,26 @@ export class Header {
                 "setter": false,
                 "defaultValue": "[]"
             },
-            "useDropDownMenu": {
+            "compact": {
                 "type": "string",
-                "attribute": "use-drop-down-menu",
+                "attribute": "compact",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"always\" | \"auto\"",
+                    "original": "HeaderCompactMode",
                     "resolved": "\"always\" | \"auto\"",
-                    "references": {}
+                    "references": {
+                        "HeaderCompactMode": {
+                            "location": "import",
+                            "path": "./header.interfaces",
+                            "id": "src/components/header/header.interfaces.ts::HeaderCompactMode"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Either have the dropdown menu appear automatically or always."
+                    "text": "Set to \"always\" to force the header to be compact. Otherwise it will be compact when\r\nthe viewport is smaller than 992px."
                 },
                 "getter": false,
                 "setter": false,
@@ -196,9 +200,15 @@ export class Header {
                 "attribute": "auth-status",
                 "mutable": false,
                 "complexType": {
-                    "original": "\"none\" | \"loggedIn\" | \"loggedOut\"",
+                    "original": "HeaderAuthStatus",
                     "resolved": "\"loggedIn\" | \"loggedOut\" | \"none\"",
-                    "references": {}
+                    "references": {
+                        "HeaderAuthStatus": {
+                            "location": "import",
+                            "path": "./header.interfaces",
+                            "id": "src/components/header/header.interfaces.ts::HeaderAuthStatus"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -254,12 +264,12 @@ export class Header {
                 "attribute": "show-help",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean | undefined",
-                    "resolved": "boolean | undefined",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Show a help-button or link in the header"
@@ -351,25 +361,25 @@ export class Header {
                 "mutable": false,
                 "complexType": {
                     "original": "boolean",
-                    "resolved": "boolean | undefined",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": "Set this to true when the user is at \"Mijn Omgevingsloket\"."
                 },
                 "getter": false,
                 "setter": false,
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "showDropDown": {},
-            "overflowMenuItems": {},
+            "visibleMenuItemsCount": {},
             "dropdownOptionsOffset": {}
         };
     }
@@ -400,8 +410,17 @@ export class Header {
     static get elementRef() { return "host"; }
     static get watchers() {
         return [{
-                "propName": "useDropDownMenu",
-                "methodName": "setShowDropDown"
+                "propName": "mainMenu",
+                "methodName": "mainMenuChanged"
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "resize",
+                "method": "resizeListener",
+                "target": "window",
+                "capture": false,
+                "passive": true
             }];
     }
 }