@dso-toolkit/core 40.1.0 → 42.0.0

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>`;
 }

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

@@ -77,7 +77,6 @@ import sortAscending from '@dso-toolkit/sources/src/icons/sort-ascending.svg';
 import sortDescending from '@dso-toolkit/sources/src/icons/sort-descending.svg';
 import sort from '@dso-toolkit/sources/src/icons/sort.svg';
 import sound from '@dso-toolkit/sources/src/icons/sound.svg';
-import statusForbidden from '@dso-toolkit/sources/src/icons/status-forbidden.svg';
 import statusDanger from '@dso-toolkit/sources/src/icons/status-danger.svg';
 import statusInfo from '@dso-toolkit/sources/src/icons/status-info.svg';
 import statusSuccess from '@dso-toolkit/sources/src/icons/status-success.svg';
@@ -171,7 +170,6 @@ const icons = [
   { alias: 'sort', svg: sort },
   { alias: 'sound', svg: sound },
   { alias: 'status-danger', svg: statusDanger },
-  { alias: 'status-forbidden', svg: statusForbidden },
   { alias: 'status-info', svg: statusInfo },
   { alias: 'status-success', svg: statusSuccess },
   { alias: 'status-warning', svg: statusWarning },

package/dist/collection/components/pagination/pagination.js

@@ -7,11 +7,11 @@ export class Pagination {
     this.formatHref = (page) => '#' + page;
   }
   clickHandler(e, page) {
-    if (e.button !== 0 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey) {
-      return;
-    }
-    e.preventDefault();
-    this.selectPage.emit({ originalEvent: e, page });
+    this.selectPage.emit({
+      originalEvent: e,
+      page,
+      isModifiedEvent: e.button !== 0 || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey,
+    });
   }
   ;
   render() {
@@ -21,13 +21,13 @@ export class Pagination {
     const pages = Array.from({ length: this.totalPages }, (_value, i) => i + 1);
     return (h("ul", { class: "pagination" },
       h("li", { class: this.currentPage === pages[0] ? 'dso-page-hidden' : undefined },
-        h("a", { href: this.formatHref(pages[0]), "aria-label": "Vorige", onClick: e => this.clickHandler(e, pages[0]) },
+        h("a", { href: this.formatHref(pages[0]), "aria-label": "Vorige", onClick: e => this.currentPage && this.clickHandler(e, pages[this.currentPage - 2]) },
           h("dso-icon", { icon: "chevron-left" }))),
       pages.map(page => (h("li", { key: page, class: this.currentPage === page ? 'active' : undefined }, this.currentPage === page
         ? (h("span", { "aria-current": "page" }, page))
         : (h("a", { href: this.formatHref(page), onClick: e => this.clickHandler(e, page) }, page))))),
       h("li", { class: this.currentPage === pages[pages.length - 1] ? 'dso-page-hidden' : undefined },
-        h("a", { href: this.formatHref(pages[pages.length - 1]), "aria-label": "Volgende", onClick: e => this.clickHandler(e, pages[pages.length - 1]) },
+        h("a", { href: this.formatHref(pages[pages.length - 1]), "aria-label": "Volgende", onClick: e => this.currentPage && this.clickHandler(e, pages[this.currentPage]) },
           h("dso-icon", { icon: "chevron-right" })))));
   }
   static get is() { return "dso-pagination"; }