@dso-toolkit/core 41.0.1 → 43.1.0

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

@@ -52,6 +52,152 @@
 .logout {
   margin-right: 16px;
 }
+.login .dso-tertiary,
+.logout .dso-tertiary {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: left;
+  user-select: none;
+  vertical-align: middle;
+  border: 0;
+  color: #39870c;
+  line-height: 1;
+  padding: 0;
+  background-color: transparent;
+  cursor: pointer;
+  font-family: Asap, sans-serif;
+  font-weight: 600;
+  vertical-align: text-bottom;
+}
+.login .dso-tertiary:focus, .login .dso-tertiary:focus-visible,
+.logout .dso-tertiary:focus,
+.logout .dso-tertiary:focus-visible {
+  outline-offset: 2px;
+}
+.login .dso-tertiary:active,
+.logout .dso-tertiary:active {
+  outline: 0;
+}
+.login .dso-tertiary.extern::after, .login .dso-tertiary.download::after,
+.logout .dso-tertiary.extern::after,
+.logout .dso-tertiary.download::after {
+  content: "";
+  display: inline-block;
+  height: 1.5em;
+  margin-left: 8px;
+  vertical-align: top;
+  width: 1.5em;
+}
+.login .dso-tertiary[disabled],
+.logout .dso-tertiary[disabled] {
+  color: #afcf9d;
+}
+.login .dso-tertiary[disabled].dso-spinner-left, .login .dso-tertiary[disabled].dso-spinner-right,
+.logout .dso-tertiary[disabled].dso-spinner-left,
+.logout .dso-tertiary[disabled].dso-spinner-right {
+  color: #39870c;
+}
+.login .dso-tertiary:not([disabled]):hover,
+.logout .dso-tertiary:not([disabled]):hover {
+  color: #676cb0;
+  text-decoration: underline;
+}
+.login .dso-tertiary:not([disabled]):active,
+.logout .dso-tertiary:not([disabled]):active {
+  color: #676cb0;
+}
+.login .dso-tertiary.btn-align,
+.logout .dso-tertiary.btn-align {
+  line-height: calc(1.5em - 1px);
+  padding: 11px 0;
+  position: relative;
+}
+.login .dso-tertiary.extern::after, .login .dso-tertiary.download::after,
+.logout .dso-tertiary.extern::after,
+.logout .dso-tertiary.download::after {
+  position: relative;
+  top: -2px;
+}
+.login .dso-tertiary.download::after,
+.logout .dso-tertiary.download::after {
+  background: var(--dso-icon, var(--di-download)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+}
+.login .dso-tertiary.download[disabled]::after,
+.logout .dso-tertiary.download[disabled]::after {
+  --dso-icon: var(--di-download-grasgroen-40);
+}
+.login .dso-tertiary.download:not([disabled]):hover::after, .login .dso-tertiary.download:not([disabled]):active::after,
+.logout .dso-tertiary.download:not([disabled]):hover::after,
+.logout .dso-tertiary.download:not([disabled]):active::after {
+  --dso-icon: var(--di-download-scampi);
+}
+.login .dso-tertiary.extern::after,
+.logout .dso-tertiary.extern::after {
+  background: var(--dso-icon, var(--di-external-link)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+}
+.login .dso-tertiary.extern[disabled]::after,
+.logout .dso-tertiary.extern[disabled]::after {
+  --dso-icon: var(--di-external-link-grasgroen-40);
+}
+.login .dso-tertiary.extern:not([disabled]):hover::after, .login .dso-tertiary.extern:not([disabled]):active::after,
+.logout .dso-tertiary.extern:not([disabled]):hover::after,
+.logout .dso-tertiary.extern:not([disabled]):active::after {
+  --dso-icon: var(--di-external-link-scampi);
+}
+.login .dso-tertiary.dso-spinner-left::before,
+.logout .dso-tertiary.dso-spinner-left::before {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: middle;
+  width: 24px;
+  margin-right: 8px;
+}
+.login .dso-tertiary.dso-spinner-right::after,
+.logout .dso-tertiary.dso-spinner-right::after {
+  background-image: url("data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: middle;
+  width: 24px;
+  margin-left: 8px;
+}
+.login .dso-tertiary dso-icon + span:not(.sr-only),
+.login .dso-tertiary svg.di + span:not(.sr-only),
+.login .dso-tertiary span:not(.sr-only) + dso-icon,
+.login .dso-tertiary span:not(.sr-only) + svg.di,
+.logout .dso-tertiary dso-icon + span:not(.sr-only),
+.logout .dso-tertiary svg.di + span:not(.sr-only),
+.logout .dso-tertiary span:not(.sr-only) + dso-icon,
+.logout .dso-tertiary span:not(.sr-only) + svg.di {
+  margin-left: 8px;
+}
+.login .dso-tertiary dso-icon,
+.login .dso-tertiary svg.di,
+.login .dso-tertiary span,
+.logout .dso-tertiary dso-icon,
+.logout .dso-tertiary svg.di,
+.logout .dso-tertiary span {
+  vertical-align: middle;
+}
 
 .profile a,
 .logout a,
@@ -158,7 +304,7 @@ dso-dropdown-menu .dso-dropdown-options {
   border-radius: 4px;
   border: 1px solid rgba(0, 0, 0, 0.15);
   box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);
-  font-size: 16px;
+  font-size: 1rem;
   margin: 2px 0 0;
   min-width: 160px;
   padding: 5px 0;
@@ -344,7 +490,7 @@ dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li + li {
 }
 .dropdown dso-dropdown-menu button {
   color: #39870c;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: 600;
   position: relative;
 }
@@ -422,7 +568,7 @@ dso-dropdown-menu .dso-dropdown-options dso-dropdown-options li + li {
 }
 .dso-nav.dso-nav-sub > li > a {
   text-decoration: none;
-  font-size: 16px;
+  font-size: 1rem;
   margin-top: 4px;
   padding: 4px 8px 3px;
 }

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

@@ -0,0 +1 @@
+export {};

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

@@ -6,8 +6,9 @@ export class Header {
   constructor() {
     this.mainMenu = [];
     this.useDropDownMenu = "auto";
+    /** Used to show the login/logout option. 'none' renders nothing. */
+    this.authStatus = 'none';
     this.showDropDown = false;
-    this.isLoggedIn = false;
     this.hasSubLogo = false;
     this.overflowMenuItems = 0;
     this.onWindowResize = debounce(() => {
@@ -15,17 +16,21 @@ export class Header {
       this.setOverflowMenu();
     }, 100);
     this.MenuItem = (item) => {
-      const click = (event) => {
-        event.preventDefault();
-        this.menuItemClick.emit({
-          originalEvent: event,
-          menuItem: item,
-        });
-      };
       return (h("li", { class: item.active ? "dso-active" : undefined },
-        h("a", { href: item.url, "aria-current": item.active ? "page" : undefined, onClick: click }, item.label)));
+        h("a", { href: item.url, "aria-current": item.active ? "page" : undefined, onClick: e => this.clickHandler(e, 'menuItem', { menuItem: item }) }, item.label)));
     };
   }
+  clickHandler(e, type, options) {
+    var _a, _b;
+    this.headerClick.emit({
+      originalEvent: e,
+      isModifiedEvent: e.button !== 0 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey,
+      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,
+    });
+  }
+  ;
   watchUseDropDownMenu(value) {
     if (value === "auto") {
       this.setDropDownMenu();
@@ -43,7 +48,7 @@ export class Header {
     if (this.wrapper.clientWidth >= this.nav.clientWidth) {
       return;
     }
-    if (this.overflowMenuItems >= this.mainMenu.length) {
+    if (this.mainMenu && this.overflowMenuItems >= this.mainMenu.length) {
       return;
     }
     this.overflowMenuItems++;
@@ -87,7 +92,7 @@ export class Header {
             h("slot", { name: "logo" })),
           h("div", { class: "sub-logo" },
             h("slot", { name: "sub-logo" }))),
-        this.showDropDown && this.mainMenu.length > 0 && (h("div", { class: "dropdown" },
+        this.showDropDown && this.mainMenu && this.mainMenu.length > 0 && (h("div", { class: "dropdown" },
           h("dso-dropdown-menu", { "dropdown-align": "right" },
             h("button", { type: "button", class: "tertiary", slot: "toggle" },
               h("span", null, "Menu")),
@@ -96,31 +101,35 @@ export class Header {
                 h("ul", null,
                   this.mainMenu.map(this.MenuItem),
                   this.userHomeUrl && (h("li", null,
-                    h("a", { href: this.userHomeUrl }, "Mijn Omgevingsloket"))),
-                  this.loginUrl && !this.isLoggedIn && (h("li", null,
-                    h("a", { href: this.loginUrl }, "Inloggen"))),
+                    h("a", { href: this.userHomeUrl, onClick: e => this.clickHandler(e, 'userHome', { url: this.userHomeUrl }) }, "Mijn Omgevingsloket"))),
                   this.userProfileUrl &&
                     this.userProfileName &&
-                    this.isLoggedIn && (h("li", null,
-                    h("a", { href: this.userProfileUrl },
+                    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.logoutUrl && this.isLoggedIn && (h("li", null,
-                    h("a", { href: this.logoutUrl, onClick: e => this.logoutClick.emit({ originalEvent: e }) }, "Uitloggen"))))))))),
-        !this.showDropDown && this.mainMenu.length > 0 && (h(Fragment, null,
+                      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 }) }, "Inloggen")
+                    : h("button", { type: "button", onClick: e => this.clickHandler(e, 'login') }, "Inloggen"))),
+                  this.authStatus === 'loggedIn' && (h("li", null, this.logoutUrl
+                    ? h("a", { href: this.logoutUrl, onClick: e => this.clickHandler(e, 'logout', { url: this.logoutUrl }) }, "Uitloggen")
+                    : h("button", { type: "button", onClick: e => this.clickHandler(e, 'logout') }, "Uitloggen"))))))))),
+        !this.showDropDown && (h(Fragment, null,
           h("div", { class: "dso-header-session" },
             this.userProfileUrl &&
               this.userProfileName &&
-              this.isLoggedIn && (h("div", { class: "profile" },
+              this.authStatus === 'loggedIn' && (h("div", { class: "profile" },
               h("span", { class: "profile-label" }, "Welkom:"),
-              h("a", { href: this.userProfileUrl }, this.userProfileName))),
-            this.loginUrl && !this.isLoggedIn && (h("div", { class: "login" },
-              h("a", { href: this.loginUrl }, "Inloggen"))),
-            this.logoutUrl && this.isLoggedIn && (h("div", { class: "logout" },
-              h("a", { href: this.logoutUrl, onClick: e => this.logoutClick.emit({ originalEvent: e }) }, "Uitloggen")))),
-          h("nav", { class: "dso-navbar" },
+              h("a", { href: this.userProfileUrl, 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, onClick: e => this.clickHandler(e, 'login', { url: this.loginUrl }) }, "Inloggen")
+              : h("button", { class: "dso-tertiary", type: "button", onClick: e => this.clickHandler(e, 'login') }, "Inloggen"))),
+            this.authStatus === 'loggedIn' && (h("div", { class: "logout" }, this.logoutUrl
+              ? h("a", { href: this.logoutUrl, onClick: e => this.clickHandler(e, 'logout', { url: this.logoutUrl }) }, "Uitloggen")
+              : h("button", { class: "dso-tertiary", type: "button", onClick: e => this.clickHandler(e, 'logout') }, "Uitloggen")))),
+          ((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 && this.mainMenu
                 .filter((_, index) => index < this.mainMenu.length - this.overflowMenuItems)
                 .map(this.MenuItem),
               this.overflowMenuItems > 0 && (h("li", null,
@@ -129,15 +138,13 @@ export class Header {
                     h("span", null, "Meer")),
                   h("div", { class: "dso-dropdown-options" },
                     h("dso-dropdown-options", null,
-                      h("ul", null, this.mainMenu
-                        .filter((_, index) => index >=
-                        this.mainMenu.length -
-                          this.overflowMenuItems)
+                      h("ul", null, this.mainMenu && this.mainMenu
+                        .filter((_, index) => index >= this.mainMenu.length - this.overflowMenuItems)
                         .map(this.MenuItem))))))),
               this.userHomeUrl && (h("li", { class: "menu-user-home" },
-                h("a", { href: this.userHomeUrl },
+                h("a", { href: this.userHomeUrl, onClick: e => this.clickHandler(e, 'userHome', { url: this.userHomeUrl }) },
                   h("dso-icon", { icon: "user-line" }),
-                  "Mijn Omgevingsloket"))))))))));
+                  "Mijn Omgevingsloket")))))))))));
   }
   static get is() { return "dso-header"; }
   static get encapsulation() { return "shadow"; }
