@postnord/pn-marketweb-components 2.4.28 → 2.4.31

package/collection/components/cta/pn-cta-block/cta-block.stories.js

@@ -0,0 +1,252 @@
+import readme from "./readme.md";
+
+export default {
+  title: "CTA/Cta block",
+  parameters: {
+    notes: readme,
+  },
+  argTypes: {
+    pnBackgroundColor: {
+      options: ['blue25', 'coral50', 'gray25', 'green25'],
+      control: { type: 'select' },
+    },
+  }
+};
+
+
+const Template = ({ ...args }) => {
+  return `
+  <pn-breakpoints break-point-class="dotcom"></pn-breakpoints>
+  <div style="max-width: 1410px">
+    <pn-cta-block 
+      is-centered="${args.isCentered}"
+      is-large="${args.isLarge}"
+      is-small="${args.isSmall}"
+      pn-background-color="${args.pnBackgroundColor}"
+      heading="${args.heading}"
+      body-text="${args.bodyText}"
+      content-top="${args.contentTop}">
+        <div slot="illustration">  
+          <picture>
+            <img src="https://www.postnord.se/contentassets/5fe2c739644149e79d73c1082e575af3/success.svg" /> 
+          </picture>
+        </div>
+        <div slot="cta-button">
+          <pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
+          <a href=${args.linkUrl}>${args.linkText} <pn-icon symbol="arrow-right"> </pn-icon></a>
+        </div>
+      </pn-cta-block>
+  </div>
+  `;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  contentTop: false,
+  heading: 'PostNord erbjuder mycket',
+  bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
+  buttonText: "Våra tjänster",
+  buttonUrl: 'http://www.google.se',
+  linkText: 'Information',
+  linkUrl: 'http://www.bing.com',
+  pnBackgroundColor: ['blue25'],
+  isLarge: false,
+  isCentered: false,
+  isSmall: false,
+};
+
+const LinkOnlyTemplate = ({ ...args }) => {
+  return `
+  <div style="max-width: 1410px">
+    <pn-cta-block 
+      is-centered="${args.isCentered}"
+      is-large="${args.isLarge}"
+      is-small="${args.isSmall}"
+      pn-background-color="${args.pnBackgroundColor}"
+      heading="${args.heading}"
+      body-text="${args.bodyText}"
+      content-top="${args.contentTop}">
+      <div slot="illustration">  
+        <picture>
+          <img src="https://www.postnord.se/contentassets/5fe2c739644149e79d73c1082e575af3/success.svg" /> 
+        </picture>
+      </div>
+      <div slot="cta-button">
+        <pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
+        <a href=${args.linkUrl}>${args.linkText} <pn-icon symbol="arrow-right"> </pn-icon></a>
+      </div>
+    </pn-cta-block>
+  </div>
+  `;
+}
+
+export const LinkOnly = LinkOnlyTemplate.bind({});
+LinkOnly.args = {
+  heading: 'PostNord erbjuder mycket',
+  bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
+  buttonText: "Våra tjänster",
+  buttonUrl: '',
+  linkText: 'Information',
+  linkUrl: 'http://www.bing.com',
+  pnBackgroundColor: ['gray25'],
+  isLarge: true,
+  isCentered: false,
+  isSmall: false,
+};
+
+
+const TwoButtonLayoutTemplate = ({ ...args }) => {
+  return `
+  <div style="max-width: 1410px">
+    <pn-cta-block 
+      is-centered="${args.isCentered}"
+      is-large="${args.isLarge}"
+      is-small="${args.isSmall}"
+      pn-background-color="${args.pnBackgroundColor}"
+      heading="${args.heading}"
+      body-text="${args.bodyText}"
+      content-top="${args.contentTop}">
+      <div slot="illustration">  
+        <picture>
+          <img src="https://www.postnord.se/contentassets/5fe2c739644149e79d73c1082e575af3/success.svg" /> 
+        </picture>
+      </div>
+      <div slot="cta-button">
+        <pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
+        <pn-button appearance="light" class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
+      </div>
+    </pn-cta-block>
+  </div>
+  `;
+}
+
+export const TwoButtonLayout = TwoButtonLayoutTemplate.bind({});
+TwoButtonLayout.args = {
+  heading: 'PostNord erbjuder mycket',
+  bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
+  buttonText: "Våra tjänster",
+  buttonUrl: 'http://www.google.se',
+  linkText: 'Information',
+  linkUrl: 'http://www.bing.com',
+  pnBackgroundColor: ['coral50'],
+  isLarge: true,
+  isCentered: false,
+  isSmall: false,
+};
+
+const NoImageTemplate = ({ ...args }) => {
+  return `
+  <div style="max-width: 1410px">
+    <pn-cta-block 
+      is-centered="${args.isCentered}"
+      is-large="${args.isLarge}"
+      is-small="${args.isSmall}"
+      pn-background-color="${args.pnBackgroundColor}"
+      heading="${args.heading}"
+      body-text="${args.bodyText}"
+      content-top="${args.contentTop}">
+      <div slot="illustration">  
+        <picture>
+          <img src="https://www.postnord.se/contentassets/5fe2c739644149e79d73c1082e575af3/success.svg" /> 
+        </picture>
+      </div>
+      <div slot="cta-button">
+        <pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
+        <a href=${args.linkUrl}>${args.linkText} <pn-icon symbol="arrow-right"> </pn-icon></a>
+      </div>
+    </pn-cta-block>
+  </div>
+  `;
+}
+
+export const NoImage = NoImageTemplate.bind({});
+NoImage.args = {
+  heading: 'PostNord erbjuder mycket',
+  bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
+  buttonText: "Våra tjänster",
+  buttonUrl: 'http://www.google.se',
+  linkText: 'Information',
+  linkUrl: '',
+  pnBackgroundColor: ['gray25'],
+  isLarge: true,
+  isCentered: false,
+  isSmall: false,
+};
+
+const LargeTemplate = ({ ...args }) => {
+  return `
+  <div style="max-width: 1410px">
+    <pn-cta-block 
+      is-centered="${args.isCentered}"
+      is-large="${args.isLarge}"
+      is-small="${args.isSmall}"
+      pn-background-color="${args.pnBackgroundColor}"
+      heading="${args.heading}"
+      body-text="${args.bodyText}"
+      content-top="${args.contentTop}">
+      <div slot="illustration">  
+        <picture>
+          <img src="https://www.postnord.se/contentassets/5fe2c739644149e79d73c1082e575af3/success.svg" /> 
+        </picture>
+      </div>
+      <div slot="cta-button">
+        <pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
+        <a href=${args.linkUrl}>${args.linkText} <pn-icon symbol="arrow-right"> </pn-icon></a>
+      </div>
+    </pn-cta-block>
+  </div>
+  `;
+}
+
+export const Large = LargeTemplate.bind({});
+Large.args = {
+  heading: 'PostNord erbjuder mycket',
+  bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
+  buttonText: "Våra tjänster",
+  buttonUrl: 'http://www.google.se',
+  linkText: 'Information',
+  linkUrl: 'http://www.bing.com',
+  pnBackgroundColor: ['blue25'],
+  isLarge: true,
+  isCentered: false,
+  isSmall: false,
+};
+
+const LargeCenteredTemplate = ({ ...args }) => {
+  return `
+  <div style="max-width: 1410px">
+    <pn-cta-block 
+      is-centered="${args.isCentered}"
+      is-large="${args.isLarge}"
+      is-small="${args.isSmall}"
+      pn-background-color="${args.pnBackgroundColor}"
+      heading="${args.heading}"
+      body-text="${args.bodyText}"
+      content-top="${args.contentTop}">
+      <div slot="illustration">  
+        <picture>
+          <img src="https://www.postnord.se/contentassets/5fe2c739644149e79d73c1082e575af3/success.svg" /> 
+        </picture>
+      </div>
+      <div slot="cta-button">
+        <pn-button class="cta-block__button " href=${args.buttonUrl}>${args.buttonText}</pn-button>
+        <a href=${args.linkUrl}>${args.linkText} <pn-icon symbol="arrow-right"> </pn-icon></a>
+      </div>
+    </pn-cta-block>
+  </div>
+  `;
+}
+
+export const LargeCentered = LargeCenteredTemplate.bind({});
+LargeCentered.args = {
+  heading: 'PostNord erbjuder mycket',
+  bodyText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eu dolor mauris. Integer sed nulla id justo faucibus vestibulum consequat et ligula. Vestibulum varius quam in porttitor pellentesque.',
+  buttonText: "Våra tjänster",
+  buttonUrl: 'http://www.google.se',
+  linkText: 'Information',
+  linkUrl: 'http://www.bing.com',
+  pnBackgroundColor: ['blue25'],
+  isLarge: true,
+  isCentered: true,
+  isSmall: false,
+};

