@postnord/pn-marketweb-components 2.1.7 → 2.1.9

package/components/pn-mainnav-level2.js

@@ -0,0 +1,117 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { o as onChange, s as state } from './pn-mainnav-store.js';
+import { d as defineCustomElement$1 } from './pn-mainnav-link2.js';
+
+const pnMainnavLevelCss = "pn-mainnav-level{display:block}pn-mainnav-level:not(.hydrated){max-height:5.6rem;overflow:hidden}pn-mainnav-level[data-level=\"1\"]{width:100%;right:0;overflow-y:scroll;overflow-x:hidden;-ms-flex:1;flex:1}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"1\"]{width:auto;overflow:initial}pn-mainnav-level[data-level=\"1\"]::-webkit-scrollbar{display:none}}pn-mainnav-level[data-level=\"2\"]{position:absolute;top:0;bottom:0;left:0;width:100vw;padding:0;background-color:#FFFFFF;z-index:1;-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;overflow:scroll;visibility:hidden}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"]{left:0;top:calc(100% + 1rem);bottom:auto;border-radius:1.6rem;width:auto;padding:1.6rem 1.6rem 0 1.6rem;-webkit-box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);-moz-box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);box-shadow:0 0.06rem 0.18rem rgba(0, 0, 0, 0.1), 0 0.32rem 0.72rem rgba(0, 0, 0, 0.13);height:auto;z-index:3;display:none}pn-mainnav-level[data-level=\"2\"][data-menuitem-rightaligned=true]{right:0;left:unset}}@media screen and (max-height: 33.125em){pn-mainnav-level[data-level=\"2\"]{-ms-overflow-style:none;scrollbar-width:none}pn-mainnav-level[data-level=\"2\"]::-webkit-scrollbar{display:none}}pn-mainnav-level[data-level=\"2\"][aria-hidden=false]{-webkit-transform:translateX(0);transform:translateX(0);visibility:visible}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][aria-hidden=false]{display:block;overflow:visible}pn-mainnav-level[data-level=\"2\"][aria-hidden=false]:not([data-level-listcount=\"1\"]){display:grid;grid-template-columns:minmax(12em, 20em) 1fr;grid-template-rows:auto auto;gap:0px 1.6rem;grid-template-areas:\"top top\" \"left right\"}}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][data-level-alignment=left]{right:0;left:unset}}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"][data-level-alignment=center]{left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}}pn-mainnav-level[data-level=\"2\"] a{color:#005D92;text-decoration:none}pn-mainnav-level [slot=top]{display:-ms-flexbox;display:flex}@media screen and (min-width: 48em){pn-mainnav-level [slot=top]{display:none}}[data-menu-currentlevel=\"2\"] pn-mainnav-level [slot=footer]{display:none;-ms-scroll-chaining:none;overscroll-behavior:contain}.mainnav-level-header{grid-area:top}.mainnav-level-header>label{position:absolute;width:0.1rem;height:0.1rem;padding:0;margin:-0.1rem;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;white-space:nowrap}.mainnav-level-header>button{display:block;position:relative;border:none;background-color:transparent;color:#005D92;padding:2.4rem 0 2.4rem 6.2rem;width:100%;text-align:left}@media screen and (min-width: 64em){.mainnav-level-header>button{display:none;speak:none}}.mainnav-level-header>button>pn-icon{speak:none;position:absolute;height:2.4rem;width:2.4rem;left:3rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}[data-level=\"2\"] .mainnav-level-header>pn-mainnav-link>a{font-size:2.4rem}";
+
+const PnMainnavLevel = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.label = "";
+    this.level = 1;
+    this.levelId = "";
+    this.isOpen = false;
+    this.parentName = "";
+    this.parentHref = "";
+    this.parentLinkId = "";
+    this.listCount = 0;
+    this.alignment = "right";
+  }
+  async componentWillLoad() {
+    this.setState();
+    onChange("openLevel", () => {
+      this.onChangeOpenLevel();
+    });
+  }
+  setState() {
+    this.listCount = this.hostElement.querySelectorAll(":scope > pn-mainnav-list").length;
+    const parentElm = this.hostElement.parentElement;
+    if (parentElm.tagName.toLowerCase() !== 'nav') {
+      this.level = 2;
+    }
+    if (parentElm.tagName.toLowerCase() === 'pn-mainnav-link') {
+      this.parentName = parentElm.getAttribute('name') + '';
+      if (!this.label && this.parentName) {
+        this.label = this.parentName;
+      }
+      this.parentHref = parentElm.getAttribute('href') + '';
+      this.parentLinkId = parentElm.getAttribute('linkid') + '';
+      const parentLinkName = this.parentName.toLowerCase().replace(/\W/gi, '_');
+      this.levelId = `mainnav-lvl${this.level}-${parentLinkName}`;
+    }
+  }
+  onOpen() {
+    if (this.level === 2) {
+      requestAnimationFrame(() => {
+        const levelClientRect = this.hostElement.getClientRects()[0];
+        if (!levelClientRect) {
+          return;
+        }
+        const navElm = this.hostElement.parentElement.parentElement.parentElement.parentElement;
+        if (navElm && navElm.tagName.toLowerCase() === "nav") {
+          const navClientRect = navElm.getClientRects()[0];
+          if (!navClientRect) {
+            return;
+          }
+          if (levelClientRect.right > window.innerWidth) {
+            const levelParentRect = this.hostElement.parentElement.getClientRects()[0];
+            if ((levelParentRect.left - levelClientRect.width) < 0) {
+              this.alignment = "center";
+            }
+            else {
+              this.alignment = "left";
+            }
+          }
+        }
+      });
+    }
+  }
+  onChangeOpenLevel() {
+    this.isOpen = state.openLevel === this.levelId;
+    state.currentLevel = this.level;
+  }
+  render() {
+    return (h(Host, Object.assign({ role: "navigation" }, ((this.level > 1 && this.levelId) ? { 'aria-hidden': (!this.isOpen) + '' } : {}), { "data-level-listcount": this.listCount + '', "data-level-alignment": this.alignment, "data-level": this.level + '' }, (this.levelId ? { id: this.levelId } : {})), (this.level > 1) ? (h("div", { class: "mainnav-level-header" }, h("label", { htmlFor: this.levelId }, state.i18n.menuGoBackButton), h("button", { class: "secondlevel-backbtn", onClick: () => {
+        state.openLevel = '';
+        state.currentLevel = 1;
+      }, "aria-expanded": (state.openLevel === this.levelId) + '' }, h("pn-icon", { symbol: "arrow-left", color: "blue700" }), state.i18n.menuStartButton), (this.parentHref && this.label) ? h("pn-mainnav-link", { href: this.parentHref, name: this.label, linkid: this.parentLinkId }) : null)) : null, h("slot", { name: "top" }), h("slot", null), h("slot", { name: "additional" }), h("slot", { name: "footer" })));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "label": ["setState"],
+    "isOpen": ["onOpen"]
+  }; }
+  static get style() { return pnMainnavLevelCss; }
+}, [4, "pn-mainnav-level", {
+    "label": [1537],
+    "level": [32],
+    "levelId": [32],
+    "isOpen": [32],
+    "parentName": [32],
+    "parentHref": [32],
+    "parentLinkId": [32],
+    "listCount": [32],
+    "alignment": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-mainnav-level", "pn-mainnav-link"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-mainnav-level":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnMainnavLevel);
+      }
+      break;
+    case "pn-mainnav-link":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnMainnavLevel as P, defineCustomElement as d };

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

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

