@postnord/pn-marketweb-components 1.0.4 → 1.0.8

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

@@ -0,0 +1,236 @@
+import { Component, h, Prop, State, Watch } 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";
+import { state } from "./pn-find-service-and-price-store";
+export class PnfindServiceAndPrice {
+  constructor() {
+    this.source = "https://com-integration.postnord.com/globalassets/global/prices/sv-se-findprice.xlsx";
+    this.language = "sv";
+    this.market = "se";
+    this.filteredItems = [];
+    this.postagetype = { value: "", name: "", icon: "" };
+    this.weight = { value: 0, name: "" };
+    this.weightvalue = 0;
+    this.deliveryscope = { value: "", name: "", icon: "" };
+    this.sourceData = { types: [], data: [] };
+  }
+  componentWillLoad() {
+    this.setState();
+    this.getDataSource();
+    // window.setTimeout(() => {
+    //   this.postagetype = postagetypes[0];
+    //   this.deliveryscope = deliveryscopes[this.postagetype.value][0];
+    //   this.weight = weights[this.postagetype.value][0];
+    //   this.weightvalue = this.weight.value;
+    // }, 500)
+  }
+  async getDataSource() {
+    const cacheBusting = `?cache=${Math.floor(Math.random() * (10000 - 1) + 1)}`;
+    const req = await fetch(this.source + cacheBusting);
+    const reqbody = await req.blob();
+    try {
+      const convertedData = await convertFileFromStream(reqbody);
+      this.sourceData = convertedData;
+      this.filterItems();
+    }
+    catch (e) {
+      console.log('Unable to parse data');
+    }
+  }
+  setState() {
+    if (this.market) {
+      state.market = markets[this.market];
+    }
+    if (this.language && translations[this.language]) {
+      state.i18n = translations[this.language];
+    }
+  }
+  filterItems() {
+    var _a;
+    // this.debug = `Postagetype: ${this.postagetype.value}. <br/>Weight: ${ this.weight.value }`;
+    if (!((_a = this.sourceData) === null || _a === void 0 ? void 0 : _a.data)) {
+      console.log('Data has not yet been loaded');
+      return;
+    }
+    if (!this.postagetype) {
+      return;
+    }
+    const typeData = this.sourceData.data.filter((x) => x.what === this.postagetype.value);
+    if (!this.deliveryscope) {
+      return;
+    }
+    const deliveryScopeData = typeData.filter((x) => x.deliveryscope === this.deliveryscope.value);
+    if (!this.weight || !this.weight.value) {
+      return;
+    }
+    // For letters we use grams. Otherwise we use KG
+    const comparisonWeight = (this.weight.abbreviation.toLocaleLowerCase() === "kg" && this.postagetype.value === 'letter') ? this.weight.value * 1000 : this.weight.value;
+    let weightFilteredData = deliveryScopeData.filter(x => x.maxweight === comparisonWeight);
+    // In parcels the maxwidths don't necessarily start at 1kg so we fetch any type below the user selected value
+    if (weightFilteredData.length === 0) {
+      weightFilteredData = deliveryScopeData.filter(x => x.maxweight >= comparisonWeight);
+      if (weightFilteredData.length > 0) {
+        // We reverse the result array since the map will take the last unique item instead of the first
+        const uniqueWeightOptions = [...new Map(weightFilteredData.reverse().map(item => [item["id"], item])).values()];
+        if (uniqueWeightOptions.length > 0) {
+          weightFilteredData = uniqueWeightOptions;
+        }
+      }
+    }
+    console.log('weightFilteredData', weightFilteredData);
+    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));
+  }
+  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": {}
+      },
+      "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-find-service-and-price/runconvert.js

@@ -0,0 +1,2 @@
+const convert = require("./libs/convertnode.js");
+convert();

package/collection/components/widgets/pn-product-pricelist/data.js

