@postnord/pn-marketweb-components 1.0.7 → 1.0.8

package/cjs/loader.cjs.js

@@ -14,7 +14,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["pn-marketweb-siteheader.cjs",[[4,"pn-marketweb-siteheader",{"market":[1],"language":[1],"endpoint":[1],"hideSiteSelector":[1028,"hide-site-selector"],"hideLanguageSelector":[1028,"hide-language-selector"],"hideSearch":[1028,"hide-search"],"hideLogin":[1028,"hide-login"],"i18n":[32],"gotData":[32],"fetchingData":[32],"menuItems":[32],"siteDefinition":[32],"search":[32],"siteSelector":[32],"languageSelector":[32],"loginDialog":[32],"minimizeSearch":[32]},[[9,"resize","handleResize"]]]]],["pn-find-service-and-price.cjs",[[0,"pn-find-service-and-price",{"source":[1],"language":[1025],"market":[1025],"filteredItems":[32],"postagetype":[32],"weight":[32],"weightvalue":[32],"deliveryscope":[32],"sourceData":[32]}]]],["pn-product-pricelist.cjs",[[4,"pn-product-pricelist",{"source":[1],"language":[1025],"market":[1025],"productid":[1],"filteredItems":[32],"sourceData":[32],"gotData":[32],"loading":[32]}]]],["pn-site-footer_2.cjs",[[4,"pn-site-footer",{"url":[1]}],[4,"pn-site-footer-col"]]],["pn-marketweb-sitefooter.cjs",[[0,"pn-marketweb-sitefooter",{"market":[1],"language":[1],"endpoint":[1],"siteDefinition":[32],"footerContent":[32],"i18n":[32],"gotData":[32],"fetchingData":[32]}]]],["pn-product-pricelist-result.cjs",[[0,"pn-product-pricelist-result",{"item":[16],"shownitems":[16]}]]],["pn-choice-button_2.cjs",[[0,"pn-find-service-and-price-result",{"item":[1040],"shownitems":[16],"weightText":[32]}],[4,"pn-choice-button",{"value":[520],"name":[1],"choiceid":[1],"type":[1],"disabled":[4],"checked":[4],"indeterminate":[1028]},[[0,"change","handlechange"]]]]],["pn-mainnav-link.cjs",[[4,"pn-mainnav-link",{"name":[1],"href":[1],"target":[1],"linkid":[1],"levelId":[32],"open":[32],"hasChildren":[32]}]]],["pn-language-selector_9.cjs",[[4,"pn-mainnav-level",{"level":[32],"levelId":[32],"isOpen":[32],"parentName":[32],"parentHref":[32],"parentLinkId":[32],"listCount":[32],"alignment":[32]}],[4,"pn-language-selector",{"value":[1537],"selectedLanguageName":[32],"options":[32],"i18n":[32]}],[0,"pn-language-selector-option",{"name":[1],"code":[1],"url":[1],"selected":[4],"currentLanguage":[1,"current-language"]}],[4,"pn-mainnav",{"market":[1],"language":[1],"navigationId":[1,"navigation-id"],"openMenu":[1028,"open-menu"]},[[0,"language","setLanguage"],[0,"market","setMarket"],[0,"menuLanguageChange","onLanguageChange"],[0,"setmenuopen","setOpenMenu"],[0,"openMenuLevelChange","onOpenMenuLevelChange"]]],[4,"pn-mainnav-list",{"heading":[1],"linkCount":[32]}],[0,"pn-marketweb-siteheader-login",{"endpoint":[1],"i18n":[8,"i-1-8n"],"loginDialog":[1040],"loginManager":[32],"loggedIn":[32],"toggleButtonText":[32]}],[0,"pn-marketweb-siteheader-search",{"i18n":[8,"i-1-8n"],"showOnlyLink":[1028,"show-only-link"],"hideSearch":[1028,"hide-search"],"search":[1040]}],[4,"pn-site-selector",{"buttontext":[1],"heading":[1],"language":[1],"i18n":[32]}],[0,"pn-site-selector-item",{"url":[1],"heading":[1],"description":[1],"newwindow":[4]}]]],["pn-product-tile_3.cjs",[[4,"pn-product-tile"],[0,"pn-product-tile-info",{"label":[1],"text":[1],"icon":[1]}],[0,"pn-product-tile-price",{"label":[1],"amount":[1],"currency":[1],"url":[1]}]]]], options);
+  return index.bootstrapLazy([["pn-marketweb-siteheader.cjs",[[4,"pn-marketweb-siteheader",{"market":[1],"language":[1],"endpoint":[1],"hideSiteSelector":[1028,"hide-site-selector"],"hideLanguageSelector":[1028,"hide-language-selector"],"hideSearch":[1028,"hide-search"],"hideLogin":[1028,"hide-login"],"i18n":[32],"gotData":[32],"fetchingData":[32],"menuItems":[32],"siteDefinition":[32],"search":[32],"siteSelector":[32],"languageSelector":[32],"loginDialog":[32],"minimizeSearch":[32]},[[9,"resize","handleResize"]]]]],["pn-find-service-and-price.cjs",[[0,"pn-find-service-and-price",{"source":[1],"language":[1025],"market":[1025],"filteredItems":[32],"postagetype":[32],"weight":[32],"weightvalue":[32],"deliveryscope":[32],"sourceData":[32]}]]],["pn-product-pricelist.cjs",[[4,"pn-product-pricelist",{"source":[1],"language":[1025],"market":[1025],"productid":[1],"filteredItems":[32],"sourceData":[32],"gotData":[32],"loading":[32],"postagetype":[32],"weight":[32],"weightvalue":[32]}]]],["pn-site-footer_2.cjs",[[4,"pn-site-footer",{"url":[1]}],[4,"pn-site-footer-col"]]],["pn-marketweb-sitefooter.cjs",[[0,"pn-marketweb-sitefooter",{"market":[1],"language":[1],"endpoint":[1],"siteDefinition":[32],"footerContent":[32],"i18n":[32],"gotData":[32],"fetchingData":[32]}]]],["pn-product-pricelist-result.cjs",[[0,"pn-product-pricelist-result",{"item":[1040],"shownitems":[16],"weightText":[32]}]]],["pn-choice-button_2.cjs",[[0,"pn-find-service-and-price-result",{"item":[1040],"shownitems":[16],"weightText":[32]}],[4,"pn-choice-button",{"value":[520],"name":[1],"choiceid":[1],"type":[1],"disabled":[4],"checked":[4],"indeterminate":[1028]},[[0,"change","handlechange"]]]]],["pn-mainnav-link.cjs",[[4,"pn-mainnav-link",{"name":[1],"href":[1],"target":[1],"linkid":[1],"levelId":[32],"open":[32],"hasChildren":[32]}]]],["pn-language-selector_9.cjs",[[4,"pn-mainnav-level",{"level":[32],"levelId":[32],"isOpen":[32],"parentName":[32],"parentHref":[32],"parentLinkId":[32],"listCount":[32],"alignment":[32]}],[4,"pn-language-selector",{"value":[1537],"selectedLanguageName":[32],"options":[32],"i18n":[32]}],[0,"pn-language-selector-option",{"name":[1],"code":[1],"url":[1],"selected":[4],"currentLanguage":[1,"current-language"]}],[4,"pn-mainnav",{"market":[1],"language":[1],"navigationId":[1,"navigation-id"],"openMenu":[1028,"open-menu"]},[[0,"language","setLanguage"],[0,"market","setMarket"],[0,"menuLanguageChange","onLanguageChange"],[0,"setmenuopen","setOpenMenu"],[0,"openMenuLevelChange","onOpenMenuLevelChange"]]],[4,"pn-mainnav-list",{"heading":[1],"linkCount":[32]}],[0,"pn-marketweb-siteheader-login",{"endpoint":[1],"i18n":[8,"i-1-8n"],"loginDialog":[1040],"loginManager":[32],"loggedIn":[32],"toggleButtonText":[32]}],[0,"pn-marketweb-siteheader-search",{"i18n":[8,"i-1-8n"],"showOnlyLink":[1028,"show-only-link"],"hideSearch":[1028,"hide-search"],"search":[1040]}],[4,"pn-site-selector",{"buttontext":[1],"heading":[1],"language":[1],"i18n":[32]}],[0,"pn-site-selector-item",{"url":[1],"heading":[1],"description":[1],"newwindow":[4]}]]],["pn-product-tile_3.cjs",[[4,"pn-product-tile"],[0,"pn-product-tile-info",{"label":[1],"text":[1],"icon":[1]}],[0,"pn-product-tile-price",{"label":[1],"amount":[1],"currency":[1],"url":[1]}]]]], options);
   });
 };
 

