@postnord/pn-marketweb-components 4.0.4-test2 → 4.0.4

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

@@ -1,12 +1,12 @@
 import docs from "./pn-marketweb-siteheader-docs.json";
 import { createDocumentation } from "../../../globals/documentation/story";
-import { open_in_new, shop } from "pn-design-assets/pn-assets/icons";
+import { dashboard, open_in_new, shop, truck } 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: "padded",
+        layout: "fullscreen",
         docs: {
             description: {
                 story: textContent,
@@ -337,11 +337,38 @@ const TPLSiteHeaderTemplate = ({ ...args }) => {
     hide-login="${args.hideLogin}"
     search-placeholder="${args.placeholder}"
     hide-home-menu-item="${args.hideHomeMenuItem}">
-      <pn-button slot="header-bottom-button" href="http:www.google.se" small="true" icon='${open_in_new}'>${args.buttonText}</pn-button>
+      <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="siteheader-menu-top-button" href="http:www.google.se" small="true" icon='${open_in_new}'>${args.buttonText}</pn-button>
-      <pn-button slot="menu-footer-cta" 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-marketweb-siteheader>
-  </div>`;
+  </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>
+  `;
 };
 export const TPLSiteHeader = TPLSiteHeaderTemplate.bind({});
 TPLSiteHeader.args = {

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

@@ -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, 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"]}
+{"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"]}

package/collection/components/media/pn-media-block/pn-media-block.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-media-block .media-block .media-block__block-container {
   display: grid;
   overflow: hidden;

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

@@ -1,3 +1,4 @@
+import { HeadingTag } from "../../../globals/HeadingTag";
 import { h } from "@stencil/core";
 function userPrefersReducedMotion() {
     return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
@@ -16,7 +17,7 @@ export class PnmediaBlock {
         this.scrollSnapBlock = false;
         this.fixedBackground = false;
         this.blockHeading = null;
-        this.blockHeadingLevel = 2;
+        this.blockHeadingLevel = 'h2';
         this.blockPreamble = null;
         this.marginBottom = false;
         this.pnPlayOnScrollObserverOptions = {
@@ -127,7 +128,6 @@ 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: '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" })));
+        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" })));
     }
     static get is() { return "pn-media-block"; }
     static get originalStyleUrls() {
@@ -376,11 +376,11 @@ export class PnmediaBlock {
                 "defaultValue": "null"
             },
             "blockHeadingLevel": {
-                "type": "number",
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "number",
-                    "resolved": "number",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
@@ -391,7 +391,7 @@ export class PnmediaBlock {
                 },
                 "attribute": "block-heading-level",
                 "reflect": false,
-                "defaultValue": "2"
+                "defaultValue": "'h2'"
             },
             "blockPreamble": {
                 "type": "string",

package/collection/components/media/pn-media-block/pn-media-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"pn-media-block.js","sourceRoot":"","sources":["../../../../src/components/media/pn-media-block/pn-media-block.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEnE,SAAS,wBAAwB;IAC/B,OAAO,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;AACvE,CAAC;AAMD,MAAM,OAAO,YAAY;;2BACO,IAAI;wBACN,IAAI;yCACa,SAAS;4BACtB,EAAE;wBACN,IAAI;8BACE,KAAK;gCACH,KAAK;uCACE,IAAI;wCACH,KAAK;+BACd,KAAK;+BACL,KAAK;4BACR,IAAI;iCACC,CAAC;6BACL,IAAI;4BACJ,KAAK;6CAE6B;YACjE,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,CAAC;YACZ,UAAU,EAAE,qBAAqB;SAClC;;6BAGiC,IAAI;;IAE3B,KAAK,CAAc;IAE9B,IAAI,QAAQ;QACV,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE,CAAC;YAC5D,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,QAAQ;QACV,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE,CAAC;YAC5D,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,cAAc,CAAuB;IACrC,YAAY,CAAuB;IAE3C,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACzE,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;QAChE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;QAErD,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAgB,CAAC;QACrF,IAAI,IAAI,CAAC,uBAAuB,IAAI,IAAI,IAAI,IAAI,CAAC,uBAAuB,IAAI,WAAW,EAAE,CAAC;YACxF,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,GAAG,IAAI,CAAC,uBAAuB,EAAE,CAAC;QACtE,CAAC;QAED,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,GAAG,IAAI,oBAAoB,CAC5C,OAAO,CAAC,EAAE;gBACR,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;oBACtB,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;wBACzB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;oBACvD,CAAC;yBAAM,CAAC;wBACN,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;oBAC1D,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC,EACD,EAAE,UAAU,EAAE,SAAS,EAAE,CAC1B,CAAC;YAEF,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QAC7C,CAAC;QAED,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,YAAY,GAAG,IAAI,oBAAoB,CAC1C,OAAO,CAAC,EAAE;gBACR,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;oBACtB,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;wBACzB,iEAAiE;wBACjE,IAAI,IAAI,CAAC,KAAK,YAAY,WAAW,EAAE,CAAC;4BACtC,UAAU,CAAC,GAAG,EAAE;gCACd,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;4BACpE,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,6BAA6B;wBACzC,CAAC;6BAAM,CAAC;4BACN,OAAO,CAAC,KAAK,CAAC,uCAAuC,CAAC,CAAC;wBACzD,CAAC;oBACH,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC,EACD;gBACE,IAAI,EAAE,QAAQ;gBACd,UAAU,EAAE,qBAAqB;gBACjC,SAAS,EAAE,CAAC;aACb,CACF,CAAC;YAEF,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,yEAAyE;QACzE,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;QACnC,CAAC;QACD,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC;QACjC,CAAC;QACD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC1D,CAAC;IAED,YAAY,GAAG,GAAG,EAAE;QAClB,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAgC,CAAC;QACtE,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAgB,CAAC;QACjF,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,+BAA+B,CAAsB,CAAC;QAExG,MAAM,gBAAgB,GAAG,aAAa,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;QACnE,MAAM,uBAAuB,GAAG,iBAAiB,CAAC,YAAY,CAAC;QAE/D,MAAM,cAAc,GAAG,uBAAuB,GAAG,gBAAgB,CAAC;QAElE,MAAM,oBAAoB,GAAG,GAAG,CAAC;QACjC,MAAM,kBAAkB,GAAG,GAAG,CAAC;QAE/B,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,+BAA+B,CAAgB,CAAC;QAChG,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,iCAAiC,CAAgB,CAAC;QAE3F,IAAI,cAAc,IAAI,IAAI,EAAE,CAAC;YAC3B,4CAA4C;YAC5C,cAAc,CAAC,KAAK,CAAC,SAAS,GAAG,gBAAgB,cAAc,GAAG,CAAC,GAAG,GAAG,kBAAkB,CAAC,KAAK,CAAC;YAElG,IAAI,gBAAgB,IAAI,IAAI,EAAE,CAAC;gBAC7B,2BAA2B;gBAC3B,gBAAgB,CAAC,KAAK,CAAC,SAAS,GAAG,gBAAgB,CAAC,cAAc,GAAG,CAAC,GAAG,GAAG,kBAAkB,CAAC,KAAK,CAAC;YACvG,CAAC;QACH,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,qCAAqC;YACrC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,gBAAgB,cAAc,GAAG,CAAC,GAAG,GAAG,oBAAoB,CAAC,KAAK,CAAC;YAE7F,kDAAkD;YAClD,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,cAAc,GAAG,GAAG,CAAC,CAAC;YACtD,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,OAAO,EAAE,CAAC;QACvC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,EAAE,gBAAgB,EAAE,eAAe,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,wBAAwB,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;QAC5J,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,iBAAiB,IAAI,CAAC,EAAE,CAAC;QACrD,MAAM,OAAO,GAAG,QAAQ,CAAC;QACzB,MAAM,OAAO,GAAG,QAAQ,CAAC;QAEzB,MAAM,OAAO,GAAG;YACd,aAAa;YACb,WAAW,CAAC,CAAC,CAAC,uBAAuB,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE;YACvD,gBAAgB,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE;YACnD,wBAAwB,CAAC,CAAC,CAAC,yCAAyC,CAAC,CAAC,CAAC,EAAE;YACzE,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;YACnC,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB;YAClD,eAAe,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,EAAE;YACtD,YAAY,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE;SACjD,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAEZ,MAAM,6BAA6B,GAA6B;YAC9D,IAAI,EAAE,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;YACvD,SAAS,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAG,4EAA4E;SACtG,CAAC;QAEF,OAAO,CACL,4DAAK,KAAK,EAAE,OAAO;YACjB,4DAAK,KAAK,EAAC,8BAA8B;gBACvC,4DAAK,KAAK,EAAC,8BAA8B,IACtC,OAAO,CAAC,CAAC,CAAC,CACT,yCAAiC,IAAI,CAAC,gBAAgB,EAAE,eAAe,EAAE,6BAA6B,eAAa,IAAI,CAAC,QAAQ,GAAsB,CACvJ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CACZ;oBACE,cAAQ,KAAK,EAAC,qBAAqB,EAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAI;oBAC7D,cAAQ,KAAK,EAAC,qBAAqB,EAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAI;oBAC7D,cAAQ,KAAK,EAAC,qBAAqB,EAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAI;oBAC7D,cACE,KAAK,EAAC,qBAAqB,EAC3B,MAAM,EAAE,IAAI,CAAC,yBAAyB,IAAI,IAAI,CAAC,yBAAyB,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,GACzI;oBACF,cACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,yBAAyB,IAAI,IAAI,CAAC,yBAAyB,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,GACzI;oBACF,cACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,yBAAyB,IAAI,IAAI,CAAC,yBAAyB,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,GACzI;oBACF,WACE,GAAG,EAAE,IAAI,CAAC,yBAAyB,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EACpG,GAAG,EAAE,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAC/D,IAAI,EAAE,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,iBACnD,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,GACjE,CACM,CACX,CAAC,CAAC,CAAC,IAAI,CACJ;gBAEL,CAAC,OAAO,IAAI,4DAAK,KAAK,EAAC,6BAA6B,EAAC,EAAE,EAAC,mBAAmB,GAAO;gBAElF,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,CAC5C,4DAAK,KAAK,EAAC,gCAAgC;oBACxC,IAAI,CAAC,YAAY,IAAI,CACpB,EAAC,UAAU,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,KAAK,EAAC,4BAA4B,IAC1E,IAAI,CAAC,YAAY,CACP,CACd;oBACA,IAAI,CAAC,aAAa,IAAI,0DAAG,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,aAAa,CAAK;oBAC/E,aAAa,IAAI,CAChB,4DAAK,KAAK,EAAC,uBAAuB;wBAChC,6DAAM,IAAI,EAAC,YAAY,GAAG,CACtB,CACP,CACG,CACP,CACG;YAEN,4DAAK,EAAE,EAAC,gBAAgB,GAAO,CAC3B,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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"]}
+{"version":3,"file":"pn-media-block.js","sourceRoot":"","sources":["../../../../src/components/media/pn-media-block/pn-media-block.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEnE,SAAS,wBAAwB;IAC/B,OAAO,MAAM,CAAC,UAAU,CAAC,kCAAkC,CAAC,CAAC,OAAO,CAAC;AACvE,CAAC;AAMD,MAAM,OAAO,YAAY;;2BACO,IAAI;wBACN,IAAI;yCACa,SAAS;4BACtB,EAAE;wBACN,IAAI;8BACE,KAAK;gCACH,KAAK;uCACE,IAAI;wCACH,KAAK;+BACd,KAAK;+BACL,KAAK;4BACR,IAAI;iCACC,IAAI;6BACR,IAAI;4BACJ,KAAK;6CAE6B;YACjE,IAAI,EAAE,QAAQ;YACd,SAAS,EAAE,CAAC;YACZ,UAAU,EAAE,qBAAqB;SAClC;;6BAGiC,IAAI;;IAE3B,KAAK,CAAc;IAE9B,IAAI,QAAQ;QACV,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE,CAAC;YAC5D,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAED,IAAI,QAAQ;QACV,IAAI,IAAI,CAAC,QAAQ,KAAK,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,WAAW,EAAE,CAAC;YAC5D,OAAO,IAAI,CAAC;QACd,CAAC;QACD,OAAO,KAAK,CAAC;IACf,CAAC;IAEO,cAAc,CAAuB;IACrC,YAAY,CAAuB;IAE3C,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACzE,CAAC;IAED,KAAK,CAAC,gBAAgB;QACpB,MAAM,aAAa,GAAG,QAAQ,CAAC,cAAc,CAAC,gBAAgB,CAAC,CAAC;QAChE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC;QAErD,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,oBAAoB,CAAgB,CAAC;QACrF,IAAI,IAAI,CAAC,uBAAuB,IAAI,IAAI,IAAI,IAAI,CAAC,uBAAuB,IAAI,WAAW,EAAE,CAAC;YACxF,cAAc,CAAC,KAAK,CAAC,UAAU,GAAG,GAAG,IAAI,CAAC,uBAAuB,EAAE,CAAC;QACtE,CAAC;QAED,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,GAAG,IAAI,oBAAoB,CAC5C,OAAO,CAAC,EAAE;gBACR,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;oBACtB,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;wBACzB,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;oBACvD,CAAC;yBAAM,CAAC;wBACN,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;oBAC1D,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC,EACD,EAAE,UAAU,EAAE,SAAS,EAAE,CAC1B,CAAC;YAEF,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QAC7C,CAAC;QAED,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,YAAY,GAAG,IAAI,oBAAoB,CAC1C,OAAO,CAAC,EAAE;gBACR,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE;oBACtB,IAAI,KAAK,CAAC,cAAc,EAAE,CAAC;wBACzB,iEAAiE;wBACjE,IAAI,IAAI,CAAC,KAAK,YAAY,WAAW,EAAE,CAAC;4BACtC,UAAU,CAAC,GAAG,EAAE;gCACd,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,CAAC,CAAC;4BACpE,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,6BAA6B;wBACzC,CAAC;6BAAM,CAAC;4BACN,OAAO,CAAC,KAAK,CAAC,uCAAuC,CAAC,CAAC;wBACzD,CAAC;oBACH,CAAC;gBACH,CAAC,CAAC,CAAC;YACL,CAAC,EACD;gBACE,IAAI,EAAE,QAAQ;gBACd,UAAU,EAAE,qBAAqB;gBACjC,SAAS,EAAE,CAAC;aACb,CACF,CAAC;YAEF,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,aAAa,CAAC,CAAC;QAC3C,CAAC;IACH,CAAC;IAED,oBAAoB;QAClB,yEAAyE;QACzE,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACxB,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,CAAC;QACnC,CAAC;QACD,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACtB,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,CAAC;QACjC,CAAC;QACD,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;IAC1D,CAAC;IAED,YAAY,GAAG,GAAG,EAAE;QAClB,MAAM,iBAAiB,GAAG,IAAI,CAAC,KAAK,CAAC,iBAAgC,CAAC;QACtE,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAgB,CAAC;QACjF,MAAM,gBAAgB,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,+BAA+B,CAAsB,CAAC;QAExG,MAAM,gBAAgB,GAAG,aAAa,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;QACnE,MAAM,uBAAuB,GAAG,iBAAiB,CAAC,YAAY,CAAC;QAE/D,MAAM,cAAc,GAAG,uBAAuB,GAAG,gBAAgB,CAAC;QAElE,MAAM,oBAAoB,GAAG,GAAG,CAAC;QACjC,MAAM,kBAAkB,GAAG,GAAG,CAAC;QAE/B,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,+BAA+B,CAAgB,CAAC;QAChG,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,aAAa,CAAC,iCAAiC,CAAgB,CAAC;QAE3F,IAAI,cAAc,IAAI,IAAI,EAAE,CAAC;YAC3B,4CAA4C;YAC5C,cAAc,CAAC,KAAK,CAAC,SAAS,GAAG,gBAAgB,cAAc,GAAG,CAAC,GAAG,GAAG,kBAAkB,CAAC,KAAK,CAAC;YAElG,IAAI,gBAAgB,IAAI,IAAI,EAAE,CAAC;gBAC7B,2BAA2B;gBAC3B,gBAAgB,CAAC,KAAK,CAAC,SAAS,GAAG,gBAAgB,CAAC,cAAc,GAAG,CAAC,GAAG,GAAG,kBAAkB,CAAC,KAAK,CAAC;YACvG,CAAC;QACH,CAAC;QAED,IAAI,OAAO,EAAE,CAAC;YACZ,qCAAqC;YACrC,OAAO,CAAC,KAAK,CAAC,SAAS,GAAG,gBAAgB,cAAc,GAAG,CAAC,GAAG,GAAG,oBAAoB,CAAC,KAAK,CAAC;YAE7F,kDAAkD;YAClD,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,GAAG,cAAc,GAAG,GAAG,CAAC,CAAC;YACtD,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,OAAO,EAAE,CAAC;QACvC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM;QACJ,MAAM,EAAE,gBAAgB,EAAE,eAAe,EAAE,WAAW,EAAE,eAAe,EAAE,aAAa,EAAE,QAAQ,EAAE,QAAQ,EAAE,wBAAwB,EAAE,YAAY,EAAE,GAAG,IAAI,CAAC;QAE5J,MAAM,OAAO,GAAG,QAAQ,CAAC;QACzB,MAAM,OAAO,GAAG,QAAQ,CAAC;QAEzB,MAAM,OAAO,GAAG;YACd,aAAa;YACb,WAAW,CAAC,CAAC,CAAC,uBAAuB,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE;YACvD,gBAAgB,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE;YACnD,wBAAwB,CAAC,CAAC,CAAC,yCAAyC,CAAC,CAAC,CAAC,EAAE;YACzE,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE;YACnC,eAAe,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB;YAClD,eAAe,CAAC,CAAC,CAAC,+BAA+B,CAAC,CAAC,CAAC,EAAE;YACtD,YAAY,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,EAAE;SACjD,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QAEZ,MAAM,6BAA6B,GAA6B;YAC9D,IAAI,EAAE,IAAI,CAAC,WAAW,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI;YACvD,SAAS,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,4EAA4E;SACrG,CAAC;QAEF,OAAO,CACL,4DAAK,KAAK,EAAE,OAAO;YACjB,4DAAK,KAAK,EAAC,8BAA8B;gBACvC,4DAAK,KAAK,EAAC,8BAA8B,IACtC,OAAO,CAAC,CAAC,CAAC,CACT,yCAAiC,IAAI,CAAC,gBAAgB,EAAE,eAAe,EAAE,6BAA6B,eAAa,IAAI,CAAC,QAAQ,GAAsB,CACvJ,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,CACZ;oBACE,cAAQ,KAAK,EAAC,qBAAqB,EAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAI;oBAC7D,cAAQ,KAAK,EAAC,qBAAqB,EAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAI;oBAC7D,cAAQ,KAAK,EAAC,qBAAqB,EAAC,MAAM,EAAE,IAAI,CAAC,QAAQ,GAAI;oBAC7D,cACE,KAAK,EAAC,qBAAqB,EAC3B,MAAM,EAAE,IAAI,CAAC,yBAAyB,IAAI,IAAI,CAAC,yBAAyB,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,GACzI;oBACF,cACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,yBAAyB,IAAI,IAAI,CAAC,yBAAyB,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,GACzI;oBACF,cACE,KAAK,EAAC,oBAAoB,EAC1B,MAAM,EAAE,IAAI,CAAC,yBAAyB,IAAI,IAAI,CAAC,yBAAyB,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,GACzI;oBACF,WACE,GAAG,EAAE,IAAI,CAAC,yBAAyB,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,yBAAyB,CAAC,CAAC,CAAC,IAAI,CAAC,QAAQ,EACpG,GAAG,EAAE,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAC/D,IAAI,EAAE,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,cAAc,iBACnD,IAAI,CAAC,YAAY,KAAK,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,GACjE,CACM,CACX,CAAC,CAAC,CAAC,IAAI,CACJ;gBAEL,CAAC,OAAO,IAAI,4DAAK,KAAK,EAAC,6BAA6B,EAAC,EAAE,EAAC,mBAAmB,GAAO;gBAElF,CAAC,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,aAAa,CAAC,IAAI,CAC5C,4DAAK,KAAK,EAAC,gCAAgC;oBACxC,IAAI,CAAC,YAAY,IAAI,CACpB,EAAC,UAAU,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,QAAQ,EAAC,4BAA4B,IAC7E,IAAI,CAAC,YAAY,CACP,CACd;oBACA,IAAI,CAAC,aAAa,IAAI,0DAAG,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,aAAa,CAAK;oBAC/E,aAAa,IAAI,CAChB,4DAAK,KAAK,EAAC,uBAAuB;wBAChC,6DAAM,IAAI,EAAC,YAAY,GAAG,CACtB,CACP,CACG,CACP,CACG;YAEN,4DAAK,EAAE,EAAC,gBAAgB,GAAO,CAC3B,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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"]}

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

@@ -1,4 +1,4 @@
-import docs from "./pn-media-block-docs.json";
+import docs from './pn-media-block-docs.json';
 
 export default {
   title: 'Components/Media/Media Block',
@@ -21,7 +21,7 @@ export default {
     scrollSnapBlock: { type: 'boolean' },
     blockHeading: { type: 'string' },
     blockHeadingLevel: {
-      options: ['1', '2', '3', '4', '5', '6'],
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
       control: { type: 'select' },
     },
     blockPreamble: { control: 'text', type: 'string' },
@@ -63,110 +63,110 @@ Default.args = {
   scrollSnapBlock: false,
   fixedBackground: false,
   marginBottom: false,
-  blockHeadingLevel: 2,
+  blockHeadingLevel: 'h2',
   blockHeading: 'Maximize your e-commerce potential',
   blockPreamble: 'Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.',
 };
 
 export const FixedBackground = Template.bind({});
 FixedBackground.args = {
-  blockHeight : '100svh',
-  imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  showOverlayLayer : true,
-  scrollSnapBlock : false,
-  fixedBackground : true,
-  blockHeading: "Maximize your e-commerce potential",
-  blockHeadingLevel: 2,
+  blockHeight: '100svh',
+  imageSrc: 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
+  showOverlayLayer: true,
+  scrollSnapBlock: false,
+  fixedBackground: true,
+  blockHeading: 'Maximize your e-commerce potential',
+  blockHeadingLevel: 'h2',
   blockPreamble: 'Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.',
 };
 
 export const CompactHeightBlock = Template.bind({});
 CompactHeightBlock.args = {
-  blockHeight : '65svh',
-  imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  showOverlayLayer : true,
-  scrollSnapBlock : false,
-  fixedBackground : true,
-  blockHeading: "Maximize your e-commerce potential",
-  blockHeadingLevel: 2,
+  blockHeight: '65svh',
+  imageSrc: 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
+  showOverlayLayer: true,
+  scrollSnapBlock: false,
+  fixedBackground: true,
+  blockHeading: 'Maximize your e-commerce potential',
+  blockHeadingLevel: 'h2',
   blockPreamble: 'Enhance your customers shopping journey.',
 };
 
 export const DynamicHeight = Template.bind({});
 DynamicHeight.args = {
-  blockHeight : 'dynamic',
-  imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  showOverlayLayer : true,
-  scrollSnapBlock : false,
-  fixedBackground : false,
-  blockHeading: "Maximize your e-commerce potential and go Beyond your limits  and go Beyond your limits  and go Beyond your limits",
-  blockHeadingLevel: 2,
+  blockHeight: 'dynamic',
+  imageSrc: 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
+  showOverlayLayer: true,
+  scrollSnapBlock: false,
+  fixedBackground: false,
+  blockHeading: 'Maximize your e-commerce potential and go Beyond your limits  and go Beyond your limits  and go Beyond your limits',
+  blockHeadingLevel: 'h2',
   blockPreamble:
     'Enhance your customers shopping journey. Enhance your customers shopping journey. Enhance your customers shopping journey. Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace. And increase the buiseness with accelerating pase.Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace. And increase the buiseness with accelerating pase. Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace. And increase the buiseness with accelerating pase. Enhance your customers shopping journey. Enhance your customers shopping journey. Enhance your customers shopping journey. Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace. And increase the buiseness with accelerating pase.Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace. And increase the buiseness with accelerating pase. Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace. And increase the buiseness with accelerating pase.',
 };
 
 export const MultipleSrc = Template.bind({});
 MultipleSrc.args = {
-  blockHeight : '100svh',
-  imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  imageSrcSmallScreenFormat : 'https://picsum.photos/1200/1200',
-  imageAltText : 'This is an image',
-  showOverlayLayer : true,
-  scrollSnapBlock : false,
-  fixedBackground : false,
-  blockHeading: "Maximize your e-commerce potential",
-  blockHeadingLevel: 2,
+  blockHeight: '100svh',
+  imageSrc: 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
+  imageSrcSmallScreenFormat: 'https://picsum.photos/1200/1200',
+  imageAltText: 'This is an image',
+  showOverlayLayer: true,
+  scrollSnapBlock: false,
+  fixedBackground: false,
+  blockHeading: 'Maximize your e-commerce potential',
+  blockHeadingLevel: 'h2',
   blockPreamble: 'Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.',
 };
 
 export const ParallaxBackground = Template.bind({});
 ParallaxBackground.args = {
-  blockHeight : '100svh',
-  imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  showOverlayLayer : true,
-  scrollSnapBlock : false,
-  fixedBackground : false,
-  blockHeading: "Maximize your e-commerce potential",
-  blockHeadingLevel: 2,
+  blockHeight: '100svh',
+  imageSrc: 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
+  showOverlayLayer: true,
+  scrollSnapBlock: false,
+  fixedBackground: false,
+  blockHeading: 'Maximize your e-commerce potential',
+  blockHeadingLevel: 'h2',
   blockPreamble: 'Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.',
 };
 
 export const ScrollSnap = Template.bind({});
 ScrollSnap.args = {
-  blockHeight : '100svh',
-  imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  showOverlayLayer : true,
-  scrollSnapBlock : true,
-  fixedBackground : false,
-  blockHeading: "Maximize your e-commerce potential",
-  blockHeadingLevel: 2,
+  blockHeight: '100svh',
+  imageSrc: 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
+  showOverlayLayer: true,
+  scrollSnapBlock: true,
+  fixedBackground: false,
+  blockHeading: 'Maximize your e-commerce potential',
+  blockHeadingLevel: 'h2',
   blockPreamble: 'Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.',
 };
 
 export const CustomOverlayBackground = Template.bind({});
 CustomOverlayBackground.args = {
-  blockHeight : '100svh',
-  imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  showOverlayLayer : true,
-  customOverlayBackground : "linear-gradient(180deg, #0d234b, transparent)",
-  scrollSnapBlock : true,
-  fixedBackground : true,
-  blockHeading: "Maximize your e-commerce potential",
-  blockHeadingLevel: 2,
+  blockHeight: '100svh',
+  imageSrc: 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
+  showOverlayLayer: true,
+  customOverlayBackground: 'linear-gradient(180deg, #0d234b, transparent)',
+  scrollSnapBlock: true,
+  fixedBackground: true,
+  blockHeading: 'Maximize your e-commerce potential',
+  blockHeadingLevel: 'h2',
   blockPreamble: 'Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.',
 };
 
 export const AnimateOverlayBackground = Template.bind({});
 AnimateOverlayBackground.args = {
-  blockHeight : '100svh',
-  imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  showOverlayLayer : true,
-  customOverlayBackground : "linear-gradient(90deg, rgba(131,58,180,0.8253676470588236) 0%, rgba(253,29,29,0.1783088235294118) 50%, rgba(252,176,69,0.727328431372549) 100%)",
-  animateOverlayBackground : true,
-  scrollSnapBlock : true,
-  fixedBackground : true,
-  blockHeading: "Maximize your e-commerce potential",
-  blockHeadingLevel: 2,
+  blockHeight: '100svh',
+  imageSrc: 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
+  showOverlayLayer: true,
+  customOverlayBackground: 'linear-gradient(90deg, rgba(131,58,180,0.8253676470588236) 0%, rgba(253,29,29,0.1783088235294118) 50%, rgba(252,176,69,0.727328431372549) 100%)',
+  animateOverlayBackground: true,
+  scrollSnapBlock: true,
+  fixedBackground: true,
+  blockHeading: 'Maximize your e-commerce potential',
+  blockHeadingLevel: 'h2',
   blockPreamble: 'Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.',
 };
 
@@ -200,12 +200,12 @@ const TemplateWithLink = ({ ...args }) => {
 
 export const WithLink = TemplateWithLink.bind({});
 WithLink.args = {
-  blockHeight : '100svh',
-  imageSrc : 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
-  fixedBackground : true,
-  showOverlayLayer : true,
-  blockHeading: "Maximize your e-commerce potential",
-  blockHeadingLevel: 2,
+  blockHeight: '100svh',
+  imageSrc: 'https://i.redd.it/connections-5160x2160-v0-o914e0x2jkfc1.png?s=5c46aceebe337175ad192d5edb0ed9f66fd3e130',
+  fixedBackground: true,
+  showOverlayLayer: true,
+  blockHeading: 'Maximize your e-commerce potential',
+  blockHeadingLevel: 'h2',
   blockPreamble: 'Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.',
   blockLinkText: 'Request a quote',
   blockLinkUrl: '#google',
@@ -237,11 +237,11 @@ const TemplateVideo = ({ ...args }) => {
 
 export const Video = TemplateVideo.bind({});
 Video.args = {
-  blockHeight : '100svh',
-  videoSrc : 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
-  fixedBackground : false,
-  showOverlayLayer : true,
-  blockHeading: "Maximize your e-commerce potential",
-  blockHeadingLevel: 2,
+  blockHeight: '100svh',
+  videoSrc: 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4',
+  fixedBackground: false,
+  showOverlayLayer: true,
+  blockHeading: 'Maximize your e-commerce potential',
+  blockHeadingLevel: 'h2',
   blockPreamble: 'Enhance your customers shopping journey. We have simplified delivery solutions for a global marketplace.',
 };