@@ -0,0 +1,53 @@
+const postagetypes = [
+  { name: "Brev",   value: "letter", illustration: "letterbox-reply-letter-plants" },
+  { name: "Paket",  value: "parcel", illustration: "tracking" }
+];
+
+const deliveryscopes = {
+  "letter": [
+    { name: "Sweden",   value: "sweden", illustration: "letterboxes" },
+    { name: "Abroad",   value: "abroad", illustration: "character-box-letters-globe" },
+    
+  ],
+  "parcel": [
+    { name: "Sweden",   value: "sweden", illustration: "letterboxes" },
+    { name: "Within Europe", value:"withineurope", illustration: "character-box-letters-globe" },
+    { name: "Outside Europe", value:"outsideeurope", illustration: "discover" },
+  ]
+};
+
+const weights = {
+  "letter": [
+    { name: "50g",   abbreviation: 'g', value: 50 },
+    { name: "100g",  abbreviation: 'g', value: 100 },
+    { name: "250g",  abbreviation: 'g', value: 250 },
+    { name: "500g",  abbreviation: 'g', value: 500 },
+    { name: "1kg",   abbreviation: 'kg', value: 1 },
+    { name: "2kg",   abbreviation: 'kg', value: 2 },
+  ],
+  "parcel": [
+    { name: "1kg",   abbreviation: 'kg', value: 1 },
+    { name: "2kg",   abbreviation: 'kg', value: 2 },
+    { name: "3kg",   abbreviation: 'kg', value: 3 },
+    { name: "4kg",   abbreviation: 'kg', value: 4 },
+    { name: "5kg",   abbreviation: 'kg', value: 5 },
+    { name: "6kg",   abbreviation: 'kg', value: 6 },
+    { name: "7Kg",   abbreviation: 'kg', value: 7 },
+    { name: "8kg",   abbreviation: 'kg', value: 8 },
+    { name: "9kg",   abbreviation: 'kg', value: 9 },
+    { name: "10kg",  abbreviation: 'kg', value: 10 },
+    { name: "11kg",  abbreviation: 'kg', value: 11 },
+    { name: "12kg",  abbreviation: 'kg', value: 12 },
+    { name: "13kg",  abbreviation: 'kg', value: 13 },
+    { name: "14kg",  abbreviation: 'kg', value: 14 },
+    { name: "15kg",  abbreviation: 'kg', value: 15 },
+    { name: "16kg",  abbreviation: 'kg', value: 16 },
+    { name: "17kg",  abbreviation: 'kg', value: 17 },
+    { name: "18kg",  abbreviation: 'kg', value: 18 },
+    { name: "20kg",  abbreviation: 'kg', value: 20 },    
+  ]
+};
+
+
+
+export { postagetypes, weights, deliveryscopes};

package/collection/components/widgets/pn-product-pricelist/libs/convert.js

@@ -0,0 +1,43 @@
+import readXlsxFile from 'read-excel-file';
+
+async function convertFileFromStream(stream, filterColumnNames = ["what", "deliveryscope"]) {
+    const toFilterValue = (x) => x.toLowerCase().replace(/\s+/g, '');
+    const sheets = await readXlsxFile(stream, { getSheets: true })
+    let dataRows = [];
+    let sheetsData = await Promise.all(sheets.map(async (sheet) => { return await readXlsxFile(stream, { sheet: sheet.name }) }));
+
+    let types = {};
+    sheetsData.forEach(sheetData => {
+        const firstRow = sheetData.shift().map(x => toFilterValue(x));
+        // Set up column for adding options
+        firstRow.forEach((col, i) => {
+            if (typeof types[col] === "undefined" && filterColumnNames.includes(col)) {
+                types[col] = [];
+            }
+        });
+        sheetData.forEach((row, rowindex) => {
+            const dataRow = {};
+            firstRow.forEach(async (col, i) => {
+                const rowVal = row[i];
+                dataRow[col] = rowVal;
+                // Add to types options
+                if (filterColumnNames.includes(col)) {
+                    const filterVal = toFilterValue(rowVal);
+                    dataRow[col] = filterVal;
+                    if (!types[col].includes(filterVal)) {
+                        types[col].push(filterVal);
+                    }
+                }
+            });
+            dataRows.push(dataRow);
+        });
+    });
+
+    const fileData = {
+        "types": types,
+        "data": dataRows
+    };
+    return fileData;
+}
+
+export { convertFileFromStream };

package/collection/components/widgets/pn-product-pricelist/libs/convertnode.js

@@ -0,0 +1,58 @@
+const fs = require("fs-extra");
+const path = require("path");
+const readXlsxFile = require('read-excel-file/node');
+
+async function getFiles(dirpath = "./data") {
+    const allFiles = await fs.readdir(dirpath);
+    const xslxFiles = allFiles.filter(x => (x.indexOf('.xlsx') !== -1 && x.indexOf('~') !== 0));
+    return xslxFiles.map((file) => path.join(dirpath, file));
+}
+
+async function convertFile(filepath) {
+    const toFilterValue = (x) => x.toLowerCase().replace(/\s+/g, '');
+    const outputFilename = filepath.substring(0, filepath.lastIndexOf('.') + 1) + 'json';
+    console.log(`Reading file "${filepath}" and converting to "${outputFilename}"`);
+    const sheets = await readXlsxFile(filepath, { getSheets: true })
+    let dataRows = [];
+    let sheetsData = await Promise.all(sheets.map(async (sheet) => { return await readXlsxFile(filepath, { sheet: sheet.name }) })); //await readXlsxFile(filepath, { sheet: sheet.name });
+    const filterColumnNames = ["what", "deliveryscope"];
+    let types = {};
+    sheetsData.forEach(sheetData => {
+        const firstRow = sheetData.shift().map(x => toFilterValue(x));
+        // Set up column for adding options
+        firstRow.forEach(async (col, i) => {
+            if (typeof types[col] === "undefined" && filterColumnNames.includes(col)) {
+                types[col] = [];
+            }
+        });
+        sheetData.forEach((row, rowindex) => {
+            const dataRow = {};
+            firstRow.forEach(async (col, i) => {
+                const rowVal = row[i];
+                dataRow[col] = rowVal;
+                // Add to types options
+                if (filterColumnNames.includes(col)) {
+                    const filterVal = toFilterValue(rowVal);
+                    dataRow[col] = filterVal;
+                    if (!types[col].includes(filterVal)) {
+                        types[col].push(filterVal);
+                    }
+                }
+            });
+            dataRows.push(dataRow);
+        });
+    });
+    const dataFile = filepath;
+    const fileData = {
+        "file": filepath,
+        "types": types,
+        "data": dataRows
+    };
+    console.log(`Stored ${dataRows.length} rows from ${sheetsData.length} sheets. ${Object.keys(types).length} filter types identified`)
+    fs.writeJsonSync(outputFilename, fileData)
+}
+
+async function convert(dirpath = "./data") {
+    const files = await getFiles(dirpath);
+    files.forEach(convertFile);
+}

