@postnord/pn-marketweb-components 1.0.17 → 1.0.21

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

@@ -1,14 +1,19 @@
-import { Component, Prop, h, State, Element, Listen } from "@stencil/core";
+import { Component, Prop, h, State, Element, Listen, Watch, Host, Event } from "@stencil/core";
 import { translations } from "./translations";
+import { MarketWebContextService } from "../../../globals/MarketWebContextService";
 export class PnMarketwebSiteheader {
   constructor() {
     this.endpointPath = "/api/navigation/header";
+    // allowedLanguages = ["sv","da","fi","no","en"];
+    // allowedMarkets = ["se","dk","fi","no","com"];
     /** Specifies which market we want to show (se,dk,fi,no,com) */
-    this.market = "se";
+    this.market = null; //se 
     /** Specifies which language we want to show (sv,da,fi,no,en) */
-    this.language = "sv";
+    this.language = null; //sv
+    /** Specifies which environment we're fetching data from. (production, preproduction, integration, localhost) */
+    this.environment = null; //sv
     /** Specifies which endpoint domain we should load from */
-    this.endpoint = "";
+    this.endpoint = null;
     /** Hides the site selector if set to true*/
     this.hideSiteSelector = false;
     /** Hides the language selector if set to true*/
@@ -32,22 +37,64 @@ export class PnMarketwebSiteheader {
     this.minimizeSearch = false;
   }
   componentWillLoad() {
-    this.setTranslations();
-    this.init();
+    this.setInitialValues().then(() => {
+      this.init();
+    });
   }
+  async setInitialValues(href = window.location.href) {
+    var _a;
+    const marketWebContextService = new MarketWebContextService(href);
+    if (this.market === null) {
+      const resolvedMarket = await marketWebContextService.getMarket();
+      this.market = resolvedMarket;
+    }
+    if (this.language === null) {
+      const resolvedMarket = await marketWebContextService.getLanguage();
+      this.language = resolvedMarket;
+    }
+    if (this.environment === null) {
+      this.environment = await marketWebContextService.getEnvironmentName();
+    }
+    if (this.endpoint === null && ((_a = this.environment) === null || _a === void 0 ? void 0 : _a.indexOf('local')) === -1) {
+      this.endpoint = await marketWebContextService.getEndpoint(this.environment);
+    }
+    if (this.endpoint === null) {
+      this.endpoint = "";
+    }
+  }
+  // TODO
+  //* Expose market and language attributes when changed internally
+  //* Business logic to select market and language depending on domains / html tag. 
+  //* Property to stop language change from changeing url, throw an event instead. 
+  //* Fetch new data when langauge or market is changed
   async init() {
+    this.setTranslations();
     await this.fetchData();
     window.setTimeout(() => { this.checkMenuOverflow(); }, 50);
   }
   setTranslations() {
-    if (translations[this.language]) {
+    if (this.language && translations[this.language]) {
       this.i18n = translations[this.language];
     }
   }
+  onLanguageChange() {
+    this.setTranslations();
+    this.changeLanguage.emit(this.language);
+    this.fetchData();
+  }
+  onMarketChange() {
+    this.changeMarket.emit(this.market);
+    this.fetchData();
+  }
   async fetchData() {
+    if (this.endpoint === null || !this.market || !this.language) {
+      // console.warn(`One or more values where not specified.\nEndpoint: ${this.endpoint}\nMarket: ${this.market}\nLanguage: ${this.language}`)
+      return;
+    }
     this.fetchingData = true;
     const endpointBase = (this.endpoint.lastIndexOf("/") === this.endpoint.length - 1) ? this.endpoint.substring(0, this.endpoint.length - 1) : this.endpoint;
-    const response = await fetch(`${endpointBase}${this.endpointPath}?market=${this.market}&language=${this.language}`);
+    const fetchUrl = `${endpointBase}${this.endpointPath}?market=${this.market}&language=${this.language}`;
+    const response = await fetch(fetchUrl);
     const data = await response.json();
     this.setStateFromData(data);
   }
@@ -118,55 +165,56 @@ export class PnMarketwebSiteheader {
   }
   render() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    return (h("header", null,
-      h("div", { class: "siteheader-row" },
-        h("div", { class: "siteheader-topleft" },
-          h("slot", { name: "topleft" }),
-          !this.hideSiteSelector &&
-            h("pn-site-selector", { language: this.language, buttontext: (_b = (_a = this.siteSelector) === null || _a === void 0 ? void 0 : _a.currentSiteTitle) !== null && _b !== void 0 ? _b : 'postnord' },
-              (this.gotData && ((_c = this.siteSelector) === null || _c === void 0 ? void 0 : _c.currentSiteTitle)) &&
-                h("pn-site-selector-item", { heading: this.siteSelector.currentSiteTitle, description: this.siteSelector.currentSiteDescription }),
-              (this.gotData && ((_d = this.siteSelector) === null || _d === void 0 ? void 0 : _d.siteSelections)) && this.siteSelector.siteSelections.map((site) => h("pn-site-selector-item", { heading: site.linkText, description: site.linkDescription, url: site.href, newwindow: site.openInNewWindow })))),
-        h("div", { class: "siteheader-logocontainer" },
-          h("a", { href: (_f = (_e = this.siteDefinition) === null || _e === void 0 ? void 0 : _e.url) !== null && _f !== void 0 ? _f : document.location.hostname, title: "Home", class: "siteheader-logolink" },
-            h("svg", { class: "siteheader-logo", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 141.73 26.65" },
-              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", { loginDialog: this.loginDialog, endpoint: this.endpoint, i18n: this.i18n })),
-          (this.gotData && ((_g = this.languageSelector) === null || _g === void 0 ? void 0 : _g.languages)) && !this.hideLanguageSelector &&
-            h("pn-language-selector", { value: this.language }, this.languageSelector.languages.map(language => h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))),
-          h("slot", { name: "toprightend" }))),
-      h("div", { class: "siteheader-row" },
-        h("div", { class: "siteheader-menu" },
-          h("pn-mainnav", { market: this.market, language: this.language, onMenuOpenChange: (e) => {
-              document.body.setAttribute("data-siteheader-menuopen", (e.detail + ''));
-            } },
-            h("pn-mainnav-level", null,
-              h("pn-mainnav-list", null, this.menuItems.map((item) => {
-                var _a, _b;
-                return (h("pn-mainnav-link", { name: item.name, href: item.href, itemid: item.id, target: (_a = item.linkTarget) !== null && _a !== void 0 ? _a : "_self", linkid: item.trackingId }, ((item.promotedMenuItems && item.promotedMenuItems.length > 0) || (item.children && item.children.length > 0)) &&
-                  h("pn-mainnav-level", null,
-                    item.children.length > 0 &&
-                      h("pn-mainnav-list", { heading: ((_b = item.navigationHeading) !== null && _b !== void 0 ? _b : "") }, item.children.map((childitem) => {
-                        var _a;
-                        return (h("pn-mainnav-link", { name: childitem.name, href: childitem.href, target: (_a = childitem.linkTarget) !== null && _a !== void 0 ? _a : "_self", linkid: childitem.trackingId }));
-                      })),
-                    (item.promotedMenuItems && item.promotedMenuItems.length > 0) &&
-                      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) })))))));
-              })),
-              h("div", { slot: "footer", class: "siteheader-menu-footer" },
-                (this.gotData && this.loginDialog && !this.hideLogin) && (h("pn-marketweb-siteheader-login", { loginDialog: this.loginDialog, endpoint: this.endpoint, i18n: this.i18n })),
-                (this.gotData && ((_h = this.languageSelector) === null || _h === void 0 ? void 0 : _h.languages)) && !this.hideLanguageSelector &&
-                  h("pn-language-selector", { value: this.language }, this.languageSelector.languages.map(language => h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))),
-                !this.hideSiteSelector &&
-                  h("pn-site-selector", { language: this.language },
-                    (this.gotData && ((_j = this.siteSelector) === null || _j === void 0 ? void 0 : _j.currentSiteTitle)) &&
-                      h("pn-site-selector-item", { heading: this.siteSelector.currentSiteTitle, description: this.siteSelector.currentSiteDescription }),
-                    (this.gotData && ((_k = this.siteSelector) === null || _k === void 0 ? void 0 : _k.siteSelections)) && this.siteSelector.siteSelections.map((site) => h("pn-site-selector-item", { heading: site.linkText, description: site.linkDescription, url: site.pageLink, newwindow: site.openInNewWindow })))),
-              h("div", { slot: "top", class: "siteheader-menu-top" },
-                h("pn-marketweb-siteheader-search", { search: this.search, "hide-search": this.hideSearch, i18n: this.i18n }))))),
-        h("pn-marketweb-siteheader-search", { search: this.search, "hide-search": this.hideSearch, "show-only-link": this.minimizeSearch, i18n: this.i18n }))));
+    return (h(Host, { language: this.language, market: this.market, environment: this.environment },
+      h("header", null,
+        h("div", { class: "siteheader-row" },
+          h("div", { class: "siteheader-topleft" },
+            h("slot", { name: "topleft" }),
+            !this.hideSiteSelector &&
+              h("pn-site-selector", { language: this.language, buttontext: (_b = (_a = this.siteSelector) === null || _a === void 0 ? void 0 : _a.currentSiteTitle) !== null && _b !== void 0 ? _b : 'postnord' },
+                (this.gotData && ((_c = this.siteSelector) === null || _c === void 0 ? void 0 : _c.currentSiteTitle)) &&
+                  h("pn-site-selector-item", { heading: this.siteSelector.currentSiteTitle, description: this.siteSelector.currentSiteDescription }),
+                (this.gotData && ((_d = this.siteSelector) === null || _d === void 0 ? void 0 : _d.siteSelections)) && this.siteSelector.siteSelections.map((site) => h("pn-site-selector-item", { heading: site.linkText, description: site.linkDescription, url: site.href, newwindow: site.openInNewWindow })))),
+          h("div", { class: "siteheader-logocontainer" },
+            h("a", { href: (_f = (_e = this.siteDefinition) === null || _e === void 0 ? void 0 : _e.url) !== null && _f !== void 0 ? _f : document.location.hostname, title: "Home", class: "siteheader-logolink" },
+              h("svg", { class: "siteheader-logo", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 141.73 26.65" },
+                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", { loginDialog: this.loginDialog, endpoint: this.endpoint, i18n: this.i18n })),
+            (this.gotData && ((_g = this.languageSelector) === null || _g === void 0 ? void 0 : _g.languages)) && !this.hideLanguageSelector &&
+              h("pn-language-selector", { value: this.language }, this.languageSelector.languages.map(language => h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))),
+            h("slot", { name: "toprightend" }))),
+        h("div", { class: "siteheader-row" },
+          h("div", { class: "siteheader-menu" },
+            h("pn-mainnav", { market: this.market, language: this.language, onMenuOpenChange: (e) => {
+                document.body.setAttribute("data-siteheader-menuopen", (e.detail + ''));
+              } },
+              h("pn-mainnav-level", null,
+                h("pn-mainnav-list", null, this.menuItems.map((item) => {
+                  var _a, _b;
+                  return (h("pn-mainnav-link", { name: item.name, href: item.href, itemid: item.id, target: (_a = item.linkTarget) !== null && _a !== void 0 ? _a : "_self", linkid: item.trackingId }, ((item.promotedMenuItems && item.promotedMenuItems.length > 0) || (item.children && item.children.length > 0)) &&
+                    h("pn-mainnav-level", null,
+                      item.children.length > 0 &&
+                        h("pn-mainnav-list", { heading: ((_b = item.navigationHeading) !== null && _b !== void 0 ? _b : "") }, item.children.map((childitem) => {
+                          var _a;
+                          return (h("pn-mainnav-link", { name: childitem.name, href: childitem.href, target: (_a = childitem.linkTarget) !== null && _a !== void 0 ? _a : "_self", linkid: childitem.trackingId }));
+                        })),
+                      (item.promotedMenuItems && item.promotedMenuItems.length > 0) &&
+                        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) })))))));
+                })),
+                h("div", { slot: "footer", class: "siteheader-menu-footer" },
+                  (this.gotData && this.loginDialog && !this.hideLogin) && (h("pn-marketweb-siteheader-login", { loginDialog: this.loginDialog, endpoint: this.endpoint, i18n: this.i18n })),
+                  (this.gotData && ((_h = this.languageSelector) === null || _h === void 0 ? void 0 : _h.languages)) && !this.hideLanguageSelector &&
+                    h("pn-language-selector", { value: this.language }, this.languageSelector.languages.map(language => h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))),
+                  !this.hideSiteSelector &&
+                    h("pn-site-selector", { language: this.language },
+                      (this.gotData && ((_j = this.siteSelector) === null || _j === void 0 ? void 0 : _j.currentSiteTitle)) &&
+                        h("pn-site-selector-item", { heading: this.siteSelector.currentSiteTitle, description: this.siteSelector.currentSiteDescription }),
+                      (this.gotData && ((_k = this.siteSelector) === null || _k === void 0 ? void 0 : _k.siteSelections)) && this.siteSelector.siteSelections.map((site) => h("pn-site-selector-item", { heading: site.linkText, description: site.linkDescription, url: site.pageLink, newwindow: site.openInNewWindow })))),
+                h("div", { slot: "top", class: "siteheader-menu-top" },
+                  h("pn-marketweb-siteheader-search", { search: this.search, "hide-search": this.hideSearch, i18n: this.i18n }))))),
+          h("pn-marketweb-siteheader-search", { search: this.search, "hide-search": this.hideSearch, "show-only-link": this.minimizeSearch, i18n: this.i18n })))));
   }
   static get is() { return "pn-marketweb-siteheader"; }
   static get originalStyleUrls() { return {
@@ -178,7 +226,7 @@ export class PnMarketwebSiteheader {
   static get properties() { return {
     "market": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -191,12 +239,12 @@ export class PnMarketwebSiteheader {
         "text": "Specifies which market we want to show (se,dk,fi,no,com)"
       },
       "attribute": "market",
-      "reflect": false,
-      "defaultValue": "\"se\""
+      "reflect": true,
+      "defaultValue": "null"
     },
     "language": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -209,8 +257,26 @@ export class PnMarketwebSiteheader {
         "text": "Specifies which language we want to show (sv,da,fi,no,en)"
       },
       "attribute": "language",
-      "reflect": false,
-      "defaultValue": "\"sv\""
+      "reflect": true,
+      "defaultValue": "null"
+    },
+    "environment": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Specifies which environment we're fetching data from. (production, preproduction, integration, localhost)"
+      },
+      "attribute": "environment",
+      "reflect": true,
+      "defaultValue": "null"
     },
     "endpoint": {
       "type": "string",
@@ -228,7 +294,7 @@ export class PnMarketwebSiteheader {
       },
       "attribute": "endpoint",
       "reflect": false,
-      "defaultValue": "\"\""
+      "defaultValue": "null"
     },
     "hideSiteSelector": {
       "type": "boolean",
@@ -245,7 +311,7 @@ export class PnMarketwebSiteheader {
         "text": "Hides the site selector if set to true"
       },
       "attribute": "hide-site-selector",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "hideLanguageSelector": {
@@ -263,7 +329,7 @@ export class PnMarketwebSiteheader {
         "text": "Hides the language selector if set to true"
       },
       "attribute": "hide-language-selector",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "hideSearch": {
@@ -281,7 +347,7 @@ export class PnMarketwebSiteheader {
         "text": "Hides the search form if set to true"
       },
       "attribute": "hide-search",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     },
     "hideLogin": {
@@ -299,7 +365,7 @@ export class PnMarketwebSiteheader {
         "text": "Hides the login if set to true"
       },
       "attribute": "hide-login",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "false"
     }
   }; }
@@ -315,7 +381,45 @@ export class PnMarketwebSiteheader {
     "loginDialog": {},
     "minimizeSearch": {}
   }; }
