npm - @dso-toolkit/core - Versions diffs - 78.0.0 → 79.0.0-pre.0 - Mend

@dso-toolkit/core 78.0.0 → 79.0.0-pre.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (324) hide show

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

@@ -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
             }];
     }
 }

package/dist/collection/components/header/header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"header.js","sourceRoot":"","sources":["../../../../src/components/header/header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Fragment, Prop, State, Watch, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { translations } from \"./header.i18n\";\r\nimport { HeaderEvent, HeaderMenuItem, HeaderNavigationType } from \"./header.interfaces\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\n@Component({\r\n tag: \"dso-header\",\r\n styleUrl: \"header.scss\",\r\n shadow: true,\r\n})\r\nexport class Header {\r\n private clickHandler(\r\n e: MouseEvent,\r\n type: HeaderNavigationType,\r\n options?: { menuItem?: HeaderMenuItem; url?: string },\r\n ) {\r\n this.dsoHeaderClick.emit({\r\n originalEvent: e,\r\n isModifiedEvent: isModifiedEvent(e),\r\n type,\r\n menuItem: options?.menuItem,\r\n url: options?.url ?? options?.menuItem?.url,\r\n });\r\n }\r\n\r\n private dropdownElement?: HTMLElement;\r\n\r\n @Element()\r\n host!: HTMLDsoHeaderElement;\r\n\r\n /*\r\n The main menu items.\r\n /\r\n @Prop()\r\n mainMenu?: HeaderMenuItem[] = [];\r\n\r\n /\r\n Either have the dropdown menu appear automatically or always.\r\n /\r\n @Prop()\r\n useDropDownMenu: \"always\" \| \"auto\" = \"auto\";\r\n\r\n /\r\n Used to show the login/logout option. 'none' renders nothing.\r\n /\r\n @Prop()\r\n authStatus: \"none\" \| \"loggedIn\" \| \"loggedOut\" = \"none\";\r\n\r\n /\r\n When the `authStatus` is `loggedOut` a loginUrl can be provided.\r\n * The login button will then render as an anchor.\r\n /\r\n @Prop()\r\n loginUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"logout\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n logoutUrl?: string;\r\n\r\n /\r\n Show a help-button or link in the header\r\n /\r\n @Prop()\r\n showHelp? = false;\r\n\r\n /\r\n The URL to open when the user activates \"help\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n helpUrl?: string;\r\n\r\n /\r\n The name to show when the user is logged in.\r\n /\r\n @Prop()\r\n userProfileName?: string;\r\n\r\n /\r\n The URL to open when the user activates the profile url.\r\n /\r\n @Prop()\r\n userProfileUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeUrl?: string;\r\n\r\n /\r\n Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeActive?: boolean;\r\n\r\n @State()\r\n showDropDown?: boolean;\r\n\r\n @State()\r\n overflowMenuItems = 0;\r\n\r\n @State()\r\n dropdownOptionsOffset = 0;\r\n\r\n /\r\n Emitted when something in the header is selected.\r\n \r\n `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n */\r\n @Event()\r\n dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n @Watch(\"useDropDownMenu\")\r\n setShowDropDown(value: \"always\" \| \"auto\") {\r\n if (value === \"auto\") {\r\n this.setDropDownMenu();\r\n\r\n return;\r\n }\r\n\r\n this.showDropDown = value === \"always\";\r\n }\r\n\r\n private wrapper: HTMLDivElement \| undefined;\r\n\r\n private nav: HTMLUListElement \| undefined;\r\n\r\n private shrinkMenuToFit() {\r\n if (!this.wrapper \|\| !this.nav) {\r\n return;\r\n }\r\n\r\n if (this.wrapper.clientWidth >= this.nav.clientWidth) {\r\n return;\r\n }\r\n\r\n if (this.mainMenu && this.overflowMenuItems >= this.mainMenu.length) {\r\n return;\r\n }\r\n\r\n this.overflowMenuItems++;\r\n }\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n componentDidRender() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n\r\n return;\r\n }\r\n\r\n window.setTimeout(() => this.shrinkMenuToFit(), 0);\r\n }\r\n\r\n componentDidLoad() {\r\n this.setShowDropDown(this.useDropDownMenu);\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }\r\n\r\n private setOverflowMenu() {\r\n if (this.showDropDown) {\r\n return;\r\n }\r\n\r\n if (this.overflowMenuItems !== 0) {\r\n this.overflowMenuItems = 0;\r\n return;\r\n }\r\n\r\n this.shrinkMenuToFit();\r\n }\r\n\r\n private setDropDownMenu() {\r\n if (this.useDropDownMenu !== \"auto\") {\r\n return;\r\n }\r\n\r\n this.showDropDown = window.innerWidth < minDesktopViewportWidth;\r\n }\r\n\r\n private calculateDropdownOptionsOffset() {\r\n if (!this.dropdownElement) {\r\n return 0;\r\n }\r\n\r\n return (\r\n this.host.clientHeight -\r\n (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n );\r\n }\r\n\r\n private onWindowResize = debounce(() => {\r\n this.dropdownElement?.removeAttribute(\"open\");\r\n this.dropdownElement?.removeAttribute(\"tabindex\");\r\n\r\n this.setDropDownMenu();\r\n this.setOverflowMenu();\r\n\r\n if (this.showDropDown) {\r\n this.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n }, 100);\r\n\r\n connectedCallback() {\r\n window.addEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n disconnectedCallback() {\r\n window.removeEventListener(\"resize\", this.onWindowResize);\r\n }\r\n\r\n private MenuItem = (item: HeaderMenuItem) => {\r\n return (\r\n <li class={item.active ? \"dso-active\" : undefined}>\r\n <a\r\n href={item.url}\r\n aria-current={item.active ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem: item })}\r\n >\r\n {item.label}\r\n </a>\r\n </li>\r\n );\r\n };\r\n\r\n render() {\r\n // Prevent 'flickering' when useDropDownMenu = 'always'\r\n if (this.showDropDown === undefined) {\r\n return;\r\n }\r\n\r\n return (\r\n <>\r\n <div\r\n class={clsx(\"dso-header\", {\r\n [\"use-drop-down\"]: this.showDropDown,\r\n })}\r\n ref={(element) => (this.wrapper = element)}\r\n >\r\n <div class=\"logo-container\">\r\n <slot name=\"logo\" />\r\n </div>\r\n {this.showDropDown &&\r\n this.mainMenu &&\r\n (this.mainMenu.length > 0 \|\| this.userHomeUrl \|\| this.authStatus !== \"none\") && (\r\n <div class=\"dropdown\">\r\n <dso-dropdown-menu\r\n dropdown-align=\"right\"\r\n dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n ref={(element) => (this.dropdownElement = element)}\r\n >\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"menu\")}</span>\r\n <dso-icon icon=\"chevron-down\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu.map(this.MenuItem)}\r\n {this.userHomeUrl && (\r\n <li>\r\n <a\r\n href={this.userHomeUrl}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n {this.text(\"userHome\")}\r\n </a>\r\n </li>\r\n )}\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <li>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n <span class=\"profile-label\"> - Mijn profiel</span>\r\n </a>\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <li>\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n {this.text(\"login\")}\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n {this.text(\"login\")}\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <li>\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n {this.text(\"logout\")}\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n {this.text(\"logout\")}\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.showHelp && (\r\n <li>\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button type=\"button\" class=\"dso-tertiary\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </div>\r\n )}\r\n {!this.showDropDown && (\r\n <>\r\n <div class=\"dso-header-session\">\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <div class=\"profile\">\r\n <a\r\n href={this.userProfileUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n </a>\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <div class=\"login\">\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n {this.text(\"login\")}\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n {this.text(\"login\")}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <div class=\"logout\">\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n {this.text(\"logout\")}\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n {this.text(\"logout\")}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.showHelp && (\r\n <div class=\"help\">\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n {((this.mainMenu && this.mainMenu.length > 0) \|\| this.userHomeUrl) && (\r\n <nav class=\"dso-navbar\">\r\n <ul class=\"dso-nav dso-nav-main\" ref={(element) => (this.nav = element)}>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)\r\n .map(this.MenuItem)}\r\n {this.overflowMenuItems > 0 && (\r\n <li>\r\n <dso-dropdown-menu>\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"overflowMenu\")}</span>\r\n <dso-icon icon=\"chevron-down\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu &&\r\n this.mainMenu\r\n .filter(\r\n (_, index) =>\r\n this.mainMenu && index >= this.mainMenu.length - this.overflowMenuItems,\r\n )\r\n .map(this.MenuItem)}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </li>\r\n )}\r\n {this.userHomeUrl && (\r\n <li class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}>\r\n <a\r\n href={this.userHomeUrl}\r\n aria-current={this.userHomeActive ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n <dso-icon icon=\"user-line\"></dso-icon>\r\n {this.text(\"userHome\")}\r\n </a>\r\n </li>\r\n )}\r\n </ul>\r\n </nav>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n </>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"header.js","sourceRoot":"","sources":["../../../../src/components/header/header.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Host,\r\n Listen,\r\n Prop,\r\n State,\r\n Watch,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { translations } from \"./header.i18n\";\r\nimport {\r\n HeaderAuthStatus,\r\n HeaderCompactMode,\r\n HeaderEvent,\r\n HeaderMenuItem,\r\n HeaderNavigationType,\r\n} from \"./header.interfaces\";\r\nimport { MenuItem } from \"./menu-item.functional-component\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\ninterface ClickHandlerOptions {\r\n menuItem?: HeaderMenuItem;\r\n url?: string;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-header\",\r\n styleUrl: \"header.scss\",\r\n shadow: true,\r\n})\r\nexport class Header implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoHeaderElement;\r\n\r\n /*\r\n The main menu items.\r\n /\r\n @Prop()\r\n mainMenu: HeaderMenuItem[] = [];\r\n\r\n /\r\n Set to \"always\" to force the header to be compact. Otherwise it will be compact when\r\n * the viewport is smaller than 992px.\r\n /\r\n @Prop()\r\n compact: HeaderCompactMode = \"auto\";\r\n\r\n /\r\n Used to show the login/logout option. 'none' renders nothing.\r\n /\r\n @Prop()\r\n authStatus: HeaderAuthStatus = \"none\";\r\n\r\n /\r\n When the `authStatus` is `loggedOut` a loginUrl can be provided.\r\n * The login button will then render as an anchor.\r\n /\r\n @Prop()\r\n loginUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"logout\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n logoutUrl?: string;\r\n\r\n /\r\n Show a help-button or link in the header\r\n /\r\n @Prop()\r\n showHelp = false;\r\n\r\n /\r\n The URL to open when the user activates \"help\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n helpUrl?: string;\r\n\r\n /\r\n The name to show when the user is logged in.\r\n /\r\n @Prop()\r\n userProfileName?: string;\r\n\r\n /\r\n The URL to open when the user activates the profile url.\r\n /\r\n @Prop()\r\n userProfileUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeUrl?: string;\r\n\r\n /\r\n Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeActive = false;\r\n\r\n /\r\n Emitted when something in the header is selected.\r\n \r\n `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n /\r\n @Event()\r\n dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n @State()\r\n visibleMenuItemsCount: number \| undefined = undefined;\r\n\r\n @State()\r\n dropdownOptionsOffset = 0;\r\n\r\n @Watch(\"mainMenu\")\r\n mainMenuChanged() {\r\n this.resetVisibleMenuItems();\r\n }\r\n\r\n @Listen(\"resize\", { target: \"window\" })\r\n resizeListener() {\r\n this.onWindowResize();\r\n }\r\n\r\n private onWindowResize = debounce(() => this.resetVisibleMenuItems(), 20);\r\n\r\n private resetVisibleMenuItems = () => {\r\n this.visibleMenuItemsCount = undefined;\r\n\r\n forceUpdate(this.host);\r\n };\r\n\r\n private get isCompact() {\r\n return this.compact === \"always\" \|\| window.innerWidth < minDesktopViewportWidth;\r\n }\r\n\r\n private clickHandler = (e: MouseEvent, type: HeaderNavigationType, options?: ClickHandlerOptions) => {\r\n this.dsoHeaderClick.emit({\r\n originalEvent: e,\r\n isModifiedEvent: isModifiedEvent(e),\r\n type,\r\n menuItem: options?.menuItem,\r\n url: options?.url ?? options?.menuItem?.url,\r\n });\r\n };\r\n\r\n private dropdownElement: HTMLDsoDropdownMenuElement \| undefined;\r\n private navElement: HTMLUListElement \| undefined;\r\n private menuItemElementRefs: (HTMLLIElement \| undefined)[] = [];\r\n private dropdownMenuItemElementRef: HTMLLIElement \| undefined;\r\n private userHomeMenuItemElementRef: HTMLLIElement \| undefined;\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n /\r\n Before determining the visible menu items, all the menu items are rendered (including the dropdown menu item and the user home menu item).\r\n * Then the visible menu items are calculated in componentDidRender() and ONLY when the visibleMenuItemsCount is undefined.\r\n \r\n When the window resizes or this.mainMenu changes, a reset is triggered to recalculate the visible menu items.\r\n \r\n @param navElement The navigation element to calculate the overflow menu item count for.\r\n * @returns The number of menu items that can fit in the available space.\r\n */\r\n private calculateOverflowMenuItemCount(navElement: HTMLUListElement): number {\r\n const availableWidth = navElement.offsetWidth;\r\n\r\n const lastMenuItem = this.menuItemElementRefs[this.menuItemElementRefs.length - 1];\r\n const mostRightMenuItem = this.userHomeMenuItemElementRef ?? lastMenuItem;\r\n const dropdownMenuItem = this.dropdownMenuItemElementRef;\r\n\r\n if (!mostRightMenuItem \|\| !dropdownMenuItem \|\| !lastMenuItem) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n const dropdownMenuItemEffectiveWidth =\r\n dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth - (lastMenuItem.offsetLeft + lastMenuItem.offsetWidth);\r\n\r\n const requiredWidth = mostRightMenuItem.offsetLeft + mostRightMenuItem.offsetWidth - dropdownMenuItemEffectiveWidth;\r\n\r\n if (requiredWidth <= availableWidth) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n const userHomeMenuItemEffectiveWidth = this.userHomeMenuItemElementRef\r\n ? this.userHomeMenuItemElementRef.offsetLeft +\r\n this.userHomeMenuItemElementRef.offsetWidth -\r\n (dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth)\r\n : 0;\r\n\r\n const remainingWidth = availableWidth - dropdownMenuItemEffectiveWidth - userHomeMenuItemEffectiveWidth;\r\n\r\n const visibleMenuItems = this.menuItemElementRefs.findIndex(\r\n (menuItem) => menuItem && menuItem.offsetLeft + menuItem.offsetWidth > remainingWidth,\r\n );\r\n\r\n if (visibleMenuItems < 0) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n return visibleMenuItems;\r\n }\r\n\r\n private calculateDropdownOptionsOffset() {\r\n if (!this.dropdownElement) {\r\n return 0;\r\n }\r\n\r\n return (\r\n this.host.clientHeight -\r\n (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n );\r\n }\r\n\r\n private get visibleMainMenuItems(): HeaderMenuItem[] {\r\n return typeof this.visibleMenuItemsCount === \"number\"\r\n ? this.mainMenu.slice(0, this.visibleMenuItemsCount)\r\n : this.mainMenu;\r\n }\r\n\r\n private get hiddenMainMenuItems(): HeaderMenuItem[] {\r\n return typeof this.visibleMenuItemsCount === \"number\" ? this.mainMenu.slice(this.visibleMenuItemsCount) : [];\r\n }\r\n\r\n componentDidRender() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n if (this.isCompact && this.dropdownElement) {\r\n this.dropdownElement.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n\r\n if (typeof this.visibleMenuItemsCount === \"undefined\" && this.navElement) {\r\n this.visibleMenuItemsCount = this.calculateOverflowMenuItemCount(this.navElement);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host is-compact={this.isCompact}>\r\n <div class=\"dso-header\">\r\n <div class=\"logo-container\">\r\n <slot name=\"logo\" />\r\n </div>\r\n {this.isCompact ? this.renderCompact() : this.renderNormal()}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private renderCompact() {\r\n return (\r\n (this.mainMenu.length > 0 \|\| this.userHomeUrl \|\| this.authStatus !== \"none\") && (\r\n <div class=\"dropdown\">\r\n <dso-dropdown-menu\r\n dropdown-align=\"right\"\r\n dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n ref={(element) => (this.dropdownElement = element)}\r\n >\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"menu\")}</span>\r\n <dso-icon icon=\"chevron-down\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu.map((menuItem) => (\r\n <MenuItem item={menuItem} onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })} />\r\n ))}\r\n {this.userHomeUrl && (\r\n <li>\r\n <a\r\n href={this.userHomeUrl}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n {this.text(\"userHome\")}\r\n </a>\r\n </li>\r\n )}\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <li>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n <span class=\"profile-label\"> - Mijn profiel</span>\r\n </a>\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <li>\r\n {this.loginUrl ? (\r\n <a href={this.loginUrl} onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}>\r\n {this.text(\"login\")}\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n {this.text(\"login\")}\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <li>\r\n {this.logoutUrl ? (\r\n <a href={this.logoutUrl} onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}>\r\n {this.text(\"logout\")}\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n {this.text(\"logout\")}\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.showHelp && (\r\n <li>\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button type=\"button\" class=\"dso-tertiary\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </div>\r\n )\r\n );\r\n }\r\n\r\n private renderNormal() {\r\n this.menuItemElementRefs = [];\r\n\r\n return (\r\n <Fragment>\r\n <div class=\"dso-header-session\">\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <div class=\"profile\">\r\n <a\r\n href={this.userProfileUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n </a>\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <div class=\"login\">\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n {this.text(\"login\")}\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n {this.text(\"login\")}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <div class=\"logout\">\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n {this.text(\"logout\")}\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n {this.text(\"logout\")}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.showHelp && (\r\n <div class=\"help\">\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n {(this.mainMenu.length > 0 \|\| this.userHomeUrl) && (\r\n <nav class=\"dso-navbar\">\r\n <ul\r\n class={clsx(\"dso-nav\", \"dso-nav-main\", { ready: this.visibleMenuItemsCount !== undefined })}\r\n ref={(element) => (this.navElement = element)}\r\n >\r\n {this.visibleMainMenuItems.map((menuItem, i) => (\r\n <MenuItem\r\n item={menuItem}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n key={menuItem.label}\r\n ref={(el) => (this.menuItemElementRefs[i] = el)}\r\n />\r\n ))}\r\n {(this.visibleMenuItemsCount === undefined \|\| this.hiddenMainMenuItems.length > 0) && (\r\n <li\r\n aria-hidden={this.visibleMenuItemsCount === undefined}\r\n ref={(el) => (this.dropdownMenuItemElementRef = el)}\r\n class=\"dropdown-menu-item\"\r\n >\r\n <dso-dropdown-menu>\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"overflowMenu\")}</span>\r\n <dso-icon icon=\"chevron-down\" class=\"main-menu-item-icon\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.hiddenMainMenuItems.map((menuItem) => (\r\n <MenuItem item={menuItem} onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })} />\r\n ))}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </li>\r\n )}\r\n {this.userHomeUrl && (\r\n <li\r\n class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}\r\n ref={(el) => (this.userHomeMenuItemElementRef = el)}\r\n >\r\n <a\r\n href={this.userHomeUrl}\r\n aria-current={this.userHomeActive ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n <dso-icon icon=\"user-line\" class=\"main-menu-item-icon\"></dso-icon>\r\n {this.text(\"userHome\")}\r\n </a>\r\n </li>\r\n )}\r\n </ul>\r\n </nav>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/header/menu-item.functional-component.js ADDED Viewed

@@ -0,0 +1,6 @@
+import { h } from "@stencil/core";
+import { clsx } from "clsx";
+export const MenuItem = ({ item, onClick, key, ref }) => {
+    return (h("li", { class: clsx({ "dso-active": item.active }), key: key, ref: ref }, h("a", { href: item.url, "aria-current": item.active ? "page" : undefined, onClick: onClick }, item.label)));
+};
+//# sourceMappingURL=menu-item.functional-component.js.map

package/dist/collection/components/header/menu-item.functional-component.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"menu-item.functional-component.js","sourceRoot":"","sources":["../../../../src/components/header/menu-item.functional-component.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAuB,CAAC,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAW5B,MAAM,CAAC,MAAM,QAAQ,GAAuC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,EAAE,EAAE;IAC1F,OAAO,CACL,UAAI,KAAK,EAAE,IAAI,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG;QAChE,SAAG,IAAI,EAAE,IAAI,CAAC,GAAG,kBAAgB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAAE,OAAO,EAAE,OAAO,IAChF,IAAI,CAAC,KAAK,CACT,CACD,CACN,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { HeaderMenuItem } from \"./header.interfaces\";\r\n\r\nexport interface MenuItemProps {\r\n item: HeaderMenuItem;\r\n onClick: (event: MouseEvent) => void;\r\n key?: string;\r\n ref?: (el: HTMLLIElement | undefined) => void;\r\n}\r\n\r\nexport const MenuItem: FunctionalComponent<MenuItemProps> = ({ item, onClick, key, ref }) => {\r\n return (\r\n <li class={clsx({ \"dso-active\": item.active })} key={key} ref={ref}>\r\n <a href={item.url} aria-current={item.active ? \"page\" : undefined} onClick={onClick}>\r\n {item.label}\r\n </a>\r\n </li>\r\n );\r\n};\r\n"]}