package/collection/components/cta/pn-cta-block/pn-cta-block.css

@@ -0,0 +1,187 @@
+pn-cta-block .cta-block {
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  border-radius: 2.4rem;
+  padding: 3.2rem 2.4rem;
+  width: 100%;
+}
+@media screen and (min-width: 768px) {
+  pn-cta-block .cta-block {
+    flex-direction: row;
+    padding: 2.4rem;
+  }
+}
+@media screen and (min-width: 1140px) {
+  pn-cta-block .cta-block {
+    margin-right: auto;
+    margin-left: auto;
+    max-width: 95%;
+  }
+}
+@media screen and (min-width: 1440px) {
+  pn-cta-block .cta-block {
+    max-width: 90%;
+  }
+}
+pn-cta-block .cta-block[pn-background-color=blue25] {
+  background-color: #EFFBFF;
+}
+pn-cta-block .cta-block[pn-background-color=coral50] {
+  background-color: #FDEFEE;
+}
+pn-cta-block .cta-block[pn-background-color=gray25] {
+  background-color: #F9F8F8;
+}
+pn-cta-block .cta-block[pn-background-color=green25] {
+  background-color: #EDFBF3;
+}
+pn-cta-block .cta-block--content-top .cta-block__content {
+  justify-content: flex-start;
+}
+@media screen and (min-width: 768px) {
+  pn-cta-block .cta-block--large .cta-block__heading {
+    font-size: 3.6rem;
+  }
+}
+@media screen and (min-width: 768px) {
+  pn-cta-block .cta-block--large .cta-block__text {
+    font-size: 2rem;
+  }
+}
+pn-cta-block .cta-block--small {
+  margin-right: auto;
+  margin-left: auto;
+  width: auto;
+}
+@media screen and (min-width: 992px) {
+  pn-cta-block .cta-block--small {
+    max-width: 75%;
+  }
+}
+pn-cta-block .cta-block--center {
+  align-items: center;
+  flex-direction: column;
+  gap: 1.6rem;
+  padding: 3.2rem 2.4rem;
+  text-align: center;
+}
+@media screen and (min-width: 768px) {
+  pn-cta-block .cta-block--center .cta-block__content {
+    max-width: 74rem;
+    padding: 0;
+  }
+}
+pn-cta-block .cta-block--center .cta-block__action {
+  margin-top: 0.8rem;
+}
+pn-cta-block .cta-block--center .cta-block__action > [slot=cta-button] {
+  gap: 0.8rem;
+}
+@media screen and (min-width: 768px) {
+  pn-cta-block .cta-block--center .cta-block__action {
+    flex-direction: row;
+    gap: 2.4rem;
+    margin-top: 1.6rem;
+  }
+  pn-cta-block .cta-block--center .cta-block__action.cta-block__button {
+    margin-bottom: 0;
+  }
+  pn-cta-block .cta-block--center .cta-block__action > [slot=cta-button] {
+    flex-direction: row;
+    gap: 2.4rem;
+  }
+}
+@media screen and (min-width: 768px) {
+  pn-cta-block .cta-block--center .cta-block__image-wrapper {
+    display: block;
+  }
+}
+pn-cta-block .cta-block--center .cta-block__image-wrapper > [slot=illustration] {
+  padding-right: 0;
+}
+pn-cta-block .cta-block__image-wrapper {
+  margin-bottom: 1.6rem;
+}
+pn-cta-block .cta-block__image-wrapper > [slot=illustration] > picture > img {
+  border-radius: 0.8rem;
+  max-width: 100%;
+}
+@media screen and (min-width: 768px) {
+  pn-cta-block .cta-block__image-wrapper {
+    display: none;
+    max-width: 20%;
+  }
+}
+@media screen and (min-width: 992px) {
+  pn-cta-block .cta-block__image-wrapper {
+    display: block;
+    margin-bottom: 0;
+  }
+  pn-cta-block .cta-block__image-wrapper > [slot=illustration] {
+    padding-right: 3.2rem;
+  }
+}
+pn-cta-block .cta-block__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+}
+@media screen and (min-width: 768px) {
+  pn-cta-block .cta-block__content {
+    padding-right: 2.4rem;
+  }
+}
+@media screen and (min-width: 768px) {
+  pn-cta-block .cta-block__content .cta-block__heading {
+    max-width: 74rem;
+  }
+}
+pn-cta-block .cta-block__content .cta-block__text {
+  margin-bottom: 2.4rem;
+}
+@media screen and (min-width: 768px) {
+  pn-cta-block .cta-block__content .cta-block__text {
+    max-width: 74rem;
+  }
+}
+pn-cta-block .cta-block__heading {
+  margin-bottom: 0.8rem;
+}
+pn-cta-block .cta-block__action {
+  display: flex;
+}
+pn-cta-block .cta-block__action > [slot=cta-button] {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  row-gap: 1.6rem;
+}
+@media screen and (min-width: 768px) {
+  pn-cta-block .cta-block__action > [slot=cta-button] {
+    gap: 1.6rem;
+    margin-top: 0;
+  }
+}
+pn-cta-block .cta-block__action > [slot=cta-button] > a {
+  color: #005D92;
+  font-weight: 500;
+  font-size: 1.6rem;
+  padding: 0.1rem;
+  text-decoration: none;
+}
+pn-cta-block .cta-block__action > [slot=cta-button] > a pn-icon svg {
+  transition: transform 0.3s ease-in-out;
+}
+pn-cta-block .cta-block__action > [slot=cta-button] > a pn-icon svg path {
+  fill: #005D92;
+}
+pn-cta-block .cta-block__action > [slot=cta-button] > a:hover pn-icon svg {
+  transition: transform 0.3s ease-in-out;
+  transform: translateX(0.3rem);
+}
+pn-cta-block .cta-block__action > [slot=cta-button] > a:hover pn-icon svg path {
+  fill: #005D92;
+}