package/cjs/pn-choice-button_2.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b58d2618.js');
-const pnFindServiceAndPriceStore = require('./pn-find-service-and-price-store-7ced0e29.js');
+const pnFindServiceAndPriceStore = require('./pn-find-service-and-price-store-56d8b760.js');
 require('./index-f472d191.js');
 
 const pnChoiceButtonCss = "pn-choice-button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;display:inline-block;background:#fff;position:relative;margin:0.2em 0.4em}pn-choice-button input{opacity:0;position:absolute;top:0;left:0;pointer-events:none;margin:0;width:100%;height:100%}pn-choice-button label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0.4rem 0.8rem;border:0.1rem solid #D3CECB;color:#005D92;font-weight:500;border-radius:0.8rem;text-align:center;cursor:pointer;-webkit-transition:background 0.2s, -webkit-box-shadow 0.1s;transition:background 0.2s, -webkit-box-shadow 0.1s;transition:box-shadow 0.1s, background 0.2s;transition:box-shadow 0.1s, background 0.2s, -webkit-box-shadow 0.1s}pn-choice-button label pn-illustration{display:inline-block;width:3rem;height:3rem;margin-right:0.9rem}pn-choice-button>input:checked+label.pn-choice-button{background:#E0F8FF;color:#005D92;border-color:#005D92;-webkit-box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13)}pn-choice-button>input:indeterminate+label.pn-choice-button{background:#FFFFFF;color:#005D92}pn-choice-button>input:hover+label.pn-choice-button{background:#E0F8FF}pn-choice-button>input:focus+label.pn-choice-button,pn-choice-button>input:active+label.pn-choice-button{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92}pn-choice-button>input:active+label.pn-choice-button{background:#8EDDF9}pn-choice-button>input:disabled+label.pn-choice-button{background-color:#D3CECB}pn-choice-button>input:checked+label.pn-choice-button:hover{background:#8EDDF9}pn-choice-button>input:checked+label.pn-choice-button:active{background:#8EDDF9;border:0.1rem solid #00A0D6}";
