@postnord/pn-marketweb-components 2.0.90 → 2.0.91

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

@@ -1,15 +1,15 @@
-import { Component, Prop, h, State, Element, Listen, Watch, Host, Event } from "@stencil/core";
-import { translations } from "./translations";
-import { MarketWebContextService } from "../../../globals/MarketWebContextService";
-import { MarketWebLoginManager } from "../../../globals/MarketWebLoginManager";
-import { FetchHelper } from "../../../globals/FetchHelper";
+import { Component, Element, Event, h, Host, Listen, Prop, State, Watch, } from '@stencil/core';
+import { FetchHelper } from '../../../globals/FetchHelper';
+import { MarketWebContextService } from '../../../globals/MarketWebContextService';
+import { MarketWebLoginManager } from '../../../globals/MarketWebLoginManager';
+import { translations } from './translations';
 export class PnMarketwebSiteheader {
   constructor() {
-    this.endpointPath = "/api/navigation/header";
+    this.endpointPath = '/api/navigation/header';
     // allowedLanguages = ["sv","da","fi","no","en"];
     // allowedMarkets = ["se","dk","fi","no","com", "tpl"];
     /** Specifies which market we want to show (se,dk,fi,no,com) */
-    this.market = null; //se 
+    this.market = null; //se
     /** Specifies which language we want to show (sv,da,fi,no,en) */
     this.language = null; //sv
     /** Specifies the current site id (guid) */
@@ -17,9 +17,9 @@ export class PnMarketwebSiteheader {
     /** Specifies which environment we're fetching data from. (production, preproduction, integration, localhost) */
     this.environment = null; //sv
     /** Access token passed from backend */
-    this.userToken = "";
+    this.userToken = '';
     /** User Fullname */
-    this.userFullname = "";
+    this.userFullname = '';
     /** User Logged in state from the backend */
     this.userLoggedin = false;
     /** Specifies which endpoint domain we should load from */
@@ -37,17 +37,26 @@ export class PnMarketwebSiteheader {
     /** Adjusts the menus URLs */
     this.siteDomainInUrls = false;
     /** Autocomplete endpoint */
-    this.AutocompleteEndpoint = "";
+    this.AutocompleteEndpoint = '';
     /** Forward session to backend */
     this.sessionForward = false;
     /** If the component should use cached requests */
     this.cache = false;
     /** Event based only language switch */
     this.spaMode = false;
-    this.i18n = { "searchlabel": "", "searchplaceholder": "", "searchbuttontext": "", "menuHomeButton": "", "menuGoBackButton": "", "mainMenuButton": "", "menuStartButton": "", "profileSelectionFlyoutHeading": "" };
+    this.i18n = {
+      searchlabel: '',
+      searchplaceholder: '',
+      searchbuttontext: '',
+      menuHomeButton: '',
+      menuGoBackButton: '',
+      mainMenuButton: '',
+      menuStartButton: '',
+      profileSelectionFlyoutHeading: '',
+    };
     this.gotData = false;
     this.fetchingData = false;
-    this.homePageLink = "/";
+    this.homePageLink = '/';
     // Menu state
     this.menuItems = [];
     // Search
@@ -62,7 +71,7 @@ export class PnMarketwebSiteheader {
     this.minimizeSearch = false;
     this.loggedIn = false;
     // FetchHelper
-    this.fetchHelper = new FetchHelper("siteheader");
+    this.fetchHelper = new FetchHelper('siteheader');
     // Login manager
     this.loginManager = null;
   }
@@ -90,13 +99,15 @@ export class PnMarketwebSiteheader {
       this.endpoint = await marketWebContextService.getEndpoint(this.environment, this.market);
     }
     if (!this.endpoint) {
-      this.endpoint = "";
+      this.endpoint = '';
     }
   }
   async init() {
     this.setTranslations();
     await this.fetchData();
-    window.setTimeout(() => { this.checkMenuOverflow(); }, 50);
+    window.setTimeout(() => {
+      this.checkMenuOverflow();
+    }, 50);
   }
   setTranslations() {
     if (this.language && translations[this.language]) {
@@ -122,11 +133,11 @@ export class PnMarketwebSiteheader {
       return;
     }
     this.fetchingData = true;
-    const endpointBase = (this.endpoint.lastIndexOf("/") === this.endpoint.length - 1) ? this.endpoint.substring(0, this.endpoint.length - 1) : this.endpoint;
+    const endpointBase = this.endpoint.lastIndexOf('/') === this.endpoint.length - 1 ? this.endpoint.substring(0, this.endpoint.length - 1) : this.endpoint;
     const fetchUrl = `${endpointBase}${this.endpointPath}?market=${this.market}&language=${this.language}`;
-    const data = await this.fetchHelper.fetchJson(fetchUrl, {
-      'mode': 'cors'
-    }, this.cache, this.onFetchRefreshed.bind(this));
+    const data = (await this.fetchHelper.fetchJson(fetchUrl, {
+      mode: 'cors',
+    }, this.cache, this.onFetchRefreshed.bind(this)));
     await this.setStateFromData(data);
   }
   onFetchRefreshed(data) {
@@ -142,18 +153,20 @@ export class PnMarketwebSiteheader {
     }
     const siteUrl = this.siteDefinition.url;
     // Add trailing slash to domain if it's missing
-    return siteUrl + ((siteUrl.lastIndexOf("/") !== siteUrl.length - 1) ? "/" : "") + item.twoLetterISOLanguageName;
+    return siteUrl + (siteUrl.lastIndexOf('/') !== siteUrl.length - 1 ? '/' : '') + item.twoLetterISOLanguageName;
   }
   async setStateFromData(data) {
     var _a, _b, _c;
-    if (typeof data !== "object") {
+    if (typeof data !== 'object') {
       console.warn('Data was not valid', data);
     }
     // Set site definition
     this.siteDefinition = data.sitedefinition;
     // Set navigation information
     if (this.siteDomainInUrls) {
-      this.menuItems = data.mainMenu.menuItems.map((item) => { return this.adjustMenuItemUrls(item); });
+      this.menuItems = data.mainMenu.menuItems.map(item => {
+        return this.adjustMenuItemUrls(item);
+      });
     }
     else {
       this.menuItems = data.mainMenu.menuItems;
@@ -166,7 +179,7 @@ export class PnMarketwebSiteheader {
         id: 'homelink',
         open: false,
         selected: false,
-        children: []
+        children: [],
       });
     }
     // Set search
@@ -178,29 +191,41 @@ export class PnMarketwebSiteheader {
     this.setLanguageOptions();
     let loginDialog = data.loginViewModel;
     if (loginDialog && this.siteDomainInUrls) {
-      loginDialog.loggedInLinks = loginDialog.loggedInLinks.map((item) => { item.href = this.adjustHref(item.href); return item; });
-      loginDialog.loginMenuLinks = loginDialog.loginMenuLinks.map((item) => { item.href = this.adjustHref(item.href); return item; });
+      loginDialog.loggedInLinks = loginDialog.loggedInLinks.map(item => {
+        item.href = this.adjustHref(item.href);
+        return item;
+      });
+      loginDialog.loginMenuLinks = loginDialog.loginMenuLinks.map(item => {
+        item.href = this.adjustHref(item.href);
+        return item;
+      });
     }
     this.loginDialog = loginDialog;
     await this.spaModeAdjustments();
     this.gotData = true;
     this.fetchingData = true;
     this.homePageLink = (_c = (_b = this.siteDefinition) === null || _b === void 0 ? void 0 : _b.url) !== null && _c !== void 0 ? _c : document.location.hostname;
-    window.setTimeout(() => { this.checkMenuOverflow(); }, 100);
+    window.setTimeout(() => {
+      this.checkMenuOverflow();
+    }, 100);
   }
   adjustMenuItemUrls(item) {
     item.href = this.adjustHref(item.href);
     if (item.children && item.children.length > 0) {
-      let adjustedItems = item.children.map((item) => { return this.adjustMenuItemUrls(item); });
+      let adjustedItems = item.children.map(item => {
+        return this.adjustMenuItemUrls(item);
+      });
       item.children = adjustedItems;
     }
     return item;
   }
   adjustHref(href) {
-    if (href.indexOf("http") === 0) {
+    if (href.indexOf('http') === 0) {
       return href;
     }
-    const domainUrl = (this.siteDefinition.url.lastIndexOf("/") === this.siteDefinition.url.length - 1) ? this.siteDefinition.url.substring(0, this.siteDefinition.url.length - 1) : this.siteDefinition.url;
+    const domainUrl = this.siteDefinition.url.lastIndexOf('/') === this.siteDefinition.url.length - 1
+      ? this.siteDefinition.url.substring(0, this.siteDefinition.url.length - 1)
+      : this.siteDefinition.url;
     href = domainUrl + href;
     return href;
   }
@@ -210,14 +235,14 @@ export class PnMarketwebSiteheader {
       return;
     }
     const hrefLangsTags = (_a = Array.prototype.slice.call(document.querySelectorAll('link[rel="alternate"][hreflang]'))) !== null && _a !== void 0 ? _a : [];
-    const hrefLangs = hrefLangsTags.map((tag) => {
-      let hrefLangValue = tag.getAttribute("hreflang");
-      if (hrefLangValue.indexOf("en-") !== -1 || hrefLangValue.indexOf("en_") !== -1) {
+    const hrefLangs = hrefLangsTags.map(tag => {
+      let hrefLangValue = tag.getAttribute('hreflang');
+      if (hrefLangValue.indexOf('en-') !== -1 || hrefLangValue.indexOf('en_') !== -1) {
         hrefLangValue = hrefLangValue.substring(0, 2);
       }
       return hrefLangValue;
     });
-    let languageOptions = []; // Reset language options 
+    let languageOptions = []; // Reset language options
     this.languageSelector.languages.map((languageOption) => {
       // In case there are language links present on the page we only show languages that have those tags
       if (hrefLangs && hrefLangs.length > 0) {
@@ -250,7 +275,7 @@ export class PnMarketwebSiteheader {
     }
   }
   promotedItemId(item) {
-    return "promo-" + item.linkText.replace(/[^A-Za-z0-9.\\\/]/igm, "");
+    return 'promo-' + item.linkText.replace(/[^A-Za-z0-9.\\\/]/gim, '');
   }
   handleResize() {
     requestAnimationFrame(() => {
@@ -267,12 +292,12 @@ export class PnMarketwebSiteheader {
       return;
     }
     const parent = firstMenuLevel.parentElement;
-    if (parent.tagName.toLocaleLowerCase() !== "nav") {
+    if (parent.tagName.toLocaleLowerCase() !== 'nav') {
       return;
     }
     const parentWidth = parent.scrollWidth;
     const elmWidth = firstMenuLevel.clientWidth;
-    const isOverFlowed = parentWidth < (elmWidth);
+    const isOverFlowed = parentWidth < elmWidth;
     if (isOverFlowed && this.minimizeSearch === false) {
       this.minimizeSearch = true;
     }
@@ -282,7 +307,9 @@ export class PnMarketwebSiteheader {
       return href;
     }
     const loginDomains = ['portal.postnord.com'];
-    const matchedHref = loginDomains.filter((domain) => { return href.indexOf(domain) !== -1; });
+    const matchedHref = loginDomains.filter(domain => {
+      return href.indexOf(domain) !== -1;
+    });
     if (matchedHref.length === 0) {
       return href;
     }
@@ -295,11 +322,11 @@ export class PnMarketwebSiteheader {
         h("div", { class: "siteheader-row" },
           h("div", { class: "siteheader-topleft" },
             h("slot", { name: "topleft" }),
-            (this.gotData && this.siteSelector && !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: this.adjustSiteSelectorUrl(site.href), newwindow: site.openInNewWindow })))),
+            this.gotData && this.siteSelector && !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: this.adjustSiteSelectorUrl(site.href), newwindow: site.openInNewWindow })))))),
           h("div", { class: "siteheader-logocontainer" },
             h("a", { href: this.homePageLink, title: "Home", class: "siteheader-logolink" },
               h("slot", { name: "logo" },
@@ -307,36 +334,32 @@ export class PnMarketwebSiteheader {
                   h("path", { d: "M108.84,13.35c0,6.34-5.17,9-10,9S89,19.76,89,13.63c0-6.28,5.08-9,10-9S108.84,7.25,108.84,13.35Zm-6.56.18a3.4,3.4,0,1,0-6.8,0,3.29,3.29,0,0,0,3.42,3.41A3.24,3.24,0,0,0,102.28,13.54Zm-83,0c0,4.83-3.32,8.82-8.49,8.82a6.54,6.54,0,0,1-4.65-1.57v5.86H0V5.16H6.17V6.8a6.43,6.43,0,0,1,5.11-2.18C16.41,4.62,19.31,8.58,19.31,13.54Zm-6.53,0A3.27,3.27,0,0,0,9.4,10,3.28,3.28,0,0,0,6,13.54,3.29,3.29,0,0,0,9.4,16.95,3.24,3.24,0,0,0,12.78,13.54Zm103.69,0.27c0-2.54,1.54-3.32,3.6-3.32a6.56,6.56,0,0,1,2.08.3L122.3,5.1a3.92,3.92,0,0,0-1.45-.18c-3.45,0-4.38,2.18-4.38,2.18V5.16H110.3V21.84h6.17v-8ZM141.73,0V21.84h-6.16V20.21a6.43,6.43,0,0,1-5.11,2.18c-5.14,0-8-4-8-8.91s3.32-8.82,8.49-8.82a6.54,6.54,0,0,1,4.65,1.57v-5Zm-6,13.48a3.28,3.28,0,0,0-3.41-3.41A3.24,3.24,0,0,0,129,13.47,3.4,3.4,0,1,0,135.75,13.47ZM81.35,4.62c-3.6,0-4.9,2.18-4.9,2.18V5.16H70.29V21.84h6.16V13.29c0-2.11.79-3.08,2.69-3.08s2.18,1.57,2.18,3.57v8.07h6.22V11.6C87.55,7,85.34,4.62,81.35,4.62ZM64.07,1.42H57.9V21.84h6.16V10.36H67l2.81-5.2H64.07V1.42ZM50.26,11.21c-2-.3-2.87-0.3-2.87-1.09s0.81-.94,2.42-0.94a16.15,16.15,0,0,1,5.11.91L56,5.41a24.56,24.56,0,0,0-6.13-.75c-5.89,0-9,2.27-9,5.89,0,2.81,1.66,4.47,6.53,5.11,2.06,0.27,2.81.39,2.81,1.15s-0.82,1-2.24,1a16.67,16.67,0,0,1-6-1.3L40.77,21.3a22.14,22.14,0,0,0,6.68,1c6.35,0,9.28-2.24,9.28-5.89C56.72,13.54,55.15,12,50.26,11.21ZM40.19,13.35c0,6.34-5.17,9-10,9s-9.82-2.6-9.82-8.73c0-6.28,5.08-9,10-9S40.19,7.25,40.19,13.35Zm-6.56.18a3.4,3.4,0,1,0-6.8,0,3.28,3.28,0,0,0,3.41,3.41A3.24,3.24,0,0,0,33.63,13.54Z", fill: "#00A0D6", transform: "translate(0 0)" }))))),
           h("div", { class: "siteheader-topright" },
             h("slot", { name: "toprightstart" }),
-            (this.gotData && this.loginDialog && !this.hideLogin) && (h("pn-marketweb-siteheader-login", { token: this.userToken, fullname: this.userFullname, loggedin: this.userLoggedin, loginDialog: this.loginDialog, endpoint: this.endpoint, i18n: this.i18n, showProfileSelection: this.showProfileSelection })),
-            (this.gotData && this.languageOptions && this.languageOptions.length) && !this.hideLanguageSelector &&
-              h("pn-language-selector", { value: this.language }, this.languageOptions.map(language => h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))),
+            this.gotData && this.loginDialog && !this.hideLogin && (h("pn-marketweb-siteheader-login", { token: this.userToken, fullname: this.userFullname, loggedin: this.userLoggedin, loginDialog: this.loginDialog, endpoint: this.endpoint, i18n: this.i18n, showProfileSelection: this.showProfileSelection })),
+            this.gotData && this.languageOptions && this.languageOptions.length && !this.hideLanguageSelector && (h("pn-language-selector", { value: this.language }, this.languageOptions.map(language => (h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))))),
             h("slot", { name: "toprightend" }))),
         h("div", { class: "siteheader-row" },
-          h("div", { class: "siteheader-menu" }, (this.gotData && this.menuItems) && (h("pn-mainnav", { market: this.market, language: this.language, onMenuOpenChange: (e) => {
-              document.body.setAttribute("data-siteheader-menuopen", (e.detail + ''));
+          h("div", { class: "siteheader-menu" }, this.gotData && this.menuItems && (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) => {
+              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) + item.id })))))));
+                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) + item.id })))))))));
               })),
               h("div", { slot: "footer", class: "siteheader-menu-footer" },
-                (this.gotData && this.loginDialog && !this.hideLogin) && (h("pn-marketweb-siteheader-login", { emitEvents: false, loginDialog: this.loginDialog, endpoint: this.endpoint, fullname: this.userFullname, loggedin: this.userLoggedin, i18n: this.i18n, showProfileSelection: this.showProfileSelection })),
-                (this.gotData && this.languageOptions && this.languageOptions.length) && !this.hideLanguageSelector &&
-                  h("pn-language-selector", { value: this.language }, this.languageOptions.map(language => h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))),
-                !this.hideSiteSelector &&
-                  h("pn-site-selector", { language: this.language },
-                    (this.gotData && ((_e = this.siteSelector) === null || _e === void 0 ? void 0 : _e.currentSiteTitle)) &&
-                      h("pn-site-selector-item", { heading: this.siteSelector.currentSiteTitle, description: this.siteSelector.currentSiteDescription }),
-                    (this.gotData && ((_f = this.siteSelector) === null || _f === void 0 ? void 0 : _f.siteSelections)) && this.siteSelector.siteSelections.map((site) => h("pn-site-selector-item", { heading: site.linkText, description: site.linkDescription, url: site.pageLink, newwindow: site.openInNewWindow })))),
+                h("slot", { name: "menu-footer-cta" }),
+                this.gotData && this.loginDialog && !this.hideLogin && (h("pn-marketweb-siteheader-login", { emitEvents: false, loginDialog: this.loginDialog, endpoint: this.endpoint, fullname: this.userFullname, loggedin: this.userLoggedin, i18n: this.i18n, showProfileSelection: this.showProfileSelection })),
+                this.gotData && this.languageOptions && this.languageOptions.length && !this.hideLanguageSelector && (h("pn-language-selector", { value: this.language }, this.languageOptions.map(language => (h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))))),
+                !this.hideSiteSelector && (h("pn-site-selector", { language: this.language },
+                  this.gotData && ((_e = this.siteSelector) === null || _e === void 0 ? void 0 : _e.currentSiteTitle) && (h("pn-site-selector-item", { heading: this.siteSelector.currentSiteTitle, description: this.siteSelector.currentSiteDescription })),
+                  this.gotData &&
+                    ((_f = this.siteSelector) === null || _f === void 0 ? void 0 : _f.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", { language: this.language, siteid: this.siteid, search: this.search, "hide-search": this.hideSearch, i18n: this.i18n })))))),
           h("pn-marketweb-siteheader-search", { language: this.language, siteid: this.siteid, primary: true, search: this.search, "hide-search": this.hideSearch, "show-only-link": this.minimizeSearch, i18n: this.i18n })))));
