@postnord/pn-marketweb-components 2.0.3-beta3 → 2.0.4

package/umd/modules/@postnord/web-components/components/index.d.ts

@@ -0,0 +1,26 @@
+/* PostnordWebComponents custom elements */
+
+import type { Components, JSX } from "../types/components";
+
+/**
+ * Used to manually set the base path where assets can be found.
+ * If the script is used as "module", it's recommended to use "import.meta.url",
+ * such as "setAssetPath(import.meta.url)". Other options include
+ * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
+ * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
+ * But do note that this configuration depends on how your script is bundled, or lack of
+ * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * will have to ensure the static assets are copied to its build directory.
+ */
+export declare const setAssetPath: (path: string) => void;
+
+export interface SetPlatformOptions {
+  raf?: (c: FrameRequestCallback) => number;
+  ael?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+  rel?: (el: EventTarget, eventName: string, listener: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions) => void;
+}
+export declare const setPlatformOptions: (opts: SetPlatformOptions) => void;
+
+export type { Components, JSX };
+
+export * from '../types';

package/umd/modules/@postnord/web-components/components/index.js

@@ -0,0 +1 @@
+export { setAssetPath, setPlatformOptions } from '@stencil/core/internal/client';

package/umd/modules/@postnord/web-components/components/pn-accordion-row.d.ts

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

package/umd/modules/@postnord/web-components/components/pn-accordion-row.js