@@ -66,7 +66,7 @@ const PnfindServiceAndPriceResult = class {
       (this.item.what === "letter" && this.item.maxweight > 999) ? Math.round(this.item.maxweight / 1000) + " kg" : this.item.maxweight + " g";
   }
   render() {
-    return (index.h(index.Host, null, this.shownitems.map((item) => (index.h("pn-product-tile", null, index.h("pn-illustration", { slot: "illustration", illustration: item.illustration }), index.h("div", { slot: "content" }, index.h("div", { class: "content" }, index.h("h3", null, item.name), (item.description) ? (index.h("div", { class: "description" }, item.description)) : null, (item.info) ? (index.h("div", { class: "description" }, item.info)) : null)), item.maxweight ? (index.h("pn-product-tile-info", { label: pnFindServiceAndPriceStore.state.i18n.maxweightlabel, text: this.weightText })) : null, item.maximummeasurements ? (index.h("pn-product-tile-info", { label: pnFindServiceAndPriceStore.state.i18n.maxmeasurementlabel, text: item.maximummeasurements })) : null, item.pricestamps ? (index.h("pn-product-tile-price", { slot: "price", label: "With stamps", amount: item.pricestamps + '', currency: pnFindServiceAndPriceStore.state.market.currency })) : null, item.priceagent ? (index.h("pn-product-tile-price", { slot: "price", label: "Service point", amount: item.priceagent + '', currency: pnFindServiceAndPriceStore.state.market.currency, url: "https://shop.postnord.se/ebutik/default.aspx" })) : null, item.pricesenddirect ? (index.h("pn-product-tile-price", { slot: "price", label: "Send direct", amount: item.pricesenddirect + '', currency: pnFindServiceAndPriceStore.state.market.currency, url: "https://portal.postnord.com/skickadirekt/" })) : null, item.info ? (index.h("small", { slot: "note" }, index.h("p", null, item.note))) : null)))));
+    return (index.h(index.Host, null, this.shownitems.map((item) => (index.h("pn-product-tile", null, index.h("pn-illustration", { slot: "illustration", illustration: item.illustration }), index.h("div", { slot: "content" }, index.h("div", { class: "content" }, index.h("h3", null, item.name), (item.description) ? (index.h("div", { class: "description" }, item.description)) : null, (item.info) ? (index.h("div", { class: "description" }, item.info)) : null)), item.maxweight ? (index.h("pn-product-tile-info", { label: pnFindServiceAndPriceStore.state.i18n.maxweightlabel, text: this.weightText })) : null, item.maximummeasurements ? (index.h("pn-product-tile-info", { label: pnFindServiceAndPriceStore.state.i18n.maxmeasurementlabel, text: item.maximummeasurements })) : null, item.pricestamps ? (index.h("pn-product-tile-price", { slot: "price", label: pnFindServiceAndPriceStore.state.i18n.stampshopcta, amount: item.pricestamps + '', currency: pnFindServiceAndPriceStore.state.market.currency })) : null, item.priceagent ? (index.h("pn-product-tile-price", { slot: "price", label: "", amount: item.priceagent + '', currency: pnFindServiceAndPriceStore.state.market.currency, url: "https://shop.postnord.se/ebutik/default.aspx" })) : null, item.pricesenddirect ? (index.h("pn-product-tile-price", { slot: "price", label: pnFindServiceAndPriceStore.state.i18n.senddirectcta, amount: item.pricesenddirect + '', currency: pnFindServiceAndPriceStore.state.market.currency, url: "https://portal.postnord.com/skickadirekt/" })) : null, item.note ? (index.h("small", { slot: "note" }, index.h("p", null, item.note))) : null)))));
   }
   static get watchers() { return {
     "item": ["composeItems"]

package/cjs/{pn-find-service-and-price-store-7ced0e29.js → pn-find-service-and-price-store-56d8b760.js}

@@ -11,7 +11,9 @@ const { state, onChange } = index.createStore({
     resultlistheading: '',
     weightlabel: '',
     maxweightlabel: '',
-    maxmeasurementlabel: ''
+    maxmeasurementlabel: '',
+    senddirectcta: '',
+    stampshopcta: '',
   },
   market: {
     currency: ""

package/cjs/pn-find-service-and-price.cjs.entry.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b58d2618.js');
 const convert = require('./convert-57b3dd5e.js');
-const pnFindServiceAndPriceStore = require('./pn-find-service-and-price-store-7ced0e29.js');
+const pnFindServiceAndPriceStore = require('./pn-find-service-and-price-store-56d8b760.js');
 require('./index-f472d191.js');
 
 const translations = {
@@ -16,6 +16,8 @@ const translations = {
     'weightlabel': 'Vikt',
     'maxweightlabel': 'Maxvikt',
     'maxmeasurementlabel': 'Maxvolym',
+    'senddirectcta': 'Köp frakt via Skicka Direkt',
+    'stampshopcta': 'Köp frimärken via vår webshop',
   },
   'en': {
     'componentheading': 'What do you want to send?',
@@ -25,6 +27,8 @@ const translations = {
     'weightlabel': 'Weight',
     'maxweightlabel': 'Max weight',
     'maxmeasurementlabel': 'Maximum measurement',
+    'senddirectcta': 'Buy shipping in Send Direct',
+    'stampshopcta': 'Order home stamps from the webshop',
   },
   'da': {
     'componentheading': 'Vad vill du skicka?',
@@ -34,6 +38,8 @@ const translations = {
     'weightlabel': 'Vægt',
     'maxweightlabel': 'Max vægt',
     'maxmeasurementlabel': 'Maks. Volumen',
+    'senddirectcta': 'Buy shipping in Send Direct',
+    'stampshopcta': 'Order home stamps from the webshop',
   },
   'no': {
     'componentheading': 'Vad vill du skicka?',
@@ -43,6 +49,8 @@ const translations = {
     'weightlabel': 'Vekt',
     'maxweightlabel': 'Maks vekt',
     'maxmeasurementlabel': 'Maks volum',
+    'senddirectcta': 'Buy shipping in Send Direct',
+    'stampshopcta': 'Order home stamps from the webshop',
   },
   'fi': {
     'componentheading': 'Vad vill du skicka?',
@@ -52,6 +60,8 @@ const translations = {
     'weightlabel': 'Paino',
     'maxweightlabel': 'Max paino',
     'maxmeasurementlabel': 'Max äänenvoimakkuus',
+    'senddirectcta': 'Buy shipping in Send Direct',
+    'stampshopcta': 'Order home stamps from the webshop',
   }
 };
 const markets = {
@@ -119,7 +129,7 @@ const weights = {
   ]
 };
 
-const pnFindServiceAndPriceCss = "pn-find-service-and-price h2,pn-find-service-and-price .heading{text-align:center;font-size:1.5em;line-height:1.1;font-weight:bold;margin-bottom:1rem}pn-find-service-and-price .postagetypes,pn-find-service-and-price .deliveryscope{text-align:center;margin-bottom:3rem}pn-find-service-and-price .weightoption{display:-ms-flexbox;display:flex;gap:1em}pn-find-service-and-price .weightoption-input{width:5em;position:relative}pn-find-service-and-price .weightoption-input input::-webkit-outer-spin-button,pn-find-service-and-price .weightoption-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}pn-find-service-and-price .weightoption-input-abbreviation{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right:1.2em;margin-top:0.75em;font-weight:500}pn-find-service-and-price .weightoption-range{-ms-flex-positive:1;flex-grow:1;-ms-flex-item-align:end;align-self:flex-end;position:relative;top:0.5em}pn-find-service-and-price .weightoption-range input{width:calc(100% - 1.5em)}pn-find-service-and-price .weightoption-range datalist{width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75em}pn-find-service-and-price .resultlist{margin:3em 0}";
+const pnFindServiceAndPriceCss = "pn-find-service-and-price .findprice-form{max-width:50em;margin:0 auto}pn-find-service-and-price h2,pn-find-service-and-price .heading{text-align:center;font-size:1.5em;line-height:1.1;font-weight:bold;margin-bottom:1rem}pn-find-service-and-price .postagetypes,pn-find-service-and-price .deliveryscope{text-align:center;margin-bottom:3rem}pn-find-service-and-price .weightoption{display:-ms-flexbox;display:flex;gap:1em}pn-find-service-and-price .weightoption-input{width:5em;position:relative}pn-find-service-and-price .weightoption-input input::-webkit-outer-spin-button,pn-find-service-and-price .weightoption-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}pn-find-service-and-price .weightoption-input-abbreviation{position:absolute;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right:1.2em;margin-top:1.55rem;font-weight:500}pn-find-service-and-price .weightoption-range{-ms-flex-positive:1;flex-grow:1;-ms-flex-item-align:end;align-self:flex-end;position:relative;top:0.5em}pn-find-service-and-price .weightoption-range input{width:calc(100% - 1.5em)}pn-find-service-and-price .weightoption-range datalist{width:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75em}pn-find-service-and-price .resultlist{margin:3em 0}";
 
 const PnfindServiceAndPrice = class {
   constructor(hostRef) {
@@ -137,20 +147,21 @@ const PnfindServiceAndPrice = class {
   componentWillLoad() {
     this.setState();
     this.getDataSource();
-    window.setTimeout(() => {
-      this.postagetype = postagetypes[1];
-      this.deliveryscope = deliveryscopes[this.postagetype.value][0];
-      this.weight = weights[this.postagetype.value][0];
-      this.weightvalue = this.weight.value;
-    }, 500);
-    // this.filterItems();
+    // 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 req = await fetch(this.source);
+    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 convert.convertFileFromStream(reqbody);
       this.sourceData = convertedData;
+      this.filterItems();
     }
     catch (e) {
       console.log('Unable to parse data');
@@ -184,27 +195,33 @@ const PnfindServiceAndPrice = class {
     }
     // 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 weightData = deliveryScopeData.filter(x => x.maxweight === comparisonWeight);
+    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 (weightData.length === 0) {
-      weightData = deliveryScopeData.filter(x => x.maxweight >= comparisonWeight);
-      if (weightData.length > 0) {
+    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(weightData.reverse().map(item => [item["id"], item])).values()];
+        const uniqueWeightOptions = [...new Map(weightFilteredData.reverse().map(item => [item["id"], item])).values()];
         if (uniqueWeightOptions.length > 0) {
-          weightData = uniqueWeightOptions;
+          weightFilteredData = uniqueWeightOptions;
         }
       }
     }
-    this.filteredItems = weightData;
+    console.log('weightFilteredData', weightFilteredData);
+    this.filteredItems = weightFilteredData;
   }
   render() {
-    return (index.h("div", null, index.h("div", { class: "form" }, (pnFindServiceAndPriceStore.state.i18n.componentheading) ? (index.h("h2", null, pnFindServiceAndPriceStore.state.i18n.componentheading)) : null, index.h("div", { class: "postagetypes" }, postagetypes.map((postagetype) => (index.h("pn-choice-button", { choiceid: postagetype.value, value: postagetype.value, name: "postagetype", type: "radio", checked: postagetype.value === this.postagetype.value, onChange: () => {
+    return (index.h("div", null, index.h("div", { class: "findprice-form" }, (pnFindServiceAndPriceStore.state.i18n.componentheading) ? (index.h("h2", null, pnFindServiceAndPriceStore.state.i18n.componentheading)) : null, index.h("div", { class: "postagetypes" }, postagetypes.map((postagetype) => (index.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.weight = weights[this.postagetype.value][0];
+        this.deliveryscope = { value: "", name: "", icon: "" };
+        this.weight = { value: 0, name: "" };
         this.weightvalue = this.weight.value;
       } }, index.h("pn-illustration", { illustration: postagetype.illustration }), " ", postagetype.name)))), this.postagetype.value && deliveryscopes[this.postagetype.value] ? (index.h("div", null, (pnFindServiceAndPriceStore.state.i18n.deliveryscopeheading) ? (index.h("div", { class: "heading" }, pnFindServiceAndPriceStore.state.i18n.deliveryscopeheading)) : null, index.h("div", { class: "deliveryscope" }, deliveryscopes[this.postagetype.value].map((deliveryscope) => (index.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;
+        }
       } }, index.h("pn-illustration", { illustration: deliveryscope.illustration }), " ", deliveryscope.name)))))) : null, (this.postagetype.value && weights[this.postagetype.value] && this.deliveryscope.value) ? (index.h("div", null, (pnFindServiceAndPriceStore.state.i18n.sizeheading) ? (index.h("div", { class: "heading" }, pnFindServiceAndPriceStore.state.i18n.sizeheading)) : null, index.h("div", { class: "weightoption" }, index.h("div", { class: "weightoption-input" }, index.h("pn-input", { inputid: "weightvalue", name: "weightvalue", type: "number", label: pnFindServiceAndPriceStore.state.i18n.weightlabel, value: this.weightvalue, onChange: (e) => {
         if (e && e.target && e.target.value) {
           const weightNum = parseInt(e.target.value, 10);
@@ -231,7 +248,7 @@ const PnfindServiceAndPrice = class {
         labelText = (weightindex % 5 === 0 || weightindex === 0 || weightindex === weights[this.postagetype.value].length - 1) ? weight.name : '';
       }
       return (index.h("option", Object.assign({ value: weightindex }, (labelText ? { label: labelText } : {}))));
-    })))))) : null), (this.filteredItems) ? (index.h("div", { class: "resultlist" }, (pnFindServiceAndPriceStore.state.i18n.resultlistheading) ? (index.h("div", { class: "heading" }, pnFindServiceAndPriceStore.state.i18n.resultlistheading)) : null, this.filteredItems.map((item) => (index.h("div", null, index.h("pn-find-service-and-price-result", { item: item })))))) : null));
+    })))))) : null), (this.filteredItems && this.filteredItems.length > 0) ? (index.h("div", { class: "resultlist" }, (pnFindServiceAndPriceStore.state.i18n.resultlistheading) ? (index.h("div", { class: "heading" }, pnFindServiceAndPriceStore.state.i18n.resultlistheading)) : null, this.filteredItems.map((item) => (index.h("div", null, index.h("pn-find-service-and-price-result", { item: item })))))) : null));
   }
   static get watchers() { return {
     "market": ["setState"],

package/cjs/pn-market-web-components.cjs.js

@@ -55,5 +55,5 @@ const patchCloneNodeFix = (HTMLElementPrototype) => {
 };
 
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["pn-marketweb-siteheader.cjs",[[4,"pn-marketweb-siteheader",{"market":[1],"language":[1],"endpoint":[1],"hideSiteSelector":[1028,"hide-site-selector"],"hideLanguageSelector":[1028,"hide-language-selector"],"hideSearch":[1028,"hide-search"],"hideLogin":[1028,"hide-login"],"i18n":[32],"gotData":[32],"fetchingData":[32],"menuItems":[32],"siteDefinition":[32],"search":[32],"siteSelector":[32],"languageSelector":[32],"loginDialog":[32],"minimizeSearch":[32]},[[9,"resize","handleResize"]]]]],["pn-find-service-and-price.cjs",[[0,"pn-find-service-and-price",{"source":[1],"language":[1025],"market":[1025],"filteredItems":[32],"postagetype":[32],"weight":[32],"weightvalue":[32],"deliveryscope":[32],"sourceData":[32]}]]],["pn-product-pricelist.cjs",[[4,"pn-product-pricelist",{"source":[1],"language":[1025],"market":[1025],"productid":[1],"filteredItems":[32],"sourceData":[32],"gotData":[32],"loading":[32]}]]],["pn-site-footer_2.cjs",[[4,"pn-site-footer",{"url":[1]}],[4,"pn-site-footer-col"]]],["pn-marketweb-sitefooter.cjs",[[0,"pn-marketweb-sitefooter",{"market":[1],"language":[1],"endpoint":[1],"siteDefinition":[32],"footerContent":[32],"i18n":[32],"gotData":[32],"fetchingData":[32]}]]],["pn-product-pricelist-result.cjs",[[0,"pn-product-pricelist-result",{"item":[16],"shownitems":[16]}]]],["pn-choice-button_2.cjs",[[0,"pn-find-service-and-price-result",{"item":[1040],"shownitems":[16],"weightText":[32]}],[4,"pn-choice-button",{"value":[520],"name":[1],"choiceid":[1],"type":[1],"disabled":[4],"checked":[4],"indeterminate":[1028]},[[0,"change","handlechange"]]]]],["pn-mainnav-link.cjs",[[4,"pn-mainnav-link",{"name":[1],"href":[1],"target":[1],"linkid":[1],"levelId":[32],"open":[32],"hasChildren":[32]}]]],["pn-language-selector_9.cjs",[[4,"pn-mainnav-level",{"level":[32],"levelId":[32],"isOpen":[32],"parentName":[32],"parentHref":[32],"parentLinkId":[32],"listCount":[32],"alignment":[32]}],[4,"pn-language-selector",{"value":[1537],"selectedLanguageName":[32],"options":[32],"i18n":[32]}],[0,"pn-language-selector-option",{"name":[1],"code":[1],"url":[1],"selected":[4],"currentLanguage":[1,"current-language"]}],[4,"pn-mainnav",{"market":[1],"language":[1],"navigationId":[1,"navigation-id"],"openMenu":[1028,"open-menu"]},[[0,"language","setLanguage"],[0,"market","setMarket"],[0,"menuLanguageChange","onLanguageChange"],[0,"setmenuopen","setOpenMenu"],[0,"openMenuLevelChange","onOpenMenuLevelChange"]]],[4,"pn-mainnav-list",{"heading":[1],"linkCount":[32]}],[0,"pn-marketweb-siteheader-login",{"endpoint":[1],"i18n":[8,"i-1-8n"],"loginDialog":[1040],"loginManager":[32],"loggedIn":[32],"toggleButtonText":[32]}],[0,"pn-marketweb-siteheader-search",{"i18n":[8,"i-1-8n"],"showOnlyLink":[1028,"show-only-link"],"hideSearch":[1028,"hide-search"],"search":[1040]}],[4,"pn-site-selector",{"buttontext":[1],"heading":[1],"language":[1],"i18n":[32]}],[0,"pn-site-selector-item",{"url":[1],"heading":[1],"description":[1],"newwindow":[4]}]]],["pn-product-tile_3.cjs",[[4,"pn-product-tile"],[0,"pn-product-tile-info",{"label":[1],"text":[1],"icon":[1]}],[0,"pn-product-tile-price",{"label":[1],"amount":[1],"currency":[1],"url":[1]}]]]], options);
+  return index.bootstrapLazy([["pn-marketweb-siteheader.cjs",[[4,"pn-marketweb-siteheader",{"market":[1],"language":[1],"endpoint":[1],"hideSiteSelector":[1028,"hide-site-selector"],"hideLanguageSelector":[1028,"hide-language-selector"],"hideSearch":[1028,"hide-search"],"hideLogin":[1028,"hide-login"],"i18n":[32],"gotData":[32],"fetchingData":[32],"menuItems":[32],"siteDefinition":[32],"search":[32],"siteSelector":[32],"languageSelector":[32],"loginDialog":[32],"minimizeSearch":[32]},[[9,"resize","handleResize"]]]]],["pn-find-service-and-price.cjs",[[0,"pn-find-service-and-price",{"source":[1],"language":[1025],"market":[1025],"filteredItems":[32],"postagetype":[32],"weight":[32],"weightvalue":[32],"deliveryscope":[32],"sourceData":[32]}]]],["pn-product-pricelist.cjs",[[4,"pn-product-pricelist",{"source":[1],"language":[1025],"market":[1025],"productid":[1],"filteredItems":[32],"sourceData":[32],"gotData":[32],"loading":[32],"postagetype":[32],"weight":[32],"weightvalue":[32]}]]],["pn-site-footer_2.cjs",[[4,"pn-site-footer",{"url":[1]}],[4,"pn-site-footer-col"]]],["pn-marketweb-sitefooter.cjs",[[0,"pn-marketweb-sitefooter",{"market":[1],"language":[1],"endpoint":[1],"siteDefinition":[32],"footerContent":[32],"i18n":[32],"gotData":[32],"fetchingData":[32]}]]],["pn-product-pricelist-result.cjs",[[0,"pn-product-pricelist-result",{"item":[1040],"shownitems":[16],"weightText":[32]}]]],["pn-choice-button_2.cjs",[[0,"pn-find-service-and-price-result",{"item":[1040],"shownitems":[16],"weightText":[32]}],[4,"pn-choice-button",{"value":[520],"name":[1],"choiceid":[1],"type":[1],"disabled":[4],"checked":[4],"indeterminate":[1028]},[[0,"change","handlechange"]]]]],["pn-mainnav-link.cjs",[[4,"pn-mainnav-link",{"name":[1],"href":[1],"target":[1],"linkid":[1],"levelId":[32],"open":[32],"hasChildren":[32]}]]],["pn-language-selector_9.cjs",[[4,"pn-mainnav-level",{"level":[32],"levelId":[32],"isOpen":[32],"parentName":[32],"parentHref":[32],"parentLinkId":[32],"listCount":[32],"alignment":[32]}],[4,"pn-language-selector",{"value":[1537],"selectedLanguageName":[32],"options":[32],"i18n":[32]}],[0,"pn-language-selector-option",{"name":[1],"code":[1],"url":[1],"selected":[4],"currentLanguage":[1,"current-language"]}],[4,"pn-mainnav",{"market":[1],"language":[1],"navigationId":[1,"navigation-id"],"openMenu":[1028,"open-menu"]},[[0,"language","setLanguage"],[0,"market","setMarket"],[0,"menuLanguageChange","onLanguageChange"],[0,"setmenuopen","setOpenMenu"],[0,"openMenuLevelChange","onOpenMenuLevelChange"]]],[4,"pn-mainnav-list",{"heading":[1],"linkCount":[32]}],[0,"pn-marketweb-siteheader-login",{"endpoint":[1],"i18n":[8,"i-1-8n"],"loginDialog":[1040],"loginManager":[32],"loggedIn":[32],"toggleButtonText":[32]}],[0,"pn-marketweb-siteheader-search",{"i18n":[8,"i-1-8n"],"showOnlyLink":[1028,"show-only-link"],"hideSearch":[1028,"hide-search"],"search":[1040]}],[4,"pn-site-selector",{"buttontext":[1],"heading":[1],"language":[1],"i18n":[32]}],[0,"pn-site-selector-item",{"url":[1],"heading":[1],"description":[1],"newwindow":[4]}]]],["pn-product-tile_3.cjs",[[4,"pn-product-tile"],[0,"pn-product-tile-info",{"label":[1],"text":[1],"icon":[1]}],[0,"pn-product-tile-price",{"label":[1],"amount":[1],"currency":[1],"url":[1]}]]]], options);
 });

package/cjs/pn-product-pricelist-result.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b58d2618.js');
-const pnProductPricelistStore = require('./pn-product-pricelist-store-ffd73312.js');
+const pnProductPricelistStore = require('./pn-product-pricelist-store-e4f8503b.js');
 require('./index-f472d191.js');
 
 const pnProductPricelistResultCss = "";
@@ -13,8 +13,13 @@ const PnFindProductPricelistResult = class {
     index.registerInstance(this, hostRef);
     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 }));
     }