package/collection/components/cta/pn-cta-block/pn-cta-block.js

@@ -0,0 +1,169 @@
+import { Host, h } from "@stencil/core";
+export class PnCtaBlock {
+  constructor() {
+    this.heading = null;
+    this.bodyText = null;
+    this.pnBackgroundColor = null;
+    this.isLarge = false;
+    this.isCentered = false;
+    this.isSmall = false;
+    this.contentTop = false;
+    this.hasIllustrationSlot = true;
+    this.hasButtonSlot = true;
+  }
+  componentWillLoad() {
+    this.hasIllustrationSlot = !!this.hostElement.querySelector('[slot="illustration"]');
+    this.hasButtonSlot = !!this.hostElement.querySelector('[slot="cta-button"]');
+  }
+  render() {
+    return (h(Host, null, h("div", { "pn-background-color": this.pnBackgroundColor, class: `cta-block ${this.isLarge ? 'cta-block--large' : ''}  ${this.isCentered ? 'cta-block--center' : ''}  ${(this.isSmall ? 'cta-block--small' : '')} ${this.contentTop ? 'cta-block--content-top' : ''}` }, h("div", { class: "cta-block__image-wrapper" }, h("slot", { name: "illustration" })), h("div", { class: "cta-block__content" }, h("h2", { class: "cta-block__heading" }, this.heading), h("p", { class: "cta-block__text" }, this.bodyText)), h("div", { class: "cta-block__action" }, h("slot", { name: "cta-button" })))));
+  }
+  static get is() { return "pn-cta-block"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["pn-cta-block.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["pn-cta-block.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "heading",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "bodyText": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "body-text",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "pnBackgroundColor": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "pn-background-color",
+        "reflect": false,
+        "defaultValue": "null"
+      },
+      "isLarge": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-large",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "isCentered": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-centered",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "isSmall": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "is-small",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "contentTop": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "content-top",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasIllustrationSlot": {},
+      "hasButtonSlot": {}
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+}

package/collection/components/input/pn-multi-row-connected-dropdown/pn-multi-row-connected-dropdown.js

@@ -184,7 +184,7 @@ export class PnMultiRowConnectedDropdown {
     var _a;
     return (h(Host, null, (_a = this.rowData) === null || _a === void 0 ? void 0 :
       _a.map((data, i) => {
-        return (h("div", { class: 'generated-row-' + i, id: 'generated-row-connected-dropdown-' + i }, h("pn-multi-row-connected-dropdown-row", { "dropdown-data": this.dropdownData, "language-code": this.languageCode, label: this.label, "first-dropdown-label": this.firstDropdownLabel, "second-dropdown-label": this.secondDropdownLabel, "dropdown-placeholder": this.dropdownPlaceholder, "add-row-text": this.addRowText, "input-fild-label": this.inputFildLabel, "input-fild-placeholder": this.inputFildPlaceholder, "date-button-text": this.dateButtonText, "date-placeholder": this.datePlaceholder, "date-days-from-today": 1, "allow-multiple-dates": this.allowMultipleDates, "start-date-label": this.startDateLabel, "end-date-label": this.endDateLabel, "multi-date-helper-text": this.multiDateHelperText, "generate-dates-button-text": this.generateDatesButtonText, "save-date-button-text": this.saveDateButtonText, "no-dates-text": this.noDatesText, index: i, "predefined-value": JSON.stringify(data), "years-to-add-to-end-date": this.yearsToAddToEndDate })));
+        return (h("div", { class: 'generated-row-' + i, id: 'generated-row-connected-dropdown-' + i }, h("pn-multi-row-connected-dropdown-row", { "dropdown-data": this.dropdownData, "language-code": this.languageCode, label: this.label, "first-dropdown-label": this.firstDropdownLabel, "second-dropdown-label": this.secondDropdownLabel, "dropdown-placeholder": this.dropdownPlaceholder, "add-row-text": this.addRowText, "input-fild-label": this.inputFildLabel, "input-fild-placeholder": this.inputFildPlaceholder, "date-button-text": this.dateButtonText, "date-placeholder": this.datePlaceholder, "date-days-from-today": this.dateDaysFromToday, "allow-multiple-dates": this.allowMultipleDates, "start-date-label": this.startDateLabel, "end-date-label": this.endDateLabel, "multi-date-helper-text": this.multiDateHelperText, "generate-dates-button-text": this.generateDatesButtonText, "save-date-button-text": this.saveDateButtonText, "no-dates-text": this.noDatesText, index: i, "predefined-value": JSON.stringify(data), "years-to-add-to-end-date": this.yearsToAddToEndDate })));
       }), this.allowMultipleRows ? (h("div", { class: "connected-dropdown__row" }, h("pn-button", { "icon-only": this.addRowText ? false : true, "left-icon": "true", "aria-label": "Add", icon: "plus", appearance: "light", variant: "borderless", class: "connected-dropdown__button-right", onClick: () => {
         this.addRow();
       } }, this.addRowText))) : null));

package/collection/components/widgets/pn-proxio-findprice/data.js

@@ -52,6 +52,26 @@ const weights = {
       { name: "30 kg", abbreviation: 'kg', value: 30000 },
       { name: "35 kg", abbreviation: 'kg', value: 35000 },
     ]
+  },
+  "dk01012024": {
+    "S": [
+      { name: "100 g", abbreviation: 'g', value: 100 },
+      { name: "250 g", abbreviation: 'g', value: 250 },
+      { name: "500 g", abbreviation: 'g', value: 500 },
+      { name: "1 kg", abbreviation: 'kg', value: 1000 },
+      { name: "2 kg", abbreviation: 'kg', value: 2000 },
+    ],
+    "M": [],
+    "L": [
+      { name: "2 kg", abbreviation: 'kg', value: 2000 },
+      { name: "5 kg", abbreviation: 'kg', value: 5000 },
+      { name: "10 kg", abbreviation: 'kg', value: 10000 },
+      { name: "15 kg", abbreviation: 'kg', value: 15000 },
+      { name: "20 kg", abbreviation: 'kg', value: 20000 },
+      { name: "25 kg", abbreviation: 'kg', value: 25000 },
+      { name: "30 kg", abbreviation: 'kg', value: 30000 },
+      { name: "35 kg", abbreviation: 'kg', value: 35000 },
+    ]
   }
 };
 

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

