@postnord/pn-marketweb-components 4.0.0 → 4.0.2

package/dist/types/globals/types.d.ts

@@ -0,0 +1,20 @@
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export interface PnButton {
+    content: string;
+    class?: string;
+    appearance?: string;
+    variant?: string;
+    small?: boolean;
+    loading?: boolean;
+    icon?: string;
+    leftIcon?: boolean;
+    tooltip?: string;
+    href?: string;
+    rel?: string;
+    download?: string;
+    form?: string;
+    buttonId?: string;
+    customAttribute?: string;
+    arialabel?: string;
+    iconOnly?: boolean;
+}

package/dist/umd/pn-marketweb-cssoverride.css

@@ -0,0 +1,12 @@
+:root {
+    font-size:62.5%;
+}
+
+*, *:after, *:before {
+    box-sizing: border-box;
+}
+
+.hydrated,
+.hydrated a {
+    font-family: PostNordSans, Arial;
+}

package/dist/umd/pn-marketweb-init.js

@@ -0,0 +1,50 @@
+(function () {
+  if (document.body.dataset['marketwebComponentsInit']) {
+    return;
+  }
+  document.body.dataset['marketwebComponentsInit'] = true;
+  const checkParameters = function (originSrc) {
+    if (!originSrc.indexOf('?')) {
+      return;
+    }
+    const originalQueryString = originSrc.substring(originSrc.indexOf('?') + 1);
+    const originalParams = new URLSearchParams(originalQueryString);
+    const injectElements = originalParams
+      .get('inject')
+      .split(',')
+      .map(function (item) {
+        return item.trim();
+      });
+    injectElements.forEach(function (element) {
+      const s = document.createElement('script');
+      let injectSrc = originSrc.replace('pn-marketweb-init.js', 'pn-marketweb-inject.js');
+      injectSrc = injectSrc.substring(0, injectSrc.indexOf('?'));
+      const params = new URLSearchParams(originalQueryString);
+      params.delete('inject');
+      params.set('inject', element);
+
+      if (element.indexOf('header') !== -1) {
+        params.set('domlocation', 'top');
+      }
+      if (element.indexOf('footer') !== -1) {
+        params.set('domlocation', 'bottom');
+      }
+
+      s.setAttribute('src', `${injectSrc}?${params.toString()}`);
+      document.querySelector('head').appendChild(s);
+    });
+  };
+
+  const s = document.createElement('script');
+  const currentMinorVersion = "4.0.0";
+  const requestedComponentVersion = (new URLSearchParams(window.location.search)).get("componentversion");
+  const versionToLoad = (requestedComponentVersion) ? requestedComponentVersion : currentMinorVersion;
+  const currentScriptTag = document.querySelector('script[src*="pn-marketweb-init.js"]');
+  let currentScriptSrc = currentScriptTag.getAttribute('src');
+  currentScriptSrc = currentScriptSrc.replace('@latest', '@' + versionToLoad);
+  checkParameters(currentScriptSrc);
+  const loaderScriptSrc = currentScriptSrc.replace('pn-marketweb-init.js', 'standalone-loader.js');
+  s.setAttribute('type', 'module');
+  s.setAttribute('src', loaderScriptSrc);
+  document.querySelector('head').appendChild(s);
+})();

package/dist/umd/pn-marketweb-inject.js

@@ -0,0 +1,58 @@
+(function() {
+    const injectComponent = function(componentName, params, initiatingScriptTag) {
+        if (componentName === 'cssoverride')  {
+            const cssHref = initiatingScriptTag.getAttribute('src').replace('pn-marketweb-inject.js', 'pn-marketweb-cssoverride.css');
+            const link = document.createElement('link');
+            link.setAttribute('href', cssHref);
+            link.setAttribute('rel', 'stylesheet');
+            document.head.append(link);
+            return;
+        }
+
+        if (componentName.indexOf('pn-') !== 0) {
+            console.warn('Not a postnord component')
+            return;
+        }
+        const component = document.createElement(componentName);
+        const ignoredParameters = ['inject', 'domlocation'];
+        params.forEach((paramVal, paramKey) => {
+            if (ignoredParameters.indexOf(paramKey) !== -1) {
+                return;
+            }
+            component.setAttribute(paramKey, paramVal);
+        });
+        const placement = params.get('domlocation') ?? 'self';
+        switch(placement) {
+            case 'top':
+                document.body.insertBefore(component, document.body.firstElementChild);
+                break;
+            case 'bottom':
+                document.body.appendChild(component);
+                break;
+            case 'self':
+            default:
+                initiatingScriptTag.parentElement.insertBefore(component, initiatingScriptTag);
+                break;
+        }
+    };
+    const checkParameters = function(injectionScriptTag) {
+        const src = injectionScriptTag.getAttribute('src');
+        if (!src.indexOf('?')) {
+            return;
+        }
+        const queryString = src.substring(src.indexOf('?') + 1);
+        const params = new URLSearchParams(queryString);
+        const inject = params.get('inject').split(',');
+        inject.forEach(function(value) { injectComponent(value.trim(), params, injectionScriptTag) });
+    }
+    const injectionScriptTags = [...document.querySelectorAll('script[src*="pn-marketweb-inject.js"]')];
+    
+    injectionScriptTags.forEach(function (injectionScriptTag) {
+        if (injectionScriptTag.hasAttribute('data-initiated')) {
+            return;
+        }
+        injectionScriptTag.setAttribute('data-initiated', true);
+        checkParameters(injectionScriptTag);
+    });
+
+})();