@@ -24,10 +29,16 @@ const PnFindProductPricelistResult = class {
     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 (index.h(index.Host, null, this.shownitems.map((item) => (index.h("pn-product-tile", null, index.h("pn-illustration", { slot: "illustration", illustration: item.illustration }), index.h("div", { slot: "content" }, index.h("div", { class: "content" }, index.h("h3", null, item.name), (item.description) ? (index.h("div", { class: "description" }, item.description)) : null, (item.info) ? (index.h("div", { class: "description" }, item.info)) : null)), item.maxweight ? (index.h("pn-product-tile-info", { label: pnProductPricelistStore.state.i18n.maxweightlabel, text: item.maxweight + '' })) : null, item.maximummeasurements ? (index.h("pn-product-tile-info", { label: pnProductPricelistStore.state.i18n.maxmeasurementlabel, text: item.maximummeasurements })) : null, item.pricestamps ? (index.h("pn-product-tile-price", { slot: "price", label: "With stamps", amount: item.pricestamps + '', currency: pnProductPricelistStore.state.market.currency })) : null, item.priceagent ? (index.h("pn-product-tile-price", { slot: "price", label: "Service point", amount: item.priceagent + '', currency: pnProductPricelistStore.state.market.currency, url: "https://shop.postnord.se/ebutik/default.aspx" })) : null, item.pricesenddirect ? (index.h("pn-product-tile-price", { slot: "price", label: "Send direct", amount: item.pricesenddirect + '', currency: pnProductPricelistStore.state.market.currency, url: "https://portal.postnord.com/skickadirekt/" })) : null, item.info ? (index.h("small", { slot: "note" }, index.h("p", null, item.note))) : null)))));
+    return (index.h(index.Host, null, this.shownitems.map((item) => (index.h("pn-product-tile", null, index.h("pn-illustration", { slot: "illustration", illustration: item.illustration }), index.h("div", { slot: "content" }, index.h("div", { class: "content" }, index.h("h3", null, item.name), (item.description) ? (index.h("div", { class: "description" }, item.description)) : null, (item.info) ? (index.h("div", { class: "description" }, item.info)) : null)), item.maxweight ? (index.h("pn-product-tile-info", { label: pnProductPricelistStore.state.i18n.maxweightlabel, text: this.weightText })) : null, item.maximummeasurements ? (index.h("pn-product-tile-info", { label: pnProductPricelistStore.state.i18n.maxmeasurementlabel, text: item.maximummeasurements })) : null, item.pricestamps ? (index.h("pn-product-tile-price", { slot: "price", label: pnProductPricelistStore.state.i18n.stampshopcta, amount: item.pricestamps + '', currency: pnProductPricelistStore.state.market.currency })) : null, item.priceagent ? (index.h("pn-product-tile-price", { slot: "price", label: "", amount: item.priceagent + '', currency: pnProductPricelistStore.state.market.currency, url: "https://shop.postnord.se/ebutik/default.aspx" })) : null, item.pricesenddirect ? (index.h("pn-product-tile-price", { slot: "price", label: pnProductPricelistStore.state.i18n.senddirectcta, amount: item.pricesenddirect + '', currency: pnProductPricelistStore.state.market.currency, url: "https://portal.postnord.com/skickadirekt/" })) : null, item.note ? (index.h("small", { slot: "note" }, index.h("p", null, item.note))) : null)))));
   }
