@postnord/pn-marketweb-components 2.1.7 → 2.1.9

package/components/pn-parcel-tracker.js

@@ -0,0 +1,58 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './pn-marketweb-input2.js';
+
+const pnParcelTrackerCss = "pn-spotlight .pn-spotlight__container:has(pn-parcel-tracker) [slot=mobile-heading]{color:#005D92}.pn-spotlight__container__wrapper__content [slot=content]:has(pn-parcel-tracker){padding-left:2rem}pn-parcel-tracker{width:100%}pn-parcel-tracker .pn-parcel-tracker__container form{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center;-ms-flex-pack:end;justify-content:flex-end;gap:1.6rem}pn-parcel-tracker .pn-parcel-tracker__container form .pn-parcel-tracker__container__heading{color:#005D92;font-weight:500;margin-bottom:0}@media screen and (max-width: 768px){pn-parcel-tracker .pn-parcel-tracker__container form .pn-parcel-tracker__container__heading{display:none}}@media screen and (min-width: 1640px){pn-parcel-tracker .pn-parcel-tracker__container form .pn-parcel-tracker__container__heading{font-size:2.4rem;font-weight:700}}pn-parcel-tracker .pn-parcel-tracker__container form pn-marketweb-input{-ms-flex-positive:1;flex-grow:1;max-width:80%}@media screen and (min-width: 768px){pn-parcel-tracker .pn-parcel-tracker__container form pn-marketweb-input{max-width:50%}}@media screen and (min-width: 992px){pn-parcel-tracker .pn-parcel-tracker__container form pn-marketweb-input{max-width:45%}}@media screen and (min-width: 1640px){pn-parcel-tracker .pn-parcel-tracker__container form pn-marketweb-input{max-width:35%}}pn-parcel-tracker .pn-parcel-tracker__container form pn-marketweb-input input{border-radius:6.4rem}";
+
+const PnSpotlight = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.formActionUrl = null;
+    this.heading = 'Track your parcel';
+    this.buttonLabel = null;
+    this.locale = 'en';
+    this.placeholder = 'Enter shipment ID';
+    this.inputName = 'shipmentID';
+    this.currentWidth = window.innerWidth;
+  }
+  handleViewportSizeChange(event) {
+    this.currentWidth = event.target.innerWidth;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "pn-parcel-tracker__container" }, h("form", { method: "GET", action: this.formActionUrl }, h("h3", { class: "pn-parcel-tracker__container__heading" }, this.heading), h("pn-marketweb-input", { name: this.inputName, placeholder: this.placeholder }), h("pn-button", { type: "submit", icon: "search", "icon-only": this.currentWidth < 412 }, this.currentWidth >= 412 && this.buttonLabel)))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnParcelTrackerCss; }
+}, [0, "pn-parcel-tracker", {
+    "formActionUrl": [1, "form-action-url"],
+    "heading": [1],
+    "buttonLabel": [1, "button-label"],
+    "locale": [1],
+    "placeholder": [1],
+    "inputName": [1, "input-name"],
+    "currentWidth": [32]
+  }, [[9, "resize", "handleViewportSizeChange"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-parcel-tracker", "pn-marketweb-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-parcel-tracker":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnSpotlight);
+      }
+      break;
+    case "pn-marketweb-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnParcelTracker = PnSpotlight;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnParcelTracker, defineCustomElement };

package/components/pn-pex-pricefinder.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnPexPricefinder extends Components.PnPexPricefinder, HTMLElement {}
+export const PnPexPricefinder: {
+  prototype: PnPexPricefinder;
+  new (): PnPexPricefinder;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-pex-pricefinder.js

@@ -0,0 +1,156 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './pn-marketweb-input2.js';
+
+const translations = {
+  'sv': {
+    "heading": "Prisindikation med PEX Bud",
+    "labelFrom": "Från postkod",
+    "labelTo": "Till postkod",
+    "zipPlaceholder": "Ex. 12831",
+    "labelWeight": "Vikt (i kilo)",
+    "weightPlaceholder": "Ex. 1000",
+    "labelWhen": "När",
+    "submitButtonText": "Beräkna pris"
+  },
+  'en': {
+    "heading": "Calculate price with PEX Bud",
+    "labelFrom": "From zip",
+    "labelTo": "To zip",
+    "zipPlaceholder": "Ex. 12831",
+    "labelWeight": "Weight (in kilo)",
+    "weightPlaceholder": "Ex. 1000",
+    "labelWhen": "When",
+    "submitButtonText": "Calculate price"
+  }
+};
+
+const pnPexPricefinderCss = ".pex-pricefinder-top{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.pex-pricefinder-top pn-illustration{width:5.5rem;height:5.5rem;margin-right:1.6rem}.pex-pricefinder-form{margin:1.6rem 0 0 0;padding:0;border:0}.pex-pricefinder-form fieldset{margin:0;padding:0;border:0}.pex-pricefinder-form fieldset+fieldset{margin-top:1.6rem}.pex-pricefinder-form fieldset>div{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:1em}.pex-pricefinder-form fieldset>div>*{-ms-flex-positive:1;flex-grow:1;width:100%}.pex-pricefinder-form pn-button{-ms-flex-item-align:end;align-self:end;margin-left:auto}.pex-pricefinder-form .datepicker{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}.pex-pricefinder-form .datepicker label{margin-bottom:0.4rem;color:#5E554A;font-size:0.875em;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:end;align-items:flex-end;cursor:pointer;-webkit-transition:color 0.2s;transition:color 0.2s}.pex-pricefinder-form .datepicker pn-date-picker{width:100%}.pex-pricefinder-response{margin-top:2.4rem;text-align:center;font-size:2.4em}";
+
+const PnPexPricefinder$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.language = "sv";
+    this.currency = "Kr";
+    this.apiUrl = "/api/pex/order";
+    this.i18n = translations.sv;
+    this.fromzip = null;
+    this.tozip = null;
+    this.weight = 1;
+    this.when = '';
+    this.response = null;
+  }
+  componentWillLoad() {
+    this.init();
+  }
+  async init() {
+    this.setInitialTime();
+    this.checkParameters();
+    this.setLanguage();
+  }
+  setInitialTime() {
+    const initialTime = (new Date());
+    initialTime.setHours(initialTime.getHours() + 1);
+    initialTime.setMinutes(0);
+    const splitTime = initialTime.toLocaleString('sv', { timeZoneName: 'short' }).split(' ');
+    this.when = `${splitTime[0]}T${splitTime[1].substring(0, 5)}`;
+  }
+  checkParameters() {
+    const params = new URLSearchParams(window.location.href);
+    if (!params) {
+      return;
+    }
+    const paramKeys = ['fromzip', 'tozip', 'weight', 'when'];
+    paramKeys.forEach((key) => {
+      if (params.get(key)) {
+        this[key] = params.get(key);
+      }
+    });
+  }
+  setLanguage() {
+    if (translations[this.language]) {
+      this.i18n = translations[this.language];
+    }
+  }
+  onSubmit(e) {
+    e.preventDefault();
+    const formData = new FormData(e.target);
+    const requestQuery = this.compileRequestQuery(formData);
+    this.fetchResult(requestQuery);
+  }
+  compileRequestQuery(formData) {
+    let query = {
+      "from": formData.get("fromzip"),
+      "to": formData.get("tozip"),
+      "weight": formData.get("weight"),
+      "when": formData.get("when")
+    };
+    if (!query.when) {
+      query.when = this.hostElement.querySelector('input.date-input').value;
+    }
+    if (!formData.get("fromzip") || !formData.get("tozip") || !formData.get("weight")) {
+      console.error("Form data is not compliant");
+      return;
+    }
+    return query;
+  }
+  async fetchResult(query) {
+    this.response = null;
+    const params = new URLSearchParams(query);
+    const req = await (fetch(`${this.apiUrl}?${params.toString()}`, {
+      method: 'get',
+      headers: {
+        'Content-Type': 'application/json'
+      }
+    }).catch(this.onFetchError.bind(this)));
+    let response = await (req.json().catch(this.onFetchError.bind(this)));
+    if (!response) {
+      response = await (await import('./mockresponse.js')).default;
+    }
+    if (response) {
+      this.response = response;
+    }
+  }
+  onFetchError(error) {
+    console.error('onFetchError(error', error);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "pex-pricefinder-top" }, h("pn-illustration", { illustration: "PEX-truck" }), h("h2", null, this.i18n.heading)), h("form", { method: "get", action: "", class: "pex-pricefinder-form", onSubmit: this.onSubmit.bind(this) }, h("fieldset", null, h("div", null, h("pn-input", { type: "number", label: this.i18n.labelFrom, inputid: "fromzip", name: "fromzip", placeholder: this.i18n.zipPlaceholder, required: true, value: this.fromzip }), h("pn-input", { type: "number", label: this.i18n.labelTo, inputid: "tozip", name: "tozip", placeholder: this.i18n.zipPlaceholder, required: true, value: this.tozip }))), h("fieldset", null, h("div", null, h("pn-input", { type: "number", label: this.i18n.labelWeight, inputid: "weight", name: "weight", placeholder: this.i18n.weightPlaceholder, required: true, value: this.weight }), h("div", { class: "datepicker" }, h("label", { htmlFor: "when" }, this.i18n.labelWhen), h("pn-marketweb-input", { inputid: "when", name: "when", type: "datetime-local", min: (new Date()).toISOString().split('T')[0], value: this.when })))), h("fieldset", null, h("div", null, h("pn-button", { type: "submit" }, this.i18n.submitButtonText)))), this.response ? (h("div", { class: "pex-pricefinder-response" }, h("strong", null, this.response.data.value, " ", this.currency))) : null));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnPexPricefinderCss; }
+}, [0, "pn-pex-pricefinder", {
+    "language": [1],
+    "currency": [1],
+    "apiUrl": [1, "api-url"],
+    "i18n": [32],
+    "fromzip": [32],
+    "tozip": [32],
+    "weight": [32],
+    "when": [32],
+    "response": [32]
+  }, [[0, "language", "setLanguage"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-pex-pricefinder", "pn-marketweb-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-pex-pricefinder":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnPexPricefinder$1);
+      }
+      break;
+    case "pn-marketweb-input":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnPexPricefinder = PnPexPricefinder$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnPexPricefinder, defineCustomElement };

package/components/pn-product-card-info.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnProductCardInfo extends Components.PnProductCardInfo, HTMLElement {}
+export const PnProductCardInfo: {
+  prototype: PnProductCardInfo;
+  new (): PnProductCardInfo;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-product-card-info.js

@@ -0,0 +1,6 @@
+import { P as PnProductCardInfo$1, d as defineCustomElement$1 } from './pn-product-card-info2.js';
+
+const PnProductCardInfo = PnProductCardInfo$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnProductCardInfo, defineCustomElement };

package/components/pn-product-card-info2.js

@@ -0,0 +1,45 @@
+import { h, proxyCustomElement, HTMLElement, Host } from '@stencil/core/internal/client';
+
+const pnProductCardInfoCss = "pn-product-card-info{-ms-flex-item-align:center;align-self:center}.cardinfocontent{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-positive:1;flex-grow:1;font-size:0.875em;gap:1.6rem}@media screen and (min-width: 36em){.cardinfocontent{-ms-flex-direction:row;flex-direction:row}}.cardinfocontent>div p{margin:0.25em 0.25em 0 0}.cardinfocontent-item{margin-top:0.5em}[slot=formatPre]{font-family:\"PostNordSans\", \"Verdana\";margin:0.5em 3em 0 0}[slot=formatPre]>strong{font-weight:bold}.cardinfoprice{display:-ms-flexbox;display:flex;font-size:1em;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}";
+
+const PnProductCardInfo = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.rulle = undefined;
+    this.paket = undefined;
+    this.label = undefined;
+    this.text = undefined;
+  }
+  render() {
+    return (this.label) ? (h(Host, null, h("div", { class: "cardinfocontent" }, (this.text) ? (h("pre", { slot: "formatPre" }, this.text)) : null))) : (h(Host, null, h("div", { class: "cardinfocontent" }, (this.paket) ? (h("div", { class: "cardinfocontent-item" }, h("strong", null, "Maxm\u00E5tt"), this.paket.split("/").map((item) => ((item.split(":").length > 1) ?
+      (h("p", null, h("strong", null, item.split(":")[0] + ": "), " ", item.split(":")[1])) :
+      (h("p", null, item)))))) : null, (this.rulle) ?
+      (h("div", { class: "cardinfocontent-item" }, h("strong", null, "Rulle"), this.rulle.split("/").map((item) => ((item.split(":").length > 0) ?
+        h("p", null, h("strong", null, item.split(":")[0] + ": "), " ", item.split(":")[1]) :
+        h("p", null, item))))) : null)));
+  }
+  static get style() { return pnProductCardInfoCss; }
+}, [0, "pn-product-card-info", {
+    "rulle": [1],
+    "paket": [1],
+    "label": [1],
+    "text": [1]
+  }]);
+h("pn-icon", { symbol: "align-center", small: "false", color: "black" });
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-product-card-info"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-product-card-info":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnProductCardInfo);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnProductCardInfo as P, defineCustomElement as d };

