@postnord/pn-marketweb-components 2.0.148 → 2.0.150-test

package/esm/pn-language-selector_9.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, e as createEvent, h, a as Host, g as getElement } from './index-c118284d.js';
-import { s as state$1, o as onChange$1 } from './pn-mainnav-store-5d91f523.js';
-import { M as MarketWebLoginManager } from './MarketWebLoginManager-9499bd89.js';
-import { c as createStore } from './index-7f77b0ba.js';
+import { r as registerInstance, e as createEvent, h, a as Host, g as getElement } from './index-5397620b.js';
+import { s as state$1, o as onChange$1 } from './pn-mainnav-store-28571e54.js';
+import { s as state$2 } from './pn-marketweb-siteheader-store-cd0a1dab.js';
+import { c as createStore } from './index-7b21ecff.js';
 
 const translations$1 = {
   'sv': {
@@ -26,14 +26,14 @@ const translations$1 = {
 
 const pnLanguageSelectorCss = "pn-language-selector{max-height:5.2rem}pn-language-selector pn-nav-dropdown:not([data-open]) .nav-dropdown-content-container,pn-language-selector pn-nav-dropdown[data-open=false] .nav-dropdown-content-container{display:none}pn-language-selector pn-nav-dropdown{display:block}.languageselector{position:relative}.languageselector-togglebtn{cursor:pointer;border:0;padding:0.64rem 0;background-color:#FFFFFF;color:#005D92;font-size:1.6rem}.languageselector-togglebtn:hover,.languageselector-togglebtn:focus,.languageselector-togglebtn:active{color:#0D234B;text-decoration:underline}.languageselector-togglebtn svg{width:1.9rem;height:1.9rem}.languageselector-title{padding:0.8rem 1.6rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.languageselector-list{margin:0;padding:0;list-style:none}";
 
-const PnlanguageSelector = class {
+let PnlanguageSelector = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.setLanguage = createEvent(this, "setLanguage", 7);
+    /* Current language code  */
     this.value = "";
     this.selectedLanguageName = "";
     this.options = [];
-    this.i18n = undefined;
   }
   componentWillLoad() {
     this.setInitialSelectedLanguageName();
@@ -115,15 +115,15 @@ PnlanguageSelector.style = pnLanguageSelectorCss;
 
 const pnLanguageSelectorOptionCss = "pn-language-selector-option{margin:0;padding:0;list-style:none}.languageselector-button,.languageselector-link{width:100%;padding:1.1rem 1.6rem 1.1rem 1.4rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;position:relative;text-decoration:none;border:0;cursor:pointer;background-color:#FFFFFF;color:#005D92;font-size:1.6rem;font-weight:bold;border-radius:0}.languageselector-button:hover,.languageselector-button:focus,.languageselector-button:active,.languageselector-link:hover,.languageselector-link:focus,.languageselector-link:active{color:#0D234B;text-decoration:underline;-webkit-box-shadow:none;box-shadow:none;background-color:#F3F2F2;color:#005D92;outline:none}.languageselector-itemtext{display:inline-block;margin-left:1rem}.languageselector-radio-outer{background:#fff;border:0.1em solid #D3CECB;border-radius:50%;height:1.5em;width:1.5em;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, -webkit-box-shadow 0.1s;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, -webkit-box-shadow 0.1s;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.1s;transition:border 0.2s ease-in-out, background-color 0.2s ease-in-out, box-shadow 0.1s, -webkit-box-shadow 0.1s;cursor:pointer}.languageselector-radio-outer:focus>.languageselector-radio-outer,.languageselector-radio-outer:active>.languageselector-radio-outer{-webkit-box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005D92;box-shadow:0 0 0 0.1rem white, 0 0 0 0.3rem #005D92}.languageselector-radio-outer:hover>.languageselector-radio-outer{border:0.1rem solid #005D92;background:#E0F8FF}[selected=true] .languageselector-radio-outer{border:0.1rem solid #005D92}.languageselector-radio-inner{-webkit-transform:scale(0);transform:scale(0);height:1em;width:1em;background-color:#005D92;border-radius:50%;-webkit-transform-origin:center center;transform-origin:center center;-webkit-transition:-webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:-webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92), -webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}[selected=true] .languageselector-radio-inner{-webkit-transform:scale(1);transform:scale(1)}";
 
-const PnlanguageSelectorOption = class {
+let PnlanguageSelectorOption = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.setCurrentLanguage = createEvent(this, "setCurrentLanguage", 7);
+    /** What you write in the comment block above each prop is what ends up in the description fields in the prop table in the documentation */
     this.name = "";
     this.code = "";
     this.url = "";
     this.selected = false;
-    this.currentLanguage = undefined;
   }
   onOptionClick() {
     const currentlanguage = {
@@ -180,16 +180,21 @@ const translations = {
 
 const pnMainnavCss = "pn-mainnav{display:-ms-flexbox;display:flex;-ms-flex-flow:row-reverse;flex-flow:row-reverse;position:relative;width:100%;min-height:5.1rem}@media screen and (min-width: 48em){pn-mainnav{-ms-flex-flow:row;flex-flow:row}}@media screen and (min-width: 64em){pn-mainnav{-ms-flex-flow:column;flex-flow:column}}@media screen and (min-width: 64em){pn-mainnav [slot=footer]{display:none}}pn-mainnav>nav{height:auto;width:100vw;background-color:#FFFFFF;z-index:2;-webkit-transform:translateX(100vw);transform:translateX(100vw);-webkit-transition:-webkit-transform 0.2s 0s;transition:-webkit-transform 0.2s 0s;transition:transform 0.2s 0s;transition:transform 0.2s 0s, -webkit-transform 0.2s 0s;-webkit-transition-property:visibility, -webkit-transform;transition-property:visibility, -webkit-transform;transition-property:transform, visibility;transition-property:transform, visibility, -webkit-transform;display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;visibility:hidden;position:fixed;top:3em;bottom:0;left:0}@media screen and (min-width: 48em){pn-mainnav>nav{top:6.5em}}pn-mainnav>nav[data-menu-open=true]{visibility:visible;-webkit-transform:translateX(0);transform:translateX(0)}@media screen and (min-width: 64em){pn-mainnav>nav{-ms-flex-flow:row-reverse;flex-flow:row-reverse;top:0;position:static;height:auto;width:100%;-ms-flex-pack:justify;justify-content:space-between;visibility:visible;-webkit-transform:translateX(0);transform:translateX(0)}}pn-mainnav>nav a{text-decoration:none}pn-mainnav>nav button{cursor:pointer}.mainnav-toggle{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:center;align-self:center}@media screen and (min-width: 64em){.mainnav-toggle{display:none}}.mainnav-toggle>button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:#005D92;color:#FFFFFF;border-radius:2.4rem;border:none;padding:0.6rem 1.6rem;cursor:pointer;font-size:1.6rem}.mainnav-toggle>button:focus{outline:0}.mainnav-toggle>button pn-icon{margin-left:0.8rem;display:block}.mainnav-toggle>button svg{display:block;margin:-0.2rem -0.5rem -0.2rem 0;height:1.9rem;width:1.9rem}";
 
-const PnMainnav = class {
+let PnMainnav = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.menuLanguageChange = createEvent(this, "menuLanguageChange", 7);
     this.marketChange = createEvent(this, "marketChange", 7);
     this.menuOpenChange = createEvent(this, "menuOpenChange", 7);
+    /** Specifies which market we want to fetch navigation for (se,dk,fi,no,com) */
     this.market = "se";
+    /** Specifies which language we want to show navigation in (sv,da,fi,no,en) */
     this.language = "sv";
+    /** Specifies which endpoint we should read information from */
     this.navigationId = "mainnav";
+    /** Specifies which endpoint we should read information from */
     this.openMenu = false;
+    /** Sets the label of the navigation (Required if multiple nav elements are on a page) */
     this.navLabel = "";
   }
   componentWillLoad() {
@@ -237,7 +242,7 @@ PnMainnav.style = pnMainnavCss;
 
 const pnMainnavLevelCss = "pn-mainnav-level{display:block}pn-mainnav-level:not(.hydrated){max-height:5.6rem;overflow:hidden}pn-mainnav-level[data-level=\"1\"]{width:100%;right:0;overflow-y:scroll;overflow-x:hidden;-ms-flex:1;flex:1}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"1\"]{width:auto;overflow:initial}pn-mainnav-level[data-level=\"1\"]::-webkit-scrollbar{display:none}}pn-mainnav-level[data-level=\"2\"]{position:absolute;top:0;bottom:0;left:0;width:100vw;padding:0;background-color:#FFFFFF;z-index:1;-webkit-transform:translateX(100vw);transform:translateX(100vw);-webkit-transition:-webkit-transform 0.2s 0s;transition:-webkit-transform 0.2s 0s;transition:transform 0.2s 0s;transition:transform 0.2s 0s, -webkit-transform 0.2s 0s;-webkit-transition-property:visibility, -webkit-transform;transition-property:visibility, -webkit-transform;transition-property:transform, visibility;transition-property:transform, visibility, -webkit-transform;overflow:scroll;visibility:hidden}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"]{left:0;top:calc(100% + 1rem);bottom:auto;border-radius:1.6rem;width:auto;padding:1.6rem 1.6rem 0 1.6rem;-webkit-box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);-moz-box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);height:auto;z-index:3;display:none}pn-mainnav-level[data-level=\"2\"][data-menuitem-rightaligned=true]{right:0;left:unset}}@media screen and (max-height: 33.125em){pn-mainnav-level[data-level=\"2\"]{-ms-overflow-style:none;scrollbar-width:none}pn-mainnav-level[data-level=\"2\"]::-webkit-scrollbar{display:none}}pn-mainnav-level[data-level=\"2\"][aria-hidden=false]{-webkit-transform:translateX(0);transform:translateX(0);visibility:visible}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][aria-hidden=false]{display:block;overflow:visible}pn-mainnav-level[data-level=\"2\"][aria-hidden=false]:not([data-level-listcount=\"1\"]){display:grid;grid-template-columns:minmax(12em, 20em) 1fr;grid-template-rows:auto auto;gap:0px 1.6rem;grid-template-areas:\"top top\" \"left right\"}}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][data-level-alignment=left]{right:0;left:unset}}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][data-level-alignment=center]{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}pn-mainnav-level[data-level=\"2\"] a{color:#005D92;text-decoration:none}pn-mainnav-level [slot=top]{display:-ms-flexbox;display:flex}@media screen and (min-width: 48em){pn-mainnav-level [slot=top]{display:none}}[data-menu-currentlevel=\"2\"] pn-mainnav-level [slot=footer]{display:none;-ms-scroll-chaining:none;overscroll-behavior:contain}.mainnav-level-header{grid-area:top}.mainnav-level-header>label{position:absolute;width:0.1rem;height:0.1rem;padding:0;margin:-0.1rem;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;white-space:nowrap}.mainnav-level-header>button{display:block;position:relative;border:none;background-color:transparent;color:#005D92;padding:2.4rem 0 2.4rem 6.2rem;width:100%;text-align:left}@media screen and (min-width: 64em){.mainnav-level-header>button{display:none;speak:none}}.mainnav-level-header>button>pn-icon{speak:none;position:absolute;height:2.4rem;width:2.4rem;left:3rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}[data-level=\"2\"] .mainnav-level-header>pn-mainnav-link>a{font-size:2.4rem}";
 
-const PnMainnavLevel = class {
+let PnMainnavLevel = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.label = "";
@@ -319,7 +324,7 @@ PnMainnavLevel.style = pnMainnavLevelCss;
 
 const pnMainnavListCss = "pn-mainnav-list{display:block;overflow:visible;list-style:none;margin:0;padding:0;grid-area:right}@media screen and (min-width: 64em){pn-mainnav-list+pn-mainnav-list{grid-area:left;border-right:0.1rem solid #D3CECB;margin-bottom:1.6rem;margin-right:-0.7rem;padding-right:0.7rem}}[data-level=\"1\"]>pn-mainnav-list{overflow:scroll;-webkit-overflow-scrolling:touch}@media screen and (min-width: 64em){[data-level=\"1\"]>pn-mainnav-list{height:100%;display:-ms-flexbox;display:flex;-ms-flex-flow:row;flex-flow:row;overflow:visible;padding:0}}@media screen and (min-width: 64em){[data-level=\"2\"]>pn-mainnav-list[data-navlist-showcolumns=true]{-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:1.6rem;-moz-column-gap:1.6rem;column-gap:1.6rem;padding-bottom:1.6rem}}.mainnav-list-heading{display:none;font-weight:bold;-webkit-column-span:all;-moz-column-span:all;column-span:all;font-size:1.8rem;padding:1.4rem 1.4rem 1.4rem 4.8rem}@media screen and (min-width: 64em){.mainnav-list-heading{display:block;padding:0 1.4rem 1.4rem 1.4rem}}";
 
-const PnMainnavList = class {
+let PnMainnavList = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.heading = "";
@@ -335,49 +340,420 @@ const PnMainnavList = class {
 };
 PnMainnavList.style = pnMainnavListCss;
 
+class MarketWebLoginManager {
+  constructor(options = null) {
+    var _a;
+    this.eventTarget = (window !== null && window !== void 0 ? window : document === null || document === void 0 ? void 0 : document.body);
+    this.endpoint = "";
+    this.storagePrefix = "pn-user";
+    this.checkUserLoggedInStateInterval = 0;
+    this.baseUrls = {
+      at: 'https://atportal.postnord.com/api/unified-login/backend',
+      prod: 'https://portal.postnord.com/api/unified-login/backend',
+    };
+    this.events = {
+      loginstatechange: "loginstatechange"
+    };
+    this.endpoints = {
+      authorizationEndpoint: `/authorization`,
+      tokenExchangeEndpoint: `/token`,
+      userInfoEndpoint: `/user`,
+      logoutEndpoint: `/logout`,
+    };
+    this.keys = {
+      tokensource: 'tokensource',
+      token: 'token',
+      accessToken: 'accessToken',
+      user: 'user',
+      expire: 'expire',
+      expireDate: 'expiredate'
+    };
+    this.overridetokenValue = 'overridetokenValue';
+    this.siteUrl = window.location.origin;
+    this.abortSignalForLoginCheck = null;
+    this.loginCheckInProgress = false;
+    this.loginCheckTimer = null;
+    this.store = {
+      get: (key) => {
+        const value = window.sessionStorage.getItem(`${this.storagePrefix}-${key}`);
+        if (!value) {
+          return value;
+        }
+        if (value.indexOf('{') === 0) {
+          try {
+            return JSON.parse(value);
+          }
+          catch (e) {
+          }
+        }
+        if (value.indexOf(',') !== -1) {
+          return value.split(',');
+        }
+        return value;
+      },
+      set: (key, value) => {
+        if (typeof value === "object" && typeof value.length === "undefined") {
+          window.sessionStorage.setItem(`${this.storagePrefix}-${key}`, JSON.stringify(value));
+          return;
+        }
+        window.sessionStorage.setItem(`${this.storagePrefix}-${key}`, value);
+      },
+      remove: (key) => {
+        window.sessionStorage.removeItem(`${this.storagePrefix}-${key}`);
+      },
+    };
+    if (!options) {
+      return;
+    }
+    this.eventTarget = (options.eventTarget) ? options.eventTarget : this.eventTarget;
+    this.endpoint = options.endpoint ? options.endpoint : `${window.location.protocol}//${window.location.host}`;
+    (_a = this.storagePrefix) !== null && _a !== void 0 ? _a : (this.storagePrefix = options.storagePrefix);
+    this.checkUserLoggedInStateInterval = (options.checkUserLoggedInStateInterval && options.checkUserLoggedInStateInterval > 0) ? parseInt((options.checkUserLoggedInStateInterval + ''), 10) : 0;
+    if (options.userInfo) {
+      this.store.set(this.keys.user, options.userInfo);
+      this.registerToken(this.overridetokenValue, 'override');
+    }
+  }
+  init(checkParameters = true) {
+    if (checkParameters) {
+      this.checkParameters();
+      this.checkPNTopbar();
+      this.checkExpireTime();
+      if (this.store.get(this.keys.token) && !this.store.get(this.keys.user)) {
+        this.fetchUserInfo();
+      }
+      this.loginStateChange();
+      if (this.checkUserLoggedInStateInterval > 0) {
+        this.initiateLoggedInCheck();
+      }
+    }
+  }
+  setSiteUrl(siteUrl) {
+    if (siteUrl) {
+      this.siteUrl = siteUrl;
+    }
+  }
+  initiateLoggedInCheck() {
+    if (this.isLoggedIn()) {
+      if (window && window['AbortController']) {
+        this.abortSignalForLoginCheck = new AbortController();
+      }
+      this.loginCheckTimer = window.setInterval(() => {
+        this.doExternalLoggedInCheck().then(() => { }).catch(() => { });
+      }, this.checkUserLoggedInStateInterval);
+    }
+  }
+  async doExternalLoggedInCheck() {
+    if (!window.navigator.onLine) {
+      // Don't check if the user is not online
+      return;
+    }
+    if (!this.getToken()) {
+      window.clearInterval(this.checkUserLoggedInStateInterval);
+      return;
+    }
+    if (this.loginCheckInProgress && this.abortSignalForLoginCheck) {
+      this.abortSignalForLoginCheck.abort();
+      this.abortSignalForLoginCheck = new AbortController();
+    }
+    this.loginCheckInProgress = true;
+    const reqConfig = {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+        'Authorization': this.getToken()
+      },
+    };
+    if (this.abortSignalForLoginCheck && this.abortSignalForLoginCheck["signal"]) {
+      reqConfig["signal"] = this.abortSignalForLoginCheck["signal"];
+    }
+    const response = await fetch(`${this.getBaseUrl()}${this.endpoints.userInfoEndpoint}`, reqConfig);
+    if (response.status === 409) { // This is a status the API returns if a user has been logged out
+      window.clearInterval(this.checkUserLoggedInStateInterval);
+      console.log('Cleared out user data due to bad response from authentication endpoint');
+      this.LogoutUser();
+      return;
+    }
+    if (!response.ok) {
+      // The response was "bad". This could be due to bad connectivity or something else. 
+      // We'll ignore it so we don't unecessarily log users out or have them loose state if they're switching connection
+      return;
+    }
+    const data = await response.json();
+    if (!data || !data['accessToken']) {
+      window.clearInterval(this.checkUserLoggedInStateInterval);
+      console.log('Cleared out user data due to bad response from authentication endpoint');
+      this.LogoutUser();
+    }
+    this.loginCheckInProgress = false;
+  }
+  LogoutUser() {
+    this.clearUserData();
+    // Log out user
+    if (this.eventTarget) {
+      const logoutLink = this.eventTarget.querySelector('#pn-marketweb-header-logoutlink');
+      if (logoutLink) {
+        logoutLink.click();
+        return;
+      }
+    }
+    // If no logout link was found, attempt to change URL to redirect link
+    const currentPageHref = window.location.href;
+    window.location.href = this.getLogoutUrl(currentPageHref);
+  }
+  isLoggedIn(override = false) {
+    if (override) {
+      return override;
+    }
+    let isLoggedIn = (this.store.get(this.keys.token) && this.store.get(this.keys.user)) ? true : false;
+    if (!isLoggedIn && this.store.get(this.keys.token) === this.overridetokenValue) {
+      isLoggedIn = true;
+    }
+    return isLoggedIn;
+  }
+  registerToken(token = '', tokenSource = 'frontend') {
+    if (!token || token === this.getToken()) {
+      return;
+    }
+    this.clearUserData();
+    this.store.set(this.keys.tokensource, tokenSource);
+    this.store.set(this.keys.token, token);
+    this.fetchUserInfo();
+  }
+  invalidateTokenOfType(tokenSource = 'frontend') {
+    const currentToken = this.store.get(this.keys.token);
+    if (!currentToken) {
+      return;
+    }
+    const currentTokenSource = this.store.get(this.keys.tokensource);
+    if (currentTokenSource !== tokenSource) {
+      return;
+    }
+    // If we have a token and the source is set then we will invalidate the user data
+    this.clearUserData();
+  }
+  getLoginUrl(redirectPage = "") {
+    const currentPage = window.location.href;
+    redirectPage = redirectPage ? redirectPage : currentPage;
+    return `${this.getBaseUrl()}${this.endpoints.authorizationEndpoint}?redirectionUrl=${redirectPage}`;
+  }
+  getLogoutUrl(linkHref = "") {
+    if (linkHref.indexOf('logout?logoutUrl') !== -1) {
+      // Link has already been formatted. 
+      return linkHref;
+    }
+    let redirectPage = linkHref.replace('logout', '').replace('http://window.location.href/?', window.location.href).replace('https://window.location.href/?', window.location.href);
+    let rootUrl = this.siteUrl;
+    try {
+      const url = new URL(this.siteUrl + '');
+      rootUrl = url.origin;
+    }
+    catch (e) { }
+    const addSlash = (rootUrl.lastIndexOf('/') !== (rootUrl.length - 1));
+    const siteUrl = rootUrl + (addSlash ? '/' : '') + 'logout';
+    const secondLogoutUrl = `${this.getBaseUrl()}${this.endpoints.logoutEndpoint}?authorization=${this.store.get(this.keys.token)}%26redirectionUrl=${redirectPage}`;
+    const logoutUrl = `${siteUrl}?logoutUrl=${secondLogoutUrl}`;
+    return logoutUrl;
+  }
+  getUserInfo() {
+    if (this.isLoggedIn()) {
+      return this.store.get(this.keys.user);
+    }
+  }
+  getEventTarget() {
+    return this.eventTarget;
+  }
+  checkExpireTime() {
+    const expire = this.store.get(this.keys.expire);
+    if (!expire) {
+      return;
+    }
+    const now = new Date();
+    const expireDate = new Date(Math.floor(parseInt(expire, 10) * 1000));
+    if (now > expireDate) {
+      console.info('Login time has expired');
+      this.clearUserData();
+      this.loginStateChange();
+    }
+  }
+  checkPNTopbar() {
+    if (this.isLoggedIn() || !window['pnTopbar'] || !window['pnTopbar']['session_id']) {
+      return;
+    }
+    this.store.set(this.keys.token, window['pnTopbar']['session_id']);
+    this.fetchUserInfo();
+  }
+  checkParameters() {
+    if (!(window === null || window === void 0 ? void 0 : window.location)) {
+      return;
+    }
+    const params = new URLSearchParams(window.location.search);
+    if (params.get("oneTimeCode")) {
+      const oneTimeCode = params.get("oneTimeCode");
+      this.exchangeToken(oneTimeCode).then(() => {
+        const currentHref = window.location.href;
+        const paramPrefix = (currentHref.indexOf('?oneTimeCode') !== -1) ? "?" : "&";
+        const newUrl = currentHref.replace(`${paramPrefix}oneTimeCode=${oneTimeCode}`, '');
+        history.replaceState({}, document.querySelector('title').innerText, newUrl);
+      });
+    }
+  }
+  async fetchUserInfo() {
+    const token = this.store.get(this.keys.token);
+    if (this.store.get(this.keys.token) === this.overridetokenValue) {
+      console.info('Did not fetch user data since it was set by an override');
+      return;
+    }
+    const reqConfig = {
+      method: 'GET',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+        'Authorization': token
+      },
+    };
+    const response = await fetch(`${this.getBaseUrl()}${this.endpoints.userInfoEndpoint}`, reqConfig);
+    const data = await response.json();
+    if (data && data["idToken"]) {
+      try {
+        const { idToken, expiryTime, accessToken } = data;
+        const userInfo = this.parseUserInfo(idToken);
+        if (!userInfo) {
+          console.error('Userdata is not valid');
+          this.clearUserData();
+          return;
+        }
+        this.store.set(this.keys.user, userInfo);
+        // 10 Min early expire
+        this.store.set(this.keys.accessToken, accessToken);
+        this.store.set(this.keys.expire, expiryTime);
+        this.store.set(this.keys.expireDate, new Date(Math.floor(parseInt(expiryTime, 10) * 1000)));
+        this.loginStateChange();
+      }
+      catch (e) {
+        console.error('Unable to get user information', e);
+      }
+    }
+    else {
+      console.error('Unable to get user information. Clearing login state');
+      this.clearUserData();
+    }
+  }
+  clearUserData() {
+    this.store.remove(this.keys.user);
+    this.store.remove(this.keys.tokensource);
+    this.store.remove(this.keys.accessToken);
+    this.store.remove(this.keys.token);
+    this.store.remove(this.keys.expire);
+    this.store.remove(this.keys.expireDate);
+  }
+  getToken() {
+    return this.store.get(this.keys.token);
+  }
+  getAccessToken() {
+    return this.store.get(this.keys.accessToken);
+  }
+  async exchangeToken(oneTimeCode) {
+    this.clearUserData();
+    const response = await fetch(`${this.getBaseUrl()}${this.endpoints.tokenExchangeEndpoint}?oneTimeCode=${oneTimeCode}`);
+    const { token } = await response.json();
+    if (typeof token === "string" && token) {
+      this.store.set(this.keys.token, token);
+    }
+    this.fetchUserInfo();
+  }
+  loginStateChange() {
+    if (!this.eventTarget) {
+      return;
+    }
+    this.eventTarget.dispatchEvent(new CustomEvent(this.events.loginstatechange, {
+      detail: this.isLoggedIn()
+    }));
+  }
+  getBaseUrl() {
+    const atEnvironments = ["localhost", "integration.", 'local.'];
+    let useATEnv = atEnvironments.filter(x => this.endpoint.indexOf(x) !== -1).length > 0;
+    if (window.location.hostname.indexOf('atportal.postnord.com') === 0) {
+      useATEnv = true;
+    }
+    if (useATEnv) {
+      return this.baseUrls.at;
+    }
+    return this.baseUrls.prod;
+  }
+  parseUserInfo(idToken) {
+    if (!idToken) {
+      return null;
+    }
+    var base64Url = idToken.split('.')[1];
+    var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+    var jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {
+      return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+    }).join(''));
+    return JSON.parse(jsonPayload);
+  }
+}
+
 const pnMarketwebSiteheaderLoginCss = "pn-marketweb-siteheader-login{padding:1rem 0;max-height:5.2rem;position:relative}pn-marketweb-siteheader-login pn-nav-dropdown{display:none}pn-marketweb-siteheader-login.hydrated pn-nav-dropdown{display:block}";
 
-const PnMarketwebSiteheaderLogin = class {
+let PnMarketwebSiteheaderLogin = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.loginStateChange = createEvent(this, "loginStateChange", 7);
     var _a;
-    this.endpoint = "";
-    this.token = "";
-    this.i18n = { "searchlabel": "", "searchplaceholder": "", "searchbuttontext": "", "menuHomeButton": "", "menuGoBackButton": "", "mainMenuButton": "", "menuStartButton": "", "profileSelectionFlyoutHeading": "" };
+    /** Specifies which endpoint domain we should load from */
+    this.endpoint = '';
+    /** Access token passed from backend */
+    this.token = '';
+    this.i18n = {
+      searchlabel: '',
+      searchplaceholder: '',
+      searchbuttontext: '',
+      menuHomeButton: '',
+      menuGoBackButton: '',
+      mainMenuButton: '',
+      menuStartButton: '',
+      profileSelectionFlyoutHeading: '',
+    };
     this.siteUrl = '';
     this.emitEvents = true;
+    // Login dialog
     this.loginDialog = null;
-    this.fullname = "";
+    /** 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.loginLinks = undefined;
-    this.toggleButtonText = (((_a = this.loginDialog) === null || _a === void 0 ? void 0 : _a.loginMenuLinkText) ? this.loginDialog.loginMenuLinkText : "");
+    /** Continiously check if a user is logged in **/
+    this.checkUserLoggedInStateInterval = 0;
+    this.toggleButtonText = ((_a = this.loginDialog) === null || _a === void 0 ? void 0 : _a.loginMenuLinkText) ? this.loginDialog.loginMenuLinkText : '';
     this.username = this.fullname;
   }
   componentWillLoad() {
     const userInfo = this.loggedin && this.fullname ? { given_name: this.fullname } : null;
-    this.loginManager = new MarketWebLoginManager({
+    state$2.loginManager = new MarketWebLoginManager({
       endpoint: this.endpoint,
       eventTarget: this.hostElement,
-      userInfo
+      checkUserLoggedInStateInterval: this.checkUserLoggedInStateInterval,
+      userInfo,
     });
-    this.loginManager.setSiteUrl(this.siteUrl);
-    this.hostElement["loginmanager"] = this.loginManager;
+    state$2.loginManager.setSiteUrl(this.siteUrl);
+    this.hostElement['loginmanager'] = state$2.loginManager;
     if (this.token) {
-      this.loginManager.registerToken(this.token, 'backend');
+      state$2.loginManager.registerToken(this.token, 'backend');
     }
-    else if (this.emitEvents) { // The primary login instance
-      this.loginManager.invalidateTokenOfType('backend');
+    else if (this.emitEvents) {
+      // The primary login instance
+      state$2.loginManager.invalidateTokenOfType('backend');
     }
-    this.hostElement.addEventListener(this.loginManager.events.loginstatechange, this.onLoginStateChange.bind(this));
+    this.hostElement.addEventListener(state$2.loginManager.events.loginstatechange, this.onLoginStateChange.bind(this));
     this.init();
     this.setUserName();
     this.setToggleButtonText();
   }
   async init() {
-    this.loginManager.init(this.emitEvents);
+    state$2.loginManager.init(this.emitEvents);
     this.setToggleButtonText();
     this.adjustLoginLinks();
   }
@@ -388,13 +764,13 @@ const PnMarketwebSiteheaderLogin = class {
     }
     const adjustLink = (link, i) => {
       if (!link.isLogoutLink) {
-        link.isLogoutLink = (link.pageLink.indexOf('location.href') !== -1 && link.pageLink.indexOf('logout') !== -1);
+        link.isLogoutLink = link.pageLink.indexOf('location.href') !== -1 && link.pageLink.indexOf('logout') !== -1;
       }
       if (link.isLogoutLink) {
-        link.href = this.loginManager.getLogoutUrl(link.href);
+        link.href = state$2.loginManager.getLogoutUrl(link.href);
       }
       if (i === 0 && !link.href) {
-        link.href = this.loginManager.getLoginUrl();
+        link.href = state$2.loginManager.getLoginUrl();
         link.linkType = 'primary';
       }
       if (link.primaryLinkApperance && !link.linkType) {
@@ -408,32 +784,32 @@ const PnMarketwebSiteheaderLogin = class {
     }
     this.loginDialog.legacyLoginLinks = [
       {
-        href: this.loginManager.getLoginUrl(this.loginDialog.loginUrl),
+        href: state$2.loginManager.getLoginUrl(this.loginDialog.loginUrl),
         linkText: this.loginDialog.loginLinkText,
         openInNewWindow: false,
         isLogoutLink: false,
         pageLink: null,
         linkType: 'primary',
-        primaryLinkApperance: true
+        primaryLinkApperance: true,
       },
       {
-        href: this.loginManager.getLoginUrl(this.loginDialog.registerUrl),
+        href: state$2.loginManager.getLoginUrl(this.loginDialog.registerUrl),
         linkText: this.loginDialog.createLoginLinkText,
         openInNewWindow: false,
         isLogoutLink: false,
         pageLink: null,
-        primaryLinkApperance: false
-      }
+        primaryLinkApperance: false,
+      },
     ];
   }
   setUserName() {
-    const userInfo = this.loginManager.getUserInfo();
-    let name = "";
+    const userInfo = state$2.loginManager.getUserInfo();
+    let name = '';
     if (!this.loggedin || !userInfo) {
       this.username = name;
     }
     if (userInfo && userInfo.given_name) {
-      name = userInfo.given_name + ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.family_name) ? ` ${userInfo === null || userInfo === void 0 ? void 0 : userInfo.family_name}` : "");
+      name = userInfo.given_name + ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.family_name) ? ` ${userInfo === null || userInfo === void 0 ? void 0 : userInfo.family_name}` : '');
     }
     if (!name && userInfo && userInfo.email) {
       name = userInfo.email;
@@ -457,7 +833,7 @@ const PnMarketwebSiteheaderLogin = class {
   onLoginStateChange(e) {
     if (this.loggedin !== e.detail && this.emitEvents) {
       this.loggedin = e.detail;
-      this.loginStateChange.emit({ loggedIn: this.loggedin, token: this.loginManager.getToken() });
+      this.loginStateChange.emit({ loggedIn: this.loggedin, token: state$2.loginManager.getToken() });
       this.setUserName();
       this.setToggleButtonText();
     }
@@ -474,10 +850,7 @@ const PnMarketwebSiteheaderLogin = class {
       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.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("pn-marketweb-siteheader-login-links", { loginDialog: this.loginDialog, loginManager: this.loginManager, loggedin: this.loggedin, idNamespace: this.emitEvents ? '1' : '2', username: this.username }))));
+    return (h(Host, Object.assign({}, hostElementAttribute), h("pn-nav-dropdown", { label: this.toggleButtonText, icon: "user", class: "siteheader-logindialog" }, !this.loggedin && h("pn-marketweb-siteheader-login-button", { label: 'test console' }), !this.loggedin && h("pn-marketweb-siteheader-login-button", { active: true, label: 'test redirect' }), this.loggedin && this.showProfileSelection ? (h("pn-marketweb-siteheader-login-profileselection", { loginDialog: this.loginDialog, loggedin: this.loggedin, i18n: this.i18n, idNamespace: this.emitEvents ? '1' : '2', endpoint: this.endpoint })) : (h("pn-marketweb-siteheader-login-links", { loginDialog: this.loginDialog, loggedin: this.loggedin, idNamespace: this.emitEvents ? '1' : '2', username: this.username })))));
   }
   get hostElement() { return getElement(this); }
   static get watchers() { return {
@@ -496,17 +869,24 @@ const { state, onChange } = createStore({
 
 const pnMarketwebSiteheaderSearchCss = ".siteheader-search a{display:none}@media screen and (min-width: 48em){.siteheader-search a{display:block}}.siteheader-search pn-search-field>.input-container button{background:#FFFFFF}.siteheader-search pn-search-field.button-icon pn-button,.siteheader-search pn-button{display:-ms-inline-flexbox;display:inline-flex}.siteheader-search pn-search-field.button-icon pn-button button,.siteheader-search pn-button button{-ms-flex-item-align:center;align-self:center;padding:0;height:2.3em;width:2.3em;line-height:0;min-height:unset;min-width:unset}.siteheader-search pn-search-field.button-icon pn-button pn-icon,.siteheader-search pn-button pn-icon{margin-left:0}.siteheader-search form{-ms-flex-pack:end;justify-content:flex-end;-ms-flex-align:stretch;align-items:stretch;width:auto;-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;padding:0;margin:0 0 0 0.4rem;position:relative;-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 60em){.siteheader-search form{margin-right:1.6rem}}.siteheader-search form pn-search-field{min-width:13.5em}.siteheader-search form pn-search-field .input-container{-ms-flex-item-align:center;align-self:center}.siteheader-search form pn-search-field input{height:auto;min-height:1em;padding:0.6em 0.75em}";
 
-const PnMarketwebSiteheaderSearch = class {
+let PnMarketwebSiteheaderSearch = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
-    this.i18n = undefined;
+    // Display option, show only link
     this.showOnlyLink = false;
+    // Hide search option
     this.hideSearch = false;
+    /** Specifies which language we want to show (sv,da,fi,no,en) */
     this.language = null;
+    /** Specifies the current site id (guid)*/
     this.siteid = null;
+    // Search data
     this.search = {};
+    // Is this the primary instance?
     this.primary = false;
+    // Only Show icon as search button?
     this.icononly = true;
+    // Autocomplete options
     this.autoCompleteOptions = [];
   }
   onSearchValueUpdate() {
@@ -535,7 +915,7 @@ const PnMarketwebSiteheaderSearch = class {
       }
     }
     const req = await fetch(autocompleteUrl, { signal: state.requestAbortController.signal }).catch((e) => {
-      console.log('Unable to fetch autocomplete suggestions', e);
+      console.warn('Unable to fetch autocomplete suggestions', e);
     });
     if (!req) {
       return;
@@ -612,11 +992,14 @@ const languageData = {
 
 const pnSiteSelectorCss = "pn-site-selector{display:-ms-flexbox;display:flex;position:relative;-ms-flex-pack:center;justify-content:center;max-height:5.2rem}@media screen and (min-width: 75em){pn-site-selector{display:block}}.siteselector-heading{display:block;padding:0;margin-bottom:1.6rem}@media screen and (min-width: 75em){.siteselector-heading{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-top:0.8rem}}.siteselector-list{list-style:none;margin:0;padding:0}";
 
-const PnSiteSelector = class {
+let PnSiteSelector = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /* Site selector Button text */
     this.buttontext = "postnord";
+    /* Site selector flyout title */
     this.heading = "PostNord";
+    /** Specifies which language we want to show navigation in (sv,da,fi,no,en) */
     this.language = "sv";
     this.i18n = { navlabel: "Site selector" };
   }
@@ -637,12 +1020,16 @@ PnSiteSelector.style = pnSiteSelectorCss;
 
 const pnSiteSelectorItemCss = "pn-site-selector-item{display:block}pn-site-selector-item>div,pn-site-selector-item>a{padding:0.8rem 0;display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;position:relative}.siteselector-item-link{border-radius:0;text-decoration:none;color:#005D92;-ms-flex-direction:row;flex-direction:row}.siteselector-item-link:hover,.siteselector-item-link:focus{background-color:#F3F2F2;color:#005D92;text-decoration:underline;outline:none;-webkit-box-shadow:none;box-shadow:none}.siteselector-item-link:active{background-color:#F3F2F2;color:#00A0D6;outline:none}.siteselector-item-link>span{-ms-flex-positive:1;flex-grow:1}.siteselector-item-link pn-icon{right:3.2rem;height:1.9rem;width:1.9rem;-ms-flex-item-align:center;align-self:center}.siteselector-item-link pn-icon svg{width:100%;height:auto}.siteselector-item-title{display:block}.siteselector-item-description{color:#2D2013;font-size:1.28rem}a:hover>.siteselector-item-description,a:focus>.siteselector-item-description{background-color:#F3F2F2;color:#005D92;text-decoration:underline;outline:none}a:active>.siteselector-item-description{background-color:#F3F2F2;color:#00A0D6;outline:none}";
 
-const PnSiteSelectorItem = class {
+let PnSiteSelectorItem = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    /* Link URL */
     this.url = "";
+    /* Link title  */
     this.heading = "";
+    /* Link description */
     this.description = "";
+    /* Open link in new window */
     this.newwindow = false;
   }
   render() {