@postnord/pn-marketweb-components 2.3.12 → 2.3.13

package/components/pn-scroll.js

@@ -0,0 +1,79 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { v as v4 } from './v4.js';
+
+const pnScrollCss = "pn-scroll .scroll-wrapper{-webkit-transition:all var(--transition-duration) ease-in-out 250ms;transition:all var(--transition-duration) ease-in-out 250ms}pn-scroll .scroll-wrapper.fade{opacity:0}pn-scroll .scroll-wrapper.fade.in-view{opacity:1}pn-scroll .scroll-wrapper.slide-up{-webkit-transform:translateY(50px);transform:translateY(50px)}pn-scroll .scroll-wrapper.slide-up.in-view{-webkit-transform:translateY(0);transform:translateY(0)}";
+
+const defaultIntersectionCallback = (entries, observer, shouldLoop = false) => {
+  entries.forEach(entry => {
+    if (!shouldLoop) {
+      if (entry.isIntersecting) {
+        entry.target.classList.add('in-view');
+        //stop observering after added
+        observer.unobserve(entry.target);
+      }
+    }
+    else {
+      //toggle and keep observing and toggling, for continous behavior on element
+      entry.target.classList.toggle('in-view', entry.isIntersecting);
+    }
+  });
+};
+const defaultObserverOptions = {
+  root: null,
+  threshold: 0,
+  rootMargin: '0px 0px -150px 0px',
+};
+const SCROLL_ID = `pn-scroll-wrapper-id-`;
+const PnScroll$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.intersectionCustomCallback = defaultIntersectionCallback;
+    this.observerOptions = defaultObserverOptions;
+    this.behaviourClasses = 'fade slide-up';
+    this.transitionDurationSeconds = 0.5;
+    this.compId = null;
+  }
+  generateUniqueId() {
+    return v4();
+  }
+  //on load, generate unique id for this wrapper
+  componentWillLoad() {
+    this.compId = this.generateUniqueId();
+  }
+  componentDidLoad() {
+    const observer = new IntersectionObserver(this.intersectionCustomCallback, this.observerOptions);
+    const objectToObserve = document.getElementById(`${SCROLL_ID}${this.compId}`);
+    observer.observe(objectToObserve);
+  }
+  render() {
+    return (h(Host, null, h("div", { class: `scroll-wrapper ${this.behaviourClasses}`, id: `${SCROLL_ID}${this.compId}`, style: { '--transition-duration': `${this.transitionDurationSeconds}s` } }, h("slot", { name: "scroll-affected" }))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnScrollCss; }
+}, [4, "pn-scroll", {
+    "intersectionCustomCallback": [16],
+    "observerOptions": [16],
+    "behaviourClasses": [1, "behaviour-classes"],
+    "transitionDurationSeconds": [2, "transition-duration-seconds"],
+    "compId": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-scroll"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-scroll":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnScroll$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnScroll = PnScroll$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnScroll, defineCustomElement };

package/components/pn-share-item.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnShareItem extends Components.PnShareItem, HTMLElement {}
+export const PnShareItem: {
+  prototype: PnShareItem;
+  new (): PnShareItem;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-share-item.js

@@ -0,0 +1,6 @@
+import { P as PnShareItem$1, d as defineCustomElement$1 } from './pn-share-item2.js';
+
+const PnShareItem = PnShareItem$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnShareItem, defineCustomElement };

package/components/pn-share-item2.js

@@ -0,0 +1,36 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnShareItemCss = "pn-share-item .pn-share-item__container{padding:0.3rem 0.6rem;border:1px solid #D3CECB;border-radius:0.8rem;background-color:#FFFFFF;-webkit-transition:background-color ease-in-out 0.3s;transition:background-color ease-in-out 0.3s;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}pn-share-item a{text-decoration:none;color:#005D92;-webkit-transition:color 0.3s;transition:color 0.3s;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:0.8rem;font-size:1.6rem;font-weight:400}pn-share-item [slot=icon] svg{height:1.6rem;width:1.6rem}pn-share-item [slot=icon] svg path{fill:#005D92;-webkit-transition:fill 0.3s;transition:fill 0.3s}pn-share-item:hover{cursor:pointer}pn-share-item:hover .pn-share-item__container{background-color:#0D234B}pn-share-item:hover a{color:#FFFFFF;text-decoration:none}pn-share-item:hover [slot=icon] svg{fill:#0D234B}pn-share-item:hover [slot=icon] svg path{fill:#FFFFFF}";
+
+const PnShareItem = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.link = null;
+    this.text = null;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "pn-share-item__container" }, h("a", { href: `${this.link}` }, h("slot", { name: "icon" }), " ", this.text))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnShareItemCss; }
+}, [4, "pn-share-item", {
+    "link": [1],
+    "text": [1]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-share-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-share-item":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnShareItem);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnShareItem as P, defineCustomElement as d };

package/components/pn-share.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnShare extends Components.PnShare, HTMLElement {}
+export const PnShare: {
+  prototype: PnShare;
+  new (): PnShare;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-share.js

@@ -0,0 +1,89 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './pn-share-item2.js';
+
+const translations = {
+  sv: {
+    sharelabel: 'Dela med',
+  },
+  en: {
+    sharelabel: 'Share to',
+  },
+  da: {
+    sharelabel: 'Del med',
+  },
+  no: {
+    sharelabel: 'Dele med',
+  },
+  fi: {
+    sharelabel: 'Jakaa',
+  },
+};
+
+const pnShareCss = "pn-share .pn-share__container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;gap:0.8rem}pn-share .pn-share__heading{font-size:1.6rem;font-weight:500}pn-share .pn-share__heading:after{content:\"\";display:block;height:0.2rem;background-color:#F3F2F2;margin-top:0.4rem;margin-bottom:0.8rem}pn-share .pn-share__items{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;gap:0.8rem;-ms-flex-align:center;align-items:center}";
+
+const SHARE_URLS = [
+  { platform: 'linkedin', url: 'https://www.linkedin.com/sharing/share-offsite/?url=', text: 'LinkedIn' },
+  { platform: 'twitter', url: 'https://twitter.com/intent/tweet?url=', text: 'Twitter' },
+  { platform: 'facebook', url: 'https://www.facebook.com/sharer/sharer.php?u=', text: 'Facebook' },
+];
+const PnShare$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.link = null;
+    this.language = 'sv';
+    this.i18n = undefined;
+  }
+  componentWillLoad() {
+    this.setTranslations();
+  }
+  setTranslations() {
+    if (this.language === 'nb') {
+      this.language = 'no';
+    }
+    if (this.language && translations[this.language]) {
+      this.i18n = translations[this.language];
+    }
+  }
+  onLanguageChange() {
+    this.setTranslations();
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "pn-share__container" }, h("h3", { class: "pn-share__heading" }, this.i18n.sharelabel, ":"), h("div", { class: "pn-share__items" }, SHARE_URLS.map(platform => {
+      return (h("pn-share-item", { link: `${platform.url}${this.link}`, text: platform.text }, h("pn-icon", { slot: "icon", symbol: platform.platform })));
+    })))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "language": ["onLanguageChange"]
+  }; }
+  static get style() { return pnShareCss; }
+}, [0, "pn-share", {
+    "link": [1],
+    "language": [1537],
+    "i18n": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-share", "pn-share-item"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-share":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnShare$1);
+      }
+      break;
+    case "pn-share-item":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnShare = PnShare$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnShare, defineCustomElement };