package/components/pn-product-card-price.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnProductCardPrice extends Components.PnProductCardPrice, HTMLElement {}
+export const PnProductCardPrice: {
+  prototype: PnProductCardPrice;
+  new (): PnProductCardPrice;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-product-card-price.js

@@ -0,0 +1,6 @@
+import { P as PnProductCardPrice$1, d as defineCustomElement$1 } from './pn-product-card-price2.js';
+
+const PnProductCardPrice = PnProductCardPrice$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnProductCardPrice, defineCustomElement };

package/components/pn-product-card-price2.js

@@ -0,0 +1,48 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnProductCardPriceCss = "pn-product-card-price{margin-top:1rem;white-space:nowrap;text-align:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pn-product-card-price span:last-child{display:inline-block;margin-left:0.2em}pn-product-card-price+pn-product-card-price{margin-right:0}pn-product-card-price pn-icon{display:inline-block;-ms-flex-item-align:center;align-self:center}pn-product-card-price .price{font-size:2.5em;font-weight:bold;-ms-flex-order:1;order:1}pn-product-card-price pn-button{min-width:12.8em;font-size:1.25;-ms-flex-order:2;order:2}@media screen and (min-width: 48em){pn-product-card-price pn-button{-ms-flex-order:3;order:3;margin-bottom:1.6rem}}pn-product-card-price p{font-weight:lighter;font-size:0.875em;-ms-flex-item-align:center;align-self:center;margin-top:0.8rem;-ms-flex-order:3;order:3}@media screen and (min-width: 48em){pn-product-card-price p{-ms-flex-order:2;order:2}}";
+
+const PnProductCardPrice = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.label = undefined;
+    this.amount = undefined;
+    this.currency = undefined;
+    this.note = undefined;
+    this.url = undefined;
+    this.service = undefined;
+    this.linkid = undefined;
+  }
+  render() {
+    if (!this.amount) {
+      return;
+    }
+    return (this.url) ? (h(Host, { id: this.linkid }, h("div", { class: "price" }, (this.amount) ? (h("span", null, this.amount)) : null, (this.currency) ? (h("span", null, " " + this.currency)) : null), (this.note) ? (h("p", null, this.note)) : null, (this.label) ? (h("pn-button", { id: 'pricecta-' + this.linkid, small: "true", icon: "open-in-new", appearance: "light", href: this.url, target: "_blank" }, this.label)) : null)) : (h(Host, null, h("div", { class: "price" }, (this.amount) ? (h("span", null, this.amount)) : null, (this.currency) ? (h("span", null, this.currency)) : null)));
+  }
+  static get style() { return pnProductCardPriceCss; }
+}, [0, "pn-product-card-price", {
+    "label": [1],
+    "amount": [1],
+    "currency": [1],
+    "note": [1],
+    "url": [1],
+    "service": [1],
+    "linkid": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-product-card-price"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-product-card-price":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnProductCardPrice);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnProductCardPrice as P, defineCustomElement as d };