@@ -0,0 +1,66 @@
+import { HTMLElement, createEvent, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+
+const pnAccordionRowCss = "pn-accordion-row{position:relative;color:black;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-transition:-webkit-transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);transition:-webkit-transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.7, 0, 0.3, 1)}pn-accordion-row+pn-accordion-row{border-top:0.1rem solid #D3CECB;margin-top:0.4rem}pn-accordion-row[data-flipping]{-webkit-transform:translateY(calc(-1px * var(--dy)));transform:translateY(calc(-1px * var(--dy)));-webkit-transition:none;transition:none}pn-accordion-row .accordion-title{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;z-index:0;width:100%;font-weight:400;padding:1em;-webkit-transition:background 0.2s, -webkit-box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1);transition:background 0.2s, -webkit-box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1);transition:background 0.2s, box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1);transition:background 0.2s, box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1), -webkit-box-shadow 0.1s cubic-bezier(0.7, 0, 0.3, 1);border-radius:0.8rem;overflow:hidden;position:relative;background:#FFFFFF;border:none;outline:none;cursor:pointer;font-size:1em;}pn-accordion-row .accordion-title:hover{background:#E0F8FF}pn-accordion-row .accordion-title:focus{-webkit-box-shadow:0 0 0 0.2rem white, 0 0 0 0.4rem #005D92;box-shadow:0 0 0 0.2rem white, 0 0 0 0.4rem #005D92}pn-accordion-row .accordion-title>svg{margin-left:auto;-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s;transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s;transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s;transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s, -webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.25s}pn-accordion-row .accordion-title>svg path{fill:#005D92}pn-accordion-row .accordion-title .pn-ripple{-webkit-animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1) forwards;animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1) forwards;position:absolute;border-radius:50%;background:#005D92;-webkit-transform:translate(-50%, -50%) scale(0);transform:translate(-50%, -50%) scale(0);opacity:0.05;pointer-events:none}@-webkit-keyframes ripple{to{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:0}}@keyframes ripple{to{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:0}}pn-accordion-row .accordion-content{z-index:2;top:0;left:0;width:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}pn-accordion-row .accordion-content .content{position:absolute;left:0;right:0;width:100%;top:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;pointer-events:none;opacity:0;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;padding:1em}pn-accordion-row[data-state=open] .accordion-content .content{position:relative;pointer-events:unset;opacity:1;-webkit-transition-delay:0.2s;transition-delay:0.2s}pn-accordion-row[data-state=open] .accordion-title svg{-webkit-transform:rotate(-180deg);transform:rotate(-180deg);-webkit-transition-delay:0s;transition-delay:0s}";
+
+let PnaccordionItem = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.togglerow = createEvent(this, "togglerow", 7);
+    /** The label/title of the accordion row, you can also pass a slot with the name "label" if you want to put custom content in there */
+    this.label = null;
+    this.rippleContainer = null;
+  }
+  componentWillLoad() {
+    const slottedLabel = this.hostElement.querySelector('[slot="label"]');
+    this.label = slottedLabel ? null : this.label;
+  }
+  componentDidLoad() {
+    this.rippleContainer = this.hostElement.querySelector('.accordion-title');
+  }
+  toggleHandler() {
+    this.togglerow.emit(this.hostElement);
+  }
+  clickHandler(e) {
+    this.togglerow.emit(this.hostElement);
+    const elRect = this.rippleContainer.getBoundingClientRect();
+    const elLeft = elRect.left;
+    const elTop = elRect.top;
+    const rippleEl = document.createElement('div');
+    const elSize = elRect.width > elRect.height ? elRect.width : elRect.height;
+    rippleEl.classList.add('pn-ripple');
+    this.rippleContainer.appendChild(rippleEl);
+    rippleEl.style.height = `${elSize * 2}px`;
+    rippleEl.style.width = `${elSize * 2}px`;
+    rippleEl.style.left = e.clientX > 0 ? `${e.clientX - elLeft}px` : `50%`;
+    rippleEl.style.top = e.clientY > 0 ? `${e.clientY - elTop}px` : `50%`;
+    setTimeout(() => rippleEl.remove(), 400);
+  }
+  /*---------------------------------------/UTILS-------------------------------------------*/
+  render() {
+    return (h(Host, { "data-state": "collapsed" }, h("div", { class: "accordion-content" }, h("button", { type: "button", class: "accordion-title", onClick: (e) => this.clickHandler(e) }, this.label ? this.label : '', h("slot", { name: "label" }), h("svg", { width: "18", height: "10", viewBox: "0 0 18 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M9.70711 9.70711C9.31658 10.0976 8.68342 10.0976 8.29289 9.70711L0.292892 1.70711C-0.0976315 1.31658 -0.0976315 0.683417 0.292892 0.292893C0.683418 -0.0976315 1.31658 -0.0976315 1.70711 0.292893L9 7.58579L16.2929 0.292893C16.6834 -0.0976315 17.3166 -0.0976315 17.7071 0.292893C18.0976 0.683417 18.0976 1.31658 17.7071 1.70711L9.70711 9.70711Z", fill: "#232228" }))), h("div", { class: "content" }, h("slot", null)))));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnAccordionRowCss; }
+};
+PnaccordionItem = /*@__PURE__*/ proxyCustomElement(PnaccordionItem, [4, "pn-accordion-row", {
+    "label": [1025]
+  }]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-accordion-row"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-accordion-row":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, PnaccordionItem);
+      }
+      break;
+  } });
+}
+
+const PnAccordionRow = PnaccordionItem;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnAccordionRow, defineCustomElement };

package/umd/modules/@postnord/web-components/components/pn-accordion.d.ts

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

package/umd/modules/@postnord/web-components/components/pn-accordion.js

