@postnord/pn-marketweb-components 1.0.17 → 1.0.21

package/cjs/pn-marketweb-siteheader.cjs.entry.js

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0404c97e.js');
+const MarketWebContextService = require('./MarketWebContextService-420668a7.js');
 
 const translations = {
   'sv': {
@@ -57,13 +58,19 @@ const pnMarketwebSiteheaderCss = "body[data-siteheader-menuopen=true]{max-height
 let PnMarketwebSiteheader = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.changeLanguage = index.createEvent(this, "changeLanguage", 7);
+    this.changeMarket = index.createEvent(this, "changeMarket", 7);
     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*/
@@ -87,22 +94,64 @@ let PnMarketwebSiteheader = class {
     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.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);
   }
@@ -173,7 +222,7 @@ let PnMarketwebSiteheader = class {
   }
   render() {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    return (index.h("header", null, index.h("div", { class: "siteheader-row" }, index.h("div", { class: "siteheader-topleft" }, index.h("slot", { name: "topleft" }), !this.hideSiteSelector &&
+    return (index.h(index.Host, { language: this.language, market: this.market, environment: this.environment }, index.h("header", null, index.h("div", { class: "siteheader-row" }, index.h("div", { class: "siteheader-topleft" }, index.h("slot", { name: "topleft" }), !this.hideSiteSelector &&
       index.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)) &&
         index.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) => index.h("pn-site-selector-item", { heading: site.linkText, description: site.linkDescription, url: site.href, newwindow: site.openInNewWindow })))), index.h("div", { class: "siteheader-logocontainer" }, index.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" }, index.h("svg", { class: "siteheader-logo", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 141.73 26.65" }, index.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)" })))), index.h("div", { class: "siteheader-topright" }, index.h("slot", { name: "toprightstart" }), (this.gotData && this.loginDialog && !this.hideLogin) && (index.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 &&
       index.h("pn-language-selector", { value: this.language }, this.languageSelector.languages.map(language => index.h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))), index.h("slot", { name: "toprightend" }))), index.h("div", { class: "siteheader-row" }, index.h("div", { class: "siteheader-menu" }, index.h("pn-mainnav", { market: this.market, language: this.language, onMenuOpenChange: (e) => {
@@ -190,9 +239,13 @@ let PnMarketwebSiteheader = class {
     })), index.h("div", { slot: "footer", class: "siteheader-menu-footer" }, (this.gotData && this.loginDialog && !this.hideLogin) && (index.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 &&
       index.h("pn-language-selector", { value: this.language }, this.languageSelector.languages.map(language => index.h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))), !this.hideSiteSelector &&
       index.h("pn-site-selector", { language: this.language }, (this.gotData && ((_j = this.siteSelector) === null || _j === void 0 ? void 0 : _j.currentSiteTitle)) &&
-        index.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) => index.h("pn-site-selector-item", { heading: site.linkText, description: site.linkDescription, url: site.pageLink, newwindow: site.openInNewWindow })))), index.h("div", { slot: "top", class: "siteheader-menu-top" }, index.h("pn-marketweb-siteheader-search", { search: this.search, "hide-search": this.hideSearch, i18n: this.i18n }))))), index.h("pn-marketweb-siteheader-search", { search: this.search, "hide-search": this.hideSearch, "show-only-link": this.minimizeSearch, i18n: this.i18n }))));
+        index.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) => index.h("pn-site-selector-item", { heading: site.linkText, description: site.linkDescription, url: site.pageLink, newwindow: site.openInNewWindow })))), index.h("div", { slot: "top", class: "siteheader-menu-top" }, index.h("pn-marketweb-siteheader-search", { search: this.search, "hide-search": this.hideSearch, i18n: this.i18n }))))), index.h("pn-marketweb-siteheader-search", { search: this.search, "hide-search": this.hideSearch, "show-only-link": this.minimizeSearch, i18n: this.i18n })))));
   }
   get hostElement() { return index.getElement(this); }