package/components/pn-product-card.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnProductCard extends Components.PnProductCard, HTMLElement {}
+export const PnProductCard: {
+  prototype: PnProductCard;
+  new (): PnProductCard;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-product-card.js

@@ -0,0 +1,6 @@
+import { P as PnProductCard$1, d as defineCustomElement$1 } from './pn-product-card2.js';
+
+const PnProductCard = PnProductCard$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnProductCard, defineCustomElement };

package/components/pn-product-card2.js

@@ -0,0 +1,30 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnProductCardCss = "pn-product-card{border:0.1rem solid #D3CECB;outline:none;background:#FFFFFF;-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;word-break:break-word;text-decoration:none;border-radius:0.8rem;position:relative;padding:11rem 2.4rem 2.4rem;margin-bottom:1.6rem}@media screen and (min-width: 36em){pn-product-card{padding:2.4rem}}pn-product-card [slot=title]{display:-ms-flexbox;display:flex;width:100%;margin-bottom:0.8rem;gap:1.6rem;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center}@media screen and (min-width: 36em){pn-product-card [slot=title]{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:inherit;align-items:inherit}}pn-product-card [slot=title] h2{width:100%}@media screen and (min-width: 36em){pn-product-card [slot=title] h2{width:auto}}pn-product-card [slot=title] h2>a{color:#000000}pn-product-card [slot=title] h2>a::after{content:\"\" !important}pn-product-card [slot=note]{margin-top:1em;margin-bottom:1em;font-size:0.8em}pn-product-card [slot=additionalUSP]{display:-ms-flexbox;display:flex}pn-product-card [slot=additionalUSP] :first-child{margin-left:0em}pn-product-card [slot=additionalUSP] span{margin-left:1em;background:#D3CECB;color:#2D2013;border-radius:0.25em;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;padding:0.3em;margin-top:0.5em;font-size:0.75em}pn-product-card>pn-illustration{min-width:8rem;width:8rem;height:8rem;-ms-flex-item-align:center;align-self:center;position:absolute;top:1.6rem;-webkit-transform:translateX(-50%);transform:translateX(-50%);left:50%;-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);border-radius:100%}@media screen and (min-width: 36em){pn-product-card>pn-illustration{-webkit-box-shadow:none;box-shadow:none;top:1.6rem;right:1.6rem;left:auto;-webkit-transform:none;transform:none}}@media screen and (min-width: 48em){pn-product-card>pn-illustration{position:static;top:auto;right:auto;margin-right:3rem}}pn-product-card .cardcontent{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 48em){pn-product-card .cardcontent{-ms-flex-direction:row;flex-direction:row;gap:1.6rem}}pn-product-card [slot=cardprice]{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;padding:0.6em;-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 36em){pn-product-card [slot=cardprice]{-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}}@media screen and (min-width: 48em){pn-product-card [slot=cardprice]{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:end;align-items:flex-end}}pn-product-card [slot=mobiledownload]{margin-top:1rem;white-space:nowrap;text-align:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pn-product-card [slot=mobiledownload] #riktiga{-ms-flex-order:4;order:4;margin-top:1em}pn-product-card [slot=mobiledownload] #riktiga>div>a::after{content:\"\" !important}pn-product-card [slot=mobiledownload] .riktigaAndroidImg{width:6em;margin:0.5em}pn-product-card [slot=mobiledownload] .riktigaAppleImg{width:5.6em;margin:0.5em}pn-product-card [slot=mobiledownload] a{text-decoration:none;color:#005D92}pn-product-card [slot=mobiledownload] a h3{text-decoration:underline}pn-product-card [slot=servicepoint]{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-positive:2;flex-grow:2;-ms-flex-align:end;align-items:flex-end;text-align:center}@media screen and (min-width: 36em){pn-product-card [slot=servicepoint]{-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between}}@media screen and (min-width: 48em){pn-product-card [slot=servicepoint]{-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-align:end;align-items:flex-end}}pn-product-card .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-card .info{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-positive:1;flex-grow:1;-ms-flex-flow:wrap;flex-flow:wrap;padding:0 1em 0 0}pn-product-card .info>*{min-width:6em;margin:0.5em 1em 0.5em 0}";
+
+const PnProductCard = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+  }
+  render() {
+    return (h(Host, null, h("slot", { name: "illustration" }), h("div", { class: "cardcontent" }, h("div", { class: "details" }, h("slot", { name: "title" }), h("slot", { name: "content" }), h("div", { class: "info" }, h("slot", null)), h("slot", { name: "note" }), h("slot", { name: "additionalUSP" })), h("div", { class: "cardprice" }, h("slot", { name: "cardprice" }), h("slot", { name: "mobiledownload" }), h("slot", { name: "servicepoint" })))));
+  }
+  static get style() { return pnProductCardCss; }
+}, [4, "pn-product-card"]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-product-card"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-product-card":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnProductCard);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnProductCard as P, defineCustomElement as d };

