@postnord/pn-marketweb-components 2.3.11 → 2.3.13

package/collection/components/cta/pn-spotlight/pn-spotlight.js

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { Component, Element, h, Host, Prop, State } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 export class PnSpotlight {
   constructor() {
     this.heading = null;
@@ -11,79 +11,81 @@ export class PnSpotlight {
     this.addDynamic = classNames({ 'cta--dynamic': this.isDynamic });
   }
   render() {
-    return (h(Host, null,
-      h("div", { class: "pn-spotlight__container" },
-        h("slot", { name: "mobile-heading" }),
-        h("div", { class: `pn-spotlight__container__wrapper ${this.addDynamic}` },
-          h("div", { class: "pn-spotlight__container__wrapper__content" },
-            h("div", { class: "pn-spotlight__container__wrapper__content__ball" }),
-            h("slot", { name: "content" }))))));
+    return (h(Host, null, h("div", { class: "pn-spotlight__container" }, h("slot", { name: "mobile-heading" }), h("div", { class: `pn-spotlight__container__wrapper ${this.addDynamic}` }, h("div", { class: "pn-spotlight__container__wrapper__content" }, h("div", { class: "pn-spotlight__container__wrapper__content__ball" }), h("slot", { name: "content" }))))));
   }
   static get is() { return "pn-spotlight"; }
-  static get originalStyleUrls() { return {
-    "$": ["pn-spotlight.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["pn-spotlight.css"]
-  }; }
-  static get properties() { return {
-    "heading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "heading",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "preamble": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "preamble",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "isDynamic": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-spotlight.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-spotlight.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "heading",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "preamble": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "preamble",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "attribute": "is-dynamic",
-      "reflect": false,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "addDynamic": {}
-  }; }
+      "isDynamic": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-dynamic",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "addDynamic": {}
+    };
+  }
   static get elementRef() { return "hostElement"; }
 }

package/collection/components/data-visualization/pn-stats-info/pn-stats-info-data/pn-stats-info-data.js

@@ -1,21 +1,21 @@
 import { v4 as uuidv4 } from 'uuid';
-import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 import { animateValue } from './animationHelper';
 import { inViewport } from './viewIntersectionHelper';
 export class PnStatsInfoData {
   constructor() {
+    this.inViewPortCallback = (entry) => {
+      if (entry.isIntersecting) {
+        this.hasBeenShown = true;
+      }
+    };
     this.data = 0;
     this.unit = null;
     this.preamble = null;
-    this.duration = 1000; //ms;
+    this.duration = 1000;
     this.index = null;
     this.hasBeenShown = false;
     this.compId = null;
-    this.inViewPortCallback = (entry) => {
-      if (entry.isIntersecting) {
-        this.hasBeenShown = true;
-      }
-    };
   }
   generateUniqueId() {
     return uuidv4();
@@ -30,12 +30,7 @@ export class PnStatsInfoData {
     }
   }
   render() {
-    return (h(Host, null,
-      h("div", { class: "pn-stats-info-data__container" },
-        h("div", { class: "pn-stats-info-data__container__content" },
-          h("div", { class: "pn-stats-info-data__container__content__data", id: `pn-stats-info-data-${this.compId}-${this.index}` }),
-          this.unit && h("div", { class: "pn-stats-info-data__container__content__unit" }, this.unit)),
-        h("div", { class: "pn-stats-info-data__container__content__preamble" }, this.preamble))));
+    return (h(Host, null, h("div", { class: "pn-stats-info-data__container" }, h("div", { class: "pn-stats-info-data__container__content" }, h("div", { class: "pn-stats-info-data__container__content__data", id: `pn-stats-info-data-${this.compId}-${this.index}` }), this.unit && h("div", { class: "pn-stats-info-data__container__content__unit" }, this.unit)), h("div", { class: "pn-stats-info-data__container__content__preamble" }, this.preamble))));
   }
   componentDidRender() {
     const observer = new IntersectionObserver(entries => inViewport(entries, 'is-inViewport', this.inViewPortCallback));
@@ -43,110 +38,120 @@ export class PnStatsInfoData {
     observer.observe(obj);
   }
   static get is() { return "pn-stats-info-data"; }
-  static get originalStyleUrls() { return {
-    "$": ["pn-stats-info-data.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["pn-stats-info-data.css"]
-  }; }
-  static get properties() { return {
-    "data": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "data",
-      "reflect": false,
-      "defaultValue": "0"
-    },
-    "unit": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "unit",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "preamble": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "preamble",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "duration": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-stats-info-data.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-stats-info-data.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "data": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "data",
+        "reflect": false,
+        "defaultValue": "0"
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "unit": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "unit",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "attribute": "duration",
-      "reflect": false,
-      "defaultValue": "1000"
-    },
-    "index": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "preamble": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "preamble",
+        "reflect": false,
+        "defaultValue": "null"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "duration": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "duration",
+        "reflect": false,
+        "defaultValue": "1000"
       },
-      "attribute": "index",
-      "reflect": false,
-      "defaultValue": "null"
-    }
-  }; }
-  static get states() { return {
-    "hasBeenShown": {},
-    "compId": {}
-  }; }
-  static get watchers() { return [{
-      "propName": "hasBeenShown",
-      "methodName": "watchStateHandlder"
-    }]; }
+      "index": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "index",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasBeenShown": {},
+      "compId": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "hasBeenShown",
+        "methodName": "watchStateHandlder"
+      }];
+  }
 }

