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

package/package.json

@@ -1,19 +1,19 @@
 {
   "name": "@postnord/pn-marketweb-components",
-  "version": "4.0.4-test",
+  "version": "4.0.4-test2",
   "description": "PostNord Market Websites Components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "main": "./dist/index.cjs.js",
-  "module": "./dist/index.js",
-  "es2017": "./dist/esm/index.mjs",
-  "types": "./dist/types/index.d.ts",
-  "collection": "./dist/collection/collection-manifest.json",
-  "collection:main": "./dist/collection/index.js",
-  "unpkg": "./dist/pn-market-web-components/pn-market-web-components.esm.js",
+  "main": "./index.cjs.js",
+  "module": "./index.js",
+  "es2017": "./esm/index.mjs",
+  "types": "./types/index.d.ts",
+  "collection": "./collection/collection-manifest.json",
+  "collection:main": "./collection/index.js",
+  "unpkg": "./pn-market-web-components/pn-market-web-components.esm.js",
   "files": [
-    "dist/",
+    "*",
     "umd",
     "LICENSE"
   ],

package/umd/pn-marketweb-init.js

@@ -36,7 +36,7 @@
   };
 
   const s = document.createElement('script');
-  const currentMinorVersion = "#packageversion#";
+  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"]');

package/umd/pn-marketweb-salesforce.js

@@ -24,7 +24,7 @@
   document.body.insertBefore(header, document.body.firstElementChild);
   document.body.appendChild(footer);
 
-  const currentMinorVersion = "#packageversion#";
+  const currentMinorVersion = "4.0.0";
   const requestedComponentVersion = new URLSearchParams(window.location.search).get("componentversion");
   const versionToLoad = requestedComponentVersion ? requestedComponentVersion : currentMinorVersion;
 

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/README.md

@@ -1,74 +0,0 @@
-# pn-marketweb-components
-
-This solution compiles web components using Stencil.js
-The goal of this package is to allow other projects to use components from the Market Websites and allow SPAs to look like they are a part of the market websites.
-
-## Installation
-
-This includes both the PN Web Components and the Market Web Components.
-
-```
-npm install --save-dev @postnord/web-components
-npm install --save-dev @postnord/pn-marketweb-components
-```
-
-## Recommended extensions
-
-### Accessibility
-For Vscode you will get a prompt of recommended extensions and there is a accessibility specific one called Axe Linter.
-
-Visual Studio have this linting rules build in.
-
-https://marketplace.visualstudio.com/items?itemName=deque-systems.vscode-axe-linter
-
-
-
-
-## Usage
-
-### Script
-
-To use these web components you need to automatically register them first.
-Add this to your main script
-
-```
-import { defineCustomElements } from '@postnord/web-components/loader';
-defineCustomElements(window, { resourcesUrl: '/Static/dist/' });
-
-import { defineCustomElements as defineCustomElementsMarketWeb} from '@postnord/pn-marketweb-components/esm-es5/loader';
-defineCustomElementsMarketWeb(window, { resourcesUrl: '/Static/dist/' });
-```
-
-Note that the "resourceUrl" should point to where the main script / assets are located.
-
-### Markup for integating market web header and footer
-
-#### Market Web Site header
-
-```
-<pn-marketweb-siteheader
-  market="se"
-  language="sv"
-  endpoint="https://com-inte.postnord.com">
-</pn-marketweb-siteheader>
-```
-
-#### Market Web Site footer
-
-```
-<pn-marketweb-sitefooter
-  market="se"
-  language="sv"
-  endpoint="https://com-inte.postnord.com">
-</pn-marketweb-sitefooter>
-```
-
-## How to package for testing in dev
-
-in package.json, change version number (ex. 1.0.50-test)  
-Run npm run build  
-Run npm run post:build  
-In dist directory, run npm pack  
-copy over the .tgz file to the javascript directory (where package.json exists)  
-Install the package with "npm install xxx.tgz"  
-Run your js build

package/dist/package.json

