npm - @postnord/pn-marketweb-components - Versions diffs - 4.0.2 → 4.0.4-test - Mend

@postnord/pn-marketweb-components 4.0.2 → 4.0.4-test

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1163) hide show

package/dist/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-unified-login.js CHANGED Viewed

@@ -2,13 +2,15 @@ import { h, Host } from "@stencil/core";
 export class PnMarketwebSiteheaderUnifiedLogin {
     constructor() {
         this.loggedIn = false;
+        this.myPageLabel = undefined;
+        this.myPageUrl = undefined;
         this.logInLabel = undefined;
         this.useMarketwebLogin = undefined;
         this.environment = undefined;
     }
     hostElement;
     render() {
-        return (h(Host, { key: '8af0af70c9b1a87013fe09558c9a2fb3221f3bbd' }, h("pn-marketweb-siteheader-login-button", { key: 'bcf02e127c2dd8c5f3b05c781f601eb04091196c', label: this.logInLabel, useMarketwebLogin: this.useMarketwebLogin, environment: this.environment })));
+        return (h(Host, { key: '9cb8c48aaaae6882faec3439aaa159fdc743bf92' }, this.loggedIn ? (h("pn-marketweb-siteheader-login-mypage-button", { label: this.myPageLabel, myPageUrl: this.myPageUrl })) : (h("pn-marketweb-siteheader-login-button", { label: this.logInLabel, useMarketwebLogin: this.useMarketwebLogin, environment: this.environment }))));
     }
     static get is() { return "pn-marketweb-siteheader-unified-login"; }
     static get originalStyleUrls() {
@@ -41,6 +43,40 @@ export class PnMarketwebSiteheaderUnifiedLogin {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "myPageLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "my-page-label",
+                "reflect": false
+            },
+            "myPageUrl": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "my-page-url",
+                "reflect": false
+            },
             "logInLabel": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-unified-login.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-marketweb-siteheader-unified-login.js","sourceRoot":"","sources":["../../../../src/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-unified-login.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMlE,MAAM,OAAO,iCAAiC;;wBAEhB,KAAK~~;;;;;~~IADtB,WAAW,CAAc;~~IAMpC~~,MAAM;QACJ,OAAO,CACL,EAAC,IAAI~~;YACD~~,~~6FACI~~,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,WAAW,EAAE,IAAI,CAAC,WAAW,GAC3B,~~CACH~~,CACR,CAAC;IACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pn-marketweb-siteheader-unified-login',\n styleUrl: 'pn-marketweb-siteheader-unified-login.scss',\n})\nexport class PnMarketwebSiteheaderUnifiedLogin {\n @Element() hostElement: HTMLElement;\n @Prop() loggedIn: boolean = false;\n @Prop() logInLabel: string;\n @Prop() useMarketwebLogin: boolean;\n @Prop() environment: string;\n\n render() {\n return (\n <Host>\n <pn-marketweb-siteheader-login-button \n label={this.logInLabel} \n useMarketwebLogin={this.useMarketwebLogin} \n environment={this.environment}\n />\n </Host>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pn-marketweb-siteheader-unified-login.js","sourceRoot":"","sources":["../../../../src/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader-unified-login.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMlE,MAAM,OAAO,iCAAiC;;wBAEhB,KAAK;;;;;;;IADtB,WAAW,CAAc;IAQpC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,uDACF,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CACf,mDAA6C,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,SAAS,EAAE,IAAI,CAAC,SAAS,GAAI,CACpG,CAAC,CAAC,CAAC,CACF,4CACI,KAAK,EAAE,IAAI,CAAC,UAAU,EACtB,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,EACzC,WAAW,EAAE,IAAI,CAAC,WAAW,GAC3B,CACP,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'pn-marketweb-siteheader-unified-login',\n styleUrl: 'pn-marketweb-siteheader-unified-login.scss',\n})\nexport class PnMarketwebSiteheaderUnifiedLogin {\n @Element() hostElement: HTMLElement;\n @Prop() loggedIn: boolean = false;\n @Prop() myPageLabel: string;\n @Prop() myPageUrl: string;\n @Prop() logInLabel: string;\n @Prop() useMarketwebLogin: boolean;\n @Prop() environment: string;\n\n render() {\n return (\n <Host>\n {this.loggedIn ? (\n <pn-marketweb-siteheader-login-mypage-button label={this.myPageLabel} myPageUrl={this.myPageUrl} />\n ) : (\n <pn-marketweb-siteheader-login-button \n label={this.logInLabel} \n useMarketwebLogin={this.useMarketwebLogin} \n environment={this.environment}\n />\n )}\n </Host>\n );\n }\n}\n"]}

package/dist/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.css CHANGED Viewed

@@ -2,31 +2,6 @@ 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;
-  }
-}
 body[data-siteheader-menuopen=true] {
   max-height: 100vh;
   overflow: hidden;
@@ -74,11 +49,6 @@ pn-marketweb-siteheader .siteheader-row:not(:last-child) {
     min-height: 3.2em;
   }
 }