package/components/pn-mainnav-link.js

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

package/components/pn-mainnav-link2.js

@@ -0,0 +1,57 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { s as state } from './pn-mainnav-store.js';
+
+const pnMainnavLinkCss = "pn-mainnav-link{display:block}pn-mainnav-link button,pn-mainnav-link a{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}pn-mainnav-link button:hover,pn-mainnav-link button:focus,pn-mainnav-link a:hover,pn-mainnav-link a:focus{background-color:#FFFFFF;color:#005D92;outline:0;-webkit-box-shadow:none;box-shadow:none}pn-mainnav-link button:active,pn-mainnav-link a:active{background-color:#F3F2F2;color:#00A0D6;-webkit-box-shadow:none;box-shadow:none}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link{height:100%;padding-left:0;position:relative;scroll-snap-align:center}}[data-level=\"1\"] pn-mainnav-link:first-child{border-top:0.1rem solid #F3F2F2}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link:first-child{border:0}}[data-level=\"1\"] pn-mainnav-link>button,[data-level=\"1\"] pn-mainnav-link>a{font-size:2rem;width:100%;border-bottom:0.1rem solid #F3F2F2;height:auto;padding:1.9rem 0 1.9rem 3rem}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link>button,[data-level=\"1\"] pn-mainnav-link>a{height:100%;border:0;font-size:1.6rem;font-weight:normal;position:relative;outline:0;overflow:hidden;padding:1.6rem 1.6rem;white-space:nowrap}[data-level=\"1\"] pn-mainnav-link>button::before,[data-level=\"1\"] pn-mainnav-link>a::before{content:\"\";background-color:#00A0D6;position:absolute;bottom:0;left:0;width:100%;height:0.5em;border-radius:0.5em 0.5em 0 0;-webkit-transform:translateY(100%);transform:translateY(100%);-webkit-transition:-webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:-webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92), -webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}[data-level=\"1\"] pn-mainnav-link>button:hover::before,[data-level=\"1\"] pn-mainnav-link>button:focus::before,[data-level=\"1\"] pn-mainnav-link>a:hover::before,[data-level=\"1\"] pn-mainnav-link>a:focus::before{-webkit-transform:translateY(0);transform:translateY(0)}[data-level=\"1\"] pn-mainnav-link>button:active,[data-level=\"1\"] pn-mainnav-link>a:active{outline:0;-webkit-box-shadow:none;box-shadow:none;color:#005D92}[data-level=\"1\"] pn-mainnav-link>button:active::before,[data-level=\"1\"] pn-mainnav-link>a:active::before{background-color:#8EDDF9;-webkit-transform:translateY(0);transform:translateY(0)}}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link>button:hover,[data-level=\"1\"] pn-mainnav-link>button:focus,[data-level=\"1\"] pn-mainnav-link>a:hover,[data-level=\"1\"] pn-mainnav-link>a:focus{text-decoration:none}}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link>button[aria-expanded=true]::before,[data-level=\"1\"] pn-mainnav-link>a[aria-expanded=true]::before{content:\"\";background-color:#00A0D6;position:absolute;bottom:0;left:0;width:100%;height:0.5em;border-radius:0.5em 0.5em 0 0;-webkit-transform:translateY(0);transform:translateY(0);-webkit-transition:-webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:-webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92);transition:transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92), -webkit-transform 0.1s cubic-bezier(0.64, 0.01, 0.67, 0.92)}}[data-level=\"1\"] pn-mainnav-link [aria-expanded=true] .first-level_icon{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}[data-level=\"1\"] pn-mainnav-link pn-icon.first-level_icon{-webkit-transition:0.25s linear transform;transition:0.25s linear transform;width:1.92rem;height:1.92rem;display:none}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link pn-icon.first-level_icon{display:block}}[data-level=\"1\"] pn-mainnav-link pn-icon.first-level_arrow{display:block;position:absolute;height:2.4rem;width:2.4rem;right:2.4rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%)}@media screen and (min-width: 64em){[data-level=\"1\"] pn-mainnav-link pn-icon.first-level_arrow{display:none}}[data-level=\"1\"] pn-mainnav-link pn-icon svg{pointer-events:none;speak:none;width:100%;height:100%}@media screen and (min-width: 64em){pn-mainnav-level[data-level=\"2\"]:not([data-level-listcount=\"1\"]) pn-mainnav-list:last-child pn-mainnav-link>a{min-width:unset}}[data-level=\"2\"] pn-mainnav-link{position:static;display:inline-block;width:100%;height:auto}@media screen and (min-width: 64em){[data-level=\"2\"] pn-mainnav-link{padding-left:0;margin-bottom:1.6rem}}[data-level=\"2\"] pn-mainnav-link>a{font-size:1.6rem;border-bottom:0.1rem solid #F3F2F2;padding:2.2rem 0 2.2rem 3rem;white-space:normal}@media screen and (min-width: 64em){[data-level=\"2\"] pn-mainnav-link>a{min-width:16em;border:0;border-radius:1rem;padding:1.4rem 1.6rem}}[data-level=\"2\"] pn-mainnav-link>a:hover{background-color:#FFFFFF;color:#005D92}[data-level=\"2\"] pn-mainnav-link>a:hover,[data-level=\"2\"] pn-mainnav-link>a:focus{-webkit-box-shadow:none;box-shadow:none}@media screen and (min-width: 64em){[data-level=\"2\"] pn-mainnav-link>a:hover,[data-level=\"2\"] pn-mainnav-link>a:focus{background-color:#F3F2F2;color:#005D92;text-decoration:underline;outline:0}}[data-level=\"2\"] pn-mainnav-link>a:hover::before,[data-level=\"2\"] pn-mainnav-link>a:focus::before{content:none}[data-level=\"2\"] pn-mainnav-link>a:active{-webkit-box-shadow:none;box-shadow:none}@media screen and (min-width: 64em){[data-level=\"2\"] pn-mainnav-link>a:active{background-color:#F3F2F2;color:#00A0D6;outline:0}}[data-level=\"2\"] pn-mainnav-link>a:active::before{content:none}[data-level=\"2\"] pn-mainnav-link pn-icon{display:inline-block;margin-left:0.2em;min-width:1.5rem;width:1.5rem;height:1.5rem}";
+
+const PnMainnavLink = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.name = "";
+    this.href = "";
+    this.target = "";
+    this.linkid = "";
+    this.levelId = "";
+    this.open = false;
+    this.hasChildren = false;
+  }
+  componentWillLoad() {
+    this.hasChildren = this.hostElement.querySelectorAll("pn-mainnav-level").length > 0;
+    if (this.hasChildren && this.name) {
+      const safeLevelName = this.name.toLowerCase().replace(/\W/gi, '_');
+      this.levelId = `mainnav-lvl${2}-${safeLevelName}`;
+    }
+  }
+  setOpenMenuLevel() {
+    state.openLevel = (state.openLevel + "" === this.levelId + "") ? '' : this.levelId;
+  }
+  render() {
+    return (h(Host, { role: "listitem", name: this.name, href: this.href, linkid: this.linkid }, this.hasChildren ? (h("button", { onClick: this.setOpenMenuLevel.bind(this), "aria-controls": this.levelId, "aria-pressed": "", "aria-expanded": ((state.openLevel + "" === this.levelId + "")) + '' }, this.name, h("pn-icon", { class: "first-level_icon", symbol: "angle-small-down", color: "blue700" }), h("pn-icon", { class: "first-level_arrow", symbol: "arrow-right", color: "blue700" }))) : (h("a", Object.assign({ href: this.href }, (this.target ? { target: this.target } : {}), (this.target === "_blank" ? { rel: "nofollow noopener" } : {}), (this.linkid ? { id: this.linkid } : {})), this.name, this.target === "_blank" ? (h("pn-icon", { symbol: "open-in-new", color: "blue700" })) : null)), h("slot", null)));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnMainnavLinkCss; }
+}, [4, "pn-mainnav-link", {
+    "name": [1],
+    "href": [1],
+    "target": [1],
+    "linkid": [1],
+    "levelId": [32],
+    "open": [32],
+    "hasChildren": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-mainnav-link"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-mainnav-link":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnMainnavLink);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnMainnavLink as P, defineCustomElement as d };

