@postnord/pn-marketweb-components 3.5.2 → 4.0.0

package/collection/components/widgets/pn-find-price/pn-find-price.js

@@ -95,11 +95,11 @@ export class PnfindPrice {
         this.filteredItems = weightFilteredData;
     }
     render() {
-        return (h("div", { key: '9861488c008d9f59921a606451c0e4d6b09eec99', class: "findprice-form" }, h("fieldset", { key: '3affcdc0763637875c78eaf119487ff41aa72996' }, h("legend", { key: 'dd9b9145db5924d09d2dbeeb164b55192f359953', class: "heading" }, state.i18n.sizeheading), h("div", { key: '3a5bc69dba0e8d25c3be90cf3c5f0f883226d630', class: "sizecategory" }, h("table", { key: '807ed7a3c3c79d8bd135279a8b19f8a2f348f84c', class: "sizeTable" }, h("img", { key: 'eae577294be91aee531839fa9b02eb434f345db5', id: "clouds", src: clouds }), h("tr", { key: 'a849d4cc5799bdfcf87f190299ba6c052dc0a9fc' }, h("td", { key: '1a709ddba39a00dd531db3f399147f7f3a89ef10' }, h("img", { key: '21c348ca869ee49c58f33acd24e15f19b8bb445e', class: "firstCell", src: person })), h("td", { key: '8de8c83a82fb8e7ce18763ee3e4cdd9d78fa6aae' }, h("img", { key: '92a6bf91425a836b2202432e38c5bff09630563c', src: small })), h("td", { key: '4e1b6c5686c325b97cf13a702067dd3e71af3097' }, h("img", { key: 'd96752de4a5c11b224a13943a51813fb3ef7445f', src: medium })), h("td", { key: '5c0f48c47d839b9da7e08885e9f3aa7825a70d05' }, h("img", { key: '9074b9af5ef725470ff6ad18d2aa94286e0ad133', src: large }))), h("tr", { key: '6bbf9231e7174ef7c9ba72ecabdd686498e91c16' }, h("td", { key: '0be96b86477ea76cfcd42b592e75928ead8490c6' }), sizeCategories.map(sizeCategory => (h("td", null, h("pn-radio-button", { id: 'findpricecategory-' + sizeCategory.value, radioid: sizeCategory.value, value: sizeCategory.value, name: "sizecategory", checked: sizeCategory.value === this.sizecategory.value, onChange: () => {
+        return (h("div", { key: 'f905b0634bc06e41d7bd959e0fff9462b1b168da', class: "findprice-form" }, h("fieldset", { key: 'eb218cd4d546f67297b35327e6cc6082b77c81e6' }, h("legend", { key: 'e1bd485b4f129219fb3a883cf6d466244b210162', class: "heading" }, state.i18n.sizeheading), h("div", { key: 'b5efeb0832a14e7b77e9e4f0196aa07579dca2c7', class: "sizecategory" }, h("table", { key: '127474d40d75b7d24f5909c7af200024280b1540', class: "sizeTable" }, h("img", { key: 'b6a5e9ebdecf0a8b230d38386c2dc1d2989bbeba', id: "clouds", src: clouds }), h("tr", { key: '65a5e896096d2cb3365d74eb2375f503abddada7' }, h("td", { key: '9d50eb0443891868faf8154c11127f5ef18ecafb' }, h("img", { key: 'c924592e2f737141a06d3bab591bb2b300d08d63', class: "firstCell", src: person })), h("td", { key: '5dca188e6cb05aa3dfb1f9ebf8e8c1e3fd387bc5' }, h("img", { key: 'e2f2d66cc90b95f43500bef802ae72a18b51a1b5', src: small })), h("td", { key: 'c20fb170d3a20925992be1dd93dd99490b3b58e9' }, h("img", { key: 'eb4bc86caaea96967702632c8de19c6d16c123fb', src: medium })), h("td", { key: 'c73045e6208d836be4499d945ab52517b86a76c7' }, h("img", { key: '027d4c3cc7683f24a3c56233ca704e6b9baaf591', src: large }))), h("tr", { key: '3ba6d9aaca95b5d80b76a4b410d9fb18bcf135f1' }, h("td", { key: '5e065c50e949135609001b050dcb7eea2dbe806a' }), sizeCategories.map(sizeCategory => (h("td", null, h("pn-radio-button", { id: 'findpricecategory-' + sizeCategory.value, radioid: sizeCategory.value, value: sizeCategory.value, name: "sizecategory", checked: sizeCategory.value === this.sizecategory.value, onChange: () => {
                 this.sizecategory = sizeCategories.filter(x => x.value === sizeCategory.value)[0];
                 this.weight = { value: 0, name: '' };
                 this.weightvalue = this.weight.value;
-            } })))))))), h("fieldset", { key: 'dacae57f9d409cbd9527dbd55126d1ac8528faf8' }, h("legend", { key: '2833dc460f0a6e25b51ad6c03a0c97ad79afff7a', class: "heading" }, state.i18n.weightheading), this.sizecategory.value && weights[this.sizecategory.unit] ? (h("div", { class: "weightoption" }, h("div", { class: "weightoption-content" }, weights[this.sizecategory.unit].map(wght => (h("pn-choice-button", { id: 'findpriceweight-' + wght.value, choiceid: this.sizecategory.value + wght.value, name: "weight", type: "radio", value: !this.weight.value ? 0 : weights[this.sizecategory.unit].findIndex(x => x.value === this.weightvalue), checked: wght.value === this.weight.value, onChange: () => {
+            } })))))))), h("fieldset", { key: 'd92250abdec1d53b422c535196f1564ce2a340ed' }, h("legend", { key: 'c65f1411972556f0fec1463d06612a92e13c2978', class: "heading" }, state.i18n.weightheading), this.sizecategory.value && weights[this.sizecategory.unit] ? (h("div", { class: "weightoption" }, h("div", { class: "weightoption-content" }, weights[this.sizecategory.unit].map(wght => (h("pn-choice-button", { id: 'findpriceweight-' + wght.value, choiceid: this.sizecategory.value + wght.value, name: "weight", type: "radio", value: !this.weight.value ? 0 : weights[this.sizecategory.unit].findIndex(x => x.value === this.weightvalue), checked: wght.value === this.weight.value, onChange: () => {
                 this.weight = weights[this.sizecategory.unit].filter(x => x.value === wght.value)[0];
                 this.weightvalue = this.weight.value;
             } }, wght.name)))))) : null, this.filteredItems && this.filteredItems.length > 0 ? (h("div", { class: "resultlist" }, state.i18n.resultlistheading ? h("div", { class: "resultHeading" }, state.i18n.resultlistheading) : null, this.filteredItems.map((item) => (h("div", null, h("pn-find-price-result", { item: item })))))) : null)));

package/collection/components/widgets/pn-find-service-and-price/pn-find-service-and-price-result.css

@@ -1,3 +1,28 @@
 pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
 }

package/collection/components/widgets/pn-find-service-and-price/pn-find-service-and-price-result.js

@@ -26,7 +26,7 @@ export class PnfindServiceAndPriceResult {
         // (this.item.what === "letter" && this.item.maxweight > 999) ? Math.round(this.item.maxweight/1000) + " kg" : this.item.maxweight + " g";
     }
     render() {
-        return (h(Host, { key: '6a4bac61a7b07cd203798ad66e723bd7e45298e2' }, this.shownitems.map(item => (h("pn-product-card", null, h("pn-illustration", { slot: "illustration", illustration: item.illustration }), h("div", { slot: "content" }, h("div", { class: "content" }, h("h3", null, item.name), item.description ? h("div", { class: "description" }, item.description) : null, item.info ? h("div", { class: "description" }, item.info) : null)), item.maxweight ? h("pn-product-tile-info", { label: state.i18n.maxweightlabel, text: this.weightText }) : null, item.pricestamps ? (h("pn-product-tile-price", { slot: "price", label: state.i18n.stampshopcta, amount: item.pricestamps + '', currency: state.market.currency })) : null, item.pricesenddirect ? (h("pn-product-tile-price", { slot: "price", label: state.i18n.senddirectcta, amount: item.pricesenddirect + '', currency: state.market.currency, url: "https://portal.postnord.com/skickadirekt/" })) : null, item.note ? (h("small", { slot: "note" }, h("p", null, item.note))) : null)))));
+        return (h(Host, { key: '47d8e3473abc44c2f33670ce759b589a3b2fd942' }, this.shownitems.map(item => (h("pn-product-card", null, h("pn-illustration", { slot: "illustration", illustration: item.illustration }), h("div", { slot: "content" }, h("div", { class: "content" }, h("h3", null, item.name), item.description ? h("div", { class: "description" }, item.description) : null, item.info ? h("div", { class: "description" }, item.info) : null)), item.maxweight ? h("pn-product-tile-info", { label: state.i18n.maxweightlabel, text: this.weightText }) : null, item.pricestamps ? (h("pn-product-tile-price", { slot: "price", label: state.i18n.stampshopcta, amount: item.pricestamps + '', currency: state.market.currency })) : null, item.pricesenddirect ? (h("pn-product-tile-price", { slot: "price", label: state.i18n.senddirectcta, amount: item.pricesenddirect + '', currency: state.market.currency, url: "https://portal.postnord.com/skickadirekt/" })) : null, item.note ? (h("small", { slot: "note" }, h("p", null, item.note))) : null)))));
     }
     static get is() { return "pn-find-service-and-price-result"; }
     static get originalStyleUrls() {

package/collection/components/widgets/pn-find-service-and-price/pn-find-service-and-price.css

@@ -2,6 +2,31 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
 pn-find-service-and-price .findprice-form {
   max-width: 50em;
   margin: 0 auto;

package/collection/components/widgets/pn-find-service-and-price/pn-find-service-and-price.js

@@ -88,7 +88,7 @@ export class PnfindServiceAndPrice {
         this.filteredItems = weightFilteredData;
     }
     render() {
-        return (h("div", { key: '15c5a4f1695ae66a41fb0190c87ca5302f3c3093' }, h("div", { key: '57532a1ae5e93552f6a3db4977ad54534f93a408', class: "findprice-form" }, state.i18n.componentheading ? h("h2", null, state.i18n.componentheading) : null, h("div", { key: 'c8a72e92f08b28bfc78c91ed6c6bb78c26f2c38a', class: "postagetypes" }, postagetypes.map(postagetype => (h("pn-choice-button", { choiceid: postagetype.value, value: postagetype.value, name: "postagetype", type: "radio", checked: postagetype.value === this.postagetype.value, onChange: () => {
+        return (h("div", { key: '0de982c8ec40481b1a547375c6ebe90dd0793e68' }, h("div", { key: 'c91c7d40a40133f018332de72c9e2d01bb345be8', class: "findprice-form" }, state.i18n.componentheading ? h("h2", null, state.i18n.componentheading) : null, h("div", { key: '2806ec049ae3cad22813d139b57526faea25300b', class: "postagetypes" }, postagetypes.map(postagetype => (h("pn-choice-button", { choiceid: postagetype.value, value: postagetype.value, name: "postagetype", type: "radio", checked: postagetype.value === this.postagetype.value, onChange: () => {
                 this.postagetype = postagetypes.filter(x => x.value === postagetype.value)[0];
                 this.deliveryscope = { value: '', name: '', icon: '' };
                 this.weight = { value: 0, name: '' };

package/collection/components/widgets/pn-hero-block-international/pn-hero-block-international.css

@@ -2,6 +2,31 @@ pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
   min-height: initial;
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
 pn-hero-block-international {
   width: 100%;
 }

package/collection/components/widgets/pn-hero-block-international/pn-hero-block-international.js

@@ -28,7 +28,7 @@ export class PnHeroBlockInternational {
         }
     }
     render() {
-        return (h(Host, { key: 'febccdeed45fdfd3e8f6ae91da584339f34ff574', class: `hero-international ${this.centeredLayout ? 'hero-international--centered-layout' : ''} ${this.animateLogo ? 'hero-international--animate' : ''}` }, h("div", { key: '5980b48b2c0f1310ef92e1314b1b87cce0bfb560', class: "hero-international__content" }, h("div", { key: '6b7cfa9f6c93ed374288677f0e5fbbd31d94fa57', class: "flex-wrapper" }, h("div", { key: 'e9f8d7c57040ae943a4564c20e0364f7a3bdeea6', class: "content-col" }, h("span", { key: 'a34c11674a6e535dfef5ab3c2f216328979789f9', class: "hero-international__content__site-tag" }, "International"), h("h1", { key: '03b0f086c0dc0d7565a4f9664f330b6e5b1ee786', class: "hero-international__content__heading" }, this.heading, " ", h("span", { key: '5b4d052b5bce78001ac39568c3e7cfdf3ddf6ea8' }, this.subHeading)), h("p", { key: '92bf6edca10040a2fe4dd88eb5dd77da3d375bbc', class: "hero-international__content__preamble" }, this.preamble), this.hasCtaButtonSlot && (h("div", { key: '35f4800ea79d06346e1a27346d53d5e25cb445f1', class: "hero-international__content__cta" }, h("slot", { key: 'd738b6589da73282378e2544d1198368ece704c8', name: "hero-international-cta" })))), !this.centeredLayout && (h("div", { key: '9412149e00325d7dca22ef29829939b6bae008a5', class: "hero-international__content__logo-col" }, h("div", { key: 'b0bd6c4467d582f9be43840919648287cb77f779', class: "hero-international__content__logo-col__image" }, h("svg", { key: '595df22576f8622525c51637fb0a8b823dbec86c', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 919 336" }, h("circle", { key: 'aa1a9e3cb6ae874b10d870cd6666bccf71907b59', class: "cls-1", cx: "168", cy: "168", r: "168" }), h("circle", { key: 'f9212008a51d07ad212c0fa01fa4da12b116c9a1', class: "cls-1", cx: "519", cy: "168", r: "168" }), h("path", { key: 'c13f449f9eb865b974e35863be8656cce3345eed', class: "cls-1", d: "M510 0h409v336H510z" }), h("path", { key: '67bb3f1f4c804e8431837d7feb39f4a99c8563d0', d: "M235.51 155.55c0 11.19-9.19 15.88-17.84 15.88s-17.46-4.58-17.46-15.4 9.02-15.88 17.84-15.88c8.6 0 17.46 4.63 17.46 15.4Zm-11.65.33c0-3.68-2.42-6.18-6.02-6.18s-6.07 2.5-6.07 6.18c0 3.46 2.48 6.02 6.07 6.02s6.02-2.56 6.02-6.02Zm-147.53 0c0 8.53-5.91 15.56-15.1 15.56-5.64 0-8.27-2.77-8.27-2.77v10.34H42v-37.89h10.96V144s2.85-3.84 9.08-3.84c9.13 0 14.29 6.98 14.29 15.72Zm-11.6 0c0-3.68-2.42-6.18-6.02-6.18s-6.07 2.5-6.07 6.18c0 3.46 2.47 6.02 6.07 6.02s6.02-2.56 6.02-6.02Zm184.35.47c0-4.47 2.74-5.86 6.4-5.86 2.25 0 3.71.53 3.71.53l.27-10.02s-.7-.32-2.58-.32c-6.12 0-7.79 3.84-7.79 3.84v-3.41h-10.96v29.42h10.96v-14.18ZM294 132v38.53h-10.96v-2.88s-2.85 3.84-9.08 3.84c-9.13 0-14.29-6.98-14.29-15.72s5.91-15.56 15.1-15.56c5.64 0 8.27 2.77 8.27 2.77v-8.85L294 132Zm-10.64 23.77c0-3.47-2.47-6.02-6.07-6.02s-6.02 2.56-6.02 6.02c0 3.67 2.42 6.18 6.02 6.18s6.07-2.51 6.07-6.18Zm-96.71-15.62c-6.39 0-8.71 3.84-8.71 3.84v-2.88h-10.96v29.42h10.96v-15.08c0-3.73 1.4-5.44 4.78-5.44s3.87 2.77 3.87 6.29v14.23h11.07v-18.07c0-8.1-3.92-12.31-11.01-12.31Zm-30.74-5.65h-10.96v36.03h10.96v-20.25h5.16l5-9.17h-10.16v-6.61Zm-24.55 17.27c-3.55-.53-5.11-.53-5.11-1.92 0-1.17 1.45-1.65 4.3-1.65 4.83 0 9.08 1.6 9.08 1.6l1.93-8.26s-4.67-1.33-10.91-1.33c-10.48 0-15.96 4-15.96 10.39 0 4.96 2.96 7.89 11.61 9 3.65.48 5 .69 5 2.03s-1.45 1.7-3.98 1.7c-5.48 0-10.64-2.29-10.64-2.29l-2.2 8.53s5.16 1.81 11.88 1.81c11.28 0 16.49-3.95 16.49-10.39 0-5.11-2.79-7.88-11.49-9.22Zm-17.9 3.78c0 11.19-9.19 15.88-17.84 15.88s-17.46-4.58-17.46-15.4 9.03-15.88 17.84-15.88c8.6 0 17.46 4.63 17.46 15.4Zm-11.66.33c0-3.68-2.42-6.18-6.02-6.18s-6.07 2.5-6.07 6.18c0 3.46 2.47 6.02 6.07 6.02s6.02-2.56 6.02-6.02Z", class: "svg-path-style2" }), h("path", { key: '70013f0febe40cc8ca802957d0ee3f91653a2b30', d: "M167 197.67v-15.01h2.71v15.01H167Zm15.27-7.02c0-2.41-1.92-4.08-4.24-4.08-1.46 0-2.6.59-3.29 1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52 1.04-2.58 2.51-2.58s2.38 1.02 2.38 2.54v6.24h2.47v-7.02Zm8-3.8h-2.8v-3.62H185v10.99c0 2.01 1.43 3.44 3.46 3.44h1.81v-2.29h-1.32c-.9 0-1.48-.55-1.48-1.48v-4.94h1.67l1.14-2.1Zm11.93 6.2c0-.15.04-.71.04-.97 0-3.31-2.25-5.56-5.49-5.56s-5.56 2.56-5.56 5.74 2.49 5.74 5.73 5.74c2.12 0 3.86-.84 4.98-2.58l-2.05-1.1c-.6.88-1.52 1.48-2.93 1.48-1.68 0-3-1.04-3.33-2.74h8.6m-8.53-1.94c.37-1.48 1.52-2.47 3.07-2.47 1.7 0 2.78.95 3.09 2.47h-6.16Zm16.03-4.26c-1.61 0-2.62.84-3.09 1.83v-1.83h-2.32v10.81h2.47v-5.25c0-1.68 1.1-3 2.71-3h1.08v-2.56h-.86Zm12.55 3.79c0-2.41-1.92-4.08-4.23-4.08-1.46 0-2.6.59-3.29 1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52 1.04-2.58 2.51-2.58s2.38 1.02 2.38 2.54v6.24h2.47v-7.02Zm11.06-2.27c-.75-1.13-2.14-1.81-3.7-1.81-3.15 0-5.34 2.47-5.34 5.67s2.18 5.67 5.34 5.67c1.56 0 2.95-.68 3.7-1.83v1.59h2.32v-10.81h-2.32v1.52Zm0 3.86c0 1.87-1.32 3.35-3.29 3.35s-3.27-1.48-3.27-3.35 1.3-3.38 3.27-3.38 3.29 1.5 3.29 3.38Zm10.31-5.39h-2.8v-3.62h-2.47v10.99c0 2.01 1.43 3.44 3.46 3.44h1.81v-2.29h-1.32c-.91 0-1.48-.55-1.48-1.48v-4.94h1.67l1.14-2.1Zm1.84-3.22c0 .84.68 1.52 1.54 1.52s1.57-.68 1.57-1.52-.71-1.5-1.57-1.5-1.54.69-1.54 1.5Zm2.78 14.04v-10.81h-2.47v10.81h2.47Zm2.12-5.41c0 3.18 2.49 5.74 5.78 5.74s5.76-2.56 5.76-5.74-2.49-5.74-5.76-5.74-5.78 2.54-5.78 5.74Zm9.06 0c0 1.88-1.39 3.38-3.29 3.38s-3.29-1.5-3.29-3.38 1.37-3.38 3.29-3.38 3.29 1.48 3.29 3.38Zm14.41-1.61c0-2.41-1.92-4.08-4.23-4.08-1.46 0-2.6.59-3.29 1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52 1.04-2.58 2.52-2.58s2.38 1.02 2.38 2.54v6.24h2.47v-7.02Zm11.06-2.27c-.75-1.13-2.14-1.81-3.7-1.81-3.15 0-5.34 2.47-5.34 5.67s2.18 5.67 5.34 5.67c1.57 0 2.95-.68 3.7-1.83v1.59h2.32v-10.81h-2.32v1.52Zm0 3.86c0 1.87-1.32 3.35-3.29 3.35s-3.26-1.48-3.26-3.35 1.3-3.38 3.26-3.38 3.29 1.5 3.29 3.38Zm9.12 3.2h-.46c-.77 0-1.15-.4-1.15-1.17V182h-2.47v12.69c0 1.81 1.23 2.98 3.13 2.98h.95v-2.23Z", class: "svg-path-style1" })))))), this.showSideLoader && !this.centeredLayout && (h("div", { key: 'c8ce62511215b868a66f3291743e58b9cddcf56c', class: `hero-international__side-loader ${this.animateSideloader ? 'hero-international__side-loader--animate' : ''}` }, h("div", { key: '53d8141497503bf7b50b5fe47e1242f8d32af2ce', class: "shape" }))))));
+        return (h(Host, { key: '29a1cbf6af742f1c9a7b5cc3554600c46e8d9385', class: `hero-international ${this.centeredLayout ? 'hero-international--centered-layout' : ''} ${this.animateLogo ? 'hero-international--animate' : ''}` }, h("div", { key: '80efe44f05675ceaba7533ff198f8697565c5638', class: "hero-international__content" }, h("div", { key: '8a7523d6354528218e36c98ad9445c13b4637f80', class: "flex-wrapper" }, h("div", { key: '9cf9f7758c031b2ff7f54c07c9467894cc5d8ffe', class: "content-col" }, h("span", { key: 'cdca9a270bb61f15cde5da19bf7dda780e4895bf', class: "hero-international__content__site-tag" }, "International"), h("h1", { key: '4068c56efd71f7692ba3341899e6820b77ca12ab', class: "hero-international__content__heading" }, this.heading, " ", h("span", { key: 'dd74bfe566c7225f8f30d786512e23f3b5bdb209' }, this.subHeading)), h("p", { key: 'aeb3a5b81b381c4306aea57b28c9fc32f4e845ad', class: "hero-international__content__preamble" }, this.preamble), this.hasCtaButtonSlot && (h("div", { key: '3c00c3fbc7fd42a08735f17ba1ef8dc56bc5cb7b', class: "hero-international__content__cta" }, h("slot", { key: '58f9a63a04f29170126425029625c477c31cd73b', name: "hero-international-cta" })))), !this.centeredLayout && (h("div", { key: '0a659dcad26ebd0a6ac1e7d9f86c7968eda41df0', class: "hero-international__content__logo-col" }, h("div", { key: '8261a17c77ee5b18874c56a41361d7d3e4dd772d', class: "hero-international__content__logo-col__image" }, h("svg", { key: 'd404ad512ea0bebc2cc5b5e0df4404c6125dadfa', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 919 336" }, h("circle", { key: '28106848da1e8364bc43fe8d591154342f71e75b', class: "cls-1", cx: "168", cy: "168", r: "168" }), h("circle", { key: '565176e62b896455941315643289d97a39baf62b', class: "cls-1", cx: "519", cy: "168", r: "168" }), h("path", { key: '0da027ee8c90501749291a00b37b2df8879e8632', class: "cls-1", d: "M510 0h409v336H510z" }), h("path", { key: 'cb1637d901d59f116557a9b134929bf0988e3192', d: "M235.51 155.55c0 11.19-9.19 15.88-17.84 15.88s-17.46-4.58-17.46-15.4 9.02-15.88 17.84-15.88c8.6 0 17.46 4.63 17.46 15.4Zm-11.65.33c0-3.68-2.42-6.18-6.02-6.18s-6.07 2.5-6.07 6.18c0 3.46 2.48 6.02 6.07 6.02s6.02-2.56 6.02-6.02Zm-147.53 0c0 8.53-5.91 15.56-15.1 15.56-5.64 0-8.27-2.77-8.27-2.77v10.34H42v-37.89h10.96V144s2.85-3.84 9.08-3.84c9.13 0 14.29 6.98 14.29 15.72Zm-11.6 0c0-3.68-2.42-6.18-6.02-6.18s-6.07 2.5-6.07 6.18c0 3.46 2.47 6.02 6.07 6.02s6.02-2.56 6.02-6.02Zm184.35.47c0-4.47 2.74-5.86 6.4-5.86 2.25 0 3.71.53 3.71.53l.27-10.02s-.7-.32-2.58-.32c-6.12 0-7.79 3.84-7.79 3.84v-3.41h-10.96v29.42h10.96v-14.18ZM294 132v38.53h-10.96v-2.88s-2.85 3.84-9.08 3.84c-9.13 0-14.29-6.98-14.29-15.72s5.91-15.56 15.1-15.56c5.64 0 8.27 2.77 8.27 2.77v-8.85L294 132Zm-10.64 23.77c0-3.47-2.47-6.02-6.07-6.02s-6.02 2.56-6.02 6.02c0 3.67 2.42 6.18 6.02 6.18s6.07-2.51 6.07-6.18Zm-96.71-15.62c-6.39 0-8.71 3.84-8.71 3.84v-2.88h-10.96v29.42h10.96v-15.08c0-3.73 1.4-5.44 4.78-5.44s3.87 2.77 3.87 6.29v14.23h11.07v-18.07c0-8.1-3.92-12.31-11.01-12.31Zm-30.74-5.65h-10.96v36.03h10.96v-20.25h5.16l5-9.17h-10.16v-6.61Zm-24.55 17.27c-3.55-.53-5.11-.53-5.11-1.92 0-1.17 1.45-1.65 4.3-1.65 4.83 0 9.08 1.6 9.08 1.6l1.93-8.26s-4.67-1.33-10.91-1.33c-10.48 0-15.96 4-15.96 10.39 0 4.96 2.96 7.89 11.61 9 3.65.48 5 .69 5 2.03s-1.45 1.7-3.98 1.7c-5.48 0-10.64-2.29-10.64-2.29l-2.2 8.53s5.16 1.81 11.88 1.81c11.28 0 16.49-3.95 16.49-10.39 0-5.11-2.79-7.88-11.49-9.22Zm-17.9 3.78c0 11.19-9.19 15.88-17.84 15.88s-17.46-4.58-17.46-15.4 9.03-15.88 17.84-15.88c8.6 0 17.46 4.63 17.46 15.4Zm-11.66.33c0-3.68-2.42-6.18-6.02-6.18s-6.07 2.5-6.07 6.18c0 3.46 2.47 6.02 6.07 6.02s6.02-2.56 6.02-6.02Z", class: "svg-path-style2" }), h("path", { key: '258b567b1f39d98caea0e082ae372336ee19ef59', d: "M167 197.67v-15.01h2.71v15.01H167Zm15.27-7.02c0-2.41-1.92-4.08-4.24-4.08-1.46 0-2.6.59-3.29 1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52 1.04-2.58 2.51-2.58s2.38 1.02 2.38 2.54v6.24h2.47v-7.02Zm8-3.8h-2.8v-3.62H185v10.99c0 2.01 1.43 3.44 3.46 3.44h1.81v-2.29h-1.32c-.9 0-1.48-.55-1.48-1.48v-4.94h1.67l1.14-2.1Zm11.93 6.2c0-.15.04-.71.04-.97 0-3.31-2.25-5.56-5.49-5.56s-5.56 2.56-5.56 5.74 2.49 5.74 5.73 5.74c2.12 0 3.86-.84 4.98-2.58l-2.05-1.1c-.6.88-1.52 1.48-2.93 1.48-1.68 0-3-1.04-3.33-2.74h8.6m-8.53-1.94c.37-1.48 1.52-2.47 3.07-2.47 1.7 0 2.78.95 3.09 2.47h-6.16Zm16.03-4.26c-1.61 0-2.62.84-3.09 1.83v-1.83h-2.32v10.81h2.47v-5.25c0-1.68 1.1-3 2.71-3h1.08v-2.56h-.86Zm12.55 3.79c0-2.41-1.92-4.08-4.23-4.08-1.46 0-2.6.59-3.29 1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52 1.04-2.58 2.51-2.58s2.38 1.02 2.38 2.54v6.24h2.47v-7.02Zm11.06-2.27c-.75-1.13-2.14-1.81-3.7-1.81-3.15 0-5.34 2.47-5.34 5.67s2.18 5.67 5.34 5.67c1.56 0 2.95-.68 3.7-1.83v1.59h2.32v-10.81h-2.32v1.52Zm0 3.86c0 1.87-1.32 3.35-3.29 3.35s-3.27-1.48-3.27-3.35 1.3-3.38 3.27-3.38 3.29 1.5 3.29 3.38Zm10.31-5.39h-2.8v-3.62h-2.47v10.99c0 2.01 1.43 3.44 3.46 3.44h1.81v-2.29h-1.32c-.91 0-1.48-.55-1.48-1.48v-4.94h1.67l1.14-2.1Zm1.84-3.22c0 .84.68 1.52 1.54 1.52s1.57-.68 1.57-1.52-.71-1.5-1.57-1.5-1.54.69-1.54 1.5Zm2.78 14.04v-10.81h-2.47v10.81h2.47Zm2.12-5.41c0 3.18 2.49 5.74 5.78 5.74s5.76-2.56 5.76-5.74-2.49-5.74-5.76-5.74-5.78 2.54-5.78 5.74Zm9.06 0c0 1.88-1.39 3.38-3.29 3.38s-3.29-1.5-3.29-3.38 1.37-3.38 3.29-3.38 3.29 1.48 3.29 3.38Zm14.41-1.61c0-2.41-1.92-4.08-4.23-4.08-1.46 0-2.6.59-3.29 1.7v-1.41h-2.32v10.81h2.47v-6.2c0-1.52 1.04-2.58 2.52-2.58s2.38 1.02 2.38 2.54v6.24h2.47v-7.02Zm11.06-2.27c-.75-1.13-2.14-1.81-3.7-1.81-3.15 0-5.34 2.47-5.34 5.67s2.18 5.67 5.34 5.67c1.57 0 2.95-.68 3.7-1.83v1.59h2.32v-10.81h-2.32v1.52Zm0 3.86c0 1.87-1.32 3.35-3.29 3.35s-3.26-1.48-3.26-3.35 1.3-3.38 3.26-3.38 3.29 1.5 3.29 3.38Zm9.12 3.2h-.46c-.77 0-1.15-.4-1.15-1.17V182h-2.47v12.69c0 1.81 1.23 2.98 3.13 2.98h.95v-2.23Z", class: "svg-path-style1" })))))), this.showSideLoader && !this.centeredLayout && (h("div", { key: '63b24b9a3b124781977bd6026511bf5fdb30c105', class: `hero-international__side-loader ${this.animateSideloader ? 'hero-international__side-loader--animate' : ''}` }, h("div", { key: '17ba19d5ced4d5cf6a000c01742a31cd91a5c877', class: "shape" }))))));
     }
     static get is() { return "pn-hero-block-international"; }
     static get originalStyleUrls() {

package/collection/components/widgets/pn-level-up/pn-level-up-modal/pn-level-up-modal.css

@@ -0,0 +1,94 @@
+pn-button-dropdown .pn-button-dropdown > pn-button > .pn-button {
+  min-height: initial;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+@media screen and (max-width: 767px) {
+  .sr-only-mobile {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
+pn-level-up-modal .pn-modal-header {
+  z-index: 0;
+}
+pn-level-up-modal .pn-modal {
+  max-width: 63.1rem;
+}
+@media screen and (max-width: 768px) {
+  pn-level-up-modal .pn-modal {
+    height: 100%;
+    max-height: 100%;
+  }
+}
+pn-level-up-modal .level-up-computer-modal .pn-modal-content .modal-content {
+  justify-self: center;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: column;
+  gap: 2em;
+  margin: 2em;
+  width: max-content;
+  align-content: space-around;
+}
+pn-level-up-modal .pn-modal-label {
+  margin: 2.2rem 0;
+}
+@media screen and (max-width: 768px) {
+  pn-level-up-modal .pn-modal-label {
+    justify-self: center;
+  }
+}
+@media screen and (max-width: 768px) {
+  pn-level-up-modal .level-up-phone-modal .pn-modal-content {
+    height: 100%;
+    align-content: center;
+    align-items: center;
+  }
+}
+pn-level-up-modal .level-up-phone-modal .pn-modal-content pn-spinner {
+  justify-self: center;
+}
+pn-level-up-modal .level-up-phone-modal .pn-modal-content .modal-content-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1em;
+}
+@media screen and (max-width: 768px) {
+  pn-level-up-modal .level-up-phone-modal .pn-modal-content .modal-content-container {
+    flex-direction: column;
+  }
+}
+pn-level-up-modal .level-up-phone-modal .pn-modal-content .modal-content-list ol {
+  font-size: 1.8rem;
+  line-height: 1.6;
+  margin-left: 2rem;
+  padding-left: 2rem;
+}
+pn-level-up-modal .level-up-phone-modal .pn-modal-content .modal-content-list li {
+  margin-bottom: 1rem;
+}
+@media screen and (max-width: 768px) {
+  pn-level-up-modal .level-up-phone-modal .pn-modal-content .modal-content-list ol {
+    font-size: 1.6rem;
+  }
+}

package/collection/components/widgets/pn-level-up/pn-level-up-modal/pn-level-up-modal.js

@@ -0,0 +1,262 @@
+import { Host, h } from "@stencil/core";
+import { PnLevelUpService } from "../pn-level-up.service";
+export class PnLevelUpModal {
+    constructor() {
+        this.open = undefined;
+        this.endpoint = undefined;
+        this.instructionPhoneLineOne = undefined;
+        this.instructionPhoneLineTwo = undefined;
+        this.instructionPhoneLineThree = undefined;
+        this.headingText = undefined;
+        this.outdatedQRMessage = undefined;
+        this.expiresInMessage = undefined;
+        this.system = undefined;
+        this.qrAriaLabel = undefined;
+        this.openModalToggle = undefined;
+        this.isLoading = true;
+    }
+    _bankIDUrl;
+    _levelupService;
+    _levelUpModal;
+    componentWillLoad() {
+        this._levelupService = new PnLevelUpService(this.endpoint);
+        this.updateOpen();
+    }
+    updateBankIDUrl = async () => {
+        this.isLoading = true;
+        let authResponse = await this._levelupService.levelupAuthorize(this.system, null);
+        this.isLoading = false;
+        this._bankIDUrl = authResponse.url;
+        await this._levelupService.levelupTokenGrant(authResponse.id, '30', null).then((response) => {
+            if (response.code === 200) {
+                this._levelupService.newLevelupUser();
+            }
+        });
+    };
+    updateOpen() {
+        if (this.open === 'open') {
+            this.handleOpen();
+            this.openModalToggle = true;
+            if (this._levelUpModal) {
+                if (this._levelUpModal.open === true) {
+                    this._levelUpModal.open = false;
+                }
+                this._levelUpModal.open = true;
+            }
+        }
+        else {
+            this.openModalToggle = false;
+        }
+    }
+    handleOpen = async () => {
+        await this.updateBankIDUrl();
+    };
+    render() {
+        return (h(Host, { key: '0431f6d5caf8183d3e1c432a3ad663fa8648b1b4' }, h("pn-modal", { key: 'bb6f2be2f52908943154e99c02e7c3f7b9e648b6', ref: el => this._levelUpModal = el, open: this.openModalToggle, class: "level-up-phone-modal", "allow-overflow": 'true', label: this.headingText }, this.isLoading ?
+            (h("pn-spinner", { light: "false", size: "1.5" })) : (h("div", { class: "modal-content-container" }, h("div", { class: "modal-content-qr" }, h("pn-qr-code-generator", { url: this._bankIDUrl, "countdown-seconds": "30", "outdated-message": this.outdatedQRMessage, "expires-in-message": this.expiresInMessage, "update-code-every-second": true, "aria-label": this.qrAriaLabel })), h("div", { class: "modal-content-list" }, h("ol", null, this.instructionPhoneLineOne && h("li", null, this.instructionPhoneLineOne), this.instructionPhoneLineTwo && h("li", null, this.instructionPhoneLineTwo), this.instructionPhoneLineThree && h("li", null, this.instructionPhoneLineThree))))))));
+    }
+    static get is() { return "pn-level-up-modal"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["pn-level-up-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["pn-level-up-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'open' | 'close'",
+                    "resolved": "\"close\" | \"open\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "open",
+                "reflect": true
+            },
+            "endpoint": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "endpoint",
+                "reflect": false
+            },
+            "instructionPhoneLineOne": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "instruction-phone-line-one",
+                "reflect": false
+            },
+            "instructionPhoneLineTwo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "instruction-phone-line-two",
+                "reflect": false
+            },
+            "instructionPhoneLineThree": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "instruction-phone-line-three",
+                "reflect": false
+            },
+            "headingText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "heading-text",
+                "reflect": false
+            },
+            "outdatedQRMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "outdated-q-r-message",
+                "reflect": false
+            },
+            "expiresInMessage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "expires-in-message",
+                "reflect": false
+            },
+            "system": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DeviceType",
+                    "resolved": "\"android\" | \"ios\" | \"web\"",
+                    "references": {
+                        "DeviceType": {
+                            "location": "import",
+                            "path": "../types",
+                            "id": "src/components/widgets/pn-level-up/types.ts::DeviceType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "system",
+                "reflect": false
+            },
+            "qrAriaLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "qr-aria-label",
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "openModalToggle": {},
+            "isLoading": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "open",
+                "methodName": "updateOpen"
+            }];
+    }
+}
+//# sourceMappingURL=pn-level-up-modal.js.map

package/collection/components/widgets/pn-level-up/pn-level-up-modal/pn-level-up-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pn-level-up-modal.js","sourceRoot":"","sources":["../../../../../src/components/widgets/pn-level-up/pn-level-up-modal/pn-level-up-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, State, Watch } from '@stencil/core';\nimport { DeviceType } from '../types';\nimport { PnLevelUpService } from '../pn-level-up.service';\n\n@Component({\n  tag: 'pn-level-up-modal',\n  styleUrl: 'pn-level-up-modal.scss',\n})\n\nexport class PnLevelUpModal {\n  @Prop({ reflect: true }) open: 'open' | 'close';\n  @Prop() endpoint: string;\n  @Prop() instructionPhoneLineOne: string;\n  @Prop() instructionPhoneLineTwo: string;\n  @Prop() instructionPhoneLineThree: string;\n  @Prop() headingText: string;\n  @Prop() outdatedQRMessage: string;\n  @Prop() expiresInMessage: string;\n  @Prop() system: DeviceType;\n  @Prop() qrAriaLabel: string;\n\n  @State() private openModalToggle: boolean;\n  @State() private isLoading: boolean = true;\n\n  private _bankIDUrl: string;\n  private _levelupService: PnLevelUpService;\n  private _levelUpModal: HTMLElement;\n  \n  componentWillLoad() { \n    this._levelupService = new PnLevelUpService(this.endpoint);\n    this.updateOpen();\n  }\n\n  private updateBankIDUrl = async () => {\n    this.isLoading = true;\n    let authResponse = await this._levelupService.levelupAuthorize(this.system, null);\n    this.isLoading = false;\n    this._bankIDUrl = authResponse.url;\n    await this._levelupService.levelupTokenGrant(authResponse.id, '30', null).then((response) => {\n      if(response.code === 200) {\n        this._levelupService.newLevelupUser();\n      }\n    });\n  }\n\n  @Watch('open')\n  updateOpen () {\n    if (this.open === 'open') {\n      this.handleOpen();\n      this.openModalToggle = true;\n      if (this._levelUpModal) {\n        if ((this._levelUpModal as any).open === true) {\n          (this._levelUpModal as any).open = false;\n        }\n        (this._levelUpModal as any).open = true;\n      }\n    }\n    else {\n      this.openModalToggle = false;\n    }\n  }\n\n  private handleOpen = async () => {\n    await this.updateBankIDUrl();\n  }\n\n  render() {\n    return (\n      <Host>\n        <pn-modal\n          ref={el => this._levelUpModal = el as HTMLElement}\n          open={this.openModalToggle}\n          class=\"level-up-phone-modal\"\n          allow-overflow='true'\n          label={this.headingText}>\n          {this.isLoading ?\n            (<pn-spinner light=\"false\" size=\"1.5\"></pn-spinner>) : (\n              <div class=\"modal-content-container\">\n                <div class=\"modal-content-qr\">\n                  <pn-qr-code-generator\n                    url={this._bankIDUrl}\n                    countdown-seconds=\"30\"\n                    outdated-message={this.outdatedQRMessage}\n                    expires-in-message={this.expiresInMessage}\n                    update-code-every-second={true}\n                    aria-label={this.qrAriaLabel}>\n                  </pn-qr-code-generator>\n                </div>\n                <div class=\"modal-content-list\">\n                  <ol>\n                    {this.instructionPhoneLineOne && <li>{this.instructionPhoneLineOne}</li>}\n                    {this.instructionPhoneLineTwo && <li>{this.instructionPhoneLineTwo}</li>}\n                    {this.instructionPhoneLineThree && <li>{this.instructionPhoneLineThree}</li>}\n                  </ol>\n                </div>\n              </div>\n            )}\n        </pn-modal>\n      </Host>\n    );\n  }\n}"]}

package/collection/components/widgets/pn-level-up/pn-level-up-modal/pn-level-up-modal.stories.js

@@ -0,0 +1,31 @@
+import { createDocumentation, createComponent } from "../../../../globals/documentation/story";
+import docs from "./pn-level-up-modal-docs.json";
+const { argTypes, textContent } = createDocumentation(docs);
+const meta = {
+    title: 'Components/Widgets/Level up modal',
+    parameters: {
+        actions: {},
+        docs: {
+            description: {
+                story: textContent
+            }
+        }
+    },
+    args: {
+        open: 'open',
+        instructionPhoneLineOne: 'Open your BankID app',
+        instructionPhoneLineTwo: 'Click on the QR button in the app',
+        instructionPhoneLineThree: 'Scan the QR code',
+        headingText: 'Level up with BankID',
+        endpoint: 'https://se-integration.postnord.com',
+        outdatedQRMessage: 'The QR has expired',
+        expiresInMessage: 'Expires in'
+    },
+    argTypes,
+};
+export default meta;
+export const LevelUpModal = {
+    name: 'pn-level-up-modal',
+    render: (args) => createComponent('pn-level-up-modal', args),
+};
+//# sourceMappingURL=pn-level-up-modal.stories.js.map

package/collection/components/widgets/pn-level-up/pn-level-up-modal/pn-level-up-modal.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"pn-level-up-modal.stories.js","sourceRoot":"","sources":["../../../../../src/components/widgets/pn-level-up/pn-level-up-modal/pn-level-up-modal.stories.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AACrF,OAAO,IAAI,MAAM,+BAA+B,CAAC;AAEjD,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,mBAAmB,CAAC,IAAI,CAAC,CAAC;AAE5D,MAAM,IAAI,GAAoC;IAC5C,KAAK,EAAE,mCAAmC;IAC1C,UAAU,EAAE;QACV,OAAO,EAAE,EACR;QACD,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,KAAK,EAAE,WAAW;aACnB;SACF;KACF;IACD,IAAI,EAAE;QACN,IAAI,EAAE,MAAM;QACZ,uBAAuB,EAAE,sBAAsB;QAC/C,uBAAuB,EAAE,mCAAmC;QAC5D,yBAAyB,EAAE,kBAAkB;QAC7C,WAAW,EAAE,sBAAsB;QACnC,QAAQ,EAAE,qCAAqC;QAC/C,iBAAiB,EAAE,oBAAoB;QACvC,gBAAgB,EAAE,YAAY;KAC7B;IACD,QAAQ;CACT,CAAC;AAIF,eAAe,IAAI,CAAC;AAEpB,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE,mBAAmB;IACzB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,mBAAmB,EAAE,IAAI,CAAC;CAC7D,CAAC","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\n\nimport { createDocumentation, createComponent } from '@/globals/documentation/story';\nimport docs from './pn-level-up-modal-docs.json';\n\nconst { argTypes, textContent } = createDocumentation(docs);\n\nconst meta: Meta<HTMLPnLevelUpModalElement> = {\n  title: 'Components/Widgets/Level up modal',\n  parameters: {\n    actions: {\n    },\n    docs: {\n      description: {\n        story: textContent\n      }\n    }\n  },\n  args: {\n  open: 'open',\n  instructionPhoneLineOne: 'Open your BankID app',\n  instructionPhoneLineTwo: 'Click on the QR button in the app',\n  instructionPhoneLineThree: 'Scan the QR code',\n  headingText: 'Level up with BankID',\n  endpoint: 'https://se-integration.postnord.com',\n  outdatedQRMessage: 'The QR has expired',\n  expiresInMessage: 'Expires in'\n  },\n  argTypes,\n};\n\ntype Story = StoryObj<HTMLPnLevelUpModalElement>;\n\nexport default meta;\n\nexport const LevelUpModal: Story = {\n  name: 'pn-level-up-modal',\n  render: (args) => createComponent('pn-level-up-modal', args),\n};\n"]}