package/dist/umd/pn-marketweb-salesforce.js

@@ -0,0 +1,108 @@
+(function () {
+  if (document.body.dataset["marketwebComponentsSalesforceInit"]) {
+    return;
+  }
+  document.body.dataset["marketwebComponentsSalesforceInit"] = true;
+
+  const header = document.createElement("pn-marketweb-siteheader");
+  const footer = document.createElement("pn-marketweb-sitefooter");
+  let currentLanguage = document.querySelector("html").getAttribute("lang");
+  if (currentLanguage === "en-US" || currentLanguage === "en_US") {
+    currentLanguage = "en";
+  }
+
+  [header, footer].forEach((comp) => {
+    comp.setAttribute("market", "dk");
+    comp.setAttribute("language", currentLanguage);
+    comp.setAttribute("site-domain-in-urls", "true");
+    comp.setAttribute("hide-site-selector", "true");
+    comp.setAttribute("spa-mode", "true");
+    const environment =
+      window.location.href.indexOf("kundeservice.postnord.dk") !== -1 ? "production" : "preproduction";
+    comp.setAttribute("environment", environment);
+  });
+  document.body.insertBefore(header, document.body.firstElementChild);
+  document.body.appendChild(footer);
+
+  const currentMinorVersion = "4.0.0";
+  const requestedComponentVersion = new URLSearchParams(window.location.search).get("componentversion");
+  const versionToLoad = requestedComponentVersion ? requestedComponentVersion : currentMinorVersion;
+
+  const s = document.createElement("script");
+  s.setAttribute("type", "module");
+  s.setAttribute(
+    "src",
+    `https://cdn.jsdelivr.net/npm/@postnord/pn-marketweb-components@${versionToLoad}/umd/standalone-loader-salesforce.js`
+  );
+  document.querySelector("head").appendChild(s);
+
+  const style = document.createElement("link");
+  style.setAttribute("rel", "stylesheet");
+  style.setAttribute(
+    "href",
+    `https://cdn.jsdelivr.net/npm/@postnord/pn-marketweb-components@${versionToLoad}/umd/pn-marketweb-wrongrembase.css`
+  );
+  document.querySelector("head").appendChild(style);
+
+  window["bindLanguageSelector"] = function () {
+    if (window["haslangchange"]) {
+      return;
+    }
+    window.addEventListener("marketweb-languagechange", (e) => {
+      let lang = e.detail;
+      if (lang === "en") {
+        lang = "en_US";
+      }
+      const queryParams = new URLSearchParams(window.location.search);
+      const currentLanguageValue = queryParams.get("language");
+
+      if (lang.indexOf("en") !== -1) {
+        const rootUrl = window.location.href.indexOf("kundeservice-test.postnord.dk" !== -1)
+          ? "https://www.postnord.dk"
+          : "https://dk-prep.postnord.com";
+        window.location.href = `${rootUrl}/en/help-and-support/private`;
+      }
+      // if (currentLanguageValue === lang) {
+      //     return;
+      // }
+      // queryParams.set("language", lang);
+      // let newUrl = window.location.origin + window.location.pathname + '?'+ queryParams.toString();
+      // if (newUrl.indexOf("/article/") !== -1) {
+      //     if (lang === "en_US" && newUrl.indexOf("-da-") !== -1) {
+      //         newUrl = newUrl.replace("-da-", "-en-");
+      //     }
+      //     if (lang === "da" && newUrl.indexOf("-en-") !== -1) {
+      //         newUrl = newUrl.replace("-en-", "-da-");
+      //     }
+      // }
+
+      window.location.href = newUrl;
+    });
+    window["haslangchange"] = true;
+  };
+  document.addEventListener("DOMContentLoaded", () => {
+    window["bindLanguageSelector"]();
+  });
+  window.setTimeout(() => {
+    window["bindLanguageSelector"]();
+  }, 200);
+  window["renderpncomponent-interval"] = window.setInterval(renderPNComponents, 150);
+  renderPNComponents();
+})();
+
+function renderPNComponents() {
+  const componentsDivs = [...document.querySelectorAll("[data-component]:not([data-component-rendered])")];
+  componentsDivs.forEach((componentDiv) => {
+    const component = document.createElement(componentDiv.getAttribute("data-component"));
+    [...componentDiv.attributes].map((dataAttribute) => {
+      if (dataAttribute.name.indexOf("data-component-") === -1) {
+        return;
+      }
+      component.setAttribute(dataAttribute.name.replace("data-component-", ""), dataAttribute.value);
+    });
+    component.innerHTML = componentDiv.innerHTML;
+    componentDiv.innerHTML = "";
+    componentDiv.appendChild(component);
+    componentDiv.setAttribute("data-component-rendered", "");
+  });
+}

