@postnord/pn-marketweb-components 1.0.7 → 1.0.8

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

@@ -1,3 +1,7 @@
+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;
@@ -29,7 +33,7 @@ pn-find-service-and-price .weightoption-input-abbreviation {
   top: 50%;
   transform: translateY(-50%);
   right: 1.2em;
-  margin-top: 0.75em;
+  margin-top: 1.55rem;
   font-weight: 500;
 }
 pn-find-service-and-price .weightoption-range {

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

@@ -18,20 +18,21 @@ export class PnfindServiceAndPrice {
   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 convertFileFromStream(reqbody);
       this.sourceData = convertedData;
+      this.filterItems();
     }
     catch (e) {
       console.log('Unable to parse data');
@@ -65,27 +66,29 @@ export class PnfindServiceAndPrice {
     }
     // 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 (h("div", null,
-      h("div", { class: "form" },
+      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.weight = weights[this.postagetype.value][0];
+            this.deliveryscope = { value: "", name: "", icon: "" };
+            this.weight = { value: 0, name: "" };
             this.weightvalue = this.weight.value;
           } },
           h("pn-illustration", { illustration: postagetype.illustration }),
@@ -95,6 +98,10 @@ export class PnfindServiceAndPrice {
           (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 }),
             " ",
@@ -134,7 +141,7 @@ export class PnfindServiceAndPrice {
                 }
                 return (h("option", Object.assign({ value: weightindex }, (labelText ? { label: labelText } : {}))));
               })))))) : null),
-      (this.filteredItems) ? (h("div", { class: "resultlist" },
+      (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));

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

@@ -1,7 +1,20 @@
 const postagetypes = [
-  { name: "Brev",   value: "letter", icon: "envelope" },
-  { name: "Paket",  value: "parcel", icon: "box-label" }
-]
+  { 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": [
@@ -35,17 +48,6 @@ const weights = {
   ]
 };
 
-const deliveryscopes = {
-  "letter": [
-    { name: "Sweden",   value: "sweden", icon: "home" },
-    { name: "Abroad",   value: "abroad", icon: "globe" },
-    
-  ],
-  "parcel": [
-    { name: "Sweden",   value: "sweden", icon: "home" },
-    { name: "Within Europe", value:"withineurope", icon: "compass" },
-    { name: "Outside Europe", value:"outsideeurope", icon: "globe" },
-  ]
-};
+
 
 export { postagetypes, weights, deliveryscopes};

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

@@ -1,11 +1,16 @@
-import { Component, h, Prop, Host } from "@stencil/core";
+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 }));
     }
@@ -15,6 +20,9 @@ export class PnFindProductPricelistResult {
     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,
@@ -24,12 +32,12 @@ export class PnFindProductPricelistResult {
           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: item.maxweight + '' })) : 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-product-pricelist-result"; }
