@postnord/pn-marketweb-components 1.0.39 → 1.0.42-beta2

package/custom-elements/index.js

@@ -1,6 +1,126 @@
 import { h, Host, createEvent, getRenderingRef, forceUpdate, proxyCustomElement } from '@stencil/core/internal/client';
 export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';
 
+const pnBonusProgressbarCss = "pn-bonus-progressbar{width:100%}.bonusprogressbar-top{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bonusprogressbar-top-icon{border-radius:100%;height:5rem;width:5rem;padding:1rem;display:-ms-inline-flexbox;display:inline-flex;margin-right:1em;margin-left:0.5em;background-color:#E0F8FF}[theme=red] .bonusprogressbar-top-icon{background-color:#FBC2C1}.bonusprogressbar-top-icon pn-icon svg{width:100%;height:100%}.bonusprogressbar-top-percentage{margin-left:auto;padding:0.5em}.bonusprogressbar-wrapper{position:relative;display:-ms-flexbox;display:flex;min-height:5em;-ms-flex-align:center;align-items:center}.bonusprogressbar-currentlevel{position:absolute}.bonusprogressbar-progress[value]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1.7rem;border:0.1rem solid #00A0D6;border-radius:1.7rem;padding:0;margin:0;overflow:hidden}[theme=red] .bonusprogressbar-progress[value]{border-color:#F06365}.bonusprogressbar-progress[value]::-webkit-progress-bar{border:0;border-radius:1.7rem;margin:0;padding:0;background:#E0F8FF}[theme=red] .bonusprogressbar-progress[value]::-webkit-progress-bar{background:#FDEFEE}.bonusprogressbar-progress[value]::-webkit-progress-value{margin:0;padding:0;border-radius:1.7rem;background:#00A0D6}[theme=red] .bonusprogressbar-progress[value]::-webkit-progress-value{background:#F06365}";
+
+let PnBonusProgressbar$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.icon = null;
+    this.heading = "";
+    this.theme = "blue";
+    this.bonuspercentage = "0%";
+    this.currency = "kr";
+    this.value = 0;
+    this.min = 0;
+    this.max = 0;
+    this.valuepercentage = 0;
+    this.progresspercentage = 0;
+    this.levelValues = [];
+    this.currentLevelAdjustedValue = 0;
+  }
+  componentWillLoad() {
+    this.setInitialValues();
+    this.setValuePercentage();
+  }
+  setInitialValues() {
+    const levelElements = Array.from(this.hostElement.querySelectorAll('pn-bonus-progressbar-level:not([current])'));
+    this.currentLevelAdjustedValue = this.value;
+    this.levelValues = levelElements.map((elm) => {
+      return parseInt(elm.getAttribute("value"), 10);
+    });
+    if (!this.max) {
+      if (this.levelValues && this.levelValues.length > 0) {
+        const newMax = this.levelValues.slice(-1)[0];
+        this.max = Math.floor(newMax * 1.05);
+      }
+    }
+    if (!this.min) {
+      const suggestedMin = Math.floor(this.value * 0.9);
+      if (suggestedMin > 0) {
+        this.min = suggestedMin;
+      }
+    }
+    if (this.value > this.max) {
+      this.currentLevelAdjustedValue = 100;
+    }
+  }
+  setValuePercentage() {
+    this.valuepercentage = (this.value / (this.max)) * 100;
+    this.progresspercentage = ((this.value - this.min) / (this.max - this.min)) * 100;
+    if (this.progresspercentage < 0) {
+      if (this.levelValues && this.levelValues.length && this.levelValues[0] < this.value) {
+        this.min = Math.floor(this.levelValues[0] * .95);
+      }
+      else {
+        this.min = Math.floor(this.value * .95);
+      }
+    }
+    if (this.progresspercentage > 100) {
+      this.progresspercentage = 100;
+      const newMax = this.levelValues.slice(-1)[0];
+      this.max = Math.floor(newMax * 1.05);
+    }
+  }
+  iconColor() {
+    switch (this.theme) {
+      case 'red':
+        return 'coral700';
+      case 'blue':
+      default:
+        return 'blue700';
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "bonusprogressbar-top" }, this.icon ? (h("div", { class: "bonusprogressbar-top-icon" }, h("pn-icon", { symbol: "stamp", small: "false", color: this.iconColor() }))) : {}, h("h4", { class: "bonusprogressbar-top-heading" }, this.heading), h("strong", { class: "bonusprogressbar-top-percentage" }, this.bonuspercentage)), h("div", { class: "bonusprogressbar-wrapper" }, h("progress", { class: "bonusprogressbar-progress", value: this.progresspercentage, max: "100" }), h("pn-bonus-progressbar-level", { current: true, value: this.value, visualpercentage: this.currentLevelAdjustedValue, bonuspercentage: this.bonuspercentage }), h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "currentLevelAdjustedValue": ["setValuePercentage"],
+    "value": ["setValuePercentage"],
+    "min": ["setValuePercentage"],
+    "max": ["setValuePercentage"]
+  }; }
+  static get style() { return pnBonusProgressbarCss; }
+};
+
+const pnBonusProgressbarLevelCss = "pn-bonus-progressbar-level{position:absolute;width:0.1rem;left:50%}pn-bonus-progressbar-level::after{content:\"\";width:0.1rem;position:absolute;left:0;border-left:1px dashed #9B1C2E;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:3rem}pn-bonus-progressbar-level:not([current]):nth-child(even)::after{height:7rem;margin-top:0.6rem}.progressbar-level-percentage{font-size:0.75em;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);top:-3.2rem}[current]>.progressbar-level-percentage{display:none}pn-bonus-progressbar-level:not([current]):nth-child(even) .progressbar-level-percentage{top:-4.8rem}.progressbar-level-value{font-size:0.75em;white-space:nowrap;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);top:2.3rem}[current]>.progressbar-level-value{top:-3.2rem}pn-bonus-progressbar-level:not([current]):nth-child(even) .progressbar-level-value{top:4.2rem}";
+
+let PnBonusProgressbarLevel$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.current = false;
+    this.value = 0;
+    this.bonuspercentage = "";
+    this.visualpercentage = 0;
+    this.percentage = 0;
+    this.max = 0;
+    this.min = 0;
+    this.currency = "";
+  }
+  componentWillLoad() {
+    this.max = parseInt(this.hostElement.parentElement.parentElement.getAttribute("max"), 10);
+    this.min = parseInt(this.hostElement.parentElement.parentElement.getAttribute("min"), 10);
+    this.currency = this.hostElement.parentElement.parentElement.getAttribute("currency");
+    this.percentage = (this.value / this.max) * 100;
+    if (this.visualpercentage > 0) {
+      // Visual percentage has been overriden
+      return;
+    }
+    this.visualpercentage = ((this.value - this.min) / (this.max - this.min)) * 100;
+  }
+  formatValue() {
+    return `${this.value.toLocaleString('sv-SE', { maximumFractionDigits: 0 })} ${this.currency}`;
+  }
+  render() {
+    return (h(Host, { style: { 'left': `${this.visualpercentage}%` } }, h("div", { class: "progressbar-level-percentage" }, this.bonuspercentage), h("div", { class: "progressbar-level-value" }, this.formatValue())));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnBonusProgressbarLevelCss; }
+};
+
 const pnChoiceButtonCss = "pn-choice-button{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:none;display:inline-block;background:#fff;position:relative;margin:0.2em 0.4em}pn-choice-button input{opacity:0;position:absolute;top:0;left:0;pointer-events:none;margin:0;width:100%;height:100%}pn-choice-button label{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;padding:0.4rem 0.8rem;border:0.1rem solid #D3CECB;color:#005D92;font-weight:500;border-radius:0.8rem;text-align:center;cursor:pointer;-webkit-transition:background 0.2s, -webkit-box-shadow 0.1s;transition:background 0.2s, -webkit-box-shadow 0.1s;transition:box-shadow 0.1s, background 0.2s;transition:box-shadow 0.1s, background 0.2s, -webkit-box-shadow 0.1s}pn-choice-button label pn-illustration{display:inline-block;width:3rem;height:3rem;margin-right:0.9rem}pn-choice-button>input:checked+label.pn-choice-button{background:#E0F8FF;color:#005D92;border-color:#005D92;-webkit-box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13);box-shadow:0px 0.6px 1.8px rgba(0, 0, 0, 0.1), 0px 3.2px 7.2px rgba(0, 0, 0, 0.13)}pn-choice-button>input:indeterminate+label.pn-choice-button{background:#FFFFFF;color:#005D92}pn-choice-button>input:hover+label.pn-choice-button{background:#E0F8FF}pn-choice-button>input:focus+label.pn-choice-button,pn-choice-button>input:active+label.pn-choice-button{-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92}pn-choice-button>input:active+label.pn-choice-button{background:#8EDDF9}pn-choice-button>input:disabled+label.pn-choice-button{background-color:#D3CECB}pn-choice-button>input:checked+label.pn-choice-button:hover{background:#8EDDF9}pn-choice-button>input:checked+label.pn-choice-button:active{background:#8EDDF9;border:0.1rem solid #00A0D6}";
 
 let PnChoiceButton$1 = class extends HTMLElement {
@@ -161,7 +281,7 @@ let PnFilterSearch$1 = class extends HTMLElement {
   static get style() { return pnFilterSearchCss; }
 };
 
-const translations$7 = {
+const translations$8 = {
   'sv': {
     'componentheading': 'Vad vill du skicka?',
     'deliveryscopeheading': 'Hit eller dit?',
@@ -2255,8 +2375,8 @@ let PnfindServiceAndPrice = class extends HTMLElement {
     if (this.market) {
       state$3.market = markets$1[this.market];
     }
-    if (this.language && translations$7[this.language]) {
-      state$3.i18n = translations$7[this.language];
+    if (this.language && translations$8[this.language]) {
+      state$3.i18n = translations$8[this.language];
     }
   }
   filterItems() {
@@ -2380,7 +2500,7 @@ let PnfindServiceAndPriceResult = class extends HTMLElement {
   static get style() { return pnFindServiceAndPriceResultCss; }
 };
 
-const translations$6 = {
+const translations$7 = {
   'sv': {
     "heading": "Språk",
   },
@@ -2447,8 +2567,8 @@ let PnlanguageSelector = class extends HTMLElement {
     this.setLanguage.emit(this.value);
   }
   setTranslations() {
-    if (translations$6[this.value]) {
-      this.i18n = translations$6[this.value];
+    if (translations$7[this.value]) {
+      this.i18n = translations$7[this.value];
     }
   }
   onValueChange() {
@@ -2501,7 +2621,7 @@ let PnlanguageSelectorOption = class extends HTMLElement {
   static get style() { return pnLanguageSelectorOptionCss; }
 };
 
-const translations$5 = {
+const translations$6 = {
   'sv': {
     "menuHomeButton": "Hem",
     "menuGoBackButton": "Gå tillbaka",
@@ -2595,8 +2715,8 @@ let PnMainnav$1 = class extends HTMLElement {
     this.marketChange.emit(this.market);
   }
   onLanguageChange(event) {
-    if (translations$5[event.detail]) {
-      state$2.i18n = translations$5[event.detail];
+    if (translations$6[event.detail]) {
+      state$2.i18n = translations$6[event.detail];
       if (!this.navLabel) {
         this.navLabel = state$2.i18n.navLabel;
       }
@@ -2747,7 +2867,7 @@ let PnMainnavList$1 = class extends HTMLElement {
   static get style() { return pnMainnavListCss; }
 };
 
-const translations$4 = {
+const translations$5 = {
   'sv': {
     "searchlabel": "Sök",
     "searchplaceholder": "Vad letar du efter?",
@@ -3099,8 +3219,8 @@ let PnMarketwebSiteheader$2 = class extends HTMLElement {
     await this.fetchData();
   }
   setTranslations() {
-    if (this.language && translations$4[this.language]) {
-      this.i18n = translations$4[this.language];
+    if (this.language && translations$5[this.language]) {
+      this.i18n = translations$5[this.language];
     }
   }
   onLanguageChange() {
@@ -3195,7 +3315,7 @@ let PnMarketwebSiteheader$2 = class extends HTMLElement {
   static get style() { return pnMarketwebSitefooterCss; }
 };
 
-const translations$3 = {
+const translations$4 = {
   'sv': {
     "searchlabel": "Sök",
     "searchplaceholder": "Vad letar du efter?",
@@ -3332,8 +3452,7 @@ class MarketWebLoginManager {
     return `${this.getBaseUrl()}${this.endpoints.authorizationEndpoint}?redirectionUrl=${redirectPage}`;
   }
   getLogoutUrl(redirectPage = "") {
-    const currentPage = window.location.href;
-    redirectPage = redirectPage ? redirectPage : currentPage;
+    redirectPage = window.location.origin + '/logout';
     return `${this.getBaseUrl()}${this.endpoints.logoutEndpoint}?redirectionUrl=${redirectPage}&authorization=${this.store.get(this.keys.token)}`;
   }
   getUserInfo() {
@@ -3531,8 +3650,8 @@ let PnMarketwebSiteheader$1 = class extends HTMLElement {
     window.setTimeout(() => { this.checkMenuOverflow(); }, 50);
   }
   setTranslations() {
-    if (this.language && translations$3[this.language]) {
-      this.i18n = translations$3[this.language];
+    if (this.language && translations$4[this.language]) {
+      this.i18n = translations$4[this.language];
     }
   }
   onLanguageSelectorChange(e) {
@@ -3886,6 +4005,121 @@ let PnMarketwebSiteheaderSearch$1 = class extends HTMLElement {
   static get style() { return pnMarketwebSiteheaderSearchCss; }
 };
 
+const translations$3 = {
+  'sv': {
+    "heading": "Beräkna kostnad med PEX Bud",
+    "labelFrom": "Från postkod",
+    "labelTo": "Till postkod",
+    "zipPlaceholder": "Ex. 12831",
+    "labelWeight": "Vikt (i gram)",
+    "weightPlaceholder": "Ex. 1000",
+    "labelWhen": "När",
+    "submitButtonText": "Beräkna pris"
+  },
+  'en': {
+    "heading": "Calculate cost with PEX Bud",
+    "labelFrom": "From zip",
+    "labelTo": "To zip",
+    "zipPlaceholder": "Ex. 12831",
+    "labelWeight": "Weight (in grams)",
+    "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}";
+
+let PnPexPricefinder$1 = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /** Specifies which language we want to show component in (sv,da,fi,no,en) */
+    this.language = "sv";
+    /** Currency (Kr, €)*/
+    this.currency = "Kr";
+    /** API Url */
+    this.apiUrl = "/api/pex/order";
+    this.i18n = translations$3.sv;
+    this.fromzip = null;
+    this.tozip = null;
+    this.weight = 100;
+    this.when = (new Date()).toISOString().split('T')[0];
+    this.response = null;
+  }
+  componentWillLoad() {
+    this.init();
+  }
+  async init() {
+    this.checkParameters();
+    this.setLanguage();
+  }
+  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$3[this.language]) {
+      this.i18n = translations$3[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-date-picker", { inputid: "when", name: "when", "start-of-week": "1", min: (new Date()).toISOString().split('T')[0], language: this.language, 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; }
+};
+
 const translations$2 = {
   'sv': {
     'maxweightlabel': 'Maxvikt',
@@ -4583,6 +4817,8 @@ let PnSiteSelectorItem$1 = class extends HTMLElement {
   static get style() { return pnSiteSelectorItemCss; }
 };
 
+const PnBonusProgressbar = /*@__PURE__*/proxyCustomElement(PnBonusProgressbar$1, [4,"pn-bonus-progressbar",{"icon":[1],"heading":[1],"theme":[513],"bonuspercentage":[1],"currency":[513],"value":[1538],"min":[1538],"max":[1538],"valuepercentage":[32],"progresspercentage":[32],"levelValues":[32],"currentLevelAdjustedValue":[32]}]);
+const PnBonusProgressbarLevel = /*@__PURE__*/proxyCustomElement(PnBonusProgressbarLevel$1, [0,"pn-bonus-progressbar-level",{"current":[516],"value":[1538],"bonuspercentage":[1537],"visualpercentage":[1538],"percentage":[32],"max":[32],"min":[32],"currency":[32]}]);
 const PnChoiceButton = /*@__PURE__*/proxyCustomElement(PnChoiceButton$1, [4,"pn-choice-button",{"value":[520],"name":[1],"choiceid":[1],"type":[1],"disabled":[4],"checked":[4],"indeterminate":[1028]},[[0,"change","handlechange"]]]);
 const PnFilterCheckbox = /*@__PURE__*/proxyCustomElement(PnFilterCheckbox$1, [1,"pn-filter-checkbox",{"value":[520],"name":[1],"checkboxid":[1],"disabled":[4],"checked":[4],"indeterminate":[1028]},[[0,"change","handlechange"]]]);
 const PnFilterSearch = /*@__PURE__*/proxyCustomElement(PnFilterSearch$1, [1,"pn-filter-search",{"disabled":[4],"placeholder":[1],"inputid":[1],"name":[1],"autocomplete":[1],"value":[1],"label":[1],"loading":[4],"button":[1],"light":[4]},[[0,"input","inputHandler"]]]);
@@ -4598,6 +4834,7 @@ const PnMarketwebSitefooter = /*@__PURE__*/proxyCustomElement(PnMarketwebSitehea
 const PnMarketwebSiteheader = /*@__PURE__*/proxyCustomElement(PnMarketwebSiteheader$1, [4,"pn-marketweb-siteheader",{"market":[1537],"language":[1537],"environment":[1537],"token":[1],"endpoint":[1],"hideSiteSelector":[1540,"hide-site-selector"],"hideLanguageSelector":[1540,"hide-language-selector"],"hideSearch":[1540,"hide-search"],"hideLogin":[1540,"hide-login"],"sessionForward":[4,"session-forward"],"cache":[4],"spaMode":[4,"spa-mode"],"i18n":[32],"gotData":[32],"fetchingData":[32],"homePageLink":[32],"menuItems":[32],"siteDefinition":[32],"search":[32],"siteSelector":[32],"languageSelector":[32],"languageOptions":[32],"loginDialog":[32],"minimizeSearch":[32],"loggedIn":[32],"loginManager":[32]},[[0,"setLanguage","onLanguageSelectorChange"],[0,"loginStateChange","onLoginStateChange"],[9,"resize","handleResize"]]]);
 const PnMarketwebSiteheaderLogin = /*@__PURE__*/proxyCustomElement(PnMarketwebSiteheaderLogin$1, [0,"pn-marketweb-siteheader-login",{"endpoint":[1],"token":[1],"i18n":[8,"i-1-8n"],"emitEvents":[4,"emit-events"],"loginDialog":[1040],"loginManager":[32],"loggedIn":[32],"toggleButtonText":[32],"username":[32]}]);
 const PnMarketwebSiteheaderSearch = /*@__PURE__*/proxyCustomElement(PnMarketwebSiteheaderSearch$1, [0,"pn-marketweb-siteheader-search",{"i18n":[8,"i-1-8n"],"showOnlyLink":[1028,"show-only-link"],"hideSearch":[1028,"hide-search"],"search":[1040]}]);
+const PnPexPricefinder = /*@__PURE__*/proxyCustomElement(PnPexPricefinder$1, [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"]]]);
 const PnProductPricelist = /*@__PURE__*/proxyCustomElement(PnFindProductPricelist, [4,"pn-product-pricelist",{"source":[1],"language":[1025],"market":[1025],"productid":[1],"filteredItems":[32],"sourceData":[32],"gotData":[32],"loading":[32],"postagetype":[32],"weight":[32],"weightvalue":[32]}]);
 const PnProductPricelistResult = /*@__PURE__*/proxyCustomElement(PnFindProductPricelistResult, [0,"pn-product-pricelist-result",{"item":[1040],"shownitems":[16],"weightText":[32]}]);
 const PnProductTile = /*@__PURE__*/proxyCustomElement(PnProductTile$1, [4,"pn-product-tile"]);
@@ -4614,7 +4851,9 @@ const PnSiteSelectorItem = /*@__PURE__*/proxyCustomElement(PnSiteSelectorItem$1,
 const defineCustomElements = (opts) => {
   if (typeof customElements !== 'undefined') {
     [
-      PnChoiceButton,
+      PnBonusProgressbar,
+  PnBonusProgressbarLevel,
+  PnChoiceButton,
   PnFilterCheckbox,
   PnFilterSearch,
   PnFindServiceAndPrice,
@@ -4629,6 +4868,7 @@ const defineCustomElements = (opts) => {
   PnMarketwebSiteheader,
   PnMarketwebSiteheaderLogin,
   PnMarketwebSiteheaderSearch,
+  PnPexPricefinder,
   PnProductPricelist,
   PnProductPricelistResult,
   PnProductTile,
@@ -4650,4 +4890,4 @@ const defineCustomElements = (opts) => {
   }
 };
 
-export { PnChoiceButton, PnFilterCheckbox, PnFilterSearch, PnFindServiceAndPrice, PnFindServiceAndPriceResult, PnLanguageSelector, PnLanguageSelectorOption, PnMainnav, PnMainnavLevel, PnMainnavLink, PnMainnavList, PnMarketwebSitefooter, PnMarketwebSiteheader, PnMarketwebSiteheaderLogin, PnMarketwebSiteheaderSearch, PnProductPricelist, PnProductPricelistResult, PnProductTile, PnProductTileInfo, PnProductTilePrice, PnProfileSelector, PnSidenav, PnSidenavLevel, PnSidenavLink, PnSiteFooter, PnSiteFooterCol, PnSiteSelector, PnSiteSelectorItem, defineCustomElements };
+export { PnBonusProgressbar, PnBonusProgressbarLevel, PnChoiceButton, PnFilterCheckbox, PnFilterSearch, PnFindServiceAndPrice, PnFindServiceAndPriceResult, PnLanguageSelector, PnLanguageSelectorOption, PnMainnav, PnMainnavLevel, PnMainnavLink, PnMainnavList, PnMarketwebSitefooter, PnMarketwebSiteheader, PnMarketwebSiteheaderLogin, PnMarketwebSiteheaderSearch, PnPexPricefinder, PnProductPricelist, PnProductPricelistResult, PnProductTile, PnProductTileInfo, PnProductTilePrice, PnProfileSelector, PnSidenav, PnSidenavLevel, PnSidenavLink, PnSiteFooter, PnSiteFooterCol, PnSiteSelector, PnSiteSelectorItem, defineCustomElements };

package/custom-elements/mockresponse.js

@@ -0,0 +1,20 @@
+const request = {
+	timestamp: 1344531600
+};
+const query = {
+	from: "14321",
+	to: "21421",
+	weight: "2500",
+	when: "2023-05-24T12:00:00Z"
+};
+const data = {
+	value: 2000
+};
+const mockresponse = {
+	request: request,
+	query: query,
+	data: data
+};
+
+export default mockresponse;
+export { data, query, request };

package/esm/{MarketWebLoginManager-83f2e86a.js → MarketWebLoginManager-310d2552.js}

@@ -87,8 +87,7 @@ class MarketWebLoginManager {
     return `${this.getBaseUrl()}${this.endpoints.authorizationEndpoint}?redirectionUrl=${redirectPage}`;
   }
   getLogoutUrl(redirectPage = "") {
-    const currentPage = window.location.href;
-    redirectPage = redirectPage ? redirectPage : currentPage;
+    redirectPage = window.location.origin + '/logout';
     return `${this.getBaseUrl()}${this.endpoints.logoutEndpoint}?redirectionUrl=${redirectPage}&authorization=${this.store.get(this.keys.token)}`;
   }
   getUserInfo() {

package/esm/{index-e34aec9d.js → index-94746173.js}

@@ -1,4 +1,4 @@
-import { e as getRenderingRef, f as forceUpdate } from './index-1537f439.js';
+import { e as getRenderingRef, f as forceUpdate } from './index-b26d0794.js';
 
 const appendToMap = (map, propName, value) => {
     const items = map.get(propName);

package/esm/{index-1537f439.js → index-b26d0794.js}

@@ -1257,6 +1257,10 @@ const parsePropertyValue = (propValue, propType) => {
             // but we'll cheat here and say that the string "false" is the boolean false
             return propValue === 'false' ? false : propValue === '' || !!propValue;
         }
+        if (propType & 2 /* Number */) {
+            // force it to be a number
+            return parseFloat(propValue);
+        }
         if (propType & 1 /* String */) {
             // could have been passed as a number or boolean
             // but we still want it as a string

package/esm/loader.js

@@ -1,4 +1,4 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-1537f439.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-b26d0794.js';
 
 /*
  Stencil Client Patch Esm v2.10.0 | MIT Licensed | https://stenciljs.com
@@ -10,7 +10,7 @@ const patchEsm = () => {
 const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
-  return bootstrapLazy([["pn-marketweb-siteheader",[[4,"pn-marketweb-siteheader",{"market":[1537],"language":[1537],"environment":[1537],"token":[1],"endpoint":[1],"hideSiteSelector":[1540,"hide-site-selector"],"hideLanguageSelector":[1540,"hide-language-selector"],"hideSearch":[1540,"hide-search"],"hideLogin":[1540,"hide-login"],"sessionForward":[4,"session-forward"],"cache":[4],"spaMode":[4,"spa-mode"],"i18n":[32],"gotData":[32],"fetchingData":[32],"homePageLink":[32],"menuItems":[32],"siteDefinition":[32],"search":[32],"siteSelector":[32],"languageSelector":[32],"languageOptions":[32],"loginDialog":[32],"minimizeSearch":[32],"loggedIn":[32],"loginManager":[32]},[[0,"setLanguage","onLanguageSelectorChange"],[0,"loginStateChange","onLoginStateChange"],[9,"resize","handleResize"]]]]],["pn-find-service-and-price",[[0,"pn-find-service-and-price",{"source":[1],"language":[1025],"market":[1025],"filteredItems":[32],"postagetype":[32],"weight":[32],"weightvalue":[32],"deliveryscope":[32],"sourceData":[32]}]]],["pn-product-pricelist",[[4,"pn-product-pricelist",{"source":[1],"language":[1025],"market":[1025],"productid":[1],"filteredItems":[32],"sourceData":[32],"gotData":[32],"loading":[32],"postagetype":[32],"weight":[32],"weightvalue":[32]}]]],["pn-marketweb-sitefooter",[[0,"pn-marketweb-sitefooter",{"market":[1537],"language":[1537],"environment":[1537],"endpoint":[1],"cache":[4],"siteDefinition":[32],"footerContent":[32],"i18n":[32],"gotData":[32],"fetchingData":[32]}]]],["pn-filter-checkbox",[[1,"pn-filter-checkbox",{"value":[520],"name":[1],"checkboxid":[1],"disabled":[4],"checked":[4],"indeterminate":[1028]},[[0,"change","handlechange"]]]]],["pn-filter-search",[[1,"pn-filter-search",{"disabled":[4],"placeholder":[1],"inputid":[1],"name":[1],"autocomplete":[1],"value":[1],"label":[1],"loading":[4],"button":[1],"light":[4]},[[0,"input","inputHandler"]]]]],["pn-profile-selector",[[0,"pn-profile-selector",{"language":[1537],"returnUrl":[1,"return-url"],"spamode":[4],"loginManager":[32],"loggedIn":[32],"i18n":[32],"isLoading":[32],"numberOfProfiles":[32]}]]],["pn-sidenav",[[4,"pn-sidenav",{"language":[1],"navLabel":[1,"nav-label"],"i18n":[32]},[[0,"language","setLanguage"],[0,"openSubMenuLevelChange","onOpenSubMenuLevelChange"]]]]],["pn-sidenav-level",[[4,"pn-sidenav-level",{"level":[32],"levelId":[32],"isOpen":[32],"parentName":[32],"parentHref":[32],"parentLinkId":[32],"alignment":[32]}]]],["pn-sidenav-link",[[4,"pn-sidenav-link",{"name":[1],"href":[1],"target":[1],"linkid":[1],"icon":[1],"current":[4],"levelId":[32],"open":[32],"hasChildren":[32]}]]],["pn-product-tile_3",[[4,"pn-product-tile"],[0,"pn-product-tile-info",{"label":[1],"text":[1],"icon":[1]}],[0,"pn-product-tile-price",{"label":[1],"amount":[1],"currency":[1],"url":[1]}]]],["pn-product-pricelist-result",[[0,"pn-product-pricelist-result",{"item":[1040],"shownitems":[16],"weightText":[32]}]]],["pn-choice-button_2",[[0,"pn-find-service-and-price-result",{"item":[1040],"shownitems":[16],"weightText":[32]}],[4,"pn-choice-button",{"value":[520],"name":[1],"choiceid":[1],"type":[1],"disabled":[4],"checked":[4],"indeterminate":[1028]},[[0,"change","handlechange"]]]]],["pn-site-footer_2",[[4,"pn-site-footer",{"url":[1]}],[4,"pn-site-footer-col"]]],["pn-mainnav-link",[[4,"pn-mainnav-link",{"name":[1],"href":[1],"target":[1],"linkid":[1],"levelId":[32],"open":[32],"hasChildren":[32]}]]],["pn-language-selector_9",[[4,"pn-mainnav-level",{"level":[32],"levelId":[32],"isOpen":[32],"parentName":[32],"parentHref":[32],"parentLinkId":[32],"listCount":[32],"alignment":[32]}],[4,"pn-language-selector",{"value":[1537],"selectedLanguageName":[32],"options":[32],"i18n":[32]}],[0,"pn-language-selector-option",{"name":[1],"code":[1],"url":[1],"selected":[4],"currentLanguage":[1,"current-language"]}],[4,"pn-mainnav",{"market":[1],"language":[1],"navigationId":[1,"navigation-id"],"openMenu":[1028,"open-menu"],"navLabel":[1,"nav-label"]},[[0,"language","setLanguage"],[0,"market","setMarket"],[0,"menuLanguageChange","onLanguageChange"],[0,"setmenuopenstate","setMenuOpenState"],[0,"openMenuLevelChange","onOpenMenuLevelChange"]]],[4,"pn-mainnav-list",{"heading":[1],"linkCount":[32]}],[0,"pn-marketweb-siteheader-login",{"endpoint":[1],"token":[1],"i18n":[8,"i-1-8n"],"emitEvents":[4,"emit-events"],"loginDialog":[1040],"loginManager":[32],"loggedIn":[32],"toggleButtonText":[32],"username":[32]}],[0,"pn-marketweb-siteheader-search",{"i18n":[8,"i-1-8n"],"showOnlyLink":[1028,"show-only-link"],"hideSearch":[1028,"hide-search"],"search":[1040]}],[4,"pn-site-selector",{"buttontext":[1537],"heading":[1537],"language":[1537],"i18n":[32]}],[0,"pn-site-selector-item",{"url":[1],"heading":[1],"description":[1],"newwindow":[4]}]]]], options);
+  return bootstrapLazy([["pn-marketweb-siteheader",[[4,"pn-marketweb-siteheader",{"market":[1537],"language":[1537],"environment":[1537],"token":[1],"endpoint":[1],"hideSiteSelector":[1540,"hide-site-selector"],"hideLanguageSelector":[1540,"hide-language-selector"],"hideSearch":[1540,"hide-search"],"hideLogin":[1540,"hide-login"],"sessionForward":[4,"session-forward"],"cache":[4],"spaMode":[4,"spa-mode"],"i18n":[32],"gotData":[32],"fetchingData":[32],"homePageLink":[32],"menuItems":[32],"siteDefinition":[32],"search":[32],"siteSelector":[32],"languageSelector":[32],"languageOptions":[32],"loginDialog":[32],"minimizeSearch":[32],"loggedIn":[32],"loginManager":[32]},[[0,"setLanguage","onLanguageSelectorChange"],[0,"loginStateChange","onLoginStateChange"],[9,"resize","handleResize"]]]]],["pn-find-service-and-price",[[0,"pn-find-service-and-price",{"source":[1],"language":[1025],"market":[1025],"filteredItems":[32],"postagetype":[32],"weight":[32],"weightvalue":[32],"deliveryscope":[32],"sourceData":[32]}]]],["pn-product-pricelist",[[4,"pn-product-pricelist",{"source":[1],"language":[1025],"market":[1025],"productid":[1],"filteredItems":[32],"sourceData":[32],"gotData":[32],"loading":[32],"postagetype":[32],"weight":[32],"weightvalue":[32]}]]],["pn-marketweb-sitefooter",[[0,"pn-marketweb-sitefooter",{"market":[1537],"language":[1537],"environment":[1537],"endpoint":[1],"cache":[4],"siteDefinition":[32],"footerContent":[32],"i18n":[32],"gotData":[32],"fetchingData":[32]}]]],["pn-bonus-progressbar",[[4,"pn-bonus-progressbar",{"icon":[1],"heading":[1],"theme":[513],"bonuspercentage":[1],"currency":[513],"value":[1538],"min":[1538],"max":[1538],"valuepercentage":[32],"progresspercentage":[32],"levelValues":[32],"currentLevelAdjustedValue":[32]}]]],["pn-filter-checkbox",[[1,"pn-filter-checkbox",{"value":[520],"name":[1],"checkboxid":[1],"disabled":[4],"checked":[4],"indeterminate":[1028]},[[0,"change","handlechange"]]]]],["pn-filter-search",[[1,"pn-filter-search",{"disabled":[4],"placeholder":[1],"inputid":[1],"name":[1],"autocomplete":[1],"value":[1],"label":[1],"loading":[4],"button":[1],"light":[4]},[[0,"input","inputHandler"]]]]],["pn-pex-pricefinder",[[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"]]]]],["pn-profile-selector",[[0,"pn-profile-selector",{"language":[1537],"returnUrl":[1,"return-url"],"spamode":[4],"loginManager":[32],"loggedIn":[32],"i18n":[32],"isLoading":[32],"numberOfProfiles":[32]}]]],["pn-sidenav",[[4,"pn-sidenav",{"language":[1],"navLabel":[1,"nav-label"],"i18n":[32]},[[0,"language","setLanguage"],[0,"openSubMenuLevelChange","onOpenSubMenuLevelChange"]]]]],["pn-sidenav-level",[[4,"pn-sidenav-level",{"level":[32],"levelId":[32],"isOpen":[32],"parentName":[32],"parentHref":[32],"parentLinkId":[32],"alignment":[32]}]]],["pn-sidenav-link",[[4,"pn-sidenav-link",{"name":[1],"href":[1],"target":[1],"linkid":[1],"icon":[1],"current":[4],"levelId":[32],"open":[32],"hasChildren":[32]}]]],["pn-product-tile_3",[[4,"pn-product-tile"],[0,"pn-product-tile-info",{"label":[1],"text":[1],"icon":[1]}],[0,"pn-product-tile-price",{"label":[1],"amount":[1],"currency":[1],"url":[1]}]]],["pn-product-pricelist-result",[[0,"pn-product-pricelist-result",{"item":[1040],"shownitems":[16],"weightText":[32]}]]],["pn-bonus-progressbar-level",[[0,"pn-bonus-progressbar-level",{"current":[516],"value":[1538],"bonuspercentage":[1537],"visualpercentage":[1538],"percentage":[32],"max":[32],"min":[32],"currency":[32]}]]],["pn-choice-button_2",[[0,"pn-find-service-and-price-result",{"item":[1040],"shownitems":[16],"weightText":[32]}],[4,"pn-choice-button",{"value":[520],"name":[1],"choiceid":[1],"type":[1],"disabled":[4],"checked":[4],"indeterminate":[1028]},[[0,"change","handlechange"]]]]],["pn-site-footer_2",[[4,"pn-site-footer",{"url":[1]}],[4,"pn-site-footer-col"]]],["pn-mainnav-link",[[4,"pn-mainnav-link",{"name":[1],"href":[1],"target":[1],"linkid":[1],"levelId":[32],"open":[32],"hasChildren":[32]}]]],["pn-language-selector_9",[[4,"pn-mainnav-level",{"level":[32],"levelId":[32],"isOpen":[32],"parentName":[32],"parentHref":[32],"parentLinkId":[32],"listCount":[32],"alignment":[32]}],[4,"pn-language-selector",{"value":[1537],"selectedLanguageName":[32],"options":[32],"i18n":[32]}],[0,"pn-language-selector-option",{"name":[1],"code":[1],"url":[1],"selected":[4],"currentLanguage":[1,"current-language"]}],[4,"pn-mainnav",{"market":[1],"language":[1],"navigationId":[1,"navigation-id"],"openMenu":[1028,"open-menu"],"navLabel":[1,"nav-label"]},[[0,"language","setLanguage"],[0,"market","setMarket"],[0,"menuLanguageChange","onLanguageChange"],[0,"setmenuopenstate","setMenuOpenState"],[0,"openMenuLevelChange","onOpenMenuLevelChange"]]],[4,"pn-mainnav-list",{"heading":[1],"linkCount":[32]}],[0,"pn-marketweb-siteheader-login",{"endpoint":[1],"token":[1],"i18n":[8,"i-1-8n"],"emitEvents":[4,"emit-events"],"loginDialog":[1040],"loginManager":[32],"loggedIn":[32],"toggleButtonText":[32],"username":[32]}],[0,"pn-marketweb-siteheader-search",{"i18n":[8,"i-1-8n"],"showOnlyLink":[1028,"show-only-link"],"hideSearch":[1028,"hide-search"],"search":[1040]}],[4,"pn-site-selector",{"buttontext":[1537],"heading":[1537],"language":[1537],"i18n":[32]}],[0,"pn-site-selector-item",{"url":[1],"heading":[1],"description":[1],"newwindow":[4]}]]]], options);
   });
 };
 

package/esm/mockresponse-e2c08e66.js

@@ -0,0 +1,20 @@
+const request = {
+	timestamp: 1344531600
+};
+const query = {
+	from: "14321",
+	to: "21421",
+	weight: "2500",
+	when: "2023-05-24T12:00:00Z"
+};
+const data = {
+	value: 2000
+};
+const mockresponse = {
+	request: request,
+	query: query,
+	data: data
+};
+
+export default mockresponse;
+export { data, query, request };

package/esm/pn-bonus-progressbar-level.entry.js

@@ -0,0 +1,38 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b26d0794.js';
+
+const pnBonusProgressbarLevelCss = "pn-bonus-progressbar-level{position:absolute;width:0.1rem;left:50%}pn-bonus-progressbar-level::after{content:\"\";width:0.1rem;position:absolute;left:0;border-left:1px dashed #9B1C2E;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:3rem}pn-bonus-progressbar-level:not([current]):nth-child(even)::after{height:7rem;margin-top:0.6rem}.progressbar-level-percentage{font-size:0.75em;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);top:-3.2rem}[current]>.progressbar-level-percentage{display:none}pn-bonus-progressbar-level:not([current]):nth-child(even) .progressbar-level-percentage{top:-4.8rem}.progressbar-level-value{font-size:0.75em;white-space:nowrap;position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);top:2.3rem}[current]>.progressbar-level-value{top:-3.2rem}pn-bonus-progressbar-level:not([current]):nth-child(even) .progressbar-level-value{top:4.2rem}";
+
+let PnBonusProgressbarLevel = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.current = false;
+    this.value = 0;
+    this.bonuspercentage = "";
+    this.visualpercentage = 0;
+    this.percentage = 0;
+    this.max = 0;
+    this.min = 0;
+    this.currency = "";
+  }
+  componentWillLoad() {
+    this.max = parseInt(this.hostElement.parentElement.parentElement.getAttribute("max"), 10);
+    this.min = parseInt(this.hostElement.parentElement.parentElement.getAttribute("min"), 10);
+    this.currency = this.hostElement.parentElement.parentElement.getAttribute("currency");
+    this.percentage = (this.value / this.max) * 100;
+    if (this.visualpercentage > 0) {
+      // Visual percentage has been overriden
+      return;
+    }
+    this.visualpercentage = ((this.value - this.min) / (this.max - this.min)) * 100;
+  }
+  formatValue() {
+    return `${this.value.toLocaleString('sv-SE', { maximumFractionDigits: 0 })} ${this.currency}`;
+  }
+  render() {
+    return (h(Host, { style: { 'left': `${this.visualpercentage}%` } }, h("div", { class: "progressbar-level-percentage" }, this.bonuspercentage), h("div", { class: "progressbar-level-value" }, this.formatValue())));
+  }
+  get hostElement() { return getElement(this); }
+};
+PnBonusProgressbarLevel.style = pnBonusProgressbarLevelCss;
+
+export { PnBonusProgressbarLevel as pn_bonus_progressbar_level };

package/esm/pn-bonus-progressbar.entry.js

@@ -0,0 +1,86 @@
+import { r as registerInstance, h, a as Host, g as getElement } from './index-b26d0794.js';
+
+const pnBonusProgressbarCss = "pn-bonus-progressbar{width:100%}.bonusprogressbar-top{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.bonusprogressbar-top-icon{border-radius:100%;height:5rem;width:5rem;padding:1rem;display:-ms-inline-flexbox;display:inline-flex;margin-right:1em;margin-left:0.5em;background-color:#E0F8FF}[theme=red] .bonusprogressbar-top-icon{background-color:#FBC2C1}.bonusprogressbar-top-icon pn-icon svg{width:100%;height:100%}.bonusprogressbar-top-percentage{margin-left:auto;padding:0.5em}.bonusprogressbar-wrapper{position:relative;display:-ms-flexbox;display:flex;min-height:5em;-ms-flex-align:center;align-items:center}.bonusprogressbar-currentlevel{position:absolute}.bonusprogressbar-progress[value]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:100%;height:1.7rem;border:0.1rem solid #00A0D6;border-radius:1.7rem;padding:0;margin:0;overflow:hidden}[theme=red] .bonusprogressbar-progress[value]{border-color:#F06365}.bonusprogressbar-progress[value]::-webkit-progress-bar{border:0;border-radius:1.7rem;margin:0;padding:0;background:#E0F8FF}[theme=red] .bonusprogressbar-progress[value]::-webkit-progress-bar{background:#FDEFEE}.bonusprogressbar-progress[value]::-webkit-progress-value{margin:0;padding:0;border-radius:1.7rem;background:#00A0D6}[theme=red] .bonusprogressbar-progress[value]::-webkit-progress-value{background:#F06365}";
+
+let PnBonusProgressbar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.icon = null;
+    this.heading = "";
+    this.theme = "blue";
+    this.bonuspercentage = "0%";
+    this.currency = "kr";
+    this.value = 0;
+    this.min = 0;
+    this.max = 0;
+    this.valuepercentage = 0;
+    this.progresspercentage = 0;
+    this.levelValues = [];
+    this.currentLevelAdjustedValue = 0;
+  }
+  componentWillLoad() {
+    this.setInitialValues();
+    this.setValuePercentage();
+  }
+  setInitialValues() {
+    const levelElements = Array.from(this.hostElement.querySelectorAll('pn-bonus-progressbar-level:not([current])'));
+    this.currentLevelAdjustedValue = this.value;
+    this.levelValues = levelElements.map((elm) => {
+      return parseInt(elm.getAttribute("value"), 10);
+    });
+    if (!this.max) {
+      if (this.levelValues && this.levelValues.length > 0) {
+        const newMax = this.levelValues.slice(-1)[0];
+        this.max = Math.floor(newMax * 1.05);
+      }
+    }
+    if (!this.min) {
+      const suggestedMin = Math.floor(this.value * 0.9);
+      if (suggestedMin > 0) {
+        this.min = suggestedMin;
+      }
+    }
+    if (this.value > this.max) {
+      this.currentLevelAdjustedValue = 100;
+    }
+  }
+  setValuePercentage() {
+    this.valuepercentage = (this.value / (this.max)) * 100;
+    this.progresspercentage = ((this.value - this.min) / (this.max - this.min)) * 100;
+    if (this.progresspercentage < 0) {
+      if (this.levelValues && this.levelValues.length && this.levelValues[0] < this.value) {
+        this.min = Math.floor(this.levelValues[0] * .95);
+      }
+      else {
+        this.min = Math.floor(this.value * .95);
+      }
+    }
+    if (this.progresspercentage > 100) {
+      this.progresspercentage = 100;
+      const newMax = this.levelValues.slice(-1)[0];
+      this.max = Math.floor(newMax * 1.05);
+    }
+  }
+  iconColor() {
+    switch (this.theme) {
+      case 'red':
+        return 'coral700';
+      case 'blue':
+      default:
+        return 'blue700';
+    }
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "bonusprogressbar-top" }, this.icon ? (h("div", { class: "bonusprogressbar-top-icon" }, h("pn-icon", { symbol: "stamp", small: "false", color: this.iconColor() }))) : {}, h("h4", { class: "bonusprogressbar-top-heading" }, this.heading), h("strong", { class: "bonusprogressbar-top-percentage" }, this.bonuspercentage)), h("div", { class: "bonusprogressbar-wrapper" }, h("progress", { class: "bonusprogressbar-progress", value: this.progresspercentage, max: "100" }), h("pn-bonus-progressbar-level", { current: true, value: this.value, visualpercentage: this.currentLevelAdjustedValue, bonuspercentage: this.bonuspercentage }), h("slot", null))));
+  }
+  get hostElement() { return getElement(this); }
+  static get watchers() { return {
+    "currentLevelAdjustedValue": ["setValuePercentage"],
+    "value": ["setValuePercentage"],
+    "min": ["setValuePercentage"],
+    "max": ["setValuePercentage"]
+  }; }
+};
+PnBonusProgressbar.style = pnBonusProgressbarCss;
+
+export { PnBonusProgressbar as pn_bonus_progressbar };