@postnord/pn-marketweb-components 2.1.8 → 2.1.9

package/collection/components/widgets/pn-find-service-and-price/pn-find-service-and-price.js

@@ -1,4 +1,4 @@
-import { Component, h, Prop, State, Watch } from "@stencil/core";
+import { h } from "@stencil/core";
 import { translations, markets } from "./pn-find-service-and-price-translations";
 import { postagetypes, weights, deliveryscopes } from "./data.js";
 import { convertFileFromStream } from "../../../globals/shared/productprice/convert.js";
@@ -81,155 +81,140 @@ export class PnfindServiceAndPrice {
     this.filteredItems = weightFilteredData;
   }
   render() {
-    return (h("div", null,
-      h("div", { class: "findprice-form" },
-        (state.i18n.componentheading) ? (h("h2", null, state.i18n.componentheading)) : null,
-        h("div", { class: "postagetypes" }, postagetypes.map((postagetype) => (h("pn-choice-button", { choiceid: postagetype.value, value: postagetype.value, name: "postagetype", type: "radio", checked: postagetype.value === this.postagetype.value, onChange: () => {
-            this.postagetype = postagetypes.filter(x => x.value === postagetype.value)[0];
-            this.deliveryscope = { value: "", name: "", icon: "" };
-            this.weight = { value: 0, name: "" };
-            this.weightvalue = this.weight.value;
-          } },
-          h("pn-illustration", { illustration: postagetype.illustration }),
-          " ",
-          postagetype.name)))),
-        this.postagetype.value && deliveryscopes[this.postagetype.value] ? (h("div", null,
-          (state.i18n.deliveryscopeheading) ? (h("div", { class: "heading" }, state.i18n.deliveryscopeheading)) : null,
-          h("div", { class: "deliveryscope" }, deliveryscopes[this.postagetype.value].map((deliveryscope) => (h("pn-choice-button", { choiceid: this.postagetype.value + deliveryscope.value, value: deliveryscope.value, name: "deliveryscope", type: "radio", checked: deliveryscope.value === this.deliveryscope.value, onChange: () => {
-              this.deliveryscope = deliveryscopes[this.postagetype.value].filter(x => x.value === deliveryscope.value)[0];
-              if (this.weight.value === 0) {
-                this.weight = weights[this.postagetype.value][0];
-                this.weightvalue = this.weight.value;
-              }
-            } },
-            h("pn-illustration", { illustration: deliveryscope.illustration }),
-            " ",
-            deliveryscope.name)))))) : null,
-        (this.postagetype.value && weights[this.postagetype.value] && this.deliveryscope.value) ? (h("div", null,
-          (state.i18n.sizeheading) ? (h("div", { class: "heading" }, state.i18n.sizeheading)) : null,
-          h("div", { class: "weightoption" },
-            h("div", { class: "weightoption-input" },
-              h("pn-input", { inputid: "weightvalue", name: "weightvalue", type: "number", label: state.i18n.weightlabel, value: this.weightvalue, onChange: (e) => {
-                  if (e && e.target && e.target.value) {
-                    const weightNum = parseInt(e.target.value, 10);
-                    if (!isNaN(weightNum)) {
-                      let matchingWeights = weights[this.postagetype.value].filter((x) => {
-                        let weightInGrams = (x.abbreviation === "kg") ? x.value * 1000 : x.value;
-                        return weightInGrams >= weightNum;
-                      });
-                      if (matchingWeights && matchingWeights.length > 0) {
-                        this.weight = matchingWeights[0];
-                        this.weightvalue = this.weight.value;
-                      }
-                    }
-                  }
-                } }),
-              h("span", { class: "weightoption-input-abbreviation" }, this.weight.abbreviation)),
-            h("div", { class: "weightoption-range" },
-              h("input", { type: "range", id: "weightrange", name: "weightrange", list: "weightlist", value: (!this.weight.value) ? 0 : weights[this.postagetype.value].findIndex((x) => x.value === this.weightvalue), onChange: (e) => {
-                  const value = e.target.value;
-                  this.weight = weights[this.postagetype.value][value];
-                  this.weightvalue = this.weight.value;
-                }, min: "0", 
-                // max={ weights[this.postagetype.value][weights[this.postagetype.value].length - 1].value }
-                max: weights[this.postagetype.value].length - 1 }),
-              h("datalist", { id: "weightlist" }, weights[this.postagetype.value].map((weight, weightindex) => {
-                let labelText = weight.name;
-                if (weights[this.postagetype.value].length > 6) {
-                  labelText = (weightindex % 5 === 0 || weightindex === 0 || weightindex === weights[this.postagetype.value].length - 1) ? weight.name : '';
-                }
-                return (h("option", Object.assign({ value: weightindex }, (labelText ? { label: labelText } : {}))));
-              })))))) : null),
-      (this.filteredItems && this.filteredItems.length > 0) ? (h("div", { class: "resultlist" },
-        (state.i18n.resultlistheading) ? (h("div", { class: "heading" }, state.i18n.resultlistheading)) : null,
-        this.filteredItems.map((item) => (h("div", null,
-          h("pn-find-service-and-price-result", { item: item })))))) : null));
+    return (h("div", null, h("div", { class: "findprice-form" }, (state.i18n.componentheading) ? (h("h2", null, state.i18n.componentheading)) : null, h("div", { class: "postagetypes" }, postagetypes.map((postagetype) => (h("pn-choice-button", { choiceid: postagetype.value, value: postagetype.value, name: "postagetype", type: "radio", checked: postagetype.value === this.postagetype.value, onChange: () => {
+        this.postagetype = postagetypes.filter(x => x.value === postagetype.value)[0];
+        this.deliveryscope = { value: "", name: "", icon: "" };
+        this.weight = { value: 0, name: "" };
+        this.weightvalue = this.weight.value;
+      } }, h("pn-illustration", { illustration: postagetype.illustration }), " ", postagetype.name)))), this.postagetype.value && deliveryscopes[this.postagetype.value] ? (h("div", null, (state.i18n.deliveryscopeheading) ? (h("div", { class: "heading" }, state.i18n.deliveryscopeheading)) : null, h("div", { class: "deliveryscope" }, deliveryscopes[this.postagetype.value].map((deliveryscope) => (h("pn-choice-button", { choiceid: this.postagetype.value + deliveryscope.value, value: deliveryscope.value, name: "deliveryscope", type: "radio", checked: deliveryscope.value === this.deliveryscope.value, onChange: () => {
+        this.deliveryscope = deliveryscopes[this.postagetype.value].filter(x => x.value === deliveryscope.value)[0];
+        if (this.weight.value === 0) {
+          this.weight = weights[this.postagetype.value][0];
+          this.weightvalue = this.weight.value;
+        }
+      } }, h("pn-illustration", { illustration: deliveryscope.illustration }), " ", deliveryscope.name)))))) : null, (this.postagetype.value && weights[this.postagetype.value] && this.deliveryscope.value) ? (h("div", null, (state.i18n.sizeheading) ? (h("div", { class: "heading" }, state.i18n.sizeheading)) : null, h("div", { class: "weightoption" }, h("div", { class: "weightoption-input" }, h("pn-input", { inputid: "weightvalue", name: "weightvalue", type: "number", label: state.i18n.weightlabel, value: this.weightvalue, onChange: (e) => {
+        if (e && e.target && e.target.value) {
+          const weightNum = parseInt(e.target.value, 10);
+          if (!isNaN(weightNum)) {
+            let matchingWeights = weights[this.postagetype.value].filter((x) => {
+              let weightInGrams = (x.abbreviation === "kg") ? x.value * 1000 : x.value;
+              return weightInGrams >= weightNum;
+            });
+            if (matchingWeights && matchingWeights.length > 0) {
+              this.weight = matchingWeights[0];
+              this.weightvalue = this.weight.value;
+            }
+          }
+        }
+      } }), h("span", { class: "weightoption-input-abbreviation" }, this.weight.abbreviation)), h("div", { class: "weightoption-range" }, h("input", { type: "range", id: "weightrange", name: "weightrange", list: "weightlist", value: (!this.weight.value) ? 0 : weights[this.postagetype.value].findIndex((x) => x.value === this.weightvalue), onChange: (e) => {
+        const value = e.target.value;
+        this.weight = weights[this.postagetype.value][value];
+        this.weightvalue = this.weight.value;
+      }, min: "0",
+      // max={ weights[this.postagetype.value][weights[this.postagetype.value].length - 1].value }
+      max: weights[this.postagetype.value].length - 1 }), h("datalist", { id: "weightlist" }, weights[this.postagetype.value].map((weight, weightindex) => {
+      let labelText = weight.name;
+      if (weights[this.postagetype.value].length > 6) {
+        labelText = (weightindex % 5 === 0 || weightindex === 0 || weightindex === weights[this.postagetype.value].length - 1) ? weight.name : '';
+      }
+      return (h("option", Object.assign({ value: weightindex }, (labelText ? { label: labelText } : {}))));
+    })))))) : null), (this.filteredItems && this.filteredItems.length > 0) ? (h("div", { class: "resultlist" }, (state.i18n.resultlistheading) ? (h("div", { class: "heading" }, state.i18n.resultlistheading)) : null, this.filteredItems.map((item) => (h("div", null, h("pn-find-service-and-price-result", { item: item })))))) : null));
   }
   static get is() { return "pn-find-service-and-price"; }