@@ -1,87 +0,0 @@
-{
-  "name": "@postnord/pn-marketweb-components",
-  "version": "4.0.4-test",
-  "description": "PostNord Market Websites Components",
-  "publishConfig": {
-    "registry": "https://registry.npmjs.org/"
-  },
-  "main": "./index.cjs.js",
-  "module": "./index.js",
-  "es2017": "./esm/index.mjs",
-  "types": "./types/index.d.ts",
-  "collection": "./collection/collection-manifest.json",
-  "collection:main": "./collection/index.js",
-  "unpkg": "./pn-market-web-components/pn-market-web-components.esm.js",
-  "files": [
-    "*",
-    "umd",
-    "LICENSE"
-  ],
-  "scripts": {
-    "start": "npm run dev",
-    "dev": "npm run stats:ts && npm run stats && npm-run-all --parallel stencil:watch storybook",
-    "build": "npm run stencil:build && npm run post:build",
-    "stencil:build": "cross-env stencil build --docs-custom",
-    "stencil:watch": "cross-env stencil build --watch",
-    "test": "stencil test --spec --e2e",
-    "test:watch": "stencil test --spec --e2e --watchAll",
-    "stencil": "cross-env STENCIL_ENV=dev stencil build --dev --watch --serve --docs-custom",
-    "storybook": "storybook dev -p 6008 ",
-    "build-storybook": "storybook build",
-    "post:build": "node ./scripts/post_build.js",
-    "format": "cd src && npx prettier --write .",
-    "stats": "node ./scripts/generateStats.js",
-    "stats:ts": "tsc --module NodeNext --moduleResolution NodeNext ./scripts/generateStats.ts",
-    "generate": "plop",
-    "docs.data": "stencil build --docs-json dist/docs.json"
-  },
-  "devDependencies": {
-    "@babel/core": "7.24.7",
-    "@chromatic-com/storybook": "^3.2.2",
-    "@postnord/web-components": "^7.14.0",
-    "@stencil/sass": "3.0.12",
-    "@stencil/store": "2.0.16",
-    "@storybook/addon-a11y": "^8.4.6",
-    "@storybook/addon-actions": "^8.4.6",
-    "@storybook/addon-essentials": "^8.4.6",
-    "@storybook/addon-links": "^8.4.6",
-    "@storybook/addon-mdx-gfm": "^8.4.6",
-    "@storybook/preset-scss": "1.0.3",
-    "@storybook/web-components": "^8.4.6",
-    "@storybook/web-components-vite": "^8.4.6",
-    "@types/chart.js": "^2.9.41",
-    "@types/jest": "26.0.24",
-    "@webcomponents/custom-elements": "^1.5.0",
-    "chart.js": "2.9.4",
-    "chartjs-plugin-deferred": "^1.0.2",
-    "classnames": "^2.5.1",
-    "cross-env": "7.0.3",
-    "css-loader": "5.2.7",
-    "fast-glob": "^3.3.2",
-    "file-loader": "6.2.0",
-    "fs-extra": "11.2.0",
-    "jest": "29.7.0",
-    "jest-cli": "29.7.0",
-    "npm-run-all": "4.1.5",
-    "plop": "4.0.1",
-    "pn-design-assets": "^2.2.0",
-    "puppeteer": "^22.11.2",
-    "sass": "^1.77.5",
-    "sass-loader": "14.2.1",
-    "storybook": "^8.4.6",
-    "style-loader": "2.0.0",
-    "uuid": "^9.0.0",
-    "vite": "^5.4.19",
-    "vite-tsconfig-paths": "^4.3.2"
-  },
-  "license": "MIT",
-  "dependencies": {
-    "@stencil/core": "4.22.3",
-    "@types/node": "^18.11.18",
-    "debounce": "^2.1.0",
-    "marked": "^12.0.0",
-    "read-excel-file": "5.8.1",
-    "rimraf": "^5.0.7",
-    "sass": "^1.77.5"
-  }
-}

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

@@ -1,12 +0,0 @@
-: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

@@ -1,50 +0,0 @@
-(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

@@ -1,58 +0,0 @@
-(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

@@ -1,108 +0,0 @@
-(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

@@ -1,182 +0,0 @@
-
-
-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;
-}
-}