package/dist/collection/components/highlight-box/highlight-box.js CHANGED Viewed

@@ -3,7 +3,7 @@ export class HighlightBox {
     render() {
         var _a;
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: '86c4c5ff4f81dc76c1dc7ced1ae0f08ac4ab871c', "has-counter": hasCounter }, hasCounter && h("div", { key: '550d9f9ef78cc89764ceebf7c9cff46587a4ec80', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'bc7cbca36525b162059ec21356ab96d1f313722f', name: "icon" })), h("slot", { key: 'd4d43a29f08c330a3e6b59604e8509d2af05a50a' })));
+        return (h(Host, { key: 'a17c902d2d0218ca9535995de35277932314703a', "has-counter": hasCounter }, hasCounter && h("div", { key: '51784bd453e91291a9b6f89f63a53860bd0015dd', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: '48e88b38b2ea9e9b696db3830bb489ffcf129ff6', name: "icon" })), h("slot", { key: 'cd1d9e7ab981c5c155c624dc604a58b6b5a1ca65' })));
     }
     static get is() { return "dso-highlight-box"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/icon/icon.js CHANGED Viewed

@@ -216,7 +216,7 @@ export class Icon {
             if (!icon) {
                 throw new TypeError(`Unknown svg: ${this.icon}`);
             }
-            return h("span", { key: 'fb24ae73d46158d43091e9a654b7e2651f428a7c', class: "icon-container", innerHTML: icon.svg });
+            return h("span", { key: '487ea1db4f0bb118860e08fe8d7fc16ca1705f94', class: "icon-container", innerHTML: icon.svg });
         }
     }
     static get is() { return "dso-icon"; }