@@ -148,13 +155,18 @@ export class Header {
     "$": ["header.css"]
   }; }
   static get properties() { return {
-    "loginUrl": {
-      "type": "string",
+    "mainMenu": {
+      "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
+        "original": "HeaderMenuItem[]",
+        "resolved": "HeaderMenuItem[] | undefined",
+        "references": {
+          "HeaderMenuItem": {
+            "location": "import",
+            "path": "./header.interfaces"
+          }
+        }
       },
       "required": false,
       "optional": true,
@@ -162,81 +174,77 @@ export class Header {
         "tags": [],
         "text": ""
       },
-      "attribute": "login-url",
-      "reflect": false
+      "defaultValue": "[]"
     },
-    "logoutUrl": {
+    "useDropDownMenu": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
+        "original": "\"always\" | \"never\" | \"auto\"",
+        "resolved": "\"always\" | \"auto\" | \"never\"",
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "logout-url",
-      "reflect": false
+      "attribute": "use-drop-down-menu",
+      "reflect": false,
+      "defaultValue": "\"auto\""
     },
-    "mainMenu": {
-      "type": "unknown",
+    "authStatus": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "HeaderMenuItem[]",
-        "resolved": "HeaderMenuItem[]",
-        "references": {
-          "HeaderMenuItem": {
-            "location": "local"
-          }
-        }
+        "original": "'none' | 'loggedIn' | 'loggedOut'",
+        "resolved": "\"loggedIn\" | \"loggedOut\" | \"none\"",
+        "references": {}
       },
       "required": false,
       "optional": false,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "Used to show the login/logout option. 'none' renders nothing."
       },
-      "defaultValue": "[]"
+      "attribute": "auth-status",
+      "reflect": false,
+      "defaultValue": "'none'"
     },
