@postnord/pn-marketweb-components 2.0.85 → 2.0.87

package/cjs/pn-proxio-pricegroup.cjs.entry.js

@@ -22,7 +22,7 @@ const translations = {
   }
 };
 
-const pnProxioPricegroupCss = "pn-proxio-pricegroup div.weightcontainer{margin:3rem 0}pn-proxio-pricegroup div.weightvaluecontainer{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-line-pack:center;align-content:center;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:start;align-items:flex-start}pn-proxio-pricegroup div.weightdata{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;height:5rem;-ms-flex-pack:justify;justify-content:space-between}pn-proxio-pricegroup input[type=radio]{-webkit-appearance:none;-moz-appearance:none;width:1.3rem;height:1.3rem;background-color:#005D92;border-radius:50%}pn-proxio-pricegroup input[type=radio]:checked{z-index:1;-webkit-transform:translateY(-0.1rem);transform:translateY(-0.1rem);height:1.5rem;width:1.5rem;-webkit-box-shadow:0 0 0 0.3rem #FFFFFF, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.3rem #FFFFFF, 0 0 0 0.4rem #005D92}pn-proxio-pricegroup pn-button[disabled=disabled]{opacity:0.2}pn-proxio-pricegroup pn-button button div.button-tooltip{visibility:hidden;display:none}pn-proxio-pricegroup pn-button button:focus .pn-button-bg{-webkit-box-shadow:none;box-shadow:none}pn-proxio-pricegroup div.weightradios{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;color:#005D92;width:80%;margin-left:auto;margin-right:auto;position:relative}pn-proxio-pricegroup div.weightline{width:100%;background-color:#F3F2F2;z-index:-1;height:0.7rem;-webkit-transform:translateX(2.1rem) translateY(1.32rem);transform:translateX(2.1rem) translateY(1.32rem);border-radius:3rem;margin-right:3.5rem}pn-proxio-pricegroup .activeweight{font-size:large;font-weight:bold}";
+const pnProxioPricegroupCss = "pn-proxio-pricegroup div.proxio-pricegroup-container{max-width:99.4rem}pn-proxio-pricegroup div.weightcontainer{margin:2.8rem 0}pn-proxio-pricegroup div.weightvaluecontainer{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-line-pack:center;align-content:center;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:start;align-items:flex-start}pn-proxio-pricegroup div.weightvaluecontainer pn-button{-webkit-transform:translateY(-0.4rem);transform:translateY(-0.4rem)}pn-proxio-pricegroup div.weightradios{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap;color:#005D92;width:80%;margin:0 3.6rem;position:relative;width:0%}pn-proxio-pricegroup div.weightradios[data-carousel-container-position=end50]{width:45%;margin-left:auto;margin-right:3.6rem}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightradios[data-carousel-container-position=end50]{width:40%}}pn-proxio-pricegroup div.weightradios[data-carousel-container-position=end75]{width:65%;margin-left:auto;margin-right:3.6rem}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightradios[data-carousel-container-position=end75]{margin-right:auto}}pn-proxio-pricegroup div.weightradios[data-carousel-container-position=start50]{width:45%;margin-right:auto;margin-left:3.6rem}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightradios[data-carousel-container-position=start50]{width:40%}}pn-proxio-pricegroup div.weightradios[data-carousel-container-position=start75]{width:65%;margin-right:auto;margin-left:3.6rem}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightradios[data-carousel-container-position=start75]{margin-left:auto}}pn-proxio-pricegroup div.weightradios[data-carousel-container-position=default]{-ms-flex:0 0 auto;flex:0 0 auto;width:80%}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightradios[data-carousel-container-position=default]{width:65%}}pn-proxio-pricegroup div.weightdata{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:center;align-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-pack:justify;justify-content:space-between;gap:1.2rem;min-width:4rem;cursor:pointer}pn-proxio-pricegroup div.weightdata label{font-size:1.4rem;cursor:pointer}pn-proxio-pricegroup div.weightdata[data-carousel-position=\"0\"]{font-size:2rem;font-weight:700}@media screen and (max-width: 48em){pn-proxio-pricegroup div.weightdata[data-carousel-position=\"2\"],pn-proxio-pricegroup div.weightdata[data-carousel-position=\"-2\"]{display:none}}pn-proxio-pricegroup div.weightdata[data-carousel-position=outside]{display:none}pn-proxio-pricegroup div.weightdata input[type=radio]{-webkit-appearance:none;-moz-appearance:none;width:1.2rem;height:1.2rem;background-color:#005D92;border-radius:50%;margin:0;cursor:pointer}pn-proxio-pricegroup div.weightdata input[type=radio]:checked{z-index:1;-webkit-transform:translateY(-0.1rem);transform:translateY(-0.1rem);height:1.4rem;width:1.4rem;-webkit-box-shadow:0 0 0 0.3rem #FFFFFF, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.3rem #FFFFFF, 0 0 0 0.4rem #005D92}pn-proxio-pricegroup div.weightline{width:100%;background-color:#F3F2F2;z-index:-1;height:0.8rem;-webkit-transform:translateX(2.1rem) translateY(1.32rem);transform:translateX(2.1rem) translateY(1rem);border-radius:2rem;margin-right:3.5rem}pn-proxio-pricegroup pn-button[disabled=disabled]{opacity:0.2}pn-proxio-pricegroup pn-button[disabled=disabled] button{cursor:default}pn-proxio-pricegroup pn-button[disabled=disabled] button.pn-button-light .pn-button-bg:after{background-color:#FFFFFF}pn-proxio-pricegroup pn-button[disabled=disabled] button[data-tooltip-open]:before{display:none}pn-proxio-pricegroup pn-button button div.button-tooltip{display:none}pn-proxio-pricegroup pn-button button:focus .pn-button-bg{-webkit-box-shadow:none;box-shadow:none}";
 
 let PnProxioPricegroup = class {
   constructor(hostRef) {
@@ -86,21 +86,64 @@ let PnProxioPricegroup = class {
       this.i18n = translations[this.culture];
     }
   }
-  getPrice(product) {
+  getPriceString(product) {
     var _a;
-    return (_a = product === null || product === void 0 ? void 0 : product.weightAndPriceList[this.activeWeightIndex]) === null || _a === void 0 ? void 0 : _a.item2;
+    let price = product.weightAndPriceList ? (_a = product === null || product === void 0 ? void 0 : product.weightAndPriceList[this.activeWeightIndex]) === null || _a === void 0 ? void 0 : _a.item2 : '';
+    return price ? this.i18n.from + price : '';
   }
   isActive(index) {
     return index === this.activeWeightIndex;
   }
+  getCarouselPosition(index) {
+    switch (index) {
+      case this.activeWeightIndex - 2: {
+        return -2;
+      }
+      case this.activeWeightIndex - 1: {
+        return -1;
+      }
+      case this.activeWeightIndex: {
+        return 0;
+      }
+      case this.activeWeightIndex + 1: {
+        return 1;
+      }
+      case this.activeWeightIndex + 2: {
+        return 2;
+      }
+      default:
+        return "outside";
+    }
+  }
+  getContainerPosition() {
+    let maxIndex = this.data.proxioProduct.weightAndPriceList.length - 1;
+    switch (this.activeWeightIndex) {
+      case 0: {
+        return "end50";
+      }
+      case 1: {
+        return "end75";
+      }
+      case maxIndex - 1: {
+        return "start75";
+      }
+      case maxIndex: {
+        return "start50";
+      }
+      default: {
+        return "default";
+      }
+    }
+  }
   render() {
     var _a, _b, _c;
-    return (index.h(index.Host, null, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.proxioProduct) ? (index.h("div", null, index.h("div", { class: "weightcontainer" }, this.data.proxioProduct.weightAndPriceList ?
-      (index.h("div", { class: "weightvaluecontainer" }, index.h("pn-button", { disabled: this.activeWeightIndex === 0 ? ("disabled") : (null), "icon-only": "true", icon: "arrow-left", appearance: "light", small: "true", onClick: () => this.setActiveWeightIndex(this.activeWeightIndex - 1) }), index.h("div", { class: "weightradios" }, index.h("div", { class: "weightline" }), this.data.proxioProduct.weightAndPriceList.map((weightItem, index$1) => index.h("div", { class: "weightdata" + (this.isActive(index$1) ? (" activeweight") : ("")) }, index.h("input", { type: "radio", id: "weightradio" + index$1, name: "weightradio", value: index$1, checked: this.isActive(index$1), onClick: () => this.setActiveWeightIndex(index$1) }), index.h("label", { htmlFor: "weightradio" + index$1 }, weightItem.item1)))), index.h("pn-button", { disabled: this.activeWeightIndex === ((_c = (_b = this.data.proxioProduct) === null || _b === void 0 ? void 0 : _b.weightAndPriceList) === null || _c === void 0 ? void 0 : _c.length) - 1 ? ("disabled") : (null), icon: "arrow-right", appearance: "light", "icon-only": "true", small: "true", onClick: () => this.setActiveWeightIndex(this.activeWeightIndex + 1) }))) : (null)), index.h("pn-proxio-productcard", null, index.h("h2", { slot: "title" }, this.data.proxioProduct.productTitle), index.h("pn-proxio-productcard-description", { slot: "description", heading: this.data.proxioProduct.productPreamble, highlight: this.data.proxioProduct.deliveryDateInformation, list: this.data.proxioProduct.productDescriptionBulletListItems }), index.h("div", { slot: "information" }, index.h("pn-proxio-productcard-information", { label: this.i18n.labelPackage, information: this.data.proxioProduct.productPackageDimensionsList }), index.h("pn-proxio-productcard-information", { label: this.i18n.labelRoll, information: this.data.proxioProduct.productRollDimensionsList })), index.h("div", { slot: "bottomtags" }, this.data.proxioProduct.tracable ?
+    return (index.h(index.Host, null, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.proxioProduct) ? (index.h("div", { class: "proxio-pricegroup-container" }, index.h("div", { class: "weightcontainer" }, this.data.proxioProduct.weightAndPriceList ?
+      (index.h("div", { class: "weightvaluecontainer" }, index.h("pn-button", { disabled: this.activeWeightIndex === 0 ? ("disabled") : (null), "icon-only": "true", icon: "arrow-left", appearance: "light", small: "true", onClick: () => this.setActiveWeightIndex(this.activeWeightIndex - 1) }), index.h("div", { class: "weightradios ", "data-carousel-container-position": this.getContainerPosition() }, index.h("div", { class: "weightline" }), this.data.proxioProduct.weightAndPriceList.map((weightItem, index$1) => this.getCarouselPosition(index$1) !== null ?
+        index.h("div", { class: "weightdata", "data-carousel-position": this.getCarouselPosition(index$1), onClick: () => this.setActiveWeightIndex(index$1) }, index.h("input", { type: "radio", id: "weightradio" + index$1, name: "weightradio", value: index$1, checked: this.isActive(index$1) }), index.h("label", { htmlFor: "weightradio" + index$1 }, weightItem.item1)) : null)), index.h("pn-button", { disabled: this.activeWeightIndex === ((_c = (_b = this.data.proxioProduct) === null || _b === void 0 ? void 0 : _b.weightAndPriceList) === null || _c === void 0 ? void 0 : _c.length) - 1 ? ("disabled") : (null), icon: "arrow-right", appearance: "light", "icon-only": "true", small: "true", onClick: () => this.setActiveWeightIndex(this.activeWeightIndex + 1) }))) : (null)), index.h("pn-proxio-productcard", null, index.h("pn-illustration", { slot: "illustrationmobile", illustration: this.data.proxioProduct.productIcon }), index.h("h2", { slot: "title" }, this.data.proxioProduct.productTitle), index.h("pn-proxio-productcard-description", { slot: "description", heading: this.data.proxioProduct.productPreamble, highlight: this.data.proxioProduct.deliveryDateInformation, list: this.data.proxioProduct.productDescriptionBulletListItems }), index.h("div", { slot: "information" }, index.h("pn-proxio-productcard-information", { label: this.i18n.labelPackage, information: this.data.proxioProduct.productPackageDimensionsList }), index.h("pn-proxio-productcard-information", { label: this.i18n.labelRoll, information: this.data.proxioProduct.productRollDimensionsList })), index.h("div", { slot: "bottomtags" }, this.data.proxioProduct.tracable ?
       (index.h("pn-titletag", { color: "gray50" }, this.i18n.notTraceable)) : (null), this.data.proxioProduct.usp1 ?
       (index.h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp1)) : (null), this.data.proxioProduct.usp2 ?
       (index.h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp2)) : (null), this.data.proxioProduct.usp3 ?
-      (index.h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp3)) : (null)), index.h("pn-illustration", { slot: "illustration", illustration: this.data.proxioProduct.productIcon }), index.h("div", { slot: "pricelink" }, index.h("pn-proxio-productcard-pricelink", { price: this.i18n.from + this.getPrice(this.data.proxioProduct), link: this.data.proxioProduct.productLink, linktext: this.data.proxioProduct.productLinkText }), this.data.relatedProxioProducts ? (this.data.relatedProxioProducts.map((product) => (index.h("pn-proxio-productcard-pricelink", { price: this.i18n.from + this.getPrice(product), link: product.productLink, linktext: product.productLinkText })))) : (null))))) : (null)));
+      (index.h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp3)) : (null)), index.h("pn-illustration", { slot: "illustration", illustration: this.data.proxioProduct.productIcon }), index.h("div", { slot: "pricelink" }, index.h("pn-proxio-productcard-pricelink", { price: this.getPriceString(this.data.proxioProduct), link: this.data.proxioProduct.productLink, linktext: this.data.proxioProduct.productLinkText }), this.data.relatedProxioProducts ? (this.data.relatedProxioProducts.map((product) => (index.h("pn-proxio-productcard-pricelink", { price: this.getPriceString(product), link: product.productLink, linktext: product.productLinkText })))) : (null))))) : (null)));
   }
 };
 PnProxioPricegroup.style = pnProxioPricegroupCss;