-  static get originalStyleUrls() { return {
-    "$": ["pn-find-service-and-price.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["pn-find-service-and-price.css"]
-  }; }
-  static get properties() { return {
-    "source": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "source",
-      "reflect": false,
-      "defaultValue": "\"https://com-integration.postnord.com/globalassets/global/prices/sv-se-findprice.xlsx\""
-    },
-    "language": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "language",
-      "reflect": false,
-      "defaultValue": "\"sv\""
-    },
-    "market": {
-      "type": "string",
-      "mutable": true,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-find-service-and-price.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-find-service-and-price.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "source": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "source",
+        "reflect": false,
+        "defaultValue": "\"https://com-integration.postnord.com/globalassets/global/prices/sv-se-findprice.xlsx\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "language": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "language",
+        "reflect": false,
+        "defaultValue": "\"sv\""
       },
-      "attribute": "market",
-      "reflect": false,
-      "defaultValue": "\"se\""
-    }
-  }; }
-  static get states() { return {
-    "filteredItems": {},
-    "postagetype": {},
-    "weight": {},
-    "weightvalue": {},
-    "deliveryscope": {},
-    "sourceData": {}
-  }; }
-  static get watchers() { return [{
-      "propName": "market",
-      "methodName": "setState"
-    }, {
-      "propName": "language",
-      "methodName": "setState"
-    }, {
-      "propName": "postagetype",
-      "methodName": "filterItems"
-    }, {
-      "propName": "deliveryscope",
-      "methodName": "filterItems"
-    }, {
-      "propName": "weightvalue",
-      "methodName": "filterItems"
-    }]; }
+      "market": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "market",
+        "reflect": false,
+        "defaultValue": "\"se\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "filteredItems": {},
+      "postagetype": {},
+      "weight": {},
+      "weightvalue": {},
+      "deliveryscope": {},
+      "sourceData": {}
+    };
+  }
+  static get watchers() {
+    return [{
+        "propName": "market",
+        "methodName": "setState"
+      }, {
+        "propName": "language",
+        "methodName": "setState"
+      }, {
+        "propName": "postagetype",
+        "methodName": "filterItems"
+      }, {
+        "propName": "deliveryscope",
+        "methodName": "filterItems"
+      }, {
+        "propName": "weightvalue",
+        "methodName": "filterItems"
+      }];
+  }
 }