-    "useDropDownMenu": {
+    "loginUrl": {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "\"always\" | \"never\" | \"auto\"",
-        "resolved": "\"always\" | \"auto\" | \"never\"",
+        "original": "string",
+        "resolved": "string | undefined",
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
-        "text": ""
+        "text": "When the `authStatus` is `loggedOut` a loginUrl can be provided, the login button will render as an anchor."
       },
-      "attribute": "use-drop-down-menu",
-      "reflect": false,
-      "defaultValue": "\"auto\""
+      "attribute": "login-url",
+      "reflect": false
     },
-    "isLoggedIn": {
-      "type": "boolean",
+    "logoutUrl": {
+      "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
+        "original": "string",
+        "resolved": "string | undefined",
         "references": {}
       },
       "required": false,
-      "optional": false,
+      "optional": true,
       "docs": {
         "tags": [],
         "text": ""
       },
-      "attribute": "is-logged-in",
-      "reflect": false,
-      "defaultValue": "false"
+      "attribute": "logout-url",
+      "reflect": false
     },
     "userProfileName": {
       "type": "string",
@@ -296,40 +304,26 @@ export class Header {
     "overflowMenuItems": {}
   }; }
   static get events() { return [{
-      "method": "menuItemClick",
-      "name": "menuItemClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "HeaderMenuItemClickEvent",
-        "resolved": "HeaderMenuItemClickEvent",
-        "references": {
-          "HeaderMenuItemClickEvent": {
-            "location": "local"
-          }
-        }
-      }
-    }, {
-      "method": "logoutClick",
-      "name": "logoutClick",
+      "method": "headerClick",
+      "name": "headerClick",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Only available when `logout-url` is set"
+        "text": "Emitted when something in the header is selected.\n\n`event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`"
       },
       "complexType": {
-        "original": "HeaderMenuLogoutClick",
-        "resolved": "HeaderMenuLogoutClick",
+        "original": "HeaderClickEvent | HeaderClickMenuItemEvent",
+        "resolved": "HeaderClickEvent | HeaderClickMenuItemEvent",
         "references": {
-          "HeaderMenuLogoutClick": {
-            "location": "local"
+          "HeaderClickEvent": {
+            "location": "import",
+            "path": "./header.interfaces"
+          },
+          "HeaderClickMenuItemEvent": {
+            "location": "import",
+            "path": "./header.interfaces"
           }
         }
       }

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

@@ -1,34 +1,18 @@
 import { html } from "lit-html";
 import { ifDefined } from "lit-html/directives/if-defined.js";
-export function headerTemplate({ logo, subLogo, mainMenu, useDropDownMenu, showSubLogo, loginUrl, logoutUrl, isLoggedIn, showLoggedIn, userProfileUrl, userProfileName, userHomeUrl, menuItemClick, }) {
-  const bindLoginUrl = showLoggedIn && loginUrl ? loginUrl : undefined;
-  const bindLogoutUrl = showLoggedIn && logoutUrl ? logoutUrl : undefined;
-  return showSubLogo
-    ? html `<dso-header
-        .mainMenu=${mainMenu}
-        use-drop-down-menu=${ifDefined(useDropDownMenu)}
-        is-logged-in=${ifDefined(isLoggedIn)}
-        login-url=${ifDefined(bindLoginUrl)}
-        logout-url=${ifDefined(bindLogoutUrl)}
-        user-profile-url=${ifDefined(userProfileUrl)}
-        user-profile-name=${ifDefined(userProfileName)}
-        user-home-url=${ifDefined(userHomeUrl)}
-        @menuItemClick=${menuItemClick}
-      >
-        <div slot="logo"><img height="40" alt="Omgevingsloket" src="${logo}" /></div>
-        <div slot="sub-logo"><img alt="Regels op de kaart" src="${subLogo}" /></div></div>
-      </dso-header>`
-    : html `<dso-header
-        .mainMenu=${mainMenu}
-        use-drop-down-menu=${ifDefined(useDropDownMenu)}
-        is-logged-in=${ifDefined(isLoggedIn)}
-        login-url=${ifDefined(bindLoginUrl)}
-        logout-url=${ifDefined(bindLogoutUrl)}
-        user-profile-url=${ifDefined(userProfileUrl)}
-        user-profile-name=${ifDefined(userProfileName)}
-        user-home-url=${ifDefined(userHomeUrl)}
-        @menuItemClick=${menuItemClick}
-      >
-        <div slot="logo"><img alt="Omgevingsloket" src="${logo}" /></div>
-      </dso-header>`;
+export function headerTemplate({ logo, subLogo, mainMenu, useDropDownMenu, authStatus, loginUrl, logoutUrl, userProfileUrl, userProfileName, userHomeUrl, onHeaderClick, }) {
+  return html `<dso-header
+    .mainMenu=${mainMenu}
+    use-drop-down-menu=${ifDefined(useDropDownMenu)}
+    auth-status=${ifDefined(authStatus)}
+    login-url=${ifDefined(loginUrl)}
+    logout-url=${ifDefined(logoutUrl)}
+    user-profile-url=${ifDefined(userProfileUrl)}
+    user-profile-name=${ifDefined(userProfileName)}
+    user-home-url=${ifDefined(userHomeUrl)}
+    @headerClick=${onHeaderClick}
+  >
+    <div slot="logo"><img height="40" alt="Omgevingsloket" src="${logo}" /></div>
+    ${subLogo ? html `<div slot="sub-logo"><img alt="Regels op de kaart" src="${subLogo}" /></div>` : undefined}
+  </dso-header>`;
 }