package/cjs/pn-proxio-productcard_4.cjs.entry.js

@@ -4,19 +4,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3e27c79.js');
 
-const pnProxioProductcardCss = "pn-proxio-productcard .cardcontent{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;border:solid 0.1rem #F9F8F8;border-radius:0.8rem;overflow:hidden;margin-left:auto;margin-right:auto;margin-bottom:1.6rem}pn-proxio-productcard .carddetails{min-width:70%;padding:2rem;display:-ms-flexbox;display:flex;gap:1rem;-ms-flex-direction:column;flex-direction:column}pn-proxio-productcard .cardcalltoactions{min-width:30%;background-color:#EFFBFF;padding:1rem;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center}pn-proxio-productcard .cardcalltoactions pn-illustration[slot=illustration] .pn-illustration{max-width:10rem;margin-left:auto;margin-right:auto}pn-proxio-productcard [slot=information]{display:-ms-flexbox;display:flex;gap:1rem}pn-proxio-productcard [slot=uppertags]{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;gap:2rem}pn-proxio-productcard [slot=bottomtags]{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;gap:2rem;margin:1rem 0}pn-proxio-productcard .heading{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:row;flex-direction:row}pn-proxio-productcard [slot=title]{text-decoration:underline}";
+const pnProxioProductcardCss = "pn-proxio-productcard .cardcontent{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;border:solid 0.1rem #F9F8F8;border-radius:0.8rem;overflow:hidden;margin-left:auto;margin-right:auto;margin-bottom:1.6rem}@media screen and (max-width: 48em){pn-proxio-productcard .cardcontent{-ms-flex-direction:column;flex-direction:column}}pn-proxio-productcard .carddetails{min-width:70%;padding:2.4rem;display:-ms-flexbox;display:flex;gap:0.8rem;-ms-flex-direction:column;flex-direction:column}@media screen and (max-width: 48em){pn-proxio-productcard .carddetails{gap:1.6rem;margin-bottom:0.8rem}}pn-proxio-productcard .carddetails pn-illustration[slot=illustrationmobile]{display:none}@media screen and (max-width: 48em){pn-proxio-productcard .carddetails pn-illustration[slot=illustrationmobile]{margin-top:1.6rem;display:block}pn-proxio-productcard .carddetails pn-illustration[slot=illustrationmobile] .pn-illustration{max-width:8rem;height:8rem;margin-left:auto;margin-right:auto}}pn-proxio-productcard .cardcalltoactions{min-width:30%;background-color:#EFFBFF;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center;-ms-flex-line-pack:center;align-content:center}@media screen and (max-width: 48em){pn-proxio-productcard .cardcalltoactions pn-illustration[slot=illustration]{display:none}}pn-proxio-productcard .cardcalltoactions pn-illustration[slot=illustration] .pn-illustration{max-width:8rem;margin-left:auto;margin-right:auto;margin-top:4rem}pn-proxio-productcard [slot=information]{display:-ms-flexbox;display:flex;gap:1rem}@media screen and (max-width: 48em){pn-proxio-productcard [slot=information]{-ms-flex-direction:column;flex-direction:column;gap:1.6rem}}pn-proxio-productcard [slot=uppertags]{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;gap:2rem}pn-proxio-productcard [slot=bottomtags]{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-pack:start;justify-content:flex-start;-ms-flex-align:center;align-items:center;gap:2rem;margin:0.8rem 0}pn-proxio-productcard .heading{display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-direction:row;flex-direction:row}pn-proxio-productcard [slot=title]{text-decoration:underline}@media screen and (max-width: 48em){pn-proxio-productcard [slot=title]{text-decoration:none}}";
 
 let PnProxioProductcard = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "cardcontent" }, index.h("div", { class: "carddetails" }, index.h("div", { class: "heading" }, index.h("slot", { name: "title" }), index.h("slot", { name: "uppertags" })), index.h("slot", { name: "description" }), index.h("slot", { name: "information" }), index.h("slot", { name: "bottomtags" })), index.h("div", { class: "cardcalltoactions" }, index.h("slot", { name: "illustration" }), index.h("slot", { name: "pricelink" })))));