+  static get watchers() { return {
+    "item": ["composeItems"]
+  }; }
 };
 PnFindProductPricelistResult.style = pnProductPricelistResultCss;
 

package/cjs/{pn-product-pricelist-store-ffd73312.js → pn-product-pricelist-store-e4f8503b.js}

@@ -6,7 +6,11 @@ const index = require('./index-f472d191.js');
 const { state, onChange } = index.createStore({
   i18n: {
     maxweightlabel: '',
-    maxmeasurementlabel: ''
+    weightlabel: '',
+    maxmeasurementlabel: '',
+    sizeheading: '',
+    senddirectcta: '',
+    stampshopcta: '',
   },
   market: {
     currency: ""

package/cjs/pn-product-pricelist.cjs.entry.js

@@ -4,29 +4,49 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b58d2618.js');
 const convert = require('./convert-57b3dd5e.js');
-const pnProductPricelistStore = require('./pn-product-pricelist-store-ffd73312.js');
+const pnProductPricelistStore = require('./pn-product-pricelist-store-e4f8503b.js');
 require('./index-f472d191.js');
 
 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',
   }
 };
 const markets = {
@@ -44,7 +64,39 @@ const markets = {
   }
 };
 
-const pnProductPricelistCss = "pn-product-pricelist pn-spinner{margin:1em auto}pn-product-pricelist .resultlist:not([data-list-count=\"0\"]){margin-top:1.5em}";
+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 },    
+  ]
+};
+
+const pnProductPricelistCss = "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:-ms-flexbox;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%;-webkit-transform:translateY(-50%);transform:translateY(-50%);right:1.2em;margin-top:1.55rem;font-weight:500}pn-product-pricelist .weightoption-range{-ms-flex-positive:1;flex-grow:1;-ms-flex-item-align:end;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:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;font-size:0.75em}pn-product-pricelist .resultlist:not([data-list-count=\"0\"]){margin-top:2em}";
 
 const PnFindProductPricelist = class {
   constructor(hostRef) {
@@ -57,6 +109,9 @@ const PnFindProductPricelist = class {
     this.sourceData = { types: [], data: [] };
     this.gotData = false;
     this.loading = false;
+    this.postagetype = { value: "" };
+    this.weight = { value: 0, name: "" };
+    this.weightvalue = 0;
   }
   componentWillLoad() {
     this.setState();
@@ -94,15 +149,69 @@ const PnFindProductPricelist = class {
       return;
     }
     this.loading = false;
-    this.filteredItems = this.sourceData.data.filter(x => x.id === this.productid);
+    const productIdItems = this.sourceData.data.filter(x => x.id === this.productid);
+    if (productIdItems.length === 0) {
+      return;
+    }
+    this.postagetype.value = productIdItems[0].what;
+    if (!weights[this.postagetype.value] || weights[this.postagetype.value].length === 0) {
+      return;
+    }
+    if (this.weightvalue === 0) {
+      this.weight = weights[this.postagetype.value][0];
+      this.weightvalue = this.weight.value;
+    }
+    // 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 = productIdItems.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 = productIdItems.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;
+        }
+      }
+    }
+    this.filteredItems = weightFilteredData;
     this.gotData = this.filteredItems.length > 0;
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "content" }, index.h("slot", null)), this.loading ? (index.h("pn-spinner", null)) : null, index.h("div", { class: "resultlist", "data-list-count": this.filteredItems.length }, this.filteredItems.map((item) => (index.h("div", null, index.h("pn-product-pricelist-result", { item: item })))))));
+    return (index.h(index.Host, null, index.h("div", { class: "content" }, index.h("slot", null)), this.loading ? (index.h("pn-spinner", null)) : null, (this.postagetype.value && weights[this.postagetype.value]) ? (index.h("div", { class: "weightselection" }, (pnProductPricelistStore.state.i18n.sizeheading) ? (index.h("div", { class: "heading" }, pnProductPricelistStore.state.i18n.sizeheading)) : null, index.h("div", { class: "weightoption" }, index.h("div", { class: "weightoption-input" }, index.h("pn-input", { inputid: "weightvalue", name: "weightvalue", type: "number", label: pnProductPricelistStore.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;
+            }
+          }
+        }
+      } }), index.h("span", { class: "weightoption-input-abbreviation" }, this.weight.abbreviation)), index.h("div", { class: "weightoption-range" }, index.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 }), index.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 (index.h("option", Object.assign({ value: weightindex }, (labelText ? { label: labelText } : {}))));
+    })))))) : null, index.h("div", { class: "resultlist", "data-list-count": this.filteredItems.length }, this.filteredItems.map((item) => (index.h("div", null, index.h("pn-product-pricelist-result", { item: item })))))));
   }
   static get watchers() { return {
     "market": ["setState"],
-    "language": ["setState"]
+    "language": ["setState"],
+    "postagetype": ["filterItems"],
+    "weightvalue": ["filterItems"]
   }; }
 };
 PnFindProductPricelist.style = pnProductPricelistCss;