package/collection/components/data-visualization/pn-stats-info/pn-stats-info.js

@@ -1,7 +1,8 @@
-import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
+import { h, Host } from '@stencil/core';
 const mockStringArray = '[ { "preamble": "Million parcels", "data": 226, "unit": null, "duration": 1000 }, { "preamble": "Million parcels", "data": 226, "unit": null, "duration": 1000 },{"preamble": "carbon dioxide emissions since 2009", "data": -44, "unit": "%", "duration": 2000 }, { "preamble": "Million parcels", "data": 226, "unit": null, "duration": 1000 }, {"preamble": "carbon dioxide emissions since 2009", "data": -44, "unit": "%", "duration": 2000 }, { "preamble": "Million parcels", "data": 226, "unit": null, "duration": 1000 }]';
 export class PnStatsInfo {
   constructor() {
+    this.heading = undefined;
     this.dataArray = mockStringArray;
     this.backgroundUrl = null;
     this.myParsedArray = JSON.parse(this.dataArray);
@@ -11,85 +12,88 @@ export class PnStatsInfo {
       this.myParsedArray = JSON.parse(newValue);
   }
   render() {
-    return (h(Host, null,
-      h("div", { class: "pn-stats-info__container" },
-        h("div", { class: "pn-stats-info__container__map", style: { backgroundImage: `url(${this.backgroundUrl})` } }),
-        h("div", { class: "pn-stats-info-image-container" },
-          h("slot", { name: "illustration" })),
-        h("div", { class: "pn-stats-info__container__content", style: { backgroundImage: `url(${this.backgroundUrl})` } },
-          h("h3", { class: "pn-stats-info__container__content__heading" }, this.heading),
-          h("div", { class: "pn-stats-info__container__content__data" }, this.myParsedArray &&
-            this.myParsedArray.map((stats, index) => {
-              return h("pn-stats-info-data", { index: index, data: stats.data, unit: stats.unit, preamble: stats.preamble, duration: stats.duration });
-            }))))));
+    return (h(Host, null, h("div", { class: "pn-stats-info__container" }, h("div", { class: "pn-stats-info__container__map", style: { backgroundImage: `url(${this.backgroundUrl})` } }), h("div", { class: "pn-stats-info-image-container" }, h("slot", { name: "illustration" })), h("div", { class: "pn-stats-info__container__content", style: { backgroundImage: `url(${this.backgroundUrl})` } }, h("h3", { class: "pn-stats-info__container__content__heading" }, this.heading), h("div", { class: "pn-stats-info__container__content__data" }, this.myParsedArray &&
+      this.myParsedArray.map((stats, index) => {
+        return h("pn-stats-info-data", { index: index, data: stats.data, unit: stats.unit, preamble: stats.preamble, duration: stats.duration });
+      }))))));
   }
   static get is() { return "pn-stats-info"; }
-  static get originalStyleUrls() { return {
-    "$": ["pn-stats-info.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["pn-stats-info.css"]
-  }; }
-  static get properties() { return {
-    "heading": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "heading",
-      "reflect": false
-    },
-    "dataArray": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "data-array",
-      "reflect": false,
-      "defaultValue": "mockStringArray"
-    },
-    "backgroundUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-stats-info.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-stats-info.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "heading",
+        "reflect": false
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "dataArray": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "data-array",
+        "reflect": false,
+        "defaultValue": "mockStringArray"
       },
-      "attribute": "background-url",
-      "reflect": false,
-      "defaultValue": "null"
-    }
-  }; }
-  static get states() { return {
-    "myParsedArray": {}
-  }; }
-  static get watchers() { return [{
-      "propName": "dataArray",
-      "methodName": "parseMyArrayProp"
-    }]; }
+      "backgroundUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "background-url",
+        "reflect": false,
+        "defaultValue": "null"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "myParsedArray": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "dataArray",
+        "methodName": "parseMyArrayProp"
+      }];
+  }
 }