-@media screen and (max-width: 48em) {
-  pn-marketweb-siteheader .siteheader-row:last-child {
-    justify-content: flex-end;
-  }
-}
 pn-marketweb-siteheader .siteheader-topright {
   display: flex;
   flex-direction: row;
@@ -227,6 +197,7 @@ pn-marketweb-siteheader pn-button button .pn-button-bg:after {
 .siteheader-menu {
   max-width: 100%;
+  width: 100%;
   overflow: visible;
   overflow-x: clip;
 }
@@ -464,11 +435,6 @@ pn-marketweb-siteheader pn-button button .pn-button-bg:after {
 .header-wrapper[data-header-theme=tpl] > pn-marketweb-siteheader pn-button a:hover {
   text-decoration: none;
 }
-.header-wrapper[data-header-theme=tpl] > pn-marketweb-siteheader [slot=header-bottom-button] {
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-}
 @media screen and (max-width: 48em) {
   .header-wrapper[data-header-theme=tpl] > pn-marketweb-siteheader [slot=header-bottom-button] {
     display: none;
@@ -682,12 +648,10 @@ pn-marketweb-siteheader pn-button button .pn-button-bg:after {
 .header-wrapper[data-header-theme=tpl] > pn-marketweb-siteheader > header .siteheader-menu-footer [slot=menu-footer-cta] {
   display: none;
 }
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 415px) {
   .header-wrapper[data-header-theme=tpl] > pn-marketweb-siteheader > header .siteheader-menu-footer [slot=menu-footer-cta] {
-    display: flex;
+    display: block;
     color: #0d234b;
-    flex-direction: column;
-    gap: 0.5rem;
   }
   .header-wrapper[data-header-theme=tpl] > pn-marketweb-siteheader > header .siteheader-menu-footer [slot=menu-footer-cta] .pn-button-bg {
     background-color: #fbc2c1;
@@ -700,12 +664,12 @@ pn-marketweb-siteheader pn-button button .pn-button-bg:after {
     fill: #0d234b;
   }
 }
-@media screen and (max-width: 768px) and (min-width: 48em) {
+@media screen and (max-width: 415px) and (min-width: 48em) {
   .header-wrapper[data-header-theme=tpl] > pn-marketweb-siteheader > header .siteheader-menu-footer [slot=menu-footer-cta] .pn-button-content pn-icon svg > path {
     fill: #ffffff;
   }
 }
-@media screen and (max-width: 768px) {
+@media screen and (max-width: 415px) {
   .header-wrapper[data-header-theme=tpl] > pn-marketweb-siteheader > header .siteheader-menu-footer [slot=menu-footer-cta] a:hover {
     color: #ffffff;
   }
@@ -716,16 +680,13 @@ pn-marketweb-siteheader pn-button button .pn-button-bg:after {
   .header-wrapper[data-header-theme=tpl] > pn-marketweb-siteheader > header .siteheader-menu-footer [slot=menu-footer-cta] a:hover .pn-button-content pn-icon svg > path {
     fill: #ffffff;
   }
-  .header-wrapper[data-header-theme=tpl] > pn-marketweb-siteheader > header .siteheader-menu-footer [slot=menu-footer-cta] a:hover .pn-button-text {
-    color: #ffffff;
-  }
 }
 @media screen and (max-width: 1024px) {
   .header-wrapper[data-header-theme=tpl] > pn-marketweb-siteheader > header .siteheader-menu-footer pn-button-dropdown button:focus,
   .header-wrapper[data-header-theme=tpl] > pn-marketweb-siteheader > header .siteheader-menu-footer pn-button-dropdown button:hover {
     color: #ffffff;
     background-color: #00a0d6;
-    box-shadow: 0 0 0 0.2rem #ffffff, 0 0 0 0.4rem #00a0d6;
+    box-shadow: 0 0 0 0.2rem #fff, 0 0 0 0.4rem #00a0d6;
   }
   .header-wrapper[data-header-theme=tpl] > pn-marketweb-siteheader > header .siteheader-menu-footer pn-button-dropdown button:focus svg > path,
   .header-wrapper[data-header-theme=tpl] > pn-marketweb-siteheader > header .siteheader-menu-footer pn-button-dropdown button:hover svg > path {

package/dist/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.js CHANGED Viewed

@@ -334,13 +334,13 @@ export class PnMarketwebSiteheader {
             ...this.i18n,
             home: this.getFallbackValue(this.i18n.home, 'Home')
         };
-        return (h(Host, { key: '6df62d8c346bf5cf9b963bd814b0ed06eb0f3a55', language: this.language, market: this.market, environment: this.environment }, h("header", { key: '9d03299421578f115d5c5e1999b17130bd807c21' }, h("div", { key: 'e02d0b17105a55083b8dcf0a95ff572de8f20aed', class: "siteheader-row" }, h("div", { key: '1f75ac467441d4e52d4439a99f34d358d5970455', class: "siteheader-topleft" }, h("slot", { key: 'b01622ad62fb6bf989ce08a727a7d1c295a91fd6', name: "topleft" }), this.gotData && this.siteSelector && !this.hideSiteSelector && (h("pn-site-selector", { key: '49f5f2bef0decdd1090a7705b6d99984baf23ae0', language: this.language, buttontext: this.siteSelector?.currentSiteTitle ?? 'postnord' }, this.gotData && this.siteSelector?.currentSiteTitle && (h("pn-site-selector-item", { key: 'c7a6d91a6489f714ec090d82709dfd0d076e3267', heading: this.siteSelector.currentSiteTitle + ' ', description: this.siteSelector.currentSiteDescription })), this.gotData &&
+        return (h(Host, { key: '861d96da629da99f8a7eb0a77abf94c77b055ce0', language: this.language, market: this.market, environment: this.environment }, h("header", { key: '402c1e5ab0a766832996c3923268430b62c9ed2c' }, h("div", { key: 'e9d613cc21d6d31d7b202f3f05933cb38d645020', class: "siteheader-row" }, h("div", { key: '2fc8c6badb8f0696f9e83723f504fbfd2da02395', class: "siteheader-topleft" }, h("slot", { key: 'f7c5f52d59a7efa58b24afe5e537cce2532a1d14', name: "topleft" }), this.gotData && this.siteSelector && !this.hideSiteSelector && (h("pn-site-selector", { key: '14cf24070be0a3db793e33e6de3e7ab4a8e6d243', language: this.language, buttontext: this.siteSelector?.currentSiteTitle ?? 'postnord' }, this.gotData && this.siteSelector?.currentSiteTitle && (h("pn-site-selector-item", { key: '517880dd883999e0ed4250b1438f151e826bf7b1', heading: this.siteSelector.currentSiteTitle + ' ', description: this.siteSelector.currentSiteDescription })), this.gotData &&
             this.siteSelector?.siteSelections &&
-            this.siteSelector.siteSelections.map(site => (h("pn-site-selector-item", { heading: site.linkText + ' ', description: site.linkDescription, url: this.adjustSiteSelectorUrl(site.href), newwindow: site.openInNewWindow })))))), h("div", { key: '43cb25050d2dc06863cd0fd57a7980811b227d55', class: "siteheader-logocontainer" }, h("a", { key: '6421d119666664ad16780e1fc24335f1c4d9abcc', href: this.homePageLink, title: i18n.home, "aria-label": i18n.home, class: "siteheader-logolink" }, h("slot", { key: 'e794bcdea5ae62a73c72c837b4e880200d4158f9', name: "logo" }, h("svg", { key: 'fd2b94e47db1861c0efcb454fd0028b99ffdc40a', class: "siteheader-logo", xmlns: "http://www.w3.org/2000/svg", width: "12.7rem", height: "2.4rem", viewBox: "0 0 141.73 26.65", role: "img", "aria-label": "PostNord" }, h("path", { key: '9f56ab20f42a08b676ced4cfe99791d1f9e91762', d: "M108.84,13.35c0,6.34-5.17,9-10,9S89,19.76,89,13.63c0-6.28,5.08-9,10-9S108.84,7.25,108.84,13.35Zm-6.56.18a3.4,3.4,0,1,0-6.8,0,3.29,3.29,0,0,0,3.42,3.41A3.24,3.24,0,0,0,102.28,13.54Zm-83,0c0,4.83-3.32,8.82-8.49,8.82a6.54,6.54,0,0,1-4.65-1.57v5.86H0V5.16H6.17V6.8a6.43,6.43,0,0,1,5.11-2.18C16.41,4.62,19.31,8.58,19.31,13.54Zm-6.53,0A3.27,3.27,0,0,0,9.4,10,3.28,3.28,0,0,0,6,13.54,3.29,3.29,0,0,0,9.4,16.95,3.24,3.24,0,0,0,12.78,13.54Zm103.69,0.27c0-2.54,1.54-3.32,3.6-3.32a6.56,6.56,0,0,1,2.08.3L122.3,5.1a3.92,3.92,0,0,0-1.45-.18c-3.45,0-4.38,2.18-4.38,2.18V5.16H110.3V21.84h6.17v-8ZM141.73,0V21.84h-6.16V20.21a6.43,6.43,0,0,1-5.11,2.18c-5.14,0-8-4-8-8.91s3.32-8.82,8.49-8.82a6.54,6.54,0,0,1,4.65,1.57v-5Zm-6,13.48a3.28,3.28,0,0,0-3.41-3.41A3.24,3.24,0,0,0,129,13.47,3.4,3.4,0,1,0,135.75,13.47ZM81.35,4.62c-3.6,0-4.9,2.18-4.9,2.18V5.16H70.29V21.84h6.16V13.29c0-2.11.79-3.08,2.69-3.08s2.18,1.57,2.18,3.57v8.07h6.22V11.6C87.55,7,85.34,4.62,81.35,4.62ZM64.07,1.42H57.9V21.84h6.16V10.36H67l2.81-5.2H64.07V1.42ZM50.26,11.21c-2-.3-2.87-0.3-2.87-1.09s0.81-.94,2.42-0.94a16.15,16.15,0,0,1,5.11.91L56,5.41a24.56,24.56,0,0,0-6.13-.75c-5.89,0-9,2.27-9,5.89,0,2.81,1.66,4.47,6.53,5.11,2.06,0.27,2.81.39,2.81,1.15s-0.82,1-2.24,1a16.67,16.67,0,0,1-6-1.3L40.77,21.3a22.14,22.14,0,0,0,6.68,1c6.35,0,9.28-2.24,9.28-5.89C56.72,13.54,55.15,12,50.26,11.21ZM40.19,13.35c0,6.34-5.17,9-10,9s-9.82-2.6-9.82-8.73c0-6.28,5.08-9,10-9S40.19,7.25,40.19,13.35Zm-6.56.18a3.4,3.4,0,1,0-6.8,0,3.28,3.28,0,0,0,3.41,3.41A3.24,3.24,0,0,0,33.63,13.54Z", fill: "#00A0D6", transform: "translate(0 0)" }))))), h("div", { key: '8edea6db8b79d73adc3aa5597d586c721aa59c7c', class: "siteheader-topright" }, h("slot", { key: 'd98f8fba12592bab0b9d78552963992d52b1a201', name: "toprightstart" }), this.gotData && this.loginDialog && !this.hideLogin && (h("pn-marketweb-siteheader-login", { key: '1837a0123f7d65668a5ab46b84bc537a8b72fd0c', token: this.userToken, siteUrl: this.siteDefinition.url, fullname: this.userFullname, loggedin: this.userLoggedin, loginDialog: this.loginDialog, endpoint: this.endpoint, i18n: this.i18n, showProfileSelection: this.showProfileSelection, showUnifiedLogin: this.showUnifiedLogin, "check-user-logged-in-state-interval": this.checkUserLoggedInStateInterval, useMarketwebLogin: this.useMarketwebLogin, environment: this.environment })), this.gotData && this.languageOptions && this.languageOptions.length && !this.hideLanguageSelector && (h("pn-language-selector", { key: 'a4a596d5aaa100f5bf10d733478a82bc2a72bf0a', value: this.language }, this.languageOptions.map(language => (h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))))), h("slot", { key: 'f629793ebb664fc67b113250deae4ca9691990d3', name: "toprightend" }), h("div", { key: '142fdc5572954238a16e907c9df65b84c96143b2', class: "siteheader-menu-top-search" }, h("pn-marketweb-siteheader-search", { key: '643d8ace07117382c68a774b996088a0854611c1', language: this.language, siteid: this.siteid, search: this.search, "hide-search": this.hideSearch, i18n: this.i18n, icononly: true })))), h("slot", { key: 'e7f404aea040e795f32bc356f5caf3f1f317d6b3', name: "siteheader-menu-top-button" }), h("div", { key: 'da58beec8ab4a83972ef98dc14017e070a55cdc9', class: "siteheader-row" }, h("div", { key: '05c3a0bed84d69aaadacc09f38abf9b0ab56c81f', class: "siteheader-menu" }, this.gotData && this.menuItems && (h("pn-mainnav", { key: 'c965df1059cba737cd1694eeba69a8aae21f4cd4', market: this.market, language: this.language, onMenuOpenChange: e => {
+            this.siteSelector.siteSelections.map(site => (h("pn-site-selector-item", { heading: site.linkText + ' ', description: site.linkDescription, url: this.adjustSiteSelectorUrl(site.href), newwindow: site.openInNewWindow })))))), h("div", { key: 'fdd8c81a1c9c84e69dcc1cfd878d48e3f676b52b', class: "siteheader-logocontainer" }, h("a", { key: '74f777c9f3470e10f78aa490b5943ef571159aa8', href: this.homePageLink, title: i18n.home, "aria-label": i18n.home, class: "siteheader-logolink" }, h("slot", { key: '80aeb67ca804c1cd66845cf90ccfd7c61bf7e95f', name: "logo" }, h("svg", { key: 'a189576db0fffe3e464ac875157f1016d385cfc0', class: "siteheader-logo", xmlns: "http://www.w3.org/2000/svg", width: "12.7rem", height: "2.4rem", viewBox: "0 0 141.73 26.65", role: "img", "aria-label": "PostNord" }, h("path", { key: '4536258c7058d96891734df162a51aba6355a4d2', d: "M108.84,13.35c0,6.34-5.17,9-10,9S89,19.76,89,13.63c0-6.28,5.08-9,10-9S108.84,7.25,108.84,13.35Zm-6.56.18a3.4,3.4,0,1,0-6.8,0,3.29,3.29,0,0,0,3.42,3.41A3.24,3.24,0,0,0,102.28,13.54Zm-83,0c0,4.83-3.32,8.82-8.49,8.82a6.54,6.54,0,0,1-4.65-1.57v5.86H0V5.16H6.17V6.8a6.43,6.43,0,0,1,5.11-2.18C16.41,4.62,19.31,8.58,19.31,13.54Zm-6.53,0A3.27,3.27,0,0,0,9.4,10,3.28,3.28,0,0,0,6,13.54,3.29,3.29,0,0,0,9.4,16.95,3.24,3.24,0,0,0,12.78,13.54Zm103.69,0.27c0-2.54,1.54-3.32,3.6-3.32a6.56,6.56,0,0,1,2.08.3L122.3,5.1a3.92,3.92,0,0,0-1.45-.18c-3.45,0-4.38,2.18-4.38,2.18V5.16H110.3V21.84h6.17v-8ZM141.73,0V21.84h-6.16V20.21a6.43,6.43,0,0,1-5.11,2.18c-5.14,0-8-4-8-8.91s3.32-8.82,8.49-8.82a6.54,6.54,0,0,1,4.65,1.57v-5Zm-6,13.48a3.28,3.28,0,0,0-3.41-3.41A3.24,3.24,0,0,0,129,13.47,3.4,3.4,0,1,0,135.75,13.47ZM81.35,4.62c-3.6,0-4.9,2.18-4.9,2.18V5.16H70.29V21.84h6.16V13.29c0-2.11.79-3.08,2.69-3.08s2.18,1.57,2.18,3.57v8.07h6.22V11.6C87.55,7,85.34,4.62,81.35,4.62ZM64.07,1.42H57.9V21.84h6.16V10.36H67l2.81-5.2H64.07V1.42ZM50.26,11.21c-2-.3-2.87-0.3-2.87-1.09s0.81-.94,2.42-0.94a16.15,16.15,0,0,1,5.11.91L56,5.41a24.56,24.56,0,0,0-6.13-.75c-5.89,0-9,2.27-9,5.89,0,2.81,1.66,4.47,6.53,5.11,2.06,0.27,2.81.39,2.81,1.15s-0.82,1-2.24,1a16.67,16.67,0,0,1-6-1.3L40.77,21.3a22.14,22.14,0,0,0,6.68,1c6.35,0,9.28-2.24,9.28-5.89C56.72,13.54,55.15,12,50.26,11.21ZM40.19,13.35c0,6.34-5.17,9-10,9s-9.82-2.6-9.82-8.73c0-6.28,5.08-9,10-9S40.19,7.25,40.19,13.35Zm-6.56.18a3.4,3.4,0,1,0-6.8,0,3.28,3.28,0,0,0,3.41,3.41A3.24,3.24,0,0,0,33.63,13.54Z", fill: "#00A0D6", transform: "translate(0 0)" }))))), h("div", { key: 'f4cc5811192792ddb5e0bbfef201f4675c85afa2', class: "siteheader-topright" }, h("slot", { key: '62ba1ec549bffabd264390f5c63b52b3758dc5cb', name: "toprightstart" }), this.gotData && this.loginDialog && !this.hideLogin && (h("pn-marketweb-siteheader-login", { key: '084bd6ccb455df43030016323a571c0fbadbee49', token: this.userToken, siteUrl: this.siteDefinition.url, fullname: this.userFullname, loggedin: this.userLoggedin, loginDialog: this.loginDialog, endpoint: this.endpoint, i18n: this.i18n, showProfileSelection: this.showProfileSelection, showUnifiedLogin: this.showUnifiedLogin, "check-user-logged-in-state-interval": this.checkUserLoggedInStateInterval, useMarketwebLogin: this.useMarketwebLogin, environment: this.environment })), this.gotData && this.languageOptions && this.languageOptions.length && !this.hideLanguageSelector && (h("pn-language-selector", { key: '3f9fccee32d0416c2b23fc250b3b2512e8bde724', value: this.language }, this.languageOptions.map(language => (h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))))), h("slot", { key: '41350c96d1cd1149033f3904c5bc624d9c5e3f3b', name: "toprightend" }), h("div", { key: 'ba8d9220f29a77fcfbbd9d11f94b156adeae387a', class: "siteheader-menu-top-search" }, h("pn-marketweb-siteheader-search", { key: '44152b66a6dd180e665269cfa86416cb96853aae', language: this.language, siteid: this.siteid, search: this.search, "hide-search": this.hideSearch, i18n: this.i18n, icononly: true })))), h("slot", { key: '4596e271b130f4624a6d642d5ce6e2ef2d56f253', name: "siteheader-menu-top-button" }), h("div", { key: 'c804197de0ce1c71a506ae73dc6c86ac8e72643b', class: "siteheader-row" }, h("div", { key: '45a8125255cb92921ac55559fa8acf4708a60140', class: "siteheader-menu" }, this.gotData && this.menuItems && (h("pn-mainnav", { key: '15e82581832329a78501ab95f270f5e1a2189186', market: this.market, language: this.language, onMenuOpenChange: e => {
                 document.body.setAttribute('data-siteheader-menuopen', e.detail + '');
-            } }, h("pn-mainnav-level", { key: '0e3ded1fc35ff8edd97987f8480925cfe3179b88' }, h("pn-mainnav-list", { key: '1225681eaee649923dbe13832fcbf64c9fedd3aa' }, this.menuItems.map(item => (h("pn-mainnav-link", { name: item.name, href: item.href, itemid: item.id, target: item.linkTarget ?? '_self', linkid: item.trackingId }, ((item.promotedMenuItems && item.promotedMenuItems.length > 0) || (item.children && item.children.length > 0)) && (h("pn-mainnav-level", { label: item.name }, item.children.length > 0 && (h("pn-mainnav-list", { heading: item.navigationHeading ?? '' }, item.children.map(childitem => (h("pn-mainnav-link", { name: childitem.name, href: childitem.href, target: childitem.linkTarget ?? '_self', linkid: childitem.trackingId }))))), item.promotedMenuItems && item.promotedMenuItems.length > 0 && (h("pn-mainnav-list", { heading: item.promotedMenuItemsHeader }, item.promotedMenuItems.map(childitem => (h("pn-mainnav-link", { href: childitem.href, name: childitem.linkText, target: childitem.openInNewWindow ? '_blank' : '_self', linkid: this.promotedItemId(childitem) + item.id }))))))))))), h("div", { key: 'fdc502e058bd7b4480398950e489e9b2835cdd9c', slot: "footer", class: "siteheader-menu-footer" }, h("slot", { key: 'fac16aa3ae2c26db7a1e0cf11d28b0dd142718f9', name: "menu-footer-cta" }), this.gotData && this.loginDialog && !this.hideLogin && (h("pn-marketweb-siteheader-login", { key: 'a707fe4924f48c34dd63573b10a2e02261cc3cf2', token: this.userToken, siteUrl: this.siteDefinition.url, loginDialog: this.loginDialog, endpoint: this.endpoint, fullname: this.userFullname, loggedin: this.userLoggedin, i18n: this.i18n, showProfileSelection: this.showProfileSelection, showUnifiedLogin: this.showUnifiedLogin, environment: this.environment, "check-user-logged-in-state-interval": this.checkUserLoggedInStateInterval, useMarketwebLogin: this.useMarketwebLogin })), this.gotData && this.languageOptions && this.languageOptions.length && !this.hideLanguageSelector && (h("pn-language-selector", { key: '5f272081610b2b146ed72ca8fa45f3f765cc8586', value: this.language }, this.languageOptions.map(language => (h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))))), !this.hideSiteSelector && (h("pn-site-selector", { key: '49372f33753838fe5fbd49406372114f97f37bc5', language: this.language }, this.gotData && this.siteSelector?.currentSiteTitle && (h("pn-site-selector-item", { key: '4cb7a8325de081f7ea13d221478b9dc25e1556d0', heading: this.siteSelector.currentSiteTitle, description: this.siteSelector.currentSiteDescription })), this.gotData &&
+            } }, h("pn-mainnav-level", { key: '0663599f28fb2612ffe4464cb5afb14184a7d9a0' }, h("pn-mainnav-list", { key: 'c8d50592a89b3c6ee8758a2d15f0a09bdd607288' }, this.menuItems.map(item => (h("pn-mainnav-link", { name: item.name, href: item.href, itemid: item.id, target: item.linkTarget ?? '_self', linkid: item.trackingId }, ((item.promotedMenuItems && item.promotedMenuItems.length > 0) || (item.children && item.children.length > 0)) && (h("pn-mainnav-level", { label: item.name }, item.children.length > 0 && (h("pn-mainnav-list", { heading: item.navigationHeading ?? '' }, item.children.map(childitem => (h("pn-mainnav-link", { name: childitem.name, href: childitem.href, target: childitem.linkTarget ?? '_self', linkid: childitem.trackingId }))))), item.promotedMenuItems && item.promotedMenuItems.length > 0 && (h("pn-mainnav-list", { heading: item.promotedMenuItemsHeader }, item.promotedMenuItems.map(childitem => (h("pn-mainnav-link", { href: childitem.href, name: childitem.linkText, target: childitem.openInNewWindow ? '_blank' : '_self', linkid: this.promotedItemId(childitem) + item.id }))))))))))), h("div", { key: 'be4f6b48cbb68aa2dab4c4059a06106da932a863', slot: "footer", class: "siteheader-menu-footer" }, h("slot", { key: 'f3bcf649a62f074c03e094233d4436a8c78175b0', name: "menu-footer-cta" }), this.gotData && this.loginDialog && !this.hideLogin && (h("pn-marketweb-siteheader-login", { key: 'e4a995a152fecaef87e8592f88958834beaf6d92', token: this.userToken, siteUrl: this.siteDefinition.url, loginDialog: this.loginDialog, endpoint: this.endpoint, fullname: this.userFullname, loggedin: this.userLoggedin, i18n: this.i18n, showProfileSelection: this.showProfileSelection, showUnifiedLogin: this.showUnifiedLogin, environment: this.environment, "check-user-logged-in-state-interval": this.checkUserLoggedInStateInterval, useMarketwebLogin: this.useMarketwebLogin })), this.gotData && this.languageOptions && this.languageOptions.length && !this.hideLanguageSelector && (h("pn-language-selector", { key: '95f3634907641fb260400cfa9bcff33c4c6c97ad', value: this.language }, this.languageOptions.map(language => (h("pn-language-selector-option", { name: language.nativeName, code: language.twoLetterISOLanguageName, selected: language.isCurrent, url: this.getLanguageVersionUrl(language) }))))), !this.hideSiteSelector && (h("pn-site-selector", { key: '364d9904cc82ed5f876f6262f1e9c2b5a6220941', language: this.language }, this.gotData && this.siteSelector?.currentSiteTitle && (h("pn-site-selector-item", { key: '42bc5a32f680875f0d04324795ddcc508ac2ae63', heading: this.siteSelector.currentSiteTitle, description: this.siteSelector.currentSiteDescription })), this.gotData &&
             this.siteSelector?.siteSelections &&
-            this.siteSelector.siteSelections.map(site => (h("pn-site-selector-item", { heading: site.linkText, description: site.linkDescription, url: site.pageLink, newwindow: site.openInNewWindow })))))), h("div", { key: '9ddd445a3e534d634af6ae9abe0875e8245e7190', slot: "top", class: "siteheader-menu-top" }, h("pn-marketweb-siteheader-search", { key: 'e1bc28bf94d0972af60ffeabd2e07cea9fe5744a', language: this.language, siteid: this.siteid, search: this.search, "hide-search": this.hideSearch, i18n: this.i18n })))))), h("pn-marketweb-siteheader-search", { key: '2946b240f44b1c1c3b432875b66e68f1a1616cdd', language: this.language, siteid: this.siteid, primary: true, search: this.search, "hide-search": this.hideSearch, "show-only-link": this.minimizeSearch, i18n: this.i18n }), h("slot", { key: 'f87beba8dbef6437f04c22d1237f860806cba4e0', name: "header-bottom-button" })))));
+            this.siteSelector.siteSelections.map(site => (h("pn-site-selector-item", { heading: site.linkText, description: site.linkDescription, url: site.pageLink, newwindow: site.openInNewWindow })))))), h("div", { key: '6f88b4eafc076025afdfb9f39e14a18a3ba26b0f', slot: "top", class: "siteheader-menu-top" }, h("pn-marketweb-siteheader-search", { key: '24aad934ff5bb5441d56f68e3b1b997ddd0598d0', language: this.language, siteid: this.siteid, search: this.search, "hide-search": this.hideSearch, i18n: this.i18n })))))), h("pn-marketweb-siteheader-search", { key: '1a59878d744d8489c2852092acf0539ccee04dca', language: this.language, siteid: this.siteid, primary: true, search: this.search, "hide-search": this.hideSearch, "show-only-link": this.minimizeSearch, i18n: this.i18n }), h("slot", { key: '62e2988bc7ebfc177e484408905e2c09ffe410c0', name: "header-bottom-button" })))));
     }
     static get is() { return "pn-marketweb-siteheader"; }
     static get originalStyleUrls() {

package/dist/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.stories.js CHANGED Viewed

@@ -1,12 +1,12 @@
 import docs from "./pn-marketweb-siteheader-docs.json";
 import { createDocumentation } from "../../../globals/documentation/story";
-import { dashboard, open_in_new, shop, truck } from "pn-design-assets/pn-assets/icons";
+import { open_in_new, shop } from "pn-design-assets/pn-assets/icons";
 const usertoken = '6ae6bde345eb68fc0102f4ba256f31e9151db31dc2ea4c23a51917c';
 const { argTypes, textContent } = createDocumentation(docs);
 const meta = {
     title: "Components/Layout/Market web site Header",
     parameters: {
-        layout: "fullscreen",
+        layout: "padded",
         docs: {
             description: {
                 story: textContent,
@@ -337,38 +337,11 @@ const TPLSiteHeaderTemplate = ({ ...args }) => {
     hide-login="${args.hideLogin}"
     search-placeholder="${args.placeholder}"
     hide-home-menu-item="${args.hideHomeMenuItem}">
-      <div slot="header-bottom-button">
-        <pn-button class="header-bottom-button--button" href="http:www.google.se">${args.buttonText}</pn-button>
-        <pn-button class="header-bottom-button--button" href="http:www.google.se">Boka slottid</pn-button>
-        <pn-button class="header-bottom-button--icon" href="http:www.google.se" icon-only="true" icon='${dashboard}' arialabel="${args.buttonText}" tooltip='${args.buttonText}'></pn-button>
-        <pn-button class="header-bottom-button--icon" href="http:www.google.se" icon-only="true" icon='${truck}' arialabel="Boka slottid" tooltip='Boka slottid'></pn-button>
-      </div>
+      <pn-button slot="header-bottom-button" href="http:www.google.se" small="true" icon='${open_in_new}'>${args.buttonText}</pn-button>
       <pn-button slot="siteheader-menu-top-button" href="http:www.google.se" small="true" icon='${open_in_new}'>${args.buttonText}</pn-button>
-      <div slot="menu-footer-cta">
-        <pn-button href="http:www.google.se" small="true" icon='${open_in_new}'>${args.buttonText}</pn-button>
-        <pn-button href="http:www.google.se" small="true" icon='${open_in_new}'>Boka slottid</pn-button>
-      </div>
+      <pn-button slot="menu-footer-cta" href="http:www.google.se" small="true" icon='${open_in_new}'>${args.buttonText}</pn-button>
     </pn-marketweb-siteheader>
-  </div>
-  <style>
-      .header-wrapper[data-header-theme=tpl]>pn-marketweb-siteheader [slot=header-bottom-button] a .pn-button-content pn-icon svg>path {
-        fill: #0d234b;
-    }
-    .header-bottom-button--icon {
-        display: none;
-    }
-    @media only screen and (min-width: 1024px) and (max-width: 1240px) {
-        .header-bottom-button--button {
-            display: none;
-        }
-        .header-bottom-button--icon {
-            display: block;
-        }
-    }
-  </style>
-  `;
+  </div>`;
 };
 export const TPLSiteHeader = TPLSiteHeaderTemplate.bind({});
 TPLSiteHeader.args = {

package/dist/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-marketweb-siteheader.stories.js","sourceRoot":"","sources":["../../../../src/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\nimport docs from './pn-marketweb-siteheader-docs.json';\nimport { createDocumentation } from \"@/globals/documentation/story\";\nimport { dashboard, open_in_new, shop, truck } from 'pn-design-assets/pn-assets/icons';\n\nconst usertoken = '6ae6bde345eb68fc0102f4ba256f31e9151db31dc2ea4c23a51917c';\nconst { argTypes, textContent } = createDocumentation(docs);\n\nconst meta: Meta<HTMLPnMarketwebSiteheaderElement> = {\n title: \"Components/Layout/Market web site Header\",\n parameters: {\n layout: \"fullscreen\",\n docs: {\n description: {\n story: textContent,\n },\n },\n },\n args: {\n market: \"se\",\n language: \"sv\",\n siteid: \"\",\n hideSiteSelector: false,\n hideLanguageSelector: false,\n hideSearch: false,\n hideLogin: false,\n checkUserLoggedInStateInterval: 0,\n showUnifiedLogin: false,\n sessionForward: false,\n hideHomeMenuItem: false,\n cache: false,\n pageId: \"\",\n siteDomainInUrls: false,\n },\n argTypes: {\n market: {\n control: \"select\",\n options: [\"se\", \"dk\", \"fi\", \"no\", \"com\", \"tpl\"],\n },\n language: {\n control: \"select\",\n options: [\"en\", \"sv\", \"da\", \"fi\", \"no\", \"zh\", \"it\", \"nl\"],\n },\n endpoint: {\n control: \"select\",\n options: [\n \"\",\n \"https://localhost:51547\",\n \"https://local.postnord.com\",\n \"https://se-inte.postnord.com\",\n \"https://se-prep.postnord.com\",\n \"https://se-prod.postnord.com\",\n \"https://com-inte.postnord.com\",\n \"https://com-prep.postnord.com\",\n \"https://com-prod.postnord.com\",\n \"https://www.postnord.com\",\n ],\n },\n },\n};\n\ntype Story = StoryObj<HTMLPnMarketwebSiteheaderElement>;\n\nexport default meta;\n\nconst shoppingCartContent = `\n <a href=\"\" class=\"header-cart\" slot=\"toprightend\" style=\"align-self:center;position:relative;text-decoration:none;\">\n <span>Varukorg</span>\n <pn-icon icon='${shop}' color=\"blue700\" class=\"pn-icon\"></pn-icon>\n </a>`;\n\nconst customLogoContent = `<div slot=\"logo\">\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 141.73 41.74\" width=\"12.7rem\" height=\"3.7rem\" >\n <g fill=\"#00a0d6\">\n <path d=\"M108.84 13.35c0 6.34-5.17 9-10.03 9s-9.82-2.6-9.82-8.73 5.08-9 10.03-9 9.82 2.63 9.82 8.73Zm-6.56.18c0-2.09-1.36-3.51-3.38-3.51s-3.42 1.42-3.42 3.51c0 1.96 1.39 3.41 3.42 3.41s3.38-1.45 3.38-3.41Zm-82.97 0c0 4.83-3.32 8.82-8.49 8.82-3.17 0-4.65-1.57-4.65-1.57v5.86H0V5.17h6.17V6.8s1.6-2.18 5.11-2.18c5.14 0 8.04 3.96 8.04 8.91Zm-6.53 0c0-2.09-1.36-3.51-3.38-3.51s-3.42 1.42-3.42 3.51c0 1.96 1.39 3.41 3.42 3.41s3.38-1.45 3.38-3.41Zm103.69.27c0-2.54 1.54-3.32 3.6-3.32 1.27 0 2.08.3 2.08.3l.15-5.68s-.39-.18-1.45-.18c-3.45 0-4.38 2.18-4.38 2.18V5.17h-6.17v16.67h6.17v-8.03ZM141.73 0v21.84h-6.16v-1.63s-1.6 2.18-5.11 2.18c-5.14 0-8.04-3.96-8.04-8.91s3.32-8.82 8.49-8.82c3.17 0 4.65 1.57 4.65 1.57V1.21L141.72 0Zm-5.98 13.48c0-1.96-1.39-3.41-3.41-3.41s-3.38 1.45-3.38 3.41c0 2.08 1.36 3.5 3.38 3.5s3.41-1.42 3.41-3.5Zm-54.4-8.86c-3.6 0-4.9 2.18-4.9 2.18V5.17h-6.16v16.67h6.16v-8.55c0-2.11.79-3.08 2.69-3.08s2.18 1.57 2.18 3.57v8.07h6.22V11.6c0-4.59-2.2-6.98-6.19-6.98Zm-17.29-3.2H57.9v20.42h6.16V10.36h2.9l2.81-5.2h-5.71V1.42Zm-13.81 9.79c-2-.3-2.87-.3-2.87-1.09 0-.66.81-.94 2.42-.94 2.72 0 5.11.91 5.11.91L56 5.41s-2.63-.75-6.13-.75c-5.89 0-8.98 2.27-8.98 5.89 0 2.81 1.66 4.47 6.53 5.11 2.06.27 2.81.39 2.81 1.15s-.82.97-2.24.97c-3.08 0-5.98-1.3-5.98-1.3l-1.24 4.83s2.9 1.03 6.68 1.03c6.35 0 9.28-2.24 9.28-5.89 0-2.9-1.57-4.47-6.47-5.23Zm-10.06 2.14c0 6.34-5.17 9-10.03 9s-9.82-2.6-9.82-8.73 5.08-9 10.03-9 9.82 2.63 9.82 8.73Zm-6.56.18c0-2.09-1.36-3.51-3.38-3.51s-3.41 1.42-3.41 3.51c0 1.96 1.39 3.41 3.41 3.41s3.38-1.45 3.38-3.41ZM113.7 41.74V30.53h-3.63v-2.09h10.24v2.09h-3.65v11.21h-2.96ZM121.94 28.44h4.41c3.36 0 5.28 1.33 5.28 4.24s-1.94 4.25-5.36 4.25h-1.37v4.81h-2.96v-13.3Zm2.96 6.5h1.37c1.8 0 2.37-.82 2.37-2.22s-.49-2.15-2.37-2.15h-1.37v4.37ZM133.27 41.74v-13.3h2.96v11.21h5.49v2.09h-8.45Z\"></path>\n </g>\n</svg>`;\n\nconst renderSiteHeader = (args, htmlContent) => {\n const siteHeader = document.createElement('pn-marketweb-siteheader');\n\n Object.keys(args).forEach(key => args[key] && siteHeader.setAttribute(key, args[key]));\n\n siteHeader.innerHTML += htmlContent;\n\n return siteHeader;\n};\n\nexport const Primary: Story = {\n name: 'Primary',\n parameters: {\n docs: {\n description: {\n story: '',\n },\n },\n },\n render: args => renderSiteHeader(args, shoppingCartContent),\n args: {\n endpoint: 'https://localhost:51547',\n },\n};\n\n/** Old login dropdown. /\nexport const OldLoginDropdown: Story = {\n name: 'Old login dropdown',\n render: Primary.render,\n args: {\n siteid: '06bb4e57-cf10-4374-9e4d-34ae987eff2e',\n pageId: '9',\n },\n};\n\n/* Use your own custom logo /\nexport const CustomLogo: Story = {\n name: 'Custom logo',\n render: args => renderSiteHeader(args, customLogoContent),\n};\n\n/* Use different environments. /\nexport const EnvironmentOptions: Story = {\n name: 'Environment options',\n render: Primary.render,\n args: {\n environment: 'integration',\n },\n};\n\n/* Spa /\nexport const SPAModeOptions: Story = {\n name: 'SPAModeOptions',\n render: args => {\n const div = document.createElement('div')\n\n const header = renderSiteHeader(args, shoppingCartContent)\n\n div.appendChild(header)\n div.innerHTML += `\n <link rel=\"alternate\" hreflang=\"en-us\" href=\"https://postnord--hcdk.sandbox.my.site.com/dkprivate/s/?language=en_US\" data-owner=\"setSEOProperties\">\n <link rel=\"alternate\" hreflang=\"da\" href=\"https://postnord--hcdk.sandbox.my.site.com/dkprivate/s/?language=da\" data-owner=\"setSEOProperties\">\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n if (!window[\"haslangchange\"]) {\n console.log('SPA Mode - attached global market web header language change eventlistener')\n\n window.addEventListener('marketweb-languagechange', (e) => {\n console.log('marketweb-languagechange e', e)\n });\n window[\"haslangchange\"] = true;\n }\n });\n </script>\n `;\n\n return div\n },\n args: {\n environment: 'integration',\n endpoint: 'https://localhost:51547/',\n siteDomainInUrls: true,\n pageId: '9',\n }\n};\n\n\n/* Use localhost. */\nexport const LocalhostOptions: Story = {\n name: 'Environment options',\n render: Primary.render,\n args: {\n endpoint: 'https://localhost:51547/',\n },\n};\n\nconst LoggedInTemplate = ({ ...args }) => {\n return `\n <div style=\"background:#ddd;min-height:100vh;\">\n <pn-marketweb-siteheader\n market=\"${args.market}\"\n language=\"${args.language}\"\n endpoint=\"${args.endpoint}\"\n user-token=\"${args.token}\"\n check-user-logged-in-state-interval=\"${args.checkUserLoggedInStateInterval + ''}\"\n >\n </pn-marketweb-siteheader>\n</div>\n`;\n};\n\nexport const LoggedIn = LoggedInTemplate.bind({});\nLoggedIn.args = {\n market: 'se',\n language: 'sv',\n endpoint: 'https://com-inte.postnord.com',\n //endpoint: 'https://localhost:51547',\n token: usertoken,\n};\n\nconst MarketWebLoginLogicLoginTestWithoutProp = () => {\n return `\n <header>\n <pn-marketweb-siteheader\n endpoint=\"https://com-inte.postnord.com\"\n hide-search=\"\"\n spa-mode=\"true\"\n market=\"se\"\n language=\"sv\"\n environment=\"inte\"\n site-domain-in-urls=\"true\"\n hide-site-selector=\"false\" \n show-unified-login=\"true\">\n </pn-marketweb-siteheader>\n </header>`;\n};\nexport const MarketWebLoginLogicTestwithoutprop = MarketWebLoginLogicLoginTestWithoutProp.bind({});\n\nconst MarketWebLoginLogicLoginAsTrue = () => {\n return `\n <header>\n <pn-marketweb-siteheader\n endpoint=\"https://com-inte.postnord.com\"\n hide-search=\"\"\n spa-mode=\"true\"\n market=\"se\"\n language=\"sv\"\n environment=\"inte\"\n site-domain-in-urls=\"true\"\n hide-site-selector=\"false\" \n show-unified-login=\"true\"\n use-Marketweb-Login=\"true\">\n </pn-marketweb-siteheader>\n </header>`;\n};\nexport const MarketWebLoginLogicAsTrue = MarketWebLoginLogicLoginAsTrue.bind({});\n\nconst MarketWebLoginLogicLoginAsFalse = () => {\n return `\n <header>\n <pn-marketweb-siteheader\n endpoint=\"https://com-inte.postnord.com\"\n hide-search=\"\"\n spa-mode=\"true\"\n market=\"se\"\n language=\"sv\"\n environment=\"inte\"\n site-domain-in-urls=\"true\"\n hide-site-selector=\"false\" \n show-unified-login=\"true\"\n use-Marketweb-Login=\"false\">\n </pn-marketweb-siteheader>\n </header>`;\n};\nexport const MarketWebLoginLogicForTestEnv = MarketWebLoginLogicLoginAsFalse.bind({});\n\nconst MarketWebLoginLogicLoginAsFalseAndProd = () => {\n return `\n <header>\n <pn-marketweb-siteheader\n endpoint=\"https://com-inte.postnord.com\"\n hide-search=\"\"\n spa-mode=\"true\"\n market=\"se\"\n language=\"sv\"\n environment=\"production\"\n site-domain-in-urls=\"true\"\n hide-site-selector=\"false\" \n show-unified-login=\"true\"\n use-Marketweb-Login=\"false\">\n </pn-marketweb-siteheader>\n </header>`;\n};\nexport const MarketWebLoginLogicForProdEnv = MarketWebLoginLogicLoginAsFalseAndProd.bind({});\n\nexport const LoggedInWithStatusCheck = LoggedInTemplate.bind({});\nLoggedInWithStatusCheck.args = {\n market: 'se',\n language: 'sv',\n endpoint: 'https://com-inte.postnord.com',\n checkUserLoggedInStateInterval: 10000,\n //endpoint: 'https://localhost:51547',\n token: usertoken,\n};\n\nconst LoggedInProfileSelectionTemplate = ({ ...args }) => {\n return `\n <div style=\"background:#ddd;min-height:100vh;\">\n <pn-marketweb-siteheader\n market=\"${args.market}\"\n language=\"${args.language}\"\n endpoint=\"${args.endpoint}\"\n user-token=\"${args.token}\"\n check-user-logged-in-state-interval=\"10000\"\n show-profile-selection=\"true\"\n >\n </pn-marketweb-siteheader>\n</div>\n`;\n};\n\nexport const LoggedInProfileSelection = LoggedInProfileSelectionTemplate.bind({});\nLoggedInProfileSelection.args = {\n market: 'se',\n language: 'sv',\n // endpoint: 'https://com-inte.postnord.com',\n endpoint: 'https://localhost:51547/',\n token: usertoken,\n};\n\nconst BusinessUserLoggedInTemplate = ({ ...args }) => {\n return `\n <div style=\"background:#ddd;min-height:100vh;\">\n <pn-marketweb-siteheader\n market=\"${args.market}\"\n language=\"${args.language}\"\n endpoint=\"${args.endpoint}\"\n user-fullname=\"${args.name}\"\n user-loggedin=\"${args.loggedin}\"\n >\n </pn-marketweb-siteheader>\n</div>\n`;\n};\n\nexport const BusinessUserLoggedIn = BusinessUserLoggedInTemplate.bind({});\nBusinessUserLoggedIn.args = {\n market: 'com',\n language: 'zh',\n endpoint: 'https://com-inte.postnord.com',\n name: 'custom user name',\n loggedin: true,\n};\n\nconst DotComSiteHeaderTemplate = ({ ...args }) => {\n return `\n <div class=\"header-wrapper\" data-header-theme=\"dotcom\">\n <pn-marketweb-siteheader\n market=\"${args.market}\"\n language=\"${args.language}\"\n endpoint=\"${args.endpoint}\"\n user-fullname=\"${args.name}\"\n user-loggedin=\"${args.loggedin}\"\n show-unified-login=${args.unified}\n show-profile-selection=${args.showProfileSelection}\n >\n <pn-button slot=\"toprightend\" href=\"http:www.google.se\" small=\"true\">Get started</pn-button>\n <pn-button slot=\"menu-footer-cta\" href=\"http:www.google.se\" small=\"true\">Get started</pn-button>\n </pn-marketweb-siteheader>\n </div>`;\n};\n\nexport const DotComSiteHeader = DotComSiteHeaderTemplate.bind({});\nDotComSiteHeader.args = {\n market: 'com',\n language: 'it',\n endpoint: 'https://com-inte.postnord.com',\n name: 'DotCom User',\n loggedin: true,\n loginInfo: encodeURIComponent('Hello i am a <a href=\"#\">link!</a>'),\n unified: true,\n showProfileSelection: false,\n};\n\nconst TPLSiteHeaderTemplate = ({ ...args }) => {\n return `\n <div class=\"header-wrapper\" data-header-theme=\"tpl\">\n <pn-marketweb-siteheader\n market=\"${args.market}\"\n language=\"${args.language}\"\n endpoint=\"${args.endpoint}\"\n user-fullname=\"${args.name}\"\n user-loggedin=\"${args.loggedin}\"\n hide-language-selector=\"${args.hideLanguageSelector}\"\n hide-login=\"${args.hideLogin}\"\n search-placeholder=\"${args.placeholder}\"\n hide-home-menu-item=\"${args.hideHomeMenuItem}\">\n <div slot=\"header-bottom-button\">\n <pn-button class=\"header-bottom-button--button\" href=\"http:www.google.se\">${args.buttonText}</pn-button>\n <pn-button class=\"header-bottom-button--button\" href=\"http:www.google.se\">Boka slottid</pn-button>\n <pn-button class=\"header-bottom-button--icon\" href=\"http:www.google.se\" icon-only=\"true\" icon='${dashboard}' arialabel=\"${args.buttonText}\" tooltip='${args.buttonText}'></pn-button>\n <pn-button class=\"header-bottom-button--icon\" href=\"http:www.google.se\" icon-only=\"true\" icon='${truck}' arialabel=\"Boka slottid\" tooltip='Boka slottid'></pn-button>\n </div>\n <pn-button slot=\"siteheader-menu-top-button\" href=\"http:www.google.se\" small=\"true\" icon='${open_in_new}'>${args.buttonText}</pn-button>\n <div slot=\"menu-footer-cta\">\n <pn-button href=\"http:www.google.se\" small=\"true\" icon='${open_in_new}'>${args.buttonText}</pn-button>\n <pn-button href=\"http:www.google.se\" small=\"true\" icon='${open_in_new}'>Boka slottid</pn-button>\n </div>\n </pn-marketweb-siteheader>\n </div>\n <style>\n .header-wrapper[data-header-theme=tpl]>pn-marketweb-siteheader [slot=header-bottom-button] a .pn-button-content pn-icon svg>path {\n fill: #0d234b;\n }\n .header-bottom-button--icon {\n display: none;\n }\n\n @media only screen and (min-width: 1024px) and (max-width: 1240px) {\n .header-bottom-button--button {\n display: none;\n }\n\n .header-bottom-button--icon {\n display: block;\n }\n }\n </style>\n `;\n};\n\nexport const TPLSiteHeader = TPLSiteHeaderTemplate.bind({});\nTPLSiteHeader.args = {\n market: 'se',\n language: 'sv',\n endpoint: 'https://tpl-inte.postnord.com',\n name: 'TPL User',\n hideLogin: true,\n hideHomeMenuItem: true,\n hideLanguageSelector: false,\n loggedin: false,\n buttonText: 'Kontrolltornet',\n placeholder: 'placeholder',\n};\n\nconst ATLoginTestTemplate = () => {\n return `\n <script>\n window['pnTopbar'] = { session_id : 'b54237185e06db83b1d6467895ba774328d6d3a8dd6b22f7305af65' };\n </script>\n <header>\n <pn-marketweb-siteheader\n endpoint=\"https://com-inte.postnord.com\"\n hide-search=\"\"\n spa-mode=\"true\"\n market=\"se\"\n language=\"sv\"\n login=\"https://atportal.postnord.com/api/unified-login/backend/authorization?redirectionUrl=https://atportal.postnord.com\"\n environment=\"integration\"\n site-domain-in-urls=\"true\"\n hide-site-selector=\"false\" >\n </pn-marketweb-siteheader>\n </header>`;\n};\nexport const ATLoginTest = ATLoginTestTemplate.bind({});\n\nconst UnifiedLoginTemplate = ({ ...args }) => {\n return `\n <div style=\"background:#ddd;min-height:100vh;\">\n <pn-marketweb-siteheader\n market=\"${args.market}\"\n language=\"${args.language}\"\n endpoint=\"${args.endpoint}\"\n user-token=\"${args.token}\"\n check-user-logged-in-state-interval=\"${args.checkUserLoggedInStateInterval + ''}\"\n show-unified-login=\"${args.showUnifiedLogin}\"\n >\n </pn-marketweb-siteheader>\n</div>\n`;\n};\n\nexport const UnifiedLogin = UnifiedLoginTemplate.bind({});\nUnifiedLogin.args = {\n market: 'se',\n language: 'sv',\n endpoint: 'https://com-inte.postnord.com',\n //endpoint: 'https://localhost:51547',\n token: usertoken,\n};\n\nconst KopFraktTemplate = ({ ...args }) => {\n return `\n <pn-marketweb-siteheader\n language=\"${args.language}\"\n market=\"${args.market}\"\n environment=\"${args.environment}\"\n endpoint=\"${args.endpoint}\"\n hide-site-selector=\"${args.hideSiteSelector}\"\n hide-search=\"\"\n spa-mode=\"${args.spaMode}\"\n hide-login=\"${args.hideLogin}\"\n site-domain-in-urls=\"${args.siteDomainInUrls}\"\n show-unified-login=\"${args.showUnifiedLogin}\"\n use-Marketweb-Login=\"${args.useMarketWebLogin}\"\n ></pn-marketweb-siteheader>\n `;\n};\n\nexport const KopFrakt = KopFraktTemplate.bind({});\nKopFrakt.args = {\n language: 'en',\n market: 'se',\n environment: 'integration',\n endpoint: 'https://com-inte.postnord.com',\n hideSiteSelector: false,\n hideSearch: '',\n spaMode: 'true',\n hideLogin: 'false',\n siteDomainInUrls: 'true',\n showUnifiedLogin: 'true'\n};\n"]}
1	+ {"version":3,"file":"pn-marketweb-siteheader.stories.js","sourceRoot":"","sources":["../../../../src/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.stories.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Meta, StoryObj } from '@storybook/web-components';\nimport docs from './pn-marketweb-siteheader-docs.json';\nimport { createDocumentation, createComponent } from \"@/globals/documentation/story\";\nimport { open_in_new, shop } from 'pn-design-assets/pn-assets/icons';\n\nconst usertoken = '6ae6bde345eb68fc0102f4ba256f31e9151db31dc2ea4c23a51917c';\nconst { argTypes, textContent } = createDocumentation(docs);\n\nconst meta: Meta<HTMLPnMarketwebSiteheaderElement> = {\n title: \"Components/Layout/Market web site Header\",\n parameters: {\n layout: \"padded\",\n docs: {\n description: {\n story: textContent,\n },\n },\n },\n args: {\n market: \"se\",\n language: \"sv\",\n siteid: \"\",\n hideSiteSelector: false,\n hideLanguageSelector: false,\n hideSearch: false,\n hideLogin: false,\n checkUserLoggedInStateInterval: 0,\n showUnifiedLogin: false,\n sessionForward: false,\n hideHomeMenuItem: false,\n cache: false,\n pageId: \"\",\n siteDomainInUrls: false,\n },\n argTypes: {\n market: {\n control: \"select\",\n options: [\"se\", \"dk\", \"fi\", \"no\", \"com\", \"tpl\"],\n },\n language: {\n control: \"select\",\n options: [\"en\", \"sv\", \"da\", \"fi\", \"no\", \"zh\", \"it\", \"nl\"],\n },\n endpoint: {\n control: \"select\",\n options: [\n \"\",\n \"https://localhost:51547\",\n \"https://local.postnord.com\",\n \"https://se-inte.postnord.com\",\n \"https://se-prep.postnord.com\",\n \"https://se-prod.postnord.com\",\n \"https://com-inte.postnord.com\",\n \"https://com-prep.postnord.com\",\n \"https://com-prod.postnord.com\",\n \"https://www.postnord.com\",\n ],\n },\n },\n};\n\ntype Story = StoryObj<HTMLPnMarketwebSiteheaderElement>;\n\nexport default meta;\n\nconst shoppingCartContent = `\n <a href=\"\" class=\"header-cart\" slot=\"toprightend\" style=\"align-self:center;position:relative;text-decoration:none;\">\n <span>Varukorg</span>\n <pn-icon icon='${shop}' color=\"blue700\" class=\"pn-icon\"></pn-icon>\n </a>`;\n\nconst customLogoContent = `<div slot=\"logo\">\n<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 141.73 41.74\" width=\"12.7rem\" height=\"3.7rem\" >\n <g fill=\"#00a0d6\">\n <path d=\"M108.84 13.35c0 6.34-5.17 9-10.03 9s-9.82-2.6-9.82-8.73 5.08-9 10.03-9 9.82 2.63 9.82 8.73Zm-6.56.18c0-2.09-1.36-3.51-3.38-3.51s-3.42 1.42-3.42 3.51c0 1.96 1.39 3.41 3.42 3.41s3.38-1.45 3.38-3.41Zm-82.97 0c0 4.83-3.32 8.82-8.49 8.82-3.17 0-4.65-1.57-4.65-1.57v5.86H0V5.17h6.17V6.8s1.6-2.18 5.11-2.18c5.14 0 8.04 3.96 8.04 8.91Zm-6.53 0c0-2.09-1.36-3.51-3.38-3.51s-3.42 1.42-3.42 3.51c0 1.96 1.39 3.41 3.42 3.41s3.38-1.45 3.38-3.41Zm103.69.27c0-2.54 1.54-3.32 3.6-3.32 1.27 0 2.08.3 2.08.3l.15-5.68s-.39-.18-1.45-.18c-3.45 0-4.38 2.18-4.38 2.18V5.17h-6.17v16.67h6.17v-8.03ZM141.73 0v21.84h-6.16v-1.63s-1.6 2.18-5.11 2.18c-5.14 0-8.04-3.96-8.04-8.91s3.32-8.82 8.49-8.82c3.17 0 4.65 1.57 4.65 1.57V1.21L141.72 0Zm-5.98 13.48c0-1.96-1.39-3.41-3.41-3.41s-3.38 1.45-3.38 3.41c0 2.08 1.36 3.5 3.38 3.5s3.41-1.42 3.41-3.5Zm-54.4-8.86c-3.6 0-4.9 2.18-4.9 2.18V5.17h-6.16v16.67h6.16v-8.55c0-2.11.79-3.08 2.69-3.08s2.18 1.57 2.18 3.57v8.07h6.22V11.6c0-4.59-2.2-6.98-6.19-6.98Zm-17.29-3.2H57.9v20.42h6.16V10.36h2.9l2.81-5.2h-5.71V1.42Zm-13.81 9.79c-2-.3-2.87-.3-2.87-1.09 0-.66.81-.94 2.42-.94 2.72 0 5.11.91 5.11.91L56 5.41s-2.63-.75-6.13-.75c-5.89 0-8.98 2.27-8.98 5.89 0 2.81 1.66 4.47 6.53 5.11 2.06.27 2.81.39 2.81 1.15s-.82.97-2.24.97c-3.08 0-5.98-1.3-5.98-1.3l-1.24 4.83s2.9 1.03 6.68 1.03c6.35 0 9.28-2.24 9.28-5.89 0-2.9-1.57-4.47-6.47-5.23Zm-10.06 2.14c0 6.34-5.17 9-10.03 9s-9.82-2.6-9.82-8.73 5.08-9 10.03-9 9.82 2.63 9.82 8.73Zm-6.56.18c0-2.09-1.36-3.51-3.38-3.51s-3.41 1.42-3.41 3.51c0 1.96 1.39 3.41 3.41 3.41s3.38-1.45 3.38-3.41ZM113.7 41.74V30.53h-3.63v-2.09h10.24v2.09h-3.65v11.21h-2.96ZM121.94 28.44h4.41c3.36 0 5.28 1.33 5.28 4.24s-1.94 4.25-5.36 4.25h-1.37v4.81h-2.96v-13.3Zm2.96 6.5h1.37c1.8 0 2.37-.82 2.37-2.22s-.49-2.15-2.37-2.15h-1.37v4.37ZM133.27 41.74v-13.3h2.96v11.21h5.49v2.09h-8.45Z\"></path>\n </g>\n</svg>`;\n\nconst renderSiteHeader = (args, htmlContent) => {\n const siteHeader = document.createElement('pn-marketweb-siteheader');\n\n Object.keys(args).forEach(key => args[key] && siteHeader.setAttribute(key, args[key]));\n\n siteHeader.innerHTML += htmlContent;\n\n return siteHeader;\n};\n\nexport const Primary: Story = {\n name: 'Primary',\n parameters: {\n docs: {\n description: {\n story: '',\n },\n },\n },\n render: args => renderSiteHeader(args, shoppingCartContent),\n args: {\n endpoint: 'https://localhost:51547',\n },\n};\n\n/** Old login dropdown. /\nexport const OldLoginDropdown: Story = {\n name: 'Old login dropdown',\n render: Primary.render,\n args: {\n siteid: '06bb4e57-cf10-4374-9e4d-34ae987eff2e',\n pageId: '9',\n },\n};\n\n/* Use your own custom logo /\nexport const CustomLogo: Story = {\n name: 'Custom logo',\n render: args => renderSiteHeader(args, customLogoContent),\n};\n\n/* Use different environments. /\nexport const EnvironmentOptions: Story = {\n name: 'Environment options',\n render: Primary.render,\n args: {\n environment: 'integration',\n },\n};\n\n/* Spa /\nexport const SPAModeOptions: Story = {\n name: 'SPAModeOptions',\n render: args => {\n const div = document.createElement('div')\n\n const header = renderSiteHeader(args, shoppingCartContent)\n\n div.appendChild(header)\n div.innerHTML += `\n <link rel=\"alternate\" hreflang=\"en-us\" href=\"https://postnord--hcdk.sandbox.my.site.com/dkprivate/s/?language=en_US\" data-owner=\"setSEOProperties\">\n <link rel=\"alternate\" hreflang=\"da\" href=\"https://postnord--hcdk.sandbox.my.site.com/dkprivate/s/?language=da\" data-owner=\"setSEOProperties\">\n <script>\n document.addEventListener('DOMContentLoaded', () => {\n if (!window[\"haslangchange\"]) {\n console.log('SPA Mode - attached global market web header language change eventlistener')\n\n window.addEventListener('marketweb-languagechange', (e) => {\n console.log('marketweb-languagechange e', e)\n });\n window[\"haslangchange\"] = true;\n }\n });\n </script>\n `;\n\n return div\n },\n args: {\n environment: 'integration',\n endpoint: 'https://localhost:51547/',\n siteDomainInUrls: true,\n pageId: '9',\n }\n};\n\n\n/* Use localhost. */\nexport const LocalhostOptions: Story = {\n name: 'Environment options',\n render: Primary.render,\n args: {\n endpoint: 'https://localhost:51547/',\n },\n};\n\nconst LoggedInTemplate = ({ ...args }) => {\n return `\n <div style=\"background:#ddd;min-height:100vh;\">\n <pn-marketweb-siteheader\n market=\"${args.market}\"\n language=\"${args.language}\"\n endpoint=\"${args.endpoint}\"\n user-token=\"${args.token}\"\n check-user-logged-in-state-interval=\"${args.checkUserLoggedInStateInterval + ''}\"\n >\n </pn-marketweb-siteheader>\n</div>\n`;\n};\n\nexport const LoggedIn = LoggedInTemplate.bind({});\nLoggedIn.args = {\n market: 'se',\n language: 'sv',\n endpoint: 'https://com-inte.postnord.com',\n //endpoint: 'https://localhost:51547',\n token: usertoken,\n};\n\nconst MarketWebLoginLogicLoginTestWithoutProp = () => {\n return `\n <header>\n <pn-marketweb-siteheader\n endpoint=\"https://com-inte.postnord.com\"\n hide-search=\"\"\n spa-mode=\"true\"\n market=\"se\"\n language=\"sv\"\n environment=\"inte\"\n site-domain-in-urls=\"true\"\n hide-site-selector=\"false\" \n show-unified-login=\"true\">\n </pn-marketweb-siteheader>\n </header>`;\n};\nexport const MarketWebLoginLogicTestwithoutprop = MarketWebLoginLogicLoginTestWithoutProp.bind({});\n\nconst MarketWebLoginLogicLoginAsTrue = () => {\n return `\n <header>\n <pn-marketweb-siteheader\n endpoint=\"https://com-inte.postnord.com\"\n hide-search=\"\"\n spa-mode=\"true\"\n market=\"se\"\n language=\"sv\"\n environment=\"inte\"\n site-domain-in-urls=\"true\"\n hide-site-selector=\"false\" \n show-unified-login=\"true\"\n use-Marketweb-Login=\"true\">\n </pn-marketweb-siteheader>\n </header>`;\n};\nexport const MarketWebLoginLogicAsTrue = MarketWebLoginLogicLoginAsTrue.bind({});\n\nconst MarketWebLoginLogicLoginAsFalse = () => {\n return `\n <header>\n <pn-marketweb-siteheader\n endpoint=\"https://com-inte.postnord.com\"\n hide-search=\"\"\n spa-mode=\"true\"\n market=\"se\"\n language=\"sv\"\n environment=\"inte\"\n site-domain-in-urls=\"true\"\n hide-site-selector=\"false\" \n show-unified-login=\"true\"\n use-Marketweb-Login=\"false\">\n </pn-marketweb-siteheader>\n </header>`;\n};\nexport const MarketWebLoginLogicForTestEnv = MarketWebLoginLogicLoginAsFalse.bind({});\n\nconst MarketWebLoginLogicLoginAsFalseAndProd = () => {\n return `\n <header>\n <pn-marketweb-siteheader\n endpoint=\"https://com-inte.postnord.com\"\n hide-search=\"\"\n spa-mode=\"true\"\n market=\"se\"\n language=\"sv\"\n environment=\"production\"\n site-domain-in-urls=\"true\"\n hide-site-selector=\"false\" \n show-unified-login=\"true\"\n use-Marketweb-Login=\"false\">\n </pn-marketweb-siteheader>\n </header>`;\n};\nexport const MarketWebLoginLogicForProdEnv = MarketWebLoginLogicLoginAsFalseAndProd.bind({});\n\nexport const LoggedInWithStatusCheck = LoggedInTemplate.bind({});\nLoggedInWithStatusCheck.args = {\n market: 'se',\n language: 'sv',\n endpoint: 'https://com-inte.postnord.com',\n checkUserLoggedInStateInterval: 10000,\n //endpoint: 'https://localhost:51547',\n token: usertoken,\n};\n\nconst LoggedInProfileSelectionTemplate = ({ ...args }) => {\n return `\n <div style=\"background:#ddd;min-height:100vh;\">\n <pn-marketweb-siteheader\n market=\"${args.market}\"\n language=\"${args.language}\"\n endpoint=\"${args.endpoint}\"\n user-token=\"${args.token}\"\n check-user-logged-in-state-interval=\"10000\"\n show-profile-selection=\"true\"\n >\n </pn-marketweb-siteheader>\n</div>\n`;\n};\n\nexport const LoggedInProfileSelection = LoggedInProfileSelectionTemplate.bind({});\nLoggedInProfileSelection.args = {\n market: 'se',\n language: 'sv',\n // endpoint: 'https://com-inte.postnord.com',\n endpoint: 'https://localhost:51547/',\n token: usertoken,\n};\n\nconst BusinessUserLoggedInTemplate = ({ ...args }) => {\n return `\n <div style=\"background:#ddd;min-height:100vh;\">\n <pn-marketweb-siteheader\n market=\"${args.market}\"\n language=\"${args.language}\"\n endpoint=\"${args.endpoint}\"\n user-fullname=\"${args.name}\"\n user-loggedin=\"${args.loggedin}\"\n >\n </pn-marketweb-siteheader>\n</div>\n`;\n};\n\nexport const BusinessUserLoggedIn = BusinessUserLoggedInTemplate.bind({});\nBusinessUserLoggedIn.args = {\n market: 'com',\n language: 'zh',\n endpoint: 'https://com-inte.postnord.com',\n name: 'custom user name',\n loggedin: true,\n};\n\nconst DotComSiteHeaderTemplate = ({ ...args }) => {\n return `\n <div class=\"header-wrapper\" data-header-theme=\"dotcom\">\n <pn-marketweb-siteheader\n market=\"${args.market}\"\n language=\"${args.language}\"\n endpoint=\"${args.endpoint}\"\n user-fullname=\"${args.name}\"\n user-loggedin=\"${args.loggedin}\"\n show-unified-login=${args.unified}\n show-profile-selection=${args.showProfileSelection}\n >\n <pn-button slot=\"toprightend\" href=\"http:www.google.se\" small=\"true\">Get started</pn-button>\n <pn-button slot=\"menu-footer-cta\" href=\"http:www.google.se\" small=\"true\">Get started</pn-button>\n </pn-marketweb-siteheader>\n </div>`;\n};\n\nexport const DotComSiteHeader = DotComSiteHeaderTemplate.bind({});\nDotComSiteHeader.args = {\n market: 'com',\n language: 'it',\n endpoint: 'https://com-inte.postnord.com',\n name: 'DotCom User',\n loggedin: true,\n loginInfo: encodeURIComponent('Hello i am a <a href=\"#\">link!</a>'),\n unified: true,\n showProfileSelection: false,\n};\n\nconst TPLSiteHeaderTemplate = ({ ...args }) => {\n return `\n <div class=\"header-wrapper\" data-header-theme=\"tpl\">\n <pn-marketweb-siteheader\n market=\"${args.market}\"\n language=\"${args.language}\"\n endpoint=\"${args.endpoint}\"\n user-fullname=\"${args.name}\"\n user-loggedin=\"${args.loggedin}\"\n hide-language-selector=\"${args.hideLanguageSelector}\"\n hide-login=\"${args.hideLogin}\"\n search-placeholder=\"${args.placeholder}\"\n hide-home-menu-item=\"${args.hideHomeMenuItem}\">\n <pn-button slot=\"header-bottom-button\" href=\"http:www.google.se\" small=\"true\" icon='${open_in_new}'>${args.buttonText}</pn-button>\n <pn-button slot=\"siteheader-menu-top-button\" href=\"http:www.google.se\" small=\"true\" icon='${open_in_new}'>${args.buttonText}</pn-button>\n <pn-button slot=\"menu-footer-cta\" href=\"http:www.google.se\" small=\"true\" icon='${open_in_new}'>${args.buttonText}</pn-button>\n </pn-marketweb-siteheader>\n </div>`;\n};\n\nexport const TPLSiteHeader = TPLSiteHeaderTemplate.bind({});\nTPLSiteHeader.args = {\n market: 'se',\n language: 'sv',\n endpoint: 'https://tpl-inte.postnord.com',\n name: 'TPL User',\n hideLogin: true,\n hideHomeMenuItem: true,\n hideLanguageSelector: false,\n loggedin: false,\n buttonText: 'Kontrolltornet',\n placeholder: 'placeholder',\n};\n\nconst ATLoginTestTemplate = () => {\n return `\n <script>\n window['pnTopbar'] = { session_id : 'b54237185e06db83b1d6467895ba774328d6d3a8dd6b22f7305af65' };\n </script>\n <header>\n <pn-marketweb-siteheader\n endpoint=\"https://com-inte.postnord.com\"\n hide-search=\"\"\n spa-mode=\"true\"\n market=\"se\"\n language=\"sv\"\n login=\"https://atportal.postnord.com/api/unified-login/backend/authorization?redirectionUrl=https://atportal.postnord.com\"\n environment=\"integration\"\n site-domain-in-urls=\"true\"\n hide-site-selector=\"false\" >\n </pn-marketweb-siteheader>\n </header>`;\n};\nexport const ATLoginTest = ATLoginTestTemplate.bind({});\n\nconst UnifiedLoginTemplate = ({ ...args }) => {\n return `\n <div style=\"background:#ddd;min-height:100vh;\">\n <pn-marketweb-siteheader\n market=\"${args.market}\"\n language=\"${args.language}\"\n endpoint=\"${args.endpoint}\"\n user-token=\"${args.token}\"\n check-user-logged-in-state-interval=\"${args.checkUserLoggedInStateInterval + ''}\"\n show-unified-login=\"${args.showUnifiedLogin}\"\n >\n </pn-marketweb-siteheader>\n</div>\n`;\n};\n\nexport const UnifiedLogin = UnifiedLoginTemplate.bind({});\nUnifiedLogin.args = {\n market: 'se',\n language: 'sv',\n endpoint: 'https://com-inte.postnord.com',\n //endpoint: 'https://localhost:51547',\n token: usertoken,\n};\n\nconst KopFraktTemplate = ({ ...args }) => {\n return `\n <pn-marketweb-siteheader\n language=\"${args.language}\"\n market=\"${args.market}\"\n environment=\"${args.environment}\"\n endpoint=\"${args.endpoint}\"\n hide-site-selector=\"${args.hideSiteSelector}\"\n hide-search=\"\"\n spa-mode=\"${args.spaMode}\"\n hide-login=\"${args.hideLogin}\"\n site-domain-in-urls=\"${args.siteDomainInUrls}\"\n show-unified-login=\"${args.showUnifiedLogin}\"\n use-Marketweb-Login=\"${args.useMarketWebLogin}\"\n ></pn-marketweb-siteheader>\n `;\n};\n\nexport const KopFrakt = KopFraktTemplate.bind({});\nKopFrakt.args = {\n language: 'en',\n market: 'se',\n environment: 'integration',\n endpoint: 'https://com-inte.postnord.com',\n hideSiteSelector: false,\n hideSearch: '',\n spaMode: 'true',\n hideLogin: 'false',\n siteDomainInUrls: 'true',\n showUnifiedLogin: 'true'\n};\n"]}

package/dist/collection/components/media/pn-media-block/pn-media-block.css CHANGED Viewed

@@ -2,31 +2,6 @@ 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-media-block .media-block .media-block__block-container {
   display: grid;
   overflow: hidden;

package/dist/collection/components/media/pn-media-block/pn-media-block.js CHANGED Viewed

@@ -1,4 +1,3 @@
-import { HeadingTag } from "../../../globals/HeadingTag";
 import { h } from "@stencil/core";
 function userPrefersReducedMotion() {
     return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -17,7 +16,7 @@ export class PnmediaBlock {
         this.scrollSnapBlock = false;
         this.fixedBackground = false;
         this.blockHeading = null;
-        this.blockHeadingLevel = 'h2';
+        this.blockHeadingLevel = 2;
         this.blockPreamble = null;
         this.marginBottom = false;
         this.pnPlayOnScrollObserverOptions = {
@@ -128,6 +127,7 @@ export class PnmediaBlock {
     };
     render() {
         const { showOverlayLayer, fixedBackground, blockHeight, scrollSnapBlock, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground, marginBottom } = this;
+        const HeadingTag = `h${this.blockHeadingLevel ?? 2}`;
         const isVideo = hasVideo;
         const isImage = hasImage;
         const classes = [
@@ -141,10 +141,10 @@ export class PnmediaBlock {
             marginBottom ? 'media-block--margin-bottom' : '',
         ].join(' ');
         const pnPlayOnScrollObserverOptions = {
-            root: this.blockHeight === '100svh' ? this.block : null,
+            root: this.blockHeight === "100svh" ? this.block : null,
             threshold: [0, 0.5, 1], // Callback will be executed when 0%, 50%, and 100% of the target is visible
         };
-        return (h("div", { key: 'f5ae835cc4299ae08a0c781368c6407f359f8c8e', class: classes }, h("div", { key: 'c7ddb415c0f9fc3ea505dc38f0a1a6ed61eba35b', class: "media-block__block-container" }, h("div", { key: '82e5ebb277e31a683eea026dea5481655076dfb1', class: "media-block__media-container" }, isVideo ? (h("pn-play-on-scroll", { "show-overlay": this.showOverlayLayer, observerOptions: pnPlayOnScrollObserverOptions, "video-src": this.videoSrc })) : isImage ? (h("picture", null, h("source", { media: "(min-width: 1400px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1224px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1140px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1023px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("source", { media: "(min-width: 768px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("source", { media: "(min-width: 500px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("img", { src: this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc, alt: this.imageAltText !== 'undefined' ? this.imageAltText : '', role: this.imageAltText !== 'undefined' ? 'img' : 'presentation', "aria-hidden": this.imageAltText !== 'undefined' ? 'false' : 'true' }))) : null), !isVideo && h("div", { key: '8d2090b3845bce11806a486c714b7b43b5519880', class: "media-block__overlay-filter", id: "mediaBlockOverlay" }), (this.blockHeading || this.blockPreamble) && (h("div", { key: '9919ba7c0af23dd1323202badbb68c302d037df1', class: "media-block__content-container" }, this.blockHeading && (h(HeadingTag, { key: '5476764a9c75666dc7bdf45c7b7211a071cf78cd', level: this.blockHeadingLevel, cssClass: "media-block__block-heading" }, this.blockHeading)), this.blockPreamble && h("p", { key: 'd8b7c40d8465c45e8149560446081cc272675fef', class: "media-block__preamble" }, this.blockPreamble), hasButtonSlot && (h("div", { key: '1273888646c5e960ce36f4b3ecf03cefe16bc6a2', class: "media-block__cta-link" }, h("slot", { key: '80d7f2fe2f1657222d385d3e5263c698ddcfeff6', name: "cta-button" })))))), h("div", { key: '19f99b2fffe0d4a9152e8cf956aee689978f502f', id: "scroll-trigger" })));
+        return (h("div", { key: 'dc3cf32de0360eac8564ff3f91d8c5891ee16ec1', class: classes }, h("div", { key: 'e8210700007640025d21b0d0aea5988a3fceda87', class: "media-block__block-container" }, h("div", { key: '7191a14b7f3df69b436cb162cccea46dae7c3968', class: "media-block__media-container" }, isVideo ? (h("pn-play-on-scroll", { "show-overlay": this.showOverlayLayer, observerOptions: pnPlayOnScrollObserverOptions, "video-src": this.videoSrc })) : isImage ? (h("picture", null, h("source", { media: "(min-width: 1400px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1224px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1140px)", srcSet: this.imageSrc }), h("source", { media: "(min-width: 1023px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("source", { media: "(min-width: 768px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("source", { media: "(min-width: 500px)", srcSet: this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc }), h("img", { src: this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc, alt: this.imageAltText !== 'undefined' ? this.imageAltText : '', role: this.imageAltText !== 'undefined' ? 'img' : 'presentation', "aria-hidden": this.imageAltText !== 'undefined' ? 'false' : 'true' }))) : null), !isVideo && h("div", { key: 'af376598e9306a98a3b93c7242e5a2a4e20c0b6e', class: "media-block__overlay-filter", id: "mediaBlockOverlay" }), (this.blockHeading || this.blockPreamble) && (h("div", { key: 'cf0d1995a249cc03befb202cb2a1c728c1a66c39', class: "media-block__content-container" }, this.blockHeading && (h(HeadingTag, { key: '1116ae451a6e6135191137018de6e07c77fe683f', level: this.blockHeadingLevel, class: "media-block__block-heading" }, this.blockHeading)), this.blockPreamble && h("p", { key: '4e93ed27ebb5e1e53040a6305cbb45d3c90c4799', class: "media-block__preamble" }, this.blockPreamble), hasButtonSlot && (h("div", { key: 'a68d5f917070cef67b0d7a5116b513bb2cf59d6b', class: "media-block__cta-link" }, h("slot", { key: '0e48cbeadf462bfc357de335959e8901c3281fb3', name: "cta-button" })))))), h("div", { key: '5dd819e8c2b65f0445eb29f3850d5641c3108eef', id: "scroll-trigger" })));
     }
     static get is() { return "pn-media-block"; }
     static get originalStyleUrls() {
@@ -376,11 +376,11 @@ export class PnmediaBlock {
                 "defaultValue": "null"
             },
             "blockHeadingLevel": {
-                "type": "string",
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "number",
+                    "resolved": "number",
                     "references": {}
                 },
                 "required": false,
@@ -391,7 +391,7 @@ export class PnmediaBlock {
                 },
                 "attribute": "block-heading-level",
                 "reflect": false,
-                "defaultValue": "'h2'"
+                "defaultValue": "2"
             },
             "blockPreamble": {
                 "type": "string",

package/dist/collection/components/media/pn-media-block/pn-media-block.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"pn-media-block.js","sourceRoot":"","sources":["../../../../src/components/media/pn-media-block/pn-media-block.tsx"],"names":[],"mappings":"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","sourcesContent":["import { HeadingTag } from '@/globals/HeadingTag';\nimport { Component, Element, Prop, h, State } from '@stencil/core';\n\nfunction userPrefersReducedMotion(): boolean {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n@Component({\n tag: 'pn-media-block',\n styleUrl: 'pn-media-block.scss',\n})\nexport class PnmediaBlock {\n @Prop() blockHeight: string = null;\n @Prop() imageSrc?: string = null;\n @Prop() imageSrcSmallScreenFormat?: string = undefined;\n @Prop() imageAltText?: string = '';\n @Prop() videoSrc?: string = null;\n @Prop() parallaxScroll: boolean = false;\n @Prop() showOverlayLayer: boolean = false;\n @Prop() customOverlayBackground?: string = null;\n @Prop() animateOverlayBackground: boolean = false;\n @Prop() scrollSnapBlock: boolean = false;\n @Prop() fixedBackground: boolean = false;\n @Prop() blockHeading?: string = null;\n @Prop() blockHeadingLevel?: string = 'h2';\n @Prop() blockPreamble?: string = null;\n @Prop() marginBottom?: boolean = false;\n\n @State() pnPlayOnScrollObserverOptions: IntersectionObserverInit = {\n root: document,\n threshold: 1,\n rootMargin: '220px 0px 220px 0px',\n };\n\n @State() calculatedBlockHeight: number;\n @State() hasButtonSlot: boolean = true;\n\n @Element() block: HTMLElement;\n\n get hasVideo() {\n if (this.videoSrc !== null && this.videoSrc !== 'undefined') {\n return true;\n }\n return false;\n }\n\n get hasImage() {\n if (this.imageSrc !== null && this.imageSrc !== 'undefined') {\n return true;\n }\n return false;\n }\n\n private observerScroll: IntersectionObserver;\n private observerSnap: IntersectionObserver;\n\n componentWillLoad() {\n this.hasButtonSlot = !!this.block.querySelector('[slot=\"cta-button\"]');\n }\n\n async componentDidLoad() {\n const scrollTrigger = document.getElementById('scroll-trigger');\n this.calculatedBlockHeight = this.block.offsetHeight;\n\n const overlayElement = this.block.querySelector('#mediaBlockOverlay') as HTMLElement;\n if (this.customOverlayBackground != null \|\| this.customOverlayBackground != 'undefined') {\n overlayElement.style.background = `${this.customOverlayBackground}`;\n }\n\n if (this.parallaxScroll) {\n this.observerScroll = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n window.addEventListener('scroll', this.handleScroll);\n } else {\n window.removeEventListener('scroll', this.handleScroll);\n }\n });\n },\n { rootMargin: `0px 0px` },\n );\n\n this.observerScroll.observe(scrollTrigger);\n }\n\n if (this.scrollSnapBlock) {\n this.observerSnap = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // The block is within 100px of the viewport, scroll it into view\n if (this.block instanceof HTMLElement) {\n setTimeout(() => {\n this.block.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }, 1000); // Adjust the delay as needed\n } else {\n console.error('this.block is not a valid HTMLElement');\n }\n }\n });\n },\n {\n root: document,\n rootMargin: '100px 0px 100px 0px',\n threshold: 0,\n },\n );\n\n this.observerSnap.observe(scrollTrigger);\n }\n }\n\n disconnectedCallback() {\n // Clean up the observer and event listener when the component is removed\n if (this.observerScroll) {\n this.observerScroll.disconnect();\n }\n if (this.observerSnap) {\n this.observerSnap.disconnect();\n }\n window.removeEventListener('scroll', this.handleScroll);\n }\n\n handleScroll = () => {\n const mediaBlockElement = this.block.firstElementChild as HTMLElement;\n const scrollTrigger = this.block.querySelector('#scroll-trigger') as HTMLElement;\n const videoPauseButton = this.block.querySelector('#overlayed-button-pause-video') as HTMLButtonElement;\n\n const scrollTriggerTop = scrollTrigger.getBoundingClientRect().top;\n const mediaBlockElementHeight = mediaBlockElement.offsetHeight;\n\n const scrollPosition = mediaBlockElementHeight - scrollTriggerTop;\n\n const parallaxSpeedContent = 0.3;\n const parallaxSpeedMedia = 0.2;\n\n const mediaContainer = this.block.querySelector('.media-block__media-container') as HTMLElement;\n const content = this.block.querySelector('.media-block__content-container') as HTMLElement;\n\n if (mediaContainer != null) {\n // Move the image or video at a slower speed\n mediaContainer.style.transform = `translate(0, ${scrollPosition * (0.1 + parallaxSpeedMedia)}px)`;\n\n if (videoPauseButton != null) {\n // Move the pause button up\n videoPauseButton.style.transform = `translate(0, ${-scrollPosition * (0.3 + parallaxSpeedMedia)}px)`;\n }\n }\n\n if (content) {\n // Move the content at a faster speed\n content.style.transform = `translate(0, ${scrollPosition * (0.5 + parallaxSpeedContent)}px)`;\n\n // Change the opacity based on the scroll position\n const opacity = Math.max(0, 1 - scrollPosition / 600);\n content.style.opacity = `${opacity}`;\n }\n };\n\n render() {\n const { showOverlayLayer, fixedBackground, blockHeight, scrollSnapBlock, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground, marginBottom } = this;\n\n const isVideo = hasVideo;\n const isImage = hasImage;\n\n const classes = [\n 'media-block',\n blockHeight ? `media-block--height-${blockHeight}` : '',\n showOverlayLayer ? 'media-block--with-overlay' : '',\n animateOverlayBackground ? `media-block--animate-overlay-background` : '',\n isVideo ? 'media-block--video' : '',\n scrollSnapBlock ? 'scroll-snap' : 'no-scroll-snap',\n fixedBackground ? 'media-block--fixed-background' : '',\n marginBottom ? 'media-block--margin-bottom' : '',\n ].join(' ');\n\n const pnPlayOnScrollObserverOptions: IntersectionObserverInit = {\n root: this.blockHeight === '100svh' ? this.block : null,\n threshold: [0, 0.5, 1], // Callback will be executed when 0%, 50%, and 100% of the target is visible\n };\n\n return (\n <div class={classes}>\n <div class=\"media-block__block-container\">\n <div class=\"media-block__media-container\">\n {isVideo ? (\n <pn-play-on-scroll show-overlay={this.showOverlayLayer} observerOptions={pnPlayOnScrollObserverOptions} video-src={this.videoSrc}></pn-play-on-scroll>\n ) : isImage ? (\n <picture>\n <source media=\"(min-width: 1400px)\" srcSet={this.imageSrc} />\n <source media=\"(min-width: 1224px)\" srcSet={this.imageSrc} />\n <source media=\"(min-width: 1140px)\" srcSet={this.imageSrc} />\n <source\n media=\"(min-width: 1023px)\"\n srcSet={this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc}\n />\n <source\n media=\"(min-width: 768px)\"\n srcSet={this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc}\n />\n <source\n media=\"(min-width: 500px)\"\n srcSet={this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc}\n />\n <img\n src={this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc}\n alt={this.imageAltText !== 'undefined' ? this.imageAltText : ''}\n role={this.imageAltText !== 'undefined' ? 'img' : 'presentation'}\n aria-hidden={this.imageAltText !== 'undefined' ? 'false' : 'true'}\n />\n </picture>\n ) : null}\n </div>\n\n {!isVideo && <div class=\"media-block__overlay-filter\" id=\"mediaBlockOverlay\"></div>}\n\n {(this.blockHeading \|\| this.blockPreamble) && (\n <div class=\"media-block__content-container\">\n {this.blockHeading && (\n <HeadingTag level={this.blockHeadingLevel} cssClass=\"media-block__block-heading\">\n {this.blockHeading}\n </HeadingTag>\n )}\n {this.blockPreamble && <p class=\"media-block__preamble\">{this.blockPreamble}</p>}\n {hasButtonSlot && (\n <div class=\"media-block__cta-link\">\n <slot name=\"cta-button\" />\n </div>\n )}\n </div>\n )}\n </div>\n\n <div id=\"scroll-trigger\"></div>\n </div>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"pn-media-block.js","sourceRoot":"","sources":["../../../../src/components/media/pn-media-block/pn-media-block.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Prop, h, State } from '@stencil/core';\n\nfunction userPrefersReducedMotion(): boolean {\n return window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n}\n\n@Component({\n tag: 'pn-media-block',\n styleUrl: 'pn-media-block.scss',\n})\nexport class PnmediaBlock {\n @Prop() blockHeight: string = null;\n @Prop() imageSrc?: string = null;\n @Prop() imageSrcSmallScreenFormat?: string = undefined;\n @Prop() imageAltText?: string = '';\n @Prop() videoSrc?: string = null;\n @Prop() parallaxScroll: boolean = false;\n @Prop() showOverlayLayer: boolean = false;\n @Prop() customOverlayBackground?: string = null;\n @Prop() animateOverlayBackground: boolean = false;\n @Prop() scrollSnapBlock: boolean = false;\n @Prop() fixedBackground: boolean = false;\n @Prop() blockHeading?: string = null;\n @Prop() blockHeadingLevel?: number = 2;\n @Prop() blockPreamble?: string = null;\n @Prop() marginBottom?: boolean = false;\n\n @State() pnPlayOnScrollObserverOptions: IntersectionObserverInit = {\n root: document,\n threshold: 1,\n rootMargin: '220px 0px 220px 0px',\n };\n\n @State() calculatedBlockHeight: number;\n @State() hasButtonSlot: boolean = true;\n\n @Element() block: HTMLElement;\n\n get hasVideo() {\n if (this.videoSrc !== null && this.videoSrc !== 'undefined') {\n return true;\n }\n return false;\n }\n\n get hasImage() {\n if (this.imageSrc !== null && this.imageSrc !== 'undefined') {\n return true;\n }\n return false;\n }\n\n private observerScroll: IntersectionObserver;\n private observerSnap: IntersectionObserver;\n\n componentWillLoad() {\n this.hasButtonSlot = !!this.block.querySelector('[slot=\"cta-button\"]');\n }\n\n async componentDidLoad() {\n const scrollTrigger = document.getElementById('scroll-trigger');\n this.calculatedBlockHeight = this.block.offsetHeight;\n\n const overlayElement = this.block.querySelector('#mediaBlockOverlay') as HTMLElement;\n if (this.customOverlayBackground != null \|\| this.customOverlayBackground != 'undefined') {\n overlayElement.style.background = `${this.customOverlayBackground}`;\n }\n\n if (this.parallaxScroll) {\n this.observerScroll = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n window.addEventListener('scroll', this.handleScroll);\n } else {\n window.removeEventListener('scroll', this.handleScroll);\n }\n });\n },\n { rootMargin: `0px 0px` },\n );\n\n this.observerScroll.observe(scrollTrigger);\n }\n\n if (this.scrollSnapBlock) {\n this.observerSnap = new IntersectionObserver(\n entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // The block is within 100px of the viewport, scroll it into view\n if (this.block instanceof HTMLElement) {\n setTimeout(() => {\n this.block.scrollIntoView({ behavior: 'smooth', block: 'start' });\n }, 1000); // Adjust the delay as needed\n } else {\n console.error('this.block is not a valid HTMLElement');\n }\n }\n });\n },\n {\n root: document,\n rootMargin: '100px 0px 100px 0px',\n threshold: 0,\n },\n );\n\n this.observerSnap.observe(scrollTrigger);\n }\n }\n\n disconnectedCallback() {\n // Clean up the observer and event listener when the component is removed\n if (this.observerScroll) {\n this.observerScroll.disconnect();\n }\n if (this.observerSnap) {\n this.observerSnap.disconnect();\n }\n window.removeEventListener('scroll', this.handleScroll);\n }\n\n handleScroll = () => {\n const mediaBlockElement = this.block.firstElementChild as HTMLElement;\n const scrollTrigger = this.block.querySelector('#scroll-trigger') as HTMLElement;\n const videoPauseButton = this.block.querySelector('#overlayed-button-pause-video') as HTMLButtonElement;\n\n const scrollTriggerTop = scrollTrigger.getBoundingClientRect().top;\n const mediaBlockElementHeight = mediaBlockElement.offsetHeight;\n\n const scrollPosition = mediaBlockElementHeight - scrollTriggerTop;\n\n const parallaxSpeedContent = 0.3;\n const parallaxSpeedMedia = 0.2;\n\n const mediaContainer = this.block.querySelector('.media-block__media-container') as HTMLElement;\n const content = this.block.querySelector('.media-block__content-container') as HTMLElement;\n\n if (mediaContainer != null) {\n // Move the image or video at a slower speed\n mediaContainer.style.transform = `translate(0, ${scrollPosition * (0.1 + parallaxSpeedMedia)}px)`;\n\n if (videoPauseButton != null) {\n // Move the pause button up\n videoPauseButton.style.transform = `translate(0, ${-scrollPosition * (0.3 + parallaxSpeedMedia)}px)`;\n }\n }\n\n if (content) {\n // Move the content at a faster speed\n content.style.transform = `translate(0, ${scrollPosition * (0.5 + parallaxSpeedContent)}px)`;\n\n // Change the opacity based on the scroll position\n const opacity = Math.max(0, 1 - scrollPosition / 600);\n content.style.opacity = `${opacity}`;\n }\n };\n\n render() {\n const { showOverlayLayer, fixedBackground, blockHeight, scrollSnapBlock, hasButtonSlot, hasVideo, hasImage, animateOverlayBackground, marginBottom } = this;\n const HeadingTag = `h${this.blockHeadingLevel ?? 2}`;\n const isVideo = hasVideo;\n const isImage = hasImage;\n\n const classes = [\n 'media-block',\n blockHeight ? `media-block--height-${blockHeight}` : '',\n showOverlayLayer ? 'media-block--with-overlay' : '',\n animateOverlayBackground ? `media-block--animate-overlay-background` : '',\n isVideo ? 'media-block--video' : '',\n scrollSnapBlock ? 'scroll-snap' : 'no-scroll-snap',\n fixedBackground ? 'media-block--fixed-background' : '',\n marginBottom ? 'media-block--margin-bottom' : '',\n ].join(' ');\n\n const pnPlayOnScrollObserverOptions: IntersectionObserverInit = {\n root: this.blockHeight === \"100svh\" ? this.block : null,\n threshold: [0, 0.5, 1], // Callback will be executed when 0%, 50%, and 100% of the target is visible\n };\n\n return (\n <div class={classes}>\n <div class=\"media-block__block-container\">\n <div class=\"media-block__media-container\">\n {isVideo ? (\n <pn-play-on-scroll show-overlay={this.showOverlayLayer} observerOptions={pnPlayOnScrollObserverOptions} video-src={this.videoSrc}></pn-play-on-scroll>\n ) : isImage ? (\n <picture>\n <source media=\"(min-width: 1400px)\" srcSet={this.imageSrc} />\n <source media=\"(min-width: 1224px)\" srcSet={this.imageSrc} />\n <source media=\"(min-width: 1140px)\" srcSet={this.imageSrc} />\n <source\n media=\"(min-width: 1023px)\"\n srcSet={this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc}\n />\n <source\n media=\"(min-width: 768px)\"\n srcSet={this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc}\n />\n <source\n media=\"(min-width: 500px)\"\n srcSet={this.imageSrcSmallScreenFormat && this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc}\n />\n <img\n src={this.imageSrcSmallScreenFormat !== 'undefined' ? this.imageSrcSmallScreenFormat : this.imageSrc}\n alt={this.imageAltText !== 'undefined' ? this.imageAltText : ''}\n role={this.imageAltText !== 'undefined' ? 'img' : 'presentation'}\n aria-hidden={this.imageAltText !== 'undefined' ? 'false' : 'true'}\n />\n </picture>\n ) : null}\n </div>\n\n {!isVideo && <div class=\"media-block__overlay-filter\" id=\"mediaBlockOverlay\"></div>}\n\n {(this.blockHeading \|\| this.blockPreamble) && (\n <div class=\"media-block__content-container\">\n {this.blockHeading && (\n <HeadingTag level={this.blockHeadingLevel} class=\"media-block__block-heading\">\n {this.blockHeading}\n </HeadingTag>\n )}\n {this.blockPreamble && <p class=\"media-block__preamble\">{this.blockPreamble}</p>}\n {hasButtonSlot && (\n <div class=\"media-block__cta-link\">\n <slot name=\"cta-button\" />\n </div>\n )}\n </div>\n )}\n </div>\n\n <div id=\"scroll-trigger\"></div>\n </div>\n );\n }\n}\n"]}