@@ -0,0 +1,76 @@
+import { HTMLElement, forceUpdate, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+
+const pnAccordionCss = "pn-accordion{display:block;position:relative}pn-accordion .accordion-bg{position:absolute;left:0;right:0;top:0;bottom:0;-webkit-transform-origin:top left;transform-origin:top left;-webkit-transition:-webkit-transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);transition:-webkit-transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.3s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.3s cubic-bezier(0.7, 0, 0.3, 1);pointer-events:none}[data-flipping]>pn-accordion .accordion-bg{-webkit-transition:none;transition:none;-webkit-transform:scaleY(calc(1 / var(--dh)));transform:scaleY(calc(1 / var(--dh)))}";
+
+let Pnaccordion = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    this.accordionRows = Array.from(document.querySelectorAll("pn-accordion-row"));
+  }
+  componentDidLoad() {
+    if (this.mo)
+      this.mo.disconnect();
+    const mo = this.mo = new MutationObserver(() => {
+      forceUpdate(this.hostElement);
+    });
+    mo.observe(this.hostElement, { childList: true });
+  }
+  toggleHandler({ detail }) {
+    const arr = this.accordionRows.slice(this.accordionRows.indexOf(detail) + 1);
+    this.animate(() => this.toggleState(detail), [this.hostElement, ...arr]);
+  }
+  toggleState(el) {
+    el.dataset.state === "collapsed" ? el.dataset.state = "open" : el.dataset.state = "collapsed";
+  }
+  getRect(el) {
+    return el.getBoundingClientRect();
+  }
+  animate(layoutChange, firstEls, getLastEls = () => firstEls) {
+    const firstElsRects = Array.from(firstEls).map((el) => [el, this.getRect(el)]);
+    requestAnimationFrame(() => {
+      layoutChange();
+      const lastElsRects = Array.from(getLastEls()).map((el) => [el, this.getRect(el)]);
+      //@ts-ignore
+      firstElsRects.forEach(([firstEl, firstRect], i) => {
+        let [lastEl, lastRect] = lastElsRects[i];
+        const dx = lastRect.x - firstRect.x;
+        const dy = lastRect.y - firstRect.y;
+        const dw = lastRect.width / firstRect.width;
+        const dh = lastRect.height / firstRect.height;
+        lastEl.dataset.flipping = true;
+        lastEl.style.setProperty("--dx", dx);
+        lastEl.style.setProperty("--dy", dy);
+        lastEl.style.setProperty("--dw", dw);
+        lastEl.style.setProperty("--dh", dh);
+        requestAnimationFrame(() => delete lastEl.dataset.flipping);
+      });
+    });
+  }
+  render() {
+    return (h(Host, null, h("div", { class: "accordion-bg" }), h("slot", null)));
+  }
+  get hostElement() { return this; }
+  static get style() { return pnAccordionCss; }
+};
+Pnaccordion = /*@__PURE__*/ proxyCustomElement(Pnaccordion, [4, "pn-accordion", {
+    "accordionRows": [32]
+  }, [[0, "togglerow", "toggleHandler"]]]);
+function defineCustomElement$1() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-accordion"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-accordion":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Pnaccordion);
+      }
+      break;
+  } });
+}
+
+const PnAccordion = Pnaccordion;
+const defineCustomElement = defineCustomElement$1;
+
+export { PnAccordion, defineCustomElement };

package/umd/modules/@postnord/web-components/components/pn-button.d.ts

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

package/umd/modules/@postnord/web-components/components/pn-button.js

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

package/umd/modules/@postnord/web-components/components/pn-button2.js

