@dso-toolkit/core 45.2.0 → 46.0.0

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

@@ -1,23 +1,27 @@
-import { Component, Element, Event, Fragment, h, Prop, State, Watch, } from "@stencil/core";
+import { Fragment, h } from "@stencil/core";
 import clsx from "clsx";
 import debounce from "debounce";
 const minDesktopViewportWidth = 992;
 export class Header {
   constructor() {
-    this.mainMenu = [];
-    this.useDropDownMenu = "auto";
-    /** Used to show the login/logout option. 'none' renders nothing. */
-    this.authStatus = 'none';
-    this.hasSubLogo = false;
-    this.overflowMenuItems = 0;
     this.onWindowResize = debounce(() => {
       this.setDropDownMenu();
       this.setOverflowMenu();
     }, 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)));
+      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.mainMenu = [];
+    this.useDropDownMenu = "auto";
+    this.authStatus = "none";
+    this.loginUrl = undefined;
+    this.logoutUrl = undefined;
+    this.userProfileName = undefined;
+    this.userProfileUrl = undefined;
+    this.userHomeUrl = undefined;
+    this.showDropDown = undefined;
+    this.hasSubLogo = false;
+    this.overflowMenuItems = 0;
   }
   clickHandler(e, type, options) {
     var _a, _b;
@@ -29,7 +33,6 @@ export class Header {
       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,
     });
   }
-  ;
   setShowDropDown(value) {
     if (value === "auto") {
       this.setDropDownMenu();
@@ -65,7 +68,7 @@ export class Header {
     if (this.showDropDown) {
       return;
     }
-    if (this.overflowMenuItems != 0) {
+    if (this.overflowMenuItems !== 0) {
       this.overflowMenuItems = 0;
       return;
     }
@@ -88,253 +91,214 @@ export class Header {
     if (this.showDropDown === undefined) {
       return;
     }
-    return (h(Fragment, null,
-      h("div", { class: clsx("dso-header", {
-          ["use-drop-down"]: this.showDropDown,
-          ["has-sub-logo"]: this.hasSubLogo,
-        }), ref: (element) => (this.wrapper = element) },
-        h("div", { class: "logo-container" },
-          h("div", { class: "logo" },
-            h("slot", { name: "logo" })),
-          h("div", { class: "sub-logo" },
-            h("slot", { name: "sub-logo" }))),
-        this.showDropDown && this.mainMenu && this.mainMenu.length > 0 && (h("div", { class: "dropdown" },
-          h("dso-dropdown-menu", { "dropdown-align": "right" },
-            h("button", { type: "button", slot: "toggle" },
-              h("span", null, "Menu")),
-            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 }) }, "Mijn Omgevingsloket"))),
-                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 }) }, "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.authStatus === 'loggedIn' && (h("div", { class: "profile" },
-              h("span", { class: "profile-label" }, "Welkom:"),
-              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
-                .filter((_, index) => index < this.mainMenu.length - this.overflowMenuItems)
-                .map(this.MenuItem),
-              this.overflowMenuItems > 0 && (h("li", null,
-                h("dso-dropdown-menu", { "dropdown-align": "left" },
-                  h("button", { type: "button", slot: "toggle" },
-                    h("span", null, "Meer")),
-                  h("div", { class: "dso-dropdown-options" },
-                    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, onClick: e => this.clickHandler(e, 'userHome', { url: this.userHomeUrl }) },
-                  h("dso-icon", { icon: "user-line" }),
-                  "Mijn Omgevingsloket")))))))))));
+    return (h(Fragment, null, h("div", { class: clsx("dso-header", {
+        ["use-drop-down"]: this.showDropDown,
+        ["has-sub-logo"]: this.hasSubLogo,
+      }), ref: (element) => (this.wrapper = element) }, h("div", { class: "logo-container" }, h("div", { class: "logo" }, h("slot", { name: "logo" })), h("div", { class: "sub-logo" }, h("slot", { name: "sub-logo" }))), this.showDropDown && this.mainMenu && this.mainMenu.length > 0 && (h("div", { class: "dropdown" }, h("dso-dropdown-menu", { "dropdown-align": "right" }, h("button", { type: "button", slot: "toggle" }, h("span", null, "Menu")), 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 }) }, "Mijn Omgevingsloket"))), 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 }) }, "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.authStatus === "loggedIn" && (h("div", { class: "profile" }, h("span", { class: "profile-label" }, "Welkom:"), 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
+        .filter((_, index) => this.mainMenu && index < this.mainMenu.length - this.overflowMenuItems)
+        .map(this.MenuItem), this.overflowMenuItems > 0 && (h("li", null, h("dso-dropdown-menu", { "dropdown-align": "left" }, h("button", { type: "button", slot: "toggle" }, h("span", null, "Meer")), 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: "menu-user-home" }, h("a", { href: this.userHomeUrl, onClick: (e) => this.clickHandler(e, "userHome", { url: this.userHomeUrl }) }, h("dso-icon", { icon: "user-line" }), "Mijn Omgevingsloket")))))))))));
   }
   static get is() { return "dso-header"; }
   static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() { return {
-    "$": ["header.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["header.css"]
-  }; }
-  static get properties() { return {
-    "mainMenu": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "HeaderMenuItem[]",
-        "resolved": "HeaderMenuItem[] | undefined",
-        "references": {
-          "HeaderMenuItem": {
-            "location": "import",
-            "path": "./header.interfaces"
+  static get originalStyleUrls() {
+    return {
+      "$": ["header.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["header.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "mainMenu": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "HeaderMenuItem[]",
+          "resolved": "HeaderMenuItem[] | undefined",
+          "references": {
+            "HeaderMenuItem": {
+              "location": "import",
+              "path": "./header.interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "defaultValue": "[]"
-    },
-    "useDropDownMenu": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "\"always\" | \"never\" | \"auto\"",
-        "resolved": "\"always\" | \"auto\" | \"never\"",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "defaultValue": "[]"
       },
-      "attribute": "use-drop-down-menu",
-      "reflect": false,
-      "defaultValue": "\"auto\""
-    },
-    "authStatus": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "'none' | 'loggedIn' | 'loggedOut'",
-        "resolved": "\"loggedIn\" | \"loggedOut\" | \"none\"",
-        "references": {}
+      "useDropDownMenu": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"always\" | \"never\" | \"auto\"",
+          "resolved": "\"always\" | \"auto\" | \"never\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "use-drop-down-menu",
+        "reflect": false,
+        "defaultValue": "\"auto\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Used to show the login/logout option. 'none' renders nothing."
+      "authStatus": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"none\" | \"loggedIn\" | \"loggedOut\"",
+          "resolved": "\"loggedIn\" | \"loggedOut\" | \"none\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Used to show the login/logout option. 'none' renders nothing."
+        },
+        "attribute": "auth-status",
+        "reflect": false,
+        "defaultValue": "\"none\""
       },
-      "attribute": "auth-status",
-      "reflect": false,
-      "defaultValue": "'none'"
-    },
-    "loginUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
+      "loginUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "When the `authStatus` is `loggedOut` a loginUrl can be provided, the login button will render as an anchor."
+        },
+        "attribute": "login-url",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "When the `authStatus` is `loggedOut` a loginUrl can be provided, the login button will render as an anchor."
+      "logoutUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "logout-url",
+        "reflect": false
       },
-      "attribute": "login-url",
-      "reflect": false
-    },
-    "logoutUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
+      "userProfileName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "user-profile-name",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "userProfileUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "user-profile-url",
+        "reflect": false
       },
