@postnord/pn-marketweb-components 3.5.1 → 3.5.3

package/collection/components/layout-components/pn-marketweb-siteheader/pn-marketweb-siteheader.css

@@ -49,6 +49,11 @@ 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;
@@ -197,7 +202,6 @@ pn-marketweb-siteheader pn-button button .pn-button-bg:after {
 
 .siteheader-menu {
   max-width: 100%;
-  width: 100%;
   overflow: visible;
   overflow-x: clip;
 }
@@ -435,6 +439,11 @@ 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;
@@ -648,10 +657,12 @@ 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: 415px) {
+@media screen and (max-width: 768px) {
   .header-wrapper[data-header-theme=tpl] > pn-marketweb-siteheader > header .siteheader-menu-footer [slot=menu-footer-cta] {
-    display: block;
+    display: flex;
     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;
@@ -664,12 +675,12 @@ pn-marketweb-siteheader pn-button button .pn-button-bg:after {
     fill: #0d234b;
   }
 }
-@media screen and (max-width: 415px) and (min-width: 48em) {
+@media screen and (max-width: 768px) 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: 415px) {
+@media screen and (max-width: 768px) {
   .header-wrapper[data-header-theme=tpl] > pn-marketweb-siteheader > header .siteheader-menu-footer [slot=menu-footer-cta] a:hover {
     color: #ffffff;
   }
@@ -680,13 +691,16 @@ 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 #fff, 0 0 0 0.4rem #00a0d6;
+    box-shadow: 0 0 0 0.2rem #ffffff, 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/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/components/alert_exclamation_circle.js

@@ -0,0 +1,6 @@
+const icon = '<svg class="pn-icon-svg" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><path fill="#000" fill-rule="evenodd" d="M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0m8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m1.4 5.497-.334 5.005a1.069 1.069 0 0 1-2.133 0L10.6 7.497a1.403 1.403 0 1 1 2.8 0M12 18a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3" clip-rule="evenodd"/></svg>';
+const alert_exclamation_circle = icon;
+
+export { alert_exclamation_circle as a };
+
+//# sourceMappingURL=alert_exclamation_circle.js.map

package/components/alert_exclamation_circle.js.map

@@ -0,0 +1 @@
+{"file":"alert_exclamation_circle.js","mappings":"AAAA,MAAM,IAAI,GAAG,yYAAyY,CAAC;AAC3Y,MAAC,wBAAwB,GAAG;;;;","names":[],"sources":["node_modules/pn-design-assets/pn-assets/icons/alert_exclamation_circle.js"],"sourcesContent":["const icon = '<svg class=\"pn-icon-svg\" xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\"><path fill=\"#000\" fill-rule=\"evenodd\" d=\"M4 12a8 8 0 1 1 16 0 8 8 0 0 1-16 0m8-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m1.4 5.497-.334 5.005a1.069 1.069 0 0 1-2.133 0L10.6 7.497a1.403 1.403 0 1 1 2.8 0M12 18a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3\" clip-rule=\"evenodd\"/></svg>';\nexport const alert_exclamation_circle = icon;\nexport const alertExclamationCircle = icon;\n"],"version":3}

package/components/pn-address-autofill.js

@@ -1,22 +1,26 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 import { F as FetchHelper, M as MarketWebContextService } from './FetchHelper.js';
 import { d as debounce } from './index2.js';
+import { a as alert_exclamation_circle } from './alert_exclamation_circle.js';
 
 const translations = {
     'sv': {
         errorEmpty: 'Får inte vara tom',
         errorPostalCode: 'Kan inte hitta postkoden',
-        required: 'obligatoriskt'
+        required: 'obligatoriskt',
+        addressNotFound: 'Adressen hittades inte'
     },
     'en': {
         errorEmpty: 'Cannot be empty',
         errorPostalCode: 'Could not find postalcode',
-        required: 'required'
+        required: 'required',
+        addressNotFound: 'Address not found'
     },
     'da': {
         errorEmpty: 'Kan ikke være tom',
         errorPostalCode: 'Kunne ikke finde postnummeret',
-        required: 'påkrævet'
+        required: 'påkrævet',
+        addressNotFound: 'Adressen blev ikke fundet'
     },
     'no': {
         errorEmpty: 'Cannot be empty',
@@ -69,7 +73,7 @@ const translations = {
     },
 };
 
-const pnAddressAutofillCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-address-autofill pn-marketweb-input{width:50%}pn-address-autofill .input-container-row{display:flex;gap:1rem;margin-bottom:1rem}pn-address-autofill .label-container{color:#5e554a;font-size:0.875em;display:flex;justify-content:space-between;align-items:flex-end}pn-address-autofill .autocomplete-items{position:absolute;border-radius:0.8rem;border:0.1rem solid #5e554a;width:100%;max-height:30rem;overflow-y:auto}pn-address-autofill .autocomplete-items:hover,pn-address-autofill .autocomplete-items :focus{border:0.1rem solid #00a0d6}pn-address-autofill .autocomplete-items div{padding:1.6rem;cursor:pointer;background-color:#fff;border:0.1rem solid transparent}pn-address-autofill .autocomplete-items div:first-child{border-radius:0.8rem 0.8rem 0 0}pn-address-autofill .autocomplete-items div:last-child{border-radius:0 0 0.8rem 0.8rem}pn-address-autofill .autocomplete-items div:hover{background-color:#e0f8ff}pn-address-autofill .autocomplete-items .autocomplete-active{background-color:#e0f8ff}pn-address-autofill .autocomplete-items:empty{display:none}pn-address-autofill pn-input{max-width:25rem;width:100%}";
+const pnAddressAutofillCss = "pn-button-dropdown .pn-button-dropdown>pn-button>.pn-button{min-height:initial}pn-address-autofill{display:flex;flex-direction:column;width:50rem}pn-address-autofill pn-input{width:50%}pn-address-autofill .input-container-row{display:flex;gap:1rem;margin-bottom:1rem}pn-address-autofill .label-container{color:#5e554a;font-size:0.875em;display:flex;justify-content:space-between;align-items:flex-end}pn-address-autofill .autocomplete-items{position:absolute;border-radius:0.8rem;border:0.1rem solid #5e554a;width:100%;max-height:30rem;overflow-y:auto}pn-address-autofill .autocomplete-items:hover,pn-address-autofill .autocomplete-items :focus{border:0.1rem solid #00a0d6}pn-address-autofill .autocomplete-items div{padding:1.6rem;cursor:pointer;background-color:#fff;border:0.1rem solid transparent}pn-address-autofill .autocomplete-items div:first-child{border-radius:0.8rem 0.8rem 0 0}pn-address-autofill .autocomplete-items div:last-child{border-radius:0 0 0.8rem 0.8rem}pn-address-autofill .autocomplete-items div:hover{background-color:#e0f8ff}pn-address-autofill .autocomplete-items .autocomplete-active{background-color:#e0f8ff}pn-address-autofill .autocomplete-items:empty{display:none}pn-address-autofill pn-input{max-width:25rem;width:100%}";
 const PnAddressAutofillStyle0 = pnAddressAutofillCss;
 
 const PnAddressAutofill$1 = /*@__PURE__*/ proxyCustomElement(class PnAddressAutofill extends HTMLElement {
@@ -87,11 +91,12 @@ const PnAddressAutofill$1 = /*@__PURE__*/ proxyCustomElement(class PnAddressAuto
         this.cityProps = null;
         this.streetAddressProps = null;
         this.streetNumberProps = null;
+        this.addressNotFoundError = null;
         this.postalCode = null;
         this.city = null;
         this.streetAddress = null;
         this.streetNumber = null;
-        this.validAddress = false;
+        this.validAddress = true;
         this.translation = undefined;
         this.postalCodeRequiredLabel = null;
         this.streetRequiredLabel = null;
@@ -108,7 +113,6 @@ const PnAddressAutofill$1 = /*@__PURE__*/ proxyCustomElement(class PnAddressAuto
     streetNumberInputField = null;
     pnInputHiddenValue = null;
     endpointPath = '/api/location/get-by-postalcode';
-    locationEndpointPath = '/api/location/get-by-location';
     _postalCodeProps = null;
     _cityProps = null;
     _streetAddressProps = null;
@@ -170,15 +174,15 @@ const PnAddressAutofill$1 = /*@__PURE__*/ proxyCustomElement(class PnAddressAuto
     }
     addEventHandlers() {
         let debounceTimeout;
-        this.postalCodeInputField.addEventListener('keyup', (e) => {
+        this.postalCodeInputField.addEventListener('input', (e) => {
             this.isLoading = true;
             clearTimeout(debounceTimeout);
             debounceTimeout = window.setTimeout(() => {
                 this.fetchPostalCodeData(e);
             }, 300);
         });
-        this.streetAddressInputField.addEventListener('blur', this.handleAddressDropdown.bind(this));
-        this.streetNumberInputField.addEventListener('blur', this.handleAddressDropdown.bind(this));
+        this.streetNumberInputField.addEventListener('input', debounce(this.fetchAddress.bind(this), 300));
+        this.streetAddressInputField.addEventListener('keydown', () => { this.streetNumberInputField.value = ''; });
         this.addFormFieldEvent();
     }
     addFormFieldEvent() {
@@ -218,6 +222,11 @@ const PnAddressAutofill$1 = /*@__PURE__*/ proxyCustomElement(class PnAddressAuto
         this.resetFields();
         this.postalCode = postalCode;
         var data = (await this.fetchPostalCode(postalCode));
+        if (!data || !data.addresses) {
+            this.city = null;
+            this.isLoading = true;
+            return;
+        }
         const cityInfo = data.addresses?.find(addr => addr.postalCode === postalCode);
         this.city = cityInfo?.city || null;
         this.isLoading = false;
@@ -241,24 +250,6 @@ const PnAddressAutofill$1 = /*@__PURE__*/ proxyCustomElement(class PnAddressAuto
             return null;
         }
     }
-    async fetchAddress() {
-        const endpointBase = this.endpoint.endsWith('/')
-            ? this.endpoint.slice(0, -1)
-            : this.endpoint;
-        //merge street and number
-        var locationSearch = this.streetAddress + ' ' + this.streetNumber;
-        //this is Air search api which will return the address, without postcode, postalcode verification is done in handleAddressDropdown
-        const fetchUrl = `${endpointBase}${this.locationEndpointPath}?countryCode=${this.countryCode}&query=${locationSearch}`;
-        try {
-            const data = await this.fetchHelper.fetchJson(fetchUrl, { mode: 'cors' }, this.cache);
-            return data;
-        }
-        catch (error) {
-            console.error("Error fetching address data:", error);
-            this.isLoading = true;
-            return null;
-        }
-    }
     resetFields() {
         this.streetAddressInputField.value = '';
         this.streetNumberInputField.value = '';
@@ -271,61 +262,45 @@ const PnAddressAutofill$1 = /*@__PURE__*/ proxyCustomElement(class PnAddressAuto
             element.removeAttribute('error');
         });
     }
-    async handleAddressDropdown(e) {
-        const streetAddress = this.streetAddressInputField.value;
-        const streetNumber = this.streetNumberInputField.value;
-        //no data fetching if both the inputs are empty
-        if (!streetAddress && !streetNumber) {
+    async fetchAddress() {
+        const streetAddress = this.streetAddressInputField.value.trim();
+        const streetNumber = this.streetNumberInputField.value.trim();
+        if (!streetAddress || !streetNumber) {
+            this.validAddress = false;
             return;
         }
-        //skip the data fetch if there is no change in input
+        const endpointBase = this.endpoint.endsWith('/')
+            ? this.endpoint.slice(0, -1)
+            : this.endpoint;
+        const fetchUrl = `${endpointBase}${this.endpointPath}?countryCode=${this.countryCode}&postalCode=${this.postalCodeInputField.value}&address=${streetAddress + " " + streetNumber}`;
+        try {
+            const data = await this.fetchHelper.fetchJson(fetchUrl, { mode: 'cors' }, this.cache);
+            if (!data?.addresses?.length) {
+                this.validAddress = false;
+            }
+            else {
+                const inputStreetAddress = this.normalizeChar(streetAddress);
+                const inputStreetNumber = this.normalizeChar(streetNumber);
+                const addressFound = data.addresses.some(addr => this.normalizeChar(addr.street) === inputStreetAddress &&
+                    this.normalizeChar(addr.houseNumber) === inputStreetNumber &&
+                    addr.postalCode === this.postalCodeInputField.value);
+                this.validAddress = addressFound;
+            }
+        }
+        catch (error) {
+            console.error("Error fetching address data:", error);
+            this.isLoading = true;
+            this.validAddress = false;
+        }
         if (this.streetAddress === streetAddress && this.streetNumber === streetNumber) {
             return;
         }
-        //set the values
         if (streetAddress) {
             this.streetAddress = streetAddress;
         }
         if (streetNumber) {
             this.streetNumber = streetNumber;
         }
-        //fetch data
-        var data = await this.fetchAddress();
-        //verify the error
-        var showStreetAddressError = false;
-        var showStreetNumberError = false;
-        if (!data?.addresses?.length) {
-            if (e.target === this.streetAddressInputField) {
-                showStreetAddressError = true;
-            }
-            if (e.target === this.streetNumberInputField) {
-                showStreetNumberError = true;
-            }
-        }
-        else {
-            if (this.streetAddress && !data.addresses.find(addr => this.normalizeChar(addr.street) === this.normalizeChar(this.streetAddress) && addr.postalCode === this.postalCode)) {
-                showStreetAddressError = true;
-            }
-            if (this.streetNumber && !data.addresses.find(addr => addr.houseNumber.toLowerCase() === this.streetNumber.toLowerCase() && addr.postalCode === this.postalCode)) {
-                showStreetNumberError = true;
-            }
-        }
-        //helpertext changes are temp fix to show the error text, this can be removed once the upgrade is done and fixes this issue.
-        this.pnInputStreetAddress.removeAttribute('error');
-        this.pnInputStreetAddress.setAttribute('helpertext', this._streetAddressProps.streetAddressInputHelpertext);
-        this.pnInputStreetNumber.removeAttribute('error');
-        this.pnInputStreetNumber.setAttribute('helpertext', this._streetNumberProps.streetNumberInputHelpertext);
-        this.validAddress = true;
-        if (showStreetAddressError) {
-            this.pnInputStreetAddress.setAttribute('error', this._streetAddressProps.streetAddressInputError);
-            this.pnInputStreetAddress.setAttribute('helpertext', this._streetAddressProps.streetAddressInputError);
-            this.validAddress = false;
-        }
-        if (showStreetNumberError) {
-            this.pnInputStreetNumber.setAttribute('error', this._streetNumberProps.streetNumberInputError);
-            this.pnInputStreetNumber.setAttribute('helpertext', this._streetNumberProps.streetNumberInputError);
-            this.validAddress = false;
-        }
     }
     //this function is added to compare the street input values if entered without special characters like é, ø ect
     normalizeChar(str) {
@@ -342,7 +317,7 @@ const PnAddressAutofill$1 = /*@__PURE__*/ proxyCustomElement(class PnAddressAuto
         return str1;
     }
     render() {
-        return (h(Host, { key: '144d390d30ab4ed791c6e1c89753cf185ec22528', class: "pn-address-autofill" }, this._postalCodeProps?.postalCodeCityLabel ? (h("div", { class: "label-container" }, h("label", null, `${this._postalCodeProps.postalCodeCityLabel + ' ' + this.postalCodeRequiredLabel}`))) : null, h("div", { key: 'f50c6de42b8c582769e6c6f03736106462e1023d', class: "input-container-row" }, h("pn-input", { key: 'c777d9f11e090940d8fad9471027200116c79fec', type: "number", name: this._postalCodeProps?.postalCodeInputName, required: this._postalCodeProps?.postalCodeInputRequired, placeholder: this._postalCodeProps?.postalCodeInputPlaceholder, ref: el => (this.pnInputPostalCode = el), autocomplete: "off", helpertext: this._postalCodeProps?.postalCodeInputHelpertext }), h("pn-input", { key: '317888fa29d61168e8fac41f58adf3bab7a5d16c', type: "text", name: this._cityProps?.cityInputName, disabled: true, value: this.city, placeholder: this._cityProps?.cityInputPlaceholder, autocomplete: "off", helpertext: this._cityProps?.cityInputHelpertext })), this._streetAddressProps?.streetAddressNumberLabel ? (h("div", { class: "label-container" }, h("label", null, `${this._streetAddressProps.streetAddressNumberLabel + ' ' + this.streetRequiredLabel}`))) : null, h("div", { key: 'df079570278fe8910dd5e6bccf8f04585ad14243', class: "input-container-row" }, h("pn-input", { key: '3ebdce3b0a90fba067c023c80d5c6d2374885082', type: "text", name: this._streetAddressProps?.streetAddressInputName, required: this._streetAddressProps?.streetAddressInputRequired, value: this.streetAddress, placeholder: this._streetAddressProps?.streetAddressInputPlaceholder, ref: el => (this.pnInputStreetAddress = el), autocomplete: "off", helpertext: this._streetAddressProps?.streetAddressInputHelpertext, disabled: this.isLoading }), h("pn-input", { key: 'd48f305425656296711248b2c808b5a259e9730e', type: "text", name: this._streetNumberProps?.streetNumberInputName, required: this._streetNumberProps?.streetNumberInputRequired, value: this.streetNumber, placeholder: this._streetNumberProps?.streetNumberInputPlaceholder, ref: el => (this.pnInputStreetNumber = el), autocomplete: "off", helpertext: this._streetNumberProps?.streetNumberInputHelpertext, disabled: this.isLoading }))));
+        return (h(Host, { key: '6e09c78bcd1117bbcdbcec1fc65444772636036d', class: "pn-address-autofill" }, this._postalCodeProps?.postalCodeCityLabel ? (h("div", { class: "label-container" }, h("label", null, `${this._postalCodeProps.postalCodeCityLabel + ' ' + this.postalCodeRequiredLabel}`))) : null, h("div", { key: '8f5a0760096e3618436b7554a6a5c89c1b0bab0a', class: "input-container-row" }, h("pn-input", { key: '2490a7c926f9c693cf67dabbd60e56297aee44aa', type: "number", name: this._postalCodeProps?.postalCodeInputName, required: this._postalCodeProps?.postalCodeInputRequired, placeholder: this._postalCodeProps?.postalCodeInputPlaceholder, ref: el => (this.pnInputPostalCode = el), autocomplete: "off", helpertext: this._postalCodeProps?.postalCodeInputHelpertext }), h("pn-input", { key: '49bc2fdedb78d9ce11c973bd0d2ab127603ab148', type: "text", name: this._cityProps?.cityInputName, disabled: true, value: this.city, placeholder: this._cityProps?.cityInputPlaceholder, autocomplete: "off", helpertext: this._cityProps?.cityInputHelpertext })), this._streetAddressProps?.streetAddressNumberLabel ? (h("div", { class: "label-container" }, h("label", null, `${this._streetAddressProps.streetAddressNumberLabel + ' ' + this.streetRequiredLabel}`))) : null, h("div", { key: 'fed64c4457c27593bf6a22dea066f029fcd4a53d', class: "input-container-row" }, h("pn-input", { key: '7d7667465f4cad869cf8274158611aa32b7a8975', type: "text", name: this._streetAddressProps?.streetAddressInputName, required: this._streetAddressProps?.streetAddressInputRequired, value: this.streetAddress, placeholder: this._streetAddressProps?.streetAddressInputPlaceholder, ref: el => (this.pnInputStreetAddress = el), autocomplete: "off", helpertext: this._streetAddressProps?.streetAddressInputHelpertext, disabled: this.isLoading }), h("pn-input", { key: '8bc6498685c92de3e53034dcf4fe7078e171e41f', type: "text", name: this._streetNumberProps?.streetNumberInputName, required: this._streetNumberProps?.streetNumberInputRequired, value: this.streetNumber, placeholder: this._streetNumberProps?.streetNumberInputPlaceholder, ref: el => (this.pnInputStreetNumber = el), autocomplete: "off", helpertext: this._streetNumberProps?.streetNumberInputHelpertext, disabled: this.isLoading })), (!this.validAddress && this.streetAddressInputField.value && this.streetNumberInputField.value) ? (h("div", { class: "toast-container" }, h("pn-toast", { text: this.addressNotFoundError ?? this.translation.addressNotFound, appearance: "warning", icon: alert_exclamation_circle }))) : null));
     }
     static get style() { return PnAddressAutofillStyle0; }
 }, [0, "pn-address-autofill", {
@@ -356,6 +331,7 @@ const PnAddressAutofill$1 = /*@__PURE__*/ proxyCustomElement(class PnAddressAuto
         "cityProps": [1, "city-props"],
         "streetAddressProps": [1, "street-address-props"],
         "streetNumberProps": [1, "street-number-props"],
+        "addressNotFoundError": [1, "address-not-found-error"],
         "postalCode": [32],
         "city": [32],
         "streetAddress": [32],