@@ -18,6 +18,7 @@ export class PnProxioFindPrice {
     this.showMedium = false;
     this.showInternational = false;
     this.maxAbroadKg = 0;
+    this.weightListName = "";
     this.cache = false;
     this.filteredItems = [];
     this.weight = { value: 0, name: "" };
@@ -157,7 +158,8 @@ export class PnProxioFindPrice {
   }
   getWeights() {
     var _a;
-    let marketWeightsArray = (_a = weights[this.market]) !== null && _a !== void 0 ? _a : { "S": [], "M": [], "L": [] };
+    let weightListName = this.market + this.weightListName;
+    let marketWeightsArray = (_a = weights[weightListName]) !== null && _a !== void 0 ? _a : { "S": [], "M": [], "L": [] };
     let marketWeights = marketWeightsArray[this.sizecategory.unit];
     let isInternationalWeights = this.maxAbroadKg != 0 && this.countrycodevalue.toLowerCase() !== this.market.toLowerCase();
     marketWeights = isInternationalWeights ? marketWeights.filter(number => (number.value / 1000) <= this.maxAbroadKg) : marketWeights;
@@ -300,6 +302,24 @@ export class PnProxioFindPrice {
         "reflect": false,
         "defaultValue": "0"
       },
+      "weightListName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "weight-list-name",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
       "cache": {
         "type": "boolean",
         "mutable": false,