-      "attribute": "logout-url",
-      "reflect": false
-    },
-    "userProfileName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "user-profile-name",
-      "reflect": false
-    },
-    "userProfileUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "user-profile-url",
-      "reflect": false
-    },
-    "userHomeUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string | undefined",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "user-home-url",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "showDropDown": {},
-    "hasSubLogo": {},
-    "overflowMenuItems": {}
-  }; }
-  static get events() { return [{
-      "method": "dsoHeaderClick",
-      "name": "dsoHeaderClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "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": "HeaderClickEvent | HeaderClickMenuItemEvent",
-        "resolved": "HeaderClickEvent | HeaderClickMenuItemEvent",
-        "references": {
-          "HeaderClickEvent": {
-            "location": "import",
-            "path": "./header.interfaces"
-          },
-          "HeaderClickMenuItemEvent": {
-            "location": "import",
-            "path": "./header.interfaces"
+      "userHomeUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "user-home-url",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "showDropDown": {},
+      "hasSubLogo": {},
+      "overflowMenuItems": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dsoHeaderClick",
+        "name": "dsoHeaderClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "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'`"
+        },
+        "complexType": {
+          "original": "HeaderClickEvent | HeaderClickMenuItemEvent",
+          "resolved": "HeaderClickEvent | HeaderClickMenuItemEvent",
+          "references": {
+            "HeaderClickEvent": {
+              "location": "import",
+              "path": "./header.interfaces"
+            },
+            "HeaderClickMenuItemEvent": {
+              "location": "import",
+              "path": "./header.interfaces"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "useDropDownMenu",
-      "methodName": "setShowDropDown"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "useDropDownMenu",
+        "methodName": "setShowDropDown"
+      }];
+  }
 }