@postnord/pn-marketweb-components 1.0.18 → 1.0.23

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

@@ -109,7 +109,6 @@ export class PnMarketwebSiteheader {
   render() {
     var _a, _b, _c, _d, _e;
     return (h(Host, { language: this.language, market: this.market, environment: this.environment },
-      h("button", { onClick: () => { this.language = "en"; } }, "en"),
       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),

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

@@ -1,9 +1,10 @@
-import { Component, Prop, h, State, Element, Watch } from "@stencil/core";
+import { Component, Prop, h, State, Element, Watch, Event } from "@stencil/core";
 import { PNLoginManager } from "./pn-marketweb-siteheader-loginmanager";
 export class PnMarketwebSiteheaderLogin {
   constructor() {
     /** Specifies which endpoint domain we should load from */
     this.endpoint = "";
+    this.emitEvents = true;
     // Login dialog
     this.loginDialog = null;
     this.loginManager = null;
@@ -12,11 +13,12 @@ export class PnMarketwebSiteheaderLogin {
   }
   componentWillLoad() {
     this.loginManager = new PNLoginManager({ endpoint: this.endpoint, eventTarget: this.hostElement });
+    this.hostElement["loginmanager"] = this.loginManager;
+    this.hostElement.addEventListener(this.loginManager.events.loginstatechange, this.onLoginStateChange.bind(this));
     this.init();
   }
   async init() {
     this.toggleButtonText = this.loginDialog.loginMenuLinkText;
-    this.hostElement.addEventListener(this.loginManager.events.loginstatechange, this.onLoginStateChange.bind(this));
     this.loginManager.init();
     this.setToggleButtonText();
   }
@@ -35,8 +37,11 @@ export class PnMarketwebSiteheaderLogin {
     }
   }
   onLoginStateChange(e) {
-    this.loggedIn = e.detail;
-    this.setToggleButtonText();
+    if (this.loggedIn !== e.detail && this.emitEvents) {
+      this.loggedIn = e.detail;
+      this.loginStateChange.emit({ loggedIn: this.loggedIn, token: this.loginManager.getToken() });
+      this.setToggleButtonText();
+    }
   }
   render() {
     var _a, _b, _c;
@@ -64,7 +69,7 @@ export class PnMarketwebSiteheaderLogin {
           h("div", null,
             h("ul", null, this.loginDialog.loggedInLinks.map((link) => {
               const isLogoutLink = link.href.indexOf('logout');
-              const href = (isLogoutLink) ? this.loginManager.getLogoutUrl(link.href.replace('logout', '')) : link.href;
+              const href = (isLogoutLink) ? this.loginManager.getLogoutUrl(link.href.replace('logout', '').replace('http://window.location.href/?', '').replace('https://window.location.href/?', '')) : link.href;
               return (h("li", null,
                 h("a", Object.assign({ href: href }, (link.openInNewWindow && { target: '_blank' })),
                   h("pn-button", { appearance: (link.primaryLinkApperance ? "dark" : "light"), onClick: () => { if (isLogoutLink) {
@@ -119,6 +124,24 @@ export class PnMarketwebSiteheaderLogin {
       "attribute": "i-1-8n",
       "reflect": false
     },
+    "emitEvents": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "emit-events",
+      "reflect": false,
+      "defaultValue": "true"
+    },
     "loginDialog": {
       "type": "unknown",
       "mutable": true,
@@ -146,6 +169,22 @@ export class PnMarketwebSiteheaderLogin {
     "loggedIn": {},
     "toggleButtonText": {}
   }; }
+  static get events() { return [{
+      "method": "loginStateChange",
+      "name": "loginStateChange",
+      "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": "i18n",

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

@@ -110,10 +110,11 @@ class PNLoginManager {
     const params = new URLSearchParams(window.location.search);
     if (params.get("oneTimeCode")) {
       const oneTimeCode = params.get("oneTimeCode");
-      this.getToken(oneTimeCode);
-      const currentHref = window.location.href;
-      const paramPrefix = (currentHref.indexOf('?oneTimeCode') !== -1) ? "?" : "&";
-      history.replaceState({}, document.querySelector('title').innerText, currentHref.replace(`${paramPrefix}oneTimeCode=${oneTimeCode}`, ''));
+      this.exchangeToken(oneTimeCode).then(() => {
+        const currentHref = window.location.href;
+        const paramPrefix = (currentHref.indexOf('?oneTimeCode') !== -1) ? "?" : "&";
+        history.replaceState({}, document.querySelector('title').innerText, currentHref.replace(`${paramPrefix}oneTimeCode=${oneTimeCode}`, ''));
+      });
     }
   }
   async fetchUserInfo() {
@@ -149,7 +150,10 @@ class PNLoginManager {
     this.store.remove(this.keys.expire);
     this.store.remove(this.keys.expireDate);
   }
-  async getToken(oneTimeCode) {
+  getToken() {
+    return this.store.get(this.keys.token);
+  }
+  async exchangeToken(oneTimeCode) {
     this.clearUserData();
     const response = await fetch(`${this.getBaseUrl()}${this.endpoints.tokenExchangeEndpoint}?oneTimeCode=${oneTimeCode}`);
     const { token } = await response.json();

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

@@ -22,6 +22,10 @@ export class PnMarketwebSiteheader {
     this.hideSearch = false;
     /** Hides the login if set to true*/
     this.hideLogin = false;
+    /** Forward session to backend */
+    this.sessionForward = false;
+    /** Event based only language switch */
+    this.spaMode = false;
     this.gotData = false;
     this.fetchingData = false;
     // Menu state
@@ -62,11 +66,6 @@ export class PnMarketwebSiteheader {
       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();
@@ -77,6 +76,9 @@ export class PnMarketwebSiteheader {
       this.i18n = translations[this.language];
     }
   }
+  onLanguageSelectorChange(e) {
+    this.language = e.detail;
+  }
   onLanguageChange() {
     this.setTranslations();
     this.changeLanguage.emit(this.language);
@@ -96,9 +98,12 @@ export class PnMarketwebSiteheader {
     const fetchUrl = `${endpointBase}${this.endpointPath}?market=${this.market}&language=${this.language}`;
     const response = await fetch(fetchUrl);
     const data = await response.json();
-    this.setStateFromData(data);
+    await this.setStateFromData(data);
   }
   getLanguageVersionUrl(item) {
+    if (this.spaMode) {
+      return null;
+    }
     const alternativeTag = document.querySelector(`link[rel="alternate"][hreflang="${item.twoLetterISOLanguageName}"]`);
     if (alternativeTag) {
       return alternativeTag.getAttribute('href');
@@ -107,7 +112,7 @@ export class PnMarketwebSiteheader {
     // Add trailing slash to domain if it's missing
     return siteUrl + ((siteUrl.lastIndexOf("/") !== siteUrl.length - 1) ? "/" : "") + item.twoLetterISOLanguageName;
   }
-  setStateFromData(data) {
+  async setStateFromData(data) {
     if (typeof data !== "object") {
       console.warn('Data was not valid', data);
     }
@@ -131,10 +136,26 @@ export class PnMarketwebSiteheader {
     // Set language selector
     this.languageSelector = data.languageSelectorViewModel;
     this.loginDialog = data.loginViewModel;
+    await this.spaModeAdjustments();
     this.gotData = true;
     this.fetchingData = true;
     window.setTimeout(() => { this.checkMenuOverflow(); }, 100);
   }
+  async spaModeAdjustments() {
+    if (!this.spaMode) {
+      return;
+    }
+    return;
+  }
+  onLoginStateChange(e) {
+    var _a, _b;
+    if (((_a = e.detail) === null || _a === void 0 ? void 0 : _a.loggedIn) && ((_b = e.detail) === null || _b === void 0 ? void 0 : _b.token) && this.sessionForward) {
+      try {
+        fetch('/api/userprofile/sync?token=' + e.detail.token);
+      }
+      catch (e) { }
+    }
+  }
   promotedItemId(item) {
     return "promo-" + item.linkText.replace(/[^A-Za-z0-9.\\\/]/igm, "");
   }
@@ -204,7 +225,7 @@ export class PnMarketwebSiteheader {
                         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 && this.loginDialog && !this.hideLogin) && (h("pn-marketweb-siteheader-login", { emitEvents: false, 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 &&
@@ -367,6 +388,42 @@ export class PnMarketwebSiteheader {
       "attribute": "hide-login",
       "reflect": true,
       "defaultValue": "false"
+    },
+    "sessionForward": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Forward session to backend"
+      },
+      "attribute": "session-forward",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "spaMode": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Event based only language switch"
+      },
+      "attribute": "spa-mode",
+      "reflect": false,
+      "defaultValue": "false"
     }
   }; }
   static get states() { return {
@@ -421,6 +478,18 @@ export class PnMarketwebSiteheader {
       "methodName": "onMarketChange"
     }]; }
   static get listeners() { return [{
+      "name": "setLanguage",
+      "method": "onLanguageSelectorChange",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "loginStateChange",
+      "method": "onLoginStateChange",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
       "name": "resize",
       "method": "handleResize",
       "target": "window",

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

@@ -48,7 +48,8 @@ const PrimaryTemplate = ({ ...args }) => {
   hide-site-selector="false"
   hide-language-selector="false"
   hide-search="false"
-  hide-login="false">
+  hide-login="false"
+  session-forward="true">
 </pn-marketweb-siteheader>
 <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
@@ -74,11 +75,25 @@ const MinimalOptionsTemplate = ({ ...args }) => {
 `;
 };
 
-
-
 export const MinimalOptions = MinimalOptionsTemplate.bind({});
 MinimalOptionsTemplate.args = {
   market : "",
   language: '',
   endpoint: ''
 };
+
+const SPAModeOptionsTemplate = ({ ...args }) => {
+  return `
+  <div style="background:#ddd;min-height:100vh;">
+  <pn-marketweb-siteheader language="sv" spa-mode="true">
+  </pn-marketweb-siteheader>
+</div>
+`;
+};
+
+export const SPAModeOptions = SPAModeOptionsTemplate.bind({});
+SPAModeOptions.args = {
+  market : "",
+  language: '',
+  endpoint: ''
+};

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

@@ -1,4 +1,4 @@
-import { Component, Prop, h, State, Host, Watch, Element } from "@stencil/core";
+import { Component, Prop, h, State, Host, Watch, Element, Event } from "@stencil/core";
 import { translations } from "./translations";
 export class PnlanguageSelector {
   constructor() {
@@ -41,6 +41,7 @@ export class PnlanguageSelector {
   onSetCurrentLanguage(option) {
     this.value = option.code;
     this.selectedLanguageName = option.name;
+    this.setLanguage.emit(this.value);
   }
   setTranslations() {
     if (translations[this.value]) {
@@ -77,7 +78,7 @@ export class PnlanguageSelector {
   static get properties() { return {
     "value": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -99,6 +100,22 @@ export class PnlanguageSelector {
     "options": {},
     "i18n": {}
   }; }
+  static get events() { return [{
+      "method": "setLanguage",
+      "name": "setLanguage",
+      "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": "value",

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/custom-elements/index.d.ts

@@ -8,6 +8,12 @@ export const PnChoiceButton: {
   new (): PnChoiceButton;
 };
 
+interface PnFilterCheckbox extends Components.PnFilterCheckbox, HTMLElement {}
+export const PnFilterCheckbox: {
+  prototype: PnFilterCheckbox;
+  new (): PnFilterCheckbox;
+};
+
 interface PnFilterSearch extends Components.PnFilterSearch, HTMLElement {}
 export const PnFilterSearch: {
   prototype: PnFilterSearch;