@@ -437,7 +460,7 @@ export class PnMarketwebSiteheader {
       },
       "attribute": "user-token",
       "reflect": false,
-      "defaultValue": "\"\""
+      "defaultValue": "''"
     },
     "userFullname": {
       "type": "string",
@@ -455,7 +478,7 @@ export class PnMarketwebSiteheader {
       },
       "attribute": "user-fullname",
       "reflect": false,
-      "defaultValue": "\"\""
+      "defaultValue": "''"
     },
     "userLoggedin": {
       "type": "boolean",
@@ -617,7 +640,7 @@ export class PnMarketwebSiteheader {
       },
       "attribute": "autocomplete-endpoint",
       "reflect": false,
-      "defaultValue": "\"\""
+      "defaultValue": "''"
     },
     "sessionForward": {
       "type": "boolean",

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

@@ -1,44 +1,44 @@
-import readme from "./readme.md";
+import readme from './readme.md';
 
 const usertoken = '80956fbe5c1f7bbf70e31226809ccf77829cffb65feb8ed0d9f5434';
 
 export default {
-  title: "Web Components/Market web site Header",
+  title: 'Web Components/Market web site Header',
   parameters: {
     notes: readme,
-    layout: 'fullscreen'
+    layout: 'fullscreen',
   },
   argTypes: {
-    market : {
+    market: {
       values: [
-         { name:'Sweden', value: 'se'}, 
-         { name:'Denmark', value:'dk'}, 
-         { name:'Finland', value:'fi'}, 
-         { name:'Norway', value:'no'}, 
-         { name:'Corporate', value:'com'},
-         { name:'TPL', value:'tpl'},
-      ]
+        { name: 'Sweden', value: 'se' },
+        { name: 'Denmark', value: 'dk' },
+        { name: 'Finland', value: 'fi' },
+        { name: 'Norway', value: 'no' },
+        { name: 'Corporate', value: 'com' },
+        { name: 'TPL', value: 'tpl' },
+      ],
     },
-    language : {
+    language: {
       values: [
-        { name:'English', value:'en'},
-        { name:'Swedish', value: 'sv'}, 
-        { name:'Danish', value: 'da'}, 
-        { name:'Finnish', value: 'fi'}, 
-        { name:'Norwegian', value: 'no'},
-      ]
+        { name: 'English', value: 'en' },
+        { name: 'Swedish', value: 'sv' },
+        { name: 'Danish', value: 'da' },
+        { name: 'Finnish', value: 'fi' },
+        { name: 'Norwegian', value: 'no' },
+      ],
     },
-    endpoint : {
+    endpoint: {
       values: [
-        { name:'Localhost', value: 'http://localhost:51444'},
-        { name:'local.postnord.com', value: 'https://local.postnord.com'},
-        { name:'Integration', value: 'https://com-integration.postnord.com'},
-        { name:'Preproduction', value: 'https://com-preproduction.postnord.com'},
-        { name:'Production', value: 'https://com-production.postnord.com'},
-        { name:'Live', value: 'https://www.postnord.com'},
-      ]
+        { name: 'Localhost', value: 'http://localhost:51444' },
+        { name: 'local.postnord.com', value: 'https://local.postnord.com' },
+        { name: 'Integration', value: 'https://com-integration.postnord.com' },
+        { name: 'Preproduction', value: 'https://com-preproduction.postnord.com' },
+        { name: 'Production', value: 'https://com-production.postnord.com' },
+        { name: 'Live', value: 'https://www.postnord.com' },
+      ],
     },
-  }
+  },
 };
 
 const PrimaryTemplate = ({ ...args }) => {
@@ -204,9 +204,9 @@ pn-mainnav>nav {
 
   <div style="background:#ddd;min-height:100vh;">
   <pn-marketweb-siteheader 
-  market="${ args.market }"
-  language="${ args.language }"
-  endpoint="${ args.endpoint }"
+  market="${args.market}"
+  language="${args.language}"
+  endpoint="${args.endpoint}"
   site-domain-in-urls="true"
   hide-site-selector="false"
   hide-language-selector="false"
@@ -232,21 +232,21 @@ Content that is higher than 100% viewport height
 -->
 `;
 };
-//   
+//
 export const Primary = PrimaryTemplate.bind({});
 Primary.args = {
-  market : "se",
+  market: 'se',
   language: 'sv',
-  endpoint: 'http://localhost:51444'
-}
+  endpoint: 'http://localhost:51444',
+};
 
 const OldLoginDropdownTemplate = ({ ...args }) => {
   return `
   <div style="background:#ddd;min-height:100vh;">
   <pn-marketweb-siteheader 
-  market="${ args.market }"
-  language="${ args.language }"
-  endpoint="${ args.endpoint }"
+  market="${args.market}"
+  language="${args.language}"
+  endpoint="${args.endpoint}"
   hide-site-selector="false"
   hide-language-selector="false"
   hide-search="false"
@@ -271,14 +271,13 @@ Content that is higher than 100% viewport height
 -->
 `;
 };
-//   
+//
 export const OldLoginDropdown = OldLoginDropdownTemplate.bind({});
 OldLoginDropdown.args = {
-  market : "se",
+  market: 'se',
   language: 'sv',
-  endpoint: 'http://localhost:51444'
-}
-
+  endpoint: 'http://localhost:51444',
+};
 
 const MinimalOptionsTemplate = ({ ...args }) => {
   return `
@@ -310,7 +309,6 @@ const CustomLogoTemplate = ({ ...args }) => {
 
 export const CustomLogo = CustomLogoTemplate.bind({});
 
-
 const EnvironmentOptionsTemplate = ({ ...args }) => {
   return `
   <div style="background:#ddd;min-height:100vh;">
@@ -321,8 +319,7 @@ const EnvironmentOptionsTemplate = ({ ...args }) => {
 };
 
 export const EnvironmentOptions = EnvironmentOptionsTemplate.bind({});
-MinimalOptionsTemplate.args = {
-};
+MinimalOptionsTemplate.args = {};
 
 const SPAModeOptionsTemplate = ({ ...args }) => {
   return `
@@ -347,23 +344,21 @@ const SPAModeOptionsTemplate = ({ ...args }) => {
 `;
 };
 
-
-
 export const SPAModeOptions = SPAModeOptionsTemplate.bind({});
 SPAModeOptions.args = {
-  market : "",
+  market: '',
   language: '',
-  endpoint: ''
+  endpoint: '',
 };
 
 const LocalhostTemplate = ({ ...args }) => {
   return `
   <div style="background:#ddd;min-height:100vh;">
   <pn-marketweb-siteheader
-    market="${ args.market }"
-    language="${ args.language }"
-    endpoint="${ args.endpoint }"
-    environment="${ args.environment }"
+    market="${args.market}"
+    language="${args.language}"
+    endpoint="${args.endpoint}"
+    environment="${args.environment}"
   >
   </pn-marketweb-siteheader>
 </div>
@@ -372,7 +367,7 @@ const LocalhostTemplate = ({ ...args }) => {
 
 export const LocalhostOptions = LocalhostTemplate.bind({});
 LocalhostOptions.args = {
-  market : "se",
+  market: 'se',
   language: 'sv',
   endpoint: 'http://localhost:51444/',
 };
@@ -381,10 +376,10 @@ const LoggedInTemplate = ({ ...args }) => {
   return `
   <div style="background:#ddd;min-height:100vh;">
   <pn-marketweb-siteheader
-    market="${ args.market }"
-    language="${ args.language }"
-    endpoint="${ args.endpoint }"
-    user-token="${ args.token }"
+    market="${args.market}"
+    language="${args.language}"
+    endpoint="${args.endpoint}"
+    user-token="${args.token}"
   >
   </pn-marketweb-siteheader>
 </div>
@@ -393,7 +388,7 @@ const LoggedInTemplate = ({ ...args }) => {
 
 export const LoggedIn = LoggedInTemplate.bind({});
 LoggedIn.args = {
-  market : "se",
+  market: 'se',
   language: 'sv',
   // endpoint: 'https://com-integration.postnord.com',
   endpoint: 'http://localhost:51444',
@@ -404,10 +399,10 @@ const LoggedInProfileSelectionTemplate = ({ ...args }) => {
   return `
   <div style="background:#ddd;min-height:100vh;">
   <pn-marketweb-siteheader
-    market="${ args.market }"
-    language="${ args.language }"
-    endpoint="${ args.endpoint }"
-    user-token="${ args.token }"
+    market="${args.market}"
+    language="${args.language}"
+    endpoint="${args.endpoint}"
+    user-token="${args.token}"
     show-profile-selection="true"
   >
   </pn-marketweb-siteheader>
@@ -417,7 +412,7 @@ const LoggedInProfileSelectionTemplate = ({ ...args }) => {
 
 export const LoggedInProfileSelection = LoggedInProfileSelectionTemplate.bind({});
 LoggedInProfileSelection.args = {
-  market : "se",
+  market: 'se',
   language: 'sv',
   // endpoint: 'https://com-integration.postnord.com',
   endpoint: 'http://localhost:51444/',
@@ -428,11 +423,11 @@ const BusinessUserLoggedInTemplate = ({ ...args }) => {
   return `
   <div style="background:#ddd;min-height:100vh;">
   <pn-marketweb-siteheader
-    market="${ args.market }"
-    language="${ args.language }"
-    endpoint="${ args.endpoint }"
-    user-fullname="${ args.name }"
-    user-loggedin="${ args.loggedin }"
+    market="${args.market}"
+    language="${args.language}"
+    endpoint="${args.endpoint}"
+    user-fullname="${args.name}"
+    user-loggedin="${args.loggedin}"
   >
   </pn-marketweb-siteheader>
 </div>
@@ -441,9 +436,34 @@ const BusinessUserLoggedInTemplate = ({ ...args }) => {
 
 export const BusinessUserLoggedIn = BusinessUserLoggedInTemplate.bind({});
 BusinessUserLoggedIn.args = {
-  market : "se",
+  market: 'se',
   language: 'sv',
   endpoint: 'https://com-integration.postnord.com',
   name: 'custom user name',
-  loggedin: true
+  loggedin: true,
+};
+
+const DotComSiteHeaderTemplate = ({ ...args }) => {
+  return `
+  <header data-header-theme="dotcom">
+    <pn-marketweb-siteheader
+    market="${args.market}"
+    language="${args.language}"
+    endpoint="${args.endpoint}"
+    user-fullname="${args.name}"
+    user-loggedin="${args.loggedin}"
+    >
+      <pn-button slot="toprightend" small="true">Get started</pn-button>
+      <pn-button slot="menu-footer-cta" small="true">Get started</pn-button>
+    </pn-marketweb-siteheader>
+  </header>`;
+};
+
+export const DotComSiteHeader = DotComSiteHeaderTemplate.bind({});
+DotComSiteHeader.args = {
+  market: 'se',
+  language: 'sv',
+  endpoint: 'https://com-integration.postnord.com',
+  name: 'DotCom User',
+  loggedin: false,
 };