@postnord/pn-marketweb-components 2.4.21 → 2.4.23

package/cjs/pn-marketweb-input.cjs.entry.js

@@ -10,23 +10,23 @@ const PnMarketwebInput = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.disabled = false;
-    this.error = '';
+    this.error = "";
     this.invalid = false;
-    this.helpertext = '';
-    this.label = '';
-    this.placeholder = '';
+    this.helpertext = "";
+    this.label = "";
+    this.placeholder = "";
     this.inputid = `${Math.random()}`;
-    this.name = '';
-    this.required = null;
-    this.type = 'text';
-    this.autocomplete = '';
+    this.name = "";
+    this.required = false;
+    this.type = "text";
+    this.autocomplete = "";
     this.valid = null;
-    this.value = '';
-    this.maxlength = '';
-    this.min = '';
-    this.max = '';
-    this.step = '';
-    this.pattern = '';
+    this.value = "";
+    this.maxlength = "";
+    this.min = "";
+    this.max = "";
+    this.step = "";
+    this.pattern = "";
     this.showText = false;
   }
   getTextMessage() {
@@ -40,8 +40,21 @@ const PnMarketwebInput = class {
     this.showText = !this.showText;
   }
   getInputType() {
-    let types = ['text', 'password', 'url', 'tel', 'search', 'number', 'email', 'date', 'datetime-local', 'month', 'week', 'time'];
-    return (types.includes(this.type) && !this.showText) ? this.type : 'text';
+    let types = [
+      "text",
+      "password",
+      "url",
+      "tel",
+      "search",
+      "number",
+      "email",
+      "date",
+      "datetime-local",
+      "month",
+      "week",
+      "time",
+    ];
+    return types.includes(this.type) && !this.showText ? this.type : "text";
   }
   setVal(e) {
     var _a;
@@ -49,21 +62,19 @@ const PnMarketwebInput = class {
     this.value = target.value;
   }
   getClassNames() {
-    let classNames = 'pn-input ';
+    let classNames = "pn-input ";
     if (this.error.length > 0 || this.invalid)
-      classNames += 'error ';
+      classNames += "error ";
     if (this.valid)
-      classNames += 'valid ';
-    if (this.type === 'password')
-      classNames += 'password ';
+      classNames += "valid ";
+    if (this.type === "password")
+      classNames += "password ";
     if (this.error || this.invalid || this.valid)
-      classNames += 'icon ';
+      classNames += "icon ";
     return classNames;
   }
   render() {
-    return (index.h(index.Host, { class: this.getClassNames() }, (this.label || this.maxlength) &&
-      index.h("div", { class: "label-container" }, this.label && index.h("label", { htmlFor: this.inputid }, this.label), parseInt(this.maxlength) > 0 && index.h("label", { class: "char-count", htmlFor: this.inputid }, `${this.value.length}/${this.maxlength}`)), index.h("div", { class: "input-container" }, index.h("input", { type: this.getInputType(), value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, onInput: (e) => this.setVal(e), maxlength: this.maxlength ? this.maxlength : null, min: (this.min ? this.min : null), max: (this.max ? this.max : null), step: (this.step ? this.step : null), pattern: (this.pattern ? this.pattern : null) }), index.h("svg", { class: "pn-input-checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, index.h("polyline", { class: "checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" })), this.type === 'password' && !this.disabled && index.h("button", { onClick: () => this.toggleTextVisibility() }, "Show")), this.getTextMessage() &&
-      index.h("small", null, this.error && index.h("pn-icon", { symbol: "alert-exclamation-circle", small: true, color: "warning" }), this.getTextMessage())));
+    return (index.h(index.Host, { class: this.getClassNames() }, (this.label || this.maxlength) && (index.h("div", { class: "label-container" }, this.label && index.h("label", { htmlFor: this.inputid }, this.label), parseInt(this.maxlength) > 0 && (index.h("label", { class: "char-count", htmlFor: this.inputid }, `${this.value.length}/${this.maxlength}`)))), index.h("div", { class: "input-container" }, index.h("input", { type: this.getInputType(), value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, required: this.required, autocomplete: this.autocomplete, onInput: (e) => this.setVal(e), maxlength: this.maxlength ? this.maxlength : null, min: this.min ? this.min : null, max: this.max ? this.max : null, step: this.step ? this.step : null, pattern: this.pattern ? this.pattern : null }), index.h("svg", { class: "pn-input-checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, index.h("polyline", { class: "checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" })), this.type === "password" && !this.disabled && (index.h("button", { onClick: () => this.toggleTextVisibility() }, "Show"))), this.getTextMessage() && (index.h("small", null, this.error && index.h("pn-icon", { symbol: "alert-exclamation-circle", small: true, color: "warning" }), this.getTextMessage()))));
   }
 };
 PnMarketwebInput.style = pnMarketwebInputCss;

package/cjs/pn-marketweb-sitefooter.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4199ff85.js');
-const MarketWebContextService = require('./MarketWebContextService-17053565.js');
+const FetchHelper = require('./FetchHelper-2130dacf.js');
 
 const getSocialMediaIconsByType = (linkType = '', fill = '#005D92') => {
   switch (linkType) {
@@ -14,9 +14,9 @@ const getSocialMediaIconsByType = (linkType = '', fill = '#005D92') => {
       </svg>`;
     case 'twitter':
       return `<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <circle cx="28" cy="28" r="28" fill="${fill}" />
-          <path fill-rule="evenodd" clip-rule="evenodd" d="M41.3337 19.8587C40.3525 20.2871 39.2981 20.5766 38.1914 20.7068C39.321 20.0402 40.1884 18.9847 40.5969 17.7272C39.5399 18.3443 38.369 18.7925 37.1228 19.0341C36.1248 17.9874 34.7029 17.3333 33.1294 17.3333C30.1079 17.3333 27.6583 19.7446 27.6583 22.7188C27.6583 23.1409 27.7067 23.552 27.8 23.9461C23.253 23.7216 19.2218 21.5775 16.5234 18.3191C16.0525 19.1146 15.7827 20.0397 15.7827 21.0267C15.7827 22.8951 16.7486 24.5436 18.2166 25.5093C17.3197 25.4814 16.4762 25.2391 15.7385 24.8358C15.7381 24.8582 15.7381 24.8808 15.7381 24.9035C15.7381 27.5129 17.6239 29.6896 20.1267 30.1843C19.6676 30.3074 19.1843 30.3732 18.6853 30.3732C18.3328 30.3732 17.99 30.3395 17.656 30.2766C18.3522 32.4163 20.3726 33.9733 22.7667 34.0168C20.8943 35.4612 18.5353 36.3222 15.9721 36.3222C15.5305 36.3222 15.095 36.2968 14.667 36.2471C17.0881 37.7751 19.9639 38.6666 23.0535 38.6666C33.1166 38.6666 38.6195 30.4602 38.6195 23.3433C38.6195 23.1098 38.6142 22.8776 38.6037 22.6466C39.6725 21.8873 40.6002 20.9387 41.3337 19.8587Z" fill="white" />
-      </svg>`;
+              <circle cx="28" cy="28" r="28" fill="#005D92"/>
+              <path d="M34.8996 17.5H38.5996L30.5996 26.4L39.9996 38.6H32.5996L26.7996 31.2L20.1996 38.6H16.4996L25.0996 29L16.0996 17.5H23.5996L28.7996 24.2L34.8996 17.5ZM33.5996 36.4H35.5996L22.4996 19.5H20.2996L33.5996 36.4Z" fill="white"/>
+              </svg>`;
     case 'linkedin':
       return `<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
           <circle cx="28" cy="28" r="28" fill="${fill}" />
@@ -128,7 +128,7 @@ const PnMarketwebSiteheader = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     // FetchHelper
-    this.fetchHelper = new MarketWebContextService.FetchHelper('sitefooter');
+    this.fetchHelper = new FetchHelper.FetchHelper('sitefooter');
     //endpoint
     this.endpointPath = '/api/footer/footer';
     this.market = 'se';
@@ -153,7 +153,7 @@ const PnMarketwebSiteheader = class {
   }
   async setInitialValues(href = window.location.href) {
     var _a;
-    const marketWebContextService = new MarketWebContextService.MarketWebContextService(href);
+    const marketWebContextService = new FetchHelper.MarketWebContextService(href);
     if (!this.market) {
       const resolvedMarket = await marketWebContextService.getMarket();
       this.market = resolvedMarket;

package/cjs/pn-marketweb-siteheader.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4199ff85.js');
-const MarketWebContextService = require('./MarketWebContextService-17053565.js');
+const FetchHelper = require('./FetchHelper-2130dacf.js');
 const pnMarketwebSiteheaderStore = require('./pn-marketweb-siteheader-store-5ced6902.js');
 require('./index-95e5b7f9.js');
 
@@ -148,7 +148,7 @@ const PnMarketwebSiteheader = class {
     this.changeMarket = index.createEvent(this, "changeMarket", 7);
     this.endpointPath = '/api/navigation/header';
     // FetchHelper
-    this.fetchHelper = new MarketWebContextService.FetchHelper('siteheader');
+    this.fetchHelper = new FetchHelper.FetchHelper('siteheader');
     this.market = null;
     this.language = null;
     this.siteid = null;
@@ -203,7 +203,7 @@ const PnMarketwebSiteheader = class {
   }
   async setInitialValues(href = window.location.href) {
     var _a;
-    const marketWebContextService = new MarketWebContextService.MarketWebContextService(href);
+    const marketWebContextService = new FetchHelper.MarketWebContextService(href);
     if (!this.market) {
       const resolvedMarket = await marketWebContextService.getMarket();
       this.market = resolvedMarket;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index$1 = require('./index-4199ff85.js');
-const MarketWebContextService = require('./MarketWebContextService-17053565.js');
+const FetchHelper = require('./FetchHelper-2130dacf.js');
 const index = require('./index-95e5b7f9.js');
 
 const translations = {
@@ -234,7 +234,7 @@ const pnProxioFindpriceCss = "@charset \"UTF-8\";pn-proxio-findprice .findprice-
 const PnProxioFindPrice = class {
   constructor(hostRef) {
     index$1.registerInstance(this, hostRef);
-    this.fetchHelper = new MarketWebContextService.FetchHelper("proxiopricegroups");
+    this.fetchHelper = new FetchHelper.FetchHelper("proxiopricegroups");
     this.endpoint = null;
     this.language = "da";
     this.market = "dk";
@@ -255,7 +255,7 @@ const PnProxioFindPrice = class {
     });
   }
   async setInitialValues(href = window.location.href) {
-    const marketWebContextService = new MarketWebContextService.MarketWebContextService(href);
+    const marketWebContextService = new FetchHelper.MarketWebContextService(href);
     const environment = await marketWebContextService.getEnvironmentName();
     if ((!this.endpoint && (environment === null || environment === void 0 ? void 0 : environment.indexOf('local')) === -1)) {
       const market = await marketWebContextService.getMarket();

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-4199ff85.js');
-const MarketWebContextService = require('./MarketWebContextService-17053565.js');
+const FetchHelper = require('./FetchHelper-2130dacf.js');
 const translations = require('./translations-aef1609e.js');
 
 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.weightvaluecontainer pn-button button::before{display: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: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}";
@@ -11,7 +11,7 @@ const pnProxioPricegroupCss = "pn-proxio-pricegroup div.proxio-pricegroup-contai
 const PnProxioPricegroup = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.fetchHelper = new MarketWebContextService.FetchHelper("proxiopricegroup");
+    this.fetchHelper = new FetchHelper.FetchHelper("proxiopricegroup");
     this.endpoint = null;
     this.language = "sv";
     this.market = "se";
@@ -27,7 +27,7 @@ const PnProxioPricegroup = class {
     });
   }
   async setInitialValues(href = window.location.href) {
-    const marketWebContextService = new MarketWebContextService.MarketWebContextService(href);
+    const marketWebContextService = new FetchHelper.MarketWebContextService(href);
     const environment = await marketWebContextService.getEnvironmentName();
     if ((!this.endpoint && (environment === null || environment === void 0 ? void 0 : environment.indexOf('local')) === -1)) {
       const market = await marketWebContextService.getMarket();

package/collection/collection-manifest.json

@@ -16,6 +16,7 @@
     "./components/cta/pn-spotlight/pn-spotlight.js",
     "./components/data-visualization/pn-stats-info/pn-stats-info.js",
     "./components/data-visualization/pn-stats-info/pn-stats-info-data/pn-stats-info-data.js",
+    "./components/input/pn-address-autofill/pn-address-autofill.js",
     "./components/input/pn-bonus-progressbar/pn-bonus-progressbar-level.js",
     "./components/input/pn-bonus-progressbar/pn-bonus-progressbar.js",
     "./components/input/pn-choice-button/pn-choice-button.js",
@@ -24,6 +25,7 @@
     "./components/input/pn-filter-checkbox/pn-filter-checkbox.js",
     "./components/input/pn-marketweb-input/pn-marketweb-input.js",
     "./components/input/pn-marketweb-search/pn-marketweb-search.js",
+    "./components/input/pn-multi-formfield/pn-multi-formfield.js",
     "./components/layout-components/pn-marketweb-sitefooter/pn-marketweb-sitefooter.js",
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-button.js",
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-login-linklist.js",
@@ -34,7 +36,6 @@
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-search.js",
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-unified-login.js",
     "./components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.js",
-    "./components/layout-components/pn-multi-formfield/pn-multi-formfield.js",
     "./components/minor/pn-app-banner/pn-app-banner.js",
     "./components/minor/pn-swan/pn-swan.js",
     "./components/minor/pn-titletag/pn-titletag.js",

package/collection/components/input/pn-address-autofill/pn-address-autofill.css

@@ -0,0 +1,45 @@
+pn-address-autofill pn-marketweb-input {
+  width: 50%;
+}
+pn-address-autofill .input-container-row {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
+pn-address-autofill .label-container {
+  color: #5E554A;
+  font-size: 0.875em;
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-end;
+}
+pn-address-autofill .autocomplete-items {
+  position: absolute;
+  border-radius: 0.8rem;
+  border: 0.1rem solid #5E554A;
+  width: 100%;
+  max-height: 30rem;
+  overflow-y: auto;
+}
+pn-address-autofill .autocomplete-items:hover,
+pn-address-autofill .autocomplete-items :focus {
+  border: 0.1rem solid #00A0D6;
+}
+pn-address-autofill .autocomplete-items div {
+  padding: 1.6rem;
+  cursor: pointer;
+  background-color: #fff;
+  border: 0.1rem solid transparent;
+}
+pn-address-autofill .autocomplete-items div:first-child {
+  border-radius: 0.8rem 0.8rem 0 0;
+}
+pn-address-autofill .autocomplete-items div:last-child {
+  border-radius: 0 0 0.8rem 0.8rem;
+}
+pn-address-autofill .autocomplete-items div:hover {
+  background-color: #e0f8ff;
+}
+pn-address-autofill .autocomplete-items .autocomplete-active {
+  background-color: #e0f8ff;
+}