@postnord/pn-marketweb-components 2.0.140 → 2.0.142

package/collection/components/navigation/pn-sidenav/pn-sidenav-link.js

@@ -1,22 +1,14 @@
-import { Component, Prop, h, State, Host, Element } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import state from "./pn-sidenav-store";
 export class PnSidenavLink {
   constructor() {
-    /** Name */
     this.name = "";
-    /** Href */
     this.href = "";
-    /** Target */
     this.target = null;
-    /** Link id */
     this.linkid = null;
-    /** Icon */
     this.icon = "";
-    /** Currently selected */
     this.current = false;
-    /** Level ID that we control toggle on */
     this.levelId = "";
-    /** Menu item is open */
     this.open = false;
     this.hasChildren = false;
   }
@@ -52,137 +44,139 @@ export class PnSidenavLink {
       "aria-expanded": ((state.openLevel + "" === this.levelId + "")) + '',
       "onClick": this.onExpandClick.bind(this)
     };
-    return (h(Host, { role: "listitem", name: this.name, href: this.href, linkid: this.linkid, current: this.current + '' },
-      h(TagName, Object.assign({}, linkAttributes, (TagName === "button" && Object.assign({}, buttonAttributes))),
-        (this.icon) ? h("pn-icon", { symbol: this.icon, color: "blue700" }) : null,
-        h("span", null, this.name),
-        (this.hasChildren && TagName === "button") ? (h("div", { class: "pn-sidenav-link-expand" }, this.open ? (h("pn-icon", { class: "first-level_icon", symbol: "angle-small-up", color: "blue700" })) :
-          (h("pn-icon", { class: "first-level_icon", symbol: "angle-small-down", color: "blue700" })))) : null),
-      (this.hasChildren && TagName === "a") ? (h("button", Object.assign({}, buttonAttributes, { class: "pn-sidenav-link-expand" }), this.open ? (h("pn-icon", { class: "first-level_icon", symbol: "angle-small-up", color: "blue700" })) :
-        (h("pn-icon", { class: "first-level_icon", symbol: "angle-small-down", color: "blue700" })))) : null,
-      h("slot", null)));
+    return (h(Host, { role: "listitem", name: this.name, href: this.href, linkid: this.linkid, current: this.current + '' }, h(TagName, Object.assign({}, linkAttributes, (TagName === "button" && Object.assign({}, buttonAttributes))), (this.icon) ? h("pn-icon", { symbol: this.icon, color: "blue700" }) : null, h("span", null, this.name), (this.hasChildren && TagName === "button") ? (h("div", { class: "pn-sidenav-link-expand" }, this.open ? (h("pn-icon", { class: "first-level_icon", symbol: "angle-small-up", color: "blue700" })) :
+      (h("pn-icon", { class: "first-level_icon", symbol: "angle-small-down", color: "blue700" })))) : null), (this.hasChildren && TagName === "a") ? (h("button", Object.assign({}, buttonAttributes, { class: "pn-sidenav-link-expand" }), this.open ? (h("pn-icon", { class: "first-level_icon", symbol: "angle-small-up", color: "blue700" })) :
+      (h("pn-icon", { class: "first-level_icon", symbol: "angle-small-down", color: "blue700" })))) : null, h("slot", null)));
   }
   static get is() { return "pn-sidenav-link"; }
-  static get originalStyleUrls() { return {
-    "$": ["pn-sidenav-link.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["pn-sidenav-link.css"]
-  }; }
-  static get properties() { return {
-    "name": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Name"
-      },
-      "attribute": "name",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "href": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Href"
-      },
-      "attribute": "href",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "target": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Target"
-      },
-      "attribute": "target",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "linkid": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Link id"
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-sidenav-link.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-sidenav-link.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name"
+        },
+        "attribute": "name",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "attribute": "linkid",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Href"
+        },
+        "attribute": "href",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Icon"
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Target"
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "attribute": "icon",
-      "reflect": false,
-      "defaultValue": "\"\""
-    },
-    "current": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "linkid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Link id"
+        },
+        "attribute": "linkid",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Currently selected"
+      "icon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Icon"
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "\"\""
       },