+    return (index.h(index.Host, null, index.h("div", { class: "cardcontent" }, index.h("div", { class: "carddetails" }, index.h("slot", { name: "illustrationmobile" }), index.h("div", { class: "heading" }, index.h("slot", { name: "title" }), index.h("slot", { name: "uppertags" })), index.h("slot", { name: "description" }), index.h("slot", { name: "information" }), index.h("slot", { name: "bottomtags" })), index.h("div", { class: "cardcalltoactions" }, index.h("slot", { name: "illustration" }), index.h("slot", { name: "pricelink" })))));
   }
 };
 PnProxioProductcard.style = pnProxioProductcardCss;
 
-const pnProxioProductcardDescriptionCss = "pn-proxio-productcard-description h3{font-size:2rem}pn-proxio-productcard-description .highlight{color:#0fa85c}";
+const pnProxioProductcardDescriptionCss = "pn-proxio-productcard-description h3{font-size:1.6rem}pn-proxio-productcard-description ul{padding-left:2.5rem}pn-proxio-productcard-description li{font-size:1.6rem;line-height:2.2rem}pn-proxio-productcard-description .highlight{color:#0AA85C}";
 
 let PnProxioProductcardDescription = class {
   constructor(hostRef) {
@@ -33,7 +33,7 @@ let PnProxioProductcardDescription = class {
 };
 PnProxioProductcardDescription.style = pnProxioProductcardDescriptionCss;
 
-const pnProxioProductcardInformationCss = "pn-proxio-productcard-information{-ms-flex-item-align:center;align-self:center}pn-proxio-productcard-information p strong.label{font-weight:500}";
+const pnProxioProductcardInformationCss = "pn-proxio-productcard-information p.cardinfocontent-title{margin-bottom:0.4rem}pn-proxio-productcard-information p strong.cardinfocontent-label{font-size:1.4rem;font-weight:500}";
 
 let PnProxioProductcardInformation = class {
   constructor(hostRef) {
@@ -41,14 +41,14 @@ let PnProxioProductcardInformation = class {
     this.information = [];
   }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "cardinfocontent" }, this.information && this.label ? (index.h("div", { class: "cardinfocontent-item" }, index.h("p", null, index.h("strong", null, this.label)), this.information.map((item) => (item ?
-      (index.h("p", null, index.h("strong", { class: "label" }, item.item1, ":"), " ", item.item2))
+    return (index.h(index.Host, null, index.h("div", { class: "cardinfocontent" }, this.information && this.label ? (index.h("div", { class: "cardinfocontent-item" }, index.h("p", { class: "cardinfocontent-title" }, index.h("strong", null, this.label)), this.information.map((item) => (item ?
+      (index.h("p", null, index.h("strong", { class: "cardinfocontent-label" }, item.item1, ":"), " ", item.item2))
       : (null))))) : null)));
   }
 };
 PnProxioProductcardInformation.style = pnProxioProductcardInformationCss;
 
-const pnProxioProductcardPricelinkCss = "pn-proxio-productcard-pricelink{-ms-flex-item-align:center;align-self:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;margin:2rem 1rem;gap:1rem;-ms-flex-line-pack:center;align-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}pn-proxio-productcard-pricelink pn-button{min-width:17rem}";
+const pnProxioProductcardPricelinkCss = "pn-proxio-productcard-pricelink{-ms-flex-item-align:center;align-self:center;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:center;align-items:center;margin:2rem 1rem;gap:0.8rem;-ms-flex-line-pack:center;align-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap}@media screen and (max-width: 48em){pn-proxio-productcard-pricelink{margin:2.4rem 1rem}}pn-proxio-productcard-pricelink h3{font-size:2rem}pn-proxio-productcard-pricelink pn-button{min-width:17.3rem}pn-proxio-productcard-pricelink pn-button a .pn-button-content{font-size:1.4rem;font-weight:500}@media screen and (max-width: 48em){pn-proxio-productcard-pricelink pn-button{min-width:30rem}}";
 
 let PnProxioProductcardPricelink = class {
   constructor(hostRef) {
@@ -56,7 +56,7 @@ let PnProxioProductcardPricelink = class {
   }
   render() {
     return this.link && this.linktext ?
-      (index.h(index.Host, null, this.price ? (index.h("h2", null, this.price)) : (null), index.h("pn-button", { small: "true", icon: "arrow-right", appearance: "light", href: this.link, target: "_blank", rel: "noopener nofollower noreferrer" }, this.linktext))) : (null);
+      (index.h(index.Host, null, this.price ? (index.h("h3", null, this.price)) : (null), index.h("pn-button", { small: "true", icon: "arrow-right", appearance: "light", href: this.link, target: "_blank", rel: "noopener nofollower noreferrer" }, this.linktext))) : (null);
   }
 };
 PnProxioProductcardPricelink.style = pnProxioProductcardPricelinkCss;

package/collection/components/widgets/pn-proxio-pricegroup/pn-proxio-pricegroup.css

@@ -1,71 +1,149 @@
+pn-proxio-pricegroup div.proxio-pricegroup-container {
+  max-width: 99.4rem;
+}
 pn-proxio-pricegroup div.weightcontainer {
-  margin: 3rem 0;
+  margin: 2.8rem 0;
 }
 pn-proxio-pricegroup div.weightvaluecontainer {
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
   align-content: center;
   justify-content: space-between;
   align-items: flex-start;
 }
+pn-proxio-pricegroup div.weightvaluecontainer pn-button {
+  transform: translateY(-0.4rem);
+}
+pn-proxio-pricegroup div.weightradios {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  color: #005D92;
+  width: 80%;
+  margin: 0 3.6rem;
+  position: relative;
+  width: 0%;
+}
+pn-proxio-pricegroup div.weightradios[data-carousel-container-position=end50] {
+  width: 45%;
+  margin-left: auto;
+  margin-right: 3.6rem;
+}
+@media screen and (max-width: 48em) {
+  pn-proxio-pricegroup div.weightradios[data-carousel-container-position=end50] {
+    width: 40%;
+  }
+}
+pn-proxio-pricegroup div.weightradios[data-carousel-container-position=end75] {
+  width: 65%;
+  margin-left: auto;
+  margin-right: 3.6rem;
+}
+@media screen and (max-width: 48em) {
+  pn-proxio-pricegroup div.weightradios[data-carousel-container-position=end75] {
+    margin-right: auto;
+  }
+}
+pn-proxio-pricegroup div.weightradios[data-carousel-container-position=start50] {
+  width: 45%;
+  margin-right: auto;
+  margin-left: 3.6rem;
+}
+@media screen and (max-width: 48em) {
+  pn-proxio-pricegroup div.weightradios[data-carousel-container-position=start50] {
+    width: 40%;
+  }
+}
+pn-proxio-pricegroup div.weightradios[data-carousel-container-position=start75] {
+  width: 65%;
+  margin-right: auto;
+  margin-left: 3.6rem;
+}
+@media screen and (max-width: 48em) {
+  pn-proxio-pricegroup div.weightradios[data-carousel-container-position=start75] {
+    margin-left: auto;
+  }
+}
+pn-proxio-pricegroup div.weightradios[data-carousel-container-position=default] {
+  flex: 0 0 auto;
+  width: 80%;
+}
+@media screen and (max-width: 48em) {
+  pn-proxio-pricegroup div.weightradios[data-carousel-container-position=default] {
+    width: 65%;
+  }
+}
 pn-proxio-pricegroup div.weightdata {
   display: flex;
   flex-direction: column;
   align-items: center;
   align-content: center;
   flex-wrap: wrap;
-  height: 5rem;
   justify-content: space-between;
+  gap: 1.2rem;
+  min-width: 4rem;
+  cursor: pointer;
+}
+pn-proxio-pricegroup div.weightdata label {
+  font-size: 1.4rem;
+  cursor: pointer;
+}
+pn-proxio-pricegroup div.weightdata[data-carousel-position="0"] {
+  font-size: 2rem;
+  font-weight: 700;
+}
+@media screen and (max-width: 48em) {
+  pn-proxio-pricegroup div.weightdata[data-carousel-position="2"], pn-proxio-pricegroup div.weightdata[data-carousel-position="-2"] {
+    display: none;
+  }
+}
+pn-proxio-pricegroup div.weightdata[data-carousel-position=outside] {
+  display: none;
 }
-pn-proxio-pricegroup input[type=radio] {
+pn-proxio-pricegroup div.weightdata input[type=radio] {
   -webkit-appearance: none;
   -moz-appearance: none;
-  width: 1.3rem;
-  height: 1.3rem;
+  width: 1.2rem;
+  height: 1.2rem;
   background-color: #005D92;
   border-radius: 50%;
+  margin: 0;
+  cursor: pointer;
 }
-pn-proxio-pricegroup input[type=radio]:checked {
+pn-proxio-pricegroup div.weightdata input[type=radio]:checked {
   z-index: 1;
   transform: translateY(-0.1rem);
-  height: 1.5rem;
-  width: 1.5rem;
+  height: 1.4rem;
+  width: 1.4rem;
   box-shadow: 0 0 0 0.3rem #FFFFFF, 0 0 0 0.4rem #005D92;
 }
+pn-proxio-pricegroup div.weightline {
+  width: 100%;
+  background-color: #F3F2F2;
+  z-index: -1;
+  height: 0.8rem;
+  -webkit-transform: translateX(2.1rem) translateY(1.32rem);
+  transform: translateX(2.1rem) translateY(1rem);
+  border-radius: 2rem;
+  margin-right: 3.5rem;
+}
 pn-proxio-pricegroup pn-button[disabled=disabled] {
   opacity: 0.2;
 }
+pn-proxio-pricegroup pn-button[disabled=disabled] button {
+  cursor: default;
+}
+pn-proxio-pricegroup pn-button[disabled=disabled] button.pn-button-light .pn-button-bg:after {
+  background-color: #FFFFFF;
+}
+pn-proxio-pricegroup pn-button[disabled=disabled] button[data-tooltip-open]:before {
+  display: none;
+}
 pn-proxio-pricegroup pn-button button div.button-tooltip {
-  visibility: hidden;
   display: none;
 }
 pn-proxio-pricegroup pn-button button:focus .pn-button-bg {
   box-shadow: none;
-}
-pn-proxio-pricegroup div.weightradios {
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  align-items: center;
-  flex-wrap: wrap;
-  color: #005D92;
-  width: 80%;
-  margin-left: auto;
-  margin-right: auto;
-  position: relative;
-}
-pn-proxio-pricegroup div.weightline {
-  width: 100%;
-  background-color: #F3F2F2;
-  z-index: -1;
-  height: 0.7rem;
-  -webkit-transform: translateX(2.1rem) translateY(1.32rem);
-  transform: translateX(2.1rem) translateY(1.32rem);
-  border-radius: 3rem;
-  margin-right: 3.5rem;
-}
-pn-proxio-pricegroup .activeweight {
-  font-size: large;
-  font-weight: bold;
 }

package/collection/components/widgets/pn-proxio-pricegroup/pn-proxio-pricegroup.js

@@ -63,26 +63,70 @@ export class PnProxioPricegroup {
       this.i18n = translations[this.culture];
     }
   }
-  getPrice(product) {
+  getPriceString(product) {
     var _a;
-    return (_a = product === null || product === void 0 ? void 0 : product.weightAndPriceList[this.activeWeightIndex]) === null || _a === void 0 ? void 0 : _a.item2;
+    let price = product.weightAndPriceList ? (_a = product === null || product === void 0 ? void 0 : product.weightAndPriceList[this.activeWeightIndex]) === null || _a === void 0 ? void 0 : _a.item2 : '';
+    return price ? this.i18n.from + price : '';
   }
   isActive(index) {
     return index === this.activeWeightIndex;
   }
+  getCarouselPosition(index) {
+    switch (index) {
+      case this.activeWeightIndex - 2: {
+        return -2;
+      }
+      case this.activeWeightIndex - 1: {
+        return -1;
+      }
+      case this.activeWeightIndex: {
+        return 0;
+      }
+      case this.activeWeightIndex + 1: {
+        return 1;
+      }
+      case this.activeWeightIndex + 2: {
+        return 2;
+      }
+      default:
+        return "outside";
+    }
+  }
+  getContainerPosition() {
+    let maxIndex = this.data.proxioProduct.weightAndPriceList.length - 1;
+    switch (this.activeWeightIndex) {
+      case 0: {
+        return "end50";
+      }
+      case 1: {
+        return "end75";
+      }
+      case maxIndex - 1: {
+        return "start75";
+      }
+      case maxIndex: {
+        return "start50";
+      }
+      default: {
+        return "default";
+      }
+    }
+  }
   render() {
     var _a, _b, _c;
-    return (h(Host, null, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.proxioProduct) ? (h("div", null,
+    return (h(Host, null, ((_a = this.data) === null || _a === void 0 ? void 0 : _a.proxioProduct) ? (h("div", { class: "proxio-pricegroup-container" },
       h("div", { class: "weightcontainer" }, this.data.proxioProduct.weightAndPriceList ?
         (h("div", { class: "weightvaluecontainer" },
           h("pn-button", { disabled: this.activeWeightIndex === 0 ? ("disabled") : (null), "icon-only": "true", icon: "arrow-left", appearance: "light", small: "true", onClick: () => this.setActiveWeightIndex(this.activeWeightIndex - 1) }),
-          h("div", { class: "weightradios" },
+          h("div", { class: "weightradios ", "data-carousel-container-position": this.getContainerPosition() },
             h("div", { class: "weightline" }),
-            this.data.proxioProduct.weightAndPriceList.map((weightItem, index) => h("div", { class: "weightdata" + (this.isActive(index) ? (" activeweight") : ("")) },
-              h("input", { type: "radio", id: "weightradio" + index, name: "weightradio", value: index, checked: this.isActive(index), onClick: () => this.setActiveWeightIndex(index) }),
-              h("label", { htmlFor: "weightradio" + index }, weightItem.item1)))),
+            this.data.proxioProduct.weightAndPriceList.map((weightItem, index) => this.getCarouselPosition(index) !== null ?
+              h("div", { class: "weightdata", "data-carousel-position": this.getCarouselPosition(index), onClick: () => this.setActiveWeightIndex(index) },
+                h("input", { type: "radio", id: "weightradio" + index, name: "weightradio", value: index, checked: this.isActive(index) }),
+                h("label", { htmlFor: "weightradio" + index }, weightItem.item1)) : null)),
           h("pn-button", { disabled: this.activeWeightIndex === ((_c = (_b = this.data.proxioProduct) === null || _b === void 0 ? void 0 : _b.weightAndPriceList) === null || _c === void 0 ? void 0 : _c.length) - 1 ? ("disabled") : (null), icon: "arrow-right", appearance: "light", "icon-only": "true", small: "true", onClick: () => this.setActiveWeightIndex(this.activeWeightIndex + 1) }))) : (null)),
       h("pn-proxio-productcard", null,
+        h("pn-illustration", { slot: "illustrationmobile", illustration: this.data.proxioProduct.productIcon }),
         h("h2", { slot: "title" }, this.data.proxioProduct.productTitle),
         h("pn-proxio-productcard-description", { slot: "description", heading: this.data.proxioProduct.productPreamble, highlight: this.data.proxioProduct.deliveryDateInformation, list: this.data.proxioProduct.productDescriptionBulletListItems }),
         h("div", { slot: "information" },
@@ -99,8 +143,8 @@ export class PnProxioPricegroup {
             (h("pn-titletag", { color: "gray50" }, this.data.proxioProduct.usp3)) : (null)),
         h("pn-illustration", { slot: "illustration", illustration: this.data.proxioProduct.productIcon }),
         h("div", { slot: "pricelink" },
-          h("pn-proxio-productcard-pricelink", { price: this.i18n.from + this.getPrice(this.data.proxioProduct), link: this.data.proxioProduct.productLink, linktext: this.data.proxioProduct.productLinkText }),
-          this.data.relatedProxioProducts ? (this.data.relatedProxioProducts.map((product) => (h("pn-proxio-productcard-pricelink", { price: this.i18n.from + this.getPrice(product), link: product.productLink, linktext: product.productLinkText })))) : (null))))) : (null)));
+          h("pn-proxio-productcard-pricelink", { price: this.getPriceString(this.data.proxioProduct), link: this.data.proxioProduct.productLink, linktext: this.data.proxioProduct.productLinkText }),
+          this.data.relatedProxioProducts ? (this.data.relatedProxioProducts.map((product) => (h("pn-proxio-productcard-pricelink", { price: this.getPriceString(product), link: product.productLink, linktext: product.productLinkText })))) : (null))))) : (null)));
   }
   static get is() { return "pn-proxio-pricegroup"; }
   static get originalStyleUrls() { return {

package/collection/components/widgets/pn-proxio-pricegroup/pn-proxio-pricegroup.stories.js

@@ -9,7 +9,7 @@ export default {
 
 const Template = ({ ...args }) => {
   return `
-    <div style="max-width: 67em; margin:1em auto 0;">
+    <div style="max-width: 100rem; margin:1.6rem auto 0;">
       <pn-proxio-pricegroup
         culture="${args.culture}"
         tariffid="${args.tariffId}"

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard-description.css

@@ -1,6 +1,13 @@
 pn-proxio-productcard-description h3 {
-  font-size: 2rem;
+  font-size: 1.6rem;
+}
+pn-proxio-productcard-description ul {
+  padding-left: 2.5rem;
+}
+pn-proxio-productcard-description li {
+  font-size: 1.6rem;
+  line-height: 2.2rem;
 }
 pn-proxio-productcard-description .highlight {
-  color: #0fa85c;
+  color: #0AA85C;
 }

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard-information.css

@@ -1,6 +1,7 @@
-pn-proxio-productcard-information {
-  align-self: center;
+pn-proxio-productcard-information p.cardinfocontent-title {
+  margin-bottom: 0.4rem;
 }
-pn-proxio-productcard-information p strong.label {
+pn-proxio-productcard-information p strong.cardinfocontent-label {
+  font-size: 1.4rem;
   font-weight: 500;
 }

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard-information.js

@@ -6,11 +6,11 @@ export class PnProxioProductcardInformation {
   render() {
     return (h(Host, null,
       h("div", { class: "cardinfocontent" }, this.information && this.label ? (h("div", { class: "cardinfocontent-item" },
-        h("p", null,
+        h("p", { class: "cardinfocontent-title" },
           h("strong", null, this.label)),
         this.information.map((item) => (item ?
           (h("p", null,
-            h("strong", { class: "label" },
+            h("strong", { class: "cardinfocontent-label" },
               item.item1,
               ":"),
             " ",

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard-pricelink.css

@@ -4,10 +4,27 @@ pn-proxio-productcard-pricelink {
   flex-direction: column;
   align-items: center;
   margin: 2rem 1rem;
-  gap: 1rem;
+  gap: 0.8rem;
   align-content: center;
   flex-wrap: wrap;
 }
+@media screen and (max-width: 48em) {
+  pn-proxio-productcard-pricelink {
+    margin: 2.4rem 1rem;
+  }
+}
+pn-proxio-productcard-pricelink h3 {
+  font-size: 2rem;
+}
 pn-proxio-productcard-pricelink pn-button {
-  min-width: 17rem;
+  min-width: 17.3rem;
+}
+pn-proxio-productcard-pricelink pn-button a .pn-button-content {
+  font-size: 1.4rem;
+  font-weight: 500;
+}
+@media screen and (max-width: 48em) {
+  pn-proxio-productcard-pricelink pn-button {
+    min-width: 30rem;
+  }
 }

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard-pricelink.js

@@ -3,7 +3,7 @@ export class PnProxioProductcardPricelink {
   render() {
     return this.link && this.linktext ?
       (h(Host, null,
-        this.price ? (h("h2", null, this.price)) : (null),
+        this.price ? (h("h3", null, this.price)) : (null),
         h("pn-button", { small: "true", icon: "arrow-right", appearance: "light", href: this.link, target: "_blank", rel: "noopener nofollower noreferrer" }, this.linktext))) : (null);
   }
   static get is() { return "pn-proxio-productcard-pricelink"; }

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard.css

@@ -8,31 +8,68 @@ pn-proxio-productcard .cardcontent {
   margin-right: auto;
   margin-bottom: 1.6rem;
 }
+@media screen and (max-width: 48em) {
+  pn-proxio-productcard .cardcontent {
+    flex-direction: column;
+  }
+}
 pn-proxio-productcard .carddetails {
   min-width: 70%;
-  padding: 2rem;
+  padding: 2.4rem;
   display: flex;
-  gap: 1rem;
+  gap: 0.8rem;
   flex-direction: column;
 }
+@media screen and (max-width: 48em) {
+  pn-proxio-productcard .carddetails {
+    gap: 1.6rem;
+    margin-bottom: 0.8rem;
+  }
+}
+pn-proxio-productcard .carddetails pn-illustration[slot=illustrationmobile] {
+  display: none;
+}
+@media screen and (max-width: 48em) {
+  pn-proxio-productcard .carddetails pn-illustration[slot=illustrationmobile] {
+    margin-top: 1.6rem;
+    display: block;
+  }
+  pn-proxio-productcard .carddetails pn-illustration[slot=illustrationmobile] .pn-illustration {
+    max-width: 8rem;
+    height: 8rem;
+    margin-left: auto;
+    margin-right: auto;
+  }
+}
 pn-proxio-productcard .cardcalltoactions {
   min-width: 30%;
   background-color: #EFFBFF;
-  padding: 1rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-content: center;
 }
+@media screen and (max-width: 48em) {
+  pn-proxio-productcard .cardcalltoactions pn-illustration[slot=illustration] {
+    display: none;
+  }
+}
 pn-proxio-productcard .cardcalltoactions pn-illustration[slot=illustration] .pn-illustration {
-  max-width: 10rem;
+  max-width: 8rem;
   margin-left: auto;
   margin-right: auto;
+  margin-top: 4rem;
 }
 pn-proxio-productcard [slot=information] {
   display: flex;
   gap: 1rem;
 }
+@media screen and (max-width: 48em) {
+  pn-proxio-productcard [slot=information] {
+    flex-direction: column;
+    gap: 1.6rem;
+  }
+}
 pn-proxio-productcard [slot=uppertags] {
   display: flex;
   flex-direction: row;
@@ -48,7 +85,7 @@ pn-proxio-productcard [slot=bottomtags] {
   justify-content: flex-start;
   align-items: center;
   gap: 2rem;
-  margin: 1rem 0;
+  margin: 0.8rem 0;
 }
 pn-proxio-productcard .heading {
   display: flex;
@@ -57,4 +94,9 @@ pn-proxio-productcard .heading {
 }
 pn-proxio-productcard [slot=title] {
   text-decoration: underline;
+}
+@media screen and (max-width: 48em) {
+  pn-proxio-productcard [slot=title] {
+    text-decoration: none;
+  }
 }

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard.js

@@ -4,6 +4,7 @@ export class PnProxioProductcard {
     return (h(Host, null,
       h("div", { class: "cardcontent" },
         h("div", { class: "carddetails" },
+          h("slot", { name: "illustrationmobile" }),
           h("div", { class: "heading" },
             h("slot", { name: "title" }),
             h("slot", { name: "uppertags" })),

package/collection/components/widgets/pn-proxio-productcard/pn-proxio-productcard.stories.js

@@ -9,8 +9,9 @@ export default {
 
 const Template = ({ ...args }) => {
   return `
-    <div style="max-width: 67em; margin:1em auto 0;">
+    <div style="max-width: 100rem; margin:1.6rem auto 0;">
       <pn-proxio-productcard>
+        <pn-illustration slot="illustrationmobile" illustration="${args.illustration}" ></pn-illustration>
         <h2 slot="title">${args.heading}</h2>
         <div slot="uppertags">
           <pn-titletag icon="box-label" color="green700">${args.uppertag}</pn-titletag>