package/cjs/pn-product-tile_3.cjs.entry.js

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-b58d2618.js');
 
-const pnProductTileCss = "pn-product-tile{margin-bottom:1em;border:0.1rem solid #D3CECB;outline:none;background:white;-webkit-box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);display:-ms-flexbox;display:flex;padding:1.5em;word-break:break-word;text-decoration:none;border-radius:0.8rem}pn-product-tile [slot=content] h3{display:-ms-flexbox;display:flex;width:100%;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:0.5em}pn-product-tile>pn-illustration{min-width:8rem;width:8rem;height:8rem;margin-right:3rem;-ms-flex-item-align:center;align-self:center}pn-product-tile .tilecontent{-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;-ms-flex-pack:center;justify-content:center}pn-product-tile .details{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;width:100%;-ms-flex-align:center;align-items:center}pn-product-tile .info{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-positive:1;flex-grow:1;max-width:calc((100% / 3) * 2);-ms-flex-flow:wrap;flex-flow:wrap}pn-product-tile .info>*{min-width:6em;margin:0.2em 1em 0.2em 0}";
+const pnProductTileCss = "pn-product-tile{margin-bottom:1em;border:0.1rem solid #D3CECB;outline:none;background:white;-webkit-box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);display:-ms-flexbox;display:flex;padding:1.5em;word-break:break-word;text-decoration:none;border-radius:0.8rem}pn-product-tile [slot=content] h3{display:-ms-flexbox;display:flex;width:100%;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:0.5em}pn-product-tile>pn-illustration{min-width:8rem;width:8rem;height:8rem;margin-right:3rem;-ms-flex-item-align:center;align-self:center}pn-product-tile .tilecontent{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}pn-product-tile .details{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;width:100%}pn-product-tile .info{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-positive:1;flex-grow:1;max-width:calc((100% / 3) * 2);-ms-flex-flow:wrap;flex-flow:wrap}pn-product-tile .info>*{min-width:6em;margin:0.2em 1em 0.2em 0}";
 
 const PnProductTile = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return (index.h(index.Host, null, index.h("slot", { name: "illustration" }), index.h("div", { class: "tilecontent" }, index.h("slot", { name: "content" }), index.h("div", { class: "details" }, index.h("div", { class: "info" }, index.h("slot", null)), index.h("slot", { name: "price" })), index.h("slot", { name: "note" }))));