-      "attribute": "current",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "levelId": {},
-    "open": {},
-    "hasChildren": {}
-  }; }
+      "current": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Currently selected"
+        },
+        "attribute": "current",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "levelId": {},
+      "open": {},
+      "hasChildren": {}
+    };
+  }
   static get elementRef() { return "hostElement"; }
 }

package/collection/components/navigation/pn-sidenav/pn-sidenav-togglebutton.js

@@ -1,8 +1,7 @@
-import { Component, Prop, h, Host, Element, State } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import state from "./pn-sidenav-store";
 export class PnSidenavTogglebutton {
   constructor() {
-    /** Specifies which language we want to show navigation in (sv,da,fi,no,en) */
     this.label = "";
     this.i18n = { open: '', close: '', navLabel: '' };
   }
@@ -12,39 +11,45 @@ export class PnSidenavTogglebutton {
     body.setAttribute('data-siteheader-sidemenuopen', state.openMenu + '');
   }
   render() {
-    return (h(Host, null,
-      h("pn-button", { appearance: "light", icon: state.openMenu ? 'close-small' : 'bars', "left-icon": true, small: true, onclick: this.onClick.bind(this), label: this.label },
-        h("slot", null))));
+    return (h(Host, null, h("pn-button", { appearance: "light", icon: state.openMenu ? 'close-small' : 'bars', "left-icon": true, small: true, onclick: this.onClick.bind(this), label: this.label }, h("slot", null))));
   }
   static get is() { return "pn-sidenav-togglebutton"; }
-  static get originalStyleUrls() { return {
-    "$": ["pn-sidenav-togglebutton.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["pn-sidenav-togglebutton.css"]
-  }; }
-  static get properties() { return {
-    "label": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies which language we want to show navigation in (sv,da,fi,no,en)"
-      },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "\"\""
-    }
-  }; }
-  static get states() { return {
-    "i18n": {}
-  }; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-sidenav-togglebutton.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-sidenav-togglebutton.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies which language we want to show navigation in (sv,da,fi,no,en)"
+        },
+        "attribute": "label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "i18n": {}
+    };
+  }
   static get elementRef() { return "hostElement"; }
 }

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

@@ -1,11 +1,9 @@
-import { Component, Prop, h, Host, Listen, Element, State } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { translations } from "./translations";
 import state from "./pn-sidenav-store";
 export class PnSidenav {
   constructor() {
-    /** Specifies which language we want to show navigation in (sv,da,fi,no,en) */
     this.language = "sv";
-    /** Sets the label of the navigation (Required if multiple nav elements are on a page) */
     this.navLabel = "";
     this.i18n = { open: '', close: '', navLabel: '' };
   }
@@ -30,71 +28,78 @@ export class PnSidenav {
     state.openLevel = event.detail;
   }
   render() {
-    return (h(Host, { open: (state.openMenu == true) + '' },
-      h("slot", { name: "above" }),
-      h("nav", { class: "sidenav", "aria-label": this.navLabel },
-        h("slot", null))));
+    return (h(Host, { open: (state.openMenu == true) + '' }, h("slot", { name: "above" }), h("nav", { class: "sidenav", "aria-label": this.navLabel }, h("slot", null))));
   }
   static get is() { return "pn-sidenav"; }
-  static get originalStyleUrls() { return {
-    "$": ["pn-sidenav.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["pn-sidenav.css"]
-  }; }
-  static get properties() { return {
-    "language": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Specifies which language we want to show navigation in (sv,da,fi,no,en)"
-      },
-      "attribute": "language",
-      "reflect": false,
-      "defaultValue": "\"sv\""
-    },
-    "navLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Sets the label of the navigation (Required if multiple nav elements are on a page)"
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-sidenav.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-sidenav.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "language": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Specifies which language we want to show navigation in (sv,da,fi,no,en)"
+        },
+        "attribute": "language",
+        "reflect": false,
+        "defaultValue": "\"sv\""
       },