@@ -42,7 +50,7 @@ export class PnFindProductPricelistResult {
   static get properties() { return {
     "item": {
       "type": "unknown",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "ProductPriceItem",
         "resolved": "ProductPriceItem",
@@ -83,4 +91,11 @@ export class PnFindProductPricelistResult {
       "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

@@ -3,7 +3,11 @@ import { createStore } from "@stencil/store";
 const { state, onChange } = createStore({
   i18n: {
     maxweightlabel: '',
-    maxmeasurementlabel: ''
+    weightlabel: '',
+    maxmeasurementlabel: '',
+    sizeheading: '',
+    senddirectcta: '',
+    stampshopcta: '',
   },
   market: {
     currency: ""

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

@@ -1,23 +1,43 @@
 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 = {

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

@@ -1,6 +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: 1.5em;
+  margin-top: 2em;
 }

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

@@ -1,5 +1,6 @@
 import { Component, h, Prop, State, Host, Watch } from "@stencil/core";
 import { translations, markets } from "./pn-product-pricelist-translations";
+import { weights } from "./data.js";
 import { convertFileFromStream } from "../../../globals/shared/productprice/convert.js";
 import { state } from "./pn-product-pricelist-store";
 export class PnFindProductPricelist {
@@ -12,6 +13,9 @@ export class PnFindProductPricelist {
     this.sourceData = { types: [], data: [] };
     this.gotData = false;
     this.loading = false;
+    this.postagetype = { value: "" };
+    this.weight = { value: 0, name: "" };
+    this.weightvalue = 0;
   }
   componentWillLoad() {
     this.setState();
@@ -49,7 +53,33 @@ export class PnFindProductPricelist {
       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() {
@@ -57,6 +87,41 @@ export class PnFindProductPricelist {
       h("div", { class: "content" },
         h("slot", null)),
       this.loading ? (h("pn-spinner", null)) : null,
+      (this.postagetype.value && weights[this.postagetype.value]) ? (h("div", { class: "weightselection" },
+        (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,
       h("div", { class: "resultlist", "data-list-count": this.filteredItems.length }, this.filteredItems.map((item) => (h("div", null,
         h("pn-product-pricelist-result", { item: item })))))));
   }
@@ -145,7 +210,10 @@ export class PnFindProductPricelist {
     "filteredItems": {},
     "sourceData": {},
     "gotData": {},
-    "loading": {}
+    "loading": {},
+    "postagetype": {},
+    "weight": {},
+    "weightvalue": {}
   }; }
   static get watchers() { return [{
       "propName": "market",
@@ -153,5 +221,11 @@ export class PnFindProductPricelist {
     }, {
       "propName": "language",
       "methodName": "setState"
+    }, {
+      "propName": "postagetype",
+      "methodName": "filterItems"
+    }, {
+      "propName": "weightvalue",
+      "methodName": "filterItems"
     }]; }
 }

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

@@ -11,7 +11,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-product-pricelist 
         source="${args.source}" 
         market="${args.market}" 

package/collection/components/widgets/pn-product-tile/pn-product-tile-price.css

@@ -1,3 +1,8 @@
+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;
@@ -5,9 +10,6 @@ pn-product-tile-price span:last-child {
 pn-product-tile-price + pn-product-tile-price {
   margin-left: 1.5em;
 }
-pn-product-tile-price small {
-  display: flex;
-}
 pn-product-tile-price pn-icon {
   display: inline-block;
   align-self: center;

package/collection/components/widgets/pn-product-tile/pn-product-tile-price.js

@@ -5,19 +5,14 @@ export class PnProductTilePrice {
       return;
     }
     return (this.url) ? (h(Host, null,
-      h("a", { href: this.url },
-        (this.label) ? (h("p", null,
-          h("small", null,
-            this.label,
-            h("pn-icon", { symbol: "open-in-new", small: "true", color: "blue700" })))) : null,
-        h("h3", null,
-          (this.amount) ? (h("span", { class: "pn-2xl" }, this.amount)) : null,
-          (this.currency) ? (h("span", null, this.currency)) : null)))) : (h(Host, null,
-      (this.label) ? (h("p", null,
-        h("small", null, this.label))) : null,
       h("h3", null,
         (this.amount) ? (h("span", { class: "pn-2xl" }, this.amount)) : null,
-        (this.currency) ? (h("span", null, this.currency)) : null)));
+        (this.currency) ? (h("span", { class: "pn-2xl" }, this.currency)) : null),
+      (this.label) ? (h("a", { href: this.url },
+        h("pn-button", { small: "true", icon: "arrow-right" }, this.label))) : null)) : (h(Host, null,
+      h("h3", null,
+        (this.amount) ? (h("span", { class: "pn-2xl" }, this.amount)) : null,
+        (this.currency) ? (h("span", { class: "pn-2xl" }, this.currency)) : null)));
   }
   static get is() { return "pn-product-tile-price"; }
   static get originalStyleUrls() { return {

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

@@ -24,16 +24,16 @@ pn-product-tile > pn-illustration {
   align-self: center;
 }
 pn-product-tile .tilecontent {
-  flex-wrap: wrap;
-  flex-direction: column;
-  align-items: flex-start;
+  display: flex;
+  flex-direction: row;
   justify-content: center;
+  flex-grow: 1;
 }
 pn-product-tile .details {
   display: flex;
+  flex-direction: column;
   justify-content: space-between;
   width: 100%;
-  align-items: center;
 }
 pn-product-tile .info {
   display: flex;

package/collection/components/widgets/pn-product-tile/pn-product-tile.js

@@ -4,12 +4,12 @@ export class PnProductTile {
     return (h(Host, null,
       h("slot", { name: "illustration" }),
       h("div", { class: "tilecontent" },
-        h("slot", { name: "content" }),
         h("div", { class: "details" },
+          h("slot", { name: "content" }),
           h("div", { class: "info" },
             h("slot", null)),
-          h("slot", { name: "price" })),
-        h("slot", { name: "note" }))));
+          h("slot", { name: "note" })),
+        h("slot", { name: "price" }))));
   }
   static get is() { return "pn-product-tile"; }
   static get originalStyleUrls() { return {