package/dist/collection/components/info/info.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class Info {
     render() {
-        return (h(Fragment, { key: '7c3f9fed7a8ab8dbabe817e1b978e940f26f27f8' }, h("slot", { key: '74dbbbdf2d445f448a7de100196ef0df2305734f' }), !this.fixed && (h("button", { key: '5e702078b32a2d57fafb0758941c57548d7a5851', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: '494887a2f0fa4ab19a2d2b448d9821a001cd9cfb', icon: "times" }), h("span", { key: '052dde259dd0f396097b3c3ead102bb10edda4ff', class: "sr-only" }, "Sluiten")))));
+        return (h(Fragment, { key: '5819c33391f64495faebc5b480e6cf4146f06e21' }, h("slot", { key: 'b7e232a77cab0b9f32c3b7053a2b02c1a42402d8' }), !this.fixed && (h("button", { key: 'bcb06304bf67ed32bfc0063fdda0f20b79658374', type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { key: '17998edf989e2de6d49ec3fa0cbf02a0207a14a9', icon: "times" }), h("span", { key: 'fc858fe44cf7ed69fb0b4883554998f0fc3cb872', class: "sr-only" }, "Sluiten")))));
     }
     static get is() { return "dso-info"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/info-button/info-button.js CHANGED Viewed

@@ -20,7 +20,7 @@ export class InfoButton {
         this.dsoToggle.emit({ originalEvent: e, active: this.active });
     }
     render() {
-        return (h(Host, { key: '0943299e0676d7b9abcb7ce7ccc1bf189e0d492a', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: '062f533cb31e179a279d1b4f6b18374966434196', type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { key: 'a8a717a778cfbb2fe2306c5420e2a97dddc69be7', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: '18c1eb9ca295d6f46f6cd52ce1b379186fe06e53', class: "sr-only" }, this.label))));
+        return (h(Host, { key: 'eb293ebed30eed249b8be309def6ead14b1cf24a', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: '3e288bbba8b56cc92ca338df47811cbdded8a3df', type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { key: '9c11b0fcb3d77c441e7732d098fe14f4538cb2f5', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: 'aff325d3fefac7a17259b40753104177dc3ac8f6', class: "sr-only" }, this.label))));
     }
     static get is() { return "dso-info-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/input-range/input-range.js CHANGED Viewed

@@ -10,13 +10,13 @@ export class InputRange {
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: 'bd3e2d52c55adab4c14bb2b2e77fd03d786a5963', id: "description", hidden: true }, this.description)), h("span", { key: 'f882c7f95664ab0bc13ff5025f9cc29d2d6d7350', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '0618bbb18445fc1284a8ff569fa1d29cbdc36edd', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: '7ac9735224c60c717a0ebff59e2f8c40623e2f34', id: "description", hidden: true }, this.description)), h("span", { key: 'fd65b63bda56de9516e6bef05781777b13cc8245', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '8a0a67fff0a51267565ad447c572e4ba0d20009a', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: '6ebeab32da3617ea9c7c1fa192e018fb30ca815e', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: '3d22eb9d281b35f52a0cdaa3565448375e1435c9', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
     }
     static get is() { return "dso-input-range"; }
     static get encapsulation() { return "shadow"; }