-      "attribute": "nav-label",
-      "reflect": false,
-      "defaultValue": "\"\""
-    }
-  }; }
-  static get states() { return {
-    "i18n": {}
-  }; }
+      "navLabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Sets the label of the navigation (Required if multiple nav elements are on a page)"
+        },
+        "attribute": "nav-label",
+        "reflect": false,
+        "defaultValue": "\"\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "i18n": {}
+    };
+  }
   static get elementRef() { return "hostElement"; }
-  static get listeners() { return [{
-      "name": "language",
-      "method": "setLanguage",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
-      "name": "openSubMenuLevelChange",
-      "method": "onOpenSubMenuLevelChange",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "language",
+        "method": "setLanguage",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "openSubMenuLevelChange",
+        "method": "onOpenSubMenuLevelChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/collection/components/navigation/pn-site-footer/pn-site-footer-col.css

@@ -41,19 +41,16 @@ pn-site-footer-col[theme=dotcom] {
 pn-site-footer-col[theme=dotcom] * {
   color: #FFFFFF;
 }
-@media screen and (min-width: 768px) and (max-width: 1023px) {
+@media screen and (min-width: 768px) {
   pn-site-footer-col[theme=dotcom] {
     width: 33%;
-    padding-left: 0.4rem;
-    padding-right: 0.4rem;
+    padding-left: 0.8rem;
+    padding-right: 0.8rem;
   }
-  pn-site-footer-col[theme=dotcom]:nth-child(1) {
-    width: 66%;
-  }
-  pn-site-footer-col[theme=dotcom]:nth-child(1), pn-site-footer-col[theme=dotcom]:nth-child(3) {
+  pn-site-footer-col[theme=dotcom]:nth-child(1), pn-site-footer-col[theme=dotcom]:nth-child(4) {
     padding-left: 0;
   }
-  pn-site-footer-col[theme=dotcom]:nth-child(5), pn-site-footer-col[theme=dotcom]:nth-child(2) {
+  pn-site-footer-col[theme=dotcom]:nth-child(3), pn-site-footer-col[theme=dotcom]:nth-child(5) {
     padding-right: 0;
   }
 }
@@ -67,6 +64,12 @@ pn-site-footer-col[theme=dotcom] * {
     width: 20%;
     padding-left: 0;
   }
+  pn-site-footer-col[theme=dotcom]:nth-child(4) {
+    padding-left: 1.6rem;
+  }
+  pn-site-footer-col[theme=dotcom]:nth-child(3) {
+    padding-right: 1.6rem;
+  }
   pn-site-footer-col[theme=dotcom]:nth-child(5) {
     padding-right: 0;
   }
@@ -112,25 +115,4 @@ pn-site-footer-col[theme=dotcom] div {
 }
 pn-site-footer-col[theme=dotcom] div p:nth-child(odd) {
   font-weight: 500;
-}
-@media screen and (min-width: 768px) and (max-width: 1023px) {
-  pn-site-footer-col[theme=dotcom] div {
-    position: relative;
-  }
-  pn-site-footer-col[theme=dotcom] div p:nth-child(1) {
-    position: absolute;
-  }
-  pn-site-footer-col[theme=dotcom] div p:nth-child(2) {
-    position: absolute;
-    top: 3.2rem;
-  }
-  pn-site-footer-col[theme=dotcom] div p:nth-child(3) {
-    position: absolute;
-    left: 50%;
-  }
-  pn-site-footer-col[theme=dotcom] div p:nth-child(4) {
-    position: absolute;
-    top: 3.2rem;
-    left: 50%;
-  }
 }