package/components/pn-mainnav-list.d.ts

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

package/components/pn-mainnav-list.js

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

package/components/pn-mainnav-list2.js

@@ -0,0 +1,39 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnMainnavListCss = "pn-mainnav-list{display:block;overflow:visible;list-style:none;margin:0;padding:0;grid-area:right}@media screen and (min-width: 64em){pn-mainnav-list+pn-mainnav-list{grid-area:left;border-right:0.1rem solid #D3CECB;margin-bottom:1.6rem;margin-right:-0.7rem;padding-right:0.7rem}}[data-level=\"1\"]>pn-mainnav-list{overflow:scroll;-webkit-overflow-scrolling:touch}@media screen and (min-width: 64em){[data-level=\"1\"]>pn-mainnav-list{height:100%;display:-ms-flexbox;display:flex;-ms-flex-flow:row;flex-flow:row;overflow:visible;padding:0}}@media screen and (min-width: 64em){[data-level=\"2\"]>pn-mainnav-list[data-navlist-showcolumns=true]{-webkit-column-count:2;-moz-column-count:2;column-count:2;-webkit-column-gap:1.6rem;-moz-column-gap:1.6rem;column-gap:1.6rem;padding-bottom:1.6rem}}.mainnav-list-heading{display:none;font-weight:bold;-webkit-column-span:all;-moz-column-span:all;column-span:all;font-size:1.8rem;padding:1.4rem 1.4rem 1.4rem 4.8rem}@media screen and (min-width: 64em){.mainnav-list-heading{display:block;padding:0 1.4rem 1.4rem 1.4rem}}";
+
+const PnMainnavList = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.heading = "";
+    this.linkCount = 0;
+  }
+  componentWillLoad() {
+    this.linkCount = this.hostElement.querySelectorAll(":scope > pn-mainnav-link").length;
+  }
+  render() {
+    return (h(Host, { class: "mainnav-list", role: "list", "data-navlist-itemcount": this.linkCount + '', "data-navlist-showcolumns": (this.linkCount >= 8) + '' }, (this.heading) ? h("div", { class: "mainnav-list-heading" }, this.heading) : null, h("slot", null)));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnMainnavListCss; }
+}, [4, "pn-mainnav-list", {
+    "heading": [1],
+    "linkCount": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-mainnav-list"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-mainnav-list":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnMainnavList);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnMainnavList as P, defineCustomElement as d };