+  static get events() { return [{
+      "method": "changeLanguage",
+      "name": "changeLanguage",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "changeMarket",
+      "name": "changeMarket",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
   static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "language",
+      "methodName": "onLanguageChange"
+    }, {
+      "propName": "market",
+      "methodName": "onMarketChange"
+    }]; }
   static get listeners() { return [{
       "name": "resize",
       "method": "handleResize",

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

@@ -38,7 +38,7 @@ export default {
   }
 };
 
-const Template = ({ ...args }) => {
+const PrimaryTemplate = ({ ...args }) => {
   return `
   <div style="background:#ddd;min-height:100vh;">
   <pn-marketweb-siteheader 
@@ -50,24 +50,35 @@ const Template = ({ ...args }) => {
   hide-search="false"
   hide-login="false">
 </pn-marketweb-siteheader>
-<div>
-Lorem ipsum dolor sit amet<br/><br/><br/><br/>
-Lorem ipsum dolor sit amet<br/><br/><br/><br/>
-Lorem ipsum dolor sit amet<br/><br/><br/><br/>
-Lorem ipsum dolor sit amet<br/><br/><br/><br/>
-Lorem ipsum dolor sit amet<br/><br/><br/><br/>
-Lorem ipsum dolor sit amet<br/><br/><br/><br/>
-Lorem ipsum dolor sit amet<br/><br/><br/><br/>
-Lorem ipsum dolor sit amet<br/><br/><br/><br/>
-Lorem ipsum dolor sit amet<br/><br/><br/><br/>
+<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>
 `;
 };
 
-export const Primary = Template.bind({});
+export const Primary = PrimaryTemplate.bind({});
 Primary.args = {
   market : "se",
   language: 'sv',
   endpoint: 'https://com-preproduction.postnord.com'
 };
+
+
+const MinimalOptionsTemplate = ({ ...args }) => {
+  return `
+  <div style="background:#ddd;min-height:100vh;">
+  <pn-marketweb-siteheader language="sv">
+  </pn-marketweb-siteheader>
+</div>
+`;
+};
+
+
+
+export const MinimalOptions = MinimalOptionsTemplate.bind({});
+MinimalOptionsTemplate.args = {
+  market : "",
+  language: '',
+  endpoint: ''
+};

package/collection/components/navigation/pn-language-selector/pn-language-selector.js

@@ -14,18 +14,30 @@ export class PnlanguageSelector {
     this.initialize();
   }
   initialize() {
+    this.setSelectedLanguageName();
+    this.addEventBindingsToOptions();
+  }
+  addEventBindingsToOptions() {
     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");
-      }
+      option.removeEventListener("setCurrentLanguage", (event) => {
+        this.onSetCurrentLanguage(event.detail);
+      });
       // Bind event listener for when a user change language
       option.addEventListener("setCurrentLanguage", (event) => {
         this.onSetCurrentLanguage(event.detail);
       });
     });
   }