package/dist/umd/pn-marketweb-wrongrembase.css

@@ -0,0 +1,182 @@
+
+
+pn-marketweb-siteheader {
+font-size:16px;
+}
+pn-marketweb-siteheader header {
+box-shadow:0 0.6px 1.8px rgb(0 0 0 / 10%), 0 3.2px 7.2px rgb(0 0 0 / 13%)
+}
+pn-marketweb-siteheader .siteheader-row {
+padding:0 16px;
+}
+pn-marketweb-siteheader .siteheader-row:not(:last-child) {
+border-bottom:0.1px solid #F3F2F2;
+}
+.siteheader-topleft pn-site-selector {
+padding:10px 0;
+}
+pn-site-selector {
+max-height:52px;
+}
+.siteheader-topleft pn-site-selector {
+margin-left:13px;
+}
+pn-button-dropdown>button {
+padding:4px;
+border-radius:8px;
+}
+.pn-button-dropdown-container {
+border-radius:16px;
+box-shadow:0 2px 16rem rgb(0 0 0 / 20%);
+}
+.pn-button-dropdown-content {
+padding:16px;
+}
+.siteselector-heading {
+margin-bottom:16px;
+}
+pn-site-selector-item>div, pn-site-selector-item>a {
+padding:8px 0;
+}
+.siteselector-item-description {
+    font-size: 12.8px;
+}
+pn-marketweb-siteheader .siteheader-logocontainer {
+min-height:48px;
+}
+pn-marketweb-siteheader .siteheader-logolink {
+max-height:64px;
+}
+pn-marketweb-siteheader .siteheader-logolink svg {
+width:127px;
+height:24px;
+}
+.siteheader-topright {
+margin-left:16px;
+}
+.siteheader-topright>pn-language-selector, .siteheader-topright>pn-marketweb-siteheader-login, .siteheader-topright>a {
+padding:10px 0;
+}
+@media screen and (min-width: 60em) {
+.siteheader-topright>pn-language-selector, .siteheader-topright>pn-marketweb-siteheader-login, .siteheader-topright>a {
+    margin-left:16px;
+}
+}
+@media screen and (min-width: 48em) {
+    .siteheader-topright>pn-language-selector, .siteheader-topright>pn-marketweb-siteheader-login, .siteheader-topright>a {
+        margin-left: 10px;
+    }
+}
+.languageselector-title {
+    padding:8px 16px;
+    font-weight: bold;
+}
+.languageselector-button, .languageselector-link {
+    padding:11px 16px 11px 14px;
+    font-size:16px;
+}
+
+pn-marketweb-siteheader-login {
+padding:10px 0;
+max-height:52px;
+}
+pn-marketweb-siteheader-login-linklist li {
+    padding:8px 16px;
+}
+
+pn-mainnav {
+min-height:51px;
+}
+.mainnav-toggle>button {
+    border-radius:24px;
+    padding:6px 16px;
+    font-size:16px;
+}
+.mainnav-toggle>button pn-icon {
+    margin-left: 8px;
+}
+@media screen and (min-width: 48em) {
+pn-mainnav>nav {
+    top: 65px;
+}
+}
+pn-mainnav>nav {
+top:48px;
+}
+[data-level="1"] pn-mainnav-link>button, [data-level="1"] pn-mainnav-link>a {
+border-bottom:1px solid #F3F2F2;
+font-size:20px;
+padding:19px 0 19px 30px;
+}
+@media screen and (min-width: 64em) {
+[data-level="1"] pn-mainnav-link>button, [data-level="1"] pn-mainnav-link>a {
+    font-size:16px;
+    padding:16px;
+}
+}
+
+@media screen and (min-width: 64em) {
+[data-level="1"] pn-mainnav-link>button::before, [data-level="1"] pn-mainnav-link>a::before {
+    height:10px;
+    border-radius:10px 10px 0 0;
+}
+}
+@media screen and (min-width: 64em) {
+pn-mainnav-level[data-level="2"][aria-hidden=false]:not([data-level-listcount="1"]) {
+    grid-template-columns: minmax(192px, 320px) 1fr;
+    gap: 0px 16px;
+}
+}
+@media screen and (min-width: 64em) {
+pn-mainnav-level[data-level="2"] {
+    top:calc(100% + 10px);
+    border-radius:16px;
+    padding:16px 16px 0 16px;
+    box-shadow:0 0.6px  1.8px rgb(0 0 0 / 10%), 0 3.2px 7.2px rgb(0 0 0 / 13%);
+}
+}
+.mainnav-level-header>button {
+padding:24px 0 24px 62px;
+}
+.mainnav-level-header>button>pn-icon {
+height:24px;
+width:24px;
+}
+
+@media screen and (min-width: 64em) {
+[data-level="2"] pn-mainnav-link {
+    margin-bottom:16px;
+}
+}
+[data-level="2"] .mainnav-level-header>pn-mainnav-link>a {
+font-size:24px;
+}
+[data-level="2"] pn-mainnav-link>a {
+font-size: 16px;
+border-bottom: 1px solid #F3F2F2;
+padding: 22px 0 22px 30px;
+}
+@media screen and (min-width: 64em) {
+[data-level="2"] pn-mainnav-link>a {
+    min-width:256px;
+    border-radius:10px;
+    padding:14px 16px;
+}
+}
+
+@media screen and (min-width: 64em) {
+[data-level="2"]>pn-mainnav-list[data-navlist-showcolumns=true] {
+    column-gap: 16px;
+    padding-bottom: 16px;
+}
+}
+
+.mainnav-list-heading {
+font-size: 18px;
+padding: 14px 14px 14px 48px;
+}
+@media screen and (min-width: 64em) {
+.mainnav-list-heading {
+    padding:0 14px 14px 14px;
+}
+}

