npm - @postnord/pn-marketweb-components - Versions diffs - 2.1.9 → 2.2.0 - Mend

@postnord/pn-marketweb-components 2.1.9 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (918) hide show

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

@@ -1,21 +1,21 @@
 import { v4 as uuidv4 } from 'uuid';
-import { h, Host } from '@stencil/core';
+import { Component, h, Host, Prop, State, Watch } 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;
+    this.duration = 1000; //ms;
     this.index = null;
     this.hasBeenShown = false;
     this.compId = null;
+    this.inViewPortCallback = (entry) => {
+      if (entry.isIntersecting) {
+        this.hasBeenShown = true;
+      }
+    };
   }
   generateUniqueId() {
     return uuidv4();
@@ -30,7 +30,12 @@ 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}` }), 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}` }),
+          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));
@@ -38,120 +43,110 @@ 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"
+  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": {}
       },
-      "unit": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "unit",
-        "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": "data",
+      "reflect": false,
+      "defaultValue": "0"
+    },
+    "unit": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
       },
-      "duration": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "duration",
-        "reflect": false,
-        "defaultValue": "1000"
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
       },
-      "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"
-      }];
-  }
+      "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": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "duration",
+      "reflect": false,
+      "defaultValue": "1000"
+    },
+    "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 CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h, Host } from '@stencil/core';
+import { Component, h, Host, Prop, State, Watch } 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() {
@@ -12,89 +12,86 @@ 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,
-        "defaultValue": "'Heading'"
+  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": {}
       },
-      "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"
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
       },
-      "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"
-      }];
-  }
+      "attribute": "heading",
+      "reflect": false,
+      "defaultValue": "'Heading'"
+    },
+    "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": {}
+      },
+      "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"
+    }]; }
 }

package/collection/components/input/pn-bonus-progressbar/pn-bonus-progressbar-level.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h, Host } from "@stencil/core";
+import { Component, Prop, h, Host, State, Element } from "@stencil/core";
 export class PnBonusProgressbarLevel {
   constructor() {
     this.current = false;
@@ -25,102 +25,96 @@ export class PnBonusProgressbarLevel {
     return `${this.value.toLocaleString('sv-SE', { maximumFractionDigits: 0 })} ${this.currency}`;
   }
   render() {
-    return (h(Host, { style: { 'left': `${this.visualpercentage}%` } }, h("div", { class: "progressbar-level-percentage" }, this.bonuspercentage), h("div", { class: "progressbar-level-value" }, this.formatValue())));
+    return (h(Host, { style: { 'left': `${this.visualpercentage}%` } },
+      h("div", { class: "progressbar-level-percentage" }, this.bonuspercentage),
+      h("div", { class: "progressbar-level-value" }, this.formatValue())));
   }
   static get is() { return "pn-bonus-progressbar-level"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["pn-bonus-progressbar-level.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["pn-bonus-progressbar-level.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "current": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "current",
-        "reflect": true,
-        "defaultValue": "false"
+  static get originalStyleUrls() { return {
+    "$": ["pn-bonus-progressbar-level.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-bonus-progressbar-level.css"]
+  }; }
+  static get properties() { return {
+    "current": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
       },
-      "value": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "value",
-        "reflect": true,
-        "defaultValue": "0"
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
       },
-      "bonuspercentage": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "bonuspercentage",
-        "reflect": true,
-        "defaultValue": "\"\""
+      "attribute": "current",
+      "reflect": true,
+      "defaultValue": "false"
+    },
+    "value": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
       },
-      "visualpercentage": {
-        "type": "number",
-        "mutable": true,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "visualpercentage",
-        "reflect": true,
-        "defaultValue": "0"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "percentage": {},
-      "max": {},
-      "min": {},
-      "currency": {}
-    };
-  }
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "value",
+      "reflect": true,
+      "defaultValue": "0"
+    },
+    "bonuspercentage": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "bonuspercentage",
+      "reflect": true,
+      "defaultValue": "\"\""
+    },
+    "visualpercentage": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "visualpercentage",
+      "reflect": true,
+      "defaultValue": "0"
+    }
+  }; }
+  static get states() { return {
+    "percentage": {},
+    "max": {},
+    "min": {},
+    "currency": {}
+  }; }
   static get elementRef() { return "hostElement"; }
 }