+  static get watchers() { return {
+    "language": ["onLanguageChange"],
+    "market": ["onMarketChange"]
+  }; }
 };
 PnMarketwebSiteheader.style = pnMarketwebSiteheaderCss;
 

package/collection/collection-manifest.json

@@ -1,6 +1,7 @@
 {
   "entries": [
     "./components/input/pn-choice-button/pn-choice-button.js",
+    "./components/input/pn-filter-checkbox/pn-filter-checkbox.js",
     "./components/input/pn-filter-search/pn-filter-search.js",
     "./components/layout-components/pn-marketweb-sitefooter/pn-marketweb-sitefooter.js",
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login.js",

package/collection/components/input/pn-filter-checkbox/checkbox.stories.js

@@ -0,0 +1,34 @@
+import readme from "./readme.md";
+
+export default {
+  title: "input/Filter Checkbox",
+  parameters: {
+    notes: readme,
+    layout: 'centered'
+  }
+};
+
+
+const Template = ({ ...args }) => {
+  return `
+    <div style="display: flex; align-items: center;">
+      <form method="get" target="_blank">
+      <pn-filter-checkbox checkboxid="${args.checkboxid}" value="${args.value}" name="${args.name}" checked="${args.checked}" indeterminate="${args.indeterminate}" disabled="${args.disabled}"></pn-filter-checkbox>
+      <label style="margin-left: .5em;" for="${args.checkboxid}">${args.value}</label>
+
+      <br/><br/>
+      <pn-button type="submit">Submit</pn-button>
+      </form>
+    </div>
+    `;
+  };
+
+export const Primary = Template.bind({})
+Primary.args = {
+  disabled: false,
+  checked: false,
+  indeterminate: false,
+  checkboxid: 'test-id',
+  value: 'test value',
+  name: 'test-name',
+};

package/collection/components/input/pn-filter-checkbox/pn-filter-checkbox.css

@@ -0,0 +1,73 @@
+:host {
+  display: inline-block;
+  user-select: none;
+}
+:host input {
+  opacity: 0;
+  position: absolute;
+}
+:host input[type=checkbox] + label.pn-checkbox {
+  width: 1.5em;
+  min-width: 1.5em;
+  height: 1.5em;
+  min-height: 1.5em;
+  background: #fff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  border: 0.1rem solid #969087;
+  cursor: pointer;
+  border-radius: 0.4rem;
+  cursor: pointer;
+  transition-duration: 220ms;
+  transition-timing-function: cubic-bezier(0.79, 0.14, 0.15, 0.86);
+  transition-property: border, background, box-shadow;
+}
+:host input[type=checkbox] + label.pn-checkbox svg {
+  width: 80%;
+  fill: none;
+}
+:host input[type=checkbox] + label.pn-checkbox svg polyline {
+  stroke: #FFF;
+  transform-origin: 0 0;
+  stroke-linecap: round;
+  stroke-dasharray: 23;
+  stroke-dashoffset: 23;
+  transition-delay: none;
+  transition: stroke-dashoffset 180ms cubic-bezier(0.79, 0.14, 0.15, 0.86);
+}
+:host input[type=checkbox]:hover + label.pn-checkbox {
+  border: 0.1rem solid #005D92;
+  background: #E0F8FF;
+}
+:host input[type=checkbox]:checked + label.pn-checkbox, :host input[type=checkbox]:indeterminate + label.pn-checkbox {
+  background: #005D92;
+  border: 0.1rem solid #005D92;
+}
+:host input[type=checkbox]:checked + label.pn-checkbox svg polyline, :host input[type=checkbox]:indeterminate + label.pn-checkbox svg polyline {
+  transition-delay: 220ms;
+}
+:host input[type=checkbox]:checked + label.pn-checkbox svg polyline.checkmark-path {
+  stroke-dashoffset: 0;
+}
+:host input[type=checkbox]:indeterminate + label.pn-checkbox svg polyline.indeterminate-path {
+  stroke-dashoffset: 0;
+}
+:host input[type=checkbox]:focus + label.pn-checkbox, :host input[type=checkbox]:active + label.pn-checkbox {
+  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.3rem #005D92;
+}
+:host input[type=checkbox]:disabled + label.pn-checkbox {
+  background-color: #D3CECB;
+  border: 0.1rem solid #969087;
+  cursor: not-allowed;
+}
+:host input[type=checkbox]:disabled + label.pn-checkbox svg polyline {
+  stroke: #969087;
+}
+:host input[type=checkbox]:disabled:checked + label.pn-checkbox {
+  border: 0.1rem solid transparent;
+}
+:host input[type=checkbox]:disabled:active + label.pn-checkbox {
+  box-shadow: none;
+}

package/collection/components/input/pn-filter-checkbox/pn-filter-checkbox.js

@@ -0,0 +1,183 @@
+import { Component, Prop, h, Host, Element, Listen } from "@stencil/core";
+export class PnFilterCheckbox {
+  constructor() {
+    this.disabled = false;
+    this.checked = false;
+    this.indeterminate = false;
+  }
+  handlechange() {
+    this.indeterminate = false;
+  }
+  componentDidLoad() {
+    this.checkAndSetIndeterminateState();
+    this.bindEvents();
+  }
+  componentDidUpdate() {
+    this.checkAndSetIndeterminateState();
+  }
+  bindEvents() {
+    const labels = document.querySelectorAll('label[for="' + this.checkboxid + '"]');
+    labels.forEach((label) => {
+      label.addEventListener('click', () => {
+        this.hostElement.shadowRoot.querySelector('label').click();
+      });
+    });
+    const checkboxInput = this.hostElement.shadowRoot.querySelector('input');
+    checkboxInput.addEventListener('change', this.onCheckboxChange.bind(this, checkboxInput));
+  }
+  onCheckboxChange(checkboxInput) {
+    let outsideInput = this.hostElement.querySelector("input.hidden-" + this.checkboxid);
+    if (outsideInput) {
+      outsideInput.value = (checkboxInput.checked) ? this.value : "";
+    }
+  }
+  checkAndSetIndeterminateState() {
+    let checkbox = this.hostElement.querySelector(`#${this.checkboxid}`);
+    if (checkbox) {
+      checkbox.indeterminate = this.indeterminate;
+    }
+  }
+  renderInputOutsideShadowRoot() {
+    var _a;
+    let input = this.hostElement.querySelector("input.hidden-" + this.checkboxid);
+    if (!input) {
+      input = this.hostElement.ownerDocument.createElement("input");
+      input.type = "hidden";
+      input.classList.add("hidden-" + this.checkboxid);
+      this.hostElement.appendChild(input);
+    }
+    input.name = (_a = this.name) !== null && _a !== void 0 ? _a : this.checkboxid;
+  }
+  render() {
+    this.renderInputOutsideShadowRoot();
+    return (h(Host, { checked: this.checked, id: this.checkboxid },
+      h("input", { type: "checkbox", id: this.checkboxid, value: this.value, name: this.name || this.checkboxid, disabled: this.disabled, checked: this.checked }),
+      h("label", { htmlFor: this.checkboxid, class: "pn-checkbox" },
+        h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" },
+          h("polyline", { class: "checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" }),
+          h("polyline", { class: "indeterminate-path", points: "4,12 20,12", "stroke-width": "3" })))));
+  }
+  static get is() { return "pn-filter-checkbox"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-filter-checkbox.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-filter-checkbox.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "any",
+      "mutable": false,
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "This will be emitted on change and input, like a native checkbox"
+      },
+      "attribute": "value",
+      "reflect": true
+    },
+    "name": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The name of the checkbox group"
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "checkboxid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "The string you put here will be what you'd make the ID of a native radio button, you can't name props \"id\" because it's reserved\nso we went with the more descriptive name \"checkboxid\", if you want to create labels for your checkbox, you will bind it to this ID"
+      },
+      "attribute": "checkboxid",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "checked": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "checked",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "indeterminate": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "indeterminate",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() { return [{
+      "name": "change",
+      "method": "handlechange",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -1,5 +1,6 @@
-import { Component, Prop, h, State, Element, Host } from "@stencil/core";
+import { Component, Prop, h, State, Element, Host, Watch } from "@stencil/core";
 import { translations } from "./translations";
+import { MarketWebContextService } from "../../../globals/MarketWebContextService";
 export class PnMarketwebSiteheader {
   constructor() {
     this.endpointPath = "/api/footer/footer";
@@ -7,27 +8,64 @@ export class PnMarketwebSiteheader {
     this.market = "se";
     /** Specifies which language we want to show (sv,da,fi,no,en) */
     this.language = "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;
     this.gotData = false;
     this.fetchingData = 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 = "";
+    }
   }
   async init() {
+    this.setTranslations();
     await this.fetchData();
   }
   setTranslations() {
-    if (translations[this.language]) {
+    if (this.language && translations[this.language]) {
       this.i18n = translations[this.language];
     }
   }
+  onLanguageChange() {
+    this.setTranslations();
+    this.fetchData();
+  }
+  onMarketChange() {
+    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);
   }
@@ -70,7 +108,7 @@ export class PnMarketwebSiteheader {
   }
   render() {
     var _a, _b, _c, _d, _e;
-    return (h(Host, null,
+    return (h(Host, { language: this.language, market: this.market, environment: this.environment },
       h("pn-site-footer", { url: (_b = (_a = this.siteDefinition) === null || _a === void 0 ? void 0 : _a.url) !== null && _b !== void 0 ? _b : "" },
         (this.gotData && ((_c = this.footerContent) === null || _c === void 0 ? void 0 : _c.columns)) ? this.footerContent.columns.map((column) => (h("pn-site-footer-col", null,
           h("h3", null, column.heading),
@@ -102,7 +140,7 @@ export class PnMarketwebSiteheader {
   static get properties() { return {
     "market": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -115,12 +153,12 @@ export class PnMarketwebSiteheader {
         "text": "Specifies which market we want to show (se,dk,fi,no,com)"
       },
       "attribute": "market",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "\"se\""
     },
     "language": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -133,9 +171,27 @@ export class PnMarketwebSiteheader {
         "text": "Specifies which language we want to show (sv,da,fi,no,en)"
       },
       "attribute": "language",
-      "reflect": false,
+      "reflect": true,
       "defaultValue": "\"sv\""
     },
+    "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",
       "mutable": false,
@@ -152,7 +208,7 @@ export class PnMarketwebSiteheader {
       },
       "attribute": "endpoint",
       "reflect": false,
-      "defaultValue": "\"\""
+      "defaultValue": "null"
     }
   }; }
   static get states() { return {
@@ -163,4 +219,11 @@ export class PnMarketwebSiteheader {
     "fetchingData": {}
   }; }
   static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "language",
+      "methodName": "onLanguageChange"
+    }, {
+      "propName": "market",
+      "methodName": "onMarketChange"
+    }]; }
 }

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

@@ -52,3 +52,19 @@ Primary.args = {
   language: 'sv',
   endpoint: 'https://com-integration.postnord.com'
 };
+
+
+const MinimalOptionsTemplate = ({ ...args }) => {
+  return `
+  <pn-marketweb-sitefooter language="sv">
+  </pn-marketweb-sitefooter>
+`;
+};
+
+
+export const MinimalOptions = MinimalOptionsTemplate.bind({});
+MinimalOptionsTemplate.args = {
+  market : "",
+  language: '',
+  endpoint: ''
+};

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

@@ -1,4 +1,4 @@
-import { Component, Prop, h, State, Element } from "@stencil/core";
+import { Component, Prop, h, State, Element, Watch } from "@stencil/core";
 import { PNLoginManager } from "./pn-marketweb-siteheader-loginmanager";
 export class PnMarketwebSiteheaderLogin {
   constructor() {
@@ -147,4 +147,11 @@ export class PnMarketwebSiteheaderLogin {
     "toggleButtonText": {}
   }; }
   static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "i18n",
+      "methodName": "init"
+    }, {
+      "propName": "loginDialog",
+      "methodName": "init"
+    }]; }
 }