package/{esm/pn-mainnav-store-28571e54.js → components/pn-mainnav-store.js}

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

package/components/pn-mainnav.d.ts

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

package/components/pn-mainnav.js

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

package/components/pn-mainnav2.js

@@ -0,0 +1,120 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { s as state } from './pn-mainnav-store.js';
+
+const translations = {
+  'sv': {
+    "menuHomeButton": "Hem",
+    "menuGoBackButton": "Gå tillbaka",
+    "mainMenuButton": "Meny",
+    "menuStartButton": "Start",
+    "navLabel": "Huvudnavigation",
+  },
+  'en': {
+    "menuHomeButton": "Home",
+    "menuGoBackButton": "Go back",
+    "mainMenuButton": "Menu",
+    "menuStartButton": "Start",
+    "navLabel": "Main navigation",
+  },
+  'da': {
+    "menuHomeButton": "Hjem",
+    "menuGoBackButton": "Gå tilbage",
+    "mainMenuButton": "Menu",
+    "menuStartButton": "Start",
+    "navLabel": "Hovednavigation"
+  },
+  'no': {
+    "menuHomeButton": "Hjem",
+    "menuGoBackButton": "Gå tilbake",
+    "mainMenuButton": "Meny",
+    "menuStartButton": "Start",
+    "navLabel": "Hovednavigasjon",
+  },
+  'de': {
+    "menuHomeButton": "Home",
+    "menuGoBackButton": "Geh zurück",
+    "mainMenuButton": "Menü",
+    "menuStartButton": "Start",
+    "navLabel": "Hauptnavigation",
+  },
+};
+
+const pnMainnavCss = "pn-mainnav{display:-ms-flexbox;display:flex;-ms-flex-flow:row-reverse;flex-flow:row-reverse;position:relative;width:100%;min-height:5.1rem}@media screen and (min-width: 48em){pn-mainnav{-ms-flex-flow:row;flex-flow:row}}@media screen and (min-width: 64em){pn-mainnav{-ms-flex-flow:column;flex-flow:column}}@media screen and (min-width: 64em){pn-mainnav [slot=footer]{display:none}}pn-mainnav>nav{height:auto;width:100vw;background-color:#FFFFFF;z-index:2;-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;display:-ms-flexbox;display:flex;-ms-flex-flow:column;flex-flow:column;visibility:hidden;position:fixed;top:3em;bottom:0;left:0}@media screen and (min-width: 48em){pn-mainnav>nav{top:6.5em}}pn-mainnav>nav[data-menu-open=true]{visibility:visible;-webkit-transform:translateX(0);transform:translateX(0)}@media screen and (min-width: 64em){pn-mainnav>nav{-ms-flex-flow:row-reverse;flex-flow:row-reverse;top:0;position:static;height:auto;width:100%;-ms-flex-pack:justify;justify-content:space-between;visibility:visible;-webkit-transform:translateX(0);transform:translateX(0)}}pn-mainnav>nav a{text-decoration:none}pn-mainnav>nav button{cursor:pointer}.mainnav-toggle{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-item-align:center;align-self:center}@media screen and (min-width: 64em){.mainnav-toggle{display:none}}.mainnav-toggle>button{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;background-color:#005D92;color:#FFFFFF;border-radius:2.4rem;border:none;padding:0.6rem 1.6rem;cursor:pointer;font-size:1.6rem}.mainnav-toggle>button:focus{outline:0}.mainnav-toggle>button pn-icon{margin-left:0.8rem;display:block}.mainnav-toggle>button svg{display:block;margin:-0.2rem -0.5rem -0.2rem 0;height:1.9rem;width:1.9rem}";
+
+const PnMainnav = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.menuLanguageChange = createEvent(this, "menuLanguageChange", 7);
+    this.marketChange = createEvent(this, "marketChange", 7);
+    this.menuOpenChange = createEvent(this, "menuOpenChange", 7);
+    this.market = "se";
+    this.language = "sv";
+    this.navigationId = "mainnav";
+    this.openMenu = false;
+    this.navLabel = "";
+  }
+  componentWillLoad() {
+    this.init();
+    document.removeEventListener("mousedown", this._onClickOutside.bind(this));
+    document.addEventListener("mousedown", this._onClickOutside.bind(this));
+  }
+  async init() {
+    this.setLanguage();
+    this.setMarket();
+  }
+  _onClickOutside(event) {
+    const clickedOutside = !this.hostElement.contains(event.target);
+    if (clickedOutside) {
+      state.openLevel = "";
+    }
+  }
+  setLanguage() {
+    this.menuLanguageChange.emit(this.language);
+  }
+  setMarket() {
+    this.marketChange.emit(this.market);
+  }
+  onLanguageChange(event) {
+    if (translations[event.detail]) {
+      state.i18n = translations[event.detail];
+      if (!this.navLabel) {
+        this.navLabel = state.i18n.navLabel;
+      }
+    }
+  }
+  setMenuOpenState() {
+    state.openMenu = (!state.openMenu);
+    this.menuOpenChange.emit(state.openMenu);
+  }
+  onOpenMenuLevelChange(event) {
+    state.openLevel = event.detail;
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "mainnav-toggle" }, h("button", { "aria-controls": this.navigationId, "aria-expanded": state.openMenu + '', onClick: this.setMenuOpenState.bind(this) }, state.i18n.mainMenuButton, h("pn-icon", { symbol: state.openMenu ? "close" : "bars", color: "white" }))), h("nav", { class: "mainnav", "aria-label": this.navLabel, "data-menu-open": state.openMenu + '', "data-menu-currentlevel": state.currentLevel, id: this.navigationId }, h("slot", null))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnMainnavCss; }
+}, [4, "pn-mainnav", {
+    "market": [1],
+    "language": [1],
+    "navigationId": [1, "navigation-id"],
+    "openMenu": [1028, "open-menu"],
+    "navLabel": [1, "nav-label"]
+  }, [[0, "language", "setLanguage"], [0, "market", "setMarket"], [0, "menuLanguageChange", "onLanguageChange"], [0, "setmenuopenstate", "setMenuOpenState"], [0, "openMenuLevelChange", "onOpenMenuLevelChange"]]]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-mainnav"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-mainnav":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnMainnav);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnMainnav as P, defineCustomElement as d };

