@postnord/pn-marketweb-components 1.0.4 → 1.0.8

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

@@ -0,0 +1,646 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-b58d2618.js');
+const pnMainnavStore = require('./pn-mainnav-store-dda9827f.js');
+require('./index-f472d191.js');
+
+const translations$1 = {
+  'sv': {
+    "heading": "Språk",
+  },
+  'en': {
+    "heading": "Language"
+  },
+  'da': {
+    "heading": "Sprog"
+  },
+  'no': {
+    "heading": "Språk"
+  },
+  'fi': {
+    "heading": "Kieli"
+  }
+};
+
+const pnLanguageSelectorCss = ".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 {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /* Current language code  */
+    this.value = "";
+    this.selectedLanguageName = "";
+    this.options = [];
+  }
+  componentWillLoad() {
+    this.setTranslations();
+  }
+  componentDidLoad() {
+    this.initialize();
+  }
+  initialize() {
+    const options = [].slice.apply(this.hostElement.querySelectorAll("pn-language-selector-option"));
+    options.map((option) => {
+      // Set current label of language selector
+      if (option.getAttribute("code") == this.value || option.getAttribute("selected") == "true") {
+        this.selectedLanguageName = option.getAttribute("name");
+      }
+      // Bind event listener for when a user change language
+      option.addEventListener("setCurrentLanguage", (event) => {
+        this.onSetCurrentLanguage(event.detail);
+      });
+    });
+  }
+  onSetCurrentLanguage(option) {
+    this.value = option.code;
+    this.selectedLanguageName = option.name;
+  }
+  setTranslations() {
+    if (translations$1[this.value]) {
+      this.i18n = translations$1[this.value];
+    }
+  }
+  onValueChange() {
+    var _a;
+    const components = (_a = this.hostElement.querySelectorAll("pn-language-selector-option")) !== null && _a !== void 0 ? _a : [];
+    components.forEach((component) => {
+      // Pass values as props into slotted components
+      // component.setAttribute("current-language", this.value);
+      component.setAttribute("selected", (component.getAttribute("code") === this.value) + '');
+    });
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("pn-nav-dropdown", { label: this.selectedLanguageName, icon: "globe" }, index.h("nav", { class: "languageselector-nav", "aria-label": this.i18n.heading }, index.h("strong", { class: "languageselector-title" }, this.i18n.heading), index.h("div", { class: "languageselector-list", role: "list" }, index.h("slot", null))))));
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "value": ["onValueChange"]
+  }; }
+};
+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 {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.setCurrentLanguage = index.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;
+  }
+  onOptionClick() {
+    const currentlanguage = {
+      name: this.name,
+      code: this.code,
+      url: this.url,
+      current: true
+    };
+    this.setCurrentLanguage.emit(currentlanguage);
+  }
+  render() {
+    return (index.h(index.Host, { role: "listitem", selected: (this.selected) + '', code: this.code, name: this.name }, !this.url ? (index.h("button", { class: "languageselector-button", "data-langcode": this.code, onClick: this.onOptionClick.bind(this) }, index.h("span", { class: "languageselector-radio-outer" }, index.h("span", { class: "languageselector-radio-inner" })), index.h("span", { class: "languageselector-itemtext" }, this.name, " - ", this.code))) : (index.h("a", { href: this.url, target: "_self", class: "languageselector-link", "data-langcode": this.code }, index.h("span", { class: "languageselector-radio-outer" }, index.h("span", { class: "languageselector-radio-inner" })), index.h("span", { class: "languageselector-itemtext" }, this.name, " - ", this.code)))));
+  }
+};
+PnlanguageSelectorOption.style = pnLanguageSelectorOptionCss;
+
+const translations = {
+  'sv': {
+    "menuHomeButton": "Hem",
+    "menuGoBackButton": "Gå tillbaka",
+    "mainMenuButton": "Meny",
+    "menuStartButton": "Start"
+  },
+  'en': {
+    "menuHomeButton": "Home",
+    "menuGoBackButton": "Go back",
+    "mainMenuButton": "Menu",
+    "menuStartButton": "Start"
+  },
+  'da': {
+    "menuHomeButton": "Hjem",
+    "menuGoBackButton": "Gå tilbage",
+    "mainMenuButton": "Menu",
+    "menuStartButton": "Start"
+  },
+  'no': {
+    "menuHomeButton": "Hjem",
+    "menuGoBackButton": "Gå tilbake",
+    "mainMenuButton": "Meny",
+    "menuStartButton": "Start"
+  },
+  'fi': {
+    "menuHomeButton": "Koti",
+    "menuGoBackButton": "Mene takaisin",
+    "mainMenuButton": "Valikko",
+    "menuStartButton": "Alkaa"
+  }
+};
+
+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.3em}}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 {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.menuLanguageChange = index.createEvent(this, "menuLanguageChange", 7);
+    this.marketChange = index.createEvent(this, "marketChange", 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;
+  }
+  componentWillLoad() {
+    this.init();
+    document.removeEventListener("mousedown", this._onClickOutside.bind(this));
+    document.addEventListener("mousedown", this._onClickOutside.bind(this));
+  }
+  async init() {
+    this.setLanguage();
+    this.setMarket();
+  }
+  _onClickOutside(event) {
+    const clickedOutside = !this.hostElement.contains(event.target);
+    if (clickedOutside) {
+      pnMainnavStore.state.openLevel = "";
+    }
+  }
+  setLanguage() {
+    this.menuLanguageChange.emit(this.language);
+  }
+  setMarket() {
+    this.marketChange.emit(this.market);
+  }
+  onLanguageChange(event) {
+    if (translations[event.detail]) {
+      pnMainnavStore.state.i18n = translations[event.detail];
+    }
+  }
+  setOpenMenu() {
+    pnMainnavStore.state.openMenu = (!pnMainnavStore.state.openMenu);
+  }
+  onOpenMenuLevelChange(event) {
+    pnMainnavStore.state.openLevel = event.detail;
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("div", { class: "mainnav-toggle" }, index.h("button", { "aria-controls": this.navigationId, "aria-expanded": pnMainnavStore.state.openMenu + '', onClick: this.setOpenMenu.bind(this) }, pnMainnavStore.state.i18n.mainMenuButton, index.h("pn-icon", { symbol: pnMainnavStore.state.openMenu ? "close" : "bars", color: "white" }))), index.h("nav", { class: "mainnav", role: "navigation", "data-menu-open": pnMainnavStore.state.openMenu + '', id: this.navigationId }, index.h("slot", null))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+PnMainnav.style = pnMainnavCss;
+
+const pnMainnavLevelCss = "pn-mainnav-level{display:block}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}.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 {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.level = 1;
+    this.levelId = "";
+    this.isOpen = false;
+    this.parentName = "";
+    this.parentHref = "";
+    this.parentLinkId = "";
+    this.listCount = 0;
+    this.alignment = "right";
+  }
+  async componentWillLoad() {
+    this.listCount = this.hostElement.querySelectorAll(":scope > pn-mainnav-list").length;
+    if (this.hostElement.parentElement.tagName.toLowerCase() !== 'nav') {
+      this.level = 2;
+    }
+    if (this.hostElement.parentElement.tagName.toLowerCase() === 'pn-mainnav-link') {
+      this.parentName = this.hostElement.parentElement.getAttribute('name') + '';
+      this.parentHref = this.hostElement.parentElement.getAttribute('href') + '';
+      this.parentLinkId = this.hostElement.parentElement.getAttribute('linkid') + '';
+      const parentLinkName = this.parentName.toLowerCase().replace(/\W/gi, '_');
+      this.levelId = `mainnav-lvl${this.level}-${parentLinkName}`;
+    }
+    pnMainnavStore.onChange("openLevel", () => {
+      this.onChangeOpenLevel();
+    });
+  }
+  onOpen() {
+    if (this.level === 2) {
+      requestAnimationFrame(() => {
+        const levelClientRect = this.hostElement.getClientRects()[0];
+        if (!levelClientRect) {
+          return;
+        }
+        const navElm = this.hostElement.parentElement.parentElement.parentElement.parentElement;
+        if (navElm && navElm.tagName.toLowerCase() === "nav") {
+          const navClientRect = navElm.getClientRects()[0];
+          if (!navClientRect) {
+            return;
+          }
+          if (levelClientRect.right > navClientRect.width) {
+            const levelParentRect = this.hostElement.parentElement.getClientRects()[0];
+            if ((levelParentRect.left - levelClientRect.width) < 0) {
+              this.alignment = "center";
+            }
+            else {
+              this.alignment = "left";
+            }
+          }
+        }
+      });
+    }
+  }
+  onChangeOpenLevel() {
+    this.isOpen = pnMainnavStore.state.openLevel === this.levelId;
+  }
+  render() {
+    return (index.h(index.Host, Object.assign({ role: "navigation" }, ((this.level > 1 && this.levelId) ? { 'aria-hidden': (!this.isOpen) + '' } : {}), { "data-level-listcount": this.listCount + '', "data-level-alignment": this.alignment, "data-level": this.level + '' }, (this.levelId ? { id: this.levelId } : {})), (this.level > 1) ? (index.h("div", { class: "mainnav-level-header" }, index.h("label", { htmlFor: this.levelId }, pnMainnavStore.state.i18n.menuGoBackButton), index.h("button", { class: "secondlevel-backbtn", onClick: () => pnMainnavStore.state.openLevel = '', "aria-expanded": (pnMainnavStore.state.openLevel === this.levelId) + '' }, index.h("pn-icon", { symbol: "arrow-left", color: "blue700" }), pnMainnavStore.state.i18n.menuStartButton), (this.parentHref && this.parentName) ? index.h("pn-mainnav-link", { href: this.parentHref, name: this.parentName, linkid: this.parentLinkId }) : null)) : null, index.h("slot", null), index.h("slot", { name: "additional" }), index.h("slot", { name: "footer" })));
+  }
+  get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "isOpen": ["onOpen"]
+  }; }
+};
+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 {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.heading = "";
+    this.linkCount = 0;
+  }
+  componentWillLoad() {
+    this.linkCount = this.hostElement.querySelectorAll(":scope > pn-mainnav-link").length;
+  }
+  render() {
+    return (index.h(index.Host, { class: "mainnav-list", role: "list", "data-navlist-itemcount": this.linkCount + '', "data-navlist-showcolumns": (this.linkCount >= 8) + '' }, (this.heading) ? index.h("div", { class: "mainnav-list-heading" }, this.heading) : null, index.h("slot", null)));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+PnMainnavList.style = pnMainnavListCss;
+
+class PNLoginManager {
+  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.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 = {
+      token: 'token',
+      user: 'user',
+      expire: 'expire',
+      expireDate: 'expiredate'
+    };
+    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);
+  }
+  init() {
+    this.checkParameters();
+    this.checkExpireTime();
+    if (this.store.get(this.keys.token) && !this.store.get(this.keys.user)) {
+      this.fetchUserInfo();
+    }
+    this.loginStateChange();
+  }
+  isLoggedIn() {
+    const isLoggedIn = (this.store.get(this.keys.token) && this.store.get(this.keys.user)) ? true : false;
+    return isLoggedIn;
+  }
+  getLoginUrl(redirectPage = "") {
+    const currentPage = window.location.href;
+    redirectPage = redirectPage ? redirectPage : currentPage;
+    return `${this.getBaseUrl()}${this.endpoints.authorizationEndpoint}?redirectionUrl=${redirectPage}`;
+  }
+  getLogoutUrl(redirectPage = "") {
+    const currentPage = window.location.href;
+    redirectPage = redirectPage ? redirectPage : currentPage;
+    return `${this.getBaseUrl()}${this.endpoints.logoutEndpoint}?redirectionUrl=${redirectPage}&authorization=${this.store.get(this.keys.token)}`;
+  }
+  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();
+    }
+  }
+  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.getToken(oneTimeCode);
+      const currentHref = window.location.href;
+      const paramPrefix = (currentHref.indexOf('?oneTimeCode') !== -1) ? "?" : "&";
+      history.replaceState({}, document.querySelector('title').innerText, currentHref.replace(`${paramPrefix}oneTimeCode=${oneTimeCode}`, ''));
+    }
+  }
+  async fetchUserInfo() {
+    const token = this.store.get(this.keys.token);
+    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) {
+      try {
+        const { idToken, expiryTime } = data;
+        const userInfo = this.parseUserInfo(idToken);
+        this.store.set(this.keys.user, userInfo);
+        // 10 Min early expire
+        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);
+      }
+    }
+  }
+  clearUserData() {
+    this.store.remove(this.keys.user);
+    this.store.remove(this.keys.token);
+    this.store.remove(this.keys.expire);
+    this.store.remove(this.keys.expireDate);
+  }
+  async getToken(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.'];
+    const useATEnv = atEnvironments.filter(x => this.endpoint.indexOf(x) !== -1).length > 0;
+    if (useATEnv) {
+      return this.baseUrls.at;
+    }
+    return this.baseUrls.prod;
+  }
+  parseUserInfo(idToken) {
+    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;margin-right:1.6rem}pn-marketweb-siteheader-login strong{padding:0.8rem 1.6rem;display:-ms-flexbox;display:flex;-ms-flex-align:center;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 a{display:block;width:100%}pn-marketweb-siteheader-login li a[tabindex],pn-marketweb-siteheader-login li a[style]{text-decoration:none}pn-marketweb-siteheader-login li pn-button{display:block;width:100%}pn-marketweb-siteheader-login pn-nav-dropdown{display:none}pn-marketweb-siteheader-login.hydrated pn-nav-dropdown{display:block}";
+
+const PnMarketwebSiteheaderLogin = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /** Specifies which endpoint domain we should load from */
+    this.endpoint = "";
+    // Login dialog
+    this.loginDialog = null;
+    this.loginManager = null;
+    this.loggedIn = false;
+    this.toggleButtonText = "";
+  }
+  componentWillLoad() {
+    this.loginManager = new PNLoginManager({ endpoint: this.endpoint, eventTarget: this.hostElement });
+    this.init();
+  }
+  async init() {
+    this.toggleButtonText = this.loginDialog.loginMenuLinkText;
+    this.hostElement.addEventListener(this.loginManager.events.loginstatechange, this.onLoginStateChange.bind(this));
+    this.loginManager.init();
+    this.setToggleButtonText();
+  }
+  setToggleButtonText() {
+    const userInfo = this.loginManager.getUserInfo();
+    if (this.loggedIn) {
+      if (userInfo === null || userInfo === void 0 ? void 0 : userInfo.given_name) {
+        this.toggleButtonText = userInfo.given_name + ((userInfo === null || userInfo === void 0 ? void 0 : userInfo.family_name) ? ` ${userInfo === null || userInfo === void 0 ? void 0 : userInfo.family_name}` : "");
+      }
+      else {
+        this.toggleButtonText = this.loginDialog.loggedInButtonText;
+      }
+    }
+    else {
+      this.toggleButtonText = this.loginDialog.loginMenuLinkText;
+    }
+  }
+  onLoginStateChange(e) {
+    this.loggedIn = e.detail;
+    this.setToggleButtonText();
+  }
+  render() {
+    var _a, _b, _c;
+    if (!this.loginDialog) {
+      return;
+    }
+    return (index.h("pn-nav-dropdown", { label: this.toggleButtonText, icon: "user", class: "siteheader-logindialog" }, (!this.loginDialog.overrideLoginMenu) ?
+      index.h("div", { "data-loggedin": this.loggedIn + '' }, (!this.loggedIn) ?
+        index.h("div", null, (_a = this.loginDialog.loginTitle) !== null && _a !== void 0 ? _a : index.h("strong", null, this.loginDialog.loginTitle), ((_b = this.loginDialog.loginMenuLinks) === null || _b === void 0 ? void 0 : _b.length) > 0 ?
+          index.h("ul", null, this.loginDialog.loginMenuLinks.map((link, i) => {
+            const href = (i === 0 && !link.href) ? this.loginManager.getLoginUrl() : link.href;
+            return (index.h("li", null, index.h("a", Object.assign({ href: href }, (link.openInNewWindow && { target: '_blank' })), index.h("pn-button", { appearance: (link.primaryLinkApperance ? "dark" : "light") }, link.linkText))));
+          }))
+          : (index.h("ul", null, index.h("li", null, index.h("a", { href: this.loginManager.getLoginUrl(this.loginDialog.loginUrl), target: "_top" }, index.h("pn-button", null, this.loginDialog.loginLinkText))), index.h("li", null, index.h("a", { href: this.loginDialog.registerUrl, target: "_top" }, index.h("pn-button", { appearance: "light", variant: "outlined" }, this.loginDialog.createLoginLinkText))))))
+        :
+          index.h("div", null, index.h("ul", null, this.loginDialog.loggedInLinks.map((link) => {
+            const isLogoutLink = link.href.indexOf('logout');
+            const href = (isLogoutLink) ? this.loginManager.getLogoutUrl(link.href.replace('logout', '')) : link.href;
+            return (index.h("li", null, index.h("a", Object.assign({ href: href }, (link.openInNewWindow && { target: '_blank' })), index.h("pn-button", { appearance: (link.primaryLinkApperance ? "dark" : "light"), onClick: () => {
+                if (isLogoutLink) {
+                  this.loginManager.clearUserData();
+                }
+              } }, link.linkText))));
+          }))))
+      :
+        index.h("div", null, index.h("ul", null, (_c = this.loginDialog.loginMenuLinks) === null || _c === void 0 ? void 0 : _c.map(link => index.h("li", null, index.h("a", { href: link.href, target: link.openInNewWindow ? "_blank" : "_self", class: "btn btn-link" }, link.linkText)))))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+PnMarketwebSiteheaderLogin.style = pnMarketwebSiteheaderLoginCss;
+
+const pnMarketwebSiteheaderSearchCss = ".siteheader-search a{display:none}@media screen and (min-width: 48em){.siteheader-search a{display:block}}.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:center;justify-content:center;-ms-flex-align:center;align-items:center;width:auto;-ms-flex:none;flex:none;display:-ms-flexbox;display:flex;padding:0;margin:0 0 0 0.4rem;position:relative}@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 {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    // Display option, show only link
+    this.showOnlyLink = false;
+    // Hide search option
+    this.hideSearch = false;
+    // Search data
+    this.search = {};
+  }
+  componentWillLoad() {
+  }
+  render() {
+    if (!this.search.formActionUrl || this.hideSearch) {
+      return;
+    }
+    return (index.h("div", { class: "siteheader-search" }, (this.showOnlyLink) ? (index.h("a", { href: this.search.formActionUrl, title: this.i18n.searchlabel }, index.h("pn-button", { appearance: "light", icon: "search" }))) :
+      (index.h("form", { method: "get", action: this.search.formActionUrl, role: "search" }, index.h("pn-search-field", { label: this.i18n.searchlabel, name: "q", button: "icon", onSearch: () => {
+          const form = this.hostElement.querySelector('form');
+          if (form) {
+            form.submit();
+          }
+        }, placeholder: this.i18n.searchplaceholder })))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+PnMarketwebSiteheaderSearch.style = pnMarketwebSiteheaderSearchCss;
+
+const languageData = {
+  'sv': {
+    "navlabel": "Webbplatsväljare",
+  },
+  'en': {
+    "navlabel": "Website selector",
+  },
+  'da': {
+    "navlabel": "Webstedsvælger",
+  },
+  'no': {
+    "navlabel": "Nettstedsvelger",
+  },
+  'fi': {
+    "navlabel": "Verkkosivun valitsin",
+  }
+};
+
+const pnSiteSelectorCss = "pn-site-selector{display:-ms-flexbox;display:flex;position:relative;-ms-flex-pack:center;justify-content:center}@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 {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /* Site selector Button text */
+    this.buttontext = "postnord.se";
+    /* 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" };
+  }
+  componentWillLoad() {
+    this.setLanguage();
+  }
+  setLanguage() {
+    if (languageData[this.language]) {
+      this.i18n = languageData[this.language];
+    }
+  }
+  render() {
+    return (index.h(index.Host, null, index.h("pn-nav-dropdown", { label: this.buttontext, icon: "angle-small-down" }, index.h("nav", { class: "siteselector-nav", "aria-label": this.i18n.navlabel }, this.heading ? (index.h("strong", { class: "siteselector-heading" }, this.heading)) : null, index.h("ul", { class: "siteselector-list" }, index.h("slot", null))))));
+  }
+  get hostElement() { return index.getElement(this); }
+};
+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 {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /* Link URL */
+    this.url = "";
+    /* Link title  */
+    this.heading = "";
+    /* Link description */
+    this.description = "";
+    /* Open link in new window */
+    this.newwindow = false;
+  }
+  render() {
+    return (index.h(index.Host, { role: "listitem" }, this.url ? (index.h("a", { class: "siteselector-item-link", href: this.url, target: this.newwindow ? "_blank" : "self", rel: this.newwindow ? "nofollow noopener" : "" }, index.h("span", null, this.heading && (index.h("span", { class: "siteselector-item-title" }, this.heading)), this.description && (index.h("small", { class: "siteselector-item-description" }, this.description))), index.h("pn-icon", { symbol: "angle-small-right", color: "blue700" }))) : (index.h("div", null, this.heading && (index.h("span", { class: "siteselector-item-title" }, this.heading)), this.description && (index.h("small", { class: "siteselector-item-description" }, this.description))))));
+  }
+};
+PnSiteSelectorItem.style = pnSiteSelectorItemCss;
+
+exports.pn_language_selector = PnlanguageSelector;
+exports.pn_language_selector_option = PnlanguageSelectorOption;
+exports.pn_mainnav = PnMainnav;
+exports.pn_mainnav_level = PnMainnavLevel;
+exports.pn_mainnav_list = PnMainnavList;
+exports.pn_marketweb_siteheader_login = PnMarketwebSiteheaderLogin;
+exports.pn_marketweb_siteheader_search = PnMarketwebSiteheaderSearch;
+exports.pn_site_selector = PnSiteSelector;
+exports.pn_site_selector_item = PnSiteSelectorItem;