package/components/pn-product-pricelist-result.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnProductPricelistResult extends Components.PnProductPricelistResult, HTMLElement {}
+export const PnProductPricelistResult: {
+  prototype: PnProductPricelistResult;
+  new (): PnProductPricelistResult;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

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

@@ -0,0 +1,130 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { c as createStore } from './index2.js';
+import { s as sendDirectUrl, a as stampShopUrl } from './data.js';
+import { d as defineCustomElement$5 } from './pn-product-card2.js';
+import { d as defineCustomElement$4 } from './pn-product-card-info2.js';
+import { d as defineCustomElement$3 } from './pn-product-card-price2.js';
+import { d as defineCustomElement$2 } from './pn-titletag2.js';
+
+// 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: ""
+  }
+});
+
+const pnProductPricelistResultCss = "";
+
+const PnFindProductPricelistResult = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.item = null;
+    this.description = [];
+    this.shownitems = [];
+    this.showMeasurement = false;
+    this.weightText = "";
+  }
+  componentWillLoad() {
+    this.composeItems();
+  }
+  composeItems() {
+    if (this.item.description) {
+      this.description = this.item.description.split("#bullet").filter(x => x !== "");
+    }
+    this.showMeasurement = (this.item.maxmått !== null) || (this.item.rulle !== null);
+    this.shownitems = [this.item];
+    // if (this.item.pricestamps) {
+    //   this.shownitems.push({...this.item, priceagent: null, pricesenddirect: null});
+    // }
+    // if (this.item.priceagent) {
+    //   this.shownitems.push({...this.item, pricestamps: null, pricesenddirect: null});
+    // }
+    // if (this.item.pricesenddirect) {
+    //   this.shownitems.push({...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-card", { "data-productid": item.id }, h("pn-illustration", { slot: "illustration", illustration: this.item.illustration }), h("div", { slot: "title" }, h("h2", null, item.name, " "), (this.item.highestrankusp) ?
+      (this.item.highestrankusp === "Billigast") ?
+        (h("pn-titletag", { slot: "Billigast", icon: "box-label" }, this.item.highestrankusp))
+        : (h("pn-titletag", { slot: "Snabbast", icon: "bolt", color: "blue700" }, this.item.highestrankusp)) : null), h("div", { slot: "content" }, h("div", { class: "content" }, (this.item.description) ? (h("div", { class: "description" }, this.description.map((desc) => (h("li", null, desc))))) : null, (this.item.info) ? (h("div", { class: "description" }, this.item.info)) : null)), this.item.note ? (h("small", { slot: "note" }, h("p", null, this.item.note))) : null, this.item.additionalusp ? (h("div", { slot: "additionalUSP" })) : null, this.showMeasurement ? (h("pn-product-card-info", { paket: this.item.maxmått, rulle: this.item.rulle })) : null, h("div", { slot: "cardprice" }, this.item.pricesenddirect ? (h("pn-product-card-price", { slot: "sendDirectPrice", label: state.i18n.senddirectcta, amount: this.item.pricesenddirect + '', currency: state.market.currency, url: sendDirectUrl, service: this.item.name + "-portal" })) : null, this.item.pricestamps ? (h("pn-product-card-price", { slot: "stampPrice", label: state.i18n.stampshopcta, amount: this.item.pricestamps + '', currency: state.market.currency, url: stampShopUrl, service: this.item.name + "-eshop" })) : null))
+    // <pn-product-tile>
+    //   <pn-illustration slot="illustration" illustration={ item.illustration }></pn-illustration>
+    //   <div slot="content">
+    //     <div class="content">
+    //       <h3>{item.name}</h3>
+    //       {(item.description) ? (<div class="description">{item.description}</div>) : null}
+    //       {(item.info) ? (<div class="description">{item.info}</div>) : null}
+    //     </div>
+    //   </div>
+    //   { item.maxweight ? (<pn-product-tile-info label={state.i18n.maxweightlabel} text={this.weightText}></pn-product-tile-info>) : null }
+    //   {/* { item.maximummeasurements ? (<pn-product-tile-info label={state.i18n.maxmeasurementlabel} text={item.maximummeasurements}></pn-product-tile-info>) : null } */}
+    //   { item.pricestamps ? (<pn-product-tile-price slot="price" label={state.i18n.stampshopcta} amount={item.pricestamps+''} currency={ state.market.currency }></pn-product-tile-price>) : null }
+    //   {/* { item.priceagent ? (<pn-product-tile-price slot="price" label="" amount={item.priceagent+''} currency={ state.market.currency } url="https://shop.postnord.se/ebutik/default.aspx"></pn-product-tile-price>) : null } */}
+    //   { item.pricesenddirect ? (<pn-product-tile-price slot="price" label={state.i18n.senddirectcta} amount={item.pricesenddirect+''} currency={ state.market.currency } url="https://portal.postnord.com/skickadirekt/"></pn-product-tile-price>) : null }
+    //   { item.note ? (<small slot="note"><p>{item.note}</p></small>) : null } 
+    // </pn-product-tile>
+    ))));
+  }
+  static get watchers() { return {
+    "item": ["composeItems"]
+  }; }
+  static get style() { return pnProductPricelistResultCss; }
+}, [0, "pn-product-pricelist-result", {
+    "item": [1040],
+    "description": [16],
+    "shownitems": [16],
+    "showMeasurement": [4, "show-measurement"],
+    "weightText": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-product-pricelist-result", "pn-product-card", "pn-product-card-info", "pn-product-card-price", "pn-titletag"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-product-pricelist-result":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnFindProductPricelistResult);
+      }
+      break;
+    case "pn-product-card":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "pn-product-card-info":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "pn-product-card-price":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "pn-titletag":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnProductPricelistResult = PnFindProductPricelistResult;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnProductPricelistResult, defineCustomElement };

package/components/pn-product-pricelist.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnProductPricelist extends Components.PnProductPricelist, HTMLElement {}
+export const PnProductPricelist: {
+  prototype: PnProductPricelist;
+  new (): PnProductPricelist;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;