package/collection/components/widgets/pn-pex-pricefinder/pn-pex-pricefinder.js

@@ -1,12 +1,9 @@
-import { Component, h, Host, Element, Prop, State, Listen } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { translations } from "./translations";
 export class PnPexPricefinder {
   constructor() {
-    /** Specifies which language we want to show component in (sv,da,fi,no,en) */
     this.language = "sv";
-    /** Currency (Kr, €)*/
     this.currency = "Kr";
-    /** API Url */
     this.apiUrl = "/api/pex/order";
     this.i18n = translations.sv;
     this.fromzip = null;
@@ -90,107 +87,95 @@ export class PnPexPricefinder {
     console.error('onFetchError(error', error);
   }
   render() {
-    return (h(Host, null,
-      h("div", { class: "pex-pricefinder-top" },
-        h("pn-illustration", { illustration: "PEX-truck" }),
-        h("h2", null, this.i18n.heading)),
-      h("form", { method: "get", action: "", class: "pex-pricefinder-form", onSubmit: this.onSubmit.bind(this) },
-        h("fieldset", null,
-          h("div", null,
-            h("pn-input", { type: "number", label: this.i18n.labelFrom, inputid: "fromzip", name: "fromzip", placeholder: this.i18n.zipPlaceholder, required: true, value: this.fromzip }),
-            h("pn-input", { type: "number", label: this.i18n.labelTo, inputid: "tozip", name: "tozip", placeholder: this.i18n.zipPlaceholder, required: true, value: this.tozip }))),
-        h("fieldset", null,
-          h("div", null,
-            h("pn-input", { type: "number", label: this.i18n.labelWeight, inputid: "weight", name: "weight", placeholder: this.i18n.weightPlaceholder, required: true, value: this.weight }),
-            h("div", { class: "datepicker" },
-              h("label", { htmlFor: "when" }, this.i18n.labelWhen),
-              h("pn-marketweb-input", { inputid: "when", name: "when", type: "datetime-local", min: (new Date()).toISOString().split('T')[0], value: this.when })))),
-        h("fieldset", null,
-          h("div", null,
-            h("pn-button", { type: "submit" }, this.i18n.submitButtonText)))),
-      this.response ? (h("div", { class: "pex-pricefinder-response" },
-        h("strong", null,
-          this.response.data.value,
-          " ",
-          this.currency))) : null));
+    return (h(Host, null, h("div", { class: "pex-pricefinder-top" }, h("pn-illustration", { illustration: "PEX-truck" }), h("h2", null, this.i18n.heading)), h("form", { method: "get", action: "", class: "pex-pricefinder-form", onSubmit: this.onSubmit.bind(this) }, h("fieldset", null, h("div", null, h("pn-input", { type: "number", label: this.i18n.labelFrom, inputid: "fromzip", name: "fromzip", placeholder: this.i18n.zipPlaceholder, required: true, value: this.fromzip }), h("pn-input", { type: "number", label: this.i18n.labelTo, inputid: "tozip", name: "tozip", placeholder: this.i18n.zipPlaceholder, required: true, value: this.tozip }))), h("fieldset", null, h("div", null, h("pn-input", { type: "number", label: this.i18n.labelWeight, inputid: "weight", name: "weight", placeholder: this.i18n.weightPlaceholder, required: true, value: this.weight }), h("div", { class: "datepicker" }, h("label", { htmlFor: "when" }, this.i18n.labelWhen), h("pn-marketweb-input", { inputid: "when", name: "when", type: "datetime-local", min: (new Date()).toISOString().split('T')[0], value: this.when })))), h("fieldset", null, h("div", null, h("pn-button", { type: "submit" }, this.i18n.submitButtonText)))), this.response ? (h("div", { class: "pex-pricefinder-response" }, h("strong", null, this.response.data.value, " ", this.currency))) : null));
   }
   static get is() { return "pn-pex-pricefinder"; }
-  static get originalStyleUrls() { return {
-    "$": ["pn-pex-pricefinder.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["pn-pex-pricefinder.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 component in (sv,da,fi,no,en)"
-      },
-      "attribute": "language",
-      "reflect": false,
-      "defaultValue": "\"sv\""
-    },
-    "currency": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Currency (Kr, \u20AC)"
-      },
-      "attribute": "currency",
-      "reflect": false,
-      "defaultValue": "\"Kr\""
-    },
-    "apiUrl": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-pex-pricefinder.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-pex-pricefinder.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 component in (sv,da,fi,no,en)"
+        },
+        "attribute": "language",
+        "reflect": false,
+        "defaultValue": "\"sv\""
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "API Url"
+      "currency": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Currency (Kr, \u20AC)"
+        },
+        "attribute": "currency",
+        "reflect": false,
+        "defaultValue": "\"Kr\""
       },
-      "attribute": "api-url",
-      "reflect": false,
-      "defaultValue": "\"/api/pex/order\""
-    }
-  }; }
-  static get states() { return {
-    "i18n": {},
-    "fromzip": {},
-    "tozip": {},
-    "weight": {},
-    "when": {},
-    "response": {}
-  }; }
+      "apiUrl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "API Url"
+        },
+        "attribute": "api-url",
+        "reflect": false,
+        "defaultValue": "\"/api/pex/order\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "i18n": {},
+      "fromzip": {},
+      "tozip": {},
+      "weight": {},
+      "when": {},
+      "response": {}
+    };
+  }
   static get elementRef() { return "hostElement"; }
-  static get listeners() { return [{
-      "name": "language",
-      "method": "setLanguage",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "language",
+        "method": "setLanguage",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }