@postnord/pn-marketweb-components 2.0.23-beta3 → 2.0.23-beta6

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-profileselection.js

@@ -0,0 +1,269 @@
+import { Component, Prop, h, State, Element, Host } from "@stencil/core";
+export class PnMarketwebSiteheaderLoginProfileselection {
+  constructor() {
+    // Login dialog
+    this.loginDialog = null;
+    this.loginManager = null;
+    this.endpoint = "";
+    this.loggedin = false;
+    this.idNamespace = "";
+    this.heading = "";
+    this.i18n = { "searchlabel": "", "searchplaceholder": "", "searchbuttontext": "", "menuHomeButton": "", "menuGoBackButton": "", "mainMenuButton": "", "menuStartButton": "", "profileSelectionFlyoutHeading": "" };
+    this.user = null;
+    this.logoutLink = null;
+    this.profileSelectorDialog = {
+      currentProfile: {
+        name: 'Hedin',
+        customerid: '5560230053'
+      },
+      profiles: [
+        {
+          name: 'Bilmetro AB',
+          customerid: '5560612789'
+        }
+      ]
+    };
+  }
+  componentWillLoad() {
+    var _a;
+    console.log('loginDialog', this.loginDialog);
+    console.log('this.loginManager', this.loginManager);
+    console.log('### this.loggedin', this.loggedin);
+    console.log('this.endpoint', this.endpoint);
+    if (!this.heading && ((_a = this.i18n) === null || _a === void 0 ? void 0 : _a.profileSelectionFlyoutHeading)) {
+      this.heading = this.i18n.profileSelectionFlyoutHeading;
+    }
+    this.init();
+  }
+  init() {
+    this.updateUserInfo();
+    this.adjustLoginLinks();
+  }
+  adjustLoginLinks() {
+    var _a, _b, _c, _d;
+    const adjustLink = (link, i) => {
+      link.isLogoutLink = (link.href.indexOf('logout') !== -1);
+      if (link.isLogoutLink) {
+        link.href = this.loginManager.getLogoutUrl(link.href.replace('logout', '').replace('http://window.location.href/?', '').replace('https://window.location.href/?', ''));
+      }
+      if (i === 0 && !link.href) {
+        link.href = this.loginManager.getLoginUrl();
+        link.linkType = 'primary';
+      }
+      if (link.primaryLinkApperance && !link.linkType) {
+        link.linkType = 'primary';
+      }
+    };
+    if ((_a = this.loginDialog) === null || _a === void 0 ? void 0 : _a.loggedInLinks) {
+      (_b = this.loginDialog) === null || _b === void 0 ? void 0 : _b.loggedInLinks.forEach(adjustLink);
+    }
+    this.logoutLink = (_d = (_c = this.loginDialog) === null || _c === void 0 ? void 0 : _c.loggedInLinks.filter(x => x.isLogoutLink)[0]) !== null && _d !== void 0 ? _d : null;
+  }
+  updateUserInfo() {
+    const userInfo = this.loginManager.getUserInfo();
+    this.user = userInfo;
+    console.log('this.user', this.user);
+  }
+  render() {
+    if (!this.loginDialog || !this.profileSelectorDialog) {
+      return;
+    }
+    let hostElementAttribute = {};
+    return (h(Host, Object.assign({}, hostElementAttribute),
+      this.heading ? h("strong", { class: "pn-marketweb-siteheader-login-profileselection-heading" }, this.heading) : null,
+      h("div", { class: "pn-marketweb-siteheader-login-profileselection-user" },
+        h("div", { class: "pn-marketweb-siteheader-login-profileselection-user-name" }, this.user.given_name),
+        h("div", { class: "pn-marketweb-siteheader-login-profileselection-user-description" }, this.user.username)),
+      h("div", { class: "pn-marketweb-siteheader-login-profileselection-currentprofile" },
+        h("div", { class: "pn-marketweb-siteheader-login-profileselection-currentprofile-name" }, this.profileSelectorDialog.currentProfile.name),
+        h("div", { class: "pn-marketweb-siteheader-login-profileselection-currentprofile-description" }, this.profileSelectorDialog.currentProfile.customerid)),
+      h("pn-marketweb-siteheader-login-linklist", { links: this.loginDialog.loggedInLinks.filter(x => x.isLogoutLink === false), loginManager: this.loginManager, idNamespace: this.idNamespace }),
+      h("div", { class: "pn-marketweb-siteheader-login-profileselection-divider" }),
+      this.profileSelectorDialog.profiles.map((profile) => {
+        return (h("div", { class: "pn-marketweb-siteheader-login-profileselection-profileoption" },
+          h("a", { href: `${this.endpoint}?selectprofile=${profile.customerid}}`, class: "pn-marketweb-siteheader-login-profileselection-profileoption-link" },
+            h("div", { class: "pn-marketweb-siteheader-login-profileselection-profileoption-content" },
+              h("div", { class: "pn-marketweb-siteheader-login-profileselection-profileoption-name" }, profile.name),
+              h("div", { class: "pn-marketweb-siteheader-login-profileselection-profileoption-description" }, profile.customerid)),
+            h("pn-icon", { symbol: "arrow-right", small: "false", color: "blue700" }))));
+      }),
+      this.logoutLink ?
+        h("div", { class: "pn-marketweb-siteheader-login-profileselection-logout" },
+          h("a", { href: this.logoutLink.href, rel: "nofollower noopener", class: "pn-marketweb-siteheader-login-profileselection-logout-link" }, this.logoutLink.linkText))
+        : null));
+  }
+  static get is() { return "pn-marketweb-siteheader-login-profileselection"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-marketweb-siteheader-login-profileselection.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-marketweb-siteheader-login-profileselection.css"]
+  }; }
+  static get properties() { return {
+    "loginDialog": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "LoginDialog",
+        "resolved": "LoginDialog",
+        "references": {
+          "LoginDialog": {
+            "location": "import",
+            "path": "./pn-marketweb-siteheader-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "null"
+    },
+    "loginManager": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "MarketWebLoginManager",
+        "resolved": "MarketWebLoginManager",
+        "references": {
+          "MarketWebLoginManager": {
+            "location": "import",
+            "path": "../../../globals/MarketWebLoginManager"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "null"
+    },
+    "endpoint": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "endpoint",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "loggedin": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "loggedin",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "idNamespace": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "id-namespace",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "heading": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "heading",
+      "reflect": false,
+      "defaultValue": "\"\""
+    },
+    "i18n": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "SiteHeaderI18N",
+        "resolved": "SiteHeaderI18N",
+        "references": {
+          "SiteHeaderI18N": {
+            "location": "import",
+            "path": "./pn-marketweb-siteheader-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "{ \"searchlabel\":\"\", \"searchplaceholder\":\"\", \"searchbuttontext\":\"\", \"menuHomeButton\": \"\", \"menuGoBackButton\": \"\", \"mainMenuButton\": \"\", \"menuStartButton\": \"\", \"profileSelectionFlyoutHeading\": \"\" } as SiteHeaderI18N"
+    },
+    "profileSelectorDialog": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ProfileSelectorDialog",
+        "resolved": "ProfileSelectorDialog",
+        "references": {
+          "ProfileSelectorDialog": {
+            "location": "import",
+            "path": "./pn-marketweb-siteheader-types"
+          },
+          "ProfileSelectorCustomer": {
+            "location": "import",
+            "path": "./pn-marketweb-siteheader-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "{\n  currentProfile: {\n    name: 'Hedin',\n    customerid: '5560230053'\n  } as ProfileSelectorCustomer,\n  profiles: [\n    {\n      name: 'Bilmetro AB',\n      customerid: '5560612789'\n    } as ProfileSelectorCustomer\n  ]\n}"
+    }
+  }; }
+  static get states() { return {
+    "user": {},
+    "logoutLink": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+}

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login.css

@@ -3,23 +3,6 @@ pn-marketweb-siteheader-login {
   max-height: 5.2rem;
   position: relative;
 }
-pn-marketweb-siteheader-login strong {
-  padding: 0.8rem 1.6rem;
-  display: flex;
-  align-items: center;
-}
-pn-marketweb-siteheader-login ul, pn-marketweb-siteheader-login li {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-pn-marketweb-siteheader-login li {
-  padding: 0.8rem 1.6rem;
-}
-pn-marketweb-siteheader-login li pn-button {
-  display: block;
-  width: 100%;
-}
 pn-marketweb-siteheader-login pn-nav-dropdown {
   display: none;
 }

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login.js

@@ -6,12 +6,15 @@ export class PnMarketwebSiteheaderLogin {
     this.endpoint = "";
     /** Access token passed from backend */
     this.token = "";
+    this.i18n = { "searchlabel": "", "searchplaceholder": "", "searchbuttontext": "", "menuHomeButton": "", "menuGoBackButton": "", "mainMenuButton": "", "menuStartButton": "", "profileSelectionFlyoutHeading": "" };
     this.emitEvents = true;
     // Login dialog
     this.loginDialog = null;
     /** User Fullname */
     this.fullname = "";
     this.loggedin = false;
+    /** If this is selected we will show the new profile selection dropdown instead of the login version */
+    this.showProfileSelection = false;
     this.loginManager = null;
     this.toggleButtonText = "";
     this.username = this.fullname;
@@ -35,6 +38,47 @@ export class PnMarketwebSiteheaderLogin {
     this.toggleButtonText = this.loginDialog.loginMenuLinkText;
     this.loginManager.init(this.emitEvents);
     this.setToggleButtonText();
+    this.adjustLoginLinks();
+  }
+  adjustLoginLinks() {
+    var _a, _b, _c;
+    if (!((_a = this.loginDialog) === null || _a === void 0 ? void 0 : _a.loginMenuLinks)) {
+      return;
+    }
+    const adjustLink = (link, i) => {
+      link.isLogoutLink = (link.href.indexOf('logout') !== -1);
+      if (link.isLogoutLink) {
+        link.href = this.loginManager.getLogoutUrl(link.href.replace('logout', '').replace('http://window.location.href/?', '').replace('https://window.location.href/?', ''));
+      }
+      if (i === 0 && !link.href) {
+        link.href = this.loginManager.getLoginUrl();
+        link.linkType = 'primary';
+      }
+      if (link.primaryLinkApperance && !link.linkType) {
+        link.linkType = 'primary';
+      }
+    };
+    (_b = this.loginDialog) === null || _b === void 0 ? void 0 : _b.loginMenuLinks.forEach(adjustLink);
+    (_c = this.loginDialog) === null || _c === void 0 ? void 0 : _c.loggedInLinks.forEach(adjustLink);
+    this.loginDialog.legacyLoginLinks = [
+      {
+        href: this.loginManager.getLoginUrl(this.loginDialog.loginUrl),
+        linkText: this.loginDialog.loginLinkText,
+        openInNewWindow: false,
+        isLogoutLink: false,
+        pageLink: null,
+        linkType: 'primary',
+        primaryLinkApperance: true
+      },
+      {
+        href: this.loginManager.getLoginUrl(this.loginDialog.registerUrl),
+        linkText: this.loginDialog.createLoginLinkText,
+        openInNewWindow: false,
+        isLogoutLink: false,
+        pageLink: null,
+        primaryLinkApperance: false
+      }
+    ];
   }
   setUserName() {
     const userInfo = this.loginManager.getUserInfo();
@@ -72,83 +116,23 @@ export class PnMarketwebSiteheaderLogin {
       this.setToggleButtonText();
     }
   }
-  uniqueId(text) {
-    return "loginlink-" + text.replace(/[^A-Za-z0-9.\\\/]/igm, "") + "-" + (this.emitEvents ? "1" : "2");
-  }
-  linkAppearanceAttributes(link) {
-    let attributes = {};
-    if (link.linkType) {
-      switch (link.linkType) {
-        case 'primary':
-          attributes = {
-            appearance: '',
-            variant: ''
-          };
-          break;
-        case 'secondary':
-          attributes = {
-            appearance: 'light',
-            variant: 'outlined'
-          };
-          break;
-        case 'regularlink':
-        default:
-          attributes = {
-            appearance: 'light',
-            variant: 'borderless',
-            icon: 'arrow-right'
-          };
-          break;
-      }
-      return attributes;
-    }
-    if (!link.linkType) {
-      attributes = {
-        appearance: link.primaryLinkApperance ? "dark" : "light"
-      };
-    }
-    return attributes;
-  }
   render() {
-    var _a, _b, _c;
     if (!this.loginDialog) {
       return;
     }
     let hostElementAttribute = {
-      username: null
+      username: null,
+      loggedin: 'false',
     };
     if (this.username) {
       hostElementAttribute.username = this.username;
+      hostElementAttribute.loggedin = this.loggedin + '';
     }
     return (h(Host, Object.assign({}, hostElementAttribute),
-      h("pn-nav-dropdown", { label: this.toggleButtonText, icon: "user", class: "siteheader-logindialog" }, (!this.loginDialog.overrideLoginMenu) ?
-        h("div", { "data-loggedin": this.loggedin + '' }, (!this.loggedin) ?
-          h("div", null, (_a = this.loginDialog.loginTitle) !== null && _a !== void 0 ? _a : h("strong", null, this.loginDialog.loginTitle),
-            ((_b = this.loginDialog.loginMenuLinks) === null || _b === void 0 ? void 0 : _b.length) > 0 ?
-              h("ul", null, this.loginDialog.loginMenuLinks.map((link, i) => {
-                const href = (i === 0 && !link.href) ? this.loginManager.getLoginUrl() : link.href;
-                return (h("li", null,
-                  h("pn-button", Object.assign({ href: href, id: this.uniqueId(link.linkText) }, this.linkAppearanceAttributes(link), (link.openInNewWindow && { target: '_blank' })), link.linkText)));
-              }))
-              : (h("ul", null,
-                h("li", null,
-                  h("pn-button", { href: this.loginManager.getLoginUrl(this.loginDialog.loginUrl), target: "_top" }, this.loginDialog.loginLinkText)),
-                h("li", null,
-                  h("pn-button", { href: this.loginDialog.registerUrl, target: "_top", appearance: "light", variant: "outlined" }, this.loginDialog.createLoginLinkText)))))
-          :
-            h("div", null,
-              h("ul", null, this.loginDialog.loggedInLinks.map((link) => {
-                const isLogoutLink = link.href.indexOf('logout') !== -1;
-                const href = (isLogoutLink) ? this.loginManager.getLogoutUrl(link.href.replace('logout', '').replace('http://window.location.href/?', '').replace('https://window.location.href/?', '')) : link.href;
-                return (h("li", null,
-                  h("pn-button", Object.assign({ href: href, id: this.uniqueId(link.linkText) }, (link.openInNewWindow && { target: '_blank' }), this.linkAppearanceAttributes(link), { onClick: () => { if (isLogoutLink) {
-                      this.loginManager.clearUserData();
-                    } } }), link.linkText)));
-              }))))
+      h("pn-nav-dropdown", { label: this.toggleButtonText, icon: "user", class: "siteheader-logindialog" }, this.loggedin && this.showProfileSelection ?
+        h("pn-marketweb-siteheader-login-profileselection", { loginDialog: this.loginDialog, loginManager: this.loginManager, loggedin: this.loggedin, i18n: this.i18n, idNamespace: this.emitEvents ? '1' : '2', endpoint: this.endpoint })
         :
-          h("div", null,
-            h("ul", null, (_c = this.loginDialog.loginMenuLinks) === null || _c === void 0 ? void 0 : _c.map(link => h("li", null,
-              h("a", { href: link.href, target: link.openInNewWindow ? "_blank" : "_self", class: "btn btn-link" }, link.linkText))))))));
+          h("pn-marketweb-siteheader-login-links", { loginDialog: this.loginDialog, loginManager: this.loginManager, loggedin: this.loggedin, idNamespace: this.emitEvents ? '1' : '2', username: this.username }))));
   }
   static get is() { return "pn-marketweb-siteheader-login"; }
   static get originalStyleUrls() { return {
@@ -195,12 +179,17 @@ export class PnMarketwebSiteheaderLogin {
       "defaultValue": "\"\""
     },
     "i18n": {
-      "type": "any",
+      "type": "unknown",
       "mutable": false,
       "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
+        "original": "SiteHeaderI18N",
+        "resolved": "SiteHeaderI18N",
+        "references": {
+          "SiteHeaderI18N": {
+            "location": "import",
+            "path": "./pn-marketweb-siteheader-types"
+          }
+        }
       },
       "required": false,
       "optional": false,
@@ -208,8 +197,7 @@ export class PnMarketwebSiteheaderLogin {
         "tags": [],
         "text": ""
       },
-      "attribute": "i-1-8n",
-      "reflect": false
+      "defaultValue": "{ \"searchlabel\":\"\", \"searchplaceholder\":\"\", \"searchbuttontext\":\"\", \"menuHomeButton\": \"\", \"menuGoBackButton\": \"\", \"mainMenuButton\": \"\", \"menuStartButton\": \"\", \"profileSelectionFlyoutHeading\": \"\" } as SiteHeaderI18N"
     },
     "emitEvents": {
       "type": "boolean",
@@ -285,10 +273,29 @@ export class PnMarketwebSiteheaderLogin {
       "attribute": "loggedin",
       "reflect": false,
       "defaultValue": "false"
+    },
+    "showProfileSelection": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If this is selected we will show the new profile selection dropdown instead of the login version"
+      },
+      "attribute": "show-profile-selection",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {
     "loginManager": {},
+    "loginLinks": {},
     "toggleButtonText": {},
     "username": {}
   }; }

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.js

@@ -30,6 +30,8 @@ export class PnMarketwebSiteheader {
     this.hideSearch = false;
     /** Hides the login if set to true*/
     this.hideLogin = false;
+    /** If this is selected we will show the new profile selection dropdown instead of the login version */
+    this.showProfileSelection = false;
     /** Autocomplete endpoint */
     this.AutocompleteEndpoint = "";
     /** Forward session to backend */
@@ -38,6 +40,7 @@ export class PnMarketwebSiteheader {
     this.cache = false;
     /** Event based only language switch */
     this.spaMode = false;
+    this.i18n = { "searchlabel": "", "searchplaceholder": "", "searchbuttontext": "", "menuHomeButton": "", "menuGoBackButton": "", "mainMenuButton": "", "menuStartButton": "", "profileSelectionFlyoutHeading": "" };
     this.gotData = false;
     this.fetchingData = false;
     this.homePageLink = "/";
@@ -200,6 +203,7 @@ export class PnMarketwebSiteheader {
   }
   onLoginStateChange(e) {
     var _a, _b, _c;
+    console.log('onLoginStateChange(e', e);
     if (((_a = e.detail) === null || _a === void 0 ? void 0 : _a.loggedIn) && ((_b = e.detail) === null || _b === void 0 ? void 0 : _b.token)) {
       this.loggedIn = ((_c = e.detail) === null || _c === void 0 ? void 0 : _c.loggedIn) === true;
       if (this.sessionForward) {
@@ -268,7 +272,7 @@ export class PnMarketwebSiteheader {
                   h("path", { d: "M108.84,13.35c0,6.34-5.17,9-10,9S89,19.76,89,13.63c0-6.28,5.08-9,10-9S108.84,7.25,108.84,13.35Zm-6.56.18a3.4,3.4,0,1,0-6.8,0,3.29,3.29,0,0,0,3.42,3.41A3.24,3.24,0,0,0,102.28,13.54Zm-83,0c0,4.83-3.32,8.82-8.49,8.82a6.54,6.54,0,0,1-4.65-1.57v5.86H0V5.16H6.17V6.8a6.43,6.43,0,0,1,5.11-2.18C16.41,4.62,19.31,8.58,19.31,13.54Zm-6.53,0A3.27,3.27,0,0,0,9.4,10,3.28,3.28,0,0,0,6,13.54,3.29,3.29,0,0,0,9.4,16.95,3.24,3.24,0,0,0,12.78,13.54Zm103.69,0.27c0-2.54,1.54-3.32,3.6-3.32a6.56,6.56,0,0,1,2.08.3L122.3,5.1a3.92,3.92,0,0,0-1.45-.18c-3.45,0-4.38,2.18-4.38,2.18V5.16H110.3V21.84h6.17v-8ZM141.73,0V21.84h-6.16V20.21a6.43,6.43,0,0,1-5.11,2.18c-5.14,0-8-4-8-8.91s3.32-8.82,8.49-8.82a6.54,6.54,0,0,1,4.65,1.57v-5Zm-6,13.48a3.28,3.28,0,0,0-3.41-3.41A3.24,3.24,0,0,0,129,13.47,3.4,3.4,0,1,0,135.75,13.47ZM81.35,4.62c-3.6,0-4.9,2.18-4.9,2.18V5.16H70.29V21.84h6.16V13.29c0-2.11.79-3.08,2.69-3.08s2.18,1.57,2.18,3.57v8.07h6.22V11.6C87.55,7,85.34,4.62,81.35,4.62ZM64.07,1.42H57.9V21.84h6.16V10.36H67l2.81-5.2H64.07V1.42ZM50.26,11.21c-2-.3-2.87-0.3-2.87-1.09s0.81-.94,2.42-0.94a16.15,16.15,0,0,1,5.11.91L56,5.41a24.56,24.56,0,0,0-6.13-.75c-5.89,0-9,2.27-9,5.89,0,2.81,1.66,4.47,6.53,5.11,2.06,0.27,2.81.39,2.81,1.15s-0.82,1-2.24,1a16.67,16.67,0,0,1-6-1.3L40.77,21.3a22.14,22.14,0,0,0,6.68,1c6.35,0,9.28-2.24,9.28-5.89C56.72,13.54,55.15,12,50.26,11.21ZM40.19,13.35c0,6.34-5.17,9-10,9s-9.82-2.6-9.82-8.73c0-6.28,5.08-9,10-9S40.19,7.25,40.19,13.35Zm-6.56.18a3.4,3.4,0,1,0-6.8,0,3.28,3.28,0,0,0,3.41,3.41A3.24,3.24,0,0,0,33.63,13.54Z", fill: "#00A0D6", transform: "translate(0 0)" }))))),
           h("div", { class: "siteheader-topright" },
             h("slot", { name: "toprightstart" }),
-            (this.gotData && this.loginDialog && !this.hideLogin) && (h("pn-marketweb-siteheader-login", { token: this.userToken, fullname: this.userFullname, loggedin: this.userLoggedin, loginDialog: this.loginDialog, endpoint: this.endpoint, i18n: this.i18n })),
+            (this.gotData && this.loginDialog && !this.hideLogin) && (h("pn-marketweb-siteheader-login", { token: this.userToken, fullname: this.userFullname, loggedin: this.userLoggedin, loginDialog: this.loginDialog, endpoint: this.endpoint, i18n: this.i18n, showProfileSelection: this.showProfileSelection })),
             (this.gotData && this.languageOptions && this.languageOptions.length) && !this.hideLanguageSelector &&
               h("pn-language-selector", { value: this.language }, this.languageOptions.map(language => h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))),
             h("slot", { name: "toprightend" }))),
@@ -290,7 +294,7 @@ export class PnMarketwebSiteheader {
                       h("pn-mainnav-list", { heading: item.promotedMenuItemsHeader }, item.promotedMenuItems.map((childitem) => (h("pn-mainnav-link", { href: childitem.href, name: childitem.linkText, target: childitem.openInNewWindow ? "_blank" : "_self", linkid: this.promotedItemId(childitem) + item.id })))))));
               })),
               h("div", { slot: "footer", class: "siteheader-menu-footer" },
-                (this.gotData && this.loginDialog && !this.hideLogin) && (h("pn-marketweb-siteheader-login", { emitEvents: false, loginDialog: this.loginDialog, endpoint: this.endpoint, fullname: this.userFullname, loggedin: this.userLoggedin, i18n: this.i18n })),
+                (this.gotData && this.loginDialog && !this.hideLogin) && (h("pn-marketweb-siteheader-login", { emitEvents: false, loginDialog: this.loginDialog, endpoint: this.endpoint, fullname: this.userFullname, loggedin: this.userLoggedin, i18n: this.i18n, showProfileSelection: this.showProfileSelection })),
                 (this.gotData && this.languageOptions && this.languageOptions.length) && !this.hideLanguageSelector &&
                   h("pn-language-selector", { value: this.language }, this.languageOptions.map(language => h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))),
                 !this.hideSiteSelector &&
@@ -508,6 +512,24 @@ export class PnMarketwebSiteheader {
       "reflect": true,
       "defaultValue": "false"
     },
+    "showProfileSelection": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "If this is selected we will show the new profile selection dropdown instead of the login version"
+      },
+      "attribute": "show-profile-selection",
+      "reflect": true,
+      "defaultValue": "false"
+    },
     "AutocompleteEndpoint": {
       "type": "string",
       "mutable": false,

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.stories.js

@@ -1,5 +1,7 @@
 import readme from "./readme.md";
 
+const usertoken = '5e5357915ea021150aa24fe6bd889bdacee14da41632a6c305e13ee';
+
 export default {
   title: "Web Components/Market web site Header",
   parameters: {
@@ -51,6 +53,7 @@ const PrimaryTemplate = ({ ...args }) => {
   hide-search="false"
   hide-login="false"
   cache="false"
+  show-profile-selection="true"
   autocomplete-endpoint="http://localhost:51444/find_v2/_autocomplete"
   session-forward="true">
   <a href="" class="header-cart" slot="toprightend" style="align-self:center;position:relative;text-decoration:none;">
@@ -77,6 +80,45 @@ Primary.args = {
   endpoint: 'http://localhost:51444'
 }
 
+const OldLoginDropdownTemplate = ({ ...args }) => {
+  return `
+  <div style="background:#ddd;min-height:100vh;">
+  <pn-marketweb-siteheader 
+  market="${ args.market }"
+  language="${ args.language }"
+  endpoint="${ args.endpoint }"
+  hide-site-selector="false"
+  hide-language-selector="false"
+  hide-search="false"
+  hide-login="false"
+  show-profile-selection="false"
+  cache="false"
+  autocomplete-endpoint="http://localhost:51444/find_v2/_autocomplete"
+  session-forward="true">
+  <a href="" class="header-cart" slot="toprightend" style="align-self:center;position:relative;text-decoration:none;">
+    <span>Varukorg</span>
+    <pn-icon symbol="shop" color="blue700" class="pn-icon"></pn-icon>
+</a>
+</pn-marketweb-siteheader>
+<div style="height:120vh; margin:2em; max-width:calc(100vw - 1em);background:#ccc;border:1px solid #333;">
+Content that is higher than 100% viewport height
+</div>
+</div>
+
+<!--
+<link rel="alternate" href="https://www.postnord.se/en/business-solutions" hreflang="en" />
+<link rel="alternate" href="https://www.postnord.se/foretagslosningar" hreflang="sv" />
+-->
+`;
+};
+//   
+export const OldLoginDropdown = OldLoginDropdownTemplate.bind({});
+OldLoginDropdown.args = {
+  market : "se",
+  language: 'sv',
+  endpoint: 'http://localhost:51444'
+}
+
 
 const MinimalOptionsTemplate = ({ ...args }) => {
   return `
@@ -191,8 +233,33 @@ export const LoggedIn = LoggedInTemplate.bind({});
 LoggedIn.args = {
   market : "se",
   language: 'sv',
-  endpoint: 'https://com-integration.postnord.com',
-  token: '26be29f67598bb2ee0530ac63c938727d703262646e521b67fe9751',
+  // endpoint: 'https://com-integration.postnord.com',
+  endpoint: 'http://localhost:51444/',
+  token: usertoken,
+};
+
+const LoggedInProfileSelectionTemplate = ({ ...args }) => {
+  return `
+  <div style="background:#ddd;min-height:100vh;">
+  <pn-marketweb-siteheader
+    market="${ args.market }"
+    language="${ args.language }"
+    endpoint="${ args.endpoint }"
+    user-token="${ args.token }"
+    show-profile-selection="true"
+  >
+  </pn-marketweb-siteheader>
+</div>
+`;
+};
+
+export const LoggedInProfileSelection = LoggedInProfileSelectionTemplate.bind({});
+LoggedInProfileSelection.args = {
+  market : "se",
+  language: 'sv',
+  // endpoint: 'https://com-integration.postnord.com',
+  endpoint: 'http://localhost:51444/',
+  token: usertoken,
 };
 
 const BusinessUserLoggedInTemplate = ({ ...args }) => {