package/collection/components/widgets/pn-product-pricelist/pn-product-pricelist-result.js

@@ -0,0 +1,101 @@
+import { Component, h, Prop, Host, State, Watch } from "@stencil/core";
+import { state } from "./pn-product-pricelist-store";
+export class PnFindProductPricelistResult {
+  constructor() {
+    this.item = null;
+    this.shownitems = [];
+    this.weightText = "";
+  }
+  componentWillLoad() {
+    this.composeItems();
+  }
+  composeItems() {
+    this.shownitems = [];
+    if (this.item.pricestamps) {
+      this.shownitems.push(Object.assign(Object.assign({}, this.item), { priceagent: null, pricesenddirect: null }));
+    }
+    if (this.item.priceagent) {
+      this.shownitems.push(Object.assign(Object.assign({}, this.item), { pricestamps: null, pricesenddirect: null }));
+    }
+    if (this.item.pricesenddirect) {
+      this.shownitems.push(Object.assign(Object.assign({}, this.item), { pricestamps: null, priceagent: null }));
+    }
+    // Parcels are always in KG. Letter KG must be converted from grams
+    this.weightText = (this.item.what === "parcel") ? this.item.maxweight + 'kg' :
+      (this.item.what === "letter" && this.item.maxweight > 999) ? Math.round(this.item.maxweight / 1000) + " kg" : this.item.maxweight + " g";
+  }
+  render() {
+    return (h(Host, null, this.shownitems.map((item) => (h("pn-product-tile", null,
+      h("pn-illustration", { slot: "illustration", illustration: item.illustration }),
+      h("div", { slot: "content" },
+        h("div", { class: "content" },
+          h("h3", null, item.name),
+          (item.description) ? (h("div", { class: "description" }, item.description)) : null,
+          (item.info) ? (h("div", { class: "description" }, item.info)) : null)),
+      item.maxweight ? (h("pn-product-tile-info", { label: state.i18n.maxweightlabel, text: this.weightText })) : null,
+      item.maximummeasurements ? (h("pn-product-tile-info", { label: state.i18n.maxmeasurementlabel, text: item.maximummeasurements })) : null,
+      item.pricestamps ? (h("pn-product-tile-price", { slot: "price", label: state.i18n.stampshopcta, amount: item.pricestamps + '', currency: state.market.currency })) : null,
+      item.priceagent ? (h("pn-product-tile-price", { slot: "price", label: "", amount: item.priceagent + '', currency: state.market.currency, url: "https://shop.postnord.se/ebutik/default.aspx" })) : null,
+      item.pricesenddirect ? (h("pn-product-tile-price", { slot: "price", label: state.i18n.senddirectcta, amount: item.pricesenddirect + '', currency: state.market.currency, url: "https://portal.postnord.com/skickadirekt/" })) : null,
+      item.note ? (h("small", { slot: "note" },
+        h("p", null, item.note))) : null)))));
+  }
+  static get is() { return "pn-product-pricelist-result"; }
+  static get originalStyleUrls() { return {
+    "$": ["pn-product-pricelist-result.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["pn-product-pricelist-result.css"]
+  }; }
+  static get properties() { return {
+    "item": {
+      "type": "unknown",
+      "mutable": true,
+      "complexType": {
+        "original": "ProductPriceItem",
+        "resolved": "ProductPriceItem",
+        "references": {
+          "ProductPriceItem": {
+            "location": "import",
+            "path": "../../../globals/shared/productprice/product-price-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "null"
+    },
+    "shownitems": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "ProductPriceItem[]",
+        "resolved": "ProductPriceItem[]",
+        "references": {
+          "ProductPriceItem": {
+            "location": "import",
+            "path": "../../../globals/shared/productprice/product-price-types"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "defaultValue": "[]"
+    }
+  }; }
+  static get states() { return {
+    "weightText": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "item",
+      "methodName": "composeItems"
+    }]; }
+}

package/collection/components/widgets/pn-product-pricelist/pn-product-pricelist-store.js

@@ -0,0 +1,17 @@
+import { createStore } from "@stencil/store";
+// Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
+const { state, onChange } = createStore({
+  i18n: {
+    maxweightlabel: '',
+    weightlabel: '',
+    maxmeasurementlabel: '',
+    sizeheading: '',
+    senddirectcta: '',
+    stampshopcta: '',
+  },
+  market: {
+    currency: ""
+  }
+});
+export { state, onChange };
+export default state;

package/collection/components/widgets/pn-product-pricelist/pn-product-pricelist-translations.js

@@ -0,0 +1,56 @@
+export const translations = {
+  'sv': {
+    'maxweightlabel': 'Maxvikt',
+    'weightlabel': 'Vikt',
+    'maxmeasurementlabel': 'Maxvolym',
+    'sizeheading': 'Hur mycket väger det?',
+    'senddirectcta': 'Köp frakt via Skicka Direkt',
+    'stampshopcta': 'Köp frimärken via vår webshop',
+  },
+  'en': {
+    'maxweightlabel': 'Max weight',
+    'weightlabel': 'Weight',
+    'maxmeasurementlabel': 'Maximum measurement',
+    'sizeheading': 'How much does it weigh?',
+    'senddirectcta': 'Buy shipping in Send Direct',
+    'stampshopcta': 'Order home stamps from the webshop',
+  },
+  'da': {
+    'maxweightlabel': 'Max vægt',
+    'weightlabel': 'Vægt',
+    'maxmeasurementlabel': 'Maks. Volumen',
+    'sizeheading': 'How much does it weigh?',
+    'senddirectcta': 'Buy shipping in Send Direct',
+    'stampshopcta': 'Order home stamps from the webshop',
+  },
+  'no': {
+    'maxweightlabel': 'Maks vekt',
+    'weightlabel': 'Vekt',
+    'maxmeasurementlabel': 'Maks volum',
+    'sizeheading': 'How much does it weigh?',
+    'senddirectcta': 'Buy shipping in Send Direct',
+    'stampshopcta': 'Order home stamps from the webshop',
+  },
+  'fi': {
+    'maxweightlabel': 'Max paino',
+    'weightlabel': 'Piano',
+    'maxmeasurementlabel': 'Max äänenvoimakkuus',
+    'sizeheading': 'How much does it weigh?',
+    'senddirectcta': 'Buy shipping in Send Direct',
+    'stampshopcta': 'Order home stamps from the webshop',
+  }
+};
+export const markets = {
+  'se': {
+    "currency": "kr",
+  },
+  'dk': {
+    "currency": "dk",
+  },
+  'fi': {
+    "currency": " €",
+  },
+  'no': {
+    "currency": "kr",
+  }
+};

package/collection/components/widgets/pn-product-pricelist/pn-product-pricelist-types.js

@@ -0,0 +1 @@
+export {};

package/collection/components/widgets/pn-product-pricelist/pn-product-pricelist.css

@@ -0,0 +1,55 @@
+pn-product-pricelist pn-spinner {
+  margin: 1em auto;
+}
+pn-product-pricelist h2,
+pn-product-pricelist .heading {
+  text-align: center;
+  font-size: 1.5em;
+  line-height: 1.1;
+  font-weight: bold;
+  margin-bottom: 1rem;
+}
+pn-product-pricelist .content,
+pn-product-pricelist .weightselection {
+  max-width: 50em;
+  margin: 0 auto 1em;
+}
+pn-product-pricelist .weightoption {
+  display: flex;
+  gap: 1em;
+}
+pn-product-pricelist .weightoption-input {
+  width: 5em;
+  position: relative;
+}
+pn-product-pricelist .weightoption-input input::-webkit-outer-spin-button,
+pn-product-pricelist .weightoption-input input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+pn-product-pricelist .weightoption-input-abbreviation {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  right: 1.2em;
+  margin-top: 1.55rem;
+  font-weight: 500;
+}
+pn-product-pricelist .weightoption-range {
+  flex-grow: 1;
+  align-self: flex-end;
+  position: relative;
+  top: 0.5em;
+}
+pn-product-pricelist .weightoption-range input {
+  width: calc(100% - 1.5em);
+}
+pn-product-pricelist .weightoption-range datalist {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.75em;
+}
+pn-product-pricelist .resultlist:not([data-list-count="0"]) {
+  margin-top: 2em;
+}