@@ -0,0 +1,226 @@
+import { HTMLElement, h, Host, proxyCustomElement } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './pn-icon2.js';
+import { d as defineCustomElement$1 } from './pn-spinner2.js';
+
+const pnButtonCss = "pn-button{display:inline-block}pn-button button,pn-button a{color:#fff;cursor:pointer;padding:0.75em 1.2em;width:100%;border:none;border-radius:3em;outline:none;position:relative;font-size:1em;min-height:3em;min-width:5.5em;font-weight:500;background:transparent;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;-webkit-transition:color 0.3s;transition:color 0.3s;-webkit-tap-highlight-color:transparent;}pn-button button pn-icon,pn-button a pn-icon{-ms-flex-negative:0;flex-shrink:0;margin:0 0 0 0.5em}pn-button button pn-icon svg path,pn-button a pn-icon svg path{fill:#fff;-webkit-transition:fill 0.3s;transition:fill 0.3s}pn-button button .pn-button-content,pn-button a .pn-button-content{z-index:2;-webkit-transition:opacity 0.1s, -webkit-transform 0.2s;transition:opacity 0.1s, -webkit-transform 0.2s;transition:opacity 0.1s, transform 0.2s;transition:opacity 0.1s, transform 0.2s, -webkit-transform 0.2s;-webkit-transition-delay:0.2s;transition-delay:0.2s;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}pn-button button .pn-button-bg,pn-button a .pn-button-bg{position:absolute;width:100%;height:100%;top:0;left:50%;border-radius:3em;border:0.1rem solid transparent;background:#005D92;-webkit-transform:translateX(-50%);transform:translateX(-50%);-webkit-transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, -webkit-box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, -webkit-box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s;transition:width 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.2s, background 0.1s, box-shadow 0.1s, -webkit-box-shadow 0.1s;overflow:hidden}pn-button button .pn-button-bg::after,pn-button a .pn-button-bg::after{content:\"\";position:absolute;will-change:transform;-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1);transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1);width:100%;height:100%;background:#0D234B;border-radius:inherit;left:0;-webkit-transform:translateX(-103%);transform:translateX(-103%);opacity:0.5}pn-button button.pn-button-light,pn-button a.pn-button-light{color:#005D92}pn-button button.pn-button-light pn-icon svg path,pn-button a.pn-button-light pn-icon svg path{fill:#005D92}pn-button button.pn-button-light pn-spinner .circle,pn-button a.pn-button-light pn-spinner .circle{stroke:#005D92}pn-button button.pn-button-light pn-spinner .dot,pn-button a.pn-button-light pn-spinner .dot{fill:#005D92}pn-button button.pn-button-light .pn-button-bg,pn-button a.pn-button-light .pn-button-bg{border:0.1rem solid #005D92;background:#fff}pn-button button.pn-button-light .pn-button-bg:after,pn-button a.pn-button-light .pn-button-bg:after{background:#E0F8FF;opacity:1}pn-button button.pn-button-light .pn-button-bg .pn-ripple,pn-button a.pn-button-light .pn-button-bg .pn-ripple{background:#005D92}pn-button button.pn-button-warning,pn-button a.pn-button-warning{color:#A70707}pn-button button.pn-button-warning pn-icon svg path,pn-button a.pn-button-warning pn-icon svg path{fill:#A70707}pn-button button.pn-button-warning pn-spinner .circle,pn-button a.pn-button-warning pn-spinner .circle{stroke:#A70707}pn-button button.pn-button-warning pn-spinner .dot,pn-button a.pn-button-warning pn-spinner .dot{fill:#A70707}pn-button button.pn-button-warning .pn-button-bg,pn-button a.pn-button-warning .pn-button-bg{border:0.1rem solid #A70707;background:#FDEFEE}pn-button button.pn-button-warning .pn-button-bg:after,pn-button a.pn-button-warning .pn-button-bg:after{background:#A70707;opacity:1}pn-button button.pn-button-variation-borderless .pn-button-bg,pn-button a.pn-button-variation-borderless .pn-button-bg{border:0.1rem solid transparent;background:transparent}pn-button button.pn-button-variation-borderless.pn-button-dark .pn-button-bg:after,pn-button a.pn-button-variation-borderless.pn-button-dark .pn-button-bg:after{background:white;opacity:0.1}pn-button button.pn-button-variation-outlined .pn-button-bg,pn-button a.pn-button-variation-outlined .pn-button-bg{background:transparent}pn-button button.pn-button-variation-outlined.pn-button-dark .pn-button-bg,pn-button a.pn-button-variation-outlined.pn-button-dark .pn-button-bg{border-color:#FFFFFF}pn-button button.pn-button-variation-outlined.pn-button-dark .pn-button-bg::after,pn-button a.pn-button-variation-outlined.pn-button-dark .pn-button-bg::after{background:white;opacity:0.1}pn-button button.pn-button-variation-outlined.pn-button-light .pn-button-bg::after,pn-button a.pn-button-variation-outlined.pn-button-light .pn-button-bg::after{background:#00A0D6;opacity:0.1}pn-button button.pn-button-left-icon .pn-button-content,pn-button a.pn-button-left-icon .pn-button-content{-ms-flex-direction:row-reverse;flex-direction:row-reverse}pn-button button.pn-button-left-icon .pn-button-content pn-icon,pn-button a.pn-button-left-icon .pn-button-content pn-icon{margin:0 0.5em 0 0}pn-button button.icon-only,pn-button a.icon-only{width:3em;min-width:0}pn-button button.icon-only pn-icon,pn-button a.icon-only pn-icon{margin:0}pn-button button.icon-only.pn-button-small,pn-button a.icon-only.pn-button-small{width:2.286em;min-width:0;padding:0}pn-button button.pn-button-small,pn-button a.pn-button-small{font-size:1.4rem;padding:0.5em 1em;font-weight:normal;min-height:2.286em;min-width:none}a:focus>pn-button button .pn-button-bg,pn-button button:focus .pn-button-bg,pn-button a:focus .pn-button-bg{-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}a:focus>pn-button button .pn-button-bg:after,pn-button button:hover .pn-button-bg:after,pn-button button:focus .pn-button-bg:after,pn-button a:hover .pn-button-bg:after,pn-button a:focus .pn-button-bg:after{-webkit-transform:translateX(0);transform:translateX(0)}a:focus>pn-button button.pn-button-warning,pn-button button.pn-button-warning:hover,pn-button a.pn-button-warning:hover,pn-button button.pn-button-warning:focus,pn-button a.pn-button-warning:focus{color:#FFF}a:focus>pn-button button.pn-button-warning pn-icon svg path,pn-button button.pn-button-warning:hover pn-icon svg path,pn-button a.pn-button-warning:hover pn-icon svg path,pn-button button.pn-button-warning:focus pn-icon svg path,pn-button a.pn-button-warning:focus pn-icon svg path{fill:#FFF}a:focus>pn-button button.pn-button-warning pn-spinner .circle,pn-button button.pn-button-warning:hover pn-spinner .circle,pn-button a.pn-button-warning:hover pn-spinner .circle,pn-button button.pn-button-warning:focus pn-spinner .circle,pn-button a.pn-button-warning:focus pn-spinner .circle{stroke:#FFF}a:focus>pn-button button.pn-button-warning pn-spinner .dot,pn-button button.pn-button-warning:hover pn-spinner .dot,pn-button a.pn-button-warning:hover pn-spinner .dot,pn-button button.pn-button-warning:focus pn-spinner .dot,pn-button a.pn-button-warning:focus pn-spinner .dot{fill:#FFF}a:focus>pn-button button.pn-button-warning .pn-button-bg,pn-button button.pn-button-warning:focus .pn-button-bg,pn-button a.pn-button-warning:focus .pn-button-bg{-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-button .pn-ripple{-webkit-animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);animation:ripple 0.4s cubic-bezier(0.7, 0, 0.3, 1);position:absolute;border-radius:50%;background:#fff;-webkit-transform:translate(-50%, -50%) scale(0);transform:translate(-50%, -50%) scale(0);opacity:0.1;pointer-events:none;z-index:3}@-webkit-keyframes ripple{to{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:0}}@keyframes ripple{to{-webkit-transform:translate(-50%, -50%) scale(1);transform:translate(-50%, -50%) scale(1);opacity:0}}pn-button pn-spinner{position:absolute;-webkit-transform:scale(0);transform:scale(0)}pn-button[data-loading] pn-spinner{-webkit-transform:scale(1);transform:scale(1);-webkit-transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.3s;transition:-webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.3s;transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.3s;transition:transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.3s, -webkit-transform 0.2s cubic-bezier(0.7, 0, 0.3, 1) 0.3s}pn-button[data-loading] .pn-button-content{opacity:0;-webkit-transition-delay:0s;transition-delay:0s;-webkit-transform:translateY(100%);transform:translateY(100%)}pn-button[data-loading] .pn-button-bg{width:3em}pn-button[data-loading] button.pn-button-small .pn-button-bg,pn-button[data-loading] a.pn-button-small .pn-button-bg{width:2.286em}pn-button button .button-tooltip,pn-button a .button-tooltip{position:absolute;bottom:calc(100% + 0.75em);left:50%;background:#FFFFFF;padding:1em;border-radius:0.8rem;-webkit-box-shadow:0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);box-shadow:0 1.2px 3.6px rgba(0, 0, 0, 0.1), 0 6.4px 14.4px rgba(0, 0, 0, 0.13);z-index:1;max-width:min(95vw, 40em);-webkit-transition:-webkit-transform 0.15s cubic-bezier(0.7, 0, 0.3, 1);transition:-webkit-transform 0.15s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.15s cubic-bezier(0.7, 0, 0.3, 1);transition:transform 0.15s cubic-bezier(0.7, 0, 0.3, 1), -webkit-transform 0.15s cubic-bezier(0.7, 0, 0.3, 1);-webkit-transition-delay:0s;transition-delay:0s;-webkit-transform:scale(0) translateX(-50%);transform:scale(0) translateX(-50%);-webkit-transform-origin:bottom left;transform-origin:bottom left;width:-webkit-max-content;width:-moz-max-content;width:max-content;color:#000}pn-button button:before,pn-button a:before{content:\"\";width:0;height:0;border-left:0.75em solid transparent;border-right:0.75em solid transparent;border-top:0.75em solid #FFFFFF;-webkit-filter:drop-shadow(0 0.3rem 0.1rem rgba(0, 0, 0, 0.075));filter:drop-shadow(0 0.3rem 0.1rem rgba(0, 0, 0, 0.075));-webkit-transform:scale(0) translateX(-50%);transform:scale(0) translateX(-50%);bottom:102%;left:50%;position:absolute;z-index:2;-webkit-transition:-webkit-transform 0.15s linear;transition:-webkit-transform 0.15s linear;transition:transform 0.15s linear;transition:transform 0.15s linear, -webkit-transform 0.15s linear;-webkit-transition-delay:0.15s;transition-delay:0.15s;-webkit-transform-origin:bottom left;transform-origin:bottom left;pointer-events:none}pn-button button[data-tooltip-open] .button-tooltip,pn-button a[data-tooltip-open] .button-tooltip{-webkit-transition-delay:0.1s;transition-delay:0.1s}pn-button button[data-tooltip-open]:before,pn-button a[data-tooltip-open]:before{-webkit-transform:scale(1) translateX(-50%);transform:scale(1) translateX(-50%);-webkit-transition-delay:0s;transition-delay:0s;pointer-events:auto}pn-button button.button-tooltip-downwards .button-tooltip,pn-button a.button-tooltip-downwards .button-tooltip{bottom:unset;top:calc(100% + 0.75em);-webkit-transform-origin:top left;transform-origin:top left}pn-button button.button-tooltip-downwards:before,pn-button a.button-tooltip-downwards:before{top:102%;-webkit-transform-origin:top left;transform-origin:top left;-webkit-filter:drop-shadow(0 -0.3rem 0.1rem rgba(0, 0, 0, 0.02));filter:drop-shadow(0 -0.3rem 0.1rem rgba(0, 0, 0, 0.02));border-top:none;border-bottom:0.75em solid #FFFFFF}pn-button a{text-decoration:none}pn-button a:hover{color:#FFFFFF}pn-button a:hover.pn-button-light{color:#005D92}";
+
+let Pnbutton = class extends HTMLElement {
+  constructor() {
+    super();
+    this.__registerHost();
+    /** small, bool */
+    this.small = false;
+    /** Button type, dark(blue background), light(white background), warning(destructive actions) */
+    this.appearance = 'primary ';
+    /** Altering the button style, options are: 'outlined' (bordered button with no background) or 'borderless' (borderless button with no background, mostly used for links) */
+    this.variant = '';
+    /** Loading indicator */
+    this.loading = false;
+    /** Icon on the left side instead of on the right */
+    this.leftIcon = false;
+    this.icon = null;
+    this.type = 'button';
+    /** If you're using a button with only an icon, button text is still REQUIRED for the tooltip */
+    this.iconOnly = false;
+    this.ariaLabel = null;
+    this.ariaLabelledby = null;
+    this.ariaControls = null;
+    this.ariaPressed = null;
+    /** Pass an href to make the button into link (a-tag) */
+    this.href = null;
+    this.rel = null;
+    this.target = null;
+    this.download = null;
+    /*---------------------------------------TOOLTIP LOGIC-------------------------------------------*/
+    this.tooltipOpen = false;
+    this.ripple = function (e, el) {
+      const elRect = el.getBoundingClientRect();
+      const elLeft = elRect.left;
+      const elTop = elRect.top;
+      const rippleEl = document.createElement('div');
+      const elSize = elRect.width > elRect.height ? elRect.width : elRect.height;
+      rippleEl.classList.add('pn-ripple');
+      el.querySelector('.pn-button-bg').appendChild(rippleEl);
+      rippleEl.style.height = `${elSize * 2}px`;
+      rippleEl.style.width = `${elSize * 2}px`;
+      rippleEl.style.left = e.clientX > 0 ? `${e.clientX - elLeft}px` : `50%`;
+      rippleEl.style.top = e.clientY > 0 ? `${e.clientY - elTop}px` : `50%`;
+      setTimeout(() => rippleEl.remove(), 400);
+    };
+  }
+  componentDidLoad() {
+    this.checkIfLink();
+    if (this.iconOnly)
+      this.initTooltip();
+  }
+  openHandler() {
+    if (this.tooltipOpen) {
+      this.checkTooltipPosition();
+      return;
+    }
+    this.setTooltipOffset();
+  }
+  initTooltip() {
+    this.tooltipEl = this.hostElement.querySelector('.button-tooltip');
+    const buttonEl = this.hostElement.querySelector('.pn-button');
+    const tooltipAnchor = this.linkEl ? this.linkEl : buttonEl;
+    const openEvents = ['mouseover', 'focus'];
+    const closeEvents = ['mouseleave', 'blur'];
+    const eventListeners = [...openEvents, ...closeEvents];
+    eventListeners.forEach((e) => {
+      tooltipAnchor.addEventListener(e, (event) => {
+        // Should open?
+        if (openEvents.includes(event.type)) {
+          this.tooltipOpen = true;
+          return;
+        }
+        // Should close?
+        if (closeEvents.includes(event.type)) {
+          this.tooltipOpen = false;
+        }
+      });
+    });
+  }
+  setTooltipOffset() {
+    this.tooltipEl.style.transform = `scale(${Number(this.tooltipOpen)}) translateX(-50%) translateX(${this.tooltipDx}px)`;
+  }
+  checkTooltipPosition() {
+    this.tooltipEl.style.transition = 'none';
+    this.tooltipEl.style.transform = 'scale(1) translateX(-50%)';
+    this.tooltipDownwards = false;
+    requestAnimationFrame(() => {
+      const { x, y, right } = this.tooltipEl.getBoundingClientRect();
+      const extraMargin = 8;
+      this.tooltipDx = '0';
+      this.tooltipDownwards = y < 0;
+      this.tooltipEl.style.transform = '';
+      if (x < 0)
+        this.tooltipDx = `${x * -1 + extraMargin}`;
+      if (right > window.innerWidth)
+        this.tooltipDx = `${window.innerWidth - right - extraMargin}`;
+      requestAnimationFrame(() => {
+        this.tooltipEl.style.transition = '';
+        this.setTooltipOffset();
+      });
+    });
+  }
+  /*---------------------------------------/TOOLTIP LOGIC-------------------------------------------*/
+  checkIfLink() {
+    var _a;
+    if (((_a = this.hostElement.parentElement) === null || _a === void 0 ? void 0 : _a.nodeName) === 'A') {
+      this.linkEl = this.hostElement.parentElement;
+      this.hostElement.parentElement.style.setProperty('outline', 'none');
+      this.hostElement.querySelector('button').setAttribute('tabindex', '-1');
+    }
+  }
+  getClassNames() {
+    let classNames = 'pn-button ';
+    const dark = ['primary', 'dark'];
+    const light = ['secondary', 'light'];
+    const variations = ['borderless', 'outlined'];
+    if (this.small)
+      classNames += 'pn-button-small ';
+    if (this.leftIcon)
+      classNames += 'pn-button-left-icon ';
+    if (variations.includes(this.variant))
+      classNames += `pn-button-variation-${this.variant} `;
+    if (this.iconOnly)
+      classNames += 'icon-only ';
+    if (this.tooltipDownwards)
+      classNames += 'button-tooltip-downwards ';
+    if (dark.includes(this.appearance)) {
+      classNames += 'pn-button-dark ';
+    }
+    else if (light.includes(this.appearance)) {
+      classNames += 'pn-button-light ';
+    }
+    else if (this.appearance === 'warning') {
+      classNames += 'pn-button-warning ';
+    }
+    else {
+      classNames += 'pn-button-dark ';
+    }
+    // Loading state
+    if (this.loading) {
+      this.hostElement.dataset.loading = "true";
+    }
+    else {
+      if (this.hostElement.dataset.loading)
+        delete this.hostElement.dataset.loading;
+    }
+    return classNames;
+  }
+  getAttributes() {
+    var _a, _b;
+    const btnAttrs = {
+      type: this.type
+    };
+    const linkAttrs = {
+      href: this.href,
+      rel: (!this.rel && this.target === "_blank") ? 'noopener' : this.rel,
+      target: (_a = this.target) !== null && _a !== void 0 ? _a : null,
+      download: (_b = this.download) !== null && _b !== void 0 ? _b : null
+    };
+    return this.href ? linkAttrs : btnAttrs;
+  }
+  getTagName() {
+    return this.href ? "a" : "button";
+  }
+  render() {
+    const TagName = this.getTagName();
+    return (h(Host, { class: "pn-button" }, h(TagName, Object.assign({ class: this.getClassNames(), "data-loading": this.loading, onClick: (e) => this.ripple(e, this.hostElement), "aria-label": this.ariaLabel, "aria-labelledby": this.ariaLabelledby, "data-tooltip-open": this.tooltipOpen, "aria-controls": this.ariaControls, "aria-pressed": this.ariaPressed }, this.getAttributes()), h("div", { class: "pn-button-bg" }), h("div", { class: "pn-button-content" }, !this.iconOnly &&
+      h("slot", null), this.icon &&
+      h("pn-icon", { small: this.small, symbol: this.icon })), h("pn-spinner", { light: true }), this.iconOnly &&
+      h("div", { class: "button-tooltip" }, h("slot", null)))));
+  }
+  get hostElement() { return this; }
+  static get watchers() { return {
+    "tooltipOpen": ["openHandler"]
+  }; }
+  static get style() { return pnButtonCss; }
+};
+Pnbutton = /*@__PURE__*/ proxyCustomElement(Pnbutton, [4, "pn-button", {
+    "small": [4],
+    "appearance": [1],
+    "variant": [1],
+    "loading": [516],
+    "leftIcon": [4, "left-icon"],
+    "icon": [1],
+    "type": [1],
+    "iconOnly": [4, "icon-only"],
+    "ariaLabel": [1, "aria-label"],
+    "ariaLabelledby": [1, "aria-labelledby"],
+    "ariaControls": [1, "aria-controls"],
+    "ariaPressed": [1, "aria-pressed"],
+    "href": [1],
+    "rel": [1],
+    "target": [1],
+    "download": [4],
+    "tooltipOpen": [32],
+    "tooltipDownwards": [32]
+  }]);
+function defineCustomElement() {
+  if (typeof customElements === "undefined") {
+    return;
+  }
+  const components = ["pn-button", "pn-icon", "pn-spinner"];
+  components.forEach(tagName => { switch (tagName) {
+    case "pn-button":
+      if (!customElements.get(tagName)) {
+        customElements.define(tagName, Pnbutton);
+      }
+      break;
+    case "pn-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$2();
+      }
+      break;
+    case "pn-spinner":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$1();
+      }
+      break;
+  } });
+}
+
+export { Pnbutton as P, defineCustomElement as d };

package/umd/modules/@postnord/web-components/components/pn-calendar.d.ts

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

package/umd/modules/@postnord/web-components/components/pn-calendar.js

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