package/dist/umd/readme.md

@@ -0,0 +1,38 @@
+# Direct script loading of PN Components
+
+Using a open CDN for NPM packages we've created a set of scripts to load in the required files needed to show PN Web Components without having to install them in your repo.
+
+## Initial script
+
+```
+<script src="https://XXXXXX/umd/pn-marketweb-init.js"></script>
+```
+
+## Injecting components directly into a page using a script tag
+Querystring parameters added the the script src (with the exception of "inject" and "domlocation") will be appended to the component as attributes. 
+```
+<script src="https://127.0.0.1:8080/umd/pn-marketweb-inject.js?market=se&language=en&inject=pn-marketweb-siteheader&domlocation=top"></script>
+``` 
+This will load in the following component in the top of the dom
+<pn-marketweb-siteheader language="en" market="se"></pn-marketweb-siteheader>
+
+## Style issues
+If the sizing is all wrong it's most likely due to the html tag not having right font size set to support rem (base 10px). 
+
+The components look best if you have the following css
+```
+html {
+    font-size:62.5%;
+}
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+``` 
+
+### Workaound
+There is a possible workaround where you can add the following css to get the components to look better
+```
+:root {
+    font-size: 62.5%;
+}
+```

package/dist/umd/standalone-loader-salesforce.js

@@ -0,0 +1,12 @@
+/*
+# No webpack loader
+See the documentation in readme.md on how to properly setup this script.
+You need to change the relative directories as well as the resourceUrl property to make files load from the correct directories.
+
+<script type="module" src="/scripts/no-webpack-loader.js"></script>
+*/
+import { defineCustomElements } from './modules/@postnord/web-components/esm/loader.js';
+import { defineCustomElements as defineCustomElementsMarketWeb } from '../esm/loader.js';
+
+defineCustomElements(window, { resourcesUrl: '/scripts/' });
+defineCustomElementsMarketWeb(window, { resourcesUrl: '/scripts/' });

package/dist/umd/standalone-loader.js

@@ -0,0 +1,12 @@
+/*
+# No webpack loader
+See the documentation in readme.md on how to properly setup this script.
+You need to change the relative directories as well as the resourceUrl property to make files load from the correct directories.
+
+<script type="module" src="/scripts/no-webpack-loader.js"></script>
+*/
+import { defineCustomElements } from './modules/@postnord/web-components/esm/loader.js';
+import { defineCustomElements as defineCustomElementsMarketWeb } from '../esm/loader.js';
+
+defineCustomElements(window, { resourcesUrl: '/scripts/' });
+defineCustomElementsMarketWeb(window, { resourcesUrl: '/scripts/' });