+    return (index.h(index.Host, null, index.h("slot", { name: "illustration" }), index.h("div", { class: "tilecontent" }, index.h("div", { class: "details" }, index.h("slot", { name: "content" }), index.h("div", { class: "info" }, index.h("slot", null)), index.h("slot", { name: "note" })), index.h("slot", { name: "price" }))));
   }
 };
 PnProductTile.style = pnProductTileCss;
@@ -29,7 +29,7 @@ const PnProductTileInfo = class {
 index.h("pn-icon", { symbol: "align-center", small: "false", color: "black" });
 PnProductTileInfo.style = pnProductTileInfoCss;
 
-const pnProductTilePriceCss = "pn-product-tile-price span:last-child{display:inline-block;margin-left:0.2em}pn-product-tile-price+pn-product-tile-price{margin-left:1.5em}pn-product-tile-price small{display:-ms-flexbox;display:flex}pn-product-tile-price pn-icon{display:inline-block;-ms-flex-item-align:center;align-self:center}pn-product-tile-price a{text-decoration:none;color:#005D92}pn-product-tile-price a h3{text-decoration:underline}";
+const pnProductTilePriceCss = "pn-product-tile-price{margin-top:1em;white-space:nowrap;text-align:right}pn-product-tile-price span:last-child{display:inline-block;margin-left:0.2em}pn-product-tile-price+pn-product-tile-price{margin-left:1.5em}pn-product-tile-price pn-icon{display:inline-block;-ms-flex-item-align:center;align-self:center}pn-product-tile-price a{text-decoration:none;color:#005D92}pn-product-tile-price a h3{text-decoration:underline}";
 
 const PnProductTilePrice = class {
   constructor(hostRef) {
@@ -39,7 +39,7 @@ const PnProductTilePrice = class {
     if (!this.amount) {
       return;
     }
-    return (this.url) ? (index.h(index.Host, null, index.h("a", { href: this.url }, (this.label) ? (index.h("p", null, index.h("small", null, this.label, index.h("pn-icon", { symbol: "open-in-new", small: "true", color: "blue700" })))) : null, index.h("h3", null, (this.amount) ? (index.h("span", { class: "pn-2xl" }, this.amount)) : null, (this.currency) ? (index.h("span", null, this.currency)) : null)))) : (index.h(index.Host, null, (this.label) ? (index.h("p", null, index.h("small", null, this.label))) : null, index.h("h3", null, (this.amount) ? (index.h("span", { class: "pn-2xl" }, this.amount)) : null, (this.currency) ? (index.h("span", null, this.currency)) : null)));
+    return (this.url) ? (index.h(index.Host, null, index.h("h3", null, (this.amount) ? (index.h("span", { class: "pn-2xl" }, this.amount)) : null, (this.currency) ? (index.h("span", { class: "pn-2xl" }, this.currency)) : null), (this.label) ? (index.h("a", { href: this.url }, index.h("pn-button", { small: "true", icon: "arrow-right" }, this.label))) : null)) : (index.h(index.Host, null, index.h("h3", null, (this.amount) ? (index.h("span", { class: "pn-2xl" }, this.amount)) : null, (this.currency) ? (index.h("span", { class: "pn-2xl" }, this.currency)) : null)));
   }
 };
 PnProductTilePrice.style = pnProductTilePriceCss;

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

@@ -9,7 +9,7 @@ export default {
 
 const Template = ({ ...args }) => {
   return `
-    <div style="max-width: 50em; margin:1em auto 0;">
+    <div style="max-width: 100%; margin:1em auto 0;">
       <pn-find-service-and-price 
         source="${args.source}" 
         market="${args.market}" 

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

@@ -34,10 +34,10 @@ export class PnfindServiceAndPriceResult {
           (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: "With stamps", amount: item.pricestamps + '', currency: state.market.currency })) : null,
-      item.priceagent ? (h("pn-product-tile-price", { slot: "price", label: "Service point", 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: "Send direct", amount: item.pricesenddirect + '', currency: state.market.currency, url: "https://portal.postnord.com/skickadirekt/" })) : null,
-      item.info ? (h("small", { slot: "note" },
+      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-find-service-and-price-result"; }

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

@@ -8,7 +8,9 @@ const { state, onChange } = createStore({
     resultlistheading: '',
     weightlabel: '',
     maxweightlabel: '',
-    maxmeasurementlabel: ''
+    maxmeasurementlabel: '',
+    senddirectcta: '',
+    stampshopcta: '',
   },
   market: {
     currency: ""

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

@@ -7,6 +7,8 @@ export const translations = {
     'weightlabel': 'Vikt',
     'maxweightlabel': 'Maxvikt',
     'maxmeasurementlabel': 'Maxvolym',
+    'senddirectcta': 'Köp frakt via Skicka Direkt',
+    'stampshopcta': 'Köp frimärken via vår webshop',
   },
   'en': {
     'componentheading': 'What do you want to send?',
@@ -16,6 +18,8 @@ export const translations = {
     'weightlabel': 'Weight',
     'maxweightlabel': 'Max weight',
     'maxmeasurementlabel': 'Maximum measurement',
+    'senddirectcta': 'Buy shipping in Send Direct',
+    'stampshopcta': 'Order home stamps from the webshop',
   },
   'da': {
     'componentheading': 'Vad vill du skicka?',
@@ -25,6 +29,8 @@ export const translations = {
     'weightlabel': 'Vægt',
     'maxweightlabel': 'Max vægt',
     'maxmeasurementlabel': 'Maks. Volumen',
+    'senddirectcta': 'Buy shipping in Send Direct',
+    'stampshopcta': 'Order home stamps from the webshop',
   },
   'no': {
     'componentheading': 'Vad vill du skicka?',
@@ -34,6 +40,8 @@ export const translations = {
     'weightlabel': 'Vekt',
     'maxweightlabel': 'Maks vekt',
     'maxmeasurementlabel': 'Maks volum',
+    'senddirectcta': 'Buy shipping in Send Direct',
+    'stampshopcta': 'Order home stamps from the webshop',
   },
   'fi': {
     'componentheading': 'Vad vill du skicka?',
@@ -43,6 +51,8 @@ export const translations = {
     'weightlabel': 'Paino',
     'maxweightlabel': 'Max paino',
     'maxmeasurementlabel': 'Max äänenvoimakkuus',
+    'senddirectcta': 'Buy shipping in Send Direct',
+    'stampshopcta': 'Order home stamps from the webshop',
   }
 };
 export const markets = {