package/components/pn-marketweb-input.d.ts

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

package/components/pn-marketweb-input.js

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

package/components/pn-marketweb-input2.js

@@ -0,0 +1,102 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const pnMarketwebInputCss = "pn--marketweb-input{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-direction:column;flex-direction:column}pn-marketweb-input input{padding:0.75em;font-size:1em;font-weight:500;-webkit-font-smoothing:antialiased;outline:none;border-radius:0.8rem;border:0.1rem solid #5E554A;-webkit-transition:border 0.15s, -webkit-box-shadow 0.15s;transition:border 0.15s, -webkit-box-shadow 0.15s;transition:box-shadow 0.15s, border 0.15s;transition:box-shadow 0.15s, border 0.15s, -webkit-box-shadow 0.15s;color:#000000;width:100%}pn-marketweb-input input::-webkit-input-placeholder{color:#969087;font-weight:normal}pn-marketweb-input input::-moz-placeholder{color:#969087;font-weight:normal}pn-marketweb-input input:-ms-input-placeholder{color:#969087;font-weight:normal}pn-marketweb-input input::-ms-input-placeholder{color:#969087;font-weight:normal}pn-marketweb-input input::placeholder{color:#969087;font-weight:normal}pn-marketweb-input input:focus{border:0.1rem solid #005D92;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005D92}pn-marketweb-input input:hover{border:0.1rem solid #00A0D6}pn-marketweb-input input:disabled{background:#F3F2F2;border:none}pn-marketweb-input>.input-container{position:relative}pn-marketweb-input>.input-container>button{position:absolute;right:1.2rem;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#005D92;padding:0.6rem;border-radius:0.8rem;outline:none;-webkit-transition:border 0.1s, background 0.2s, color 0.1s;transition:border 0.1s, background 0.2s, color 0.1s;border:0.1rem solid transparent}pn-marketweb-input>.input-container>button:focus{border:0.1rem solid #005D92}pn-marketweb-input>.input-container>button:hover{background:#E0F8FF}pn-marketweb-input>.input-container>button:active{background:#005D92;color:white}pn-marketweb-input>.input-container>svg{position:absolute;right:0.75em;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);height:1.5em;width:1.5em;pointer-events:none}pn-marketweb-input>.input-container>svg polyline{stroke-linecap:round;-webkit-transition:stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);transition:stroke-dashoffset 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86)}pn-marketweb-input>.input-container>svg.pn-input-checkmark polyline{stroke:#005E41;stroke-dashoffset:23;stroke-dasharray:23}pn-marketweb-input .label-container{margin-bottom:0.4rem;color:#5E554A;font-size:0.875em;display:-ms-flexbox;display:flex;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:end;align-items:flex-end}pn-marketweb-input .label-container label{cursor:pointer;-webkit-transition:color 0.2s;transition:color 0.2s}.label-container label.char-count{-ms-flex-negative:0;flex-shrink:0;padding-left:0.5em}pn-marketweb-input small{font-size:0.75em;font-size:max(.6em, 1.2rem);-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);transition:-webkit-transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);transition:transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);transition:transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86), -webkit-transform 0.2s cubic-bezier(0.79, 0.14, 0.15, 0.86);margin-top:0.5em;color:#5E554A}pn-input.error{color:#A70707}pn-input.error label{color:#A70707}pn-input.error small{color:#A70707}pn-input.error small>pn-icon{margin-right:0.25em}pn-input.error input{border:0.1rem solid #A70707}pn-input.error input:focus{border:0.1rem solid #A70707;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #A70707;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #A70707}pn-input.error input:hover{border:0.1rem solid #F06365}pn-input.valid{color:#005E41}pn-input.valid .input-container>svg.pn-input-checkmark polyline{stroke-dashoffset:0}pn-input.valid label{color:#005E41}pn-input.valid input{border:0.1rem solid #005E41}pn-input.valid input:focus{border:0.1rem solid #005E41;-webkit-box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005E41;box-shadow:0 0 0 0.2rem #fff, 0 0 0 0.4rem #005E41}pn-input.valid input:hover{border:0.1rem solid #5EC584}pn-marketweb-input.password input{padding-right:4em}pn-marketweb-input.icon input{padding-right:2.3em}";
+
+const PnMarketwebInput = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.disabled = false;
+    this.error = '';
+    this.invalid = false;
+    this.helpertext = '';
+    this.label = '';
+    this.placeholder = '';
+    this.inputid = `${Math.random()}`;
+    this.name = '';
+    this.required = null;
+    this.type = 'text';
+    this.autocomplete = '';
+    this.valid = null;
+    this.value = '';
+    this.maxlength = '';
+    this.min = '';
+    this.max = '';
+    this.step = '';
+    this.pattern = '';
+    this.showText = false;
+  }
+  getTextMessage() {
+    if (this.error)
+      return this.error;
+    if (this.helpertext)
+      return this.helpertext;
+    return null;
+  }
+  toggleTextVisibility() {
+    this.showText = !this.showText;
+  }
+  getInputType() {
+    let types = ['text', 'password', 'url', 'tel', 'search', 'number', 'email', 'date', 'datetime-local', 'month', 'week', 'time'];
+    return (types.includes(this.type) && !this.showText) ? this.type : 'text';
+  }
+  setVal(e) {
+    var _a;
+    const target = (_a = e.composedPath) === null || _a === void 0 ? void 0 : _a.call(e)[0];
+    this.value = target.value;
+  }
+  getClassNames() {
+    let classNames = 'pn-input ';
+    if (this.error.length > 0 || this.invalid)
+      classNames += 'error ';
+    if (this.valid)
+      classNames += 'valid ';
+    if (this.type === 'password')
+      classNames += 'password ';
+    if (this.error || this.invalid || this.valid)
+      classNames += 'icon ';
+    return classNames;
+  }
+  render() {
+    return (h(Host, { class: this.getClassNames() }, (this.label || this.maxlength) &&
+      h("div", { class: "label-container" }, this.label && h("label", { htmlFor: this.inputid }, this.label), parseInt(this.maxlength) > 0 && h("label", { class: "char-count", htmlFor: this.inputid }, `${this.value.length}/${this.maxlength}`)), h("div", { class: "input-container" }, h("input", { type: this.getInputType(), value: this.value, id: this.inputid, name: this.name, placeholder: this.placeholder, disabled: this.disabled, autocomplete: this.autocomplete, onInput: (e) => this.setVal(e), maxlength: this.maxlength ? this.maxlength : null, min: (this.min ? this.min : null), max: (this.max ? this.max : null), step: (this.step ? this.step : null), pattern: (this.pattern ? this.pattern : null) }), h("svg", { class: "pn-input-checkmark", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none" }, h("polyline", { class: "checkmark-path", points: "4,12 9,17 20,6", "stroke-width": "3" })), this.type === 'password' && !this.disabled && h("button", { onClick: () => this.toggleTextVisibility() }, "Show")), this.getTextMessage() &&
+      h("small", null, this.error && h("pn-icon", { symbol: "alert-exclamation-circle", small: true, color: "warning" }), this.getTextMessage())));
+  }
+  static get style() { return pnMarketwebInputCss; }
+}, [0, "pn-marketweb-input", {
+    "disabled": [4],
+    "error": [1],
+    "invalid": [4],
+    "helpertext": [1],
+    "label": [1],
+    "placeholder": [1],
+    "inputid": [1],
+    "name": [1],
+    "required": [4],
+    "type": [1025],
+    "autocomplete": [1],
+    "valid": [4],
+    "value": [1],
+    "maxlength": [1],
+    "min": [1],
+    "max": [1],
+    "step": [1],
+    "pattern": [1],
+    "showText": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-marketweb-input"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-marketweb-input":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnMarketwebInput);
+      }
+      break;
+  } });
+}
+defineCustomElement();
+
+export { PnMarketwebInput as P, defineCustomElement as d };

package/components/pn-marketweb-search.d.ts

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