+  setSelectedLanguageName() {
+    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");
+      }
+    });
+  }
   onSetCurrentLanguage(option) {
     this.value = option.code;
     this.selectedLanguageName = option.name;
@@ -41,11 +53,14 @@ export class PnlanguageSelector {
     components.forEach((component) => {
       // Pass values as props into slotted components
       // component.setAttribute("current-language", this.value);
-      component.setAttribute("selected", (component.getAttribute("code") === this.value) + '');
+      const isSelected = (component.getAttribute("code") === this.value) + '';
+      if ((component.getAttribute('selected') + '') !== isSelected) {
+        component.setAttribute("selected", isSelected);
+      }
     });
   }
   render() {
-    return (h(Host, null,
+    return (h(Host, { value: this.value },
       h("pn-nav-dropdown", { label: this.selectedLanguageName, icon: "globe" },
         h("nav", { class: "languageselector-nav", "aria-label": this.i18n.heading },
           h("strong", { class: "languageselector-title" }, this.i18n.heading),
@@ -62,7 +77,7 @@ export class PnlanguageSelector {
   static get properties() { return {
     "value": {
       "type": "string",
-      "mutable": true,
+      "mutable": false,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -86,6 +101,12 @@ export class PnlanguageSelector {
   }; }
   static get elementRef() { return "hostElement"; }
   static get watchers() { return [{
+      "propName": "value",
+      "methodName": "setSelectedLanguageName"
+    }, {
+      "propName": "value",
+      "methodName": "setTranslations"
+    }, {
       "propName": "value",
       "methodName": "onValueChange"
     }]; }

package/collection/components/navigation/pn-mainnav/pn-mainnav-level.css

@@ -102,6 +102,9 @@ pn-mainnav-level [slot=top] {
     display: none;
   }
 }
+[data-menu-currentlevel="2"] pn-mainnav-level [slot=footer] {
+  display: none;
+}
 
 .mainnav-level-header {
   grid-area: top;

package/collection/components/navigation/pn-mainnav/pn-mainnav-level.js

@@ -56,12 +56,16 @@ export class PnMainnavLevel {
   }
   onChangeOpenLevel() {
     this.isOpen = state.openLevel === this.levelId;
+    state.currentLevel = this.level;
   }
   render() {
     return (h(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) ? (h("div", { class: "mainnav-level-header" },
         h("label", { htmlFor: this.levelId }, state.i18n.menuGoBackButton),
-        h("button", { class: "secondlevel-backbtn", onClick: () => state.openLevel = '', "aria-expanded": (state.openLevel === this.levelId) + '' },
+        h("button", { class: "secondlevel-backbtn", onClick: () => {
+            state.openLevel = '';
+            state.currentLevel = 1;
+          }, "aria-expanded": (state.openLevel === this.levelId) + '' },
           h("pn-icon", { symbol: "arrow-left", color: "blue700" }),
           state.i18n.menuStartButton),
         (this.parentHref && this.parentName) ? h("pn-mainnav-link", { href: this.parentHref, name: this.parentName, linkid: this.parentLinkId }) : null)) : null,

package/collection/components/navigation/pn-mainnav/pn-mainnav-store.js

@@ -2,6 +2,7 @@ import { createStore } from "@stencil/store";
 // Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
 const { state, onChange } = createStore({
   openLevel: '',
+  currentLevel: 1,
   openMenu: false,
   i18n: {
     menuHomeButton: '',

package/collection/components/navigation/pn-mainnav/pn-mainnav.js

@@ -56,7 +56,7 @@ export class PnMainnav {
         h("button", { "aria-controls": this.navigationId, "aria-expanded": state.openMenu + '', onClick: this.setMenuOpenState.bind(this) },
           state.i18n.mainMenuButton,
           h("pn-icon", { symbol: state.openMenu ? "close" : "bars", color: "white" }))),
-      h("nav", { class: "mainnav", "aria-label": this.navLabel, "data-menu-open": state.openMenu + '', id: this.navigationId },
+      h("nav", { class: "mainnav", "aria-label": this.navLabel, "data-menu-open": state.openMenu + '', "data-menu-currentlevel": state.currentLevel, id: this.navigationId },
         h("slot", null))));
   }
   static get is() { return "pn-mainnav"; }

package/collection/components/navigation/pn-site-selector/pn-site-selector.js

@@ -36,7 +36,7 @@ export class PnSiteSelector {
   static get properties() { return {
     "buttontext": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -49,12 +49,12 @@ export class PnSiteSelector {
         "text": ""
       },
       "attribute": "buttontext",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "\"postnord\""
     },
     "heading": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -67,12 +67,12 @@ export class PnSiteSelector {
         "text": ""
       },
       "attribute": "heading",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "\"PostNord\""
     },
     "language": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -85,7 +85,7 @@ export class PnSiteSelector {
         "text": "Specifies which language we want to show navigation in (sv,da,fi,no,en)"
       },
       "attribute": "language",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "\"sv\""
     }
   }; }