package/components/pn-sidenav-level.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnSidenavLevel extends Components.PnSidenavLevel, HTMLElement {}
+export const PnSidenavLevel: {
+  prototype: PnSidenavLevel;
+  new (): PnSidenavLevel;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-sidenav-level.js

@@ -0,0 +1,84 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as state, o as onChange } from './pn-sidenav-store.js';
+
+const pnSidenavLevelCss = "pn-sidenav-level{display:block;-ms-flex-preferred-size:100%;flex-basis:100%}pn-sidenav-level[data-level=\"2\"]{padding-left:2.5em;overflow:hidden;-webkit-transition:max-height ease 0.2s;transition:max-height ease 0.2s;max-height:40em}pn-sidenav-level[data-level=\"2\"][aria-hidden=true]{max-height:0}";
+
+const PnSidenavLevel$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.level = 1;
+    this.levelId = "";
+    this.isOpen = false;
+    this.parentName = "";
+    this.parentHref = "";
+    this.parentLinkId = "";
+    this.alignment = "right";
+  }
+  async componentWillLoad() {
+    const parent = this.hostElement.parentElement;
+    if (parent.tagName.toLowerCase() !== 'nav') {
+      this.level = 2;
+    }
+    if (parent.tagName.toLowerCase() === 'pn-sidenav-link') {
+      this.parentName = parent.getAttribute('name') + '';
+      this.parentHref = parent.getAttribute('href') + '';
+      this.parentLinkId = parent.getAttribute('linkid') + '';
+      const parentLinkName = this.parentName.toLowerCase().replace(/\W/gi, '_');
+      this.levelId = `sidenav-lvl${this.level}-${parentLinkName}`;
+      if (parent.getAttribute('current') + '' === "true") {
+        state.openLevel = this.levelId;
+        this.onChangeOpenLevel();
+      }
+    }
+    onChange("openLevel", () => {
+      this.onChangeOpenLevel();
+    });
+  }
+  onOpen() {
+  }
+  onChangeOpenLevel() {
+    this.isOpen = state.openLevel === this.levelId;
+  }
+  render() {
+    var _a;
+    const attributes = {
+      "aria-hidden": (this.level > 1) ? (!this.isOpen + '') : null,
+      "data-level": this.level + '',
+      "id": (_a = this.levelId) !== null && _a !== void 0 ? _a : "",
+    };
+    return (h(Host, Object.assign({}, attributes, { "data-asdfasdf": this.isOpen }), h("slot", null)));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "isOpen": ["onOpen"]
+  }; }
+  static get style() { return pnSidenavLevelCss; }
+}, [4, "pn-sidenav-level", {
+    "level": [32],
+    "levelId": [32],
+    "isOpen": [32],
+    "parentName": [32],
+    "parentHref": [32],
+    "parentLinkId": [32],
+    "alignment": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-sidenav-level"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-sidenav-level":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnSidenavLevel$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnSidenavLevel = PnSidenavLevel$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnSidenavLevel, defineCustomElement };

package/components/pn-sidenav-link.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnSidenavLink extends Components.PnSidenavLink, HTMLElement {}
+export const PnSidenavLink: {
+  prototype: PnSidenavLink;
+  new (): PnSidenavLink;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-sidenav-link.js

@@ -0,0 +1,87 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as state } from './pn-sidenav-store.js';
+
+const pnSidenavLinkCss = "pn-sidenav-link{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.pn-sidenav-link{font-weight:normal;position:relative;border:0 none;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:transparent;color:#005D92;font-size:1em;padding:1.1rem 1.5rem 1.1rem;overflow:hidden;text-decoration:none;cursor:pointer;-ms-flex-positive:1;flex-grow:1}.pn-sidenav-link::before{content:\"\";display:block;width:0.4rem;border-top-right-radius:0.3rem;border-bottom-right-radius:0.3rem;height:100%;position:absolute;left:0;top:0;bottom:0;-webkit-transform:translateX(-0.4rem);transform:translateX(-0.4rem);background:#005D92;-webkit-transition:-webkit-transform linear 0.35s;transition:-webkit-transform linear 0.35s;transition:transform linear 0.35s;transition:transform linear 0.35s, -webkit-transform linear 0.35s}.pn-sidenav-link:hover,.pn-sidenav-link:focus,[current=true]>.pn-sidenav-link{background-color:#E0F8FF;color:#005D92;outline:0;-webkit-box-shadow:none;box-shadow:none}.pn-sidenav-link:hover::before,.pn-sidenav-link:focus::before,[current=true]>.pn-sidenav-link::before{-webkit-transform:none;transform:none}.pn-sidenav-link:active{background-color:#F3F2F2;color:#00A0D6;-webkit-box-shadow:none;box-shadow:none}.pn-sidenav-link>pn-icon{padding-right:1em}.pn-sidenav-link-expand{margin-left:auto;border:0;font-size:1em;background:transparent;outline:0;padding:0 1em 0 0.5em;cursor:pointer}.pn-sidenav-link-expand:hover,.pn-sidenav-link-expand:focus,[current=true]>.pn-sidenav-link-expand{background-color:#E0F8FF;color:#005D92;outline:0;-webkit-box-shadow:none;box-shadow:none}.pn-sidenav-link-expand:hover::before,.pn-sidenav-link-expand:focus::before,[current=true]>.pn-sidenav-link-expand::before{-webkit-transform:none;transform:none}button>.pn-sidenav-link-expand{padding-right:0}.pn-sidenav-link-expand pn-icon{width:14px}";
+
+const PnSidenavLink$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.name = "";
+    this.href = "";
+    this.target = null;
+    this.linkid = null;
+    this.icon = "";
+    this.current = false;
+    this.levelId = "";
+    this.open = false;
+    this.hasChildren = false;
+  }
+  componentWillLoad() {
+    this.hasChildren = this.hostElement.querySelectorAll("pn-sidenav-level").length > 0;
+    const safeLevelName = this.name.toLowerCase().replace(/\W/gi, '_');
+    if (this.hasChildren && this.name) {
+      this.levelId = `sidenav-lvl${2}-${safeLevelName}`;
+    }
+    if (!this.linkid && this.name) {
+      this.linkid = `sidenav-link-${safeLevelName}`;
+    }
+  }
+  // onClick={this.setOpenMenuLevel.bind(this)} 
+  onExpandClick() {
+    state.openLevel = (state.openLevel + "" === this.levelId + "") ? '' : this.levelId;
+  }
+  getTagName() {
+    return this.href ? "a" : "button";
+  }
+  render() {
+    const TagName = this.getTagName();
+    const linkAttributes = {
+      href: this.href,
+      target: this.target,
+      id: this.linkid,
+      class: 'pn-sidenav-link'
+    };
+    let buttonAttributes = {
+      "aria-controls": this.levelId,
+      "aria-pressed": "",
+      "aria-label": (this.open ? state.i18n.close : state.i18n.open) + " " + this.name,
+      "aria-expanded": ((state.openLevel + "" === this.levelId + "")) + '',
+      "onClick": this.onExpandClick.bind(this)
+    };
+    return (h(Host, { role: "listitem", name: this.name, href: this.href, linkid: this.linkid, current: this.current + '' }, h(TagName, Object.assign({}, linkAttributes, (TagName === "button" && Object.assign({}, buttonAttributes))), (this.icon) ? h("pn-icon", { symbol: this.icon, color: "blue700" }) : null, h("span", null, this.name), (this.hasChildren && TagName === "button") ? (h("div", { class: "pn-sidenav-link-expand" }, this.open ? (h("pn-icon", { class: "first-level_icon", symbol: "angle-small-up", color: "blue700" })) :
+      (h("pn-icon", { class: "first-level_icon", symbol: "angle-small-down", color: "blue700" })))) : null), (this.hasChildren && TagName === "a") ? (h("button", Object.assign({}, buttonAttributes, { class: "pn-sidenav-link-expand" }), this.open ? (h("pn-icon", { class: "first-level_icon", symbol: "angle-small-up", color: "blue700" })) :
+      (h("pn-icon", { class: "first-level_icon", symbol: "angle-small-down", color: "blue700" })))) : null, h("slot", null)));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnSidenavLinkCss; }
+}, [4, "pn-sidenav-link", {
+    "name": [1],
+    "href": [1],
+    "target": [1],
+    "linkid": [1],
+    "icon": [1],
+    "current": [4],
+    "levelId": [32],
+    "open": [32],
+    "hasChildren": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-sidenav-link"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-sidenav-link":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnSidenavLink$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnSidenavLink = PnSidenavLink$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnSidenavLink, defineCustomElement };

package/{esm/pn-sidenav-store-50b186d6.js → components/pn-sidenav-store.js}

@@ -1,4 +1,4 @@
-import { c as createStore } from './index-7b21ecff.js';
+import { c as createStore } from './index3.js';
 
 // Read more about how stencil stores work here: https://stenciljs.com/docs/stencil-store
 const { state, onChange } = createStore({

package/components/pn-sidenav-togglebutton.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnSidenavTogglebutton extends Components.PnSidenavTogglebutton, HTMLElement {}
+export const PnSidenavTogglebutton: {
+  prototype: PnSidenavTogglebutton;
+  new (): PnSidenavTogglebutton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-sidenav-togglebutton.js

@@ -0,0 +1,45 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as state } from './pn-sidenav-store.js';
+
+const pnSidenavTogglebuttonCss = "pn-sidenav-togglebutton{display:block;width:100%;padding:0.8rem 1.6rem;background:#EFFBFF}@media screen and (min-width: 64em){pn-sidenav-togglebutton{display:none}}";
+
+const PnSidenavTogglebutton$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.label = "";
+    this.i18n = { open: '', close: '', navLabel: '' };
+  }
+  onClick() {
+    state.openMenu = !state.openMenu;
+    const body = document.querySelector('body');
+    body.setAttribute('data-siteheader-sidemenuopen', state.openMenu + '');
+  }
+  render() {
+    return (h(Host, null, h("pn-button", { appearance: "light", icon: state.openMenu ? 'close-small' : 'bars', "left-icon": true, small: true, onclick: this.onClick.bind(this), label: this.label }, h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnSidenavTogglebuttonCss; }
+}, [4, "pn-sidenav-togglebutton", {
+    "label": [1],
+    "i18n": [32]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-sidenav-togglebutton"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-sidenav-togglebutton":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnSidenavTogglebutton$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnSidenavTogglebutton = PnSidenavTogglebutton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnSidenavTogglebutton, defineCustomElement };

package/components/pn-sidenav.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnSidenav extends Components.PnSidenav, HTMLElement {}
+export const PnSidenav: {
+  prototype: PnSidenav;
+  new (): PnSidenav;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-sidenav.js

@@ -0,0 +1,95 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as state } from './pn-sidenav-store.js';
+
+const translations = {
+  'sv': {
+    "open": "Öppna",
+    "close": "Stäng",
+    "navLabel": "Undernavigering",
+  },
+  'en': {
+    "open": "Open",
+    "close": "Close",
+    "navLabel": "Sub navigation",
+  },
+  'da': {
+    "open": "Åbne",
+    "close": "Stæng",
+    "navLabel": "Undernavigation"
+  },
+  'no': {
+    "open": "Åpne",
+    "close": "Stäng",
+    "navLabel": "Undernavigering",
+  },
+  'fi': {
+    "open": "Avaa",
+    "close": "Sulje",
+    "navLabel": "Ali navigointi",
+  },
+  'de': {
+    "open": "Offen",
+    "close": "Schließen",
+    "navLabel": "Unternavigation",
+  }
+};
+
+const pnSidenavCss = "body[data-siteheader-sidemenuopen=true]{max-height:100vh;overflow:hidden}@media screen and (min-width: 60em){body[data-siteheader-sidemenuopen=true]{max-height:initial;overflow:initial}}pn-sidenav{display:block;height:auto;width:100vw;padding:0 1.6rem;background-color:#FFFFFF;z-index:6;-webkit-transform:translateX(-100vw);transform:translateX(-100vw);-webkit-transition:-webkit-transform 0.2s 0s;transition:-webkit-transform 0.2s 0s;transition:transform 0.2s 0s;transition:transform 0.2s 0s, -webkit-transform 0.2s 0s;-webkit-transition-property:visibility, -webkit-transform;transition-property:visibility, -webkit-transform;transition-property:transform, visibility;transition-property:transform, visibility, -webkit-transform;-ms-flex-flow:column;flex-flow:column;visibility:hidden;position:fixed;top:10.2rem;bottom:0;left:0}pn-sidenav[open=true]{visibility:visible;-webkit-transform:none;transform:none}@media screen and (min-width: 48em){pn-sidenav{top:15.3rem}}@media screen and (min-width: 64em){pn-sidenav{position:relative;-webkit-transform:none;transform:none;visibility:visible;top:0;z-index:inherit;width:100%;padding:0;height:auto;bottom:auto;left:auto}}";
+
+const PnSidenav$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.language = "sv";
+    this.navLabel = "";
+    this.i18n = { open: '', close: '', navLabel: '' };
+  }
+  componentWillLoad() {
+    this.init();
+  }
+  async init() {
+    this.setLanguage();
+    if (window.matchMedia("screen and (min-width:64em)").matches === false) {
+      state.openMenu = false;
+    }
+  }
+  setLanguage() {
+    if (translations[this.language]) {
+      state.i18n = translations[this.language];
+      if (!this.navLabel) {
+        this.navLabel = this.i18n.navLabel;
+      }
+    }
+  }
+  onOpenSubMenuLevelChange(event) {
+    state.openLevel = event.detail;
+  }
+  render() {
+    return (h(Host, { open: (state.openMenu == true) + '' }, h("slot", { name: "above" }), h("nav", { class: "sidenav", "aria-label": this.navLabel }, h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnSidenavCss; }
+}, [4, "pn-sidenav", {
+    "language": [1],
+    "navLabel": [1, "nav-label"],
+    "i18n": [32]
+  }, [[0, "language", "setLanguage"], [0, "openSubMenuLevelChange", "onOpenSubMenuLevelChange"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-sidenav"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-sidenav":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnSidenav$1);
+      }
+      break;
+  } });
+}
+defineCustomElement$1();
+
+const PnSidenav = PnSidenav$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnSidenav, defineCustomElement };

package/components/pn-site-footer-col.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface PnSiteFooterCol extends Components.PnSiteFooterCol, HTMLElement {}
+export const PnSiteFooterCol: {
+  prototype: PnSiteFooterCol;
+  new (): PnSiteFooterCol;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pn-site-footer-col.js

@@ -0,0 +1,6 @@
+import { P as PnSiteFooterCol$1, d as defineCustomElement$1 } from './pn-site-footer-col2.js';
+
+const PnSiteFooterCol = PnSiteFooterCol$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnSiteFooterCol, defineCustomElement };

package/components/pn-site-footer-col2.js

@@ -0,0 +1,33 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnSiteFooterColCss = "pn-site-footer-col:not([theme=dotcom]){min-width:15em;padding:2.5em 1.5rem 0;width:100%}@media screen and (min-width: 33.125em){pn-site-footer-col:not([theme=dotcom]){width:50%}}@media screen and (min-width: 60em){pn-site-footer-col:not([theme=dotcom]){max-width:25%}}pn-site-footer-col:not([theme=dotcom]) ul{list-style-type:none;padding:0;margin:0}pn-site-footer-col:not([theme=dotcom]) li{margin-bottom:1.6rem}pn-site-footer-col:not([theme=dotcom]) a{text-decoration:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}pn-site-footer-col:not([theme=dotcom]) a h3{color:#000000}pn-site-footer-col:not([theme=dotcom]) p{margin-top:0;margin-bottom:1rem}pn-site-footer-col[theme=dotcom]{width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pn-site-footer-col[theme=dotcom] *{color:#FFFFFF}@media screen and (min-width: 768px){pn-site-footer-col[theme=dotcom]{width:33%;padding-left:0.8rem;padding-right:0.8rem}pn-site-footer-col[theme=dotcom]:nth-child(1),pn-site-footer-col[theme=dotcom]:nth-child(4){padding-left:0}pn-site-footer-col[theme=dotcom]:nth-child(3),pn-site-footer-col[theme=dotcom]:nth-child(5){padding-right:0}}@media screen and (min-width: 1024px){pn-site-footer-col[theme=dotcom]{width:20%;padding-left:1.6rem;padding-right:1.6rem}pn-site-footer-col[theme=dotcom]:nth-child(1){width:20%;padding-left:0}pn-site-footer-col[theme=dotcom]:nth-child(4){padding-left:1.6rem}pn-site-footer-col[theme=dotcom]:nth-child(3){padding-right:1.6rem}pn-site-footer-col[theme=dotcom]:nth-child(5){padding-right:0}}pn-site-footer-col[theme=dotcom] h3{margin-bottom:1rem;font-weight:700;font-size:2rem;line-height:2.2rem}@media screen and (min-width: 1200px){pn-site-footer-col[theme=dotcom] h3{font-size:2.4rem;line-height:2.64rem}}pn-site-footer-col[theme=dotcom] ul{list-style-type:none;padding:0;margin:0;margin-bottom:1.4rem}pn-site-footer-col[theme=dotcom] ul li{margin-bottom:1rem}pn-site-footer-col[theme=dotcom] a{text-decoration:none;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;font-weight:400;font-size:1.6rem;line-height:2.24rem}pn-site-footer-col[theme=dotcom] a h3{color:#FFFFFF}pn-site-footer-col[theme=dotcom] p{margin-top:0;margin-bottom:1rem}pn-site-footer-col[theme=dotcom] div{min-height:150px;margin-bottom:1.4rem}pn-site-footer-col[theme=dotcom] div p:nth-child(odd){font-weight:500}";
+
+const PnSiteFooterCol = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.theme = null;
+  }
+  render() {
+    return (h(Host, null, h("slot", null)));
+  }
+  static get style() { return pnSiteFooterColCss; }
+}, [4, "pn-site-footer-col", {
+    "theme": [513]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-site-footer-col"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-site-footer-col":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnSiteFooterCol);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnSiteFooterCol as P, defineCustomElement as d };